@media(min-width:1081px) {
    .title-animation-wrap {
        height: 100vh;
        position: relative;
        width: calc(1920 * var(--rpx));
        top: 0;
        right: 0;
        margin-top: -550px;
        overflow: hidden
    }

    .title-animation-wrap .att-front {
        position: absolute;
        width: 100%;
        height: calc(240 * var(--rpx));
        top: 50%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        z-index: 3;
        font-family: HurmeGeometricSans;
        margin-top: calc(-200 * var(--rpx));
        opacity: 0
    }

    .title-animation-wrap .att-front .att-text {
        font-weight: 800;
        background-image: linear-gradient(60deg, #af86e9, #e6dff0, #af86e9, #e6dff0, #af86e9, #e6dff0, #a68aec);
        background-size: 200% auto;
        background-position: 100% center;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-size: calc(120 * var(--rpx));
        line-height: 1.4;
        font-family: HurmeGeometricSans
    }

    .title-animation-wrap .att-front .att-icon {
        display: block;
        background-image: linear-gradient(60deg, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8);
        width: calc(485 * var(--rpx));
        height: calc(113 * var(--rpx));
        background-size: 200% auto;
        background-position: 100% center;
        mask-image: url(./assets/hios16-icon.png);
        mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-image: url(./assets/hios16-icon.png);
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat
    }

    .title-animation-wrap .att-mask {
        width: calc(2560 * var(--rpx));
        position: absolute;
        top: 50%;
        right: 0;
        margin-right: calc(-320 * var(--rpx));
        margin-top: calc(-60 * var(--rpx));
        z-index: 2
    }

    .title-animation-wrap .att-mask svg {
        width: calc(2560 * var(--rpx));
        height: calc(2560 * var(--rpx))
    }

    .title-animation-wrap--yellow .att-front .att-text {
        background-image: linear-gradient(60deg, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .title-animation-wrap .att-bg {
        width: calc(2560 * var(--rpx));
        position: absolute;
        top: 50%;
        margin-top: calc(-650 * var(--rpx));
        right: 50%;
        margin-right: calc(-1280 * var(--rpx));
        z-index: 1
    }

    .title-animation-wrap .att-bg img {
        width: calc(2560*var(--rpx))
    }
}

@media(max-width:1080px) {
    .title-animation-wrap {
        height: calc(800 * var(--rpx));
        position: relative;
        width: calc(1080 * var(--rpx));
        overflow: hidden;
        z-index: 3
    }

    .title-animation-wrap .att-front {
        position: absolute;
        width: 100%;
        top: 50%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        text-align: center;
        z-index: 3;
        font-family: HurmeGeometricSans;
        margin-top: calc(-120 * var(--rpx));
        height: calc(200 * var(--rpx))
    }

    .title-animation-wrap .att-front .att-text {
        font-weight: 800;
        background-image: linear-gradient(60deg, #af86e9, #e6dff0, #a68aec, #af86e9, #e6dff0, #a68aec, #af86e9, #e6dff0, #a68aec);
        background-size: 200% auto;
        background-position: 100% center;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-size: calc(100 * var(--rpx));
        line-height: 1.4;
        font-family: HurmeGeometricSans
    }

    .title-animation-wrap .att-front .att-icon {
        display: block;
        background-image: linear-gradient(60deg, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8);
        width: calc(363 * var(--rpx));
        height: calc(85 * var(--rpx));
        background-size: 200% auto;
        background-position: 100% center;
        mask-image: url(./assets/hios16-icon.png);
        mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-image: url(./assets/hios16-icon.png);
        -webkit-mask-size: contain;
        -webkit-mask-repeat: no-repeat
    }

    .title-animation-wrap .att-mask {
        width: calc(1200 * var(--rpx));
        position: absolute;
        top: 50%;
        right: calc(-60 * var(--rpx));
        margin-top: calc(100 * var(--rpx));
        z-index: 2
    }

    .title-animation-wrap .att-mask svg {
        width: calc(1200 * var(--rpx));
        height: calc(1200 * var(--rpx))
    }

    .title-animation-wrap--yellow .att-front .att-text {
        background-image: linear-gradient(60deg, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8, #d3b28e, #eddccb, #e5cdb8);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .title-animation-wrap .att-bg {
        width: calc(1200 * var(--rpx));
        position: absolute;
        top: 50%;
        right: calc(-60 * var(--rpx));
        z-index: 1;
        margin-top: calc(-190 * var(--rpx))
    }

    .title-animation-wrap .att-bg img {
        width: calc(1200*var(--rpx))
    }
}

@media(min-width:1081px) {
    .studio-cricle-wrapper {
        height: calc(771 * var(--rpx));
        width: calc(1440 * var(--rpx));
        position: relative;
        margin: 0 auto
    }

    .studio-circle-container {
        height: calc(771 * var(--rpx));
        width: calc(1440 * var(--rpx));
        position: relative;
        perspective: 1000px
    }

    .studio-circle-item {
        width: calc(320 * var(--rpx));
        height: calc(695 * var(--rpx));
        border-radius: calc(20 * var(--rpx));
        padding: calc(2 * var(--rpx));
        overflow: hidden;
        position: absolute;
        right: 50%;
        margin-right: calc(-160 * var(--rpx));
        top: 0;
        --angle: 60deg
    }

    .studio-circle-item .studio-item-inner {
        width: calc(316 * var(--rpx));
        height: calc(691 * var(--rpx));
        overflow: hidden;
        border-radius: calc(18 * var(--rpx))
    }

    .studio-circle-item:before {
        content: "";
        width: calc(320 * var(--rpx));
        height: calc(695 * var(--rpx));
        border-radius: calc(20 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #cbb3fa 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #cbb3fa 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .studio-circle-item video {
        position: relative;
        z-index: 2;
        width: 100%;
        display: block
    }

    .scn-left {
        position: absolute;
        top: 50%;
        width: calc(55 * var(--rpx));
        height: calc(55 * var(--rpx));
        left: calc(0 * var(--rpx));
        margin-top: calc(-55 * var(--rpx));
        cursor: pointer
    }

    .scn-right {
        position: absolute;
        top: 50%;
        width: calc(55 * var(--rpx));
        height: calc(55 * var(--rpx));
        right: calc(0 * var(--rpx));
        margin-top: calc(-55 * var(--rpx));
        cursor: pointer
    }

    .scn-button-icon {
        width: calc(55 * var(--rpx))
    }
}

@media(max-width:1080px) {
    .studio-cricle-wrapper {
        height: calc(651 * var(--rpx));
        width: calc(900 * var(--rpx));
        position: relative;
        margin: 0 auto
    }

    .studio-circle-container {
        height: calc(651 * var(--rpx));
        width: calc(900 * var(--rpx));
        position: relative;
        perspective: 1000px
    }

    .studio-circle-item {
        width: calc(301 * var(--rpx));
        height: calc(652 * var(--rpx));
        border-radius: calc(20 * var(--rpx));
        padding: calc(2 * var(--rpx));
        overflow: hidden;
        position: absolute;
        right: 50%;
        margin-right: calc(-150 * var(--rpx));
        top: 0;
        --angle: 60deg
    }

    .studio-circle-item .studio-item-inner {
        width: calc(297 * var(--rpx));
        height: calc(648 * var(--rpx));
        overflow: hidden;
        border-radius: calc(18 * var(--rpx))
    }

    .studio-circle-item:before {
        content: "";
        width: calc(301 * var(--rpx));
        height: calc(652 * var(--rpx));
        border-radius: calc(20 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #cbb3fa 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #cbb3fa 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .studio-circle-item video {
        position: relative;
        z-index: 2;
        width: 100%;
        display: block
    }

    .scn-left {
        position: absolute;
        top: 50%;
        width: calc(55 * var(--rpx));
        height: calc(55 * var(--rpx));
        left: calc(-55 * var(--rpx));
        margin-top: calc(-55 * var(--rpx));
        cursor: pointer
    }

    .scn-right {
        position: absolute;
        top: 50%;
        width: calc(55 * var(--rpx));
        height: calc(55 * var(--rpx));
        right: calc(-55 * var(--rpx));
        margin-top: calc(-55 * var(--rpx));
        cursor: pointer
    }

    .scn-button-icon {
        width: calc(55 * var(--rpx))
    }
}

.light-border {
    --angle: 0deg;
    padding: calc(1 * var(--rpx));
    position: relative;
    overflow: hidden
}

.light-inner {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: inherit;
    background-position: center center
}

.light-border--purple .light-inner {
    background-image: conic-gradient(from var(--angle), #cbb2fa, #3e2c5700, #3e2c5700, #cbb2fa, #cbb2fa, #3e2c5700, #3e2c5700, #cbb2fa);
    padding: calc(2 * var(--rpx));
    mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    mask-composite: xor;
    -webkit-mask-composite: xor
}

.light-border--gold .light-inner {
    background-image: conic-gradient(from var(--angle), #f8ebcb, #9f7b5500, #9f7b5500, #f8ebcb, #f8ebcb, #9f7b5500, #9f7b5500, #f8ebcb);
    padding: calc(2 * var(--rpx));
    mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
    mask-composite: xor;
    -webkit-mask-composite: xor
}

:root {
    --swiper-theme-color: #007aff
}

:host {
    position: relative;
    display: block;
    margin-right: auto;
    margin-left: auto;
    z-index: 1
}

.swiper {
    margin-right: auto;
    margin-left: auto;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    z-index: 1;
    display: block
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    box-sizing: content-box
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-vertical {
    touch-action: pan-x
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
    display: block
}

.swiper-slide-invisible-blank {
    visibility: hidden
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    transform: translateZ(0);
    backface-visibility: hidden
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d {
    perspective: 1200px
}

.swiper-3d .swiper-slide,
.swiper-3d .swiper-cube-shadow {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-slides-offset-before);
    scroll-margin-inline-start: var(--swiper-slides-offset-before)
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper>.swiper-slide:last-child {
    margin-inline-end: var(--swiper-slides-offset-after)
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-slides-offset-before);
    scroll-margin-block-start: var(--swiper-slides-offset-before)
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper>.swiper-slide:last-child {
    margin-block-end: var(--swiper-slides-offset-after)
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    width: 100%;
    min-width: 1px;
    height: var(--swiper-centered-offset-after)
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top,
.swiper-3d .swiper-slide-shadow-bottom {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: #00000026
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(to right, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(to left, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, #00000080, #0000)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, #00000080, #0000)
}

.swiper-lazy-preloader {
    width: 42px;
    height: 42px;
    position: absolute;
    right: 50%;
    top: 50%;
    margin-right: -21px;
    margin-top: -21px;
    z-index: 10;
    transform-origin: 50%;
    box-sizing: border-box;
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top-color: transparent
}

.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,
.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear
}

.swiper-lazy-preloader-white {
    --swiper-preloader-color: #fff
}

.swiper-lazy-preloader-black {
    --swiper-preloader-color: #000
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(-360deg)
    }
}

@media(min-width:1081px) {
    html {
        background: #000
    }

    .zn-wrapper {
        width: 100%;
        overflow: hidden;
        background-color: #000
    }

    .zn-wrapper h3,
    .zn-wrapper h4,
    .zn-wrapper p,
    .zn-wrapper div {
        line-height: 1.4
    }

    .zn-wrapper .line-wrap-mask,
    .zn-wrapper .line-wrap {
        line-height: inherit;
        font-family: inherit;
        font-weight: inherit
    }

    .zn-wrapper .mb-only {
        display: none
    }

    .zn-wrapper .sections {
        width: calc(1920 * var(--rpx));
        background: #000
    }

    .zn-wrapper .section-safe {
        width: calc(1440 * var(--rpx));
        margin: 0 auto
    }

    .zn-wrapper .section-sub-title {
        font-weight: 800;
        font-size: calc(64 * var(--rpx));
        line-height: 1.4;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .section-sub-title .line-wrap-mask {
        margin-top: calc(-10 * var(--rpx))
    }

    .zn-wrapper .section-sub-title span {
        font-weight: 800;
        background: linear-gradient(to bottom, #b7a0e4, #b7a0e4 30%, #8762c4 70%, #8762c4);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textTitle {
        font-size: calc(64 * var(--rpx));
        line-height: 1.4;
        font-weight: 800;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textDesc {
        font-size: calc(32 * var(--rpx));
        font-weight: 800;
        opacity: .9;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textNotice {
        opacity: .4;
        font-weight: 300;
        font-size: calc(12 * var(--rpx));
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textText {
        opacity: .6;
        font-weight: 400;
        font-size: calc(16 * var(--rpx));
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .line-wrap {
        overflow: hidden
    }

    .zn-wrapper .section1 {
        position: relative;
        background-color: #fff;
        width: calc(1920 * var(--rpx));
        height: calc(1220 * var(--rpx));
        overflow: hidden
    }

    .zn-wrapper .section1 .kv-image {
        width: calc(1920 * var(--rpx));
        height: calc(1220 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title {
        position: absolute;
        width: calc(1920 * var(--rpx));
        top: calc(140 * var(--rpx));
        text-align: center
    }

    .zn-wrapper .section1 .kv-title h3 {
        font-size: calc(88 * var(--rpx));
        font-weight: 800;
        line-height: 1.4;
        font-family: HurmeGeometricSans;
        color: #000;
        margin-bottom: calc(10 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title p {
        font-weight: 800;
        font-style: italic;
        font-size: calc(43 * var(--rpx));
        font-family: HurmeGeometricSans;
        color: #000
    }

    .zn-wrapper .section1 .kv-title .kv-benefits {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: calc(50 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item {
        padding: 0 calc(30 * var(--rpx));
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: calc(23 * var(--rpx));
        position: relative;
        align-items: center;
        line-height: 1.4;
        font-family: HurmeGeometricSans;
        color: #000
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:before {
        content: "";
        width: calc(2 * var(--rpx));
        background-color: #000;
        height: calc(46 * var(--rpx));
        top: calc(4 * var(--rpx));
        position: absolute;
        left: 0
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child:before {
        display: none
    }

    .zn-wrapper .section1 .kv-title .kbi-main,
    .zn-wrapper .section1 .kv-title .kbi-desc {
        font-weight: 800;
        font-family: HurmeGeometricSans;
        color: #000;
        line-height: 1.4
    }

    .zn-wrapper .section1 .kv-title .kbi-main span,
    .zn-wrapper .section1 .kv-title .kbi-desc span {
        font-weight: 800;
        font-family: HurmeGeometricSans;
        line-height: 1.4;
        color: #000;
        font-size: calc(12 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kbi-main {
        margin-bottom: calc(4 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:first-child .kbi-main span,
    .zn-wrapper .section1 .kv-title .kv-benefit-item:first-child .kbi-desc span {
        margin-right: calc(10 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child .kbi-main {
        margin-bottom: 0
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child .kbi-desc {
        font-size: 0
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child .kbi-desc span {
        line-height: calc(12 * var(--rpx))
    }

    .zn-wrapper .section2 {
        height: calc(1416 * var(--rpx));
        width: calc(1920 * var(--rpx));
        overflow: hidden;
        position: relative;
        padding-top: calc(265 * var(--rpx))
    }

    .zn-wrapper .section2 .nav-bg {
        position: absolute;
        z-index: 1;
        top: -1px;
        right: 0;
        width: calc(1920 * var(--rpx));
        height: calc(1576 * var(--rpx))
    }

    .zn-wrapper .section2 .navs-wrapper {
        width: calc(1440 * var(--rpx));
        position: relative;
        z-index: 2;
        margin: 0 auto
    }

    .zn-wrapper .section2 .nav {
        position: relative;
        border-radius: calc(30 * var(--rpx));
        transition: all .3s
    }

    .zn-wrapper .section2 .nav-inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        padding: calc(1 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section2 .nav-inner .nav-inner-wrap {
        width: 100%;
        height: 100%;
        border-radius: calc(30 * var(--rpx));
        overflow: hidden
    }

    .zn-wrapper .section2 .nav-inner .nav-image {
        width: 100%;
        position: relative;
        z-index: 1;
        transition: all .3s
    }

    .zn-wrapper .section2 .navs-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section2 .navs-row.navs-row-no-bottom {
        margin-bottom: 0
    }

    .zn-wrapper .section2 .nav-text {
        font-size: calc(32 * var(--rpx));
        line-height: calc(38 * var(--rpx));
        font-family: HurmeGeometricSans;
        position: absolute;
        font-weight: 800;
        z-index: 3
    }

    .zn-wrapper .section2 .nav1 {
        width: calc(952 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav1 .nav1-image {
        width: calc(468 * var(--rpx));
        position: absolute;
        left: calc(60 * var(--rpx));
        top: calc(-86 * var(--rpx));
        transform-origin: center bottom;
        transition: all .3s;
        pointer-events: none;
        z-index: 2
    }

    .zn-wrapper .section2 .nav1 .nav-inner .nav1-image-bg {
        border-radius: calc(30 * var(--rpx));
        width: calc(950 * var(--rpx));
        height: calc(398 * var(--rpx))
    }

    .zn-wrapper .section2 .nav1 .nav-text {
        color: #fff;
        top: calc(160 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav2 {
        width: calc(468 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav2 .nav-text {
        color: #fff;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav3 {
        width: calc(466 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav3 .nav-text {
        color: #fff;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav4 {
        width: calc(466 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav4 .nav-text {
        color: #fff;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav5 {
        width: calc(466 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav5 .nav-text {
        color: #fff;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav6 {
        width: calc(466 * var(--rpx));
        height: calc(300 * var(--rpx))
    }

    .zn-wrapper .section2 .nav6 .nav-text {
        color: #fff;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav7 {
        width: calc(466 * var(--rpx));
        height: calc(300 * var(--rpx))
    }

    .zn-wrapper .section2 .nav7 .nav-text {
        color: #fff;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav8 {
        width: calc(466 * var(--rpx));
        height: calc(300 * var(--rpx))
    }

    .zn-wrapper .section2 .nav8 .nav-text {
        color: #000;
        top: calc(24 * var(--rpx));
        right: calc(28 * var(--rpx))
    }

    .zn-wrapper .section2 .nav:hover {
        transform: scale(1.02)
    }

    .zn-wrapper .section2 .nav:hover .nav-image {
        transform: scale(1.05)
    }

    .zn-wrapper .section3 {
        width: calc(1920 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper {
        position: relative;
        width: 100%;
        height: calc(1200 * var(--rpx));
        margin-bottom: calc(150 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper .section-sub-title {
        color: #fff;
        text-align: center;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper .textText {
        position: relative;
        z-index: 3;
        text-align: center;
        color: #fff
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone-wrap {
        width: calc(1222 * var(--rpx));
        position: relative;
        right: 50%;
        margin-top: calc(85 * var(--rpx));
        margin-right: calc(-611 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone {
        width: calc(1222 * var(--rpx));
        opacity: 1;
        z-index: 1;
        position: relative
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone-light {
        width: calc(1040 * var(--rpx));
        height: calc(340 * var(--rpx));
        border-radius: calc(170 * var(--rpx));
        position: absolute;
        top: calc(87 * var(--rpx));
        right: calc(96 * var(--rpx));
        --angle: 15deg;
        z-index: 2
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone-light:before {
        content: "";
        width: calc(1036 * var(--rpx));
        height: calc(336 * var(--rpx));
        border-radius: calc(170 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #8972d3 15%, #3d3256 25%, #3d3256 35%, #8972d3 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section3 .deco-wrapper .deco-camera {
        width: calc(987 * var(--rpx));
        position: absolute;
        right: calc(122 * var(--rpx));
        top: calc(106 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section3 .color-wrapper {
        position: relative
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap {
        width: calc(1440 * var(--rpx));
        height: calc(800 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-bg {
        width: calc(1440 * var(--rpx));
        height: calc(800 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        opacity: 0;
        position: absolute;
        transition: .8s;
        top: 0;
        right: 0
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-phone {
        position: absolute;
        width: calc(539 * var(--rpx));
        top: calc(-92 * var(--rpx));
        right: calc(490 * var(--rpx));
        opacity: 0;
        z-index: 3
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-left {
        font-size: calc(115 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        position: absolute;
        right: calc(170 * var(--rpx));
        top: calc(140 * var(--rpx));
        color: #fff;
        opacity: 0;
        line-height: 1.4
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-right {
        font-size: calc(115 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        position: absolute;
        right: calc(858 * var(--rpx));
        top: calc(365 * var(--rpx));
        color: #fff;
        opacity: 0;
        line-height: 1.4
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-left {
        right: calc(170 * var(--rpx));
        top: calc(140 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-right {
        right: calc(858 * var(--rpx));
        top: calc(365 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-left,
    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-right {
        background: linear-gradient(to bottom, #c5a8ec, #faf1ff 30%, #faf1ff 70%, #e9ddff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-left {
        right: calc(166 * var(--rpx));
        top: calc(140 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-right {
        right: calc(864 * var(--rpx));
        top: calc(365 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-left {
        background: linear-gradient(to bottom, #cab184, #f4f0e5 30%, #f4f0e5 70%, #efe0bf);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-right {
        background: linear-gradient(to bottom, #f4f0e5, #f4f0e5 30%, #f4f0e5 70%, #efe0bf);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-left {
        right: calc(350 * var(--rpx));
        top: calc(140 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-right {
        right: calc(866 * var(--rpx));
        top: calc(365 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-left {
        background: linear-gradient(to bottom, #a4b8ab, #e1eee6 30%, #e1eee6 70%, #d6e5db);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-right {
        background: linear-gradient(to bottom, #eaf6ee, #f4fef7 30%, #f4fef7 70%, #deece2);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-left {
        right: calc(156 * var(--rpx));
        top: calc(140 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-right {
        right: calc(866 * var(--rpx));
        top: calc(365 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-left {
        background: linear-gradient(to bottom, #a3a096, #edece1 30%, #edece1 70%, #bcbaaf);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-right {
        background: linear-gradient(to bottom, #dcdad1, #faf8ef 30%, #faf8ef 70%, #f0eee2);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-left {
        right: calc(406 * var(--rpx));
        top: calc(140 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-right {
        right: calc(866 * var(--rpx));
        top: calc(365 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-left {
        background: linear-gradient(to bottom, #b3b3b9, #dadadf, #fff, #dadadf, #b1b1b8);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-right {
        background: linear-gradient(to bottom, #e9e9ec, #e9e9ec, #fff, #fefeff, #e6e7eb);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-bg,
    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-phone {
        opacity: 1
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-left {
        opacity: 1;
        animation: csiLeft .7s ease-in-out
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-right {
        opacity: 1;
        animation: csiRight .7s ease-in-out
    }

    @keyframes csiLeft {
        0% {
            opacity: 0;
            transform: translate(calc(-1*(-200 * var(--rpx))))
        }

        to {
            opacity: 1;
            transform: translate(0)
        }
    }

    @keyframes csiRight {
        0% {
            opacity: 0;
            transform: translate(calc(-1*(200 * var(--rpx))))
        }

        to {
            opacity: 1;
            transform: translate(0)
        }
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap {
        display: inline-block;
        padding: 0 calc(10 * var(--rpx));
        height: calc(40 * var(--rpx));
        position: relative;
        border-radius: calc(20 * var(--rpx));
        margin-top: calc(30 * var(--rpx));
        border: calc(2 * var(--rpx)) solid;
        overflow: hidden
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-bg {
        position: absolute;
        width: calc(140 * var(--rpx));
        background-image: linear-gradient(to left, #fff0 20%, #fff5, #fff5, #fff0 80%);
        background-size: 100% auto;
        background-position: center center;
        right: 0;
        height: 100%;
        top: 0;
        z-index: 1;
        transition: transform .3s ease-in-out
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        justify-content: center
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button {
        cursor: pointer;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button span {
        width: calc(16 * var(--rpx));
        height: calc(16 * var(--rpx));
        border-radius: 50%;
        margin: 0 calc(10 * var(--rpx));
        display: block;
        position: relative
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button span:before {
        content: "";
        width: calc(20 * var(--rpx));
        height: calc(20*var(--rpx));
        border-radius: 50%;
        border: calc(2 * var(--rpx)) solid #fff;
        position: absolute;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        display: none
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--purple span {
        background-image: linear-gradient(-135deg, #c3b1e4, #482d79)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--gold span {
        background-image: linear-gradient(-135deg, #e3d8c7, #7c6c47)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--green span {
        background-image: linear-gradient(-135deg, #aed3b8, #355f46)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--grey span {
        background-image: linear-gradient(-135deg, #e0dfd5, #64635a)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--black span {
        background-image: linear-gradient(-135deg, #b0b0b0, #353536)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--purple {
        border-color: #5e5087;
        background-color: #402f7a
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--purple .color-switch-bg {
        transform: translate(40%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--purple .color-switch-button--purple span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--gold {
        border-color: #9e7b55;
        background-color: #665745
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--gold .color-switch-bg {
        transform: translate(8%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--gold .color-switch-button--gold span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--green {
        border-color: #6c8875;
        background-color: #43604c
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--green .color-switch-bg {
        transform: translate(-18%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--green .color-switch-button--green span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--grey {
        border-color: #8e8c83;
        background-color: #68675f
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--grey .color-switch-bg {
        transform: translate(-44%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--grey .color-switch-button--grey span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--black {
        border-color: #525358;
        background-color: #27272d
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--black .color-switch-bg {
        transform: translate(-76%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--black .color-switch-button--black span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-texts {
        position: absolute;
        left: 0;
        bottom: calc(14 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-texts .textText {
        width: 100%;
        text-align: center;
        color: #fff
    }

    .zn-wrapper .section4 .battery-wrapper {
        margin-bottom: calc(210 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx));
        position: relative;
        z-index: 1
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-wrap-light {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        --angle: 15deg;
        z-index: 1
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-wrap-light:before {
        content: "";
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-bg {
        transform: scaleX(-1);
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-dark {
        position: absolute;
        width: calc(1633 * var(--rpx));
        bottom: calc(-140 * var(--rpx));
        right: calc(345 * var(--rpx));
        transform-origin: bottom center;
        z-index: 3;

    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-light {
        position: absolute;
        width: calc(665 * var(--rpx));
        bottom: calc(210 * var(--rpx));
        right: calc(653 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-text {
        position: absolute;
        right: calc(45 * var(--rpx));
        top: calc(380 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-text .textText {
        color: #fff;
        margin-bottom: calc(46 * var(--rpx));
        width: calc(500 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-text .textNotice {
        color: #fff
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefits {
        position: absolute;
        right: calc(45 * var(--rpx));
        top: calc(130 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit-top {
        color: #8a66c6;
        font-family: HurmeGeometricSans;
        font-size: calc(24 * var(--rpx));
        line-height: 1.4
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit-top span {
        font-weight: 800;
        font-size: calc(78 * var(--rpx));
        font-family: HurmeGeometricSans;
        margin-left: calc(6 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit-bottom {
        color: #8a66c6;
        font-family: HurmeGeometricSans;
        font-size: calc(16 * var(--rpx));
        line-height: 1.4;
        padding-right: calc(2 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper {
        position: relative
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text {
        left: calc(0 * var(--rpx));
        position: absolute;
        top: calc(100 * var(--rpx));
        z-index: 4
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .section-sub-title,
    .zn-wrapper .section4 .charging-wrapper .charging-text .textText {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .charging-benefits {
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .charging-benefit {
        font-size: calc(24 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-style: italic;
        color: #fff;
        opacity: .85;
        display: flex;
        align-items: center
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .charging-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #9a7bd1;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .textNotice {
        color: #fff
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap {
        width: calc(1920 * var(--rpx));
        height: calc(1330 * var(--rpx));
        margin-right: calc(-240 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap .charging-bg {
        width: calc(1920 * var(--rpx));
        height: calc(1330 * var(--rpx));
        z-index: 1;
        position: relative
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap .charging-phone {
        position: absolute;
        width: calc(1624 * var(--rpx));
        right: 0;
        top: calc(335 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap .charging-45w {
        z-index: 2;
        position: absolute;
        width: calc(633 * var(--rpx));
        top: calc(94 * var(--rpx));
        left: calc(940 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper {
        position: relative;
        margin-bottom: calc(170 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-left {
        position: absolute;
        right: 0;
        top: 0
    }

    .zn-wrapper .section5 .perform-wrapper .perform-left .section-sub-title {
        color: #fff;
        margin-bottom: calc(10 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-left .textDesc {
        color: #fff
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right {
        position: absolute;
        right: calc(1000 * var(--rpx));
        top: calc(80 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right .perform-benefit {
        font-size: calc(24 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-style: italic;
        color: #fff;
        opacity: .85;
        display: flex;
        margin-bottom: calc(20 * var(--rpx));
        align-items: center
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right .perform-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #9a7bd1;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right .textText {
        color: #fff
    }

    .zn-wrapper .section5 .perform-wrapper .performance-bg {
        width: calc(1920 * var(--rpx));
        height: calc(1150 * var(--rpx));
        margin-right: calc(-240 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper {
        position: relative;
        margin-bottom: calc(145 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-bg {
        width: calc(1920 * var(--rpx));
        height: calc(1200 * var(--rpx));
        margin-right: calc(-240 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-phone {
        position: absolute;
        width: calc(845 * var(--rpx));
        height: calc(504 * var(--rpx));
        top: calc(190 * var(--rpx));
        right: calc(340 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text {
        position: absolute;
        right: 0;
        top: calc(0 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text .textDesc {
        color: #fff;
        margin-bottom: calc(16 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text .textText {
        color: #fff
    }

    .zn-wrapper .section5 .guarantee-wrapper {
        position: relative;
        margin-bottom: calc(300 * var(--rpx))
    }

    .zn-wrapper .section5 .guarantee-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(120 * var(--rpx))
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-wrap-light {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        --angle: 15deg;
        z-index: 1
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-wrap-light:before {
        content: "";
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-bg {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: relative;
        z-index: 2;
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)))
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-phone {
        width: calc(910 * var(--rpx));
        position: absolute;
        right: calc(240 * var(--rpx));
        top: calc(-114 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-text {
        position: absolute;
        bottom: calc(-114 * var(--rpx));
        right: 0
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-text .textDesc {
        color: #fff;
        margin-bottom: 10px;
        opacity: .9
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-text .textText {
        color: #fff
    }

    .zn-wrapper .section5 .urable-wrapper {
        margin-bottom: calc(225 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-title {
        color: #bba3f3;
        font-weight: 800;
        font-family: HurmeGeometricSans;
        font-size: calc(120 * var(--rpx));
        line-height: 1.4;
        margin-bottom: calc(70 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-cards {
        width: calc(1920 * var(--rpx));
        margin-right: calc(-240 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item {
        width: calc(1920 * var(--rpx));
        height: calc(900 * var(--rpx));
        display: flex
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .urable-text-wrap,
    .zn-wrapper .section5 .urable-wrapper .urable-card-item .urable-image {
        width: calc(960 * var(--rpx));
        height: calc(900 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .section-sub-title {
        color: #fff;
        margin-bottom: calc(60 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .textDesc {
        color: #fff;
        margin-bottom: calc(8 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .textText {
        color: #fff;
        margin-bottom: calc(50 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item.urable-card-item-1 .textText {
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .urable-icon-image {
        width: calc(72 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .ip64-benefits-lines {
        display: flex
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .ip64-benefit {
        font-size: calc(25 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-style: italic;
        color: #fff;
        opacity: 1;
        display: flex;
        margin-left: calc(30 * var(--rpx));
        align-items: center
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .ip64-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #ead2af;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(1) .urable-text-wrap {
        background-image: linear-gradient(to right, #694a9a, #452c73, #1d1433);
        padding-right: calc(285 * var(--rpx));
        padding-top: calc(225 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .urable-text-wrap {
        background-image: linear-gradient(to left, #b9a483, #8d6e41, #5d4427);
        padding-right: calc(140 * var(--rpx));
        padding-top: calc(246 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .urable-text-wrap .section-sub-title {
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .urable-text-wrap .section-sub-title span {
        background: linear-gradient(to bottom, #f7eddc, #f7eddc 30%, #e2c8a3 70%, #e2c8a3);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section5 .display-wrapper {
        position: relative;
        margin-bottom: calc(120 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(60 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap {
        position: relative;
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-wrap-light {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        --angle: 15deg;
        z-index: 1
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-wrap-light:before {
        content: "";
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-bg {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: relative;
        z-index: 2;
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)))
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-phone {
        top: calc(-120 * var(--rpx));
        right: calc(263 * var(--rpx));
        width: calc(910 * var(--rpx));
        position: absolute;
        z-index: 3
    }

    .zn-wrapper .section5 .display-wrapper .display-text {
        position: absolute;
        right: 0;
        bottom: calc(-120 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-text .textDesc {
        color: #fff;
        margin-bottom: calc(10 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-text .textText {
        color: #fff
    }

    .zn-wrapper .section6 .camera-wrapper {
        position: relative;
        padding-top: calc(130 * var(--rpx));
        width: calc(1340 * var(--rpx));
        margin: 0 auto
    }

    .zn-wrapper .section6 .camera-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(75 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-text {
        position: absolute;
        left: 0;
        top: calc(140 * var(--rpx));
        width: calc(500 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-text .textText {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-text .textNotice {
        color: #fff
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap {
        position: relative;
        width: calc(1340 * var(--rpx));
        height: calc(600 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-bg {
        width: calc(1340 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses {
        position: absolute;
        display: flex;
        flex-direction: column;
        right: calc(526 * var(--rpx));
        bottom: calc(310 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(1) {
        width: calc(296 * var(--rpx));
        height: calc(154 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(2) {
        width: calc(296 * var(--rpx));
        height: calc(73 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(3) {
        width: calc(296 * var(--rpx));
        height: calc(72 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(4) {
        width: calc(296 * var(--rpx));
        height: calc(87 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(5) {
        width: calc(296 * var(--rpx));
        height: calc(102 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(6) {
        width: calc(296 * var(--rpx));
        height: calc(120 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper {
        width: calc(1340 * var(--rpx));
        margin: 0 auto calc(0 * var(--rpx)) auto
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item {
        display: flex;
        margin-top: calc(200 * var(--rpx));
        align-items: center
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-text {
        flex: 1;
        justify-content: center;
        display: flex;
        flex-direction: column;
        position: relative
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image-1 {
        transform-origin: right top
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image-2 {
        transform-origin: left top
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image {
        width: calc(600 * var(--rpx));
        height: calc(800 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        overflow: hidden;
        position: relative
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image .snap-image {
        width: 100%
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image video {
        width: 100%;
        position: absolute;
        bottom: 0
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .section-sub-title {
        color: #fff;
        margin-bottom: calc(85 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .textDesc {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .textText {
        color: #fff;
        margin-bottom: calc(150 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .textNotice {
        color: #fff
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-text-2 {
        padding-right: calc(180 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper {
        width: calc(1440 * var(--rpx));
        height: calc(1100 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-1 {
        font-size: calc(85 * var(--rpx));
        color: #fff;
        position: absolute;
        right: calc(50 * var(--rpx));
        top: calc(80 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        line-height: 1.4
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-2 {
        font-size: calc(48 * var(--rpx));
        color: #fff;
        position: absolute;
        right: calc(924 * var(--rpx));
        top: calc(517 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        line-height: 1.4;
        z-index: 2
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-3 {
        width:calc(450 * var(--rpx));
        position: absolute;
        right: calc(50 * var(--rpx));
        top: calc(840 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-3 .textText {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-3 .textNotice {
        color: #fff;
        font-size: calc(13 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        padding: calc(2 * var(--rpx));
        border-radius: calc(32 * var(--rpx));
        background-image: linear-gradient(to left, #f0ddff, #7c52a4)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button .dynamic-button-inner {
        display: inline-flex;
        align-items: center;
        padding: 0 calc(30 * var(--rpx));
        height: calc(60 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        background-image: linear-gradient(to left, #bfa7e8, #6c448c)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button .dynamic-icon {
        width: calc(43 * var(--rpx));
        height: calc(43 * var(--rpx));
        margin-left: calc(18 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button span {
        color: #fff;
        font-size: calc(25 * var(--rpx));
        font-weight: 800;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(1) {
        right: calc(200 * var(--rpx));
        top: calc(350 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(2) {
        left: calc(840 * var(--rpx));
        top: calc(593 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(2) .dynamic-button-inner {
        padding-left: calc(100 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(3) {
        right: calc(889 * var(--rpx));
        top: calc(774 * var(--rpx));
        z-index: 6;
        background-image: linear-gradient(to left, #fff2dd, #947046)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(3) .dynamic-button-inner {
        background-image: linear-gradient(to left, #d9b593, #8a5929)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-bg-image {
        width: calc(1055 * var(--rpx));
        position: absolute;
        top: 0;
        right: calc(165 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-lines .dynamic-line {
        width: calc(600 * var(--rpx));
        height: calc(600 * var(--rpx));
        position: absolute;
        top: calc(292 * var(--rpx));
        right: calc(415 * var(--rpx));
        border: calc(.5 * var(--rpx)) solid #ffffff88;
        border-radius: 50%;
        transform-origin: center center;
        transform: scale(.5);
        pointer-events: none;
        opacity: 1
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap {
        position: absolute;
        width: calc(382 * var(--rpx));
        right: calc(524 * var(--rpx));
        top: calc(190 * var(--rpx));
        z-index: 5
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-phone-image {
        width: calc(382 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-camera-image {
        width: calc(23 * var(--rpx));
        height: calc(23 * var(--rpx));
        position: absolute;
        top: calc(29 * var(--rpx));
        right: calc(179 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-video {
        width: calc(344 * var(--rpx));
        height: calc(750 * var(--rpx));
        overflow: hidden;
        position: absolute;
        top: calc(20 * var(--rpx));
        right: calc(18 * var(--rpx));
        border-radius: calc(35 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-video video {
        width: calc(344 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper {
        position: relative;
        padding-top: calc(200 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-text-wrap {
        display: flex;
        padding-right: calc(50 * var(--rpx));
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: calc(70 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-left .section-sub-title {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-left .textDesc {
        color: #fff
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-right{
        width: calc(600 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-right .textText {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-right .textNotice {
        color: #fff;
        font-size: calc(13 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-wrap {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-wrap .freelink-bg-image {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-wrap .freelink-signal-image {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper {
        padding-top: calc(200 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-text-wrap {
        display: flex;
        padding-right: calc(50 * var(--rpx));
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: calc(70 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-left .section-sub-title {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-left .textDesc {
        color: #fff
    }

    .zn-wrapper .section7 .noise-wrapper .noise-right {
        width: calc(600 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-right .textText {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-right .textNotice {
        color: #fff;
        font-size: calc(13 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits {
        display: flex;
        justify-content: space-between
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .noise-benefit {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: calc(460 * var(--rpx));
        height: calc(400 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        background-image: linear-gradient(to bottom, #291b4a, #96704c);
        transform: scale(1);
        transition: transform .4s
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .noise-benefit:hover {
        transform: scale(1.06)
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .noise-benefit-icon {
        width: calc(110 * var(--rpx));
        height: calc(110 * var(--rpx));
        margin-bottom: calc(48 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .nb-title {
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-size: calc(32 * var(--rpx));
        color: #fff;
        text-align: center;
        margin-bottom: calc(24 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .nb-desc {
        font-family: HurmeGeometricSans;
        font-weight: 400;
        font-size: calc(24 * var(--rpx));
        color: #fff;
        text-align: center;
        opacity: .8
    }

    .zn-wrapper .section7 .tfr-wrapper {
        margin-top: calc(200 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item {
        display: flex;
        align-items: center;
        margin-bottom: calc(200 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-image {
        width: calc(750 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text {
        flex: 1
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .textDesc {
        color: #fff;
        margin-bottom: calc(10 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .textText {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .textNotice {
        color: #fff
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .find-button {
        height: calc(40 * var(--rpx));
        display: inline-flex;
        width: calc(140 * var(--rpx));
        justify-content: center;
        align-items: center;
        margin-top: calc(100 * var(--rpx));
        border: calc(1.5 * var(--rpx)) solid #fff;
        color: #fffe;
        text-decoration: none;
        font-size: calc(22 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 400;
        border-radius: calc(20 * var(--rpx));
        transition: all .3s
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .find-button:hover {
        color: #fff;
        font-weight: 800;
        font-size: calc(24 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item:nth-child(2n) .tfr-text {
        padding-right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item:nth-child(odd) .tfr-text {
        padding-right: calc(80 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper {
        position: relative
    }

    .zn-wrapper .section7 .ram-wrapper .ram-bg-image {
        width: calc(1920 * var(--rpx));
        margin-right: calc(-240 * var(--rpx));
        height: calc(1238 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-image {
        position: absolute;
        top: calc(346 * var(--rpx));
        right: calc(207 * var(--rpx));
        width: calc(1021 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-text {
        position: absolute;
        top: 0;
        right: calc(50 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section7 .ram-wrapper .ram-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-text .textText {
        color: #fff
    }

    .zn-wrapper .section8 {
        background-image: linear-gradient(to bottom, #000 50%, #1a0f29)
    }

    .zn-wrapper .section8 .ai-wrapper {
        padding-top: calc(100 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        margin-bottom: calc(300 * var(--rpx));
        position: relative;
        padding: calc(1 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-light {
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        top: 0;
        right: 0;
        --angle: 15deg
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-light:before {
        content: "";
        width: calc(1440 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(1 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-bg {
        width: calc(1438 * var(--rpx));
        height: calc(598 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        overflow: hidden;
        position: relative;
        z-index: 1
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-bg-image {
        width: calc(1438 * var(--rpx));
        height: calc(598 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text {
        width: calc(650 * var(--rpx));
        position: absolute;
        z-index: 2;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        top: 0;
        right: calc(150 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .textTitle {
        color: #fff;
        margin-bottom: calc(60 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .textDesc {
        color: #fff;
        margin-bottom: calc(16 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .textText {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx));
        line-height: 1.5
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-logo-image {
        width: calc(293 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap {
        display: flex
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap .ai-benefit-col {
        margin-left: calc(20 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap .ai-benefit {
        font-size: calc(24 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 400;
        color: #fff;
        display: flex;
        margin-bottom: calc(10*var(--rpx));
        align-items: center;
        line-height: 1.4
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap .ai-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #9a7bd1;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video {
        position: absolute;
        width: calc(335 * var(--rpx));
        right: calc(950 * var(--rpx));
        top: calc(-54 * var(--rpx));
        z-index: 5
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-phone-image {
        width: calc(335 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-camera-image {
        width: calc(20 * var(--rpx));
        height: calc(20 * var(--rpx));
        position: absolute;
        top: calc(25 * var(--rpx));
        right: calc(157 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-video {
        width: calc(302 * var(--rpx));
        height: calc(661 * var(--rpx));
        overflow: hidden;
        position: absolute;
        top: calc(16 * var(--rpx));
        right: calc(15 * var(--rpx));
        border-radius: calc(35 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-video video {
        width: calc(302 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item:nth-child(2n) .ai-item-text {
        right: calc(720 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item:nth-child(2n) .ai-item-video {
        right: calc(145 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video {
        position: absolute;
        z-index: 2
    }

    .zn-wrapper .section8 .studio-wrapper {
        padding-top: calc(0 * var(--rpx));
        background-image: linear-gradient(to top, #472e64, #774fa300), linear-gradient(to top, #8955c1, #8955c1 6%, #714b9b00 37%);
        width: calc(1920 * var(--rpx));
        height: calc(1140 * var(--rpx));
        position: relative;
        margin-right: calc(-240 * var(--rpx))
    }

    .zn-wrapper .section8 .studio-wrapper .studio-title {
        font-size: calc(110 * var(--rpx));
        font-weight: 800;
        font-family: HurmeGeometricSans;
        color: #fff;
        line-height: 1.4;
        text-align: center;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content {
        margin-bottom: calc(20 * var(--rpx));
        height: calc(190 * var(--rpx))
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textTitle {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx));
        text-align: center
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textText {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx));
        text-align: center;
        line-height: 1.5;
        opacity: .6
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textNotice {
        color: #fff;
        text-align: center
    }
}

@media(max-width:1080px) {
    html {
        background: #000
    }

    .zn-wrapper {
        width: 100%;
        overflow: hidden
    }

    .zn-wrapper h3,
    .zn-wrapper h4,
    .zn-wrapper p,
    .zn-wrapper div {
        line-height: 1.4
    }

    .zn-wrapper .line-wrap-mask,
    .zn-wrapper .line-wrap {
        line-height: inherit;
        font-family: inherit;
        font-weight: inherit
    }

    .zn-wrapper .pc-only {
        display: none
    }

    .zn-wrapper .sections {
        width: calc(1080 * var(--rpx));
        background: #000
    }

    .zn-wrapper .section-safe {
        width: calc(960 * var(--rpx));
        margin: 0 auto;
        position: relative;
        z-index: 2
    }

    .zn-wrapper .section-sub-title {
        font-weight: 800;
        font-size: calc(58 * var(--rpx));
        line-height: calc(64 * var(--rpx));
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .section-sub-title span {
        font-weight: 800;
        background: linear-gradient(to bottom, #b7a0e4, #b7a0e4 30%, #8762c4 70%, #8762c4);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textTitle {
        font-size: calc(58 * var(--rpx));
        line-height: 1.4;
        font-weight: 800;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textDesc {
        font-size: calc(40 * var(--rpx));
        font-weight: 800;
        opacity: .9;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textNotice {
        opacity: .4;
        font-weight: 300;
        font-size: calc(16 * var(--rpx));
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .textNotice.font-limit {
        font-size: calc(32 * var(--rpx));
        white-space: nowrap;
        transform-origin: top right;
        transform: scale(.5)
    }

    .zn-wrapper .textText {
        opacity: .7;
        font-weight: 400;
        font-size: calc(28 * var(--rpx));
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .line-wrap {
        overflow: hidden
    }

    .zn-wrapper .section1 {
        position: relative;
        background-color: #fff;
        width: calc(1080 * var(--rpx));
        height: calc(1500 * var(--rpx));
        overflow: hidden
    }

    .zn-wrapper .section1 .kv-image {
        width: calc(1080 * var(--rpx));
        height: calc(1500 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title {
        position: absolute;
        width: calc(1080 * var(--rpx));
        top: calc(163 * var(--rpx));
        text-align: center
    }

    .zn-wrapper .section1 .kv-title h3 {
        font-size: calc(93 * var(--rpx));
        font-weight: 800;
        line-height: 1.4;
        font-family: HurmeGeometricSans;
        color: #000;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title p {
        font-weight: 800;
        font-style: italic;
        font-size: calc(51 * var(--rpx));
        font-family: HurmeGeometricSans;
        color: #000
    }

    .zn-wrapper .section1 .kv-title .kv-benefits {
        display: flex;
        width: 100%;
        justify-content: center;
        margin-top: calc(70 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item {
        padding: 0 calc(30 * var(--rpx));
        text-align: right;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-size: calc(20 * var(--rpx));
        position: relative;
        align-items: center;
        line-height: 1.4;
        font-family: HurmeGeometricSans;
        color: #000;
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:before {
        content: "";
        width: calc(1 * var(--rpx));
        background-color: #000;
        height: calc(60 * var(--rpx));
        top: calc(2 * var(--rpx));
        position: absolute;
        left: 0
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child:before {
        display: none
    }

    .zn-wrapper .section1 .kv-title .kbi-main,
    .zn-wrapper .section1 .kv-title .kbi-desc {
        font-weight: 800;
        font-family: HurmeGeometricSans;
        color: #000;
        line-height: 1.4
    }

    .zn-wrapper .section1 .kv-title .kbi-main span,
    .zn-wrapper .section1 .kv-title .kbi-desc span {
        font-weight: 800;
        font-family: HurmeGeometricSans;
        line-height: 1.4;
        color: #000;
        font-size: calc(14.5 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kbi-main {
        margin-bottom: calc(4 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:first-child .kbi-main span,
    .zn-wrapper .section1 .kv-title .kv-benefit-item:first-child .kbi-desc span {
        margin-right: calc(10 * var(--rpx))
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child .kbi-main {
        margin-bottom: 0
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child .kbi-desc {
        font-size: 0
    }

    .zn-wrapper .section1 .kv-title .kv-benefit-item:last-child .kbi-desc span {
        line-height: calc(16 * var(--rpx))
    }

    .zn-wrapper .section2 {
        height: calc(2320 * var(--rpx));
        width: calc(1080 * var(--rpx));
        overflow: hidden;
        position: relative;
        padding-top: calc(214 * var(--rpx))
    }

    .zn-wrapper .section2 .nav-bg {
        position: absolute;
        z-index: 1;
        top: -1px;
        right: 0;
        width: calc(1080 * var(--rpx));
        height: calc(2112 * var(--rpx))
    }

    .zn-wrapper .section2 .navs-wrapper {
        width: calc(960 * var(--rpx));
        position: relative;
        z-index: 2;
        margin: 0 auto
    }

    .zn-wrapper .section2 .nav {
        position: relative;
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section2 .nav-inner {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        padding: calc(1 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section2 .nav-inner .nav-inner-wrap {
        width: 100%;
        height: 100%;
        border-radius: calc(30 * var(--rpx));
        overflow: hidden
    }
    .zn-wrapper .section2 .nav-inner .nav7-image{
        transform: scaleX(-1);

    }

    .zn-wrapper .section2 .nav-inner .nav-image {
        width: 100%;
        position: relative;
        z-index: 1
    }

    .zn-wrapper .section2 .navs-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section2 .navs-row.navs-row-no-bottom {
        margin-bottom: 0
    }

    .zn-wrapper .section2 .nav-text {
        font-size: calc(32 * var(--rpx));
        line-height: calc(38 * var(--rpx));
        font-family: HurmeGeometricSans;
        position: absolute;
        font-weight: 800;
        z-index: 3
    }

    .zn-wrapper .section2 .nav1 {
        width: calc(960 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav1 .nav1-image {
        width: calc(478 * var(--rpx));
        position: absolute;
        left: calc(44 * var(--rpx));
        top: calc(-97 * var(--rpx));
        transform-origin: center bottom;
        pointer-events: none;
        z-index: 2
    }

    .zn-wrapper .section2 .nav1 .nav-inner .nav1-image-bg {
        border-radius: calc(30 * var(--rpx));
        width: calc(958 * var(--rpx));
        height: calc(398 * var(--rpx))
    }

    .zn-wrapper .section2 .nav1 .nav-text {
        color: #fff;
        top: calc(160 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav2 {
        width: calc(469 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav2 .nav-text {
        color: #fff;
        top: calc(30 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav3 {
        width: calc(469 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav3 .nav-text {
        color: #fff;
        top: calc(30 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav4 {
        width: calc(469 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav4 .nav-text {
        color: #fff;
        top: calc(30 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav5 {
        width: calc(469 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav5 .nav-text {
        color: #fff;
        top: calc(30 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav6 {
        width: calc(469 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav6 .nav-text {
        color: #fff;
        top: calc(30 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav7 {
        width: calc(469 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav7 .nav-text {
        color: #fff;
        top: calc(30 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section2 .nav8 {
        width: calc(960 * var(--rpx));
        height: calc(400 * var(--rpx))
    }

    .zn-wrapper .section2 .nav8 .nav-text {
        color: #000;
        top: calc(160 * var(--rpx));
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section3 {
        width: calc(1080 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper {
        position: relative;
        width: 100%;
        height: calc(1400 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper .section-sub-title {
        color: #fff;
        text-align: center
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone-wrap {
        width: calc(815 * var(--rpx));
        position: relative;
        right: 50%;
        margin-top: calc(220 * var(--rpx));
        margin-right: calc(-407 * var(--rpx))
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone {
        width: calc(815 * var(--rpx));
        opacity: 1;
        z-index: 1;
        position: relative
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone-light {
        width: calc(694 * var(--rpx));
        height: calc(234 * var(--rpx));
        border-radius: calc(113 * var(--rpx));
        position: absolute;
        top: calc(52 * var(--rpx));
        right: calc(62 * var(--rpx));
        --angle: 15deg;
        z-index: 2
    }

    .zn-wrapper .section3 .deco-wrapper .deco-phone-light:before {
        content: "";
        width: calc(694 * var(--rpx));
        height: calc(234 * var(--rpx));
        border-radius: calc(113 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #8972d3 15%, #3d3256 25%, #3d3256 35%, #8972d3 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section3 .deco-wrapper .deco-camera {
        width: calc(658 * var(--rpx));
        position: absolute;
        right: calc(82 * var(--rpx));
        top: calc(69 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section3 .deco-wrapper .textText {
        position: absolute;
        z-index: 3;
        text-align: center;
        top: calc(163 * var(--rpx));
        width: 100%;
        color: #fff
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap {
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-bg {
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-phone {
        position: absolute;
        width: calc(431 * var(--rpx));
        top: calc(-75 * var(--rpx));
        right: calc(295 * var(--rpx));
        opacity: 0;
        z-index: 3
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-left {
        font-size: calc(92 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        position: absolute;
        right: calc(50 * var(--rpx));
        top: calc(120 * var(--rpx));
        color: #fff;
        opacity: 0;
        line-height: 1.4
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .csi-right {
        font-size: calc(92 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        position: absolute;
        right: calc(590 * var(--rpx));
        top: calc(315 * var(--rpx));
        color: #fff;
        opacity: 0;
        line-height: 1.4
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-left {
        right: calc(50 * var(--rpx));
        top: calc(120 * var(--rpx));
        letter-spacing: calc(-2 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-right {
        right: calc(590 * var(--rpx));
        top: calc(315 * var(--rpx));
        letter-spacing: calc(-1 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-left,
    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(1) .csi-right {
        background: linear-gradient(to bottom, #c5a8ec, #faf1ff 30%, #faf1ff 70%, #e9ddff);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-left {
        right: calc(50 * var(--rpx));
        top: calc(120 * var(--rpx));
        letter-spacing: calc(-2 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-right {
        right: calc(590 * var(--rpx));
        top: calc(315 * var(--rpx));
        letter-spacing: calc(-1 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-left {
        background: linear-gradient(to bottom, #cab184, #f4f0e5 30%, #f4f0e5 70%, #efe0bf);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(2) .csi-right {
        background: linear-gradient(to bottom, #f4f0e5, #f4f0e5 30%, #f4f0e5 70%, #efe0bf);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-left {
        right: calc(190 * var(--rpx));
        top: calc(120 * var(--rpx));
        letter-spacing: calc(-2 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-right {
        right: calc(590 * var(--rpx));
        top: calc(315 * var(--rpx));
        letter-spacing: calc(-1 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-left {
        background: linear-gradient(to bottom, #a4b8ab, #e1eee6 30%, #e1eee6 70%, #d6e5db);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(3) .csi-right {
        background: linear-gradient(to bottom, #eaf6ee, #f4fef7 30%, #f4fef7 70%, #deece2);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-left {
        right: calc(50 * var(--rpx));
        top: calc(120 * var(--rpx));
        letter-spacing: calc(-2 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-right {
        right: calc(590 * var(--rpx));
        top: calc(315 * var(--rpx));
        letter-spacing: calc(-1 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-left {
        background: linear-gradient(to bottom, #a3a096, #edece1 30%, #edece1 70%, #bcbaaf);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(4) .csi-right {
        background: linear-gradient(to bottom, #dcdad1, #faf8ef 30%, #faf8ef 70%, #f0eee2);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-left {
        right: calc(235*var(--rpx));
        top: calc(120 * var(--rpx));
        letter-spacing: calc(-2 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-right {
        right: calc(590 * var(--rpx));
        top: calc(315 * var(--rpx));
        letter-spacing: calc(-1 * var(--rpx))
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-left {
        background: linear-gradient(to bottom, #b3b3b9, #dadadf, #fff, #dadadf, #b1b1b8);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item:nth-child(5) .csi-right {
        background: linear-gradient(to bottom, #e9e9ec, #e9e9ec, #fff, #fefeff, #e6e7eb);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-bg,
    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-phone {
        opacity: 1
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-left {
        opacity: 1;
        animation: csiLeft .7s ease-in-out
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-wrap .color-switch-item--active .csi-right {
        opacity: 1;
        animation: csiRight .7s ease-in-out
    }

    @keyframes csiLeft {
        0% {
            opacity: 0;
            transform: translate(calc(-1*(-50 * var(--rpx))))
        }

        to {
            opacity: 1;
            transform: translate(0)
        }
    }

    @keyframes csiRight {
        0% {
            opacity: 0;
            transform: translate(calc(-1*(50 * var(--rpx))))
        }

        to {
            opacity: 1;
            transform: translate(0)
        }
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap {
        display: inline-block;
        padding: 0 calc(10 * var(--rpx));
        height: calc(32 * var(--rpx));
        position: relative;
        border-radius: calc(20 * var(--rpx));
        margin: calc(32 * var(--rpx)) auto 0 auto;
        border: calc(1 * var(--rpx)) solid;
        overflow: hidden;
        right: 50%;
        transform: translate(50%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-bg {
        position: absolute;
        width: calc(112 * var(--rpx));
        background-image: linear-gradient(to left, #fff0 20%, #fff5, #fff5, #fff0 80%);
        background-size: 100% auto;
        background-position: center center;
        right: 0;
        height: 100%;
        top: 0;
        z-index: 1;
        transition: transform .3s ease-in-out
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        justify-content: center
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button {
        cursor: pointer;
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button span {
        width: calc(12 * var(--rpx));
        height: calc(12 * var(--rpx));
        border-radius: 50%;
        margin: 0 calc(8 * var(--rpx));
        display: block;
        position: relative
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button span:before {
        content: "";
        width: calc(16 * var(--rpx));
        height: calc(16*var(--rpx));
        border-radius: 50%;
        border: calc(2 * var(--rpx)) solid #fff;
        position: absolute;
        right: 50%;
        top: 50%;
        transform: translate(50%, -50%);
        display: none
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--purple span {
        background-image: linear-gradient(-135deg, #c3b1e4, #482d79)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--gold span {
        background-image: linear-gradient(-135deg, #e3d8c7, #7c6c47)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--green span {
        background-image: linear-gradient(-135deg, #aed3b8, #355f46)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--grey span {
        background-image: linear-gradient(-135deg, #e0dfd5, #64635a)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap .color-switch-buttons .color-switch-button--black span {
        background-image: linear-gradient(-135deg, #b0b0b0, #353536)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--purple {
        border-color: #5e5087;
        background-color: #402f7a
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--purple .color-switch-bg {
        transform: translate(40%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--purple .color-switch-button--purple span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--gold {
        border-color: #9e7b55;
        background-color: #665745
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--gold .color-switch-bg {
        transform: translate(8%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--gold .color-switch-button--gold span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--green {
        border-color: #6c8875;
        background-color: #43604c
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--green .color-switch-bg {
        transform: translate(-18%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--green .color-switch-button--green span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--grey {
        border-color: #8e8c83;
        background-color: #68675f
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--grey .color-switch-bg {
        transform: translate(-44%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--grey .color-switch-button--grey span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--black {
        border-color: #525358;
        background-color: #27272d
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--black .color-switch-bg {
        transform: translate(-76%)
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-button-wrap.color-switch--black .color-switch-button--black span:before {
        display: block
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-texts {
        margin: calc(20 * var(--rpx)) auto 0 auto
    }

    .zn-wrapper .section3 .color-wrapper .color-switch-texts .textText {
        width: 100%;
        text-align: center;
        color: #fff
    }

    .zn-wrapper .section4 .battery-wrapper {
        margin-bottom: calc(170 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(92 * var(--rpx));
        position: relative;
        z-index: 1
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap {
        width: calc(960 * var(--rpx));
        height: calc(1000 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-wrap-light {
        width: calc(960 * var(--rpx));
        height: calc(1000 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        --angle: 15deg;
        z-index: 1
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-wrap-light:before {
        content: "";
        width: calc(960 * var(--rpx));
        height: calc(1000 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-bg {
        width: calc(960 * var(--rpx));
        height: calc(1000 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        z-index: 2;
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        transform: scaleX(-1);

    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-dark {
        position: absolute;
        width: calc(799 * var(--rpx));
        top: calc(-180 * var(--rpx));
        left: calc(3 * var(--rpx));
        transform-origin: bottom center;
        z-index: 3;
                        transform: scaleX(-1);

    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-light {
        position: absolute;
        width: calc(535 * var(--rpx));
        top: calc(-140 * var(--rpx));
        left: calc(218 * var(--rpx));
        z-index: 3;
                transform: scaleX(-1);

    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-text {
        position: absolute;
        right: calc(50 * var(--rpx));
        bottom: calc(45 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-text .textText {
        color: #fff;
        margin-bottom: calc(46 * var(--rpx));
        opacity: .7
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-text .textNotice {
        color: #fff
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefits {
        position: absolute;
        right: calc(50 * var(--rpx));
        top: calc(400 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: calc(50 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit-top {
        color: #9a78d3;
        font-family: HurmeGeometricSans;
        font-weight: 400;
        font-size: calc(24 * var(--rpx));
        line-height: 1.4;
        margin-bottom: calc(4 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit-top span {
        font-weight: 800;
        font-family: HurmeGeometricSans;
        font-size: calc(68 * var(--rpx));
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section4 .battery-wrapper .battery-wrap .battery-benefit-bottom {
        color: #a67acf;
        font-family: HurmeGeometricSans;
        font-size: calc(16 * var(--rpx));
        line-height: 1.4;
        font-weight: 400;
        padding-right: calc(2 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper {
        position: relative
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text {
        position: absolute;
        top: calc(0 * var(--rpx));
        width: 100%;
        z-index: 4
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .textText {
        color: #fff;
        margin-bottom: calc(24 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .charging-benefits {
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .charging-benefit {
        font-size: calc(28 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-style: italic;
        color: #fff;
        opacity: .7;
        display: flex;
        align-items: center
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .charging-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #9a7bd1;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-text .textNotice {
        color: #fff;
        position: absolute;
        right: 0;
        top: calc(1260 * var(--rpx))
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap {
        width: calc(1080 * var(--rpx));
        height: calc(1500 * var(--rpx));
        margin-right: calc(-60 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap .charging-bg {
        width: calc(1080 * var(--rpx));
        height: calc(1500 * var(--rpx));
        z-index: 1;
        position: relative
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap .charging-phone {
        position: absolute;
        width: calc(987 * var(--rpx));
        right: 0;
        top: calc(523 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section4 .charging-wrapper .charging-images-wrap .charging-45w {
        z-index: 2;
        position: absolute;
        width: calc(600 * var(--rpx));
        top: calc(295 * var(--rpx));
        left: calc(339 * var(--rpx))
    }

    .zn-wrapper .section5 {
        margin-top: calc(-100 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper {
        position: relative;
        width: calc(1080 * var(--rpx));
        overflow: hidden;
        margin-right: calc(-60 * var(--rpx));
        height: calc(1400 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-left {
        position: absolute;
        right: calc(60 * var(--rpx));
        top: 0
    }

    .zn-wrapper .section5 .perform-wrapper .perform-left .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-left .textDesc {
        color: #fff
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right {
        position: absolute;
        right: calc(60 * var(--rpx));
        top: calc(230 * var(--rpx));
        display: flex;
        flex-direction: column-reverse
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right .perform-benefit {
        font-size: calc(28 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-style: italic;
        color: #fff;
        opacity: .85;
        display: flex;
        align-items: center
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right .perform-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #9a7bd1;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .perform-right .textText {
        color: #fff;
        margin-bottom: calc(60 * var(--rpx))
    }

    .zn-wrapper .section5 .perform-wrapper .performance-bg {
        width: calc(1080 * var(--rpx));
        height: calc(1400 * var(--rpx));
        position: relative;
        top: calc(0 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper {
        position: relative;
        margin-bottom: calc(120 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-bg {
        width: calc(1080 * var(--rpx));
        height: calc(1600 * var(--rpx));
        margin-right: calc(-60 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-phone {
        position: absolute;
        width: calc(786 * var(--rpx));
        top: calc(600 * var(--rpx));
        right: calc(100 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text {
        position: absolute;
        right: 0;
        top: calc(160 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(50 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text .textDesc {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section5 .signal-wrapper .signal-text .textText {
        color: #fff
    }

    .zn-wrapper .section5 .guarantee-wrapper {
        position: relative;
        margin-bottom: calc(166 * var(--rpx))
    }

    .zn-wrapper .section5 .guarantee-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(410 * var(--rpx))
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap {
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-wrap-light {
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        --angle: 15deg;
        z-index: 1
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-wrap-light:before {
        content: "";
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-bg {
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)))
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-wrap .guarantee-phone {
        width: calc(873 * var(--rpx));
        position: absolute;
        right: calc(50 * var(--rpx));
        top: calc(-114 * var(--rpx));
        z-index: 2
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-text {
        position: absolute;
        top: calc(190 * var(--rpx));
        right: 0
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-text .textDesc {
        color: #fff;
        margin-bottom: 20px;
        opacity: .9
    }

    .zn-wrapper .section5 .guarantee-wrapper .guarantee-text .textText {
        color: #fff
    }

    .zn-wrapper .section5 .urable-wrapper {
        margin-bottom: calc(170 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-title {
        color: #bba3f3;
        font-weight: 800;
        font-family: HurmeGeometricSans;
        font-size: calc(100 * var(--rpx));
        line-height: 1.4;
        margin-bottom: calc(70 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-cards {
        width: calc(960 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item {
        width: calc(960 * var(--rpx));
        height: calc(1080 * var(--rpx));
        position: relative;
        border-radius: calc(30 * var(--rpx));
        overflow: hidden;
        margin-bottom: calc(50 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .urable-text-wrap {
        width: calc(960 * var(--rpx));
        height: calc(1080 * var(--rpx));
        position: absolute;
        right: calc(50 * var(--rpx));
        top: calc(60 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .urable-image {
        width: calc(960 * var(--rpx));
        height: calc(1080 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .section-sub-title {
        color: #fff;
        margin-bottom: calc(50 * var(--rpx));
        font-size: calc(55 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .textDesc {
        color: #fff;
        font-size: calc(35 * var(--rpx));
        margin-bottom: calc(15 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .textText {
        color: #fff;
        margin-bottom: calc(50 * var(--rpx));
        font-size: calc(25 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item.urable-card-item-1 .textText {
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .urable-icon-image {
        width: calc(76 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .section-sub-title {
        color: #775c38;
        margin-bottom: calc(50 * var(--rpx));
        font-size: calc(55 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .section-sub-title span {
        background: transparent;
        color: #775c38;
        -webkit-text-fill-color: inherit;
        font-weight: 800
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .textDesc {
        color: #654929;
        opacity: 1;
        font-size: calc(35 * var(--rpx));
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item:nth-child(2) .textText {
        color: #654929;
        margin-bottom: calc(50 * var(--rpx));
        font-size: calc(25 * var(--rpx))
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .ip64-benefit {
        font-size: calc(25 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        color: #654929;
        margin-bottom: calc(40 * var(--rpx));
        opacity: 1;
        display: flex;
        align-items: center
    }

    .zn-wrapper .section5 .urable-wrapper .urable-card-item .ip64-benefit:before {
        content: "";
        width: calc(8 * var(--rpx));
        height: calc(8 * var(--rpx));
        border-radius: 50%;
        background-color: #654929;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper {
        position: relative
    }

    .zn-wrapper .section5 .display-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(90 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap {
        position: relative;
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-wrap-light {
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        right: 0;
        top: 0;
        --angle: 15deg;
        z-index: 1
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-wrap-light:before {
        content: "";
        width: calc(960 * var(--rpx));
        height: calc(650 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-bg {
        width: calc(958 * var(--rpx));
        height: calc(648 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)))
    }

    .zn-wrapper .section5 .display-wrapper .display-wrap .display-phone {
        top: calc(-77 * var(--rpx));
        right: calc(-20 * var(--rpx));
        width: calc(953 * var(--rpx));
        position: absolute;
        z-index: 2
    }

    .zn-wrapper .section5 .display-wrapper .display-text {
        margin-top: calc(30 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-text .textDesc {
        color: #fff;
        margin-bottom: calc(16 * var(--rpx))
    }

    .zn-wrapper .section5 .display-wrapper .display-text .textText {
        color: #fff
    }

    .zn-wrapper .section6 {
        margin-top: calc(-90 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper {
        position: relative;
        width: calc(960 * var(--rpx));
        margin: 0 auto calc(220 * var(--rpx)) auto
    }

    .zn-wrapper .section6 .camera-wrapper .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-text .textText {
        color: #fff;
        margin-bottom: calc(330 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-text .textNotice {
        color: #fff;
        position: absolute;
        top: calc(1410 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap {
        position: relative;
        width: calc(960 * var(--rpx));
        height: calc(800 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-bg {
        width: calc(960 * var(--rpx));
        height: calc(800 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses {
        position: absolute;
        display: flex;
        flex-direction: column;
        right: calc(320 * var(--rpx));
        bottom: calc(400 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(1) {
        width: calc(318 * var(--rpx));
        height: calc(165 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(2) {
        width: calc(318 * var(--rpx));
        height: calc(79 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(3) {
        width: calc(318 * var(--rpx));
        height: calc(78 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(4) {
        width: calc(318 * var(--rpx));
        height: calc(92 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(5) {
        width: calc(318 * var(--rpx));
        height: calc(110 * var(--rpx))
    }

    .zn-wrapper .section6 .camera-wrapper .camera-wrap .camera-glasses .camera-glass-item:nth-child(6) {
        width: calc(318 * var(--rpx));
        height: calc(129 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper {
        width: calc(960 * var(--rpx));
        margin: 0 auto
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item {
        display: flex;
        flex-direction: column;
        position: relative
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image-1 {
        transform-origin: right top
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image-2 {
        transform-origin: left top
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image {
        width: calc(960 * var(--rpx));
        height: calc(1300 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        overflow: hidden;
        position: relative
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image .snap-image {
        width: 100%
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .snap-live-image video {
        width: 100%;
        position: absolute;
        bottom: 0
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .textDesc {
        color: #fff;
        margin-bottom: calc(16 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .textText {
        color: #fff;
        margin-bottom: calc(80 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item .textNotice {
        color: #fff;
        position: absolute;
        top: calc(1714 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item:nth-child(1) {
        margin-bottom: calc(230 * var(--rpx))
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item.snap-live-item-2 {
        flex-direction: column-reverse;
        margin-bottom: 0
    }

    .zn-wrapper .section6 .snap-live-wrapper .snap-live-item.snap-live-item-2 .snap-live-image {
        height: calc(1280 * var(--rpx))
    }

    .zn-wrapper .section7 {
        margin-top: calc(-90 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper {
        width: calc(960 * var(--rpx));
        height: calc(1250 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-1 {
        font-size: calc(58 * var(--rpx));
        color: #fff;
        position: absolute;
        right: calc(0 * var(--rpx));
        top: calc(0 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        line-height: 1.4
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-2 {
        font-size: calc(40 * var(--rpx));
        color: #fff;
        position: absolute;
        right: calc(0 * var(--rpx));
        top: calc(80 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 800;
        line-height: 1.4;
        z-index: 2
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-3 .textText {
        color: #fff;
        position: absolute;
        right: calc(0 * var(--rpx));
        top: calc(136 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-text-3 .textNotice {
        color: #fff;
        position: absolute;
        right: 0;
        top: calc(1200 * var(--rpx));
        width: 100%
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button {
        display: inline-flex;
        position: absolute;
        justify-content: center;
        align-items: center;
        z-index: 1;
        padding: calc(2 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        background-image: linear-gradient(to left, #f0ddff, #7c52a4)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button .dynamic-button-inner {
        display: inline-flex;
        align-items: center;
        padding: 0 calc(28 * var(--rpx));
        height: calc(56 * var(--rpx));
        border-radius: calc(28 * var(--rpx));
        background-image: linear-gradient(to left, #bfa7e8, #6c448c)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button .dynamic-icon {
        width: calc(40 * var(--rpx));
        height: calc(40 * var(--rpx));
        margin-left: calc(16 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button span {
        color: #fff;
        font-size: calc(25 * var(--rpx));
        font-weight: 800;
        font-family: HurmeGeometricSans
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(1) {
        right: calc(672 * var(--rpx));
        top: calc(518 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(2) {
        right: calc(30 * var(--rpx));
        top: calc(675 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(2) .dynamic-button-inner {
        padding-left: calc(50 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(3) {
        right: calc(623 * var(--rpx));
        top: calc(907 * var(--rpx));
        z-index: 6;
        background-image: linear-gradient(to left, #fff2dd, #947046)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-button:nth-child(3) .dynamic-button-inner {
        background-image: linear-gradient(to left, #d9b593, #8a5929)
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-bg-image {
        width: calc(1080 * var(--rpx));
        position: absolute;
        top: 0;
        right: calc(-60 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynamic-lines .dynamic-line {
        width: calc(600 * var(--rpx));
        height: calc(600 * var(--rpx));
        position: absolute;
        top: calc(422 * var(--rpx));
        right: calc(172 * var(--rpx));
        border: calc(.5 * var(--rpx)) solid #ffffff88;
        border-radius: 50%;
        transform-origin: center center;
        transform: scale(.5);
        pointer-events: none;
        opacity: 1
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap {
        position: absolute;
        width: calc(356 * var(--rpx));
        right: calc(295 * var(--rpx));
        top: calc(364 * var(--rpx));
        z-index: 5
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-phone-image {
        width: calc(356 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-camera-image {
        width: calc(21 * var(--rpx));
        height: calc(21 * var(--rpx));
        position: absolute;
        top: calc(27 * var(--rpx));
        right: calc(167 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-video {
        width: calc(320 * var(--rpx));
        height: calc(698 * var(--rpx));
        overflow: hidden;
        position: absolute;
        top: calc(19 * var(--rpx));
        right: calc(17 * var(--rpx));
        border-radius: calc(35 * var(--rpx))
    }

    .zn-wrapper .section7 .dynamic-wrapper .dynatic-phone-wrap .dynamic-video video {
        width: calc(320 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper {
        position: relative;
        padding-top: calc(160 * var(--rpx));
        margin-bottom: calc(250 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-text-wrap {
        margin-bottom: calc(50 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-left .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-left .textDesc,
    .zn-wrapper .section7 .freelink-wrapper .freelink-right .textText {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-right .textNotice {
        color: #fff;
        position: absolute;
        top: calc(1360 * var(--rpx));
        right: 0
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-wrap {
        width: calc(960 * var(--rpx));
        height: calc(800 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-wrap .freelink-bg-image {
        width: calc(960 * var(--rpx));
        height: calc(800 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .freelink-wrapper .freelink-wrap .freelink-signal-image {
        position: absolute;
        top: 0;
        right: 0;
        width: calc(960 * var(--rpx));
        height: calc(800 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper {
        position: relative
    }

    .zn-wrapper .section7 .noise-wrapper .noise-text-wrap {
        margin-bottom: calc(70 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-left .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-left .textDesc {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-right .textText {
        color: #fff
    }

    .zn-wrapper .section7 .noise-wrapper .noise-right .textNotice {
        color: #fff;
        position: absolute;
        top: calc(1446 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .noise-benefit {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-right: calc(85 * var(--rpx));
        align-items: flex-start;
        width: calc(960 * var(--rpx));
        height: calc(300 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: relative;
        margin-bottom: calc(20 * var(--rpx));
        background-image: linear-gradient(-173deg, #291b4a 23%, #96704c)
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .noise-benefit-icon {
        width: calc(110 * var(--rpx));
        height: calc(110 * var(--rpx));
        margin-bottom: calc(48 * var(--rpx));
        position: absolute;
        left: calc(100 * var(--rpx));
        top: 50%;
        margin-top: calc(-55 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .nb-title {
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-size: calc(40 * var(--rpx));
        color: #fff;
        text-align: right;
        margin-bottom: calc(32 * var(--rpx))
    }

    .zn-wrapper .section7 .noise-wrapper .noise-benefits .nb-desc {
        font-family: HurmeGeometricSans;
        font-weight: 800;
        font-size: calc(28 * var(--rpx));
        color: #fff;
        text-align: right;
        opacity: .7
    }

    .zn-wrapper .section7 .tfr-wrapper {
        margin-top: calc(240 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item {
        display: flex;
        flex-direction: column;
        margin-bottom: calc(180 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item:nth-child(odd) {
        flex-direction: column-reverse
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item:nth-child(2) {
        margin-bottom: calc(230 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item:nth-child(2) .tfr-text {
        margin-bottom: calc(80 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-image {
        width: calc(960 * var(--rpx));
        height: calc(800 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text {
        flex: 1
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(40 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .textDesc {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .textText {
        color: #fff;
        margin-bottom: calc(55 * var(--rpx))
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .textNotice {
        color: #fff;
        position: absolute;
        top: calc(1350 * var(--rpx));
        right: 0
    }

    .zn-wrapper .section7 .tfr-wrapper .tfr-item .tfr-text .find-button {
        height: calc(70 * var(--rpx));
        display: inline-flex;
        padding: 0 calc(44 * var(--rpx));
        justify-content: center;
        align-items: center;
        border: calc(1.5 * var(--rpx)) solid #fff;
        color: #fff;
        text-decoration: none;
        font-size: calc(35 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 400;
        border-radius: calc(35 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper {
        position: relative;
        width: calc(960 * var(--rpx));
        height: calc(1160 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-bg-image {
        width: calc(1080 * var(--rpx));
        margin-right: calc(-60 * var(--rpx));
        height: calc(1160 * var(--rpx));
        position: relative;
        top: calc(-40 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-image {
        position: absolute;
        top: calc(340 * var(--rpx));
        right: calc(27 * var(--rpx));
        width: calc(894 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-text {
        position: absolute;
        top: 0;
        right: calc(0 * var(--rpx));
        z-index: 3
    }

    .zn-wrapper .section7 .ram-wrapper .ram-text .section-sub-title {
        color: #fff;
        margin-bottom: calc(55 * var(--rpx))
    }

    .zn-wrapper .section7 .ram-wrapper .ram-text .textText {
        color: #fff
    }

    .zn-wrapper .section8 {
        margin-top: calc(-90 * var(--rpx));
        background-image: linear-gradient(to bottom, #000 20%, #1a0f29)
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item {
        width: calc(960 * var(--rpx));
        height: calc(600 * var(--rpx));
        margin-bottom: calc(80 * var(--rpx));
        position: relative
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-light {
        width: calc(960 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        top: 0;
        right: 0;
        --angle: 15deg
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-light:before {
        content: "";
        width: calc(960 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        position: absolute;
        padding: calc(2 * var(--rpx));
        background-image: conic-gradient(from var(--angle), #3d3256 0%, #3d3256 15%, #8972d3 25%, #3d3256 35%, #3d3256 50%, #3d3256 65%, #8972d3 75%, #3d3256 85%, #3d3256 100%);
        mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        -webkit-mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
        mask-composite: xor;
        -webkit-mask-composite: xor;
        background-position: center center;
        display: block
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-bg {
        width: calc(960 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx));
        overflow: hidden;
        position: relative;
        z-index: 1;
        -webkit-clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)));
        clip-path: inset(calc(1 * var(--rpx)) round calc(30 * var(--rpx)))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-bg-image {
        width: calc(960 * var(--rpx));
        height: calc(600 * var(--rpx));
        border-radius: calc(30 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text {
        position: absolute;
        z-index: 2;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: calc(250 * var(--rpx));
        top: 0;
        right: calc(50 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .textTitle {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .textDesc {
        color: #fff;
        margin-bottom: calc(10 * var(--rpx));
        font-size: calc(32 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .textText {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx));
        font-size: calc(25 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-logo-image {
        width: calc(264 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap {
        display: flex
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap .ai-benefit-col {
        margin-left: calc(26 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap .ai-benefit {
        font-size: calc(24 * var(--rpx));
        font-family: HurmeGeometricSans;
        font-weight: 400;
        color: #fff;
        opacity: .85;
        display: flex;
        margin-bottom: calc(12*var(--rpx));
        line-height: 1.4;
        align-items: center
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-text .ai-benefit-wrap .ai-benefit:before {
        content: "";
        width: calc(10 * var(--rpx));
        height: calc(10 * var(--rpx));
        border-radius: 50%;
        background-color: #9a7bd1;
        display: inline-block;
        margin-left: calc(10 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video {
        position: absolute;
        width: calc(244 * var(--rpx));
        right: calc(635 * var(--rpx));
        top: calc(53 * var(--rpx));
        z-index: 5
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-phone-image {
        width: calc(244 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-camera-image {
        width: calc(14 * var(--rpx));
        height: calc(14 * var(--rpx));
        position: absolute;
        top: calc(18 * var(--rpx));
        right: calc(114 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-video {
        width: calc(220 * var(--rpx));
        height: calc(482 * var(--rpx));
        overflow: hidden;
        position: absolute;
        top: calc(11 * var(--rpx));
        right: calc(11 * var(--rpx));
        border-radius: calc(35 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video .ai-video video {
        width: calc(220 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item:nth-child(2n) .ai-item-text {
        right: calc(400 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item:nth-child(2n) .ai-item-video {
        right: calc(78 * var(--rpx))
    }

    .zn-wrapper .section8 .ai-wrapper .ai-item .ai-item-video {
        position: absolute;
        z-index: 2
    }

    .zn-wrapper .section8 .studio-wrapper {
        padding-top: calc(120 * var(--rpx));
        background-image: linear-gradient(to top, #472e64, #774fa300), linear-gradient(to top, #8955c1, #8955c1 30%, #714b9b00 55%);
        width: calc(1080 * var(--rpx));
        height: calc(1500 * var(--rpx));
        position: relative;
        margin-right: calc(-60 * var(--rpx))
    }

    .zn-wrapper .section8 .studio-wrapper .studio-title {
        font-size: calc(110 * var(--rpx));
        font-weight: 800;
        font-family: HurmeGeometricSans;
        color: #fff;
        line-height: 1.4;
        text-align: center;
        margin-bottom: calc(60 * var(--rpx))
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content {
        margin-bottom: calc(50 * var(--rpx));
        height: calc(200 * var(--rpx))
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textTitle {
        color: #fff;
        margin-bottom: calc(20 * var(--rpx));
        text-align: center
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textText {
        color: #fff;
        margin-bottom: calc(30 * var(--rpx));
        text-align: center;
        font-size: calc(25 * var(--rpx));
        opacity: .5
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textNotice {
        color: #fff;
        text-align: center
    }

    .zn-wrapper .section8 .studio-wrapper .studio-circle-content .scc-item .textNotice.font-limit {
        font-size: calc(32 * var(--rpx));
        white-space: nowrap;
        transform-origin: top center;
        transform: scale(.5)
    }
}

@font-face {
    font-family: HurmeGeometricSans;
    src: url(./fonts/HurmeGeometricSans_No3_5_Semibold.otf) format("opentype");
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: HurmeGeometricSans;
    src: url(./fonts/HurmeGeometricSans_No3_4_Regular.otf) format("opentype");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: HurmeGeometricSans;
    src: url(./fonts/HurmeGeometricSans_No3_Oblique_5_Semibold.otf) format("opentype");
    font-weight: 800;
    font-style: italic
}

@font-face {
    font-family: HurmeGeometricSans;
    src: url(./fonts/HurmeGeometricSans_No3_3_Light.otf) format("opentype");
    font-weight: 300;
    font-style: normal
}

.zn-wrapper {
    font-family: HurmeGeometricSans;
    line-height: 1.4
}

.zn-wrapper img {
    display: block
}

.zn-wrapper h3,
.zn-wrapper p {
    margin: 0;
    padding: 0
}