.product-nav[data-theme="dark"],
.product-nav[data-theme="dark"] .product-nav-actions,
.product-nav[data-theme="dark"] .product-nav-tab {
    background-color: #000;
}
.product-nav[data-theme="dark"] .product-nav-link,
.product-nav[data-theme="dark"] .product-nav-tab .active a,
.product-nav[data-theme="dark"] .product-nav-tab li a:hover {
    color: #fff;
}
.product-nav[data-theme="dark"] .product-nav-tab li a {
    color: rgba(255,255,255,.75);
}

.product-nav-tab .active a:after {
    border-bottom-color: #4bb0cd;
}
.btn-oneplus.btn-red {
    background-color: #4bb0cd;
}
.btn-oneplus.btn-red:before {
    background-color: #4bb0cd;
}
.btn-oneplus.btn-red.focus:before,
.btn-oneplus.btn-red:focus:before,
.btn-oneplus.btn-red:hover:before {
    background-color: #0094ab;
}

.main-content {
    overflow-x: initial;
}

.zn--modal {
    --bg-blur: none;
    --bg-dark: #000;
    --bg-light: #fff;
    align-items: center;
    display: flex;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    justify-content: center;
    left: 0;
    position: fixed;
    top: 0;
    -webkit-transform: translateY(100vh);
    transform: translateY(100vh);
    -webkit-transform: translateY(calc(var(--vh, 1vh)*100));
    transform: translateY(calc(var(--vh, 1vh)*100));
    transition: visibility .4s, -webkit-transform .4s ease-out;
    transition: transform .4s ease-out, visibility .4s;
    transition: transform .4s ease-out, visibility .4s, -webkit-transform .4s ease-out;
    visibility: hidden;
    width: 100%;
    z-index: 1050
}

.zn--modal.zn--modal-show {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: height .2s ease, -webkit-transform .4s ease-out;
    transition: transform .4s ease-out, height .2s ease;
    transition: transform .4s ease-out, height .2s ease, -webkit-transform .4s ease-out;
    visibility: visible
}

.zn--modal .zn--modal-bg {
    -webkit-backdrop-filter: var(--bg-blur);
    backdrop-filter: var(--bg-blur);
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.zn--modal .zn--modal-content {
    position: relative;
    z-index: 2
}

:not(.zn--modal)>.zn--modal-content {
    display: none
}

.g--popup .g--popup-container {
    align-items: center;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%
}

.g--popup .g--video-wrapper {
    height: auto;
    margin-top: -12px;
    position: relative;
    width: 75%
}

.video-portrait.g--popup .g--video-wrapper {
    height: 100%;
    margin-top: 0;
    padding: 32px 0;
    width: 100%
}

.g--popup .g--video-wrapper video {
    height: 100%;
    outline: none;
    width: 100%
}

.video-portrait.g--popup .g--video-wrapper video {
    object-fit: contain
}

.g--popup .g--video-wrapper video[src=""] {
    display: none
}

.g--popup .g--popup-close {
    cursor: pointer;
    height: 12px;
    margin-left: auto;
    position: absolute;
    right: 0;
    top: -32px;
    width: 12px;
    z-index: 2
}

.video-portrait.g--popup .g--popup-close {
    top: 8px
}

.g--popup .g--popup-close .inner {
    height: 100%;
    width: 100%
}

.g--popup-container {
    background: #000
}

.g--popup-container .g--popup-close polygon {
    fill: #fff
}

.g--popup-container[data-theme=white] {
    background: #fff
}

.g--popup-container[data-theme=white] .g--popup-close polygon {
    fill: #000
}

@media (min-width:2300px) {
    .g--popup .g--video-wrapper {
        margin-top: -24px
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    .g--popup .g--popup-container {
        padding: 0
    }

    .g--popup .g--video-wrapper {
        width: 100vw;
        width: calc(var(--vw, 1vw)*100)
    }

    .g--popup .g--popup-close {
        height: 24px;
        width: 24px
    }

    .g--popup .g--popup-close .inner {
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }

    .g--popup .g--popup-close {
        right: 4.444vw
    }
}

.autoplay-ls-video img, .autoplay-ls-video video {
    height: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    width: 100% !important
}

.autoplay-ls-video img {
    object-fit: cover
}

.autoplay-pt-video {
    position: relative
}

.autoplay-pt-video img, .autoplay-pt-video video {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 1
}

.autoplay-pt-video .normal-play-button {
    align-items: center;
    border-radius: 50%;
    bottom: 10px;
    display: flex;
    height: 36px;
    justify-content: center;
    position: absolute;
    right: 10px;
    visibility: hidden;
    width: 36px;
    z-index: 2
}

.autoplay-pt-video .normal-play-button:before {
    background-color: #fff;
    border-radius: 50px;
    content: "";
    height: 36px;
    position: absolute;
    width: 36px
}

.autoplay-pt-video .normal-play-button:after {
    background-color: #000;
    background-size: 20px 20px;
    content: "";
    display: inline-block;
    height: 20px;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwIDEgMS40NC0xLjYyIDEuODYgMS44NiAwIDAgMSAxLjExLjMxbDguNTMgNWMuNzYuNDQgMS4xNy44IDEuMTcgMS41MXMtLjQxIDEuMDctMS4xNyAxLjUxbC04LjUzIDVhMS44NiAxLjg2IDAgMCAxLTEuMTEuMzFBMS40MiAxLjQyIDAgMCAxIDUgMTUuMjV6Ii8+PC9zdmc+);
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCI+PHBhdGggZD0iTTUgMTUuMjVWNC43N2ExLjQ0IDEuNDQgMCAwIDEgMS40NC0xLjYyIDEuODYgMS44NiAwIDAgMSAxLjExLjMxbDguNTMgNWMuNzYuNDQgMS4xNy44IDEuMTcgMS41MXMtLjQxIDEuMDctMS4xNyAxLjUxbC04LjUzIDVhMS44NiAxLjg2IDAgMCAxLTEuMTEuMzFBMS40MiAxLjQyIDAgMCAxIDUgMTUuMjV6Ii8+PC9zdmc+);
    position: absolute;
    width: 20px
}

.autoplay-pt-video .normal-play-button.playing:after {
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=);
    mask: url(data:image/svg+xml;base64,PHN2ZyBpZD0iRXhwb3J0YWJsZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxkZWZzPjxzdHlsZT4uY2xzLTF7ZmlsbDojMWQxZDFmfTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJwYXVzZSI+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzLjc1IiB5PSIzIiB3aWR0aD0iNC41IiBoZWlnaHQ9IjE0IiByeD0iMS41Ii8+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIxMS43NSIgeT0iMyIgd2lkdGg9IjQuNSIgaGVpZ2h0PSIxNCIgcng9IjEuNSIvPjwvZz48L3N2Zz4=)
}

#navbar {
    color: #000;
    cursor: default;
    height: 61px;
    left: 0;
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
    transition: background .3s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 90
}

#navbar li, #navbar ul {
    align-items: center;
    display: flex;
    justify-content: center
}

#navbar .inner, #navbar .wrapper {
    color: #000
}

#navbar .inner {
    align-items: center;
    cursor: pointer;
    display: flex;
    transition: color .3s ease;
    white-space: nowrap
}

#navbar .nav-container {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-left: none;
    border-right: none;
    display: flex;
    height: 100%;
    justify-content: space-between;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    -webkit-transform: translateY(-101%);
    transform: translateY(-101%);
    width: 100%
}

#navbar .nav-container .nav-notes {
    color: #cc5c30
}

.sticked#navbar .nav-container {
    background: hsla(0, 0%, 100%, .9)
}

[data-theme=dark].sticked#navbar .nav-container {
    background: rgba(0, 0, 0, .9)
}

[data-theme=dark]#navbar .nav-container {
    background: #000;
    border-color: #ffffff1a
}

[data-theme=dark]#navbar .nav-container, [data-theme=dark]#navbar .nav-container .inner {
    color: #fff
}

.show#navbar .nav-container {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .6s ease-out;
    transition: transform .6s ease-out;
    transition: transform .6s ease-out, -webkit-transform .6s ease-out
}

#navbar .mask {
    background: hsla(0, 0%, 99%, .9);
    transition: background .3s ease
}

[data-theme=dark]#navbar .mask {
    background: hsla(0, 0%, 8%, .9)
}

#navbar .buttons, #navbar .links, #navbar .products {
    align-items: center;
    min-width: 0
}

#navbar .products {
    flex: 1 1 0%;
    justify-content: flex-start
}

#navbar .products .active .inner, #navbar .products .divider .inner {
    cursor: default
}

#navbar .arrow {
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s
}

[data-theme=dark]#navbar .arrow g path {
    fill: #fff
}

#navbar .links {
    flex: 0 0 auto;
    justify-content: flex-end;
    position: relative
}

[data-color=red]#navbar .links .link {
    opacity: 1;
    transition: opacity .3s ease
}

[data-color=red]#navbar .links .link.active {
    opacity: 1
}

#navbar .links .indicator {
    content: "";
    height: 2px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 44px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left;
    transform-origin: left;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
    width: 100px
}

#navbar .links .indicator[data-visibility=hidden] {
    visibility: hidden
}

#navbar .links .indicator:before {
    background: #4bb0cd;
    content: "";
    height: 100%;
    position: absolute;
    width: 100%
}

#navbar .links .indicator.show:before {
    -webkit-transform: none;
    transform: none
}

#navbar .links .wrapper {
    position: relative
}

#navbar .links .wrapper:hover:after {
    opacity: 1
}

#navbar .buttons {
    flex: 0 0 auto;
    justify-content: flex-end
}

#navbar .buttons .button {
    min-width: 70px;
    overflow: hidden;
    position: relative
}

#navbar .buttons .button .inner {
    background: #4bb0cd;
    border-radius: 2px;
    color: #fff;
    height: 36px;
    line-height: 1;
    padding: 0 10px
}

[data-color=red]#navbar .buttons .button .inner {
    background: #4bb0cd
}

#navbar .links:not([data-active]) .default, #navbar .links[data-active=""] .default {
    pointer-events: none
}

#navbar .links:not([data-active]) .default:after, #navbar .links[data-active=""] .default:after {
    opacity: 1
}

#navbar .links[data-active="1"]>.wrapper:first-child {
    pointer-events: none
}

#navbar .links[data-active="1"]>.wrapper:first-child:after {
    opacity: 1
}

#navbar .links[data-active="2"]>.wrapper:nth-child(2) {
    pointer-events: none
}

#navbar .links[data-active="2"]>.wrapper:nth-child(2):after {
    opacity: 1
}

#navbar .links[data-active="3"]>.wrapper:nth-child(3) {
    pointer-events: none
}

#navbar .links[data-active="3"]>.wrapper:nth-child(3):after {
    opacity: 1
}

#navbar .links[data-active="4"]>.wrapper:nth-child(4) {
    pointer-events: none
}

#navbar .links[data-active="4"]>.wrapper:nth-child(4):after {
    opacity: 1
}

#navbar .links[data-active="5"]>.wrapper:nth-child(5) {
    pointer-events: none
}

#navbar .links[data-active="5"]>.wrapper:nth-child(5):after {
    opacity: 1
}

#navbar .links[data-active="6"]>.wrapper:nth-child(6) {
    pointer-events: none
}

#navbar .links[data-active="6"]>.wrapper:nth-child(6):after {
    opacity: 1
}

#navbar .links[data-active="7"]>.wrapper:nth-child(7) {
    pointer-events: none
}

#navbar .links[data-active="7"]>.wrapper:nth-child(7):after {
    opacity: 1
}

#navbar .links[data-active="8"]>.wrapper:nth-child(8) {
    pointer-events: none
}

#navbar .links[data-active="8"]>.wrapper:nth-child(8):after {
    opacity: 1
}

#navbar .links[data-active="9"]>.wrapper:nth-child(9) {
    pointer-events: none
}

#navbar .links[data-active="9"]>.wrapper:nth-child(9):after {
    opacity: 1
}

#navbar .links[data-active="10"]>.wrapper:nth-child(10) {
    pointer-events: none
}

#navbar .links[data-active="10"]>.wrapper:nth-child(10):after {
    opacity: 1
}

