/* PSD reference: 1920 × 7180. Shared navigation/footer are styled by the homepage. */
.techpage {
    color: #333;
    background: #fff
}

.techpage-banner {
    height: calc(990 * var(--u));
    background: #07090f
}

.techpage-banner-copy {
    position: absolute;
    left: calc(100 * var(--u));
    top: calc(418 * var(--u));
    color: #fff
}

.techpage-banner h1 {
    font-size: calc(50 * var(--u));
    line-height: calc(78 * var(--u));
    font-weight: 500
}

.techpage-banner-copy>p {
    margin-top: calc(48 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: calc(36 * var(--u))
}

.techpage-intro {
    height: calc(526 * var(--u));
    background: #fff url('../image/tech/intro-bg.jpg') center/100% 100%;
    text-align: center
}

.techpage-intro h2 {
    position: absolute;
    top: calc(121 * var(--u));
    left: 0;
    width: 100%;
    font-size: calc(46 * var(--u));
    line-height: calc(72 * var(--u));
    font-weight: 500
}

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

.techpage-intro>p {
    position: absolute;
    top: calc(314 * var(--u));
    /* left: calc(450 * var(--u));
    width: calc(1020 * var(--u)); */
    width: 60%;
    left: 20%;
    font-size: calc(18 * var(--u));
    line-height: calc(39 * var(--u));
    font-kerning: none
}

.techpage-capabilities {
    height: calc(3185 * var(--u));
    background: #f1f1f1
}

.techpage-capabilities::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: calc(107 * var(--u));
    background: url('../image/tech/capabilities-top.jpg') top center/100% 100% no-repeat
}

.techpage-feature {
    position: absolute;
    left: calc(97 * var(--u));
    width: calc(1724 * var(--u));
    --panel-offset: 4;
    --media-left: 0;
    --info-left: 853;
    --info-width: 867;
    --heading-left: 82;
    --paragraph-left: 129;
    --paragraph-width: 672;
    --metric-left: 90;
    scroll-margin-top: 110px
}

.techpage-feature-1 {
    top: calc(92 * var(--u))
}

.techpage-feature-2 {
    top: calc(857 * var(--u));
    --panel-offset: 0;
    --media-left: 864;
    --info-left: 0;
    --info-width: 865;
    --heading-left: 63;
    --paragraph-left: 112;
    --paragraph-width: 656;
    --metric-left: 72
}

.techpage-feature-3 {
    top: calc(1613 * var(--u));
    --info-left: 855;
    --info-width: 865;
    --heading-left: 78;
    --paragraph-left: 127;
    --metric-left: 89
}

.techpage-feature-4 {
    top: calc(2367 * var(--u));
    --panel-offset: 0;
    --media-left: 864;
    --info-left: 0;
    --info-width: 864;
    --heading-left: 65;
    --paragraph-left: 111;
    --paragraph-width: 664
}

.techpage-feature>h2 {
    font-size: calc(40 * var(--u));
    line-height: calc(60 * var(--u));
    font-weight: 500;
    color: #000
}

.techpage-feature-1>h2 {
    margin-left: calc(1 * var(--u))
}

.techpage-feature-2>h2 {
    margin-left: calc(4 * var(--u))
}

.techpage-panel {
    position: relative;
    margin-top: calc(70 * var(--u));
    margin-left: calc(var(--panel-offset) * var(--u));
    width: calc(1724 * var(--u));
    height: calc(564 * var(--u))
}

.techpage-feature-2 .techpage-panel {
    margin-top: calc(69 * var(--u))
}

.techpage-visual {
    position: absolute;
    left: calc(var(--media-left) * var(--u));
    top: 0;
    width: calc(857 * var(--u));
    height: calc(564 * var(--u));
    margin: 0;
    overflow: hidden;
    border-radius: calc(10 * var(--u));
    z-index: 2
}

.techpage-image-preview {
    display: block;
    cursor: zoom-in
}

.techpage-image-preview:focus-visible {
    outline: 3px solid #8b1638;
    outline-offset: 5px
}

