/*
 *  public.css by 453883682@qq.com
 */
.wow { transition-delay: 0.3s;}
.pc { display: block;}
.mob { display: none;}
.wrap{ width: 96%; max-width: 1630px; padding: 0 15px; margin: 0 auto;}
.wrap-1320{ max-width: 1350px;}

.header { position: fixed; left: 0; right: 0; top: 0; min-width: 320px; z-index: 10; color: #FFFFFF; transition: all .3s;}
.header.no-show{ transform: translateY(-100%);}
.header .wrap{ max-width: 1750px;}
.logo { position: relative; float: left; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100px; overflow: hidden; transition: all 1s;}
.logo a { display: block; transition: all .3s;}
.logo img { height: 39px; transition: all .3s;}
.logo img.white{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); opacity: 0; visibility: hidden;}

.navBox{ margin: 0 auto; text-align: center;}
.navList { list-style: none; margin: 0; font-size: 0; display: inline-block; vertical-align: top; text-align: center; transition: all .3s;}
.navList > li { position: relative; display: inline-block; vertical-align: top;}
.navList > li > a { position: relative; display: block; line-height: 100px; font-size: 18px; color: var(--title-color); padding: 0 .3rem; font-weight: bold; transition: all .3s;}
/* .navList > li > a:hover,
.navList > li.cur > a,
.navList > li.active > a{ color: var(--main-color);} */
.navSecond{ list-style: none; position: absolute; left: 0%; top: auto; margin-top: -20px; min-width: 100%; background-color: #FFFFFF; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 15px; padding: 20px 30px; display: none; text-align: left;}
.navSecond li{ font-size: 16px; line-height: 1.8; margin: .1rem 0;}
.navSecond a { display: block; color: var(--title-color); white-space: nowrap; transition: all .3s;}
.navSecond a:hover{ color: var(--main-color);}


.navRig { position: relative; float: right; line-height: 100px; text-align: right; font-size: 0; transition: all .3s;}
.navRig > li { position: relative; display: inline-block; vertical-align: middle; font-size: 14px;}
.navRig > li + li{ margin-left: .2rem;}
.navRig a,
.navRig i,
.navRig span { display: inline-block; vertical-align: middle;}
.navVideo{ width: 100px; height: 30px; line-height: 30px; font-size: 14px; color: #FFFFFF; background: var(--hover-color); border-radius: 15px; text-align: center; transition: all .3s;}
.navVideo a{ color: #FFFFFF;}
.navVideo:hover{ background-color: var(--main-color);}
.navLang p{ position: relative; width: 80px; height: 30px; line-height: 30px; font-size: 14px; color: var(--title-color); background-color: #FFFFFF; border-radius: 15px; text-align: center; cursor: pointer; z-index: 2;}
.navLang i{ width: 14px; height: 14px; margin-left: 14px; background: url(../images/icon-lang.png) center center no-repeat; background-size: contain;}
.navRigCon{ position: absolute; left: 0; top: 0; width: 100%; padding-top: 30px; background-color: #FFFFFF; border-radius: 15px; text-align: center; display: none;}
.navRigCon a{ display: block; font-size: 14px; color: var(--title-color); line-height: 1; padding: 13px 0;}
.navRigCon a:hover{ color: var(--main-color);}

.navRig li.navBtn { display: none; cursor: pointer;}
.navBtn span { position: relative; width: 22px; height: 30px;}
.navBtn span b { display: block; width: 100%; height: 2px; background-color: var(--title-color); position: absolute; left: 0; top: calc((100% - 4px) / 2); transition: all .3s;}
.navBtn span b:nth-child(1) { transform: translateY(6px) rotate(0deg);}
.navBtn span b:nth-child(3) { transform: translateY(-6px) rotate(0deg);}
.navBtn.active b:nth-child(1) { transform: translateY(0) rotate(45deg);}
.navBtn.active b:nth-child(3) { transform: translateY(0) rotate(-45deg);}
.navBtn.active b:nth-child(2) { opacity: 0;}

/* 导航白色，语言半透明 */
.header.white img.default{ opacity: 0; visibility: hidden;}
.header.white img.white{ opacity: 1; visibility: visible;}
.header.white .navList > li > a{ color: #FFFFFF;}
.header.white .navLang p{ color: #FFFFFF; background-color: rgba(255, 255, 255, 0.2);}
.header.white .navLang i{ background-image: url(../images/icon-lang-white.png);}
.header.white .navRigCon{ background-color: rgba(255, 255, 255, 0.2);}
.header.white .navRigCon a{ color: #FFFFFF;}
.header.white .navBtn span b{ background-color: #FFFFFF;}

/* 语言灰色 */
.header.load .navLang p{ background-color: #F4F4F4;}
.header.load .navRigCon{ background-color: #F4F4F4;}

/* 语言半透明 */
.header.lang-transparent .navLang p{ color: #FFFFFF; background-color: rgba(255, 255, 255, 0.2);}
.header.lang-transparent .navLang i{ background-image: url(../images/icon-lang-white.png);}
.header.lang-transparent .navRigCon{ background-color: rgba(255, 255, 255, 0.2);}
.header.lang-transparent .navRigCon a{ color: #FFFFFF;}

/* 白色背景 */
.header.nav-open,
.header.bg{ top: 0; color: var(--title-color); background-color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}
.header.nav-open .logo .white,
.header.bg .logo .white{ display: none;}
.header.nav-open .logo .default,
.header.bg .logo .default{ display: block; opacity: 1; visibility: visible;}
.header.nav-open .navBtn span b,
.header.bg .navBtn span b{ background: var(--title-color);}
.header.nav-open .navBtn:hover,
.header.bg .navBtn:hover{ color: var(--main-color);}
.header.nav-open .navBtn:hover span b,
.header.bg .navBtn:hover span b{ background: var(--main-color);}
.header.nav-open .navLang p,
.header.bg .navLang p{ background-color: #F4F4F4; color: var(--title-color);}
.header.nav-open .navLang i,
.header.bg .navLang i{ background-image: url(../images/icon-lang.png);}
.header.nav-open .navRigCon,
.header.bg .navRigCon{ background-color: #F4F4F4;}
.header.nav-open .navList > li > a,
.header.bg .navList > li > a{ color: var(--title-color);}
.header.nav-open .navRigCon a,
.header.bg .navRigCon a{ color: var(--title-color);}

.header.sticky{ position: sticky; position: -webkit-sticky; background-color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}


/* footer */
.footBg{ position: relative; color: #FFFFFF; line-height: 1.8; z-index: 1; overflow: hidden;}
.footBg a{ color: #FFFFFF;}
.footBg a:hover{ color: #FFFFFF;}
.ftLine{ position: relative; height: 30px; background: url(../images/foot-top.png) center bottom #F2F5FA no-repeat; overflow: hidden; margin-bottom: -1px; overflow: hidden;}
.ftLine::before,
.ftLine::after{ display: block; content: ""; position: absolute; top: 0; width: 100vw; height: 100%; background-color: var(--main-color);}
.ftLine::before{ right: 60%;}
.ftLine::after{ left: 60%;}
.footBox{ background: var(--main-color);}
.ftTop{ position: relative; display: flex; align-items: center; justify-content: center; padding: .3rem 0 .5rem; gap: .7rem;}
.ftTop > div{ position: relative;}
.ftTop > div + div::before{ display: block; content: ""; position: absolute; left: -.35rem; top: 10%; width: 1px; height: 80%; max-height: 36px; background-color: #FFFFFF; opacity: .2;}
.ftLogo{ max-width: 180px;}
.ftLogo img{ max-width: 100%; max-height: 39px;}
.ftBai img{ max-width: 100%; max-height: 40px;}
.slogan{ line-height: 1.5; font-weight: bold;}

.ftCen{ padding: .4rem 0 .2rem; border-top: 1px solid rgba(255, 255, 255, 0.2); border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
.ftLef{ flex-shrink: 0; width: 500px; max-width: 32%; margin-right: 2%;}
.ftTel{ line-height: 40px; padding-left: 50px; margin: .3rem 0 .2rem; background: url(../images/icon-tel.png) left center no-repeat; background-size: 40px auto;}
.ftText{ line-height: 30px;}
.ftText p{ position: relative; padding-left: 40px; background-position: 10px 7px; background-repeat: no-repeat; background-size: 16px auto;}
.ftPhone{ background-image: url(../images/icon-phone.png);}
.ftAddress{ background-image: url(../images/icon-address.png);}

.ftRig{ flex: auto; margin-left: auto;}
.ftNav{ list-style: none; flex: auto; display: flex; justify-content: space-between; overflow: hidden;}
.ftNav li{ margin-bottom: 15px;}
.ftNav li + li{ padding-left: 0.3rem;}
.ftNav h3{ font-size: 18px; margin: 0 0 .15rem;}
.ftCon{ font-size: 14px;}
.ftCon p{ line-height: 1.4; margin: .1rem 0;}
.ftCon p a{ color: rgba(255, 255, 255, .5); transition: all .3s;}

.ftBot{ display: flex; justify-content: space-between; padding: .2rem 0;}
.copyright{ flex: auto; opacity: .8; overflow: hidden;}
.shareList{ list-style: none; margin-left: .24rem;}
.shareList li{ position: relative;}
.shareList li span{ color: rgba(255, 255, 255, .8); cursor: pointer;}
.shareList li span img{ width: 16px; vertical-align: middle; margin-right: 5px;}
.shareWx{ position: absolute; left: 50%; transform: translateX(-50%); bottom: 100%; width: 120px; background-color: #FFFFFF; margin-bottom: 15px; opacity: 0; visibility: hidden; transition: all .3s;}
.shareWx::before{ display: block; content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: 0; height: 0; border-top: 6px solid #FFFFFF; border-left: 6px solid transparent; border-right: 6px solid transparent;}
.shareWx img{ width: 100%; height: 100%;}
.shareList li:hover .shareWx{ opacity: 1; visibility: visible; margin-bottom: 10px;}

/* 圆形-进度 */
.circle{ width: 50%; height: 100%; position: absolute; top: 0; overflow: hidden;}
.circle span{ width: 200%; height: 100%; border: 2px solid transparent; border-radius: 50%; position: absolute; top: 0; transform: rotate(-135deg);}
.cleLef{ left: 0;}
.cirLef span { border-bottom: 2px solid #FFFFFF; border-left: 2px solid #FFFFFF; left: 0px;}
.cirRig{ right: 0;}
.cirRig span { border-top: 2px solid #FFFFFF; border-right: 2px solid #FFFFFF; right: 0px;}
.cirAni.active .cirLef span { animation: circle_right 5s linear 1 forwards;}
.cirAni.active .cirRig span { animation: circle_left 5s linear 1 forwards;}


/* 页码 */
.page{ padding: .7rem 0 0; text-align: center;}
.page p,
.page input,
.page a,
.page span{ display: inline-block; vertical-align: middle; text-align: center; min-width: 26px; padding: .02rem 0; line-height: 24px; font-size: 12px; color: var(--title-color); margin: 0 .02rem; border-radius: 2px;}
.page a:hover,
.page a.active{ background-color: var(--hover-color); color: #FFFFFF;}
.page a.prev,
.page a.next,
.page a.first,
.page a.last{ width: 26px; height: 26px; line-height: 26px; transition: all .3s;}
.page a.last i{ display: inline-block; vertical-align: middle; transform: scaleX(-1); font-weight: bold;}
.page a.prev:hover,
.page a.next:hover,
.page a.first:hover,
.page a.last:hover{ border-color: var(--main-color); color: var(--main-color);}
.page a i{ color: var(--text-color); font-weight: bold;}
.page p{ margin: 0 .15rem;}
.page input{ width: 42px; border: 1px solid #f0f0f0; border-radius: 4px; line-height: 24px; margin-top: -4px; color: #999999;}


.innerBg{ position: relative; font-size: 16px; color: #5c5c5c; line-height: 1.5; z-index: 1; min-height: calc(100vh - 640px); background-color: #FFFFFF;}
.inner{ width: 96%; max-width: 1350px; padding: 0 15px; margin: 0 auto;}

/* sort */
.sortBg{ position: absolute; left: 0; bottom: .25rem; width: 100%; z-index: 2; overflow: hidden;}
.sort{ flex-wrap: wrap;}
.sortList{ flex: auto; list-style: none; display: flex; flex-wrap: wrap; justify-content: flex-end; margin: 0 -.05rem; font-weight: bold;}
.sortList li{ padding: 0 .05rem;}
.sortList li a{ position: relative; display: block; min-width: 1rem; line-height: 36px; font-size: 16px; color: #FFFFFF; padding: 0 .15rem; border-radius: 30px; background-color: rgba(255, 255, 255, 0.2); text-align: center; transition: all .3s;}
/* .sortList li a::after{ display: block; content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background-color: var(--main-color);} */
.sortList li:not(.active) a:hover{ background-color: var(--hover-color);}
.sortList li.active a{ background-color: var(--hover-color);}
/* .sortList li.active a::after{ width: 100%;} */
.sortSearch{ position: relative; flex-shrink: 0;}
.sortSearch input{ display: block; width: 350px; background-color: #F8F8F8; height: calc(.2rem + 30px); line-height: 30px; padding-left: 48px; border: none; border-radius: 8px;}
.sortSearch .button{ position: absolute; left: 0; top: 0; line-height: calc(.2rem + 30px); width: 48px; font-size: 20px; color: #999999; text-align: center; cursor: pointer;}

/* breadNav */
.breadNav{ list-style: none; font-size: 0; color: #FFFFFF;}
.breadNav li{ position: relative; display: inline-flex; align-items: center; font-size: 16px;}
.breadNav li a{ display: block; color: #FFFFFF; max-width: 25vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.breadNav li span{ display: block; width: 20px; height: 20px; background: url(../images/icon-home.png) center center no-repeat; background-size: contain;}
.breadNav li + li::before{ display: block; content: ""; width: 16px; height: 16px; margin: 0 5px; background: url(../images/icon-arrow-right.png) right center no-repeat; background-size: cover;}
.breadNav li a:hover{ text-decoration: underline;}
.breadNav li i{ display: block; max-width: 25vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal;}

.innerBg .sortBg{ position: sticky; position: -webkit-sticky; top: 100px; background-color: #FFFFFF; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);}
.innerBg .sortBg .breadNav{ color: var(--title-color); padding: .13rem 0;}
.innerBg .sortBg .breadNav li + li::before{ background-image: url(../images/icon-arrow-right-gray.png); opacity: .8;}
.innerBg .sortBg .breadNav li a{ color: var(--text-color);}
.innerBg .sortBg .breadNav li span{ background-image: url(../images/icon-home-blue.png);}
.innerBg .sortList{ margin: 0 -.27rem;}
.innerBg .sortList li{ padding: 0 .27rem;}
.innerBg .sortList li a{ min-width: 0; color: var(--title-color); line-height: 30px; padding: .1rem 0; border-radius: 0;}
.innerBg .sortList li.active a{ background-color: transparent; color: var(--main-color); box-shadow: 0 -4px 0 0 var(--main-color) inset;}
.innerBg .sortList li:not(.active) a:hover{ background-color: transparent; color: var(--main-color);}

.pro-sortBg .sort{ display: block;}
.pro-sortBg .sortList{ justify-content: flex-start; border-top: 1px solid rgba(255, 255, 255, 0.3); padding-top: .25rem; margin-top: .25rem;}

/* playBtn */
.playBtn{ position: relative; cursor: pointer;}
.playBtn::after{ display: block; content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 108px; height: 108px; max-width: 1.1rem; max-height: 1.1rem; background: url(../images/icon-play.png) center center no-repeat; background-size: cover;}


/* video */
.videoBg{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 11; display: none;}
.videoBox{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-45%); width: 1000px; max-width: 90%; border: 6px solid #FFFFFF; border-radius: 4px;    margin: 0 auto;}
.videoBox .close{ position: absolute; right: 0; bottom: calc(100% + 10px); font-size: 28px; line-height: 1; opacity: .8; color: #FFFFFF; cursor: pointer; transition: all .4s;}
.videoBox .close:hover{ opacity: 1;}
.videoBox video{ display: block; width: 100%; height: 100%; object-fit: cover;}


@media (max-width:1600px) {
    .wrap{ padding: 0 30px;}
    
    .ftNav h3{ font-size: 18px;}
    .ftCon{ font-size: 14px;}
    .ftBot{ padding: .2rem 0;}
    
    .innerBg{ font-size: 15px;}
    .breadNav li{ font-size: 14px;}
    .sortList li a{ font-size: 14px;}
}
@media (max-width:1400px) {
    .navList > li > a{ font-size: 16px;}

    .innerBg{ font-size: 14px;}
}
@media (min-width:1201px) {
    .navBox{ display: block !important;}
}
@media (max-width:1200px) {
    .header.no-show{ transform: translateY(0);}
    .header .wrap{ width: 100%; max-width: 100%;}
    .logo{ height: 60px;}
    .logo img{ height: 30px;}

    .navRig { position: static; line-height: 60px; margin: 0;}
    .navRig li.navBtn{ display: inline-block;}

    .navBox { position: fixed; left: 0; right: 0; top: 60px; bottom: 0; width: 100%; overflow: hidden; z-index: 2; border-top: 1px solid rgba(0, 0, 0, 0.2); background-color: #FFFFFF; display: none;}
    
    .navList { text-align: left; display: block; padding: .3rem; margin: 0 auto; }
    .navList > li { display: block; margin: 0; padding: 0; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06);}
    .navList > li > a { position: relative; height: auto; font-size: 16px; line-height: 46px; padding: 0 !important; padding-right: 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
    .navList > li > a > span::before{ display: none;}
    .navList > li > a .icon{ width: 14px; height: 14px; vertical-align: text-bottom;}
    .navList > li:last-child > a{ border-bottom: none;}
    .navList > li > a:hover,
    .navList > li.active > a{ color: var(--main-color); }
    .navList > li > a::before { display: none;}
    .navList li.dropdown > a::after { display: block; content: "\e65e"; position: absolute; right: 0; top: 0; font-family: "iconfont" !important; text-align: center; font-size: 14px; transition: all .3s;}
    .navList li.cur > a::after { transform: rotate(180deg);}
    .navSecond{ position: static; padding: 15px; margin: 0 0 15px; border-radius: 8px;}
    .navSecond > li{ display: block; padding: 0; font-size: 14px;}


    .ftTop{ padding: .2rem 0;}
    .ftCen{ display: block; padding: .5rem 0;}
    .ftLef{ width: 100%; max-width: 100%; margin: 0 0 .5rem;}
    .ftRig{ max-width: 100%; margin: .3rem 0 0;}
    .ftNav li{ margin-bottom: 0;}
    .ftBot{ display: block; text-align: center; }
    .shareList{ display: none;}

    .inner{ width: 100%; padding: 0 .3rem;}

    .sortBg{ position: static; background-color: var(--main-color); padding: .2rem 0;}
    .sort{ display: block;}
    .sortList{ justify-content: center;}
    .sortList li{ margin-top: .1rem;}
    .sortList li a{ font-size: 14px; line-height: 24px; padding: .08rem .2rem;}

    .innerBg .sortBg{ top: 60px; padding-bottom: 0; position: static;}
    .innerBg .sortBg .breadNav{ padding: 0; margin-bottom: .1rem;}
    .innerBg .sortList{ margin: 0 -.1rem;}
    .innerBg .sortList li{ padding: 0 .1rem;}
    .innerBg .sortList li a{ line-height: 24px;}
    .innerBg .sortList li.active a{ box-shadow: 0 -2px 0 0 var(--main-color) inset;}

    .pro-sortBg .sortList{ padding-top: .1rem; margin-top: .2rem;}
    
}

@media (max-width:991px) {
    .wrap{ padding: 0 .3rem;}


    .ftTop{ flex-wrap: wrap; gap: 0;}
    .ftLogo,
    .ftBai{ width: 230px; max-width: 40%;}
    .ftLogo{ margin-right: .2rem; text-align: right;}
    .ftBai{ margin-left: .2rem;}
    .ftTop > div + div::before{ left: -.2rem;}
    .slogan{ width: 100%; font-size: .24rem; margin-top: .2rem; text-align: center;}
    .slogan::before{ display: none !important;}
    .slogan p{ display: inline;}
    .ftNav h3{ margin-bottom: 0;}
    .ftCon{ display: none;}
    
}
@media (max-width:767px) {
    .wrap{ width: 100%; max-width: 100%;}

}

@media (max-width:640px) {
    .page{ padding: .6rem 0;}
    .page p{ display: block; margin: .2rem 0;}
    .page p,
    .page input,
    .page a,
    .page span{ font-size: 14px; min-width: 24px; line-height: 20px;}
    .page a.prev,
    .page a.next,
    .page a.first,
    .page a.last{ width: 30px; height: 30px; line-height: 26px; font-size: 12px;}
}
@media (max-width:460px) {
    .logo img{ height: 26px;}

    .navRig > li{ font-size: 12px;}
    .navVideo{ width: fit-content; padding: 0 .2rem;}
    .navLang p{ display: flex; justify-content: center; align-items: center; width: fit-content; min-width: 30px;}
    .navLang span{ display: none;}
    .navLang i{ margin: 0;}
    .navRigCon a{ font-size: 12px; padding: 0 5px 5px;}

    .slogan{ font-size: .28rem;}
    .ftTel{ padding-left: 36px; line-height: 36px; background-size: 30px auto;}
    .ftText p{ padding-left: 36px; background-position: 8px 7px;}
    .ftNav h3{ font-size: .24rem;}
    .copyright{ text-align: left;}
    .copyright a{ display: block;}
     
    .sortBg{ top: 50px;}
}