@charset "utf-8";
body,div,ul,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,i{margin:0; padding:0;}
li,i{list-style:none;  font-style: inherit;}
input,textarea,select{font-family:inherit; font-weight:inherit; font-size:14px;}
img{border:0;}
dl,dt,dd{margin: 0px; padding: 0px; list-style: none;}
.cl,.clear{height:0; overflow:hidden; clear:both;}
.fl{ float:left}
.fr{ float:right}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
body,td,th{font-size: 14px;color:#333333;}
body{font-family:Microsoft YaHei; font-size: 14px; min-width:1400px; color:#333333;}
a{font-size:14px; color:#333333;}
.w1400 { width:1400px; margin:auto;}
.mar50{ margin:50px auto;}
.bottom30{margin-bottom:50px;}
.dis{ display: none;}
.w1050{width:1050px; float:right;}
em{font-style: initial;}

.top{height: 45px; line-height: 45px; background: #f5f5f5; color: #aaa; font-size: 14px;}
.top a{color: #aaa; font-size: 14px;}
.top .fr a{ display: block; height: 24px; float: left; padding:0 14px; border-right: 1px solid #dcdcdc; line-height: 24px;margin-top: 11px; transition:all 0.5s; position:relative;}
.top .fr a img{ width:137px; position:absolute; left: -13px;top: 34px; display:none;}
.top .fr a:hover{ color:#2370c8;}
.top .fr a:hover img{ display:block;}
.top .fr a:first-child{ border-left: 1px solid #dcdcdc; }

.top2 .logo{ display: block; margin: 40px 0;}
.top2_one{margin: 38px 0 0 30px;}
.top2_one strong{ font-size: 26px; color: #f1c61e; display: block;letter-spacing: 0.5px;}
.top2_one p{ font-size: 16px; color: #777;letter-spacing: 0.2px;}
.top2_two { text-align: right;margin-right: 20px;}
.top2_two span{ font-size: 13px; color: #777; display: block;margin:2px 0 -2px;}
.top2_two strong{ font-size: 26px; color: #2370c8; display: block;letter-spacing: -1px;}
.top2 .fr{margin-top: 42px;}

.nav{ height: 70px; background: #2370c8;}
.nav li{ float: left; width: 11.111%; position: relative;}
.nav li a{ display: block; text-align: center; line-height: 70px; font-size: 16px; color: #fff; position: relative; z-index: 0;}
.nav li::before{content: ""; display: block; position: absolute; width: 0; height: 100%; transition: all 0.5s ease; background: #f1c61e; left: 0; top: 0; z-index: 0;}
.nav li.cur::before,.nav li:hover::before{ width: 100%;}



.service{ background:url(images/4_02.jpg) no-repeat center; height: 729px; overflow: hidden;}
.title{ text-align: center; margin: 73px 0 37px;}
.title span{ font-size: 40px; color: #2370c8; display: block; margin-bottom: 2px;}
.title strong{ color: #f1c61e;}
.title p{ font-size: 18px; color: #999;}
.service li{ width: 320px; height: 468px; float: left; margin-left: 40px; background: #fff; text-align: center; position: relative;}
.service li:first-child{ margin-left: 0;}
.service li img{ display: block; position: relative; z-index: 1;}
.service li strong{ font-size: 24px; color: #333; display: block; margin: 38px 0 2px; position: relative; z-index: 1; transition: all 0.5s;}
.service li span{ font-family: Arial; font-size: 12px; color: #dddddd; text-transform: uppercase;position: relative; z-index: 1;transition: all 0.5s;}
.ser_xt{ width: 23px; height: 2px; background: #2370c8; margin: 15px auto;position: relative; z-index: 1;transition: all 0.5s;}
.service li p{ color: #999; font-size: 15px; width: 290px; text-align: center; margin: 0 auto; line-height: 25px;position: relative; z-index: 1;transition: all 0.5s;}
.service li a{ width: 40px; height: 40px; display: block; border-radius: 20px; background: #2370c8; font-size:24px ; color: #fff; text-align: center; line-height: 40px; margin: 0 auto; font-weight: 100; margin-top: 24px;position: relative; z-index: 1;transition: all 0.5s;}
.service li::before{content: ""; display: block; position: absolute; width: 100%; height: 0%; transition: all 0.5s ease; background: #2370c8; left: 0; top: 0; z-index: 0;}
.service li:hover::before{ height: 100%;}
.service li:hover strong{ color: #fff;}
.service li:hover span{ color: #fff;opacity: .3;}
.service li:hover .ser_xt{ background: #fff;}
.service li:hover p{ color: #fff;opacity: .7;}
.service li:hover a{ background: #fff; color: #2370c8;}


.products{ overflow: hidden;}
.pro_nav{ margin: 0 auto 30px; width: 1190px;}
.pro_nav li{ width: 208px; height: 45px; text-align: center; line-height: 45px; background: #f5f5f5; float: left; margin: 0 15px; transition: all 0.5s; } 
.pro_nav li a{ display: block; font-size: 15px; color: #333;}
.pro_nav li:hover{ background: #2370c8;}
.pro_nav li:hover a{ color: #fff;}
.pro_con a{ width: 335px; height: 301px; float: left; display: block; margin-right: 20px; overflow: hidden;} 
.pro_con a:nth-child(4n){ margin-right: 0;}
.pro_con a:nth-child(n+5){ margin-top: 20px;}
.pro_con a img{ display: block; width: 335px; height: 251px; transition: all 0.5s ease;}
.pro_con a p{ height: 50px; line-height: 50px; position: relative; background: #f5f5f5;}
.pro_con a p span{ padding-left: 20px; font-size: 15px; color: #333; position: relative; z-index: 1;}
.pro_con a p::before{ content: ""; display: block; width: 14px; height: 16px; background: url(images/6.png) no-repeat left; position: absolute; right: 20px; top: 17px; transition: all 0.5s; z-index: 1;}
.pro_con a p::after{content: ""; display: block; position: absolute; width: 100%; height: 0%; transition: all 0.5s ease; background: #2370c8; left: 0; top: 0; z-index: 0;}
.pro_con a:hover p::after{ height: 100%;}
.pro_con a:hover p::before{background: url(images/6.png) no-repeat right;}
.pro_con a:hover p span{ color: #fff;}
.pro_con a:hover img{ transform: scale(1.1);}




.advantage{ background: url(images/9_03.jpg);  position: relative; overflow: hidden; margin-top: 80px;}
.advantage_box{position: relative; height: 100%;}
.adv_til{ position: absolute;left:0;top: 7px;}
.adv_til strong{ font-size: 40px; color: #2370c8; display: block; margin-top: 7px; width: 315px; background: url(images/8_03.png) no-repeat right center;}
.adv_til strong span{ color: #f1c61e;}
.adv_til p{ font-size: 25px; color: #333;}
.adv_nav{position: absolute; background: #f9f9f9; width: 1400px; bottom: 0; left: 50%; margin-left: -700px; z-index: 1;}
.adv_nav li{ height: 150px; width: 25%; box-sizing: border-box; border-left:1px solid #e0e0e0 ; float: left;text-align: center; padding-top: 53px; max-height: 182px; cursor: pointer;}
.adv_nav li:first-child{ border-left: none;}
.adv_ico{ display: inline-block; height: 43px; width: 47px; overflow: hidden; margin-right: 15px;}
.adv_ico img{position: relative; transition: all 0.5s; top:0;}
.adv_one{ display: inline-block;text-align: left;}
.adv_one strong{ display: block; font-size: 24px; color: #333;transition: all 0.5s;}
.adv_one span{ font-weight: bold; font-family: Arial; font-size: 12px; color: #333; transition: all 0.5s;}
.adv_nav li.on{ background: #2370c8;}
.adv_nav li.on strong,.adv_nav li.on span{ color: #fff;}
.adv_nav li.on .adv_ico img{ top: -54px;}
.adv_nav li:nth-child(2) .adv_ico{ width: 52px;}
.adv_nav li:nth-child(2) .adv_ico img{left: -60px;}
.adv_nav li:nth-child(3) .adv_ico{ width: 43px;}
.adv_nav li:nth-child(3) .adv_ico img{left: -129px;}
.adv_nav li:nth-child(4) .adv_ico{ width: 48px;}
.adv_nav li:nth-child(4) .adv_ico img{left: -182px;}

.adv_img{position: absolute;right: 0; top: 0; z-index: 0; }
.adv_con dl{position: relative;  width: 1660px;height:535px; padding-top:50px;}
.adv_til2{ font-size: 22px; color: #333; display: block;font-weight: inherit;}
.adv_til2 em{    display: block;color: #2370c8;font-size: 30px;font-weight: bold;}
.adv_con dl p{ font-size: 15px; width: 767px; text-align: justify; color: #999; line-height: 25px; margin-bottom: 40px;border-top: 1px solid #dadada;margin-top: 45px;padding-top: 36px;}
.adv_tel{ border-bottom: 3px solid #2370c8;margin-top: 5px; background: url(images/10_03.png) no-repeat center left;padding-left: 40px;width: 340px;}
.adv_tel span{ font-size: 14px; color: #333; display: inline-block;}
.adv_tel span strong{ font-family: Arial; color: #2370c8; font-size: 32px;display: inline-block;vertical-align: sub;}
.adv_sz{    width: 77px;height: 77px;background: #2370c8;color: #fff;text-align: center;line-height: 77px;font-size: 50px;border-radius: 5px;    font-family: Arial;font-weight: bold; margin-right: 25px}
 

.process{ background: url(images/17_02.jpg) no-repeat center; height: 494px; overflow: hidden;}
.proc_til{ margin: 70px 0 27px; text-align: center;}
.proc_til strong{ font-size: 35px; color: #fff; }
.proc_til span{ font-size: 12px; color: #fff; font-family: Arial; display: block; text-transform: uppercase; margin-top: 3px;}
.process li{width: 16.667%; text-align: center;float: left;}
.process .proc_ico{ width: 84px; height: 84px; text-align: center; background: #fff; border-radius: 50%; margin: 0 auto; transition: all 0.5s;}
.process li span{ width: 9px; height: 9px; background: #fff; border-radius: 5px; display: block; margin: 27px auto 20px; transition: all 0.5s;}
.process li strong{ font-size: 18px; color: #fff; font-weight: initial;} 
.process li p{ font-size: 12px; color: #fff; opacity: .3; text-transform: uppercase;}
.proc_a{ width: 179px; height: 45px; background: #f1c61e; line-height: 45px; text-align: center; color: #fff; font-size: 16px; display: block; margin: 38px auto;}
.process li:hover span{ box-shadow: 0px 0px 0px 5px rgba(241, 198, 30, .5); background: #f1c61e;}
.process li:hover .proc_ico{ transform:rotateY(180deg);}