.techpage-info {
    position: absolute;
    left: calc(var(--info-left) * var(--u));
    top: 0;
    width: calc(var(--info-width) * var(--u));
    height: 100%;
    border-radius: calc(10 * var(--u));
    background: #fff;
    box-shadow: 0 calc(5 * var(--u)) calc(30 * var(--u)) #00000012;
    overflow: hidden
}

.techpage-info h3 {
    position: absolute;
    left: calc(var(--heading-left) * var(--u));
    top: calc(61 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: calc(45 * var(--u));
    font-weight: 500;
    color: #010101;
    white-space: nowrap
}

.techpage-paragraphs {
    position: absolute;
    left: calc(var(--paragraph-left) * var(--u));
    top: calc(141 * var(--u));
    width: calc(var(--paragraph-width) * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(36 * var(--u));
    color: #666;
    font-kerning: none
}

.techpage-bullet {
    position: relative
}

.techpage-bullet+.techpage-bullet {
    margin-top: calc(36 * var(--u))
}

.techpage-bullet::before {
    content: '';
    position: absolute;
    left: calc(-45 * var(--u));
    top: calc(8 * var(--u));
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    background: url('../image/tech/bullet.png') center/contain no-repeat
}

.techpage-feature-3 .techpage-bullet+.techpage-bullet {
    margin-top: calc(42 * var(--u))
}

.techpage-metrics {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(150 * var(--u));
    padding-top: calc(28 * var(--u));
    padding-left: calc(var(--metric-left) * var(--u));
    background: #fafafa;
    grid-template-columns: calc(373 * var(--u)) minmax(0, 1fr)
}

.techpage-feature-2 .techpage-metrics {
    grid-template-columns: calc(372 * var(--u)) minmax(0, 1fr)
}

.techpage-metrics-3 {
    grid-template-columns: calc(272 * var(--u)) calc(249 * var(--u)) minmax(0, 1fr)
}

.techpage-metric strong {
    display: block;
    font-size: calc(32 * var(--u));
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 400;
    line-height: calc(48 * var(--u));
    white-space: nowrap;
    font-kerning: none
}

.techpage-metric strong b {
    font-weight: 400;
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: calc(32 * var(--u))
}

.techpage-metric strong small {
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: calc(24 * var(--u))
}

.techpage-feature-2 .techpage-metric:first-child strong {
    font-family: SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: calc(24 * var(--u));
    font-weight: 400
}

.techpage-metric>span {
    display: block;
    margin-top: calc(4 * var(--u));
    font-size: calc(16 * var(--u));
    line-height: calc(32 * var(--u));
    white-space: nowrap
}

.techpage-integration-steps {
    position: absolute;
    top: calc(234 * var(--u));
    left: 0;
    width: calc(867 * var(--u));
    height: calc(173 * var(--u));
    margin: 0;
    padding: calc(33 * var(--u)) 0 0 calc(61 * var(--u));
    list-style: none;
    background: #fafafa;
    grid-template-columns: calc(399 * var(--u)) minmax(0, 1fr);
    grid-template-rows: calc(75 * var(--u)) auto;
    font-kerning: none
}

.techpage-integration-steps li {
    display: flex;
    align-items: baseline;
    line-height: calc(36 * var(--u));
    white-space: nowrap
}

.techpage-mini-number {
    width: calc(48 * var(--u));
    flex: none;
    font: calc(22 * var(--u))/calc(36 * var(--u)) SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    color: #000
}

.techpage-integration-steps strong {
    font-size: calc(22 * var(--u));
    line-height: calc(36 * var(--u));
    font-weight: 400;
    color: #000
}

.techpage-mini-caption {
    margin-left: calc(28 * var(--u));
    font-size: calc(16 * var(--u));
    color: #888
}

.techpage-integration-note {
    position: absolute;
    left: calc(65 * var(--u));
    top: calc(437 * var(--u));
    width: calc(710 * var(--u));
    font-size: calc(18 * var(--u));
    line-height: calc(39 * var(--u));
    color: #000;
    font-kerning: none
}

.techpage-engineering {
    height: calc(1717 * var(--u));
    background: #000 url('../image/tech/engineering-bg.jpg') center/100% 100%;
    overflow: hidden
}

.techpage-engineering>h2 {
    position: absolute;
    left: calc(97 * var(--u));
    top: calc(132 * var(--u));
    font-size: calc(42 * var(--u));
    line-height: calc(75 * var(--u));
    font-weight: 500
}

.techpage-engineering-intro {
    position: absolute;
    left: calc(101 * var(--u));
    top: calc(332 * var(--u));
    width: calc(1132 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(58 * var(--u));
    font-kerning: none
}

.techpage-process {
    position: absolute;
    left: calc(140 * var(--u));
    top: calc(647 * var(--u));
    width: calc(1641 * var(--u));
    height: calc(299 * var(--u));
    list-style: none;
    margin: 0;
    padding: 0
}

.techpage-process-step {
    position: absolute;
    left: calc(var(--step-x) * var(--u));
    top: 0;
    width: calc(255 * var(--u));
    height: calc(299 * var(--u));
    text-align: center
}

.techpage-process-step::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #151515;
    border-radius: calc(50 * var(--u)) calc(50 * var(--u)) calc(130 * var(--u)) calc(130 * var(--u))
}

.techpage-process-step.is-featured::before {
    background: #8b1638
}

.techpage-process-step>img {
    position: absolute;
    top: calc(var(--icon-top) * var(--u));
    left: 50%;
    width: calc(var(--icon-width) * var(--u));
    height: calc(var(--icon-height) * var(--u));
    transform: translateX(-50%);
    filter: brightness(0) invert(1);
    opacity: .82
}

.techpage-process-step h3 {
    position: absolute;
    left: 0;
    top: calc(136 * var(--u));
    width: 100%;
    font-size: calc(22 * var(--u));
    line-height: calc(33 * var(--u));
    font-weight: 500;
    z-index: 3;
    white-space: nowrap
}

.techpage-process-number {
    position: absolute;
    left: calc(var(--badge-x) * var(--u));
    top: calc(199 * var(--u));
    width: calc(38 * var(--u));
    height: calc(38 * var(--u));
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #8b1638;
    color: white;
    font: calc(16 * var(--u))/1 SourceHan, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    z-index: 3
}

.is-featured .techpage-process-number {
    background: #fff;
    color: #000
}

.techpage-process-line {
    position: absolute;
    left: calc(66 * var(--u));
    top: calc(864 * var(--u));
    width: calc(1764 * var(--u));
    height: 1px;
    background: #ffffff2b;
    z-index: 2
}

.techpage-process-line::before,
.techpage-process-line::after {
    content: '';
    position: absolute;
    top: calc(-3 * var(--u));
    width: calc(9 * var(--u));
    height: calc(9 * var(--u));
    border-radius: 50%;
    background: #bbb
}

.techpage-process-line::before {
    left: calc(-4 * var(--u))
}

.techpage-process-line::after {
    right: 0
}

.techpage-cooperation h2 {
    position: absolute;
    left: 0;
    top: calc(1214 * var(--u));
    width: 100%;
    text-align: center;
    font-size: calc(40 * var(--u));
    line-height: calc(72 * var(--u));
    font-weight: 500
}

.techpage-cooperation>p {
    position: absolute;
    left: 0;
    top: calc(1303 * var(--u));
    width: 100%;
    text-align: center;
    font-size: calc(20 * var(--u));
    line-height: calc(36 * var(--u));
    font-kerning: none
}

.techpage-consult {
    position: absolute;
    left: calc(851 * var(--u));
    top: calc(1408 * var(--u));
    width: calc(201 * var(--u));
    height: calc(61 * var(--u));
    border: 1px solid #7a5362;
    border-radius: 999px;
    padding-left: calc(32 * var(--u));
    gap: calc(13 * var(--u));
    font-size: calc(16 * var(--u));
    transition: background .2s, border-color .2s
}

.techpage-consult :is(img, svg) {
    width: calc(28 * var(--u));
    height: calc(28 * var(--u))
}

.techpage-consult:hover {
    background: #8b1638;
    border-color: #8b1638
}

@media(max-width:1199px) {
    .techpage-banner {
        height: 600px
    }

    .techpage-banner-copy {
        left: 5%;
        top: 240px
    }

    .techpage-banner h1 {
        font-size: 36px;
        line-height: 1.6
    }

    .techpage-banner-copy>p {
        font-size: 18px;
        line-height: 1.8;
        margin-top: 45px
    }

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

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

    .techpage-intro h2 {
        font-size: 34px;
        line-height: 1.6
    }

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

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

    .techpage-capabilities {
        height: auto;
        padding: 65px 5% 75px
    }

    .techpage-capabilities::before {
        height: 60px
    }

    .techpage-feature {
        position: relative;
        inset: auto;
        width: 100%;
        scroll-margin-top: 100px
    }

    .techpage-feature+.techpage-feature {
        margin-top: 55px
    }

    .techpage-feature>h2,
    .techpage-feature-1>h2,
    .techpage-feature-2>h2 {
        font-size: 29px;
        line-height: 1.6;
        margin: 0
    }

    .techpage-panel,
    .techpage-feature-2 .techpage-panel {
        margin: 30px 0 0;
        width: 100%;
        height: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch
    }

    .techpage-visual {
        position: relative;
        inset: auto;
        width: 100%;
        height: 100%;
        min-height: 450px;
        border-radius: 12px
    }

    .techpage-feature:nth-child(even) .techpage-visual {
        order: 2
    }

    .techpage-info {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        min-height: 450px;
        padding: 30px 25px 0;
        border-radius: 12px;
        overflow: hidden;
        display: flex;
        flex-direction: column
    }

    .techpage-info h3 {
        position: relative;
        inset: auto;
        font-size: 22px;
        line-height: 1.7;
        white-space: normal
    }

    .techpage-paragraphs {
        position: relative;
        inset: auto;
        width: 100%;
        padding-left: 25px;
        font-size: 14px;
        line-height: 2;
        margin: 20px 0 28px
    }

    .techpage-bullet::before {
        left: -25px;
        top: 8px;
        width: 13px;
        height: 13px
    }

    .techpage-bullet+.techpage-bullet,
    .techpage-feature-3 .techpage-bullet+.techpage-bullet {
        margin-top: 20px
    }

    .techpage-metrics,
    .techpage-feature-2 .techpage-metrics,
    .techpage-metrics-3 {
        position: relative;
        inset: auto;
        width: calc(100% + 50px);
        height: auto;
        min-height: 115px;
        padding: 22px 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px 12px;
        margin: auto -25px 0
    }

    .techpage-metrics-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px
    }

    .techpage-metric strong,
    .techpage-feature-2 .techpage-metric:first-child strong,
    .techpage-metric strong b {
        font-size: 24px;
        line-height: 1.6
    }

    .techpage-metric strong small {
        font-size: 15px
    }

    .techpage-metric>span {
        font-size: 12px;
        line-height: 1.8;
        margin-top: 7px;
        white-space: normal
    }

    .techpage-metrics-3 .techpage-metric strong {
        font-size: 20px
    }

    .techpage-integration-steps {
        position: relative;
        inset: auto;
        width: calc(100% + 50px);
        height: auto;
        grid-template-columns: 1fr;
        padding: 22px 25px;
        gap: 18px;
        grid-template-rows: auto;
        margin: 0 -25px
    }

    .techpage-integration-steps li {
        flex-wrap: wrap;
        line-height: 1.8
    }

    .techpage-mini-number {
        font-size: 17px;
        line-height: 1.8;
        width: 35px
    }

    .techpage-integration-steps strong {
        font-size: 17px;
        line-height: 1.8
    }

    .techpage-mini-caption {
        font-size: 13px;
        margin-left: 15px
    }

    .techpage-integration-note {
        position: relative;
        inset: auto;
        width: 100%;
        font-size: 14px;
        line-height: 2;
        margin: 22px 0 28px
    }

    .techpage-engineering {
        height: auto;
        padding: 65px 5% 160px;
        background-size: cover;
        background-position: center
    }

    .techpage-engineering>h2,
    .techpage-engineering-intro {
        position: relative;
        inset: auto;
        width: 100%
    }

    .techpage-engineering>h2 {
        font-size: 32px;
        line-height: 1.8
    }

    .techpage-engineering-intro {
        font-size: 16px;
        line-height: 2.2;
        margin-top: 30px;
        max-width: 800px
    }

    .techpage-process {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
        margin: 65px 0 0;
        gap: 28px
    }

    .techpage-process-step {
        position: relative;
        inset: auto;
        width: 100%;
        height: 250px;
        min-width: 0
    }

    .techpage-process-step>img {
        top: 48px;
        width: 44px;
        height: 44px
    }

    .techpage-process-step h3 {
        top: 125px;
        font-size: 18px;
        line-height: 1.8;
        white-space: normal;
        padding: 0 10px
    }

    .techpage-process-number {
        left: calc(50% - 18px);
        top: 185px;
        width: 36px;
        height: 36px;
        font-size: 15px
    }

    .techpage-process-line {
        display: none
    }

    .techpage-cooperation {
        margin-top: 90px;
        text-align: center
    }

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

    .techpage-cooperation h2 {
        font-size: 30px;
        line-height: 1.7
    }

    .techpage-cooperation>p {
        font-size: 16px;
        line-height: 2.2;
        margin-top: 20px
    }

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

    .techpage-consult :is(img, svg) {
        width: 28px;
        height: 28px
    }
}

@media(max-width:767px) {
    .techpage-banner {
        height: 470px
    }
    .techpage-banner>img {
        object-position: 56% center
    }

    .techpage-banner-copy {
        top: 200px
    }

    .techpage-banner h1 {
        font-size: 30px
    }

    .techpage-banner-copy>p {
        font-size: 15px;
        margin-top: 38px
    }

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

    .techpage-intro h2 {
        font-size: 28px
    }

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

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

    .techpage-capabilities {
        padding: 45px 5% 55px
    }

    .techpage-feature+.techpage-feature {
        margin-top: 40px
    }

    .techpage-feature>h2,
    .techpage-feature-1>h2,
    .techpage-feature-2>h2 {
        font-size: 24px;
        line-height: 1.7
    }

    .techpage-panel,
    .techpage-feature-2 .techpage-panel {
        grid-template-columns: 1fr;
        margin-top: 24px
    }

    .techpage-visual {
        height: auto;
        min-height: 0;
        aspect-ratio: 857/564
    }

    .techpage-feature:nth-child(even) .techpage-visual {
        order: 0
    }

    .techpage-info {
        min-height: 0;
        padding: 27px 22px 0
    }

    .techpage-info h3 {
        font-size: 21px;
        line-height: 1.7
    }

    .techpage-paragraphs {
        font-size: 14px;
        line-height: 2.1;
        margin-top: 20px;
        padding-left: 15px;
    }

    .techpage-metrics,
    .techpage-feature-2 .techpage-metrics,
    .techpage-metrics-3 {
        width: calc(100% + 44px);
        margin-inline: -22px;
        padding: 24px 20px
    }

    .techpage-metric strong,
    .techpage-feature-2 .techpage-metric:first-child strong,
    .techpage-metric strong b {
        font-size: 24px
    }

    .techpage-metrics-3 {
        grid-template-columns: 1fr;
        gap: 22px
    }

    .techpage-metrics-3 .techpage-metric strong {
        font-size: 26px
    }

    .techpage-metric>span {
        font-size: 13px
    }

    .techpage-integration-steps {
        width: calc(100% + 44px);
        margin-inline: -22px;
        padding: 24px 22px
    }

    .techpage-mini-caption {
        font-size: 12px;
        margin-left: 12px
    }

    .techpage-integration-note {
        font-size: 14px;
        margin-block: 22px 27px
    }

    .techpage-engineering {
        padding: 45px 5% 95px;
        background-position: center bottom
    }

    .techpage-engineering>h2 {
        font-size: 25px;
        line-height: 1.8
    }

    .techpage-engineering-intro {
        font-size: 14px;
        line-height: 2.1;
        margin-top: 24px
    }

    .techpage-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 40px;
        gap: 20px
    }

    .techpage-process-step {
        height: 230px
    }

    .techpage-process-step>img {
        top: 40px;
        width: 40px;
        height: 40px
    }

    .techpage-process-step h3 {
        top: 110px;
        font-size: 16px
    }

    .techpage-process-number {
        top: 175px;
        width: 32px;
        height: 32px;
        left: calc(50% - 16px);
        font-size: 13px
    }

    .techpage-cooperation {
        margin-top: 60px
    }

    .techpage-cooperation h2 {
        font-size: 25px
    }

    .techpage-cooperation>p {
        font-size: 14px;
        line-height: 2.1
    }

    .techpage-consult {
        margin-top: 28px
    }
}

