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

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

.zn--modal.zn--modal-show {
    visibility: visible;
    opacity: 1;
    transition: opacity .4s linear, height .2s ease;
    z-index: 1030;
}

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

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

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

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

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

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

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

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

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

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

.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 {
    top: -32px;
    right: 0;
    width: 12px;
    height: 12px;
    position: absolute;
    margin-left: auto;
    cursor: pointer;
    z-index: 2
}

@media (max-width:1023px) {
    .g--popup .g--popup-close {
        width: 24px;
        height: 24px
    }
}

@media (max-width: 1023px) {
    .g--popup .g--popup-close {
        right: 4.103vw
    }
}

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

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

@media (max-width:1023px) {
    .g--popup .g--popup-close .inner {
        transform: scale(.5)
    }
}

.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
}

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

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

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

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

#navbar ul+ul, #navbar ul+li, #navbar li+ul, #navbar li+li {}

@media (min-width: 1024px) {
    #navbar ul+ul, #navbar ul+li, #navbar li+ul, #navbar li+li {
        margin-left: 1.0417vw;
        margin-left: calc(1.0417 * var(--vw, 1vw))
    }
}

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

@media (max-width:1023px) {
    #navbar .wrapper+.wrapper {}
}

@media (max-width: 1023px) {
    #navbar .wrapper+.wrapper {
        margin-left: 4.103vw
    }
}

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

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

@media (max-width:1023px) {
    #navbar .nav-container {
        padding: 0 2.7778vw;
        padding: 0 calc(2.7778 * var(--vw, 1vw))
    }
}

.sticked#navbar .nav-container {
    background: rgba(255, 255, 255, 0.9)
}

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

[data-theme='dark']#navbar .nav-container {
    background: #000;
    border-color: rgba(255, 255, 255, 0.1)
}

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

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

#navbar .mask {
    background: rgba(253, 253, 253, 0.9);
    transition: background .3s ease
}

[data-theme='dark']#navbar .mask {
    background: rgba(21, 21, 21, 0.9)
}

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

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

@media (max-width:1023px) {
    #navbar .products {
        z-index: 3
    }
}

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

#navbar .arrow {
    transition: transform .3s
}

@media (max-width: 1023px) {
    #navbar .arrow {
        margin-right: 5.128vw;
        width: 5.128vw;
        height: 5.128vw
    }
}

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

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

#navbar .links .link {
    opacity: .4;
    transition: opacity .3s ease
}

#navbar .links .link.active {
    opacity: 1
}

@media (max-width:1023px) {
    #navbar .links {
        position: absolute;
        top: calc(100% + 1px);
        left: 0;
        height: 100%;
        margin-left: 0;
        padding: 0 2.7778vw;
        padding: 0 calc(2.7778 * var(--vw, 1vw));
        width: 100%;
        overflow-x: scroll;
        justify-content: flex-start;
        opacity: 0;
        pointer-events: none;
        background: rgba(255, 255, 255, 0.9);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        scrollbar-width: none
    }
    [data-theme='dark']#navbar .links {
        background: rgba(0, 0, 0, 0.9);
        border-color: rgba(255, 255, 255, 0.1)
    }
    #navbar .links.show {
        opacity: 1;
        pointer-events: auto;
        transition: opacity .3s
    }
    #navbar .links.show+ul .arrow {
        transform: rotate(180deg)
    }
    #navbar .links::-webkit-scrollbar {
        display: none
    }
}

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

@media (max-width:1023px) {
    #navbar .links .indicator {
        top: 39px
    }
}

#navbar .links .indicator::before {
    content: '';
    background: #f50514;
    position: absolute;
    width: 100%;
    height: 100%
}

@media (min-width:1024px) {
    #navbar .links .indicator::before {
        transform: translateX(-100%);
        transition: transform .4s
    }
}

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

@media (max-width:1023px) {
    #navbar .links::after {
        content: '';
        flex: 0 0 auto;
        width: 2.7778vw;
        width: calc(2.7778 * var(--vw, 1vw));
        height: 100%
    }
}

#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 {
    overflow: hidden;
    position: relative;
    min-width: 70px
}

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

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

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

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

#navbar .links[data-active="1"]>.wrapper:nth-child(1)::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
}

#section-kv {
    width: 100%
}

#section-kv .kv-sticky {
    width: 100%;
    height: 200vh;
    height: calc(200 * var(--vh, 1vh))
}

#section-kv .kv-sticky .gtm-part2 {
    left: 0;
    top: 110vh;
    top: calc(110 * var(--vh, 1vh))
}

#section-kv .kv-sticky-item {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    padding-top: 1px;
    overflow: hidden;
    background: #000
}

#section-kv .kv-sticky-item .bg-container {
    z-index: 1
}

#section-kv .kv-sticky-item .bg-container .bg-origin .inner {
    background: radial-gradient(33.65% 43.07% at 50% 50%, rgba(133, 137, 140, 0.8) 0%, rgba(71, 75, 76, 0.8) 41.84%, rgba(27, 31, 32, 0.8) 75.74%, rgba(5, 6, 7, 0.8) 100%);
    position: absolute
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .bg-container .bg-origin .inner {
        width: 169.375vw;
        width: calc(169.375 * var(--vw, 1vw));
        height: 132.1875vw;
        height: calc(132.1875 * var(--vw, 1vw));
        left: -34.6875vw;
        left: calc(-34.6875 * var(--vw, 1vw));
        top: -37.3958vw;
        top: calc(-37.3958 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .bg-container .bg-origin .inner {
        position: absolute
    }
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .bg-container .bg-origin .inner {
        width: 498.974vw;
        height: 389.744vw;
        top: -102.564vw;
        left: -199.487vw
    }
}

#section-kv .kv-sticky-item .bg-container .bg-boom-0 {
    z-index: 2
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 {
        margin-top: 20.7813vw;
        margin-top: calc(20.7813 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 {
        margin-top: 10.256vw
    }
}

#section-kv .kv-sticky-item .bg-container .bg-boom-0 .bg-boom-2 {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 .bg-boom-2 {
        width: 147.2396vw;
        width: calc(147.2396 * var(--vw, 1vw));
        height: 102.0833vw;
        height: calc(102.0833 * var(--vw, 1vw));
        top: -36.9792vw;
        top: calc(-36.9792 * var(--vw, 1vw));
        left: -21.8229vw;
        left: calc(-21.8229 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 .bg-boom-2 {}
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 .bg-boom-2 img {
        transform: rotate(-22deg)
    }
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .bg-container .bg-boom-0 .bg-boom-2 {
        width: 287.179vw;
        height: 198.718vw;
        left: -82.821vw;
        top: -26.41vw
    }
}

#section-kv .kv-sticky-item .phone-container0 {
    z-index: 2;
    width: 100%
}

#section-kv .kv-sticky-item .phone-container0 .phone-content {
    justify-content: center
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .phone-container0 .phone-content {
        margin: 20.7813vw 0 0 4.7917vw;
        margin: calc(20.7813 * var(--vw, 1vw)) 0 0 calc(4.7917 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .phone-container0 .phone-content {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .phone-container0 .phone-content {
        margin: 52.564vw 0 0 21.538vw
    }
}

#section-kv .kv-sticky-item .phone-container0 .phone-content>* {
    flex-shrink: 0;
    flex-grow: 1
}

#section-kv .kv-sticky-item .phone-container0 .silver {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .phone-container0 .silver {
        width: 57.2396vw;
        width: calc(57.2396 * var(--vw, 1vw));
        height: 38.2292vw;
        height: calc(38.2292 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .phone-container0 .silver {}
    #section-kv .kv-sticky-item .phone-container0 .silver img {
        transform: rotate(-22deg)
    }
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .phone-container0 .silver {
        width: 112.051vw;
        height: 74.615vw;
        margin-top: 28.718vw
    }
}

#section-kv .kv-sticky-item .phone-container0 .silver .blur {
    top: 0;
    right: 0;
    opacity: 0
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .phone-container0 .silver .blur {
        width: 85.9375vw;
        width: calc(85.9375 * var(--vw, 1vw));
        height: 39.0625vw;
        height: calc(39.0625 * var(--vw, 1vw))
    }
}

#section-kv .kv-sticky-item .phone-container0 .black {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .phone-container0 .black {
        width: 76.4583vw;
        width: calc(76.4583 * var(--vw, 1vw));
        height: 34.0625vw;
        height: calc(34.0625 * var(--vw, 1vw));
        margin: 6.9792vw 0 0 -10.1042vw;
        margin: calc(6.9792 * var(--vw, 1vw)) 0 0 calc(-10.1042 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .phone-container0 .black {}
    #section-kv .kv-sticky-item .phone-container0 .black img {
        transform: rotate(-22deg)
    }
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .phone-container0 .black {
        width: 149.487vw;
        height: 66.667vw;
        margin-left: -24.359vw
    }
}

#section-kv .kv-sticky-item .phone-container0 .black .blur {
    opacity: 0
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .phone-container0 .black .blur {
        width: 85.9375vw;
        width: calc(85.9375 * var(--vw, 1vw));
        height: 28.3854vw;
        height: calc(28.3854 * var(--vw, 1vw))
    }
}

#section-kv .kv-sticky-item .title-container {
    z-index: 3;
    width: 100%;
    left: 0;
    text-align: center;
    color: #fff;
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .title-container {
        top: 3.125vw;
        top: calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .title-container {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .title-container {
        top: 15.385vw
    }
}

#section-kv .kv-sticky-item .title-container .title-0 {
    margin: auto
}
#section-kv .kv-sticky-item .title-container .title-wrap {
    position: relative;
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .title-container .title-0 {
        width: 95.4271vw;
        width: calc(95.4271 * var(--vw, 1vw));
        height: 3.8021vw;
        height: calc(3.8021 * var(--vw, 1vw));
        font-size: 70px;
        line-height: 3.8021vw;
    }
    #section-kv .kv-sticky-item .title-container .title-0 .title-5g {
        position: absolute;
        right: -1.5em;
        top: -.5em;
        font-size: .65em;
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .title-container .title-0 {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .title-container .title-0 {
        width: 95%;
        height: 6.41vw;
        font-size: 6.25vw;
    }
    #section-kv .kv-sticky-item .title-container .title-0 .title-5g {
        position: absolute;
        right: -1.5em;
        top: -.35em;
        font-size: .7em;
    }
}

#section-kv .kv-sticky-item .title-container .title-1 {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .title-container .title-1 {
        width: 98.4271vw;
        width: calc(98.4271 * var(--vw, 1vw));
        height: 5.2083vw;
        height: calc(5.2083 * var(--vw, 1vw));
        margin: 1.5625vw auto 1.5625vw;
        margin: calc(1.5625 * var(--vw, 1vw)) auto calc(1.5625 * var(--vw, 1vw));
        color: #fff;
        font-size: 4.5vw;
        font-size: calc(4.5 * var(--vw, 1vw));
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .title-container .title-1 {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .title-container .title-1 {
        width: 98%;
        margin: 3.846vw auto 5.128vw;
        font-size: 7vw;
    }
}

#section-kv .kv-sticky-item .title-container p {
    color: #fff;
    line-height: 1.2
}

#section-kv .kv-sticky-item .rt-container {
    z-index: 4
}

#section-kv .kv-sticky-item .rt-container .striped {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center
}

#section-kv .kv-sticky-item .rt-container .striped .striped-bg {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .rt-container .striped .striped-bg {
        width: 166.6667vw;
        width: calc(166.6667 * var(--vw, 1vw));
        height: 130.2083vw;
        height: calc(130.2083 * var(--vw, 1vw));
        margin-top: -15.625vw;
        margin-top: calc(-15.625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .rt-container .striped .striped-bg {
        width: 147vh;
        width: calc(147 * var(--vh, 1vh));
        height: 125vh;
        height: calc(125 * var(--vh, 1vh));
        position: absolute;
        top: -25vh;
        top: calc(-25 * var(--vh, 1vh));
        left: -43vh;
        left: calc(-43 * var(--vh, 1vh))
    }
}

#section-kv .kv-sticky-item .rt-container .striped .rt-text {
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 17.59%, #565b62 70.59%);
    mix-blend-mode: multiply;
    transform-origin: 43% 33%
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .rt-container .striped .rt-text {
        transform-origin: 50% 32%
    }
}

#section-kv .kv-sticky-item .rt-container .striped .rt-text img {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .rt-container .striped .rt-text img {
        width: 27.0833vw;
        width: calc(27.0833 * var(--vw, 1vw));
        height: 16.3021vw;
        height: calc(16.3021 * var(--vw, 1vw));
        margin: 10.4167vw auto;
        margin: calc(10.4167 * var(--vw, 1vw)) auto
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .rt-container .striped .rt-text img {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .rt-container .striped .rt-text img {
        width: 55.385vw;
        height: 33.59vw;
        margin: 47.179vw auto
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-kv .kv-sticky-item .rt-container .striped .rt-text img {
        width: 300px;
        height: 182px;
        margin: 254px auto
    }
}

#section-kv .kv-sticky-item .rt-container .rt-detail {
    z-index: 3;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff
}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .rt-container .rt-detail {
        top: 25vw;
        top: calc(25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .kv-sticky-item .rt-container .rt-detail {}
    #section-kv .kv-sticky-item .rt-container .rt-detail> :nth-child(2) {}
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .rt-container .rt-detail> :nth-child(2) {
        margin: 3.846vw auto 3.846vw
    }
}

@media (max-width: 1023px) {
    #section-kv .kv-sticky-item .rt-container .rt-detail {
        top: 88.462vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-kv .kv-sticky-item .rt-container .rt-detail {
        top: 500px
    }
}

#section-kv .kv-sticky-item .rt-container .rt-detail .detail-1 {}

@media (min-width: 1024px) {
    #section-kv .kv-sticky-item .rt-container .rt-detail .detail-1 {
        margin: 1.0417vw auto 1.0417vw;
        margin: calc(1.0417 * var(--vw, 1vw)) auto calc(1.0417 * var(--vw, 1vw))
    }
}

#section-kv .kv-sticky .bg-origin {
    opacity: .1
}

#section-kv .kv-sticky .bg-boom-0 {
    opacity: 0;
    transform: scale(.6)
}

#section-kv .kv-sticky .bg-boom-0 .bg-boom-1 {
    transform: translateY(-3vh);
    transform: translateY(calc(-3 * var(--vh, 1vh)))
}

#section-kv .kv-sticky .cover {
    opacity: 1
}

#section-kv .kv-sticky .silver {
    transform: translate3d(-50vw, 10vh, 0);
    transform: translate3d(-50vw, calc(10 * var(--vh, 1vh)), 0);
    transform: translate3d(calc(-50 * var(--vw, 1vw)), 10vh, 0);
    transform: translate3d(calc(-50 * var(--vw, 1vw)), calc(10 * var(--vh, 1vh)), 0)
}

#section-kv .kv-sticky .black {
    transform: translate3d(70vw, 10vh, 0);
    transform: translate3d(70vw, calc(10 * var(--vh, 1vh)), 0);
    transform: translate3d(calc(70 * var(--vw, 1vw)), 10vh, 0);
    transform: translate3d(calc(70 * var(--vw, 1vw)), calc(10 * var(--vh, 1vh)), 0)
}

#section-kv .kv-sticky .title {
    opacity: 0;
    transform: translateY(40px)
}

#section-kv .kv-sticky .phone-content {
    transform: translateY(-3vh);
    transform: translateY(calc(-3 * var(--vh, 1vh)))
}

#section-kv .kv-sticky.active .bg-origin {
    opacity: 1;
    transition: opacity .6s
}

#section-kv .kv-sticky.active .silver, #section-kv .kv-sticky.active .black {
    transform: translate3d(0, 0, 0);
    transition: transform .6s
}

#section-kv .kv-sticky.active .cover {
    opacity: 0;
    transition: opacity .6s .6s
}

#section-kv .kv-sticky.active .bg-boom-0 {
    opacity: 1;
    transform: scale(1);
    transition: opacity .6s .6s, transform .6s .6s
}

#section-kv .kv-sticky.active .bg-boom-0 .bg-boom-1 {
    transform: translateY(0);
    transition: transform .6s 1.2s
}

#section-kv .kv-sticky.active .phone-content {
    transform: translateY(0);
    transition: transform .6s 1.2s
}

#section-kv .kv-sticky.active .title {
    opacity: 1;
    transform: translateY(0)
}

#section-kv .kv-sticky.active .title-0 {
    transition: transform .3s 1.2s, opacity .4s 1.2s
}

#section-kv .kv-sticky.active .title-1 {
    transition: transform .3s 1.3s, opacity .4s 1.3s
}

#section-kv .kv-sticky.active .title-2 {
    transition: transform .3s 1.4s, opacity .4s 1.4s
}

#section-kv .ksp {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh))
}

#section-kv .ksp .bg-video {
    z-index: 1
}

#section-kv .ksp .bg-video video, #section-kv .ksp .bg-video img, #section-kv .ksp .bg-video canvas {
    object-fit: cover
}

#section-kv .ksp .ksp-detail {
    z-index: 2;
    height: 100%;
    margin: -2px auto;
    color: #fff
}

@media (min-width: 1024px) {
    #section-kv .ksp .ksp-detail {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        padding-top: 6.25vw;
        padding-top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .ksp .ksp-detail {
        _white-space: nowrap;
        text-align: center
    }
}

@media (max-width: 1023px) {
    #section-kv .ksp .ksp-detail {
        padding-top: 30.769vw
    }
}

#section-kv .ksp .ksp-detail> :not(:last-child) {}

@media (min-width: 1024px) {
    #section-kv .ksp .ksp-detail> :not(:last-child) {
        margin-bottom: 1.5625vw;
        margin-bottom: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .ksp .ksp-detail> :not(:last-child) {}
}

@media (max-width: 1023px) {
    #section-kv .ksp .ksp-detail> :not(:last-child) {
        margin-bottom: 2.564vw
    }
}

#section-kv .ksp .ksp-detail .play-video {
    left: 0;
    cursor: pointer
}

@media (min-width: 1024px) {
    #section-kv .ksp .ksp-detail .play-video {
        bottom: 6.25vw;
        bottom: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-kv .ksp .ksp-detail .play-video {
        align-items: center
    }
    #section-kv .ksp .ksp-detail .play-video .icon {}
    #section-kv .ksp .ksp-detail .play-video .icon img {
        width: 100%;
        height: 100%
    }
}

@media (max-width: 1023px) {
    #section-kv .ksp .ksp-detail .play-video .icon {
        width: 5.128vw;
        height: 4.872vw;
        margin-right: 2.564vw
    }
}

@media (max-width: 1023px) {
    #section-kv .ksp .ksp-detail .play-video {
        bottom: 15.385vw;
        left: 12.821vw
    }
}

#section-design {
    width: 100%;
    background: #e3e5e6
}

@media (min-width: 1024px) {
    #section-design {
        padding-top: 10.4167vw;
        padding-top: calc(10.4167 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design {}
}

@media (max-width: 1023px) {
    #section-design {
        padding-top: 15.385vw
    }
}

#section-design .design-headline {}

@media (min-width: 1024px) {
    #section-design .design-headline {
        margin-top: 4.1667vw;
        margin-top: calc(4.1667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .design-headline {}
}

@media (max-width: 1023px) {
    #section-design .design-headline {
        margin-top: 7.692vw
    }
}

#section-design .color-sticky-container {
    width: 100%;
    height: 370vh;
    height: calc(370 * var(--vh, 1vh))
}

#section-design .color-sticky-container .black-trigger {
    top: 0
}

#section-design .color-sticky-container .silver-trigger {
    top: 50vh;
    top: calc(50 * var(--vh, 1vh))
}

#section-design .color-sticky-container .green-trigger {
    top: 150vh;
    top: calc(150 * var(--vh, 1vh))
}

#section-design .color-sticky-container .color-sticky-item {
    width: 100%;
    display: flex;
    justify-content: center;
    height: auto;
    min-height: 100vh;
    min-height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    #section-design .color-sticky-container .color-sticky-item {
        padding-bottom: 15.625vw;
        padding-bottom: calc(15.625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .color-sticky-container .color-sticky-item {}
    #section-design .color-sticky-container .color-sticky-item .colornav {}
}

@media (max-width: 1023px) {
    #section-design .color-sticky-container .color-sticky-item .colornav {
        margin-top: 17.949vw
    }
}

@media (max-width: 1023px) {
    #section-design .color-sticky-container .color-sticky-item {
        padding-bottom: 41.026vw
    }
}

#section-design .colors-gallery {}

