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

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

.nav-box{ margin: 0 auto; text-align: right;}
.nav-list { list-style: none; margin: 0; font-size: 0; display: inline-block; vertical-align: top; padding: 0 .2rem; text-align: center; transition: all .3s;}
.nav-list > li { position: relative; display: inline-block; vertical-align: top;}
.nav-list > li > a { position: relative; display: block; line-height: 120px; font-size: 22px; color: var(--title-color); padding: 0 .2rem; opacity: 0.6; font-weight: bold; transition: all .3s;}
/* .nav-list > li > a::before{ display: block; content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background-color: #FFFFFF; transform: scale(0); visibility: hidden; transition: all .3s;}
.nav-list > li > a:hover::before{ transform: scale(1); visibility: visible;} */
.nav-list > li.active > a,
.nav-list > li.cur > a,
.nav-list > li > a:hover{ opacity: 1;}

.nav-second{ position: absolute; left: 0; top: auto; font-size: 20px; color: #FFFFFF; line-height: 30px; white-space: nowrap; display: none;}
.nav-sub{ padding: 35px 0; padding-left: .2rem;}
.nav-sub li{ margin-right: .6rem;}
.nav-sub li:last-child{ margin-right: 0;}
.nav-sub li a{ color: #FFFFFF; opacity: .6; font-weight: bold; transition: all .3s;}
.nav-sub li a:hover{ opacity: 1;}
.nav-mask{ position: absolute; left: 0%; top: auto; width: 100%; background-color: rgba(0, 0, 0, 0.2); z-index: -1;}

.nav-right { list-style: none; position: relative; float: right; line-height: 120px; text-align: right; font-size: 0; border-left: 1px solid rgba(255, 255, 255, .2); transition: all .3s;}
.nav-right > li { position: relative; display: inline-block; vertical-align: middle; font-size: 14px; height: 120px; margin-left: .6rem;}
.nav-right a,
.nav-right i,
.nav-right span,
.nav-right button { display: inline-block; vertical-align: middle; cursor: pointer;}
.nav-search > button,
.nav-search > span{ border: none; width: 30px; height: 30px; background: url(../images/icon-search-white.png) center center no-repeat; background-size: contain;}
.nav-lang > span{ width: 30px; height: 30px; background: url(../images/icon-lang-white.png) center center no-repeat; background-size: contain;}
.nav-rightCon{ position: absolute; left: 50%; transform: translateX(-50%); top: 100%; display: none;}
.lang-list{ min-width: 128px; white-space: nowrap; line-height: 1.8; text-align: center;}
.lang-list li{ margin: .1rem 0;}
.lang-list li a{ display: block; transition: all .3s linear;}
.lang-list li a:hover{ color: var(--main-color);}


.nav-search-con{ display: inline-block; vertical-align: middle; width: 0; height: 100%; transition: all .3s;}
.nav-search-input{ display: block; width: 100%; height: 100%; background-color: transparent; border: none;}
.nav-search-input::placeholder{ color: #FFFFFF; opacity: .3;}
.nav-search-input:-moz-placeholder{ color: #FFFFFF; opacity: .3;}
.nav-search-input::-moz-placeholder{ color: #FFFFFF; opacity: .3;}
.nav-search-input:-ms-input-placeholder{ color: #FFFFFF; opacity: .3;}
.nav-search-input::-webkit-input-placeholder{ color: #FFFFFF; opacity: .3;}
.nav-right .nav-search-btn{ display: none;}

.nav-right > li.nav-search.cur{ margin-left: .2rem;}
.nav-right > li.cur .nav-search-con{ width: 180px;}

.nav-right li.nav-btn { display: none; cursor: pointer;}
.nav-btn span { position: relative; width: 22px; height: 30px;}
.nav-btn span b { display: block; width: 100%; height: 2px; background-color: #FFFFFF; position: absolute; left: 0; top: calc((100% - 4px) / 2); transition: all .3s;}
.nav-btn span b:nth-child(1) { transform: translateY(6px) rotate(0deg);}
.nav-btn span b:nth-child(3) { transform: translateY(-6px) rotate(0deg);}
.nav-btn.active b:nth-child(1) { transform: translateY(0) rotate(45deg);}
.nav-btn.active b:nth-child(3) { transform: translateY(0) rotate(-45deg);}
.nav-btn.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 .nav-list > li > a{ color: #FFFFFF;}
.header.white .nav-lang p{ color: #FFFFFF; background-color: rgba(255, 255, 255, 0.2);}
.header.white .nav-lang i{ background-image: url(../images/icon-lang-white.png);}
.header.white .nav-rightCon{ background-color: rgba(255, 255, 255, 1);}
.header.white .nav-rightCon a{ color: #000000;}
.header.white .nav-rightCon a:hover{ color: var(--main-color);}
.header.white .nav-btn span b{ background-color: #FFFFFF;}

/* 白色背景 */
.header.bg{ top: 0; color: var(--title-color); background-color: #FFFFFF; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}
.header.bg .logo { height: 80px;}
.header.bg .logo img{ height: 50px;}
.header.bg .logo .white{ display: none;}
.header.bg .logo .default{ display: block; opacity: 1; visibility: visible;}
.header.bg .nav-right{ line-height: 80px; border-left-color: rgba(0, 0, 0, 0.1);}
.header.bg .nav-right > li{ height: 80px; margin-left: .3rem;}
.header.bg .nav-search > button,
.header.bg .nav-search > span{ transform: scale(0.8); background-image: url(../images/icon-search.png);}
.header.bg .nav-search-input{ color: #000000;}
.header.bg .nav-search-input::placeholder{ color: #000000;}
.header.bg .nav-search-input:-moz-placeholder{ color: #000000;}
.header.bg .nav-search-input::-moz-placeholder{ color: #000000;}
.header.bg .nav-search-input:-ms-input-placeholder{ color: #000000;}
.header.bg .nav-search-input::-webkit-input-placeholder{ color: #000000;}
.header.bg .nav-lang > span{ transform: scale(0.8); background-image: url(../images/icon-lang.png);}
.header.bg .nav-list > li > a{ font-size: 18px; color: var(--title-color); line-height: 80px; opacity: 1;}
.header.bg .nav-list > li > a::before{ background-color: var(--main-color);}
.header.bg .nav-list > li.active > a,
.header.bg .nav-list > li.cur > a,
.header.bg .nav-list > li > a:hover{ color: var(--main-color);}
.header.bg .nav-sub{ padding: 15px 0; padding-left: .2rem;}
.header.bg .nav-sub li a{ font-size: 16px;}

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


/* footer */
.foot-bg{ position: relative; color: #000000; line-height: 1.8; background-color: #FFFFFF; z-index: 2;}
.foot-bg a{ color: #000000;}
.foot-bg a:hover{ color: var(--main-color);}
.foot-bg .top{ position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 74px; height: 74px; max-width: .8rem; max-height: .8rem; border-radius: 50%; background: url(../images/icon-top.png) center center var(--main-color) no-repeat; background-size: contain; cursor: pointer; z-index: 1; transition: all .3s;}
.foot-bg .top:hover{ transform: translate(-50%,-50%) scale(0.9); background-color: var(--hover-color);}

.foot-top{ position: relative; padding: 1rem 0 .6rem;}
.foot-line{ position: absolute; width: 100%; height: 8px; max-height: .08rem;}
.foot-line .org{ position: absolute; right: 0%; width: 0%; height: 100%; bottom: 100%; background: url(../images/line-org.png) left center no-repeat; background-size: 100% 100%;}
.foot-line .blue{ width: 0%; height: 100%; background: url(../images/line-blue.png) right center no-repeat; background-size: 100% 100%;}

.foot-nav{ list-style: none; flex: auto; max-width: 1294px; display: flex; justify-content: space-between; overflow: hidden;}
.foot-nav li{ margin-bottom: 15px;}
.foot-nav li + li{ padding-left: 0.3rem;}
.foot-nav h3{ margin: 0 0 .25rem;}
.foot-nav h3 a{ transition: all .3s;}
.foot-con p{ line-height: 1.6; margin: .1rem 0;}
.foot-con p a{ color: rgba(0, 0, 0, .6); transition: all .3s;}

.foot-right{ flex-shrink: 0; margin-left: 5%;}
.foot-logo{ max-width: 224px; margin-bottom: .3rem; margin-left: auto;}
.foot-logo img{ max-width: 100%; max-height: 1rem;}
.foot-wechat{ max-width: 142px; margin-left: auto; text-align: center;}
.foot-wechat img{ max-width: 100%; height: auto;}
.foot-wechat p{ opacity: .6;}

.foot-bot{ display: flex; align-items: center; justify-content: space-between; padding: .3rem 0 .4rem; border-top: 1px solid rgba(0, 0, 0, 0.1);}
.copyright{ flex: auto; color: rgba(0, 0, 0, .5); overflow: hidden;}
.foot-bot .link{ display: flex; gap: .2rem;}
.foot-bot .link a{ position: relative; display: block; color: rgba(0, 0, 0, .5); transition: all .3s;}
.foot-bot .link a::before{ display: block; content: ""; position: absolute; left: -.1rem; top: 50%; margin-top: -8px; width: 1px; height: 16px; background-color: rgba(0, 0, 0, .5);}
.foot-bot .link a:first-child::before{ display: none;}
.foot-bot .link a:hover{ color: var(--main-color);}
 

.box-more .flex{ width: 190px; height: 61px; padding: 0 25px; background: var(--main-color); border-radius: 31px; transition: all .3s;}
.box-more .flex i{ display: block; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; text-align: center; transition: all .3s;}
.box-more .flex:hover{ background: var(--hover-color);}
.box-more .flex:hover i{ background-color: #FFFFFF; color: var(--main-color); font-size: 80%; transform: translateX(25%);}
.box-more.text-center .flex{ margin: 0 auto;}

.box-more.white .flex{ background-color: #FFFFFF;}
.box-more.white .flex:hover i{ background-color: var(--hover-color); color: #FFFFFF;}


.share-list{ list-style: none; margin-left: .24rem;}
.share-list li{ position: relative; margin-left: 22px;}
.share-list li span{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 98px; height: 98px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .16);  cursor: pointer; transition: all .3s;}
.share-list li span img{ display: block; width: 50px; height: 50px; opacity: .3;}
.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%;}
.share-list li:hover span{ border-color: #FFFFFF; transform: scale(0.8);}
.share-list li:hover span img{ opacity: 1;}
.share-list li:hover .shareWx{ opacity: 1; visibility: visible; margin-bottom: 10px;}

.in-ban{ position: relative; height: 100vh;}
.in-ban::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 50%; background: url(../images/ban-mask.png) center top no-repeat; background-size: cover; z-index: 1; pointer-events: none;}
.in-img{ position: relative; height: 100%;}
.in-img video{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; object-fit: cover; display: none; cursor: pointer;}
.in-text{ position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.in-con{ position: relative; padding-left: .9rem; margin-top: 15%;}
.in-circle{ display: block; content: ""; position: absolute; left: .3rem; top: 0; transform: translate(0,-40%); width: 132px; height: 132px; max-width: 1.4rem; max-height: 1.4rem; border-radius: 50%; background-color: var(--main-color);}
.in-title{ line-height: 1.1; margin-bottom: .2rem;}
.in-play{ position: absolute; right: 6.25%; bottom: .6rem; width: 105px; height: 105px; max-width: 1.1rem; max-height: 1.1rem; border-radius: 50%; background: url(../images/icon-play.png) center center var(--main-color) no-repeat; background-size: contain; cursor: pointer; transition: all .3s;}

.in-ban.playing .in-text{ opacity: 0; visibility: hidden;}
.in-ban.playing .in-play{ display: none;}

.sort-bg{ position: relative; margin-top: -52px; z-index: 2; overflow: hidden;}
.sort-list{ padding-bottom: 30px; gap: 1rem;}
.sort-list li a{ display: block; color: #FFFFFF; line-height: 22px; padding: 0 .15rem; text-align: center; transition: all .3s;}


.inner-bg{ overflow: hidden;}

.swiper-btn{ gap: .16rem;}
.swiper-btn span{ display: block; width: 62px; height: 62px; max-width: .7rem; max-height: .7rem; border-radius: 30px; background-position: center center; background-color: var(--main-color); background-repeat: no-repeat; background-size: 25% auto; cursor: pointer; user-select: none; transition: all .3s;}
.swiper-btn .swiper-prev{ background-image: url(../images/industry/dc-box2-prev.png);}
.swiper-btn .swiper-next{ background-image: url(../images/industry/dc-box2-next.png);}
.swiper-btn span:hover{ background-color: var(--hover-color);}

.swiper-btn.absolute span{ position: absolute; top: 50%; transform: translateY(-50%);}
.swiper-btn.absolute .swiper-prev{ left: 0;}
.swiper-btn.absolute .swiper-next{ right: 0;}



@media (max-width:1700px) {
    .nav-list > li > a{ font-size: 20px; padding: 0 .1rem;}
    .nav-right > li{ margin-left: .4rem;}
    .nav-lang > span,
    .nav-search > span,
    .nav-search > button{ font-size: 24px; height: 24px; max-width: .36rem; max-height: .36rem;}
}
@media (max-width:1600px) {
    .logo{ height: 90px;}
    .logo img{ height: 55px;}
    .nav-right{ line-height: 90px;}
    .nav-right > li{ height: 90px;}
    .nav-list > li > a{ line-height: 90px;}

    .box-more .flex{ width: 160px; height: 50px; padding-right: 15px;}
    
    
}
@media (max-width:1400px) {
    .nav-list > li > a{ font-size: 18px;}
    .foot-line .org{ background-size: auto 100%;}
    .foot-line .blue{ background-size: auto 100%;}

    .innerBg{ font-size: 14px;}
}
@media (min-width:1201px) {
    .nav-box{ display: block !important;}
    .nav-search-con{ display: inline-block !important;}
}

@media (max-width:1200px) {
    .header .wrap{ width: 100%;}
    .logo{ height: 60px !important;}
    .logo img{ height: 40px !important;}

    .nav-right { position: static; margin: 0; line-height: 60px !important;}
    .nav-right > li{ height: 60px !important; font-size: 12px; margin-left: .3rem !important;}
    .nav-right li.nav-btn{ display: inline-block;}
    .nav-tel{ padding-left: 35px; background-size: 24px auto;}
    .nav-tel a{ font-size: 150%;}
    .nav-search > button,
    .nav-search > span{ transform: scale(0.8);}
    .nav-lang > span{ transform: scale(0.8);}
    .lang-list{ min-width: 100px;}
    .nav-search-con{ display: flex; align-items: center; position: absolute; left: 0; right: 0; top: 100%; width: 100%; height: 50px; padding: 0 .2rem; background-color: #FFFFFF; border-top: 1px solid rgba(0, 0, 0, .2); display: none; transition: none;}
    .nav-search-input{ flex: auto; color: #000000;}
    .nav-search-input::placeholder{ color: #000000; opacity: .3;}
    .nav-search-input:-moz-placeholder{ color: #000000; opacity: .3;}
    .nav-search-input::-moz-placeholder{ color: #000000; opacity: .3;}
    .nav-search-input:-ms-input-placeholder{ color: #000000; opacity: .3;}
    .nav-search-input::-webkit-input-placeholder{ color: #000000; opacity: .3;}
    .nav-search-btn{ flex-shrink: 0; width: 40px; height: 100%; border: none; background: url(../images/icon-search.png) center center no-repeat; background-size: 50% auto;}
    .nav-right .nav-search-btn{ display: block;}
    .nav-right > li.cur .nav-search-con{ width: 100%; transition: none;}

    .nav-search > button span{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: none; width: 22px; height: 30px;}
    .nav-search > button span b{ display: block; width: 100%; height: 2px; background-color: var(--main-color); position: absolute; left: 0; top: calc((100% - 4px) / 2);}
    .nav-search > button span b:first-child{ transform: translateY(0) rotate(45deg);}
    .nav-search > button span b:last-child{ transform: translateY(0) rotate(-45deg);}

    .nav-right > li.nav-search{ position: static;}
    .nav-box { 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;}
    
    .nav-list { text-align: left; display: block; padding: .3rem 15px; margin: 0 auto; }
    .nav-list > li { display: block; margin: 0; padding: 0; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06); cursor: pointer;}
    .nav-list > li > a { position: relative; width: fit-content; height: auto; font-size: 16px !important; color: var(--main-color); line-height: 46px !important; padding: 0 !important; padding-right: 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); opacity: 1;}
    .nav-list > li > a > span::before{ display: none;}
    .nav-list > li > a .icon{ width: 14px; height: 14px; vertical-align: text-bottom;}
    .nav-list > li:last-child > a{ border-bottom: none;}
    .nav-list > li > a:hover,
    .nav-list > li.active > a{ color: var(--main-color); }
    .nav-list > li > a::before { display: none;}
    .nav-list li.dropdown::after { display: block; content: "\e65e"; position: absolute; right: 0; top: 0; color: #000000; font-family: "iconfont" !important; text-align: center; font-size: 14px; line-height: 46px; transition: all .3s;}
    .nav-list li.cur::after { transform: rotate(180deg);}
    .nav-second{ position: static; padding: 0 15px 15px; margin: 0 0 15px; border-radius: 8px;}
    .nav-sub{ display: block; padding: 0 !important;}
    .nav-sub > li{ display: block; padding: 0; margin-right: 0;}
    .nav-sub > li > a{ font-size: 14px !important; color: rgba(0, 0, 0, .8);}
    .nav-mask{ display: none;}

    .header.white .nav-list > li > a{ color: var(--title-color);}
    .header.bg .nav-box{ top: 60px; background: #FFFFFF;}
    .header.bg .nav-btn span b{ background-color: var(--main-color);}

    .header.nav-open{ background-color: #FFFFFF;}
    .header.nav-open .logo .white{ display: none;}
    .header.nav-open .logo .default{ display: block; opacity: 1; visibility: visible;}
    .header.nav-open .nav-right{ border-left-color: rgba(0, 0, 0, 0.1);}
    .header.nav-open .nav-btn span b{ background-color: var(--main-color);}
    .header.nav-open .nav-search.cur > button{ transform: scale(1); background: none;}
    .header.nav-open .nav-search.cur > button span{ display: block;}
    .header.nav-open .nav-search > button,
    .header.nav-open .nav-search > span{ transform: scale(0.8); background-image: url(../images/icon-search.png);}
    .header.nav-open .nav-lang > span{ transform: scale(0.8); background-image: url(../images/icon-lang.png);}

    .foot-top{ padding: .8rem 0 .3rem;}
    .foot-nav h3{ margin: 0 0 .2rem;}
    .foot-con p{ line-height: 1.4;}
    .foot-logo{ max-width: 180px; margin-bottom: .2rem;}
    .foot-wechat{ max-width: 120px;}
    .foot-bot{ display: block; text-align: center;}
    .foot-bot .link{ flex-wrap: wrap; justify-content: center;}


    .in-ban{ max-height: 6rem;}
    .in-con{ padding-left: .5rem;}
    .in-circle{ left: 0; width: 90px; height: 90px;}
    .in-play{ width: 70px; height: 70px;}

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

    .sort-bg{  padding: .2rem 0; margin-top: 0; border: none; background-color: var(--main-color);}
    .sortBg .wrap{ width: 100%;}
    .sort{ display: block;}
    .sort-list{ flex-wrap: wrap; justify-content: center; margin: 0; padding-bottom: 0; gap: 0;}
    .sort-list li a{ min-width: 0; font-size: 14px; height: 100%; line-height: 24px; padding: .08rem .2rem;}

    .innerBg .sortBg{ top: 60px; padding-bottom: 0; position: static;}
    .innerBg .sortBg .bread-nav{ 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;}

    .bread-bg{ padding: .3rem 0;}

    .playBtn::after{ max-width: 25%; max-height: 25%; background-size: contain;}

    .swiper-btn span{ width: 50px; height: 50px; max-width: .6rem; max-height: .6rem;}
    
}

@media (max-width:991px) {
    .wrap{ padding: 0 .3rem;}
    .foot-top{ display: block;}
    .foot-right{ display: flex; align-items: center; justify-content: space-between; margin-top: .3rem; margin-left: 0;}
    .foot-logo{ width: 50%; margin: 0;}
    .foot-wechat{ width: 35%;}

    .page{ padding: .6rem 0;}
}
@media (max-width:767px) {
    .wrap{ width: 100%; max-width: 100%;}
    .box-more .flex{ width: 140px; height: 44px; padding-left: 20px;}
    .foot-nav{ display: block;}
    .foot-nav li + li{ padding: 0;}
    .foot-nav h3{ margin-bottom: 0;}
    .foot-con{ display: flex; flex-wrap: wrap; gap: .1rem;}
    .foot-con p{ margin: 0;}

    .page{ padding: .6rem 0;}
    .page p,
    .page input,
    .page a,
    .page span{ font-size: 14px; min-width: 28px; line-height: 26px; margin: 0 .01rem}
    .page a.prev,
    .page a.next,
    .page a.first,
    .page a.last{ padding: 0 .1rem;}
    .page p{ display: block; margin-top: .2rem;}
}

@media (max-width:640px) {
    .logo img{ height: 36px;}
    .nav-right > li{ font-size: 12px;}
    .nav-right > li.nav-tel{ display: none;}
        
    .box-more .flex{ width: 120px; height: 38px; padding-left: 10px; padding-right: 10px;}
    .box-more .flex i{ width: 24px; height: 24px; line-height: 24px;}

}
@media (max-width:460px) {

    .navVideo{ width: fit-content; padding: 0 .2rem;}
    .nav-rightCon a{ font-size: 12px;}

}