section{
    height: 100vh;
    min-height: 720px;
    overflow: hidden;
    width: 100%;
}

section.banner{
    background-color: #000;
    color: #fff;
    position: relative;
}

.swiper-banner{
    height: 100%;
}

.banner-back{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 190;
    object-fit: cover;
}

.banner-tabs{
    position: absolute;
    bottom: calc(64 * var(--rpx));
}

.swiper-banner .swiper-slide .wrapper{
    display: flex;
    height: 100%;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: calc(260 * var(--rpx));

    position: relative;
    z-index: 200;
}

.banner-title{
    font-size: calc(68 * var(--rpx));
    line-height: 1.33;
    font-weight: bold;
    margin-bottom: calc(30em / 68);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.banner-title img{
    width: 17.5%;
    height: auto;
}

.banner-tabs{
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 210;
    width: 100%;
    padding-bottom: calc(50 * var(--rpx));
}

.banner-tabs .wrapper{
    display: flex;
    gap: calc(20 * var(--rpx));
    position: relative;
}

.banner-tabs .banner-tab{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    color: rgba(255, 255, 255, .5);
    width: calc((var(--wrapper-width) - 280 * var(--rpx)) / 3);
    cursor: pointer;
    position: relative;
    transition: .3s;
}

.banner-tabs .banner-tab.active{
    color: #fff;
}

.banner-tab::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(40% 80% ellipse at 50% 100%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    opacity: 0;
    transition: .3s;
}

.tab-progress{
    width: 100%;
    height: calc(4 * var(--rpx));
    position: relative;
    background-color: rgba(255, 255, 255, .2);
    margin-bottom: calc(16 * var(--rpx));
}

.tab-progress .progress-value{
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--theme-red)
}

.tab-num{
    margin-bottom: calc(8 * var(--rpx));
}

.tab-desc{
    line-height: 1.5;
    min-height: 4em;
    padding-bottom: 1em;
}

.banner-tab:hover{
    color: #fff;
}

.banner-tab:hover::after{
    opacity: 1;
}

.btn-scroll-hint{
    position: absolute;
    right: 0;
    bottom: 1em;
}

section.data{
    position: relative;
    text-align: center;
}

section.data>a.wfEditorMode{
    position: absolute;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 240;
}

.data-back{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
}

.data-ctn{
    position: relative;
    z-index: 210;
    width: 100%;
    height: 100%; 
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    align-items: stretch;
}

.data-col{
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: calc(24rem / 16);
    padding-left: calc(30 * var(--rpx));
    padding-right: calc(30 * var(--rpx));
    background-color: rgba(0, 0, 0, .9);
    transition: 0s;
    border-right: 1px solid rgba(255, 255, 255, .3);
}

.current .data-col{
    background-color: rgba(0, 0, 0, 0);
}

.current .data-col:nth-of-type(1){
    transition: flex-basis .6s cubic-bezier(0.15, 1, 0.336, 1), background-color .4s 0s;
}

.current .data-col:nth-of-type(2){
    transition: flex-basis .6s cubic-bezier(0.15, 1, 0.336, 1), background-color .4s .1s;
}

.current .data-col:nth-of-type(3){
    transition: flex-basis .6s cubic-bezier(0.15, 1, 0.336, 1), background-color .4s .2s;
}

.data-col:last-child{
    border-right: none;
}

.data .btn-more{
    position: absolute;
    left: 0;
    right: 0;
    z-index: 240;
    margin: auto;
    bottom: calc(100 * var(--rpx));
}

.data-col.active{
    flex-basis: 50%;
}

.data-col .data-value{
    font-weight: bold;
    margin-bottom: 0;
    transition: opacity .3s, height .4s cubic-bezier(0.15, 1, 0.336, 1), transform .6s cubic-bezier(0.15, 1, 0.336, 1);
    font-size: calc(48 * var(--rpx));
    opacity: 0;
    height:0;
    overflow: hidden;
    transform: translateY(50%) scaleY(1.25);
}

.data-col.active .data-value{
    font-size: calc(68 * var(--rpx));
    margin-bottom: calc(10 * var(--rpx));
    height:1.2em;
    transform: none;
    opacity: 1;
}

section.news{
    padding-top: calc(120 * var(--rpx));
    padding-bottom: calc(80 * var(--rpx));
    overflow: hidden;
}


section.news .wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.news-list{
    display: flex;
    align-items: stretch;
    gap: calc(40 * var(--rpx));
    height: calc(560 * var(--rpx));
}

section.news .news{
    flex-basis: calc((var(--wrapper-width) - 80 * var(--rpx)) * .3);
    position: relative;
    color: #fff;
    overflow: hidden;
    transition: flex-basis .6s cubic-bezier(0.15, 1, 0.336, 1);
}

