@charset "UTF-8";
@media screen and (min-width:1345px) {
    #one-dom-container {
        --semantic-font-size-head-0: 97px;
        --semantic-font-size-head-1: 71px;
        --semantic-font-size-head-2: 58px;
        --semantic-font-size-head-3: 48px;
        --semantic-font-size-subhead: 25px;
        --semantic-font-size-highlight-1: 71px;
        --semantic-font-size-highlight-2: 57px;
        --semantic-font-size-highlight-3: 42px;
        --semantic-font-size-highlight-4: 36px;
        --semantic-font-size-highlight-5: 28px;
        --semantic-font-size-highlight-6: 25px;
        --semantic-font-size-body-1: 21px;
        --semantic-font-size-body-2: 19px;
        --semantic-font-size-body-3: 17px;
        --semantic-font-size-body-4: 15px;
        --semantic-font-size-body-5: 12px;
        --semantic-font-size-footnote-0: 12px;
        --semantic-font-size-footnote-1: 13px;
        --semantic-font-size-footnote-2: 11px;
        --semantic-font-line-height-head-0: 119.588%;
        --semantic-font-line-height-head-1: 119.718%;
        --semantic-font-line-height-head-2: 118.966%;
        --semantic-font-line-height-head-3: 118.75%;
        --semantic-font-line-height-subhead: 120%;
        --semantic-font-line-height-highlight-1: 129.577%;
        --semantic-font-line-height-highlight-2: 129.825%;
        --semantic-font-line-height-highlight-3: 128.571%;
        --semantic-font-line-height-highlight-4: 127.778%;
        --semantic-font-line-height-highlight-5: 128.571%;
        --semantic-font-line-height-highlight-6: 128%;
        --semantic-font-line-height-body-1: 147.619%;
        --semantic-font-line-height-body-2: 147.368%;
        --semantic-font-line-height-body-3: 147.059%;
        --semantic-font-line-height-body-4: 146.667%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-0: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;
        --semantic-corner-primary: 30px;
        --semantic-corner-secondary: 16px;
        --semantic-corner-tertiary: 8px;
        --primitives-spacing-4: 4px;
        --primitives-spacing-8: 8px;
        --primitives-spacing-12: 12px;
        --primitives-spacing-16: 16px;
        --primitives-spacing-20: 20px;
        --primitives-spacing-24: 24px;
        --primitives-spacing-32: 32px;
        --primitives-spacing-36: 36px;
        --primitives-spacing-48: 48px;
        --primitives-spacing-60: 60px;
        --primitives-spacing-64: 64px;
        --primitives-spacing-68: 68px;
        --primitives-spacing-80: 80px;
        --primitives-spacing-100: 100px;
        --primitives-spacing-120: 120px;
        --primitives-spacing-160: 160px;
        --primitives-spacing-200: 200px;
        --component-label-on-surface---1-background-blur: 30px;
        --component-label-on-surface---2-background-blur: 30px;
        --title-gap-1: var(--primitives-spacing-48);
        --title-gap-2: var(--primitives-spacing-36);
        --title-gap-3: var(--primitives-spacing-32);
        --title-gap-4: var(--primitives-spacing-24);
        --title-gap-5: var(--primitives-spacing-20);
        --title-gap-6: var(--primitives-spacing-16);
        --title-gap-7: var(--primitives-spacing-8)
    }
}

@media screen and (min-width:981px) and (max-width:1344px) {
    #one-dom-container {
        --semantic-font-size-head-0: 4.85em;
        --semantic-font-size-head-1: 3.55em;
        --semantic-font-size-head-2: 2.9em;
        --semantic-font-size-head-3: 2.4em;
        --semantic-font-size-subhead: 1.25em;
        --semantic-font-size-highlight-1: 3.55em;
        --semantic-font-size-highlight-2: 2.85em;
        --semantic-font-size-highlight-3: 2.1em;
        --semantic-font-size-highlight-4: 1.8em;
        --semantic-font-size-highlight-5: 1.4em;
        --semantic-font-size-highlight-6: 1.25em;
        --semantic-font-size-body-1: 1.05em;
        --semantic-font-size-body-2: .95em;
        --semantic-font-size-body-3: .85em;
        --semantic-font-size-body-4: .75em;
        --semantic-font-size-body-5: .6em;
        --semantic-font-size-footnote-0: .6em;
        --semantic-font-size-footnote-1: .65em;
        --semantic-font-size-footnote-2: .55em;
        --semantic-font-line-height-head-0: 119.588%;
        --semantic-font-line-height-head-1: 119.718%;
        --semantic-font-line-height-head-2: 118.966%;
        --semantic-font-line-height-head-3: 118.75%;
        --semantic-font-line-height-subhead: 120%;
        --semantic-font-line-height-highlight-1: 129.577%;
        --semantic-font-line-height-highlight-2: 129.825%;
        --semantic-font-line-height-highlight-3: 128.571%;
        --semantic-font-line-height-highlight-4: 127.778%;
        --semantic-font-line-height-highlight-5: 128.571%;
        --semantic-font-line-height-highlight-6: 128%;
        --semantic-font-line-height-body-1: 147.619%;
        --semantic-font-line-height-body-2: 147.368%;
        --semantic-font-line-height-body-3: 147.059%;
        --semantic-font-line-height-body-4: 146.667%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-0: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;
        --semantic-corner-primary: 1.5em;
        --semantic-corner-secondary: .8em;
        --semantic-corner-tertiary: .4em;
        --primitives-spacing-4: .2em;
        --primitives-spacing-8: .4em;
        --primitives-spacing-12: .6em;
        --primitives-spacing-16: .8em;
        --primitives-spacing-20: 1em;
        --primitives-spacing-24: 1.2em;
        --primitives-spacing-32: 1.6em;
        --primitives-spacing-36: 1.8em;
        --primitives-spacing-48: 2.4em;
        --primitives-spacing-60: 3em;
        --primitives-spacing-64: 3.2em;
        --primitives-spacing-68: 3.4em;
        --primitives-spacing-80: 4em;
        --primitives-spacing-100: 5em;
        --primitives-spacing-120: 6em;
        --primitives-spacing-160: 8em;
        --primitives-spacing-200: 10em;
        --component-label-on-surface---1-background-blur: 1.5em;
        --component-label-on-surface---2-background-blur: 1.5em;
        --title-gap-1: var(--primitives-spacing-48);
        --title-gap-2: var(--primitives-spacing-36);
        --title-gap-3: var(--primitives-spacing-32);
        --title-gap-4: var(--primitives-spacing-24);
        --title-gap-5: var(--primitives-spacing-20);
        --title-gap-6: var(--primitives-spacing-16);
        --title-gap-7: var(--primitives-spacing-8)
    }
}

@media screen and (max-width:980px) {
    #one-dom-container {
        --semantic-font-size-head-0: 1.8em;
        --semantic-font-size-head-1: 1.8em;
        --semantic-font-size-head-2: 1.8em;
        --semantic-font-size-head-3: 1.6em;
        --semantic-font-size-subhead: 1.1em;
        --semantic-font-size-highlight-1: 1.8em;
        --semantic-font-size-highlight-2: 1.8em;
        --semantic-font-size-highlight-3: 1.4em;
        --semantic-font-size-highlight-4: 1.25em;
        --semantic-font-size-highlight-5: 1.05em;
        --semantic-font-size-highlight-6: 1.05em;
        --semantic-font-size-body-1: .85em;
        --semantic-font-size-body-2: .85em;
        --semantic-font-size-body-3: .7em;
        --semantic-font-size-body-4: .6em;
        --semantic-font-size-body-5: .6em;
        --semantic-font-size-footnote-0: .6em;
        --semantic-font-size-footnote-1: .65em;
        --semantic-font-size-footnote-2: .55em;
        --semantic-font-line-height-head-0: 119.444%;
        --semantic-font-line-height-head-1: 119.444%;
        --semantic-font-line-height-head-2: 119.444%;
        --semantic-font-line-height-head-3: 118.75%;
        --semantic-font-line-height-subhead: 115.789%;
        --semantic-font-line-height-highlight-1: 127.778%;
        --semantic-font-line-height-highlight-2: 127.778%;
        --semantic-font-line-height-highlight-3: 128.571%;
        --semantic-font-line-height-highlight-4: 128%;
        --semantic-font-line-height-highlight-5: 128.571%;
        --semantic-font-line-height-highlight-6: 128.571%;
        --semantic-font-line-height-body-1: 147.059%;
        --semantic-font-line-height-body-2: 147.059%;
        --semantic-font-line-height-body-3: 150%;
        --semantic-font-line-height-body-4: 150%;
        --semantic-font-line-height-body-5: 150%;
        --semantic-font-line-height-footnote-0: 150%;
        --semantic-font-line-height-footnote-1: 153.846%;
        --semantic-font-line-height-footnote-2: 154.545%;
        --semantic-corner-primary: .6em;
        --semantic-corner-secondary: .4em;
        --semantic-corner-tertiary: .4em;
        --primitives-spacing-4: .2em;
        --primitives-spacing-8: .4em;
        --primitives-spacing-12: .6em;
        --primitives-spacing-16: .8em;
        --primitives-spacing-20: 1em;
        --primitives-spacing-24: 1.2em;
        --primitives-spacing-32: 1.6em;
        --primitives-spacing-36: 1.8em;
        --primitives-spacing-48: 2.4em;
        --primitives-spacing-60: 3em;
        --primitives-spacing-64: 3.2em;
        --primitives-spacing-68: 3.4em;
        --primitives-spacing-80: 4em;
        --primitives-spacing-100: 5em;
        --primitives-spacing-120: 6em;
        --primitives-spacing-160: 8em;
        --primitives-spacing-200: 10em;
        --component-label-on-surface---1-background-blur: 1.5em;
        --component-label-on-surface---2-background-blur: 1.5em;
        --title-gap-1: var(--primitives-spacing-32);
        --title-gap-2: var(--primitives-spacing-32);
        --title-gap-3: var(--primitives-spacing-24);
        --title-gap-4: var(--primitives-spacing-16);
        --title-gap-5: var(--primitives-spacing-12);
        --title-gap-6: var(--primitives-spacing-8);
        --title-gap-7: var(--primitives-spacing-4)
    }
}

#one-dom-container .wt {
    --text-93a: #000000ED;
    --text-69a: #000000b0;
    --text-32a: #00000052;
    --text-91a: #000000E8;
    --text-04a: #0000000A;
    --text-08a: #0000000F;
    --text-12a: #0000001F;
    --text-15a: #00000026;
    --text-46a: #00000075;
    --text-54a: #0000008A;
    --text-69a: #000000B0;
    --text-86a: #000000DB;
    --text-89a: #000000E3
}

#one-dom-container .bk {
    --text-93a: #FFFFFFF5;
    --text-69a: #FFFFFFAD;
    --text-32a: #FFFFFF4F;
    --text-04a: #FFFFFF12;
    --text-08a: #FFFFFF17;
    --text-12a: #FFFFFF1C;
    --text-15a: #FFFFFF24;
    --text-46a: #FFFFFF75;
    --text-54a: #FFFFFF8A;
    --text-86a: #FFFFFFD9;
    --text-89a: #FFFFFFE0;
    --text-91a: #FFFFFFEB
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Thin.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 100
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Extralight.ttf?v=1") format("truetype");
    font-weight: 200
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Light.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 300
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Regular.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 400
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Medium.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 500
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/DemiBold.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 600
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Bold.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 700
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/ExtraBold.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 800
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/Heavy.ttf?v=1") format("truetype");
    font-style: normal;
    font-weight: 900
}

@font-face {
    font-family: "vivo Sans";
    src: url("./font/vivoSans-Bold.ttf?v=1") format("truetype");
    font-style: normal
}

@media screen {
    #one-dom-container * {
        box-sizing: border-box;
        font-family: "vivo Sans"
    }

    #one-dom-container a {
        color: inherit;
        text-decoration: none
    }

    #one-dom-container p,
    #one-dom-container h1,
    #one-dom-container h2,
    #one-dom-container h3,
    #one-dom-container h4,
    #one-dom-container h5,
    #one-dom-container h6 {
        margin: 0
    }

    #one-dom-container video:focus {
        outline: 0
    }

    .J_replace_content {
        width: 100%;
        max-width: 100%;
        min-height: 100vh
    }

    .J_replace_content .loadingWt {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 100;
        width: 100%;
        height: 100%;
        background-color: #fff
    }

    #one-dom-container {
        font-family: "vivo Sans";
        font-size: 20px;
        background: #f9f9fb;
        color: black
    }

    #one-dom-container sup {
        font-size: .5em;
        line-height: 0;
        vertical-align: super;
        position: relative;
        top: -0.25em
    }

    #one-dom-container video.cover,
    #one-dom-container img.cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block
    }

    #one-dom-container video.contain,
    #one-dom-container img.contain {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
        display: block
    }
}

@media screen {
    .one-glass {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden
    }

    .one-glass:focus {
        outline: 0
    }

    .one-glass::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: light-dark(hsl(0 0 100% / .1), hsl(0 0 0 / .1));
        -webkit-backdrop-filter: url(#one-glass-distortion) saturate(1);
        backdrop-filter: url(#one-glass-distortion) saturate(1);
        box-shadow: 0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%)) inset, 0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%)) inset, 0 4px 16px #11111a0d, 0 8px 24px #11111a0d, 0 16px 56px #11111a0d, 0 4px 16px #11111a0d inset, 0 8px 24px #11111a0d inset, 0 16px 56px #11111a0d inset
    }

    .one-glass-svg {
        pointer-events: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0;
        z-index: -1
    }

    .one-glass2 {
        position: relative;
        isolation: isolate;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2)
    }

    .one-glass2:focus {
        outline: 0
    }

    .one-glass2::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        background-color: rgba(255, 255, 255, 0.3)
    }

    .one-glass2::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        filter: url(#one-glass2-distortion);
        -webkit-filter: url(#one-glass2-distortion)
    }
}

@media screen {
    .one-section {
        position: relative;
        width: 100%;
        background-color: var(--semantic-background-quaternary, #f9f9fb);
        overflow: hidden
    }

    .one-section.bk {
        background-color: var(--semantic-background-quinary, #000)
    }
}

@media screen {
    .one-styleColor {
        width: fit-content;
        background: linear-gradient(90deg, #eaae3e 0, #f2c194 60.93%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    #one-dom-container .bk,
    #one-dom-container .wt {
        color: var(--text-93a)
    }

    #one-dom-container .bk .grey,
    #one-dom-container .wt .grey {
        color: var(--text-69a)
    }

    #one-dom-container .bk .grey2,
    #one-dom-container .wt .grey2 {
        color: var(--text-32a)
    }
}

@media screen {
    .one-title {
        display: flex;
        flex-direction: column;
        gap: var(--title-gap-2, 1.8em)
    }

    .one-title.big {
        gap: var(--title-gap-1, 2.4em)
    }

    .one-title.m {
        gap: var(--title-gap-4, 1.2em)
    }

    .one-title.sm {
        gap: var(--title-gap-7, 0.4em)
    }
}

@media screen and (min-width:1345px) and (min-width:100vh) {
    @media screen {
        #one-dom-container .one-h0 {
            font-size: var(--semantic-font-size-head-0, 4.85em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-0, 5.8em)
        }

        #one-dom-container .one-h1 {
            font-size: var(--semantic-font-size-head-1, 3.4em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-1, 4em)
        }

        #one-dom-container .one-h2 {
            font-size: var(--semantic-font-size-head-2, 2.9em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-2, 3.45em)
        }

        #one-dom-container .one-h3 {
            font-size: var(--semantic-font-size-head-3, 2.4em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-3, 3.85em)
        }

        #one-dom-container .one-sh {
            font-size: var(--semantic-font-size-subhead, 1.25em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-subhead, 1.5em)
        }

        #one-dom-container .one-hg1 {
            font-size: var(--semantic-font-size-highlight-1, 3.4em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-1, 4.6em)
        }

        #one-dom-container .one-hg2 {
            font-size: var(--semantic-font-size-highlight-2, 2.85em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-highlight-2, 3.7em)
        }

        #one-dom-container .one-hg3 {
            font-size: var(--semantic-font-size-highlight-3, 2.1em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-3, 2.7em)
        }

        #one-dom-container .one-hg4 {
            font-size: var(--semantic-font-size-highlight-4, 1.8em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-4, 2.3em)
        }

        #one-dom-container .one-hg5 {
            font-size: var(--semantic-font-size-highlight-5, 1.4em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-5, 1.8em)
        }

        #one-dom-container .one-hg6 {
            font-size: var(--semantic-font-size-highlight-6, 1.25em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-6, 1.6em)
        }

        #one-dom-container .one-b1 {
            font-size: var(--semantic-font-size-body-1, 1.05em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-1, 1.55em)
        }

        #one-dom-container .one-b2 {
            font-size: var(--semantic-font-size-body-2, 0.95em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-2, 1.4em)
        }

        #one-dom-container .one-b3 {
            font-size: var(--semantic-font-size-body-3, 0.85em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-3, 1.25em)
        }

        #one-dom-container .one-b4 {
            font-size: var(--semantic-font-size-body-4, 0.75em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-4, 1.1em)
        }

        #one-dom-container .one-b5 {
            font-size: var(--semantic-font-size-body-5, 0.6em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-5, 0.9em)
        }

        #one-dom-container .one-fn {
            font-size: var(--semantic-font-size-footnote-0, 0.6em);
            font-style: normal;
            font-weight: 500;
            line-height: var(--semantic-font-line-height-footnote-0, 150%)
        }

        #one-dom-container .one-fn1 {
            font-size: var(--semantic-font-size-footnote-1, 0.65em);
            font-style: normal;
            font-weight: 400;
            line-height: var(--semantic-font-line-height-footnote-1, 1em)
        }

        #one-dom-container .one-fn2 {
            font-size: var(--semantic-font-size-footnote-2, 0.55em);
            font-style: normal;
            font-weight: 400;
            line-height: var(--semantic-font-line-height-footnote-2, 0.85em)
        }
    }

    .one-pc-fix {
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box
    }

    #one-dom-container .one-pc-noWrap {
        text-wrap: nowrap;
        white-space: nowrap
    }

    .one-pc-flexRow {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap
    }

    .one-pc-flexCol {
        display: flex !important;
        flex-direction: column
    }

    .one-pc-hoverScale:hover img,
    .one-pc-hoverScale:hover picture img {
        transform: scale(0.95)
    }

    .one-pc-hoverScale img,
    .one-pc-hoverScale picture img {
        transition: transform .5s
    }

    .one-pc-allCenter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .one-pc-colCenter {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .one-pc-rowCenter1 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    .one-title.one-pc-rowCenter1 {
        display: flex
    }

    .one-pc-rowCenter2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }

    .one-pc-colCenter.lt {
        left: 0
    }

    .one-pc-colCenter.rt {
        right: 0
    }

    .one-pc-ct {
        text-align: center
    }

    .one-pc-safeRowFlow {
        width: 980px;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 50
    }

    .one-pc-safeCol {
        padding: var(--primitives-spacing-160, 160px) 0
    }

    .one-pc-safeTop {
        padding-top: var(--primitives-spacing-160, 160px)
    }

    .one-pc-safeBottom {
        padding-bottom: var(--primitives-spacing-160, 160px)
    }

    .one-pc-safeCol2 {
        padding: var(--primitives-spacing-200, 200px) 0
    }

    .one-pc-safeTop2 {
        padding-top: var(--primitives-spacing-200, 200px)
    }

    .one-pc-safeBottom2 {
        padding-bottom: var(--primitives-spacing-200, 200px)
    }

    .one-pc-safeCol3 {
        padding: var(--primitives-spacing-80, 80px) 0
    }

    .one-pc-safeTop3 {
        padding-top: var(--primitives-spacing-80, 80px)
    }

    .one-pc-safeBottom3 {
        padding-bottom: var(--primitives-spacing-80, 80px)
    }

    .one-pc-safeCol4 {
        padding: var(--primitives-spacing-100, 100px) 0
    }

    .one-pc-safeTop4 {
        padding-top: var(--primitives-spacing-100, 100px)
    }

    .one-pc-safeBottom4 {
        padding-bottom: var(--primitives-spacing-100, 100px)
    }

    .one-pc-safeRow {
        display: block;
        width: 980px;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    .one-pc-safeRow2 {
        display: block;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    .one-pc-autoPx {
        font-size: 20px !important;
        font-size: 1.0416666667vw !important
    }

    .one-pc-videoBtnList {
        gap: 10px
    }

    .one-pc-videoBtn-box {
        padding: 0 18.8px;
        height: 42px;
        gap: 10px;
        align-items: center;
        border-radius: 42px;
        overflow: hidden;
        background-color: #F0F0F0;
        display: flex !important;
        flex-direction: row;
        width: fit-content
    }

    .one-pc-videoBtn {
        padding: 4px;
        cursor: pointer;
        position: relative;
        justify-content: center;
        align-items: center;
        display: flex !important;
        flex-direction: row
    }

    .one-pc-videoBtn::before {
        content: "";
        width: 8.5px;
        height: 8.5px;
        border-radius: 50%;
        background-color: #b3b3b3;
        overflow: hidden;
        transition: all 1s
    }

    .one-pc-videoBtn::after {
        content: "";
        width: 0;
        height: calc(100% - 8px);
        background-color: #fff;
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 100px;
        overflow: hidden
    }

    .one-pc-videoBtn.active::before {
        width: 50px;
        border-radius: 100px
    }

    .one-pc-videoBtn.active::after {
        animation: videoBtn 3s linear forwards
    }

    .one-pc-videoBtn-play {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        cursor: pointer
    }

    @keyframes videoBtn {
        0% {
            width: 0
        }

        100% {
            width: calc(100% - 0.3em)
        }
    }

    @keyframes videoPlay {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }

    .one-video-playDiv {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: black;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        overflow: hidden;
        display: none
    }

    .one-video-playDiv-wrapper {
        width: auto;
        height: 60%;
        overflow: hidden
    }

    .one-video-playDiv-video {
        height: 100%;
        object-fit: fill
    }

    .one-video-playDiv-closeBtn {
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: 2em;
        right: 2em;
        color: white;
        font-size: 2.5em;
        border-radius: 1em;
        cursor: pointer;
        background: #ffffff24;
        line-height: 1.4em;
        text-align: center
    }

    .one-pc-videoControl {
        width: 2em;
        height: 2em;
        position: absolute;
        right: 1em;
        bottom: 1em;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 50;
        cursor: pointer
    }

    .one-pc-videoControl.auto {
        position: static
    }

    .one-pc-videoControl.play {
        background-image: url("../img/pc/videoControl-play.svg")
    }

    .one-pc-videoControl.pause {
        background-image: url("../img/pc/videoControl-pause.svg")
    }

    .one-pc-videoControl.bk {
        background-image: url("../img/pc/videoControl-rePlay-b.svg")
    }

    .one-pc-videoControl.bk.play {
        background-image: url("../img/pc/videoControl-play-b.svg")
    }

    .one-pc-videoControl.bk.pause {
        background-image: url("../img/pc/videoControl-pause-b.svg")
    }

    .one-pc-videoControl.top {
        bottom: 0;
        top: 1em
    }

    .one-pc-drag-div {
        width: 100%;
        border-radius: .6em;
        overflow: hidden;
        user-select: none;
        position: relative
    }

    .one-drag-img1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .one-drag-img2 {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0
    }

    .one-drag-img2 img,
    .one-drag-img2 video {
        width: 49em;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-position: center;
        background-size: cover;
        object-fit: cover;
        object-position: center
    }

    .one-drag-controlBtn {
        position: absolute;
        top: 0;
        left: 50%;
        width: .15em;
        height: 100%;
        background-color: #000;
        cursor: ew-resize;
        z-index: 99
    }

    .one-drag-controlBtn div {
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    .one-drag-desc {
        position: absolute;
        bottom: 50px;
        left: 50px;
        text-wrap: nowrap
    }

    .one-drag-desc p {
        padding: 8px 16px;
        border-radius: 38px;
        background: rgba(255, 255, 255, 0.1)
    }

    .one-drag-img2 .one-drag-desc {
        left: auto;
        right: 50px
    }
}

@media screen and (min-width:981px) {
    .one-anchor-wrapper {
        position: fixed;
        top: 50%;
        left: -49em;
        z-index: 100;
        transform: translateY(-50%)
    }

    .one-anchor-wrapper.active {
        left: 3.15em
    }

    .one-anchor-content {
        position: relative;
        justify-content: center;
        --activeTop: 0;
        --activeHeight: 56px
    }

    .one-anchor-content::before {
        height: 100%;
        width: 2px;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 10px;
        background: #9E9E9E
    }

    .one-anchor-content::after {
        height: var(--activeHeight);
        width: 2px;
        content: "";
        position: absolute;
        left: 0;
        top: var(--activeTop);
        border-radius: 10px;
        background: #000;
        transition: all .3s
    }

    .one-anchor-content.bk::after {
        background: #fff
    }

    #one-dom-container .one-anchor-point {
        padding: .7em .35em;
        text-decoration: none;
        transition: all .3s;
        color: transparent
    }

    #one-dom-container .one-anchor-content:hover .one-anchor-point:not(.active) {
        color: #9E9E9E
    }

    #one-dom-container .one-anchor-point.active {
        color: rgba(0, 0, 0, 0.90)
    }

    #one-dom-container .one-anchor-content.bk .one-anchor-point.active {
        color: rgba(255, 255, 255, 0.90)
    }

    .showA {
        position: relative;
        top: 20px;
        opacity: 0
    }

    .one-title.one-pc-ct {
        align-items: center
    }

    .one-param {
        display: flex;
        flex-direction: column
    }

    .one-param.one-pc-ct {
        align-items: center
    }

    .one-param.m {
        gap: var(--primitives-spacing-16, 16px)
    }

    .one-param.sm {
        gap: var(--primitives-spacing-4, 4px)
    }

    .one-param>p:nth-child(1),
    .one-param>h2:nth-child(1),
    .one-param>h3:nth-child(1) {
        width: 100%
    }

    .one-switchBtnList {
        display: flex;
        flex-direction: row;
        gap: 16px
    }

    .one-switchBtn {
        width: 2em;
        height: 2em;
        cursor: pointer;
        position: relative
    }

    .one-switchBtn-left {
        transform: rotate(180deg)
    }

    .one-switchBtn.disabled {
        opacity: .4
    }

    .one-popup {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        overflow: auto;
        background-color: transparent;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px)
    }

    .bk .one-popup {
        background: rgba(0, 0, 0, 0.8)
    }

    .wt .one-popup {
        background: #ebebeb
    }

    .one-popup-content {
        position: relative;
        width: 964px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        margin-bottom: 100px;
        border-radius: 24px;
        backdrop-filter: blur(60px);
        -webkit-backdrop-filter: blur(60px);
        padding-bottom: 100px
    }

    .bk .one-popup-content {
        background: rgba(43, 48, 56, 0.6)
    }

    .wt .one-popup-content {
        background: #fff
    }

    .one-popup-closeBtn-div {
        position: sticky;
        top: 0;
        padding-top: 30px;
        padding-right: 30px;
        text-align: right
    }

    .one-popup-closeBtn {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: 40px
    }

    .bk .one-popup-closeBtn {
        background: rgba(255, 255, 255, 0.25)
    }

    .wt .one-popup-closeBtn {
        background: rgba(0, 0, 0, 0.25)
    }
}

