@charset "UTF-8";
@import url('base.css');


.header{position:relative; width: 100%; z-index: 100}
.header .auto {max-width: 17.2rem;width: 96%}
.header .topT{position: absolute; width: 100%; transition: 0.5s; background: rgba(255,255,255,0.5)}
.header.mouse_down .topT{position: fixed !important;}
.header .logo{width:1.86rem}
.header .nav li{position: relative}
.header .nav li a{display:block;}
.header .nav li span{display: block;position: relative; font-size: var(--f20)}
.header .nav li span a{ color: var(--color-blue)}
.header .nav ul li.has-sub{position:relative;z-index:100}
.header .nav li .sub dl{position:relative;z-index:1;--top:0;width:max-content;transition:0.3s;padding:1em 0}
.header .nav li .sub dd{line-height:1.2;position:relative;z-index:1;padding:0.5em 1em}
.header .nav li .sub a{display:block}
.top-search {position: relative;}
.top-search a{cursor: pointer; display: block; width: 0.17rem; height: 0.17rem;background: url("../images/search.png") no-repeat center center; background-size: contain;}
.top-search .search-box{position: absolute; top: 230%;right: 0; width: 3rem; height: .4rem; border-radius: var(--br20); padding: 0 .2rem; background: var(--color-blue); border:none; opacity: 0; visibility: hidden; transform: translateY(.2rem); transition: 0.5s}
.top-search .search-box a{filter: brightness(0) invert(1);}
.search-show .top-search .search-box{opacity: 1; visibility: inherit;transform: translateY(0)}
.top-search .text{flex: 1; background: none; color: var(--color-fff); border: none}
.language a{margin-left: 18px;font-size:var(--f18); color: var(--color-blue); width: 0.24rem;height: .24rem; line-height:0.24rem; display:block; text-indent:-9999em; background: no-repeat center center; background-size: .24rem auto; overflow: hidden;}
.language .cn {background-image: url(../images/language_cn.svg);}
.language .en {background-image: url(../images/language_en.svg);}

body:not(.no_banner) .header .topB{display: none}

@media (min-width:1025px) {
.header .nav {min-width: 58.14%;}
.header .nav ul{display: flex}
.header .nav li:not(:last-child){margin-right:1vw}
.header .nav li span{line-height:.7rem;}
.header .nav li span{font-size: var(--f16);}
.header .nav li span:after{content: '';position: absolute; width: 0; height: 1px; left: 0; right: 0px; bottom: 12px; margin: auto;background: var(--color-bluehover); transition: 0.5s}
.header .nav li.has-sub span:after{right: 36px; }
.header .nav li.has-sub span a{ display: flex; align-items: center; transition: 0.5s;}
.header .nav li.has-sub span a:after{content: '';display: inline-block; width: 36px; height: 36px; background: url(../images/svg/nav_icon.svg) no-repeat center center; transition: 0.5s}
.header .nav li .sub{position:absolute;top:100%;transform:translateY(0.3rem);opacity:0;visibility:hidden;background: rgba(255,255,255,0.9);transition:0.3s;box-shadow: 0 0 10px rgba(0,0,0,0.07); border-radius: var(--br10); text-align: center; font-size: 14px}
.header .nav li.active .sub{transform:translateY(0);visibility:visible;opacity:1}
.header .nav li.aon span:after{width: 50%}
.header .nav li.aon span a:after{transform: rotate(180deg)}
}
@media (min-width:1200px) {
.header .nav li span{font-size: var(--f18);}
.language a{font-size: var(--f20)}
}
@media (min-width:1400px) {
.header .nav li span{font-size: var(--f20);}
.header .nav li:not(:last-child){margin-right:2vw}
.language a{font-size: var(--f22)}
}
@media (max-width:1024px) {
.open-menu{margin-left: .2rem; position: relative;z-index: 10; width: 40px; height: 40px;}
.open-menu i{height: 0.03rem; width: 70%; left:0; right: 0; top:0; bottom: 0; margin: auto; position: absolute; background:var(--color-blue); transition: 0.3s;}
body:not(.menu-show) .open-menu i:nth-child(1){transform: translateY(-.1rem)}
body:not(.menu-show) .open-menu i:nth-child(3){transform: translateY(.1rem)}
body.menu-show .open-menu i:nth-child(2){opacity: 0;}
body.menu-show .open-menu i:nth-child(1){transform: rotate(-45deg);}
body.menu-show .open-menu i:nth-child(3){transform: rotate(45deg);}
body.menu-show{overflow: hidden;}
body.menu-show .nav{left: 0;opacity: 1; transform: translateX(0);}
.header .topT{background:rgba(255,255,255,1);position: relative;}
.header .other{padding: .12rem 0}
.header .nav{position: fixed; left:-100%;opacity: 0;transform: translateX(-100%);top:0;bottom: 0; width: 3rem; background-color: rgba(255,255,255,0.95);box-shadow: 0 0.1rem 0.1rem rgba(0,0,0,0.1);transition: 0.3s; z-index: 20}
.header .nav ul{overflow: auto;}
.header .nav li{width: 100%}
.header .nav li span{ line-height: 3; border-bottom: 1px solid rgba(0,0,0,0.1);}
.header .nav li span a{font-size: var(--f20); padding: 0 3%;}
.header .nav li .sub{display: none}
.header .nav li .sub a{font-size: var(--f18);}
}


@media(max-width:1024px){
.has-multi aside,
.has-sub span{padding-right: 0.4rem;}
.has-multi aside .op-multi,
.has-sub span .wap-op{width: 0.4rem; height: 100%; position: absolute;right: 0;top: 0 }
.has-multi aside .op-multi:before,
.has-multi aside .op-multi:after,
.has-sub span .wap-op:before,
.has-sub span .wap-op:after{content: '';position: absolute;margin: auto; left: 0; top: 0; bottom: 0; right: 0; width: 0.12rem; height: 0.02rem; background: var(--color-blue)}
.has-multi aside .op-multi:after,
.has-sub span .wap-op:after{ width: 0.02rem; height: 0.12rem;}
.has-sub.click .wap-op:after{transform: rotate(90deg)}
}

.bottom{font-size: var(--f14); background: var(--color-blue)}
.bottom,
.bottom a:not(:hover){color: var(--color-fff)}
.bottom a{display: inline-block}
.bottom .box{padding-top: .5rem; padding-bottom: .2rem}
.bottom .left_box{}
.bottom .logo{max-width:2.8rem;/*filter: brightness(0) invert(1);*/}
.bottom .line{width: 1px; background: var(--color-fff);opacity: 0.2; margin: 0 .3rem}
.bottom .txt p{padding: 0; margin: 0}
.bottom .follow {gap:.1rem}
.bottom .follow dl{position: relative}
.bottom .follow dt{display: flex; justify-content: center; align-items: center; padding: .12rem;}
.bottom .follow dt img{max-width: .78rem; max-height: .4rem;transition: 0.5s}
.bottom .follow dd{position: absolute; visibility: hidden; opacity: 0; bottom: 100%;background: var(--color-fff); border: solid 4px var(--color-blue);border-radius: var(--br10); padding: .2rem;width: 3rem; min-height:1.5rem; transition: 0.5s; left: 50%;transform: translate(-50%,-.2rem)}
.bottom .follow dl ul{position: relative}
.bottom .follow dl ul li{width: 50%; padding: .05rem 0}
.bottom .follow dl ul li p{color: var(--color-666); display: inline-block;padding: 0; margin: 0; border-bottom: solid 1px var(--color-fff)}
.bottom .follow dl ul li figure{position: absolute; right: 0; top: 0; width:42.465%; transition: 0.5s}
.bottom .follow dl ul li figure img{width: 100%}
.bottom .follow dl ul li.on p{border-bottom-color: var(--color-blue)}
.bottom .follow dl ul li:not(.on) figure{opacity: 0}
.bottom .follow dl:not(.show) dt img{filter: brightness(0) invert(1);}
.bottom .follow dl.show  dt{background: var(--color-fff); border-radius: var(--br5)}
.bottom .follow dl.show dd{transform: translate(-50%,.05rem); visibility: inherit; opacity: 1}
.bottom .follow a {color:var(--default-color);}
.bottom .follow .img{position: absolute; visibility: hidden; opacity: 0; bottom: 100%;background: var(--color-fff); border: solid 4px var(--color-blue);border-radius: var(--br10); padding: .1rem;width: 1.2rem; transition: 0.5s; left: 50%;transform: translate(-50%,-.2rem)}
.bottom .follow dl.show .img{transform: translate(-50%,.05rem); visibility: inherit; opacity: 1}

