/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0; padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block; margin:auto;}
table{border-collapse:collapse; border-spacing:0;}
caption,th{text-align:left; font-weight:normal;}
html,body,img,iframe,abbr{border:0;}
i,em{font-style:normal;}
[hidefocus],summary{outline:0;}
summary{display:block;}
li{list-style:none;}
sup,sub{font-size:12px;}
textarea{overflow:auto; resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,b{font-weight:normal; display:block;}
a,a:hover{text-decoration:none;}
a{color:#333;}
a:hover{color:#000;}
body,textarea,input,button,select,keygen,legend{font:14px/1.5 'Futura LT Light','MicrosoftJhengHei','Microsoft YaHei', 'Microsoft YaHei UI', 'WenQuanYi Micro Hei', Arial, sans-serif,\5b8b\4f53; color:#666; outline:0;}

@font-face{
    font-family: 'MicrosoftJhengHei';
    src : url('../images/MicrosoftJhengHei.ttf');
}
@font-face{
    font-family: 'Futura LT Light';
    src : url('../images/FuturaLTLight.otf');
}

html{font-size:10px;}
body{background:#fff; -webkit-transition:none !important; -moz-transition:none !important; -ms-transition:none !important; -o-transition:none !important;}
input[type=submit]{cursor:pointer;}


.fl{float:left;}
.fr{float:right;}
.clear{zoom:1;}
.clear:after{content:''; width:0; height:0; display:block; clear:both;}
section, #header, #banner{width:100%; min-width:1200px; margin:auto;}



@-webkit-keyframes gupIn{
	from{opacity:0; -webkit-transform:translate3d(0,-30px,0);}
}
@-moz-keyframes gupIn{
	from{opacity:0; -moz-transform:translate3d(0,-30px,0);}
}
@keyframes gupIn{
	from{opacity:0; transform:translate3d(0,-30px,0);}
}


@-webkit-keyframes gdownIn{
	from{opacity:0; -webkit-transform:translate3d(0,30px,0);}
}
@-moz-keyframes gdownIn{
	from{opacity:0; -moz-transform:translate3d(0,30px,0);}
}
@keyframes gdownIn{
	from{opacity:0; transform:translate3d(0,30px,0);}
}


@-webkit-keyframes gleftIn{
	0%{opacity:0; -webkit-transform:translate3d(-30px,0,0);}
	100%{opacity:1; -webkit-transform:translate3d(0,0,0);}
}
@-moz-keyframes gleftIn{
	0%{opacity:0; -moz-transform:translate3d(-30px,0,0);}
	100%{opacity:1; -moz-transform:translate3d(0,0,0);}
}
@keyframes gleftIn{
	0%{opacity:0; transform:translate3d(-30px,0,0);}
	100%{opacity:1; transform:translate3d(0,0,0);}
}


@-webkit-keyframes grightIn{
	0%{opacity:0; -webkit-transform:translate3d(80px,0,0);}
	100%{opacity:1; -webkit-transform:translate3d(0,0,0);}
}
@-moz-keyframes grightIn{
	0%{opacity:0; -moz-transform:translate3d(80px,0,0);}
	100%{opacity:1; -moz-transform:translate3d(0,0,0);}
}
@keyframes grightIn{
	0%{opacity:0; transform:translate3d(80px,0,0);}
	100%{opacity:1; transform:translate3d(0,0,0);}
}


@-webkit-keyframes gfadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
@-moz-keyframes gfadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}
@keyframes gfadeIn{
	0%{opacity:0;}
	100%{opacity:1;}
}


@-webkit-keyframes gfadeOut{
	0%{opacity:1;}
	100%{opacity:0;}
}
@-moz-keyframes gfadeOut{
	0%{opacity:1;}
	100%{opacity:0;}
}
@keyframes gfadeOut{
	0%{opacity:1;}
	100%{opacity:0;}
}


#header{height:99px; border-bottom:1px solid #f2f2f2; position:fixed; top:0; left:0; background:#fff; z-index:10; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; -webkit-animation:gupIn 1s 0.1s both; -moz-animation:gupIn 1s 0.1s both; animation:gupIn 1s 0.1s both;}
#logo{display:block; position:absolute; top:0; left:22px; height:99px; line-height:99px; /*opacity:0.6*/; overflow:hidden; filter:alpha(opacity=100); -webkit-transition:0.3s, opacity 1s; -moz-transition:0.3s, opacity 0.6s; transition:0.3s, /*opacity 0.6s*/;}
#logo img{vertical-align:middle;height: 38px;}
#logo:hover{opacity:0.6; filter:alpha(opacity=60);}
#nav{width:750px; margin:auto; text-align:center; position:relative;}
#nav a{display:inline-block; height:99px; margin:0 25px; line-height:99px; text-align:center; font-size:16px;/*font-weight: bold;*/ -webkit-transition:0.3s, color 0.5s; -moz-transition:0.3s, color 0.5s; transition:0.3s, color 0.5s;}
#nav a:hover{color:#6e6e6e;}
#nav span{width:100px; height:2px; background:#000; position:absolute; bottom:-1px; left:0; opacity:0; filter:alpha(opacity=0);}
#header h1{position:absolute; top:0; right:25px; height:99px; line-height:99px; font-size:18px; font-weight:bold; background:url(../images/tel_bg.jpg) no-repeat 18px center; padding-left:60px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; color:#8fc35d;}

#header.min{height:66px;}
#header.min #logo, #header.min #nav a, #header.min h1{height:66px; line-height:66px;}


#container{padding-top:95px;}


#loading{position:absolute; top:0; left:0; z-index:99; width:100%; height:100.5%; background:#fff;}
#loading div{width:60px; height:40px; position:absolute; top:50%; left:50%; margin:-20px 0 0 -30px; overflow:hidden;}
#loading em{display:block; width:60px; height:0; position:absolute; bottom:0; left:0; background:#000; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#loading div img{position:absolute; top:0; left:0;}






footer{width:1200px; margin:auto; overflow:hidden; border-top:1px solid #ddd;}
footer a{-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
footer address, footer .copy{width:580px; height:224px; border-bottom:2px solid #ddd; position:relative;}
footer address{float:left; width:570px; padding-left:10px; font-style:normal; color:#8c8c8c;}
footer address h3{color:#999; font-size:18px; margin-top:22px;}
footer address h1{margin-top:60px; font-size:36px; line-height:0px; font-weight:bold;}
footer address span{color:#666; margin-right:20px;}
footer address p{color:#666; position:absolute; bottom:20px; left:10px;}
footer address g p{color:#99CC66; position:absolute; bottom:20px; left:10px;line-height: 114px}
footer .copy{float:right; text-align:right; vertical-align:bottom;}
footer .copy .wx-qrcode{position:absolute; top:22px; right:15px; width:120px; height:120px;}
footer .copy p{position:absolute; bottom:20px; right:15px;}
footer article{width:100%; padding:15px 0; text-align:left; clear:both;}
footer article a{margin:0 12px; color:#999; display: inline-block;}




#client ul{width:1195px; margin:74px auto; overflow:hidden; border-top:1px solid #e5e5e5; border-left:1px solid #e5e5e5;}
#client ul li{float:left; width:238px; height:178px; border-right:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; text-align:center; position:relative;}
#client ul li a{display:block; width:100%; height:100%; overflow:hidden;}
#client ul li i, #client ul li em{position:absolute; top:0; left:0; width:100%; height:100%; background-image:url(../images/clients.jpg);}
#client ul li i{opacity:0.5; -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale(100%); filter:gray; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
#client ul li a:hover i{opacity:1; -webkit-filter:grayscale(0); -moz-filter:grayscale(0); -ms-filter:grayscale(0); -o-filter:grayscale(0); filter:grayscale(0); filter:none; -webkit-transform:scale(0.9) translateY(-8px); -moz-transform:scale(0.9) translateY(-8px); transform:scale(0.9) translateY(-8px);}

#client ul li .clients01{background-position:-238px 0;}
#client ul li .clients02{background-position:-476px 0;}
#client ul li .clients03{background-position:-714px 0;}
#client ul li .clients04{background-position:-952px 0;}
#client ul li .clients05{background-position:-1190px 0;}
#client ul li .clients06{background-position:-1428px 0;}
#client ul li .clients07{background-position:-1666px 0;}
#client ul li .clients08{background-position:-1904px 0;}
#client ul li .clients09{background-position:-2142px 0;}
#client ul li .clients10{background-position:-2380px 0;}
#client ul li .clients11{background-position:-2618px 0;}
#client ul li .clients12{background-position:-2856px 0;}
#client ul li .clients13{background-position:-3094px 0;}
#client ul li .clients14{background-position:-3332px 0;}
#client ul li .clients15{background-position:-3570px 0;}
#client ul li .clients16{background-position:-3808px 0;}
#client ul li .clients17{background-position:-4046px 0;}
#client ul li .clients18{background-position:-4284px 0;}
#client ul li .clients19{background-position:-4522px 0;}



#client ul li a:after{content:''; display:block; width:100%; height:100%; position:absolute; top:0; left:0; box-shadow:inset 0 0 0 0 #eee; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#client ul li a:hover:after{box-shadow:inset 0 0 0 10px #f6f6f6;}
#client ul li a p{margin-top:150px; color:#333; position:relative; z-index:5; opacity:0; filter:alpha(opacity=0); -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; zoom:1;}
#client ul li a:hover p{margin-top:135px; opacity:1; filter:alpha(opacity=100);}
#client ul li a span{font-size:18px; line-height:178px; color:#a7a7a7;}


.right_silderbar { position: fixed; bottom:100px; right: 0; width: 92px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
            .right_silderbar ul { list-style: none; margin: 0; padding: 0;-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; }
            .right_silderbar li { width: 100%; height: 100px;-webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s; }
                .right_silderbar li.qq { background-image: url(../images/qq.png); background-color: #ffc602; }
                    .right_silderbar li.qq:hover { background-color: #ffae00; }
                    .right_silderbar li.qq a { width: 100%; height: 100%; display: block; }
                .right_silderbar li.totop { background-image: url(../images/totop.png); background-color: #313131; display: none; }
                    .right_silderbar li.totop a { width: 100%; height: 100%; display: block; }
                    .right_silderbar li.totop:hover { background-color: #000; }



/*移动端导航*/
.clearfix:after{content:"";
                clear:both;
                height:0;
                display:block;
}
.motop{width:100%;
	   height:70px;
	   background: #fff;
	   position: fixed;
	   padding:0 3%;
	   z-index:200;
	   display: none;
	   top:0;
	   box-shadow: 0 0 4px rgba(0,0,0,0.1)
}
.mologo{float:left;
	    width:26%;
	        height: 100%;
    overflow: hidden;
}
.mologo a{line-height: 70px;
}
.mologo img{width:100%;
	        vertical-align: middle;
	        height: 32px;
}
.monav{float:right;
	    margin-right: 8%;
	    margin-top:21px;
	    cursor:pointer;
	    position: relative;
	    width:30px;
	    height:22px;

}
.monav span{width:25px;
	        height:2px;
	        display: block;
	        background: #000;
	        position: absolute;
	        transition:all .5s;
}
.monav .s1{top:5px;}
.monav .s2{top:11px;}
.monav .s3{top:17px;}
.monav .s1.on{transform:rotate(45deg);
	       top:10px;
}
.monav .s2.on{opacity: 0;}
.monav .s3.on{transform:rotate(-45deg);
	       top:10px;
}
/*下拉*/
.navdown{width:100%;
	     background: #fff;
	     position: fixed;
	     top:70px;
	     z-index: 100;
	     display: none;
	     border-top:1px solid #ccc;
	     box-shadow:0px 4px 4px rgba(0,0,0,0.1);
}
.navdown>ul{margin-top:20px;
}
.navdown>ul>li{padding:18px 0;
	           font-size:14px;
	           color:#333;
	           position: relative;
	           cursor:pointer;
	           width:80%;
	           margin:0 auto;
	           border-bottom:1px solid #ccc;
	           
}
.navdown>ul>li:last-child{border-bottom:none;}
.navdown>ul>li>a{color:#666;
	              display: block;
				  width: 100%;
				  height: 100%;
}
.navdown>ul>li>i{position: absolute;
	             right: 0;
                 top: 14px;
                 transition:all .5s;
                 font-size:16px;
                 color:#333;
}

.navdown>ul>li>ul{display: none;
	              margin-top:10px;
}
.navdown>ul>li>ul>li a{margin-left:12px;
	                   font-size:14px;
	                   color:#666;
	                   line-height: 26px;
}
.molanguage{margin-left:10%;
	        margin-top:30px;
	        margin-bottom:40px;
}
.molanguage a{font-size:16px;
	          color:#666;
}
.molanguage .a1:after{content:"";
                    display: inline-block;
                    width:1px;
                    height:11px;
                    background: #ccc;
                    margin: 0 3%;
}
/*移动端导航结束*/
#banner .img2{display: none;}
@media screen and (max-width: 767px){
   .motop{display: block;}
   #header{display: none;}
   #container{padding-top: 42px;}
  
   section {min-width: 96%;width: 96%;}
   section h2{font-size: 18px;}
   section aside{font-size: 14px;margin-bottom: 40px;}
   .works_link{display: none;}
   #works ul li{width: 50%;}
   #works ul li h5{font-size: 12px;}
   .works_wrap2{    padding-top: 700px !important;}

   #news .item1{display: none;}
   #news{width: 100%;}
   #news .item{width: 100%;box-sizing: border-box;}
   #news .signing ul li{font-size: 14px;}
   #news .signing{width: 100%;margin-top: 10px;box-sizing: border-box;}
   #news .item h5{font-size: 16px;}
  footer{width: 96%;}
  footer address,footer .copy{width: 100%;}
  footer article{display: none;}
  footer address h1{font-size: 24px;margin-top: 40px;}
  footer address g p{line-height: 20px;bottom: 70px;}
  footer .copy{text-align: center;}
  footer .copy .wx-qrcode{position: static;margin-top: 20px;}
  .index_pop_qq{display: none;}
  #banner .img1{display: none;}
  #banner .img2{display: block;}
  .right_silderbar{display: none;}

  .type_list{display: none;}

  .works_wrap{width: 96%;margin:auto;}
  #works_list{width: 100%;left:0;}
  #works_list .item2{width: 50%;}
  #works_list li{width: 33%;}

}