section{
    overflow: hidden;
    width: 100%;
}

.swiper-banner{
    width: 100%;
}

.swiper-banner img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-banner a.wfEditorMode{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    margin-top: 0 !important;
    z-index: 210;
}


.swiper-banner{
    height: 100vh;
    min-height: 500px;
}

.swiper-banner .btn-prev,
.swiper-banner .btn-next{
    height: 100%;
    position: absolute;
    z-index: 230;
    top: 0;
    cursor: pointer;
    width: calc(120 * var(--rpx-75));
    display: block;
}

.swiper-banner .btn-prev{
    left: 0;
}

.swiper-banner .btn-next{
    right: 0;
}

.swiper-banner .btn-prev::before,
.swiper-banner .btn-next::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
    opacity: 0;
    z-index: 205;
    transition: .2s;
}

.swiper-banner .btn-next::before{
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3));
}

.swiper-banner .btn-prev:hover::before,
.swiper-banner .btn-next:hover::before{
    opacity: 1;
}

.swiper-banner .btn-prev::after,
.swiper-banner .btn-next::after{
    content: "";
    width: calc(33 * var(--rpx));
    height: calc(70 * var(--rpx));
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    filter: url(#white-overlay);
}

.swiper-banner .btn-prev::after{
    background: url("../images/index/icon_angle_left_lg.svg") center/contain no-repeat;
}
.swiper-banner .btn-next::after{
    background: url("../images/index/icon_angle_right_lg.svg") center/contain no-repeat;
}

section.business{
    padding-top: calc(90 * var(--rpx-50));
}

.swiper-business{
    aspect-ratio: 1600/860;
}

.swiper-business img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-business .info{
    position: absolute;
    left: 0;
    width: clamp(420px, calc(12.5vw + 300px), 540px);
    height: 100%;
    z-index: 240;

    -webkit-backdrop-filter: saturate(190%) blur(12px);
    backdrop-filter: saturate(190%) blur(12px);
    background-color: rgba(0, 0, 0, .3);

    padding: calc(100 * var(--rpx-50)) calc(60 * var(--rpx-50));
    color: #fff;
}


.swiper-business .icon{
    position: absolute;
    right: calc(60 * var(--rpx-50));
    bottom: calc(80 * var(--rpx-50));
    width: calc(150 * var(--rpx));
    height: auto;
    filter: url(#white-overlay);
}

.swiper-business a.wfEditorMode{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 230;
}

section.business{
    overflow: hidden;
}

.swiper-business{
    overflow: visible;
}

.swiper-business .btn-prev,
.swiper-business .btn-next{
    position: absolute;
    width: calc(60 * var(--rpx));
    height: calc(60 * var(--rpx));
    border-radius: 50%;
    background-color: #edeff2;
    top: 0;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    z-index: 260;
    transition: .3s;
}

.swiper-business .btn-prev::after,
.swiper-business .btn-next::after{
    content: "";
    width: 25%;
    height: 25%;
    object-fit: contain;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    filter: url(#navy-overlay);
}

.swiper-business .btn-prev::after{
    background: url("../images/global/icon_angle_left.svg") center/contain no-repeat;
}
.swiper-business .btn-next::after{
    background: url("../images/global/icon_angle_right.svg") center/contain no-repeat;
}

.swiper-business .btn-prev{
    left: calc(-30 * var(--rpx));
}
.swiper-business .btn-next{
    right: calc(-30 * var(--rpx));
}

.swiper-business .btn-prev:hover,
.swiper-business .btn-next:hover{
    filter: brightness(1.05);
}

.swiper-business .btn-prev:active,
.swiper-business .btn-next:active{
    transform: scale(0.95);
    filter: brightness(0.9);
    transition: .1s;
}

.swiper-business-pagination{
    margin-top: calc(42 * var(--rpx));
    font-size: calc(20rem / 16);
    display: flex;
    align-items: center;
    gap: calc(18 * var(--rpx));
    color: #999999;
}

.swiper-business-pagination i{
    width: calc(200 * var(--rpx));
    height: 1px;
    background-color: #999999;
}

.swiper-business-pagination .swiper-pagination-current{
    color: #6fb92c;
}

.business-info{
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 260;
}

.swiper-business-info{
    width: clamp(640px, calc(33.3333vw + 320px), 960px);
    flex: 0 0 auto;
    pointer-events: all;
    margin-top: calc(-160 * var(--rpx));
    color: #fff;
    margin-right: 0;
}

.swiper-business-info .swiper-slide{
    background-color: #1e67c1;
    padding: clamp(30px, calc(2.0833vw + 10px), 50px) clamp(40px, calc(3.6458vw + 5px), 75px);
}

.swiper-business-info .keyword{
    font-size: calc(20rem / 16);
}

.swiper-business-info .btn-ctn{
    margin-top: calc(70 * var(--rpx-50));
}

section.industrial-map{
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
}

section.industrial-map .wrapper{
    display: flex;
    align-items: center;
}

section.industrial-map .wrapper .left{
    width: clamp(320px, calc(22.9167vw + 100px), 540px);
    border-right: 1px solid #e5e5e5;
    padding-right: clamp(20px, calc(6.25vw - 40px), 80px);
}

section.industrial-map .wrapper .right{
    padding-left: calc(40 * var(--rpx-50));
    width: clamp(580px, calc(50vw + 100px), 1060px);
    transition: .5s;
}

section.industrial-map .wrapper .right:hover{
    filter: brightness(.9);
}

section.industrial-map .wrapper .right img{
    display: block;
    width: 100%;
    height: auto;
    cursor: zoom-in;
}

section.investor{
    background-color: var(--theme-navy);
    color: #fff;
    padding-top: calc(150 * var(--rpx-50));
    padding-bottom: calc(150 * var(--rpx-50));
}


.investor .wrapper{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.investor .right{
    width: clamp(390px, calc(26.0417vw + 140px), 640px);
    flex: 0 0 auto;
}

.investor .data{
    font-size: calc(42 * var(--rpx));
    margin-bottom: calc(40 * var(--rpx-50));
    display: flex;
}

.investor .data::before,
.investor .data::after{
    content: "";
    width: calc(20em / 42);
    height: calc(51.1em / 42);
    filter: url(#white-overlay);
}

.investor .data::before{
    margin-right: calc(11em / 42);
    background: url("../images/index/icon_wheatear_left.svg") center/contain no-repeat;
}
.investor .data::after{
    margin-left: calc(11em / 42);
    background: url("../images/index/icon_wheatear_right.svg") center/contain no-repeat;
}

.investor .left{
    width: clamp(480px, calc(37.5vw + 120px), 840px);
    flex: 0 0 auto;
}

.investor .link-list{
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid rgba(232, 232, 232, .2);
    border-bottom: 1px solid rgba(232, 232, 232, .2);
}

.investor .link-item:nth-of-type(2){
    margin-right: 1px;
}

.investor .link-item{
    border-right: 1px solid rgba(232, 232, 232, .2);
    border-top: 1px solid rgba(232, 232, 232, .2);
    width: calc(100% / 3);
    aspect-ratio: 1/1;
    position: relative;
    height: auto;
}

.investor .wrapper>a.wfEditorMode{
    position: absolute;
    bottom: 100%;
    left: 0;
}

.investor .link-item a.wfEditorMode{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 240;
}

.investor a.link{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    padding: calc(26 * var(--rpx));
    width: 100%;
    height: 100%;
}

.investor .link .icon{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(80 * var(--rpx));
    height: calc(80 * var(--rpx));
    filter: url(#white-overlay);
}

.investor .link:hover{
    background-color: #fff;
    color: var(--theme-navy);
}

.investor .link:hover .icon{
    filter: url(#navy-overlay);
}

.investor .link .number{
    font-size: 12px;
}

section.sus{
    padding-top: calc(110 * var(--rpx-50));
    position: relative;
    z-index: 205;
    background-color: transparent;
}

.sus-ctn{
    display: flex;
    align-items: stretch;
}

.sus-ctn .left{
    width: clamp(320px, calc(20.8333vw + 120px), 520px);
    flex: 0 0 auto;

    background-color: #f9f9f9;
}

.sus-ctn .right{
    width: clamp(580px, calc(52.0833vw + 80px), 1080px);
    flex: 0 0 auto;
}

.swiper-sus .swiper-wrapper,
.swiper-sus .swiper-slide{
    height: 100%;
}

.swiper-sus .sus-back{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-sus .info-box{
    position: absolute;
    z-index: 210;
    left: 0;
    bottom: 0;
    background-color: #fff;
    padding: calc(50 * var(--rpx-50));
    width: clamp(420px, calc(31.25vw + 120px), 720px)
}

.info-box .desc{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
    height: calc(64em / 18);
}

.sus-ctn .desc + .btn-ctn{
    margin-top: calc(30 * var(--rpx));
}

.sus-ctn .title{
    font-weight: bold;
    color: var(--theme-navy);
    font-size: calc(28 * var(--rpx));
    margin-bottom: calc(12 * var(--rpx));
}

.sus-ctn .sus-tab{
    height: clamp(80px, calc(6.25vw + 20px), 140px);
    padding-left: calc(30 * var(--rpx));
    padding-right: calc(30 * var(--rpx));
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    border-left: calc(3 * var(--rpx)) solid transparent;
    border-bottom: 1px solid #d9d9d9;
}

.sus-ctn .sus-tab:last-of-type{
    border-bottom: none;
}

.sus-ctn .sus-tab:hover{
    background-color: #fff;
}

.sus-ctn .sus-tab.active{
    border-left-color: var(--theme-navy);
}

.sus-tab .icon{
    width: calc(60 * var(--rpx));
    height: calc(60 * var(--rpx));
    object-fit: contain;
    margin-right: 1.5em;

    filter: url(#navy-overlay);
}

.sus-tab .name{
    font-size: calc(24 * var(--rpx));
}

section.news{
    padding-top: calc(290 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
    margin-top: calc(-180 * var(--rpx-50));
    background-color: #f5f5f5;
    position: relative;
    z-index: 200;
    overflow: hidden;
}

.news .section-title{
    padding-bottom: calc(18 * var(--rpx));
    border-bottom: 1px solid #e3e5e9;
}

.news .filter-row{
    margin-top: calc(40 * var(--rpx-50));

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.news .filter-row .left{
    display: flex;
}

.news .filter-catalog{
    height: calc(60 * var(--rpx));
    padding-left: calc(48 * var(--rpx));
    padding-right: calc(48 * var(--rpx));
    margin-right: calc(20 * var(--rpx));
    border-radius: calc(30 * var(--rpx));
    border: 1px solid #e3e5e9;
    background-color: #fff;
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

.news .filter-catalog:not(.active):hover{
    color: var(--theme-navy);
    border-color: var(--theme-navy);
}

.news .filter-catalog.active{
    background-color: var(--theme-navy);
    color: #fff;
    border-color: var(--theme-navy);
}

.news .swiper-news{
    margin-top: calc(60 * var(--rpx-50));
    overflow: visible;
}

.news-card{
    margin-right: calc(40 * var(--rpx-50));
    width: clamp(270px, calc(17.7083vw + 100px), 440px);
}

.news-card:last-of-type{
    margin-right: 0;
}

section.news .btn-ctn{
    margin-top: calc(60 * var(--rpx-50));
}

.news .right{
    gap: calc(20 * var(--rpx));
    display: flex;
    align-items: center;
}

.news .right .btn{
    width: calc(60 * var(--rpx-75));
    height: calc(60 * var(--rpx-75));
    border-radius: 50%;
    background-color: #edeff2;
    position: relative;
    cursor: pointer;
}

.news .right .btn:hover{
    background-color: #fff;
}

.news .right .btn.swiper-button-lock{
    display: block;
    opacity: .5;
}

.news .right .btn::after{
    content: "";
    width: calc(8 * var(--rpx-75));
    height: calc(15.4 * var(--rpx-75));
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

.news .btn-prev::after{
    background: url("../images/global/icon_angle_left.svg") center/contain no-repeat;
    filter: url(#blue-overlay);
}

.news .btn-next::after{
    background: url("../images/global/icon_angle_right.svg") center/contain no-repeat;
    filter: url(#blue-overlay);
}

@media (max-width: 960px) {
    .swiper-business-info{
        width: clamp(480px, calc(76.1905vw - 91.4286px), 640px);
    }

    .swiper-business .icon{
        bottom: calc(160 * var(--rpx-50));
    }

    section.industrial-map .wrapper .left{
        width: 50%;
    }

    section.industrial-map .wrapper .right{
        width: 50%;
    }

    .investor .left{
        width: 40%;
        flex: 0 0 auto;
    }

    .investor .right{
        width: 50%;
    }

    .investor .link-item:nth-of-type(2){
        margin-right: 0;
    }

    .investor .link-item{
        width: 50%;
    }

    .investor .link-list{
        border-bottom: none;
    }

    .investor .link-list .link-item:nth-last-of-type(1),
    .investor .link-list .link-item:nth-last-of-type(2){
        border-bottom: 1px solid rgba(232, 232, 232, .2);
    }

    .sus-ctn .left{
        width: 30%;
        flex: 0 0 auto;
    }

    .sus-ctn .right{
        width: 70%;
        flex: 0 0 auto;
    }
}

@media (max-width: 750px) {
    .swiper-banner .btn-prev, .swiper-banner .btn-next{
        width: calc(100 * var(--rpx));
    }

    .swiper-business .info{
        display: block;
        width: 100%;
    }

    section.industrial-map .wrapper{
        display: block;
    }

    section.industrial-map .wrapper .left{
        width: 100%;
        padding-right: 0;
        border-right: none;
    }
    section.industrial-map .wrapper .right{
        width: 100%;
        padding-left: 0;
        margin-top: calc(40 * var(--rpx));
    }

    .investor .wrapper{
        flex-direction: column-reverse;
    }

    .investor .left{
        width: 100%;
    }

    .investor .right{
        width: 100%;
        margin-bottom: calc(40 * var(--rpx));
    }

    .sus-ctn{
        display: block;
    }

    .sus-ctn .left{
        display: flex;
        width: 100%;
    }

    .sus-ctn .right{
        width: 100%;
    }

    .sus-ctn .sus-tab{
        padding: calc(12 * var(--rpx));
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: auto;
        width: 20%;
        flex: 0 0 auto;
        border-left: none;
        justify-content: space-between;
    }

    .sus-tab .name{
        font-size: 0.875rem;
        white-space: nowrap;
    }

    .sus-tab .icon{
        margin-left: auto;
        margin-right: auto;

        width: calc(48 * var(--rpx));
        height: calc(48 * var(--rpx));
        margin-bottom: calc(8 * var(--rpx));
    }

    .sus-ctn .sus-tab:last-of-type{
        border-bottom: 1px solid #d9d9d9
    }

    .sus-ctn .sus-tab.active,
    .sus-ctn .sus-tab.active:last-of-type{
        border-left: none;
        border-bottom: 1px solid var(--theme-navy);
    }

    .swiper-sus .sus-back{
        aspect-ratio: 16/10;
    }

    .swiper-sus .info-box{
        position: relative;
        width: 100%;
    }

    .news .filter-row{
        display: none;
    }

    .swiper-business-info{
        width: var(--wrapper-width);
        margin: 0 auto;
    }

    .swiper-business .info{
        padding: calc(40 * var(--rpx));
    }

    .swiper-business .info .icon{
        display: none;
    }

    .swiper-business-pagination{
        display: none;
    }

    .swiper-business-info .swiper-slide{
        padding: calc(40 * var(--rpx))
    }

    .swiper-sus .swiper-slide{
        display: flex;
        flex-direction: column;
    }

    .swiper-sus .info-box{
        flex: 1 0 auto;
    }

}
