/*
 *  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: absolute; left: 0; right: 0; top: 0; min-width: 320px; z-index: 10; color: #FFFFFF; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.44); background: linear-gradient(to bottom,rgba(26,85,186,.93) 0%,rgba(26,86,186,0) 100%); transition: all .3s;}
.header.no-show{ transform: translateY(-100%);}
.logo { position: relative; 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: 60px; transition: all .3s;}

.nav-right { position: relative; font-size: 0; transition: all .3s;}
.nav-right > li { position: relative; display: inline-block; vertical-align: middle; font-size: 16px;}
.nav-right > li + li{ margin-left: .2rem;}
.nav-right a,
.nav-right i,
.nav-right span { display: inline-block; vertical-align: middle;}
.nav-tel{ padding-left: 51px; background: url(../images/icon-tel.png) left center no-repeat;}
.nav-tel a{ font-size: 187.5%; color: #FFFFFF; font-weight: bold;}


.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;}

.nav-box{ margin: 0 auto; text-align: center;}
.nav-list { list-style: none; margin: 0; display: flex; justify-content: space-between; padding: 0 .2rem; transition: all .3s;}
.nav-list > li { position: relative; display: inline-block; vertical-align: top;}
.nav-list > li > a{ position: relative; display: block; line-height: 1; font-size: 18px; color: #FFFFFF; padding: .1rem 0 .2rem; transition: all .3s;}
.nav-list > li > a::before{ display: block; content: ""; position: absolute; left: 50%; bottom: -1px; width: 0; height: 4px; background-color: #FFFFFF; max-height: 0.04rem; transition: all .3s linear;}
.nav-list > li > a:hover::before,
.nav-list > li.cur > a::before,
.nav-list > li.active > a::before{ left: 0; width: 100%;}


/* 白色背景 */
.header.nav-open,
.header.bg{ background-color: var(--main-color); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);}
.header.bg .nav-box{ position: fixed; left: 0; top: 0; width: 100%; background: var(--main-color); z-index: 10;}
.header.bg .nav-list > li > a{ padding: .2rem 0;}

