/* Application PSD: 1920px canvas. Shared header/footer remain homepage components. */
.apppage {
    background: #fff;
    color: #333;
    overflow: clip
}

.apppage-container {
    width: calc(1724 * var(--u));
    margin-inline: auto
}

.apppage-banner {
    height: calc(989 * var(--u));
    background: #071021
}

.apppage-outline,.apppage-outline6 {
    position: absolute;
    left: calc(94 * var(--u));
    top: calc(384 * var(--u));
    width: calc(1046 * var(--u));
    height: calc(110 * var(--u));
    max-width: none
}

.apppage-banner h1 {
    position: absolute;
    left: calc(98 * var(--u));
    top: calc(458 * var(--u));
    font-size: calc(50 * var(--u));
    line-height: calc(78 * var(--u));
    font-weight: 500
}

.apppage-banner>p {
    position: absolute;
    left: calc(97 * var(--u));
    top: calc(583 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: calc(36 * var(--u))
}

.apppage-tabs {
    height: calc(103 * var(--u));
    background: #fff;
    border-bottom: 1px solid #eee
}

.apppage-tabs .apppage-container {
    gap: calc(87 * var(--u));
    height: 100%
}

.apppage-tabs a {
    display: flex;
    align-items: center;
    font-size: calc(18 * var(--u));
    line-height: calc(30 * var(--u));
    font-weight: 400;
    border-bottom: calc(4 * var(--u)) solid transparent;
    white-space: nowrap
}

.apppage-tabs a[aria-current] {
    color: #8b1638;
    border-color: #8b1638
}

.apppage-intro {
    height: calc(529 * var(--u));
    background: #fff url('../image/application/intro-bg.jpg') center/100% 100%;
    text-align: center;
    scroll-margin-top: var(--header-height)
}

.apppage-intro h2 {
    position: absolute;
    left: calc(-4 * var(--u));
    top: calc(110 * var(--u));
    width: 100%;
    font-size: calc(44 * var(--u));
    line-height: calc(72 * var(--u));
    font-weight: 500
}

.apppage-intro h3 {
    position: absolute;
    left: 0;
    top: calc(200 * var(--u));
    width: 100%;
    font-size: calc(32 * var(--u));
    line-height: calc(48 * var(--u));
    font-weight: 500
}

.apppage-intro>p {
    position: absolute;
    left: calc(464 * var(--u));
    top: calc(291 * var(--u));
    width: calc(1015 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(39 * var(--u))
}

.apppage-section-title {
    position: absolute;
    left: calc(100 * var(--u));
    font-size: calc(42 * var(--u));
    line-height: calc(63 * var(--u));
    font-weight: 500
}

.apppage-value {
    height: calc(1055 * var(--u));
    background: #000 url('../image/application/value-bg.jpg') center/100% 100%;
    overflow: hidden
}

.apppage-value>.apppage-section-title {
    top: calc(96 * var(--u))
}

.apppage-value-photo {
    position: absolute;
    left: calc(98 * var(--u));
    top: calc(282 * var(--u));
    width: calc(829 * var(--u));
    height: calc(555 * var(--u));
    border-radius: calc(10 * var(--u));
    object-fit: cover
}

.apppage-value-copy {
    position: absolute;
    left: calc(959 * var(--u));
    top: calc(286 * var(--u));
    width: calc(862 * var(--u));
    height: calc(548 * var(--u));
    border-radius: calc(10 * var(--u));
    background: #ffffff1c;
    overflow: hidden
}

.apppage-value-copy::after {
    content: '';
    position: absolute;
    left: 0;
    top: calc(271 * var(--u));
    width: 100%;
    height: 1px;
    background: #ffffff10
}

.apppage-value-item h3 {
    position: absolute;
    left: calc(98 * var(--u));
    top: calc(69 * var(--u));
    font-size: calc(28 * var(--u));
    line-height: calc(42 * var(--u));
    font-weight: 500;
    white-space: nowrap;
    color: #fff
}

.apppage-value-item h3 img {
    position: absolute;
    left: calc(-40 * var(--u));
    top: calc(9 * var(--u));
    width: calc(25 * var(--u));
    height: calc(25 * var(--u))
}

.apppage-value-item>p {
    position: absolute;
    left: calc(97 * var(--u));
    top: calc(127 * var(--u));
    width: calc(684 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(42 * var(--u));
    color: #ffffff80
}

.apppage-value-item-2 h3 {
    left: calc(96 * var(--u));
    top: calc(331 * var(--u))
}

.apppage-value-item-2>p {
    left: calc(98 * var(--u));
    top: calc(391 * var(--u))
}

.apppage-features {
    height: calc(754 * var(--u));
    background: #f7f7f7 url('../image/application/features-bg.png') center/100% 100%;
    overflow: hidden
}

.apppage-features>.apppage-section-title {
    top: calc(39 * var(--u));
    color: #000
}

.apppage-feature-arcs {
    position: absolute;
    left: calc(226 * var(--u));
    top: calc(193 * var(--u));
    width: calc(1429 * var(--u));
    height: calc(167 * var(--u))
}

.apppage-feature-list {
    margin: 0;
    padding: 0;
    list-style: none
}

.apppage-feature-list li {
    position: absolute;
    left: calc(var(--item-x) * var(--u));
    top: 0;
    width: calc(var(--item-width) * var(--u))
}

.apppage-feature-number {
    position: absolute;
    left: calc(var(--circle-x) * var(--u));
    top: calc(var(--circle-y) * var(--u));
    width: calc(95 * var(--u));
    height: calc(95 * var(--u));
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #333;
    color: #fff;
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: calc(32 * var(--u));
    line-height: 1;
    font-kerning: none
}

.apppage-feature-list li:nth-child(1) {
    --item-x: 100;
    --item-width: 300;
    --circle-x: 89;
    --circle-y: 372;
    --title-x: 53;
    --title-y: 495;
    --copy-y: 555
}

.apppage-feature-list li:nth-child(2) {
    --item-x: 544;
    --item-width: 360;
    --circle-x: 117;
    --circle-y: 345;
    --title-x: 62;
    --title-y: 466;
    --copy-y: 525
}

.apppage-feature-list li:nth-child(3) {
    --item-x: 1026;
    --item-width: 340;
    --circle-x: 105;
    --circle-y: 317;
    --title-x: 49;
    --title-y: 436;
    --copy-y: 495
}

.apppage-feature-list li:nth-child(4) {
    --item-x: 1501;
    --item-width: 310;
    --circle-x: 106;
    --circle-y: 290;
    --title-x: 46;
    --title-y: 405;
    --copy-y: 465
}

.apppage-feature-list h3 {
    position: absolute;
    left: calc(var(--title-x) * var(--u));
    top: calc(var(--title-y) * var(--u));
    font-size: calc(26 * var(--u));
    line-height: calc(39 * var(--u));
    font-weight: 500;
    white-space: nowrap
}

.apppage-feature-list p {
    position: absolute;
    left: 0;
    top: calc(var(--copy-y) * var(--u));
    width: 100%;
    /*text-align: center;*/
    font-size: calc(16 * var(--u));
    line-height: calc(32 * var(--u));
    color: #666
}

/* One sticky frame moves from the PSD thumbnail to the full-width reading state. */
.apppage-reveal {
    --app-scene-height: min(calc(856 * var(--u)), calc(100svh - var(--header-height)));
    --app-hold: calc(540 * var(--u));
    height: calc(var(--app-scene-height) + var(--app-pinned-travel, 0px) + var(--app-hold));
    position: relative;
    overflow: visible;
    background: #f7f7f7
}

.apppage-reveal-scene {
    position: sticky;
    top: var(--header-height);
    height: var(--app-scene-height);
    width: 100%;
    overflow: clip;
    background: #f7f7f7
}

.apppage-reveal-frame {
    --app-open: 0;
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #03070f;
    clip-path: inset(calc(var(--app-inset-top, 23px) * (1 - var(--app-open))) calc(var(--app-inset-x, 31.7%) * (1 - var(--app-open))) calc(var(--app-inset-bottom, 50%) * (1 - var(--app-open))) calc(var(--app-inset-x, 31.7%) * (1 - var(--app-open))) round calc(10 * var(--u) * (1 - var(--app-open))))
}

.apppage-reveal-image {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--app-image-offset-y, 0px) * (1 - var(--app-open)));
    width: var(--app-image-width, 100%);
    height: var(--app-image-height, 100%);
    max-width: none;
    object-fit: cover;
    transform: translate(-50%, -50%) scale(calc(var(--app-small-scale, .4) + (1 - var(--app-small-scale, .4)) * var(--app-open)));
    transform-origin: center
}

.apppage-reveal-preview {
    position: absolute;
    left: 50%;
    top: calc(50% + var(--app-image-offset-y, 0px) * (1 - var(--app-open)));
    width: calc(var(--app-small-width, 36.56vw) + (var(--app-image-width, 100vw) - var(--app-small-width, 36.56vw)) * var(--app-open));
    height: auto;
    max-width: none;
    transform: translate(-50%, -50%);
    opacity: max(0, calc(1 - var(--app-open) * 3));
    pointer-events: none
}

.apppage-reveal-copy {
    position: absolute;
    inset: 0;
    color: white;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .65s ease, transform .65s ease, visibility .65s;
    pointer-events: none
}

.apppage-reveal-copy h2 {
    position: absolute;
    left: calc(97 * var(--u));
    top: calc(100% - 219 * var(--u));
    font-size: calc(35 * var(--u));
    line-height: calc(52 * var(--u));
    font-weight: 500
}

.apppage-video-button {
    position: absolute;
    left: calc(99 * var(--u));
    top: calc(100% - 109 * var(--u));
    height: calc(28 * var(--u));
    gap: calc(10 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(28 * var(--u));
    white-space: nowrap
}

.apppage-video-button img {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u))
}