.news .cover{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 190;
    object-fit: cover;
    transition: 1s cubic-bezier(0.15, 1, 0.336, 1);
}

@media (min-width: 751px) {
    section.news .news.active .cover{
        transform: scale(1.05);
    }

    section.news .news.active .default-layer{
        opacity: 0;
    }

    section.news .news.active .preview-layer{
        opacity: 1;
        visibility: visible;
    }

    section.news .news.active .preview-layer .title{
        opacity: 1;
        transform: none;
        transition: opacity .3s, transform .6s cubic-bezier(0.15, 1, 0.336, 1);
    }
    section.news .news.active .preview-layer .desc{
        opacity: 1;
        transform: none;
        transition: opacity .3s .1s, transform .6s .1s cubic-bezier(0.15, 1, 0.336, 1);
    }

    section.news .news.active{
        flex-basis: calc((var(--wrapper-width) - 80 * var(--rpx)) * .4);
    }
}

.news .default-layer{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    z-index: 210;

    background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .2) 75%);
    opacity: 1;
    transition: .3s;

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: calc(30 * var(--rpx)) calc(30 * var(--rpx)) calc(42 * var(--rpx));
}

.news .preview-layer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 220;
    opacity: 0;
    visibility: hidden;
    transition: .3s;

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    padding: calc(30 * var(--rpx));
    background: linear-gradient(to bottom, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .4) 50%);
}

.news .title{
    font-size: calc(24rem / 16);
    line-height: calc(34em / 24);
    font-weight: bold;
    max-width: calc(380 * var(--rpx));
}

.news .date{
    font-family: Poppins, var(--sans-serif-font), sans-serif;
    font-size: calc(14rem / 16);
    font-weight: lighter;
    margin-bottom: calc(12em / 14);
}

.news .tag{
    font-size: calc(14rem / 16);
    width: calc(86em / 14);
    height: calc(32em / 14);
    border-radius: calc(16em / 14);
    border: 1px solid;
    border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .3) rgba(255, 255, 255, .1);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
    background: rgba(255, 255, 255, 0.1);

    margin-top: 0;
    margin-bottom: auto;
    justify-self: flex-start;
}

.news .desc{
    margin-top: calc(30 * var(--rpx));
}

.btn-arr-go{
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: absolute;
    right: calc(30 * var(--rpx));
    bottom: calc(30 * var(--rpx));
    width: calc(50rem / 16);
    height: calc(50rem / 16);
    transition: .3s;
}

.btn-arr-go:hover{
    transform: scale(1.1);
}

.btn-arr-go::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;

    width: calc(14rem / 16);
    height: calc(12rem / 16);
    background: url("../images/icon_arr_right.svg") center/contain no-repeat;
}

.news .preview-layer .title{
    opacity: 0;
    transform: translateY(calc(32rem / 16)) scaleY(1.25);
    transition: .2s;
}
.news .preview-layer .desc{
    opacity: 0;
    transform: translateY(calc(32rem / 16)) scaleY(1.15);
    transition: .2s;
}


.news .btn-ctn{
    margin-top: calc(50 * var(--rpx));
}

section.honors{
    background: url("../images/honors_back.webp") center/cover no-repeat;
}

