@charset "utf-8";
@charset "utf-8";
/* 全局重置 */
html,body{overflow-x: hidden;}
*{transition: all 0.3s;font-size: 16px;}
*,*::before,*::after {box-sizing: border-box; /* 使用更直观的盒模型 */margin: 0;padding: 0;}
/* 基础元素重置 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}
/* HTML5 元素显示设置 */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
/* 列表重置 */
ol, ul {list-style: none;}
/* 表格重置 */
table {border-collapse: collapse;border-spacing: 0;}
/* 链接重置 */
a{color: inherit;text-decoration: none;background-color: transparent;}
/* 表单元素重置 */
button, input, optgroup, select, textarea {margin: 0;padding: 0;border: 0;font-family: inherit;font-size: 100%;line-height: 1.15;background: none;outline: none;}
/* 按钮重置 */
button {cursor: pointer;background: none;border: none;}
/* 输入框重置 */
input {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
/* 清除数字输入框的箭头 */
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0;}
/* 清除搜索框的默认样式 */
input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-results-button,input[type="search"]::-webkit-search-results-decoration {-webkit-appearance: none;}
/* 文本区域重置 */
textarea {resize: none; /* 禁止调整大小 */overflow: auto;}
/* 图片和嵌入内容重置 */
embed, iframe, object, video {max-width: 100%;height: auto;border-style: none;display: block;}
img{height: auto;border-style: none;}
/* 禁用状态样式 */
[disabled] {cursor: not-allowed;opacity: 0.5;}
/* 移除所有元素的hover、active、focus状态下的默认样式 */
a:hover, a:active, a:focus,button:hover, button:active, button:focus,input:hover, input:active, input:focus,select:hover, select:active, select:focus,textarea:hover, textarea:active, textarea:focus {outline: none;text-decoration: none;}
a:hover{transform: translateY(-3px);}
/* 滚动条 */
::-webkit-scrollbar {width: 5px;}
::-webkit-scrollbar-track {background-color: rgba(0, 0, 0, 0);}
::-webkit-scrollbar-thumb {background-color: #e4e4e4;border-radius: 5px;}


.fr{float: right;}
.fl{float: left;}
.clear{clear: both;}

/* head */
.head{width: 100%;position: fixed;top: 0;left: 0;height: 90px;z-index: 11;display: flex;padding: 0 15px;}
.head.tr{height: 80px;background-color: rgba(0, 0, 0, 0.4);}
.logo{height: 100%;width: 30%;height: 100%;}
.logo a,.logo a h1{display: flex;width: 100%;height: 100%;align-items: center;justify-content: center;}
.logo a h1 img{width: auto;max-width: 100%;}
.nav{position: relative;display: flex;width: 70%;padding-left: 15px;}
.nav nav{width: calc(100% - 340px);display: flex;align-items: center;}
.nav nav ul{display: flex;width: 100%;}
.nav nav ul .child{flex-grow: 1;max-width: 140px;text-align: center;line-height: 3;font-size: 16px;transition: all 0.3s;position: relative;}
.nav nav ul .child>a{color: #fff;}
.nav nav ul .child>a p{position: relative;}
.nav nav ul .child>a p::before{content: '';position: absolute;display: inline-block;z-index: -1;width: 20%;height: calc(100%);left: 50%;top: 0;transform: translateX(-50%) skewX(-10deg);border-bottom-right-radius: 15px;background-color: rgba(0,94,171,1);
  /* background-image: linear-gradient(to top, rgba(134,118,255,1), rgba(63,146,255,1)); */
  opacity: 0;transition: all 0.3s;overflow: hidden;}
.nav nav ul .child>a p.active::before{opacity: 1;width: 100%;border-bottom-right-radius: 0px;transform: translateX(-50%) skewX(0deg);}
.nav nav ul .child:hover>a p::before{opacity: 1;width: 100%;border-bottom-right-radius: 0px;transform: translateX(-50%) skewX(0deg);}
.nav nav ul .child .childContent{padding: 15px 5px;transform-origin: top;transition: all 0.3s;position: absolute;width: auto;white-space: nowrap;left: 50%;transform:rotateX(90deg) translateX(calc(-50%));min-width: 100%;}
.nav nav ul .child .childContent li{width: 100%;line-height: 3;}
.nav nav ul .child .childContent li a{color: #fff;display: inline-block;width: 100%;height: 100%;}
.nav nav ul .child .childContent li:hover{background-color: rgba(0,0,0,0.1);}

.nav nav ul .child:hover .childContent{transform: rotateX(0deg) translateX(calc(-50%));background-color: rgba(0,94,171,1);
/* background-image: linear-gradient(to top, rgba(134,118,255,1), rgba(63,146,255,1)); */}

.nav .search{height: 44px;font-size: 15px;cursor: pointer;width: 340px;height: 100%;display: flex;align-items: center;justify-content: center;}
.nav .search form{display: block;border: 1px solid rgba(255,255,255,0.8);border-bottom-right-radius: 15px;width: 180px;height: 45px;transform: skewX(-10deg);position: relative;max-width: 180px;}
.nav .search form input{width: 75%;height: 35px;position: absolute;left: 5px;top: 50%;transform: translateY(-50%);color: #fff;font-size: 14px;}
.nav .search form input::placeholder{color: #fff;}
.nav .search form button{background: none;position: absolute;right: 5px;top: 50%;transform: translateY(-50%) skewX(10deg);width: 25%;color: #fff;}
.nav .search .lang{display: flex;width: 80px;margin-left: 15px;flex-wrap: wrap;position: relative;padding-left: 30px;}
.nav .search .lang::after{content: '';display: inline-block;width: 30px;height: 30px;left: 0;top: 50%;transform: translateY(-50%);position: absolute;background-image: url(../images/lan-ico.png);background-size: 70% auto;background-repeat: no-repeat;background-position: center;}
.nav .search .lang a{width: 100%;line-height: 2;font-size: 15px;text-align: center;color: #fff;border-bottom: 1px solid #fff;transform: translateY(0px);}
.nav .search .lang .sw{width: calc(100% - 30px);display: none;background-color: #fff;position: absolute;top: 100%;right: 0;}
.nav .search .lang .sw a{color: rgba(0, 0, 0, 0.8);}
.nav .search .lang:hover .sw{display: flex;}
.nav .search .lang a:hover{background-color: rgba(0,94,171,1);color: #fff;}


/* wapnav */
.menu-btn {position: absolute; z-index: 3; display: none; 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: 3.8;}
.menu-list > li > a:before {position: absolute; left: 0; bottom: 0; content: ""; width: 100%; height: 0; background: #f21d19; transition: 0.38s; z-index: -1;}

.area{width: 100%;padding: 0 15px;}
.area h2{font-size: 36px;position: relative;padding-bottom: 4%;color: #333;display: grid;font-weight: bold;}
.area h2 span{font-size: 22px;color: #333;font-weight: normal;text-transform:capitalize;display: inline-block;width: 100%;padding-top: 10px;}
.n-area{width: 100%;max-width: 1680px;margin: 0 auto;overflow: hidden;}
.more{display: inline-block;border-top-left-radius: 15px;border-bottom-right-radius: 15px;color: #fff;border: 1px solid #fff;font-size: 18px;width: 50%;max-width: 200px;text-align: center;transform: skewX(-5deg) translate(-5px,-5px);line-height: 3.3;transition: all 0.3s;position: relative;}
.more::after{content: '';display: inline-block;width: 20px;height: calc(100% + 2px);position: absolute;right: -2px;top: calc(25% - 5px);background-color: #f21d19;transition: all 0.3s;z-index: -1;border-bottom-right-radius: 15px;transform: translate(5px,5px);}
.more:hover{transform: skewX(-5deg) translate(0,0);color: #fff;}
.more:hover::after{transform: translate(0,0);right: -1px;top: -1px;}
 

/* foot */
.footer{background-color: #222;color: #fff;padding: 35px 15px;}
.footer .foot-t{width: 100%;float: left;display: flex;flex-wrap: wrap;align-items: center;}
.footer .foot-t .f-logo{width: 40%;}
.footer .foot-t .f-logo img{width: auto;max-width: 90%;}
.footer .foot-t .f-nav{width: 60%;display: flex;}
.footer .foot-t .f-nav a{color: #fff;line-height: 1.8;display: block;float: left;font-size: 18px;padding: 3% 0;flex-grow: 1;}
.footer .foot-t .f-nav a:last-child{flex-grow: 0;}

.footer .foot-l{width: 40%;float: left;display: flex;flex-wrap: wrap;}
.footer .foot-l .info{width: 90%;}
.footer .foot-l h3{font-size: 36px;font-style: italic;display: block;width: 100%;padding: 10px 0;}
.footer .foot-l p{color: rgba(255,255,255,0.6);font-size: 15px;display: block;width: 100%;line-height: 2.2;}
.footer .foot-l a{color: rgba(255,255,255,0.6);}
.footer .foot-l .wx-code{width: 55%;display: flex;}
.footer .foot-l .wx-code p{width: 50%;display: inline-block;text-align: center;align-self: center;}
.footer .foot-l .wx-code p img{width: 90%;max-width: 240px;}

.footer .foot-r{width: 60%;float: left;}
.footer .foot-r .f-form{width: 100%;}
.footer .foot-r .f-form form{width: 100%;}
.footer .foot-r .f-form form .f-info{width: calc(100% - 60px);float: left;}
.footer .foot-r .f-form form .form-input{width: calc(50%);float: left;padding-right: 5px;}
.footer .foot-r .f-form form .form-tr{width: calc(50%);float: left;padding-left: 5px;}
.footer .foot-r .f-form form input{height: 70px;width: 100%;margin-bottom: 10px;border: 1px solid rgba(255,255,255,0.4);float: left;text-indent: 15px;}
.footer .foot-r .f-form form textarea{height: 150px;margin-bottom: 10px;width: 100%;border: 1px solid rgba(255,255,255,0.4);line-height: 70px;float: left;padding: 0 15px;}
.footer .foot-r .f-form form .form-code{width: 50%;float: left;padding-left: 5px;}
.footer .foot-r .f-form form .form-code input{width: calc(50%);}
.footer .foot-r .f-form form .form-code .verify{width: 50%;float: left;height: 70px;}
.footer .foot-r .f-form form .form-code .verify img{width: 100%;height: 100%;}
.footer .foot-r .f-form form .form-bt{width: 50px;height: 230px;margin-left: 10px;float: left;background-color: #D8D8D8;text-align: center;line-height: 230px;font-size: 18px;font-weight: bold;}
.footer .foot-r .f-form form .form-bt a{color: #333;display: flex;width: 100%;height: 100%;justify-content: center;}
.footer .foot-r .f-form form .form-bt:hover{background-color: rgba(0,94,171,1);}
.footer .foot-r .f-form form .form-bt:hover a{color: #fff;}


@media (min-width: 2000px) {
  .nav nav ul .child{font-size: 21px;max-width: 170px;}
  .footer .foot-t .f-nav a{font-size: 22px;}
  .footer .foot-l p{font-size: 20px;}
  .footer .foot-r .f-form form input{font-size: 20px;}
  .footer .foot-r .f-form form textarea{font-size: 20px;}
}

@media screen and (min-width: 0px) and (max-width:1400px){
  .nav .nav{width: calc(100% - 270px);}
  .nav nav ul .child{font-size: 15px;}
  .area h2{font-size: 38px;}
  .more{font-size: 15px;line-height: 3.4;}

  .footer .foot-l p{font-size: 15px;}
  .footer .foot-r .f-nav a{font-size: 16px;}
}
@media screen and (min-width: 0px) and (max-width:1200px){
  .logo{width: 50%;}
  .nav nav{display: none;}
  .menu-btn{display: flex;}
  .nav .search{margin-left: auto;margin-right: 145px;}
  .area h2{font-size: 30px;}
  .foot-l{margin-bottom: 20px;}
}
@media screen and (min-width: 0px) and (max-width:992px){
  .head{height: 80px;}
  .head.tr{height: 70px;}
  .product .proli a .pro-tit p{font-size: 14px;}
  .about .tit p{font-size: 14px;}
  .area h2 span{font-size: 18px;}

  .footer .foot-t .f-logo{width: 100%;}
  .footer .foot-t .f-nav{width: 100%;}
  .footer .foot-l,.footer .foot-r{width: 100%;}
  .footer .foot-l p:last-child{margin-top: 0;}

}
@media screen and (min-width: 0px) and (max-width:768px){
  .logo{width: calc(100% - 110px);}
  .nav{display: none;}
  .news ul li:first-child a img{height: 218px;}
  .more{line-height: 39px;height: 39px;font-size: 14px;}
  .footer{padding-bottom: 0;}
  .footer .foot-l .info{width: 100%;}
  .footer .foot-l .wx-code{width: 100%;}
  
  .col-xs-6:nth-child(2n-1){padding-right: 7.5px;}
  .col-xs-6:nth-child(2n){padding-left: 7.5px;}


}
@media screen and (min-width: 0px) and (max-width:767px){
  .footer .foot-t .f-nav{flex-wrap: wrap;}
  .footer .foot-t .f-nav a{width: 33.333333%;}
}
@media screen and (min-width: 0px) and (max-width:440px){
  .head{height: 70px;}
  .head.tr{height: 65px;}
  .area h2{font-size: 26px;}
  .footer .foot-l p{font-size: 14px;}
  .footer .foot-t .f-nav a{font-size: 15px;padding: 10px 5px;line-height: 20px;}
  .footer .foot-r .f-form form .form-input{width: 100%;padding-right: 0;}
  .footer .foot-r .f-form form .form-tr{width: 100%;padding-left: 0;}
  .footer .foot-r .f-form form .form-code{width: 100%;padding-left: 0;}
  .footer .foot-r .f-form form .f-info{width: 100%;}
  .footer .foot-r .f-form form input{height: 50px;}
  .footer .foot-r .f-form form textarea{height: 110px;line-height: 50px;}
  .footer .foot-r .f-form form .form-code .verify{height: 50px;}
  .footer .foot-r .f-form form .form-bt{width: 100%;height: 50px;margin-left: 0;line-height: 50px;}
  .footer .foot-l h3{font-size: 28px;}
}
@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;}
  .menu-btn{width: 90px;}
}
@media screen and (min-width: 0px) and (max-width:320px){
  .menu-list{padding-top: 60px;}
}