@media (min-width:1024px), (orientation:landscape) {
    #navbar {
        overflow: hidden
    }

    #navbar .links .indicator:before {
        -webkit-transform: translateX(-100%);
        transform: translate(-100%);
        transition: -webkit-transform .4s;
        transition: transform .4s;
        transition: transform .4s, -webkit-transform .4s
    }

    #navbar li+li, #navbar li+ul, #navbar ul+li, #navbar ul+ul {
        margin-left: 1.0417vw;
        margin-left: calc(var(--vw, 1vw)*1.0417)
    }

    #navbar .nav-container .nav-notes {
        margin-right: 1.0417vw;
        margin-right: calc(var(--vw, 1vw)*1.0417)
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #navbar {
        height: 51px
    }

    #navbar .nav-container .nav-notes {
        align-items: center;
        background-color: #ffffffe6;
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        display: flex;
        height: 40px;
        left: 0;
        overflow-x: scroll;
        position: absolute;
        top: 49px;
        white-space: nowrap;
        width: 100vw;
        width: calc(var(--vw, 1vw)*100)
    }

    #navbar .nav-container, #navbar .nav-container .nav-notes {
        padding: 0 2.7778vw;
        padding: 0 calc(var(--vw, 1vw)*2.7778)
    }

    #navbar .products {
        z-index: 3
    }

    #navbar .links {
        background: hsla(0, 0%, 100%, .9);
        border-bottom: 1px solid rgba(0, 0, 0, .1);
        height: 100%;
        justify-content: flex-start;
        left: 0;
        margin-left: 0;
        opacity: 0;
        padding: 0 2.7778vw;
        padding: 0 calc(var(--vw, 1vw)*2.7778);
        pointer-events: none;
        position: absolute;
        scrollbar-width: none;
        top: calc(100% + 1px);
        width: 100%
    }

    [data-theme=dark]#navbar .links {
        background: rgba(0, 0, 0, .9);
        border-color: #ffffff1a
    }

    #navbar .links.show {
        opacity: 1;
        pointer-events: auto;
        transition: opacity .3s
    }

    #navbar .links.show+ul .arrow {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg)
    }

    #navbar .links::-webkit-scrollbar {
        display: none
    }

    #navbar .links .indicator {
        top: 39px
    }

    #navbar .links:after {
        content: "";
        flex: 0 0 auto;
        height: 100%;
        width: 2.7778vw;
        width: calc(var(--vw, 1vw)*2.7778)
    }

    #navbar .wrapper+.wrapper {
        margin-left: 4.444vw
    }

    #navbar .arrow {
        height: 5.556vw;
        margin-right: 5.556vw;
        width: 5.556vw
    }
}

#section-kv {
    background-color: #fff;
    overflow: hidden;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-kv .full-width-container {
    display: flex;
    flex-direction: column;
    height: 100%
}

#section-kv .full-width-container .kv-text {
    z-index: 3
}

#section-kv .full-width-container .kv-img {
    object-fit: cover;
    object-position: center
}

@media (min-width:1024px), (orientation:landscape) {
    #section-kv {
        height: 53.125vw;
        height: calc(var(--vw, 1vw)*53.125)
    }

    #section-kv .full-width-container .kv-text {
        margin-left: 6.25vw;
        margin-left: calc(var(--vw, 1vw)*6.25)
    }

    #section-kv .full-width-container .kv-text .kv-logo {
        height: 2.0313vw;
        height: calc(var(--vw, 1vw)*2.0313);
        width: 20.8333vw;
        width: calc(var(--vw, 1vw)*20.8333)
    }

    #section-kv .full-width-container .kv-text .kv-banner {
        margin-bottom: 2.0833vw;
        margin-bottom: calc(var(--vw, 1vw)*2.0833);
        margin-top: 1.4583vw;
        margin-top: calc(var(--vw, 1vw)*1.4583);
        width: 28.9063vw;
        width: calc(var(--vw, 1vw)*28.9063)
    }

    #section-kv .full-width-container .kv-text .kv-title .price-label {
        height: 6.5104vw;
        height: calc(var(--vw, 1vw)*6.5104);
        margin-left: -.7812vw;
        margin-left: calc(var(--vw, 1vw)*-.7812);
        margin-top: 1.0417vw;
        margin-top: calc(var(--vw, 1vw)*1.0417);
        width: 11.1979vw;
        width: calc(var(--vw, 1vw)*11.1979)
    }

    #section-kv .full-width-container .kv-img {
        height: 53.125vw;
        height: calc(var(--vw, 1vw)*53.125);
        left: 40.1042vw;
        left: calc(var(--vw, 1vw)*40.1042);
        width: 59.8958vw;
        width: calc(var(--vw, 1vw)*59.8958)
    }

    #section-kv .full-width-container {
        justify-content: center
    }

    #section-kv .full-width-container .kv-text .kv-title {
        flex-direction: column
    }

    #section-kv .full-width-container .kv-img {
        top: 0
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-kv {
        height: 100vh;
        height: calc(var(--vh, 1vh)*100)
    }

    #section-kv .full-width-container .kv-text {
        display: flex;
        flex-direction: column;
        height: 100%
    }

    #section-kv .full-width-container .kv-img {
        flex: 1;
        object-position: center top
    }

    #section-kv .full-width-container .kv-text {
        margin-left: 5.556vw;
        margin-top: 7.778vw
    }

    #section-kv .full-width-container .kv-text .kv-logo {
        height: 5vw;
        width: 51.389vw
    }

    #section-kv .full-width-container .kv-text .kv-banner {
        margin-bottom: 5vw;
        margin-top: 6.667vw;
        width: 88.889vw
    }

    #section-kv .full-width-container .kv-text .kv-title .price-label {
        height: 17.5vw;
        margin-left: 5.556vw;
        width: 30vw
    }

    #section-kv .full-width-container .kv-img {
        margin-left: -5.556vw;
        margin-top: 5.556vw;
        width: 100vw
    }
}

#section-ksp {
    color: #fff;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-ksp, #section-ksp .sticky-container {
    height: 140vh;
    height: calc(var(--vh, 1vh)*140)
}

#section-ksp .sticky {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow: hidden;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-ksp .sticky .test-slick-row .slick-list .slick-track {
    display: flex
}

#section-ksp .bg-img, #section-ksp .bg-img .autoplay-pt-video {
    height: 100%;
    width: 100%
}

#section-ksp .bg-img .autoplay-pt-video .normal-play-button {
    display: none
}

#section-ksp .bg-img .autoplay-pt-video video {
    object-fit: cover;
    object-position: center
}

#section-ksp .mask {
    background: #000;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 2
}

#section-ksp .mask.active {
    opacity: .5
}

#section-ksp .mask.inactive {
    opacity: .8
}

#section-ksp .text-block-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    z-index: 2
}

#section-ksp .text-block-container .text-block .text-line {
    display: flex;
    position: relative;
    white-space: nowrap
}

#section-ksp .text-block-container .text-block .text-line:last-child {
    margin-bottom: 0
}

#section-ksp .text-block-container .text-block .text-line .text-animation-row-wrapper {
    left: 0;
    top: 0
}

#section-ksp .text-block-container .text-block .text-line .text-animation-row-wrapper .text-animation-row {
    color: #4bb0cd;
    display: flex;
    opacity: 0
}

#section-ksp .text-block-container .text-block .text-line .text-animation-row-wrapper .text-animation-row .slick-list .slick-track {
    display: flex
}

#section-ksp .text-block-container .text-block .text-line .text-after-line {
    left: 0;
    opacity: 0;
    top: 0;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-ksp .text-block-container .text-block .text-line .text-after-line .text-after {
    -webkit-transform-origin: left center;
    transform-origin: left center
}

#section-ksp .text-block-container .text-block .text-line .text-before-line {
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-ksp .text-block-container .text-block .text-line .text-before-line .text-before-text {
    display: inline-block;
    -webkit-transform-origin: left center;
    transform-origin: left center
}

#section-ksp .text-block-container .play-control {
    align-items: center
}

#section-ksp .text-block-container .play-control .play-control-container {
    align-items: center;
    cursor: pointer
}

#section-ksp .text-block-container .play-control .play-control-container .play-text-container {
    display: inline-block;
    position: relative
}

#section-ksp .text-block-container .play-control .play-control-container .play-text-container .play-text-underline {
    background-color: #fff;
    height: 2px;
    margin-top: -2px;
    width: 100%
}

@media (min-width:1024px), (orientation:landscape) {
    #section-ksp .text-block-container .text-block {
        margin-bottom: 2.0833vw;
        margin-bottom: calc(var(--vw, 1vw)*2.0833)
    }

    #section-ksp .text-block-container .text-block .text-line {
        margin-bottom: .4167vw;
        margin-bottom: calc(var(--vw, 1vw)*.4167)
    }

    #section-ksp .text-block-container .text-block .text-line .text-animation-row-wrapper .text-animation-text {
        margin-right: 3.5417vw;
        margin-right: calc(var(--vw, 1vw)*3.5417)
    }

    #section-ksp .text-block-container .play-control {
        margin-top: 2.0833vw;
        margin-top: calc(var(--vw, 1vw)*2.0833)
    }

    #section-ksp .text-block-container .play-control .play-control-container .play-img {
        height: 3.125vw;
        height: calc(var(--vw, 1vw)*3.125);
        margin-right: 1.4583vw;
        margin-right: calc(var(--vw, 1vw)*1.4583);
        width: 3.125vw;
        width: calc(var(--vw, 1vw)*3.125)
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-ksp .text-block-container .text-block {
        margin-bottom: 8.889vw
    }

    #section-ksp .text-block-container .text-block .text-line {
        margin-bottom: 3.333vw
    }

    #section-ksp .text-block-container .text-block .text-line:last-child .text-after-line {
        top: 7.778vw
    }

    #section-ksp .text-block-container .play-control {
        margin-top: 8.889vw
    }

    #section-ksp .text-block-container .play-control .play-control-container .play-img {
        height: 9.444vw;
        margin-right: 4.444vw;
        width: 9.444vw
    }

    #section-ksp .text-block-container .text-block .text-line .text-after-line {
        color: #4bb0cd
    }

    #section-ksp .text-block-container .play-control .play-control-container .play-text-container .play-text-underline {
        height: 1px;
        margin-top: 5px
    }
}

#section-display {
    background: #f3f3f3
}

#section-display .section-title-container {
    background-color: initial;
    position: relative;
    z-index: 5
}

#section-display .colors-container {
    height: 225vh;
    height: calc(var(--vh, 1vh)*225)
}

#section-display .colors-container .color-section {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

#section-display .colors-container .color-banner {
    position: absolute
}

#section-display .colors-container .gallery-trigger {
    border-bottom: 1px solid #000;
    cursor: pointer;
    display: inline-block;
    top: 50%
}

#section-display .colors-container .gallery-trigger .trigger-text {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-display .colors-container .img-top-container .img-top .top-video {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

#section-display .colors-container .img-left {
    left: 0
}

#section-display .colors-container .img-right {
    right: 0
}

#section-display .colors-container .section-gray .img-left {
    top: 100vh;
    top: calc(var(--vh, 1vh)*100)
}

#section-display .colors-container .section-gray .visible-container {
    background: linear-gradient(180deg, #f3f3f3, #fff);
    overflow: hidden
}

#section-display .colors-container .section-gray .visible-container, #section-display .colors-container .section-gray .visible-container .content-container {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    top: 0;
    width: 100%
}

#section-display .colors-container .section-blue {
    margin-top: -100vh;
    margin-top: calc(var(--vh, 1vh)*-100)
}

#section-display .colors-container .section-blue .img-left {
    top: 280vh;
    top: calc(var(--vh, 1vh)*280)
}

#section-display .colors-container .section-blue .visible-container {
    background: linear-gradient(180deg, #daf2f8, #fff);
    bottom: 0;
    height: 0;
    left: 0;
    overflow: hidden;
    width: 100%
}

#section-display .colors-container .section-blue .visible-container .content-container {
    bottom: 0;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    width: 100%
}