.apppage-reveal.is-expanded .apppage-reveal-frame {
    clip-path: none
}

.apppage-reveal.is-expanded .apppage-reveal-copy {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto
}

.apppage-reveal.is-near:not(.is-expanded) .apppage-reveal-frame {
    will-change: clip-path
}

.apppage-reveal.is-near:not(.is-expanded) .apppage-reveal-image {
    will-change: transform
}

.apppage-parameters {
    height: calc(1589 * var(--u));
    background: white
}

.apppage-parameters>.apppage-section-title {
    top: calc(94 * var(--u));
    color: #000
}

.apppage-table-wrap {
    position: absolute;
    left: calc(99 * var(--u));
    top: calc(240 * var(--u));
    width: calc(1722 * var(--u))
}

.apppage-spec-table ,.apppage-spec-table table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    color: #000
}

.apppage-spec-label {
    width: calc(272 * var(--u))
}

.apppage-spec-table thead {
    background: #000;
    color: white
}

.apppage-spec-table thead tr {
    height: calc(95 * var(--u))
}

.apppage-spec-table thead th {
    font-size: calc(20 * var(--u));
    font-weight: 400;
    line-height: calc(30 * var(--u));
    text-align: left;
    padding: calc(4 * var(--u)) 0 0 calc(72 * var(--u))
}

