
section.industrial-map{
    padding-top: calc(90 * var(--rpx));
    padding-bottom: calc(90 * var(--rpx));
}

.section-header{
    position: relative;
    height: clamp(400px, calc(33.3333vw + 80px), 720px);
    color: #fff;
}

.section-header::before{
    content: "";
    z-index: 205;
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)) ;
}

.section-header .wrapper{
    position: relative;
    z-index: 210;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: calc(60 * var(--rpx));
}

.section-header .icon{
    width: calc(160 * var(--rpx));
    height: calc(160 * var(--rpx));
}

.section-header .icon img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.section-header .info{
    flex: 1 0 auto;
}

.section-header .section-title .en{
    opacity: .8;
}

.section-header .section-title{
    margin-bottom: calc(20 * var(--rpx));
}

.section-desc{
    padding-top: calc(90 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
}

.section-desc .layout-single{
    width: clamp(720px, calc(29.1667vw + 440px), 1000px);
    flex: 0 0 auto;
    text-align: center;
    margin: 0 auto;
}

.section-desc .layout-single .desc{
    font-size: calc(24 * var(--rpx));
    line-height: calc(38em / 24);
    font-weight: lighter;
}

.split-info{
    display: flex;
    --gap: clamp(30px, calc(5.2083vw - 20px), 80px);
    gap: var(--gap);
    margin-bottom: calc(120 * var(--rpx-50));
    align-items: center;
}

.split-info:nth-of-type(2n){
    flex-direction: row-reverse;
}

.split-info .title{
    font-weight: bold;
    font-size: calc(32rem / 16);
    color: #000;
    margin-bottom: calc(20 * var(--rpx));
}

.split-info .split{
    height: 2px;
    width: calc(60 * var(--rpx));
    background: linear-gradient(to right, var(--theme-navy), var(--theme-grass));
    display: block;
    margin-bottom: calc(20 * var(--rpx));
}

.split-info .desc{

}

.split-info:last-of-type{
    margin-bottom: 0;
}

.split-info .info{
    width: calc(50% - var(--gap));
    flex: 0 0 auto;
}

.split-info .picture{
    width: 50%;
    flex: 0 0 auto;
}

.split-info .picture img{
    display: block;
    width: 100%;
    height: auto;
}

.section-detail{
    padding-bottom: calc(160 * var(--rpx-50));
}

.layout-dual{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.layout-sec:nth-of-type(3n + 1) .desc1{
    --theme-color: var(--theme-navy)
}

.layout-sec:nth-of-type(3n + 2) .desc1{
    --theme-color: var(--theme-grass)
}

.layout-sec:nth-of-type(3n) .desc1{
    --theme-color: var(--theme-orange)
}

.layout-dual .desc1{
    width: clamp(300px, calc(25vw + 60px), 540px);
    padding: calc(50 * var(--rpx-50));
    position: absolute;
    color: #fff;
    --theme-color: #333;
    background-color: var(--theme-color);
    left: 0;
    top: 0;
    font-size: calc(24 * var(--rpx));
    line-height: calc(38em / 24);
    font-weight: lighter;
}

.layout-dual .desc1::after{
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: calc(60 * var(--rpx-50)) solid var(--theme-color);
    border-bottom: calc(60 * var(--rpx-50)) solid #f6f6f6;
}

.layout-dual .desc2{
    margin-top: calc(80 * var(--rpx-50));
    background: linear-gradient(to right, #f1f1f1, #fff);
    width: clamp(680px, calc(50vw + 200px), 1160px);
    padding: calc(70 * var(--rpx-50)) calc(70 * var(--rpx-50)) calc(70 * var(--rpx-50)) clamp(100px, calc(20.8333vw - 100px), 300px);
}

.expandable-list{
    margin-bottom: calc(20 * var(--rpx-50));
}

.expandable-list li{
    position: relative;
    padding-left: calc(20 * var(--rpx));
    margin-bottom: calc(20 * var(--rpx));
    cursor: pointer;
}

.expandable-list li:hover .exp-title{
    color: var(--theme-navy);
}

.expandable-list li::before{
    content: "";
    width: 2px;
    left: 0;
    top: 0;
    position: absolute;
    height: 100%;
    background-color: #e5e5e5;
}

.expandable-list li:hover::before,
.expandable-list li.active::before{
    background: linear-gradient(to bottom, var(--theme-navy), var(--theme-grass));
}

.expandable-list li .exp-desc{
    height: 0;
    overflow: hidden;
}

.expandable-list .exp-title{
    font-weight: bold;
}

.expandable-list .exp-desc-inner{
    padding-top: calc(4rem / 16);
}


.expandable-list .exp-desc-inner p{
    margin-top: 0;
}

@media (max-width: 960px) {
    .section-header{
        height: clamp(320px, calc(38.0952vw + 34.2857px), 400px);
    }

    .section-desc .layout-single .desc{

    }

    .section-desc .layout-single{
        width: 100%;
    }

    .layout-dual .desc2{
        padding-top: calc(160 * var(--rpx-50));
        margin-top: calc(160 * var(--rpx-50));
    }
}

@media (max-width: 750px) {
    .section-header{
        height: auto;
        padding-top: calc(60 * var(--rpx));
        padding-bottom: calc(60 * var(--rpx));
    }

    .section-header .icon{
        width: calc(120 * var(--rpx));
        height: calc(120 * var(--rpx));
    }

    .section-header .wrapper{
        display: block;
    }

    .section-header .info{
        display: block;
        width: 100%;
        margin-top: calc(40 * var(--rpx));
    }

    .split-info{
        display: block;
    }

    .split-info .info{
        width: 100%;
    }

    .split-info .picture{
        width: 100%;
    }

    .split-info .picture{
        margin-top: calc(30 * var(--rpx));
    }

    .section-header::before{
        width: 100%;
    }

    .layout-dual{
        display: flex;
        flex-direction: column;
    }

    .layout-dual .desc1{
        position: relative;
        width: 100%;
        padding: calc(20 * var(--rpx));
    }

    .layout-dual .desc2{
        margin-top: 0;
        width: 100%;
        padding: calc(20 * var(--rpx));
    }

    .layout-dual .desc1::after{
        display: none;
    }
}