section.honors .wrapper{
    padding-top: calc(120 * var(--rpx));
    padding-bottom: calc(80 * var(--rpx));
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.honors .section-title{
    margin-bottom: calc(60 * var(--rpx));
}

.honors-list{
    display: flex;
    width: var(--wrapper-width);
    height: calc(380 * var(--rpx));
}

.honors-list .honor{
    flex-basis: 25%;
    border-right: 1px solid rgba(0, 0, 0, .15);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.honors-list .honor:last-of-type{
    border-right-width: 0;
}

.f24{
    font-size: calc(24rem / 16);
}

.f32{
    font-size: calc(32rem / 16);
}

.f36{
    font-size: calc(36rem / 16);
}

.f44{
    font-size: calc(44 * var(--rpx));
}

.f48{
    font-size: calc(48 * var(--rpx));
}

.f58{
    font-size: calc(58 * var(--rpx));
}

.f68{
    font-size: calc(68 * var(--rpx));
}

.fwb{
    font-weight: bold;
}

.fwl{
    font-weight: lighter;
}

.honors-list .honor p{
    line-height: 1.4em;
    height: 1.4em;
}

.mt12{
    margin-top: calc(12 * var(--rpx));
}

.honors .btn-ctn{
    margin-top: calc(54 * var(--rpx));
}

section.news .news{
    transform-origin: left center;
}

.news .btn-ctn{
    opacity: 0;
    transform: translateY(25%) scaleY(1.25);
}

.honors-list .honor{
    opacity: 0;
    transform: scale(.75);
    border-right-color: rgba(0, 0, 0, 0);
}

.current .honors-list .honor{
    opacity: 1;
    transform: none;
}

.current .honors-list .honor:nth-of-type(1){
    transition: transform .8s .35s cubic-bezier(0.15, 1, 0.336, 1),
    opacity .3s .35s,
    border-right-color .3s .8s;
}

.current .honors-list .honor:nth-of-type(2){
    transition: transform .8s .25s cubic-bezier(0.15, 1, 0.336, 1),
    opacity .3s .25s,
    border-right-color .3s .8s;
}

.current .honors-list .honor:nth-of-type(3){
    transition: transform .8s .25s cubic-bezier(0.15, 1, 0.336, 1),
    opacity .3s .25s,
    border-right-color .3s .8s;
}

.current .honors-list .honor:nth-of-type(4){
    transition: transform .8s .35s cubic-bezier(0.15, 1, 0.336, 1),
    opacity .3s .35s,
    border-right-color .3s .8s;
}

.current .honors-list .honor{
    border-right-color: rgba(0, 0, 0, .15);
}

.honors .btn-ctn{
    opacity: 0;
    transform: translateY(25%) scaleY(1.25);
    transition: 0s;
}

.current.honors .btn-ctn{
    opacity: 1;
    transform: none;
    transition: transform .8s .7s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s .7s;
}

.banner-title>*, .swiper-banner .btn-ctn{
    opacity: 0;
    transform: translateY(25%) scaleY(1.25);
    transition: 0s;
}

.swiper-slide-active .banner-title>*,
.swiper-banner .swiper-slide-active .btn-ctn{
    opacity: 1;
    transform: none;
}

.swiper-slide-active .banner-title>*:nth-of-type(1){
    transition: transform .8s .1s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s .1s;
}
.swiper-slide-active .banner-title>*:nth-of-type(2){
    transition: transform .8s .2s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s .2s;
}
.swiper-slide-active .banner-title>*:nth-of-type(3){
    transition: transform .8s .3s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s .3s;
}
.swiper-banner .swiper-slide-active .btn-ctn{
    transition: transform .8s .4s cubic-bezier(0.15, 1, 0.336, 1), opacity .3s .4s;
}

.banner-back{
    filter: brightness(.5);
    transform-origin: 25% 50%;
    transform: scale(1.025);
    transition: 0s .3s;
}

.swiper-slide-active .banner-back{
    filter: none;
    transform: none;
    transition: filter .5s linear, transform 5s cubic-bezier(0.25, .8, 0.6, 1);
}


@media (max-width: 960px) {
    section.banner{
        min-height: unset;
    }

    .data-col.active{
        flex-basis: 40%;
    }

    .data-col{
        flex-basis: 30%;
    }

    .data .data-col:nth-of-type(1),
    .data .data-col:nth-of-type(2),
    .data .data-col:nth-of-type(3){
        transition: flex-basis .6s cubic-bezier(0.15, 1, 0.336, 1), background-color .4s 0s;
    }

    .news-list{
        gap: calc(20 * var(--rpx));
        justify-content: space-between;
        height: calc(480 * var(--rpx));
    }

    section.news .news{
        flex-basis: calc((var(--wrapper-width) - 40 * var(--rpx)) * .3);
    }


    .news .title{
        font-size: calc(18rem / 16);
    }

    .honors-list{
        display: flex;
        flex-wrap: wrap;
        height: auto;
    }

    .honors-list .honor{
        flex-basis: 50%;
        height: calc(320 * var(--rpx))
    }

    .honors-list .honor:nth-of-type(2n){
        border-right-width: 0;
    }

    .honors-list .honor:nth-of-type(1),
    .honors-list .honor:nth-of-type(2){
        border-bottom: 1px solid rgba(0, 0, 0, .15);
    }

}

.swiper-news{
    display: none;
}

@media (max-width: 750px) {

    .banner-title img{
        width: calc(228 * var(--rpx));
    }

    .banner-tabs .banner-tab{
        height: calc(80 * var(--rpx));
        justify-content: center;
        width: calc((var(--wrapper-width) - 180 * var(--rpx)) / 3);
    }
    .tab-progress{
        margin-top: auto;
        margin-bottom: auto;
    }

    .tab-desc{
        display: none;
    }

    .tab-num{
        display: none;
    }

    .banner-tabs{
        padding-bottom: 0;
        bottom: calc(80 * var(--rpx));
    }

    .btn-scroll-hint{
        bottom: 0;
    }


    section{
        min-height: unset;
    }

    section.news{
        height: auto;
        padding-top: calc(150 * var(--rpx));
        padding-bottom: calc(150 * var(--rpx));
        overflow: hidden;
    }


    .section-title{
        margin-bottom: calc(72 * var(--rpx));
        text-align: center;
    }

    .news-list{
        display: none;
    }

    .swiper-news{
        display: block;
        width: calc(440 * var(--rpx));
        overflow: visible;
    }

    .swiper-news .news{
        display: block;
        height: calc(560 * var(--rpx));
    }

    .current.news .btn-ctn{
        display: flex;
        justify-content: center;
        margin-top: calc(80 * var(--rpx));
    }

    /*.news .swiper-progress{
        height: calc(2 * var(--rpx));
        background-color: #0002;
    }

    .news .swiper-progress{
        position: relative;
        margin-top: calc(80 * var(--rpx));
    }

    .news .swiper-progress-bar{
        height: 100%;
        width: 0;
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--theme-red);
        transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    }*/

    section.honors{
        height: auto;
        background-image: url("../images/index_honors_back.webp");
    }

    section.honors .wrapper{
        padding-top: calc(210 * var(--rpx));
        padding-bottom: calc(360 * var(--rpx));
    }

    .honors-list{
        flex-direction: column;
        border-bottom: 1px solid rgba(0, 0, 0, .15);
        height: auto;
    }

    .honors-list .honor{
        height: auto;
        flex-basis: calc(300 * var(--rpx));
        border-top: 1px solid rgba(0, 0, 0, .15);
    }

    .current .honors-list .honor{
        border-right-width: 0;
    }

    /*.honors .btn-ctn{
        display: none;
    }*/

    .fz24{
        font-size: calc(32rem / 16);
    }

    .f32{
        font-size: calc(38rem / 16);
    }

    .mt12{
        margin-top: 0;
    }

    .news .tag{
        font-size: calc(24 * var(--rpx));
    }

    .news .date{
        font-size: calc(24 * var(--rpx));
    }

    .news .title{
        font-size: calc(32 * var(--rpx));
    }

    .btn-arr-go{
        width: calc(60 * var(--rpx));
        height: calc(60 * var(--rpx));
    }

    .btn-arr-go::after{
        width: calc(24 * var(--rpx));
        height: calc(17 * var(--rpx));
    }

    .swiper-banner .swiper-slide .wrapper{
        padding-bottom: 24vh;
    }


    section.data{
        height: 100vh;
        background-color: #000;
    }

    /*section.data::after{
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(to bottom, #000f 80%, #0003 100%);
        z-index: 230;
    }*/

    .data-ctn{
        flex-direction: column;
        height: auto;
        position: relative;
        z-index: 240;
        background-color: #fff;
    }

    .data-col:first-of-type{
        border-top: 1px solid rgba(0, 0, 0, .3);
    }

    .data-col,
    .data-col.active{
        position: relative;
        border-right: none;
        color: var(--theme-black);
        flex-basis: calc(240 * var(--rpx));
        border-bottom: 1px solid rgba(0, 0, 0, .3);
    }

    .data-col::before{
        content: "";
        width: calc(200 * var(--rpx));
        height: 1px;
        background: var(--theme-red);
        left: 0;
        top: -1px;
        position: absolute;
    }
    .data-col:last-of-type::after{
        content: "";
        width: calc(200 * var(--rpx));
        height: 1px;
        background: var(--theme-red);
        left: 0;
        bottom: -1px;
        position: absolute;
    }
    
    .data-value{
        font-size: calc(68 * var(--rpx));
    }
    .data-desc{
        font-size: calc(38 * var(--rpx));
        margin-top: 0;
    }

    .data-ctn .data-col,
    .current .data-ctn .data-col{
        background-color: #fff;
    }

    section.data{
        display: flex;
        flex-direction: column;
        align-items: stretch;
        background-color: #fff;
        height: auto;
    }

    .data .btn-more{
        position: relative;
        margin-top: calc(60 * var(--rpx));
        bottom: unset;
    }

    .data-back{
        position: relative;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        top: unset;
    }

    .data-ctn{
        padding: calc(60 * var(--rpx)) calc(40 * var(--rpx));
    }

    .data-col{
        height: calc(120 * var(--rpx));
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .data-col .data-value{
        font-size: calc(68 * var(--rpx));
        margin-bottom: calc(10 * var(--rpx));
        height: 1.2em;
        transform: none;
        opacity: 1;
    }

    .data .btn-more{
        border-color: var(--theme-red);
        color: var(--theme-red)
    }

    .data .btn-more::after{
        filter: url(#red-overlay);
    }

    .data .btn-more:hover{
        color: #fff;
    }
    .data .btn-more:hover::after{
        filter: url(#white-overlay);
    }

    .swiper-news .swiper-button-next,
    .swiper-news .swiper-button-prev{
        color: var(--theme-black);
        width: calc(176 * var(--rpx));
        height: calc(108 * var(--rpx));
    }


    .swiper-news .swiper-button-prev{
        left: calc(-220 * var(--rpx));
    }
    .swiper-news .swiper-button-next{
        right: calc(-220 * var(--rpx));
    }

    .swiper-slide-prev, .swiper-slide-next{
        opacity: .4;
    }

}