@media screen and (min-width:981px) and (max-width:1344px) {
    #one-dom-container {
        -webkit-tap-highlight-color: transparent
    }

    @media screen {
        #one-dom-container .one-pad-h0 {
            font-size: var(--semantic-font-size-head-0, 4.85em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-0, 5.8em)
        }

        #one-dom-container .one-pad-h1 {
            font-size: var(--semantic-font-size-head-1, 3.4em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-1, 4em)
        }

        #one-dom-container .one-pad-h2 {
            font-size: var(--semantic-font-size-head-2, 2.9em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-2, 3.45em)
        }

        #one-dom-container .one-pad-h3 {
            font-size: var(--semantic-font-size-head-3, 2.4em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-3, 3.85em)
        }

        #one-dom-container .one-pad-sh {
            font-size: var(--semantic-font-size-subhead, 1.25em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-subhead, 1.5em)
        }

        #one-dom-container .one-pad-hg1 {
            font-size: var(--semantic-font-size-highlight-1, 3.4em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-1, 4.6em)
        }

        #one-dom-container .one-pad-hg2 {
            font-size: var(--semantic-font-size-highlight-2, 2.85em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-highlight-2, 3.7em)
        }

        #one-dom-container .one-pad-hg3 {
            font-size: var(--semantic-font-size-highlight-3, 2.1em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-3, 2.7em)
        }

        #one-dom-container .one-pad-hg4 {
            font-size: var(--semantic-font-size-highlight-4, 1.8em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-4, 2.3em)
        }

        #one-dom-container .one-pad-hg5 {
            font-size: var(--semantic-font-size-highlight-5, 1.4em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-5, 1.8em)
        }

        #one-dom-container .one-pad-hg6 {
            font-size: var(--semantic-font-size-highlight-6, 1.25em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-6, 1.6em)
        }

        #one-dom-container .one-pad-b1 {
            font-size: var(--semantic-font-size-body-1, 1.05em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-1, 1.55em)
        }

        #one-dom-container .one-pad-b2 {
            font-size: var(--semantic-font-size-body-2, 0.95em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-2, 1.4em)
        }

        #one-dom-container .one-pad-b3 {
            font-size: var(--semantic-font-size-body-3, 0.85em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-3, 1.25em)
        }

        #one-dom-container .one-pad-b4 {
            font-size: var(--semantic-font-size-body-4, 0.75em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-4, 1.1em)
        }

        #one-dom-container .one-pad-b5 {
            font-size: var(--semantic-font-size-body-5, 0.6em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-5, 0.9em)
        }

        #one-dom-container .one-pad-fn {
            font-size: var(--semantic-font-size-footnote-0, 0.6em);
            font-style: normal;
            font-weight: 500;
            line-height: var(--semantic-font-line-height-footnote-0, 150%)
        }

        #one-dom-container .one-pad-fn1 {
            font-size: var(--semantic-font-size-footnote-1, 0.65em);
            font-style: normal;
            font-weight: 400;
            line-height: var(--semantic-font-line-height-footnote-1, 1em)
        }

        #one-dom-container .one-pad-fn2 {
            font-size: var(--semantic-font-size-footnote-2, 0.55em);
            font-style: normal;
            font-weight: 400;
            line-height: var(--semantic-font-line-height-footnote-2, 0.85em)
        }
    }

    /*!* 字体  font-weight 根据设计稿调整*!*/
    .one-pad-titleSafeRow {
        width: 60em;
        margin: 0 auto
    }

    .one-pc-fix {
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box
    }

    #one-dom-container .one-pad-noWrap {
        text-wrap: nowrap;
        white-space: nowrap
    }

    .one-pc-flexRow {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap
    }

    .one-pc-flexCol {
        display: flex !important;
        flex-direction: column
    }

    .one-pc-hoverScale:hover img,
    .one-pc-hoverScale:hover picture img {
        transform: scale(0.95)
    }

    .one-pc-hoverScale img,
    .one-pc-hoverScale picture img {
        transition: transform .5s
    }

    .one-pc-allCenter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .one-pc-colCenter {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .one-pc-rowCenter1 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    .one-pad-safeRow {
        width: 46.2em;
        margin-left: auto;
        margin-right: auto
    }

    .one-title.one-pc-rowCenter1 {
        display: flex
    }

    .one-pc-rowCenter2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }

    .one-pc-colCenter.lt {
        left: 0
    }

    .one-pc-colCenter.rt {
        right: 0
    }

    .one-pc-ct {
        text-align: center
    }

    .one-pc-safeRowFlow {
        width: 980px;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 50
    }

    .one-pc-safeCol {
        padding: var(--primitives-spacing-160, 160px) 0
    }

    .one-pc-safeTop {
        padding-top: var(--primitives-spacing-160, 160px)
    }

    .one-pc-safeBottom {
        padding-bottom: var(--primitives-spacing-160, 160px)
    }

    .one-pc-safeCol2 {
        padding: var(--primitives-spacing-200, 200px) 0
    }

    .one-pc-safeTop2 {
        padding-top: var(--primitives-spacing-200, 200px)
    }

    .one-pc-safeBottom2 {
        padding-bottom: var(--primitives-spacing-200, 200px)
    }

    .one-pc-safeCol3 {
        padding: var(--primitives-spacing-80, 80px) 0
    }

    .one-pc-safeTop3 {
        padding-top: var(--primitives-spacing-80, 80px)
    }

    .one-pc-safeBottom3 {
        padding-bottom: var(--primitives-spacing-80, 80px)
    }

    .one-pad-safeRow2 {
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    .one-pad-autoPx {
        font-size: 20px !important;
        font-size: 1.488095238095238vw !important
    }

    .one-pc-videoBtnList {
        gap: 10px
    }

    .one-pc-videoBtn-box {
        padding: 0 18.8px;
        height: 42px;
        gap: 10px;
        align-items: center;
        border-radius: 42px;
        overflow: hidden;
        background-color: #F0F0F0;
        display: flex !important;
        flex-direction: row;
        width: fit-content
    }

    .one-pc-videoBtn {
        padding: 4px;
        cursor: pointer;
        position: relative;
        justify-content: center;
        align-items: center;
        display: flex !important;
        flex-direction: row
    }

    .one-pc-videoBtn::before {
        content: "";
        width: 8.5px;
        height: 8.5px;
        border-radius: 50%;
        background-color: #b3b3b3;
        overflow: hidden;
        transition: all 1s
    }

    .one-pc-videoBtn::after {
        content: "";
        width: 0;
        height: calc(100% - 8px);
        background-color: #fff;
        position: absolute;
        left: 4px;
        top: 4px;
        border-radius: 100px;
        overflow: hidden
    }

    .one-pc-videoBtn.active::before {
        width: 50px;
        border-radius: 100px
    }

    .one-pc-videoBtn.active::after {
        animation: videoBtn 3s linear forwards
    }

    .one-pc-videoBtn-play {
        width: 42px;
        height: 42px;
        flex-shrink: 0;
        cursor: pointer
    }

    @keyframes videoBtn {
        0% {
            width: 0
        }

        100% {
            width: calc(100% - 0.3em)
        }
    }

    @keyframes videoPlay {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }

    .one-video-playDiv {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: black;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        overflow: hidden;
        display: none
    }

    .one-video-playDiv-wrapper {
        width: auto;
        height: 60%;
        overflow: hidden
    }

    .one-video-playDiv-video {
        height: 100%;
        object-fit: fill
    }

    .one-video-playDiv-closeBtn {
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: 2em;
        right: 2em;
        color: white;
        font-size: 2.5em;
        border-radius: 1em;
        cursor: pointer;
        background: #ffffff24;
        line-height: 1.4em;
        text-align: center
    }

    .one-pc-videoControl {
        width: 2em;
        height: 2em;
        position: absolute;
        right: 1em;
        bottom: 1em;
        background-image: url("../img/pc/videoControl-rePlay.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 50;
        cursor: pointer
    }

    .one-pc-videoControl.auto {
        position: static
    }

    .one-pc-videoControl.play {
        background-image: url("../img/pc/videoControl-play.svg")
    }

    .one-pc-videoControl.pause {
        background-image: url("../img/pc/videoControl-pause.svg")
    }

    .one-pc-videoControl.bk {
        background-image: url("../img/pc/videoControl-rePlay-b.svg")
    }

    .one-pc-videoControl.bk.play {
        background-image: url("../img/pc/videoControl-play-b.svg")
    }

    .one-pc-videoControl.bk.pause {
        background-image: url("../img/pc/videoControl-pause-b.svg")
    }

    .one-pc-videoControl.top {
        bottom: 0;
        top: 1em
    }

    .one-pc-drag-div {
        width: 100%;
        border-radius: .6em;
        overflow: hidden;
        user-select: none;
        position: relative
    }

    .one-drag-img1 {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .one-drag-img2 {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0
    }

    .one-drag-img2 img,
    .one-drag-img2 video {
        width: 49em;
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        background-position: center;
        background-size: cover;
        object-fit: cover;
        object-position: center
    }

    .one-drag-controlBtn {
        position: absolute;
        top: 0;
        left: 50%;
        width: .15em;
        height: 100%;
        background-color: #000;
        cursor: ew-resize;
        z-index: 99
    }

    .one-drag-controlBtn div {
        width: 1.5em;
        height: 1.5em;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 99;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center
    }

    .one-drag-desc {
        position: absolute;
        bottom: 50px;
        left: 50px;
        text-wrap: nowrap
    }

    .one-drag-desc p {
        padding: 8px 16px;
        border-radius: 38px;
        background: rgba(255, 255, 255, 0.1)
    }

    .one-drag-img2 .one-drag-desc {
        left: auto;
        right: 50px
    }
}

@media screen and (min-width:981px) {
    .one-anchor-wrapper {
        position: fixed;
        top: 50%;
        left: -49em;
        z-index: 100;
        transform: translateY(-50%)
    }

    .one-anchor-wrapper.active {
        left: 3.15em
    }

    .one-anchor-content {
        position: relative;
        justify-content: center;
        --activeTop: 0;
        --activeHeight: 56px
    }

    .one-anchor-content::before {
        height: 100%;
        width: 2px;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 10px;
        background: #9E9E9E
    }

    .one-anchor-content::after {
        height: var(--activeHeight);
        width: 2px;
        content: "";
        position: absolute;
        left: 0;
        top: var(--activeTop);
        border-radius: 10px;
        background: #000;
        transition: all .3s
    }

    .one-anchor-content.bk::after {
        background: #fff
    }

    #one-dom-container .one-anchor-point {
        padding: .7em .35em;
        text-decoration: none;
        transition: all .3s;
        color: transparent
    }

    #one-dom-container .one-anchor-content:hover .one-anchor-point:not(.active) {
        color: #9E9E9E
    }

    #one-dom-container .one-anchor-point.active {
        color: rgba(0, 0, 0, 0.90)
    }

    #one-dom-container .one-anchor-content.bk .one-anchor-point.active {
        color: rgba(255, 255, 255, 0.90)
    }

    .showA {
        position: relative;
        top: 20px;
        opacity: 0
    }

    .one-title.one-pc-ct {
        align-items: center
    }

    .one-param {
        display: flex;
        flex-direction: column
    }

    .one-param.one-pc-ct {
        align-items: center
    }

    .one-param.m {
        gap: var(--primitives-spacing-16, 16px)
    }

    .one-param.sm {
        gap: var(--primitives-spacing-4, 4px)
    }

    .one-param>p:nth-child(1),
    .one-param>h2:nth-child(1),
    .one-param>h3:nth-child(1) {
        width: 100%
    }

    .one-switchBtnList {
        display: flex;
        flex-direction: row;
        gap: 16px
    }

    .one-switchBtn {
        width: 2em;
        height: 2em;
        cursor: pointer;
        position: relative
    }

    .one-switchBtn-left {
        transform: rotate(180deg)
    }

    .one-switchBtn.disabled {
        opacity: .4
    }

    .one-popup {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        overflow: auto;
        background-color: transparent;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px)
    }

    .bk .one-popup {
        background: rgba(0, 0, 0, 0.8)
    }

    .wt .one-popup {
        background: #ebebeb
    }

    .one-popup-content {
        position: relative;
        width: 964px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        margin-bottom: 100px;
        border-radius: 24px;
        backdrop-filter: blur(60px);
        -webkit-backdrop-filter: blur(60px);
        padding-bottom: 100px
    }

    .bk .one-popup-content {
        background: rgba(43, 48, 56, 0.6)
    }

    .wt .one-popup-content {
        background: #fff
    }

    .one-popup-closeBtn-div {
        position: sticky;
        top: 0;
        padding-top: 30px;
        padding-right: 30px;
        text-align: right
    }

    .one-popup-closeBtn {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: 40px
    }

    .bk .one-popup-closeBtn {
        background: rgba(255, 255, 255, 0.25)
    }

    .wt .one-popup-closeBtn {
        background: rgba(0, 0, 0, 0.25)
    }
}

@media screen and (max-width:980px) {
    @media screen {
        #one-dom-container .one-h0 {
            font-size: var(--semantic-font-size-head-0, 4.85em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-0, 5.8em)
        }

        #one-dom-container .one-h1 {
            font-size: var(--semantic-font-size-head-1, 3.4em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-1, 4em)
        }

        #one-dom-container .one-h2 {
            font-size: var(--semantic-font-size-head-2, 2.9em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-2, 3.45em)
        }

        #one-dom-container .one-h3 {
            font-size: var(--semantic-font-size-head-3, 2.4em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-3, 3.85em)
        }

        #one-dom-container .one-sh {
            font-size: var(--semantic-font-size-subhead, 1.25em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-subhead, 1.5em)
        }

        #one-dom-container .one-hg1 {
            font-size: var(--semantic-font-size-highlight-1, 3.4em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-1, 4.6em)
        }

        #one-dom-container .one-hg2 {
            font-size: var(--semantic-font-size-highlight-2, 2.85em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-highlight-2, 3.7em)
        }

        #one-dom-container .one-hg3 {
            font-size: var(--semantic-font-size-highlight-3, 2.1em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-3, 2.7em)
        }

        #one-dom-container .one-hg4 {
            font-size: var(--semantic-font-size-highlight-4, 1.8em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-4, 2.3em)
        }

        #one-dom-container .one-hg5 {
            font-size: var(--semantic-font-size-highlight-5, 1.4em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-5, 1.8em)
        }

        #one-dom-container .one-hg6 {
            font-size: var(--semantic-font-size-highlight-6, 1.25em);
            font-style: normal;
            font-weight: 700;
            line-height: var(--semantic-font-line-height-highlight-6, 1.6em)
        }

        #one-dom-container .one-b1 {
            font-size: var(--semantic-font-size-body-1, 1.05em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-1, 1.55em)
        }

        #one-dom-container .one-b2 {
            font-size: var(--semantic-font-size-body-2, 0.95em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-2, 1.4em)
        }

        #one-dom-container .one-b3 {
            font-size: var(--semantic-font-size-body-3, 0.85em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-3, 1.25em)
        }

        #one-dom-container .one-b4 {
            font-size: var(--semantic-font-size-body-4, 0.75em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-4, 1.1em)
        }

        #one-dom-container .one-b5 {
            font-size: var(--semantic-font-size-body-5, 0.6em);
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-5, 0.9em)
        }

        #one-dom-container .one-fn {
            font-size: var(--semantic-font-size-footnote-0, 0.6em);
            font-style: normal;
            font-weight: 500;
            line-height: var(--semantic-font-line-height-footnote-0, 150%)
        }

        #one-dom-container .one-fn1 {
            font-size: var(--semantic-font-size-footnote-1, 0.65em);
            font-style: normal;
            font-weight: 400;
            line-height: var(--semantic-font-line-height-footnote-1, 1em)
        }

        #one-dom-container .one-fn2 {
            font-size: var(--semantic-font-size-footnote-2, 0.55em);
            font-style: normal;
            font-weight: 400;
            line-height: var(--semantic-font-line-height-footnote-2, 0.85em)
        }
    }

    #one-dom-container {
        font-size: 20px !important;
        font-size: 5.333333333333334vw !important;
        text-size-adjust: none !important;
        -webkit-text-size-adjust: none !important;
        -moz-text-size-adjust: none !important;
        -webkit-tap-highlight-color: transparent
    }

    .one-wap-fix {
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box
    }

    .one-wap-flexRow {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap
    }

    .one-wap-flexCol {
        display: flex !important;
        flex-direction: column
    }

    .one-wap-noWrap {
        text-wrap: nowrap;
        white-space: nowrap
    }

    .one-wap-bgColor-bk {
        background: linear-gradient(180deg, #000 91.72%, #0d0d0d 100%)
    }

    .one-wap-allCenter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .one-wap-colCenter {
        position: absolute;
        top: 50%;
        transform: translateY(-50%)
    }

    .one-wap-rowCenter1 {
        display: block;
        margin-left: auto;
        margin-right: auto;
        position: relative
    }

    .one-title.one-wap-rowCenter1 {
        display: flex
    }

    .one-wap-rowCenter2 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%)
    }

    .one-wap-colCenter.lt {
        left: 0
    }

    .one-wap-colCenter.rt {
        right: 0
    }

    .one-wap-ct {
        text-align: center
    }

    .one-video-playDiv {
        display: none
    }

    .one-video-playDiv-wrapper {
        height: 100%;
        width: 100%;
        position: relative
    }

    .one-video-playDiv-video {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }

    .one-wap-videoControl {
        width: 2em;
        height: 2em;
        position: relative;
        background-image: url("../img/wap/videoControl-rePlay.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 50;
        cursor: pointer
    }

    .one-wap-videoControl.play {
        background-image: url("../img/wap/videoControl-play.svg")
    }

    .one-wap-videoControl.pause {
        background-image: url("../img/wap/videoControl-pause.svg")
    }

    .one-wap-videoControl.bk {
        background-image: url("../img/wap/videoControl-rePlay-b.svg")
    }

    .one-wap-videoControl.bk.play {
        background-image: url("../img/wap/videoControl-play-b.svg")
    }

    .one-wap-videoControl.bk.pause {
        background-image: url("../img/wap/videoControl-pause-b.svg")
    }

    .one-wap-safeCol {
        padding: var(--primitives-spacing-100, 5em) 0
    }

    .one-wap-safeTop {
        padding-top: var(--primitives-spacing-100, 5em)
    }

    .one-wap-safeBottom {
        padding-bottom: var(--primitives-spacing-100, 5em)
    }

    .one-wap-safeCol2 {
        padding: var(--primitives-spacing-80, 4em) 0
    }

    .one-wap-safeTop2 {
        padding-top: var(--primitives-spacing-80, 4em)
    }

    .one-wap-safeBottom2 {
        padding-bottom: var(--primitives-spacing-80, 4em)
    }

    .one-wap-safeRow {
        width: 100%;
        padding: 0 1em
    }

    .one-wap-videoBtnList {
        gap: .5em
    }

    .one-wap-videoBtn-box {
        padding: 0 1em;
        height: 1.8em;
        gap: .6em;
        align-items: center;
        border-radius: 2.25em;
        overflow: hidden;
        background-color: #EBEBEB
    }

    .one-wap-videoBtn {
        padding: .2em;
        cursor: pointer;
        position: relative;
        justify-content: center;
        align-items: center
    }

    .one-wap-videoBtn::before {
        content: "";
        width: .3em;
        height: .3em;
        border-radius: 50%;
        background-color: #b3b3b3;
        overflow: hidden;
        transition: all 1s
    }

    .one-wap-videoBtn::after {
        content: "";
        width: 0;
        height: calc(100% - 0.4em);
        background-color: #fff;
        position: absolute;
        left: .2em;
        top: .2em;
        border-radius: 5em;
        overflow: hidden
    }

    .one-wap-videoBtn.active::before {
        width: 2.3em;
        border-radius: 5em
    }

    .one-wap-videoBtn-play {
        width: 1.8em;
        height: 1.8em;
        flex-shrink: 0;
        cursor: pointer
    }

    .one-wap-videoBtn-play.active {
        animation: videoPlay 2s forwards
    }

    @keyframes videoPlay {
        0% {
            transform: rotate(0deg)
        }

        100% {
            transform: rotate(360deg)
        }
    }
}

@media screen and (max-width:980px) {
    .one-anchor-wrapper {
        position: sticky;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%
    }

    .one-anchor-content {
        padding: 0 15px;
        background: #FFF;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.10);
        backdrop-filter: blur(15px);
        position: relative;
        justify-content: space-between
    }

    .one-anchor-point {
        padding: 16px 0;
        color: rgba(0, 0, 0, 0.40);
        text-decoration: none
    }

    .one-anchor-point p {
        font-family: "vivoSans-DemiBold";
        font-size: 13px;
        line-height: 150%;
        margin: 0
    }

    .one-anchor-line {
        height: 2px;
        background: #415FFF;
        transition: all .5s;
        position: absolute;
        bottom: 0;
        left: 15px
    }

    .one-title.one-wap-ct {
        align-items: center
    }

    .one-param {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-date-m, 0.25em)
    }

    .one-param.one-wap-ct {
        align-items: center
    }

    .one-param.m {
        gap: var(--spacing-date-m, 0.1em)
    }

    .one-switchBtnList {
        display: flex;
        justify-content: flex-end;
        gap: .6em
    }

    .one-switchBtnList .one-wap-flexRow {
        width: 60%;
        gap: .6em;
        justify-content: flex-end
    }

    .one-switchBtn-left,
    .one-switchBtn-right {
        cursor: pointer;
        position: relative
    }

    .one-switchBtn-left {
        transform: rotate(180deg)
    }

    .one-switchBtn-left.disabled,
    .one-switchBtn-right.disabled {
        opacity: .25
    }

    .one-popup {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 999;
        overflow: auto;
        background-color: transparent;
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px)
    }

    .bk .one-popup {
        background: rgba(0, 0, 0, 0.8)
    }

    .wt .one-popup {
        background: #ebebeb
    }

    .one-popup-content {
        position: relative;
        width: calc(100vw - 2em);
        padding: 0 1em 1em;
        margin-left: auto;
        margin-right: auto;
        margin-top: 100px;
        margin-bottom: 50px;
        border-radius: 24px;
        backdrop-filter: blur(60px);
        -webkit-backdrop-filter: blur(60px);
        padding-bottom: 50px
    }

    .bk .one-popup-content {
        background: #0d0d0d
    }

    .wt .one-popup-content {
        background: #fff
    }

    .one-popup-closeBtn-div {
        position: sticky;
        top: 50px;
        padding-top: 1em;
        padding-right: 1em;
        text-align: right
    }

    .one-popup-closeBtn {
        display: inline-block;
        width: 1.8em;
        height: 1.8em;
        border-radius: 1.8em;
        background: var(--bottom-bg-l2, rgba(255, 255, 255, 0.25))
    }
}