.gallery-popup {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

.gallery-popup .title-blue, .gallery-popup .title-gray {
    opacity: 0;
    transition: opacity .2s linear
}

.gallery-popup.gray-active .title-gray {
    opacity: 1
}

.gallery-popup.blue-active .title-gray, .gallery-popup.gray-active .title-blue {
    opacity: 0
}

.gallery-popup.blue-active .title-blue {
    opacity: 1
}

.gallery-popup .close {
    z-index: 9
}

.gallery-popup .gallery-content {
    color: #fff;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

.gallery-popup .gallery-content .color-carousel .slick-track {
    display: flex
}

@media (min-width:1024px), (orientation:landscape) {
    #section-display .colors-container {
        margin-top: -9.5312vw;
        margin-top: calc(var(--vw, 1vw)*-9.5312)
    }

    #section-display .colors-container .color-banner {
        width: 41.6667vw;
        width: calc(var(--vw, 1vw)*41.6667)
    }

    #section-display .colors-container .color-banner .color-title {
        margin-bottom: .8333vw;
        margin-bottom: calc(var(--vw, 1vw)*.8333)
    }

    #section-display .colors-container .img-top-container {
        -webkit-transform: translateX(-50%) translateY(-41.6667vw);
        transform: translate(-50%) translateY(-41.6667vw);
        -webkit-transform: translateX(-50%) translateY(calc(var(--vw, 1vw)*-41.6667));
        transform: translate(-50%) translateY(calc(var(--vw, 1vw)*-41.6667))
    }

    #section-display .colors-container .img-top-container, #section-display .colors-container .img-top-container .img-top {
        height: 41.6667vw;
        height: calc(var(--vw, 1vw)*41.6667);
        width: 41.6667vw;
        width: calc(var(--vw, 1vw)*41.6667)
    }

    #section-display .colors-container .img-left, #section-display .colors-container .img-right {
        height: 37.4479vw;
        height: calc(var(--vw, 1vw)*37.4479);
        width: 26.0417vw;
        width: calc(var(--vw, 1vw)*26.0417)
    }

    #section-display .colors-container .section-gray .img-right {
        top: calc(100vh + 7.8125vw);
        top: calc(var(--vh, 1vh)*100 + 7.8125vw);
        top: calc(100vh + var(--vw, 1vw)*7.8125);
        top: calc(var(--vh, 1vh)*100 + var(--vw, 1vw)*7.8125)
    }

    #section-display .colors-container .section-blue .img-right {
        top: calc(280vh + 7.8125vw);
        top: calc(var(--vh, 1vh)*280 + 7.8125vw);
        top: calc(280vh + var(--vw, 1vw)*7.8125);
        top: calc(var(--vh, 1vh)*280 + var(--vw, 1vw)*7.8125)
    }

    #section-display .colors-container .color-banner {
        left: 50%;
        text-align: center;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%)
    }

    #section-display .colors-container .img-top-container {
        left: 50%
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-display .colors-container {
        margin-top: -29.167vw
    }

    #section-display .colors-container .color-banner {
        left: 5.556vw;
        -webkit-transform: translateY(-77.222vw);
        transform: translateY(-77.222vw);
        width: 88.889vw
    }

    #section-display .colors-container .color-banner .color-title {
        margin-bottom: 2.5vw
    }

    #section-display .colors-container .color-banner .color-desc {
        width: 88.889vw
    }

    #section-display .colors-container .gallery-trigger {
        margin-left: 5.556vw;
        padding-bottom: .556vw;
        -webkit-transform: translateY(-41.111vw);
        transform: translateY(-41.111vw)
    }

    #section-display .colors-container .gallery-trigger .trigger-text {
        font-size: 3.889vw;
        line-height: 4.667vw
    }

    #section-display .colors-container .img-top-container {
        height: 88.889vw;
        left: 5.556vw;
        -webkit-transform: translateY(-25vw);
        transform: translateY(-25vw);
        width: 88.889vw
    }

    #section-display .colors-container .img-top-container .img-top {
        height: 88.889vw;
        width: 88.889vw
    }

    .gallery-popup .close {
        height: 3.056vw;
        right: 4.167vw;
        top: 4.167vw;
        width: 3.056vw
    }

    .gallery-popup .gallery-content .color-title {
        height: 9.444vw;
        margin-bottom: 8.889vw;
        margin-left: 5.556vw
    }

    .gallery-popup .gallery-content .color-progress {
        margin-left: 5.556vw;
        margin-top: 6.667vw
    }

    .gallery-popup .gallery-content .color-carousel {
        height: 116.667vw;
        width: 100vw
    }

    .gallery-popup .gallery-content .color-carousel .slick-slide {
        height: 116.667vw;
        padding-left: 5.556vw;
        width: 88.889vw
    }

    .gallery-popup .gallery-content .gallery-img {
        height: 116.667vw;
        width: 83.333vw
    }

    #section-display .colors-container .color-banner {
        text-align: start;
        top: 50%
    }

    #section-display .colors-container .img-top-container {
        top: 50%
    }
}

#section-handy {
    background-color: #000;
    color: #fff
}

#section-handy .sticky-container .cable-section {
    overflow: hidden;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-handy .sticky-container .cable-section .full-width-container {
    padding-bottom: 20px
}

#section-handy .sticky-container .cable-section .text-block {
    z-index: 2
}

#section-handy .sticky-container .cable-section .cable-content-container {
    overflow: hidden;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-handy .sticky-container .cable-section .cable-content-container .cable-content-text {
    display: flex;
    min-width: 200vw;
    min-width: calc(var(--vw, 1vw)*200);
    width: 200vw;
    width: calc(var(--vw, 1vw)*200);
    z-index: 3
}

#section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    min-width: 100vw;
    min-width: calc(var(--vw, 1vw)*100);
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text-right-container {
    -webkit-transform: translateX(0);
    transform: translate(0)
}

#section-handy .sticky-container .cable-section .cable-content-container .path {
    z-index: 3
}

#section-handy .sticky-container .cable-section .cable-content-container .path #circle-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000
}

#section-handy .bg-img-container {
    display: flex;
    flex-direction: column;
    overflow: hidden
}

#section-handy .bg-img-container .video-container .autoplay-ls-video, #section-handy .bg-img-container .video-container .autoplay-pt-video {
    height: 100%;
    width: 100%
}

#section-handy .bg-img-container .video-container .autoplay-ls-video video, #section-handy .bg-img-container .video-container .autoplay-pt-video video {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

#section-handy .bg-img-container .video-text {
    align-items: flex-start;
    justify-content: space-between
}

@media (min-width:1024px), (orientation:landscape) {
    #section-handy .sticky-container .cable-section .text-block {
        margin-left: 44.5313vw;
        margin-left: calc(var(--vw, 1vw)*44.5313);
        width: 30.2083vw;
        width: calc(var(--vw, 1vw)*30.2083)
    }

    #section-handy .sticky-container .cable-section .text-block .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-handy .sticky-container .cable-section .cable-content-container {
        height: 18.2292vw;
        height: calc(var(--vw, 1vw)*18.2292);
        margin-top: 5.8333vw;
        margin-top: calc(var(--vw, 1vw)*5.8333)
    }

    #section-handy .sticky-container .cable-section .cable-content-container #cable-canvas {
        height: 56.25vw;
        height: calc(var(--vw, 1vw)*56.25);
        -webkit-transform: translateY(-28.9062vw);
        transform: translateY(-28.9062vw);
        -webkit-transform: translateY(calc(var(--vw, 1vw)*-28.9062));
        transform: translateY(calc(var(--vw, 1vw)*-28.9062));
        width: 100vw;
        width: calc(var(--vw, 1vw)*100)
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text {
        top: 5.9896vw;
        top: calc(var(--vw, 1vw)*5.9896)
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text {
        font-size: 1.0417vw;
        font-size: calc(var(--vw, 1vw)*1.0417);
        line-height: 1.4583vw;
        line-height: calc(var(--vw, 1vw)*1.4583)
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text-left-container {
        -webkit-transform: translateX(44.5833vw);
        transform: translate(44.5833vw);
        -webkit-transform: translateX(calc(var(--vw, 1vw)*44.5833));
        transform: translate(calc(var(--vw, 1vw)*44.5833))
    }

    #section-handy .sticky-container .cable-section .cable-content-container .path {
        height: 6.1458vw;
        height: calc(var(--vw, 1vw)*6.1458);
        left: 53.9063vw;
        left: calc(var(--vw, 1vw)*53.9063);
        top: 11.7188vw;
        top: calc(var(--vw, 1vw)*11.7188);
        width: 9.8958vw;
        width: calc(var(--vw, 1vw)*9.8958)
    }

    #section-handy .bg-img-container {
        margin-top: 16.6667vw;
        margin-top: calc(var(--vw, 1vw)*16.6667)
    }

    #section-handy .bg-img-container .video-container {
        height: 38.3854vw;
        height: calc(var(--vw, 1vw)*38.3854);
        width: 68.3333vw;
        width: calc(var(--vw, 1vw)*68.3333)
    }

    #section-handy .bg-img-container .video-text {
        margin-top: 1.4583vw;
        margin-top: calc(var(--vw, 1vw)*1.4583)
    }

    #section-handy .bg-img-container .video-text .desc {
        padding-top: .4167vw;
        padding-top: calc(var(--vw, 1vw)*.4167);
        width: 39.6354vw;
        width: calc(var(--vw, 1vw)*39.6354)
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-handy .sticky-container .cable-section .text-block {
        width: 88.889vw
    }

    #section-handy .sticky-container .cable-section .text-block .title {
        margin-bottom: 5.556vw;
        margin-left: 5.556vw;
        margin-right: 5.556vw
    }

    #section-handy .sticky-container .cable-section .text-block .desc {
        margin-left: 5.556vw;
        margin-right: 5.556vw;
        width: 88.889vw
    }

    #section-handy .sticky-container .cable-section .cable-content-container {
        height: 41.667vw;
        margin-top: 18.889vw
    }

    #section-handy .sticky-container .cable-section .cable-content-container #cable-canvas {
        height: 188.889vw;
        -webkit-transform: translateY(-125vw);
        transform: translateY(-125vw);
        width: 100vw
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text {
        top: 11.111vw
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text {
        font-size: 3.889vw;
        line-height: 4.667vw
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text-left-container {
        -webkit-transform: translateX(44.861vw);
        transform: translate(44.861vw)
    }

    #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text-left-container .cable-text-left, #section-handy .sticky-container .cable-section .cable-content-container .cable-content-text .cable-text-right-container .cable-text-right {
        width: 55.556vw
    }

    #section-handy .sticky-container .cable-section .cable-content-container .path {
        height: 15.833vw;
        left: 59.722vw;
        top: 25vw;
        width: 26.111vw
    }

    #section-handy .bg-img-container {
        margin-top: 22.222vw
    }

    #section-handy .bg-img-container .video-container {
        height: 69.444vw;
        margin-top: 11.111vw;
        width: 127.778vw
    }

    #section-handy .bg-img-container .video-text .title {
        margin-bottom: 5.556vw
    }

    #section-handy .sticky-container .cable-section .text-block .title {
        flex-direction: column
    }

    #section-handy .bg-img-container .video-container {
        order: 2;
        position: relative
    }

    #section-handy .bg-img-container .video-text {
        flex-direction: column
    }
}

#section-charge {
    color: #fff
}

#section-charge .sticky-container .sticky-grid-1 {
    height: 150vh;
    height: calc(var(--vh, 1vh)*150);
    margin-top: -50vh;
    margin-top: calc(var(--vh, 1vh)*-50);
    overflow: hidden;
    top: 0;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-charge .sticky-container .sticky-grid-1 .text-left-wrapper {
    left: 0;
    overflow: hidden
}

#section-charge .sticky-container .sticky-grid-1 .text-left-wrapper .text-left {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    left: 0;
    position: absolute;
    top: 0
}

#section-charge .sticky-container .sticky-grid-1 .text-right-wrapper {
    overflow: hidden;
    right: 0
}

#section-charge .sticky-container .sticky-grid-1 .text-right-wrapper .text-right {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    position: absolute;
    right: 0;
    top: 0
}

#section-charge .sticky-container .sticky-grid-1 .text-center-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    left: 0;
    text-align: center;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .text-center-left, #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .text-center-right {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-charge .sticky-container .sticky-grid-2 {
    margin-top: -100vh;
    margin-top: calc(var(--vh, 1vh)*-100);
    overflow: hidden;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-charge .sticky-container .sticky-grid-2 .cable-wrapper {
    left: 50%
}

