@charset "utf-8";

/* 定义全局 */
html,body{ width:100%; height:100%; overflow:hidden;}
html{ overflow-x:hidden;}
body{ background:#fff; margin:0; padding:0; font:normal 12px/22px 微软雅黑, Arial, Helvetica, sans-serif; color:#424242; behavior:url("csshover3.htc"); -webkit-text-size-adjust:none;}
form,h1,h2,h3,h4,h5,h6,dl,dt,dd{ margin:0; padding:0; text-align:left; font-weight:normal; font-size:12px;}
input{margin:0; outline:none;}
img{ border:0; margin:0; padding:0; display:block;}
div{ margin:0; padding:0; text-align:left; line-height:22px;}
p{ border:0; margin-top:0;}
ol,ul,li{ margin:0; padding:0; list-style:none;}
a{ font-size:12px; color:#424242; text-decoration:none;}
a:hover{ font-size:12px; color:#FF2400; text-decoration:none;}
.clearfix:after{ clear:both; height:0; overflow:hidden; display:block; visibility:hidden; content:".";}

/*自定义*/
/*头部*/
header{ position:fixed; left:0; top:0; background:url(../images/dh_01.png) repeat; width:100%; height:82px; z-index:99;}
header nav{ width:1160px; height:82px; border:0; margin:0 auto;}
header nav .logo{ background:url(../images/dh_02.png) no-repeat; width:160px; height:58px; border:0; display:block; margin-top:12px; float:left;}
header nav .spirit{ background:url(../images/c_01.png) no-repeat; width:206px; height:17px; margin:40px 0 0 15px; float:left;}
header nav .menu{ width:700px; height:82px; border:0; float:right;}
header nav .menu a{ width:100px; height:82px; border:0; display:block; float:left; text-align:center; line-height:82px; color:#fff; font-size:15px;}
header nav .menu a:hover{ color:#FF2400;}
/*主体*/
.section-wrap{ width:100%; height:100%; overflow:visible; transition:transform 1s cubic-bezier(0.86,0,0.03,1); -webkit-transition:-webkit-transform 1s cubic-bezier(0.86,0,0.03,1);}
.section-wrap .section{ position:relative; width:100%; height:100%;}
#firstpage{ background:url(../images/bg_01.jpg) no-repeat 50% 0; background-size:cover;}
#secondpage{ background:url(../images/bg_02.jpg) no-repeat 50% 0; background-size:cover;}
#thirdpage{ background:url(../images/bg_03.jpg) no-repeat 50% 0; background-size:cover; position:relative;}
#fourthpage{ background:url(../images/s4_01.jpg) no-repeat 50% 0; background-size:cover;}
#fifthpage{ background:url(../images/s5_01.jpg) no-repeat 50% 0; background-size:cover;}
/*banner*/
/*.bannerout{ width:1200px; height:100%; margin:0 auto; position:relative;}
.bannerin{ width:1920px; height:100%; position:absolute; top:0; left:-360px;}
.bannerpic{ width:1920px; height:100%; overflow:hidden; position:relative;}
.bannerpic ul{ width:1920px; height:100%; position:absolute;}
.bannerpic li{ width:1920px; height:100%; float:left; overflow:hidden; position:relative;}
.bannerpic li:first-child{ background:url(../images/banner_01.jpg) no-repeat 50% 0; background-size:cover;}
.bannerpic li:nth-child(2){ background:url(../images/banner_02.jpg) no-repeat 50% 0; background-size:cover;}
.bannerpic li:nth-child(3){ background:url(../images/banner_03.jpg) no-repeat 50% 0; background-size:cover;}
.bannerpic li:nth-child(4){ background:url(../images/banner_04.jpg) no-repeat 50% 0; background-size:cover;}
.bannerpic li:nth-child(5){ background:url(../images/banner_05.jpg) no-repeat 50% 0; background-size:cover;}
.bannerpic .btn{ position:absolute; width:100%; height:20px; left:0; bottom:20px; text-align:center;}
.bannerpic .btn span{ background:#fff; display:inline-block; width:12px; height:12px; border-radius:100%; margin:0 5px; cursor:pointer;}
.bannerpic .btn span.on{ background:#b30000;}*/
.bannerbox{ width:100%; height:100%;}
.banner{ width:100%;height:100%; position:relative;}
.banner .d1{width:100%;height:100%;position:absolute;left:0px;top:0px;}
.banner .d2{width:150px;height:30px;clear:both;position:absolute; left:47%; bottom:20px; z-index:999;}
.banner .d2 li{width:12px;height:12px;background:#fff;float:left;margin:0 3px; cursor:pointer;
-moz-border-radius:6px;
-webkit-border-radius:6px; 
-o-border-radius:6px;
border-radius:6px;}
.banner .d2 li.nuw{background:#b30000;}

/*第一屏*/
#firstpage h1{ position:relative; top:120px; width:1200px; height:60px; border:0; margin:0 auto; text-align:center; line-height:60px; color:#fff; font-size:72px; text-transform:capitalize;}
#firstpage h2{ position:relative; top:160px; width:820px; height:auto; border:0; margin:0 auto; text-align:center; line-height:30px; color:#fff; font-size:15px;}
#firstpage .list{ position:relative; top:180px; width:1200px; height:auto; border:0; margin:0 auto; clear:both;}
#firstpage .list dl{
	width:220px; height:320px; border:0; padding-top:30px; margin:0 10px; float:left;
	transition:background .6s ease;
}
#firstpage .list dt{
	width:166px;
	height:166px;
	border:0;
	margin:0 auto;
	transition:-webkit-transform .6s ease;
	transition:-moz-transform .6s ease;
	transition:-o-transform .6s ease;
	transition:-ms-transform .6s ease;
	transition:transform .6s ease;
}
#firstpage .list dt.bg1{ background:url(../images/s1_01.png) no-repeat;}
#firstpage .list dt.bg2{ background:url(../images/s1_02.png) no-repeat;}
#firstpage .list dt.bg3{ background:url(../images/s1_03.png) no-repeat;}
#firstpage .list dt.bg4{ background:url(../images/s1_04.png) no-repeat;}
#firstpage .list dt.bg5{ background:url(../images/s1_05.png) no-repeat;}
#firstpage .list dd{ width:184px; height:160px; border:0; margin:0 auto;}
#firstpage .list dd span{ display:block; width:184px; height:60px; text-align:center; line-height:80px; color:#fff; font-size:24px; text-shadow:1px 1px 1px #231815;}
#firstpage .list dd figure{ width:184px; height:80px; border:0; clear:both; text-align:center; line-height:30px; color:#fff; font-size:15px; margin-left:0px;opacity:0;}
#firstpage .list dl:hover{
	background:#548382;
	height:315px;
	border-bottom:5px solid #276b6a;
}
#firstpage .list dl:hover dt{
	-webkit-transform:rotate(360deg);
	-moz-transform:rotate(360deg);
	-o-transform:rotate(360deg);
	-ms-transform:rotate(360deg);
	transform:rotate(360deg);
}
#firstpage .list dl:hover dd figure{ opacity:1;}
#firstpage .list dl:hover *{ color:#fff;}
#firstpage .list a:hover{text-decoration:none;}
/*第二屏*/
#secondpage h1{ position:relative; top:100px; width:1200px; height:60px; border:0; margin:0 auto; text-align:center; line-height:60px; color:#000; font-size:60px; text-transform:capitalize;}
#secondpage h2{ position:relative; top:120px; width:1200px; height:auto; border:0; margin:0 auto; text-align:center; line-height:30px; color:#333; font-size:15px;}
#secondpage ul{ position:relative; width:1200px; height:auto; border:0; margin:140px auto 0 auto; position:relative; clear:both;}



/*案例*/
.inside{ width:1200px; height:auto; margin:0 auto; clear:both;}
#caselist{ width:1200px; height:auto; margin-bottom:20px;}
#caselist li{ width:230px; height:170px; margin:0 10px 15px 0; float:left; position:relative; overflow:hidden;}
#caselist li:nth-child(5n){ margin-right:0;}
#caselist li .original{ width:230px; height:170px;}
#caselist li .mask{ width:230px; height:170px; position:absolute; top:0; left:0; transition:all .8s ease;}
#caselist li:hover .mask{ left:-398px;}

/*第三屏*/
#thirdpage h1{ position:relative; top:80px; width:1200px; height:60px; border:0; margin:0 auto; text-align:center; line-height:60px; color:#fff; font-size:72px; text-transform:capitalize;}
#thirdpage h2{ position:relative; top:140px; width:1200px; height:auto; border:0; margin:0 auto; text-align:center; line-height:30px; color:#fff; font-size:15px;}
#thirdpage .project{ width:100%; height:496px; border:0; position:absolute; bottom:0; left:0;}
#thirdpage ul{ width:442px; height:496px; border:0; margin:0 auto; position:relative;}
#thirdpage li{ width:216px; height:216px; border:0; position:absolute; z-index:10;}
#thirdpage li:first-child{ background:url(../images/s3_01.png) no-repeat; top:0; left:0;}
#thirdpage li:nth-child(2){ background:url(../images/s3_02.png) no-repeat; top:0; right:0;}
#thirdpage li:nth-child(3){ background:url(../images/s3_03.png) no-repeat; top:228px; left:0;}
#thirdpage li:nth-child(4){ background:url(../images/s3_04.png) no-repeat; top:228px; right:0;}
#thirdpage li:nth-child(5){ background:url(../images/s3_05.png) no-repeat; width:134px; height:115px; bottom:0; left:154px; z-index:11;}
#thirdpage li figure{ width:305px; height:106px; border:0; line-height:30px; color:#fff; font-size:16px; position:absolute; opacity:0;}
#thirdpage li:first-child figure{ background:url(../images/s3_06.png) repeat; padding:55px 150px 55px 40px; color:#FAD9C0; top:0; right:0; opacity:1;}
#thirdpage li:nth-child(2) figure{ background:url(../images/s3_07.png) repeat; padding:55px 40px 55px 150px; color:#FAD9C0; top:0; left:0;}
#thirdpage li:nth-child(3) figure{ background:url(../images/s3_08.png) repeat; padding:55px 150px 55px 40px; color:#FAD9C0; top:0; right:0;}
#thirdpage li:nth-child(4) figure{ background:url(../images/s3_09.png) repeat; padding:55px 40px 55px 150px; color:#FAD9C0; top:0; left:0;}
#thirdpage li:nth-child(5) figure{ background:url(../images/s3_10.png) repeat; width:572px; height:44px; padding:0; text-align:center; line-height:44px; color:#FAD9C0; bottom:0; right:0;}



/*第四屏*/
#fourthpage h1{ position:relative; top:100px; width:1200px; height:60px; border:0; margin:0 auto; text-align:center; line-height:60px; color:#323232; font-size:72px; text-transform:capitalize;}
#fourthpage h2{ position:relative; top:140px; width:1200px; height:auto; border:0; margin:0 auto; text-align:center; line-height:30px; color:#323232; font-size:15px;}
#fourthpage ol{ background:url(../images/s4_03.png) no-repeat; width:1200px; height:520px; border:0; position:relative; top:140px; margin:0 auto;}
#fourthpage ol > li{ width:155px; height:85px; position:absolute; text-indent:-200px; overflow:hidden;}
#fourthpage ol > li:first-child{ top:335px; left:220px;}
#fourthpage ol > li:nth-child(2){ top:220px; left:260px;}
#fourthpage ol > li:nth-child(3){ top:155px; left:425px;}
#fourthpage ol > li:nth-child(4){ top:100px; left:610px;}
#fourthpage ol > li:nth-child(5){ top:35px; left:775px;}
#fourthpage ol > li:nth-child(6){ top:0; right:80px;}
#fourthpage figure{
	position:absolute;
	width:auto;
	height:auto;
	border:0;
	top:480px;
	right:50px;
	opacity:0;
}
#fourthpage label{ color:#A22327; font-size:22px;}
#fourthpage ul{ width:auto; height:auto; border:0;}
#fourthpage ul > li{ width:auto; height:20px; border:0; padding:3px 0; clear:both;}
#fourthpage ul > li em{ background:url(../images/s4_02.png) no-repeat; width:12px; height:13px; border:0; display:inline-block; vertical-align:middle; margin-right:12px;}
#fourthpage ul > li span{ vertical-align:middle; color:#000; font-size:14px;}
/*第五屏*/
#fifthpage h1{ position:relative; top:100px; width:1200px; height:60px; border:0; margin:0 auto; text-align:center; line-height:60px; color:#fff; font-size:72px; text-transform:capitalize;}
#fifthpage h2{ position:relative; top:140px; width:1200px; height:auto; border:0; margin:0 auto; text-align:center; line-height:30px; color:#fff; font-size:15px;}
#fifthpage .qr{ position:relative; width:720px; height:auto; border:0; top:150px; margin:0 220px; clear:both;}
#fifthpage .qr li{
	border:0;
	margin:0 auto;
	float:left;
	text-align:center;
	color:#fff;
	font-size:16px;
	opacity:0;
	-webkit-transform:scale(.2);
	-moz-transform:scale(.2);
	-o-transform:scale(.2);
	-ms-transform:scale(.2);
	transform:scale(.2);
	transition:-webkit-transform .4s ease, opacity .4s ease;
	transition:-moz-transform .4s ease, opacity .4s ease;
	transition:-o-transform .4s ease, opacity .4s ease;
	transition:-ms-transform .4s ease, opacity .4s ease;
	transition:transform .4s ease, opacity .4s ease;
}
#fifthpage.active .qr li{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	opacity:1;
}
#fifthpage.active .qr li:nth-child(2){ transition-delay:.4s;}
#fifthpage.active .qr li:nth-child(3){ transition-delay:.8s;}
#fifthpage .qr li img{ border:0; margin-bottom:12px;}
#fifthpage .info{ position:relative; width:1236px; height:auto; border:0; top:200px; margin:0 auto; clear:both;}
#fifthpage .info li{
	background:url(../images/s5_01.png) no-repeat;
	width:354px;
	height:132px;
	border:0;
	padding:0 14px;
	margin:0 15px;
	float:left;
	text-align:center;
	line-height:26px;
	color:#fff;
	font-size:15px;
	opacity:0;
	-webkit-transform:scale(.2);
	-moz-transform:scale(.2);
	-o-transform:scale(.2);
	-ms-transform:scale(.2);
	transform:scale(.2);
	transition:-webkit-transform .8s ease, opacity .4s ease;
	transition:-moz-transform .8s ease, opacity .4s ease;
	transition:-o-transform .8s ease, opacity .4s ease;
	transition:-ms-transform .8s ease, opacity .4s ease;
	transition:transform .8s ease, opacity .4s ease;
}
#fifthpage .info li a{ color:#fff; font-size:15px;}
#fifthpage.active .info li{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
	opacity:1
}
#fifthpage.active .info li:nth-child(2){ transition-delay:.4s;}
#fifthpage.active .info li:nth-child(3){ transition-delay:.8s;}
#fifthpage .info li em{ width:354px; height:65px; border:0; display:block;}
#fifthpage .info li:first-child em{ background:url(../images/s5_02.png) no-repeat 50% 50%;}
#fifthpage .info li:nth-child(2) em{ background:url(../images/s5_03.png) no-repeat 50% 50%;}
#fifthpage .info li:nth-child(3) em{ background:url(../images/s5_04.png) no-repeat 50% 50%;}
/*底部*/
footer{ background:#303030; width:100%; height:148px; border:0; position:absolute; bottom:0; left:0; opacity:0; transition:opacity 2s ease .4s;}
footer dl{ width:1200px; height:auto; border:0; padding-top:50px; margin:0 auto; clear:both;}
footer dt{ width:600px; height:auto; border:0; float:left; color:#fff; font-family:"宋体";}
footer dt a{ color:#fff;}
footer dd{ width:420px; height:auto; border:0; float:right; text-align:right; color:#fff; font-family:"宋体";}
footer dd a{ color:#fff;}
footer dd span{ color:#f00; padding-left:10px;}
footer dd img{ display:inline; margin-left:10px; vertical-align:middle;}
#fifthpage.active footer{ opacity:1;}
/*右侧浮动导航*/
#floatnav{ background:#111; width:50px; height:126px; padding:30px 0; border-radius:5px; position:fixed; right:0; bottom:200px; z-index:999; opacity:.8; filter:alpha(opacity=80);}
#floatnav li{ width:50px; height:42px; cursor:pointer;}
#floatnav li span{ width:50px; height:42px; display:block; background:url(../images/i_01.png) no-repeat; position:relative; z-index:2;}
#floatnav li:first-child span{ background-position:50% 0;}
#floatnav li:nth-child(2) span{ background-position:50% -84px;}
#floatnav li:nth-child(3) span{ background-position:50% -42px;}
#floatnav li figure{ position:absolute; top:10px; right:-200px; background:#111; width:120px; height:126px; padding:10px 15px; color:#fff; border-top-left-radius:5px; border-bottom-left-radius:5px; font-size:14px; line-height:26px; z-index:1;}
#floatnav li figure a{ width:100px; height:36px; border:1px solid #00DFB9; border-radius:5px; display:block; margin-top:8px; text-align:center; line-height:36px; color:#fff; font-size:14px; text-decoration:none;}
#floatnav li figure img{ width:120px; height:120px; margin-top:3px;}
#floatnav li:hover figure{ right:0; transition:all 0.6s ease;}
#floatnav li:hover span{ opacity:.5; filter:alpha(opacity=50);}

.put-section-0{ -webkit-transform:translateY(0); -moz-transform:translateY(0); -o-transform:translateY(0); transform:translateY(0);}
.put-section-1{ -webkit-transform:translateY(-100%); -moz-transform:translateY(-100%); -o-transform:translateY(-100%); transform:translateY(-100%);}
.put-section-2{ -webkit-transform:translateY(-200%); -moz-transform:translateY(-200%); -o-transform:translateY(-200%); transform:translateY(-200%);}
.put-section-3{ -webkit-transform:translateY(-300%); -moz-transform:translateY(-300%); -o-transform:translateY(-300%); transform:translateY(-300%);}
.put-section-4{ -webkit-transform:translateY(-400%); -moz-transform:translateY(-400%); -o-transform:translateY(-400%); transform:translateY(-400%);}
.put-section-5{ -webkit-transform:translateY(-500%); -moz-transform:translateY(-500%); -o-transform:translateY(-500%); transform:translateY(-500%);}
/*按钮*/
.section-btn{ width:20px; position:fixed; right:3%; top:40%; display:none;}
.section-btn li{ background:#fff; width:14px; height:14px; border:0; border-radius:50px; display:block; margin:0 3px 12px 3px; cursor:pointer;}
.section-btn li.on{ background:#f00;}