@charset "utf-8";
*,:after,:before{box-sizing:border-box;}
html{-webkit-text-size-adjust:none;}
html{zoom:1;}
html *{outline:0;zoom:1;}
body,blockquote,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;}
body,button,input,select,textarea{font-size:14px;line-height:30px;font-family:arial,microsoft yahei,Microsoft YaHei;}
body{color:#333;margin:0 auto;background:#fff;
/*禁用Webkit内核浏览器的文字大小调整功能*/
-webkit-text-size-adjust:none;
/*取出点击出现半透明的灰色背景*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight:rgba(0,0,0,0);
/*设置字体的抗锯齿或者说光滑度*/
-webkit-font-smoothing: antialiased;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:400;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400;}
em,i{font-style:normal;}
li{list-style:none;}
img{-webkit-box-sizing:border-box;box-sizing:border-box;max-width:100%;height:auto;vertical-align:middle;border:0;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#0165b3;text-decoration:none;}
a,a:focus{outline:0;}
.clearfix:after{clear:both;display:block;visibility:hidden;height:0;content:"";}
.clearfix{display:block;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.wrap{clear:both;display:block;margin:0 auto;width:1200px;}
.animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;}
a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
.hide,.none,ins{display:none;}
.bor_box::after,.bor_box::before{pointer-events:none;}
.bor_box::after,.bor_box::before{position:absolute;top:15px;right:15px;bottom:15px;left:15px;content:'';opacity:0;-webkit-transition:opacity .35s,-webkit-transform .35s;transition:opacity .35s,transform .35s;}
.bor_box::before{border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);}
.bor_box::after{border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);}
a:hover .bor_box::after,a:hover .bor_box::before{opacity:.7;-webkit-transform:scale(1);transform:scale(1);}

#header{ width:100%; height:100px; z-index:999; background:#fff}
#header .logo{ padding:20px 0;}
#header .mtel{ display: none}
#header .tel{ font-size:18px; padding:35px 0}
#header .tel i{ margin:0 15px; color:#999;}
#banner{ width:100%; position:relative; overflow:hidden}
@media (max-width:800px){
	#header{ position:fixed; top:0; left:0;;box-shadow: 0 1px 5px rgba(0,0,0,.05);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,.05);
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.05);}
	#header{ width:100%; height:1rem; padding:0 .3rem}
	#header .logo{ padding:.25rem 0;}
	#header .logo img{ height:.5rem}
	#header .tel{ display:none}
	#header .mtel{ display: inline-block}
	#header .mtel{ font-size:.22rem; padding:.35rem 0 0}
	#header .mtel i{ margin-right:.1rem; color:#2e9eda; border:.02rem solid #2e9eda; display:inline-block; width:.3rem; height:.3rem;border-radius:.3rem; text-align:center; line-height:.3rem; font-size:.2rem; font-weight: normal}
	#banner{ width:100%; position:relative; overflow:hidden; margin-top:1rem; height:3rem}
	#banner img{width:100%;height:100%;object-fit:cover}
}