@media (min-width: 1024px) {
    #section-design .colors-gallery {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        margin-top: calc(60px + 2.0833vw);
        margin-top: calc(60px + (2.0833 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery {}
}

@media (max-width: 1023px) {
    #section-design .colors-gallery {
        width: 94.872vw
    }
}

#section-design .colors-gallery .color-imgs {
    justify-content: space-between
}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs {
        margin-top: 1.5625vw;
        margin-top: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs {
        flex-direction: column
    }
    #section-design .colors-gallery .color-imgs img {
        object-fit: cover
    }
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs {
        margin-top: 3.846vw
    }
}

#section-design .colors-gallery .color-imgs .left .color-img {
    overflow: hidden
}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .left .color-img {
        width: 48.9583vw;
        width: calc(48.9583 * var(--vw, 1vw));
        height: 52.0833vw;
        height: calc(52.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .left .color-img {
        height: 46.79802955665025vh;
        height: calc(46.79802955665025 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .left .color-img {
        width: 94.872vw
    }
}

#section-design .colors-gallery .color-imgs .right {
    flex-direction: column
}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .right {
        width: 32.2917vw;
        width: calc(32.2917 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right {
        flex-direction: row
    }
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right {
        margin-top: 2.564vw
    }
}

#section-design .colors-gallery .color-imgs .right .color-img {
    width: 100%;
    overflow: hidden
}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .right .color-img {
        height: 23.9583vw;
        height: calc(23.9583 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right .color-img {
        height: 27.093596059113302vh;
        height: calc(27.093596059113302 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right .color-img {
        width: 42.308vw
    }
}

#section-design .colors-gallery .color-imgs .right .color-img .img img {}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .right .color-img .img img {
        width: 35.5729vw;
        width: calc(35.5729 * var(--vw, 1vw));
        height: 76.5104vw;
        height: calc(76.5104 * var(--vw, 1vw));
        margin: 4.1667vw 0 0 6.25vw;
        margin: calc(4.1667 * var(--vw, 1vw)) 0 0 calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right .color-img .img img {}
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right .color-img .img img {
        width: 55.128vw;
        height: 117.949vw;
        margin: 7.692vw 0 0 5.128vw
    }
}

#section-design .colors-gallery .color-imgs .right .color-img .img.black {
    background: linear-gradient(180deg, #000 0%, #2f2f2f 100%)
}

#section-design .colors-gallery .color-imgs .right .color-img .img.silver {
    background: linear-gradient(180deg, #d6d7da 0%, #adb1b4 100%)
}

#section-design .colors-gallery .color-imgs .right .color-img .img.green {
    background: linear-gradient(180deg, #fff5ee 2.08%, #def5ea 11.46%, #add6cf 100%)
}

#section-design .colors-gallery .color-imgs .right .detail {
    _white-space: nowrap;
}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .right .detail {
        margin-left: 2.0833vw;
        margin-left: calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right .detail {
        white-space: unset
    }
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right .detail {
        margin-left: 5.128vw;
        width: 46.154vw
    }
}

#section-design .colors-gallery .color-imgs .right .detail .detail-item> :first-child {}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .right .detail .detail-item> :first-child {
        margin: 4.1667vw 0 2.0833vw;
        margin: calc(4.1667 * var(--vw, 1vw)) 0 calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right .detail .detail-item> :first-child {
        font-size: 2.955665024630542vh;
        font-size: calc(2.955665024630542 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right .detail .detail-item> :first-child {
        margin: 2.564vw 0 6.625vw
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right .detail .detail-item> :not(:first-child) {
        font-size: 1.970443349753695vh;
        font-size: calc(1.970443349753695 * var(--vh, 1vh))
    }
}

#section-design .colors-gallery .color-imgs .right .detail .gallery-trigger {
    cursor: pointer;
    justify-content: flex-start;
    _white-space: nowrap;
    align-items: center
}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right .detail .gallery-trigger {
        margin-top: 5vw
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery .color-imgs .right .detail .gallery-trigger {
        margin-left: 0
    }
}

#section-design .colors-gallery .color-imgs .right .detail .gallery-trigger .icon {}

@media (max-width: 1023px) {
    #section-design .colors-gallery .color-imgs .right .detail .gallery-trigger .icon {
        width: 5.128vw;
        height: 4.872vw;
        margin-right: 2.564vw
    }
}

@media (min-width: 1024px) {
    #section-design .colors-gallery .color-imgs .right .detail .gallery-trigger .icon {
        margin-right: 1.0417vw;
        margin-right: calc(1.0417 * var(--vw, 1vw))
    }
}

#section-design .colors-gallery .color-imgs .right .detail .gallery-trigger .icon img {
    width: 100%;
    height: 100%
}

#section-design .colors-gallery .black {
    transition: opacity .8s
}

#section-design .colors-gallery .silver, #section-design .colors-gallery .green {
    opacity: 0;
    transition: opacity .8s
}

#section-design .colors-gallery .color-img {
    cursor: pointer;
    transition: background .8s
}

#section-design .colors-gallery .right .img img {
    transition: transform .5s
}

#section-design .colors-gallery .scale-enter {
    transform: scale(1.025);
    transition: transform .8s
}

#section-design .colors-gallery .scale-leave {
    transform: scale(1.05);
    transition: transform .8s
}

#section-design .colors-gallery.theme-black .black {
    opacity: 1
}

#section-design .colors-gallery.theme-black .colornav-item.color-black {
    border-color: rgba(0, 0, 0, 0.4)
}

#section-design .colors-gallery.theme-black .right .img img {
    transform: translateY(0)
}

#section-design .colors-gallery.theme-silver .silver {
    opacity: 1
}

#section-design .colors-gallery.theme-silver .black {
    opacity: 0
}

#section-design .colors-gallery.theme-silver .colornav-item.color-silver {
    border-color: rgba(0, 0, 0, 0.4)
}

#section-design .colors-gallery.theme-silver .right .img img {}

@media (min-width: 1024px) {
    #section-design .colors-gallery.theme-silver .right .img img {
        transform: translateY(-30.4167vw);
        transform: translateY(calc(-30.4167 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery.theme-silver .right .img img {}
}

@media (max-width: 1023px) {
    #section-design .colors-gallery.theme-silver .right .img img {
        transform: translateY(-51.795vw)
    }
}

#section-design .colors-gallery.theme-green .green {
    opacity: 1
}

#section-design .colors-gallery.theme-green .black {
    opacity: 0
}

#section-design .colors-gallery.theme-green .colornav-item.color-green {
    border-color: rgba(0, 0, 0, 0.4)
}

#section-design .colors-gallery.theme-green .right .img img {}

@media (min-width: 1024px) {
    #section-design .colors-gallery.theme-green .right .img img {
        transform: translateY(-60.8854vw);
        transform: translateY(calc(-60.8854 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    #section-design .colors-gallery.theme-green .right .img img {}
}

@media (max-width: 1023px) {
    #section-design .colors-gallery.theme-green .right .img img {
        transform: translateY(-75.385vw)
    }
}

.colornav {
    justify-content: space-between
}

.colornav.disabled {
    pointer-events: none
}

.colornav .colornav-label span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%)
}

@media (max-width:1023px) {
    .colornav .colornav-label span {}
}

@media (max-width: 1023px) {
    .colornav .colornav-label span {
        left: 2.564vw
    }
}

.colornav .colornav-items .colornav-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid transparent;
    cursor: pointer
}

.colornav .colornav-items .colornav-item .inner {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@media (max-width:1023px) {
    .colornav .colornav-items .colornav-item {
        width: 36px;
        height: 36px
    }
    .colornav .colornav-items .colornav-item .inner {
        width: 24px;
        height: 24px
    }
}

.colornav .colornav-items .color-black .inner {
    background: #000
}

.colornav .colornav-items .color-silver {}

@media (min-width: 1024px) {
    .colornav .colornav-items .color-silver {
        margin: 0 1.5625vw;
        margin: 0 calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .colornav .colornav-items .color-silver {}
}

@media (max-width: 1023px) {
    .colornav .colornav-items .color-silver {
        margin: 0 4.615vw
    }
}

.colornav .colornav-items .color-silver .inner {
    background: linear-gradient(0, #b8bfc1 1.56%, #858b8e 20.47%, #e2e8eb 100%);
    opacity: .42
}

.colornav .colornav-items .color-green .inner {
    background: linear-gradient(180deg, #b0d8cf 0%, #75a3ab 100%)
}

.gallery-popup {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #c5c7c9 0%, #e3e5e6 88.52%);
    align-items: center;
    justify-content: center;
    -webkit-user-select: none;
    user-select: none
}

.gallery-popup .close {
    top: 0;
    right: 0;
    cursor: pointer
}

@media (max-width: 1023px) {
    .gallery-popup .close {
        width: 12.308vw;
        height: 12.308vw
    }
}

@media (min-width: 1024px) {
    .gallery-popup .close {
        width: 4.1667vw;
        width: calc(4.1667 * var(--vw, 1vw));
        height: 4.1667vw;
        height: calc(4.1667 * var(--vw, 1vw))
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .gallery-popup .close {
        width: 60px;
        height: 60px
    }
}

.gallery-popup .close:hover {
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05)
}

.gallery-popup .arrow-wrapper {
    display: flex;
    justify-content: center
}

@media (max-width: 1023px) {
    .gallery-popup .arrow-wrapper {
        margin-top: 5.128vw
    }
}

.gallery-popup .arrow-wrapper .prev {}

@media (max-width: 1023px) {
    .gallery-popup .arrow-wrapper .prev {
        margin-right: 25.128vw
    }
}

.gallery-popup .arrow {
    cursor: pointer;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (min-width: 1024px) {
    .gallery-popup .arrow {
        width: 6.0417vw;
        width: calc(6.0417 * var(--vw, 1vw));
        height: 3.125vw;
        height: calc(3.125 * var(--vw, 1vw));
        border-radius: 2.0833vw;
        border-radius: calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .gallery-popup .arrow {
        display: flex;
        justify-content: center;
        align-items: center
    }
    .gallery-popup .arrow img {}
}

@media (max-width: 1023px) {
    .gallery-popup .arrow img {
        width: 7.692vw;
        height: 2.051vw
    }
}

@media (max-width: 1023px) {
    .gallery-popup .arrow {
        width: 16.923vw;
        height: 9.231vw;
        border-radius: 6.154vw
    }
}

@media (min-width: 1024px) {
    .gallery-popup .arrow img {
        width: 2.6042vw;
        width: calc(2.6042 * var(--vw, 1vw));
        height: 0.625vw;
        height: calc(0.625 * var(--vw, 1vw))
    }
}

.gallery-popup .arrow:hover {
    border: 2px solid #000
}

.gallery-popup .arrow.disabled {
    opacity: 0;
    pointer-events: none
}

.gallery-popup .img-wrapper {
    z-index: 1
}

@media (min-width: 1024px) {
    .gallery-popup .img-wrapper {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        margin: 0 1.5625vw;
        margin: 0 calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .gallery-popup .img-wrapper {
        margin: auto
    }
}

@media (max-width: 1023px) {
    .gallery-popup .img-wrapper {
        width: 89.744vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .gallery-popup .img-wrapper {
        margin-top: 70px
    }
}

.gallery-popup .img-wrapper .colornav {}

@media (min-width: 1024px) {
    .gallery-popup .img-wrapper .colornav {
        margin-bottom: 1.5625vw;
        margin-bottom: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .gallery-popup .img-wrapper .colornav {}
}

@media (max-width: 1023px) {
    .gallery-popup .img-wrapper .colornav {
        margin-bottom: 7.692vw
    }
}

.gallery-popup .img-wrapper .colornav .colornav-label span {
    opacity: 0
}

.gallery-popup .img-wrapper .colornav .colornav-label span.active {
    opacity: 1
}

.gallery-popup .img-wrapper .colornav .colornav-items .colornav-item.active {
    border-color: rgba(0, 0, 0, 0.4)
}

.gallery-popup .img-wrapper .img-list, .gallery-popup .img-wrapper .img-item, .gallery-popup .img-wrapper .slick-slide {}

@media (min-width: 1024px) {
    .gallery-popup .img-wrapper .img-list, .gallery-popup .img-wrapper .img-item, .gallery-popup .img-wrapper .slick-slide {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        height: 44.0625vw;
        height: calc(44.0625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .gallery-popup .img-wrapper .img-list, .gallery-popup .img-wrapper .img-item, .gallery-popup .img-wrapper .slick-slide {
        height: 70.44334975369459vh;
        height: calc(70.44334975369459 * var(--vh, 1vh))
    }
    .gallery-popup .img-wrapper .img-list img, .gallery-popup .img-wrapper .img-item img, .gallery-popup .img-wrapper .slick-slide img {
        object-fit: cover
    }
}

@media (max-width: 1023px) {
    .gallery-popup .img-wrapper .img-list, .gallery-popup .img-wrapper .img-item, .gallery-popup .img-wrapper .slick-slide {
        width: 89.744vw
    }
}

.zn--modal .gallery-popup {
    display: flex
}

#section-performance {
    width: 100%;
    background: #e3e5e6
}

#section-performance .performance-chapter .text {
    z-index: 2;
    color: #fff
}

@media (min-width: 1024px) {
    #section-performance .performance-chapter .text {
        padding-top: 30.8333vw;
        padding-top: calc(30.8333 * var(--vw, 1vw))
    }
}

#section-performance .performance-headline {}

@media (min-width: 1024px) {
    #section-performance .performance-headline {
        margin-top: 6.25vw;
        margin-top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-performance .performance-headline {}
}

@media (max-width: 1023px) {
    #section-performance .performance-headline {
        margin-top: 7.692vw
    }
}

#section-performance .z-title {}

@media (max-width: 1023px) {
    #section-performance .z-title {
        margin-top: 15.385vw
    }
}

#section-performance .intro-performance-sticky {
    width: 100%;
    height: 550vh;
    height: calc(550 * var(--vh, 1vh))
}

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

#section-performance .intro-performance-sticky .intro-performance .detail-container {
    z-index: 2;
    _white-space: nowrap;
}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container {
        margin: 8.3333vw 0 0 45.0833vw;
        margin: calc(8.3333 * var(--vw, 1vw)) 0 0 calc(45.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container {
        width: 76.923vw;
        margin: 22.641vw auto 0
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container {
        margin: 100px auto 0
    }
}

#section-performance .intro-performance-sticky .intro-performance .detail-container .detail-summarize {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container .detail-summarize {
        margin: 1.5625vw 0 3.125vw;
        margin: calc(1.5625 * var(--vw, 1vw)) 0 calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container .detail-summarize {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container .detail-summarize {
        margin: 2.564vw 0 7.692vw
    }
}

#section-performance .intro-performance-sticky .intro-performance .detail-container .learn-more-box-btn {
    flex-direction: row-reverse;
    cursor: pointer;
    justify-content: flex-end;
    align-items: center
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container .learn-more-box-btn {
        margin-left: 0
    }
}

#section-performance .intro-performance-sticky .intro-performance .detail-container .learn-more-box-btn .icon {}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container .learn-more-box-btn .icon {
        width: 5.128vw;
        height: 4.872vw;
        margin-left: 2.564vw
    }
}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance .detail-container .learn-more-box-btn .icon {
        margin-left: 1.0417vw;
        margin-left: calc(1.0417 * var(--vw, 1vw))
    }
}

#section-performance .intro-performance-sticky .intro-performance .detail-container .learn-more-box-btn .icon img {
    width: 100%;
    height: 100%
}

#section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content {
        width: 18.2292vw;
        width: calc(18.2292 * var(--vw, 1vw));
        height: 60.7813vw;
        height: calc(60.7813 * var(--vw, 1vw));
        margin: 13.5417vw 0 0 25.2083vw;
        margin: calc(13.5417 * var(--vw, 1vw)) 0 0 calc(25.2083 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content {
        width: 42.308vw;
        height: 138.974vw;
        margin: 80.513vw auto 41.026vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content {
        width: 165px;
        height: 542px;
        margin: 414px auto 86px
    }
}

#section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .layer {
    object-fit: contain;
    transition: transform .7s
}

#section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .layer-2 {
    transform-origin: 40% -5%
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .layer-2 {
        transform-origin: 0% 15%
    }
}

#section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .layer-3 {
    transform-origin: -10% -5%
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .layer-3 {
        transform-origin: -5% 0%
    }
}