.apppage-spec-table thead th:first-child {
    padding-left: calc(56 * var(--u));
    border-right: 1px solid #333
}

.apppage-spec-table tbody tr {
    height: calc(81 * var(--u))
}

.apppage-spec-table td {
    padding: 0 0 0 calc(66 * var(--u));
    text-align: left;
    font-size: calc(16 * var(--u));
    line-height: calc(24 * var(--u));
    font-weight: 400
}

.apppage-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap
}

.apppage-consult {
    position: absolute;
    left: calc(99 * var(--u));
    top: calc(919 * var(--u));
    width: calc(1722 * var(--u));
    height: calc(570 * var(--u));
    border-radius: calc(22 * var(--u));
    background: #000 url('../image/application/consult-bg.jpg') center/100% 100%;
    overflow: hidden;
    text-align: center
}

.apppage-consult h2 {
    position: absolute;
    left: calc(-9 * var(--u));
    top: calc(116 * var(--u));
    width: 100%;
    font-size: calc(34 * var(--u));
    line-height: calc(52 * var(--u));
    font-weight: 500
}

.apppage-consult>p {
    position: absolute;
    left: calc(485 * var(--u));
    top: calc(205 * var(--u));
    width: calc(780 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(51 * var(--u))
}

.apppage-consult-link {
    position: absolute;
    left: calc(757 * var(--u));
    top: calc(380 * var(--u));
    width: calc(200 * var(--u));
    height: calc(60 * var(--u));
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(#000, #000) padding-box, linear-gradient(110deg, #8b1638, #d6d6d6) border-box;
    padding-left: calc(32 * var(--u));
    gap: calc(13 * var(--u));
    font-size: calc(16 * var(--u));
    white-space: nowrap;
    transition: background .2s
}

.apppage-consult-link :is(img, svg) {
    width: calc(27 * var(--u));
    height: calc(27 * var(--u))
}

.apppage-consult-link:hover {
    background: #8b1638
}

@media(max-width:1199px) {
    .apppage-container {
        width: 90%
    }

    .apppage-banner {
        height: 600px
    }

    .apppage-outline {
        left: 5%;
        top: 220px;
        width: 697px;
        height: auto
    }

    .apppage-banner h1 {
        left: 5%;
        top: 285px;
        font-size: 36px;
        line-height: 1.6
    }

    .apppage-banner>p {
        left: 5%;
        top: 385px;
        font-size: 18px;
        line-height: 1.8
    }

    .apppage-tabs {
        height: 76px
    }

    .apppage-tabs .apppage-container {
        gap: 40px
    }

    .apppage-tabs a {
        font-size: 16px;
        line-height: 1.8;
        border-bottom-width: 3px
    }

    .apppage-intro {
        height: auto;
        padding: 65px 5%;
        background-size: cover
    }

    .apppage-intro h2,
    .apppage-intro h3,
    .apppage-intro>p {
        position: relative;
        inset: auto;
        width: 100%
    }

    .apppage-intro h2 {
        font-size: 32px;
        line-height: 1.7
    }

    .apppage-intro h3 {
        font-size: 24px;
        line-height: 1.8;
        margin-top: 25px
    }

    .apppage-intro>p {
        font-size: 16px;
        line-height: 2.1;
        margin: 30px auto 0;
        max-width: 850px
    }

    .apppage-section-title {
        position: relative;
        inset: auto;
        font-size: 30px;
        line-height: 1.6
    }

    .apppage-value {
        height: auto;
        padding: 60px 5% 120px;
        background-size: cover;
        background-position: 65% center
    }

    .apppage-value>.apppage-section-title {
        top: auto
    }

    .apppage-value-photo {
        position: relative;
        inset: auto;
        width: 48%;
        height: 430px;
        object-fit: cover;
        border-radius: 12px;
        margin-top: 40px
    }

    .apppage-value-copy {
        position: absolute;
        left: 52%;
        top: 148px;
        width: 43%;
        height: 430px;
        border-radius: 12px
    }

    .apppage-value-copy::after {
        top: 50%
    }

    .apppage-value-item h3,
    .apppage-value-item-2 h3 {
        position: relative;
        inset: auto;
        margin: 32px 24px 0 55px;
        font-size: 21px;
        line-height: 1.7;
        white-space: normal
    }

    .apppage-value-item h3 img {
        left: -31px;
        top: 7px;
        width: 22px;
        height: 22px
    }

    .apppage-value-item>p,
    .apppage-value-item-2>p {
        position: relative;
        inset: auto;
        width: auto;
        margin: 17px 24px 0 55px;
        font-size: 14px;
        line-height: 2
    }

    .apppage-value-item {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 50%
    }

    .apppage-value-item-2 {
        top: 50%
    }

    .apppage-features {
        height: auto;
        padding: 60px 5% 65px;
        background-size: cover
    }

    .apppage-features>.apppage-section-title {
        top: auto
    }

    .apppage-feature-arcs {
        display: none
    }

    .apppage-feature-list {
        position: relative;
        gap: 45px 35px;
        margin-top: 40px
    }

    .apppage-feature-list li {
        position: relative;
        inset: auto;
        width: 100%;
        text-align: center
    }

    .apppage-feature-number {
        position: relative;
        inset: auto;
        width: 75px;
        height: 75px;
        font-size: 26px;
        margin: 0 auto
    }

    .apppage-feature-list h3 {
        position: relative;
        inset: auto;
        font-size: 22px;
        line-height: 1.7;
        margin-top: 22px;
        white-space: normal
    }

    .apppage-feature-list p {
        position: relative;
        inset: auto;
        width: 100%;
        font-size: 14px;
        line-height: 2;
        margin: 15px auto 0;
        max-width: 350px
    }

    .apppage-reveal {
        --app-scene-height: min(650px, calc(100svh - var(--header-height)));
        --app-hold: 360px
    }

    .apppage-reveal-frame {
        clip-path: inset(calc(var(--app-inset-top, 32px) * (1 - var(--app-open))) calc(var(--app-inset-x, 9%) * (1 - var(--app-open))) calc(var(--app-inset-bottom, 45%) * (1 - var(--app-open))) calc(var(--app-inset-x, 9%) * (1 - var(--app-open))) round calc(12px * (1 - var(--app-open))))
    }

    .apppage-reveal-copy h2 {
        left: 5%;
        top: auto;
        bottom: 140px;
        font-size: 28px;
        line-height: 1.7
    }

    .apppage-video-button {
        left: 5%;
        top: auto;
        bottom: 70px;
        height: 32px;
        gap: 10px;
        font-size: 15px;
        line-height: 32px
    }

    .apppage-video-button img {
        width: 28px;
        height: 28px
    }

    .apppage-parameters {
        height: auto;
        padding: 60px 5% 70px
    }

    .apppage-parameters>.apppage-section-title {
        top: auto
    }

    .apppage-table-wrap {
        position: relative;
        inset: auto;
        width: 100%;
        margin-top: 40px
    }

    .apppage-spec-label {
        width: 28%
    }

    .apppage-spec-table thead tr {
        height: 75px
    }

    .apppage-spec-table thead th {
        font-size: 18px;
        line-height: 1.7;
        padding: 0 25px
    }

    .apppage-spec-table thead th:first-child {
        padding-left: 25px
    }

    .apppage-spec-table tbody tr {
        height: 68px
    }

    .apppage-spec-table td {
        padding: 12px 25px;
        font-size: 14px;
        line-height: 1.8
    }

    .apppage-consult {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 400px;
        padding: 70px 6%;
        margin-top: 60px;
        border-radius: 18px;
        background-size: cover
    }

    .apppage-consult h2,
    .apppage-consult>p {
        position: relative;
        inset: auto;
        width: 100%
    }

    .apppage-consult h2 {
        font-size: 28px;
        line-height: 1.7
    }

    .apppage-consult>p {
        font-size: 16px;
        line-height: 2.1;
        margin: 25px auto 0;
        max-width: 780px
    }

    .apppage-consult-link {
        position: relative;
        inset: auto;
        width: 200px;
        height: 58px;
        padding-left: 30px;
        gap: 13px;
        font-size: 15px;
        margin: 35px auto 0
    }

    .apppage-consult-link :is(img, svg) {
        width: 27px;
        height: 27px
    }
}

@media(max-width:767px) {
    .apppage-banner {
        height: 470px
    }

    .apppage-banner>img:first-child {
        object-position: 65% center
    }

    .apppage-outline {
        top: 175px;
        left: 5%;
        width: 475px
    }

    .apppage-banner h1 {
        top: 220px;
        font-size: 30px
    }

    .apppage-banner>p {
        top: 310px;
        font-size: 15px
    }

    .apppage-tabs {
        height: 70px;
        overflow-x: auto
    }

    .apppage-tabs .apppage-container {
        width: max-content;
        min-width: 90%;
        gap: 28px;
        margin-inline: 5%;
        padding-right: 5%
    }

    .apppage-tabs a {
        font-size: 13px
    }

    .apppage-intro {
        padding: 45px 5% 55px
    }

    .apppage-intro h2 {
        font-size: 27px
    }

    .apppage-intro h3 {
        font-size: 21px;
        margin-top: 20px
    }

    .apppage-intro>p {
        font-size: 14px;
        line-height: 2;
        margin-top: 22px
    }

    .apppage-section-title {
        font-size: 27px
    }

    .apppage-value {
        padding: 45px 5% 65px;
        background-position: 70% center
    }

    .apppage-value-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 829/555;
        margin-top: 30px
    }

    .apppage-value-copy {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 410px;
        margin-top: 24px
    }

    .apppage-value-item h3,
    .apppage-value-item-2 h3 {
        margin: 26px 22px 0 53px;
        font-size: 20px
    }

    .apppage-value-item>p,
    .apppage-value-item-2>p {
        margin: 15px 22px 0 53px;
        font-size: 14px;
        line-height: 2
    }

    .apppage-features {
        padding: 45px 5% 50px
    }

    .apppage-feature-list {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 30px
    }

    .apppage-feature-number {
        width: 66px;
        height: 66px;
        font-size: 24px
    }

    .apppage-feature-list h3 {
        font-size: 21px;
        margin-top: 18px
    }

    .apppage-feature-list p {
        font-size: 14px;
        max-width: 320px;
        margin-top: 12px
    }

    .apppage-reveal {
        --app-scene-height: min(620px, calc(100svh - var(--header-height)))
    }

    .apppage-reveal-copy h2 {
        left: 24px;
        right: 24px;
        bottom: 125px;
        font-size: 24px;
        line-height: 1.7
    }

    .apppage-video-button {
        left: 24px;
        bottom: 65px;
        font-size: 14px
    }

    .apppage-parameters {
        padding: 45px 5% 55px
    }

    .apppage-table-wrap {
        margin-top: 28px
    }

    .apppage-spec-label {
        width: 34%
    }

    .apppage-spec-table thead tr {
        height: 60px
    }

    .apppage-spec-table thead th,
    .apppage-spec-table thead th:first-child {
        font-size: 15px;
        padding: 0 14px
    }

    .apppage-spec-table tbody tr {
        height: 64px
    }

    .apppage-spec-table tbody th,
    .apppage-spec-table td,
    .apppage-spec-table tbody th:first-child {
        font-size: 13px;
        padding: 12px 14px;
        line-height: 1.9;
        overflow-wrap: anywhere
    }

    .apppage-consult {
        min-height: 0;
        padding: 50px 7%;
        margin-top: 40px;
        border-radius: 14px
    }

    .apppage-consult h2 {
        font-size: 24px
    }

    .apppage-consult>p {
        font-size: 14px;
        line-height: 2;
        margin-top: 20px
    }

    .apppage-consult-link {
        margin-top: 28px
    }
}

@media(prefers-reduced-motion:reduce) {
    .apppage-reveal-copy {
        transition: none
    }

    .apppage-reveal-frame,
    .apppage-reveal-image {
        will-change: auto !important
    }
}

/* Final glyph and color alignment measured against the supplied PSD. */
.apppage-spec-table {
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif
}

.apppage-feature-list h3 {
    color: #000
}

.apppage-feature-list p {
    font-feature-settings: "halt" 1
}

.apppage-feature-number {
    transition: background-color .25s ease
}

.apppage-feature-list li:hover .apppage-feature-number,
.apppage-feature-number:hover {
    background: #b20b48
}

@media(min-width:1200px) {
    .apppage-feature-list li {
        height: calc(690 * var(--u))
    }
}

@media(min-width:1200px) {
    .apppage-intro h2 {
        top: calc(109 * var(--u))
    }

    .apppage-intro h3 {
        left: calc(2 * var(--u));
        top: calc(201 * var(--u))
    }

    .apppage-intro>p {
        left: calc(463 * var(--u))
    }

    .apppage-value>.apppage-section-title {
        top: calc(99 * var(--u))
    }

    .apppage-features>.apppage-section-title {
        top: calc(42 * var(--u))
    }

    .apppage-parameters>.apppage-section-title {
        top: calc(96 * var(--u))
    }

    .apppage-consult h2 {
        top: calc(119 * var(--u))
    }

    .apppage-consult>p {
        left: calc(483 * var(--u));
        top: calc(202 * var(--u))
    }

    .apppage-spec-table thead th {
        position: relative;
        left: calc(1 * var(--u));
        top: calc(1 * var(--u))
    }
}

@media(min-width:1200px) {
    .apppage-table-wrap {
        height: calc(588 * var(--u));
        background: url('../image/application/table-bg.png') top left/100% 100% no-repeat
    }

    .apppage-spec-table tbody th {
        border-right-color: #f0f0f0
    }
}

.apppage>section,
.apppage-tabs,
.apppage-spec-table {
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif
}

.apppage-feature-list p {
    font-feature-settings: normal
}

.apppage-value-copy {
    background: #ffffff1b
}

.apppage-value-copy::after {
    height: calc(4 * var(--u));
    background: #ffffff33
}

@media(min-width:1200px) {
    .apppage-spec-table thead th {
        position: static
    }

    .apppage-spec-table thead th span {
        position: relative;
        left: calc(1 * var(--u));
        top: calc(1 * var(--u))
    }
}

@media(min-width:1200px) {
    .apppage-intro h3 {
        top: calc(202 * var(--u))
    }

    .apppage-intro>p {
        left: calc(464 * var(--u))
    }

    .apppage-feature-list li:first-child h3 {
        top: calc(496 * var(--u))
    }

    .apppage-feature-list li:first-child p {
        left: calc(3 * var(--u));
        top: calc(556 * var(--u))
    }

    .apppage-feature-list li:nth-child(2) p {
        /* left: calc(1 * var(--u));
        width: calc(320 * var(--u));
        font-feature-settings: "halt" 1 */
    }

    .apppage-feature-list li:nth-child(3) p {
        left: calc(-2 * var(--u))
    }

    .apppage-parameters>.apppage-section-title {
        top: calc(97 * var(--u))
    }

    .apppage-spec-table thead th:first-child {
        border-right-color: #393939
    }

    .apppage-spec-table tbody th {
        border-right-color: #00000006
    }

    .apppage-spec-table thead th+th span {
        left: 0
    }

    .apppage-consult h2 {
        top: calc(118 * var(--u))
    }

    .apppage-reveal-copy h2 {
        left: calc(96 * var(--u));
        top: calc(100% - 217 * var(--u))
    }

    .apppage-video-button span {
        position: relative;
        top: calc(-1 * var(--u))
    }
}

/* Transparent SVG corners reveal the button background in every state. */
.apppage-consult-arrow {
    display: block;
    flex: none
}

/* 完整视频弹窗：视频地址由后台扩展字段 ext_video 提供 */
.apppage-video-dialog {
    width: min(880px, calc(100% - 32px))
}

.apppage-video-dialog .dialog-inner {
    padding: 44px 32px 32px
}

.apppage-video-stage {
    margin: 2px 0 4px;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9
}

.apppage-video-stage video,
.apppage-video-stage iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #000;
    object-fit: contain
}

