@import url(style.css);
@import url(animate_zhuanti.css);
.header-v1{ position:absolute;}
/*尾部*/
.f_div3 .h3{ display:none;}
.f_div3 .cons{ display:none;}
/*专题*/
#fp-nav.right{ display:none;}
.side{ display:block;}
.service-wrap1{ background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:url(../images/zhuanti/zhanti_bg1.jpg); color:#000;}
.service-wrap1 .txts{ float:left; width:48%; margin-top:4%; margin-bottom:4%; color:#fff;}
.service-wrap1 .txts h2{ overflow:hidden; line-height:1.2;}
.service-wrap1 .txts h2 label{ display:block;}
.service-wrap1 .txts .p{ line-height:36px;  overflow:hidden; margin-top:4%; max-width:380px; color:#cccccc;}
.service-wrap1 .txts .p p{ float:left; width:186px;}
.service-wrap1 .txts .a{ overflow:hidden; margin-top:11%;}
.service-wrap1 .txts .a a{ float:left;width:46px; height:46px; overflow:hidden; line-height:46px; border-radius:50%; border:1px solid #fff; background:url(../images/i_bg2.png) center center no-repeat;transition:all 0.3s;}
.service-wrap1 .txts .a a label{width:0px; overflow:hidden; display:block; text-align:center; font-size:16px; color:#fff;opacity:0;filter:Alpha(opacity=0);}
.service-wrap1 .txts .a a:hover{ width:170px; border-radius:30px; background-position:84% center;}
.service-wrap1 .txts .a a:hover label{width:128px;opacity:1.0;filter:Alpha(opacity=100);transition:all 0.3s;}
.service-wrap1.active .txts .p.fadeInUp{animation-delay:0.5s;}
.service-wrap1.active .txts .a.fadeInUp{animation-delay:0.8s;}
.service-wrap1 .imgs{position: absolute; width: 48%; height: 100%; top: 0;right: 0;}
.service-wrap1 .imgs1{ position: absolute; max-width:751px; width:100%; /*opacity:0;*/left: 0;top: 12%;}
.service-wrap1.active .imgs1{opacity:1;}

.service-wrap2{ background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:url(../images/zhuanti/zhanti_bg2.jpg); color:#000;}
.service-wrap2 .txts{ float:right; width:42%; max-width:400px; margin-top:4%; margin-bottom:4%;}
.service-wrap2 .txts h2{ overflow:hidden; line-height:1.2;opacity:0;filter:Alpha(opacity=0);}
.service-wrap2 .txts h2 label{ display:block;}
.service-wrap2 .txts .p{ line-height:36px;  overflow:hidden; margin-top:4%; max-width:380px; color:#333;opacity:0;filter:Alpha(opacity=0);}
.service-wrap2 .txts .p p{ float:left; width:186px;}
.service-wrap2 .txts .a{ overflow:hidden; margin-top:11%;}
.service-wrap2 .txts .a a{  float:left;width:46px; height:46px; overflow:hidden; line-height:46px; border-radius:50%; border:1px solid #101010; background:url(../images/i_bg3.png) center center no-repeat;transition:all 0.3s;}
.service-wrap2 .txts .a a label{ width:0px; overflow:hidden; display:block; text-align:center; font-size:16px; color:#111111;opacity:0;filter:Alpha(opacity=0);}
.service-wrap2 .txts .a a:hover{ width:170px; border-radius:30px; background-position:84% center;}
.service-wrap2 .txts .a a:hover label{width:128px;opacity:1.0;filter:Alpha(opacity=100);transition:all 0.3s;}
.service-wrap2.active .txts .p.fadeInUp{animation-delay:0.5s;}
.service-wrap2.active .txts .a.fadeInUp{animation-delay:0.8s;}
.service-wrap2 .imgs{ position:absolute; width:58%; height:100%; top:0; left:0;}
.service-wrap2 .img1{ top:10%; position:absolute; right:40%; width:52%; max-width:514px;opacity: 0;}
.service-wrap2 .img2{ top:15%; position:absolute; right:0; width:48%;  max-width:434px;opacity: 0;}
.service-wrap2.active .img1,.service-wrap2.active .img2{opacity: 1;}

.service-wrap3{ background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:url(../images/zhuanti/zhanti_bg3.jpg); color:#000;}
.service-wrap3 .txts{ float:left; width:42%; max-width:400px;margin-top:4%; margin-bottom:4%; color:#fff;}
.service-wrap3 .txts h2{ overflow:hidden; line-height:1.2;}
.service-wrap3 .txts h2 label{ display:block;}
.service-wrap3 .txts .p{ line-height:36px;  overflow:hidden; margin-top:4%; max-width:380px; color:#cccccc;}
.service-wrap3 .txts .p p{ float:left; width:186px;}
.service-wrap3 .txts .a{ overflow:hidden; margin-top:11%;}
.service-wrap3 .txts .a a{ float:left;width:46px; height:46px; overflow:hidden; line-height:46px; border-radius:50%; border:1px solid #fff; background:url(../images/i_bg2.png) center center no-repeat;transition:all 0.3s;}
.service-wrap3 .txts .a a label{width:0px; overflow:hidden; display:block; text-align:center; font-size:16px; color:#fff;opacity:0;filter:Alpha(opacity=0);}
.service-wrap3 .txts .a a:hover{ width:170px; border-radius:30px; background-position:84% center;}
.service-wrap3 .txts .a a:hover label{width:128px;opacity:1.0;filter:Alpha(opacity=100);transition:all 0.3s;}
.service-wrap3.active .txts .p.fadeInUp{animation-delay:0.5s;}
.service-wrap3.active .txts .a.fadeInUp{animation-delay:0.8s;}
.service-wrap3.active .img2.bounceInRight{animation-delay:0.5s;}
.service-wrap3 .imgs{ position:absolute; width:58%; max-width:850px; height:100%; top:0; right:0;}
.service-wrap3 .img1{ bottom:20%; position:absolute; left:-10%; width:45%; max-width:362px;opacity: 0;}
.service-wrap3 .img2{ top:5%; position:absolute; right:4%; width:96%;  max-width:799px;opacity: 0;}
.service-wrap3.active .img1,.service-wrap3.active .img2{opacity: 1;}

.service-wrap4{ background-repeat:no-repeat; background-position:center center; background-size:cover; background-image:url(../images/zhuanti/zhanti_bg4.jpg); color:#000;}
.service-wrap4 .txts{ float:right; width:42%; max-width:400px; margin-top:4%; margin-bottom:4%;}
.service-wrap4 .txts h2{ overflow:hidden; line-height:1.2;}
.service-wrap4 .txts h2 label{ display:block;}
.service-wrap4 .txts .p{ line-height:36px;  overflow:hidden; margin-top:4%; max-width:380px; color:#333;}
.service-wrap4 .txts .p p{ float:left; width:186px;}
.service-wrap4 .txts .a{ overflow:hidden; margin-top:11%;}
.service-wrap4 .txts .a a{  float:left;width:46px; height:46px; overflow:hidden; line-height:46px; border-radius:50%; border:1px solid #101010; background:url(../images/i_bg3.png) center center no-repeat;transition:all 0.3s;}
.service-wrap4 .txts .a a label{ width:0px; overflow:hidden; display:block; text-align:center; font-size:16px; color:#111111;opacity:0;filter:Alpha(opacity=0);}
.service-wrap4 .txts .a a:hover{ width:170px; border-radius:30px; background-position:84% center;}
.service-wrap4 .txts .a a:hover label{width:128px;opacity:1.0;filter:Alpha(opacity=100);transition:all 0.3s;}
.service-wrap4.active .txts .p.fadeInUp{animation-delay:0.5s;}
.service-wrap4.active .txts .a.fadeInUp{animation-delay:0.8s;}
.service-wrap4 .imgs{ position: absolute; width: 58%; height: 100%; top: 0;left: 0; }
.service-wrap4 .imgs .imgs1{  position: absolute; max-width:862px; width:90%; /*opacity:0;*/right: 0%;top:7%;}


@media screen and (max-width:1440px) {
.service-wrap1 .txts .a a label{font-size:15px;}
.service-wrap1 .txts .p{ line-height:30px;}
.service-wrap2 .txts .a a label{font-size:15px;}
.service-wrap2 .txts .p{ line-height:30px;}
.service-wrap3 .txts .a a label{font-size:15px;}
.service-wrap3 .txts .p{ line-height:30px;}
.service-wrap4 .txts .a a label{font-size:15px;}
.service-wrap4 .txts .p{ line-height:30px;}
}


@media screen and (max-width:960px) {
.service-wrap1 .txts .a a label{font-size:14px;}
.service-wrap1 .wrap{ position:relative; overflow:visible;}
.service-wrap1 .txts .p{ line-height:24px;}
.service-wrap2 .txts .a a label{font-size:14px;}
.service-wrap2 .wrap{ position:relative; overflow:visible;}
.service-wrap2 .txts .p{ line-height:24px;}
.service-wrap2 .img1{ right:48%; top:0;}
.service-wrap2 .img2{ right:4%; top:5%;}

.service-wrap3 .txts .a a label{font-size:14px;}
.service-wrap3 .wrap{ position:relative; overflow:visible;}
.service-wrap3 .txts .p{ line-height:24px;}
.service-wrap3 .img1{ bottom:auto; margin-top:18%;}
.service-wrap3 .img2{  top:10%;}
.service-wrap4 .txts .a a label{font-size:14px;}
.service-wrap4 .wrap{ position:relative; overflow:visible;}
.service-wrap4 .txts .p{ line-height:24px;}
.service-wrap4 .imgs .imgs1{ margin-top:-10%; width:100%;}
}

@media screen and (max-width:640px) {
/*尾部*/
.f_bg2{ display:none;}

.service-wrap1 .wrap{ position:inherit; overflow:hidden;}
.service-wrap1 .txts{ float:none; width:100%; margin-top:80px;}
.service-wrap1 .txts .p{ line-height:22px;}
.service-wrap1 .txts .a a{width:40px; height:40px; line-height:40px; background-size:20px auto;}
.service-wrap1 .txts .a a:hover{ width:140px; }
.service-wrap1 .txts .a a:hover label{width:108px;}
.service-wrap1 .imgs{ position:inherit; width:70%; margin:0 auto;}
.service-wrap1 .imgs1{ position:inherit;}

.service-wrap2 .wrap{ position:inherit; overflow:hidden;}
.service-wrap2 .txts{ float:none; width:100%;}
.service-wrap2 .txts .p{ line-height:22px;}
.service-wrap2 .txts .a a{width:40px; height:40px; line-height:40px; background-size:20px auto;}
.service-wrap2 .txts .a a:hover{ width:140px; }
.service-wrap2 .txts .a a:hover label{width:108px;}
.service-wrap2 .imgs{ position:inherit; width:80%; margin:0 auto;}
.service-wrap2 .img1{ position:inherit; width:48%; display:inline-block;}
.service-wrap2 .img2{ position:inherit; display:inline-block;}

.service-wrap3 .wrap{ position:inherit; overflow:hidden;}
.service-wrap3 .txts{ float:none; width:100%; margin-top:2%;}
.service-wrap3 .txts .p{ line-height:22px;}
.service-wrap3 .txts .a a{width:40px; height:40px; line-height:40px; background-size:20px auto;}
.service-wrap3 .txts .a a:hover{ width:140px; }
.service-wrap3 .txts .a a:hover label{width:108px;}
.service-wrap3 .imgs{ position:inherit; width:96%; margin:0 auto;}
.service-wrap3 .img1{  width:44%; left:0;}
.service-wrap3 .img2{position:inherit; margin-left:14%; }

.service-wrap4 .wrap{ position:inherit; overflow:hidden;}
.service-wrap4 .txts{ float:none; width:100%;}
.service-wrap4 .txts .p{ line-height:22px;}
.service-wrap4 .txts .a a{width:40px; height:40px; line-height:40px; background-size:20px auto;}
.service-wrap4 .txts .a a:hover{ width:140px; }
.service-wrap4 .txts .a a:hover label{width:108px;}
.service-wrap4 .imgs{ position:inherit; width:70%; margin:0 auto;}
.service-wrap4 .imgs .imgs1{ position:inherit; margin-top:2%;}
}
@media screen and (max-width:480px) {
.service-wrap1 .txts .p{ line-height:20px;}
.service-wrap1 .txts .p p{ width:150px;}
.service-wrap1 .txts .a a{width:36px; height:36px; line-height:36px; background-size:18px auto;}
.service-wrap1 .txts .a a:hover{ width:130px; }
.service-wrap1 .txts .a a:hover label{width:98px;}

.service-wrap2 .txts .p{ line-height:20px;}
.service-wrap2 .txts .p p{ width:150px;}
.service-wrap2 .txts .a a{width:36px; height:36px; line-height:36px; background-size:18px auto;}
.service-wrap2 .txts .a a:hover{ width:130px; }
.service-wrap2 .txts .a a:hover label{width:98px;}

.service-wrap3 .txts .p{ line-height:20px;}
.service-wrap3 .txts .p p{ width:150px;}
.service-wrap3 .txts .a a{width:36px; height:36px; line-height:36px; background-size:18px auto;}
.service-wrap3 .txts .a a:hover{ width:130px; }
.service-wrap3 .txts .a a:hover label{width:98px;}

.service-wrap4 .txts .p{ line-height:20px;}
.service-wrap4 .txts .p p{ width:150px;}
.service-wrap4 .txts .a a{width:36px; height:36px; line-height:36px; background-size:18px auto;}
.service-wrap4 .txts .a a:hover{ width:130px; }
.service-wrap4 .txts .a a:hover label{width:98px;}
}