/* ==========================================================================
   about.css — styles for the about page (about.html)
   Split out of style.css. Loaded AFTER style.css, so these rules win on this page.
   Shared blocks are copies here; the originals stay in style.css for other pages.
   ========================================================================== */

/* ========== About Template ========== */
.about-template {
    background: #f3f6f8;
}
.about-content {
    background: #f3f6f8;
}
.about-content-inner {
    max-width: 1224px;
    padding-top: 0;
    padding-bottom: 0;
}
.about-section {
    margin-bottom: clamp(36px, 3.3333vw, 64px);
}
.about-section:last-child {
    margin-bottom: 0;
}
.about-section h2 {
    margin: 0 0 clamp(10px, 0.9375vw, 18px);
    color: #101828;
    font-size: clamp(17px, 1.5625vw, 30px);
    font-weight: 800;
    letter-spacing: 0;
}
.about-section .about-design-title {
    margin: 0;
    color: #1D2129;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(27px, 2.5vw, 48px);
    font-weight: 700;
    line-height: 1.05;
    text-align: center;
    letter-spacing: 0;
}
.about-section h2 span {
    font-size: .72em;
    font-weight: 800;
}
.about-intro-section {
    min-height: clamp(333px, 30.8333vw, 592px);
    margin: 0;
    background:
        url("../img/about/about-intro-worldmap-bg.webp") center top / 100% auto no-repeat,
        url("../img/about/about-intro-cityscape-bg.webp?v=3") center bottom / 100% auto no-repeat,
        #e4eaf9;
}
.about-intro-inner {
    position: relative;
    width: min(1200px, calc(100vw - 64px));
    height: clamp(333px, 30.8333vw, 592px);
    margin: 0 auto;
    padding: clamp(49px, 4.53vw, 87px) 0 0;
}
.about-intro-copy {
    position: revert;
    /* left: 4px; */
    /* top: 87px; */
    width: clamp(676px, 62.5vw, 1200px);
}
.about-intro-copy h2 {
    margin: 0 0 clamp(26px, 2.4vw, 46px);
    color: #044ff6;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(18px, 1.67vw, 32px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}
.about-intro-copy p {
    margin: 0;
    color: #232A3A;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: clamp(17px, 1.5625vw, 30px);
    letter-spacing: 0;
}
.about-story-section {
    margin-top: clamp(55px, 5.1vw, 98px);
    margin-bottom: 0;
    padding-bottom: clamp(102px, 9.48vw, 182px);
}
.about-story-stage {
    position: relative;
    width: clamp(675px, 62.5vw, 1200px);
    max-width: 100%;
    height: clamp(287px, 26.56vw, 510px);
    margin: clamp(59px, 5.47vw, 105px) auto 0;
    display: flex;
}
.about-story-visual {
    position: relative;
    left: 0;
    top: 0;
    z-index: 1;
    width: auto;
    height: clamp(287px, 26.56vw, 510px);
    object-fit: cover;
    display: block;
}
.about-story-copy {
    position: relative;
    /* left: 561px; */
    /* top: 12px; */
    z-index: 3;
    width: 100%;
    padding: clamp(7px, 0.63vw, 12px) 0 0 clamp(57px, 5.26vw, 101px);
}
.about-story-copy h3 {
    margin: 0 0 clamp(31px, 2.86vw, 55px);
    color: #044ff6;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(18px, 1.67vw, 32px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0;
}
.about-story-copy p {
    margin: 0;
    color: #4B5B6D;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(9px, 0.83vw, 16px);
    font-weight: 400;
    line-height: clamp(14px, 1.25vw, 24px);
    letter-spacing: 0;
}
.about-story-quote {
    position: absolute;
    left: 0px;
    bottom: 0px;
    /* z-index: 2; */
    width: 100%;
    /* max-width: calc(100% - 1px); */
    height: clamp(45px, 4.17vw, 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #044ff6 url("../img/about/about-story-quote-bar.png") center / 100% 100% no-repeat;
}
.about-story-quote p {
    /* position: absolute; */
    left: clamp(315px, 29.1667vw, 560px);
    top: clamp(16px, 1.5104vw, 29px);
    margin: 0;
    color: #FFFFFF;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(11px, 1.04vw, 20px);
    font-weight: 400;
    line-height: clamp(17px, 1.5625vw, 30px);
    letter-spacing: 0;
}
.about-history-section {
    min-height: clamp(493px, 45.625vw, 876px);
    margin: 0 0 clamp(87px, 8.02vw, 154px);
    padding: clamp(83px, 7.66vw, 147px) 0 clamp(74px, 6.88vw, 132px);
    background: #e4eaf9;
}
.about-history-inner {
    width: min(1200px, calc(100vw - 64px));
    margin: 0 auto;
}
.about-history-subtitle {
    margin: clamp(16px, 1.46vw, 28px) 0 0;
    color: #666666;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 300;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0;
}
.about-history-axis {
    position: relative;
    height: 100%;
    margin-top: clamp(55px, 5.05vw, 97px);
}
.about-history-axis::before {
    content: "";
    position: absolute;
    left: clamp(21px, 1.9792vw, 38px);
    right: clamp(16px, 1.4583vw, 28px);
    top: clamp(24px, 2.24vw, 43px);
    height: clamp(1px, 0.1042vw, 2px);
    background: #d9e0eb;
}
.about-history-years {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}
.about-history-years li {
    position: relative;
    width: clamp(32px, 2.9167vw, 56px);
    padding-bottom: clamp(22px, 2.03vw, 39px);
    color: #4f576b;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 700;
    line-height: 1;
    text-align: center;
    letter-spacing: 0;
}
.about-history-years button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
}
.about-history-years button:focus-visible {
    outline: 2px solid #044ff6;
    outline-offset: 6px;
}
.about-history-years li::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: clamp(5px, 0.4167vw, 8px);
    width: clamp(11px, 0.9896vw, 19px);
    height: clamp(11px, 0.9896vw, 19px);
    transform: translateX(-50%);
    border: 3px solid #044ff6;
    border-radius: 50%;
    background: #fff;
    transition:
        width .22s ease,
        height .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        transform .22s ease;
}
.about-history-years li.is-active::after {
    bottom: clamp(4px, 0.3646vw, 7px);
    width: clamp(12px, 1.15vw, 22px);
    height: clamp(12px, 1.15vw, 22px);
    border: 0;
    background: #044ff6;
    transform: translateX(-50%) scale(1.08);
}
.about-history-card-wrap {
    position: relative;
    width: clamp(581px, 53.8021vw, 1033px);
    max-width: calc(100% - 166px);
    height: clamp(164px, 15.2083vw, 292px);
    margin: clamp(24px, 2.1875vw, 42px) auto 0;
}
.about-history-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    width: 100%;
    height: 100%;
    padding: clamp(37px, 3.3854vw, 65px) clamp(53px, 4.8958vw, 94px);
    border-radius: clamp(10px, 0.9375vw, 18px);
    background: url("../img/about/about-history-panel.png") center / 100% 100% no-repeat;
    background-clip: padding-box;
    color: #fff;
    transform: translateZ(0);
    will-change: transform, filter;
    transition:
        transform .42s cubic-bezier(.2, .8, .2, 1),
        filter .42s cubic-bezier(.2, .8, .2, 1),
        box-shadow .42s cubic-bezier(.2, .8, .2, 1);
}
.about-history-card::before {
    content: "";
    position: absolute;
    inset: -34% -18%;
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    background:
        linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .32) 49%, transparent 64%),
        radial-gradient(circle at 74% 28%, rgba(126, 211, 255, .22), transparent 34%);
    transform: translate3d(-45%, 0, 0) skewX(-10deg);
}
.about-history-card.is-animating {
    transform: translate3d(0, -6px, 0) scale(1.01);
    filter: saturate(1.06) brightness(1.04);
    box-shadow: 0 24px 56px rgba(14, 68, 172, .18);
}
.about-history-card.is-animating::before {
    animation: aboutHistorySheen .72s cubic-bezier(.2, .8, .2, 1) both;
}
.about-history-year {
    position: relative;
    z-index: 1;
    margin: 0 0 clamp(15px, 1.4063vw, 27px);
    color: #9bbaff;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(20px, 1.875vw, 36px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    will-change: opacity, transform;
    transition:
        opacity .18s ease,
        transform .18s cubic-bezier(.2, .8, .2, 1);
}
.about-history-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 clamp(9px, 0.8333vw, 16px);
    color: #fff;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(20px, 1.875vw, 36px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    will-change: opacity, transform;
    transition:
        opacity .18s ease,
        transform .18s cubic-bezier(.2, .8, .2, 1);
}
.about-history-desc {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-family: "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(14px, 1.25vw, 24px);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0;
    will-change: opacity, transform;
    transition:
        opacity .18s ease,
        transform .18s cubic-bezier(.2, .8, .2, 1);
}
.about-history-card.is-exiting .about-history-year,
.about-history-card.is-exiting h3,
.about-history-card.is-exiting .about-history-desc {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
}
.about-history-card.is-entering .about-history-year,
.about-history-card.is-entering h3,
.about-history-card.is-entering .about-history-desc {
    animation: aboutHistoryTextIn .38s cubic-bezier(.2, .8, .2, 1) both;
}
.about-history-card.is-entering h3 {
    animation-delay: .04s;
}
.about-history-card.is-entering .about-history-desc {
    animation-delay: .08s;
}
.about-history-arrow {
    position: absolute;
    top: clamp(59px, 5.4688vw, 105px);
    z-index: 2;
    width: clamp(51px, 4.6875vw, 90px);
    height: clamp(51px, 4.6875vw, 90px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateZ(0);
    transition:
        transform .22s cubic-bezier(.2, .8, .2, 1),
        filter .22s ease,
        opacity .22s ease;
}
.about-history-arrow:hover,
.about-history-arrow:focus-visible {
    filter: drop-shadow(0 10px 18px rgba(4, 79, 246, .18));
    opacity: .96;
}
.about-history-arrow-left:hover,
.about-history-arrow-left:focus-visible {
    transform: translate3d(-3px, -2px, 0);
}
.about-history-arrow-right:hover,
.about-history-arrow-right:focus-visible {
    transform: translate3d(3px, -2px, 0);
}
.about-history-arrow img {
    display: block;
    width: 100%;
    height: 100%;
}
.about-history-arrow-left {
    left: -103px;
}
.about-history-arrow-right {
    right: -99px;
}
@media (prefers-reduced-motion: reduce) {
    .about-history-years li::after,
    .about-history-card,
    .about-history-year,
    .about-history-card h3,
    .about-history-desc,
    .about-history-arrow {
        animation: none !important;
        transition: none !important;
    }

    .about-history-card.is-animating,
    .about-history-card.is-exiting .about-history-year,
    .about-history-card.is-exiting h3,
    .about-history-card.is-exiting .about-history-desc,
    .about-history-card.is-entering .about-history-year,
    .about-history-card.is-entering h3,
    .about-history-card.is-entering .about-history-desc,
    .about-history-arrow:hover,
    .about-history-arrow:focus-visible {
        transform: none;
        filter: none;
        opacity: 1;
    }
}
.about-advantages-section {
    margin-bottom: 0;
    padding-bottom: clamp(54px, 5vw, 96px);
}
.about-advantages-section .about-design-title {
    margin-bottom: clamp(48px, 4.43vw, 85px);
}
.about-advantages {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: clamp(20px, 1.667vw, 32px);
    width: min(1224px, 100%);
    margin: 0 auto;
}
.advantage-item {
    position: relative;
    overflow: hidden;
    min-width: 0;
    color: #25334c;
    border: 1px solid #e1f2ff;
    border-radius: clamp(7px, 0.625vw, 12px);
    background: linear-gradient(180deg, #E1F2FF 0%, #fff 100%);
    box-shadow: 0 4px 12px rgba(140, 175, 210, .2);
    transition: transform .18s, box-shadow .18s;
}
.advantage-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(44, 89, 150, .18);
}
.advantage-item-wide {
    grid-column: span 3;
    min-height: clamp(105px, 9.6875vw, 186px);
    padding: clamp(29px, 2.7083vw, 52px) clamp(124px, 11.4583vw, 220px) clamp(18px, 1.6667vw, 32px) clamp(26px, 2.4479vw, 47px);
}
.advantage-item-compact {
    grid-column: span 2;
    min-height: clamp(137px, 12.7083vw, 244px);
    padding: clamp(73px, 6.7708vw, 130px) clamp(20px, 1.875vw, 36px) clamp(16px, 1.4583vw, 28px);
    text-align: center;
}
.advantage-item h3 {
    margin: 0 0 clamp(11px, 0.99vw, 19px);
    color: #2051ff;
    font-family: "MiSans", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(11px, 1.04vw, 20px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}
.advantage-item p {
    margin: 0;
    color: #6c788b;
    font-family: "MiSans", "Microsoft YaHei", Arial, sans-serif;
    font-size: clamp(8px, 0.73vw, 14px);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 0;
}
.advantage-icon {
    position: absolute;
    display: block;
    object-fit: contain;
}
.advantage-icon-license {
    right: clamp(35px, 3.2292vw, 62px);
    top: clamp(24px, 2.1875vw, 42px);
    width: clamp(57px, 5.3125vw, 102px);
    height: clamp(52px, 4.8438vw, 93px);
}
.advantage-icon-threshold {
    right: clamp(38px, 3.5417vw, 68px);
    top: clamp(26px, 2.4479vw, 47px);
    width: clamp(63px, 5.8333vw, 112px);
    height: clamp(47px, 4.3229vw, 83px);
}
.advantage-icon-cost {
    left: 50%;
    top: clamp(20px, 1.875vw, 36px);
    width: clamp(46px, 4.2708vw, 82px);
    height: clamp(44px, 4.1146vw, 79px);
    transform: translateX(-50%);
}
.advantage-icon-safety {
    left: 50%;
    top: clamp(20px, 1.8229vw, 35px);
    width: clamp(57px, 5.3125vw, 102px);
    height: clamp(44px, 4.0625vw, 78px);
    transform: translateX(-50%);
}
.advantage-icon-innovation {
    left: 50%;
    top: clamp(17px, 1.6146vw, 31px);
    width: clamp(44px, 4.0625vw, 78px);
    height: clamp(48px, 4.4271vw, 85px);
    transform: translateX(-50%);
}
/* ========== Responsive ========== */
@media (max-width: 860px) {
    .about-content-inner {
        padding-top: 0;
        padding-bottom: 64px;
    }

    .about-section {
        margin-bottom: 46px;
    }

    .about-section h2 {
        font-size: 26px;
    }
}
@media (max-width: 860px) {
    .about-section h2 span {
        font-size: .68em;
    }

    .about-intro-section {
        min-height: 0;
        margin-bottom: 72px;
    }

    .about-intro-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        align-items: center;
        gap: 28px;
        height: auto;
        min-height: 0;
        padding: 70px 0;
    }

    .about-intro-copy,
    .about-intro-visual {
        position: static;
        width: 100%;
    }

    .about-intro-copy h2 {
        margin-bottom: 32px;
        font-size: 28px;
    }

    .about-intro-copy p {
        font-size: 15px;
        line-height: 1.8;
    }

    .about-section .about-design-title {
        font-size: 34px;
    }

    .about-story-section {
        padding-bottom: 80px;
    }

    .about-story-stage {
        display: grid;
        grid-template-columns: minmax(260px, 42%) 1fr;
        gap: 32px;
        height: auto;
        margin-top: 48px;
        padding-bottom: 76px;
    }

    .about-story-visual,
    .about-story-copy {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
    }

    .about-story-visual {
        height: auto;
        aspect-ratio: 460 / 510;
    }

    .about-story-copy h3 {
        margin-bottom: 24px;
        font-size: 28px;
    }

    .about-story-copy p {
        font-size: 15px;
        line-height: 1.7;
    }

    .about-story-quote {
        left: 0;
        top: auto;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: 64px;
    }

    .about-story-quote p {
        left: calc(42% + 32px);
        right: 18px;
        top: 18px;
        font-size: 16px;
        line-height: 1.45;
    }

    .about-history-section {
        min-height: 0;
        margin-bottom: 72px;
        padding: 80px 0;
    }

    .about-history-inner {
        width: min(1200px, calc(100vw - 32px));
    }

    .about-history-subtitle {
        font-size: 20px;
    }

    .about-history-axis {
        height: 70px;
        margin-top: 58px;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .about-history-axis::before {
        left: 34px;
        right: 34px;
    }

    .about-history-years {
        min-width: 860px;
    }

    .about-history-card-wrap {
        width: calc(100% - 72px);
        max-width: 760px;
        height: 220px;
        margin-top: 34px;
    }

    .about-history-card {
        padding: 44px 54px;
    }

    .about-history-year,
    .about-history-card h3 {
        font-size: 30px;
    }

    .about-history-desc {
        font-size: 18px;
    }

    .about-history-arrow {
        top: 82px;
        width: 56px;
        height: 56px;
    }

    .about-history-arrow-left {
        left: -32px;
    }

    .about-history-arrow-right {
        right: -32px;
    }

    .about-advantages-section .about-design-title {
        margin-bottom: 42px;
    }

    .about-advantages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .advantage-item-wide,
    .advantage-item-compact {
        grid-column: span 1;
        min-height: 220px;
        padding: 116px 28px 26px;
        text-align: center;
    }

    .advantage-item h3 {
        font-size: 18px;
    }

    .advantage-item p {
        font-size: 13px;
        line-height: 1.45;
    }

    .advantage-icon-license,
    .advantage-icon-threshold,
    .advantage-icon-cost,
    .advantage-icon-safety,
    .advantage-icon-innovation {
        left: 50%;
        right: auto;
        top: 28px;
        transform: translateX(-50%);
    }
}
@media (max-width: 560px) {
    .about-section h2 {
        font-size: 22px;
    }

    .about-section h2 span {
        font-size: .65em;
    }

    .about-section {
        margin-bottom: 36px;
    }

    .about-content-inner {
        padding-top: 0;
        padding-bottom: 48px;
    }

    .about-intro-section {
        margin-bottom: 44px;
    }

    .about-intro-inner {
        display: block;
        width: min(1200px, calc(100vw - 32px));
        padding: 42px 0;
    }

    .about-intro-copy h2 {
        margin-bottom: 22px;
        font-size: 22px;
        line-height: 1.25;
    }

    .about-intro-copy p {
        font-size: 14px;
        line-height: 1.75;
    }

    .about-section .about-design-title {
        font-size: 28px;
    }

    .about-story-section {
        padding-bottom: 52px;
    }

    .about-story-stage {
        display: block;
        margin-top: 32px;
        padding-bottom: 0;
    }

    .about-story-visual {
        width: 100%;
    }

    .about-story-copy {
        margin-top: 24px;
    }

    .about-story-copy h3 {
        margin-bottom: 18px;
        font-size: 24px;
    }

    .about-story-copy p {
        font-size: 14px;
        line-height: 1.7;
    }

    .about-story-quote {
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 70px;
        margin-top: 24px;
        padding: 18px 16px;
    }

    .about-story-quote p {
        position: static;
        font-size: 15px;
        line-height: 1.45;
    }

    .about-history-section {
        margin-bottom: 52px;
        padding: 56px 0;
    }

    .about-history-subtitle {
        margin-top: 14px;
        font-size: 16px;
    }

    .about-history-axis {
        margin-top: 38px;
    }

    .about-history-years {
        min-width: 760px;
    }

    .about-history-years li {
        font-size: 18px;
    }

    .about-history-card-wrap {
        width: calc(100% - 28px);
        height: 210px;
    }

    .about-history-card {
        padding: 36px 28px;
    }

    .about-history-year,
    .about-history-card h3 {
        font-size: 26px;
    }

    .about-history-desc {
        font-size: 15px;
        line-height: 1.5;
    }

    .about-history-arrow {
        display: none;
    }

    .about-advantages-section {
        padding-bottom: 52px;
    }

    .about-advantages-section .about-design-title {
        margin-bottom: 30px;
    }

    .about-advantages {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .advantage-item-wide,
    .advantage-item-compact {
        min-height: 190px;
        padding: 104px 20px 22px;
    }

    .advantage-item h3 {
        font-size: 17px;
    }

    .advantage-item p {
        font-size: 13px;
        line-height: 1.45;
    }

    .advantage-icon-license,
    .advantage-icon-threshold,
    .advantage-icon-safety {
        width: 82px;
        height: auto;
    }

    .advantage-icon-cost,
    .advantage-icon-innovation {
        width: 70px;
        height: auto;
    }
}
/* ========== About mobile layout (<1080px) ========== */
.about-mobile-title-gap {
    display: none;
}
@media (max-width:1080px) {
    body .about-template {
        overflow: hidden;
        background: #fff;
    }

    body .about-content {
        background: #fff;
    }

    body .about-content-inner {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    body .about-section {
        margin: 0;
    }

    body .about-section .about-design-title {
        color: #1d2129;
        font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(19px, 5.19vw, 56px);
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: 0;
        text-align: center;
    }

    body .about-intro-section {
        min-height: 0;
        height: 136.204vw;
        max-height: 1471px;
        margin: 0 0 12.87vw;
        background:
            url("../img/about/about-intro-mobile-market-bg.webp") center top / 100% auto no-repeat,
            url("../img/about/about-intro-mobile-cityscape-bg.webp") center calc(100% + 7.41vw) / 100% auto no-repeat,
            #e4eaf9;
    }

    body .about-intro-inner {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        padding: 0;
    }

    body .about-intro-copy {
        position: static;
        width: 100%;
        padding-top: clamp(32px, 8.43vw, 91px);
        text-align: center;
    }

    body .about-intro-copy h2 {
        margin: 0 0 5.09vw;
        color: #044FF6;
        font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(18px, 5.185vw, 56px);
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    body .about-intro-copy p {
        width: 90.18vw;
        max-width: 974px;
        margin: 0 auto;
        color: #4b5b6d;
        font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(13px, 3.33vw, 36px);
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0;
        text-align: center;
    }

    body .about-story-section {
        padding: 0;
        background: #fff;
        overflow: hidden;
    }

    body .about-story-section > .about-design-title {
        display: none;
    }

    body .about-story-stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        max-width: none;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        isolation: isolate;
    }

    body .about-story-copy {
        position: relative;
        left: auto;
        top: auto;
        display: contents;
        margin: 0;
        padding: 0;
        text-align: center;
    }

    body .about-story-copy h3 {
        order: 1;
        width: 75.29vw;
        max-width: 813px;
        margin: 0 0 clamp(20px, 5.33vw, 58px);
        color: #044ff6;
        font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(18px, 5.185vw, 56px);
        font-weight: 700;
        line-height: 1.1;
        letter-spacing: 0;
        white-space: nowrap;
    }

    body .about-story-copy h3 br {
        display: none;
    }

    body .about-mobile-title-gap {
        display: inline-block;
        width: .45em;
    }

    body .about-story-copy p {
        order: 2;
        /* width: 75.29vw; */
        /* max-width: 813px; */
        padding: 0 clamp(33px, 8.7vw, 94px) 0 clamp(25px, 6.76vw, 73px);
        margin: 0;
        color: #4b5b6d;
        font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(13px, 3.33vw, 36px);
        font-weight: 400;
        line-height: 1.72;
        letter-spacing: 0;
        text-align: center;
    }

    body .about-story-visual {
        position: relative;
        left: auto;
        top: auto;
        order: 3;
        width: 42.35vw;
        max-width: 457px;
        height: auto;
        max-height: none;
        margin-top: clamp(28px, 7.59vw, 82px);
        object-fit: contain;
        z-index: 3;
    }

    body .about-story-quote {
        position: relative;
        left: auto;
        top: auto;
        order: 4;
        width: 100vw;
        max-width: none;
        height: clamp(58px, 15.53vw, 168px);
        max-height: none;
        min-height: clamp(68px, 18.06vw, 195px);
        margin-top: clamp(-25px, -6.67vw, -72px);
        padding: 0 clamp(14px, 3.7vw, 40px) clamp(10px, 2.82vw, 30px);
        display: flex;
        align-items: flex-end;
        justify-content: center;
        background: #044ff6 url("../img/about/about-story-quote-bar.png") center / 100% 100% no-repeat;
        box-sizing: border-box;
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: end;
    }

    body .about-story-quote p {
        position: static;
        margin: 0;
        color: #fff;
        font-family: "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(10px, 2.59vw, 28px);
        font-weight: 400;
        line-height: 1.45;
        text-align: center;
        white-space: normal;
    }

    body .about-history-section {
        min-height: 0;
        margin: 0;
        padding: clamp(39px, 10.28vw, 111px) 0 clamp(51px, 13.61vw, 147px);
        background: #e4eaf9;
    }

    body .about-history-inner {
        width: 100%;
        margin: 0 auto;
    }

    body .about-history-subtitle {
        margin: clamp(11px, 2.87vw, 31px) 0 0;
        color: #666;
        font-size: clamp(11px, 2.96vw, 32px);
        font-weight: 300;
        line-height: 1;
        text-align: center;
    }

    body .about-history-axis {
        position: relative;
        width: 95.37vw;
        height: 5.2vw;
        margin: 9.54vw auto 0;
        overflow: visible;
    }

    body .about-history-axis::before {
        left: 3.43vw;
        right: 2.5vw;
        top: 3.61vw;
        height: 1px;
        background: #d9e0eb;
    }

    body .about-history-years {
        display: flex;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    body .about-history-years li {
        width: 5.19vw;
        padding-bottom: 3.98vw;
        color: #4f576b;
        font-size: clamp(8px, 2.222vw, 24px);
        font-weight: 700;
        line-height: 1;
    }

    body .about-history-years li::after {
        bottom: .28vw;
        width: 1.57vw;
        height: 1.57vw;
        border: 1px solid #044ff6;
        background: #e4eaf9;
    }

    body .about-history-years li.is-active::after {
        bottom: .09vw;
        width: 1.76vw;
        height: 1.76vw;
        border: 0;
        background: #044ff6;
        transform: translateX(-50%);
    }

    body .about-history-card-wrap {
        width: 76.2vw;
        max-width: 823px;
        height: auto;
        max-height: 273px;
        margin: 4.08vw auto 0;
    }

    body .about-history-card {
        width: 100%;
        height: 100%;
        padding: clamp(19px, 5.19vw, 56px) 3.8vw clamp(25px, 6.67vw, 72px) 3.8vw;
        border-radius: 3.33vw;
        box-sizing: border-box;
    }

    body .about-history-year {
        margin: 0 0 2.69vw;
        color: #9bbaff;
        font-size: clamp(10px, 2.78vw, 30px);
        line-height: 1;
    }

    body .about-history-card h3 {
        margin: 0 0 clamp(8px, 2.22vw, 24px);
        color: #fff;
        font-size: clamp(15px, 3.89vw, 42px);
        line-height: 1;
    }

    body .about-history-desc {
        margin: 0;
        color: #fff;
        font-size: clamp(10px, 2.59vw, 28px);
        line-height: 1.4;
    }

    body .about-history-arrow {
        display: block;
        top: 8.7vw;
        width: 7.87vw;
        max-width: 85px;
        height: 7.87vw;
        max-height: 85px;
    }

    body .about-history-arrow-left {
        left: -10.28vw;
    }

    body .about-history-arrow-right {
        right: -9.81vw;
    }

    body .about-advantages-section {
        margin: 0;
        padding: 9.54vw 0 7.69vw;
        background: #f3f6f8;
    }

    body .about-advantages-section .about-design-title {
        margin: 0 0 6.76vw;
    }

    body .about-advantages {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.57vw 2.31vw;
        width: 91.76vw;
        max-width: 991px;
        margin: 0 auto;
    }

    body .about-template .advantage-item {
        min-width: 0;
        border: 1px solid #e1f2ff;
        border-radius: 2.22vw;
        background: radial-gradient(circle at 50% 0%, #e1f2ff 0%, #f4fbff 42%, #fff 100%);
        box-shadow: 0 1.11vw 3.33vw rgba(140, 175, 210, .2);
        box-sizing: border-box;
    }

    body .about-template .advantage-item:hover {
        transform: none;
        box-shadow: 0 1.11vw 3.33vw rgba(140, 175, 210, .2);
    }

    body .about-template .advantage-item-wide,
    body .about-template .advantage-item-compact {
        grid-column: span 1;
        min-height: 35.46vw;
        padding: 18.15vw 4vw 4vw;
        text-align: center;
    }

    body .about-template .advantage-item-compact:last-child {
        grid-column: span 2;
        min-height: 24.91vw;
        padding: 6.67vw 39vw 4vw 6.85vw;
        text-align: left;
    }

    body .about-template .advantage-item h3 {
        margin: 0 0 2.04vw;
        color: #2051ff;
        font-family: MiSans, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(12px, 3.333vw, 36px);
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    body .about-template .advantage-item p {
        margin: 0;
        color: #6c788b;
        font-family: MiSans, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
        font-size: clamp(8px, 2.22vw, 24px);
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0;
    }

    body .about-template .advantage-icon {
        position: absolute;
        display: block;
        object-fit: contain;
        transform: translateX(-50%);
    }

    body .about-template .advantage-icon-license {
        left: 50%;
        right: auto;
        top: 5vw;
        width: 11.48vw;
        height: 10.37vw;
    }

    body .about-template .advantage-icon-threshold {
        left: 50%;
        right: auto;
        top: 5.65vw;
        width: 12.41vw;
        height: 9.17vw;
    }

    body .about-template .advantage-icon-cost {
        left: 50%;
        top: 5.09vw;
        width: 10.46vw;
        height: 10.09vw;
    }

    body .about-template .advantage-icon-safety {
        left: 50%;
        top: 5.09vw;
        width: 13.15vw;
        height: 10vw;
    }

    body .about-template .advantage-icon-innovation {
        left: auto;
        right: 12.31vw;
        top: 5.19vw;
        width: 11.85vw;
        height: 12.78vw;
        transform: none;
    }
}