.apppage-video-empty {
    margin: 16px 0 4px;
    padding: 26px 20px;
    border: 1px dashed #3a3a3a;
    border-radius: 10px;
    text-align: center;
    color: #9a9a9a;
    font-size: 15px
}

@media(max-width:767px) {
    .apppage-video-dialog .dialog-inner {
        padding: 40px 20px 24px
    }

    .apppage-video-dialog .dialog-inner h2 {
        font-size: 20px;
        margin: 6px 0 18px
    }

    .apppage-video-dialog .dialog-inner p {
        font-size: 14px;
        line-height: 1.9
    }
}

/* 产品技术参数：纯 table/tr/td 结构，行数随后台数据自适应 */
@media(min-width:1200px) {
    .apppage-parameters {
        height: auto;
        /*min-height: calc(1589 * var(--u));*/
        padding: calc(94 * var(--u)) 0 calc(100 * var(--u))
    }

    .apppage-parameters>.apppage-section-title {
        position: relative;
        left: calc(100 * var(--u));
        top: auto
    }

    .apppage-table-wrap {
        position: relative;
        left: auto;
        top: auto;
        width: calc(1722 * var(--u));
        margin: calc(83 * var(--u)) auto 0;
        height: auto;
        background: none
    }

    .apppage-consult {
        position: relative;
        left: auto;
        top: auto;
        width: calc(1722 * var(--u));
        height: calc(570 * var(--u));
        margin: calc(91 * var(--u)) auto 0
    }

    .apppage-spec-table tbody tr {
        height: calc(81 * var(--u))
    }

    .apppage-spec-table tbody tr:nth-child(odd) {
        background: #fcfcfc
    }

    .apppage-spec-table tbody tr:nth-child(even) {
        background: #f5f5f5
    }

    .apppage-spec-table tbody tr:first-child {
        background: #000;
        color: #fff;
        height: calc(95 * var(--u))
    }

    .apppage-spec-table td {
        padding: 0 0 0 calc(66 * var(--u));
        font-size: calc(16 * var(--u));
        line-height: calc(24 * var(--u));
        font-weight: 400;
        text-align: left;
        vertical-align: middle
    }

    .apppage-spec-table tbody tr:first-child td {
        padding: 0 0 0 calc(72 * var(--u));
        font-size: calc(20 * var(--u));
        font-weight: 400;
        line-height: calc(30 * var(--u))
    }

    .apppage-spec-table td:first-child {
        width: calc(272 * var(--u));
        padding-left: calc(54 * var(--u));
        border-right: 1px solid #ddd
    }

    .apppage-spec-table tbody tr:first-child td:first-child {
        padding-left: calc(56 * var(--u));
        border-right: 1px solid #333
    }
}

