section.intro {
    padding-top: calc(90 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
}

.intro .desc {
    color: #4c4c4c;
}

.intro-ctn {
    margin-top: calc(72 * var(--rpx-50));
    display: flex;
    align-items: stretch;
}

.intro-ctn .data {
    width: 50%;
    flex: 0 0 auto;
}

.intro-ctn .video {
    width: 50%;
    flex: 0 0 auto;

    aspect-ratio: 5/3;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

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

.intro-ctn .video::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .3);
    z-index: 230;
    transition: .3s;
}

.intro-ctn .video .btn-play {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    z-index: 240;
    filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, .3));
    transition: .3s;

    width: calc(80 * var(--rpx-50));
    height: calc(80 * var(--rpx-50));

    background: url("../images/global/icon_play.svg") center/contain no-repeat;
}

.intro-ctn .video:hover .btn-play {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 20px rgba(255, 255, 255, .6));
}

.intro-ctn .video:hover::after {
    background-color: rgba(0, 0, 0, .2);
}

.intro-ctn .data {
    display: grid;
    grid-template: repeat(auto-fill, 1fr)/repeat(auto-fill, 1fr);
    grid-template-areas: "cell1 cell1" "cell2 cell3";
}

.intro-ctn .data .cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    --theme-color: #666;
    position: relative;

    padding-left: calc(60 * var(--rpx-50));
}

.intro-ctn .data .cell>* {
    position: relative;
    z-index: 220;
}

.intro-ctn .data .cell::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: var(--theme-color);
    opacity: .2;
}

.intro-ctn .data .cell:nth-of-type(1) {
    grid-area: cell1;
    --theme-color: var(--theme-navy);
}

.intro-ctn .data .cell:nth-of-type(2) {
    grid-area: cell2;
    --theme-color: var(--theme-grass);
}

.intro-ctn .data .cell:nth-of-type(3) {
    grid-area: cell3;
    --theme-color: var(--theme-orange);
}


.intro-ctn .data .cell .value {
    font-size: calc(32 * var(--rpx));
    color: var(--theme-color);
}

.intro-ctn .data .cell .value span {
    font-size: 2em;
}

.sec2 {
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(120 * var(--rpx-50));
    color: #fff;
}

.sec2 .foldable {
    height: calc(480 * var(--rpx));
    display: flex;
    align-items: stretch;
}

.sec2 .fold-item {
    width: 20%;
    flex: 0 0 auto;

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

    border-right: 1px solid rgba(255, 255, 255, .5);
    transition: 1.4s cubic-bezier(0.15, 1, 0.336, 1);
}

.sec2 .fold-item:last-of-type {
    border-right: none;
}

.sec2 .fold-item:hover {
    background: linear-gradient(to top, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
}

.sec2 .fold-item.active {
    width: 60%;
}

.sec2 .fold-item .title {
    font-size: calc(24 * var(--rpx));
    font-weight: lighter;
}

.sec2 .fold-item .desc {
    /* white-space: nowrap; */
    font-size: calc(32 * var(--rpx));
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: .8s;
    margin-top: calc(10 * var(--rpx));
    text-align: center;
    padding: 0 20px;
}

.sec2 .fold-item.active .desc {
    visibility: visible;
    opacity: 1;
}

.committee {
    padding-top: calc(160 * var(--rpx-50));
    padding-bottom: calc(60 * var(--rpx-50));
}

.cmt-ctn {
    position: relative;
    column-gap: clamp(0px, calc(-25vw + 480px), 240px);
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(90 * var(--rpx-50));
}

.cmt-cell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: calc(310 * var(--rpx));
    width: clamp(330px, calc(48.9583vw - 140px), 800px);
    flex: 0 0 auto;
    position: relative;
    z-index: 220;
}

.cmt-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    max-height: calc(620 * var(--rpx));
    width: auto;
}

.cmt-cell p {
    font-size: calc(22 * var(--rpx));
    font-weight: lighter;
    margin-top: 0;
    line-height: calc(38em / 24);
}