.bottom .copyright{width: 100%;padding: .2rem ; text-align: center;color: var(--color-fff)}
.bottom .copyright a{display: inline-block}
@media(max-width:1300px){
.bottom .logo{width: 2rem;}
.bottom .follow dt{padding: .08rem}
.bottom .follow dt img{max-height: .3rem;}
}
@media(max-width:1024px){
.bottom .left_box{padding-bottom: .3rem}
.bottom .follow dl:first-child dd{left: 200%}
.bottom .logo{width:1.6rem;}
}
@media(max-width:768px){
.bottom .auto{padding-right: 4%}
.bottom .line{display: none}
.bottom .left_box .txt{width: 100%; padding-top: .1rem}
}


.sider{position:fixed; right:.2rem;z-index:99;bottom:24%;}
.sider .gotop{display: block;color: var(--color-blue);padding: .1rem; /* background: var(--color-blue) ; */  text-align: center; cursor: pointer}
.sider .gotop:before{content: ''; display: block; margin: auto; width:.40rem; height: .40rem;background: url("../images/side_top.png") no-repeat center center; background-size: .33rem}
@media(max-width:768px){
.sider{bottom:3.1rem;}
.sider .gotop{font-size: var(--f12)}
}

.main{padding-top: 2.6%; padding-bottom: 2.6%}

.banner{position: relative;}

.banner .img{position: absolute;width: 100%; text-align: center;top: 50%; transform: translateY(-50%)}
.banner .img img{max-width: 35%;}
.banner figure img{width: 100%}
.banner figure .wapimg{display: none}
.banner .wap {display:none;}
.banner .swiper-pagination{position: absolute; width: 100%; bottom:6%; z-index: 10; display:flex; justify-content: center}
.pr .banner .swiper-pagination{bottom: 23%}
/*@media(min-width:1025px){
    .banner video{position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%,-50%);min-height: 100%; min-width: 100%;width: 100%;height: 100%;object-fit: cover }
}*/
@media(max-width:1024px){
.banner figure .pcimg{display: none}
.banner figure .wapimg{display: block}
.banner .pc {display:none;}
.banner .wap {display:block;}
.pr .banner .swiper-pagination{bottom:.2rem}
}


.banner .a_play{width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: rgba(0,0,0,0.3);}
.banner .a_play::before,
.banner .a_play::after{position: absolute; content:'';z-index: 5;top: 50%;left: 50%;}
.banner .a_play::before{width: 70px;height: 70px;border: 3px solid rgba(255,255,255,1);margin-left: -35px;margin-top: -35px;border-radius: 50%;}
.banner .a_play::after{width: 0;height: 0;border-top: 12px solid transparent;border-bottom: 12px solid transparent;border-left: 15px solid rgba(255,255,255,1);margin-left: -5px;margin-top: -12px;}