@media(max-width:1199px) {
    .techpage-process-step::before {
        border-radius: 45px 45px 110px 110px
    }
}

.techpage-intro>p,
.techpage-paragraphs,
.techpage-integration-note {
    font-kerning: normal
}

.techpage-engineering-intro {
    opacity: .4
}

@media(min-width:1200px) {
    .techpage-intro h2 {
        left: calc(3 * var(--u));
        top: calc(120 * var(--u))
    }

    .techpage-intro h3 {
        left: calc(29 * var(--u));
        top: calc(224 * var(--u))
    }

    .techpage-intro>p {
        /* left: calc(455 * var(--u));
        width: calc(1020 * var(--u)) */
    }

    .techpage-feature>h2 {
        position: relative;
        top: calc(3 * var(--u));
        left: calc(-2 * var(--u))
    }

    .techpage-info h3 {
        top: calc(63 * var(--u));
        left: calc((var(--heading-left) - 1) * var(--u))
    }

    .techpage-paragraphs {
        top: calc(139 * var(--u))
    }

    .techpage-bullet::before {
        top: calc(10 * var(--u))
    }

    .techpage-metrics {
        padding-left: calc((var(--metric-left) + 1) * var(--u))
    }

    .techpage-metric>span {
        margin-top: calc(3 * var(--u))
    }

    .techpage-feature-3 .techpage-metric strong {
        position: relative;
        top: calc(2 * var(--u))
    }

    .techpage-integration-steps {
        width: 100%;
        padding-top: calc(31 * var(--u));
        padding-left: calc(60 * var(--u))
    }
}