@media(max-width:1199px) {
    .apppage-spec-table tbody tr {
        height: 68px
    }

    .apppage-spec-table tbody tr:nth-child(odd) {
        background: #fcfcfc
    }

    .apppage-spec-table tbody tr:nth-child(even) {
        background: #f5f5f5
    }

    .apppage-spec-table tbody tr:first-child {
        background: #000;
        color: #fff;
        height: 75px
    }

    .apppage-spec-table td {
        padding: 12px 25px;
        font-size: 14px;
        line-height: 1.8;
        font-weight: 400;
        text-align: left;
        vertical-align: middle
    }

    .apppage-spec-table tbody tr:first-child td {
        font-size: 18px;
        line-height: 1.7;
        padding: 0 25px;
        font-weight: 400
    }

    .apppage-spec-table td:first-child {
        width: 28%;
        border-right: 1px solid #ddd;
        padding-left: 25px
    }

    .apppage-spec-table tbody tr:first-child td:first-child {
        padding-left: 25px;
        border-right: 1px solid #333
    }
}

@media(max-width:767px) {
    .apppage-spec-table tbody tr {
        height: 64px
    }

    .apppage-spec-table tbody tr:first-child {
        height: 60px
    }

    .apppage-spec-table td {
        padding: 12px 14px;
        font-size: 13px;
        line-height: 1.9;
        overflow-wrap: anywhere
    }

    .apppage-spec-table tbody tr:first-child td,
    .apppage-spec-table tbody tr:first-child td:first-child {
        font-size: 15px;
        padding: 0 14px
    }

    .apppage-spec-table td:first-child {
        width: 34%;
        padding-left: 14px
    }
}
/* ===================================================================
   核心应用价值：右侧文案改为正常文档流排列
   - 不再使用 --x/--y 绝对坐标，条目可任意增删、自动向下排列
   - 区块高度随内容增长（min-height 保留设计稿基准高度）
   =================================================================== */