@media screen and (min-width:1345px)and (min-width:100vh) {
    @media screen {
        .one-kv-section {
            width: 100%;
            height: 46.5em
        }

        .one-kv-content {
            bottom: 5em
        }

        .one-kv-title {
            position: absolute;
            top: 3.5em;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center
        }

        .one-kv-title.show {
            opacity: 1
        }

        .one-kv-logo {
            width: 13em;
            height: 2.75em
        }

        .one-kv-title p {
            margin-top: .2em !important;
            color: rgba(0, 0, 0, 0.93) !important;
            font-size: 1.45em !important;
            font-style: normal;
            font-weight: 700 !important;
            line-height: 120%;
            letter-spacing: .058em !important
        }

        .one-kv-mask {
            height: 17.15em;
            width: 100%;
            bottom: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 61.28%, #F2F2F2 100%)
        }

        .one-kv-mask.active {
            opacity: 1
        }
    }

    @media screen {
        .one-design-title {
            position: absolute;
            top: 6em;
            left: 50%;
            margin-top: 3em;
            transform: translateX(-50%) scale(1.2);
            transform-origin: 50% 0;
            opacity: 0
        }

        .one-design-title.active {
            transform: translateX(-50%) scale(1);
            margin-top: 0;
            opacity: 1;
            transition: all 1s 2s
        }

        .one-design-media {
            width: 96em;
            height: 54em;
            bottom: 0
        }
    }

    @media screen {
        .one-space-section {
            padding-top: 7.5em !important;
            height: 57.8em
        }

        .one-space-section.wt {
            z-index: 1;
            background: linear-gradient(181deg, rgba(241, 241, 241, 0.00) -3.33%, rgba(216, 227, 246, 0.72) 41.05%, #CEDDF8 70.28%, #F2F2F2 99.54%), radial-gradient(411.18% 100% at 73.52% 0, #DFE8F4 0, #F3F3F3 100%)
        }

        .one-space-safeRow {
            position: relative;
            z-index: 15
        }

        .one-space-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 13;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-space-bg.active {
            opacity: 1
        }

        .one-space-media {
            position: absolute;
            z-index: 15;
            width: 100%;
            height: 34em;
            bottom: 0
        }

        .one-space-img1,
        .one-space-img2,
        .one-space-img3 {
            position: absolute;
            z-index: 15;
            width: 12.98955em;
            height: 27.5em
        }

        .one-space-img1 img,
        .one-space-img2 img,
        .one-space-img3 img {
            position: absolute;
            z-index: 15
        }

        .one-space-img1 video,
        .one-space-img2 video,
        .one-space-img3 video {
            position: absolute;
            z-index: 14;
            top: .5em;
            left: .25em;
            width: 97%;
            height: 97%;
            border-radius: 2em
        }

        .one-space-img2 video {
            width: 98%;
            height: 98%;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%)
        }

        .one-space-img1 {
            z-index: 1;
            margin-left: -18em
        }

        .one-space-img2 {
            z-index: 3
        }

        .one-space-img3 {
            z-index: 1;
            margin-left: 18em
        }

        .one-space-mask {
            z-index: 10;
            bottom: 0;
            width: 100%;
            height: 5.2em;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0, #E0E7F4 101.44%)
        }
    }

    @media screen {
        .one-shadow-section.wt {
            background: linear-gradient(180deg, #F2F2F2 .07%, #FEFDFE 60.38%, #F6F8FD 76.48%, #F2F2F2 96.72%)
        }

        .one-shadow-section {
            z-index: 1
        }

        .one-shadow-replay {
            z-index: 3
        }

        .one-shadow-btnbox {
            position: relative;
            z-index: 3
        }

        .one-shadow-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0
        }

        .one-shadow-swiper {
            margin: auto;
            width: 60em;
            height: 32.5em
        }

        .one-shadow-bg {
            width: 100%;
            height: 100%
        }

        .one-shadow-swiper .swiper-slide {
            border-radius: 1.5em;
            overflow: hidden;
            position: relative;
            background-color: #fff;
            padding-left: 3em;
            align-items: center
        }

        .one-shadow-title {
            width: 22em;
            position: relative;
            z-index: 9
        }

        .one-shadow-title .one-sh {
            opacity: .6
        }

        .one-shadow-media {
            width: 35em;
            height: 100%;
            position: relative;
            z-index: 9
        }

        .one-shadow-btnbox {
            margin: 2.5em auto 0;
            width: max-content;
            align-items: center;
            justify-content: center;
            gap: .6em;
            flex-wrap: nowrap;
            cursor: pointer
        }

        .one-shadow-btnlist {
            background: rgba(0, 0, 0, 0.06)
        }

        .one-shadow-btn::before {
            background-color: rgba(0, 0, 0, 0.12)
        }

        .one-shadow-btn::after {
            background-color: #222224
        }
    }

    @media screen {
        .one-grating-section {
            background: linear-gradient(180deg, #F2F2F2 1.62%, #B5C4DF 43.49%, #B0C2E0 100.69%)
        }

        .one-grating-video {
            width: 53.333em;
            height: 30em
        }

        .one-grating-media {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 2.5em;
            margin-bottom: 1em;
            width: 100vw;
            height: 30em;
            cursor: pointer
        }

        .one-grating-180deg-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 3em;
            height: 3em;
            bottom: 3.7em
        }

        .one-grating-btnlist {
            margin-top: 3em;
            width: fit-content;
            padding: .4em;
            gap: .4em;
            border-radius: 50em;
            background-color: rgba(0, 0, 0, 0.06);
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
            --btnWidth: 100px;
            --btnLeft: .4em
        }

        .one-grating-btn {
            position: relative;
            z-index: 2;
            padding: .4em .8em;
            border-radius: 50em;
            color: rgba(0, 0, 0, 0.32);
            transition: all .3s;
            cursor: pointer
        }

        .one-grating-btn.active {
            color: rgba(255, 255, 255, 0.96)
        }

        .one-grating-btnlist::after {
            content: "";
            position: absolute;
            top: .4em;
            left: var(--btnLeft);
            width: var(--btnWidth);
            height: calc(100% - 0.8em);
            z-index: 1;
            border-radius: 50em;
            background: rgba(0, 0, 0, 0.93);
            transition: all .3s
        }

        .one-grating-safeRow {
            position: relative;
            z-index: 9
        }

        .one-grating-title {
            width: 648px
        }

        .one-grating-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2
        }
    }

    @media screen {
        .one-lockscreen-section.wt {
            background: linear-gradient(180deg, #BAC8E2 0, #E3E7F0 40.33%, #F6F6F8 100%)
        }

        .one-lockscreen-title {
            position: relative;
            width: 40.7em;
            margin: 0 auto;
            z-index: 1
        }

        .one-lockscreen-swiper {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 32em;
            perspective: 50em;
            overflow: hidden;
            cursor: pointer
        }

        .one-lockscreen-swiper * {
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            -moz-user-drag: none;
            user-drag: none
        }

        .one-lockscreen-wrapper {
            z-index: 1;
            width: 10.8em;
            height: 24.05em;
            flex-wrap: nowrap;
            transform-style: preserve-3d;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateZ(56em);
            transition: all 1s ease-out
        }

        .one-lockscreen-wrapper.active {
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)
        }

        .one-lockscreen-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 22px;
            overflow: hidden
        }

        .one-lockscreen-slide img {
            transform: rotateY(180deg)
        }

        .one-lockscreen-remind svg {
            width: 2em;
            height: 2em
        }

        .one-lockscreen-remind {
            bottom: 4.4em;
            align-items: center
        }
    }

    @media screen {
        .one-fontpage-section.wt {
            background: #F6F6F8
        }

        .one-fontpage-safeRow {
            justify-content: center;
            align-items: center
        }

        .one-fontpage-leftbox {
            width: 460px
        }

        .one-fontpage-icon {
            width: 13em;
            height: 1.9em;
            display: block;
            object-fit: cover
        }

        .one-fontpage-btn {
            margin-top: 3.4em;
            display: block;
            width: fit-content;
            padding: .6em 1.6em;
            border-radius: 2em;
            background: #000;
            text-decoration: none
        }

        .one-fontpage-fn {
            width: 390px;
            margin-top: 1.55em
        }

        .one-fontpage-rightbox {
            margin-left: 65px
        }

        .one-fontpage-media {
            width: 675px;
            height: 16em
        }

        .one-fontpage-font {
            width: 375px !important;
            height: 92px !important
        }

        .one-fontpage-content {
            margin-top: 1em;
            width: 33.75em;
            padding: 3em;
            border-radius: .8em;
            background: #FFF;
            box-shadow: -1px -1px 3px 0 rgba(255, 255, 255, 0.50) inset, 1px 1px 3px 0 rgba(255, 255, 255, 0.50) inset
        }

        .one-fontpage-txt {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            gap: 76px
        }

        .one-fontpage-p {
            font-size: 106px;
            font-weight: 500;
            line-height: 86.792%;
            position: relative;
            width: 356px;
            height: 92px
        }

        .one-fontpage-pList {
            position: relative;
            width: 8.44em;
            margin-right: -2em
        }

        .one-fontpage-pList p {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity .5s
        }

        .one-fontpage-pList p.active {
            opacity: 1
        }

        .one-fontpage-p span:first-child {
            font-size: 80px
        }

        .one-fontpage-p span:last-child {
            font-size: 100px
        }

        .one-fontpage-p span {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            transition: all 1s;
            opacity: 0;
            -webkit-filter: blur(0.1em);
            filter: blur(0.1em)
        }

        .one-fontpage-p span.active {
            opacity: 1;
            -webkit-filter: blur(0px);
            filter: blur(0px)
        }

        .one-fontpage-param {
            margin-top: 42px;
            gap: 30px;
            justify-content: center;
            align-items: center
        }

        .one-fontpage-param .one-param {
            padding: 0 6px
        }

        .one-fontpage-line {
            width: 1px;
            height: 40px;
            background-color: rgba(0, 0, 0, 0.32)
        }

        .one-fontpage-video {
            width: 675px;
            height: 320px;
            margin-top: -166px;
            margin-left: 262.5px;
            border-radius: 16px;
            z-index: 9;
            background: #fff;
            overflow: hidden
        }
    }

    @media screen {
        .one-atomdesign-section.wt {
            background: linear-gradient(180deg, #F6F6F8 0, #CFEBE4 56.73%, #F9F9FB 100.86%);
            mask-image: linear-gradient(180deg, #D9D9D9 79.82%, rgba(115, 115, 115, 0.00) 100%)
        }

        .one-atomdesign-title .one-title {
            gap: 1em !important
        }

        .one-atomdesign-title {
            width: 660px;
            z-index: 9;
            margin-top: 0;
            opacity: 1
        }

        .one-atomdesign-imglist {
            padding: 3.1em 0;
            position: relative;
            z-index: 9;
            width: 100%;
            gap: .75em;
            justify-content: center;
            margin-top: 100vh
        }

        .one-atomdesign-img1,
        .one-atomdesign-img2,
        .one-atomdesign-img3,
        .one-atomdesign-img4 {
            width: 15.5em;
            gap: .75em
        }

        :is(.one-atomdesign-img1, .one-atomdesign-img2, .one-atomdesign-img3, .one-atomdesign-img4) :is(img, video) {
            width: 100%;
            height: 34.45em;
            border-radius: 1.2em;
            overflow: hidden;
            display: block;
            object-fit: cover
        }

        .one-atomdesign-img5 {
            width: 20em
        }

        .one-atomdesign-img {
            position: absolute;
            z-index: 10;
            left: 50%;
            transform: translateX(-50%);
            bottom: 0;
            width: 51.56805em;
            height: 44.96em;
            display: block;
            object-fit: cover;
            margin-bottom: -100vh
        }

        .one-atomdesign-img img {
            position: relative;
            z-index: 2
        }

        .one-atomdesign-img video {
            position: absolute;
            top: 1%;
            left: 13.7%;
            width: 56.7%;
            object-fit: cover;
            border-radius: 1.5em;
            background: #fff
        }
    }

    @media screen {
        .one-smoothpage-mask {
            position: absolute;
            z-index: 10;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(1225.51% 814% at 44.01% 801.34%, #FCF7F8 0, #DEF0EF 17.41%, #2B4FA2 51.88%, #0B1B47 77.55%, #010103 100%), #000;
            opacity: 0
        }

        .one-smoothpage-before {
            width: 96em;
            height: 146.85em;
            top: 0;
            background: linear-gradient(180deg, #F9F9FB 20.43%, rgba(249, 249, 251, 0.00) 48.3%), radial-gradient(135.46% 54.9% at 50% 15.46%, #F9F9FB 2.17%, #D5E5FF 29.8%, #5E7EE0 61.86%, #23397A 80.15%, #000 100%), #D9D9D9
        }

        .one-smoothpage-content {
            width: 100%;
            height: 100%;
            bottom: -100vh;
            z-index: 9;
            background: radial-gradient(59% 38.23% at 50% 76.43%, #FCF7F8 0, #DEF0EF 13.99%, #2B4FA2 60.7%, #0B1B47 84.02%, #010103 100%), #000;
            background-size: 100% 200%;
            background-position-y: 0
        }

        .one-smoothpage-img {
            width: 100%;
            height: 54em;
            bottom: 0;
            z-index: 9
        }

        .one-smoothpage-img img {
            filter: brightness(20%)
        }

        .one-smoothpage-title1 {
            z-index: 10;
            background: linear-gradient(90deg, rgba(206, 204, 221, 0.8) 0, rgba(206, 204, 221, 0.8) 20%, #7CFFF4 40%, #4C77E4 60%, rgba(255, 255, 255, 0.90) 80%, rgba(255, 255, 255, 0.90) 100%);
            background-size: 500%;
            background-position-x: 0;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 5.01725em;
            font-weight: 800;
            line-height: 119.588%
        }

        .one-smoothpage-title2 {
            z-index: 1;
            margin-top: 100vh;
            background: linear-gradient(180deg, rgba(128, 185, 255, 0.20) 3.47%, rgba(255, 255, 255, 0.90) 44.01%, rgba(138, 161, 219, 0.20) 52.31%, rgba(243, 247, 255, 0.90) 93.84%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-smoothpage-title2 h2 {
            font-size: 8.0903em;
            font-weight: 800;
            line-height: 135%
        }
    }

    @media screen {
        .one-smooth-swiper {
            width: 100%;
            height: 100%
        }

        .one-smooth-wrapper {
            position: relative;
            z-index: 11;
            width: 100%;
            height: 100%;
            perspective: 3000px
        }

        .one-smooth-box {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9
        }

        .one-smooth-content {
            flex-wrap: nowrap;
            gap: 4.5em;
            align-items: center;
            justify-content: center;
            height: 100%
        }

        .one-smooth-name {
            width: 516px;
            flex-shrink: 0
        }

        .one-smooth-param {
            margin-top: 3.65em;
            gap: 1.5em;
            flex-wrap: nowrap
        }

        .one-smooth-video {
            width: 42em;
            height: 31em;
            margin-left: 4em;
            position: relative
        }

        .one-smooth-video video {
            border-radius: 2.25em;
            box-shadow: .2px .5px .5px 0 rgba(206, 226, 255, 0.86) inset, 1px 1px 3px 0 rgba(220, 204, 226, 0.25), 1px 1px 4px 0 rgba(176, 101, 251, 0.25), 3px 4px 4px 0 rgba(14, 5, 19, 0.25)
        }

        .one-smooth-txt {
            display: flex;
            width: 36em;
            padding: 2.5em;
            justify-content: center;
            align-items: center;
            gap: .5em;
            border-radius: 1.2em;
            background: linear-gradient(323deg, rgba(12, 9, 41, 0.30) 14.35%, rgba(52, 101, 224, 0.30) 43.13%, rgba(215, 228, 255, 0.30) 80.87%);
            box-shadow: -1px -1px .5px 0 rgba(255, 255, 255, 0.10) inset, 2px 2px 1px 0 rgba(187, 192, 247, 0.25) inset;
            backdrop-filter: blur(10px);
            position: absolute;
            left: -4em;
            top: 27em;
            z-index: 9
        }
    }

    @media screen {
        .one-spring-section {
            z-index: 1
        }

        .one-spring-bg {
            z-index: -1;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-spring-bg.active {
            opacity: 1
        }

        .one-spring-content {
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap
        }

        .one-spring-title {
            width: 15.85em
        }

        .one-spring-video {
            position: relative;
            width: 15.8236em;
            height: 33.5em;
            margin: 0 2.4em 0 .75em
        }

        .one-spring-video>picture {
            position: relative;
            z-index: 11
        }

        .one-spring-video video {
            border-radius: 1.5em;
            width: 14.8722em !important;
            height: 32.7489em !important;
            z-index: 9
        }

        .one-spring-desc {
            width: 14.15em;
            gap: 1.5em
        }

        .one-pc-videoControl {
            right: 0 !important;
            bottom: 0 !important
        }

        .one-spring-refresh {
            position: relative;
            width: 2em;
            height: 2em
        }

        .one-spring-refresh.active {
            animation: springRefreshPlay .5s forwards
        }

        @keyframes springRefreshPlay {
            0% {
                transform: rotate(0deg)
            }

            100% {
                transform: rotate(360deg)
            }
        }

        .one-spring-video-bg {
            width: 15.8236em;
            height: 33.5em;
            z-index: 99
        }
    }

    @media screen {
        .one-deformation-safe {
            gap: 10em
        }

        .one-deformation-itme {
            justify-content: space-between;
            align-items: center
        }

        .one-deformation-title {
            width: 482px
        }

        .one-deformation-video {
            width: 399px;
            height: 540px;
            position: relative
        }

        .one-deformation-itme.index1 .one-deformation-video video,
        .one-deformation-itme.index3 .one-deformation-video video,
        .one-deformation-itme.index4 .one-deformation-video video {
            top: 0;
            width: 300px !important;
            height: 700px !important
        }

        .one-deformation-itme.index2 .one-deformation-video video {
            width: 390px !important;
            height: 700px !important
        }

        .one-deformation-itme.index2,
        .one-deformation-itme.index4 {
            flex-direction: row-reverse
        }

        .one-deformation-itme.index2 .one-deformation-video {
            height: 540px
        }
    }

    @media screen {
        .one-grab-shadow-top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 15em;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 50.08%, #000 98.61%)
        }

        .one-grab-shadow-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 6em;
            background: linear-gradient(0deg, #000 .08%, rgba(73, 72, 72, 0) 100.61%)
        }

        .one-grab-section {
            z-index: 1;
            padding-bottom: 6.75em
        }

        .one-grab-subtitle {
            justify-content: center;
            align-items: center;
            gap: .5em
        }

        .one-grab-subtitle>img {
            width: 2.5em;
            height: 2.5em
        }

        .one-grab-title {
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-top: .8em
        }

        .one-grab-cardList {
            position: relative;
            height: 12.5em;
            margin-top: 8.25em;
            gap: 1em;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap
        }

        .one-grab-card {
            cursor: pointer;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            border-radius: var(--semantic-corner-secondary, 0.8em);
            background: rgba(78, 78, 78, 0.40);
            backdrop-filter: blur(15px);
            transition: background, box-shadow, backdrop-filter .3s ease-in-out;
            width: 12em;
            text-align: center
        }

        .one-grab-card>p {
            white-space: nowrap
        }

        .one-grab-card.active img {
            transform: scale(1.2);
            transition: all .2s ease-in-out
        }

        .one-grab-card:nth-child(1) {
            padding: 2.5em 2.1em 1.5em 2.15em;
            gap: 2.15em
        }

        .one-grab-card:nth-child(2) {
            padding: 2.5em 2.55em 1.5em 2.6em;
            gap: 2.15em
        }

        .one-grab-card:nth-child(3) {
            padding: 2.5em 3.3331em 1.5em 3.3332em;
            gap: 2.23em
        }

        .one-grab-card:nth-child(4) {
            padding: 2.825em 2.85em 1.5em 2.85em;
            gap: 2.62em
        }

        .one-grab-card:nth-child(1)>img {
            width: 4.8em;
            height: 4.8em
        }

        .one-grab-card:nth-child(2)>img {
            width: 4.4em;
            height: 4.8em
        }

        .one-grab-card:nth-child(3)>img {
            width: 4.83em;
            height: 4.72em
        }

        .one-grab-card:nth-child(4)>img {
            width: 3.483em;
            height: 4em
        }

        .one-grab-card.active {
            border-radius: var(--semantic-corner-secondary, 0.8rem);
            background: rgba(235, 236, 237, 0.40);
            box-shadow: -1px -1px 1px 0 rgba(255, 255, 255, 0.30) inset, 1px 1px 1px 0 rgba(255, 255, 255, 0.75) inset, 0 0 40px 2px rgba(255, 255, 255, 0.10) inset;
            backdrop-filter: blur(20px)
        }

        .one-grab-content {
            position: relative;
            z-index: 1
        }

        .one-grab-fullbg {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0
        }

        .one-grab-fullbg-mask {
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.19%, rgba(0, 0, 0, 0.40) 100%), rgba(0, 0, 0, 0.50)
        }

        .one-grab-swiper,
        .grab-swiper-wrapper,
        .grab-swiper-slide {
            height: 100%;
            width: 100%
        }

        .one-grab-remark {
            margin-top: 2.5em
        }
    }

    @media screen {
        .one-durable-section {
            z-index: 1;
            height: 74.4em
        }

        .one-durable-numberBox {
            z-index: 10;
            justify-content: center;
            align-items: center;
            gap: 3.75em;
            margin-left: 6.8em;
            margin-top: -5.4em
        }

        .one-durable-numberBox:before {
            content: "5";
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 11;
            font-size: 28em;
            font-weight: 600;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #c0d9fa 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            filter: drop-shadow(0 1px 1px rgba(182, 192, 235, 0.24));
            transition: opacity 1s ease-in-out;
            opacity: 0
        }

        .one-durable-number1 {
            position: relative;
            font-size: 28em;
            font-weight: 600;
            color: #000;
            background-clip: text;
            -webkit-background-clip: text
        }

        .one-durable-number2 {
            font-size: 3.2em;
            font-weight: 600;
            line-height: 3.8em;
            color: transparent;
            opacity: 0;
            background-clip: text;
            -webkit-background-clip: text
        }

        .one-durable-numberBox.show:before {
            opacity: 1
        }

        .one-durable-numberBox.show .one-durable-number2 {
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            background-clip: text;
            -webkit-background-clip: text;
            transition: opacity 1.5s ease-in-out;
            opacity: 1
        }

        .one-durable-bg {
            z-index: -1;
            width: 100%;
            height: 100%
        }

        .one-durable-bg-img {
            position: absolute;
            z-index: 9;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-durable-bg-img.active {
            opacity: 1
        }

        .one-durable-title {
            margin-top: -28.5em;
            width: 49em
        }

        .one-durable-databox {
            margin-top: -5em;
            margin-left: -16em
        }

        .one-durable-databox {
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-durable-databox.show {
            opacity: 1
        }

        .one-durable-data {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            width: 323px
        }

        .one-durable-dataicon svg {
            width: 6.79625em;
            height: 2.85em
        }

        .one-durable-data-percent {
            position: relative
        }

        .one-durable-data-percent>img {
            position: absolute;
            width: 1.0949em;
            height: 1.8em;
            left: 3.2em;
            flex-shrink: 0
        }

        .one-durable-data-percent>p {
            text-align: center;
            font-size: 4em;
            font-weight: 400;
            background: linear-gradient(180deg, #3354BA 31.64%, #E9ECFF 65.19%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-durable-data-percent>p>span {
            font-size: 45%;
            font-weight: 900;
            background: linear-gradient(180deg, #0A0845 -74.51%, #3354BA -13.93%, #E9ECFF 79.41%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-durable-data-item-title {
            width: 15em;
            margin-top: 1.2em
        }
    }

    @media screen {
        .one-intelligence-title {
            width: 95%;
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.08) 95.85%, #7CFFF4 161.33%, #4C77E4 221.39%, #FFF 396.66%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-intelligence-title>p {
            font-size: 4.85em
        }
    }

    @media screen {
        .one-adatomisland-section {
            height: 100vh;
            transition: background .5s ease-in-out
        }

        .one-adatomisland-sub {
            margin-top: 6.55em;
            opacity: 1
        }

        .one-adatomisland-sub>p {
            text-shadow: 0 0 2px #fff;
            color: #000;
            opacity: 0
        }

        .one-adatomisland-title {
            margin-top: 6.8em;
            width: 95%
        }
        .one-adatomisland-title > p {
            line-height: 135% !important;
        }

        .one-adatomisland-sub>p.show {
            opacity: 1;
            transition: opacity 2s ease-in-out
        }

        .one-adatomisland-text {
            width: 40.7em;
            margin-top: -2em;
            opacity: 0
        }

        .one-adatomisland-btnList {
            margin-top: 3.65em;
            padding: .4em;
            align-items: center;
            gap: .4em;
            border-radius: 49.95em;
            background: rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(calc(var(30px) / 2))
        }

        .one-adatomisland-btn {
            padding: .4em .8em;
            justify-content: center;
            align-items: center;
            border-radius: 49.95em;
            color: rgba(255, 255, 255, 0.31);
            cursor: pointer
        }

        .one-adatomisland-btn.active {
            background: rgba(255, 255, 255, 0.96);
            color: rgba(0, 0, 0, 0.93)
        }

        .one-adatomisland-phone {
            bottom: -100vh;
            width: 26em;
            height: 55.04em
        }

        .one-adatomisland-phone>picture {
            position: relative;
            z-index: 12
        }

        .one-adatomisland-phone video {
            height: 99%;
            width: 99%;
            border-radius: 3em;
            overflow: hidden;
            top: .5em;
            margin-left: -0.1em;
            z-index: 10
        }

        .one-adatomisland-iconBox {
            width: 80em;
            height: 21em;
            margin-top: 15em
        }

        .one-adatomisland-iconBox.up .one-adatomisland-icon2 {
            opacity: 1;
            margin-top: -2em
        }

        .one-adatomisland-iconBox.up .one-adatomisland-icon1 {
            opacity: 1;
            margin-top: -2em
        }

        .one-adatomisland-icon1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 72em;
            height: 20.85em;
            opacity: 0;
            margin-top: 15em;
            margin-left: 2em;
            transition: margin-top .8s ease-in-out, opacity .5s ease-in-out
        }

        .one-adatomisland-icon2 {
            position: absolute;
            left: 0;
            top: 0;
            width: 75.05em;
            height: 21.8em;
            opacity: 0;
            margin-top: 15em;
            margin-left: 2em;
            transition: margin-top .9s ease-in-out, opacity .5s ease-in-out
        }

        .one-adatomisland-bg1,
        .one-adatomisland-bg2 {
            transition: opacity .2s ease-in-out
        }

        .one-adatomisland-bg1 {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: -100vh;
            z-index: -1;
            background-position-y: -100vh !important;
            background: radial-gradient(35.72% 41.24% at 50% 100%, rgba(137, 167, 226, 0.30) 0, #4467AE 21.63%, #000 100%);
            overflow: hidden;
            opacity: 0
        }

        .one-adatomisland-bg2 {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: -100vh;
            z-index: -1;
            background: radial-gradient(50% 71.72% at 50% 100%, rgba(137, 167, 226, 0.30) 2.59%, #4467AE 14.58%, #020918 67.98%, #000 100%);
            overflow: hidden;
            opacity: 0
        }

        .one-adatomisland-mask {
            position: absolute;
            bottom: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }
    }

    @media screen {
        .one-recognition-mask {
            position: absolute;
            bottom: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }

        .one-recognition-box.bk {
            background: #0C0C0D
        }

        .one-recognition-box {
            height: 100vh;
            opacity: 0
        }

        .one-recognition-content {
            height: 100vh;
            justify-content: center;
            align-items: flex-end;
            flex-wrap: nowrap;
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%)
        }

        .one-recognition-left {
            width: 50vw;
            height: 100%;
            position: relative
        }

        .one-recognition-selet {
            gap: .8em;
            width: 563px;
            position: absolute;
            top: 45%;
            right: 2em
        }

        .one-recognition-right {
            position: relative;
            width: 50vw;
            height: 100%;
            justify-content: flex-end
        }

        .one-recognition-right .one-recognition-img {
            opacity: 0
        }

        .one-recognition-right .one-recognition-img.active {
            opacity: 1
        }

        .one-recognition-selet-item {
            flex-wrap: nowrap;
            border-radius: 2em;
            background: #161617;
            padding: 1em 1.3em 1.3em 1.3em;
            gap: 1.6em;
            cursor: pointer;
            max-height: 3.95em;
            overflow: hidden;
            transition: max-height .5s ease-in-out
        }

        .one-recognition-selet-icon {
            height: 1.95em;
            width: 1.95em;
            cursor: pointer
        }

        @media screen and (min-width:1921px) {
            .one-recognition-selet-icon {
                height: 40px;
                width: 40px;
                cursor: pointer
            }

            .one-recognition-selet-item {
                gap: 1em !important
            }

            .one-recognition-title {
                width: 16em !important
            }
        }

        .one-recognition-title {
            position: relative;
            width: 19.2em;
            gap: .8em;
            padding-top: .25em
        }

        .one-recognition-title .one-sh {
            transition: opacity .2s ease-in-out
        }

        .one-recognition-title .one-sh:nth-child(1) {
            position: absolute
        }

        .one-recognition-selet-item .one-recognition-title .one-sh:nth-child(1) {
            opacity: 1
        }

        .one-recognition-selet-item .one-recognition-title .one-sh:nth-child(2) {
            opacity: 0
        }

        .one-recognition-selet-item.active .one-recognition-title .one-sh:nth-child(1) {
            opacity: 0
        }

        .one-recognition-selet-item.active .one-recognition-title .one-sh:nth-child(2) {
            opacity: 1
        }

        .one-recognition-selet-item.active {
            padding-bottom: 1.3em
        }

        .one-recognition-selet-item .one-recognition-title .one-b4 {
            opacity: 0;
            transition: opacity .5s ease-in-out
        }

        .one-recognition-selet-item.active .one-recognition-title .one-b4 {
            opacity: 1
        }

        .one-recognition-img {
            position: absolute;
            width: 22.2em;
            height: 36.4em;
            left: 3em
        }

        .one-recognition-img>picture {
            position: relative;
            z-index: 11
        }

        .one-recognition-img>video {
            top: .6em;
            width: 20.86485em;
            height: 46.36635em;
            object-fit: cover;
            border-radius: 1.77525em;
            overflow: hidden;
            z-index: 10
        }
    }

    @media screen {
        .one-productive-section {
            width: 100%;
            height: 46.5em;
            position: relative
        }

        .one-productive-title {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.08) 95.85%, #7CFFF4 161.33%, #4C77E4 221.39%, rgba(0, 0, 0, 0.90) 396.66%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            z-index: 11
        }

        .one-productive-title p {
            line-height: 135% !important;
        }

        .one-productive-bg {
            top: 0;
            width: 100%;
            height: 100%
        }

        .one-productive-bg-1 {
            height: 46.5em;
            width: 100%;
            position: relative;
            z-index: 11;
            opacity: 1;
            background: radial-gradient(329.34% 203.43% at 50% 195.77%, #F2F2F5 43.81%, #DCDBED 54.82%, #7195C6 71.78%, #274398 85.54%, #000 100%)
        }

        .one-productive-bg-2 {
            height: 100%;
            width: 100%;
            z-index: 10;
            opacity: 0;
            background: linear-gradient(180deg, #FFF 0, #F2F2F2 100%)
        }
    }

    @media screen {
        .one-office-section {
            height: 100vh
        }

        .one-office-section.wt {
            background: linear-gradient(180deg, rgba(242, 242, 242, 0.00) 12.63%, #FFF 68.9%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #F2F2F2 0, #E8E8E8 100%)
        }

        .one-office-text1 {
            position: absolute;
            margin-left: -15.1em;
            margin-top: -10em;
            width: 32.2em;
            opacity: 0
        }

        .one-office-text2 {
            width: 24.4em;
            position: absolute;
            margin-top: 100vh;
            margin-left: 12.5em
        }

        .one-office-text3 {
            width: 26em;
            position: absolute;
            margin-top: 100vh;
            margin-left: -24em;
            opacity: 0
        }

        .one-office-text4 {
            width: 26em;
            position: absolute;
            margin-top: 100vh;
            margin-left: -13em;
            opacity: 0
        }

        .one-office-btn {
            width: fit-content;
            padding: .6em 1.6em;
            justify-content: center;
            align-items: center;
            border-radius: 1.85em;
            background: #FFD062;
            margin-top: 2.5em
        }

        .one-office-phone {
            position: absolute;
            z-index: 1;
            width: 11.8em;
            height: 25em;
            margin-top: 2em;
            margin-left: 9.9em;
            opacity: 0;
            transition: margin-top 1s, opacity 1s
        }

        .one-office-phone.move {
            margin-top: 2.5em;
            opacity: 1
        }

        .one-office-phone img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: 2
        }

        .one-office-phone img.active {
            opacity: 1;
            z-index: 3
        }

        .one-office-img1 {
            position: absolute;
            right: 0;
            margin-left: 9.9em;
            width: 39.95em;
            height: 32.85em;
            opacity: 0;
            transition: margin-top 1s, opacity 1s
        }

        .one-office-img1.move {
            margin-top: -4.72em;
            opacity: 1
        }

        .one-office-img2 {
            position: absolute;
            margin-left: -18.5em;
            bottom: -10vh;
            width: 52.09em;
            height: 20em
        }

        .one-office-img3 {
            position: absolute;
            left: -100%;
            margin-top: -2.5em;
            width: 44.65em;
            height: 34.2em;
            opacity: 0
        }

        .one-office-img4 {
            position: absolute;
            right: -100%;
            margin-top: -3.5em;
            width: 50.25em;
            height: 33.1em;
            opacity: 0
        }

        .one-office-img5 {
            position: absolute;
            right: -100%;
            margin-top: -2em;
            width: 49.05em;
            height: 38em;
            opacity: 0
        }
    }

    @media screen {
        .one-vivopage-box.wt {
            background: #FFF
        }

        .one-vivopage-title {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.40) 104.66%, #7CFFF4 153.93%, #4B36CF 199.13%, rgba(0, 0, 0, 0.90) 331.01%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-vivodocument-section {
            position: relative;
            border-top-left-radius: 3em;
            border-top-right-radius: 3em
        }

        .one-vivodocument-section>.one-pc-safeRow2 {
            z-index: 10;
            position: relative
        }

        .one-vivodocument-section.wt {
            background: #FFF
        }

        .one-vivodocument-accordion {
            height: 700px;
            width: 1200px;
            border-radius: 24px;
            background: #F9F9FB;
            overflow: hidden;
            position: relative
        }

        .one-vivodocument-leftBox {
            width: 470px;
            position: absolute;
            left: 48px;
            gap: 48px;
            top: 70px
        }

        .one-vivodocument-dec {
            width: 440px;
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s, opacity 1s ease-in-out;
            opacity: 0
        }

        .one-vivodocument-dec.active {
            opacity: 1
        }

        .one-vivodocument-dec>p {
            padding-top: 16px !important;
            display: block
        }

        .one-vivodocument-txt {
            flex-wrap: nowrap;
            gap: 36px;
            align-items: center;
            justify-content: space-between;
            transition: all .5s;
            color: rgba(0, 0, 0, 0.63) !important
        }

        .one-vivodocument-itemline {
            width: 100%;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.16) !important
        }

        .one-vivodocument-itemBox {
            gap: 32px
        }

        .one-vivodocument-item {
            cursor: pointer;
            width: 100%
        }

        .one-vivodocument-drawer-icon {
            height: 32px;
            width: 32px;
            transition: all .5s;
            transform: rotateX(180deg);
            opacity: .63
        }

        .one-vivodocument-item.active .one-vivodocument-drawer-icon {
            transform: rotate(0);
            opacity: 1
        }

        .one-vivodocument-item.active .one-vivodocument-txt {
            color: rgba(0, 0, 0, 0.93) !important
        }

        .one-vivodocument-rightBox {
            right: 0;
            width: 630px;
            height: 100%
        }

        .one-vivodocument-img1 {
            width: 18em;
            height: 13.5em
        }

        .one-vivodocument-img2 {
            position: absolute;
            width: 18.14em;
            height: 28em;
            bottom: 0;
            right: 5em
        }

        .one-vivodocument-img2 img {
            position: relative;
            z-index: 3
        }

        .one-vivodocument-imgBox {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            overflow: hidden
        }

        .one-vivodocument-imgBox img {
            position: absolute;
            opacity: 0;
            z-index: 1
        }

        .one-vivodocument-imgBox img.active {
            opacity: 1;
            z-index: 2
        }

        .one-vivodocument-video {
            position: absolute;
            top: 12.75px;
            left: 12px;
            width: 255.157px;
            height: 565.5px
        }

        .one-vivodocument-img {
            opacity: 0;
            transition: none
        }

        .one-vivodocument-img.active {
            opacity: 1;
            transition: all .5s
        }

        .one-vivodocument-bg {
            bottom: -700px;
            width: 1160px;
            height: 1160px;
            border-radius: 1160px;
            opacity: .2;
            background: linear-gradient(35deg, rgba(255, 255, 255, 0.00) 33.04%, #FFF 110.67%), #BB46FF;
            filter: blur(250px);
            margin-left: 300px
        }

        .one-vivodocument-fn {
            margin-top: 1em
        }
    }

    @media screen {
        .one-vivoother-section {
            position: relative;
            padding-top: 3em
        }

        .one-vivoother-img-bg {
            position: absolute;
            width: 13.53275em;
            height: 28.65em;
            bottom: 3.8em;
            right: 9.72em
        }

        .one-vivoother-video-bg {
            width: 13.53275em;
            height: 28.65em;
            position: absolute;
            z-index: 13
        }

        .one-vivoother-video {
            overflow: hidden;
            border-radius: 1.0278em;
            width: 12.71905em;
            height: 28.4076em
        }

        .one-vivoother-video2 {
            overflow: hidden;
            border-radius: 1.2em;
            width: 12.51745em;
            height: 27.5em;
            position: absolute;
            bottom: 4.95em;
            right: 12em;
            z-index: 11
        }

        .one-vivoother-swiper {
            width: 60em
        }

        .one-vivoother-swiper .swiper-slide {
            opacity: 0 !important
        }

        .one-vivoother-swiper .swiper-slide-active {
            opacity: 1 !important
        }

        .one-vivodocument-bg1 {
            width: 1160px;
            height: 1160px;
            border-radius: 1160px;
            opacity: .2;
            background: linear-gradient(35deg, rgba(255, 255, 255, 0.00) 33.04%, #FFF 110.67%), #BB46FF;
            filter: blur(250px);
            top: 0;
            margin-top: -486px;
            margin-left: 300px
        }

        .one-vivoother-section.wt {
            background-color: #fff
        }

        .one-vivoother-item.index1,
        .one-vivoother-item.index2,
        .one-vivoother-item.index3,
        .one-vivoother-item.index4 {
            width: 100%;
            height: 35em;
            justify-content: flex-start;
            flex-wrap: nowrap;
            border-radius: .8em;
            background: #F9F9FB;
            padding: 3em 2.4em;
            position: relative
        }

        .one-vivoother-item.index1 .one-vivoother-title,
        .one-vivoother-item.index2 .one-vivoother-title,
        .one-vivoother-item.index3 .one-vivoother-title,
        .one-vivoother-item.index4 .one-vivoother-title {
            width: 26.7em
        }

        .one-vivoother-img-index3 {
            position: absolute;
            width: 20.35815em;
            height: 32.65em;
            right: 6.25em;
            top: 0
        }

        .one-vivoother-img-index4 {
            position: absolute;
            width: 20.35815em;
            height: 29.25em;
            right: 6.3em;
            bottom: 0
        }

        .one-vivoother-item.index1 .one-vivoother-img,
        .one-vivoother-item.index3 .one-vivoother-img,
        .one-vivoother-item.index4 .one-vivoother-img {
            width: 13.53275em;
            height: 28.65em
        }

        .one-vivoother-item.index2 .one-vivoother-img {
            width: 30.1em;
            height: 35em
        }

        .one-vivoother-img2 {
            position: absolute;
            bottom: 0;
            right: 0
        }

        .one-vivoother-img5-phone-border {
            position: absolute;
            bottom: 0;
            z-index: 13;
            width: 100%;
            height: 100%
        }

        .one-vivoother32-video {
            height: 28.5em;
            width: 14em;
            margin-top: -0.3em;
            margin-left: .7em;
            border-radius: 2.5em
        }

        .one-vivoother32-video-border {
            position: absolute;
            top: -0.3em;
            left: .7em;
            width: 13.53275em;
            height: 28.65em
        }

        .one-vivoother33-video {
            height: 28.5em;
            width: 14em;
            margin-top: .2em;
            margin-left: 3.8em;
            border-radius: 2.5em
        }

        .one-vivoother-refresh {
            position: absolute;
            right: 2em;
            bottom: 2em
        }

        .one-vivoother-img1-icon {
            position: absolute;
            top: 3em;
            right: 2.4em;
            width: 4.85em;
            height: 4.85em
        }

        .one-vivoother-switchBtnList {
            z-index: 9;
            position: absolute;
            bottom: 5.5em;
            left: 2.4em
        }

        .one-vivoother-fn {
            position: absolute;
            left: 2.3em;
            top: 31.8em;
            width: 23.15em
        }
    }

    @media screen {
        .one-photography-section {
            height: 46.5em
        }

        .one-photography-section.wt {
            background: #FFF
        }

        .one-photography-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1
        }

        .one-photography-title {
            margin-top: 22.5em;
            position: relative;
            z-index: 2;
            width: 80% !important;
            width: fit-content;
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.40) 107.57%, #7CFFF4 156.21%, #4B36CF 200.83%, rgba(0, 0, 0, 0.90) 331.01%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-aiimage-section.wt {
            background: #fff
        }

        .one-aiimage-content {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4em 0;
            height: 100%
        }

        .one-aiimage-background-left {
            position: absolute !important;
            top: 5em;
            left: -11em;
            width: 12.5em;
            height: 24.25em;
            flex-shrink: 0;
            border-radius: 24.25em;
            opacity: .9;
            background: #4167C4;
            mix-blend-mode: hard-light;
            filter: blur(100px);
            z-index: 1
        }

        .one-aiimage-background-right {
            position: absolute !important;
            top: 4em;
            right: -8.55em;
            width: 11.9em;
            height: 24.25em;
            border-radius: 24.25em;
            opacity: .9;
            background: #F670EB;
            mix-blend-mode: hard-light;
            filter: blur(50px);
            z-index: 1
        }

        .one-aiimage-section>div {
            position: relative
        }

        .one-aiimage-silde {
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            opacity: 0 !important;
            transition: opacity .6s !important
        }

        .one-aiimage-silde.swiper-slide-active {
            opacity: 1 !important
        }

        .one-aiimage-swiper {
            width: 100%;
            height: 100%;
            position: relative;
            z-index: 9
        }

        .one-aiimage-img {
            width: 359.708px;
            height: 750px;
            position: relative;
            overflow: hidden;
            border-radius: 2em;
            z-index: 11
        }

        .one-aiimage-img>picture {
            position: relative;
            z-index: 11
        }

        .one-aiimage-video {
            width: 97%;
            height: 97%;
            border-radius: 2em;
            overflow: hidden;
            z-index: 10
        }

        .one-aiimage-title {
            width: 340px;
            margin-top: -135px
        }

        .one-aiimage-dec {
            width: 367px;
            margin-top: -135px
        }

        .one-aiimage-btnBox {
            position: absolute;
            gap: .6em;
            width: fit-content;
            bottom: 13.2em;
            right: 170px;
            z-index: 10;
            opacity: 0
        }

        .one-aiimage-remarkBox {
            position: absolute;
            width: 17.2em;
            bottom: 8em;
            right: 1.6em;
            z-index: 10
        }

        .one-aiimage-remarkBox .one-aiimage-remark {
            position: absolute;
            top: 0;
            opacity: 0
        }

        .one-aiimage-remarkBox .one-aiimage-remark.active {
            opacity: 1
        }

        .one-aiimage-btnlist {
            background-color: rgba(0, 0, 0, 0.06)
        }

        .one-aiimage-btn::before {
            background-color: #C7CDD3
        }

        .one-aiimage-btn.active::after {
            animation: videoBtn 7.5s linear forwards
        }

        .one-aiimage-btn::after {
            background-color: #222224
        }

        .one-aiimage-replay {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.06);
            border-radius: 50%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            cursor: pointer
        }
    }

    @media screen {
        .one-homepage-section.wt {
            background: var(--semantic-background-quinary, #FFF)
        }

        .one-homepage-section>div {
            justify-content: space-between;
            align-items: center
        }

        .one-homepage-title {
            width: 565px
        }

        .one-homepage-videoBox {
            align-items: center
        }

        .one-homepage-video {
            width: 619px;
            height: 677.468px
        }

        .one-homepage-refresh {
            display: flex;
            width: 40px;
            height: 40px;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            cursor: pointer
        }
    }

    @media screen {
        .one-photo-section.wt {
            background-color: #FFF
        }

        .one-photo-content {
            flex-wrap: nowrap;
            gap: 16px;
            height: auto
        }

        .one-photo-card {
            background: #F9F9FB;
            overflow: hidden;
            width: 590px;
            height: auto;
            align-items: center;
            justify-content: space-between;
            border-radius: 24px;
            position: relative
        }

        .one-photo-card.index1 {
            padding: 0 60px 60px;
            gap: 2.5em
        }

        .one-photo-card.index1 .one-photo-img {
            position: relative;
            width: 17.5em;
            height: 26em
        }

        .one-photo-phone-border {
            height: 100%
        }

        .one-photo-card.index1 .one-photo-img .one-photo-imgBox {
            position: absolute;
            top: 0;
            left: 0;
            width: 17.5em;
            height: 26em;
            overflow: hidden
        }

        .one-photo-card.index1 .one-photo-img .one-photo-imgBox img {
            position: absolute;
            opacity: 0;
            z-index: 1
        }

        .one-photo-card.index1 .one-photo-img .one-photo-imgBox img.active {
            position: absolute;
            opacity: 1;
            z-index: 2
        }

        .one-photo-card.index2 {
            padding: 60px 60px 0;
            gap: 2.5em
        }

        .one-photo-card.index2 .one-photo-img {
            width: 17.5em;
            height: 26em
        }

        .one-photo-refresh {
            position: absolute;
            top: 455px;
            right: 86px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(15px);
            -webkit-background-filter: blur(15px)
        }
    }

    @media screen {
        .one-batterypage-bg1 {
            width: 100vw;
            height: 305vh;
            margin-top: 102.5vh;
            background: radial-gradient(179.48% 60.08% at 50% 14.86%, #FFF 0, #B9D2FB 33.86%, #1C3C9C 76.94%, #000 100%)
        }

        .one-batterypage-bg2 {
            height: 100vh;
            width: 100%;
            top: 0;
            background: linear-gradient(180deg, #FFF 0, rgba(255, 255, 255, 0.00) 100%)
        }

        .one-batterypage-title {
            width: 75%;
            background: linear-gradient(90deg, #FFF -53.41%, #5580FF -28.63%, #010825 -3.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-engine-section {
            height: 46.5em;
            margin-top: -0.1em
        }

        .one-engine-section>div {
            position: relative;
            z-index: 10
        }

        .one-engine-title {
            width: 565px;
            padding-left: 2.35em
        }

        .one-engine-img {
            position: absolute !important;
            width: 1920px;
            height: 930px;
            z-index: 9 !important
        }
    }

    @media screen {
        .one-power-section {
            position: relative;
            height: 880px;
            margin-top: -0.1em
        }

        .one-power-accordion {
            margin-top: 200px;
            width: 100vw;
            background: #000;
            position: relative
        }

        .one-power-title {
            margin-bottom: 3.5em;
            width: 509px;
            margin-right: 3.3vw
        }

        .one-power-leftBox {
            z-index: 15;
            width: 50vw;
            position: relative;
            align-items: flex-end
        }

        .one-power-dec {
            width: 440px;
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s, opacity 1s ease-in-out;
            opacity: 0
        }

        .one-power-dec.active {
            opacity: 1
        }

        .one-power-dec>p {
            padding-top: 16px !important;
            display: block
        }

        .one-power-txt {
            flex-wrap: nowrap;
            gap: 36px;
            align-items: center;
            justify-content: space-between;
            transition: all .5s;
            color: rgba(255, 255, 255, 0.68) !important
        }

        .one-power-itemline {
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.24)
        }

        .one-power-itemBox {
            gap: 32px;
            width: 509px;
            margin-right: 3.3vw;
            position: relative
        }

        .one-power-item {
            cursor: pointer;
            width: 100%
        }

        .one-power-drawer-icon {
            height: 32px;
            width: 32px;
            transition: all .5s;
            transform: rotateX(180deg);
            opacity: .63
        }

        .one-power-item.active .one-power-drawer-icon {
            transform: rotate(0);
            opacity: 1
        }

        .one-power-item.active .one-power-txt {
            color: rgba(255, 255, 255, 0.96) !important
        }

        .one-power-rightBox {
            width: 50vw;
            height: 880px;
            position: absolute;
            right: 0;
            top: -200px
        }

        .one-power-img2 {
            width: 14.86515em;
            height: 31.5em;
            left: 7.4em
        }

        .one-power-img1 {
            z-index: 1;
            height: 100%;
            right: 0
        }

        .one-power-img1 video {
            position: absolute;
            right: 0;
            width: 47.6em;
            height: 39.5em;
            object-fit: cover
        }

        .one-power-img {
            opacity: 0;
            transition: none
        }

        .one-power-img.active {
            opacity: 1;
            transition: all .5s
        }
    }

    @media screen {
        .one-battery-section {
            margin-top: -0.1em
        }

        .one-battery-content {
            justify-content: center;
            align-items: center;
            gap: 1em;
            flex-wrap: nowrap;
            margin-top: 1.6em
        }

        .one-battery-card {
            position: relative;
            z-index: 0;
            height: 30em;
            width: 100%;
            border-radius: 1.2em;
            overflow: hidden;
            background-color: #111112;
            padding-left: 2.35em;
            align-items: center;
            justify-content: flex-start
        }

        .one-battery-card .one-battery-title {
            position: relative;
            z-index: 15
        }

        .one-battery2-remark {
            position: absolute;
            right: 9.5em;
            top: 18.5em;
            width: 13.2em;
            z-index: 15
        }

        .one-battery-card .one-battery-img {
            width: 102%;
            height: 102%;
            z-index: 10
        }

        .one-battery-picture {
            position: relative;
            z-index: 11
        }

        .one-battery-card-liner1 {
            z-index: 10
        }

        .one-battery-card.index2 .one-battery-img {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 1;
            z-index: 13;
            transition: opacity 1s ease-in-out
        }

        .one-battery-card.index2 .one-battery-img.index2 {
            z-index: 11;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-battery-card.index2 .one-battery-img.index2.active {
            opacity: 1
        }

        .one-battery-number {
            flex-wrap: nowrap;
            z-index: 12;
            justify-content: center;
            align-items: center;
            margin-left: 13.2em;
            margin-top: -1.6em
        }

        .one-battery-number svg {
            position: absolute;
            top: 35px;
            right: -3em;
            opacity: 0;
            transition: opacity 2s ease-in-out
        }

        .one-battery-number.show>p {
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            text-shadow: .4px .4px 1px 0 rgba(228, 231, 255, 0.25) inset, -0.4px -0.5px 1px 0 rgba(240, 236, 255, 0.70) inset;
            filter: drop-shadow(0 1px 1px rgba(182, 192, 235, 0.24));
            z-index: 2
        }

        .one-battery-number.show svg {
            opacity: 1
        }

        .one-battery-number.show>p:nth-child(1):before,
        .one-battery-number.show>p:nth-child(2):before {
            opacity: 0
        }

        .one-battery-number>p:nth-child(1):before {
            content: "18%";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: #000;
            opacity: 1;
            transition: opacity 1s ease-in-out
        }

        .one-battery-number>p:nth-child(2):before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 1s ease-in-out;
            opacity: 1;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: #000
        }

        .one-battery-number>p:nth-child(1) {
            position: relative;
            font-size: 8.3em;
            font-weight: 800
        }

        .one-battery-number>p:nth-child(2) {
            position: relative;
            font-size: 4em;
            font-weight: 600
        }

        .one-battery-card.index1 {
            position: relative;
            justify-content: space-between
        }

        .one-battery-card-liner1 {
            position: absolute;
            top: -120%;
            left: 50%;
            width: 65.55225em;
            height: 65.55225em;
            transform: rotate(-135deg);
            flex-shrink: 0;
            border-radius: 65.55225em;
            opacity: .7;
            background: conic-gradient(from 180deg at 50% 50%, #FFF 5.435694046318531deg, #FF6D12 256.1538362503052deg, #00FF2F 317.6042318344116deg);
            filter: blur(200px);
            transition: transform 1s ease-in-out, background 1s ease-in-out
        }

        .one-battery-card-liner1.active {
            transform: rotate(73.476deg);
            background: conic-gradient(from 180deg at 50% 50%, #FFF 5.435694046318531deg, #FF6D12 256.1538362503052deg, #32FFBB 317.6042318344116deg)
        }

        .one-battery-card.index1 .one-battery-img {
            width: 25.6494em !important;
            height: 26.07em !important;
            align-self: flex-end;
            margin-right: 3em
        }

        .one-battery-card.index1 .one-battery-title {
            width: 463px
        }

        .one-battery-card.index2 .one-battery-title {
            width: 514px
        }
    }

    @media screen {
        .one-vshield-mask {
            position: absolute;
            top: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }

        .one-vshield-section {
            z-index: 10;
            margin-top: -0.1em
        }

        .one-vshield-content {
            position: relative
        }

        .one-vshield-bg {
            z-index: -1;
            width: 100%;
            height: 100%
        }

        .one-vshield-title {
            height: 46.5em;
            width: 95%;
            position: relative;
            padding-top: 22.35em
        }

        .one-vshield-title>* {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.08) 95.85%, #7CFFF4 161.33%, #4C77E4 221.39%, #FFF 396.66%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-vshield-desc {
            margin-top: 260px;
            margin-bottom: 226px
        }

        .one-vshield-desc-head {
            position: relative;
            margin: 0 auto;
            width: 50.75em;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center
        }

        .one-vshield-img {
            width: 17.15em;
            height: 21.0397em
        }

        .one-vshield-desc-txt {
            width: 488px
        }

        .one-vshield-icon {
            width: 51.5em;
            height: 4em;
            margin-top: 6.84em
        }
    }

    @media screen {
        .one-privacy-section {
            width: 100%;
            height: 46.5em
        }

        .one-privacy-section>div {
            height: 100%;
            justify-content: center
        }

        .one-privacy-title {
            width: 462px;
            position: relative;
            z-index: 12
        }

        .one-privacy-refresh {
            position: relative;
            align-self: flex-end
        }

        .one-privacy-video {
            width: 35.4em;
            height: 44em;
            position: absolute;
            bottom: 0;
            left: 550px;
            z-index: 11
        }

        .one-privacy-mask {
            position: absolute;
            bottom: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }
    }

    @media screen {
        .one-careeyes-section {
            height: 46.5em
        }

        .one-careeyes-title {
            background: #131314;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            margin-top: 22.35em;
            width: 95%
        }
    }

    @media screen {
        .one-brightness-safe {
            flex-wrap: wrap;
            gap: 20px;
            position: relative
        }

        .one-brightness-item {
            overflow: hidden;
            width: 100%;
            height: 600px;
            border-radius: 24px;
            position: relative;
            z-index: 10
        }

        .one-brightness-itemBox {
            justify-content: space-between;
            height: auto;
            width: 100%;
            z-index: 9;
            margin-top: 620px;
            opacity: 0
        }

        .one-brightness-item.index1 {
            position: absolute;
            width: 100vw;
            height: 100vh;
            overflow: visible;
            top: -160px
        }

        .one-brightness-item.index1 .one-brightness-img {
            width: 100%;
            height: 100%
        }

        .one-brightness-item.index1 .one-brightness-title {
            position: absolute;
            width: 483px;
            top: 100px;
            left: 68px;
            opacity: 0
        }

        .one-brightness-item.index1 .one-brightness-phone {
            width: 321.386px;
            height: 681.56px;
            position: absolute;
            top: 50%;
            margin-left: 280px
        }

        .one-brightness-item.index2 {
            width: 590px;
            height: 100%;
            display: flex;
            flex-direction: column-reverse;
            padding: 68px 68px 0 68px;
            background-color: #0C0C0D
        }

        .one-brightness-item.index2 .one-brightness-img {
            width: 22.7em;
            height: 15.3em;
            margin: 53px auto 0
        }

        .one-brightness-item.index3 .one-brightness-img {
            height: 100% !important
        }

        .one-brightness-item.index3 {
            width: 590px;
            height: auto;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0, rgba(0, 0, 0, 0.20) 100%)
        }

        .one-brightness-item.index3 .one-brightness-img {
            top: 0;
            width: 100%;
            height: 600px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0, rgba(0, 0, 0, 0.20) 100%);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25)
        }

        .one-brightness-item.index3 .one-brightness-title {
            position: absolute;
            width: 455px;
            bottom: 68px;
            left: 68px
        }
    }

    @media screen {
        .one-remark-section.bk {
            background: #0C0C0D
        }

        .one-remark-section ul,
        .one-remark-section ol {
            padding-inline-start: 0
        }

        .one-remark-section li,
        .one-remark-section p {
            list-style-type: none;
            color: rgba(255, 255, 255, 0.31) !important
        }
    }

    @media screen {
        .one-os-section.bk {
            background: #0C0C0D
        }

        .one-os-media {
            margin: auto;
            width: clamp(980px, 60em, 1200px);
            height: clamp(336.47px, 20.6em, 412px);
            cursor: pointer;
            position: relative;
            display: block
        }

        .one-os-svg {
            height: 14px;
            width: 6px
        }

        .one-os-btn {
            gap: 12px;
            position: absolute;
            bottom: 37px;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center
        }
    }

    @media screen {
        .one-section {
            margin-top: -0.1em !important
        }
    }
}

@media screen and (max-width:1919px) and (min-width:1345px) {
    .one-design-title {
        top: 3em
    }

    .one-smooth-name {
        scale: .8
    }

    .one-durable-title {
        margin-top: -30em
    }

    .one-durable-databox {
        margin-left: -20em
    }
}

@media screen and (min-width:981px) and (max-width:1344px) {
    @media screen {
        .one-kv-section {
            width: 100%;
            height: 46.5em
        }

        .one-kv-content {
            bottom: 5em
        }

        .one-kv-title {
            position: absolute;
            top: 3.5em;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center
        }

        .one-kv-title.show {
            opacity: 1
        }

        .one-kv-logo {
            width: 13.14945em;
            height: 2.8em
        }

        .one-kv-title p {
            margin-top: .2em !important;
            color: rgba(0, 0, 0, 0.93) !important;
            font-size: 1.45em !important;
            font-style: normal;
            font-weight: 700 !important;
            line-height: 120%;
            letter-spacing: .058em !important
        }

        .one-kv-mask {
            height: 17.15em;
            width: 100%;
            bottom: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 61.28%, #F2F2F2 100%)
        }

        .one-kv-mask.active {
            opacity: 1
        }
    }

    @media screen {
        .one-design-title {
            position: absolute;
            top: 6em;
            left: 50%;
            transform: translateX(-50%) scale(1.2);
            transform-origin: 50% 0;
            opacity: 0
        }

        .one-design-title.active {
            transform: translateX(-50%) scale(1);
            opacity: 1;
            transition: all 1s 1s
        }

        .one-design-media {
            width: 100%;
            height: 49.55em;
            bottom: 0
        }

        .one-design-mask {
            position: absolute;
            z-index: 10;
            bottom: -0.1em;
            width: 100%;
            height: 13.3em;
            background: linear-gradient(177deg, #F1F1F1 3.42%, #DFE8F4 97.82%)
        }
    }

    @media screen {
        .one-space-section {
            padding-top: 7.5em !important;
            height: 57.8em
        }

        .one-space-section.wt {
            z-index: 1;
            background: linear-gradient(181deg, rgba(241, 241, 241, 0.00) -3.33%, rgba(216, 227, 246, 0.72) 41.05%, #CEDDF8 70.28%, #F2F2F2 99.54%), radial-gradient(411.18% 100% at 73.52% 0, #DFE8F4 0, #F3F3F3 100%)
        }

        .one-space-safeRow {
            position: relative;
            z-index: 15;
            width: 45.95em
        }

        .one-space-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 13;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-space-bg.active {
            opacity: 1
        }

        .one-space-media {
            position: absolute;
            z-index: 15;
            width: 100%;
            height: 34em;
            bottom: 0
        }

        .one-space-img1,
        .one-space-img2,
        .one-space-img3 {
            position: absolute;
            z-index: 15;
            width: 13em;
            height: 27.6846em
        }

        .one-space-img1 img,
        .one-space-img2 img,
        .one-space-img3 img {
            position: absolute;
            z-index: 15
        }

        .one-space-img1 video,
        .one-space-img2 video,
        .one-space-img3 video {
            position: absolute;
            z-index: 14;
            top: .5em;
            left: .25em;
            width: 97%;
            height: 97%;
            border-radius: 1em
        }

        .one-space-img1 {
            z-index: 1;
            margin-left: -18em
        }

        .one-space-img2 {
            z-index: 3
        }

        .one-space-img3 {
            z-index: 1;
            margin-left: 18em
        }

        .one-space-mask {
            z-index: 10;
            bottom: 0;
            width: 100%;
            height: 5.2em;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0, #E0E7F4 101.44%)
        }
    }

    @media screen {
        .one-shadow-section.wt {
            background: linear-gradient(181deg, #F2F2F2 1.53%, #FEFDFE 58.74%, #F6F8FD 74.88%, #F2F2F2 95.15%)
        }

        .one-shadow-section {
            z-index: 1
        }

        .one-shadow-replay {
            z-index: 3
        }

        .one-shadow-btnbox {
            position: relative;
            z-index: 3
        }

        .one-shadow-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0
        }

        .one-shadow-swiper {
            margin: auto;
            width: 46.2em;
            height: 26.4em
        }

        .one-shadow-bg {
            width: 100%;
            height: 100%;
            box-shadow: -0.2px -1px 1px 0 rgba(255, 255, 255, 0.50) inset, 0.2px 1px 1px 0 rgba(255, 255, 255, 0.75) inset
        }

        .one-shadow-swiper .swiper-slide {
            flex-wrap: nowrap;
            border-radius: 1.5em;
            overflow: hidden;
            position: relative;
            background-color: #fff;
            padding-left: 1.5em;
            align-items: center
        }

        .one-shadow-title {
            width: 20.5em;
            position: relative;
            z-index: 9
        }

        .one-shadow-title .one-sh {
            opacity: .6
        }

        .one-shadow-media.img2 {
            width: 22.52em;
            height: 100%;
            position: relative;
            z-index: 9
        }

        .one-shadow-media.img3 {
            width: 23em;
            height: 100%;
            position: relative;
            z-index: 9
        }

        .one-shadow-btnbox {
            margin: 1.6em auto 0;
            width: max-content;
            align-items: center;
            justify-content: center;
            gap: .6em;
            flex-wrap: nowrap;
            cursor: pointer
        }

        .one-shadow-btnlist {
            background: rgba(0, 0, 0, 0.06)
        }

        .one-shadow-btn::before {
            background-color: rgba(0, 0, 0, 0.12)
        }

        .one-shadow-btn::after {
            background-color: #222224
        }
    }

    @media screen {
        .one-grating-section {
            background: linear-gradient(180deg, #F2F2F2 1.62%, #B5C4DF 43.49%, #B0C2E0 100.69%)
        }

        .one-grating-video {
            width: 53.333em;
            height: 30em
        }

        .one-grating-media {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 2.5em;
            margin-bottom: 1em;
            width: 100vw;
            height: 30em;
            cursor: pointer
        }

        .one-grating-180deg-icon {
            width: 3em;
            height: 3em;
            bottom: 3.7em
        }

        .one-grating-btnlist {
            margin-top: 3em;
            width: fit-content;
            padding: .4em;
            gap: .4em;
            border-radius: 50em;
            background-color: rgba(0, 0, 0, 0.06);
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
            --btnWidth: 4.9em;
            --btnLeft: .4em
        }

        .one-grating-btn {
            position: relative;
            z-index: 2;
            padding: .4em .8em;
            border-radius: 50em;
            color: rgba(0, 0, 0, 0.32);
            transition: all .3s;
            cursor: pointer
        }

        .one-grating-btn.active {
            color: rgba(255, 255, 255, 0.96)
        }

        .one-grating-btnlist::after {
            content: "";
            position: absolute;
            top: .4em;
            left: var(--btnLeft);
            width: var(--btnWidth);
            height: calc(100% - 0.8em);
            z-index: 1;
            border-radius: 50em;
            background: rgba(0, 0, 0, 0.93);
            transition: all .3s
        }

        .one-grating-safeRow {
            position: relative;
            z-index: 9;
            width: 30.05em
        }

        .one-grating-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2
        }
    }

    @media screen {
        .one-lockscreen-section.wt {
            background: linear-gradient(180deg, #BAC8E2 0, #E3E7F0 40.33%, #F6F6F8 100%)
        }

        .one-lockscreen-title {
            position: relative;
            width: 40.7em;
            margin: 0 auto;
            z-index: 1
        }

        .one-lockscreen-swiper {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 32em;
            perspective: 50em;
            overflow: hidden;
            cursor: pointer
        }

        .one-lockscreen-swiper * {
            -moz-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-user-drag: none;
            -moz-user-drag: none;
            user-drag: none
        }

        .one-lockscreen-wrapper {
            z-index: 1;
            width: 10.8em;
            height: 24.05em;
            flex-wrap: nowrap;
            transform-style: preserve-3d;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) translateZ(56em);
            transition: all 1s ease-out
        }

        .one-lockscreen-wrapper.active {
            transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275)
        }

        .one-lockscreen-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 22px;
            overflow: hidden
        }

        .one-lockscreen-slide img {
            transform: rotateY(180deg)
        }
    }

    @media screen {
        .one-fontpage-section.wt {
            background: #F9F9FB
        }

        .one-fontpage-safeRow {
            width: 46.2em;
            position: relative;
            justify-content: center;
            align-items: center
        }

        .one-fontpage-leftbox {
            width: 22.7em
        }

        .one-fontpage-leftbox>.one-title {
            width: 35em
        }

        .one-fontpage-icon {
            width: 13em;
            height: 1.88em;
            display: block;
            object-fit: cover
        }

        .one-fontpage-btn {
            margin-top: 16em;
            display: block;
            width: fit-content;
            padding: .6em 1.6em;
            border-radius: 2em;
            background: #000;
            text-decoration: none
        }

        .one-fontpage-fn {
            width: 19.5em;
            margin-top: -2em;
            margin-left: 12em
        }

        .one-fontpage-fontspan {
            margin-top: .2em;
            width: 9.35em !important;
            height: 2.75em !important
        }

        .one-fontpage-font {
            width: 3.35em !important;
            height: .75em !important
        }

        .one-fontpage-rightbox {
            position: absolute;
            bottom: 5.2em;
            left: 50%;
            transform: translateX(-50%);
            margin-left: 24em
        }

        .one-fontpage-content {
            width: 22.7em;
            height: 11em;
            border-radius: .8em;
            background: #FFF;
            box-shadow: -1px -1px 3px 0 rgba(255, 255, 255, 0.50) inset, 1px 1px 3px 0 rgba(255, 255, 255, 0.50) inset
        }

        .one-fontpage-txt {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap
        }

        .one-fontpage-p {
            width: 11.95em;
            height: 3.6em;
            font-size: 2.5em;
            font-style: normal;
            font-weight: 500
        }

        .one-fontpage-pList {
            position: absolute;
            width: 4.8em;
            right: 2.8em;
            top: 3.15em
        }

        .one-fontpage-pList p {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity .5s
        }

        .one-fontpage-pList p.active {
            opacity: 1
        }

        .one-fontpage-p span {
            position: absolute;
            left: .8em;
            top: .8em;
            transition: all 1s;
            opacity: 0;
            -webkit-filter: blur(0.1em);
            filter: blur(0.1em)
        }

        .one-fontpage-p span.active {
            opacity: 1;
            -webkit-filter: blur(0px);
            filter: blur(0px)
        }

        .one-fontpage-param {
            justify-content: center;
            align-items: center;
            margin-top: -2em;
            gap: .6em
        }

        .one-fontpage-video {
            width: 22.7em;
            height: 11em;
            position: absolute;
            bottom: 5.2em
        }
    }

    @media screen {
        .one-atomdesign-section.wt {
            background: linear-gradient(180deg, #F6F6F8 0, #CFEBE4 56.73%, #F9F9FB 100.86%);
            mask-image: linear-gradient(180deg, #D9D9D9 79.82%, rgba(115, 115, 115, 0.00) 100%)
        }

        .one-atomdesign-section {
            height: 51.8em
        }

        .one-atomdesign-bg {
            position: absolute;
            bottom: 0;
            height: 100%;
            width: 100%;
            z-index: 1
        }

        .one-atomdesign-title {
            width: 33em;
            z-index: 9;
            margin-top: -14em;
            opacity: 1
        }

        .one-atomdesign-imglist {
            padding: 3.1em 0;
            position: relative;
            z-index: 9;
            width: 100%;
            gap: .75em;
            justify-content: center;
            margin-top: 100vh
        }

        .one-atomdesign-img1,
        .one-atomdesign-img2,
        .one-atomdesign-img3,
        .one-atomdesign-img4 {
            width: 15.5em;
            gap: .75em
        }

        :is(.one-atomdesign-img1, .one-atomdesign-img2, .one-atomdesign-img3, .one-atomdesign-img4) :is(img, video) {
            width: 100%;
            height: 34.45em;
            border-radius: 1.2em;
            overflow: hidden;
            display: block;
            object-fit: cover
        }

        .one-atomdesign-img5 {
            width: 20em
        }

        .one-atomdesign-img {
            position: absolute;
            z-index: 10;
            left: 35.05em;
            bottom: 0;
            width: 31.05em;
            height: 43.4em;
            display: block;
            object-fit: cover;
            margin-bottom: -100vh
        }

        .one-atomdesign-img img {
            position: relative;
            z-index: 2
        }

        .one-atomdesign-img video {
            position: absolute;
            top: 1%;
            left: 13.7%;
            width: 56.7%;
            object-fit: cover;
            border-radius: 1.5em;
            background: #fff
        }
    }

    @media screen {
        .one-faster-text {
            font-size: .5em !important
        }

        .one-smoothpage-mask {
            position: absolute;
            z-index: 10;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(1225.51% 814% at 44.01% 801.34%, #FCF7F8 0, #DEF0EF 17.41%, #2B4FA2 51.88%, #0B1B47 77.55%, #010103 100%), #000;
            opacity: 0
        }

        .one-smoothpage-before {
            width: 96em;
            height: 146.85em;
            top: 0;
            background: linear-gradient(180deg, #F9F9FB 20.43%, rgba(249, 249, 251, 0.00) 48.3%), radial-gradient(135.46% 54.9% at 50% 15.46%, #F9F9FB 2.17%, #D5E5FF 29.8%, #5E7EE0 61.86%, #23397A 80.15%, #000 100%), #D9D9D9
        }

        .one-smoothpage-content {
            width: 100%;
            height: 100%;
            bottom: -100vh;
            z-index: 9;
            background: radial-gradient(59% 38.23% at 50% 76.43%, #FCF7F8 0, #DEF0EF 13.99%, #2B4FA2 60.7%, #0B1B47 84.02%, #010103 100%), #000;
            background-size: 100% 200%;
            background-position-y: 0
        }

        .one-smoothpage-img {
            width: 100%;
            height: 54em;
            bottom: 0;
            z-index: 9
        }

        .one-smoothpage-img img {
            filter: brightness(20%)
        }

        .one-smoothpage-title1 {
            z-index: 10;
            background: linear-gradient(90deg, rgba(206, 204, 221, 0.8) 0, rgba(206, 204, 221, 0.8) 20%, #7CFFF4 40%, #4C77E4 60%, rgba(255, 255, 255, 0.90) 80%, rgba(255, 255, 255, 0.90) 100%);
            background-size: 500%;
            background-position-x: 0;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-smoothpage-title2 {
            z-index: 1;
            margin-top: 100vh;
            background: linear-gradient(180deg, rgba(128, 185, 255, 0.20) 3.47%, rgba(255, 255, 255, 0.90) 44.01%, rgba(138, 161, 219, 0.20) 52.31%, rgba(243, 247, 255, 0.90) 93.84%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-smoothpage-title2 h2 {
            font-size: 6em;
            font-weight: 800;
            line-height: 119.588%
        }
    }

    @media screen {
        .one-smooth-swiper {
            width: 100%;
            height: 100%
        }

        .one-smooth-wrapper {
            position: relative;
            z-index: 11;
            width: 100%;
            height: 100%;
            perspective: 3000px
        }

        .one-smooth-box {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 9
        }

        .one-smooth-content {
            flex-wrap: nowrap;
            gap: 2em;
            align-items: center;
            justify-content: center;
            height: 100%
        }

        .one-smooth-name {
            width: 26em;
            flex-shrink: 0
        }

        .one-smooth-param {
            margin-top: 2.65em;
            gap: 1.5em;
            flex-wrap: nowrap
        }

        .one-smooth-video {
            width: 25.5em;
            height: 18.85em;
            margin-left: 4em;
            position: relative
        }

        .one-smooth-video video {
            border-radius: 2.25em;
            box-shadow: .2px .5px .5px 0 rgba(206, 226, 255, 0.86) inset, 1px 1px 3px 0 rgba(220, 204, 226, 0.25), 1px 1px 4px 0 rgba(176, 101, 251, 0.25), 3px 4px 4px 0 rgba(14, 5, 19, 0.25)
        }

        .one-smooth-txt {
            display: flex;
            width: 36em;
            padding: 2.5em;
            justify-content: center;
            align-items: center;
            gap: .5em;
            border-radius: 1.2em;
            background: linear-gradient(323deg, rgba(12, 9, 41, 0.30) 14.35%, rgba(52, 101, 224, 0.30) 43.13%, rgba(215, 228, 255, 0.30) 80.87%);
            box-shadow: -1px -1px .5px 0 rgba(255, 255, 255, 0.10) inset, 2px 2px 1px 0 rgba(187, 192, 247, 0.25) inset;
            backdrop-filter: blur(10px);
            position: absolute;
            left: -4em;
            top: 27em;
            z-index: 9
        }
    }

    @media screen {
        .one-spring-video-bg {
            width: 15.5em;
            height: 32.81485em;
            z-index: 99
        }

        .one-spring-section {
            z-index: 1
        }

        .one-spring-bg {
            z-index: -1;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-spring-bg.active {
            opacity: 1
        }

        .one-spring-content {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap
        }

        .one-spring-title {
            width: 15.85em
        }

        .one-spring-video {
            position: relative;
            width: 15.8236em;
            height: 33.5em;
            margin: 0 2.4em 0 .75em
        }

        .one-spring-video>picture {
            position: relative;
            z-index: 11
        }

        .one-spring-video video {
            border-radius: 1.2018em;
            width: 96.5% !important;
            height: 96% !important;
            z-index: 10
        }

        .one-spring-desc {
            width: 14.15em;
            gap: 1.5em
        }

        .one-pc-videoControl {
            right: 0 !important;
            bottom: 0 !important
        }

        .one-spring-refresh {
            position: relative;
            width: 2em;
            height: 2em
        }

        .one-spring-refresh.active {
            animation: springRefreshPlay .5s forwards
        }

        @keyframes springRefreshPlay {
            0% {
                transform: rotate(0deg)
            }

            100% {
                transform: rotate(360deg)
            }
        }
    }

    @media screen {
        .one-deformation-safe {
            gap: 6em
        }

        .one-deformation-itme {
            justify-content: space-between;
            align-items: center
        }

        .one-deformation-title {
            width: 22.7em
        }

        .one-deformation-video {
            width: 22.7em;
            height: 26em;
            position: relative
        }

        .one-deformation-itme.index1 .one-deformation-video video,
        .one-deformation-itme.index3 .one-deformation-video video,
        .one-deformation-itme.index4 .one-deformation-video video {
            top: 0;
            width: 12.45em !important;
            height: 29.05em !important
        }

        .one-deformation-itme.index2 .one-deformation-video video {
            width: 15.8em !important;
            height: 32.25em !important
        }

        .one-deformation-itme.index2,
        .one-deformation-itme.index4 {
            flex-direction: row-reverse
        }
    }

    @media screen {
        .one-grab-shadow-top {
            position: absolute;
            top: 0;
            width: 100%;
            height: 15em;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 50.08%, #000 98.61%)
        }

        .one-grab-shadow-bottom {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 6em;
            background: linear-gradient(0deg, #000 .08%, rgba(73, 72, 72, 0) 100.61%)
        }

        .one-grab-section {
            z-index: 1;
            padding-bottom: 6.75em
        }

        .one-grab-subtitle {
            justify-content: center;
            align-items: center;
            gap: .5em
        }

        .one-grab-subtitle>img {
            width: 2.5em;
            height: 2.5em
        }

        .one-grab-title {
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-top: .8em
        }

        .one-grab-cardList {
            position: relative;
            height: 12.5em;
            margin-top: 8.25em;
            gap: 1em;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap
        }

        .one-grab-card {
            cursor: pointer;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center;
            border-radius: var(--semantic-corner-secondary, 0.8em);
            background: rgba(78, 78, 78, 0.40);
            backdrop-filter: blur(15px);
            transition: background, box-shadow, backdrop-filter .3s ease-in-out
        }

        .one-grab-card.active img {
            transform: scale(1.2);
            transition: all .2s ease-in-out
        }

        .one-grab-card:nth-child(1) {
            padding: 2.5em 2.1em 1.5em 2.15em;
            gap: 2.15em
        }

        .one-grab-card:nth-child(2) {
            padding: 2.5em 2.55em 1.5em 2.6em;
            gap: 2.15em
        }

        .one-grab-card:nth-child(3) {
            padding: 2.5em 3.3331em 1.5em 3.3332em;
            gap: 2.23em
        }

        .one-grab-card:nth-child(4) {
            padding: 2.825em 2.85em 1.5em 2.85em;
            gap: 2.62em
        }

        .one-grab-card:nth-child(1)>img {
            width: 4.8em;
            height: 4.8em
        }

        .one-grab-card:nth-child(2)>img {
            width: 4.4em;
            height: 4.8em
        }

        .one-grab-card:nth-child(3)>img {
            width: 4.83em;
            height: 4.72em
        }

        .one-grab-card:nth-child(4)>img {
            width: 3.483em;
            height: 4em
        }

        .one-grab-card.active {
            border-radius: var(--semantic-corner-secondary, 0.8rem);
            background: rgba(235, 236, 237, 0.40);
            box-shadow: -1px -1px 1px 0 rgba(255, 255, 255, 0.30) inset, 1px 1px 1px 0 rgba(255, 255, 255, 0.75) inset, 0 0 40px 2px rgba(255, 255, 255, 0.10) inset;
            backdrop-filter: blur(20px)
        }

        .one-grab-content {
            position: relative;
            z-index: 1
        }

        .one-grab-fullbg {
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0
        }

        .one-grab-fullbg-mask {
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 48.19%, rgba(0, 0, 0, 0.40) 100%), rgba(0, 0, 0, 0.50)
        }

        .one-grab-swiper,
        .grab-swiper-wrapper,
        .grab-swiper-slide {
            height: 100%;
            width: 100%
        }

        .one-grab-remark {
            margin-top: 2.1em
        }
    }

    @media screen {
        .one-durable-section {
            z-index: 1;
            height: 55em
        }

        .one-durable-numberBox {
            z-index: 10;
            justify-content: center;
            align-items: center;
            gap: 3.75em;
            margin-left: 7em;
            margin-top: -5.8em
        }

        .one-durable-numberBox:before {
            content: "5";
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 11;
            font-size: 20em;
            font-weight: 600;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #c0d9fa 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            filter: drop-shadow(0 1px 1px rgba(182, 192, 235, 0.24));
            transition: opacity 1s ease-in-out;
            opacity: 0
        }

        .one-durable-number1 {
            position: relative;
            font-size: 20em;
            font-weight: 600;
            color: #000;
            background-clip: text;
            -webkit-background-clip: text
        }

        .one-durable-number2 {
            font-size: 3.2em;
            font-weight: 600;
            line-height: 3.8em;
            color: transparent;
            opacity: 0;
            background-clip: text;
            -webkit-background-clip: text
        }

        .one-durable-numberBox.show:before {
            opacity: 1
        }

        .one-durable-numberBox.show .one-durable-number2 {
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            background-clip: text;
            -webkit-background-clip: text;
            transition: opacity 1.5s ease-in-out;
            opacity: 1
        }

        .one-durable-bg {
            z-index: -1;
            width: 100%;
            height: 100%
        }

        .one-durable-bg-img {
            position: absolute;
            z-index: 9;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-durable-bg-img.active {
            opacity: 1
        }

        .one-durable-title {
            margin-top: -26.5em;
            width: 49em
        }

        .one-durable-databox {
            margin-left: -13em;
            margin-top: -5em
        }

        .one-durable-databox {
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-durable-databox.show {
            opacity: 1
        }

        .one-durable-data {
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            width: 322px
        }

        .one-durable-dataicon {
            width: 6.79625em;
            height: 2.85em;
            margin-bottom: 1em
        }

        .one-durable-data-icon {
            width: 16.5em
        }

        .one-durable-data-percent {
            position: relative
        }

        .one-durable-data-percent>img {
            position: absolute;
            width: 1.0949em;
            height: 1.8em;
            left: 3.2em;
            flex-shrink: 0
        }

        .one-durable-data-percent>p {
            text-align: center;
            font-size: 4em;
            font-weight: 400;
            background: linear-gradient(180deg, #3354BA 31.64%, #E9ECFF 65.19%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-durable-data-percent>p>span {
            font-size: 45%;
            font-weight: 900;
            background: linear-gradient(180deg, #0A0845 -74.51%, #3354BA -13.93%, #E9ECFF 79.41%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-durable-data-item-title {
            width: 15em;
            margin-top: 1.2em
        }
    }

    @media screen {
        .one-intelligence-title {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.08) 95.85%, #7CFFF4 161.33%, #4C77E4 221.39%, #FFF 396.66%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-intelligence-title>p {
            font-size: 4.85em
        }
    }

    @media screen {
        .one-adatomisland-section {
            height: 100vh;
            transition: background .5s ease-in-out
        }

        .one-adatomisland-sub {
            margin-top: 6.55em;
            opacity: 1
        }

        .one-adatomisland-sub>p {
            text-shadow: 0 0 2px #fff;
            color: #000;
            opacity: 0
        }

        .one-adatomisland-title {
            margin-top: 6.8em
        }

        .one-adatomisland-sub>p.show {
            opacity: 1;
            transition: opacity 2s ease-in-out
        }

        .one-adatomisland-text {
            width: 40.7em;
            margin-top: -2em;
            opacity: 0
        }

        .one-adatomisland-btnList {
            margin-top: 3.65em;
            padding: .4em;
            align-items: center;
            gap: .4em;
            border-radius: 49.95em;
            background: rgba(255, 255, 255, 0.14);
            backdrop-filter: blur(calc(var(30px) / 2))
        }

        .one-adatomisland-btn {
            padding: .4em .8em;
            justify-content: center;
            align-items: center;
            border-radius: 49.95em;
            color: rgba(255, 255, 255, 0.31);
            cursor: pointer
        }

        .one-adatomisland-btn.active {
            background: rgba(255, 255, 255, 0.96);
            color: rgba(0, 0, 0, 0.93)
        }

        .one-adatomisland-phone {
            bottom: 0;
            width: 34em;
            height: 23em
        }

        .one-adatomisland-phone img {
            position: absolute;
            z-index: 0;
            bottom: 0;
            left: -0.1em;
            opacity: 0;
            transition: opacity .2s ease-in-out
        }

        .one-adatomisland-phone img.active {
            z-index: 1;
            opacity: 1
        }

        .one-adatomisland-phone.scala {
            height: 21.15em !important;
            width: 51.68em !important
        }

        .one-adatomisland-iconBox {
            width: 70em;
            height: 21em;
            margin-top: 15em
        }

        .one-adatomisland-iconBox.up .one-adatomisland-icon2 {
            opacity: 1;
            margin-top: -2em
        }

        .one-adatomisland-iconBox.up .one-adatomisland-icon1 {
            opacity: 1;
            margin-top: -2em
        }

        .one-adatomisland-icon1 {
            position: absolute;
            left: 0;
            top: 0;
            width: 65em;
            height: 20.85em;
            opacity: 0;
            margin-top: 15em;
            margin-left: 2em;
            transition: margin-top .8s ease-in-out, opacity .5s ease-in-out
        }

        .one-adatomisland-icon2 {
            position: absolute;
            left: 0;
            top: 0;
            width: 65em;
            height: 21.8em;
            opacity: 0;
            margin-top: 15em;
            margin-left: 2em;
            transition: margin-top .9s ease-in-out, opacity .5s ease-in-out
        }

        .one-adatomisland-bg1,
        .one-adatomisland-bg2 {
            transition: opacity .2s ease-in-out
        }

        .one-adatomisland-bg1 {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: -100vh;
            z-index: -1;
            background-position-y: -100vh !important;
            background: radial-gradient(35.72% 41.24% at 50% 100%, rgba(137, 167, 226, 0.30) 0, #4467AE 21.63%, #000 100%);
            overflow: hidden;
            opacity: 0
        }

        .one-adatomisland-bg2 {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            bottom: -100vh;
            z-index: -1;
            background: radial-gradient(50% 71.72% at 50% 100%, rgba(137, 167, 226, 0.30) 2.59%, #4467AE 14.58%, #020918 67.98%, #000 100%);
            overflow: hidden;
            opacity: 0
        }

        .one-adatomisland-mask {
            position: absolute;
            bottom: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }
    }

    @media screen {
        .one-recognition-mask {
            position: absolute;
            bottom: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }

        .one-recognition-box.bk {
            background: #0C0C0D
        }

        .one-recognition-box {
            height: 100vh;
            opacity: 0
        }

        .one-recognition-content {
            height: 100vh;
            justify-content: center;
            align-items: flex-end;
            flex-wrap: nowrap;
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%)
        }

        .one-recognition-left {
            width: 50vw;
            height: 100%;
            position: relative
        }

        .one-recognition-selet {
            gap: .8em;
            width: 480px;
            position: absolute;
            top: 40%;
            right: 2em
        }

        .one-recognition-right {
            position: relative;
            width: 50vw;
            height: 100%;
            justify-content: flex-end
        }

        .one-recognition-right .one-recognition-img {
            opacity: 0
        }

        .one-recognition-right .one-recognition-img.active {
            opacity: 1
        }

        .one-recognition-selet-item {
            flex-wrap: nowrap;
            border-radius: 2em;
            background: #161617;
            padding: 1.3em;
            padding-bottom: 3em;
            gap: 1.6em;
            cursor: pointer;
            max-height: 3.95em;
            overflow: hidden;
            transition: max-height .5s ease-in-out
        }

        .one-recognition-selet-icon {
            height: 1.95em;
            width: 1.95em;
            cursor: pointer
        }

        .one-recognition-title {
            position: relative;
            width: 19.2em;
            gap: .8em;
            padding-top: .25em
        }

        .one-recognition-title .one-sh {
            transition: opacity .2s ease-in-out
        }

        .one-recognition-title .one-sh:nth-child(1) {
            position: absolute
        }

        .one-recognition-selet-item .one-recognition-title .one-sh:nth-child(1) {
            opacity: 1
        }

        .one-recognition-selet-item .one-recognition-title .one-sh:nth-child(2) {
            opacity: 0
        }

        .one-recognition-selet-item.active .one-recognition-title .one-sh:nth-child(1) {
            opacity: 0
        }

        .one-recognition-selet-item.active .one-recognition-title .one-sh:nth-child(2) {
            opacity: 1
        }

        .one-recognition-selet-item.active {
            padding-bottom: 1.3em
        }

        .one-recognition-selet-item .one-recognition-title .one-b4 {
            opacity: 0;
            transition: opacity .5s ease-in-out
        }

        .one-recognition-selet-item.active .one-recognition-title .one-b4 {
            opacity: 1
        }

        .one-recognition-img {
            position: absolute;
            width: 22.2em;
            height: 36.4em;
            left: 3em
        }

        .one-recognition-img>picture {
            position: relative;
            z-index: 11
        }

        .one-recognition-img>video {
            top: .6em;
            width: 20.86485em;
            height: 46.36635em;
            object-fit: cover;
            border-radius: 1.77525em;
            overflow: hidden;
            z-index: 10
        }
    }

    @media screen {
        .one-productive-section {
            width: 100%;
            height: 46.5em;
            position: relative
        }

        .one-productive-title {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.08) 95.85%, #7CFFF4 161.33%, #4C77E4 221.39%, rgba(0, 0, 0, 0.90) 396.66%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            z-index: 11
        }

        .one-productive-bg {
            top: 0;
            width: 100%;
            height: 100%
        }

        .one-productive-bg-1 {
            height: 46.5em;
            width: 100%;
            position: relative;
            z-index: 11;
            opacity: 1;
            background: radial-gradient(329.34% 203.43% at 50% 195.77%, #F2F2F5 43.81%, #DCDBED 54.82%, #7195C6 71.78%, #274398 85.54%, #000 100%)
        }

        .one-productive-bg-2 {
            height: 100%;
            width: 100%;
            z-index: 10;
            opacity: 0;
            background: linear-gradient(180deg, #F3F3F3 .59%, #FFF 52.52%, #E2E2E2 100%)
        }
    }

    @media screen {
        .one-office-section.wt {
            background: linear-gradient(180deg, #E1E1E1 -3.23%, #FFF 77.05%, rgba(255, 255, 255, 0.00) 101.83%), radial-gradient(93.51% 22.74% at 73.52% 77.26%, #F2F2F2 0, #D2D2D2 100%)
        }

        .one-office-content {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 5em;
            height: 32.5em;
            width: 100%
        }

        .one-office-content.index1,
        .one-office-content.index3 {
            justify-content: flex-end
        }

        .one-office-content.index2,
        .one-office-content.index4 {
            justify-content: flex-start
        }

        .one-office-text {
            width: 22em
        }

        .one-office-img {
            width: 35em;
            height: 100%
        }

        .one-office-btn {
            margin-top: 2.5em;
            display: flex;
            padding: .6em 1.6em;
            justify-content: center;
            align-items: center;
            gap: .5em;
            width: fit-content;
            border-radius: 1.85em;
            background: #FFD062
        }
    }

    @media screen {
        .one-vivopage-box.wt {
            background: #FFF
        }

        .one-vivopage-title {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.40) 104.66%, #7CFFF4 153.93%, #4B36CF 199.13%, rgba(0, 0, 0, 0.90) 331.01%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-vivodocument-section {
            position: relative
        }

        .one-vivodocument-section>.one-pc-safeRow2 {
            z-index: 10;
            position: relative;
            width: 56.2em
        }

        .one-vivodocument-section.wt {
            background: #FFF
        }

        .one-vivodocument-accordion {
            height: 28em;
            width: 100%;
            border-radius: 1.2em;
            background: #F9F9FB;
            overflow: hidden;
            position: relative
        }

        .one-vivodocument-leftBox {
            width: 25.15em;
            position: absolute;
            left: 2em;
            gap: 2.4em;
            top: 3.3em
        }

        .one-vivodocument-dec {
            width: 23.1em;
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s, opacity 1s ease-in-out;
            opacity: 0
        }

        .one-vivodocument-dec.active {
            opacity: 1
        }

        .one-vivodocument-dec>p {
            padding-top: .8em !important;
            display: block
        }

        .one-vivodocument-txt {
            flex-wrap: nowrap;
            gap: 1.8em;
            align-items: center;
            justify-content: space-between;
            transition: all .5s;
            color: rgba(0, 0, 0, 0.63) !important
        }

        .one-vivodocument-itemline {
            width: 100%;
            height: 1px;
            background-color: rgba(0, 0, 0, 0.16) !important
        }

        .one-vivodocument-itemBox {
            gap: 1.6em
        }

        .one-vivodocument-item {
            cursor: pointer;
            width: 100%
        }

        .one-vivodocument-drawer-icon {
            height: 32px;
            width: 32px;
            transition: all .5s;
            transform: rotateX(180deg);
            opacity: .63
        }

        .one-vivodocument-item.active .one-vivodocument-drawer-icon {
            transform: rotate(0);
            opacity: 1
        }

        .one-vivodocument-item.active .one-vivodocument-txt {
            color: rgba(0, 0, 0, 0.93) !important
        }

        .one-vivodocument-rightBox {
            display: flex;
            bottom: 0;
            right: 0;
            width: 17.4em;
            height: 100%;
            justify-content: flex-start;
            align-items: flex-end
        }

        .one-vivodocument-img1 {
            width: 16em;
            height: 12em;
            margin-top: 1em
        }

        .one-vivodocument-img2 {
            position: relative;
            width: 16.61em;
            height: 25.41em;
            margin-top: 2em
        }

        .one-vivodocument-img2 img {
            position: relative;
            z-index: 3
        }

        .one-vivodocument-imgBox {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            overflow: hidden
        }

        .one-vivodocument-imgBox img {
            position: absolute;
            opacity: 0;
            z-index: 1
        }

        .one-vivodocument-imgBox img.active {
            opacity: 1;
            z-index: 2
        }

        .one-vivodocument-img {
            opacity: 0;
            transition: none
        }

        .one-vivodocument-img.active {
            opacity: 1;
            transition: all .5s
        }

        .one-vivodocument-bg {
            bottom: -25em;
            width: 58em;
            height: 58em;
            border-radius: 50em;
            opacity: .2;
            background: linear-gradient(35deg, rgba(255, 255, 255, 0.00) 33.04%, #FFF 110.67%), #BB46FF;
            filter: blur(12.5em);
            margin-left: 15em
        }

        .one-vivodocument-fn {
            margin-top: 1em
        }
    }

    @media screen {
        .one-vivoother-section {
            position: relative;
            padding-top: 2em
        }

        .one-vivodocument-bg1 {
            width: 58em;
            height: 58em;
            border-radius: 50em;
            opacity: .2;
            background: linear-gradient(35deg, rgba(255, 255, 255, 0.00) 33.04%, #FFF 110.67%), #BB46FF;
            filter: blur(12.5em);
            top: 0;
            margin-top: -24em;
            margin-left: 25em
        }

        .one-vivoother-section.wt {
            background-color: #fff
        }

        .one-vivoother-swiper {
            position: relative;
            width: 56.2em
        }

        .one-vivoother-img-bg {
            width: 10.8em;
            height: 22.86455em;
            margin-left: 2.5em
        }

        .one-vivoother-video-bg {
            width: 10.8em;
            height: 22.86455em;
            position: absolute;
            z-index: 13
        }

        .one-vivoother-video2 {
            overflow: hidden;
            border-radius: 1.2em;
            width: 12.51745em;
            height: 27.5em;
            position: absolute;
            bottom: 4.95em;
            right: 12em;
            z-index: 11
        }

        .one-vivoother-item.index3 {
            position: relative
        }

        .one-vivoother-img-index3 {
            position: absolute;
            height: 32em;
            width: 19.82em;
            top: 0;
            right: 7.49em
        }

        .one-vivoother-item .index4 {
            position: relative
        }

        .one-vivoother-img-index4 {
            position: absolute;
            bottom: 0;
            width: 19.8236em;
            height: 28.65em;
            right: 7em
        }

        .one-vivoother-video-bg {
            width: 13.53275em;
            height: 28.65em;
            position: absolute;
            z-index: 13
        }

        .one-vivoother-video {
            display: block;
            top: .8em;
            left: .4em;
            position: relative;
            margin: auto;
            overflow: hidden;
            border-radius: 1.0278em;
            width: 12.71905em;
            height: 27em
        }

        .one-vivoother-item.index1,
        .one-vivoother-item.index2,
        .one-vivoother-item.index3,
        .one-vivoother-item.index4 {
            width: 100%;
            height: 34em;
            justify-content: flex-start;
            flex-wrap: nowrap;
            border-radius: .8em;
            background: #F9F9FB;
            padding: 2em;
            gap: 4.85em;
            position: relative
        }

        .one-vivoother-item.index1 .one-vivoother-title,
        .one-vivoother-item.index2 .one-vivoother-title,
        .one-vivoother-item.index3 .one-vivoother-title,
        .one-vivoother-item.index4 .one-vivoother-title {
            width: 25em
        }

        .one-vivoother-item.index1 .one-vivoother-img,
        .one-vivoother-item.index3 .one-vivoother-img,
        .one-vivoother-item.index4 .one-vivoother-img {
            width: 10.8em;
            height: 22.86455em
        }

        .one-vivoother-item.index2 .one-vivoother-img {
            width: 30.1em;
            height: 35em
        }

        .one-vivoother-img2 {
            position: absolute;
            bottom: 0;
            right: 0
        }

        .one-vivoother-img5-phone-border {
            position: absolute;
            bottom: 0;
            z-index: 13;
            width: 100%;
            height: 100%
        }

        .one-vivoother32-video {
            height: 22.5em;
            width: 12em;
            margin-left: 2.5em;
            margin-top: .2em;
            border-radius: 2em
        }

        .one-vivoother-refresh {
            position: absolute;
            right: 2em;
            bottom: 2em
        }

        .one-vivoother-img1-icon {
            position: absolute;
            top: 1.5em;
            right: 2.4em;
            width: 3.45em;
            height: 3.45em
        }

        .one-vivoother-switchBtnList {
            z-index: 9;
            position: absolute;
            bottom: 3em;
            left: 2.4em
        }

        .one-vivoother-fn {
            position: absolute;
            left: 2.3em;
            top: 31.8em;
            width: 23.15em
        }
    }

    @media screen {
        .one-photography-section {
            height: 46.5em
        }

        .one-photography-section.wt {
            background: #FFF
        }

        .one-photography-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1
        }

        .one-photography-title {
            margin-top: 22.5em;
            position: relative;
            z-index: 2;
            width: fit-content;
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.40) 107.57%, #7CFFF4 156.21%, #4B36CF 200.83%, rgba(0, 0, 0, 0.90) 331.01%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-aiimage-section.wt {
            background: #fff
        }

        .one-aiimage-content {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4em 0;
            height: 100%
        }

        .one-aiimage-background-left {
            position: absolute !important;
            top: 5em;
            left: -11em;
            width: 12.5em;
            height: 24.25em;
            flex-shrink: 0;
            border-radius: 24.25em;
            opacity: .9;
            background: #4167C4;
            mix-blend-mode: hard-light;
            filter: blur(100px);
            z-index: 1
        }

        .one-aiimage-background-right {
            position: absolute !important;
            top: 4em;
            right: -8.55em;
            width: 11.9em;
            height: 24.25em;
            border-radius: 24.25em;
            opacity: .9;
            background: #F670EB;
            mix-blend-mode: hard-light;
            filter: blur(50px);
            z-index: 1
        }

        .one-aiimage-section>div {
            position: relative
        }

        .one-aiimage-silde {
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center;
            opacity: 0 !important;
            transition: opacity .6s !important;
            gap: 3em
        }

        .one-aiimage-silde.swiper-slide-active {
            opacity: 1 !important
        }

        .one-aiimage-swiper {
            width: 56.3em;
            height: 100%;
            position: relative;
            z-index: 9
        }

        .one-aiimage-img {
            width: 13.26em;
            height: 28.5807em;
            position: relative;
            overflow: hidden;
            border-radius: 2em;
            z-index: 11
        }

        .one-aiimage-img>picture {
            position: relative;
            z-index: 11
        }

        .one-aiimage-video {
            width: 96%;
            height: 97%;
            border-radius: 2em;
            overflow: hidden;
            z-index: 10
        }

        .one-aiimage-title {
            width: 16.15em;
            margin-top: -5.15em
        }

        .one-aiimage-dec {
            width: 18.35em;
            margin-top: -5em
        }

        .one-aiimage-btnBox {
            position: absolute;
            gap: .6em;
            width: fit-content;
            bottom: 10em;
            right: 170px;
            z-index: 10;
            opacity: 0
        }

        .one-aiimage-remarkBox {
            position: absolute;
            width: 17.2em;
            bottom: 8em;
            right: 7em;
            z-index: 10
        }

        .one-aiimage-remarkBox .one-aiimage-remark {
            position: absolute;
            top: 0;
            opacity: 0
        }

        .one-aiimage-remarkBox .one-aiimage-remark.active {
            opacity: 1
        }

        .one-aiimage-btnlist {
            background-color: rgba(0, 0, 0, 0.06)
        }

        .one-aiimage-btn::before {
            background-color: #C7CDD3
        }

        .one-aiimage-btn.active::after {
            animation: videoBtn 7.5s linear forwards
        }

        .one-aiimage-btn::after {
            background-color: #222224
        }

        .one-aiimage-replay {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(0, 0, 0, 0.06);
            border-radius: 50%;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            cursor: pointer
        }
    }

    @media screen {
        .one-homepage-section.wt {
            background: var(--semantic-background-quinary, #FFF)
        }

        .one-homepage-section>div {
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap
        }

        .one-homepage-title {
            width: 23.85em
        }

        .one-homepage-videoBox {
            align-items: center
        }

        .one-homepage-video {
            width: 12.3em;
            height: 26.0402em
        }

        .one-homepage-refresh {
            display: flex;
            width: 40px;
            height: 40px;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            cursor: pointer
        }
    }

    @media screen {
        .one-photo-section.wt {
            background-color: #FFF
        }

        .one-photo-content {
            flex-wrap: nowrap;
            gap: 1em;
            height: auto;
            justify-content: space-between
        }

        .one-photo-card {
            background: #F9F9FB;
            overflow: hidden;
            width: 22.6em;
            height: auto;
            align-items: center;
            justify-content: space-between;
            border-radius: 1.2em;
            position: relative;
            gap: 1.35em
        }

        .one-photo-card.index1 {
            padding: 0 50px 46px
        }

        .one-photo-card.index1 .one-photo-img {
            position: relative;
            width: 12.3em;
            height: 17.39em
        }

        .one-photo-phone-border {
            height: 100%
        }

        .one-photo-card.index1 .one-photo-img .one-photo-imgBox {
            position: absolute;
            top: 0;
            left: 0;
            width: 12.3em;
            height: 17.39em;
            overflow: hidden
        }

        .one-photo-card.index1 .one-photo-title {
            margin-top: 2.51em
        }

        .one-photo-card.index2 {
            padding: 3em 2.5em 0
        }

        .one-photo-card.index2 .one-photo-img {
            width: 12.3em;
            height: 18.55em
        }

        .one-photo-refresh {
            position: absolute;
            top: 455px;
            right: 86px;
            cursor: pointer;
            width: 40px;
            height: 40px;
            padding: 8px;
            justify-content: center;
            align-items: center;
            border-radius: 999px;
            background: rgba(0, 0, 0, 0.12);
            backdrop-filter: blur(15px);
            -webkit-background-filter: blur(15px)
        }
    }

    @media screen {
        .one-batterypage-bg1 {
            width: 100vw;
            height: 305vh;
            margin-top: 102.5vh;
            background: radial-gradient(179.48% 60.08% at 50% 14.86%, #FFF 0, #B9D2FB 33.86%, #1C3C9C 76.94%, #000 100%)
        }

        .one-batterypage-bg2 {
            height: 100vh;
            width: 100%;
            top: 0;
            background: linear-gradient(180deg, #FFF 0, rgba(255, 255, 255, 0.00) 100%)
        }

        .one-batterypage-title {
            background: linear-gradient(90deg, #FFF -53.41%, #5580FF -28.63%, #010825 -3.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-engine-section>div {
            position: relative;
            z-index: 10
        }

        .one-engine-title {
            width: 28.25em;
            padding-left: 6em
        }

        .one-engine-data {
            margin-top: 135px;
            width: 1087px;
            border-radius: 24px;
            background: rgba(255, 255, 255, 0.10);
            backdrop-filter: blur(60px);
            padding: 36px 52px;
            -webkit-backdrop-filter: blur(60px);
            justify-content: space-between;
            text-align: center
        }

        .one-engine-img {
            position: absolute !important;
            width: 100%;
            height: 100%;
            z-index: 9 !important
        }
    }

    @media screen {
        .one-power-section {
            position: relative;
            height: 880px
        }

        .one-power-accordion {
            margin-top: 200px;
            width: 100vw;
            background: #000;
            position: relative
        }

        .one-power-title {
            margin-bottom: 3.5em;
            width: 25em;
            margin-right: 3.3vw
        }

        .one-power-leftBox {
            z-index: 15;
            width: 50vw;
            position: relative;
            align-items: flex-end
        }

        .one-power-dec {
            width: 22em;
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s, opacity 1s ease-in-out;
            opacity: 0
        }

        .one-power-dec.active {
            opacity: 1
        }

        .one-power-dec>p {
            padding-top: 16px !important;
            display: block
        }

        .one-power-txt {
            flex-wrap: nowrap;
            gap: 36px;
            align-items: center;
            justify-content: space-between;
            transition: all .5s;
            color: rgba(255, 255, 255, 0.68) !important
        }

        .one-power-itemline {
            width: 100%;
            height: 1px;
            background: rgba(255, 255, 255, 0.24)
        }

        .one-power-itemBox {
            gap: 32px;
            width: 25em;
            margin-right: 3.3vw;
            position: relative
        }

        .one-power-item {
            cursor: pointer;
            width: 100%
        }

        .one-power-drawer-icon {
            height: 32px;
            width: 32px;
            transition: all .5s;
            transform: rotateX(180deg);
            opacity: .63
        }

        .one-power-item.active .one-power-drawer-icon {
            transform: rotate(0);
            opacity: 1
        }

        .one-power-item.active .one-power-txt {
            color: rgba(255, 255, 255, 0.96) !important
        }

        .one-power-rightBox {
            width: 50vw;
            height: 880px;
            position: absolute;
            right: 0;
            top: -200px
        }

        .one-power-img2 {
            width: 14.86515em;
            height: 31.5em;
            left: 7.4em
        }

        .one-power-img1 {
            z-index: 1;
            height: 100%;
            right: 0
        }

        .one-power-img1 video {
            position: absolute;
            right: -2em;
            width: 39.6em;
            height: 21.5em;
            object-fit: cover
        }

        .one-power-img {
            opacity: 0;
            transition: none
        }

        .one-power-img.active {
            opacity: 1;
            transition: all .5s
        }
    }

    @media screen {
        .one-battery-content {
            justify-content: center;
            align-items: center;
            gap: 1em;
            flex-wrap: nowrap;
            margin-top: 1.6em
        }

        .one-battery-card {
            position: relative;
            z-index: 0;
            height: 26.5em;
            width: 100%;
            border-radius: 1.2em;
            overflow: hidden;
            background-color: #111112;
            padding-left: 2.35em;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap
        }

        .one-battery-card .one-battery-title {
            position: relative;
            z-index: 11
        }

        .one-battery-card .one-battery-img {
            width: 102%;
            height: 102%;
            z-index: 10
        }

        .one-battery-picture {
            position: relative;
            z-index: 11
        }

        .one-battery-card-liner1 {
            z-index: 10
        }

        .one-battery-card.index2 .one-battery-img img {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-battery-card.index2 .one-battery-img img.active {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1
        }

        .one-battery-number {
            flex-wrap: nowrap;
            z-index: 13;
            justify-content: center;
            align-items: center;
            margin-left: 11.3em;
            margin-top: -1.2em
        }

        .one-battery-number svg {
            position: absolute;
            top: 35px;
            right: -2em;
            transform: scale(2);
            opacity: 0;
            transition: opacity 2s ease-in-out
        }

        .one-battery-number.show svg {
            opacity: 1
        }

        .one-battery2-remark {
            position: absolute;
            right: 4.5em;
            top: 17.2em;
            width: 13.2em;
            z-index: 15;
            line-height: 140%
        }

        .one-battery-number.show>p {
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            text-shadow: .4px .4px 1px 0 rgba(228, 231, 255, 0.25) inset, -0.4px -0.5px 1px 0 rgba(240, 236, 255, 0.70) inset;
            filter: drop-shadow(0 1px 1px rgba(182, 192, 235, 0.24));
            z-index: 2
        }

        .one-battery-number.show>p:nth-child(1):before,
        .one-battery-number.show>p:nth-child(2):before {
            opacity: 0
        }

        .one-battery-number>p:nth-child(1):before {
            content: "18%";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: #000;
            opacity: 1;
            transition: opacity 1s ease-in-out
        }

        .one-battery-number>p:nth-child(2):before {
            content: "Days";
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 1s ease-in-out;
            opacity: 1;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: #000
        }

        .one-battery-number>p:nth-child(1) {
            position: relative;
            font-size: 7em;
            font-weight: 800
        }

        .one-battery-number>p:nth-child(2) {
            position: relative;
            font-size: 2em;
            font-weight: 600
        }

        .one-battery-card.index1 {
            position: relative;
            justify-content: space-between
        }

        .one-battery-card-liner1 {
            position: absolute;
            top: -120%;
            left: 50%;
            width: 65.55225em;
            height: 65.55225em;
            transform: rotate(-135deg);
            flex-shrink: 0;
            border-radius: 65.55225em;
            opacity: .7;
            background: conic-gradient(from 180deg at 50% 50%, #FFF 5.435694046318531deg, #FF6D12 256.1538362503052deg, #00FF2F 317.6042318344116deg);
            filter: blur(200px);
            transition: transform 1s ease-in-out, background 1s ease-in-out
        }

        .one-battery-card-liner1.active {
            transform: rotate(73.476deg);
            background: conic-gradient(from 180deg at 50% 50%, #FFF 5.435694046318531deg, #FF6D12 256.1538362503052deg, #32FFBB 317.6042318344116deg)
        }

        .one-battery-card.index1 .one-battery-img {
            width: 25.6494em !important;
            height: 26.07em !important;
            margin-top: 4em
        }

        .one-battery-card.index1 .one-battery-title {
            width: 24.3em
        }

        .one-battery-card.index2 .one-battery-title {
            width: 21.7em
        }
    }

    @media screen {
        .one-vshield-mask {
            position: absolute;
            top: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }

        .one-vshield-section {
            z-index: 10
        }

        .one-vshield-content {
            position: relative
        }

        .one-vshield-bg {
            z-index: -1;
            width: 100%;
            height: 100%
        }

        .one-vshield-title {
            height: 46.5em;
            width: 80%;
            position: relative;
            padding-top: 22.35em
        }

        .one-vshield-title>* {
            background: linear-gradient(270deg, rgba(206, 204, 221, 0.08) 95.85%, #7CFFF4 161.33%, #4C77E4 221.39%, #FFF 396.66%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-vshield-desc {
            margin-top: 260px;
            margin-bottom: 226px
        }

        .one-vshield-desc-head {
            position: relative;
            margin: 0 auto;
            width: 50.75em;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: center
        }

        .one-vshield-img {
            width: 17.15em;
            height: 21.0397em
        }

        .one-vshield-desc-txt {
            width: 24.4em
        }

        .one-vshield-icon {
            width: 51.5em;
            height: 4em;
            margin-top: 6.84em
        }
    }

    @media screen {
        .one-privacy-section {
            width: 100%;
            height: 46.5em
        }

        .one-privacy-section>div {
            height: 100%;
            justify-content: center
        }

        .one-privacy-title {
            width: 25.45em
        }

        .one-privacy-refresh {
            position: relative;
            align-self: flex-end
        }

        .one-privacy-video {
            width: 12.05em;
            height: 25.5109em;
            position: absolute;
            bottom: 12em;
            right: 12em
        }

        .one-privacy-mask {
            position: absolute;
            bottom: 0;
            z-index: 10;
            height: 7.85em;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0, #000 100%)
        }
    }

    @media screen {
        .one-careeyes-section {
            height: 46.5em
        }

        .one-careeyes-title {
            background: #131314;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
            width: fit-content;
            margin-top: 22.35em
        }
    }

    @media screen {
        .one-brightness-safe {
            flex-wrap: wrap;
            gap: 20px;
            position: relative
        }

        .one-brightness-item {
            overflow: hidden;
            width: 100%;
            height: 600px;
            border-radius: 24px;
            position: relative;
            z-index: 10
        }

        .one-brightness-itemBox {
            flex-wrap: nowrap;
            justify-content: space-between;
            height: auto;
            width: 100%;
            z-index: 9;
            margin-top: 23em;
            gap: 1em
        }

        .one-brightness-item.index1 {
            position: absolute;
            top: -8em;
            height: 30em;
            width: 46.2em;
            overflow: hidden
        }

        .one-brightness-item.index1 .one-brightness-img {
            width: 100%;
            height: 100%
        }

        .one-brightness-item.index1 .one-brightness-title {
            position: absolute;
            width: 18.8em;
            top: 5em;
            left: 3.5em
        }

        .one-brightness-item.index1 .one-brightness-phone {
            width: 16.1em;
            height: 34em;
            position: absolute;
            top: 18%;
            margin-left: 12em
        }

        .one-brightness-item.index2 {
            width: 29em;
            height: 100%;
            display: flex;
            flex-direction: column-reverse;
            padding: 50px 50px 0 50px;
            background-color: #0C0C0D
        }

        .one-brightness-item.index2 .one-brightness-img {
            width: 18em;
            height: 13em;
            margin: 2.6em auto 0
        }

        .one-brightness-item.index3 .one-brightness-img {
            height: 100% !important
        }

        .one-brightness-item.index3 {
            width: 29.5em;
            height: auto;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0, rgba(0, 0, 0, 0.20) 100%)
        }

        .one-brightness-item.index3 .one-brightness-img {
            top: 0;
            width: 100%;
            height: 600px;
            background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0, rgba(0, 0, 0, 0.20) 100%);
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25)
        }

        .one-brightness-item.index3 .one-brightness-title {
            position: absolute;
            width: 20.5em;
            bottom: 2.5em;
            left: 1em
        }
    }

    @media screen {
        .one-remark-section.bk {
            background: #0C0C0D
        }

        .one-remark-section ul,
        .one-remark-section ol {
            padding-inline-start: 0
        }

        .one-remark-section li,
        .one-remark-section p {
            list-style-type: none;
            color: #898989 !important
        }
    }

    @media screen {
        .one-os-section.bk {
            background: #0C0C0D
        }

        .one-os-media {
            margin: auto;
            width: clamp(980px, 46.2em, 1200px);
            height: clamp(336.47px, 14em, 412px);
            cursor: pointer;
            position: relative;
            display: block
        }

        .one-os-svg {
            height: 14px;
            width: 6px
        }

        .one-os-btn {
            gap: 12px;
            position: absolute;
            bottom: 37px;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: center
        }
    }
}

@media screen and (max-width:1919px) and (min-width:1345px) {
    .one-power-section {
        font-size: 20px !important;
        font-size: 1.0416666667vw !important
    }
}

@media screen and (max-width:980px) {
    .one-section.wt {
        background: #fff
    }

    @media screen {
        .one-kv-video {
            height: 37em
        }

        .one-kv-img {
            height: 100%
        }

        .one-kv-text {
            display: block;
            color: rgba(0, 0, 0, 0.93);
            font-size: 1.3em;
            font-style: normal;
            font-weight: 700;
            line-height: 120%;
            letter-spacing: .052em
        }

        .one-kv-title {
            margin-top: 10.5em;
            text-align: center
        }
    }

    @media screen {
        .one-design-title {
            margin-top: 4.95em;
            width: 16.25em
        }

        .one-design-section.wt {
            background: linear-gradient(180deg, #F1F1F1 -19.74%, #CEDDF8 73.7%, #DAE6FA 100%) !important
        }

        .one-design-img {
            height: 24.05em;
            margin-top: 3.7em
        }
    }

    @media screen {
        .one-space-section.wt {
            background: linear-gradient(178deg, #CEDDF8 -31.53%, #FFF 103.52%, rgba(255, 255, 255, 0.00) 129.51%) !important
        }

        .one-space-swiper {
            padding-top: 3em;
            gap: .9em;
            justify-content: center
        }

        .one-space-img1,
        .one-space-img2,
        .one-space-img3 {
            width: 5em;
            height: 10.58545em
        }
    }

    @media screen {
        .one-shadow-swiper .swiper-slide {
            position: relative;
            display: flex;
            padding: 0 .8em;
            gap: 3em;
            height: auto;
            justify-content: space-between;
            flex-direction: column;
            align-items: center
        }

        .one-shadow-title {
            gap: .6em !important
        }

        .one-shadow-media {
            height: 16em;
            width: 16.75em
        }

        .one-shadow-title .one-b2,
        .one-shadow-title .one-sh {
            color: rgba(0, 0, 0, 0.69) !important
        }

        .one-shadow-title .one-h3 {
            color: rgba(0, 0, 0, 0.93) !important
        }

        .one-shadow-title>.one-b3 {
            font-size: var(--semantic-font-size-body-1, 0.85em) !important;
            font-weight: 600 !important;
            line-height: var(--semantic-font-line-height-body-1, 1.25em) !important
        }

        .one-shadow-title>.one-title>.one-h3 {
            font-size: var(--semantic-font-size-head-1, 1.8em) !important;
            font-weight: 800 !important;
            line-height: var(--semantic-font-line-height-head-1, 2.15em) !important
        }

        .one-shadow-switchBtnList {
            margin-top: 1.6em;
            justify-content: center
        }
    }

    @media screen {
        .one-grating-section.wt {
            background: linear-gradient(178deg, rgba(255, 255, 255, 0.00) -31.53%, #FFF -5.54%, #CEDDF8 129.51%)
        }

        .one-grating-media {
            width: 12.4em;
            height: 22em;
            margin-top: 3.01em
        }

        .one-grating-section .one-pc-safeRow>.one-title {
            gap: .8em
        }

        .one-grating-btnlist {
            justify-content: center
        }

        .one-grating-180deg-icon {
            width: 2.55em;
            height: 2.75em;
            margin-top: 1em
        }

        .one-grating-img {
            overflow: hidden;
            opacity: 0 !important
        }

        .one-grating-img.swiper-slide-active {
            opacity: 1 !important
        }

        .one-grating-btnlist {
            margin-top: 1.6em;
            width: fit-content;
            padding: .2em;
            gap: .2em;
            border-radius: 50em;
            background-color: rgba(0, 0, 0, 0.06);
            -webkit-backdrop-filter: blur(15px);
            backdrop-filter: blur(15px);
            --btnWidth: 3.75em;
            --btnLeft: .2em
        }

        .one-grating-btn {
            position: relative;
            z-index: 2;
            padding: .2em .4em;
            border-radius: 50em;
            color: rgba(0, 0, 0, 0.32);
            transition: all .3s;
            cursor: pointer
        }

        .one-grating-btn.active {
            color: rgba(255, 255, 255, 0.96)
        }

        .one-grating-btnlist::after {
            content: "";
            position: absolute;
            top: .2em;
            left: var(--btnLeft);
            width: var(--btnWidth);
            height: calc(100% - 0.4em);
            z-index: 1;
            border-radius: 50em;
            background: rgba(0, 0, 0, 0.93);
            transition: all .3s
        }
    }

    @media screen {
        .one-lockscreen-section.wt {
            background: linear-gradient(179deg, #CEDDF8 -31.66%, #F9F9FB 103.61%, #F9F9FB 129.65%)
        }

        .one-lockscreen-img {
            width: 100%;
            height: 37.7em;
            margin-top: 3em
        }
    }

    @media screen {
        .one-fontpage-section.wt {
            background: linear-gradient(180deg, #F7F8FB 0, #F2F2F5 100%)
        }

        .one-fontpage-video {
            width: 16.75em;
            height: 8.1em;
            margin-top: 3em
        }

        .one-fontpage-content {
            justify-content: center;
            align-items: center;
            height: 8.9em;
            border-radius: .39705em
        }

        .one-fontpage-txt {
            height: 3.47em;
            width: 100%;
            gap: 1em;
            justify-content: center
        }

        .one-fontpage-rightbox {
            margin-top: 1em;
            background: #FFF;
            border-radius: .6em;
            overflow: hidden
        }

        .one-fontpage-fontspan {
            margin-top: .2em;
            width: 9.35em !important;
            height: 2.75em !important
        }

        .one-fontpage-fn {
            width: 16.75em;
            bottom: 4em
        }

        .one-fontpage-p {
            position: relative;
            width: 9.5em
        }

        .one-fontpage-p span {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            -webkit-filter: blur(0.05em);
            filter: blur(0.05em);
            transition: all 1s
        }

        .one-fontpage-p span.active {
            opacity: 1;
            -webkit-filter: blur(0px);
            filter: blur(0px)
        }

        .one-fontpage-pList {
            position: relative;
            width: 3.5em
        }

        .one-fontpage-pList p {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            font-size: .42185em !important;
            font-weight: 600;
            line-height: .62035em !important
        }

        .one-fontpage-pList p.active {
            opacity: 1
        }

        .one-fontpage-param {
            justify-content: space-between;
            align-items: center;
            margin-top: 1em;
            margin-left: 1.49em;
            align-self: flex-start
        }

        .one-fontpage-param .one-param:nth-child(1) {
            width: 4em
        }

        .one-fontpage-param .one-param:nth-child(2) {
            width: 3.25em
        }

        .one-fontpage-param .one-param:nth-child(3) {
            width: 3.25em
        }

        .one-fontpage-line {
            width: .0248em;
            height: .9926em;
            background: rgba(0, 0, 0, 0.32);
            margin: 0 .74em;
            opacity: .7
        }

        .one-fontpage-param .one-param .one-b4 {
            font-size: .3722em !important;
            font-style: normal;
            font-weight: 600;
            line-height: .54595em !important
        }

        .one-fontpage-param .one-param .one-hg5 {
            font-size: .6948em !important;
            font-style: normal;
            font-weight: 700;
            line-height: .89335em !important
        }

        .one-fontpage-p span:nth-child(1) {
            font-size: 1.9852em !important;
            font-style: normal;
            font-weight: 500;
            line-height: 2.28295em !important
        }

        .one-fontpage-p span:nth-child(2) {
            font-size: 2.63035em !important;
            font-style: normal;
            font-weight: 500;
            line-height: 2.28295em !important
        }

        .one-fontpage-p span:nth-child(3) {
            font-size: 2.3822em !important;
            font-style: normal;
            font-weight: 500;
            line-height: 2.28295em !important
        }

        .one-fontpage-p span:nth-child(4) {
            font-size: 1.9852em !important;
            font-style: normal;
            font-weight: 500;
            line-height: 2.28295em !important
        }

        .one-fontpage-btn {
            margin-top: .6em;
            margin-bottom: 4.7em;
            color: rgba(255, 255, 255, 0.96) !important;
            border-radius: 49.95em;
            width: fit-content;
            background: #000;
            display: flex;
            padding: .2em .6em;
            justify-content: center;
            align-items: center
        }
    }

    @media screen {
        .one-atomdesign-section {
            z-index: 1;
            position: relative;
            height: 100vh
        }

        .one-atomdesign-section.wt {
            background: linear-gradient(180deg, #F2F2F5 0, #B9E0E8 46.48%, #EFF5FD 100%)
        }

        .one-atomdesign-img {
            width: 100%;
            height: 100%;
            margin-top: 2em
        }

        .one-atomdesign-imglist {
            flex-wrap: nowrap;
            gap: .6em;
            margin-left: -0.8em;
            margin-top: 3em
        }

        .one-atomdesign-imglist img {
            width: 6.49945em;
            height: 14.4432em
        }

        .one-atomdesign-img {
            position: absolute;
            bottom: -7em;
            width: 100%;
            height: 20.3em;
            transition: all .5s
        }

        .one-atomdesign-img.active {
            bottom: -0.05em;
            transition: all .5s
        }

        .one-atomdesign-title {
            transition: opacity .2s ease-in-out
        }

        .one-atomdesign-title.hide {
            opacity: 0
        }

        .one-atomdesign-bg {
            background: linear-gradient(180deg, rgba(239, 244, 253, 0.00) 0, #EFF4FD 100%);
            bottom: 0;
            width: 100%;
            height: 5em
        }
    }

    @media screen {
        .one-smoothpage-content {
            position: relative;
            padding: 8.6em 0;
            overflow: hidden;
            height: 99.5vh
        }

        .one-smoothpage-wap-mask {
            position: absolute;
            bottom: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.4) 100%)
        }

        .one-smoothpage-img {
            position: absolute;
            top: 0;
            height: 42.99em;
            width: 100%
        }

        .one-smoothpage-title1 {
            width: 90%
        }

        .one-smoothpage-title1>p {
            font-size: var(--semantic-font-size-head-0, 1.8em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-0, 2.15em)
        }

        .one-smoothpage-title2 {
            width: 100%;
            opacity: 0
        }

        .one-smoothpage-title2>p {
            font-size: var(--semantic-font-size-head-1, 1.8em);
            font-style: normal;
            font-weight: 800;
            line-height: var(--semantic-font-line-height-head-1, 2.15em);
            background: linear-gradient(180deg, rgba(128, 185, 255, 0.20) 3.47%, rgba(255, 255, 255, 0.90) 44.01%, rgba(138, 161, 219, 0.20) 52.31%, rgba(243, 247, 255, 0.90) 93.84%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }
    }

    @media screen {
        .one-smooth-name>.one-title {
            height: 14em;
            min-height: 14em
        }

        .one-smooth-video {
            margin-top: 3em;
            height: 13em;
            width: 16.75em
        }

        .one-smooth-switchBtnList {
            justify-content: center;
            margin-top: 1.6em
        }

        .one-smooth-param {
            margin-top: 2em;
            width: 100%;
            gap: 1.6em
        }

        .one-smooth-percent {
            display: flex;
            flex-direction: row
        }

        .one-smooth-percent svg {
            width: .9em;
            height: 1em;
            margin-top: .3em;
            margin-left: .1em
        }
    }

    @media screen {
        .one-spring-section {
            margin-top: -0.1em
        }

        .one-spring-phone {
            position: relative;
            width: 100%;
            height: 21em;
            margin-top: 2.85em
        }

        .one-spring-phone div {
            position: absolute
        }

        .one-spring-phone-border {
            z-index: 2
        }

        .one-spring-phone .one-spring-phone-img {
            width: 95%;
            height: 95%;
            top: .3em;
            left: .3em;
            border-radius: .6em;
            overflow: hidden
        }

        .one-spring-desc {
            margin-top: .8em
        }
    }

    @media screen {
        .one-deformation-title {
            width: 16.75em
        }

        .one-deformation-video {
            width: 9.95em;
            height: 23.3em;
            object-fit: cover;
            margin: 3.75em auto 0;
            overflow: hidden;
            transform: translateX(-1em)
        }

        .one-deformation-video.img2 {
            width: 13.65em;
            height: 26em
        }

        .one-deformation-safe {
            position: relative;
            z-index: 10
        }

        .one-deformation-switchBtnList {
            justify-content: center;
            bottom: 4em;
            z-index: 11
        }
    }

    @media screen {
        .one-grab-section {
            z-index: 1
        }

        .one-grab-content {
            position: relative;
            z-index: 1
        }

        .one-grab-cardList {
            margin-left: 4em;
            margin-top: 1.6em
        }

        .one-grab-card {
            height: auto;
            width: 9.2em !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 2em 1.68em 1.19em 1.72em;
            gap: 1.72em;
            border-radius: .64em;
            background: rgba(78, 78, 78, 0.40);
            backdrop-filter: blur(12px)
        }

        .one-grab-card.swiper-slide-active {
            background: rgba(235, 236, 237, 0.40);
            box-shadow: -0.8px -0.8px .8px 0 rgba(255, 255, 255, 0.30) inset, 0.8px .8px .8px 0 rgba(255, 255, 255, 0.75) inset, 0 0 32px 1.6px rgba(255, 255, 255, 0.10) inset;
            backdrop-filter: blur(16px)
        }

        .one-grab-fullbg {
            position: absolute;
            top: 0;
            left: 0;
            height: 38.35em;
            width: 100%;
            z-index: -1
        }

        .one-grab-card>img {
            width: 3.84em;
            height: 3.84em
        }

        .one-grab-switchBtnList {
            justify-content: center;
            margin-top: 1.6em
        }

        .one-grab-remark {
            margin-top: 3em
        }
    }

    @media screen {
        .one-durable-section {
            z-index: 1;
            height: 36.8em;
            overflow: hidden
        }

        .one-durable-bg {
            position: absolute;
            z-index: -1;
            top: 0;
            height: 100%;
            width: 100%
        }

        .one-durable-bg-img {
            position: absolute;
            z-index: -1;
            top: 0;
            height: 100%;
            width: 100%
        }

        .one-durable-bg-img.img2 {
            transition: opacity 1.5s ease-in-out;
            opacity: 0
        }

        .one-durable-bg-img.img2.active {
            opacity: 1
        }

        .one-durable-numberBox {
            gap: .6em;
            flex-wrap: nowrap;
            align-items: center;
            margin-top: 5.8em;
            margin-left: 2.2em
        }

        .one-durable-numberBox:before {
            content: "5";
            position: absolute;
            height: 100%;
            width: 100%;
            font-size: 12em;
            font-weight: 600;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #A8B5FC 30.14%, rgba(183, 194, 238, 0.95) 60.2%, rgba(135, 148, 221, 0.90) 80.51%);
            opacity: 0;
            transition: opacity 1.5s ease-in-out
        }

        .one-durable-numberBox.show:before {
            opacity: 1
        }

        .one-durable-numberBox.show .one-durable-number2 {
            opacity: 1
        }

        .one-durable-number1 {
            font-size: 12em;
            font-weight: 600;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: #000
        }

        .one-durable-number2 {
            font-size: 2em;
            font-weight: 500;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            opacity: 0;
            transition: opacity 1.5s ease-in-out
        }

        .one-durable-title {
            gap: .8em
        }

        .one-durable-databox {
            margin-top: 15em
        }

        .one-durable-data {
            width: 16.75em;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: .6em
        }

        .one-durable-data p {
            color: rgba(255, 255, 255, 0.96) !important;
            font-size: var(--semantic-font-size-body-4, 0.6em) !important;
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-body-4, 0.9em) !important
        }
    }

    @media screen {
        .one-adatomisland-text {
            margin-top: 8em
        }

        .one-intelligence-title {
            width: 85%
        }

        .one-adatomisland-sub {
            width: 85%
        }

        .one-intelligence-title>p {
            font-size: 1.3042em !important;
            font-style: normal;
            font-weight: 800 !important;
            line-height: 1.55965em !important
        }

        .one-adatomisland-title {
            margin-top: 1.5em
        }

        .one-adatomisland-all-title p {
            font-size: var(--semantic-font-size-subhead, 0.95em) !important;
            font-style: normal;
            font-weight: 600;
            line-height: var(--semantic-font-line-height-subhead, 1.1em) !important;
            color: rgba(255, 255, 255, 0.68)
        }

        .one-adatomisland-phone {
            width: 100%;
            height: 16em;
            margin: 2.7em auto;
            overflow: hidden;
            border-radius: .6em
        }

        .one-adatomisland-phone canvas {
            overflow: hidden;
            border-radius: .6em
        }
    }

    @media screen {
        .one-recognition-box {
            margin-top: 6em
        }

        .one-recognition-selet {
            gap: 7em
        }

        .one-recognition-title>p.sub {
            color: rgba(255, 255, 255, 0.68)
        }

        .one-recognition-title>p.head {
            font-size: var(--semantic-font-size-head-1, 1.8em) !important;
            font-style: normal;
            font-weight: 800 !important;
            line-height: var(--semantic-font-line-height-head-1, 2.15em) !important
        }

        .one-recognition-title>p.body {
            margin-top: .8em !important;
            font-size: var(--semantic-font-size-body-1, 0.85em) !important;
            font-style: normal;
            font-weight: 600 !important;
            line-height: var(--semantic-font-line-height-body-1, 1.25em) !important
        }

        .one-recognition-selet-item1 {
            position: relative;
            overflow: hidden;
            height: 36.5em
        }

        .one-recognition-selet-item2 {
            position: relative;
            overflow: hidden;
            height: 35.5em
        }

        .one-recognition-img {
            position: relative;
            margin-top: 3em;
            margin-left: -1em;
            width: 18.75em;
            height: 20em
        }
    }

    @media screen {
        .one-productive-section.wt {
            padding: 8.6em 0;
            background: radial-gradient(586.22% 133.05% at 50% 133.05%, #F2F2F5 28.05%, #B3BEDB 50.84%, #5F8DCE 66.31%, #274398 82.84%, #000 102%) !important
        }

        .one-productive-mask {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 5em;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.96) 100%)
        }
    }

    @media screen {
        .one-office-img {
            margin-top: 2.98em;
            width: 16.75em;
            height: 10.5em
        }

        .one-office-btn {
            margin-top: 1.6em;
            width: fit-content;
            padding: .2em .6em;
            justify-content: center;
            align-items: center;
            border-radius: 49.95em;
            background: #FFD062
        }
    }

    @media screen {
        .one-vivopage-box {
            height: 21.5em
        }

        .one-vivopage-title {
            width: 90%
        }

        .one-vivopage-bg {
            position: absolute;
            top: 0;
            height: 100%;
            width: 100%
        }

        .one-vivodocument-itemBox {
            margin-top: 3em
        }

        .one-vivodocument-txt {
            margin-top: 2em
        }

        .one-vivodocument-img {
            height: 17em
        }

        .one-vivodocument-dec {
            margin-top: .8em
        }

        .one-vivodocument-switchBtnList {
            justify-content: center;
            margin-top: 1.6em
        }

        .one-vivodocument-fn {
            margin-top: 3em;
            padding: 0 1em
        }
    }

    @media screen {
        .one-vivoother-title>.one-title {
            height: 27.75em;
            position: relative
        }

        .one-vivoother-item {
            height: auto;
            position: relative
        }

        .one-vivoother-img {
            width: 16.75em;
            height: 17em;
            border-radius: .6em;
            overflow: hidden;
            bottom: 0
        }

        .one-vivoother-title {
            gap: 1.6em !important
        }

        .one-vivoother-fn {
            margin-top: .4em;
            position: absolute;
            bottom: -6em;
            height: 0;
            overflow: visible
        }

        .one-vivoother-switchBtnList {
            justify-content: center;
            margin-top: 1.25em;
            margin-bottom: 3em
        }
    }

    @media screen {
        .one-photography-section {
            padding: 8.6em 0
        }
    }

    @media screen {
        .one-aiimage-section {
            height: auto;
            min-height: 47.9em
        }

        .one-aiimage-img {
            width: 10em;
            height: 21.15em;
            overflow: hidden;
            margin: 0 auto;
            margin-top: 3.05em
        }

        .one-aiimage-dec {
            margin-top: 1.6em
        }

        .one-aiimage-switchBtnList {
            justify-content: center;
            margin-top: 1.6em
        }

        .one-aiimage-mask {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%
        }

        .one-aiimage-remarkBox {
            position: relative;
            z-index: 999;
            min-height: 1.7em;
            margin-top: 2.5em
        }

        .one-aiimage-remark {
            position: absolute;
            opacity: 0
        }

        .one-aiimage-remark.active {
            opacity: 1
        }
    }

    @media screen {
        .one-photo-img {
            margin-top: 3.05em;
            height: 21.5em;
            width: 16.75em
        }

        .one-photo-title {
            gap: 0 !important
        }

        .one-photo-title>.one-title {
            min-height: 7.75em
        }

        .one-photo-title-desc {
            margin-top: 1.6em !important
        }

        .one-photo-switchBtnList {
            justify-content: center;
            margin-top: 1.6em
        }
    }

    @media screen {
        .one-batterypage-bg1 {
            width: 100vw;
            height: 305vh;
            margin-top: 102.5vh;
            background: radial-gradient(179.48% 60.08% at 50% 14.86%, #FFF 0, #B9D2FB 33.86%, #1C3C9C 76.94%, #000 100%)
        }

        .one-batterypage-bg2 {
            height: 100vh;
            width: 100%;
            top: 0;
            background: linear-gradient(180deg, #FFF 0, rgba(255, 255, 255, 0.00) 100%)
        }

        .one-batterypage-title {
            width: 85%;
            background: linear-gradient(90deg, #FFF -53.41%, #5580FF -28.63%, #010825 -3.49%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .one-batterypage-title>p {
            font-size: var(--semantic-font-size-head-3, 1.6em) !important;
            font-style: normal;
            font-weight: 800 !important;
            line-height: var(--semantic-font-line-height-head-3, 1.9em) !important
        }
    }

    @media screen {
        .one-engine-section {
            margin-top: -0.1em
        }

        .one-engine-title {
            gap: .8em !important
        }

        .one-engine-img {
            height: 16em;
            width: 16.75em;
            margin-top: 2.5em
        }
    }

    @media screen {
        .one-power-img {
            width: 18.75em;
            height: 15.55em;
            overflow: hidden;
            margin-top: 3em
        }

        .one-power-item:last-child .one-power-img {
            width: 18.75em;
            height: 19em
        }

        .one-power-switchBtnList {
            justify-content: center;
            margin-top: 1.6em
        }

        .one-power-txt {
            margin-top: 1.6em
        }

        .one-power-dec {
            margin-top: .8em
        }

        .one-power-item {
            background-color: #000
        }
    }

    @media screen {
        .one-battery-title .one-h3 {
            font-size: var(--semantic-font-size-head-1, 1.8em) !important;
            font-style: normal;
            font-weight: 800 !important;
            line-height: var(--semantic-font-line-height-head-1, 2.15em) !important
        }

        .one-battery-title {
            gap: .8em !important
        }

        .one-battery-card.index1 .one-battery-img {
            position: relative;
            overflow: hidden;
            border-radius: .75em;
            margin-top: 1.6em
        }

        .one-battery-card.index1 .one-battery-img img {
            position: relative;
            z-index: 1
        }

        .one-battery-card-liner1 {
            position: absolute;
            z-index: 0;
            top: -300%;
            left: -80%;
            width: 61.67075em;
            height: 61.67075em;
            transform: rotate(135deg);
            flex-shrink: 0;
            border-radius: 61.67075em;
            opacity: .7;
            background: conic-gradient(from 180deg at 50% 50%, #FFF 5.435694046318531deg, #FF6D12 256.1538362503052deg, #32FFBB 317.6042318344116deg);
            filter: blur(150.52597045898438px);
            transform: rotate(73.476deg);
            background: conic-gradient(from 180deg at 50% 50%, #FFF 5.435694046318531deg, #FF6D12 256.1538362503052deg, #32FFBB 317.6042318344116deg)
        }

        .one-battery-card.index2 {
            position: relative;
            margin-top: 3em
        }

        .one-battery-number {
            z-index: 13;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: flex-start;
            margin-top: 6.8em;
            margin-left: -0.7em;
            gap: .3em
        }

        .one-battery-number.show svg {
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-battery-number svg {
            position: absolute;
            top: .7em;
            right: -1.5em;
            opacity: 1;
            transition: opacity 1s ease-in-out
        }

        .one-battery-number.show>p {
            position: relative;
            color: #000;
            z-index: 2
        }

        .one-battery-number>p:nth-child(1) {
            position: relative;
            display: block;
            z-index: 2;
            font-size: 5.2em;
            font-weight: 600
        }

        .one-battery-number>p:nth-child(2) {
            position: relative;
            display: block;
            z-index: 2;
            font-size: 1.2em;
            font-weight: 600
        }

        .one-battery-number.show>p:nth-child(1):before,
        .one-battery-number.show>p:nth-child(2):before {
            opacity: 0
        }

        .one-battery-number>p:nth-child(1):before {
            content: "18%";
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            opacity: 1;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            text-shadow: .4px .4px 1px 0 rgba(228, 231, 255, 0.25) inset, -0.4px -0.5px 1px 0 rgba(240, 236, 255, 0.70) inset;
            filter: drop-shadow(0 1px 1px rgba(182, 192, 235, 0.24));
            transition: opacity 1s ease-in-out
        }

        .one-battery-number>p:nth-child(2):before {
            content: "Days";
            position: absolute;
            top: 0;
            left: 0;
            opacity: 1;
            z-index: 1;
            color: transparent;
            background-clip: text !important;
            -webkit-background-clip: text;
            background: linear-gradient(0deg, #E6F1FF 30.14%, rgba(135, 148, 221, 0.90) 80.51%);
            text-shadow: .4px .4px 1px 0 rgba(228, 231, 255, 0.25) inset, -0.4px -0.5px 1px 0 rgba(240, 236, 255, 0.70) inset;
            filter: drop-shadow(0 1px 1px rgba(182, 192, 235, 0.24))
        }

        .one-battery-card.index2 .one-battery-img {
            position: relative;
            width: 16.75em;
            height: 16em;
            margin-top: 2em;
            border-radius: .6em;
            overflow: hidden
        }

        .one-battery-card.index2 .one-battery-img div {
            position: absolute;
            top: 0;
            left: 0
        }

        .one-battery-card.index2 .one-battery-img .img2 {
            opacity: 0;
            transition: opacity 1s ease-in-out
        }

        .one-battery-card.index2 .one-battery-img .img2.show {
            opacity: 1
        }

        .one-battery2-remark {
            color: rgba(255, 255, 255, 0.96) !important;
            width: 10.3em;
            bottom: 1em
        }

        .one-battery2-remark p {
            font-size: .75em !important
        }
    }

    @media screen {
        .one-vshield-title {
            padding: 7.52em 0
        }

        .one-vshield-img {
            width: 10.55em;
            height: 10em
        }

        .one-vshield-desc-txt {
            margin-top: 1.6em
        }

        .one-vshield-icon {
            margin-top: 3em
        }
    }

    @media screen {
        .one-privacy-title .one-sh {
            color: rgba(255, 255, 255, 0.68)
        }

        .one-privacy-video {
            margin-top: 1.6em;
            height: 21.8em;
            width: 100%
        }
    }

    @media screen {
        .one-careeyes-section {
            padding: 8.6em 0
        }

        .one-careeyes-title {
            width: 90%;
            margin: 0 auto
        }
    }

    @media screen {
        .one-brightness-section .one-hg3 {
            font-size: var(--semantic-font-size-head-1, 1.8em) !important;
            font-style: normal;
            font-weight: 800 !important;
            line-height: var(--semantic-font-line-height-head-1, 2.15em) !important
        }

        .one-brightness-img {
            height: 16em;
            width: 16.75em;
            margin-top: 1.6em
        }

        .one-brightness-item.index3 {
            margin-top: 3em
        }
    }

    @media screen {
        .one-remark-section.bk {
            background: #0C0C0D
        }

        .one-remark-section ul,
        .one-remark-section ol {
            padding-inline-start: 0
        }

        .one-remark-section ol li,
        .one-remark-section p {
            list-style-type: none;
            color: rgba(255, 255, 255, 0.31) !important
        }
    }
}

@media screen and (min-width: 1345px) and (min-width: 100vh) {
    .one-grating-btnlist {
        --btnWidth: 116px;
    }

    .one-durable-numberBox {
        margin-top: -6em !important;
    }
}

@media screen and (min-width: 980px) and (max-width: 1344px) {
    .one-fontpage-pList {
        right: 3.7em !important;
    }

    .one-durable-numberBox {
        gap: 0.75em !important;
        margin-left: 6em !important;
        margin-top: -5em !important;
    }
}

@media screen and (max-width: 980px) {
    .one-kv-title {
        width: 80%;
    }

    .one-fontpage-param .one-param .one-b4 {
        line-height: 1.54595em !important;
        white-space: nowrap;
    }

    .one-grating-btnlist {
        --btnWidth: 4.45em;
    }

    .one-deformation-title {
        height: 15em;
    }

    .one-battery-number {
        margin-top: 5.6em !important;
    }

    .one-aiimage-section {
        height: 51.9em;
    }

    .one-durable-numberBox {
        margin-top: 5.8em !important;
        gap: 0 !important;
    }

    .one-battery-number>p:nth-child(1) {
        font-weight: 500 !important;
    }
}

@media screen and (min-width: 1024px) {
    .one-vivopage-title p {
        line-height: 135% !important;
    }

    .one-productive-title p {
        line-height: 135% !important;
    }
    .one-adatomisland-title > p {
        line-height: 135% !important;
    }

    .one-smoothpage-title2 h2 {
        line-height: 135% !important;
    }
    .one-photography-title p {
        line-height: 135% !important;
    }
    .one-careeyes-title p {
        line-height: 135% !important;
    }
    .one-smoothpage-title1 p {
        line-height: 135% !important;
    }

    .one-intelligence-title p {
        line-height: 135% !important;
    }

}

@media screen and (min-width: 1024px) and (max-width: 1344px){ 

    .one-grab-card:nth-child(3) {
        padding: 2.5em 3em 1.5em 3em !important;
    }

    .one-durable-numberBox {
        margin-left: 5.2em !important;
        margin-top: -6em !important;
    }

    .one-grab-content {
        width: 50em;
    }
    .one-grab-card {
        width: 12em;
    }
}

@media screen and (max-width: 980px) {
    .one-adatomisland-sub p,
    .one-adatomisland-title p,
    .one-intelligence-title p {
        line-height: 135% !important;
    }
}