.intro{
    width: 100%;
    height: 100vh;
    min-height: calc(720 * var(--rpx));
    position: relative;

    padding-top: var(--header-height-max);
    color: #fff;
    font-size: calc(18em / 16);
    overflow: hidden;
}

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

.intro .wrapper{
    position: relative;
    z-index: 210;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    height: 100%;
}

.brand-logo{
    margin-top: calc(60 * var(--rpx));
    width: calc(320 * var(--rpx));
    height: calc(120 * var(--rpx));
    object-fit: contain;
}

.intro-title{
    font-size: calc(48 * var(--rpx));
    font-weight: bold;
    line-height: calc(57em / 48);
    margin-top: calc(48 * var(--rpx));
}

.bg-title{
    margin-top: calc(40 * var(--rpx));
    padding-left: calc(8em / 16);
    border-left: 2px solid currentColor;
    line-height: 1em;
}

.bg-desc{
    margin-top: calc(12em / 16);
    width: calc(380 * var(--rpx-75));
    line-height: calc(30em / 18);
}

.intro::before{
    content: "";
    height: calc(240 * var(--rpx));
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    background: linear-gradient(to bottom, #0006, #0000);
    z-index: 195;
}

/*.intro::after{
    content: "";
    height: calc(280 * var(--rpx));
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top, #0009, #0000);
    z-index: 195;
}*/

.intro-list-ctn{
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    bottom: calc(60 * var(--rpx));
    z-index: 210;

    font-size: calc(24 * var(--rpx));
    font-weight: bold;
    color: #fff;
}

.light .intro-list-ctn{
    color: var(--theme-black);
}

.intro-list-ctn ul{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0;
    margin-bottom: 0;
}

.intro-list-ctn li{
    flex-basis: auto;
    padding-left: calc(30 * var(--rpx));
    padding-right: calc(30 * var(--rpx));
    height: calc(60em / 24);
    white-space: nowrap;
    border-right: 1px solid #fff8;

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

.light .intro-list-ctn li{
    border-right-color: #0008;
}

.intro-list-ctn li:last-of-type{
    border-right-width: 0;
}

.achievements{
    background-color: #F7F7F7;
}

.achievements .wrapper{
    display: flex;
    align-items: flex-start;
    padding-top: calc(110 * var(--rpx));
    padding-bottom: calc(110 * var(--rpx));
}

.achievements .left{
    width: calc(480 * var(--rpx));
}

.achievements .right{
    width: calc(100% - 480 * var(--rpx));
}

.achievement{
    margin-bottom: calc(20 * var(--rpx));
    display: flex;
    align-items: flex-start;

    border-top: 1px solid rgba(0, 0, 0, .15);
    position: relative;
    padding-top: calc(30 * var(--rpx));
    padding-bottom: calc(28 * var(--rpx));
    justify-content: space-between;
    padding-right: calc(9.375vw + -90px); /* 90px @1920 → 0px @960 */
}

.achievement::before{
    content: "";
    width: calc(84 * var(--rpx));
    height: 1px;
    top: 0;
    left: 0;
    background-color: var(--theme-red);
    position: absolute;
}

.achievement .year{
    font-size: calc(24 * var(--rpx));
}

.achievement .content{
    font-size: calc(18rem / 16);
    line-height: calc(30em / 18);

    width: calc(760 * var(--rpx-75));
}

.achievement .desc{
    min-height: calc(90em / 18);
}

.achievement .data-list{
    font-size: 1rem;
    margin-top: calc(10 * var(--rpx));
    display: flex;
    flex-wrap: wrap;
}

.achievement .data{
    flex-basis: 50%;
}

.achievement .value{
    display: flex;
    gap: calc(8 * var(--rpx));
    align-items: flex-end;
    margin-top: calc(8 * var(--rpx));
}

.achievement .num{
    line-height: 1em;
    font-weight: bold;
    font-size: calc(48 * var(--rpx));
}

.intro.light::before{
    background: linear-gradient(to bottom, #fff6, #fff0);
}

.intro.light{
    color: var(--theme-black);
}

@media (max-width: 960px) {
    .achievements .wrapper{
        flex-direction: column;
    }
    .achievements .left{
        width: 100%;
    }
    .achievements .right{
        width: 100%;
    }
}


.bg-title.mobile, .bg-desc.mobile{
    display: none;
}

@media (max-width: 750px) {
    .intro{
        display: flex;
        flex-direction: column;
        padding-top: 0;
        height: auto;
        text-align: left;
    }


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

    .intro .wrapper{
        color: var(--theme-black);
        padding-top: 60vw;
        padding-bottom: calc(120 * var(--rpx));
    }

    .intro-title{
        margin-top: 0;
    }

    .intro::after{
        display: none;
    }

    .intro .brand-logo{
        margin-left: 0;
        width: calc(500 * var(--rpx));
        height: calc(200 * var(--rpx));
        filter: none;
        margin-top: 0;
    }

    .dark.intro .brand-logo{
        filter: none;
    }
    .dark .intro-title{
        color: #fff;
    }

    .intro-list-ctn{
        display: none;
    }

    .bg-title.mobile, .bg-desc.mobile{
        display: block
    }

    .bg-title, .bg-desc{
        font-size: calc(28 * var(--rpx));
        width: 100%;
    }

    .bg-title{
        border-left: 2px solid var(--theme-red);
        margin-top: calc(150 * var(--rpx));
    }

    .bg-desc{
        margin-top: calc(30 * var(--rpx));
    }
    
    .bg-title.mobile{
        margin-top: calc(60 * var(--rpx));
    }

    .bg-desc ul{
        font-weight: bold;
    }

    .bg-desc li{
        position: relative;
        padding-left: 1.5em;
        margin-bottom: .25em;
    }

    .bg-desc li::before{
        content: "";
        width: .8em;
        height: .8em;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        margin: auto;
        background: url("../images/icon_angle_right_white.svg") center/contain no-repeat;
        filter: url(#black-overlay);
    }

    .achievement .year{
        flex: 0 0 calc(240 * var(--rpx));
        font-size: calc(38 * var(--rpx));
    }

    .achievement .content{
        width: calc(100% - 240 * var(--rpx));
        font-size: calc(28 * var(--rpx));
    }

    .achievement .data-list{
        font-size: calc(24 * var(--rpx));
    }


}