.cmt-cell p:nth-of-type(3) {
    margin-top: 1em;
}

.cmt-cell p a {
    font-size: calc(14rem / 16);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .8em;
}

.cmt-cell:last-of-type a {
    width: 13em;
}

.cmt-cell a:not(.wfEditorMode)::after {
    content: "";
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    margin-left: calc(5em / 14);
    width: calc(30em / 14);
    height: calc(30em / 14);
    background: url("../images/global/icon_more.svg") center/calc(11em / 14) auto no-repeat var(--theme-grass);
}

section.board {
    padding-top: calc(60 * var(--rpx-50));
    padding-bottom: calc(70 * var(--rpx-50));
}

section.management {
    padding-top: calc(70 * var(--rpx-50));
    padding-bottom: calc(70 * var(--rpx-50));
}

.people-ctn {
    display: flex;
    --gap: calc(40 * var(--rpx-50));
    --swiper-main-width: clamp(380px, calc(25vw + 160px), 640px);
    --swiper-others-width: clamp(500px, calc(43.75vw + 80px), 920px);
    gap: var(--gap);
    margin-top: calc(80 * var(--rpx-50));
    align-items: flex-start;
}

.people-ctn .swiper-people-main {
    width: var(--swiper-main-width);
    flex: 0 0 auto;
    overflow: visible;
}

.swiper-people-main .swiper-slide {
    background-color: #fff;
}

.people-ctn .swiper-people-main:has(.info-box.expanded) {
    z-index: 280;
}

.people-ctn .swiper-people-others {
    width: var(--swiper-others-width);
    height: var(--swiper-main-width);
}

.people-ctn .photo {
    display: block;
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #666;
}

.swiper-people-others .swiper-wrapper {
    height: auto;
}

.swiper-people-others .swiper-slide {
    width: calc(280 * var(--rpx));
    margin-right: var(--gap);
    cursor: pointer;
    transition: .3s;
}

.swiper-people-others .swiper-slide:hover {
    filter: brightness(.8);
}

.swiper-people-others .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
}

.swiper-people-others .placeholder {
    pointer-events: none;
    width: var(--swiper-others-width);
    height: var(--swiper-others-width);
}

.info-box {
    width: calc(320 * var(--rpx));
    height: calc(320 * var(--rpx));
    margin-top: calc(-160 * var(--rpx));
    background-color: var(--theme-navy);
    color: #fff;
    padding: calc(32 * var(--rpx)) calc(36 * var(--rpx));
    position: relative;
    z-index: 240;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    transition: cubic-bezier(0.15, 1, 0.336, 1) .6s all, margin-top 0s;
    visibility: hidden;
    opacity: 0;
}

.swiper-slide-active .info-box {
    visibility: visible;
    opacity: 1;
}

.info-box .name {
    font-size: calc(32 * var(--rpx));
    font-weight: bold;
}


.info-box .desc {
    margin-top: calc(20 * var(--rpx));
    margin-bottom: calc(20 * var(--rpx));
    display: none;
}

.info-box .title {
    font-size: calc(24 * var(--rpx));
    font-weight: lighter;
}

.info-box .btn-ctn {
    margin-top: auto;
    margin-bottom: 0;
    justify-self: flex-end;
    text-align: right;
}

.info-box .btn-view {
    cursor: pointer;
}

.info-box .btn-view:hover {
    text-decoration: underline;
}

.info-box.expanded {
    position: absolute;
    left: 100%;
    width: calc(var(--wrapper-width) - var(--swiper-main-width));
    height: var(--swiper-main-width);
    margin-top: 0;
    top: 0;
    overflow: auto;
}

.info-box.expanded .desc {
    display: block;
}

.info-box.expanded .btn-view i.arr {
    transform: rotate(-135deg);
}

.award {
    border-top: #e5e5e5 1px solid;
}

.award:last-of-type {
    border-bottom: #e5e5e5 1px solid;
}