.banner .swiper-slide .video_files{position:absolute; left:0; top:0; width:100%; height:100%; z-index:10;}
.banner .swiper-slide .video_files video{width:100%; height:100%; background-color:#000;}
.banner .swiper-slide .video_files .close{position: absolute;right: 3%;top: 10%;z-index: 10;width: 30px;height: 30px;border-radius: 50%;background-color: rgba(2,56,148,1);cursor: pointer;}
.banner .swiper-slide .video_files .close::before,
.banner .swiper-slide .video_files .close::after{ position:absolute; content:''; width:3px; height:70%; border-radius:3px; background-color:#fff; left:13px; top:5px;}
.banner .swiper-slide .video_files .close::before{ transform:rotate(45deg);}
.banner .swiper-slide .video_files .close::after{ transform:rotate(-45deg);}

.in-menu{line-height: .4rem;padding: .15rem 0}
.menu li{position: relative; font-size: var(--f20)}
.menu li:not(:last-child){margin-right: 6vw}
.menu li.aon a{color: var(--color-blue)}
.menu li.aon a:after{content: '';position: absolute; width: 0; height:2px; left: 0; right: 0; bottom: 0; margin: auto;background: var(--color-blue)}
.menu li.aon a:after{width: 100%;}

.side_menu{position: sticky; top: 10%; left: 2%; z-index: 10; width: 1.1rem}
.side_menu .box{position: absolute;width: 100%}
.side_menu dt{ font-size: var(--f20); display: none; background: var(--color-blue);color: var(--color-fff); border-radius: var(--br10); line-height: .4rem; text-align: center}
.side_menu dd {padding: 0rem}
.side_menu li{display: flex; align-items: center; padding: .12rem 0}
.side_menu li:before{content: '';width: 6px; height: 6px; margin-right: .1rem; border-radius: var(--br30);background: var(--color-blue);opacity: 0; transition: 0.5s;flex: 0 0 auto}
.side_menu li a{flex: 1; line-height: .32rem; cursor: pointer}
.side_menu li img{max-height: .32rem;}
.side_menu li.aon:before {opacity: 1}
.side_menu li.aon a{font-weight: bold;color: var(--color-blue)}
.side_menu li:not(.aon) img{ filter: grayscale(100%) brightness(400%);}
.side_menu.have-img li span{display: none}
@media(max-width:1024px){
.side_menu {width: 100%; position: initial; padding: 0 2%}
.side_menu .box{position:relative; width: 100%;display: flex}
.side_menu dl{display: flex; align-items: center}
.side_menu dt{padding: 0 .1rem;font-size: var(--f18);}
.side_menu ul{display: flex}
.side_menu ul li:not(:last-child){margin-right: .2rem}
}
@media(max-width:640px){
.side_menu .box{display: block}
.side_menu dd{padding-top: 0; padding-bottom: 0}
.side_menu ul li{font-size: var(--f18);}
.side_menu li:before{display: none}
}

.side_menu.pro_nav{position: sticky; top: 10%; left: 2%; z-index: 10; width: 0.9rem}
.side_menu.pro_nav dt{ font-size: var(--f12);display: block;background: #eaf2ff;color: var(--color-blue); font-weight: bold; border-radius: var(--br10); line-height: .3rem; text-align: center}
.side_menu.pro_nav dd {padding: .08rem}
.side_menu.pro_nav li{display: flex; align-items: center; padding: .08rem 0}
.side_menu.pro_nav li a{flex: 1; line-height: .35rem; cursor: pointer}
.side_menu.pro_nav li img{max-height: .25rem;}


@media(max-width:1024px){
.side_menu.pro_nav {width: 100%; position: initial; padding: 0 2%}
.side_menu.pro_nav dt{padding:.1rem;font-size: var(--f16);}
}
@media(max-width:640px){
    .side_menu.pro_nav dl { margin-bottom:0.1rem;}
.side_menu.pro_nav dt{white-space: nowrap}
.side_menu.pro_nav dd{flex: 1; padding-top: 0; padding-bottom: 0}
.side_menu.pro_nav li{width: 25%;}
.side_menu.pro_nav li img{max-height: .3rem; display: block; margin:0 auto;}
.side_menu.pro_nav ul li:not(:last-child){margin-right: .1rem}
}


/*.sitemap li{padding: 1.5% 0; border-bottom: solid 1px #ecedee}}
.sitemap li b{font-size: var(--f18)}
.sitemap li .sub span{display: inline-block; padding-right: .3rem}
.sitemap li .sub span a:not(:hover){color: var(--color-lightblue)}

.link_list ul{margin-left: -.0546rem; margin-top: -.0546rem}
.link_list li{width: 16.66666666666667%; padding: .0546rem;}
.link_list li a{display: block;}
.link_list li .pic{ padding: .2rem; background: var(--color-fff); border-radius: var(--br10); box-shadow: 0 0 40px rgba(0,0,0,0.04)}
.link_list li .pic figure{padding-bottom:50%;}
.link_list li .pic figure img{object-fit: contain;-o-object-fit: contain}
.link_list li p{text-align: center; padding: .1rem 0}
@media(max-width:1200px){
.link_list li{width: 20%;}
}
@media(max-width:1024px){
.link_list li{width: 25%;}
}
@media(max-width:768px){
.link_list li{width: 33.333%;}
}
@media(max-width:640px){
.link_list li{width: 50%;}
}*/

.search_list li{padding: 1.6% 0; border-bottom: solid 1px var(--color-f5)}
.search_list li time{float: right}

.main_about {position: relative;}
.main_about .column{padding:.5rem 0 .5rem 6.57895%; position: relative;}
.main_about .column span{display: block;position: relative; z-index: 2}
.main_about .column span.en{font-size: var(--f30); color: var(--color-blue); font-weight: bold; text-transform: uppercase; margin-bottom: .1rem}
.main_about .column span.cn{font-size: var(--f20);}

.pr{position: relative;}

.ban_data{position: absolute; width:100%; bottom: 0%; z-index: 10;background: rgba(2,56,148,0.9); }
.ban_data .auto {display:none;}
.ban_data .auto:first-child {display:block;}
.ban_data .data {padding:3.652% 10%}
.ban_data .data dl{font-size: var(--f18); color: var(--color-fff);}
.ban_data .data dt{font-weight: bold; line-height: 1; padding-bottom: .1rem}
.ban_data .data dt b{font-size: var(--f30)}
.ban_data .data dt i{font-style: normal}
.ban_data .data dt i.num{position: absolute}
.ban_data .data dt i.no{opacity: 0}
.ban_data .data dd{font-weight: 300}
@media(min-width:1024px){
.ban_data .data dl{font-size: var(--f24)}
.ban_data .data dt b{font-size: calc(60/1920*100vw)}
}
@media(max-width:1440px){
	.ban_data .data{padding:2% 10%;}
}
@media(max-width:1024px){
.ban_data{position: relative;}
.ban_data .data{padding:2% 0%}
}

.about_overview{margin-bottom: 13%;padding-top: 14.8%; position: relative; margin-top: -2.75%}
.about_overview .logo{width:38%;margin-left: 2em}
.about_overview .info{padding:5% 0; line-height: 2}
.about_overview .info p{text-indent: 2em}
.about_overview .data{margin-top: 11%;padding: 1.5% 20% 1.5% 10%; /* background: var(--color-blue); */ position: relative; z-index: 2;}
.about_overview .data:after {content: '';position: absolute;bottom: 0;left: 0;width: 120%;height: 100%;background: var(--color-blue);border-top-left-radius: 1.23rem;z-index: -1;}
.about_overview .data dl{font-size: var(--f14); color: var(--color-fff);}
.about_overview .data dt b{font-size: var(--f30)}
.about_overview .data dt i{font-style: normal}
.about_overview .data dt i.num{position: absolute}
.about_overview .data dt i.no{opacity: 0}
.about_overview .data dd{font-weight: 300}
.about_overview .photo{position: absolute;width:53.119%;bottom: 15.5%; right: -13%; z-index: -5;}
@media(min-width:1024px){
.about_overview .overview{padding:0 9%; max-width: 7rem}

}
@media (min-width:1200px) {
.about_overview .overview{max-width: 11rem}
}
@media(max-width:1024px){
.about_overview{margin-bottom:0;}
.about_overview .data{margin-top:0;padding:1.5% 5%;}
.about_overview .data dl{width: 50%; padding: 2%}
.about_overview .overview{ max-width: 7rem}
.about_overview .photo{bottom: 0%;position: relative;width:100%;right:0;}
.about_overview .data:after{border-top-left-radius: 0.5rem;width:100%;}
}

.about_culture{position: relative;padding-top: 5.26%}
.about_culture .column:after{content: ''; position: absolute;bottom: 0;right: 0; width: 120%;height: 100%; background: #f7f9fb}
.about_culture .item{position: relative;}
.about_culture .item:first-child{padding-right:52.631579%}
.about_culture .item:not(:first-child){padding-left:52.631579%; margin-top:4%}
.about_culture .item:nth-child(3):after{content: ''; position: absolute;bottom: 0;left: 0; width: 120%;height: 100%; background: #f7f9fb}
.about_culture .info{max-width: 4.8rem; margin: auto; padding: 8% 4%; position: relative; z-index: 5}
.about_culture .title{padding-bottom: .25rem}
.about_culture .title .en{font-size: var(--f20); font-weight: bold;color: var(--color-999);}
.about_culture .title .cn{padding-left: .1rem;color: var(--color-666);}
.about_culture .title:after{content: ''; display: block;margin-top: .4rem; width: .5rem; height: 2px; background: var(--color-blue); }
.about_culture .txt{font-size: var(--f20); color: var(--color-blue); font-weight: bold}
.about_culture .txt p{padding: .2rem 0;}
/* .about_culture .txt p:nth-child(3n+2){text-align: right}
.about_culture .txt p:nth-child(3n+3){text-align: center} */
@media(min-width:769px){
.about_culture .pic figure {position: absolute;}
.about_culture .pic figure:nth-child(1){top: 0; right: -20%; width: 65.657895%}
.about_culture .pic figure:nth-child(2){bottom: 0; width: 52.631579%}
}
@media(max-width:768px){
.about_culture .item{padding: 0!important}
.about_culture .pic figure{padding: 3% 0}
.about_culture .txt p{padding: .1rem 0;}
/* .about_culture .txt p:nth-child(3n+2){text-align: left;}
.about_culture .txt p:nth-child(3n+3){text-align: left} */
}

.about_history{position: relative; margin-top: 10%}
.about_history .info-box{width: 113%}
.about_history .info{width:30.628%; padding: 5%; position: relative}
.about_history .info:after{content: '';background: #f2f5f9; position: absolute; width: 400%; height: 100%; bottom: 0; left: 0;border-radius: 1.5rem 0 0 1.5rem; }
.about_history .info dl{position: relative; z-index: 10}
.about_history .info dt{color: var(--color-blue);font-size: var(--f24); line-height: 1; margin-bottom: .3rem}
.about_history .info dt b{font-size: var(--f30)}
.about_history .info dd{color: var(--color-666)}
.about_history .pic{width:59.372%}
.about_history .pic figure{padding-bottom:65.687%}

.about_history .year-box .swiper{width: 80%; padding: 0 10%;background: url(../images/line.png) repeat-x center .15rem;}
.about_history .year-box .swiper-slide{color: var(--color-999); padding: .1rem; text-align: center}
.about_history .year-box .swiper-slide span{display: inline-block; cursor: pointer}
.about_history .year-box .swiper-slide i{width: 10px; height: 10px; display: block; background:var(--color-999); border-radius: 100%; box-shadow:  0 0 0 5px rgba(189,189,189,0.3)}
.about_history .year-box .swiper-slide b{line-height: .5rem;}
.about_history .year-box .swiper-slide-thumb-active{color: var(--color-blue); font-size: var(--f20)}
.about_history .year-box .swiper-slide-thumb-active i{ background:var(--color-blue); box-shadow:  0 0 0 5px rgba(2,56,148,0.3) }
.about_history .year-box .swiper-button-prev,
.about_history .year-box .swiper-button-next{ width: 35px; height: 35px;margin-top: -40px; background: var(--color-fff)}
.about_history .year-box .swiper-button-prev:after,
.about_history .year-box .swiper-button-next:after{content: '';width:100%; height: 100%;position: absolute; background:url(../images/arrow.png) no-repeat center center; background-size: 10px}
.about_history .year-box .swiper-button-next:after{transform: rotate(180deg)}
.about_history .year-box .swiper-button-disabled{filter: grayscale(100%) brightness(100%);}
@media(min-width:1024px){
.about_history .column{position: absolute;width: 100%}
.about_history .info dt b{font-size: calc(60/1920*100vw)}
.about_history .year-box{width:44%;margin-top: -5%}
}
@media(max-width:1024px){
.about_history .info{width: 38.628%}
.about_history .pic{width: 48.372%}
}
@media(max-width:640px){
.about_history .info-box{width:100%;margin-bottom:3vw;}
.about_history .item{background:#f2f5f9;display: block;}
.about_history .info{width:100%}
.about_history .pic{width:100%;}
}

.about_quality{padding: 10% 0}
.about_quality .swiper_group{width: 113%}
.about_quality .pic figure{padding-bottom: 105%}
.about_quality .item:after{content: ''; position: absolute; width: 100%; height:100%;bottom: 0; background: rgba(0,0,0,0.5); transition: 0.5s}
.about_quality .info{position: absolute; width: 100%; z-index: 10; bottom: 0;padding: .3rem; color: var(--color-fff)}
.about_quality .info h4{font-size: var(--f24); margin-bottom: .2rem;}
.about_quality .info h4:after{content: ''; display: block; margin-top: .2rem; width: .6rem; height:4px; background: var(--color-blue);}
.about_quality .info p{font-size: var(--f20); opacity: 0;margin-bottom: -.4rem; transition: 0.5s}
.about_quality .item:hover:after{height: 30%;}
.about_quality .item:hover .info p{ margin-bottom:0; opacity: 1}
.about_quality .swiper-pagination{position: initial}

.brand_overview {padding: 6.5% 0}
.brand_overview .logo{width: 33%; text-align: center;}
.brand_overview .logo img{width: 50%; margin: auto}
.brand_overview .info{width:61%; line-height: 2;}
.brand_overview .info p{text-indent: 2em}
@media(max-width:1200px){
.brand_overview .info{width:67%;}
}
@media(max-width:768px){
.brand_overview .logo{width: 80%; margin: auto}
.brand_overview .info{width:100%;padding-top: 5%}
}

.brand_poster {padding-top: 6.5%}
.brand_poster .photo{width: 65.789475%}
.brand_poster .photo img{width: 100%; border-radius: var(--br50)}
.brand_poster .info{width:34.210525%; line-height: 2;padding: 5%; line-height: 1.5}
.brand_poster .info h4,
.brand_poster .info p{font-size:var(--f30)}
.brand_poster .info p{color: var(--color-lightyellow)}
.brand_poster .info p:after{content: ''; display: block; margin-top: .3rem; width: 30%; height: 1px; background: var(--color-blue)}
@media(min-width:1024px){
.brand_poster .info h4,
.brand_poster .info p{font-size: calc(60/1920*100vw)}
}
@media(max-width:768px){
.brand_poster .photo,
.brand_poster .info{width: 100%}
.brand_poster .info{text-align: center}
.brand_poster .info p:after{margin: auto}
}

.brand_idea{padding: 13% 0;margin-left: 8%;}
.brand_idea .photo{width: 46.05265%}
.brand_idea .photo img{width: 100%; border-radius: var(--br50)}
.brand_idea .info{width: 50%; max-width: 6rem; /* padding: 6% 0 */}
.brand_idea .info h4,
.brand_idea .info p{font-size:var(--f30)}
.brand_idea .info p{color: var(--color-lightyellow)}
.brand_idea .info p:after{content: ''; display: block; margin-top: .3rem; width: 30%; height: 1px; background: var(--color-blue)}
.brand_idea .info .list_dl{margin-top:5%;}
.brand_idea .info dl{padding:5% 0; color: var(--color-999)}
.brand_idea .info dt{font-size: var(--f30)}
.brand_idea .info dd{font-size: var(--f14)}
.brand_idea .info dl:hover{color: var(--color-lightyellow)}
@media(min-width:1024px){
.brand_idea .info h4,
.brand_idea .info p{font-size: calc(60/1920*100vw)}
}
@media(max-width:768px){
.brand_idea .photo{width: 100%}
.brand_idea .info{width: 100%}
.brand_idea .info{text-align: center}
.brand_idea .info p:after{margin: auto}
}

.brand_glory{padding-bottom: 6.5%;margin-left: 8%;}
.brand_glory .photo{width: 46.05265%}
.brand_glory .photo img{width: 100%; border-radius: var(--br50)}
.brand_glory .info{width: 50%; max-width: 6.4rem;  padding: 6% 0; align-content: space-between}
.brand_glory .title{width: 80%; padding: 5% 0; text-align: center;color: var(--color-lightyellow)}
.brand_glory .title h3{font-size: var(--f30); font-weight: normal; padding: 0; margin: 0}
.brand_glory .box{width: 100%}
.brand_glory .sub{font-size: var(--f26);color: var(--color-blue);}
.brand_glory .txt{font-size: var(--f14); line-height: 2.5; padding: 5% 0}
.brand_glory .pic li{ max-width:30%; overflow: hidden;}
.brand_glory .pic li img{ transition: 0.3s;}
.brand_glory .pic li:hover img{transform: scale(1.2); }
@media(min-width:1024px){
.brand_glory .title h3{font-size: calc(60/1920*100vw)}
.brand_glory .sub{font-size: var(--f30);}
}
@media(max-width:640px){
.brand_glory .photo{width: 100%}
.brand_glory .info{width: 100%}
.brand_glory .title{width: 100%;text-align: left;}
}

.product_list .group{padding: 6% 0}
.product_list h3{ margin: 0; text-align: center;font-size:var(--f18); font-weight: normal; display: flex; justify-content: center; align-items: center; line-height: 1;}
.product_list h3 b{font-size:var(--f30); color:var(--color-blue); font-weight: normal }
.product_list h3 i{  font-style: normal;margin: 0 0.06rem; font-weight: bold}
.product_list ul li{width:21.052632%; position: relative; z-index: 2}
.product_list ul li .pic{position: relative}
.product_list ul li .pic figure{padding-bottom: 133.442%; z-index: 2}
.product_list ul li .pic:after{content: '';position: absolute; width: 100%; bottom: 0; height: 56.208%; background: #f2f2f2; border-radius: .2rem .2rem 1.6rem 1.6rem;transition: 0.5s}
.product_list ul li .info{padding: 8% 0; text-align: center}
.product_list ul li .info h4{font-size: var(--f20)}
.product_list ul li .info p{font-size: var(--f20)}
.product_list ul li:hover .pic:after{background:var(--color-blue) }

.product_list .group#cid16 ul li .pic:after{height: 74.945%; border-radius: 50%;}

@media(min-width:1024px){
.product_list h3{font-size:calc(40/1920*100vw)}
.product_list h3 b{font-size:calc(60/1920*100vw)}
.product_list ul li{width:21.052632%;}
.product_list ul li:not(:nth-child(4n+4)){margin-right: 5.263157333333333%}
}
@media(max-width:1024px){
.product_list ul li{width:33.333%;padding:2%}
}
@media(max-width:640px){
.product_list ul li{width:50%;}
}

.product_detail .detail{padding-top: 15%; padding-bottom: 13%; width: 90%;margin: auto}
.product_detail .pic{width:43.86%}
.product_detail .info{width: 48%}
.product_detail .title {border-bottom: solid 1px var(--color-000); }
.product_detail .title h1{font-size: var(--f30); font-weight: normal; padding: 0; margin: 0}
.product_detail .title p{font-size: var(--f18);color: var(--color-999); padding:3% 0}
.product_detail .txt{color: var(--color-666);padding-top:7%; width: 90%}
.product_detail .article{padding-top: 5%}
.product_detail .article p{ margin: 0;}
.product_detail .photo{position: relative}
.product_detail .photo img{width: 100%}
@media(min-width:1024px){
.product_detail .title h1{font-size: calc(50/1920*100vw)}
.product_detail .title p{font-size: calc(24/1920*100vw)}
}
@media(max-width:768px){
.product_detail .pic{width: 100%}
.product_detail .info{width: 100%}
.product_detail .detail{width: 100%}
}

.news_list li{padding-top: 10%; padding-bottom: 10%}
.news_list li .pic{width: 65.789475%}
.news_list li .pic figure{padding-bottom: 58%}
.news_list li .info{width: 30.26%; align-content: space-between}
.news_list li .info .txt{width: 100%; padding:10% 0;}
.news_list li .info .txt h4{font-size: var(--f30); margin-bottom:10%}
.news_list li .info .txt p{ color: #666; line-height: 2}
.news_list li .type{padding: 6% 0; font-size: var(--f18);color: var(--color-blue)}
.news_list li .type b{font-size: var(--f40); padding-right: .1rem}
.news_list li:nth-child(odd) .pic{order: 2; margin-right: -13%}
.news_list li:nth-child(odd) .info{margin-left: 5%}
@media(max-width:768px){
.news_list li{padding-top: 4%; padding-bottom: 4%}
.news_list li .pic{width: 100%!important; order: -1!important}
.news_list li .info{width: 100%; margin: 0!important}
.news_list li .info .txt{padding: 3% 0}
.news_list li .info .txt h4{margin-bottom: 3%;font-size: var(--f24);}
.news_list li .type{padding: 0}
.news_list li .type b{font-size: var(--f30);}
}


.article_detail {max-width: 12rem; margin: auto}
.article_detail .title{padding-bottom: 2%;}
.article_detail .title h1{font-size: var(--f40);padding: 0; margin: 0;}
.article_detail .title .center {text-align: center;}
.article_detail .title p{font-size: var(--f20);padding: 0.3rem 0 0.2rem;margin: 0; color: var(--color-999);}
.article_detail .title p span{padding-right: .35rem}
.article_detail .label {display: flex;gap: 10px;flex-wrap: wrap;margin: 0.2rem 0;}
.article_detail .label a {display: inline-flex;padding: 0 0.2rem;line-height: 0.34rem;border: 1px solid var(--color-blue);color: var(--color-blue);}
.article_detail .label a:hover{ background-color:var(--color-blue) ;  color: var(--color-fff);}
.article_detail .author{margin: 5% 0; line-height: 20px; padding-left: .2rem; font-size: var(--f18); color: var(--color-999);border-left: solid 4px var(--color-blue)}
.article_detail .article{font-size: var(--f18);line-height: 2;}
.article_detail .article video { max-width: 100%; width: 100%;height: 6rem;object-fit: contain;}
.article_detail .video{position: relative; margin: 4% 0}
.article_detail .video video{position: absolute; width: 100%; height: 100%;}
.article_detail .video figure{opacity: 0}
.article_detail .open-play{position: absolute; width: 100%; height: 100%;z-index: 10;background: rgba(0,0,0,0.4)}
.article_detail .open-play span{display: block;position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: .76rem; height: .76rem; background: url("../images/play.png") no-repeat; background-size: contain}
.article_detail .open-play.play{opacity: 0}

@media(max-width:768px){
.article_detail .title h1{font-size: var(--f30);}
.article_detail .title p{font-size: var(--f18);}
.article_detail img{width: 100% !important; height: 100% !important;}
.article_detail video{ width: 100% !important; height: 100% !important;}
}

.prev_next{margin: 3% 0 5% 0; position: relative}
.prev_next p{padding: .05rem 0; margin: 0; max-width: 48%}
.prev_next .back{text-align: center}
.prev_next .back a{display:inline-flex; align-items: center;line-height: .52rem; color: var(--color-fff); background: var(--color-blue); border-radius: var(--br10); padding: 0 .3rem; transition: 0.5s}
.prev_next .back a:before{content: '';width: 15px; height: 16px;margin-right: .2rem; background: url("../images/svg/back.svg")}
.prev_next .back a:hover{background:var(--color-bluehover)}
@media(max-width:768px){
.prev_next p{max-width: inherit; width:100%}

}


.Pages { padding: 4.2% 0}
.Pages .p_cur,
.Pages .p_count,
.Pages .p_total,
.Pages .p_jump,
.Pages .p_page .a_first,
.Pages .p_page .a_end{display: none}
.Pages .p_page{display: flex; justify-content: center}
.Pages .p_page .a_prev,
.Pages .p_page .a_next{font-size: 0; line-height: 0; position: relative}
.Pages .p_page .a_prev:before,
.Pages .p_page .a_next:before{content: '';position: absolute;width: 100%; height: 100%; background: url("../images/page.png") no-repeat center center; background-size: 18px}
.Pages .p_page a{min-width: .4rem; line-height: .4rem;border-radius: 100%; display: block}
.Pages .p_page .num{font-style: normal; display: flex;font-size: var(--f14); text-align: center;}
.Pages .p_page .num a{color: var(--color-blue); display: flex; align-items: center;}
.Pages .p_page .num a:before,
.Pages .p_page .num a:after{content: '';width: 18px; height: 3px; background: no-repeat center center;}
.Pages .p_page .num a:before{background-image: url("../images/page_left.png")}
.Pages .p_page .num a:after{background-image: url("../images/page_right.png")}
.Pages .p_page .a_prev,
.Pages .p_page .a_next{}
.Pages .p_page .a_cur {font-weight: bold;}
.Pages .p_page .a_prev.no,
.Pages .p_page .a_next.no{opacity: 0.5}
.Pages .p_page .a_next{transform: rotate(180deg)}
.Pages .p_page .a_prev:not(.no):before,
.Pages .p_page .a_next:not(.no):before{opacity: 0.5}
.Pages .p_page .no{cursor: default}


[data-popup]{background-color: rgba(0,0,0,0.5);display: flex;align-items: center; justify-content: center; position: fixed; top: 0;width: 100%; height: 100%; z-index: 9999; visibility: hidden; opacity: 0; left: -100%; transition: opacity 0.3s;}
[data-popup].show{visibility: visible; opacity: 1; left: 0;}
[data-popup] .close{position: absolute; right: 0; top: 0; width: 0.4rem; height: 0.4rem;--color:#000;cursor: pointer; z-index: 10;}
[data-popup] .close:before,
[data-popup] .close:after{background-color: var(--color); width: 60%; height: 2px;content: '';position: absolute; left: 20%; top: 50%; margin-top: -1px;transform: rotate(45deg);}
[data-popup] .close:after{transform: rotate(-45deg);}
[data-popup] .inner{width: 95%;margin: 0 auto; max-width: 10rem; border-radius: 0.1rem; background-color: #fff; max-height: 90vh; padding: 0 0.1rem 0.2rem; position: relative;}
[data-popup] .title{text-align: center; font-size: 0.28rem; font-weight: 700;padding: 1em 0;}
[data-popup] .edit-info{overflow: auto; max-height: calc(80vh - 5em); padding: 0 0.3rem; line-height: 1.875;}


.swiper-other{position: relative; display: flex; align-items: center; padding: .5rem 0}
.swiper-other .arrow{position: relative; display: flex; align-items: center;padding: .12rem; border: solid 1px var(--color-blue); border-radius: var(--br50); margin-left: .2rem;}
.swiper-other .swiper-scrollbar{position: relative; flex: 1;left: 0;top: 0; bottom: 0; width: inherit}
.swiper-other .swiper-scrollbar-drag{background: var(--color-blue); cursor: pointer}
.swiper-other .swiper-scrollbar-drag:before,
.swiper-other .swiper-scrollbar-drag:after{content: '';position: absolute; right: 0; width: .04rem; height: .04rem; border-radius: 100%;background: var(--color-blue);}
.swiper-other .swiper-scrollbar-drag:before{transform: scale(4)}
.swiper-other .swiper-scrollbar-drag:after{transform: scale(6); opacity: 0.5}
.swiper-other .swiper-pagination{position: initial; width: inherit; display: flex; align-items: center; padding: 0 .1rem;}
.swiper-other .swiper-pagination span{padding: 0 .1rem; font-size: var(--f30); line-height: 1}
.swiper-other .swiper-pagination span.of{font-weight: bold; color: var(--color-000)}
.swiper-other .swiper-button-prev,
.swiper-other .swiper-button-next{position: initial; width: .35rem; height: .35rem; margin: 0; background:url(../images/arrow.png) no-repeat center center; background-size: .24rem}
.swiper-other .swiper-button-prev:after,
.swiper-other .swiper-button-next:after{display: none}
.swiper-other .swiper-button-next{transform: rotate(180deg)}
.swiper-other .swiper-button-disabled{filter: grayscale(100%) brightness(100%);}

/*start*/
.info_title *{padding: 0; margin: 0}
.info_title h3{font-size: var(--f40);padding-bottom: .2rem;  text-indent: 1em; color: var(--color-blue);}
.info_title p{line-height: 2; color: var(--color-4c); text-indent: 2em;text-align: justify}

@media(max-width:768px){
.info_title h3{font-size: var(--f30);}
.swiper-other .arrow{padding: .1rem;margin-left: .12rem;}
.swiper-other .swiper-pagination{padding: 0 .05rem;}
.swiper-other .swiper-pagination span{font-size: var(--f18);padding: 0 .02rem;}
.swiper-other .swiper-button-prev, .swiper-other .swiper-button-next{background-size: .18rem}
}


.body_join .header .topB{background: #f2f5fa}
.main_join{}

.OEM .patent .box{ width: 100%; padding:4%; color: var(--color-fff); background: url("../images/svg/OEM.svg") no-repeat center center; background-size: 100% 100%}
.OEM .patent .info{text-align: center; padding-bottom:5.738%}
.OEM .patent .info h4{font-size: var(--f30)}
.OEM .patent dl { position: relative; padding:5% 0}
.OEM .patent dl:before{position: absolute;content: ''; width: 60%; height: 1px; background: var(--color-fff); opacity: 0.2; left: 0; right: 0; top: 0; margin: auto;}
.OEM .patent dl dt{font-size: var(--f20); width:calc(100% - 1.35rem);}
.OEM .patent dl dd{font-size: var(--f18)}
.OEM .patent dl dd b{font-size: calc(50/1920*100vw); padding-right: .1rem}
.OEM .patent dl dd b i{font-style: normal}
.OEM .patent dl dd b i.num{position: absolute}
.OEM .patent dl dd b i.no{opacity: 0}
@media(min-width:1024px){
.OEM{position: absolute; width: 100%;padding-top: 6.5789%;}
.OEM .patent{width: 4rem;position: relative; z-index: 10;}
.OEM .auto{max-width: inherit; width: 100%;padding-left:10.105%; padding-right: 10.105%}
.OEM .patent .box{position: absolute;padding:20% 7.5%;}
}
@media(max-width:1024px){
.OEM .patent .box{padding:14% 5%}
.OEM .patent .txt{}
}
@media(max-width:768px){
.OEM .info_title{width:100%;order: -1}
.OEM .patent{width: 100%;}
.OEM .patent .box{position: relative;background-size:cover;}
.OEM .patent dl dd b{font-size: var(--f40)}
}

.join_require{width: 100%; padding-bottom:10%}
.join_require h4{font-size: var(--f24); color: var(--color-blue); font-weight: bold; padding:0 0 .2rem 0; margin: 0}
.join_require ul{font-size: var(--f14);gap:.3rem; display: flex; flex-wrap: wrap}
.join_require ul li{flex: 1; border: solid 1px var(--color-000); border-radius: var(--br10); padding: .1rem;}
@media(max-width:1200px){
.join_require{padding-bottom: 5%}
.join_require ul{gap:.2rem}
}
@media(max-width:768px){
.join_require ul li{flex:auto;}
}

.join_contact ul li{width:100%; background: #f7f9fc; border-radius: var(--br20); padding:.2rem; transition: 0.5s; color: var(--color-blue)}
.join_contact ul li:not(:first-child){margin-top: 12%}
.join_contact ul li .txt{height: .7rem;}
.join_contact ul li .txt figure{width: .8rem; margin-right: .2rem}
.join_contact ul li .txt figure img{max-height: .7rem; }
.join_contact ul li .txt h4{flex: 1; font-size: var(--f24); padding: 0; margin: 0;}
.join_contact ul li .lx {font-size: var(--f18); }
.join_contact ul li .lx span{display: flex; align-items: center}
.join_contact ul li .lx span:before{content: '';display: inline-block;height:20px; margin-right: 15px; background: no-repeat; background-size: contain;}
.join_contact ul li .lx span:nth-child(1):before{width: 17px; background-image: url("../images/job_icon1.png");}
.join_contact ul li .lx span:nth-child(2):before{width: 19px; background-image: url("../images/job_icon2.png");}
/*.join_contact ul li:not(:hover) .txt figure img,
.join_contact ul li:not(:hover) .lx span:before{filter: grayscale(100%) brightness(400%); }*/
.join_contact ul li:hover{background: var(--color-fff); box-shadow: 0px 0px 10px 0px rgba(2, 56, 148, 0.21);}
.join_contact ul li:hover .txt h4,
.join_contact ul li:hover .lx{color: var(--color-blue); }
@media(max-width:1024px){
.join_contact{padding-bottom: .3rem}
.join_contact ul li:not(:first-child){margin-top:.3rem}
}
@media(max-width:640px){
.join_contact ul li{width:100%;margin-top: 4%; margin-right: 0!important}
.join_contact ul li .txt figure{width: .5rem; }
.join_contact ul li .txt h4{font-size: var(--f20);}
}


.distributor .group{position: relative; padding: 4.166667% 0}
.distributor .auto{display: flex; flex-wrap: wrap; justify-content: space-between;}
.distributor .join_detail{width:100%}
.distributor .join_pic{width:100%;}
.distributor .join_pic img{width: 100%}
.distributor .info_title{padding-bottom: .6rem}
.distributor .group:first-child{padding-top: 6.5789%;background: #f2f5fa;padding-bottom: 0;margin-bottom: 3%}
.distributor .group:first-child .join_contact{padding-bottom: .5rem}
.distributor .group:first-child .join_contact ul li{ background: #fcfdfe}
.distributor .group:last-child{padding-bottom: 0}
@media(min-width:1024px){
.distributor .auto{max-width: inherit; width: 100%;padding-left:10.105%; padding-right: 10.105%}

.distributor .group:nth-child(even) .join_detail{width:35.037%}
.distributor .group:nth-child(even) .join_pic{width:58.395%;}
.distributor .group:nth-child(odd) .join_pic{width:60.498%;}
.distributor .group:nth-child(odd) .join_detail{width:36.299%}
.distributor .group:nth-child(even) .auto{padding-right: 0}
.distributor .group:nth-child(odd) .auto{padding-right: 3.125%}
.distributor .group:nth-child(odd) .join_detail{order: 2;}
.distributor .group:first-child .auto{padding: 0}
.distributor .group:first-child .info_title{padding-bottom: .3rem}
.distributor .group:first-child .join_detail{width: 100%;padding-left: 10.105%; padding-right: 3.125%}
.distributor .group:first-child .join_box{padding-left:4.6rem;}
.distributor .group:first-child .join_contact ul{justify-content: space-between}
.distributor .group:first-child .join_contact ul li{width: 48%;}
.distributor .group:first-child .join_contact ul li:nth-child(2){margin-top: 0}
.distributor .group:first-child .join_pic{width: 100%; order: 3; margin: 0}

.distributor .group:last-child .auto{padding: 0}
.distributor .group:last-child .join_detail{width: 100%; padding-left:10.105%; padding-right: 10.105%; padding-bottom: 5%}
.distributor .group:last-child .join_box{display: flex; justify-content: space-between;}
.distributor .group:last-child .detail{width:53%}
.distributor .group:last-child .join_contact{width: 39.47369%}
.distributor .group:last-child .join_pic{width: 100%; order: 3; margin: 0}
.distributor .group:last-child .join_require{padding-bottom: 0; max-width: 6rem}
}


.main_partner .info_title{text-align: center;}
.main_partner .info_title p{color: var(--color-blue);text-align: center;}
.partner {overflow: hidden; padding: 4% 0; background: linear-gradient(#ffffff,#eef4ff,#ffffff)}
.partner span{display: block; padding: .2rem;}
.partner  a{width: 2.40rem; height: 1.30rem; display: flex; justify-content: center; align-items: center; background: var(--color-fff); border-radius: var(--br10); box-shadow: 0 0 6px rgba(2,56,148,0.05)}
.partner img{max-width: 80%!important; max-height: 80%}
.partner .list_item:before,
.partner .list_item:after{content: '';position: absolute; width: 10%; height: 100%;top: 0; z-index: 5}
.partner .list_item:before{left: 0; background: linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0))}
.partner .list_item:after{right: 0; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,1))}
@media(min-width:1024px){
.main_partner .info_title h3{font-size:calc(60/1920*100vw); padding-bottom: .4rem}
.main_partner .info_title p{font-size:calc(30/1920*100vw);}
}
@media(max-width:1024px){
.partner span{padding: .15rem;}
.partner a{width:1.8rem; height:0.9rem;}
}
@media(max-width:768px){
.partner span{padding: .1rem;}
.partner a{width:1.2rem; height:0.6rem;}
}


.main_jobs{background: var(--color-f7)}
.jobs_list {margin-left: -.125rem; margin-right: -.125rem}
.jobs_list .item{width: 33.33333333333333%; padding: .4rem; background: url("../images/svg/job_bg.svg") no-repeat center center; background-size: 92.48554913294798% 88.88888888888889%}
.jobs_list .job{width: 36%; font-size: var(--f20); color: var(--color-blue); font-weight: bold}
.jobs_list .welfare{gap:.2rem; padding: .2rem 0}
.jobs_list .welfare span{color: var(--color-fff); background: var(--color-lightblue); padding: 0 .1rem; border-radius: var(--br5)}
.jobs_list .txt{min-height: 1.02rem}
.jobs_list .txt p{padding: .04rem .16rem; background: url("../images/svg/sjx.svg") no-repeat left .14rem;}
.jobs_list .lx {padding-top: .2rem;color: var(--color-blue);}
.jobs_list .lx span{padding-left: .3rem; background: no-repeat left; background-size: 15px;}
.jobs_list .lx span:nth-child(1){background-image: url("../images/job_icon1.png")}
.jobs_list .lx span:nth-child(2){background-image: url("../images/job_icon2.png")}
.jobs_list .item:hover{background-image: url("../images/svg/job_bg2.svg");background-size: 100% 100%}
@media(max-width:1200px){
.jobs_list .item{width: 50%}
}
@media(max-width:768px){
.jobs_list .item{width: 100%}
}


.form_main .group{width: 47%; padding-bottom: .4rem}
.form_main .group.full{width: 100%}
.form_main .sub{font-size: var(--f26); color: var(--color-blue); width: 100%; padding-top: .5rem; padding-bottom: .3rem}
.form_main .sub span{color: var(--color-red)}
.form_main .tips{font-size: var(--f20); padding: 0 .2rem; line-height: .6rem; position: absolute;color: var(--color-999)}
.form_main a{color: var(--color-blue); cursor: pointer}
.form_main a:hover{text-decoration: underline}
.form_main select,
.form_main .text{width: 100%; height: .6rem; line-height: .6rem; background: var(--color-f5);border: solid 1px #e2e2e2; font-size: var(--f18); padding: 0 .2rem}
.form_main textarea.text{height:2rem}
.form_main .text[readonly],
.form_main .text[disabled]{border-color: #efefef; color: var(--color-999)}
.form_main .yzm{display: flex;flex-wrap: wrap; align-items: center}
.form_main .yzm .text{flex: 1}
.form_main .yzm img{width: 1.07rem; height: .45rem; border: solid 1px var(--color-e0);border-radius:var(--br5); margin: 0 .1rem; cursor: pointer}
.form_main .button{padding: .2rem 0; text-align: center; width: 100%}
.form_main .button .btn{font-size: var(--f30); color: var(--color-fff); background: var(--color-blue);border-radius: var(--br50); width: 2.6rem; height: .7rem;border: none; cursor: pointer; transition: 0.5s}
.form_main .button .btn:hover{background: var(--color-bluehover)}
@media(max-width:768px){
.form_main .group{width: 49%; padding-bottom: .2rem}
.form_main .sub{font-size: var(--f20); padding-top: .2rem; padding-bottom: .1rem}
.form_main .tips{font-size: var(--f16);}
.form_main .button .btn{font-size: var(--f18);width: 1.8rem; height: .5rem}
}

.swiper-pagination-bullets.icon{gap:.2rem}
.swiper-pagination-bullets.icon .swiper-pagination-bullet{width: .23rem; height: .23rem; border: none; border-radius: 0; background: none; position: relative; opacity: 1}
.swiper-pagination-bullets.icon .swiper-pagination-bullet-active{background: url(../images/svg/icon.svg) no-repeat center center; background-size: contain;}
.swiper-pagination-bullets.icon .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):before,
.swiper-pagination-bullets.icon .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):after{content: '';border-radius: 100%;position:absolute; margin: auto;left: 0; right: 0; top: 0; bottom: 0}
.swiper-pagination-bullets.icon .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):before{width: 8px; height: 8px;background: var(--color-fff)}
.swiper-pagination-bullets.icon .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):after{width: 18px; height: 18px;border: solid 1px var(--color-fff)}

.banner-slide{position: relative;overflow: hidden}
.banner-slide .num{display: flex; align-items: center; justify-content: flex-end;color: var(--color-fff);position: absolute; right: .2rem; bottom: .2rem; z-index: 10}
.banner-slide .num span{font-size: var(--f20);padding: 0 .1rem;}
.banner-slide .num span.cur{color: var(--color-fff)}
.banner-slide .num span.total{opacity: 0.5}
.banner-slide .arrow{position: absolute; top: 50%; transform: translateY(-50%); width: .62rem; height: .62rem; display: block; cursor: pointer;background: url("../images/slide-arrow.png") no-repeat center center; z-index: 10; background-size:contain; transition: 0.5s;opacity: 0.5}
.banner-slide .arrow.prev{left: 4.427%;}
.banner-slide .arrow.next{right:4.427%; transform: rotate(180deg) translateY(50%)}
.banner-slide:hover .arrow.prev,
.banner-slide:hover .arrow.next{opacity:1}
.banner-slide .pages{position: absolute; width: 100%; bottom:6%; z-index: 10; display:flex; justify-content: center}
.banner-slide img{display: block;width:100%;}

.ind_brand {padding: 8.854% 0}
.ind_brand .brand{gap:1.84%}
.ind_brand .item{width: 15.13158%}
.ind_brand .pic{background: #fafafa; border-radius: 100%; padding:16%; transition: 0.5s}
.ind_brand .pic figure{}
.ind_brand .pic figure img{object-fit: contain; -o-object-fit: contain}
.ind_brand .info{text-align: center; padding: .1rem 0}
.ind_brand .info h4{font-size: var(--f24);color: var(--color-blue)}
.ind_brand .info p{color: var(--color-999)}
.ind_brand .item:hover .pic{background: var(--color-blue)}
.ind_brand .item:hover .pic figure img{ filter: brightness(0) invert(1);}

@media(max-width:1024px){
.ind_brand .brand{gap:5%}
.ind_brand .item{width: 30%; padding:1% 0}
}

.ind_series .left_box{width: 31.25%;padding-top: 5%}
.ind_series .tab_title{font-weight: 300; width: 1.5rem;font-size:  var(--f20); }
.ind_series .tab_title ul{border-left: solid 1px #cccccc; line-height: .4rem;}
.ind_series .tab_title li:not(:last-child){margin-bottom:20%}
.ind_series .tab_title li a{display: block;padding-left: 20%;transform: translateX(-1px);cursor: pointer; border-radius: 0 .2rem .2rem 0}
.ind_series .tab_title li.show a{background: var(--color-blue); color: var(--color-fff);}
.ind_series .tab_other{color: var(--color-999);padding-top:10%; min-height: 2rem;}
.ind_series .tab_group{width:75%; margin-right: -9.3%}
.ind_series .pic figure{padding-bottom:56.25%; border-radius: var(--br50) 0 0 var(--br50)}
@media(max-width:768px){
.ind_series .left_box{width: 100%}
.ind_series .tab_title{width:inherit}
.ind_series .tab_title ul{display: flex; border: none}
.ind_series .tab_title li{flex: 1; margin: 0!important; padding: .1%}
.ind_series .tab_title li a{background:#f9f9f9; border-radius:.2rem; padding: 0;text-align: center;}
.ind_series .tab_other{padding: 5% 0;min-height: auto;}
.ind_series .tab_group{width: 100%;margin-right: 0}
.ind_series .pic figure{border-radius: var(--br20)}
}

.ind_quality {padding: 8.854% 0}
.ind_quality .title{text-align: center; padding-bottom: 3%}
.ind_quality .title h3 {font-size: var(--f40); padding: 0; margin: 0; font-weight: normal; color:  var(--color-blue)}
.ind_quality .title h3 span{color:  var(--color-333); padding-right: .4rem}
.ind_quality .info h4{font-size:  var(--f30); padding-bottom:1.5%}
.ind_quality .info p{font-size:  var(--f20)}
.ind_quality .info:last-child{text-align: right}
.ind_quality .photo{padding: 5.2% 0}
.ind_quality .photo ul{gap:5%}

.ind_quality .swiper-pagination{position: initial}

@media(min-width:1024px){
.ind_quality .title h3{font-size: calc(70/1920*100vw)}
.ind_quality .info h4{font-size: calc(50/1920*100vw)}
}
@media(max-width:1024px){
.ind_quality .photo ul li{width: 20%}
}
@media(max-width:640px){
.ind_quality .photo ul{gap:0}
.ind_quality .photo ul li{width:50%;padding:5%}
.ind_quality .title h3{font-size: var(--f30);}
.ind_quality .info h4{font-size: var(--f24);}
}

.ind_news {padding-bottom: 5%}
.ind_news .column_title h3{font-size: var(--f30); font-weight: normal; padding: 0; margin: 0}
.ind_news .left_menu{width: 1.5rem;font-size:  var(--f20); padding-top: 5%}
.ind_news .tab_title{padding: 50% 0; font-weight: 300}
.ind_news .tab_title ul{border-left: solid 1px #cccccc; line-height: .4rem;}
.ind_news .tab_title li:not(:last-child){margin-bottom:20%}
.ind_news .tab_title li a{display: block;padding-left: 20%;border-left: solid 4px transparent;transform: translateX(-1px); cursor: pointer}
.ind_news .tab_title li.show a{border-left-color: var(--color-blue);color: var(--color-blue)}
.ind_news .more a{display: block;line-height: .5rem; text-align:center;background: var(--color-blue); color: var(--color-fff); border-radius: var(--br50);transition: 0.5s}
.ind_news .more a:hover{background: --color-bluehover}
.ind_news .tab_group{width:calc(95% - 1.5rem); max-width: 12.4rem}
.ind_news .swiper {width: 113%}
.ind_news .swiper-slide{background: #f9f9f9}
.ind_news .info{padding:.25rem .5rem;line-height: .30rem;  position: relative; overflow: hidden}
.ind_news .info:before{content: '';position: absolute;width: .5rem; height: .5rem;background: var(--color-blue); border-radius: 100%;left: -.35rem;}
.ind_news .info h4{font-size: var(--f22); height: .6rem;}
.ind_news .info p{color: var(--color-666); margin: .15rem 0; height: .6rem}
.ind_news .info time{color: var(--color-999)}
.ind_news .pic figure{padding-bottom: 65.5%}
.ind_news .swiper-other .arrow{border: none}
.ind_news .swiper-other .swiper-pagination{opacity: 0}
.ind_news .swiper-other .swiper-pagination span{padding: 0}
@media(max-width:768px){
.ind_news .left_menu{width: 100%;position: relative; padding-top: 0}
.ind_news .more{position: absolute; right: 0; top:0; width: 30%}
.ind_news .tab_title{padding: 3% 0}
.ind_news .tab_title ul{display: flex; border: none}
.ind_news .tab_title li{flex: 1; margin: 0!important; padding: .1%}
.ind_news .tab_title li a{background:#f9f9f9; border-radius:.2rem; padding: 0;text-align: center;}
.ind_news .tab_title li.show a{background:var(--color-blue); color: var(--color-fff)}
.ind_news .tab_group{width: 100%}
.ind_news .swiper{width: 100%}

}




.root-swiperVideo .Ispic{height: 100vh;}
.root-swiperVideo .video-inner,
.root-swiperVideo .video-box, 
.root-swiperVideo .video-box video{position: absolute; left: 0;top: 0;width: 100%;height: 100%;}
.root-swiperVideo .video-box video{object-fit: cover;}
.root-swiperVideo .video-inner{z-index: 10;}
.root-swiperVideo .video-box{background-color: var(--black);z-index: 5;}
.root-swiperVideo .open-video{position: absolute; width: 100%; height: 100%;left: 0;top: 0;z-index: 1;visibility: hidden;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNzM3NjE1OTM2NDQwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwODUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjIxOTkiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjExLjkxNDA2MjUiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTQ2LjkwNDIyOCAxOC4xMDU3M2MtMjc3Ljc2OTE4IDAtNTAyLjk0NTI5IDIyNS4xNzYxMS01MDIuOTQ1MjkgNTAyLjk0NTI5IDAgMjc3Ljc3MTY0IDIyNS4xNzQ4OCA1MDIuOTQ3NzUgNTAyLjk0NTI5IDUwMi45NDc3NSAyNzcuNzY3OTUgMCA1MDIuOTQ1MjktMjI1LjE3NjExIDUwMi45NDUyOS01MDIuOTQ3NzVDMTA0OS44NDk1MTggMjQzLjI4MzA3IDgyNC42NzIxNzggMTguMTA1NzMgNTQ2LjkwNDIyOCAxOC4xMDU3M0w1NDYuOTA0MjI4IDE4LjEwNTczek01NDYuOTA0MjI4IDk3My43MDE2NTljLTI0OS45OTI2MzEgMC00NTIuNjUxODY4LTIwMi42NTkyMzctNDUyLjY1MTg2OC00NTIuNjUxODY4IDAtMjQ5Ljk5MDE3MiAyMDIuNjU5MjM3LTQ1Mi42NDk0MDggNDUyLjY1MTg2OC00NTIuNjQ5NDA4czQ1Mi42NTA2MzggMjAyLjY1OTIzNyA0NTIuNjUwNjM4IDQ1Mi42NDk0MDhDOTk5LjU1NDg2NiA3NzEuMDQyNDIyIDc5Ni44OTY4NTkgOTczLjcwMTY1OSA1NDYuOTA0MjI4IDk3My43MDE2NTlMNTQ2LjkwNDIyOCA5NzMuNzAxNjU5ek03NzUuMjAzOTI0IDQ4NS40MDY0NzhjLTc4LjI2Nzk2Mi01My4yNTU5MS0yMjAuMTkxOS0xMzIuOTY3NjA4LTMwMS4wMDQyMzItMTgyLjM1ODM4OC0zMy4xMzIxNDYtMjAuODkzNTkyLTYwLjk5MzU0OS0xMi41MDI5NTItNjMuNjY3MDQzIDI0LjM5OTYzMy0xLjkzODA5OSA5OC44NDA1ODggMCAyODkuNTUwMjY0IDAgMzkwLjEwMTQ0NSAxLjY4MTA3OSAzNy40NjIxMjUgMzQuNzA5OTI2IDQyLjQwMzI5MyA2My4zNzU1OSAyNy4zNjIxMjEgODAuNzIxMzMtNDguOTA2MjU1IDIxOS40NTY1MDUtMTMyLjk1Nzc3IDMwMC41ODg1NzQtMTgyLjExMjQzNkM3NzMuOTY4MDE3IDU2Mi40NzY2NTYgODM2LjA5Nzg2MiA1MjguMzA1MzY0IDc3NS4yMDM5MjQgNDg1LjQwNjQ3OEw3NzUuMjAzOTI0IDQ4NS40MDY0Nzh6IiBmaWxsPSIjZmZmZmZmIiBwLWlkPSIyMjAwIj48L3BhdGg+PC9zdmc+) no-repeat center center; background-size: 0.5rem auto;}
@media (max-width:1024px) {
  .root-swiperVideo .swiper-wrapper,
  .root-swiperVideo .swiper-slide{height: auto;}
  .root-swiperVideo .open-video{z-index: 10;visibility: visible;}
  .root-swiperVideo .video-box{opacity: 0;visibility: hidden;transition: 0.3s;}
  .root-swiperVideo .video-inner.active .open-video{visibility: hidden;}
  .root-swiperVideo .video-inner.active .video-box{opacity: 1;visibility: visible;}
}