#section-charge .sticky-container .sticky-grid-2 .cable-wrapper .cable-inner-wrapper, #section-charge .sticky-container .sticky-grid-2 .cable-wrapper .cable-inner-wrapper .cable {
    height: 100%;
    width: 100%
}

#section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-bg-shadow {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

#section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-bg-shadow .phone-bg-inner-shadow {
    background: #000;
    height: 100%;
    mix-blend-mode: normal;
    opacity: .71;
    width: 100%
}

#section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-inner-wrapper {
    height: 100%;
    position: relative;
    z-index: 2
}

#section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-inner-wrapper .phone {
    height: 100%;
    width: 100%
}

#section-charge .chart .chart-copy {
    align-items: flex-start;
    display: flex;
    justify-content: space-between
}

#section-charge .chart .chart-bottom-title, #section-charge .chart .chart-title {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    opacity: .8
}

#section-charge .chart .chart-desc {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    opacity: .5
}

#section-charge .photos-bottom .photo-row {
    display: flex
}

#section-charge .photos-bottom .photo-row .line-nail #stroke-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000
}

#section-charge .photos-bottom .photo-row .line-nail svg {
    height: 100%;
    width: 100%
}

#section-charge .photos-bottom .photo-row .big-img {
    flex-shrink: 0;
    position: relative
}

#section-charge .photos-bottom .photo-row .plug-grid {
    flex-shrink: 0
}

@media (min-width:1024px), (orientation:landscape) {
    #section-charge {
        padding-bottom: 6.25vw;
        padding-bottom: calc(var(--vw, 1vw)*6.25)
    }

    #section-charge .sticky-container {
        height: calc(250vh + 41.4583vw);
        height: calc(var(--vh, 1vh)*100 + 41.4583vw - var(--vh, 1vh)*50 + var(--vh, 1vh)*70 + var(--vh, 1vh)*50 + var(--vh, 1vh)*50 + var(--vh, 1vh)*30);
        height: calc(250vh + var(--vw, 1vw)*28.125 + var(--vw, 1vw)*13.3333);
        height: calc(var(--vh, 1vh)*100 + var(--vw, 1vw)*28.125 - var(--vh, 1vh)*50 + var(--vh, 1vh)*70 + var(--vh, 1vh)*50 + var(--vh, 1vh)*50 + var(--vh, 1vh)*30 + var(--vw, 1vw)*13.3333)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-left-wrapper {
        height: 9.0104vw;
        height: calc(var(--vw, 1vw)*9.0104);
        top: calc(50vh - 11.1458vw);
        top: calc(var(--vh, 1vh)*50 - 11.1458vw);
        top: calc(50vh - var(--vw, 1vw)*11.1458);
        top: calc(var(--vh, 1vh)*50 - var(--vw, 1vw)*11.1458);
        width: 39.0625vw;
        width: calc(var(--vw, 1vw)*39.0625)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-left-wrapper .text-left {
        font-size: 7.5vw;
        font-size: calc(var(--vw, 1vw)*7.5);
        height: 9.0104vw;
        height: calc(var(--vw, 1vw)*9.0104);
        line-height: 9vw;
        line-height: calc(var(--vw, 1vw)*9)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-right-wrapper {
        height: 9.0104vw;
        height: calc(var(--vw, 1vw)*9.0104);
        top: calc(50vh - 3.5417vw);
        top: calc(var(--vh, 1vh)*50 - 3.5417vw);
        top: calc(50vh - var(--vw, 1vw)*3.5417);
        top: calc(var(--vh, 1vh)*50 - var(--vw, 1vw)*3.5417);
        width: 39.0625vw;
        width: calc(var(--vw, 1vw)*39.0625)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-right-wrapper .text-right {
        font-size: 7.5vw;
        font-size: calc(var(--vw, 1vw)*7.5);
        height: 9.0104vw;
        height: calc(var(--vw, 1vw)*9.0104);
        line-height: 9.0052vw;
        line-height: calc(var(--vw, 1vw)*9.0052)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper {
        top: calc(50vh + .6771vw);
        top: calc(var(--vh, 1vh)*50 + .6771vw);
        top: calc(50vh + var(--vw, 1vw)*4.8438 - var(--vw, 1vw)*1.5625 - var(--vw, 1vw)*2.6042);
        top: calc(var(--vh, 1vh)*50 + var(--vw, 1vw)*4.8438 - var(--vw, 1vw)*1.5625 - var(--vw, 1vw)*2.6042)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .text-center-left {
        font-size: 4.1667vw;
        font-size: calc(var(--vw, 1vw)*4.1667);
        height: 4.5833vw;
        height: calc(var(--vw, 1vw)*4.5833);
        line-height: 4.5833vw;
        line-height: calc(var(--vw, 1vw)*4.5833);
        top: -11.1979vw;
        top: calc(var(--vw, 1vw)*-11.1979)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .text-center-right {
        font-size: 4.1667vw;
        font-size: calc(var(--vw, 1vw)*4.1667);
        height: 5.2083vw;
        height: calc(var(--vw, 1vw)*5.2083);
        line-height: 4.5833vw;
        line-height: calc(var(--vw, 1vw)*4.5833);
        top: -6.6667vw;
        top: calc(var(--vw, 1vw)*-6.6667)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .desc {
        margin-top: 2.2917vw;
        margin-top: calc(var(--vw, 1vw)*2.2917);
        width: 35.1563vw;
        width: calc(var(--vw, 1vw)*35.1563)
    }

    #section-charge .sticky-container .sticky-grid-2 {
        height: calc(100vh + 41.4583vw);
        height: calc(var(--vh, 1vh)*100 + 41.4583vw - var(--vh, 1vh)*50 + var(--vh, 1vh)*50);
        height: calc(100vh + var(--vw, 1vw)*28.125 + var(--vw, 1vw)*13.3333);
        height: calc(var(--vh, 1vh)*100 + var(--vw, 1vw)*28.125 - var(--vh, 1vh)*50 + var(--vh, 1vh)*50 + var(--vw, 1vw)*13.3333);
        top: -41.4583vw;
        top: calc(var(--vh, 1vh)*50 - 41.4583vw - var(--vh, 1vh)*50);
        top: calc(0vh - var(--vw, 1vw)*28.125 - var(--vw, 1vw)*13.3333);
        top: calc(var(--vh, 1vh)*50 - var(--vw, 1vw)*28.125 - var(--vh, 1vh)*50 - var(--vw, 1vw)*13.3333)
    }

    #section-charge .sticky-container .sticky-grid-2 .cable-wrapper {
        height: 68.2813vw;
        height: calc(var(--vw, 1vw)*68.2813);
        top: calc(50vh + 46.0417vw);
        top: calc(var(--vh, 1vh)*50 + 46.0417vw);
        top: calc(50vh + var(--vw, 1vw)*46.0417);
        top: calc(var(--vh, 1vh)*50 + var(--vw, 1vw)*46.0417);
        width: 2.0833vw;
        width: calc(var(--vw, 1vw)*2.0833)
    }

    #section-charge .sticky-container .sticky-grid-2 .cable-wrapper .cable-inner-wrapper {
        -webkit-transform: translateX(-1.0417vw);
        transform: translate(-1.0417vw);
        -webkit-transform: translateX(calc(var(--vw, 1vw)*-1.0417));
        transform: translate(calc(var(--vw, 1vw)*-1.0417))
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper {
        height: 47.3958vw;
        height: calc(var(--vw, 1vw)*47.3958);
        left: 35.9375vw;
        left: calc(var(--vw, 1vw)*50 - var(--vw, 1vw)*14.0625);
        width: 28.125vw;
        width: calc(var(--vw, 1vw)*28.125)
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-bg-shadow .phone-bg-inner-shadow {
        -webkit-filter: blur(7.0833vw);
        filter: blur(7.0833vw);
        -webkit-filter: blur(calc(var(--vw, 1vw)*7.0833));
        filter: blur(calc(var(--vw, 1vw)*7.0833))
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-inner-wrapper {
        margin-left: 3.125vw;
        margin-left: calc(var(--vw, 1vw)*3.125);
        width: 21.875vw;
        width: calc(var(--vw, 1vw)*21.875)
    }

    #section-charge .chart {
        padding-top: 15.0521vw;
        padding-top: calc(var(--vw, 1vw)*15.0521)
    }

    #section-charge .chart .chart-copy .desc {
        padding-top: .4167vw;
        padding-top: calc(var(--vw, 1vw)*.4167);
        width: 38.0729vw;
        width: calc(var(--vw, 1vw)*38.0729)
    }

    #section-charge .chart .chart-title {
        font-size: 1.25vw;
        font-size: calc(var(--vw, 1vw)*1.25);
        line-height: 1.4583vw;
        line-height: calc(var(--vw, 1vw)*1.4583);
        margin-left: 8.0208vw;
        margin-left: calc(var(--vw, 1vw)*8.0208);
        margin-top: 3.5417vw;
        margin-top: calc(var(--vw, 1vw)*3.5417)
    }

    #section-charge .chart .chart-bottom-title {
        font-size: .9375vw;
        font-size: calc(var(--vw, 1vw)*.9375);
        line-height: 1.125vw;
        line-height: calc(var(--vw, 1vw)*1.125);
        margin-left: 8.0208vw;
        margin-left: calc(var(--vw, 1vw)*8.0208)
    }

    #section-charge .chart .chart-desc {
        font-size: .6771vw;
        font-size: calc(var(--vw, 1vw)*.6771);
        line-height: .8125vw;
        line-height: calc(var(--vw, 1vw)*.8125);
        margin-left: 8.0208vw;
        margin-left: calc(var(--vw, 1vw)*8.0208);
        margin-top: .2083vw;
        margin-top: calc(var(--vw, 1vw)*.2083);
        width: 50.3125vw;
        width: calc(var(--vw, 1vw)*50.3125)
    }

    #section-charge .chart .chart-img {
        height: 34.5313vw;
        height: calc(var(--vw, 1vw)*34.5313);
        margin-bottom: .8333vw;
        margin-bottom: calc(var(--vw, 1vw)*.8333);
        margin-left: -1.3542vw;
        margin-left: calc(var(--vw, 1vw)*-1.3542);
        margin-top: .4167vw;
        margin-top: calc(var(--vw, 1vw)*.4167);
        width: 68.3333vw;
        width: calc(var(--vw, 1vw)*68.3333)
    }

    #section-charge .photos-bottom .photo-row {
        margin-top: 7.0833vw;
        margin-top: calc(var(--vw, 1vw)*7.0833)
    }

    #section-charge .photos-bottom .photo-row .line-nail {
        height: 18.4896vw;
        height: calc(var(--vw, 1vw)*18.4896);
        left: -15.8333vw;
        left: calc(var(--vw, 1vw)*-15.8333);
        top: 30vw;
        top: calc(var(--vw, 1vw)*30);
        width: 26.0417vw;
        width: calc(var(--vw, 1vw)*26.0417)
    }

    #section-charge .photos-bottom .photo-row .big-img {
        height: 41.4583vw;
        height: calc(var(--vw, 1vw)*41.4583);
        left: -.1562vw;
        left: calc(var(--vw, 1vw)*-.1562);
        width: 30.7292vw;
        width: calc(var(--vw, 1vw)*30.7292)
    }

    #section-charge .photos-bottom .photo-row .plug-grid {
        left: 35.6771vw;
        left: calc(var(--vw, 1vw)*35.6771);
        top: 7.0313vw;
        top: calc(var(--vw, 1vw)*7.0313)
    }

    #section-charge .photos-bottom .photo-row .plug-grid .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25);
        width: 24.9479vw;
        width: calc(var(--vw, 1vw)*24.9479)
    }

    #section-charge .photos-bottom .photo-row .plug-grid .desc {
        width: 24.9479vw;
        width: calc(var(--vw, 1vw)*24.9479)
    }

    #section-charge .photos-bottom .photo-row .plug-grid .tuv {
        height: 4.6875vw;
        height: calc(var(--vw, 1vw)*4.6875);
        margin-top: 3.125vw;
        margin-top: calc(var(--vw, 1vw)*3.125);
        width: 4.6875vw;
        width: calc(var(--vw, 1vw)*4.6875)
    }

    #section-charge .sticky-container .sticky-grid-2 {
        margin-top: -150vh;
        margin-top: calc(var(--vh, 1vh)*-150)
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper {
        top: 50vh;
        top: calc(var(--vh, 1vh)*50)
    }

    #section-charge .chart {
        margin-top: -70vh;
        margin-top: calc(var(--vh, 1vh)*-70)
    }

    #section-charge .photos-bottom .photo-row .plug-grid {
        position: absolute;
        z-index: 2
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-charge {
        padding-bottom: 20vw
    }

    #section-charge .sticky-container {
        height: calc(250vh + 97.222vw);
        height: calc(var(--vh, 1vh)*100 + 97.222vw - var(--vh, 1vh)*50 + var(--vh, 1vh)*70 + var(--vh, 1vh)*50 + var(--vh, 1vh)*50 + var(--vh, 1vh)*30)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-left-wrapper {
        height: 21.389vw;
        top: calc(50vh - 37.5vw);
        top: calc(var(--vh, 1vh)*50 - 37.5vw);
        width: 23.611vw
    }

    #section-charge .sticky-container .sticky-grid-1 .text-left-wrapper .text-left {
        font-size: 19.444vw;
        height: 21.389vw;
        line-height: 21.389vw
    }

    #section-charge .sticky-container .sticky-grid-1 .text-right-wrapper {
        height: 21.389vw;
        top: calc(50vh - 16.111vw);
        top: calc(var(--vh, 1vh)*50 - 16.111vw);
        width: 23.611vw
    }

    #section-charge .sticky-container .sticky-grid-1 .text-right-wrapper .text-right {
        font-size: 19.444vw;
        height: 21.389vw;
        line-height: 21.389vw
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper {
        top: 50vh;
        top: calc(var(--vh, 1vh)*50)
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .text-center-left {
        font-size: 13.333vw;
        height: 21.389vw;
        line-height: 16vw;
        top: -31.944vw
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .text-center-right {
        font-size: 13.333vw;
        height: 21.389vw;
        line-height: 16vw;
        top: -16.111vw
    }

    #section-charge .sticky-container .sticky-grid-1 .text-center-wrapper .desc {
        margin-top: 5.556vw;
        width: 88.889vw
    }

    #section-charge .sticky-container .sticky-grid-2 {
        height: calc(50vh + 97.222vw);
        height: calc(var(--vh, 1vh)*100 + 97.222vw - var(--vh, 1vh)*50);
        top: calc(50vh - 97.222vw);
        top: calc(var(--vh, 1vh)*50 - 97.222vw)
    }

    #section-charge .sticky-container .sticky-grid-2 .cable-wrapper {
        height: 180vw;
        top: 130.556vw;
        width: 5.556vw
    }

    #section-charge .sticky-container .sticky-grid-2 .cable-wrapper .cable-inner-wrapper {
        -webkit-transform: translateX(-2.778vw);
        transform: translate(-2.778vw)
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper {
        height: 120.278vw;
        left: 22.222vw;
        left: calc(var(--vw, 1vw)*50 - 27.778vw);
        top: 13.889vw;
        width: 55.556vw
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-inner-wrapper {
        width: 55.556vw
    }

    #section-charge .chart .chart-copy .title {
        margin-bottom: 5.556vw;
        margin-left: 5.556vw;
        margin-right: 5.556vw
    }

    #section-charge .chart .chart-copy .desc {
        margin-left: 5.556vw;
        margin-right: 5.556vw
    }

    #section-charge .chart .chart-title {
        font-size: 3.611vw;
        line-height: 4.333vw;
        margin-left: 5.556vw;
        margin-top: 11.111vw
    }

    #section-charge .chart .chart-bottom-title {
        font-size: 2.778vw;
        line-height: 3.333vw;
        margin-left: 5.556vw
    }

    #section-charge .chart .chart-desc {
        font-size: 2.5vw;
        line-height: 3vw;
        margin-left: 5.556vw;
        margin-top: .556vw;
        width: 88.889vw
    }

    #section-charge .chart .chart-img {
        height: 56.944vw;
        margin-top: 1.111vw;
        width: 100vw
    }

    #section-charge .photos-bottom .photo-row {
        margin-top: 22.222vw
    }

    #section-charge .photos-bottom .photo-row .line-nail {
        height: 32.778vw;
        left: -8.333vw;
        top: 142.222vw;
        width: 32.222vw
    }

    #section-charge .photos-bottom .photo-row .big-img {
        height: 96.667vw;
        left: 2.778vw;
        margin-top: 16.667vw;
        width: 75vw
    }

    #section-charge .photos-bottom .photo-row .plug-grid {
        height: 52.222vw;
        max-height: 52.222vw
    }

    #section-charge .photos-bottom .photo-row .plug-grid .title {
        margin-bottom: 5.556vw;
        width: 88.889vw
    }

    #section-charge .photos-bottom .photo-row .plug-grid .desc {
        width: 88.889vw
    }

    #section-charge .photos-bottom .photo-row .plug-grid .tuv {
        height: 13.333vw;
        margin-top: 5.556vw;
        width: 13.333vw
    }

    #section-charge .sticky-container .sticky-grid-2 .phone-wrapper .phone-bg-shadow {
        display: none
    }

    #section-charge .chart {
        margin-top: -60vh;
        margin-top: calc(var(--vh, 1vh)*-60)
    }

    #section-charge .chart .chart-copy, #section-charge .photos-bottom .photo-row {
        flex-direction: column
    }

    #section-charge .photos-bottom .photo-row .big-img {
        order: 2
    }
}

