*{margin:0px;padding:0px;}
body{overflow: hidden;}
body,input{background:#fff;font-size:12px;font-family:"Microsoft YaHei";} 
a{text-decoration:none;cursor:pointer;}
li{list-style-type:none;}
.fl{float:left;}
.fr{float:right;}
.wrap{width:100%;overflow: hidden;}
.con{width:1200px;margin:0px auto;overflow: initial;}
.top{margin-top:48px;}
.top_con{height:100px;}
.logo{ float:left;}

/*引导页风格5*/

/*头部开始*/
.h5_ydy_zhenping{ width:100%; position:absolute; top:50%; margin-top: -272px;}

.h5_banner{ height:710px; overflow:hidden; position:relative; background:#000;}
.h5_banner_video{  position: absolute; left: 0;top: 0px; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}

.h5_header{ position:absolute; left:0; top:0; width:100%; height:60px; padding:10px 0;}
.h5_header_son{ float:left; padding:0 15px;}
.h5_header_son img{ height:55px;}
.h5_header_logo{ display:block;}
.h5_header_right{ float:right; margin-right:10px;}
.h5_header_dh{ float:left; line-height:55px; background:url(../images/tel_bai.png) no-repeat; height:55px; font-size:20px; color:#fff; padding-left: 50px; background-position: 15px 13px;}
.h5_header_text{ float:left; line-height:60px; font-size:14px; color:#FFF;}
.h5_header_text a{ color:#FFF;}
.h5_ydy_nav {
    text-align: center;
    position: absolute;
    width: 100%;
	top:110%;
    z-index: 50;
}


/*头部结束*/

/*banner中心部分*/
.h5_baner_text{ text-align:center;}
.h5_baner_text h2{ color:#FFF; font-size:40px; color: transparent;
-webkit-text-stroke: 1px #fff;
letter-spacing: 0.04em;
background-color: }

/*正方形*/
.main_zhenfangxin{ margin:0 auto; position:relative; top:20%; left:50%; margin-left: -570px;}
.h5_tilter {display: block; width: 300px;height: 360px;margin: 1.5em 2.5em; color: #fff; flex: none;perspective: 1000px;float:left;overflow:hidden;}
.tilter__figure::before {content: ''; position: absolute;width: 90%; height: 90%; top: 5%; left: 5%; box-shadow: 0 30px 20px rgba(35,32,39,0.5);}
.tilter__figure > * { transform: translateZ(0px);}
.tilter__figure, .tilter__image { margin: 0; width: 100%;height: 100%;display: block;}
.tilter * {pointer-events: none;}
.tilter__deco { position: absolute;top: 0;left: 0; width: 100%; height: 100%;overflow: hidden;}
.tilter__figure > * {transform: translateZ(0px);}
.tilter__deco--shine div { position: absolute; width: 200%; height: 200%; top: -50%;left: -50%; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);}
.tilter__deco { position: absolute; top: 0;left: 0; width: 100%;height: 100%; overflow: hidden;}
.tilter__caption {position: absolute;bottom: 0; font-size:14px;padding: 4em;}
.tilter--7 .tilter__deco--lines { stroke-width: 20px;transform: scale3d(0.9,0.9,1); opacity: 0;transition: transform 0.3s, opacity 0.3s;}
svg:not(:root) { overflow: hidden;}
.tilter__deco--lines { fill: none; stroke: #fff;stroke-width: 1.5px;}
.tilter:hover,.tilter:focus {color: #fff;outline: none;}
.tilter__title{ overflow:hidden; white-space:nowrap; text-overflow: ellipsis;}
.tilter--7:hover .tilter__deco--lines {opacity: 1;transform: scale3d(1,1,1);}*/
/*正方形结束*/

/*nav*/
.h5_ydy_nav{ text-align:center; position:absolute; width:100%; top:80%; z-index:50;}

/*幽灵按钮*/
.button_box{}
.button_link{ display:inline-block;position:relative;text-decoration:none;font-size:18px;color:#fff;width:200px;text-align:center;height:70px;line-height:70px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-transition:0.4s;-o-transition:0.4s;transition:0.4s;}
.button_link:hover{border:2px solid rgba(255,255,255,1);}
.button_link .line{display:inline-block;background-color:#FFF;position:absolute;-webkit-transition:0.5s ease;-o-transition:0.5s ease;transition:0.5s ease;}
.button_link .line_top{height:2px;width:0;left:-50%;top:-2px;}
.button_link:hover .line_top{width:100%;left:-2px;}
.button_link .line_right{height:0;width:2px;top:-50%;right:-2px;}
.button_link:hover .line_right{height:100%;top:-2px;}
.button_link .line_bottom{width:2px;height:0;bottom:-50%;left:-2px;}
.button_link:hover .line_bottom{height:100%;bottom:-2px;}
.button_link .line_left{height:2px;width:0;right:-50%;bottom:-2px;}
.button_link:hover .line_left{width:100%;right:-2px;}
/*幽灵按钮结束*/

.h5_right_animate{
    animation: righteaseinAnimate 2s ease 1;    /*调用已定义好的动画位子从右飞入页面righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: righteaseinAnimate 2s ease 1;
    -moz-animation: righteaseinAnimate 2s ease 1;
    -ms-animation: righteaseinAnimate 2s ease 1;
    -o-animation: righteaseinAnimate 2s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}


.h5_right_animate2{
    animation: righteaseinAnimate 3s ease 1;    /*调用已定义好的动画位子从右飞入页面righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: righteaseinAnimate 3s ease 1;
    -moz-animation: righteaseinAnimate 3s ease 1;
    -ms-animation: righteaseinAnimate 3s ease 1;
    -o-animation: righteaseinAnimate 3s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}

.h5_right_animate3{
    animation: righteaseinAnimate 5s ease 1;    /*调用已定义好的动画位子从右飞入页面righteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: righteaseinAnimate 5s ease 1;
    -moz-animation: righteaseinAnimate 5s ease 1;
    -ms-animation: righteaseinAnimate 5s ease 1;
    -o-animation: righteaseinAnimate 5s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; 
}

.ht5_bottom_top{animation:ht5_bottom_top 2s .2s ease both;} /*设置动画 调用 从下到上*/ 

.h5_left_animate{
    animation: lefteaseinAnimate 2s ease 1;    /*调用已定义好的动画文字从左飞入页面 lefteaseinAnimate，全程运行时间1S，进入的速度曲线为ease，只播放一次*/
    -webkit-animation: lefteaseinAnimate 2s ease 1;
    -ms-animation: lefteaseinAnimate 2s ease 1;
    -o-animation: lefteaseinAnimate 2s ease 1;
    -moz-animation: lefteaseinAnimate 2s ease 1;
    
    /*规定动画的最后状态为结束状态*/
    animation-fill-mode:forwards;
    -webkit-animation-fill-mode: forwards;  
      -o-animation-fill-mode: forwards; 
      -ms-animation-fill-mode: forwards;   
      -moz-animation-fill-mode: forwards; /*调用时给body添加一个overflow: hidden; 设置溢出隐藏，否则文字起始位移超过页面大小就会在页面下方出现横的滚动条*/
}



.ht5_top_bottom{animation:ht5_top_bottom 3s .2s ease both;} /*设置动画 调用 从上到下
/*从上到下*/
@-webkit-keyframes ht5_top_bottom{
    0%{opacity:0;
    -webkit-transform:translateY(-1800px)}
    60%{opacity:1;
    -webkit-transform:translateY(20px)}
    80%{-webkit-transform:translateY(-10px)}
    100%{-webkit-transform:translateY(0)}
}

@-moz-keyframes ht5_top_bottom{
    0%{opacity:0;
    -moz-transform:translateY(-1800px)}
    60%{opacity:1;
    -moz-transform:translateY(20px)}
    80%{-moz-transform:translateY(-10px)}
    100%{-moz-transform:translateY(0)}
}
@-ms-keyframes ht5_top_bottom{
    0%{opacity:0;
    -ms-transform:translateY(-1800px)}
    60%{opacity:1;
    -ms-transform:translateY(2px)}
    80%{-ms-transform:translateY(-10px)}
    100%{-ms-transform:translateY(0)}
}
/*从上到下 end*/

/*从下到上*/
@-webkit-keyframes ht5_bottom_top{
	0%{opacity:0;
	-webkit-transform:translateY(0px)}
	100%{opacity:1;
	-webkit-transform:translatey(-40px)}	
}
@-moz-keyframes ht5_bottom_top{
	0%{opacity:0;
	-webkit-transform:translateY(0px)}
	100%{opacity:1;
	-webkit-transform:translatey(-40px)}	
}
@-ms-keyframes ht5_bottom_top{
	0%{opacity:0;
	-webkit-transform:translateY(0px)}
	100%{opacity:1;
	-webkit-transform:translatey(-40px)}	
}
/*从下到上 end*/

@keyframes righteaseinAnimate{
    0%{ transform: translateX(2000px); opacity: 0;}   /*在0%时设置文字在想X轴2000px位移处（右边），透明度为0，也就是看不见文字*/
    100%{ transform: translateX(0px); opacity: 1;}      /*在100%时设置文字在想X轴0px位移处，也就是原始布局的位置，透明度为1，也就是文字可以看见了*/
}
@-webkit-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(2000px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-o-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(2000px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-ms-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(2000px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
@-moz-keyframes righteaseinAnimate{
    0%{ -webkit-transform: translateX(2000px); opacity: 0;}
    100%{ -webkit-transform: translateX(0px); opacity: 1;}
}
/*nav结束*/


/*底部*/
.h5_footer{ position:absolute; bottom:0px; width:100%; height:38px; line-height:20px; z-index:999; background:url(../images/touming.png);}
.h5_footer_0{ color:#FFF; line-height:38px; text-align:center; font-size:14px;}
.h5_footer_0 a{ color:#FFF;}
/*底部结束*/

/*banner 中心部分结束*/
  /*大图*/

.slide {
	width:100%;
	position:relative;
	
	background:#000;
}
.slide .slide_bd {
	margin:0 auto;
	position:relative;
	z-index:0;
	overflow:hidden;
	width:100%;
}
.slide .slide_bd ul {
	width:100% !important;
}
.slide .slide_bd li {
	width:100% !important;
	height:450px;
	overflow:hidden;
	text-align:center;
	background-position:center;
	background:#000 no-repeat center;
}
.slide .slide_bd li a {
	display:block;
	height:100%;
}
.slide .slide_hd {
	width:100%;
	position:absolute;
	z-index:0;
	bottom:10px;
	left:0;
	height:20px;
	line-height:30px;
}
.slide .slide_hd ul {
	text-align:center;
	display: none;
}
.slide .slide_hd ul li {
	cursor:pointer;
	display:inline-block;
	*display:inline;
	zoom:1;
	width:65px;
	height:9px;
	margin:0 5px;
	overflow:hidden;
	background: #333;
	filter:alpha(opacity=50);
	opacity:0.5;	
	line-height:999px;
}
.slide .slide_hd ul .on {
	background:#fc6;
}
.slide .prev,.slide .next {
	display:none;
	position:absolute;
	z-index:0;
	top:50%;
	margin-top:-40px;
	left: 10%;
	z-index:0;
	width:65px;
	height:68px;
	/*background:url(/template/default/index/style/style_1/images/slide/nav.png) 0px 0px no-repeat; */
	cursor:pointer;
	filter:alpha(opacity=50);
	opacity:0.5;
}
.slide .next {
	left:85%;
	background-position:0 -84px;
}
.slide .next:hover {
	background-position:0 -255px;
}
.slide .prev:hover
{
	background-position:0 -170px;
}