#section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .coloros-seq {
    opacity: 0
}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .coloros-seq {
        width: 17.9688vw;
        width: calc(17.9688 * var(--vw, 1vw));
        height: 60.2083vw;
        height: calc(60.2083 * var(--vw, 1vw));
        left: 0.2083vw;
        left: calc(0.2083 * var(--vw, 1vw));
        top: -3.9583vw;
        top: calc(-3.9583 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .coloros-seq {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .coloros-seq {
        width: 41.538vw;
        height: 138.205vw;
        left: 0.513vw;
        top: 0.513vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance .layer-container .layer-content .coloros-seq {
        width: 162px;
        height: 539px;
        left: 2px;
        top: 2px
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-0 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-0 {
        transform: translate3d(-23.0729vw, -5.2083vw, 0);
        transform: translate3d(calc(-23.0729 * var(--vw, 1vw)), calc(-5.2083 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-0 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-0 {
        transform: translate3d(-33.59vw, -10.256vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-1 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-1 {
        transform: translate3d(-10.5208vw, 0.4167vw, 0);
        transform: translate3d(calc(-10.5208 * var(--vw, 1vw)), calc(0.4167 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-1 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-1 {
        transform: translate3d(-14.103vw, -1.795vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-2 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-2 {
        transform: translate3d(-2.0833vw, 3.125vw, 0);
        transform: translate3d(calc(-2.0833 * var(--vw, 1vw)), calc(3.125 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-2 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-2 {
        transform: translate3d(2.564vw, 5.128vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-3 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-3 {
        transform: translate3d(0.625vw, 5.8854vw, 0);
        transform: translate3d(calc(0.625 * var(--vw, 1vw)), calc(5.8854 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-3 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-3 {
        transform: translate3d(7.692vw, 7.436vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-4 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-4 {
        transform: translate3d(12.7604vw, 11.0417vw, 0);
        transform: translate3d(calc(12.7604 * var(--vw, 1vw)), calc(11.0417 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-4 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-4 {
        transform: translate3d(28.462vw, 14.359vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-5 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-5 {
        transform: translate3d(26.0938vw, 16.5625vw, 0);
        transform: translate3d(calc(26.0938 * var(--vw, 1vw)), calc(16.5625 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-5 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-5 {
        transform: translate3d(48.718vw, 22.821vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-6 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-6 {
        transform: translate3d(39.1146vw, 22.0833vw, 0);
        transform: translate3d(calc(39.1146 * var(--vw, 1vw)), calc(22.0833 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-6 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-6 {
        transform: translate3d(66.667vw, 30.513vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.expand .layer-7 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-7 {
        transform: translate3d(53.0208vw, 28.9063vw, 0);
        transform: translate3d(calc(53.0208 * var(--vw, 1vw)), calc(28.9063 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-7 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.expand .layer-7 {
        transform: translate3d(82.051vw, 38.205vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-0 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-0 {
        transform: translate3d(-28.0208vw, -10.4167vw, 0);
        transform: translate3d(calc(-28.0208 * var(--vw, 1vw)), calc(-10.4167 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-0 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-0 {
        transform: translate3d(-42.564vw, -10.256vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-1 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-1 {
        transform: translate3d(-15.5208vw, -5.2083vw, 0);
        transform: translate3d(calc(-15.5208 * var(--vw, 1vw)), calc(-5.2083 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-1 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-1 {
        transform: translate3d(-23.077vw, -2.051vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-2 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-2 {
        transform: translate3d(-2.0833vw, -6.5104vw, 0) scale(1.5);
        transform: translate3d(calc(-2.0833 * var(--vw, 1vw)), calc(-6.5104 * var(--vw, 1vw)), 0) scale(1.5)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-2 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-2 {
        transform: translate3d(-7.949vw, -1.026vw, 0) scale(1.5)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-3 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-3 {
        transform: translate3d(8.4375vw, 8.0208vw, 0);
        transform: translate3d(calc(8.4375 * var(--vw, 1vw)), calc(8.0208 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-3 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-3 {
        transform: translate3d(15.128vw, 18.974vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-4 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-4 {
        transform: translate3d(18.9583vw, 13.2813vw, 0);
        transform: translate3d(calc(18.9583 * var(--vw, 1vw)), calc(13.2813 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-4 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-4 {
        transform: translate3d(34.615vw, 25.641vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-5 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-5 {
        transform: translate3d(31.4583vw, 18.5417vw, 0);
        transform: translate3d(calc(31.4583 * var(--vw, 1vw)), calc(18.5417 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-5 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-5 {
        transform: translate3d(54.103vw, 33.846vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-6 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-6 {
        transform: translate3d(43.9583vw, 23.8021vw, 0);
        transform: translate3d(calc(43.9583 * var(--vw, 1vw)), calc(23.8021 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-6 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-6 {
        transform: translate3d(66.667vw, 40.769vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.cpu .layer-7 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-7 {
        transform: translate3d(56.4583vw, 29.0625vw, 0);
        transform: translate3d(calc(56.4583 * var(--vw, 1vw)), calc(29.0625 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-7 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.cpu .layer-7 {
        transform: translate3d(82.051vw, 48.462vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-0 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-0 {
        transform: translate3d(-34.375vw, -11.9792vw, 0);
        transform: translate3d(calc(-34.375 * var(--vw, 1vw)), calc(-11.9792 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-0 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-0 {
        transform: translate3d(-55.128vw, -12.821vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-1 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-1 {
        transform: translate3d(-21.875vw, -6.7708vw, 0);
        transform: translate3d(calc(-21.875 * var(--vw, 1vw)), calc(-6.7708 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-1 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-1 {
        transform: translate3d(-35.641vw, -4.615vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-2 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-2 {
        transform: translate3d(-11.4583vw, -1.875vw, 0);
        transform: translate3d(calc(-11.4583 * var(--vw, 1vw)), calc(-1.875 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-2 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-2 {
        transform: translate3d(-19.231vw, 2.051vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-3 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-3 {
        transform: translate3d(-8.8021vw, -5.8333vw, 0) scale(1.5);
        transform: translate3d(calc(-8.8021 * var(--vw, 1vw)), calc(-5.8333 * var(--vw, 1vw)), 0) scale(1.5)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-3 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-3 {
        transform: translate3d(-18.718vw, -9.744vw, 0) scale(1.5)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-4 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-4 {
        transform: translate3d(12.5vw, 9.5833vw, 0);
        transform: translate3d(calc(12.5 * var(--vw, 1vw)), calc(9.5833 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-4 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-4 {
        transform: translate3d(22.051vw, 20.513vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-5 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-5 {
        transform: translate3d(25vw, 16.5625vw, 0);
        transform: translate3d(calc(25 * var(--vw, 1vw)), calc(16.5625 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-5 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-5 {
        transform: translate3d(41.538vw, 28.718vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-6 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-6 {
        transform: translate3d(37.5vw, 22.2917vw, 0);
        transform: translate3d(calc(37.5 * var(--vw, 1vw)), calc(22.2917 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-6 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-6 {
        transform: translate3d(61.026vw, 36.923vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.memory .layer-7 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-7 {
        transform: translate3d(50vw, 27.5vw, 0);
        transform: translate3d(calc(50 * var(--vw, 1vw)), calc(27.5 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-7 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.memory .layer-7 {
        transform: translate3d(82.051vw, 45.897vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-0 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-0 {
        transform: translate3d(-56.25vw, -20.8333vw, 0);
        transform: translate3d(calc(-56.25 * var(--vw, 1vw)), calc(-20.8333 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-0 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-0 {
        transform: translate3d(-84.872vw, -38.462vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-1 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-1 {
        transform: translate3d(-43.75vw, -15.625vw, 0);
        transform: translate3d(calc(-43.75 * var(--vw, 1vw)), calc(-15.625 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-1 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-1 {
        transform: translate3d(-70.513vw, -30.256vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-2 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-2 {
        transform: translate3d(-33.3333vw, -12.5vw, 0);
        transform: translate3d(calc(-33.3333 * var(--vw, 1vw)), calc(-12.5 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-2 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-2 {
        transform: translate3d(-54.103vw, -25.128vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-3 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-3 {
        transform: translate3d(-30.2083vw, -10.9375vw, 0);
        transform: translate3d(calc(-30.2083 * var(--vw, 1vw)), calc(-10.9375 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-3 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-3 {
        transform: translate3d(-48.462vw, -9.744vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-4 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-4 {
        transform: translate3d(-14.5833vw, -4.1667vw, 0);
        transform: translate3d(calc(-14.5833 * var(--vw, 1vw)), calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-4 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-4 {
        transform: translate3d(-20.513vw, 0.513vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-5 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-5 {
        transform: translate3d(-2.0833vw, 0, 0);
        transform: translate3d(calc(-2.0833 * var(--vw, 1vw)), 0, 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-5 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-5 {
        transform: translate3d(-1.026vw, 8.718vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-6 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-6 {
        transform: translate3d(10.4167vw, 6.25vw, 0);
        transform: translate3d(calc(10.4167 * var(--vw, 1vw)), calc(6.25 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-6 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-6 {
        transform: translate3d(18.462vw, 16.923vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.radiate .layer-7 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-7 {
        transform: translate3d(28.125vw, 13.5417vw, 0);
        transform: translate3d(calc(28.125 * var(--vw, 1vw)), calc(13.5417 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-7 {}
}

@media (max-width: 1023px) {
    #section-performance .intro-performance-sticky .intro-performance.radiate .layer-7 {
        transform: translate3d(46.154vw, 28.974vw, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-0 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-0 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-0 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-1 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-1 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-1 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-2 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-2 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-2 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-3 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-3 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-3 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-4 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-4 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-4 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-5 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-5 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-5 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-6 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-6 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-6 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .layer-7 {}

@media (min-width: 1024px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-7 {
        transform: translate3d(0, -4.1667vw, 0);
        transform: translate3d(0, calc(-4.1667 * var(--vw, 1vw)), 0)
    }
}

@media (max-width:1023px) {
    #section-performance .intro-performance-sticky .intro-performance.coloros .layer-7 {
        transform: translate3d(0, 0, 0)
    }
}

#section-performance .intro-performance-sticky .intro-performance.coloros .coloros-seq {
    opacity: 1 !important;
    transition: opacity .5s .5s
}

.discolor-text .t {
    transition: -webkit-clip-path .3s;
    transition: clip-path .3s;
    transition: clip-path .3s, -webkit-clip-path .3s
}

.discolor-text.delay .t {
    transition: -webkit-clip-path .3s .3s;
    transition: clip-path .3s .3s;
    transition: clip-path .3s .3s, -webkit-clip-path .3s .3s
}

.discolor-text .ori-t, .discolor-text .trans-t {
    color: #000
}

.discolor-text .spe-t {
    color: #f00
}

.discolor-text .enter-group .ori-t {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%)
}

.discolor-text .enter-group .spe-t {
    -webkit-clip-path: inset(0% 100% 0% 0%);
    clip-path: inset(0% 100% 0% 0%)
}

.discolor-text .leave-group {
    opacity: 0
}

.discolor-text .leave-group .ori-t {
    -webkit-clip-path: inset(0% 100% 0% 0%);
    clip-path: inset(0% 100% 0% 0%)
}

.discolor-text .leave-group .spe-t {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%)
}

.discolor-text.step-enter .enter-group {
    opacity: 1
}

.discolor-text.step-enter .enter-group .ori-t {
    -webkit-clip-path: inset(0% 0% 0% 100%);
    clip-path: inset(0% 0% 0% 100%)
}

.discolor-text.step-enter .enter-group .spe-t {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%)
}

.discolor-text.step-leave .enter-group {
    opacity: 0
}

.discolor-text.step-leave .leave-group {
    opacity: 1
}

.discolor-text.step-leave .leave-group .ori-t {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%)
}

.discolor-text.step-leave .leave-group .spe-t {
    -webkit-clip-path: inset(0% 0% 0% 100%);
    clip-path: inset(0% 0% 0% 100%)
}

.discolor-text.step-enter-reverse .enter-group {
    opacity: 0
}

.discolor-text.step-enter-reverse .leave-group {
    opacity: 1
}

.discolor-text.step-enter-reverse .leave-group .ori-t {
    -webkit-clip-path: inset(0% 100% 0% 0%);
    clip-path: inset(0% 100% 0% 0%)
}

.discolor-text.step-enter-reverse .leave-group .spe-t {
    -webkit-clip-path: inset(0% 0% 0% 0%);
    clip-path: inset(0% 0% 0% 0%)
}

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

#section-game .game-chapter .text {
    z-index: 2
}

@media (min-width: 1024px) {
    #section-game .game-chapter .text {
        padding-top: 30.8333vw;
        padding-top: calc(30.8333 * var(--vw, 1vw))
    }
}

#section-game .z-title {}

@media (max-width: 1023px) {
    #section-game .z-title {
        margin-top: 15.385vw
    }
}

#section-game .game-headline {}

@media (min-width: 1024px) {
    #section-game .game-headline {
        margin-top: 6.25vw;
        margin-top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .game-headline {}
}

@media (max-width: 1023px) {
    #section-game .game-headline {
        margin-top: 7.692vw
    }
}

#section-game .game-headline .line {
    background: #fff
}

#section-game .intro-acc-sticky {
    width: 100%;
    height: 330vh;
    height: calc(330 * var(--vh, 1vh))
}

#section-game .intro-acc-sticky .intro-acc {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column
}

#section-game .intro-acc-sticky .intro-acc .opacity-change {
    opacity: 0
}

#section-game .intro-acc-sticky .intro-acc .acc-tips {
    color: rgba(255, 255, 255, 0.3)
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-tips {
        margin: 0.5208vw 0 0 -39.5833vw;
        margin: calc(0.5208 * var(--vw, 1vw)) 0 0 calc(-39.5833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-tips {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-tips {
        margin: 3.846vw 0 0 -25.641vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-detail {
    color: #fff
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail {
        margin: 25.641vw 0 0;
        padding: 0 15px;
    }
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail {
        margin: 3.125vw 0 0 10.4167vw;
        margin: calc(3.125 * var(--vw, 1vw)) 0 0 calc(10.4167 * var(--vw, 1vw))
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .subhead {
    overflow: hidden
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .subhead {
        width: 26.0417vw;
        width: calc(26.0417 * var(--vw, 1vw));
        height: 1.875vw;
        height: calc(1.875 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .subhead {
        height: 24px
    }
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .subhead {
        width: 74.872vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .subhead .subhead-scroll {
    transition: transform .5s
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .line {
    height: 1px;
    transform-origin: left
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .line {
        width: 11.4583vw;
        width: calc(11.4583 * var(--vw, 1vw));
        margin-top: 0.2604vw;
        margin-top: calc(0.2604 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .line {
        width: 146px
    }
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .line {
        margin-top: 1.282vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .line .inner {
    transition: transform .5s;
    transform-origin: left;
    background: rgba(255, 255, 255, 0.4)
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .desc {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .desc {
        margin-top: 4.1667vw;
        margin-top: calc(4.1667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .desc {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .desc {
        margin-top: 10.256vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .desc .ori-t, #section-game .intro-acc-sticky .intro-acc .acc-detail .desc .trans-t {
    color: #fff
}

#section-game .intro-acc-sticky .intro-acc .acc-detail .game-more {
    cursor: pointer
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-detail .game-more {
        margin-left: 0
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display {
    margin-top: 170px;
    flex-shrink: 0
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display {
        width: 53.1771vw;
        width: calc(53.1771 * var(--vw, 1vw));
        height: 18.75vw;
        height: calc(18.75 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display {
        width: 84.615vw;
        height: 29.744vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone {
    z-index: 2
}

#section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-0 {
    z-index: 5
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-0 {
        width: 52.1875vw;
        width: calc(52.1875 * var(--vw, 1vw));
        height: 17.6563vw;
        height: calc(17.6563 * var(--vw, 1vw));
        top: 0.3646vw;
        top: calc(0.3646 * var(--vw, 1vw));
        left: 0.5208vw;
        left: calc(0.5208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-0 {
        top: 0;
        left: 0
    }
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-0 {
        width: 84.615vw;
        height: 28.718vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-1 {
    z-index: 4
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-1 {
        width: 51.8229vw;
        width: calc(51.8229 * var(--vw, 1vw));
        height: 17.3438vw;
        height: calc(17.3438 * var(--vw, 1vw));
        top: 0.3646vw;
        top: calc(0.3646 * var(--vw, 1vw));
        left: 0.6771vw;
        left: calc(0.6771 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-1 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-1 {
        width: 82.051vw;
        height: 27.692vw;
        top: 0.513vw;
        left: 1.282vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-2 {
    z-index: 3;
    opacity: 0
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-2 {
        width: 52.1875vw;
        width: calc(52.1875 * var(--vw, 1vw));
        height: 17.6563vw;
        height: calc(17.6563 * var(--vw, 1vw));
        top: 0.3646vw;
        top: calc(0.3646 * var(--vw, 1vw));
        left: 0.5208vw;
        left: calc(0.5208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-2 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-2 {
        width: 83.077vw;
        height: 28.205vw;
        top: 0.256vw;
        left: 0.769vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-3 {
    z-index: 2
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-3 {
        width: 53.1771vw;
        width: calc(53.1771 * var(--vw, 1vw));
        height: 18.75vw;
        height: calc(18.75 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-3 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-3 {
        width: 84.615vw;
        height: 29.744vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-4 {
    opacity: 0;
    left: 0;
    z-index: 1
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-4 {
        width: 53.1771vw;
        width: calc(53.1771 * var(--vw, 1vw));
        height: 25.625vw;
        height: calc(25.625 * var(--vw, 1vw));
        top: -3.4375vw;
        top: calc(-3.4375 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-4 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .bottom-phone .phone-layer-4 {
        width: 84.615vw;
        height: 40.769vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch {
    z-index: 3
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point {
    height: auto;
    transform: scale(0);
    opacity: 0
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point {
        width: 1.8229vw;
        width: calc(1.8229 * var(--vw, 1vw));
        height: 1.5625vw;
        height: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point {
        width: 2.821vw;
        height: 2.564vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-0 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-0 {
        top: 6.5104vw;
        top: calc(6.5104 * var(--vw, 1vw));
        left: 4.9479vw;
        left: calc(4.9479 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-0 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-0 {
        top: 10.256vw;
        left: 7.692vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-1 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-1 {
        top: 7.5521vw;
        top: calc(7.5521 * var(--vw, 1vw));
        left: 4.7917vw;
        left: calc(4.7917 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-1 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-1 {
        top: 12.051vw;
        left: 7.692vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-2 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-2 {
        top: 4.1667vw;
        top: calc(4.1667 * var(--vw, 1vw));
        left: 35.4167vw;
        left: calc(35.4167 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-2 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-2 {
        top: 6.667vw;
        left: 56.41vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-3 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-3 {
        top: 6.25vw;
        top: calc(6.25 * var(--vw, 1vw));
        left: 35.5729vw;
        left: calc(35.5729 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-3 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-3 {
        top: 10vw;
        left: 56.41vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-4 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-4 {
        top: 15.1042vw;
        top: calc(15.1042 * var(--vw, 1vw));
        left: 35.9375vw;
        left: calc(35.9375 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-4 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-4 {
        top: 24.359vw;
        left: 57.179vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-5 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-5 {
        top: 12.2396vw;
        top: calc(12.2396 * var(--vw, 1vw));
        left: 37.5vw;
        left: calc(37.5 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-5 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-5 {
        top: 19.487vw;
        left: 59.744vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-6 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-6 {
        top: 2.6042vw;
        top: calc(2.6042 * var(--vw, 1vw));
        left: 38.5417vw;
        left: calc(38.5417 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-6 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-6 {
        top: 4.103vw;
        left: 61.282vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-7 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-7 {
        top: 6.25vw;
        top: calc(6.25 * var(--vw, 1vw));
        left: 40.1042vw;
        left: calc(40.1042 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-7 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-7 {
        top: 10vw;
        left: 63.846vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-8 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-8 {
        top: 7.2917vw;
        top: calc(7.2917 * var(--vw, 1vw));
        left: 40.2604vw;
        left: calc(40.2604 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-8 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-8 {
        top: 11.538vw;
        left: 64.103vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-9 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-9 {
        top: 11.9792vw;
        top: calc(11.9792 * var(--vw, 1vw));
        left: 40.625vw;
        left: calc(40.625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-9 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-9 {
        top: 18.974vw;
        left: 64.615vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-10 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-10 {
        top: 7.8125vw;
        top: calc(7.8125 * var(--vw, 1vw));
        left: 44.2708vw;
        left: calc(44.2708 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-10 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-10 {
        top: 12.308vw;
        left: 70.256vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-11 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-11 {
        top: 4.9479vw;
        top: calc(4.9479 * var(--vw, 1vw));
        left: 44.2708vw;
        left: calc(44.2708 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-11 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-11 {
        top: 7.692vw;
        left: 70.256vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-12 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-12 {
        top: 2.8646vw;
        top: calc(2.8646 * var(--vw, 1vw));
        left: 46.3542vw;
        left: calc(46.3542 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-12 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-12 {
        top: 4.615vw;
        left: 73.846vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-13 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-13 {
        top: 6.25vw;
        top: calc(6.25 * var(--vw, 1vw));
        left: 46.875vw;
        left: calc(46.875 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-13 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-touch .point-13 {
        top: 10vw;
        left: 74.615vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi {
    z-index: 3
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .ripple {
    opacity: 0
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-0, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-0 {
    left: 0
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-0, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-0 {
        width: 10.9375vw;
        width: calc(10.9375 * var(--vw, 1vw));
        height: 2.8646vw;
        height: calc(2.8646 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-0, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-0 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-0, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-0 {
        width: 17.436vw;
        height: 4.615vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-1, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-1 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-1, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-1 {
        width: 6.25vw;
        width: calc(6.25 * var(--vw, 1vw));
        height: 1.9792vw;
        height: calc(1.9792 * var(--vw, 1vw));
        top: 1.5625vw;
        top: calc(1.5625 * var(--vw, 1vw));
        left: 2.3438vw;
        left: calc(2.3438 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-1, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-1 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-1, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-1 {
        width: 10vw;
        height: 3.077vw;
        top: 2.564vw;
        left: 3.59vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-2, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-2 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-2, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-2 {
        width: 3.6458vw;
        width: calc(3.6458 * var(--vw, 1vw));
        height: 1.4063vw;
        height: calc(1.4063 * var(--vw, 1vw));
        top: 3.125vw;
        top: calc(3.125 * var(--vw, 1vw));
        left: 3.6458vw;
        left: calc(3.6458 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-2, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-2 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 .ripple-2, #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 .ripple-2 {
        width: 5.897vw;
        height: 2.308vw;
        top: 5.128vw;
        left: 5.897vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-0 {
    left: auto;
    right: 0
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-0 {
        width: 4.1667vw;
        width: calc(4.1667 * var(--vw, 1vw));
        height: 6.7708vw;
        height: calc(6.7708 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-0 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-0 {
        width: 6.667vw;
        height: 10.769vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-1 {
    left: auto
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-1 {
        width: 2.8646vw;
        width: calc(2.8646 * var(--vw, 1vw));
        height: 4.0625vw;
        height: calc(4.0625 * var(--vw, 1vw));
        top: 1.3542vw;
        top: calc(1.3542 * var(--vw, 1vw));
        right: 3.0208vw;
        right: calc(3.0208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-1 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-1 {
        width: 4.615vw;
        height: 6.41vw;
        top: 2.051vw;
        right: 4.615vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-2 {
    left: auto
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-2 {
        width: 1.9792vw;
        width: calc(1.9792 * var(--vw, 1vw));
        height: 2.5vw;
        height: calc(2.5 * var(--vw, 1vw));
        top: 2.1875vw;
        top: calc(2.1875 * var(--vw, 1vw));
        right: 5.2083vw;
        right: calc(5.2083 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-2 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 .ripple-2 {
        width: 3.077vw;
        height: 4.103vw;
        top: 3.333vw;
        right: 8.205vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 {
        top: -4.6875vw;
        top: calc(-4.6875 * var(--vw, 1vw));
        left: 27.0833vw;
        left: calc(27.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-0 {
        top: -7.436vw;
        left: 43.077vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 {
        top: -4.6875vw;
        top: calc(-4.6875 * var(--vw, 1vw));
        left: 38.0208vw;
        left: calc(38.0208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-1 {
        top: -7.436vw;
        left: 60.513vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 {
        top: 1.0417vw;
        top: calc(1.0417 * var(--vw, 1vw));
        right: -5.2083vw;
        right: calc(-5.2083 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-wifi .wifi-ripple-2 {
        top: 1.538vw;
        right: -8.205vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic {
    z-index: 1
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple {
        width: 52.0833vw;
        width: calc(52.0833 * var(--vw, 1vw));
        height: 40vw;
        height: calc(40 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple {
        width: 82.821vw;
        height: 63.59vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-0 {}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-0 {
        top: -7.8125vw;
        top: calc(-7.8125 * var(--vw, 1vw));
        left: 20.8333vw;
        left: calc(20.8333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-0 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-0 {
        top: -12.308vw;
        left: 33.077vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-1 {
    left: auto
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-1 {
        top: -7.8125vw;
        top: calc(-7.8125 * var(--vw, 1vw));
        right: 20.8333vw;
        right: calc(20.8333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-1 {}
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-haptic .haptic-ripple-1 {
        top: -12.308vw;
        right: 33.077vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-game-space .space {
    z-index: 3;
    opacity: 0;
    transform: translateX(-20px)
}

@media (min-width: 1024px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-game-space .space {
        width: 51.0417vw;
        width: calc(51.0417 * var(--vw, 1vw));
        height: 17.1875vw;
        height: calc(17.1875 * var(--vw, 1vw));
        top: 0.5208vw;
        top: calc(0.5208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-game-space .space {
        top: 0;
        transform: translateX(-10px)
    }
}

@media (max-width: 1023px) {
    #section-game .intro-acc-sticky .intro-acc .acc-display .display-game-space .space {
        width: 84.615vw;
        height: 28.205vw
    }
}

#section-game .intro-acc-sticky .intro-acc .acc-display .display-game-space .space .mode-on {
    opacity: 0
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point {
    transform: scale(1);
    opacity: 1;
    transition: opacity .5s, transform .5s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-2 {
    transition-delay: .1s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-3 {
    transition-delay: .1s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-4 {
    transition-delay: .1s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-5 {
    transition-delay: .2s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-6 {
    transition-delay: .2s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-7 {
    transition-delay: .3s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-8 {
    transition-delay: .3s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-9 {
    transition-delay: .3s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-10 {
    transition-delay: .4s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-11 {
    transition-delay: .4s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-12 {
    transition-delay: .4s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.active .point-13 {
    transition-delay: .4s
}

#section-game .intro-acc-sticky .intro-acc .display-touch.inactive .point {
    transition: opacity .3s, transform .3s
}

#section-game .intro-acc-sticky .intro-acc .display-wifi.active .opacity-change, #section-game .intro-acc-sticky .intro-acc .display-haptic.active .opacity-change, #section-game .intro-acc-sticky .intro-acc .display-game-space.active .opacity-change {
    opacity: 1;
    transition: opacity .5s
}

#section-game .intro-acc-sticky .intro-acc .display-wifi.inactive .opacity-change, #section-game .intro-acc-sticky .intro-acc .display-haptic.inactive .opacity-change, #section-game .intro-acc-sticky .intro-acc .display-game-space.inactive .opacity-change {
    transition: opacity .2s
}

#section-game .intro-acc-sticky .intro-acc .display-game-space.active .space {
    opacity: 1;
    transform: translateX(0);
    transition: transform .5s, opacity .5s
}

#section-game .intro-acc-sticky .intro-acc .display-game-space.active .space .mode-on {
    opacity: 1;
    transition: opacity .3s .5s
}

#section-game .intro-acc-sticky .intro-acc .display-game-space.inactive .space {
    transition: transform .2s .2s, opacity .2s .2s
}

#section-game .intro-acc-sticky .intro-acc .display-game-space.inactive .space .mode-on {
    transition: opacity .2s
}

#section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-0 .ripple-2, #section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-1 .ripple-2 {
    -webkit-animation: ripple-up 1s infinite linear;
    animation: ripple-up 1s infinite linear
}

#section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-0 .ripple-1, #section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-1 .ripple-1 {
    -webkit-animation: ripple-up 1s .1s infinite linear;
    animation: ripple-up 1s .1s infinite linear
}

#section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-0 .ripple-0, #section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-1 .ripple-0 {
    -webkit-animation: ripple-up 1s .3s infinite linear;
    animation: ripple-up 1s .3s infinite linear
}

#section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-2 .ripple-2 {
    -webkit-animation: ripple-right 1s infinite linear;
    animation: ripple-right 1s infinite linear
}

#section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-2 .ripple-1 {
    -webkit-animation: ripple-right 1s .1s infinite linear;
    animation: ripple-right 1s .1s infinite linear
}

#section-game .intro-acc-sticky .intro-acc .display-wifi .wifi-ripple-2 .ripple-0 {
    -webkit-animation: ripple-right 1s .3s infinite linear;
    animation: ripple-right 1s .3s infinite linear
}

#section-game .intro-acc-sticky .intro-acc .display-haptic .haptic-ripple .ripple {
    transform-origin: 50% 50%;
    -webkit-animation: ripple .8s infinite linear;
    animation: ripple .8s infinite linear
}

#section-game .intro-acc-sticky .intro-acc.haptic .bottom-phone, #section-game .intro-acc-sticky .intro-acc.game-space .bottom-phone {
    transition: opacity .5s
}

#section-game .intro-acc-sticky .intro-acc.touch .subhead-scroll {
    transform: translateY(0)
}

#section-game .intro-acc-sticky .intro-acc.touch .phone-layer-0, #section-game .intro-acc-sticky .intro-acc.touch .phone-layer-1 {
    opacity: 0;
    transition: opacity .3s
}

#section-game .intro-acc-sticky .intro-acc.wifi .acc-detail .line .inner {
    transform: scale(1.187)
}

#section-game .intro-acc-sticky .intro-acc.wifi .acc-detail .subhead-scroll {
    transform: translateY(-100%)
}

#section-game .intro-acc-sticky .intro-acc.wifi .bottom-phone .phone-layer-2 {
    opacity: .5;
    transition: opacity .3s
}

#section-game .intro-acc-sticky .intro-acc.wifi .bottom-phone .phone-layer-0, #section-game .intro-acc-sticky .intro-acc.wifi .bottom-phone .phone-layer-1 {
    opacity: 0;
    transition: opacity .3s
}

@media (min-width:1024px) {
    #section-game .intro-acc-sticky .intro-acc.haptic .bottom-phone {
        -webkit-animation: shake .01s infinite linear;
        animation: shake .01s infinite linear
    }
}

@media (max-width:1023px) {
    #section-game .intro-acc-sticky .intro-acc.haptic .bottom-phone {
        -webkit-animation: shake-mo .01s infinite linear;
        animation: shake-mo .01s infinite linear
    }
}

#section-game .intro-acc-sticky .intro-acc.haptic .bottom-phone .phone-layer-0, #section-game .intro-acc-sticky .intro-acc.haptic .bottom-phone .phone-layer-1, #section-game .intro-acc-sticky .intro-acc.haptic .bottom-phone .phone-layer-2 {
    opacity: 1;
    transition: opacity .3s
}

#section-game .intro-acc-sticky .intro-acc.haptic .acc-detail .line .inner {
    transform: scale(1.173)
}

#section-game .intro-acc-sticky .intro-acc.haptic .acc-detail .subhead-scroll {
    transform: translateY(-200%)
}

#section-game .intro-acc-sticky .intro-acc.game-space .acc-detail .line .inner {
    transform: scale(.55)
}

#section-game .intro-acc-sticky .intro-acc.game-space .acc-detail .subhead-scroll {
    transform: translateY(-300%)
}

#section-game .intro-acc-sticky .intro-acc.game-space .bottom-phone .phone-layer-0, #section-game .intro-acc-sticky .intro-acc.game-space .bottom-phone .phone-layer-1, #section-game .intro-acc-sticky .intro-acc.game-space .bottom-phone .phone-layer-2 {
    opacity: 1
}

@-webkit-keyframes ripple-up {
    0% {
        opacity: 0;
        transform: translateY(0)
    }
    40% {
        opacity: 1;
        transform: translateY(-5px)
    }
    80% {
        opacity: 0;
        transform: translateY(-10px)
    }
}

@keyframes ripple-up {
    0% {
        opacity: 0;
        transform: translateY(0)
    }
    40% {
        opacity: 1;
        transform: translateY(-5px)
    }
    80% {
        opacity: 0;
        transform: translateY(-10px)
    }
}

@-webkit-keyframes ripple-right {
    0% {
        opacity: 0;
        transform: translateX(0)
    }
    40% {
        opacity: 1;
        transform: translateX(5px)
    }
    80% {
        opacity: 0;
        transform: translateX(10px)
    }
}

@keyframes ripple-right {
    0% {
        opacity: 0;
        transform: translateX(0)
    }
    40% {
        opacity: 1;
        transform: translateX(5px)
    }
    80% {
        opacity: 0;
        transform: translateX(10px)
    }
}

@-webkit-keyframes ripple {
    0% {
        opacity: 0;
        transform: scale(.4)
    }
    50% {
        opacity: .05;
        transform: scale(.7)
    }
    100% {
        opacity: 0;
        transform: scale(1)
    }
}

@keyframes ripple {
    0% {
        opacity: 0;
        transform: scale(.4)
    }
    50% {
        opacity: .05;
        transform: scale(.7)
    }
    100% {
        opacity: 0;
        transform: scale(1)
    }
}

@-webkit-keyframes shake {
    0% {
        transform: translateX(3px)
    }
    2% {
        transform: translateX(-3px)
    }
    4% {
        transform: translateX(3px)
    }
    6% {
        transform: translateX(-3px)
    }
    8% {
        transform: translateX(3px)
    }
    10% {
        transform: translateX(-3px)
    }
    12% {
        transform: translateX(3px)
    }
    14% {
        transform: translateX(-3px)
    }
    16% {
        transform: translateX(3px)
    }
    18% {
        transform: translateX(-3px)
    }
    23% {
        transform: translateX(0)
    }
    28% {
        transform: translateX(3px)
    }
    30% {
        transform: translateX(-3px)
    }
    32% {
        transform: translateX(3px)
    }
    34% {
        transform: translateX(-3px)
    }
    36% {
        transform: translateX(3px)
    }
    38% {
        transform: translateX(-3px)
    }
    40% {
        transform: translateX(3px)
    }
    42% {
        transform: translateX(-3px)
    }
    44% {
        transform: translateX(3px)
    }
    46% {
        transform: translateX(-3px)
    }
}

@keyframes shake {
    0% {
        transform: translateX(3px)
    }
    2% {
        transform: translateX(-3px)
    }
    4% {
        transform: translateX(3px)
    }
    6% {
        transform: translateX(-3px)
    }
    8% {
        transform: translateX(3px)
    }
    10% {
        transform: translateX(-3px)
    }
    12% {
        transform: translateX(3px)
    }
    14% {
        transform: translateX(-3px)
    }
    16% {
        transform: translateX(3px)
    }
    18% {
        transform: translateX(-3px)
    }
    23% {
        transform: translateX(0)
    }
    28% {
        transform: translateX(3px)
    }
    30% {
        transform: translateX(-3px)
    }
    32% {
        transform: translateX(3px)
    }
    34% {
        transform: translateX(-3px)
    }
    36% {
        transform: translateX(3px)
    }
    38% {
        transform: translateX(-3px)
    }
    40% {
        transform: translateX(3px)
    }
    42% {
        transform: translateX(-3px)
    }
    44% {
        transform: translateX(3px)
    }
    46% {
        transform: translateX(-3px)
    }
}

@-webkit-keyframes shake-mo {
    0% {
        transform: translateX(2px)
    }
    2% {
        transform: translateX(-2px)
    }
    4% {
        transform: translateX(2px)
    }
    6% {
        transform: translateX(-2px)
    }
    8% {
        transform: translateX(2px)
    }
    10% {
        transform: translateX(-2px)
    }
    12% {
        transform: translateX(2px)
    }
    14% {
        transform: translateX(-2px)
    }
    16% {
        transform: translateX(2px)
    }
    18% {
        transform: translateX(-2px)
    }
    23% {
        transform: translateX(0)
    }
    28% {
        transform: translateX(2px)
    }
    30% {
        transform: translateX(-2px)
    }
    32% {
        transform: translateX(2px)
    }
    34% {
        transform: translateX(-2px)
    }
    36% {
        transform: translateX(2px)
    }
    38% {
        transform: translateX(-2px)
    }
    40% {
        transform: translateX(2px)
    }
    42% {
        transform: translateX(-2px)
    }
    44% {
        transform: translateX(2px)
    }
    46% {
        transform: translateX(-2px)
    }
}

@keyframes shake-mo {
    0% {
        transform: translateX(2px)
    }
    2% {
        transform: translateX(-2px)
    }
    4% {
        transform: translateX(2px)
    }
    6% {
        transform: translateX(-2px)
    }
    8% {
        transform: translateX(2px)
    }
    10% {
        transform: translateX(-2px)
    }
    12% {
        transform: translateX(2px)
    }
    14% {
        transform: translateX(-2px)
    }
    16% {
        transform: translateX(2px)
    }
    18% {
        transform: translateX(-2px)
    }
    23% {
        transform: translateX(0)
    }
    28% {
        transform: translateX(2px)
    }
    30% {
        transform: translateX(-2px)
    }
    32% {
        transform: translateX(2px)
    }
    34% {
        transform: translateX(-2px)
    }
    36% {
        transform: translateX(2px)
    }
    38% {
        transform: translateX(-2px)
    }
    40% {
        transform: translateX(2px)
    }
    42% {
        transform: translateX(-2px)
    }
    44% {
        transform: translateX(2px)
    }
    46% {
        transform: translateX(-2px)
    }
}

#section-display {
    position: relative;
    background: #000;
    z-index: 2
}

@media (max-width:1023px) {
    #section-display {
        padding-top: 20vh;
        padding-top: calc(20 * var(--vh, 1vh))
    }
}

#section-display .display-sticky-content {
    height: 360vh;
    height: calc(360 * var(--vh, 1vh));
    width: 100%
}

@media (max-width:1023px) {
    #section-display .display-sticky-content {
        height: 280vh;
        height: calc(280 * var(--vh, 1vh));
        margin-top: -10vh;
        margin-top: calc(-10 * var(--vh, 1vh))
    }
}

#section-display .display-sticky-content .display-sticky-item {
    top: 0;
    width: 100%
}

@media (min-width:1024px) {
    #section-display .display-sticky-content .item-0 {
        height: 130vh;
        height: calc(130 * var(--vh, 1vh));
        background: #000;
        padding-top: 30vh;
        padding-top: calc(30 * var(--vh, 1vh));
        top: -30vh;
        top: calc(-30 * var(--vh, 1vh));
        overflow: hidden
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-0 {
        height: 110vh;
        height: calc(110 * var(--vh, 1vh));
        background: #000;
        overflow: hidden;
        padding-top: 30vh;
        padding-top: calc(30 * var(--vh, 1vh))
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-display .display-sticky-content .item-0 {
        padding-top: 20vh;
        padding-top: calc(20 * var(--vh, 1vh))
    }
}

#section-display .display-sticky-content .item-0 .prt-0 {
    width: 100vw;
    width: calc(100 * var(--vw, 1vw))
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-0 .prt-0 {
        height: 66.667vw
    }
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box {
    height: 100%;
    width: 50%
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box .right {}

@media (min-width: 1024px) {
    #section-display .display-sticky-content .item-0 .prt-0 .img-box .right {
        width: 89.7396vw;
        width: calc(89.7396 * var(--vw, 1vw));
        height: 79.0104vw;
        height: calc(79.0104 * var(--vw, 1vw));
        top: -4.2708vw;
        top: calc(-4.2708 * var(--vw, 1vw));
        left: -15.625vw;
        left: calc(-15.625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-0 .prt-0 .img-box .right {}
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-0 .prt-0 .img-box .right {
        height: 79.01vw;
        width: 89.738vw;
        top: -2.564vw;
        left: -15.385vw
    }
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box .right .right-1 {
    opacity: 1;
    z-index: 2
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box .right .right-2 {
    opacity: 0;
    z-index: 3;
    top: -2.3%;
    left: -22%;
    transform: scale(1.28)
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box .left {
    left: 0
}

@media (min-width: 1024px) {
    #section-display .display-sticky-content .item-0 .prt-0 .img-box .left {
        width: 56.7708vw;
        width: calc(56.7708 * var(--vw, 1vw));
        height: 67.6042vw;
        height: calc(67.6042 * var(--vw, 1vw));
        top: -17.1875vw;
        top: calc(-17.1875 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-0 .prt-0 .img-box .left {
        left: auto
    }
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-0 .prt-0 .img-box .left {
        height: 67.708vw;
        width: 56.874vw;
        top: -17.949vw;
        right: -6.154vw
    }
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box .left .left-1 {
    opacity: 1;
    z-index: 1
}

#section-display .display-sticky-content .item-0 .prt-0 .img-box .left .left-2 {
    opacity: 0;
    z-index: 3;
    top: 0;
    left: 0
}

@media (min-width:1024px) {
    #section-display .display-sticky-content .item-0 .text {
        color: #fff;
        position: absolute
    }
}

@media (min-width: 1024px) {
    #section-display .display-sticky-content .item-0 .text {
        left: 8.3333vw;
        left: calc(8.3333 * var(--vw, 1vw));
        bottom: 4.1667vw;
        bottom: calc(4.1667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-0 .text {
        color: #000
    }
}

#section-display .display-sticky-content .item-1 {
    height: 150vh;
    height: calc(150 * var(--vh, 1vh));
    margin-top: 20vh;
    margin-top: calc(20 * var(--vh, 1vh));
    top: -50vh;
    top: calc(-50 * var(--vh, 1vh))
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 {
        height: 140vh;
        height: calc(140 * var(--vh, 1vh));
        margin-top: -40vh;
        margin-top: calc(-40 * var(--vh, 1vh));
        top: -40vh;
        top: calc(-40 * var(--vh, 1vh));
        margin-bottom: -1px
    }
}

#section-display .display-sticky-content .item-1 .prt-1 {
    background: linear-gradient(180deg, #c5c7c9 0%, #e3e5e6 100%)
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 {
        height: 41vh;
        height: calc(41 * var(--vh, 1vh));
        margin-bottom: -1vh;
        margin-bottom: calc(-1 * var(--vh, 1vh))
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 .text {
        margin: auto
    }
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 .text {
        width: 74.872vw
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 .z-title {}
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 .z-title {
        padding-top: 7.692vw
    }
}

@media (min-width:1024px) {
    #section-display .display-sticky-content .item-1 .prt-1 .display-headline {
        height: 51vh;
        height: calc(51 * var(--vh, 1vh));
        margin-bottom: -1vh;
        margin-bottom: calc(-1 * var(--vh, 1vh))
    }
}

@media (min-width: 1024px) {
    #section-display .display-sticky-content .item-1 .prt-1 .display-headline {
        padding-top: 6.25vw;
        padding-top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 .display-headline {
        height: 41vh;
        height: calc(41 * var(--vh, 1vh));
        margin-bottom: -1vh;
        margin-bottom: calc(-1 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-1 .prt-1 .display-headline {
        margin-top: 7.692vw
    }
}

#section-display .display-sticky-content .item-1 .slot-bg {
    width: 100vw;
    width: calc(100 * var(--vw, 1vw));
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    position: relative
}

#section-display .display-sticky-content .item-1 .slot-bg .bg-slot {
    top: 0;
    left: 0;
    z-index: 2
}

#section-display .display-sticky-content .item-1 .slot-bg .slot-window {
    width: 100vw;
    width: calc(100 * var(--vw, 1vw));
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    margin: auto;
    overflow: hidden;
    z-index: 1
}

#section-display .display-sticky-content .item-1 .slot-bg .slot-window .item-1 {
    width: 100vw;
    width: calc(100 * var(--vw, 1vw));
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    margin: 0;
    transform-origin: 50% 41%
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .slot-bg .slot-window .item-1 {
        transform-origin: 50% 35%
    }
}

#section-display .display-sticky-content .item-1 .text-box {
    background: transparent;
    text-align: center;
    align-items: center;
    position: relative;
    z-index: 2
}

@media (min-width: 1024px) {
    #section-display .display-sticky-content .item-1 .text-box {
        margin-top: -15.625vw;
        margin-top: calc(-15.625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .text-box {
        margin: auto;
        margin-top: -300px;
        text-align: left
    }
}

@media (max-width: 1023px) {
    #section-display .display-sticky-content .item-1 .text-box {
        width: 74.872vw
    }
}

@media (max-width:1023px) {
    #section-display .display-sticky-content .item-1 .text-box .display-learn-more {
        margin-left: 0;
        margin-right: auto
    }
}

#section-display .display-sticky-content .item-2 {
    top: 65vh;
    top: calc(65 * var(--vh, 1vh));
    background: transparent
}

#section-charge {
    height: auto;
    background: #e3e5e6;
    margin-top: -1px;
    z-index: 3
}

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

@media (min-width:1024px) and (max-width:1399px) {
    #section-charge {
        margin-top: -1vh;
        margin-top: calc(-1 * var(--vh, 1vh));
        z-index: 3;
        padding-bottom: 72px
    }
}

@media (max-width:1023px) {
    #section-charge {
        z-index: 1
    }
}

#section-charge .header-bg {
    width: 100%
}

@media (min-width: 1024px) {
    #section-charge .header-bg {
        height: 37.5vw;
        height: calc(37.5 * var(--vw, 1vw))
    }
}

#section-charge .header-bg .text {}

@media (min-width: 1024px) {
    #section-charge .header-bg .text {
        bottom: 4.1667vw;
        bottom: calc(4.1667 * var(--vw, 1vw));
        left: 8.3333vw;
        left: calc(8.3333 * var(--vw, 1vw))
    }
}

#section-charge .charge-chapter {
    width: 100%;
    margin-top: -1px;
    z-index: 3
}

@media (min-width: 1024px) {
    #section-charge .charge-chapter {
        height: 37.5vw;
        height: calc(37.5 * var(--vw, 1vw))
    }
}

#section-charge .charge-chapter .text {
    z-index: 2;
    color: #fff
}

@media (min-width: 1024px) {
    #section-charge .charge-chapter .text {
        padding-top: 30.8333vw;
        padding-top: calc(30.8333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-chapter .text {
        position: absolute;
        top: 100%;
        color: #000
    }
}

@media (max-width: 1023px) {
    #section-charge .charge-chapter .text {
        margin-top: 7.692vw
    }
}

@media (max-width:1023px) {
    #section-charge .z-title {}
}

@media (max-width: 1023px) {
    #section-charge .z-title {
        margin-top: 7.692vw
    }
}

#section-charge .charge-headline {}

@media (min-width: 1024px) {
    #section-charge .charge-headline {
        margin: 6.25vw auto 10.4167vw;
        margin: calc(6.25 * var(--vw, 1vw)) auto calc(10.4167 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-headline {}
}

@media (max-width: 1023px) {
    #section-charge .charge-headline {
        margin: 7.692vw auto 20.513vw
    }
}

#section-charge .charge-headline .desc {}

@media (max-width: 1023px) {
    #section-charge .charge-headline .desc {
        margin-top: 10.256vw
    }
}

#section-charge .charge-sticky-container {
    height: 200vh;
    height: calc(200 * var(--vh, 1vh));
    position: relative;
    margin-top: -100vh;
    margin-top: calc(-100 * var(--vh, 1vh))
}

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

@media (min-width:721px) and (max-width:1023px) {
    #section-charge .charge-sticky-container .charge-sticky-item {
        height: 105vh;
        height: calc(105 * var(--vh, 1vh))
    }
}

#section-charge .charge-body {
    margin: auto;
    justify-content: space-between
}

@media (min-width: 1024px) {
    #section-charge .charge-body {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-body {}
}

@media (max-width: 1023px) {
    #section-charge .charge-body {
        width: 94.872vw
    }
}

#section-charge .charge-body .charge-head {
    position: relative;
    overflow: hidden;
    background: linear-gradient(148.67deg, #d6d6d6 27.29%, #bbbcc0 121.34%)
}

@media (min-width: 1024px) {
    #section-charge .charge-body .charge-head {
        width: 23.9583vw;
        width: calc(23.9583 * var(--vw, 1vw));
        height: 34.375vw;
        height: calc(34.375 * var(--vw, 1vw));
        margin-top: 18.75vw;
        margin-top: calc(18.75 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-body .charge-head {}
}

@media (max-width: 1023px) {
    #section-charge .charge-body .charge-head {
        height: 46.154vw;
        width: 33.59vw;
        margin-top: 51.282vw
    }
}

#section-charge .charge-body .charge-head .img-box {
    position: absolute;
    top: 0;
    transform: translateX(30%)
}

@media (min-width: 1024px) {
    #section-charge .charge-body .charge-head .img-box {
        width: 37.1354vw;
        width: calc(37.1354 * var(--vw, 1vw));
        height: 34.0625vw;
        height: calc(34.0625 * var(--vw, 1vw));
        right: 1.5625vw;
        right: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-body .charge-head .img-box {}
}

@media (max-width: 1023px) {
    #section-charge .charge-body .charge-head .img-box {
        top: -5.128vw;
        right: 2.564vw;
        width: 57.564vw;
        height: 64.103vw
    }
}

#section-charge .charge-body .charge-phone {
    overflow: hidden;
    background: linear-gradient(148.67deg, #d6d6d6 27.29%, #bbbcc0 121.34%)
}

@media (min-width: 1024px) {
    #section-charge .charge-body .charge-phone {
        width: 57.2917vw;
        width: calc(57.2917 * var(--vw, 1vw));
        height: 41.6667vw;
        height: calc(41.6667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-body .charge-phone {}
}

@media (max-width: 1023px) {
    #section-charge .charge-body .charge-phone {
        width: 58.718vw;
        height: 82.051vw
    }
}

#section-charge .charge-body .charge-phone .img-box {
    top: -60%;
    right: -43%
}

@media (min-width: 1024px) {
    #section-charge .charge-body .charge-phone .img-box {
        width: 98.9063vw;
        width: calc(98.9063 * var(--vw, 1vw));
        height: 98.8021vw;
        height: calc(98.8021 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-body .charge-phone .img-box {
        top: -20%;
        right: -53%
    }
}

@media (max-width: 1023px) {
    #section-charge .charge-body .charge-phone .img-box {
        width: 112.821vw;
        height: 112.564vw
    }
}

@media (min-width:1024px) {
    #section-charge .charge-detail {
        margin: auto;
        justify-content: flex-end
    }
}

@media (min-width: 1024px) {
    #section-charge .charge-detail {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        margin-top: -5vw;
        margin-top: calc(-5 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-detail {
        margin-top: 60px;
        margin-left: auto
    }
}

@media (max-width: 1023px) {
    #section-charge .charge-detail {
        width: 62.821vw;
        margin-right: 12.051vw
    }
}

#section-charge .charge-detail .text-box {}

@media (min-width: 1024px) {
    #section-charge .charge-detail .text-box {
        width: 57.2917vw;
        width: calc(57.2917 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-charge .charge-detail .text-box {
        _white-space: nowrap;
    }
}

#section-charge .charge-detail .text-box .text {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto
}

#section-charge .charge-detail .text-box .text .learn-more .learn-more-box-btn {
    margin-left: inherit;
    margin-right: inherit
}

#section-charge .charge-detail .text-box .text .detail-span sup {
    position: relative;
    font-size: .3em;
    top: -1em
}

.column {
    flex-direction: column
}

.camera-top-bg {}

@media (min-width: 1024px) {
    .camera-top-bg {
        top: 37.5vw;
        top: calc(37.5 * var(--vw, 1vw))
    }
}

.camera-no-bg {
    transition: transform .7s linear;
    transition-delay: 0s
}

.camera-no-bg-act {
    transform: translateY(-50vh);
    transform: translateY(calc(-50 * var(--vh, 1vh)));
    transition-delay: 0s
}

.camera-no-bg-leave {
    transition: transform .3s linear .7s
}

.camera-boom {
    height: 110vh;
    height: calc(110 * var(--vh, 1vh))
}

.camera-boom-text {}

@media (min-width: 1024px) {
    .camera-boom-text {
        padding-top: 5.2083vw;
        padding-top: calc(5.2083 * var(--vw, 1vw))
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .camera-boom-text {
        padding-top: 150px
    }
}

@media (max-width:1023px) {
    .camera-boom-text {}
}

@media (max-width: 1023px) {
    .camera-boom-text {
        padding-top: 15.385vw;
        margin-left: 12.564vw
    }
}

.camera-boom-text .boom-text {}

@media (min-width: 1024px) {
    .camera-boom-text .boom-text {
        margin-top: 3.125vw;
        margin-top: calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom-text .boom-text {}
}

@media (max-width: 1023px) {
    .camera-boom-text .boom-text {
        margin-top: 7.692vw
    }
}

.camera-boom-text .boom-text .detail {}

@media (min-width: 1024px) {
    .camera-boom-text .boom-text .detail {
        margin-top: 0.5208vw;
        margin-top: calc(0.5208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom-text .boom-text .detail {}
}

@media (max-width: 1023px) {
    .camera-boom-text .boom-text .detail {
        margin-top: 1.923vw
    }
}

.camera-boom-text .item-1 {
    left: 0;
    width: 100%
}

@media (min-width: 1024px) {
    .camera-boom-text .item-1 {
        top: 8.3333vw;
        top: calc(8.3333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom-text .item-1 {}
}

@media (max-width: 1023px) {
    .camera-boom-text .item-1 {
        top: 28.205vw;
        width: 74.872vw
    }
}

@media (max-width:1023px) {
    .camera-boom-text .item-1 .item-text .title {
        _white-space: nowrap;
    }
}

.camera-boom-text .item-1 .item-text .detail {}

@media (min-width: 1024px) {
    .camera-boom-text .item-1 .item-text .detail {
        margin-top: 3.125vw;
        margin-top: calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom-text .item-1 .item-text .detail {}
}

@media (max-width: 1023px) {
    .camera-boom-text .item-1 .item-text .detail {
        margin-top: 7.692vw
    }
}

@media (min-width:1024px) {
    .camera-boom .camera-boom-phone-body {
        bottom: 0
    }
}

@media (min-width: 1024px) {
    .camera-boom .camera-boom-phone-body {
        height: 42.1875vw;
        height: calc(42.1875 * var(--vw, 1vw));
        width: 99.5313vw;
        width: calc(99.5313 * var(--vw, 1vw))
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .camera-boom .camera-boom-phone-body {
        bottom: 150px
    }
}

@media (min-width:1400px) and (max-width:1799px) {
    .camera-boom .camera-boom-phone-body {
        bottom: 60px
    }
}

@media (min-width:2400px) {
    .camera-boom .camera-boom-phone-body {
        bottom: 350px
    }
}

@media (max-width:1023px) {
    .camera-boom .camera-boom-phone-body {
        left: -35%
    }
}

@media (max-width: 1023px) {
    .camera-boom .camera-boom-phone-body {
        bottom: 12.821vw;
        height: 145.041vw;
        width: 244.577vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .camera-boom .camera-boom-phone-body {
        bottom: 120px;
        left: 0%;
        height: 565.66px;
        width: 953.85px
    }
}

@media (min-width:1024px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img {
        bottom: 0
    }
}

@media (min-width: 1024px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img {
        width: 99.5313vw;
        width: calc(99.5313 * var(--vw, 1vw));
        height: 57.5vw;
        height: calc(57.5 * var(--vw, 1vw));
        left: 4.8958vw;
        left: calc(4.8958 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img {
        top: 0;
        left: 0
    }
}

@media (max-width: 1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img {
        height: 145.041vw;
        width: 244.577vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img {
        top: 0;
        left: 0;
        height: 565.66px;
        width: 953.85px
    }
}

.camera-boom .camera-boom-phone-body .camera-boom-img .phone {
    bottom: 0;
    left: 0
}

@media (min-width: 1024px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone {
        height: 32.1354vw;
        height: calc(32.1354 * var(--vw, 1vw));
        width: 99.5313vw;
        width: calc(99.5313 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone {}
}

@media (max-width: 1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone {
        height: 78.938vw;
        width: 244.577vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone {
        height: 307.86px;
        width: 953.85px
    }
}

.camera-boom .camera-boom-phone-body .camera-boom-img .phone img {
    bottom: 0;
    left: 0
}

@media (min-width: 1024px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone img {
        height: 32.1354vw;
        height: calc(32.1354 * var(--vw, 1vw));
        width: 99.5313vw;
        width: calc(99.5313 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone img {}
}

@media (max-width: 1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone img {
        height: 78.938vw;
        width: 244.577vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .phone img {
        height: 307.86px;
        width: 953.85px
    }
}

.camera-boom .camera-boom-phone-body .camera-boom-img .phone-start {
    z-index: 1
}

.camera-boom .camera-boom-phone-body .camera-boom-img .phone-top {
    z-index: 5
}

.camera-boom .camera-boom-phone-body .camera-boom-img .phone-out {
    z-index: 4
}

.camera-boom .camera-boom-phone-body .camera-boom-img .light {
    bottom: 13%;
    left: 29%;
    transform: translateY(5vh) scale(.3);
    transform: translateY(calc(5 * var(--vh, 1vh))) scale(.3);
    z-index: 2
}

@media (min-width: 1024px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light {
        width: 17.5781vw;
        width: calc(17.5781 * var(--vw, 1vw));
        height: 6.5625vw;
        height: calc(6.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light {}
}

@media (max-width: 1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light {
        width: 38.744vw;
        height: 14.428vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light {
        bottom: 18%;
        width: 151.1px;
        height: 56.27px
    }
}

.camera-boom .camera-boom-phone-body .camera-boom-img .light-act {
    transform: translateY(-2vh) scale(.7);
    transform: translateY(calc(-2 * var(--vh, 1vh))) scale(.7);
    transition: transform .5s linear .3s
}

.camera-boom .camera-boom-phone-body .camera-boom-img .light-act-out {
    transform: translateY(5vh) scale(.3);
    transform: translateY(calc(5 * var(--vh, 1vh))) scale(.3);
    transition: transform .5s linear
}

.camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow {
    bottom: 9%;
    left: 28%;
    transform: scale(.3);
    z-index: 2
}

@media (min-width: 1024px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow {
        width: 17.5781vw;
        width: calc(17.5781 * var(--vw, 1vw));
        height: 6.5625vw;
        height: calc(6.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow {}
}

@media (max-width: 1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow {
        width: 38.744vw;
        height: 14.428vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow {
        width: 151.1px;
        height: 56.27px
    }
}

.camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow .light-shadow-act {
    transform: scale(.7);
    transition: transform .5s linear .3s
}

.camera-boom .camera-boom-phone-body .camera-boom-img .light-shadow .light-shadow-act-out {
    transform: scale(.3);
    transition: transform .5s linear
}

.camera-boom .camera-boom-phone-body .camera-boom-img .lens-box {
    z-index: 3;
    height: 73.37%;
    width: 37.15%;
    bottom: 9.4%;
    left: 16.81%
}

.camera-boom .camera-boom-phone-body .camera-boom-img .lens-box .lens-a {
    height: 77%;
    width: 37.32%;
    left: 11.11%;
    bottom: 0
}

.camera-boom .camera-boom-phone-body .camera-boom-img .lens-box .lens-b {
    height: 65%;
    width: 37.32%;
    left: 35.63%;
    bottom: 5.56%
}

.camera-boom .camera-boom-phone-body .camera-boom-img .lens-box .lens-c {
    height: 40%;
    width: 26%;
    left: 64.93%;
    bottom: 12.72%
}

.camera-boom .camera-boom-phone-body .camera-boom-img .lens-box .lens-top {
    height: 28%;
    width: 100%;
    left: 0;
    top: 0
}

.bg-black {
    background: #000
}

.bg-black .close {
    top: 10px;
    right: 10px;
    z-index: 999
}

.bg-black .close:hover {
    background: rgba(255, 255, 255, 0.05)
}

.bg-black .arrow:hover {
    border: 2px solid #fff
}

.bg-black .img-wrapper {}

@media (min-width: 1024px) {
    .bg-black .img-wrapper {
        width: 75vw;
        width: calc(75 * var(--vw, 1vw))
    }
}

.bg-black .img-wrapper .info-expand-window {
    color: #d9d9d9;
    overflow: hidden
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .info-expand-window {
        width: 100vw;
        margin-left: -5.128vw;
        height: 71.795vw;
        margin-top: -57.179vw
    }
}

.bg-black .img-wrapper .info-expand-window .info-container {
    width: 100%;
    height: 100%;
    background: #000;
    transition: transform .5s linear
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .info-expand-window .info-container {
        padding-top: 2.564vw
    }
}

.bg-black .img-wrapper .info-expand-window .info-container .title-tip {
    margin: auto;
    font-size: 12px;
    line-height: 12px;
    height: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .info-expand-window .info-container .title-tip {
        /* width: 16.41vw */
        width: 33.41vw;
    }
}

.bg-black .img-wrapper .info-expand-window .info-container .title-tip img {
    width: 8px;
    height: 5px;
    opacity: 0
}

.bg-black .img-wrapper .info-expand-window .info-container .title-tip .info-close {
    right: 0
}

.bg-black .img-wrapper .info-expand-window .info-container .title-tip .act {
    opacity: 1
}

.bg-black .img-wrapper .info-expand-window .container-act {}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .info-expand-window .container-act {
        transform: translateY(58.974vw)
    }
}

.bg-black .img-wrapper .title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end
}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .title-box {
        padding: 0 3.6458vw 2.0833vw;
        padding: 0 calc(3.6458 * var(--vw, 1vw)) calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .title-box {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .title-box {
        padding: 0 5.128vw 5.128vw
    }
}

.bg-black .img-wrapper .title-box .desc-index {}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .title-box .desc-index {
        width: 1.875vw;
        width: calc(1.875 * var(--vw, 1vw));
        height: 1.875vw;
        height: calc(1.875 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .title-box .desc-index {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .title-box .desc-index {
        width: 6.154vw;
        height: 6.923vw
    }
}

.bg-black .img-wrapper .title-box .desc-index .line {
    background: #666
}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .title-box .desc-index .line {
        height: 0.0521vw;
        height: calc(0.0521 * var(--vw, 1vw));
        width: 2.6563vw;
        width: calc(2.6563 * var(--vw, 1vw));
        transform: rotate(-45deg) translate(-0.2604vw, -0.2604vw);
        transform: rotate(-45deg) translate(calc(-0.2604 * var(--vw, 1vw)), calc(-0.2604 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .title-box .desc-index .line {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .title-box .desc-index .line {
        height: 0.256vw;
        width: 8.205vw;
        transform: rotate(-45deg) translate(-0.769vw, -0.769vw)
    }
}

.bg-black .img-wrapper .title-box .desc-index .last {
    color: #666
}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .title-box .desc-index .last {
        padding-left: 1.5625vw;
        padding-left: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .title-box .desc-index .last {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .title-box .desc-index .last {
        padding-left: 5.128vw
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .arrow-wrapper {
        margin: auto;
        justify-content: space-between
    }
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .arrow-wrapper {
        margin-top: 5.128vw;
        width: 74.872vw
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .arrow-wrapper .prev {
        margin: 0
    }
}

.bg-black .img-wrapper .arrow-wrapper .desc-index {}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index {
        width: 1.875vw;
        width: calc(1.875 * var(--vw, 1vw));
        height: 1.875vw;
        height: calc(1.875 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index {
        width: 6.154vw;
        height: 6.923vw
    }
}

.bg-black .img-wrapper .arrow-wrapper .desc-index .line {
    background: #666
}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index .line {
        height: 0.0521vw;
        height: calc(0.0521 * var(--vw, 1vw));
        width: 2.6563vw;
        width: calc(2.6563 * var(--vw, 1vw));
        transform: rotate(-45deg) translate(-0.2604vw, -0.2604vw);
        transform: rotate(-45deg) translate(calc(-0.2604 * var(--vw, 1vw)), calc(-0.2604 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index .line {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index .line {
        height: 0.256vw;
        width: 8.205vw;
        transform: rotate(-45deg) translate(-0.769vw, -0.769vw)
    }
}

.bg-black .img-wrapper .arrow-wrapper .desc-index .last {
    color: #666
}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index .last {
        padding-left: 1.5625vw;
        padding-left: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index .last {}
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .arrow-wrapper .desc-index .last {
        padding-left: 5.128vw
    }
}

.bg-black .img-wrapper .img-list, .bg-black .img-wrapper .img-item, .bg-black .img-wrapper .slick-slide {}

@media (min-width: 1024px) {
    .bg-black .img-wrapper .img-list, .bg-black .img-wrapper .img-item, .bg-black .img-wrapper .slick-slide {
        width: 75vw;
        width: calc(75 * var(--vw, 1vw));
        height: 42.1875vw;
        height: calc(42.1875 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .bg-black .img-wrapper .img-list, .bg-black .img-wrapper .img-item, .bg-black .img-wrapper .slick-slide {
        height: 70.44334975369459vh;
        height: calc(70.44334975369459 * var(--vh, 1vh))
    }
    .bg-black .img-wrapper .img-list img, .bg-black .img-wrapper .img-item img, .bg-black .img-wrapper .slick-slide img {
        object-fit: cover
    }
}

@media (max-width: 1023px) {
    .bg-black .img-wrapper .img-list, .bg-black .img-wrapper .img-item, .bg-black .img-wrapper .slick-slide {
        width: 89.744vw
    }
}

#section-camera {
    background: #e3e5e6;
    height: auto
}

#section-camera sup {
    position: relative;
    font-size: .3em;
    top: -.7em
}

#section-camera .camera-chapter {
    width: 100%
}

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

#section-camera .camera-chapter .text {
    z-index: 2;
    color: #fff
}

@media (min-width: 1024px) {
    #section-camera .camera-chapter .text {
        padding-top: 30.8333vw;
        padding-top: calc(30.8333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-chapter .text {
        position: absolute;
        top: 100%;
        color: #000
    }
}

@media (max-width: 1023px) {
    #section-camera .camera-chapter .text {
        margin-top: 7.692vw
    }
}

#section-camera .camera-sticky-container {
    margin-top: -20vh;
    margin-top: calc(-20 * var(--vh, 1vh));
    height: 230vh;
    height: calc(230 * var(--vh, 1vh));
    width: 100%
}

#section-camera .camera-sticky-container .camera-sticky-item {
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    width: 100%;
    overflow: hidden
}

#section-camera .camera-sticky-container .item-0 {
    height: 110vh;
    height: calc(110 * var(--vh, 1vh))
}

@media (max-width:1023px) {
    #section-camera .z-title {}
}

@media (max-width: 1023px) {
    #section-camera .z-title {
        margin-top: 7.692vw
    }
}

#section-camera .camera-headline {}

@media (min-width: 1024px) {
    #section-camera .camera-headline {
        margin-top: 6.25vw;
        margin-top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-headline {}
}

@media (max-width: 1023px) {
    #section-camera .camera-headline {
        margin-top: 7.692vw
    }
}

#section-camera .camera-headline sup {
    position: relative;
    font-size: .3em;
    top: -1em
}

#section-camera .camera-headline .desc {}

@media (max-width: 1023px) {
    #section-camera .camera-headline .desc {
        margin-top: 10.256vw
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item {
        margin: auto
    }
}

@media (max-width: 1023px) {
    #section-camera .camera-item {
        width: 94.872vw;
        margin-top: 25.641vw
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item .item-text {
        margin: auto
    }
}

@media (max-width: 1023px) {
    #section-camera .camera-item .item-text {
        width: 74.872vw;
        margin-bottom: 20.513vw
    }
}

#section-camera .camera-item .item-text .title {
    _white-space: nowrap;
}

#section-camera .camera-item .item-text .detail {}

@media (min-width: 1024px) {
    #section-camera .camera-item .item-text .detail {
        margin-top: 3.125vw;
        margin-top: calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item .item-text .detail {}
}

@media (max-width: 1023px) {
    #section-camera .camera-item .item-text .detail {
        margin-top: 7.692vw
    }
}

#section-camera .camera-item-imx {}

@media (min-width: 1024px) {
    #section-camera .camera-item-imx {
        margin-bottom: 10.4167vw;
        margin-bottom: calc(10.4167 * var(--vw, 1vw))
    }
}

#section-camera .camera-item-imx .card-img-box {
    position: absolute
}

@media (min-width: 1024px) {
    #section-camera .camera-item-imx .card-img-box {
        width: 99.5313vw;
        width: calc(99.5313 * var(--vw, 1vw));
        height: 59.1146vw;
        height: calc(59.1146 * var(--vw, 1vw));
        left: 4.8958vw;
        left: calc(4.8958 * var(--vw, 1vw));
        top: -11.4583vw;
        top: calc(-11.4583 * var(--vw, 1vw))
    }
}

#section-camera .camera-item-imx .item-text {}

@media (min-width: 1024px) {
    #section-camera .camera-item-imx .item-text {
        margin-top: 5.2083vw;
        margin-top: calc(5.2083 * var(--vw, 1vw))
    }
}

#section-camera .camera-item-dark {}

@media (min-width: 1024px) {
    #section-camera .camera-item-dark {
        padding-top: 10.4167vw;
        padding-top: calc(10.4167 * var(--vw, 1vw))
    }
}

#section-camera .camera-item-dark .card-img-box {
    display: flex;
    justify-content: space-between
}

#section-camera .camera-item-dark .card-img-box .img-box:nth-child(1) {
    overflow: hidden
}

@media (min-width: 1024px) {
    #section-camera .camera-item-dark .card-img-box .img-box:nth-child(1) {
        width: 48.9583vw;
        width: calc(48.9583 * var(--vw, 1vw));
        height: 56.25vw;
        height: calc(56.25 * var(--vw, 1vw));
        margin-top: 6.25vw;
        margin-top: calc(6.25 * var(--vw, 1vw));
        margin-right: 2.0833vw;
        margin-right: calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item-dark .card-img-box .img-box:nth-child(1) {}
}

@media (max-width: 1023px) {
    #section-camera .camera-item-dark .card-img-box .img-box:nth-child(1) {
        width: 61.538vw;
        height: 92.308vw
    }
}

#section-camera .camera-item-dark .card-img-box .img-box:nth-child(2) {
    overflow: hidden
}

@media (min-width: 1024px) {
    #section-camera .camera-item-dark .card-img-box .img-box:nth-child(2) {
        width: 23.9583vw;
        width: calc(23.9583 * var(--vw, 1vw));
        height: 32.8125vw;
        height: calc(32.8125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item-dark .card-img-box .img-box:nth-child(2) {}
}

@media (max-width: 1023px) {
    #section-camera .camera-item-dark .card-img-box .img-box:nth-child(2) {
        width: 30.769vw;
        height: 41.026vw;
        margin-top: -7.692vw
    }
}

#section-camera .camera-item-back {}

@media (min-width: 1024px) {
    #section-camera .camera-item-back {
        margin-top: 10.4167vw;
        margin-top: calc(10.4167 * var(--vw, 1vw));
        margin-bottom: 6.25vw;
        margin-bottom: calc(6.25 * var(--vw, 1vw))
    }
}

#section-camera .camera-item-back .card-img-box {
    position: relative
}

@media (min-width: 1024px) {
    #section-camera .camera-item-back .card-img-box {
        margin-top: 6.25vw;
        margin-top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item-back .card-img-box {
        margin: auto
    }
}

@media (max-width: 1023px) {
    #section-camera .camera-item-back .card-img-box {
        height: 117.949vw;
        width: 94.872vw;
        margin-top: 20.513vw
    }
}

#section-camera .camera-item-back .card-img-box .img-box {
    overflow: hidden
}

#section-camera .camera-item-back .card-img-box .img-box .video-off {
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .3s linear
}

#section-camera .camera-item-back .card-img-box .img-box .video-on {
    opacity: 0;
    transition: opacity .3s linear
}

#section-camera .camera-item-back .card-img-box .img-box .turn-on {
    opacity: 1
}

#section-camera .camera-item-back .card-img-box .desc-box {
    left: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

@media (min-width: 1024px) {
    #section-camera .camera-item-back .card-img-box .desc-box {
        top: 1.5625vw;
        top: calc(1.5625 * var(--vw, 1vw));
        height: 1.5625vw;
        height: calc(1.5625 * var(--vw, 1vw));
        padding: 0 1.5625vw;
        padding: 0 calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item-back .card-img-box .desc-box {}
}

@media (max-width: 1023px) {
    #section-camera .camera-item-back .card-img-box .desc-box {
        top: 5.128vw;
        padding: 0 5.128vw;
        height: 7.692vw
    }
}

#section-camera .camera-item-back .card-img-box .desc-box img {}

@media (min-width: 1024px) {
    #section-camera .camera-item-back .card-img-box .desc-box img {
        width: 2.2786vw;
        width: calc(2.2786 * var(--vw, 1vw));
        height: 1.0417vw;
        height: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item-back .card-img-box .desc-box img {}
}

@media (max-width: 1023px) {
    #section-camera .camera-item-back .card-img-box .desc-box img {
        width: 7.244vw;
        height: 3.313vw
    }
}

#section-camera .camera-item-back .card-img-box .desc-box .turn-box .turn {
    cursor: pointer;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .4
}

@media (min-width: 1024px) {
    #section-camera .camera-item-back .card-img-box .desc-box .turn-box .turn {
        width: 3.125vw;
        width: calc(3.125 * var(--vw, 1vw));
        height: 1.5625vw;
        height: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-camera .camera-item-back .card-img-box .desc-box .turn-box .turn {}
}

@media (max-width: 1023px) {
    #section-camera .camera-item-back .card-img-box .desc-box .turn-box .turn {
        width: 15.385vw;
        height: 7.692vw
    }
}

#section-camera .camera-item-back .card-img-box .desc-box .turn-box .act {
    opacity: 1
}

#section-camera .camera-item-back .card-img-box .desc-box .turn-box .border-on:not(.act) {
    border-right: none
}

#section-camera .camera-item-back .card-img-box .desc-box .turn-box .border-off:not(.act) {
    border-left: none
}

#section-camera .camera-learn-more {
    height: auto;
    position: relative;
    z-index: 3
}

@media (max-width:1023px) {
    #section-camera .camera-learn-more {}
}

@media (max-width: 1023px) {
    #section-camera .camera-learn-more {
        margin-top: 15.385vw
    }
}

@media (max-width:1023px) {
    #section-camera .camera-learn-more>div {}
}

@media (max-width: 1023px) {
    #section-camera .camera-learn-more>div {
        margin-left: 12.821vw
    }
}

.camera-footer-container {
    height: 150vh;
    height: calc(150 * var(--vh, 1vh));
    width: 100%;
    position: relative;
    z-index: 0;
    background: #e3e5e6
}

@media (min-width: 1024px) {
    .camera-footer-container {
        margin-top: calc(-50vh + 9.375vw);
        margin-top: calc((-50 * var(--vh, 1vh)) + 9.375vw);
        margin-top: calc(-50vh + (9.375 * var(--vw, 1vw)));
        margin-top: calc((-50 * var(--vh, 1vh)) + (9.375 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    .camera-footer-container {}
}

@media (max-width: 1023px) {
    .camera-footer-container {
        margin-top: calc(-50vh + 30.769vw);
        margin-top: calc((-50 * var(--vh, 1vh)) + 30.769vw)
    }
}

.camera-footer-container .footer-sticky-item {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    width: 100%
}

.camera-footer-container .footer-sticky-item .item {
    width: 100%;
    -webkit-clip-path: inset(50% 0 50% 0);
    clip-path: inset(50% 0 50% 0)
}

.camera-footer-container .footer-sticky-item .item:nth-child(1) {
    transition: -webkit-clip-path .7s linear;
    transition: clip-path .7s linear;
    transition: clip-path .7s linear, -webkit-clip-path .7s linear
}

.camera-footer-container .footer-sticky-item .item:nth-child(2) {
    transition: -webkit-clip-path .525s linear;
    transition: clip-path .525s linear;
    transition: clip-path .525s linear, -webkit-clip-path .525s linear
}

.camera-footer-container .footer-sticky-item .item:nth-child(3) {
    transition: -webkit-clip-path .3500000000000001s linear;
    transition: clip-path .3500000000000001s linear;
    transition: clip-path .3500000000000001s linear, -webkit-clip-path .3500000000000001s linear
}

.camera-footer-container .footer-sticky-item .item:nth-child(4) {
    transition: -webkit-clip-path .17500000000000004s linear;
    transition: clip-path .17500000000000004s linear;
    transition: clip-path .17500000000000004s linear, -webkit-clip-path .17500000000000004s linear
}

.camera-footer-container .footer-sticky-item .item .center-box {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer
}

@media (max-width:1023px) {
    .camera-footer-container .footer-sticky-item .item .center-box {
        width: 100%;
        text-align: center
    }
}

.camera-footer-container .footer-sticky-item .item-act {
    -webkit-clip-path: inset(0% 0 0% 0);
    clip-path: inset(0% 0 0% 0)
}

.camera-footer-container .footer-sticky-item .item-act:nth-child(1) {
    transition: -webkit-clip-path .7s linear 0s;
    transition: clip-path .7s linear 0s;
    transition: clip-path .7s linear 0s, -webkit-clip-path .7s linear 0s
}

.camera-footer-container .footer-sticky-item .item-act:nth-child(2) {
    transition: -webkit-clip-path .525s linear .175s;
    transition: clip-path .525s linear .175s;
    transition: clip-path .525s linear .175s, -webkit-clip-path .525s linear .175s
}

.camera-footer-container .footer-sticky-item .item-act:nth-child(3) {
    transition: -webkit-clip-path .3500000000000001s linear .3499999999999999s;
    transition: clip-path .3500000000000001s linear .3499999999999999s;
    transition: clip-path .3500000000000001s linear .3499999999999999s, -webkit-clip-path .3500000000000001s linear .3499999999999999s
}

.camera-footer-container .footer-sticky-item .item-act:nth-child(4) {
    transition: -webkit-clip-path .17500000000000004s linear .5249999999999999s;
    transition: clip-path .17500000000000004s linear .5249999999999999s;
    transition: clip-path .17500000000000004s linear .5249999999999999s, -webkit-clip-path .17500000000000004s linear .5249999999999999s
}

.camera-footer-container .footer-sticky-item .item-1 {
    z-index: 1;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    top: 0
}

.camera-footer-container .footer-sticky-item .item-2 {
    z-index: 2;
    height: 80vh;
    height: calc(80 * var(--vh, 1vh));
    top: 10vh;
    top: calc(10 * var(--vh, 1vh))
}

.camera-footer-container .footer-sticky-item .item-3 {
    z-index: 3;
    height: 60vh;
    height: calc(60 * var(--vh, 1vh));
    top: 20vh;
    top: calc(20 * var(--vh, 1vh))
}

.camera-footer-container .footer-sticky-item .item-4 {
    z-index: 4;
    height: 40vh;
    height: calc(40 * var(--vh, 1vh));
    top: 30vh;
    top: calc(30 * var(--vh, 1vh))
}

.pic-desc-container {
    opacity: 0
}

@media (min-width: 1024px) {
    .pic-desc-container {
        bottom: -1.4583vw;
        bottom: calc(-1.4583 * var(--vw, 1vw));
        left: 3.9063vw;
        left: calc(3.9063 * var(--vw, 1vw));
        width: 16.6667vw;
        width: calc(16.6667 * var(--vw, 1vw))
    }
}

.pic-desc-container .lr-box {
    justify-content: space-between;
    align-items: flex-end
}

@media (min-width: 1024px) {
    .pic-desc-container .lr-box {
        height: 1.5625vw;
        height: calc(1.5625 * var(--vw, 1vw));
        padding-bottom: 0.2604vw;
        padding-bottom: calc(0.2604 * var(--vw, 1vw));
        border-top: 0.0521vw solid rgba(102, 102, 102, 0.4);
        border-top: calc(0.0521 * var(--vw, 1vw)) solid rgba(102, 102, 102, 0.4)
    }
}

.pic-desc-container .lr-box .title {
    color: #666
}

.pic-desc-container .lr-box .desc {
    color: #d9d9d9
}

.pic-desc-act {
    opacity: 1
}

@media (max-width:1023px) {
    .pic-desc {
        margin: auto
    }
}

@media (max-width: 1023px) {
    .pic-desc {
        width: 71.795vw;
        height: 33.333vw;
        margin-top: 10.256vw
    }
}

@media (max-width:1023px) {
    .pic-desc .pic-desc-container {}
}

@media (max-width: 1023px) {
    .pic-desc .pic-desc-container {
        width: 71.795vw
    }
}

@media (max-width:1023px) {
    .pic-desc .pic-desc-container .lr-box {}
}

@media (max-width: 1023px) {
    .pic-desc .pic-desc-container .lr-box {
        height: 5.641vw;
        margin-bottom: 1.282vw;
        border-top: 0.256vw solid rgba(102, 102, 102, 0.4)
    }
}

.leave-opacity {
    opacity: 0
}

.lens-box .lens-bottom {
    width: 72%;
    left: 13%;
    bottom: -6%
}

.lens-box .lens-a img:nth-child(7) {
    bottom: 0;
    left: 41%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(7) {
        width: 7.2516vw;
        width: calc(7.2516 * var(--vw, 1vw));
        height: 5.3085vw;
        height: calc(5.3085 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(7) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(7) {
        width: 17.85vw;
        height: 13.067vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(7) {
        width: 69.61538461538461px;
        height: 50.96153846153846px
    }
}

.lens-box .lens-a img:nth-child(6) {
    bottom: 2%;
    left: 43%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(6) {
        width: 6.1498vw;
        width: calc(6.1498 * var(--vw, 1vw));
        height: 2.4439vw;
        height: calc(2.4439 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(6) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(6) {
        width: 15.138vw;
        height: 6.016vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(6) {
        width: 59.03846153846153px;
        height: 23.46153846153846px
    }
}

.lens-box .lens-a img:nth-child(5) {
    bottom: 2%;
    left: 43%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(5) {
        width: 5.9495vw;
        width: calc(5.9495 * var(--vw, 1vw));
        height: 2.3237vw;
        height: calc(2.3237 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(5) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(5) {
        width: 14.645vw;
        height: 5.72vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(5) {
        width: 57.11538461538461px;
        height: 22.307692307692307px
    }
}

.lens-box .lens-a img:nth-child(4) {
    bottom: 1%;
    left: 43%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(4) {
        width: 6.1498vw;
        width: calc(6.1498 * var(--vw, 1vw));
        height: 2.4038vw;
        height: calc(2.4038 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(4) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(4) {
        width: 15.138vw;
        height: 5.917vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(4) {
        width: 59.03846153846153px;
        height: 23.076923076923077px
    }
}

.lens-box .lens-a img:nth-child(3) {
    bottom: 1%;
    left: 42%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(3) {
        width: 6.27vw;
        width: calc(6.27 * var(--vw, 1vw));
        height: 2.4239vw;
        height: calc(2.4239 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(3) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(3) {
        width: 15.434vw;
        height: 5.966vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(3) {
        width: 60.19230769230769px;
        height: 23.26923076923077px
    }
}

.lens-box .lens-a img:nth-child(2) {
    bottom: 1%;
    left: 42%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(2) {
        width: 6.4704vw;
        width: calc(6.4704 * var(--vw, 1vw));
        height: 2.524vw;
        height: calc(2.524 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(2) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(2) {
        width: 15.927vw;
        height: 6.213vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(2) {
        width: 62.11538461538461px;
        height: 24.23076923076923px
    }
}

.lens-box .lens-a img:nth-child(1) {
    bottom: 0;
    left: 40%
}

@media (min-width: 1024px) {
    .lens-box .lens-a img:nth-child(1) {
        width: 6.9111vw;
        width: calc(6.9111 * var(--vw, 1vw));
        height: 2.7644vw;
        height: calc(2.7644 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-a img:nth-child(1) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-a img:nth-child(1) {
        width: 17.012vw;
        height: 6.805vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-a img:nth-child(1) {
        width: 66.34615384615384px;
        height: 26.538461538461537px
    }
}

.lens-box .lens-b img:nth-child(1) {
    bottom: 3%;
    left: 37%
}

@media (min-width: 1024px) {
    .lens-box .lens-b img:nth-child(1) {
        width: 4.0665vw;
        width: calc(4.0665 * var(--vw, 1vw));
        height: 1.5825vw;
        height: calc(1.5825 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-b img:nth-child(1) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-b img:nth-child(1) {
        width: 10.01vw;
        height: 3.895vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-b img:nth-child(1) {
        width: 39.03846153846154px;
        height: 15.192307692307692px
    }
}

.lens-box .lens-b img:nth-child(2) {
    bottom: 3%;
    left: 37%
}

@media (min-width: 1024px) {
    .lens-box .lens-b img:nth-child(2) {
        width: 3.9463vw;
        width: calc(3.9463 * var(--vw, 1vw));
        height: 1.5425vw;
        height: calc(1.5425 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-b img:nth-child(2) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-b img:nth-child(2) {
        width: 9.714vw;
        height: 3.797vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-b img:nth-child(2) {
        width: 37.88461538461539px;
        height: 14.807692307692307px
    }
}

.lens-box .lens-b img:nth-child(3) {
    bottom: 3%;
    left: 38%
}

@media (min-width: 1024px) {
    .lens-box .lens-b img:nth-child(3) {
        width: 3.7861vw;
        width: calc(3.7861 * var(--vw, 1vw));
        height: 1.4824vw;
        height: calc(1.4824 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-b img:nth-child(3) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-b img:nth-child(3) {
        width: 9.32vw;
        height: 3.649vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-b img:nth-child(3) {
        width: 36.34615384615385px;
        height: 14.23076923076923px
    }
}

.lens-box .lens-b img:nth-child(4) {
    bottom: 3%;
    left: 39%
}

@media (min-width: 1024px) {
    .lens-box .lens-b img:nth-child(4) {
        width: 3.6659vw;
        width: calc(3.6659 * var(--vw, 1vw));
        height: 1.4423vw;
        height: calc(1.4423 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-b img:nth-child(4) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-b img:nth-child(4) {
        width: 9.024vw;
        height: 3.55vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-b img:nth-child(4) {
        width: 35.19230769230769px;
        height: 13.846153846153845px
    }
}

.lens-box .lens-b img:nth-child(5) {
    bottom: 3%;
    left: 39%
}

@media (min-width: 1024px) {
    .lens-box .lens-b img:nth-child(5) {
        width: 3.5056vw;
        width: calc(3.5056 * var(--vw, 1vw));
        height: 1.4223vw;
        height: calc(1.4223 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-b img:nth-child(5) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-b img:nth-child(5) {
        width: 8.629vw;
        height: 3.501vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-b img:nth-child(5) {
        width: 33.65384615384615px;
        height: 13.653846153846153px
    }
}

.lens-box .lens-b img:nth-child(6) {
    bottom: 3%;
    left: 38%
}

@media (min-width: 1024px) {
    .lens-box .lens-b img:nth-child(6) {
        width: 4.0665vw;
        width: calc(4.0665 * var(--vw, 1vw));
        height: 3.7861vw;
        height: calc(3.7861 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-b img:nth-child(6) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-b img:nth-child(6) {
        width: 10.01vw;
        height: 9.32vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-b img:nth-child(6) {
        width: 39.03846153846154px;
        height: 36.34615384615385px
    }
}

.lens-box .lens-c img:nth-child(4) {
    bottom: 6%;
    left: 17%
}

@media (min-width: 1024px) {
    .lens-box .lens-c img:nth-child(4) {
        width: 2.9247vw;
        width: calc(2.9247 * var(--vw, 1vw));
        height: 1.9431vw;
        height: calc(1.9431 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-c img:nth-child(4) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-c img:nth-child(4) {
        width: 7.199vw;
        height: 4.783vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-c img:nth-child(4) {
        width: 28.076923076923077px;
        height: 18.653846153846153px
    }
}

.lens-box .lens-c img:nth-child(3) {
    bottom: 6%;
    left: 16%
}

@media (min-width: 1024px) {
    .lens-box .lens-c img:nth-child(3) {
        width: 2.9647vw;
        width: calc(2.9647 * var(--vw, 1vw));
        height: 1.1819vw;
        height: calc(1.1819 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-c img:nth-child(3) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-c img:nth-child(3) {
        width: 7.298vw;
        height: 2.909vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-c img:nth-child(3) {
        width: 28.46153846153846px;
        height: 11.346153846153845px
    }
}

.lens-box .lens-c img:nth-child(2) {
    bottom: 6%;
    left: 15%
}

@media (min-width: 1024px) {
    .lens-box .lens-c img:nth-child(2) {
        width: 3.0449vw;
        width: calc(3.0449 * var(--vw, 1vw));
        height: 1.2019vw;
        height: calc(1.2019 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-c img:nth-child(2) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-c img:nth-child(2) {
        width: 7.495vw;
        height: 2.959vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-c img:nth-child(2) {
        width: 29.23076923076923px;
        height: 11.538461538461538px
    }
}

.lens-box .lens-c img:nth-child(1) {
    bottom: 6%;
    left: 15%
}

@media (min-width: 1024px) {
    .lens-box .lens-c img:nth-child(1) {
        width: 3.1651vw;
        width: calc(3.1651 * var(--vw, 1vw));
        height: 1.242vw;
        height: calc(1.242 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .lens-box .lens-c img:nth-child(1) {}
}

@media (max-width: 1023px) {
    .lens-box .lens-c img:nth-child(1) {
        width: 7.791vw;
        height: 3.057vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .lens-box .lens-c img:nth-child(1) {
        width: 30.384615384615383px;
        height: 11.923076923076923px
    }
}

@media (min-width:1024px) {
    .bottom-act {
        transform: translateY(-5vh);
        transform: translateY(calc(-5 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .bottom-act {
        transform: translateY(-5vh);
        transform: translateY(calc(-5 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .bottom-act-out {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .bottom-act-out {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(1) {
        transform: translateY(-12vh);
        transform: translateY(calc(-12 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(1) {
        transform: translateY(-9.23076923076923vh);
        transform: translateY(calc(-9.23076923076923 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(1) {
        transform: translateY(-10.1vh);
        transform: translateY(calc(-10.1 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(2) {
        transform: translateY(-17vh);
        transform: translateY(calc(-17 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(2) {
        transform: translateY(-13.076923076923077vh);
        transform: translateY(calc(-13.076923076923077 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(2) {
        transform: translateY(-13.399999999999999vh);
        transform: translateY(calc(-13.399999999999999 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(3) {
        transform: translateY(-22vh);
        transform: translateY(calc(-22 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(3) {
        transform: translateY(-16.923076923076923vh);
        transform: translateY(calc(-16.923076923076923 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(3) {
        transform: translateY(-16.7vh);
        transform: translateY(calc(-16.7 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(4) {
        transform: translateY(-27vh);
        transform: translateY(calc(-27 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(4) {
        transform: translateY(-20.76923076923077vh);
        transform: translateY(calc(-20.76923076923077 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(4) {
        transform: translateY(-20vh);
        transform: translateY(calc(-20 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(5) {
        transform: translateY(-32vh);
        transform: translateY(calc(-32 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(5) {
        transform: translateY(-24.615384615384613vh);
        transform: translateY(calc(-24.615384615384613 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(5) {
        transform: translateY(-23.3vh);
        transform: translateY(calc(-23.3 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(6) {
        transform: translateY(-37vh);
        transform: translateY(calc(-37 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(6) {
        transform: translateY(-28.46153846153846vh);
        transform: translateY(calc(-28.46153846153846 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(6) {
        transform: translateY(-26.599999999999998vh);
        transform: translateY(calc(-26.599999999999998 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act img:nth-child(7) {
        transform: translateY(-42vh);
        transform: translateY(calc(-42 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-a-act img:nth-child(7) {
        transform: translateY(-32.30769230769231vh);
        transform: translateY(calc(-32.30769230769231 * var(--vh, 1vh)))
    }
}

@media (max-width:1023px) {
    .lens-a-act img:nth-child(7) {
        transform: translateY(-29.9vh);
        transform: translateY(calc(-29.9 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(1) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(1) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(2) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(2) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(3) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(3) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(4) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(4) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(5) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(5) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(6) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(6) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-a-act-out img:nth-child(7) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-a-act-out img:nth-child(7) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act img:nth-child(1) {
        transform: translateY(-10vh);
        transform: translateY(calc(-10 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-b-act img:nth-child(1) {
        transform: translateY(-7.692307692307692vh);
        transform: translateY(calc(-7.692307692307692 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act img:nth-child(1) {
        transform: translateY(-8vh);
        transform: translateY(calc(-8 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act img:nth-child(2) {
        transform: translateY(-14vh);
        transform: translateY(calc(-14 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-b-act img:nth-child(2) {
        transform: translateY(-10.769230769230768vh);
        transform: translateY(calc(-10.769230769230768 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act img:nth-child(2) {
        transform: translateY(-10.5vh);
        transform: translateY(calc(-10.5 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act img:nth-child(3) {
        transform: translateY(-18vh);
        transform: translateY(calc(-18 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-b-act img:nth-child(3) {
        transform: translateY(-13.846153846153845vh);
        transform: translateY(calc(-13.846153846153845 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act img:nth-child(3) {
        transform: translateY(-13vh);
        transform: translateY(calc(-13 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act img:nth-child(4) {
        transform: translateY(-22vh);
        transform: translateY(calc(-22 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-b-act img:nth-child(4) {
        transform: translateY(-16.923076923076923vh);
        transform: translateY(calc(-16.923076923076923 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act img:nth-child(4) {
        transform: translateY(-15.5vh);
        transform: translateY(calc(-15.5 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act img:nth-child(5) {
        transform: translateY(-26vh);
        transform: translateY(calc(-26 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-b-act img:nth-child(5) {
        transform: translateY(-20vh);
        transform: translateY(calc(-20 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act img:nth-child(5) {
        transform: translateY(-18vh);
        transform: translateY(calc(-18 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act img:nth-child(6) {
        transform: translateY(-30vh);
        transform: translateY(calc(-30 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-b-act img:nth-child(6) {
        transform: translateY(-23.076923076923077vh);
        transform: translateY(calc(-23.076923076923077 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act img:nth-child(6) {
        transform: translateY(-20.5vh);
        transform: translateY(calc(-20.5 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act-out img:nth-child(1) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act-out img:nth-child(1) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act-out img:nth-child(2) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act-out img:nth-child(2) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act-out img:nth-child(3) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act-out img:nth-child(3) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act-out img:nth-child(4) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act-out img:nth-child(4) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act-out img:nth-child(5) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act-out img:nth-child(5) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-b-act-out img:nth-child(6) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-b-act-out img:nth-child(6) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act img:nth-child(1) {
        transform: translateY(-9vh);
        transform: translateY(calc(-9 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-c-act img:nth-child(1) {
        transform: translateY(-6.923076923076922vh);
        transform: translateY(calc(-6.923076923076922 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act img:nth-child(1) {
        transform: translateY(-6.82vh);
        transform: translateY(calc(-6.82 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act img:nth-child(2) {
        transform: translateY(-12vh);
        transform: translateY(calc(-12 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-c-act img:nth-child(2) {
        transform: translateY(-9.23076923076923vh);
        transform: translateY(calc(-9.23076923076923 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act img:nth-child(2) {
        transform: translateY(-9.02vh);
        transform: translateY(calc(-9.02 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act img:nth-child(3) {
        transform: translateY(-15vh);
        transform: translateY(calc(-15 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-c-act img:nth-child(3) {
        transform: translateY(-11.538461538461538vh);
        transform: translateY(calc(-11.538461538461538 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act img:nth-child(3) {
        transform: translateY(-11.22vh);
        transform: translateY(calc(-11.22 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act img:nth-child(4) {
        transform: translateY(-18vh);
        transform: translateY(calc(-18 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .lens-c-act img:nth-child(4) {
        transform: translateY(-13.846153846153845vh);
        transform: translateY(calc(-13.846153846153845 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act img:nth-child(4) {
        transform: translateY(-13.420000000000002vh);
        transform: translateY(calc(-13.420000000000002 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act-out img:nth-child(1) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act-out img:nth-child(1) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act-out img:nth-child(2) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act-out img:nth-child(2) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act-out img:nth-child(3) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act-out img:nth-child(3) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .lens-c-act-out img:nth-child(4) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .lens-c-act-out img:nth-child(4) {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .phone-top-act {
        transform: translateY(-51vh);
        transform: translateY(calc(-51 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    .phone-top-act {
        transform: translateY(-39.230769230769226vh);
        transform: translateY(calc(-39.230769230769226 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .phone-top-act {
        transform: translateY(-36vh);
        transform: translateY(calc(-36 * var(--vh, 1vh)));
        transition: transform .5s linear
    }
}

@media (min-width:1024px) {
    .phone-top-act-out {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

@media (max-width:1023px) {
    .phone-top-act-out {
        transform: translateY(0);
        transition: transform .5s linear
    }
}

.camera-boom-text>.text-item>.item-text .title {
    transform: translateY(6vh);
    transform: translateY(calc(6 * var(--vh, 1vh)));
    transition: transform .5s linear .3s
}

.camera-boom-text>.text-item>.item-text .title-act {
    transform: translateY(0)
}

.camera-boom-text>.text-item>.item-text .title-act-out {
    transform: translateY(6vh);
    transform: translateY(calc(6 * var(--vh, 1vh)));
    transition: transform .5s linear
}

.camera-boom-text>.text-item>.item-text .detail {
    transform: translateY(11vh);
    transform: translateY(calc(11 * var(--vh, 1vh)));
    transition: transform .5s linear .3s
}

.camera-boom-text>.text-item>.item-text .detail-act {
    transform: translateY(0)
}

.camera-boom-text>.text-item>.item-text .detail-act-out {
    transform: translateY(11vh);
    transform: translateY(calc(11 * var(--vh, 1vh)));
    transition: transform .5s linear
}

.act-opacity {
    opacity: 1;
    transition: opacity .5s linear .3s
}

.act-opacity-out {
    opacity: 0;
    transition: opacity .5s linear
}

.camera-boom-text>.text-item>.boom-text {
    opacity: 0
}

.camera-boom-text>.text-item>.boom-text:nth-child(1) {
    transform: translateY(4vh);
    transform: translateY(calc(4 * var(--vh, 1vh)))
}

.camera-boom-text>.text-item>.boom-text:nth-child(2) {
    transform: translateY(8vh);
    transform: translateY(calc(8 * var(--vh, 1vh)))
}

.camera-boom-text>.text-item>.boom-text:nth-child(3) {
    transform: translateY(12vh);
    transform: translateY(calc(12 * var(--vh, 1vh)))
}

.camera-boom-text>.text-item>.first-text-act {
    opacity: 1;
    transition: opacity, transform .5s linear
}

.camera-boom-text>.text-item>.first-text-act:nth-child(1) {
    transform: translateY(0)
}

.camera-boom-text>.text-item>.first-text-act:nth-child(2) {
    transform: translateY(0)
}

.camera-boom-text>.text-item>.first-text-act:nth-child(3) {
    transform: translateY(0)
}

.camera-boom-text>.text-item>.first-text-act-out {
    opacity: 0;
    transition: opacity, transform .5s linear
}

.camera-boom-text>.text-item>.first-text-act-out:nth-child(1) {
    transform: translateY(4vh);
    transform: translateY(calc(4 * var(--vh, 1vh)))
}

.camera-boom-text>.text-item>.first-text-act-out:nth-child(2) {
    transform: translateY(8vh);
    transform: translateY(calc(8 * var(--vh, 1vh)))
}

.camera-boom-text>.text-item>.first-text-act-out:nth-child(3) {
    transform: translateY(12vh);
    transform: translateY(calc(12 * var(--vh, 1vh)))
}

.first-group-leave {
    opacity: 0;
    transform: translateY(-20vh);
    transform: translateY(calc(-20 * var(--vh, 1vh)));
    transition: all .3s linear
}

.first-group-in {
    opacity: 1;
    transform: translateY(0);
    transition: all .3s linear .5s
}

.camera-boom-text-leave {
    opacity: 0;
    transform: translateY(15vh);
    transform: translateY(calc(15 * var(--vh, 1vh)));
    transition: all .5s linear
}

.flex {
    display: flex
}

.learn-more-box-btn {
    width: -webkit-max-content;
    width: max-content;
    cursor: pointer
}

@media (min-width: 1024px) {
    .learn-more-box-btn {
        margin-top: 3.125vw;
        margin-top: calc(3.125 * var(--vw, 1vw));
        height: 1.5625vw;
        height: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .learn-more-box-btn {
        margin: auto;
        margin-top: 40px;
        width: -webkit-max-content;
        width: max-content;
        height: 19px
    }
}

.learn-more-box-btn .icon {
    transition: transform .5s linear
}

@media (min-width: 1024px) {
    .learn-more-box-btn .icon {
        margin-right: 1.0417vw;
        margin-right: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .learn-more-box-btn .icon {
        margin-right: 15px
    }
}

@media (min-width:1024px) {
    .learn-more-box-btn .icon, .learn-more-box-btn .icon img {}
}

@media (min-width: 1024px) {
    .learn-more-box-btn .icon, .learn-more-box-btn .icon img {
        width: 1.5625vw;
        width: calc(1.5625 * var(--vw, 1vw));
        height: 1.5104vw;
        height: calc(1.5104 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .learn-more-box-btn .icon, .learn-more-box-btn .icon img {
        height: 19px;
        width: 19.66px
    }
}

.learn-more-box-btn:hover>.icon {
    transform: translateX(10px)
}

.top-bg {
    background: linear-gradient(180deg, #c5c7c9 0%, rgba(227, 229, 230, 0) 100%);
    left: 0;
    position: absolute;
    width: 100vw;
    width: calc(100 * var(--vw, 1vw));
    z-index: 0
}

@media (min-width: 1024px) {
    .top-bg {
        height: 39.5833vw;
        height: calc(39.5833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .top-bg {}
}

@media (max-width: 1023px) {
    .top-bg {
        height: 102.564vw
    }
}

.system-top-bg {
    top: 0
}

.no-bg-container {
    z-index: 1
}

@media (max-width:1023px) {
    .no-bg-container .learn-more-detail {
        width: 292px;
        margin-top: 53px
    }
}

@media (min-width:1024px) {
    .no-bg-container .learn-more-detail {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

@media (min-width: 1024px) {
    .no-bg-container .learn-more-detail {
        margin-top: 4.1667vw;
        margin-top: calc(4.1667 * var(--vw, 1vw))
    }
}

.no-bg-container .learn-more-detail a, .no-bg-container .learn-more-detail a:hover, .no-bg-container .learn-more-detail a:active {
    color: #000
}

#section-system {
    height: auto;
    background: #e3e5e6
}

@media (min-width: 1024px) {
    #section-system {
        padding: 10.4167vw 0;
        padding: calc(10.4167 * var(--vw, 1vw)) 0
    }
}

@media (max-width:1023px) {
    #section-system {}
}

@media (max-width: 1023px) {
    #section-system {
        padding: 15.385vw 0 30.769vw
    }
}

#section-system sup {
    position: relative;
    font-size: .3em;
    top: -.7em
}

#section-system .bottom-sup {
    font-size: .1em;
    top: -.3em
}

#section-system .title-box-mid-line {
    width: 1px;
    background-color: #666;
    background: linear-gradient(to bottom, #000 0%, #000 33%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0) 100%);
    background-size: 100% 300%;
    background-position-y: 100%;
    transition: background-position .2s linear
}

@media (min-width: 1024px) {
    #section-system .title-box-mid-line {
        height: 15.625vw;
        height: calc(15.625 * var(--vw, 1vw));
        margin: 2.0833vw auto;
        margin: calc(2.0833 * var(--vw, 1vw)) auto
    }
}

@media (max-width:1023px) {
    #section-system .title-box-mid-line {
        width: 1px
    }
}

@media (max-width: 1023px) {
    #section-system .title-box-mid-line {
        height: 51.282vw;
        margin: 7.692vw auto
    }
}

@media (min-width:721px) and (max-width:1023px) {
    #section-system .title-box-mid-line {
        height: 200px;
        width: 1px;
        margin: 30px auto
    }
}

#section-system .title-box .line-active {
    background-position-y: 0%
}

#section-system .title-box-title-desc {
    flex-direction: column
}

@media (min-width:1024px) {
    #section-system .learn-more-box {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

@media (min-width: 1024px) {
    #section-system .learn-more-box {
        margin-top: 4.1667vw;
        margin-top: calc(4.1667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .learn-more-box {}
}

@media (max-width: 1023px) {
    #section-system .learn-more-box {
        margin-top: 10.256vw;
        width: 74.872vw
    }
}

@media (min-width:1024px) {
    #section-system .learn-more-box-desc {
        display: flex;
        flex-direction: column
    }
}

#section-system .footer-img-box {
    margin: auto;
    justify-content: center
}

@media (min-width: 1024px) {
    #section-system .footer-img-box {
        margin-top: 7.8125vw;
        margin-top: calc(7.8125 * var(--vw, 1vw));
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        height: 67.7083vw;
        height: calc(67.7083 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .footer-img-box {}
}

@media (max-width: 1023px) {
    #section-system .footer-img-box {
        margin-top: 12.821vw
    }
}

#section-system .footer-img-box .board {
    object-fit: cover;
    opacity: .3;
    top: 0;
    left: 0
}

@media (min-width: 1024px) {
    #section-system .footer-img-box .board {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw));
        height: 64.5833vw;
        height: calc(64.5833 * var(--vw, 1vw))
    }
}

#section-system .footer-img-box .left {}

@media (min-width: 1024px) {
    #section-system .footer-img-box .left {
        margin-top: 5.2083vw;
        margin-top: calc(5.2083 * var(--vw, 1vw));
        width: 19.9479vw;
        width: calc(19.9479 * var(--vw, 1vw));
        height: 53.3333vw;
        height: calc(53.3333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .footer-img-box .left {}
}

@media (max-width: 1023px) {
    #section-system .footer-img-box .left {
        margin-top: 12.821vw;
        width: 31.41vw;
        height: 84.038vw
    }
}

#section-system .footer-img-box .entry-box {
    height: auto
}

@media (min-width: 1024px) {
    #section-system .footer-img-box .entry-box {
        width: 2.5vw;
        width: calc(2.5 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .footer-img-box .entry-box {}
}

@media (max-width: 1023px) {
    #section-system .footer-img-box .entry-box {
        width: 3.846vw
    }
}

#section-system .footer-img-box .right {}

@media (min-width: 1024px) {
    #section-system .footer-img-box .right {
        width: 22.3698vw;
        width: calc(22.3698 * var(--vw, 1vw));
        height: 59.7396vw;
        height: calc(59.7396 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .footer-img-box .right {}
}

@media (max-width: 1023px) {
    #section-system .footer-img-box .right {
        width: 33.397vw;
        height: 89.295vw
    }
}

#section-system .remarks {
    color: #666;
    margin: auto
}

@media (min-width: 1024px) {
    #section-system .remarks {
        width: 50vw;
        width: calc(50 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .remarks {
        margin-top: 120px
    }
}

@media (max-width: 1023px) {
    #section-system .remarks {
        width: 74.872vw
    }
}

#section-system .remarks .container {}

@media (min-width: 1024px) {
    #section-system .remarks .container {
        margin-top: 1.0417vw;
        margin-top: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .remarks .container {
        margin-top: 22px
    }
}

#section-system .remarks .container .container-li {}

@media (min-width: 1024px) {
    #section-system .remarks .container .container-li {
        margin-top: 0.625vw;
        margin-top: calc(0.625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .remarks .container .container-li {
        margin-top: 12px
    }
}

#section-system .remarks .container .container-li .left {}

@media (min-width: 1024px) {
    #section-system .remarks .container .container-li .left {
        width: 1.0417vw;
        width: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    #section-system .remarks .container .container-li .left {
        width: 20px
    }
}

@media (max-width:1023px) {
    #section-system .remarks .container .container-li .left {
        width: 20px
    }
}

#section-system .remarks .container .container-li .right {}

@media (min-width: 1024px) {
    #section-system .remarks .container .container-li .right {
        width: 48.9063vw;
        width: calc(48.9063 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .remarks .container .container-li .right {}
}

@media (max-width: 1023px) {
    #section-system .remarks .container .container-li .right {
        width: 70.185vw
    }
}

#section-system .remarks .remarks-footer {}

@media (min-width: 1024px) {
    #section-system .remarks .remarks-footer {
        margin-top: 2.0833vw;
        margin-top: calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .remarks .remarks-footer {
        margin-top: 21px
    }
}

#section-system .remarks .remarks-footer .left {}

@media (min-width: 1024px) {
    #section-system .remarks .remarks-footer .left {
        width: 1.0417vw;
        width: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (min-width:1024px) and (max-width:1399px) {
    #section-system .remarks .remarks-footer .left {
        width: 20px
    }
}

@media (max-width:1023px) {
    #section-system .remarks .remarks-footer .left {
        width: 20px
    }
}

#section-system .remarks .remarks-footer .right {}

@media (min-width: 1024px) {
    #section-system .remarks .remarks-footer .right {
        width: 48.9063vw;
        width: calc(48.9063 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    #section-system .remarks .remarks-footer .right {}
}

@media (max-width: 1023px) {
    #section-system .remarks .remarks-footer .right {
        width: 70.185vw
    }
}

.g--chapter {
    width: 100%;
    overflow: hidden
}

@media (min-width: 1024px) {
    .g--chapter {
        height: 37.5vw;
        height: calc(37.5 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .g--chapter {}
}

@media (max-width: 1023px) {
    .g--chapter {
        height: 82.051vw
    }
}

.g--chapter .chapter-container {
    height: 100%
}

@media (min-width: 1024px) {
    .g--chapter .chapter-container {
        width: 106.25vw;
        width: calc(106.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .g--chapter .chapter-container {}
}

@media (max-width: 1023px) {
    .g--chapter .chapter-container {
        width: 135.897vw
    }
}

.g--chapter canvas {
    width: 50vw;
    width: calc(50 * var(--vw, 1vw));
    height: 100%
}

@media (max-width:1023px) {
    .g--chapter canvas {
        width: 41.5vw;
        width: calc(41.5 * var(--vw, 1vw))
    }
}

.g--chapter .texture {
    height: 100%;
    display: block;
    opacity: 0;
    position: absolute
}

@media (min-width: 1024px) {
    .g--chapter .texture {
        width: 6.25vw;
        width: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .g--chapter .texture {}
}

@media (max-width: 1023px) {
    .g--chapter .texture {
        width: 12.821vw
    }
}

.z--headline {
    margin: auto
}

@media (min-width: 1024px) {
    .z--headline {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw))
    }
}

.z--headline .line {
    height: 1px;
    background: #000
}

@media (min-width: 1024px) {
    .z--headline .line {
        width: 31.25vw;
        width: calc(31.25 * var(--vw, 1vw));
        margin: 2.6042vw 2.0833vw 0 0;
        margin: calc(2.6042 * var(--vw, 1vw)) calc(2.0833 * var(--vw, 1vw)) 0 0
    }
}

.z--headline .desc {}

@media (min-width: 1024px) {
    .z--headline .desc {
        width: 50vw;
        width: calc(50 * var(--vw, 1vw));
        margin-top: 4.1667vw;
        margin-top: calc(4.1667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .z--headline {
        flex-direction: column
    }
    .z--headline .line {}
}

@media (max-width: 1023px) {
    .z--headline .line {
        width: 74.872vw;
        margin: 0 0 5.128vw 0
    }
}

@media (max-width: 1023px) {
    .z--headline {
        width: 74.872vw
    }
}

.z--headline .line {
    transform: scaleX(0);
    transform-origin: left
}

.z--headline .headline>* {
    opacity: 0
}

.z--headline .headline .t-0 {
    transform: translateY(25px)
}

.z--headline .headline .t-1 {
    transform: translateY(50px)
}

.z--headline .headline .t-2 {
    transform: translateY(75px)
}

.z--headline .headline .t-3 {
    transform: translateY(100px)
}

.z--headline .headline .t-4 {
    transform: translateY(125px)
}

.z--headline.active .line {
    transform: scaleX(1);
    transition: transform .5s
}

.z--headline.active .headline>* {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s .2s, transform .5s .2s
}

.z--headline.inactive .line {
    transition: transform .5s .2s
}

.z--headline.inactive .headline>* {
    transition: opacity .5s, transform .5s
}

.model-content {
    background: #cccecf;
    width: 100vw;
    width: calc(100 * var(--vw, 1vw));
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    display: none;
    position: relative
}

@media (min-width: 1024px) {
    .model-content {
        padding-top: 6.25vw;
        padding-top: calc(6.25 * var(--vw, 1vw))
    }
}

.zn--modal .model-content {
    display: block
}

@media (max-width:1023px) {
    .model-content {
        background: #e3e5e6;
        overflow-y: scroll
    }
}

.model-content sup {
    position: relative;
    font-size: .3em;
    top: -.7em
}

.model-content .bg-linear {
    width: 100%;
    background: linear-gradient(180deg, #b1b3b5 0%, #cccecf 100%)
}

@media (min-width: 1024px) {
    .model-content .bg-linear {
        height: 45.8333vw;
        height: calc(45.8333 * var(--vw, 1vw));
        top: -6.25vw;
        top: calc(-6.25 * var(--vw, 1vw))
    }
}

.model-content .content-box {
    margin: auto;
    position: relative
}

@media (min-width: 1024px) {
    .model-content .content-box {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw))
    }
}

@media (min-width:1024px) {
    .model-content .content-box .fixed-content {
        position: fixed
    }
}

@media (min-width: 1024px) {
    .model-content .content-box .fixed-content {
        width: 25vw;
        width: calc(25 * var(--vw, 1vw));
        height: calc(100vh - 6.25vw);
        height: calc((100 * var(--vh, 1vh)) - 6.25vw);
        height: calc(100vh - (6.25 * var(--vw, 1vw)));
        height: calc((100 * var(--vh, 1vh)) - (6.25 * var(--vw, 1vw)));
        left: calc(50vw - 41.6667vw);
        left: calc((50 * var(--vw, 1vw)) - (41.6667 * var(--vw, 1vw)));
        top: 6.25vw;
        top: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .fixed-content {}
}

@media (max-width: 1023px) {
    .model-content .content-box .fixed-content {
        height: 41.026vw
    }
}

.model-content .content-box .fixed-content img {
    object-fit: cover
}

@media (min-width: 1024px) {
    .model-content .content-box .fixed-content img {
        width: 25vw;
        width: calc(25 * var(--vw, 1vw));
        height: calc(100vh - 6.25vw);
        height: calc((100 * var(--vh, 1vh)) - 6.25vw);
        height: calc(100vh - (6.25 * var(--vw, 1vw)));
        height: calc((100 * var(--vh, 1vh)) - (6.25 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .fixed-content img {}
}

@media (max-width: 1023px) {
    .model-content .content-box .fixed-content img {
        height: 41.026vw
    }
}

.model-content .content-box .fixed-content .return-box {
    justify-content: space-between;
    align-items: center;
    color: #000;
    cursor: pointer
}

@media (min-width: 1024px) {
    .model-content .content-box .fixed-content .return-box {
        top: 2.0833vw;
        top: calc(2.0833 * var(--vw, 1vw));
        left: 2.0833vw;
        left: calc(2.0833 * var(--vw, 1vw));
        width: 4.6875vw;
        width: calc(4.6875 * var(--vw, 1vw));
        height: 1.5104vw;
        height: calc(1.5104 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .fixed-content .return-box {}
}

@media (max-width: 1023px) {
    .model-content .content-box .fixed-content .return-box {
        top: 5.128vw;
        left: 5.128vw;
        height: 5.128vw;
        width: 14.615vw
    }
}

.model-content .content-box .fixed-content .return-box:hover>.icon {
    transform: translateX(10px)
}

.model-content .content-box .fixed-content .return-box .icon {
    transition: transform .5s linear
}

@media (min-width: 1024px) {
    .model-content .content-box .fixed-content .return-box .icon {
        width: 1.1458vw;
        width: calc(1.1458 * var(--vw, 1vw));
        height: 0.8333vw;
        height: calc(0.8333 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .fixed-content .return-box .icon {
        height: auto
    }
}

@media (max-width: 1023px) {
    .model-content .content-box .fixed-content .return-box .icon {
        width: 3.077vw
    }
}

.model-content .content-box .fixed-content .white {
    color: #fff
}

.model-content .content-box .fixed-content .desc-title {
    background: transparent
}

@media (min-width: 1024px) {
    .model-content .content-box .fixed-content .desc-title {
        top: calc(100vh - 12.5vw);
        top: calc((100 * var(--vh, 1vh)) - 12.5vw);
        top: calc(100vh - (12.5 * var(--vw, 1vw)));
        top: calc((100 * var(--vh, 1vh)) - (12.5 * var(--vw, 1vw)));
        left: 2.0833vw;
        left: calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .fixed-content .desc-title {
        left: 50%;
        transform: translateX(-50%)
    }
}

@media (max-width: 1023px) {
    .model-content .content-box .fixed-content .desc-title {
        top: 48.718vw;
        width: 74.872vw
    }
}

@media (max-width:1023px) {
    .model-content .content-box .fixed-content .desc-title:not(.game) {
        color: #000
    }
}

@media (min-width:1024px) {
    .model-content .content-box .scroll-box {
        background: #e3e5e6;
        overflow-y: scroll
    }
}

@media (min-width: 1024px) {
    .model-content .content-box .scroll-box {
        margin-left: 25vw;
        margin-left: calc(25 * var(--vw, 1vw));
        width: 58.3333vw;
        width: calc(58.3333 * var(--vw, 1vw));
        padding: 6.25vw 8.3333vw 0;
        padding: calc(6.25 * var(--vw, 1vw)) calc(8.3333 * var(--vw, 1vw)) 0;
        height: calc(100vh - 6.25vw);
        height: calc((100 * var(--vh, 1vh)) - 6.25vw);
        height: calc(100vh - (6.25 * var(--vw, 1vw)));
        height: calc((100 * var(--vh, 1vh)) - (6.25 * var(--vw, 1vw)))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .scroll-box {
        margin: auto
    }
}

@media (max-width: 1023px) {
    .model-content .content-box .scroll-box {
        width: 74.872vw
    }
}

.model-content .content-box .scroll-box .model-body {
    background: #e3e5e6
}

@media (min-width:1024px) {
    .model-content .content-box .scroll-box .model-body {
        height: -webkit-max-content;
        height: max-content
    }
}

@media (min-width: 1024px) {
    .model-content .content-box .scroll-box .model-body {
        width: 41.6667vw;
        width: calc(41.6667 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-content .content-box .scroll-box .model-body {
        margin: auto
    }
}

@media (max-width: 1023px) {
    .model-content .content-box .scroll-box .model-body {
        width: 74.872vw;
        margin-top: 66.667vw
    }
}

.model-body>.model-text-container {}

@media (min-width: 1024px) {
    .model-body>.model-text-container {
        margin: 3.2083vw 0;
        margin: calc(3.2083 * var(--vw, 1vw)) 0
    }
}

@media (max-width:1023px) {
    .model-body>.model-text-container {}
}

@media (max-width: 1023px) {
    .model-body>.model-text-container {
        margin: 10.513vw 0
    }
}

.model-body>.model-text-container:first-child, .model-body>.model-text-container:last-child {
    margin: 0
}

.model-text-container .line {
    height: 1px;
    background: #000;
    opacity: .6
}

@media (min-width: 1024px) {
    .model-text-container .line {
        margin-bottom: 1.0417vw;
        margin-bottom: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .line {}
}

@media (max-width: 1023px) {
    .model-text-container .line {
        margin-bottom: 2.564vw
    }
}

.model-text-container .title {}

@media (min-width: 1024px) {
    .model-text-container .title {
        margin-top: 2.125vw;
        margin-top: calc(2.125 * var(--vw, 1vw));
        margin-bottom: 1.5625vw;
        margin-bottom: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .title {
        _white-space: nowrap;
    }
}

@media (max-width: 1023px) {
    .model-text-container .title {
        margin-top: 7.692vw;
        margin-bottom: 3.846vw
    }
}

@media (min-width:1024px) {
    .model-text-container .detail {
        display: flex
    }
}

@media (min-width: 1024px) {
    .model-text-container .detail {
        margin-bottom: 3.2083vw;
        margin-bottom: calc(3.2083 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .detail {
        _white-space: nowrap;
    }
}

@media (max-width: 1023px) {
    .model-text-container .detail {
        margin-bottom: 10.513vw
    }
}

.model-text-container .extra {}

@media (min-width: 1024px) {
    .model-text-container .extra {
        margin-top: 3.125vw;
        margin-top: calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .extra {}
}

@media (max-width: 1023px) {
    .model-text-container .extra {
        margin-top: 7.692vw
    }
}

.model-text-container .extra .icon {}

@media (min-width: 1024px) {
    .model-text-container .extra .icon {
        width: 6.25vw;
        width: calc(6.25 * var(--vw, 1vw));
        height: 6.25vw;
        height: calc(6.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .extra .icon {}
}

@media (max-width: 1023px) {
    .model-text-container .extra .icon {
        height: 20.513vw;
        width: 20.513vw
    }
}

.model-text-container .extra .extra-text-box {
    justify-content: center;
    align-items: flex-start
}

@media (min-width: 1024px) {
    .model-text-container .extra .extra-text-box {
        margin-left: 1.0417vw;
        margin-left: calc(1.0417 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .extra .extra-text-box {}
}

@media (max-width: 1023px) {
    .model-text-container .extra .extra-text-box {
        margin-left: 3.846vw
    }
}

.model-text-container .extra .extra-text-box .extra-title {}

@media (min-width: 1024px) {
    .model-text-container .extra .extra-text-box .extra-title {
        margin-bottom: 0.5208vw;
        margin-bottom: calc(0.5208 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .model-text-container .extra .extra-text-box .extra-title {}
}

@media (max-width: 1023px) {
    .model-text-container .extra .extra-text-box .extra-title {
        margin-bottom: 1.282vw
    }
}

@media (min-width:1024px) {
    .model-text-container .extra .extra-text-box .extra-detail {
        display: flex
    }
}

@media (max-width:1023px) {
    .model-text-container .extra .extra-text-box .extra-detail {
        _white-space: nowrap;
    }
}

@media (min-width:1024px) {
    .game {
        background: #1e1f20
    }
}

@media (max-width:1023px) {
    .game {
        background: #000
    }
}

.game .bg-linear {
    background: transparent
}

.game .content-box .scroll-box {
    background: #000
}

.game .content-box .scroll-box .model-body {
    background: #000;
    color: #fff
}

.game .content-box .scroll-box .model-body .model-text-container .line {
    background: #fff
}

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

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

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

.zn--wrapper {
    font-size: 16px;
}

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

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

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

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

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

.zn--wrapper figure[data-ll-status], .zn--wrapper div[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 {
    overflow: unset;
    line-height: normal
}

body.hide-body {
    overflow: hidden
}

#header .nav {
    z-index: 99
}

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

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

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

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

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

.g--container, .g--container-ls {}

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

.g--container-large {}

@media (max-width: 1023px) {
    .g--container-large {
        width: 74.872vw
    }
}

@media (min-width: 1024px) {
    .g--container-large {
        width: 83.3333vw;
        width: calc(83.3333 * var(--vw, 1vw))
    }
}

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

@media (min-width:1024px) {
    .g--ls-hidden {
        display: none !important
    }
}

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

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

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

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

#main-wrapper {
    position: relative
}

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

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

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

.zn--wrapper .abs.center-ver {
    top: 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-item, .zn--wrapper .sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

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

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

.zn--wrapper .grey {
    color: rgba(255, 255, 255, 0.56)
}

.zn--wrapper .grey-light {
    color: rgba(255, 255, 255, 0.2)
}

.zn--wrapper .grey {
    color: rgba(0, 0, 0, 0.7)
}

.zn--wrapper .grey-light {
    color: rgba(0, 0, 0, 0.32)
}

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

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

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

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

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

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

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

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

.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 {
    top: 0;
    left: 0
}

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

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

.zn--wrapper .f--100-48 {
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--100-48 {
        font-size: 5.2083vw;
        font-size: calc(5.2083 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--100-48 {
        line-height: 1;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .zn--wrapper .f--100-48 {
        font-size: 10vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .zn--wrapper .f--100-48 {
        line-height: 1;
        font-size: 48px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--60-32 {
    line-height: 1.2;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--60-32 {
        font-size: 3.125vw;
        font-size: calc(3.125 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--60-32 {
        line-height: 1.19;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .zn--wrapper .f--60-32 {
        font-size: 8.205vw
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .zn--wrapper .f--60-32 {
        line-height: 1.19;
        font-size: 32px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--30-20 {
    line-height: 1.2;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--30-20 {
        font-size: 1.5625vw;
        font-size: calc(1.5625 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--30-20 {
        line-height: 1.2;
        font-size: 20px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--40-24 {
    line-height: 1.2;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--40-24 {
        font-size: 2.0833vw;
        font-size: calc(2.0833 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--40-24 {
        line-height: 1.2;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .zn--wrapper .f--40-24 {
        font-size: 5.625vw;
    }
}

@media (min-width:721px) and (max-width:1023px) {
    .zn--wrapper .f--40-24 {
        line-height: 1.2;
        font-size: 24px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--24-16 {
    line-height: 1.2;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--24-16 {
        font-size: 1.25vw;
        font-size: calc(1.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--24-16 {
        line-height: 1.2;
        font-size: 16px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--24-18 {
    line-height: 1.2;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--24-18 {
        font-size: 1.25vw;
        font-size: calc(1.25 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--24-18 {
        line-height: 1.2;
        font-size: 18px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--18-14 {
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .zn--wrapper .f--18-14 {
        font-size: 0.9375vw;
        font-size: calc(0.9375 * var(--vw, 1vw))
    }
}

@media (max-width:1023px) {
    .zn--wrapper .f--18-14 {
        line-height: 1;
        font-size: 14px;
        letter-spacing: 0
    }
}

.zn--wrapper .f--12-9 {
    line-height: 1.2;
    font-size: 12px;
    letter-spacing: 0
}

@media (max-width:1023px) {
    .zn--wrapper .f--12-9 {
        line-height: 1.2;
        font-size: 9px;
        letter-spacing: 0
    }
}

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

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

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

.zn--wrapper .g--bold {
    font-family: 'MYingHei W7', Medium-65, Microsoft Yahei, sans-serif
}

.zn--wrapper .g--medium {
    font-family: 'MYingHei W7', Medium-65, Microsoft Yahei, sans-serif
}

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

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

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

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

.z-carousel-container .slick-slide {
    display: inline-block
}

.z-carousel-container .z-carousel-item {
    opacity: 0
}

.z-carousel-container .z-carousel-item.show {
    opacity: 1;
    transition: opacity .3s
}

.z-carousel-container .z-carousel-item.disappear {
    transition: opacity .3s
}

.z-title {
    opacity: 0;
    transform: translateY(25px)
}

.z-title.active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s, transform .5s
}

.z-title.inactive {
    transition: opacity .5s, transform .5s
}