@charset "utf-8";
* {
  outline: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%
}
body {
  padding: 0;
  margin: 0 auto;
  font-size: 16px;
  color: #333;
  background: #fff;
  font-family: "Microsoft YaHei";
  -webkit-text-size-adjust: none;
  /*取出点击出现半透明的灰色背景*/
  -webkit-tap-highlight: rgba(0, 0, 0, 0);
  /*控制内容的可选择性*/
/*  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  user-select: none;*/
}
input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-appearance: none;
}

table, table td {
  border-collapse: collapse;
}
table {
  border-spacing: 0;
}
table td, select, input, textarea {
  font-size: 14px;
}
select, input, textarea {
  border-radius: 0;
  -webkit-border-radius: 0;
}
select, input, textarea, pre {
  font-family: "Microsoft YaHei";
}
img {
  border: none;
  max-width: 100%;
  vertical-align: middle;
}
a {
  color: #333;
  text-decoration: none;
  noline: -webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 去掉链接触摸高亮 */
}
a:hover {
  color: #e60012;
  text-decoration: none;
}
a:focus {
  color: #333;
  outline: none;
  -moz-outline: none;
}
a:active {
  color: #333;
}
pre,.pre {
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
  text-align: justify;
  text-justify: inter-ideograph;
}
.dotNo{
  display: block;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dot {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.dot2, .dot3, .dot4, .dot5, .dot6 {
  display: -webkit-box;
  display: box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
}
.dot2 {
  -webkit-line-clamp: 2;
}
.dot3 {
  -webkit-line-clamp: 3;
}
.dot4 {
  -webkit-line-clamp: 4;
}
.dot5 {
  -webkit-line-clamp: 4;
}
.dot6 {
  -webkit-line-clamp: 4;
}
.ytable {
  display: table;
  width: 100%;
}
.ytable-fixed {
  table-layout: fixed;
}
.ytable-cell {
  display: table-cell;
  vertical-align: middle;
}
.Ispic {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
:after, :before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

/*用于图片变黑白*/
.grayscale{filter:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");-webkit-filter:grayscale(1);filter:grayscale(1);filter:gray}
.grayscale.grayscale-fade{transition:filter .5s;}
@media screen and (-webkit-min-device-pixel-ratio:0){
	.grayscale.grayscale-fade{-webkit-transition:-webkit-filter .5s;transition:-webkit-filter .5s;}
}
.grayscale.grayscale-fade:hover,
.grayscale.grayscale-off{-webkit-filter:grayscale(0);filter:grayscale(0)}
.grayscale.grayscale-replaced{-webkit-filter:none;filter:none}
.grayscale.grayscale-replaced>svg{-webkit-transition:opacity .5s ease;transition:opacity .5s ease;opacity:0}
.flipInY .grayscale.grayscale-replaced>svg {opacity:1;}
.grayscale.grayscale-replaced.grayscale-fade:hover>svg,
.grayscale.grayscale-replaced.grayscale-off>svg{opacity:0}
/**页面框架 End**/

.auto { margin: 0 auto;}
.w_1600{/*width: 83.334%;*/; max-width: 1680px; padding: 0 40px}

@media(max-width:1024px) {
.w_1600{width: 95%;padding: 0}
.dotNo{
  white-space: nowrap;
}
}

@media(max-width:960px) {
body{ font-size: 14px;}
}

/*Header */
@font-face {
font-family: 'SourceHanSansCN-Regular';
src: url("../fonts/SourceHanSansCN/Regular.woff") format("woff");
font-display: swap;
}
@font-face {
font-family: 'SourceHanSansCN-Light';
src: url("../fonts/SourceHanSansCN/Light.woff") format("woff");
font-display: swap;
}
.Header{font-family: 'SourceHanSansCN-Light'; width: 100%; z-index: 100; position: fixed;background-color: rgba(255,255,255,0.8); border-bottom: solid 1px #eeeeee;}
.top_h,
.header_h{ height: 101px}
.Header,
.Header a{color: #222222; transition: 0.3s;}
.Header a:hover{color: #e60011;/*font-family: 'SourceHanSansCN-Regular';*/}
.Header .top-nav{ position: relative}
.Header .top-link{ position: absolute; right: 50px; top: 16px;}
.Header .top-link a{ display: inline-block; width: 50px; height: 25px; margin: 0px 15px; background: no-repeat center center; position: relative; border-radius: 4px;}
.Header .top-link a.a_jd{ background-image: url(../images/icon_buy_jd_red.png)}
.Header .top-link a.a_tm{ background-image: url(../images/icon_buy_tm_red.png)}
.Header .top-link a.a_sp{ background-image: url(../images/icon_buy_sp_red.png)}
.Header .top-link a b{ font-size: 14px; font-weight: normal;position: absolute;display: none; white-space: nowrap;bottom: -20px; right:-35px; width: 120px; text-align: center;transition: 0.5s}
.Header .top-link a.a_sp b{ width: 80px; right: -13px;}
.Header .top-link a:hover b{ display: block}
.Header .top-link a:hover{ background-color: #e60012}
.Header .top-link a:hover.a_jd{ background-image: url(../images/icon_buy_jd.png)}
.Header .top-link a:hover.a_tm{ background-image: url(../images/icon_buy_tm.png)}
.Header .top-link a:hover.a_sp{ background-image: url(../images/icon_buy_sp.png)}

.Header .open-search{position: absolute;background: url("../images/top_search_red.png") no-repeat center center;width: 25px; height: 25px;right: 5px;top:16px; cursor: pointer;}
.Header .open-search.on{background: #e60012; top: 5px; right: -25px;}
.Header .open-search.on:before,
.Header .open-search.on:after{position: absolute; content:''; width: 100%; height: 2px; left: 0; top: 50%; margin-top: -1px; transform: rotate(45deg);-webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);background: #fff;}
.Header .open-search.on:after{transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-ms-transform: rotate(-45deg);}

.Header .top-search{position: absolute; z-index: 20; top: 5px; right: 0; overflow: hidden;display: none; box-shadow: 0 0 5px rgba(0,0,0,0.1);}
.Header .top-search .text{color: #999; width: 100%; line-height: 50px;height: 50px;background: #fff; border: 0; padding: 0 50px 0 20px;}
.Header .top-search .text.focus{color: #ff0000;}
.Header .top-search .btn{position: absolute;right: 0;height: 100%;width: 50px; background: url("../images/top_search_white.png") no-repeat center center #e60012;}
@media(min-width:1025px){
.Header .top-search{width:30vw; min-width: 300px;border-radius: 0 0 5px 5px;}
}
@media(max-width:1024px){
.Header .top-search{width:100%;top: 100%;}
.Header .top-search .text{background: rgba(0,0,0,0.5);color: #fff;}
}


.Header .top-head{ z-index: 100;height: 100px; }
.Header .top-logo{position: absolute; top: 0;display: table;height: 100%;  max-width: 200px;}
.Header .top-logo a{display: table-cell; vertical-align: middle;}
.Header .top-logo img{max-height: 70px;}
.Header .top-menu li span,
.Header .top-menu li span a{display: block;}
.Header .top-menu li span a{font-size: 20px; color: #222222; cursor: pointer;}
.Header .top-menu li .sub{display: none;padding: 20px 0; }
.Header .top-menu li .sub dt a:hover{ color: #ff0000}
.Header .top-menu li .sub em{ font-size: 14px; line-height: 32px; display: block; font-style: normal; position: relative}
.Header .top-menu li .sub em a:before{ left:1.2vw; top:40%; content:''; display:block; position:absolute; width:5px; height:1px; background-color:#c3c3c3;}
@media(min-width:1025px){
.Header .top-menu li#m10{ background: url("../images/top_jt.png") no-repeat 96%}
.Header .top-menu li#m10:before{ position: absolute; display: block; content: ''; width: 1px; height: 10px; background: #d5d5d5;margin-left: -25px; margin-top: 26px;}
.Header .top-menu li span a{line-height:58px; position: relative}
.Header .top-menu li span a:after{ content: ''; position: absolute; display: block; height: 2px; width: 0; left: 50%; bottom:-2px; background: #e60011; transition: 0.5s}
/* .Header .top-menu li.aon span a:after{ left: 0; width: 100%;} */
.Header .top-menu li.aon span a:after{ left: 0; width: 100%;}
.Header .top-menu li.on span a:after{ left: 0; width: 100%;} 
.Header .top-menu li.ahover span a:before{ content:'';position:absolute; width:0;height:0; left:50%; margin-left:-8px; bottom:0px;border:8px solid transparent;border-bottom-color: #e60011;}
.Header .top-menu{display: table; margin: 0 auto; width: 100%; padding-top: 42px}
.Header .top-menu ul{ float: right}
.Header .top-menu li{float: left; padding: 0 1.5vw;}
.Header .top-menu li .sub{  position: absolute; top: 100%; z-index: 100;background:rgba(255,255,255,0.8);}

.Header .top-menu li .sub dt a{color: #405e91; white-space: nowrap}
.Header .top-menu li .sub dt {line-height: 40px;}
.Header .top-menu li .sub dt,
.Header .top-menu li .sub em{ padding:0 1.5vw }

.Header .top-menu li .sub dl.two { float: left;}

.Header .top-menu li{position: relative;}
.Header .top-menu li.has-sub{position: static; }
.Header .top-menu li .sub{left: 50%; transform: translateX(-50%);}
.Header .top-menu li.has-sub .sub{left: auto; transform: translateX(calc(-50% + 50px));}
.Header .top-menu li.has-sub .sub::before{content: ''; width: 0%; height: 2px; background-color: rgb(255,72,53); position: absolute; top: 0px; left: 50%; transition: all .5s; transform: translateX(-50%);}
.Header .top-menu li.has-sub.aon .sub::before{width: 100%;}
.Header .top-menu li.has-sub.aon span a:after{ left: 0; width:0%;}

}
@media(max-width:1200px){
.Header .w_1600{ width: 95%}
.Header .top-menu li span a{font-size: 18px;}
}
@media(max-width:1024px){
  #addid14{
    display: block;
  }

.Header .top-nav{ position: absolute; height: 100%; width:80%; right: 3%}
.Header .top-link{ right: 90px;top: 50%; margin-top: -12px;}
.Header .open-search{ right: 55px; top: 50%; margin-top: -12px;}
.Header .open-search.on{ top: 100%; margin-top: -25px; right: 0}
.Header .top-menu{position: fixed; top: 0px; right: 0;width: 0;overflow: hidden;bottom: 0;transition: 0.3s; z-index: 95; transition: 0.3s; }
.menu-show{overflow: hidden;}
.menu-show .Header .top-menu{width: 240px;}
.Header .top-menu ul{width: 240px; height: 100%; overflow: auto; padding: 100px 20px 20px 20px;background: rgb(0,0,0,0.85);}
.Header .top-menu li .sub{padding: 0!important;}
.Header .top-menu li span{line-height: 40px; padding-right: 40px; border-bottom: 1px solid rgba(255,255,255,0.5);position: relative;overflow: hidden; }
.Header .top-menu li span a{ color: #fff}
.Header .top-menu li span .op{position: absolute;right:0; top: 0; height: 100%;width: 40px; transition: 0.3s;}
.Header .top-menu li span .op.click{transform: rotate(45deg);}
.Header .top-menu li span .op:before,
.Header .top-menu li span .op:after{position: absolute; content: '';background: #fff; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.Header .top-menu li span .op:before{width: 40%; height: 2px;}
.Header .top-menu li span .op:after{height: 40%; width: 2px;}
.Header .top-menu li  a{color: #fff;}
.Header .top-menu li .sub-inner{padding: 20px;}
.Header .top-menu li .sub dt:not(:last-child){border-bottom: 1px solid rgba(0,0,0,0.3);}
.Header .top-menu li .sub dt{line-height: 24px; padding: 8px 0;}
.Header .top-menu li .sub dd{ display: none}
.Header .top-menu li .sub em{ padding-left: 30px;}
.Header .open-menu{width: 40px; height: 30px;position: absolute;right: 3%; top: 50%; margin-top: -15px; z-index: 110;}
.Header .open-menu i{position: absolute; width: 70%; height: 3px; background: #e60012; left:15%; top: 50%; margin-top: -1.5px; transition: 0.3s;}
.Header .open-menu i:nth-child(2){margin-top: -8px;}
.Header .open-menu i:nth-child(3){ margin-top: 6px;}
.Header .open-menu.on i:nth-child(1){opacity: 0;}
.Header .open-menu.on i:not(:nth-child(1)){transform: rotate(45deg); margin-top: -1.5px;}
.Header .open-menu.on i:nth-child(3){transform: rotate(-45deg);}
}
@media(max-width:640px){
.Header .top-link a{ margin: 0}
.Header .top-link a{ width: 40px; background-size: contain}
.Header .top-head{height: 70px;}
.Header .top-logo img{max-height: 60px;}
.top_h,
.header_h{ height: 71px}
}

.footer{ background-color: #5b5454; padding: 4% 0}
.footer,
.footer a{ color: #fff}
.footer a:hover{ color: #e90816}
.foot_column{ float: right; width: 60%}
.foot_column dl{ float: left; width: 20%;}
.foot_column dl dt{ font-size: 24px; position: relative; max-width: 152px;}
.foot_column dl dt:before{ content: ''; position: absolute; right: 0; top: 50%; margin-top: -5px; width: 10px; height: 10px;background: url(../images/foot_nav2.png) no-repeat center center; transition: 0.5s}
.foot_column dl dd{ font-size: 16px; padding-top: 20px;}
.foot_column dl span{ line-height: 40px; padding-left: 20px; display: block;
   background: url(../images/foot_nav.png) no-repeat left
  }
.foot_column dl span a{ opacity: 0.5}
.foot_column dl .three{
  background: none;
  padding-left: 25px;
  font-size: 12px;
}
.foot_column dl .three::before{
  display: inline;
  content: '-';
  color: #999;
  margin-right: 10px;
}
.foot_column dl span a:hover{ opacity: 1}
.foot_column dl span#bb47,
.foot_column dl span#bb48,
.foot_column dl span#bb49{ display: none}
.foot_other{ float: left; width: 33%; border-right: solid 1px #756f6f}
.foot_other .photo .ewm{ float: left; width: 33%; max-width: 150px}
.foot_other .photo .ewm .pic{ max-width: 115px; padding-right: 5px;}
.foot_other .copyright{ max-width: 320px; padding-top: 10%}
@media(max-width:1200px){
.footer .w_1600{ width: 95%}
.foot_column dl dt{ font-size: 20px;}
.foot_column dl dd{ font-size: 14px;}
}
@media(max-width:960px){
.foot_column,
.foot_other{ float:none; width: 100%}
.foot_other .photo{ margin:auto; width:94%; max-width:450px; text-align:center; padding-top:2%}
.foot_other .copyright{ padding-top:2%}
.foot_other{border-top: solid 1px #756f6f;border-right:none}
.foot_column dl dt{font-size: 16px}
.foot_column dl dt:before{ right: 10%}
.foot_column dl span{ line-height: 28px;}
}
@media(max-width:640px){
.foot_column dl { float: none; width: 100%;border-bottom: solid 1px #756f6f; }
.foot_column dl dt{ font-size: 15px; line-height: 36px; max-width: none}
.foot_column dl dt:before{ right: 2%}
.foot_column dl dd{ display: none;}
.foot_other{border-top:none}
.foot_other .photo .ewm { padding-top: 4%}
.foot_other .photo .ewm .pic{ max-width:75%; margin: auto}
.foot_column dl dt i{ cursor:pointer;  top:0; width:10%; height:100%; display:block; position:absolute;right: 0;}
.foot_column dl dd{ padding: 10px 0}
.foot_column dl.on dt:before{ transform: rotate(90deg)}
}
.banner_video{ position: relative; z-index: 1;}
.banner_video video{ width: 100%; position: relative; z-index: 1; display: block;}
.banner .imgpc{ height: 400px; background: no-repeat center center}
.banner .imgwap{ display: none}
.banner .imgwap img{ width: 100%}
.banner_video .imgwap{ display: none;}
.banner_video .imgwap img{ width: 100%;}
@media(max-width:1024px){
.banner .imgpc{ display: none}
.banner .imgwap{ display:block;}
}
@media(max-width:640px){
.banner_video .imgwap{ display: block;}
}
[aos=fade-up].menu.aos-animate{transform: translateY(-60px);}
.menu { position: relative;transform: translateY(-60px); z-index: 3;}
.menu h2{ display: none}
.menu ul{text-align: center; background: #fff; box-shadow: 0 0 10px rgb(138,138,138,0.3)}
.menu ul li{ font-size: 20px; float: left; width: 12%; border-right: solid 1px #e4e4e4; position: relative}
.menu ul li:last-child{ border-right: none}
.menu ul li a{padding:0; line-height: 600%; display: block; position: relative; z-index: 5; }
.menu ul li:before{ content: ''; position: absolute; left: 0; width: 100%; height:100%; opacity: 0; transition: 0.6s; box-shadow: 0 10px 50px 0px rgb(255,52,52,0.74);
background: rgb(255,72,53); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,72,53,1) 0%, rgba(230,0,18,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(255,72,53,1) 0%,rgba(230,0,18,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(255,72,53,1) 0%,rgba(230,0,18,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff4835', endColorstr='#e60012',GradientType=1 ); /* IE6-9 */
}
.menu ul li.aon:before{ opacity: 1;}
.menu ul li.aon a{ color: #fff;}
.menu ul li#menu16{ width: 16%}
#menu14{ display: none}
@media(max-width:1200px){
.menu ul li{ font-size: 16px}
}
@media(max-width:768px){
.menu ul { position: relative}
.menu ul li{width:25%;font-size: 12px}
.menu ul li a{ line-height: 400%;}
.menu ul li#menu16{ width: 25%}
.menu ul#col4:before{ content: ''; width: 100%; top: 50%; position: absolute; height: 1px; background: #e4e4e4; left: 0}
[aos=fade-up].menu.aos-animate {transform: translateY(-25px);}
}
.column_name{ padding: 2% 0; text-align: center; color: #222; position: relative}
.column_name span{ display: block;}
.column_name .cn{ font-size: 30px;}
.column_name .en{ font-size: 41px; font-weight: bold}
.column_name .en.f20{ font-size: 20px; text-transform: uppercase}
.column_name.left{ text-align: left}
.column_name.line{ padding-top: 4%; padding-bottom: 3%}
.column_name.line .cn:after{ content: ''; position: absolute; left: 50%; margin-left: -15px; bottom: 10%; display: block; width: 30px; height: 5px; background: #e60012}
.column_name.line .en,
.column_name.line .en{ display: none}
@media(max-width:1200px){
.column_name .cn{ font-size: 24px;}
.column_name .en{ font-size: 36px;}
.column_name .en.f20{ font-size: 16px;}
}
@media(max-width:768px){
.column_name{ padding: 5% 0!important;}
.column_name .cn{ font-size: 22px;}
.column_name .en{ font-size: 30px;}
}
.top_line{}