#section-camera .ai-camera {
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-camera .ai-camera .dynamic-container {
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden
}

#section-camera .ai-camera .dynamic-container .full-width-container {
    background: linear-gradient(180deg, #a9a9ab, #b4b4b6 20.32%, #c8c6c9 48.72%, #d6d6d8 76.3%, #d8d7db);
    height: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-camera .ai-camera .dynamic-container .full-width-container .ai-camera-img {
    left: 0;
    top: 0
}

#section-camera .ai-camera .dynamic-container .full-width-container .box-container {
    display: flex;
    height: 100%
}

#section-camera .content-container .row-1-wrapper, #section-camera .content-container .row-2-wrapper {
    overflow: hidden
}

#section-camera .content-container .row-1 {
    display: flex
}

#section-camera .content-container .row-1 .row-left {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: relative
}

#section-camera .content-container .row-1 .row-left .title {
    position: relative;
    z-index: 2
}

#section-camera .content-container .row-1 .row-right {
    flex-shrink: 0
}

#section-camera .content-container .row-1 .row-right .img-group-container {
    color: #fff
}

#section-camera .content-container .row-1 .row-right .img-group-container .big-img {
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    transition: opacity .5s linear;
    width: 100%
}

#section-camera .content-container .row-1 .row-right .img-group-container .big-img.active {
    opacity: 1
}

#section-camera .content-container .row-1 .row-right .img-group-container .switch-controller {
    align-items: center;
    cursor: pointer;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-text {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-image .switch-bullet {
    transition: -webkit-transform .5s linear;
    transition: transform .5s linear;
    transition: transform .5s linear, -webkit-transform .5s linear
}

#section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-image .switch-bullet.off-status {
    -webkit-transform: translateX(0);
    transform: translate(0)
}

#section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-image .switch-bullet.on-status {
    -webkit-transform: translateX(50%);
    transform: translate(50%)
}

#section-camera .content-container .row-2 {
    display: flex
}

#section-camera .content-container .row-2 .row-left {
    flex-shrink: 0
}

#section-camera .content-container .row-2 .row-left .img-group-container .big-img {
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    transition: opacity .5s linear;
    width: 100%
}

#section-camera .content-container .row-2 .row-left .img-group-container .big-img.active {
    opacity: 1
}

#section-camera .content-container .row-2 .row-left .img-group-container .switch-controller {
    align-items: center;
    color: #fff;
    cursor: pointer;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-text {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-image .switch-bullet {
    transition: -webkit-transform .5s linear;
    transition: transform .5s linear;
    transition: transform .5s linear, -webkit-transform .5s linear
}

#section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-image .switch-bullet.off-status {
    -webkit-transform: translateX(0);
    transform: translate(0)
}

#section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-image .switch-bullet.on-status {
    -webkit-transform: translateX(50%);
    transform: translate(50%)
}

#section-camera .content-container .row-2 .row-right {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative
}

#section-camera .content-container .video-row-1 {
    display: flex;
    justify-content: space-between
}

#section-camera .content-container .video-row-1 .row-left {
    display: flex;
    flex-direction: column;
    position: relative
}

#section-camera .content-container .video-row-1 .row-right, #section-camera .content-container .video-row-1 .row-right .video-container {
    overflow: hidden
}

#section-camera .content-container .video-row-1 .row-right .video-text {
    color: #fff;
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    z-index: 3
}

#section-camera .content-container .video-row-1 .row-right .autoplay-ls-video, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video {
    position: relative
}

#section-camera .content-container .video-row-1 .row-right .autoplay-ls-video .normal-play-button, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video .normal-play-button {
    display: none
}

#section-camera .content-container .video-row-1 .row-right .autoplay-ls-video:last-child, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video:last-child {
    z-index: 2
}

#section-camera .content-container .video-row-1 .row-right .autoplay-ls-video img, #section-camera .content-container .video-row-1 .row-right .autoplay-ls-video video, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video img, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video video {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

#section-camera .content-container .video-row-2 {
    display: flex;
    justify-content: space-between
}

#section-camera .content-container .video-row-2 .row-left {
    display: flex;
    flex-direction: column;
    justify-content: center
}

#section-camera .content-container .video-row-2 .row-right .video-text {
    color: #fff;
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    z-index: 3
}

#section-camera .content-container .video-row-2 .row-right .off-text, #section-camera .content-container .video-row-2 .row-right .on-text {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-camera .content-container .video-row-2 .row-right .autoplay-ls-video, #section-camera .content-container .video-row-2 .row-right .autoplay-pt-video {
    height: 100%;
    width: 100%
}

#section-camera .content-container .video-row-2 .row-right .autoplay-ls-video .normal-play-button, #section-camera .content-container .video-row-2 .row-right .autoplay-pt-video .normal-play-button {
    display: none
}

#section-camera .content-container .video-row-2 .row-right .autoplay-ls-video img, #section-camera .content-container .video-row-2 .row-right .autoplay-ls-video video, #section-camera .content-container .video-row-2 .row-right .autoplay-pt-video img, #section-camera .content-container .video-row-2 .row-right .autoplay-pt-video video {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

#section-camera .content-container .video-row .switch-controller {
    align-items: center;
    color: #fff;
    cursor: pointer;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%);
    z-index: 3
}

#section-camera .content-container .video-row .switch-controller .switch-text {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-camera .content-container .video-row .switch-controller .switch-image .switch-bullet {
    transition: -webkit-transform .5s linear;
    transition: transform .5s linear;
    transition: transform .5s linear, -webkit-transform .5s linear
}

#section-camera .content-container .video-row .switch-controller .switch-image .switch-bullet.off-status {
    -webkit-transform: translateX(0);
    transform: translate(0)
}

#section-camera .content-container .video-row .switch-controller .switch-image .switch-bullet.on-status {
    -webkit-transform: translateX(50%);
    transform: translate(50%)
}