.apppage-value-copy::after {
    content: none !important
}

.apppage-value-item,
.apppage-value-item-2 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important
}

.apppage-value-item+.apppage-value-item {
    margin-top: calc(60 * var(--u));
    padding-top: calc(59 * var(--u));
    border-top: 1px solid #ffffff10
}

.apppage-value-item h3,
.apppage-value-item-2 h3 {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    display: flex;
    align-items: center;
    white-space: normal
}

.apppage-value-item h3 img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 auto;
    width: calc(25 * var(--u));
    height: calc(25 * var(--u))
}

.apppage-value-item>p,
.apppage-value-item-2>p {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: auto !important
}

/* 桌面：左图右文两列，列宽按设计稿 1920 栅格 */
@media(min-width:1200px) {
    .apppage-value {
        display: grid;
        grid-template-columns: calc(98 * var(--u)) calc(829 * var(--u)) calc(32 * var(--u)) minmax(0, calc(862 * var(--u)));
        align-items: start;
        height: auto;
        min-height: calc(1055 * var(--u));
        padding: 0 0 calc(218 * var(--u))
    }

    .apppage-value-photo {
        grid-column: 2;
        position: relative;
        left: auto;
        top: auto;
        margin: calc(282 * var(--u)) 0 0;
        width: 100%;
        height: calc(555 * var(--u))
    }

    .apppage-value-copy {
        grid-column: 4;
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: calc(548 * var(--u));
        margin-top: calc(286 * var(--u));
        padding: calc(69 * var(--u)) calc(81 * var(--u)) calc(80 * var(--u)) calc(98 * var(--u))
    }

    .apppage-value-item h3,
    .apppage-value-item-2 h3 {
        gap: calc(15 * var(--u));
        margin: 0 0 0 calc(-40 * var(--u))
    }

    .apppage-value-item>p,
    .apppage-value-item-2>p {
        max-width: calc(684 * var(--u));
        margin-top: calc(16 * var(--u))
    }
}