.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.6; background: var(--main-color); z-index: 1; overflow: hidden;}
.footBg a{ color: #FFFFFF;}
.footBg a:hover{ color: #FFFFFF; text-decoration: underline;}
.ftNav{ list-style: none; display: flex; flex-wrap: wrap; justify-content: center; column-gap: .7rem; row-gap: .1rem; padding: .4rem 0; overflow: hidden;}
.ftNav li{}
.ftNav li a{ display: block;}
.copyright{ padding: .24rem 0 .44rem;}


/* 页码 */
.page{ padding: .7rem 0; text-align: center;}
.page p,
.page input,
.page a,
.page span{ display: inline-block; vertical-align: middle; text-align: center; min-width: 42px; line-height: 40px; font-size: 14px; color: #000000; margin: 0 .05rem; border-radius: 25px; transition: all .3s;}
.page a,
.page span{ border: 1px solid #CCCCCC;}
.page a:hover,
.page a.active{ background-color: #1a54b9; border-color: #1a54b9; color: #FFFFFF;}
.page a.active{ cursor: no-drop;}
.page a.prev,
.page a.next,
.page a.first,
.page a.last{ padding: 0 20px;}
.page a i{ color: var(--text-color); font-weight: bold;}
.page p{ margin-left: .3rem;}
.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: relative; border-top: 1px solid rgba(255, 255, 255, 0.3); margin-top: -101px; z-index: 2; overflow: hidden;}
.sort{ flex-wrap: wrap;}
.sortList{ list-style: none; display: flex;}
.sortList li a{ position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100px; min-width: 1.8rem; max-width: 2.44rem; line-height: 36px; font-size: 18px; color: #FFFFFF; padding: 0 .15rem; text-align: center; transition: all .3s;}
.sortList li a::after{ display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 100%; background: linear-gradient(97deg, #1952B7, #389BF6); z-index: -1; transition: all .3s;}
.sortList li:not(.active) a:hover::after{ width: 100%;}
.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;}

/* bread-nav */
.bread-bg{ padding: .5rem 0;}
.bread-nav{ list-style: none; font-size: 0; color: #666666;}
.bread-nav li{ position: relative; display: inline-flex; align-items: center; font-size: 18px;}
.bread-nav li a{ display: block; color: #666666; max-width: 25vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.bread-nav li + li::before{ display: block; content: ">"; margin: 0 5px;}
.bread-nav li a:hover{ color: var(--main-color);}
.bread-nav li i{ display: block; max-width: 50vw; 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 .bread-nav{ color: var(--title-color); padding: .13rem 0;}
.innerBg .sortBg .bread-nav li + li::before{ background-image: url(../images/icon-arrow-right-gray.png); opacity: .8;}
.innerBg .sortBg .bread-nav li a{ color: var(--text-color);}
.innerBg .sortBg .bread-nav 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: 127px; height: 127px; max-width: 1.27rem; max-height: 1.27rem; background: url(../images/icon-play.png) center center no-repeat; background-size: cover; z-index: 2; transition: all .3s;}
.playBtn::before{ display: block; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.43); z-index: 1;}
.playBtn:hover::after{ transform: translate(-50%,-50%) scale(0.9);}

/* video */
.videoBg{ position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.67); z-index: 11; display: none;}
.videoBox{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-45%); width: 1040px; max-width: 90%; border-radius: 4px; margin: 0 auto;}
.videoBox .close{ position: absolute; right: 0; bottom: calc(100% + 10px); font-size: 24px; line-height: 1; color: #FFFFFF; cursor: pointer; font-weight: bold; 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;}
    
    .innerBg{ font-size: 15px;}
    .bread-nav li{ font-size: 14px;}
    .sortList li a{ font-size: 14px; height: 80px;}
}
@media (max-width:1400px) {
    .nav-list > li > a{ font-size: 16px;}

    .sortBg{ margin-top: -81px;}
    .sortList li a{ height: 60px;}
    .innerBg{ font-size: 14px;}
    
}
@media (min-width:1201px) {
    .nav-box{ display: block !important;}
}
@media (max-width:1200px) {
    .header{ position: fixed;}
    .header.no-show{ transform: translateY(0);}
    .header .wrap{ width: 100%; max-width: 100%;}
    .logo{ height: 60px;}
    .logo img{ height: 40px;}

    .nav-right { position: static; margin: 0;}
    .nav-right > li{ font-size: 12px;}
    .nav-right li.nav-btn{ display: inline-block;}
    .nav-tel{ padding-left: 35px; background-size: 24px auto;}
    .nav-tel a{ font-size: 150%;}

    .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 0; 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);}
    .nav-list > li > a { position: relative; height: auto; font-size: 16px; color: var(--main-color); line-height: 46px; padding: 0 !important; padding-right: 46px; border-bottom: 1px solid rgba(255, 255, 255, 0.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 > 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;}
    .nav-list li.cur > a::after { transform: rotate(180deg);}
    .nav-second{ position: static; padding: 15px; margin: 0 0 15px; border-radius: 8px;}
    .nav-second > li{ display: block; padding: 0; font-size: 14px;}

    .header.bg .nav-box{ top: 60px; background: #FFFFFF;}


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

    .sortBg{  padding: .2rem 0; margin-top: 0; border: none; background-color: var(--main-color);}
    .sortBg .wrap{ width: 100%;}
    .sort{ display: block;}
    .sortList{ flex-wrap: wrap; justify-content: center;}
    .sortList 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;}
    
}

@media (max-width:991px) {
    .wrap{ padding: 0 .3rem;}    
    .page{ padding: .6rem 0;}
}
@media (max-width:767px) {
    .wrap{ width: 100%; max-width: 100%;}

    .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;}
}
@media (max-width:460px) {

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

}