/*reset*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-size:100%;}
address, cite, dfn, em, var {font-style:normal;}
small {font-size:12px;}
ul, ol {list-style:none;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
legend {color:#000;}
fieldset, img {border:0;}
button, input, select, textarea {font-size:100%;}
table {border-collapse:collapse;border-spacing:0;}
i, em, cite,s{font-style:normal; text-decoration:none;}
.clear {clear:both;width:0px;height:0px;margin:0;padding:0;font-size:0px; overflow:hidden;}
.left {float:left;}
.right {float: right;}
iframe {margin:0;padding:0;}
textarea {resize:none;}
input {outline: none;}
textarea {outline: none;}
.clearfix:after {content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden;}
.clearfix {zoom:1;}

html,body{ height:100%; overflow:hidden;}
*::before,*::after{ content:"";}
body{ font:12px/22px \5fae\8f6f\96c5\9ed1,\5b8b\4f53,Arial,Sans-serif; background:#000;}
a{ text-decoration:none; color:#74818e;}
a:hover{ text-decoration:underline;}
a,area { blr:expression(this.onFocus=this.blur());} 
:focus{ outline:none;}
/*step_nav*/
.step_nav{height:-webkit-calc(100% - 90px);height:-moz-calc(100% - 90px);height:-o-calc(100% - 90px); overflow:hidden; position:relative; left:0; top:0;}
/*top*/
.top{ background:rgba(0,0,0,.5) !important; height:57px; width:100%; background:#000; position:relative; z-index:9999;}
.top .top_con{margin:0 auto; height:57px; text-align:center;}
.top_con h1{ background:url(../images/logo.jpg) no-repeat 8px center; height:57px; text-indent:-999em; float:left; width:283px;}
.top_con .top_right{ height:42px;}
/*foot*/
.foot{ height:90px; background:rgba(0,0,0,0.5); width:100%; position:relative; z-index:999;}
.foot .foot_con{ padding-top:20px; margin:0 auto;}
.ft_zb{ height:25px;  text-align:center;}
.ft_zb li{ padding:0 9px; height:25px; line-height:25px; background:url(../images/ftzbbg.jpg) no-repeat left center; display:inline;}
.ft_zb .li_nb{ background:none;}
.ft_zb li img{ vertical-align:middle;}
.ft_zb li:first-child{ background:none;}
.foot p{ color:#373737; font-size:12px; text-align:center; padding-top:10px;}
/*main*/
.main{ overflow:hidden;}
.img_box{ width:100%;height:100%;}
.img_box li{ float:left;}
.img_box li a{ display:block;position:relative;top:0;filter: Alpha(opacity=75);-moz-opacity:.75;opacity:0.75; text-decoration:none;  height:100%; float:left; }
.img_box a:hover{filter: Alpha(opacity=100);-moz-opacity:1;opacity:1;}
.img_box a{
	transition:opacity 0.5s ease-out 0s;
	-webkit-transition:opacity 0.5s ease-out 0s;
	-moz-transform:opacity 0.5s ease-out 0s;
	-o-transform:opacity 0.5s ease-out 0s;
	-ms-transform:opacity 0.5s ease-out 0s;
}
.img_box a img{ display:block;}
.img_box span{display:block; height:58px;width:58px; position:absolute; top:632px; left:135px;}
.img_box span s{ position:absolute; display:block;right:0; top:0; z-index:10;}
.img_box span i{ display:block;width:25%;overflow: hidden;}

/*step_slides*/
.step_slides{ overflow:hidden; position:absolute; top:100%; left:0; width:100%;}
.step_slides .top{ height:65px; overflow:hidden;}
.step_slides .top a{ display:block;color:#acacac; height:65px; float:left; margin-right:40px; width:90px; text-decoration:none;-webkit-transition:color 0.5s ease-in-out;-moz-transition:color 0.5s ease-in-out;-o-transition:color 0.5s ease-in-out;-ms-transition:color 0.5s ease-in-out;}
.step_slides .top a h3{font-size:20px; line-height:20px; padding-top:10px;}
.step_slides .top a h6{ font-size:14px; line-height:18px;}
.step_slides .top a p{ width:90px; height:4px; background:#666; margin-top:2px; font-size:0}
.step_slides .top a:hover{ color:#ac9968; text-decoration:none;}
.step_slides .top a:hover p span{ width:90px; }
.step_slides .top a p span{ display:block; height:4px; float:left; background:#ac9968;
	transition:width 0.5s ease-in-out;
	-webkit-transition:width 0.5s ease-in-out;
	-moz-transform:width 0.5s ease-out;
	-o-transform:width 0.5s ease-out;
	-ms-transform:width 0.5s ease-out;}
.step_slides .top .current{ color:#ac9968;}
.step_slides .top .current p span{ width:100%;}

.step_slides .top a:nth-child(1):hover,.step_slides .top a:nth-child(1).current{ color:#b6553f;}
.step_slides .top a:nth-child(2):hover,.step_slides .top a:nth-child(2).current{ color:#88b8d8;}
.step_slides .top a:nth-child(3):hover,.step_slides .top a:nth-child(3).current{ color:#ca8db8;}
.step_slides .top a:nth-child(4):hover,.step_slides .top a:nth-child(4).current{ color:#ac9968;}
.step_slides .top a:nth-child(1):hover p span,.step_slides .top a:nth-child(1).current span{ background:#b6553f;}
.step_slides .top a:nth-child(2):hover p span,.step_slides .top a:nth-child(2).current span{ background:#88b8d8;}
.step_slides .top a:nth-child(3):hover p span,.step_slides .top a:nth-child(3).current span{ background:#ca8db8;}
.step_slides .top a:nth-child(4):hover p span,.step_slides .top a:nth-child(4).current span{ background:#ac9968;}

.top_left{ background:url(../images/logo.jpg) no-repeat 8px center; padding-left:308px; float:left; height:65px;}
.top_right{ line-height:15px; color:#747474; font-size:14px; padding-right:10px; padding-top:15px; float:right; height:65px;width:130px;}

.slides{ width:100%;height:100%;}
.slides ul li{ width:100%; height:100%;}
.slides .t1,.slides .t2,.slides .t3{ display:block; position:absolute;}
.slides .t1{ width:492px; height:196px;}
.slides .t2{ width:329px; height:70px;}
.slides .t2 img{filter: Alpha(opacity=80);-moz-opacity:.8;opacity:0.8;-webkit-transition:all 0.3s ease-in-out 0;-moz-transition:all 0.3s ease-in-out 0;-o-transition:all 0.3s ease-in-out 0;-ms-transition:all 0.3s ease-in-out 0}
.slides .t2:hover img{filter: Alpha(opacity=100);-moz-opacity:1;opacity:1;}
.slides .t3{ width:389px; height:144px;}
.slides .s1{ background:#a9d1ed;}
.slides .s2{ background:#f0c5e4;}
.slides .s3{ background:#a28d58;}
.slides img{display: block;}

@media screen and (max-width: 920px){
	.top_left{ background:none; padding-left:40px}
	.top_right{ display:none;}
	}
@media screen and (max-width: 415px){
	.top_con h1 span{ display:none;}
	.top_con h1{ width:0}
	}