@media (min-width:1024px), (orientation:landscape) {
    #section-camera .ai-camera {
        height: 51.0417vw;
        height: calc(var(--vw, 1vw)*51.0417)
    }

    #section-camera .ai-camera .dynamic-container {
        width: 68.3333vw;
        width: calc(var(--vw, 1vw)*68.3333)
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .ai-camera-img {
        height: 51.0417vw;
        height: calc(var(--vw, 1vw)*51.0417);
        width: 100vw;
        width: calc(var(--vw, 1vw)*100)
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .box-container {
        padding-bottom: 12.5vw;
        padding-bottom: calc(var(--vw, 1vw)*12.5)
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .box-container .ai-text {
        width: 24.9479vw;
        width: calc(var(--vw, 1vw)*24.9479)
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .box-container .ai-text .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container {
        padding-top: 9.4792vw;
        padding-top: calc(var(--vw, 1vw)*9.4792)
    }

    #section-camera .content-container .row-1 .row-left {
        margin-left: 5.4688vw;
        margin-left: calc(var(--vw, 1vw)*5.4688);
        margin-right: 6.25vw;
        margin-right: calc(var(--vw, 1vw)*6.25);
        margin-top: 3.0208vw;
        margin-top: calc(var(--vw, 1vw)*3.0208)
    }

    #section-camera .content-container .row-1 .row-left .title {
        width: 19.3229vw;
        width: calc(var(--vw, 1vw)*19.3229)
    }

    #section-camera .content-container .row-1 .row-left .small-img {
        height: 21.7708vw;
        height: calc(var(--vw, 1vw)*21.7708);
        margin-left: 2.9167vw;
        margin-left: calc(var(--vw, 1vw)*2.9167);
        margin-top: 3.75vw;
        margin-top: calc(var(--vw, 1vw)*3.75);
        width: 15.5729vw;
        width: calc(var(--vw, 1vw)*15.5729)
    }

    #section-camera .content-container .row-1 .row-left .path {
        height: 7.3438vw;
        height: calc(var(--vw, 1vw)*7.3438);
        left: -1.4062vw;
        left: calc(var(--vw, 1vw)*-1.4062);
        top: 23.75vw;
        top: calc(var(--vw, 1vw)*23.75);
        width: 18.8542vw;
        width: calc(var(--vw, 1vw)*18.8542)
    }

    #section-camera .content-container .row-1 .row-right .img-group-container {
        height: 27.1875vw;
        height: calc(var(--vw, 1vw)*27.1875);
        margin-top: 2.5vw;
        margin-top: calc(var(--vw, 1vw)*2.5);
        width: 44.7396vw;
        width: calc(var(--vw, 1vw)*44.7396)
    }

    #section-camera .content-container .row-1 .row-right .img-group-container .switch-controller {
        top: 30vw;
        top: calc(var(--vw, 1vw)*30)
    }

    #section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-text {
        font-size: .8333vw;
        font-size: calc(var(--vw, 1vw)*.8333);
        line-height: 1.25vw;
        line-height: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-image {
        height: 1.25vw;
        height: calc(var(--vw, 1vw)*1.25);
        margin-left: .4167vw;
        margin-left: calc(var(--vw, 1vw)*.4167);
        margin-right: .4167vw;
        margin-right: calc(var(--vw, 1vw)*.4167);
        width: 2.6042vw;
        width: calc(var(--vw, 1vw)*2.6042)
    }

    #section-camera .content-container .row-1 .row-right .desc {
        margin-top: 1.6667vw;
        margin-top: calc(var(--vw, 1vw)*1.6667);
        width: 29.0625vw;
        width: calc(var(--vw, 1vw)*29.0625)
    }

    #section-camera .content-container .row-2 {
        margin-top: 9.7917vw;
        margin-top: calc(var(--vw, 1vw)*9.7917)
    }

    #section-camera .content-container .row-2 .row-left {
        margin-right: 6.0417vw;
        margin-right: calc(var(--vw, 1vw)*6.0417)
    }

    #section-camera .content-container .row-2 .row-left, #section-camera .content-container .row-2 .row-left .img-group-container {
        height: 41.0417vw;
        height: calc(var(--vw, 1vw)*41.0417);
        width: 30.2083vw;
        width: calc(var(--vw, 1vw)*30.2083)
    }

    #section-camera .content-container .row-2 .row-left .img-group-container .switch-controller {
        top: 38.75vw;
        top: calc(var(--vw, 1vw)*38.75)
    }

    #section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-text {
        font-size: .8333vw;
        font-size: calc(var(--vw, 1vw)*.8333);
        line-height: 1.25vw;
        line-height: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-image {
        height: 1.25vw;
        height: calc(var(--vw, 1vw)*1.25);
        margin-left: .4167vw;
        margin-left: calc(var(--vw, 1vw)*.4167);
        margin-right: .4167vw;
        margin-right: calc(var(--vw, 1vw)*.4167);
        width: 2.6042vw;
        width: calc(var(--vw, 1vw)*2.6042)
    }

    #section-camera .content-container .row-2 .row-right {
        margin-top: 1.0417vw;
        margin-top: calc(var(--vw, 1vw)*1.0417)
    }

    #section-camera .content-container .row-2 .row-right .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .row-2 .row-right .small-img {
        height: 24.0625vw;
        height: calc(var(--vw, 1vw)*24.0625);
        margin-bottom: 3.3333vw;
        margin-bottom: calc(var(--vw, 1vw)*3.3333);
        margin-left: .7813vw;
        margin-left: calc(var(--vw, 1vw)*.7813);
        width: 18.0208vw;
        width: calc(var(--vw, 1vw)*18.0208)
    }

    #section-camera .content-container .row-2 .row-right .desc {
        width: 30.2083vw;
        width: calc(var(--vw, 1vw)*30.2083)
    }

    #section-camera .content-container .row-2 .row-right .path {
        height: 7.0833vw;
        height: calc(var(--vw, 1vw)*7.0833);
        left: 13.6979vw;
        left: calc(var(--vw, 1vw)*13.6979);
        top: -2.8646vw;
        top: calc(var(--vw, 1vw)*-2.8646);
        width: 7.1354vw;
        width: calc(var(--vw, 1vw)*7.1354)
    }

    #section-camera .content-container .sticky-container .sticky {
        top: calc(50vh - 16.1458vw);
        top: calc(var(--vh, 1vh)*50 - 16.1458vw);
        top: calc(50vh - var(--vw, 1vw)*16.1458);
        top: calc(var(--vh, 1vh)*50 - var(--vw, 1vw)*16.1458)
    }

    #section-camera .content-container .video-row-1 {
        margin-top: 9.4792vw;
        margin-top: calc(var(--vw, 1vw)*9.4792)
    }

    #section-camera .content-container .video-row-1 .row-left, #section-camera .content-container .video-row-1 .row-left .video-text-1 {
        height: 32.2917vw;
        height: calc(var(--vw, 1vw)*32.2917);
        min-height: 32.2917vw;
        min-height: calc(var(--vw, 1vw)*32.2917);
        width: 24.2708vw;
        width: calc(var(--vw, 1vw)*24.2708)
    }

    #section-camera .content-container .video-row-1 .row-left .video-text-2 {
        height: 32.2917vw;
        height: calc(var(--vw, 1vw)*32.2917);
        margin-top: 15.2083vw;
        margin-top: calc(var(--vw, 1vw)*15.2083);
        min-height: 32.2917vw;
        min-height: calc(var(--vw, 1vw)*32.2917);
        width: 22.3438vw;
        width: calc(var(--vw, 1vw)*22.3438)
    }

    #section-camera .content-container .video-row-1 .row-left .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .video-row-1 .row-right {
        height: 32.2917vw;
        height: calc(var(--vw, 1vw)*32.2917);
        width: 28.75vw;
        width: calc(var(--vw, 1vw)*28.75)
    }

    #section-camera .content-container .video-row-1 .row-right .video-container {
        height: 32.2917vw;
        height: calc(var(--vw, 1vw)*32.2917);
        width: 28.5417vw;
        width: calc(var(--vw, 1vw)*28.5417)
    }

    #section-camera .content-container .video-row-1 .row-right .steady-video {
        -webkit-transform: translateY(-32.2917vw);
        transform: translateY(-32.2917vw);
        -webkit-transform: translateY(calc(var(--vw, 1vw)*-32.2917));
        transform: translateY(calc(var(--vw, 1vw)*-32.2917))
    }

    #section-camera .content-container .video-row-1 .row-right .video-text {
        font-size: .8333vw;
        font-size: calc(var(--vw, 1vw)*.8333);
        line-height: 1.25vw;
        line-height: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .video-row-1 .row-right .on-text {
        left: 1.25vw;
        left: calc(var(--vw, 1vw)*1.25);
        top: 14.2708vw;
        top: calc(var(--vw, 1vw)*14.2708)
    }

    #section-camera .content-container .video-row-1 .row-right .off-text {
        left: 1.25vw;
        left: calc(var(--vw, 1vw)*1.25);
        top: 30.4167vw;
        top: calc(var(--vw, 1vw)*30.4167)
    }

    #section-camera .content-container .video-row-1 .row-right .autoplay-ls-video, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video {
        height: 32.2917vw;
        height: calc(var(--vw, 1vw)*32.2917);
        margin-left: -.1042vw;
        margin-left: calc(var(--vw, 1vw)*-.1042);
        width: 28.75vw;
        width: calc(var(--vw, 1vw)*28.75)
    }

    #section-camera .content-container .video-row-2 {
        margin-top: 9.4792vw;
        margin-top: calc(var(--vw, 1vw)*9.4792)
    }

    #section-camera .content-container .video-row-2 .row-left {
        width: 22.3438vw;
        width: calc(var(--vw, 1vw)*22.3438)
    }

    #section-camera .content-container .video-row-2 .row-left .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .video-row-2 .row-right {
        height: 25.8854vw;
        height: calc(var(--vw, 1vw)*25.8854);
        width: 39.5833vw;
        width: calc(var(--vw, 1vw)*39.5833)
    }

    #section-camera .content-container .video-row-2 .row-right .video-text {
        font-size: .8333vw;
        font-size: calc(var(--vw, 1vw)*.8333);
        line-height: 1.25vw;
        line-height: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .video-row .switch-controller {
        top: 23.4896vw;
        top: calc(var(--vw, 1vw)*23.4896)
    }

    #section-camera .content-container .video-row .switch-controller .switch-text {
        font-size: .8333vw;
        font-size: calc(var(--vw, 1vw)*.8333);
        line-height: 1.25vw;
        line-height: calc(var(--vw, 1vw)*1.25)
    }

    #section-camera .content-container .video-row .switch-controller .switch-image {
        height: 1.25vw;
        height: calc(var(--vw, 1vw)*1.25);
        margin-left: .4167vw;
        margin-left: calc(var(--vw, 1vw)*.4167);
        margin-right: .4167vw;
        margin-right: calc(var(--vw, 1vw)*.4167);
        width: 2.6042vw;
        width: calc(var(--vw, 1vw)*2.6042)
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .box-container {
        align-items: flex-end;
        justify-content: flex-end
    }

    #section-camera .content-container .video-row-1 .row-left {
        justify-content: flex-start
    }

    #section-camera .content-container .video-row-1 .row-left .video-text-1, #section-camera .content-container .video-row-1 .row-left .video-text-2 {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: center
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-camera .ai-camera {
        height: 168.056vw
    }

    #section-camera .ai-camera .dynamic-container {
        width: 100vw
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .ai-camera-img {
        height: 168.056vw;
        width: 100vw
    }

    #section-camera .ai-camera .dynamic-container .full-width-container .box-container {
        padding-top: 20vw
    }

    #section-camera .content-container {
        padding-bottom: 20vw;
        padding-top: 20vw
    }

    #section-camera .content-container .row-1 .row-left .small-img {
        height: 83.056vw;
        margin-left: 13.333vw;
        margin-top: 6.944vw;
        width: 62.222vw
    }

    #section-camera .content-container .row-1 .row-left .path {
        height: 32.5vw;
        left: 2.778vw;
        top: 77.778vw;
        width: 83.333vw
    }

    #section-camera .content-container .row-1 .row-right {
        margin-top: 13.333vw
    }

    #section-camera .content-container .row-1 .row-right .img-group-container {
        height: 66.667vw;
        margin-top: 13.333vw;
        width: 88.889vw
    }

    #section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-text {
        font-size: 3.333vw;
        line-height: 5vw
    }

    #section-camera .content-container .row-1 .row-right .img-group-container .switch-controller .switch-image {
        height: 6.111vw;
        margin-left: 1.667vw;
        margin-right: 1.667vw;
        width: 11.111vw
    }

    #section-camera .content-container .row-2 {
        margin-top: 20vw
    }

    #section-camera .content-container .row-2 .row-left .img-group-container {
        height: 118.889vw;
        width: 88.889vw
    }

    #section-camera .content-container .row-2 .row-left .img-group-container .switch-controller {
        top: 108.333vw
    }

    #section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-text {
        font-size: 3.333vw;
        line-height: 5vw
    }

    #section-camera .content-container .row-2 .row-left .img-group-container .switch-controller .switch-image {
        height: 6.111vw;
        margin-left: 1.667vw;
        margin-right: 1.667vw;
        width: 11.111vw
    }

    #section-camera .content-container .row-2 .row-right {
        margin-bottom: 11.111vw
    }

    #section-camera .content-container .row-2 .row-right .small-img {
        height: 81.667vw;
        margin-left: 15.278vw;
        margin-top: 16.667vw;
        width: 61.111vw
    }

    #section-camera .content-container .row-2 .row-right .desc {
        margin-top: 11.111vw
    }

    #section-camera .content-container .row-2 .row-right .path {
        height: 20.833vw;
        left: 62.5vw;
        top: 19.444vw;
        width: 21.111vw
    }

    #section-camera .content-container .video-row-1 {
        margin-top: 20vw
    }

    #section-camera .content-container .video-row-1 .row-left .title {
        margin-bottom: 5.556vw
    }

    #section-camera .content-container .video-row-1 .row-right {
        height: 112.222vw;
        margin-left: -5.556vw;
        margin-top: 11.111vw;
        width: 100vw
    }

    #section-camera .content-container .video-row-1 .row-right .video-container {
        height: 112.222vw;
        width: 100vw
    }

    #section-camera .content-container .video-row-1 .row-right .video-text {
        font-size: 3.333vw;
        line-height: 5vw
    }

    #section-camera .content-container .video-row-1 .row-right .on-text {
        top: 48.889vw
    }

    #section-camera .content-container .video-row-1 .row-right .off-text {
        top: 105vw
    }

    #section-camera .content-container .video-row-1 .row-right .autoplay-ls-video, #section-camera .content-container .video-row-1 .row-right .autoplay-pt-video {
        height: 112.222vw;
        width: 100vw
    }

    #section-camera .content-container .video-row-2 {
        margin-top: 20vw
    }

    #section-camera .content-container .video-row-2 .row-left .title {
        margin-bottom: 5.556vw
    }

    #section-camera .content-container .video-row-2 .row-right {
        height: 112.222vw;
        margin-left: -5.556vw;
        margin-top: 11.111vw;
        width: 100vw
    }

    #section-camera .content-container .video-row-2 .row-right .video-container {
        height: 112.222vw;
        width: 100vw
    }

    #section-camera .content-container .video-row-2 .row-right .video-text {
        font-size: 3.333vw;
        line-height: 5vw
    }

    #section-camera .content-container .video-row-2 .row-right .on-text {
        top: 48.889vw
    }

    #section-camera .content-container .video-row-2 .row-right .off-text {
        top: 105vw
    }

    #section-camera .content-container .video-row .switch-controller {
        top: 61.667vw
    }

    #section-camera .content-container .video-row .switch-controller .switch-text {
        font-size: 3.333vw;
        line-height: 5vw
    }

    #section-camera .content-container .video-row .switch-controller .switch-image {
        height: 6.111vw;
        margin-left: 1.667vw;
        margin-right: 1.667vw;
        width: 11.111vw
    }

    #section-camera .content-container .row-1 {
        flex-direction: column
    }

    #section-camera .content-container .row-1 .row-right {
        display: flex;
        flex-direction: column
    }

    #section-camera .content-container .row-1 .row-right .img-group-container {
        order: 2
    }

    #section-camera .content-container .row-2 {
        flex-direction: column
    }

    #section-camera .content-container .row-2 .row-left {
        order: 2
    }

    #section-camera .content-container .video-row-1 {
        flex-direction: column
    }

    #section-camera .content-container .video-row-1 .row-left {
        justify-content: center
    }

    #section-camera .content-container .video-row-1 .row-right .off-text, #section-camera .content-container .video-row-1 .row-right .on-text {
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translate(-50%)
    }

    #section-camera .content-container .video-row-2 {
        flex-direction: column
    }
}

