@charset "utf-8";
body,html{ min-width: 1200px; overflow-x: hidden; }
*{ margin:0; padding:0;}
body,p,h1,h2,h3,h4,h5,table,ul,li,form,input{ margin:0; padding:0; color:#000; font-family:"Microsoft yahei"; }

body,p{ font-size:14px; border:none; color: #000;}
a{ font-size:14px; color:#000; text-decoration:none; border:none; padding:0; margin:0;}
table{border-collapse:collapse;}
img{ border:0; margin:0; padding:0;}
ul,li{ list-style:none; border:0; margin:0; padding:0;}
dl,dt,dd{ margin:0; padding:0; -webkit-margin-start:0;}
h1,h2,h3,h4,h5{ font-weight:normal; font-size:12px; display:block;}
strong,b{ font-weight:normal;}
table,tr,td{ border-spacing:0;}
em,i,b{ font-style:normal;}
p{ line-height: 170%; color: #555; font-size: 14px;}
input{ border: none; background: none; }
figcaption{ display: block;}
input:focus{ outline: none; }
::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #dfdfdf; } 
::-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px;color: #dfdfdf; } 
.fl{float:left;}
.fr{float:right;}
.clearfix{*zoom:1;} 
.clearfix:before,.clearfix:after{display:table; line-height:0; content:"";}
.clearfix:after{clear:both;}
.w1200{ width: 1200px; margin: 0 auto;}

.top{ background: #fff; height: 92px; padding: 0 45px; position: fixed; left: 0;  right: 0; top: 0; z-index: 999; overflow: hidden;}
.logo{ display: block; }
.navbar{ position: absolute;  top: 0; left: 460px; width: 100%; overflow: hidden;}
.navbar li{ float: left;}
.navbar li a{ display: block; color: #000; font-size: 16px; padding: 0 35px; height: 92px; line-height: 92px; transition: all 0.7s;}
.navbar li:hover a{ color: #e60012;}
.top h3{ color: #e60012; font-size: 13px; border: 2px solid #E60012; width: 98px; height: 32px;
text-align: center; line-height: 32px; margin-top: 30px; cursor: pointer; z-index: 333; position: relative;}
.top.on{  animation-name: down; animation-duration: 1s; border-bottom: 1px solid #f5f5f5;}
.searchbox{ position: fixed; top: 92px; z-index: 3333; background: #fff; box-shadow: 0 0 5px rgba(0,0,0,0.1); right: 0;
left: 0; padding: 50px 500px; overflow: hidden; clear: both;  display: none;}
.searchbox input[ type=text]{ display: block; float: left; background: #F5F5F5; height: 45px; line-height: 45px;
width: 83%; padding-left: 2%; font-size: 14px; color: #666;}
.searchbox input[ type=submit]{ width: 15%; background: #E60012; height: 45px; line-height: 45px; color: #fff; cursor: pointer; font-size: 14px;}

.banner { position:relative; overflow:hidden; margin-top: 92px;}
.banner .bannerfix >li { height: 100%; line-height: 0; opacity:0; transition:opacity 1000ms linear; -webkit-transition:opacity 1000ms linear; float:left;}
.banner .bannerfix >li .bimg { line-height: 0; width: 100%; position: relative; transition: transform 5s ease; -webkit-transition: transform 5s ease; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1);}
.banner .bannerfix >li.imgIn{ opacity:1; z-index:10; display:block;}
.banner .bannerfix >li.imgIn .bimg { transform: matrix(1, 0, 0, 1, 0, 0); -webkit-transform: matrix(1, 0, 0, 1, 0, 0); }
.banner .flex-control-nav{ width:100%; height:20px; position:absolute; left:0; bottom:90px; text-align:center; z-index:20;}
.banner .flex-control-nav li{ display:inline-block; position:relative; margin-right:14px; width:5px; height:20px;}
.banner .flex-control-nav li:last-child{ margin-right:0;}
.banner .flex-control-nav li span{ display:block; text-indent:999px; overflow:hidden; width:5px; height:8px; position:absolute; background:#fff; transition:320ms; left:0; top:6px;}
.banner .flex-control-nav li a.flex-active span{ height:20px; top:0; background:#223990;}

.index-sec1 .div1{ background: #efefef; padding: 55px 50px;}
.index-sec1 .div1 h3{ color: #000; font-size: 28px;}
.index-sec1 .div1 h3 span{ color: #666; font-size: 20px; display: inline-block; margin-left: 10px;}
.index-sec1 .div1 a{ color: #888888; font-size: 16px;} 
.index-sec1 figure,.index-sec1  figure img{ opacity: 0; transition: all 1s; display: block; width: 100%;}
.index-sec1 figcaption{ position: absolute;  top: 0; left: 0; right: 0; bottom: 0;}
.index-sec1 li i{ display: block; margin: 0 auto; background: url(../img/icon.png) no-repeat top center;
height: 70px; width: 70px;  transition: all 0.6s; margin-top: 130px;}
.index-sec1 figcaption p{ color: #000; font-size: 24px; text-align: center; padding-top: 50px;}
.index-sec1 li:nth-child(1) i{ background-position: -18px -24px;}
.index-sec1 li:nth-child(2) i{ background-position: -122px -17px;}
.index-sec1 li:nth-child(3) i{ background-position: -238px -24px;}
.index-sec1 li:nth-child(4) i{ background-position: -346px -24px;}
.index-sec1 li:nth-child(5) i{ background-position: -477px -22px;}
.index-sec1 li:nth-child(6) i{ background-position: -600px -27px; }
.index-sec1 li:nth-child(1):hover i{ background-position: -12px -122px;}
.index-sec1 li:nth-child(2):hover i{ background-position: -122px -122px;}
.index-sec1 li:nth-child(3):hover i{ background-position: -238px -122px;}
.index-sec1 li:nth-child(4):hover i{ background-position: -346px -122px;}
.index-sec1 li:nth-child(5):hover i{ background-position: -477px -119px;}
.index-sec1 li:nth-child(6):hover i{ background-position: -600px -123px;}
.index-sec1 li:hover figure,.index-sec1 li:hover figure img{ opacity: 1;}
.index-sec1 li:hover p{ color: #fff;}


.index-sec2{ background: #efefef;}
.index-sec2 .div1 figure{ float: left; width: 59%; overflow: hidden;}
.index-sec2 .div1 figure img{ display: block; width: 100%;}
.index-sec2 .div1 figcaption{ float: left; width: 31%; padding: 5%;}
.index-sec2 .div1 figcaption h3{  font-size: 36px; color: #333;}
.index-sec2 .div1 figcaption h3 i{ display: block; background: #e60012; width: 50px; height: 3px; margin:30px 0;}
.index-sec2 .div1 figcaption h4{  font-size: 20px; color: #333; padding-top: 20px;}
.index-sec2 .div1 figcaption p{ color: #666666; font-size: 12px; font-family: arial; padding-top: 20px;}
.index-sec2 .div1 figcaption a{ display: block; border:2px solid #222222; color: #333; font-size: 14px; width: 180px; height: 50px;
 line-height: 50px; padding-left: 30px; overflow: hidden; clear: both; margin-top: 50px;}
.index-sec2 .div1 figcaption a img{ display: inline-block; vertical-align: middle; float: right; margin-top: 18px; margin-right: 20px;
transition: all 0.6s; }
.index-sec2 .div1 figcaption a:hover img{ transform: translateX(-10px);}
.index-sec2 .div2 div{ float: left; width: 30%; padding: 5%;}
.index-sec2 .div2 ul{ float: right;width: 60%;}
.index-sec2 .div2 h2{ font-weight: bold;  font-family: arial; color: #000; font-size: 100px; text-transform: uppercase;}
.index-sec2 .div2 h4{ font-size: 40px; color: #000; padding: 20px 0 10px 0;}
.index-sec2 .div2 p{ font-size:18px; color: #666666;}
.index-sec2 .div2 div a{ display: block; margin-top: 50px; transition: all 0.6s;}
.index-sec2 .div2 div a:hover{ transform: translateX(10px);}
.index-sec2 .div2 ul li{ float: left; width: 50%; border:1px solid #E0E0E0; box-sizing: border-box;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing:border-box;}
.index-sec2 .div2 li figure,.index-sec2 .div2 li figure img{ display: block; width: 100%; overflow: hidden; transition: all 0.6s;}
.index-sec2 .div2 .p1{ font-size: 18px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.index-sec2 .div2 .p2{ font-size: 14px; color: #666; padding: 20px 0;}
.index-sec2 .div2 .p3{ font-size: 12px; color: #666; font-family: arial; text-transform: uppercase;}
.index-sec2 .div2 figcaption{ background: #fff; padding:30px 15px;}
.index-sec2 .div2 li:hover figure img{ transform: scale(1.1);}
.index-sec2 .div2 li:hover .p1{ color: #E60012;}
.index-sec3{ padding:50px 0 50px 240px;}
.index-sec3 li{ float: left; width: 25%; transition: all 0.6s;}
.index-sec3 li h3{ font-size: 18px; color: #000; padding: 15px 0 10px 0;}
.index-sec3 li p{ font-size: 14px; color: #888;}
.index-sec3 li:hover{ transform: translateX(15px);}


.footer{ background: url(../img/foot-bg.jpg) no-repeat top center; padding: 50px 5%;}
.footer dl{ float: left; width:18%;}
.footer dl:nth-child(3){ width: 22%;}
.footer dl:last-child{ float: right;}
.footer dl dt{ color: #fff; font-size: 22px; padding-bottom: 15px;}
.footer dl p a{ display: block;  color: #aaa; font-size: 15px; padding: 7px 0; transition: all 0.6s;} 
.footer dl h3{ color: #fff; font-size: 14px;}
.footer dl .pd{ padding-top: 20px;}
.footer dl p{ color: #aaa; font-size: 14px;}
.footer dl p a:hover{ color: #e60012; transform: translateX(5px);}
.copyright{ background: #191817; height: 75px; line-height: 75px; padding: 0 5%;}
.copyright p{ color: #aaa; font-size: 14px; line-height: 75px; }
.copyright p a{ color: #aaa; display: inline-block; margin: 0 10px;}
.copyright p.fr{ color: #4f4f4f;}


.neibanner{ margin-top: 92px; position: relative;}
.neibanner .w1200{ position: absolute; top: 100px; left: 50%; margin-left: -600px; width: 1200px;}
.neitext{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.neitext h3{ color: #fff; font-size: 36px;  font-family: verdana;}
.neitext h3 b{ background: #fff; height: 2px; width: 50px; display: block; margin: 30px 0;}
.neitext h2{ color: #fff; font-size: 30px; }


.demo-wrapper { padding:30px 120px 50px 120px; }  
.portfolio-items { height: 520px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; margin:15px 25px;
 position: relative; padding-left: 5px; padding-top: 30px; }  
.portfolio-items>li { display: inline-block; vertical-align: top; }  
.portfolio-items>li a{ display: block; box-shadow:0 0px 5px rgba(0, 0, 0, .1); } 
.item { width: 375px; height: 440px; font-size: 14px; position: relative; margin-right: 30px; }  
.falldown { top: 0px; opacity: 1; }   .demo-wrapper ::-webkit-scrollbar { width: 7px; height: 7px; cursor: pointer }  
.demo-wrapper ::-webkit-scrollbar-track { background-color: #acacac; border-radius: 10px;  }  
.demo-wrapper ::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #7d7a79;  }


.lamu{ width:100%; overflow:hidden; background:#fff; box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.1); height:64px; line-height:64px; position:relative; z-index:100;}
.lamu dl{ display:block; float:left; line-height:30px; padding:17px 0; overflow:hidden;}
.lamu dl dt{ width:20px; height:30px;  float:left; display:block; vertical-align: middle;}
.lamu dl dt img{ display: inline-block;}
.lamu dl dd{ display:block; float:left; color:#a3a3a3; overflow:hidden;}
.lamu dl dd i{ display:block; float:left;  font-family: "宋体";  height: 30px; line-height: 30px; font-size: 16px; margin: 0 10px;}
.lamu dl dd a{ display:block; color:#a3a3a3; float:left; transition: all 0.6s;}
.lamu dl dd a:hover{ color:#E60012}
.lamu strong{ display:block; float:right; overflow:hidden;}
.lamu strong a{ display:block; float:left; margin:0 30px; color:#333; line-height:62px; font-size:15px;}
.lamu strong a.on{ color:#E60012; border-bottom:2px #E60012 solid;}

.casepage{ background: #f5f5f5; padding:50px 0;}
.casepage ul{ margin-right: -20px;}
.casepage li{ float: left; width: 380px; overflow: hidden; margin-right:25px; margin-bottom: 25px;}
.casepage li figure{ position: relative; width: 100%; height: 280px; overflow: hidden;}
.casepage li figure img{ width: 100%; height:280px; overflow: hidden; transition: all 0.6s;}
.casepage li .mask{ top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,0.8); position: absolute; transform: translateY(-100%);
transition: all 0.6s; -ms-transform: translateY(-100%); -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%);}
.casepage li span{ color: #fff; display: block; margin: 0 auto; width: 150px; height: 40px; text-align: center; line-height: 40px;
font-size: 16px; border: 2px solid #fff; position: absolute; top: 50%; margin-top:-20px; margin-left: -75px; left: 50%; transition: all 0.6s;
transition-delay: 0.6s; opacity: 0;}
.casepage li p{ font-size: 16px; text-align: center; background: #fff; height: 60px; line-height: 60px; position: relative;
z-index: 3; transition: all 0.6s;}
.casepage li p b{ position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: #E60012; z-index: -1; transition: all 0.6s;
transform: translateY(100%); -ms-transform: translateY(100%); -moz-transform: translateY(100%); -webkit-transform: translateY(100%);}
.casepage li:hover figure img{ transform: scale(1.1);}
.casepage li:hover .mask{ transform: none;  -ms-transform: none; -webkit-transform:none; -moz-transform: none;}
.casepage li:hover p b{ transform: none; -ms-transform: none; -webkit-transform:none; -moz-transform: none;}
.casepage li:hover p{ color: #fff;}
.casepage li:hover span{ opacity: 1;}

.fenye{ text-align: center;  padding:35px 0 0px 0; }
.fenye a{ display: inline-block;  padding: 0 20px; height: 40px; border:1px solid #eee; background: #fff;
color: #555; line-height: 40px; text-align: center; transition: all 1s; margin:0 5px; }
.fenye span{ display: inline-block;  padding: 0 20px; height: 40px; border:1px solid #eee; background: #CF0003; color: #fff; cursor: pointer; line-height: 40px; text-align: center; transition: all 1s; margin:0 5px; }
.fenye a:hover,.fenye a.on{ background: #E60012; color: #fff; cursor: pointer; }


.newspage{ background: #f5f5f5; padding:50px 0;}
.newspage .newstop{ background: #fff;  width: 580px; cursor: pointer; margin-bottom: 30px;}
.newspage .newstop figure{  overflow: hidden; height: 280px; overflow: hidden;} 
.newspage .newstop figure img{ overflow: hidden; width: 100%; height: 280px; transition: all 0.6s; transform: scale(1.1);} 
.newspage .newstop figcaption{ overflow: hidden; padding: 30px 20px;} 
.newspage .newstop  h2{ font-weight: bold; color: #000; font-size: 18px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
transition: all 0.6s;}
.newspage .newstop p{ color: #666; font-size: 14px; margin: 20px 0; line-height: 36px; height: 72px; overflow: hidden;}
.newspage .newstop h5{ color: #666; font-size: 12px; padding: 0px 0;}
.newspage .newstop:hover figure img{ transform:scale(1);}
.newspage .newstop:hover h2{ color: #E60012;}
.newspage li{ transition: all 0.6s;}
.newspage li a{ display: block; overflow: hidden; clear: both; padding: 10px 0;  padding: 15px;
margin-bottom: 25px; transition: all 0.6s; border:1px solid #e0e0e0; background: #fff;}
.newspage li figure{ float: left;  width: 310px; height: 215px; overflow: hidden;}
.newspage li figure img{ display: block; width: 310px; height: 215px; overflow: hidden; transition: all 0.6s;}
.newspage li figcaption{ width: 815px; float: left; padding-left:25px;}
.newspage li figcaption h2{ color: #000; font-size: 16px; padding: 15px 0; font-weight: bold; transition: all 0.6s;}
.newspage li figcaption h5{ font-size: 14px; color: #666; padding: 0 0 20px 0;}
.newspage li figcaption p{ font-size: 14px; color: #333; line-height: 30px; height:90px; overflow: hidden;}
.newspage li:hover{ transform: translateX(10px);}
.newspage li:hover h2{ color: #E60012;}


.detailpage,.contact-page { padding:50px 0; background: #F5F5F5;  }
.detailpage .de-box{ background: #fff; padding:30px 30px 50px 30px;}
.stace h1{ font-size:24px; font-weight:bold; line-height:36px; overflow:hidden; padding-top:20px;}
.stace strong{ display:block; overflow:hidden; padding:20px 0; overflow:hidden; margin-bottom:20px; border-bottom:1px #e0e0e0 solid;}
.stace strong span{ display:inline-block; color:#999; padding-right:30px;}
.stace .cont{ width:100%; overflow:hidden;}
.stace .cont p{ color:#333; line-height:34px; font-size: 15px; }
.stace .cont img{ display:block; width:100%; margin: 10px auto;}
.stace .zjlj{ width:100%; overflow:hidden; margin-top:60px; border:1px #e0e0e0 solid; border-left:none; border-right:none; line-height:60px; position:relative;}
.stace .zjlj a{ display:block; width:50%; float:left; overflow:hidden; color:#666; text-overflow:ellipsis; white-space:nowrap; font-size:15px;}
.stace .zjlj a:nth-child(1){ text-align:left;}
.stace .zjlj a:nth-child(2){ text-align:right;}
.stace .zjlj a i{ color:#000;}
.stace .zjlj a:hover{ color: #E60012;}

/*联系我们*/
.contact-page h2{ font-size: 26px; color: #E60012; font-weight: bold; border-bottom: 1px solid #F5F5F5; padding-bottom: 20px;
margin-bottom: 30px;}
.contact-page h2 i{ color: #666; font-size: 16px; font-weight: normal;}
.contact-page .cont-box{ background: #fff; padding: 30px 30px 50px 30px;}
.contact-page .div1 {width: 300px; float: left; margin-top: 50px; padding-right: 30px; border-right: 1px solid #F5F5F5;
margin-right: 40px;}
.contact-page .div1 div.fl{ width: 280px; padding-left: 10px;}
.contact-page .div1 span{ display: block;  background: url(../img/contact.png) no-repeat; width: 45px; height: 45px;
float: none; margin: 0 auto;}
.contact-page .div1 .span1{ background-position:-8px -5px;}
.contact-page .div1 .span2{ background-position:-8px -60px;}
.contact-page .div1 .span3{ background-position:-8px -114px ;}
.contact-page .div1 .span4{ background-position:-6px -160px;}
.contact-page .div1 .span5{ background-position:-7px -213px;}
.contact-page .div1 h3{ font-size: 18px; color: #222; height: 40px; line-height: 40px; float: none; text-align: center;}
.contact-page .div1 p{ font-size: 14px; padding-top: 10px;  text-align: center; line-height: 30px;}
.contact-page .div1 a{  border:1px solid #eee; font-size: 14px; color: #333; display: block; float: none; margin: 0 auto;
width: 150px; height: 40px; border-radius: 5px; text-align: center; line-height: 40px; transition: all 0.36s;}
.contact-page .div1 a i{ display: inline-block; background: url(../img/qq_g.png) no-repeat center;  width: 18px; height: 18px; vertical-align: middle;
margin-right: 10px; transition: all 0.36s;}
.contact-page .div1 a:hover i{ background-image: url(../img/qq_w.png);}
.contact-page .div1 a:hover{ background: #da251d; color: #fff;}
.contact-page .div1 img{ display: block; margin: 0 auto;}
.contact-page .map{ background: #fff; padding: 15px; margin-top: 25px;}
.contact-page .map img{ display: block; width: 100%;}


@keyframes down{
	
 	from{transform: translateY(-100%); opacity: 0;}
 	to{transform: none; opacity: 1;}
 	
}

@media screen and (max-width:1800px) {	
	.index-sec2 .div1 figcaption,.index-sec2 .div2 div{ padding: 3% 5%;}	
}


@media screen and (max-width:1800px) {	
	.navbar { left: 360px;}
}


@media screen and (max-width:1600px) {
	.top{ padding: 0 30px;}
	.navbar { left: 290px;}
	.navbar li a{ padding: 0 30px;}
	.index-sec2 .div1 figcaption h3{ font-size: 30px;}
	.index-sec2 .div1 figcaption h4{ padding-top: 15px;}
	.index-sec2 .div1 figcaption a{ margin-top: 25px; height: 45px; line-height: 45px;}
	.index-sec2 .div1 figcaption h3 i{ margin: 15px 0;}
}

@media screen and (max-width:1440px) {
	.navbar { left: 290px;}
	.logo img{ width: 200px; margin-top: 10px;}
	.navbar li a{ padding: 0 25px; font-size: 16px;}
	.item{ width: 365px;}
}

@media screen and (max-width:1370px) {
	.navbar { left: 280px;}
	.logo img{ width: 200px; margin-top: 10px;}
	.navbar li a{ padding: 0 25px; font-size: 16px;}
	.portfolio-items{ height: 480px;}
	.item{ width: 330px;}
}