/* 平板：左图右文，高度随内容 */
@media(max-width:1199px) and (min-width:768px) {
    .apppage-value {
        display: grid;
        grid-template-columns: 48% 43%;
        column-gap: 4%;
        align-items: start;
        height: auto
    }

    .apppage-value>.apppage-section-title {
        grid-column: 1 / -1
    }

    .apppage-value-photo {
        grid-column: 1;
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        aspect-ratio: 829/555;
        margin: 40px 0 0
    }

    .apppage-value-copy {
        grid-column: 2;
        position: relative;
        left: auto;
        top: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        margin-top: 40px
    }

    .apppage-value-item+.apppage-value-item {
        margin-top: 24px;
        padding-top: 22px
    }

    .apppage-value-item h3,
    .apppage-value-item-2 h3 {
        gap: 9px
    }

    .apppage-value-item h3 img {
        width: 22px;
        height: 22px
    }
}

/* 手机：单列，条目继续向下排列 */
@media(max-width:767px) {
    .apppage-value-item+.apppage-value-item {
        margin-top: 20px;
        padding-top: 18px
    }

    .apppage-value-item h3,
    .apppage-value-item-2 h3 {
        gap: 9px
    }

    .apppage-value-item h3 img {
        width: 22px;
        height: 22px
    }
}

/* 桌面：图片高度跟随右侧卡片，保持底边齐平 */
@media(min-width:1200px) {
    .apppage-value-photo {
        align-self: stretch;
        height: auto;
        min-height: calc(555 * var(--u))
    }

    .apppage-value-photo img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }
}

/* 桌面：图片跟随卡片但不能无限拉高（条目很多时封顶，避免过度裁切） */
@media(min-width:1200px) {
    .apppage-value-photo {
        max-height: calc(820 * var(--u))
    }

    .apppage-value-photo img {
        object-position: center
    }
}

/* 产品特点：标题在圆下方水平居中
   原来 h3 是 left:calc(--title-x) + white-space:nowrap，宽度只包住文字，
   短标题（如"零点抗漂移"）会整体偏左；改为整列宽 + text-align:center，
   与下方描述文字同一中轴，条目数量、文字长短都不再影响居中对齐 */
@media(min-width:1200px) {
    .apppage-feature-list h3 {
        left: 0;
        width: 100%;
        text-align: center;
        white-space: nowrap
    }
}