#section-chip {
    color: #fff;
    margin-top: -1px
}

#section-chip .structure-grid .structure-info {
    justify-content: space-between
}

#section-chip .structure-grid .structure-info .info-right {
    height: 0
}

#section-chip .hz-section {
    display: flex;
    justify-content: space-between
}

@media (min-width:1024px), (orientation:landscape) {
    #section-chip .structure-grid .structure-img {
        height: 35.4167vw;
        height: calc(var(--vw, 1vw)*35.4167);
        width: 68.3333vw;
        width: calc(var(--vw, 1vw)*68.3333)
    }

    #section-chip .structure-grid .structure-info {
        margin-top: 2.0833vw;
        margin-top: calc(var(--vw, 1vw)*2.0833)
    }

    #section-chip .structure-grid .structure-info .info-left {
        width: 42.2917vw;
        width: calc(var(--vw, 1vw)*42.2917)
    }

    #section-chip .structure-grid .structure-info .info-left .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-chip .structure-grid .structure-info .info-right {
        margin-top: .625vw;
        margin-top: calc(var(--vw, 1vw)*.625);
        width: 7.6042vw;
        width: calc(var(--vw, 1vw)*7.6042)
    }

    #section-chip .hz-section {
        padding-bottom: 9.4792vw;
        padding-bottom: calc(var(--vw, 1vw)*9.4792);
        padding-top: 9.4792vw;
        padding-top: calc(var(--vw, 1vw)*9.4792)
    }

    #section-chip .hz-section .hz-section-left {
        width: 28.0729vw;
        width: calc(var(--vw, 1vw)*28.0729)
    }

    #section-chip .hz-section .hz-section-left .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25);
        margin-top: 9.2188vw;
        margin-top: calc(var(--vw, 1vw)*9.2188)
    }

    #section-chip .hz-section .hz-section-right, #section-chip .hz-section .hz-section-right .smooth-img {
        height: 36.9271vw;
        height: calc(var(--vw, 1vw)*36.9271);
        width: 37.9167vw;
        width: calc(var(--vw, 1vw)*37.9167)
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-chip .structure-grid {
        display: flex;
        flex-direction: column
    }

    #section-chip .structure-grid .structure-img {
        order: 2
    }

    #section-chip .structure-grid .structure-info {
        flex-direction: column
    }

    #section-chip .structure-grid .structure-info .info-right {
        align-self: flex-end
    }

    #section-chip .hz-section {
        flex-direction: column
    }

    #section-chip .structure-grid .structure-img {
        height: 72.222vw;
        margin-top: 11.111vw;
        width: 100vw
    }

    #section-chip .structure-grid .structure-info .info-left .title {
        margin-bottom: 5.556vw
    }

    #section-chip .structure-grid .structure-info .info-right {
        width: 27.778vw
    }

    #section-chip .hz-section {
        height: 183.333vw;
        margin-top: 20vw
    }

    #section-chip .hz-section .hz-section-left .title {
        margin-bottom: 5.556vw
    }

    #section-chip .hz-section .hz-section-right {
        height: 113.333vw;
        margin-left: -5.556vw;
        margin-top: 11.111vw;
        width: 100vw
    }

    #section-chip .hz-section .hz-section-right .smooth-img {
        height: 113.333vw;
        width: 100vw
    }
}

#section-os {
    height: 400vh;
    height: calc(var(--vh, 1vh)*400);
    transition: background-color .3s linear, color .3s linear
}

#section-os .sticky {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    top: 0;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-os .sticky .white-bg {
    background-color: #fff
}

#section-os .sticky .black-bg {
    background-color: #000
}

#section-os .sticky .os-layer {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    overflow: hidden;
    top: 0;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-os .sticky .os-layer .visible-container {
    bottom: 0;
    height: 100%;
    left: 0;
    overflow: hidden;
    width: 100%
}

#section-os .sticky .os-layer .visible-container .content-container {
    bottom: 0;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    left: 0;
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-os .sticky .os-layer .visible-container .one-hand, #section-os .sticky .os-layer .visible-container .phones-layer {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-os .sticky .os-layer-2 .visible-container, #section-os .sticky .os-layer-3 .visible-container, #section-os .sticky .os-layer-4 .visible-container {
    height: 0
}

#section-os .sticky .os-layer-top {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    width: 100vw;
    width: calc(var(--vw, 1vw)*100)
}

#section-os .sticky .os-layer-top .top-text-container {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-os .sticky .os-layer-top .top-text-container .top-desc {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-os .sticky .os-layer-top .os-desc {
    left: 50%;
    opacity: 0;
    text-align: center;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

#section-os .sticky .os-layer-top .os-desc-2, #section-os .sticky .os-layer-top .os-desc-3 {
    color: #fff
}

#section-os .sticky .os-layer-top .os-desc-4 {
    color: #000
}

#section-notes {
    background-color: #fff;
    color: #666;
    margin-top: -1px;
    position: relative;
    z-index: 2
}

#section-notes .disclaimer-title, #section-notes .note-title, #section-notes .list-item {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

#section-notes .list-item .item-right {
    margin-left: 4px
}

#section-notes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width:1024px), (orientation:landscape) {
    #section-os .sticky .os-layer .visible-container .phones-layer {
        height: 31.9271vw;
        height: calc(var(--vw, 1vw)*31.9271);
        top: 17.9167vw;
        top: calc(var(--vw, 1vw)*17.9167);
        width: 53.9583vw;
        width: calc(var(--vw, 1vw)*53.9583)
    }

    #section-os .sticky .os-layer .visible-container .one-hand {
        height: 29.2708vw;
        height: calc(var(--vw, 1vw)*29.2708);
        top: 17.9167vw;
        top: calc(var(--vw, 1vw)*17.9167);
        width: 44.0625vw;
        width: calc(var(--vw, 1vw)*44.0625)
    }

    #section-os .sticky .os-layer-top .top-text-container {
        top: 6.6667vw;
        top: calc(var(--vw, 1vw)*6.6667)
    }

    #section-os .sticky .os-layer-top .top-text-container .title {
        margin-bottom: 1.25vw;
        margin-bottom: calc(var(--vw, 1vw)*1.25)
    }

    #section-os .sticky .os-layer-top .top-text-container .top-desc {
        font-size: 1.0417vw;
        font-size: calc(var(--vw, 1vw)*1.0417);
        line-height: 1.4583vw;
        line-height: calc(var(--vw, 1vw)*1.4583);
        width: 45.3125vw;
        width: calc(var(--vw, 1vw)*45.3125)
    }

    #section-os .sticky .os-layer-top .os-desc {
        top: 48.8542vw;
        top: calc(var(--vw, 1vw)*48.8542);
        width: 12.9479vw;
        width: calc(var(--vw, 1vw)*12.9479)
    }

    #section-notes {
        padding-bottom: 9.4792vw;
        padding-bottom: calc(var(--vw, 1vw)*9.4792)
    }

    #section-notes .disclaimer-title, #section-notes .note-title {
        font-size: .625vw;
        font-size: calc(var(--vw, 1vw)*.625);
        line-height: .75vw;
        line-height: calc(var(--vw, 1vw)*.75)
    }

    #section-notes .disclaimer-title {
        margin-top: 2.0833vw;
        margin-top: calc(var(--vw, 1vw)*2.0833)
    }

    #section-notes .disclaimer-list, #section-notes .note-list {
        margin-top: 1.0417vw;
        margin-top: calc(var(--vw, 1vw)*1.0417)
    }

    #section-notes .list-item {
        font-size: .625vw;
        font-size: calc(var(--vw, 1vw)*.625);
        line-height: .75vw;
        line-height: calc(var(--vw, 1vw)*.75);
        margin-bottom: .4167vw;
        margin-bottom: calc(var(--vw, 1vw)*.4167)
    }

    #section-os .sticky .os-layer-top .top-text-container {
        text-align: center
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    #section-os .sticky .os-layer .visible-container .phones-layer {
        height: 82.222vw;
        top: 83.333vw;
        width: 117.778vw
    }

    #section-os .sticky .os-layer .visible-container .one-hand {
        height: 82.222vw;
        top: 81.111vw;
        width: 100vw
    }

    #section-os .sticky .os-layer-top .top-text-container {
        top: 22.222vw;
        width: 88.889vw
    }

    #section-os .sticky .os-layer-top .top-text-container .title {
        margin-bottom: 5.556vw
    }

    #section-os .sticky .os-layer-top .top-text-container .top-desc {
        font-size: 4.444vw;
        line-height: 6.222vw;
        width: 88.889vw
    }

    #section-os .sticky .os-layer-top .os-desc {
        top: 168.889vw
    }

    #section-notes {
        padding-bottom: 20vw
    }

    #section-notes .disclaimer-title, #section-notes .note-title {
        font-size: 2.5vw;
        line-height: 3vw
    }

    #section-notes .disclaimer-title {
        margin-top: 5.556vw
    }

    #section-notes .disclaimer-list, #section-notes .note-list {
        margin-top: 3.333vw
    }

    #section-notes .list-item {
        font-size: 2.5vw;
        line-height: 3vw;
        margin-bottom: 2.222vw
    }
}