.award .col1 {
    width: clamp(160px, calc(39.5833vw - 220px), 540px);
    flex: 0 0 auto;

    font-size: calc(14rem / 16);
    color: var(--theme-navy);
}

.award .col2 {
    width: clamp(740px, calc(33.3333vw + 420px), 1060px);
    flex: 0 0 auto;
}

.award-title {
    display: flex;
    align-items: center;
    min-height: calc(80 * var(--rpx-75));
    padding-top: calc(16 * var(--rpx-75));
    padding-bottom: calc(16 * var(--rpx-75));
    position: relative;
}

.award-title .col2 {
    font-weight: bold;
    font-size: calc(24 * var(--rpx-75));
}

.award.active .award-title,
.award:hover .award-title {
    color: var(--theme-navy);
}

.award-title .arr {
    position: absolute;
    right: calc(30 * var(--rpx));
    top: 0;
    bottom: 0;
    margin: auto;
    font-size: 1rem;
    transform: rotate(45deg);
}

.active .award-title .arr {
    transform: rotate(135deg);
}

.award-content {
    display: flex;
    justify-content: flex-end;
    padding-bottom: calc(80 * var(--rpx-50));
}

.award-content .col2 {
    display: flex;
    align-items: stretch;
    background-color: #f5f5f5;
}

.award-content .col2>* {
    width: 50%;
    flex: 0 0 auto;
}

.award-content .info {
    padding: calc(36 * var(--rpx));
}

.award-content .cover img {
    display: block;
    width: 100%;
    height: auto;
}


@media (max-width: 960px) {
    .award .col1 {
        width: calc(80 * var(--rpx));
        flex: 0 0 auto;
    }

    .award .col2 {
        flex: 1 1 auto;
    }

    .award-content .col2 {
        width: 100%;
    }

    .cmt-ctn {
        column-gap: 30%;
    }

    .cmt-cell {
        width: 35%;
        text-align: center;
    }

    .cmt-back {
        transform: scale(.75);
    }
}

@media (max-width: 750px) {
    .intro-ctn {
        display: block;
    }

    .intro-ctn .data {
        width: 100%;
        aspect-ratio: 5/3;
    }

    .intro-ctn .video {
        width: 100%;
    }

    .desc.lg {
        width: 100%;
    }

    .cmt-ctn {
        width: 100%;
        row-gap: calc(240 * var(--rpx));
        column-gap: 10%;
    }

    .cmt-cell {
        width: 45%;
    }

    .cmt-back {
        width: 100%;
        height: auto;
        bottom: 0;
    }

    .sec2 .foldable {
        flex-direction: column;
        height: calc(540 * var(--rpx));
    }

    .sec2 .fold-item {
        width: 100%;
        height: 25%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .5);
    }

    .sec2 .fold-item.active {
        width: 100%;
        height: 50%;
    }

    .sec2 .fold-item .desc {
        width: 80%;
        font-size: calc(30 * var(--rpx));
        height: 0;
        white-space: normal;
        text-align: center;
    }

    .sec2 .fold-item.active .desc {
        height: auto;
    }

    .info-box.expanded {
        position: relative;
        width: 100%;
        margin-top: 0;
        height: auto;
        left: 0;
    }

    .people-ctn .swiper-people-main {
        width: 100%;
    }

    .people-ctn .swiper-people-others {
        position: absolute;

        left: calc(360 * var(--rpx));
        bottom: 0;
    }

    .swiper-people-others .swiper-wrapper {
        visibility: hidden;
        pointer-events: none;
    }

    .award-content .col2 {
        display: flex;
        flex-direction: column-reverse;
    }

    .award-content .col2>* {
        width: 100%;
    }

    .award-content .info {
        padding: calc(20 * var(--rpx));
    }

    .award-title .arr {
        right: 0;
    }

    .award .col1 {
        width: calc(60 * var(--rpx));
    }

    .award .award-title .col2 {
        width: calc(100% - (60 * var(--rpx)));
        padding-right: calc(40 * var(--rpx));
    }

    .award .col1 {
        font-size: 1.25rem;
    }
}