@import url('//at.alicdn.com/t/c/font_4486896_wu0mn588hd.css');
@import url(swiper-iconfont.css?v=1.0.6);
@charset "utf-8";
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul,div{ margin: 0; padding: 0; }
html{font-size: 10px;}
body, button, input, select, textarea {font-family:"微软雅黑",roboto,Helvetica,Arial,sans-serif;line-height: 1.5; font-size: 1.4rem; color: #000;outline: none;}
.clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0;}
img{display: block; vertical-align: middle;}
li{ list-style-type: none; }
a{ text-decoration: none; color: #000; outline: none; transition: all .3s;}
a:hover{ color: #022a9b;}
.bd{ width: 100%; max-width: 90rem; margin: 0 auto;  position:relative; }
.bd-cop{ width: 100%; max-width: 93.6rem; margin: 0 auto; }
.bd-ser{ width: 100%; max-width: 94rem; margin: 0 auto; }
.btitle h3{font-size: 2.2rem; font-weight: bold; text-align: center;}
.shadow{box-shadow: 0 0 10px rgba(0,0,0,.1);}
*{-webkit-tap-highlight-color:rgba(0,0,0,0);}


.header-bd{position: fixed;  top: 0; right: 0; left: 0; transition: all .2s; z-index: 50;}
.header-bd,.header-bd .bd,.header-bd .bd .header,.header .nav li .item{height: 7rem;}
.header .nav li .item{line-height: 7rem; }
.header-bg{ background-color: rgba(255,255,255,1); box-shadow: 0 0 5px rgba(0,0,0,.1); }
.header .logo{ position:absolute; height:3rem; top:50%; margin-top:-1.5rem }
.header .logo img{ height: 100%; display: block; }
.header .nav{ float:right; }
.header .nav li{ float: left;  font-size: 1.4rem;padding: 0 2rem; position: relative; }
.header .nav li .item{ color: #FFF; display: block; position: relative;}
.header .nav li .item .fa{transition: all .3s;}
.header .nav li .item:hover{ color: #FFF;}
.header .nav li .item:hover .fa,.header .nav li .item.on .fa{transform:rotate(180deg);}
.header .nav li .fa-angle-down{ margin-left: 5px; }
.header .nav li:last-child{ padding-right: 0; }
.header .menubtn{position: absolute; right: 0;top: 50%; margin-top:-1.5rem; width: 3rem; height: 3rem; display:none  }
.header .menubtn span{ position: absolute; left: 0; right: 0; top: 50%; margin-top:-.18rem; height: .36rem;  background-color: #FFF; display:block; }
.header .menubtn:before{content: ""; position: absolute; left: 0; right: 0; top: .4rem; height: .36rem; background-color: #FFF;}
.header .menubtn:after{content: ""; position: absolute; left: 0; right: 0; bottom: .4rem; height: .36rem;background-color: #FFF;}


/*滚动后头部样式改变*/
.header-bg .header .nav li .item{ color: #333; }
.header-bg .header .loginbd li a{ color: #333;}
.header-bg .header .nav li .item.on{ color:#0C778A; }
.header-bg .header .nav li .item:hover{ color: #022a9b; }
.header-bg .menubtn span,.header-bg .menubtn:before,.header-bg .menubtn:after{ background-color:#000 }

.banner{ background-color: #022a9b;}
.banner .bd{ padding-top:7rem; position:relative; }
.banner .bd .content{ text-align:center; color:#FFF; background:url(/img/banner_logo.png?v=1) no-repeat center top; background-size:8rem; padding:5rem 0 0 0; position:absolute; top:50%; margin-top:-8rem; left:0; right:0 }
.banner .bd .content h2{  font-size:3.6rem; line-height:4rem }
.banner .bd .content .desc{ font-size:1.5rem; line-height:2rem; margin-top:1rem }
.banner .bd .content .goservice{  position:absolute;display:inline-block; height:3rem; line-height:3rem; font-size:1.6rem; padding:0 2.5rem;  text-align:center; color:#333; border-radius:100px; bottom:-8rem; left:50%; margin-left:-6.5rem; background-color:#FCD006 }
.banner .bd .content .goservice:hover{ background-color: #D6B003; margin-left: -7rem;padding:0 3rem; }
.banner .bd .nextpage{ display:block; color:#FFF; width:4rem; height:4rem; line-height:4rem; font-size:1.8rem; text-align:center; position:absolute; bottom:3rem; left:50%; margin-left:-2rem; background-color:rgba(0,0,0,.3); border-radius:100px }
.banner .bd .nextpage:hover{ background-color: rgba(0,0,0,.5); }

.service{ padding: 5rem 0 6rem 0; }
.service .prolist{ padding: 1rem 1rem 0 1rem; }
.service .prolist li{ float: left; width: 33.333%; text-align: center; margin-top: 2rem; }
.service .prolist li .box{ margin: 0 1rem; background-color: #FFF; border-radius: .5rem;  box-shadow: 0 0 20px rgba(100,100,100,.1); padding: 3rem 2.5rem; }
.service .prolist li .box .names{ border-bottom: 1px solid #EEE; }
.service .prolist li .box .names h3{ font-size: 1.6rem; font-weight: normal; display: block; padding: 1rem 0 1rem 0; }
.service .prolist li .box .names span{ background-color: #022a9b; color: #FFF; border-radius: .8rem;display: inline-block; width: 3.4rem; height: 3.4rem; line-height: 3.4rem; text-align: center; }
.service .prolist li .box .names span i{ font-size: 2rem; }
.service .prolist li .box .desc{ font-size: 1.1rem; color: #666; padding: 1rem 0 0 0; }
.service .prolist li .box .tags{ font-size: 1rem; color: #999; padding: 1rem 0 0 0; }
.service .prolist li .box .tags span{ display: inline-block; margin: 0 1rem;}
.service .prolist li .box .cbtn{ margin: 1.5rem 0 0 0; position: relative; }
.service .prolist li .box .cbtn a{ display: inline-block; border: 1px solid #022a9b; background-color:#FFF ; margin: 0 .8rem; color: #022a9b; font-size: 1.1rem; height: 2rem; line-height: 2rem; padding: .3rem 1.5rem; border-radius: 10rem; }
.service .prolist li .box .cbtn a:hover{ background-color: #022a9b; color: #FFF; padding: .3rem 2rem; }
.service .prolist .diy{ text-align: center; padding: 3.5rem 0 0 0; }
.service .prolist .diy a{ display: inline-block; border-radius: 10rem; font-size: 1.2rem; color:#FFF; padding: .5rem 0; width: 13rem; background-color: #022a9b; }
.service .prolist .diy a:hover{ width: 14rem; }
.service .prolist li .box .cbtn div{ position: absolute; left: 50%; margin-left: -5rem; bottom: 2.8rem; }
.service .prolist li .box .cbtn div img{ width: 10rem; box-shadow: 0 0 10px rgba(0,0,0,.1); }

.cooperation{ background: #F8F8F8 url(/img/cusbg.jpg?v=3) no-repeat center center; background-size: cover; padding: 5rem 0;}
.cooperation .title{ text-align: center; }
.cooperation .brandlist ul{ margin: 0 1rem; padding-bottom: 1rem; padding-top: 1.6rem; }
.cooperation .brandlist li{ float: left; width: 14.2857%; margin-top: 1.6rem; }
.cooperation .brandlist li div{ margin: 0 .8rem; background-color: #FFF; overflow: hidden; position: relative;}
.cooperation .brandlist li img{ width: 100%; position: relative;}

.about{ padding: 6rem 0; }
.about .title{ text-align: center; }
.about .desc .introduction{ text-align: center; font-size: 1.2rem; line-height: 2em; margin-top: 2.5rem; }
.about .desc .servicelist{ text-align: center; margin-top: 2rem; }
.about .desc .servicelist ul{ display: inline-block; margin: 0 auto; white-space: nowrap; width: 70%; }
.about .desc .servicelist li{ float: left;  width: 33.333%;}
.about .desc .servicelist li .nums{  position: relative;color:#022a9b; }
.about .desc .servicelist li .nums strong{font-size: 4rem;font-weight: normal; }
.about .desc .servicelist li .nums span{ font-size: 1rem; margin: 0 0 0 .5rem;}
.about .desc .servicelist li .cat{ font-size: 1.2rem; }

.subbanner{ background:#EEE url(/img/subbanerbg.jpg?v=1.0.1) no-repeat center center; background-size: cover; height:40rem; margin-top:7rem; position:relative; }
.subbanner .bg{ position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6) }
.subbanner .bg .bd{ height:40rem; }
.subbanner .bg .bd .subtext{ color:#FFF; text-align:center; position:absolute; left:0; right:0; top:50%; margin-top:-6.8rem }
.subbanner .bg .bd .subtext h3{ font-size:3rem; line-height:4rem; margin-bottom:2rem }
.subbanner .bg .bd .subtext p{ font-size:1.5rem; line-height:2rem; }
.subbanner .bg .bd .subtext .contact{ background-color:#022a9b; border-radius:100px; height:3rem; line-height:3rem; font-size:1.6rem; padding:0 2.5rem; display:inline-block; color:#FFF; margin:2rem 0 0 0 }
.subbanner .bg .bd .subtext .contact:hover{ padding:0 3rem; background-color: #0236D2}

.diy-cat{ padding:6rem 0 0 0; }
.diy-cat .catlist{ padding:3rem 0 0 0; }
.diy-cat .catlist li{width:49%; background: #EEE;background-repeat:no-repeat; background-size:cover;  border-radius: 1rem; height: 20rem; overflow: hidden; position: relative;}
.diy-cat .catlist li:before{ content:''; background:rgba(2,42,155,.5); position:absolute; left:0; top:0; width:100%; height:100%;backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.diy-cat .catlist li.l{ float:left; background-image:url(/img/diycat1.jpg?v=1.0.1); }
.diy-cat .catlist li.r{ float:right; background-image:url(/img/diycat2.jpg?v=1.0.1); }
.diy-cat .catlist li .box{ text-align:center; padding:5rem 0 0 0; position:relative; z-index:1; color:#FFF }
.diy-cat .catlist li .box h4{ font-size:1.8rem; line-height: 3rem; font-weight:normal; }
.diy-cat .catlist li .box p{ font-size:1.3rem; line-height:2rem; padding:.5rem 0 1.8rem 0 }
.diy-cat .catlist li .box .getfa{ display: inline-block; border: 1px solid #FFF; margin: 0 .8rem; color: #FFF; font-size: 1.2rem; padding: .5rem 2.5rem; border-radius: 10rem; }
.diy-cat .catlist li .box .getfa:hover{ background-color: #FFF; color: #022a9b; padding: .5rem 3rem; }

.diy-service{margin: 6rem 0 0 0; padding:5rem 0 0 0; background-color:#F8F8F8 }
.diy-service .bd{ max-width:94rem }
.diy-service ul{ padding:3rem 0 6rem 0 }
.diy-service ul li{ width:25%; float:left; }
.diy-service ul li .box{background-color:#FFF; border-radius: .5rem;  box-shadow: 0 0 20px rgba(200,200,200,.1); text-align: center; margin: 0 2rem; padding: 2rem 1.5rem}
.diy-service ul li .box .icon .iconfont{ font-size:6rem; display:block; width:6rem;height:6rem; line-height:6rem; text-align:center; margin:0 auto; color:#022a9b }
/*.diy-service ul li .box .icon .iconfont.wx{ color:#07c160}
.diy-service ul li .box .icon .iconfont.web{ color:#0071ef }
.diy-service ul li .box .icon .iconfont.app{ color:#00A3D9 }
.diy-service ul li .box .icon .iconfont.other{ color:#FFA64D }*/
.diy-service ul li .box .icon img{  width:5rem; margin:0 auto; }
.diy-service ul li .box .icon{ padding:1rem 0 }
.diy-service ul li .box h3{ font-size:1.8rem; font-weight:normal; }
.diy-service ul li .box .desc{ font-size:1.2rem; color:#999; padding:1.5rem 0 2rem 0; line-height:2em }
.diy-service ul li .box .desc p{ padding:.2rem 0; }
.diy-service ul li .box .btn{ padding:0 0 1.5rem 0; }
.diy-service ul li .box .btn a{ display: inline-block; border: 1px solid #022a9b; background-color:#FFF ; margin: 0 .8rem; color: #022a9b; font-size: 1.2rem; padding: .5rem 2.5rem; border-radius: 10rem; }
.diy-service ul li .box .btn a:hover{ background-color: #022a9b; color: #FFF; padding: .5rem 3rem; }

.diy-liucheng{padding: 6rem 0 7rem 0;}
.diy-liucheng .bd{ max-width:94rem }
.diy-liucheng .box {text-align: center; padding: 3rem 0 0 0; position: relative;}
.diy-liucheng .box .step li{ float:left; width:20%; }
.diy-liucheng .box .step li .box{ padding:0 2rem; }
.diy-liucheng .box .step li .ititle{ background-color:#022a9b; color:#FFF; border-radius:.4rem; position:relative; font-weight:1.6rem; padding:1rem 0 }
.diy-liucheng .box .step li .ititle h4{font-weight: normal; text-align:center; }
.diy-liucheng .box .step li .idesc{ background-color:#FFF; box-shadow: 0 0 20px rgba(100,100,100,.1); margin-top:1rem; border-radius:.4rem; font-size:1.2rem; height:14rem;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.diy-liucheng .box .step li .idesc .i{ background-color:#F8F8F8; border-radius:.4rem; width:80%; height:2.5rem; line-height:2.5rem; margin:.3rem 0; color:#666 }
.diy-liucheng .box .iconfont{ position:absolute; top:1rem; right:-1rem; font-size:1.6rem; color:#022a9b }

.diy-sub{background:#EEE url(/img/subdiybg2.jpg?v=1.0.1) no-repeat center center; background-size: cover;}
.diy-sub .bg{background-color:rgba(0,0,0,.7);padding:6rem 0;  }
.diy-sub .btitle{ color:#FFF }
.diy-sub .box .formlist{ margin:1rem 2rem 0 2rem; }
.diy-sub .box .formlist li{ float:left; width:50%; margin:2rem 0 0 0; }
.diy-sub .box .formlist li .txtbd{ background-color:#FFF; border-radius:.4rem; text-align:center; margin:0 1rem; }
.diy-sub .box .formlist li .txt{ background-color:transparent; width:95%; margin:0 auto; height:4rem; line-height:4rem; border:0; font-size:1.6rem; color:#666 }
.diy-sub .box .btn{ text-align:center; padding:2rem 0 0 0; }
.diy-sub .box .btn a{ display: inline-block;  height:4rem; line-height:4rem; padding:0 4rem; background-color:#022a9b; color:#FFF; font-size:1.6rem; border-radius:10rem; box-shadow:0 0 .3rem rgba(0,0,0,.1) }

.finfo{ background-color: #022a9b; padding: 1.4rem 0; }
.finfo .title{ font-size: 1.4rem; font-weight: bold; color: #FFF; text-align: center; }
.finfo .title span{color: #FCD006; display: inline; padding: 0 2.5rem;}

.footer{ background-color:#333; font-size:1rem; padding:2.3rem 0 }
.footer .copyright,.footer .address{ text-align:center; margin:1rem 0 0 0; }
.footer .address{ margin-top: 1.4rem; }
.footer .address span,.footer .copyright span{ padding: 0 .5rem; display: inline-block; }
.footer a,.footer{ color:rgba(255,255,255,.8);  }
.footer .flogo img{ height:3rem; margin:0 auto; }

.fixed-menu{ position: fixed; right: 1rem;  top: 50%; margin-top: -9rem;  width: 6rem; text-align: center; background-color: rgba(0,0,0,.8); font-size: 1rem; color: #FFF;  z-index: 40; border-radius: 1rem;  }
.fixed-menu .micon,.fixed-menu .menus,.fixed-menu .backtop,.fixed-menu .online{ height: 6rem; position: relative; display:block; cursor: pointer;transition: all .3s;}
.fixed-menu .micon img{ width: 3.6rem; display: inline-block; margin-top: 2rem; }
.fixed-menu .iconfont{ font-size: 1.8rem; height: 2rem; line-height: 2rem; }
.fixed-menu span{margin-top: 1.2rem;display:inline-block;}
.fixed-menu .menus:after,.fixed-menu .backtop:after,.fixed-menu .online:after{ content: ""; height: 1px; background-color: rgba(255,255,255,.2); left: 0; right: 0; position: absolute; top: 0;}
.fixed-menu .m1:after{display: none;}
.fixed-menu p{ line-height: 2rem; height: 2rem; }
.fixed-menu .micon{ padding-bottom: 1rem; }
.fixed-menu .menus .imgbox{ position:absolute; box-shadow:0 0 10px rgba(0,0,0,.1); }
.fixed-menu .menus .qrcode{background-color:#FFF; width:10rem; height:10rem; top:0;display:none;left:-10.2rem;}
.fixed-menu .menus .qrcode div{  margin:5px;}
.fixed-menu .menus .qrcode img{ width:100% }
.fixed-menu .menus .telcode{ background-color:#022a9b; color:#FFF; font-size:1.2rem; height:6rem; line-height:6rem; display:none; white-space:nowrap; padding:0 1rem; right:0; top:1px;}
.fixed-menu .menus .telcode i{font-size:16px; margin-right:3px; vertical-align:middle;}
.fixed-menu .menus .telcode a{ color:#FFF }
.fixed-menu .htel{ color:#FFF }
.fixed-menu .online a{ color:#FFF }
#ismobile{ display:none }
#isnavhide{ display:none }

@media screen and  (min-width:1401px){html{font-size:14px}}
@media screen and  (max-width:1400px){html{font-size:12px}}
@media screen and  (max-width:1200px){
	html{font-size:12px}
	.bd{ width:auto; margin:0 2rem; max-width: none; }
	.bd-ser{ width: auto; max-width: none; }
	.bd-cop{ width: auto; max-width: none; margin: 0 .2rem; }
	.diy-service .bd{ width:auto; max-width:none; margin:0 1rem; }
	.diy-service ul li .box{ margin:0 1rem }
	.diy-liucheng .bd{ width: auto; max-width: none; margin:0 1rem;}
	.diy-liucheng .box .step li .box{ padding:0 1rem; }
}
@media screen and  (max-width:1070px){
	.service .prolist li{ width: 50%; }
	.cooperation .brandlist li{ width: 25%; }
	.diy-service ul li .box .btn a{ padding:.5rem 1.5rem }
	.diy-service ul li .box .btn a:hover{padding:.5rem 1.5rem}
}
@media screen and  (max-width:870px){
	.diy-service ul{ padding-bottom:4rem }
	.diy-service ul li{ width:50%; margin-bottom:2rem }
}
@media screen and  (max-width:760px){
	.header .nav{ display: none; float: none; position: fixed; left: 0; right: 0; top: 7rem; background-color: rgba(0,0,0,.9);}
	.header .nav li{ display:block; float:none; text-align:center; padding:0;font-size:1.6rem }
	.header-bg .header .nav li .item{ color:#FFF;  }
	.header-bg .header .nav li .item:hover{ color:#FFF }
	.header .menubtn{ display: block; }
	.service .prolist li .box .tags span{ margin: 0 .5rem; }
	.service .prolist li .box .cbtn a{ margin: 0 .5rem; }
	.about .desc .servicelist ul{ width: 80%; }
	/*.fixed-menu{ bottom:0; top:auto; margin-top:auto; left:0; width:100%; border-radius:0 }
	.fixed-menu .li{float: left;width: 25%; position: relative; padding: .5rem 0}
	.fixed-menu .li:after{ position:absolute; right:0; content:""; left: auto; width:1px; height: auto; top:0; bottom:0 }
	.fixed-menu .li:last-child:after{ display:none; }
	.fixed-menu .li{ height: 5rem; }
	.fixed-menu span{ margin-top: .7rem; }
	.fixed-menu p{ height: 1.6rem; line-height: 1.6rem; font-size:1.2rem }
	.fixed-menu .m1:after{display: block;}
	.fixed-menu .menus .qrcode{ left:50%; margin-left: -5rem; top:auto; bottom:6.5rem }
	.fixed-menu .menus .telcode{ top:auto; bottom:6.5rem; border-radius:0 }*/
	#ismobile{ display:block; }
	.banner .bd .content{ margin-top: -10rem; }
	.banner .bd .content h2{ font-size: 3rem; }
/*	.banner .bd .content .desc{ font-size: 1.2rem; }*/
	.diy-liucheng .box .step li{ width:33.3333%; margin-bottom:2rem }
	.diy-liucheng{ padding-bottom:5rem }
	.diy-sub .box .formlist{ margin-left:0; margin-right:0 }
	.service .prolist .diy a{ font-size:1.4rem }
	.about .desc .introduction{ font-size:1.4rem }
	#ismobile{ display:block; }
	#isnavhide{ display:block; }
}
@media screen and  (max-width:640px){
	.service .prolist li{ width: 100%; }
	.about .desc .servicelist ul{ width: 90%; }
	.cooperation .brandlist li{ width: 33.3333%; }
	.diy-cat .catlist li .box p{ padding-left:2rem; padding-right:2rem; }
	.diy-sub .box .formlist li{ width:100% }
	.diy-cat .catlist li{ width:100%; margin-bottom:2rem }
	.diy-service{ margin-top:4rem }
	.btitle{ padding:0 2rem }
	.service .prolist li .box .names h3{ font-size:1.8rem }
	.service .prolist li .box .desc{ font-size:1.4rem }
	.service .prolist li .box .tags{ font-size:1.2rem; }
	.service .prolist li .box .cbtn a{ font-size:1.4rem; padding:.3rem 2.5rem }
	.service .prolist li .box .cbtn a:hover{padding:.3rem 3rem}
/*	.fixed-menu .menus .qrcode{ width:8rem; height:8rem; margin-left:-4rem }*/
	.fixed-menu{ bottom:0; top:auto; margin-top:auto; left:0; width:100%; border-radius:0 }
	.fixed-menu .li{float: left;width: 25%; position: relative; padding: .5rem 0}
	.fixed-menu .li:after{ position:absolute; right:0; content:""; left: auto; width:1px; height: auto; top:0; bottom:0 }
	.fixed-menu .li:last-child:after{ display:none; }
	.fixed-menu .li{ height: 4rem; }
	.fixed-menu span{ margin-top: .2rem; }
	.fixed-menu p{ height: 1.6rem; line-height: 1.6rem; }
	.fixed-menu .m1:after{display: block;}
	#ismobile{ display:block; }
	.fixed-menu .menus .qrcode{ left:0; top:auto; bottom:5.2rem }
	.fixed-menu .menus .telcode{ top:auto; bottom:6.5rem; border-radius:0 }
	.footer{ padding-bottom:8rem }
	.banner .bd .nextpage{ bottom:7rem; }
}

@media screen and  (max-width:480px){
	html{font-size:12px}
	.service .prolist li .box .cbtn a{ margin: 1rem .5rem 0 .5rem; }
	.banner .bd .content{ margin-top: -15rem; }
	.banner .bd .content h2{ font-size: 3rem; }
/*	.banner .bd .content .desc{ font-size: 1.2rem; }*/
	.finfo .title span{ padding:0 1rem }
	.footer{ font-size:.8rem }
	.about .desc .servicelist li .nums strong{ font-size:3rem }
	.about .desc .servicelist ul{ width: 100%; }
	.diy-liucheng .box .step li{ width:50% }
	.diy-service ul li{ width:100% }
	.diy-service ul li .box h3{ font-size:2rem; position:relative; padding-bottom:1rem }
	.diy-service ul li .box h3:after{content:''; height: .3rem; background-color: #022a9b; position: absolute; bottom: 0; left: 50%; margin-left: -2.5rem; width: 5rem;}
	.diy-service ul li .box .desc{ font-size:1.4rem; }
	.diy-service ul li .box .btn a{ font-size:1.4rem; padding:.5rem 2.5rem; }
	.diy-liucheng .step li:nth-child(2) .box .iconfont{display: none;}
	.diy-liucheng .step li:nth-child(4) .box .iconfont{display: none;}
	/*.fixed-menu .menus .qrcode{ width:7rem; height:7rem; margin-left:-3.5rem }
	.fixed-menu p{ font-size:1rem; }
	.fixed-menu .li{ padding:0; }
	.fixed-menu .menus .qrcode{ bottom:5.5rem }*/
}