:root {
    --oh-nav-height: 80px
}

.zn--wrapper {
    /* font-family: MYingHei W5, Roman-55, Microsoft Yahei, sans-serif; */
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif; */
    font-size: 16px
}

.zn--wrapper * {
    box-sizing: border-box
}

.zn--wrapper a {
    text-decoration: none
}

.zn--wrapper img {
    display: block;
    max-width: none
}

.zn--wrapper canvas img {
    display: none
}

.zn--wrapper video {
    display: block;
    max-width: none
}

.zn--wrapper div[data-ll-status], .zn--wrapper figure[data-ll-status] {
    background-repeat: no-repeat;
    background-size: cover
}

.zn--wrapper br {
    /* font-family: Open Sans, -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Roboto, Arial, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, "sans-serif" */
}

body {
    line-height: normal;
    overflow: unset
}

body.hide-body {
    overflow: hidden
}

#header .nav {
    z-index: 99
}

#header .nav .nav-right>li, #header .nav .nav-right>li .info, #header .nav .nav-right>li a {
    margin-right: 0
}

#footer>.container-infinite>.container-text {
    overflow: hidden
}

#main-wrapper .container {
    margin: 0;
    padding: 0;
    width: auto
}

#main-wrapper .container:after, #main-wrapper .container:before {
    content: none
}

.g--container, .g--container-ls, .g--container-pt, .g--wrapper {
    margin: 0 auto
}

body.no-scroll {
    overflow-y: hidden
}

body.zn--body-fixed {
    position: fixed
}

#main-wrapper {
    position: relative
}

.zn--wrapper .center {
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    text-align: center
}

.zn--wrapper .center-content {
    align-items: center;
    display: flex;
    justify-content: center
}

.zn--wrapper .abs.center-hor {
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translate(-50%)
}

.zn--wrapper .abs.center-ver {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%)
}

.zn--wrapper .flex.center-ver {
    align-items: center
}

.zn--wrapper .flex.center-ver>.wrapper {
    width: 100%
}

.zn--wrapper .flex.center-hor {
    justify-content: center
}

.zn--wrapper .flex.center-hor>.wrapper {
    height: 100%
}

.zn--wrapper .g--sticky-container, .zn--wrapper .sticky-container {
    position: relative
}

.zn--wrapper .g--sticky-item, .zn--wrapper .sticky, .zn--wrapper .sticky-item {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

.zn--wrapper .black {
    color: #000
}

.zn--wrapper .white {
    color: #fff
}

.zn--wrapper .grey {
    color: #ffffff8f
}

.zn--wrapper .grey-light {
    color: #fff3
}

.zn--wrapper .grey {
    color: #000000b3
}

.zn--wrapper .grey-light {
    color: #00000052
}

.zn--wrapper .bg-black {
    background-color: #000
}

.zn--wrapper .bg-white {
    background-color: #fff
}

.zn--wrapper .full {
    height: 100%;
    width: 100%
}

.zn--wrapper .full-w {
    width: 100%
}

.zn--wrapper .full-h {
    height: 100%
}

.zn--wrapper .full-screen {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100)
}

.zn--wrapper .full-screen-nav {
    height: calc(100vh - 121px);
    height: calc(var(--vh, 1vh)*100 - 121px)
}

.zn--wrapper .flex {
    display: flex
}

.zn--wrapper .flex.align-center {
    align-items: center
}

.zn--wrapper .flex.content-center {
    justify-content: center
}

.zn--wrapper .rel {
    position: relative
}

.zn--wrapper .abs {
    position: absolute
}

.zn--wrapper .abs.clip {
    left: 0;
    top: 0
}

.zn--wrapper .fixed {
    position: fixed
}

.zn--wrapper .clip {
    left: 0;
    top: 0
}

.zn--wrapper .span {
    display: inline-block
}

.zn--wrapper .clickable {
    cursor: pointer
}

.zn--wrapper .g--cover {
    object-fit: cover
}

.zn--wrapper .g--flex {
    display: flex
}

.zn--wrapper .g--bold, .zn--wrapper .g--medium {
    /* font-family: OnePlus Sans Display Medium, Helvetica Neue, Helvetica, Arial, sans-serif */
}

.zn--wrapper img:not([src]):not([srcset]) {
    visibility: hidden
}

.zn--wrapper .g--popup-user {
    display: none
}

.zn--wrapper .no-wrap {
    white-space: nowrap
}

.g--video-converter .wrapper {
    height: 100%;
    position: relative
}

.g--video-converter .wrapper .video {
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%
}

.kv-banner, .kv-title, .play-text, .section-title, .text-line {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

.section-title {
    letter-spacing: 0
}

.color-desc, .color-title, .desc, .title {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

.desc {
    opacity: .8
}

.hz-text, .os-desc {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

.os-desc {
    opacity: .8
}

.blue-text {
    color: #4bb0cd
}

.spec-desc, .spec-value {
    /* font-family: OnePlus Sans Display Regular, Helvetica Neue, Helvetica, Arial, sans-serif */
}

.box-container, .full-width-container, .ls-box-container {
    margin-left: auto;
    margin-right: auto
}

.section-title-container .section-title .special {
    color: #4bb0cd;
    display: inline-block
}

.section-title-container .section-title .regular {
    display: inline-block
}

.rotate-element {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: -webkit-transform .4s linear 0s;
    transition: transform .4s linear 0s;
    transition: transform .4s linear 0s, -webkit-transform .4s linear 0s
}

.large-bg-color-container {
    background-color: #000;
    transition: background-color .3s linear
}

.large-bg-color-container #section-camera, .large-bg-color-container #section-charge, .large-bg-color-container #section-chip {
    color: #fff;
    transition: color .3s linear
}

.large-bg-color-container.white-enabled {
    background-color: #fff
}

.large-bg-color-container.white-enabled #section-camera, .large-bg-color-container.white-enabled #section-charge, .large-bg-color-container.white-enabled #section-chip {
    color: #000
}

@media (min-width:1024px) and (max-width:1399px) {
    :root {
        --oh-nav-height: 64px
    }
}

@media (min-width:1024px), (orientation:landscape) {
    .g--container, .g--container-ls {
        width: 68.3333vw;
        width: calc(var(--vw, 1vw)*68.3333)
    }

    .kv-title {
        font-size: 2.3958vw;
        font-size: calc(var(--vw, 1vw)*2.3958);
        letter-spacing: -.0297vw;
        letter-spacing: calc(var(--vw, 1vw)*-.0297);
        line-height: 2.875vw;
        line-height: calc(var(--vw, 1vw)*2.875)
    }

    .kv-banner {
        font-size: 3.9583vw;
        font-size: calc(var(--vw, 1vw)*3.9583);
        letter-spacing: -.0469vw;
        letter-spacing: calc(var(--vw, 1vw)*-.0469);
        line-height: 4.1667vw;
        line-height: calc(var(--vw, 1vw)*4.1667)
    }

    .text-line {
        font-size: 2.5vw;
        font-size: calc(var(--vw, 1vw)*2.5);
        line-height: 3.2292vw;
        line-height: calc(var(--vw, 1vw)*3.2292)
    }

    .play-text {
        font-size: 1.25vw;
        font-size: calc(var(--vw, 1vw)*1.25);
        line-height: 2.5vw;
        line-height: calc(var(--vw, 1vw)*2.5)
    }

    .color-title, .section-title {
        font-size: 4.1667vw;
        font-size: calc(var(--vw, 1vw)*4.1667);
        line-height: 4.5833vw;
        line-height: calc(var(--vw, 1vw)*4.5833)
    }

    .color-desc {
        font-size: .9896vw;
        font-size: calc(var(--vw, 1vw)*.9896);
        line-height: 1.3542vw;
        line-height: calc(var(--vw, 1vw)*1.3542)
    }

    .title {
        font-size: 2.0833vw;
        font-size: calc(var(--vw, 1vw)*2.0833);
        line-height: 2.5vw;
        line-height: calc(var(--vw, 1vw)*2.5)
    }

    .desc {
        font-size: 1.0417vw;
        font-size: calc(var(--vw, 1vw)*1.0417);
        line-height: 1.4583vw;
        line-height: calc(var(--vw, 1vw)*1.4583)
    }

    .hz-text {
        font-size: 1.6667vw;
        font-size: calc(var(--vw, 1vw)*1.6667);
        line-height: 2.5vw;
        line-height: calc(var(--vw, 1vw)*2.5)
    }

    .os-desc {
        font-size: 1.0417vw;
        font-size: calc(var(--vw, 1vw)*1.0417);
        line-height: 1.5104vw;
        line-height: calc(var(--vw, 1vw)*1.5104)
    }

    .spec-value {
        font-size: 5.2083vw;
        font-size: calc(var(--vw, 1vw)*5.2083);
        line-height: 5.2083vw;
        line-height: calc(var(--vw, 1vw)*5.2083)
    }

    .spec-desc {
        font-size: 1.25vw;
        font-size: calc(var(--vw, 1vw)*1.25);
        line-height: 1.6667vw;
        line-height: calc(var(--vw, 1vw)*1.6667)
    }

    .full-width-container {
        width: 100vw;
        width: calc(var(--vw, 1vw)*100)
    }

    .box-container, .ls-box-container {
        width: 68.3333vw;
        width: calc(var(--vw, 1vw)*68.3333)
    }

    .section-title-container {
        padding-bottom: 9.4792vw;
        padding-bottom: calc(var(--vw, 1vw)*9.4792);
        padding-top: 16.6667vw;
        padding-top: calc(var(--vw, 1vw)*16.6667)
    }

    .g--ls-hidden {
        display: none !important
    }
}

@media (orientation:portrait) and (max-width:1023px) {
    :root {
        --oh-nav-height: 48px
    }

    .g--pt-hidden {
        display: none !important
    }

    .zn--wrapper .full-screen-nav {
        height: calc(100vh - 101px);
        height: calc(var(--vh, 1vh)*100 - 101px)
    }

    .full-width-container {
        width: 100%
    }

    .ls-box-container {
        width: 100vw;
        width: calc(var(--vw, 1vw)*100)
    }

    .g--container, .g--container-pt {
        width: 88.889vw
    }

    .kv-title {
        font-size: 6.111vw;
        letter-spacing: -.072vw;
        line-height: 8.333vw
    }

    .kv-banner {
        font-size: 10vw;
        letter-spacing: -.111vw;
        line-height: 11.667vw
    }

    .text-line {
        font-size: 5.556vw;
        line-height: 8.333vw
    }

    .play-text {
        font-size: 3.889vw;
        line-height: 5.833vw
    }

    .section-title {
        font-size: 11.111vw;
        letter-spacing: -.139vw;
        line-height: 12.222vw
    }

    .color-title {
        font-size: 7.778vw;
        line-height: 11.667vw
    }

    .color-desc {
        font-size: 4.444vw;
        line-height: 6.667vw
    }

    .title {
        font-size: 7.778vw;
        line-height: 9.333vw
    }

    .desc {
        line-height: 6.222vw
    }

    .desc, .hz-text {
        font-size: 4.444vw
    }

    .hz-text {
        line-height: 7.778vw
    }

    .os-desc {
        font-size: 3.889vw;
        line-height: 4.667vw
    }

    .spec-value {
        font-size: 8.889vw;
        line-height: 8.333vw
    }

    .spec-desc {
        font-size: 3.889vw;
        line-height: 5.833vw
    }

    .box-container {
        width: 88.889vw
    }

    .section-title-container {
        padding-bottom: 20vw;
        padding-top: 30vw
    }
}

@media (max-width:720px) {
    .g--mb-hidden {
        display: none !important
    }
}

@media not screen and (max-width:720px) {
    .g--mb-show {
        display: none !important
    }
}