/* about page */

.section-title{
    font-size: calc(52 * var(--rpx-50));
    margin-bottom: calc(20 * var(--rpx));
}

section.intro{
    padding-top: calc(120 * var(--rpx-50));
    background-color: #f7f7f7;
}

.intro .wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.intro .left,
.intro .right{
    flex: 0 0 clamp(440px, calc(33.3333vw + 120px), 760px);
    position: relative; 
}

.intro .left{
    padding-bottom: calc(100 * var(--rpx-50));
}

.intro .desc {
    overflow: hidden;
    font-size: 1rem;
}

.intro .show-more {
    margin-top: calc(20 * var(--rpx));
    padding-top: calc(10 * var(--rpx));
    padding-bottom: calc(10 * var(--rpx));
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: calc(7em / 16);
    transition: .2s;
    cursor: pointer;
    color: var(--theme-blue);
}

.intro .show-more::before {
    content: "";
    width: calc(14rem / 16);
    height: calc(12rem / 16);
    background: url("../images/icon_arr_show_more.svg") center / contain no-repeat;
    background-size: 100% 100%;
    margin-bottom: 1px;
    transition: .2s;
    transform: rotate(90deg) translateZ(0);
    filter: url(#blue-overlay);
}

.intro .show-more.show-less::before {
    transform: rotate(-90deg) translateZ(0);
}

.intro .show-more:hover {
    transition: .4s;
}

.intro .show-more:hover::before {
    transform: rotate(90deg) scale(1.2) translateZ(0);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    margin-right: calc(8 * var(--rpx));
    margin-left: calc(8 * var(--rpx));
}

.intro .show-more.show-less:hover::before {
    transform: rotate(-90deg) scale(1.2) translateZ(0);
}

.intro .right{
    aspect-ratio: 16/9;
}

.intro .right .figure{
    width: 85%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(60 * var(--rpx));
    margin: 0 auto;
    z-index: 210;
}

.intro .right .figure img{
    display: block;
    width: 100%;
    height: auto;
}

.intro .right::after{
    content: "";
    position: absolute;
    width: 100%;
    height: calc(330 * var(--rpx));
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, #1957D4ff, #1957D400);
    z-index: 200;
}

section.data{
    background-color: #fff;
    padding-top: calc(40 * var(--rpx));
    padding-bottom: calc(40 * var(--rpx));
}

.data-list{
    display: flex;
}

.data-item{
    flex: 0 0 25%;
    padding: calc(12 * var(--rpx)) calc(30 * var(--rpx));
    border-right: 1px solid #dadada;
}

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

.data-item .num{
    color: var(--theme-blue);
    font-size: calc(80 * var(--rpx-50));
    line-height: 1em;
}

.data-item .title{
    font-weight: 500;
    margin-top: calc(12 * var(--rpx));
}

.data-item .content{
    color: #2929299A;
    margin-top: calc(12 * var(--rpx));
    font-weight: 300;
    font-size: 1rem;
}

section.target{
    color: #fff;
    padding-top: calc(110 * var(--rpx-50));
    padding-bottom: calc(110 * var(--rpx-50));
    text-align: center;
    position: relative;
    overflow: hidden;
}

.target-back{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.target-back picture{
    display: block;
    width: 100%;
    height: 100%;
}

.target-back picture img,
.target-back img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

section.target .wrapper{
    position: relative;
    z-index: 1;
}

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

section.target .desc{
    font-size: calc(20rem / 16);
    text-align: left;
    max-width: calc(640 * var(--rpx));
    margin: auto;
}

section.target .desc p{
    margin-top: 0;
    margin-bottom: .5em;
    white-space: nowrap;
}

section.logo{
    display: flex;
    align-items: stretch;
}

section.logo .left{
    flex: 0 0 50%;
    padding: calc(90 * var(--rpx-50)) clamp(40px, calc(11.9792vw + -75px), 155px) calc(110 * var(--rpx-50));
    background-color: #fff;
}
section.logo .right{
    flex: 0 0 50%;
    background-color: #fff;
    padding: calc(100 * var(--rpx-50)) clamp(30px, calc(13.5417vw + -100px), 160px) calc(100 * var(--rpx-50)) clamp(30px, calc(8.3333vw + -50px), 110px);
    position: relative;
}


section.logo .right::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: calc(260 * var(--rpx-75));
    height: calc(243 * var(--rpx-75));
    background: url("../images/site_logo.svg") center / contain no-repeat;
    opacity: .1;
}

section.logo .left,
section.logo .right{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
}

section.logo .left img{
    display: block;
    width: 100%;
    height: auto;
}

section.logo .right .content{
    position: relative;
    z-index: 210;
    font-size: 1rem;
    line-height: 1.75;
}

section.logo .right .content p+p{
    margin-top: calc(35em / 20);
}

section.message-section{
    background-color: #f7f7f7;
    padding-top: calc(129 * var(--rpx-50));
    padding-bottom: calc(150 * var(--rpx-50));
}

section.experts-section{
    background-color: #f7f7f7;
    padding-top: calc(129 * var(--rpx-50));
    padding-bottom: calc(150 * var(--rpx-50));
}

.msg-ctn{
    display: flex;
    align-items: stretch;
    background-color: #fff;
}

.msg-ctn .left{
    flex: 0 0 calc(500 * var(--rpx));
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.msg-ctn .left img{
    display: block;
    width: 100%;
    height: auto;
}

.msg-ctn .right{
    width: calc(100% - 500 * var(--rpx));
    flex: 0 0 auto;
    padding: calc(70 * var(--rpx-50)) calc(100 * var(--rpx-50)) calc(80 * var(--rpx-50)) calc(90 * var(--rpx-50));
}

.msg-ctn .right .content{
    overflow: auto;
    padding-right: calc(10 * var(--rpx));
    max-height: calc(540 * var(--rpx));
}

.msg-ctn .right h2{
    position: relative;
    font-size: calc(32 * var(--rpx));
}

.msg-ctn .right h2::before{
    content: "";
    mix-blend-mode: multiply;
    width: calc(92 * var(--rpx));
    height: calc(12 * var(--rpx));
    left: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(to right, #E23918, #eaa923);
}

.msg-ctn .right{
    background: url("../images/quote_mark.svg") calc(100% - 70 * var(--rpx-50)) calc(100% - 70 * var(--rpx-50))/calc(160 * var(--rpx)) auto no-repeat;
}

.msg-ctn .right p{
    font-size: 1rem;
    line-height: 1.5em;
    margin-top: 1.5em;
    color: #29292980;
}

.experts-section .experts{
    margin-top: 0;
}

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

.expert-tab{
    position: relative;
    z-index: 220;
}

.expert-tab .tab-header {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(100 * var(--rpx-50));
    border-bottom: 1px solid #cdcdcd;
}

.expert-tab .tab {
    padding: calc(18 * var(--rpx));
    cursor: pointer;
    margin-bottom: -1px;
    font-size: calc(24 * var(--rpx));
    border-bottom: 2px solid transparent;
}

.expert-tab .tab:hover,
.expert-tab .tab.active {
    border-bottom-color: var(--theme-blue);
}

.expert-tab .tab.active {
    font-weight: bold;
    color: var(--theme-blue);
}

.expert-tab .tab-pane {
    display: none;
    padding-top: calc(40 * var(--rpx));
}

.expert-tab .tab-pane.active {
    display: block;
}

.swiper-expert {
    overflow: hidden;
    padding-bottom: calc(50 * var(--rpx));
    height: auto;
}

.swiper-expert .swiper-wrapper {
    box-sizing: content-box;
    height: auto;
    align-items: stretch;
}

.swiper-expert .swiper-slide {
    height: auto;
    box-sizing: border-box;
}

.swiper-expert .expert {
    display: flex;
    flex-direction: column;
    background: #fff;
    height: 100%;
}

.swiper-expert .expert .cover {
    width: 100%;
    aspect-ratio: 400/330;
    overflow: hidden;
    background: #eee;
}

.swiper-expert .expert .cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-expert .expert .info {
    padding: calc(32 * var(--rpx)) calc(40 * var(--rpx));
    flex: 1;
}

.swiper-expert .expert .name {
    font-size: calc(24 * var(--rpx));
}

.swiper-expert .expert .desc {
    margin-top: calc(8 * var(--rpx));
    font-size: calc(18 * var(--rpx));
    color: #29292999;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.swiper-expert .swiper-pagination {
    position: relative;
    margin-top: calc(40 * var(--rpx));
}

.swiper-expert .swiper-pagination-bullet {
    cursor: pointer;
}

.swiper-expert>.swiper-pagination-bullets .swiper-pagination-bullet{
    background-color: var(--theme-blue);
    opacity: .17;
    width: calc(12 * var(--rpx));
    height: calc(12 * var(--rpx));
    margin: 0 calc(6 * var(--rpx));
}

.swiper-expert>.swiper-pagination-bullets .swiper-pagination-bullet-active{
    opacity: 1;
    box-shadow: 0 0 0 calc(2 * var(--rpx)) #fff inset, 0 0 0 calc(2 * var(--rpx)) var(--theme-blue);
}

section.structure{
    background: url("../images/org_structure_back.webp") center/cover no-repeat ;
    padding-top: calc(96 * var(--rpx-50));
    padding-bottom: calc(140 * var(--rpx-50));
}

section.structure .section-title{
    text-align: center;
}

.structure-desc{
    margin-bottom: calc(80 * var(--rpx-50));
}

section.structure img{
    display: block;
    width: 100%;
    height: auto;
}

.milestones{
    background: url("../images/milestone_back.webp") center/cover no-repeat ;
    padding-top: calc(100 * var(--rpx-50));
    padding-bottom: calc(100 * var(--rpx-50));
    color: #fff;
    overflow: hidden;
}


.milestones .content{
    display: flex;
    gap: calc(70 * var(--rpx-50));
}

.milestones .wrapper{
    position: relative;
    padding-bottom: calc(20 * var(--rpx-75));
}

.milestones .left{
    flex: 0 0 auto;
    width: calc(250 * var(--rpx));
    position: relative;
}

.milestones .left .year{
    font-weight: 500;
    font-size: calc(108 * var(--rpx-50));
    position: absolute;
    left: 0;
    top: 0;
}

.milestones .right{
    position: relative;
    flex: 0 0 clamp(660px, calc(31.25vw + 360px), 960px);
}

.milestones .right .events{
    max-height: calc(530 * var(--rpx-50));
    overflow: auto;
    padding-right: calc(20 * var(--rpx));
}


.milestones .right .events::-webkit-scrollbar {
    /*width: 8px;
    border-radius: 4px;*/
    width: 8px;
}

.milestones .right .events::-webkit-scrollbar-thumb {
    border-radius: 3px;
    width: 6px;
    background-color: #fff;
    border: 1px solid #0006;
    opacity: .5;
}

.milestones .right .events::-webkit-scrollbar-track {
    background: #0004;
    width: 8px;
    border-radius: 4px;
}

.milestones .right .events.animating{
    overflow: hidden;
}

.milestones .event{
    background-color: #ffffff99;
    color: #000;
    display: flex;
    padding: calc(20 * var(--rpx-75));
    gap: calc(20 * var(--rpx));
    margin-bottom: calc(30 * var(--rpx));
}

.milestones .cover{
    width: calc(295 * var(--rpx));
    flex: 0 0 auto;
}

.milestones .cover img{
    display: block;
    width: 100%;
    height: auto;
}

.milestones .info{
    flex: 1 1 auto;
}

.milestones .date{
    font-size: calc(28 * var(--rpx));
    margin-bottom: calc(8 * var(--rpx));
    margin-top: 0;
}

.milestones .desc{
    font-size: calc(20 * var(--rpx));
    font-weight: 300;
    color: #00000080;
}

.milestones .split{
    position: relative;
    width: 1px;
    height: 100%;
    background-color: #fff;
}

.milestones .content{
    height: calc(640 * var(--rpx-50));
}

.milestones .year-decoration{
    position: absolute;
    right: calc(-250 * var(--rpx-50));
    opacity: .05;
    font-size: calc(248 * var(--rpx-50));
    pointer-events: none;
    bottom: calc(30 * var(--rpx));
    line-height: 1em;
}

/* milestones */
.milestones .left .year,
.milestones .right .year-decoration,
.milestones .right .events {
    display: none;
}

.milestones .left .year.active,
.milestones .right .year-decoration.active,
.milestones .right .events.active {
    display: block;
}

.milestones .timeline .year-tag {
    cursor: pointer;
}

.milestones .right .btn-prev,
.milestones .right .btn-next {
    cursor: pointer;
    position: absolute;
    bottom: calc(20 * var(--rpx));
    width: calc(50 * var(--rpx-75));
    height: calc(50 * var(--rpx-75));
}

.milestones .right .btn-prev{
    left: 0;
    background: url("../images/btn_milestone_prev.svg") center/cover no-repeat;
}

.milestones .right .btn-next{
    left: calc(70 * var(--rpx-75));
    background: url("../images/btn_milestone_next.svg") center/cover no-repeat;
}

.milestones .right .btn-prev.disabled,
.milestones .right .btn-next.disabled {
    cursor: default;
    opacity: 0.4;
    pointer-events: none;
}

.milestones .timeline{
    position: absolute;
    left: calc(-1 * var(--wrapper-margin));
    bottom: 0;
    width: 100vw;
    height: 3px;
    background-color: #ffffff19;
}

.milestones .years{
    position: absolute;
    left: calc(var(--wrapper-margin) + 250 * var(--rpx) + 70 * var(--rpx-50));
    display: flex;
    gap: calc(54 * var(--rpx-50));
}

.milestones .year-tag{
    display: flex;
    align-items: center;
    height: calc(40 * var(--rpx-75));
    border-radius: calc(20 * var(--rpx-75));
    padding-left: calc(40 * var(--rpx-75));
    padding-right: calc(18 * var(--rpx-75));
    background-color: #00000019;
    transform: translate(-50%, -50%);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
}

.milestones .year-tag::before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(17 * var(--rpx-75));
    margin: auto;
    width: calc(12 * var(--rpx));
    height: calc(12 * var(--rpx));
    border-radius: 50%;
    box-shadow: 0 0 0 calc(2 * var(--rpx)) #fff inset, 0 0 0 calc(2 * var(--rpx)) var(--theme-blue);
    transition: .4s cubic-bezier(0.15, 1, 0.336, 1);
    background-color: var(--theme-blue);
}

.milestones .year-tag.active{
    padding-left: calc(30 * var(--rpx-75));
    padding-right: calc(30 * var(--rpx-75));
    background-color: #EDF2F2;
    color: var(--theme-blue);
}

.milestones .year-tag.active::before{
    left: calc(-6 * var(--rpx));
}

section.contact{
    padding-top: calc(120 * var(--rpx-50));
    padding-bottom: calc(150 * var(--rpx-50));
    background: url("../images/contact_back.webp") center calc(140 * var(--rpx-50))/100% auto no-repeat;
    background-color: #f7f7f7;
}

.contact .content-ctn{
    display: flex;
    align-items: stretch;
}


.contact .section-title{
    margin-bottom: calc(400 * var(--rpx-50));
}

.contact .info{
    width: calc(500 * var(--rpx-75));
    flex: 0 0 auto;
    background: linear-gradient(to right, #C7D1E54c 0%, #ffffff00 100%);
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px);
}

.contact .cover{
    width: calc(100% - 500 * var(--rpx-75));
    flex: 0 0 auto;
}

.contact .cover img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.contact .contact-info{
    color: #000;
    padding: calc(58 * var(--rpx-50)) calc(68 * var(--rpx-50));
    margin-top: 0;
}

.contact .contact-info p:first-of-type{
    font-size: calc(24 * var(--rpx));
    font-weight: 500;
}

.contact .contact-info p:first-of-type strong{
    display: inline-block;
    vertical-align: middle;
    margin-left: .25em;
    font-size: 1rem;
    background-color: var(--theme-blue);
    color: #fff;
    line-height: calc(30em / 16);
    border-radius: calc(15em / 16);
    padding-left: .9rem;
    padding-right: .9rem;
    font-weight: 300;
}

.contact .contact-info ul{
    margin-top: calc(20 * var(--rpx));
}

.contact .contact-info img{
    filter: url(#blue-overlay);
}

.contact .contact-info a:hover{
    color: var(--theme-blue);
}

.contact .map-ctn{
    position: relative;
}

.contact .map-ctn picture,
.contact .map-ctn img{
    display: block;
    width: 100%;
    height: auto;
}

.contact .map-ctn a{
    display: block;
}

.contact .map-ctn a.wfEditorMode{
    display: none;
}
body.wfEditorMode .contact .map-ctn a.wfEditorMode{
    display: block;
}

/* 手机端：about 页面自适应（各区域高度随内容，不固定） */
@media (max-width: 828px) {
    /* 正文统一 1rem */
    .intro .desc,
    .data-item .content,
    section.target .desc,
    section.logo .right .content,
    .msg-ctn .right p,
    .msg-ctn .right .content,
    .swiper-expert .expert .desc,
    .milestones .desc,
    .milestones .date,
    .contact .contact-info p,
    .contact .contact-info li {
        font-size: 1rem;
    }

    .intro .wrapper {
        flex-direction: column;
        gap: calc(40 * var(--rpx));
    }

    .intro .left,
    .intro .right {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .intro .left {
        order: 1;
    }

    .intro .right {
        order: 0;
        aspect-ratio: 16/10;
        min-height: auto;
    }

    .intro .right .figure {
        width: 90%;
        bottom: calc(30 * var(--rpx));
    }

    .intro .right::after {
        height: calc(200 * var(--rpx));
    }

    /* rpx 字号在手机端为电脑端 1.5 倍 */
    .section-title {
        font-size: calc(78 * var(--rpx-50));
    }

    /* data：四列改 2x2 */
    .data-list {
        flex-wrap: wrap;
        gap: 0;
    }

    .data-item {
        flex: 0 0 50%;
        width: 50%;
        padding: calc(20 * var(--rpx)) calc(16 * var(--rpx));
        border-right: 1px solid #dadada;
        border-bottom: 1px solid #dadada;
        box-sizing: border-box;
    }

    .data-item:nth-of-type(2n) {
        border-right: none;
    }

    .data-item:nth-last-of-type(1),
    .data-item:nth-last-of-type(2) {
        border-bottom: none;
    }

    .data-item .num {
        font-size: calc(120 * var(--rpx-50));
    }

    /* target */
    section.target .desc {
        max-width: 100%;
    }

    section.target .desc p{
        white-space: unset;
    }

    /* logo：左右改上下 */
    section.logo {
        flex-direction: column;
    }

    section.logo .left,
    section.logo .right {
        flex: 0 0 auto;
        width: 100%;
        padding-left: var(--wrapper-margin);
        padding-right: var(--wrapper-margin);
    }

    section.logo .left img {
        max-width: 80%;
        margin: 0 auto;
    }

    /* leaders：msg-ctn 左右改上下 */
    .msg-ctn {
        flex-direction: column;
        align-items: center;
        background-color: transparent;
    }

    .msg-ctn .left {
        flex: 0 0 auto;
        width: 100%;
        max-width: 60%;
    }

    .msg-ctn .left img {
        width: 100%;
    }

    .msg-ctn .right {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        background-position: calc(100% - 40px) calc(100% - 40px);
        background-size: calc(120 * var(--rpx)) auto;
    }

    .msg-ctn .right .content {
        max-height: none;
    }

    .msg-ctn .right h2 {
        font-size: calc(48 * var(--rpx));
    }


    .experts {
        margin-top: calc(80 * var(--rpx-50));
    }

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

    .expert-tab .tab-header {
        gap: calc(40 * var(--rpx-50));
    }

    .expert-tab .tab {
        font-size: calc(36 * var(--rpx));
        padding: calc(16 * var(--rpx));
    }

    .swiper-expert .expert .name {
        font-size: calc(36 * var(--rpx));
    }

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


    /* milestones：左右改上下，年份标签横向可滚动 */
    .milestones .content {
        flex-direction: column;
        gap: calc(40 * var(--rpx));
        height: auto;
    }

    .milestones .left {
        width: 100%;
        position: relative;
        height: auto;
        min-height: auto;
    }

    .milestones .left .year {
        position: static;
        font-size: calc(162 * var(--rpx-50));
        display: none;
    }

    .milestones .left .year.active {
        display: block;
    }

    .milestones .split {
        display: none;
    }

    .milestones .wrapper{
        padding-bottom: calc(80 * var(--rpx));
    }

    .milestones .right {
        flex: 0 0 auto;
        width: 100%;
        padding-bottom: calc(120 * var(--rpx));
    }

    .milestones .right .events {
        max-height: none;
        height: 60vh;
        overflow: auto;
    }

    .milestones .event {
        flex-direction: column;
        align-items: center;
        gap: calc(20 * var(--rpx));
        margin-bottom: calc(24 * var(--rpx));
    }

    .milestones .cover {
        width: 60%;
        flex: 0 0 auto;
    }

    .milestones .cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .milestones .timeline {
        left: calc(-1 * var(--wrapper-margin));
        width: 100vw;
    }

    .milestones .years {
        left: var(--wrapper-margin);
        right: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .milestones .year-tag {
        flex-shrink: 0;
    }

    .milestones .year-decoration {
        display: none;
    }

    /* contact */
    section.contact {
        background-size: 250%;
        background-position-x: 80%;

    }

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

    .contact .content-ctn {
        flex-direction: column;
    }

    .contact .info {
        width: 100%;
    }

    .contact .cover {
        width: 100%;
        height: calc(360 * var(--rpx));
    }

    .contact .cover img{
        object-position: left;
    }

    .contact .contact-info {
        padding-left: calc(24 * var(--rpx));
        padding-right: calc(24 * var(--rpx));
    }

    .contact .contact-info p:first-of-type{
        font-size: calc(36 * var(--rpx));
    }
}