@charset "utf-8";html, body {padding: 0; margin: 0; background: #fff;}
*{margin: 0; padding: 0; font-family: Arial, Helvetica, Verdana, 'Microsoft YaHei'; border: 0; outline: medium; text-shadow: none; text-decoration: none;}
body {color: #333; font-size: 14px; line-height: 1.5; position: relative; -webkit-text-size-adjust: none; -ms-text-size-adjust: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-x: hidden;}
input {vertical-align: middle;}
textarea {resize: none;}
h1, h2, h3, h4, h5, h6 {font-weight: normal; font-size: 14px;}
hr {border-width: 1px; border-style: inset;}
ul {list-style: none;}
p {margin: 0;}
a, a:link, a:active, a:visited, a:hover {text-decoration: none;}
i {display: block;}
i, em {font-style: normal;}
html{height: 100%;}
html, body {width: 100%; min-height: 100%;}
.fr{float: right;}
.fl{float: left;}
.clear{clear: both;}

/* head */
.head{width: 100%;position: fixed;top: 0;left: 0;z-index: 11;background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));
  /*background-color: rgba(255,255,255,0.3);*/
}
.headleft,.headright{float: left;width: 100%;height: 90px;text-align: center;transition: all 0.3s;}
.headleft .logo{height: 100%;}
.headleft .logo a,.headleft .logo a h1{display: inline-block;width: 100%;margin: 0;height: 100%;}
.headleft .logo a h1 img{display: inline-block;max-width: 80%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);max-height: 70%;}
.headright{position: relative;}
.headright .nav{width: calc(100% - 310px);float: left;}
.headright .nav .navBox ul{margin: 0;}
.headright .nav .navBox ul .child{display: block;float: left;width: 11.111111%;text-align: center;line-height: 90px;font-size: 16px;transition: all 0.3s;position: relative;}
.headright .nav .navBox ul .child>a{color: #222;}
.headright .nav .navBox ul .child>a p{position: relative;}
.headright .nav .navBox ul .child>a p::before{content: '';display: inline-block;position: absolute;width: 0;right: 0;bottom: 20px;height: 2px;background-color: #125BAB;transition: all 0.3s;}
.headright .nav .navBox ul .child:hover>a{color: #125BAB;}
.headright .nav .navBox ul .child:hover>a p::before{left: 0;width: 100%;}
.headright .nav .navBox ul .child .childContent{padding: 10px 5px;transform-origin: top;transition: all 0.3s;position: absolute;width: auto;white-space: nowrap;left: 50%;transform:rotateX(90deg) translateX(-50%);}
.headright .nav .navBox ul .child .childContent li{width: 100%;line-height: 50px;}
.headright .nav .navBox ul .child .childContent li a{color: #fff;display: inline-block;width: 100%;height: 100%;}

.headright .nav .navBox ul .child:hover .childContent{transform: rotateX(0deg) translateX(-50%);background-color: rgba(0,0,0,0.6);}
.headright .headtel{height: 52px;font-size: 15px;position: absolute;right: 30px;top: 50%;transform: translateY(-50%);cursor: pointer;}
.headright .headtel img{height: 42px;margin: 5px 0;float: left;}
.headright .headtel strong{display: block;;float: left;line-height: 26px;margin-left: 10px;font-size: 17px;color: #333;}

.head.tr{background-image: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,1));}
.head.tr .headleft,.head.tr .headright{height: 75px;}
.head.tr .headright .nav .navBox ul .child{line-height: 75px;}

/* wapnav */
.menu-btn {position: absolute; z-index: 3; display: flex; justify-content: center; align-items: center; width: 105px; height: 43px; border-radius: 22px; cursor: pointer; transition: 0.4s 0.2s; background: rgba(0, 0, 0, 0.4); top: 50%; right: 3%; transform: translateY(-50%);}
.menu-btn p {margin-right: 10px; color: #fff; font-size: 15px; text-transform: uppercase; transition: 0.4s 0.2s;}
.menubtn {position: relative; z-index: 20; float: right; cursor: pointer; transition: 0.4s; cursor: pointer;}
.menubtn span {display: block; width: 18px; height: 2px; background: #fff; position: relative; vertical-align: middle; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s; -webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:after, .menubtn span:before {content: ""; position: absolute; display: inline-block; width: 100%; height: 2px; left: 0; background-color: #fff; -webkit-transition-duration: .3s,.3s; -moz-transition-duration: .3s,.3s; -ms-transition-duration: .3s,.3s; -o-transition-duration: .3s,.3s; transition-duration: .3s,.3s; -webkit-transition-delay: .3s,0s; -moz-transition-delay: .3s,0s; -ms-transition-delay: .3s,0s; -o-transition-delay: .3s,0s; transition-delay: .3s,0s;}
.menubtn span:before {top: -6px; -webkit-transition-property: top,transform; -moz-transition-property: top,transform; -ms-transition-property: top,transform; -o-transition-property: top,transform; transition-property: top,transform;}
.menubtn span:after {bottom: -6px; -webkit-transition-property: bottom,transform; -moz-transition-property: bottom,transform; -ms-transition-property: bottom,transform; -o-transition-property: bottom,transform; transition-property: bottom,transform;}
.menubtn.active span {background-color: transparent; -webkit-transition-delay: 0s,0s; -moz-transition-delay: 0s,0s; -ms-transition-delay: 0s,0s; -o-transition-delay: 0s,0s; transition-delay: 0s,0s;}
.menubtn.active span:after, .menubtn.active span:before {-webkit-transition-delay: 0s,.3s; -moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s;}
.menubtn.active span:before {top: 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);}
.menubtn.active span:after, .menubtn.active span:before {-webkit-transition-delay: 0s,.3s; -moz-transition-delay: 0s,.3s; -ms-transition-delay: 0s,.3s; -o-transition-delay: 0s,.3s; transition-delay: 0s,.3s;}
.menubtn.active span:after {bottom: 0px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}
.menu-flex.show {visibility: visible; pointer-events: visible;}
.menu-flex {position: fixed; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; pointer-events: none; transition: 0.88s;}
.menu-flex.show .menu-bg {opacity: 1; visibility: visible; transition: 0.88s 0s;}
.menu-bg {position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); width: 100%; height: 100%; opacity: 0; visibility: hidden; transition: 0.88s 0.3s; z-index: 9;}
.menu-flex.show .menu-right {right: 0;}
.menu-right {position: absolute; right: -330px; top: 0; width: 60%; max-width: 330px; height: 100%; background: #fff; transition: 0.8s cubic-bezier(0.77, 0, 0.175, 1); z-index: 10;}
.menu-list {padding-top: 100px; margin: 0 30px;}
.menu-list > li {position: relative; z-index: 3; border-bottom: 1px solid #ebebeb;}
.menu-list > li > a {display: block; position: relative; z-index: 2; padding-left: 42px; color: #333333; font-size: 16px; height: 59px; line-height: 59px;}
.menu-list > li > a:before {position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 0; background: #6ef944; transition: 0.38s; z-index: -1;}

.area{width: 100%;padding: 0 15px;}
.area h2{font-size: 32px;position: relative;padding-bottom: 2%;color: #125BAB;font-weight: bold;}
.area h2::after{width: 20px;height: 2px;content: '';background-color: #125BAB;position: absolute;bottom: 0;left: 50%;transform: translate(-50%);}
.area h2 span{font-size: 24px;color: #999999;font-weight: normal;text-transform:uppercase}
.n-area{width: 100%;max-width: 1400px;margin: 0 auto;overflow: hidden;}
.more{width: 100%;max-width: 148px;display: block;height: 49px;text-align: center;line-height: 49px;border: 1px solid #222;border-radius: 5px;font-size: 16px;color: #222;position: relative;transition: all 0.3s;overflow: hidden;z-index: 1;margin: 0 auto;}
.more::after{content: '';width: 0;height: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: #125BAB;transition: all 0.3s;z-index: -1;border-radius: 5px;}
.more:hover{color: #fff;border: 1px solid #125BAB;}
.more:hover::after{width: 110%;height: 110%;}
 
.m-nbanner{display: none;margin-top: 65px;}
.m-nbanner img{width: 100%;min-height: 200px;object-fit: cover;}

/* foot */
.footer{background-color: #222;color: #fff;padding: 2% 0 0;}
.footer h3{font-size: 22px;margin-bottom: 10px;margin-top: 10px;}
.footer .foot-l a,.footer .foot-m a,.footer .foot-r p{display: block;float: left;width: 33.333333%;margin: 10px 0;font-size: 16px; color: rgba(255,255,255,0.5);line-height: 28px;}
/* .footer .foot-m a{width: 100%;} */
.footer .foot-r p{width: 100%;}
.footer .foot-r p b{font-size: 30px;color: #F49503;font-weight: bold;}
.footer .foot-r div:first-child{width: calc(100% - 100px);float: left;}
.footer .foot-r div:last-child{width: 100px;float: right;}
.footer .foot-r div:last-child img{width: 100%;border: 2px solid #fff;}
.footer .foot-r div:last-child p{display: inline-block;text-align: center;}
.footer .rem{width: 100%;padding: 1% 0;text-align: center;border-top: 1px solid rgba(255, 255, 255, 0.2);margin-top: 1%;font-size: 15px;color: rgba(255,255,255,0.5);}
.footer .rem a{color: rgba(255,255,255,0.5);}

@media screen and (min-width: 0px) and (max-width:1400px){
  .headright .nav{width: calc(100% - 270px);}
  .headright .nav .navBox ul .child{font-size: 15px;}
}

@media screen and (min-width: 0px) and (max-width:992px){
  .head,.headleft,.headright{height: 65px!important;}
  .product .proli a .pro-tit p{font-size: 14px;}
  .area h2{font-size: 24px;}
  .footer .foot-r{padding: 0 15px;}
  .area h2 span{font-size: 18px;}
}
@media screen and (min-width: 0px) and (max-width:768px){
  .col-xs-6:nth-child(2n-1){padding-right: 7.5px;}
  .col-xs-6:nth-child(2n){padding-left: 7.5px;}

  .banner{margin-top: 65px;}
  .footer .foot-l img{margin-top: 5%;}
  .news ul li:first-child a img{height: 218px;}
  .footer .foot-m a,.footer .foot-r p{font-size: 14px;}
  .footer .foot-l a{font-size: 15px;}
  .footer .rem{font-size: 14px;}
 
  .more{line-height: 39px;height: 39px;font-size: 14px;}
  .footer .foot-r div:first-child{width: 100%;}
  .footer .foot-r div:last-child{float: left;}
}
@media screen and (min-width: 0px) and (max-width:750px){
  .nbanner{display: none!important;}
  .m-nbanner{display: block!important;}
}
@media screen and (min-width: 0px) and (max-width:375px){
  .menu-list{padding-top: 80px;}
  .menu-list > li > a{font-size: 14px;padding-left: 30px;}
  .area h2 span{font-size: 14px;}
  .menu-btn{width: 90px;}
}
@media screen and (min-width: 0px) and (max-width:320px){
  .footer .foot-l img{margin-bottom: 5%;}
  .menu-list{padding-top: 60px;}
  .footer .foot-m a{font-size: 12px;}
  .footer .rem{font-size: 12px;}
}