@media(min-width:1200px) {
    .techpage-psd-line {
        /* display: block; */
        /* white-space: nowrap */
    }

    .techpage-intro .techpage-psd-line {
        position: relative;
    } 

    .techpage-engineering-intro {
        font-kerning: normal
    }
}

.techpage-process-step::before {
    background: #161616
}

.techpage-process-step.is-featured::before {
    background: #8c0d36;
    box-shadow: inset 0 0 0 1px #ffffff45
}

.techpage-process-step>img {
    opacity: 1
}

.techpage-process-line {
    height: 0;
    background: none;
    border-top: 1px dotted #ffffff70
}

.techpage-consult {
    border-color: transparent;
    background: linear-gradient(#000, #000) padding-box, linear-gradient(110deg, #8b1638, #d6d6d6) border-box
}

@media(min-width:1200px) {
    .techpage-banner h1 {
        position: relative;
        left: calc(1 * var(--u));
        top: calc(2 * var(--u))
    }

    .techpage-banner-copy>p {
        position: relative;
        left: calc(-1 * var(--u));
        top: calc(-1 * var(--u))
    }

    .techpage-engineering>h2 {
        left: calc(96 * var(--u));
        top: calc(135 * var(--u))
    }

    .techpage-cooperation h2 {
        left: calc(-3 * var(--u));
        top: calc(1217 * var(--u))
    }

    .techpage-cooperation>p {
        left: calc(15 * var(--u));
        top: calc(1305 * var(--u))
    }

    .techpage-feature-2 .techpage-paragraphs {
        left: calc(111 * var(--u))
    }

    .techpage-feature-3 .techpage-metrics {
        padding-left: calc(89 * var(--u))
    }
}

/* Match the homepage's restrained image zoom and entrance timing. */
.techpage-visual>img {
    transition: transform .6s ease;
    cursor: default;
}

@media(hover:hover) {
    .techpage-visual:hover>img {
        transform: scale(1.035)
    }

    .techpage-process:has(.techpage-process-step:hover) .techpage-process-step.is-featured:not(:hover)::before {
        background: #161616;
        box-shadow: none
    }

    .techpage-process:has(.techpage-process-step:hover) .techpage-process-step.is-featured:not(:hover) .techpage-process-number {
        background: #8b1638;
        color: #fff
    }

    .techpage-process-step:hover::before {
        background: #8c0d36;
        box-shadow: inset 0 0 0 1px #ffffff45
    }

    .techpage-process-step:hover .techpage-process-number {
        background: #fff;
        color: #000
    }
}

.techpage-visual:focus-visible>img {
    transform: scale(1.035)
}

.techpage-process-step::before {
    transition: background .3s ease, box-shadow .3s ease
}

.techpage-process-number {
    transition: background .3s ease, color .3s ease
}

@media(prefers-reduced-motion:reduce) {

    .techpage-visual>img,
    .techpage-process-step::before,
    .techpage-process-number {
        transition: none
    }

    .techpage-visual:hover>img,
    .techpage-visual:focus-visible>img {
        transform: none
    }
}

.scroll-reveal-ready .techpage-engineering-intro[data-aos].aos-animate {
    opacity: .4
}

@media(prefers-reduced-motion:reduce) {
    .scroll-reveal-ready .techpage-engineering-intro[data-aos] {
        opacity: .4 !important
    }
}

/* Match the application page's consultation button and transparent icon. */
.techpage-consult {
    width: calc(200 * var(--u));
    height: calc(60 * var(--u))
}

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

.techpage-consult-arrow {
    display: block;
    flex: none
}

.techpage-consult:hover {
    background: #8b1638;
    border-color: transparent
}

@media(max-width:1199px) {
    .techpage-consult {
        width: 200px;
        height: 58px
    }

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

/* Animated line ribbon behind the core technology introduction. */
.techpage-intro.has-wave,
.apppage-intro.has-wave {
    background: #fff;
    isolation: isolate;
    overflow: hidden
}

.techpage-intro-wave {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1
}
/* 工程化应用流程：六步坐标与图标尺寸按序号定位（模板里不再写内联变量，避免循环输出同一坐标叠在一起） */
.techpage-process-step:nth-child(1) {
    --step-x: 0;
    --badge-x: 104;
    --icon-width: 45;
    --icon-height: 45;
    --icon-top: 56
}

.techpage-process-step:nth-child(2) {
    --step-x: 276;
    --badge-x: 106;
    --icon-width: 43;
    --icon-height: 48;
    --icon-top: 56
}

.techpage-process-step:nth-child(3) {
    --step-x: 555;
    --badge-x: 108;
    --icon-width: 43;
    --icon-height: 43;
    --icon-top: 60
}

.techpage-process-step:nth-child(4) {
    --step-x: 831;
    --badge-x: 109;
    --icon-width: 53;
    --icon-height: 49;
    --icon-top: 54
}

.techpage-process-step:nth-child(5) {
    --step-x: 1107;
    --badge-x: 106;
    --icon-width: 47;
    --icon-height: 48;
    --icon-top: 55
}

.techpage-process-step:nth-child(6) {
    --step-x: 1386;
    --badge-x: 111;
    --icon-width: 51;
    --icon-height: 44;
    --icon-top: 62
}

/* 正文段落兜底：后台富文本直接输出的 <p> 也能带圆点与段间距（模板输出 {$list.content} 也不会掉样式） */
.techpage-paragraphs>p {
    position: relative;
    margin: 0
}

.techpage-paragraphs>p+p {
    margin-top: calc(36 * var(--u))
}

.techpage-paragraphs>p::before {
    content: '';
    position: absolute;
    left: calc(-45 * var(--u));
    top: calc(8 * var(--u));
    width: calc(16 * var(--u));
    height: calc(16 * var(--u));
    background: url('../image/tech/bullet.png') center/contain no-repeat
}

@media (max-width:767px) {
    
.techpage-paragraphs>p::before {
        left: calc(-25 * var(--u));
}
}