.htitle{text-align:center;}
.htitle .t{font-size:23px; display:block; color:#2e9eda; background:url(../images/titbg.png) no-repeat center top; padding-top:30px}
.htitle .en{ font-size:14px; display:block; text-transform:uppercase}

.htitle2 .t{color:#fff;background:url(../images/titbg2.png) no-repeat center top;}
.htitle2 .en{color:#fff;}
@media (max-width:800px){
	.wrap{ width:100%}		
	.htitle span{line-height:.3rem}
	.htitle .t{font-size:.26rem;font-weight:700; background-size: auto .2rem; padding-top:.3rem}
	.htitle .en{font-size:.2rem; margin-top:.1rem}
}
#service{ padding:50px 0;}
#service .list{position:relative;height:350px;width:970px;margin:30px auto 0}
#service .list .item{width:66px;position:absolute;height:114px;display:block;text-align:center;color:#4d4d4d;background-color:#e5e5e5}
#service .list .item:before{content:"";position:absolute;top:0;left:-35px;border-top:57px solid transparent;border-bottom:57px solid transparent;border-right:35px solid #e5e5e5;z-index:2}
#service .list .item:after{content:"";position:absolute;top:0;right:-35px;border-top:57px solid transparent;border-bottom:57px solid transparent;border-left:35px solid #e5e5e5;z-index:2}
#service .list .item,
#service .list .item:before,
#service .list .item:after,
#service .list .item i,
#service .list .item p{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
#service .list .item.on{ background:#2e9eda}
#service .list .item.on:before{ border-right:#2e9eda 35px solid }
#service .list .item.on:after{ border-left:#2e9eda 35px solid }
#service .list .item i{ font-size:30px; margin-top:30px; color:#666}
#service .list .item p{ line-height:14px; margin-top:5px; font-size:12px}
#service .list .item.on i,
#service .list .item.on p{ color:#fff}
#service .list .item:hover{ background:#ccc}
#service .list .item:hover:before{ border-right:#ccc 35px solid }
#service .list .item:hover:after{ border-left:#ccc 35px solid }
#service .list .item:hover i,
#service .list .item:hover p{ color:#333}
#service .list .item1{top:119px;left:35px}
#service .list .item2{top:59px;left:139px}
#service .list .item3{top:178px;left:139px}
#service .list .item4{top:119px;left:243px}
#service .list .item5{top:59px;left:347px}
#service .list .item6{top:178px;left:347px}
#service .list .item7{left:451px;top:0}
#service .list .item8{top:237px;left:451px}
#service .list .item9{top:59px;left:555px}
#service .list .item10{top:178px;left:555px}
#service .list .item11{top:119px;left:659px}
#service .list .item14{top:119px;left:867px}
#service .list .item13{top:59px;left:763px}
#service .list .item12{top:178px;left:763px}
@media (max-width:800px){
	#service{ padding:.3rem .3rem}
	#service .list{position: inherit;height: auto;width:100%; margin-top:.2rem;}
	#service .list .item{width:calc(94% / 3);position: inherit;height: auto;display: inherit;text-align:center;color:#4d4d4d;background-color:#f5f5f5; float:left; margin-right:3%; margin-top:3%; padding:3% 0}
	#service .list a:nth-child(3n) .item{ margin-right:0}
	#service .list .item:before{ display:none}
	#service .list .item:after{ display:none}
	#service .list .item i{ font-size:.36rem; margin-top:0; color:#666; line-height:.36rem}
	#service .list .item p{ line-height:14px; margin-top:0; font-size:.2rem; padding:0 20%; line-height:.24rem; height:.48rem}
	#service .list .item.on i,
	#service .list .item.on p{ color:#fff}
	#service .list .item:hover{ background:#ccc}
	#service .list .item:hover:before{ border-right:#ccc 35px solid }
	#service .list .item:hover:after{ border-left:#ccc 35px solid }
	#service .list .item:hover i,
	#service .list .item:hover p{ color:#333}
}
#adv{ padding:50px 0;}
#adv .list{ margin-top:.3rem;}
#adv .list .left{ width:calc((100% - 600px) / 2); float:left}
#adv .list .left .text{ text-align:right; margin-top:10px; font-size:16px;}
#adv .list .left .text h3{ display:none}
#adv .list .left .text2{ margin-top:110px}
#adv .list .left .text p{ padding-bottom:5px}
#adv .list .left .text p span{ border-bottom:1px solid #ddd; padding-bottom:5px}
#adv .list .right{ width:calc((100% - 600px) / 2); float:right}
#adv .list .center{ float:left;  background:url(../images/adv_mj.png) no-repeat center center; width:600px; height:515px; position:relative}
#adv .list .right .text{ text-align:left; margin-top:10px; font-size:16px;}
#adv .list .right .text h3{ display:none}
#adv .list .right .text2{ margin-top:110px}
#adv .list .right .text p{ padding-bottom:5px}
#adv .list .right .text p span{ border-bottom:1px solid #ddd; padding-bottom:5px}
#adv .list .center .item{ position:absolute; width:100px; height:100px; background:#fff; border-radius:100%; text-align:center; line-height:100px; font-weight:700; font-size:30px}
#adv .list .center .item1{ position:absolute; left:100px; top:80px;}
#adv .list .center .item2{ position:absolute; right:100px; top:80px; }
#adv .list .center .item3{ position:absolute; left:100px; bottom:80px;}
#adv .list .center .item4{ position:absolute; right:100px; bottom:80px;}
@media (max-width:800px){
	#adv{ padding:.3rem .3rem}
	#adv .list{ margin-top:.5rem;}
	#adv .list .left{ float:inherit; width:100%}
	#adv .list .left .text{ text-align:left; background:#f5f5f5; padding:.2rem; border-radius:.04rem}
	#adv .list .left .text h3{ display:block;font-weight:700; font-size:.3rem}
	#adv .list .left .text2{ margin-top:.1rem}
	#adv .list .left .text p{ padding-bottom:0; line-height:.38rem}
	#adv .list .left .text p span{ border-bottom:0px solid #ddd; font-size:.26rem;}
	#adv .list .right{ width:calc((100% - 600px) / 2);}
	#adv .list .center{ display:none}
	#adv .list .right{ width:100%}
	#adv .list .right .text{ text-align:left; background:#f5f5f5; padding:.2rem;border-radius:.04rem}
	#adv .list .right .text h3{ display:block; font-weight:700; font-size:.3rem}
	#adv .list .right .text2{ margin-top:.1rem}
	#adv .list .right .text p{ padding-bottom:0; line-height:.38rem}
	#adv .list .right .text p span{ border-bottom:0px solid #ddd; font-size:.26rem;}
}
#client{ width:100%; padding:50px;}
#client .list{ width:1200px; overflow:hidden; margin-top:50px}
#client .list .swiper-slide{ padding:20px; background:#f5f5f5}
#client .button{width:38px;height:38px;line-height:38px; border:2px solid #2e9eda; border-radius:100%;}
#client .button{position:absolute;left:-50px;top:60px;z-index:99;cursor:pointer; text-align:center; font-size:24px; color:#2e9eda}
#client .button-prev{left:-50px;}
#client .button-next{right:-50px; left:auto}
#client-container{ position:relative}
@media (max-width:800px){
	#client{ padding:.3rem .3rem}
	#client .list{ width:100%; overflow:hidden; margin-top:.5rem}
	#client .list .swiper-slide{ padding:0; background:#f5f5f5}
	#client .button{display:none}
	#client-container{ position:relative}
}
#techer{ width:100%; padding:50px 0; background:#fff}
#techer .list{width:1200px;overflow:hidden;margin-top:50px;}
#techer .list .swiper-slide{ position:relative; overflow:hidden}
#techer .list .swiper-slide .img{ overflow:hidden}
#techer .list .swiper-slide .t{ text-align:center; margin-top:20px; font-size:18px; text-align:center;}
#techer .list .swiper-slide p{ text-align: center; color:#888; line-height:20px}
#techer .button{width:38px;height:38px;line-height:38px; border:2px solid #2e9eda; border-radius:100%;}
#techer .button{position:absolute;left:-50px;top:150px;z-index:99;cursor:pointer; text-align:center; font-size:24px; color:#2e9eda}
#techer .button-prev{left:-50px;}
#techer .button-next{right:-50px; left:auto}
#techer-container{ position:relative}
@media (max-width:800px){
	#techer{ padding:.3rem .3rem 1.1rem}
	#techer .list{margin-top:.5rem; width:100%}
	#techer .list .swiper-slide .t{ margin-top:.1rem; font-size:.24rem; line-height:.4rem;}
	#techer .list .swiper-slide  p{ line-height:.3rem; font-size:.24rem;  margin-top:.05rem;}
	#techer .button{width:.4rem;height:.4rem;line-height:.4rem;}
	#techer .button{position:absolute;left:calc((100% - .6rem) / 2);top:auto; bottom:-.7rem; font-size:.24rem;}
	#techer .button-prev{left:calc((100% - .9rem) / 2); right:auto}
	#techer .button-next{right:calc((100% - .9rem) / 2); left:auto}
}
#feedback{ width:100%; padding:50px 0; background:url(../images/form_bg.jpg) no-repeat center center; background-size:cover}
#feedback .formbox{ margin-top:50px; padding:0 200px}
#feedback .formbox .inp{ float:left; width:49%; margin:10px 0}
#feedback .formbox .inp:nth-child(2n){ float:right}
#feedback .formbox .inp .text{ border:1px solid #fff; border-radius:4px; width:100%; text-indent:10px; line-height:50px}
#feedback .formbox .textarea{ width:100%}
#feedback .formbox .textarea .text{ height:180px}
#feedback .formbox .button{ margin-top:10px; text-align: center}
#feedback .formbox .button .btn{ background:#2e9eda; color:#fff; border-radius:4px; padding:10px 60px; font-size:18px; border:0}
#feedback .formbox .button .btn:hover{ opacity:.8}
@media (max-width:800px){
	#feedback{  padding:.3rem .3rem;}
	#feedback .formbox{ margin-top:.5rem; padding:0}
	#feedback .formbox .inp{ float: inherit; width:100%; margin:.1rem 0}
	#feedback .formbox .inp:nth-child(2n){ float: inherit}
	#feedback .formbox .inp .text{ border-radius:.04rem; width:100%; text-indent:.1rem; line-height:.7rem; font-size:.26rem}
	#feedback .formbox .textarea{ width:100%}
	#feedback .formbox .textarea .text{ height:2rem}
	#feedback .formbox .button{ margin-top:.1rem;}
	#feedback .formbox .button .btn{ border-radius:.04rem; padding:.1rem 0px; font-size:.26rem; width:100%;}
}
#about{ padding:50px 0;}
#about .content{ margin-top:50px;}
#about .left{ width:48%; float:left; overflow:hidden}
#about .left img{ width:100%}
#about .right{ width:48%; float:right}
#about .right .info{ line-height:30px; font-size:16px}
#about .fr{ float:right}
#about .fl{ float:left}
#about .lccontent{ margin-top:50px; text-align:center; padding:50px 0}
#about .lccontent img{ max-width:100%}
@media (max-width:800px){
	#about{ padding:.3rem .3rem;}
	#about .fr{ float:inherit; display:block}
	#about .fl{ float:inherit; display:block}
	#about .content{ margin-top:.3rem;}
	#about .lccontent{ margin-top:.3rem; text-align:center}
	#about .left{ width:100%; float: inherit; overflow:hidden}
	#about .left img{ width:100%}
	#about .right{ width:100%; float: inherit; margin-top:.2rem}
	#about .right .info{ line-height:.38rem; font-size:.26rem}
}
#footer{ width:100%; background:#333}
#footer .info .left{ float:left;color:#fff; padding:50px 0}
#footer .info .left p:nth-child(1){ font-size:18px; font-weight:700}
#footer .info .right{ float:right; padding:30px 0 0;}
#footer .info .right{ color:#fff}
#footer .info .right .rleft{ float:left}
#footer .info .right .rleft img{ width:120px;}
#footer .info .right .rright{ color:#fff; text-align:left; margin-left:20px; float:right}
#footer .cor{ border-top:1px solid #444; text-align:center; color:#ddd; line-height:24px; padding:20px 0; margin-top:20px}
@media (max-width:800px){
	#footer{ text-align:center}
	#footer .info .left{ float:left;color:#fff; padding:.3rem; font-size:.24rem; line-height:.4rem}
	#footer .info .left p:nth-child(1){ font-size:.3rem; font-weight:700}
	#footer .info .right{float:inherit;padding:.3rem 0 0; border-bottom:1px solid #444}
	#footer .info .right .rleft{ float:inherit; display:inline-block;}
	#footer .info .right .rleft p{ font-size:.2rem}
	#footer .info .right .rright{ float:inherit; display:inline-block; vertical-align: top; font-size:.24rem}
	#footer .cor{ line-height:.3rem; padding:.2rem 0; margin-top:.2rem; font-size:.2rem}
}
#gotop{position:fixed;right:.2rem;bottom:1rem;z-index:900;display:none;width:.6rem;height:.6rem;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;background-color:rgba(27,27,27,.6);}
#gotop img{display:block;width:.6rem;height:.6rem;}