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

.product-nav-tab .active a:after {
    border-bottom-color: #00b6d2;
}
.btn-oneplus.btn-red {
    background-color: #00b6d2;
}
.btn-oneplus.btn-red:before {
    background-color: #00b6d2;
}
.btn-oneplus.btn-red.focus:before,
.btn-oneplus.btn-red:focus:before,
.btn-oneplus.btn-red:hover:before {
    background-color: #0094ab;
}
.main-content {
    overflow-x: inherit;
}

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

@media (max-width: 1023px) {
    .zn--modal {
        transform:translateY(115vh);
        transform: translateY(calc(115 * var(--vh, 1vh)))
    }
}

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

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

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

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

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

.zn--wrapper {
    font-size: 16px;
    font-family: 'Roman-55','Helvetica Neue',Helvetica,Arial,sans-serif
}

.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-ls,.g--container-pt,.g--wrapper {
    margin: 0 auto
}

.g--container,.g--container-ls {
}

@media (min-width: 1024px) {
    .g--container,.g--container-ls {
        width:60vw
    }
}

.g--container,.g--container-pt {
}

@media (max-width: 1023px) {
    .g--container,.g--container-pt {
        width:88.889vw
    }
}

@media (max-width: 1023px) {
    .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
    }
}

.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 .clickable {
    cursor: pointer
}

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

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

.zn--wrapper .g--bold {
    font-family: 'SlateForOnePlusBold','Helvetica Neue',Helvetica,Arial,sans-serif
}

.zn--wrapper .g--medium {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif
}

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

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

.g--popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    z-index: 9999;
    transform: translateY(100vh);
    transform: translateY(calc(100 * var(--vh, 1vh)))
}

.g--popup.show {
    transform: translateY(0);
    transition: transform .5s
}

.g--popup.disappear {
    transition: transform .5s
}

.g--popup .g--popup-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 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
    }
}

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

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

@media (min-width: 1024px) {
    .g--popup .g--popup-close {
        width:2.7604vw;
        height: 2.7604vw
    }
}

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

@media (max-width: 1023px) {
    .g--popup .g--popup-close {
        right:4.444vw;
        width: 6.667vw;
        height: 6.667vw
    }
}

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

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

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

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

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

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

[data-theme = 'white'] .g--popup-close line {
    stroke: #000
}

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

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

.g-title {
    display: flex;
    flex-direction: column
}

.g-title .g--h1 {
    flex-wrap: wrap
}

.g-title .g--h1 .word {
    display: flex
}

.g-title .g--h1.active .w {
    opacity: 1;
    transform: translateY(0) skewY(0) scaleY(1)
}

.g-title .g--h1.active .w-1 {
    transition: .5s .02s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-2 {
    transition: .5s .04s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-3 {
    transition: .5s .06s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-4 {
    transition: .5s .08s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-5 {
    transition: .5s .1s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-6 {
    transition: .5s .12s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-7 {
    transition: .5s .14s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-8 {
    transition: .5s .16s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-9 {
    transition: .5s .18s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-10 {
    transition: .5s .2s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-11 {
    transition: .5s .22s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-12 {
    transition: .5s .24s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-13 {
    transition: .5s .26s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-14 {
    transition: .5s .28s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-15 {
    transition: .5s .3s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-16 {
    transition: .5s .32s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-17 {
    transition: .5s .34s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-18 {
    transition: .5s .36s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-19 {
    transition: .5s .38s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-20 {
    transition: .5s .4s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-21 {
    transition: .5s .42s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-22 {
    transition: .5s .44s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-23 {
    transition: .5s .46s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-24 {
    transition: .5s .48s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-25 {
    transition: .5s .5s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-26 {
    transition: .5s .52s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-27 {
    transition: .5s .54s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-28 {
    transition: .5s .56s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-29 {
    transition: .5s .58s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-30 {
    transition: .5s .6s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-31 {
    transition: .5s .62s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-32 {
    transition: .5s .64s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-33 {
    transition: .5s .66s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-34 {
    transition: .5s .68s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-35 {
    transition: .5s .7000000000000001s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-36 {
    transition: .5s .72s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-37 {
    transition: .5s .74s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-38 {
    transition: .5s .76s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-39 {
    transition: .5s .78s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-40 {
    transition: .5s .8s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-41 {
    transition: .5s .8200000000000001s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-42 {
    transition: .5s .84s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-43 {
    transition: .5s .86s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-44 {
    transition: .5s .88s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-45 {
    transition: .5s .9s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-46 {
    transition: .5s .92s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-47 {
    transition: .5s .9400000000000001s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-48 {
    transition: .5s .96s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-49 {
    transition: .5s .98s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-50 {
    transition: .5s 1s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-51 {
    transition: .5s 1.02s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-52 {
    transition: .5s 1.04s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-53 {
    transition: .5s 1.06s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-54 {
    transition: .5s 1.08s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-55 {
    transition: .5s 1.1s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-56 {
    transition: .5s 1.12s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-57 {
    transition: .5s 1.14s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-58 {
    transition: .5s 1.16s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-59 {
    transition: .5s 1.18s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-60 {
    transition: .5s 1.2s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-61 {
    transition: .5s 1.22s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-62 {
    transition: .5s 1.24s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-63 {
    transition: .5s 1.26s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-64 {
    transition: .5s 1.28s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-65 {
    transition: .5s 1.3s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-66 {
    transition: .5s 1.32s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-67 {
    transition: .5s 1.34s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-68 {
    transition: .5s 1.36s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-69 {
    transition: .5s 1.38s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-70 {
    transition: .5s 1.4s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-71 {
    transition: .5s 1.42s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-72 {
    transition: .5s 1.44s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-73 {
    transition: .5s 1.46s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-74 {
    transition: .5s 1.48s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-75 {
    transition: .5s 1.5s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-76 {
    transition: .5s 1.52s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-77 {
    transition: .5s 1.54s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-78 {
    transition: .5s 1.56s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-79 {
    transition: .5s 1.58s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-80 {
    transition: .5s 1.6s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-81 {
    transition: .5s 1.62s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-82 {
    transition: .5s 1.64s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-83 {
    transition: .5s 1.66s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-84 {
    transition: .5s 1.68s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-85 {
    transition: .5s 1.7s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-86 {
    transition: .5s 1.72s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-87 {
    transition: .5s 1.74s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-88 {
    transition: .5s 1.76s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-89 {
    transition: .5s 1.78s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-90 {
    transition: .5s 1.8s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-91 {
    transition: .5s 1.82s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-92 {
    transition: .5s 1.84s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-93 {
    transition: .5s 1.86s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-94 {
    transition: .5s 1.88s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-95 {
    transition: .5s 1.9s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-96 {
    transition: .5s 1.92s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-97 {
    transition: .5s 1.94s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-98 {
    transition: .5s 1.96s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-99 {
    transition: .5s 1.98s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-100 {
    transition: .5s 2s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-101 {
    transition: .5s 2.02s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-102 {
    transition: .5s 2.04s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-103 {
    transition: .5s 2.06s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-104 {
    transition: .5s 2.08s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-105 {
    transition: .5s 2.1s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-106 {
    transition: .5s 2.12s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-107 {
    transition: .5s 2.14s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-108 {
    transition: .5s 2.16s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-109 {
    transition: .5s 2.18s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-110 {
    transition: .5s 2.2s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-111 {
    transition: .5s 2.22s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-112 {
    transition: .5s 2.24s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-113 {
    transition: .5s 2.26s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-114 {
    transition: .5s 2.28s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-115 {
    transition: .5s 2.3s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-116 {
    transition: .5s 2.32s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-117 {
    transition: .5s 2.34s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-118 {
    transition: .5s 2.36s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-119 {
    transition: .5s 2.38s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-120 {
    transition: .5s 2.4s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-121 {
    transition: .5s 2.42s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-122 {
    transition: .5s 2.44s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-123 {
    transition: .5s 2.46s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-124 {
    transition: .5s 2.48s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-125 {
    transition: .5s 2.5s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-126 {
    transition: .5s 2.52s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-127 {
    transition: .5s 2.54s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-128 {
    transition: .5s 2.56s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-129 {
    transition: .5s 2.58s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-130 {
    transition: .5s 2.6s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-131 {
    transition: .5s 2.62s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-132 {
    transition: .5s 2.64s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-133 {
    transition: .5s 2.66s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-134 {
    transition: .5s 2.68s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-135 {
    transition: .5s 2.7s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-136 {
    transition: .5s 2.72s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-137 {
    transition: .5s 2.74s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-138 {
    transition: .5s 2.76s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-139 {
    transition: .5s 2.78s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-140 {
    transition: .5s 2.8s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-141 {
    transition: .5s 2.82s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-142 {
    transition: .5s 2.84s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-143 {
    transition: .5s 2.86s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-144 {
    transition: .5s 2.88s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-145 {
    transition: .5s 2.9s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-146 {
    transition: .5s 2.92s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-147 {
    transition: .5s 2.94s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-148 {
    transition: .5s 2.96s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-149 {
    transition: .5s 2.98s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-150 {
    transition: .5s 3s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-151 {
    transition: .5s 3.02s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-152 {
    transition: .5s 3.04s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-153 {
    transition: .5s 3.06s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-154 {
    transition: .5s 3.08s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-155 {
    transition: .5s 3.1s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-156 {
    transition: .5s 3.12s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-157 {
    transition: .5s 3.14s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-158 {
    transition: .5s 3.16s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-159 {
    transition: .5s 3.18s cubic-bezier(.16,1,.3,1) !important
}

.g-title .g--h1.active .w-160 {
    transition: .5s 3.2s cubic-bezier(.16,1,.3,1) !important
}

.g-title.no-active .w {
    opacity: 0
}

.g-title .g--h1 {
    display: flex
}

.g-title .g--h1 .w {
    opacity: 0;
    transform: translateY(110%) skewY(15deg) scaleY(1.3)
}

.g-title .g--h1 .w-1 {
    transition: opacity .5s .02s cubic-bezier(.16,1,.3,1),transform 0s .52s
}

.g-title .g--h1 .w-2 {
    transition: opacity .5s .04s cubic-bezier(.16,1,.3,1),transform 0s .54s
}

.g-title .g--h1 .w-3 {
    transition: opacity .5s .06s cubic-bezier(.16,1,.3,1),transform 0s .56s
}

.g-title .g--h1 .w-4 {
    transition: opacity .5s .08s cubic-bezier(.16,1,.3,1),transform 0s .58s
}

.g-title .g--h1 .w-5 {
    transition: opacity .5s .1s cubic-bezier(.16,1,.3,1),transform 0s .6s
}

.g-title .g--h1 .w-6 {
    transition: opacity .5s .12s cubic-bezier(.16,1,.3,1),transform 0s .62s
}

.g-title .g--h1 .w-7 {
    transition: opacity .5s .14s cubic-bezier(.16,1,.3,1),transform 0s .64s
}

.g-title .g--h1 .w-8 {
    transition: opacity .5s .16s cubic-bezier(.16,1,.3,1),transform 0s .66s
}

.g-title .g--h1 .w-9 {
    transition: opacity .5s .18s cubic-bezier(.16,1,.3,1),transform 0s .6799999999999999s
}

.g-title .g--h1 .w-10 {
    transition: opacity .5s .2s cubic-bezier(.16,1,.3,1),transform 0s .7s
}

.g-title .g--h1 .w-11 {
    transition: opacity .5s .22s cubic-bezier(.16,1,.3,1),transform 0s .72s
}

.g-title .g--h1 .w-12 {
    transition: opacity .5s .24s cubic-bezier(.16,1,.3,1),transform 0s .74s
}

.g-title .g--h1 .w-13 {
    transition: opacity .5s .26s cubic-bezier(.16,1,.3,1),transform 0s .76s
}

.g-title .g--h1 .w-14 {
    transition: opacity .5s .28s cubic-bezier(.16,1,.3,1),transform 0s .78s
}

.g-title .g--h1 .w-15 {
    transition: opacity .5s .3s cubic-bezier(.16,1,.3,1),transform 0s .8s
}

.g-title .g--h1 .w-16 {
    transition: opacity .5s .32s cubic-bezier(.16,1,.3,1),transform 0s .8200000000000001s
}

.g-title .g--h1 .w-17 {
    transition: opacity .5s .34s cubic-bezier(.16,1,.3,1),transform 0s .8400000000000001s
}

.g-title .g--h1 .w-18 {
    transition: opacity .5s .36s cubic-bezier(.16,1,.3,1),transform 0s .86s
}

.g-title .g--h1 .w-19 {
    transition: opacity .5s .38s cubic-bezier(.16,1,.3,1),transform 0s .88s
}

.g-title .g--h1 .w-20 {
    transition: opacity .5s .4s cubic-bezier(.16,1,.3,1),transform 0s .9s
}

.g-title .g--h1 .w-21 {
    transition: opacity .5s .42s cubic-bezier(.16,1,.3,1),transform 0s .9199999999999999s
}

.g-title .g--h1 .w-22 {
    transition: opacity .5s .44s cubic-bezier(.16,1,.3,1),transform 0s .94s
}

.g-title .g--h1 .w-23 {
    transition: opacity .5s .46s cubic-bezier(.16,1,.3,1),transform 0s .96s
}

.g-title .g--h1 .w-24 {
    transition: opacity .5s .48s cubic-bezier(.16,1,.3,1),transform 0s .98s
}

.g-title .g--h1 .w-25 {
    transition: opacity .5s .5s cubic-bezier(.16,1,.3,1),transform 0s 1s
}

.g-title .g--h1 .w-26 {
    transition: opacity .5s .52s cubic-bezier(.16,1,.3,1),transform 0s 1.02s
}

.g-title .g--h1 .w-27 {
    transition: opacity .5s .54s cubic-bezier(.16,1,.3,1),transform 0s 1.04s
}

.g-title .g--h1 .w-28 {
    transition: opacity .5s .56s cubic-bezier(.16,1,.3,1),transform 0s 1.06s
}

.g-title .g--h1 .w-29 {
    transition: opacity .5s .58s cubic-bezier(.16,1,.3,1),transform 0s 1.08s
}

.g-title .g--h1 .w-30 {
    transition: opacity .5s .6s cubic-bezier(.16,1,.3,1),transform 0s 1.1s
}

.g-title .g--h1 .w-31 {
    transition: opacity .5s .62s cubic-bezier(.16,1,.3,1),transform 0s 1.12s
}

.g-title .g--h1 .w-32 {
    transition: opacity .5s .64s cubic-bezier(.16,1,.3,1),transform 0s 1.14s
}

.g-title .g--h1 .w-33 {
    transition: opacity .5s .66s cubic-bezier(.16,1,.3,1),transform 0s 1.16s
}

.g-title .g--h1 .w-34 {
    transition: opacity .5s .68s cubic-bezier(.16,1,.3,1),transform 0s 1.18s
}

.g-title .g--h1 .w-35 {
    transition: opacity .5s .7000000000000001s cubic-bezier(.16,1,.3,1),transform 0s 1.2s
}

.g-title .g--h1 .w-36 {
    transition: opacity .5s .72s cubic-bezier(.16,1,.3,1),transform 0s 1.22s
}

.g-title .g--h1 .w-37 {
    transition: opacity .5s .74s cubic-bezier(.16,1,.3,1),transform 0s 1.24s
}

.g-title .g--h1 .w-38 {
    transition: opacity .5s .76s cubic-bezier(.16,1,.3,1),transform 0s 1.26s
}

.g-title .g--h1 .w-39 {
    transition: opacity .5s .78s cubic-bezier(.16,1,.3,1),transform 0s 1.28s
}

.g-title .g--h1 .w-40 {
    transition: opacity .5s .8s cubic-bezier(.16,1,.3,1),transform 0s 1.3s
}

.g-title .g--h1 .w-41 {
    transition: opacity .5s .8200000000000001s cubic-bezier(.16,1,.3,1),transform 0s 1.32s
}

.g-title .g--h1 .w-42 {
    transition: opacity .5s .84s cubic-bezier(.16,1,.3,1),transform 0s 1.34s
}

.g-title .g--h1 .w-43 {
    transition: opacity .5s .86s cubic-bezier(.16,1,.3,1),transform 0s 1.36s
}

.g-title .g--h1 .w-44 {
    transition: opacity .5s .88s cubic-bezier(.16,1,.3,1),transform 0s 1.38s
}

.g-title .g--h1 .w-45 {
    transition: opacity .5s .9s cubic-bezier(.16,1,.3,1),transform 0s 1.4s
}

.g-title .g--h1 .w-46 {
    transition: opacity .5s .92s cubic-bezier(.16,1,.3,1),transform 0s 1.42s
}

.g-title .g--h1 .w-47 {
    transition: opacity .5s .9400000000000001s cubic-bezier(.16,1,.3,1),transform 0s 1.44s
}

.g-title .g--h1 .w-48 {
    transition: opacity .5s .96s cubic-bezier(.16,1,.3,1),transform 0s 1.46s
}

.g-title .g--h1 .w-49 {
    transition: opacity .5s .98s cubic-bezier(.16,1,.3,1),transform 0s 1.48s
}

.g-title .g--h1 .w-50 {
    transition: opacity .5s 1s cubic-bezier(.16,1,.3,1),transform 0s 1.5s
}

.g-title .g--h1 .w-51 {
    transition: opacity .5s 1.02s cubic-bezier(.16,1,.3,1),transform 0s 1.52s
}

.g-title .g--h1 .w-52 {
    transition: opacity .5s 1.04s cubic-bezier(.16,1,.3,1),transform 0s 1.54s
}

.g-title .g--h1 .w-53 {
    transition: opacity .5s 1.06s cubic-bezier(.16,1,.3,1),transform 0s 1.56s
}

.g-title .g--h1 .w-54 {
    transition: opacity .5s 1.08s cubic-bezier(.16,1,.3,1),transform 0s 1.58s
}

.g-title .g--h1 .w-55 {
    transition: opacity .5s 1.1s cubic-bezier(.16,1,.3,1),transform 0s 1.6s
}

.g-title .g--h1 .w-56 {
    transition: opacity .5s 1.12s cubic-bezier(.16,1,.3,1),transform 0s 1.62s
}

.g-title .g--h1 .w-57 {
    transition: opacity .5s 1.14s cubic-bezier(.16,1,.3,1),transform 0s 1.64s
}

.g-title .g--h1 .w-58 {
    transition: opacity .5s 1.16s cubic-bezier(.16,1,.3,1),transform 0s 1.66s
}

.g-title .g--h1 .w-59 {
    transition: opacity .5s 1.18s cubic-bezier(.16,1,.3,1),transform 0s 1.68s
}

.g-title .g--h1 .w-60 {
    transition: opacity .5s 1.2s cubic-bezier(.16,1,.3,1),transform 0s 1.7s
}

.g-title .g--h1 .w-61 {
    transition: opacity .5s 1.22s cubic-bezier(.16,1,.3,1),transform 0s 1.72s
}

.g-title .g--h1 .w-62 {
    transition: opacity .5s 1.24s cubic-bezier(.16,1,.3,1),transform 0s 1.74s
}

.g-title .g--h1 .w-63 {
    transition: opacity .5s 1.26s cubic-bezier(.16,1,.3,1),transform 0s 1.76s
}

.g-title .g--h1 .w-64 {
    transition: opacity .5s 1.28s cubic-bezier(.16,1,.3,1),transform 0s 1.78s
}

.g-title .g--h1 .w-65 {
    transition: opacity .5s 1.3s cubic-bezier(.16,1,.3,1),transform 0s 1.8s
}

.g-title .g--h1 .w-66 {
    transition: opacity .5s 1.32s cubic-bezier(.16,1,.3,1),transform 0s 1.82s
}

.g-title .g--h1 .w-67 {
    transition: opacity .5s 1.34s cubic-bezier(.16,1,.3,1),transform 0s 1.84s
}

.g-title .g--h1 .w-68 {
    transition: opacity .5s 1.36s cubic-bezier(.16,1,.3,1),transform 0s 1.86s
}

.g-title .g--h1 .w-69 {
    transition: opacity .5s 1.38s cubic-bezier(.16,1,.3,1),transform 0s 1.88s
}

.g-title .g--h1 .w-70 {
    transition: opacity .5s 1.4s cubic-bezier(.16,1,.3,1),transform 0s 1.9s
}

.g-title .g--h1 .w-71 {
    transition: opacity .5s 1.42s cubic-bezier(.16,1,.3,1),transform 0s 1.92s
}

.g-title .g--h1 .w-72 {
    transition: opacity .5s 1.44s cubic-bezier(.16,1,.3,1),transform 0s 1.94s
}

.g-title .g--h1 .w-73 {
    transition: opacity .5s 1.46s cubic-bezier(.16,1,.3,1),transform 0s 1.96s
}

.g-title .g--h1 .w-74 {
    transition: opacity .5s 1.48s cubic-bezier(.16,1,.3,1),transform 0s 1.98s
}

.g-title .g--h1 .w-75 {
    transition: opacity .5s 1.5s cubic-bezier(.16,1,.3,1),transform 0s 2s
}

.g-title .g--h1 .w-76 {
    transition: opacity .5s 1.52s cubic-bezier(.16,1,.3,1),transform 0s 2.02s
}

.g-title .g--h1 .w-77 {
    transition: opacity .5s 1.54s cubic-bezier(.16,1,.3,1),transform 0s 2.04s
}

.g-title .g--h1 .w-78 {
    transition: opacity .5s 1.56s cubic-bezier(.16,1,.3,1),transform 0s 2.06s
}

.g-title .g--h1 .w-79 {
    transition: opacity .5s 1.58s cubic-bezier(.16,1,.3,1),transform 0s 2.08s
}

.g-title .g--h1 .w-80 {
    transition: opacity .5s 1.6s cubic-bezier(.16,1,.3,1),transform 0s 2.1s
}

.g-title .g--h1 .w-81 {
    transition: opacity .5s 1.62s cubic-bezier(.16,1,.3,1),transform 0s 2.12s
}

.g-title .g--h1 .w-82 {
    transition: opacity .5s 1.64s cubic-bezier(.16,1,.3,1),transform 0s 2.14s
}

.g-title .g--h1 .w-83 {
    transition: opacity .5s 1.66s cubic-bezier(.16,1,.3,1),transform 0s 2.16s
}

.g-title .g--h1 .w-84 {
    transition: opacity .5s 1.68s cubic-bezier(.16,1,.3,1),transform 0s 2.18s
}

.g-title .g--h1 .w-85 {
    transition: opacity .5s 1.7s cubic-bezier(.16,1,.3,1),transform 0s 2.2s
}

.g-title .g--h1 .w-86 {
    transition: opacity .5s 1.72s cubic-bezier(.16,1,.3,1),transform 0s 2.22s
}

.g-title .g--h1 .w-87 {
    transition: opacity .5s 1.74s cubic-bezier(.16,1,.3,1),transform 0s 2.24s
}

.g-title .g--h1 .w-88 {
    transition: opacity .5s 1.76s cubic-bezier(.16,1,.3,1),transform 0s 2.26s
}

.g-title .g--h1 .w-89 {
    transition: opacity .5s 1.78s cubic-bezier(.16,1,.3,1),transform 0s 2.28s
}

.g-title .g--h1 .w-90 {
    transition: opacity .5s 1.8s cubic-bezier(.16,1,.3,1),transform 0s 2.3s
}

.g-title .g--h1 .w-91 {
    transition: opacity .5s 1.82s cubic-bezier(.16,1,.3,1),transform 0s 2.32s
}

.g-title .g--h1 .w-92 {
    transition: opacity .5s 1.84s cubic-bezier(.16,1,.3,1),transform 0s 2.34s
}

.g-title .g--h1 .w-93 {
    transition: opacity .5s 1.86s cubic-bezier(.16,1,.3,1),transform 0s 2.36s
}

.g-title .g--h1 .w-94 {
    transition: opacity .5s 1.88s cubic-bezier(.16,1,.3,1),transform 0s 2.38s
}

.g-title .g--h1 .w-95 {
    transition: opacity .5s 1.9s cubic-bezier(.16,1,.3,1),transform 0s 2.4s
}

.g-title .g--h1 .w-96 {
    transition: opacity .5s 1.92s cubic-bezier(.16,1,.3,1),transform 0s 2.42s
}

.g-title .g--h1 .w-97 {
    transition: opacity .5s 1.94s cubic-bezier(.16,1,.3,1),transform 0s 2.44s
}

.g-title .g--h1 .w-98 {
    transition: opacity .5s 1.96s cubic-bezier(.16,1,.3,1),transform 0s 2.46s
}

.g-title .g--h1 .w-99 {
    transition: opacity .5s 1.98s cubic-bezier(.16,1,.3,1),transform 0s 2.48s
}

.g-title .g--h1 .w-100 {
    transition: opacity .5s 2s cubic-bezier(.16,1,.3,1),transform 0s 2.5s
}

.g-title .g--h1 .w-101 {
    transition: opacity .5s 2.02s cubic-bezier(.16,1,.3,1),transform 0s 2.52s
}

.g-title .g--h1 .w-102 {
    transition: opacity .5s 2.04s cubic-bezier(.16,1,.3,1),transform 0s 2.54s
}

.g-title .g--h1 .w-103 {
    transition: opacity .5s 2.06s cubic-bezier(.16,1,.3,1),transform 0s 2.56s
}

.g-title .g--h1 .w-104 {
    transition: opacity .5s 2.08s cubic-bezier(.16,1,.3,1),transform 0s 2.58s
}

.g-title .g--h1 .w-105 {
    transition: opacity .5s 2.1s cubic-bezier(.16,1,.3,1),transform 0s 2.6s
}

.g-title .g--h1 .w-106 {
    transition: opacity .5s 2.12s cubic-bezier(.16,1,.3,1),transform 0s 2.62s
}

.g-title .g--h1 .w-107 {
    transition: opacity .5s 2.14s cubic-bezier(.16,1,.3,1),transform 0s 2.64s
}

.g-title .g--h1 .w-108 {
    transition: opacity .5s 2.16s cubic-bezier(.16,1,.3,1),transform 0s 2.66s
}

.g-title .g--h1 .w-109 {
    transition: opacity .5s 2.18s cubic-bezier(.16,1,.3,1),transform 0s 2.68s
}

.g-title .g--h1 .w-110 {
    transition: opacity .5s 2.2s cubic-bezier(.16,1,.3,1),transform 0s 2.7s
}

.g-title .g--h1 .w-111 {
    transition: opacity .5s 2.22s cubic-bezier(.16,1,.3,1),transform 0s 2.72s
}

.g-title .g--h1 .w-112 {
    transition: opacity .5s 2.24s cubic-bezier(.16,1,.3,1),transform 0s 2.74s
}

.g-title .g--h1 .w-113 {
    transition: opacity .5s 2.26s cubic-bezier(.16,1,.3,1),transform 0s 2.76s
}

.g-title .g--h1 .w-114 {
    transition: opacity .5s 2.28s cubic-bezier(.16,1,.3,1),transform 0s 2.78s
}

.g-title .g--h1 .w-115 {
    transition: opacity .5s 2.3s cubic-bezier(.16,1,.3,1),transform 0s 2.8s
}

.g-title .g--h1 .w-116 {
    transition: opacity .5s 2.32s cubic-bezier(.16,1,.3,1),transform 0s 2.82s
}

.g-title .g--h1 .w-117 {
    transition: opacity .5s 2.34s cubic-bezier(.16,1,.3,1),transform 0s 2.84s
}

.g-title .g--h1 .w-118 {
    transition: opacity .5s 2.36s cubic-bezier(.16,1,.3,1),transform 0s 2.86s
}

.g-title .g--h1 .w-119 {
    transition: opacity .5s 2.38s cubic-bezier(.16,1,.3,1),transform 0s 2.88s
}

.g-title .g--h1 .w-120 {
    transition: opacity .5s 2.4s cubic-bezier(.16,1,.3,1),transform 0s 2.9s
}

.g-title .g--h1 .w-121 {
    transition: opacity .5s 2.42s cubic-bezier(.16,1,.3,1),transform 0s 2.92s
}

.g-title .g--h1 .w-122 {
    transition: opacity .5s 2.44s cubic-bezier(.16,1,.3,1),transform 0s 2.94s
}

.g-title .g--h1 .w-123 {
    transition: opacity .5s 2.46s cubic-bezier(.16,1,.3,1),transform 0s 2.96s
}

.g-title .g--h1 .w-124 {
    transition: opacity .5s 2.48s cubic-bezier(.16,1,.3,1),transform 0s 2.98s
}

.g-title .g--h1 .w-125 {
    transition: opacity .5s 2.5s cubic-bezier(.16,1,.3,1),transform 0s 3s
}

.g-title .g--h1 .w-126 {
    transition: opacity .5s 2.52s cubic-bezier(.16,1,.3,1),transform 0s 3.02s
}

.g-title .g--h1 .w-127 {
    transition: opacity .5s 2.54s cubic-bezier(.16,1,.3,1),transform 0s 3.04s
}

.g-title .g--h1 .w-128 {
    transition: opacity .5s 2.56s cubic-bezier(.16,1,.3,1),transform 0s 3.06s
}

.g-title .g--h1 .w-129 {
    transition: opacity .5s 2.58s cubic-bezier(.16,1,.3,1),transform 0s 3.08s
}

.g-title .g--h1 .w-130 {
    transition: opacity .5s 2.6s cubic-bezier(.16,1,.3,1),transform 0s 3.1s
}

.g-title .g--h1 .w-131 {
    transition: opacity .5s 2.62s cubic-bezier(.16,1,.3,1),transform 0s 3.12s
}

.g-title .g--h1 .w-132 {
    transition: opacity .5s 2.64s cubic-bezier(.16,1,.3,1),transform 0s 3.14s
}

.g-title .g--h1 .w-133 {
    transition: opacity .5s 2.66s cubic-bezier(.16,1,.3,1),transform 0s 3.16s
}

.g-title .g--h1 .w-134 {
    transition: opacity .5s 2.68s cubic-bezier(.16,1,.3,1),transform 0s 3.18s
}

.g-title .g--h1 .w-135 {
    transition: opacity .5s 2.7s cubic-bezier(.16,1,.3,1),transform 0s 3.2s
}

.g-title .g--h1 .w-136 {
    transition: opacity .5s 2.72s cubic-bezier(.16,1,.3,1),transform 0s 3.22s
}

.g-title .g--h1 .w-137 {
    transition: opacity .5s 2.74s cubic-bezier(.16,1,.3,1),transform 0s 3.24s
}

.g-title .g--h1 .w-138 {
    transition: opacity .5s 2.76s cubic-bezier(.16,1,.3,1),transform 0s 3.26s
}

.g-title .g--h1 .w-139 {
    transition: opacity .5s 2.78s cubic-bezier(.16,1,.3,1),transform 0s 3.28s
}

.g-title .g--h1 .w-140 {
    transition: opacity .5s 2.8s cubic-bezier(.16,1,.3,1),transform 0s 3.3s
}

.g-title .g--h1 .w-141 {
    transition: opacity .5s 2.82s cubic-bezier(.16,1,.3,1),transform 0s 3.32s
}

.g-title .g--h1 .w-142 {
    transition: opacity .5s 2.84s cubic-bezier(.16,1,.3,1),transform 0s 3.34s
}

.g-title .g--h1 .w-143 {
    transition: opacity .5s 2.86s cubic-bezier(.16,1,.3,1),transform 0s 3.36s
}

.g-title .g--h1 .w-144 {
    transition: opacity .5s 2.88s cubic-bezier(.16,1,.3,1),transform 0s 3.38s
}

.g-title .g--h1 .w-145 {
    transition: opacity .5s 2.9s cubic-bezier(.16,1,.3,1),transform 0s 3.4s
}

.g-title .g--h1 .w-146 {
    transition: opacity .5s 2.92s cubic-bezier(.16,1,.3,1),transform 0s 3.42s
}

.g-title .g--h1 .w-147 {
    transition: opacity .5s 2.94s cubic-bezier(.16,1,.3,1),transform 0s 3.44s
}

.g-title .g--h1 .w-148 {
    transition: opacity .5s 2.96s cubic-bezier(.16,1,.3,1),transform 0s 3.46s
}

.g-title .g--h1 .w-149 {
    transition: opacity .5s 2.98s cubic-bezier(.16,1,.3,1),transform 0s 3.48s
}

.g-title .g--h1 .w-150 {
    transition: opacity .5s 3s cubic-bezier(.16,1,.3,1),transform 0s 3.5s
}

.g-title .g--h1 .w-151 {
    transition: opacity .5s 3.02s cubic-bezier(.16,1,.3,1),transform 0s 3.52s
}

.g-title .g--h1 .w-152 {
    transition: opacity .5s 3.04s cubic-bezier(.16,1,.3,1),transform 0s 3.54s
}

.g-title .g--h1 .w-153 {
    transition: opacity .5s 3.06s cubic-bezier(.16,1,.3,1),transform 0s 3.56s
}

.g-title .g--h1 .w-154 {
    transition: opacity .5s 3.08s cubic-bezier(.16,1,.3,1),transform 0s 3.58s
}

.g-title .g--h1 .w-155 {
    transition: opacity .5s 3.1s cubic-bezier(.16,1,.3,1),transform 0s 3.6s
}

.g-title .g--h1 .w-156 {
    transition: opacity .5s 3.12s cubic-bezier(.16,1,.3,1),transform 0s 3.62s
}

.g-title .g--h1 .w-157 {
    transition: opacity .5s 3.14s cubic-bezier(.16,1,.3,1),transform 0s 3.64s
}

.g-title .g--h1 .w-158 {
    transition: opacity .5s 3.16s cubic-bezier(.16,1,.3,1),transform 0s 3.66s
}

.g-title .g--h1 .w-159 {
    transition: opacity .5s 3.18s cubic-bezier(.16,1,.3,1),transform 0s 3.68s
}

.g-title .g--h1 .w-160 {
    transition: opacity .5s 3.2s cubic-bezier(.16,1,.3,1),transform 0s 3.7s
}

.glitch-title {
    color: #ffd800
}

@media (min-width: 1024px) {
    .glitch-title {
        font-size:5.7292vw
    }
}

@media (max-width: 1023px) {
    .glitch-title {
    }
}

@media (max-width: 1023px) {
    .glitch-title {
        font-size:11.111vw
    }
}

.glitch-title .inner {
    display: block;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.glitch-title .inner canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(0)
}

.text-container {
    display: flex
}

.text-container.is-column {
    flex-direction: column
}

.text-container.h1 .title {
    line-height: 1.05;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .text-container.h1 .title {
        font-size:5.7292vw
    }
}

@media (max-width: 1023px) {
    .text-container.h1 .title {
        line-height:1.05;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .text-container.h1 .title {
        font-size:11.111vw
    }
}

.text-container.h2 {
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .text-container.h2 {
        font-size:3.125vw
    }
}

@media (max-width: 1023px) {
    .text-container.h2 {
        line-height:1.21;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .text-container.h2 {
        font-size:7.778vw
    }
}

.text-container.h3 {
    line-height: 1.05;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .text-container.h3 {
        font-size:1.9792vw
    }
}

@media (max-width: 1023px) {
    .text-container {
        line-height:1.3;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .text-container {
        font-size:5.556vw
    }
}

.g--h2 {
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .g--h2 {
        font-size:3.125vw
    }
}

@media (max-width: 1023px) {
    .g--h2 {
        line-height:1.21;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .g--h2 {
        font-size:7.778vw
    }
}

.g--desc {
    line-height: 1.17;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .g--desc {
        font-size:1.25vw
    }
}

@media (max-width: 1023px) {
    .g--desc {
        line-height:1.43;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .g--desc {
        font-size:3.889vw
    }
}

.g--desc.gray {
    color: #787777
}

.g--h3 {
    line-height: 1.05;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .g--h3 {
        font-size:1.9792vw
    }
}

@media (max-width: 1023px) {
    .g--h3 {
        line-height:1.3;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .g--h3 {
        font-size:5.556vw
    }
}

.g--h1 {
    line-height: 1.05;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .g--h1 {
        /* font-size:5.7292vw */
        font-size:4.7292vw
    }
}

@media (max-width: 1023px) {
    .g--h1 {
        line-height:1.05;
        font-size: 40px
    }
}

.ml {
}

@media (min-width: 1024px) {
    .ml {
        margin-left:20vw
    }
}

@media (max-width: 1023px) {
    .g--container-mo {
        margin:0 auto
    }
}

@media (max-width: 1023px) {
    .g--container-mo {
        width:88.889vw
    }
}

.mt {
}

@media (max-width: 1023px) {
    .mt {
        margin-top:5.556vw
    }
}

.drag-card {
    position: relative;
    width: 100%
}

@media (min-width: 1024px) {
    .drag-card {
        height:31.8229vw
    }
}

@media (max-width: 1023px) {
    .drag-card {
    }
}

@media (max-width: 1023px) {
    .drag-card {
        height:138.889vw
    }
}

.drag-card .draggable-area {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    cursor: -webkit-grab;
    cursor: grab;
    touch-action: pan-y
}

@media (min-width: 1024px) {
    .drag-card .draggable-area {
        height:23.4375vw
    }
}

.drag-card .card-wrapper {
    position: relative;
    z-index: 5;
    width: 100%;
    pointer-events: none
}

@media (min-width: 1024px) {
    .drag-card .card-wrapper {
        height:21.4063vw;
        transform-origin: center 153.1771vw
    }
}

.drag-card .card {
    position: absolute;
    left: 50%;
    background-color: #000;
}

@media (min-width: 1024px) {
    .drag-card .card {
        margin-left:-7.9687vw;
        width: 15.9375vw;
        height: 22.9688vw;
        transform-origin: center 153.1771vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card {
    }
}

@media (max-width: 1023px) {
    .drag-card .card {
        margin-left:-34.722vw;
        width: 69.444vw;
        height: 100vw
    }
}

.drag-card .card .text {
    width: 100%;
    text-align: center;
    opacity: 0;
    transition: .3s
}

@media (min-width: 1024px) {
    .drag-card .card .text {
        margin-top:1.25vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .text {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .text {
        margin-top:11.111vw
    }
}

.drag-card .card .text .card-title {
    opacity: .9
}

@media (min-width: 1024px) {
    .drag-card .card .text .card-title {
        font-size:1.1979vw;
        line-height: 1.25vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .text .card-title {
        margin:0 auto
    }
}

@media (max-width: 1023px) {
    .drag-card .card .text .card-title {
        width:70.556vw;
        font-size: 5vw;
        line-height: 6.389vw
    }
}

.drag-card .card .text .card-desc {
    letter-spacing: 0;
    color: #b3b3b3
}

@media (min-width: 1024px) {
    .drag-card .card .text .card-desc {
        margin-top:0.8333vw;
        font-size: 0.9375vw;
        line-height: 1.0417vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .text .card-desc {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .text .card-desc {
        margin-top:2.778vw;
        font-size: 4.444vw;
        line-height: 5.278vw
    }
}

.drag-card .card .bg {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .3s
}

.drag-card .card .bg .img-wrapper {
    position: relative;
    z-index: 4;
    overflow: hidden;
    width: 100%;
    height: 100%;
    pointer-events: auto;
    touch-action: pan-y;
    cursor: -webkit-grab;
    cursor: grab
}

@media (min-width: 1024px) {
    .drag-card .card .bg .img-wrapper {
        border-radius:1.8229vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .img-wrapper {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .img-wrapper {
        border-radius:4.444vw
    }
}

.drag-card .card .bg .img-wrapper > .img {
    width: 100%;
    height: 100%;
    transition: .5s;
    object-fit: cover;
    transform: scale(1.15);
    will-change: transform;
    pointer-events: none
}

.drag-card .card .bg .img-wrapper .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

@media (min-width: 1024px) {
    .drag-card .card .bg .img-wrapper .play-btn {
        width:5.7813vw;
        height: 5.7813vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .img-wrapper .play-btn {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .img-wrapper .play-btn {
        width:16.667vw;
        height: 16.667vw
    }
}

.drag-card .card .bg .plus-wrapper {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-radius: 50%;
    background: #000;
    will-change: transform;
    transform: translate(-50%,50%);
    font-weight: 400;
    cursor: pointer;
    z-index: 15;
    pointer-events: auto;
    transition: .3s
}

@media (min-width: 1024px) {
    .drag-card .card .bg .plus-wrapper {
        width:2.6042vw;
        min-height: 2.6042vw;
        font-size: 2.7083vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .plus-wrapper {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .plus-wrapper {
        width:13.889vw;
        height: 13.889vw;
        font-size: 11.111vw;
        line-height: 6.667vw
    }
}

.drag-card .card .bg .plus-wrapper .plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 1;
    color: #fff;
    transition: .3s
}

@media (min-width: 1024px) {
    .drag-card .card .bg .plus-wrapper .plus {
        width:1.1458vw;
        height: 1.1458vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .plus-wrapper .plus {
        transform:translate(-50%,calc(-50%))
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .plus-wrapper .plus {
        width:6.111vw;
        height: 6.111vw
    }
}

.drag-card .card .bg .highlight-detail-wrapper {
    overflow: hidden;
    position: absolute;
    z-index: 16;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0) scale(.6666666666666666);
    transform-origin: center bottom;
    text-align: center;
    color: #fff;
    opacity: 1;
    pointer-events: none
}

@media (min-width: 1024px) {
    .drag-card .card .bg .highlight-detail-wrapper {
        border-bottom-left-radius:1.8229vw;
        border-bottom-right-radius: 1.8229vw;
        width: 31.25vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper {
        bottom:-1px
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper {
        width:103.611vw;
        border-bottom-left-radius: 5.556vw;
        border-bottom-right-radius: 5.556vw
    }
}

.drag-card .card .bg .highlight-detail-wrapper .highlight-detail {
    width: 100%;
    height: 100%;
    background: #000;
    transform: translateY(100%);
    transition: transform .3s
}

@media (min-width: 1024px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail {
        padding:1.9271vw 3.9583vw;
        border-radius: 1.8229vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail {
        border-radius:5.556vw;
        padding: 7.778vw 13.333vw
    }
}

.drag-card .card .bg .highlight-detail-wrapper .highlight-detail-title {
    font-family: 'SlateForOnePlusBold','Helvetica Neue',Helvetica,Arial,sans-serif;
    opacity: .9
}

@media (min-width: 1024px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail-title {
        font-size:1.4583vw;
        line-height: 1.5625vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail-title {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail-title {
        font-size:4.444vw;
        line-height: 5.278vw
    }
}

.drag-card .card .bg .highlight-detail-wrapper .highlight-detail-desc {
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail-desc {
        margin-top:0.6771vw;
        font-size: 0.9375vw;
        line-height: 1.0417vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail-desc {
        opacity:.54
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-detail-wrapper .highlight-detail-desc {
        margin-top:2.222vw;
        font-size: 3.333vw;
        line-height: 4.444vw
    }
}

.drag-card .card .bg .highlight-text {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 50%;
    will-change: transform;
    transform: translate(-50%,-50%);
    background: #e6f977;
    color: #000;
    text-align: center;
    transition: .3s
}

@media (min-width: 1024px) {
    .drag-card .card .bg .highlight-text {
        border-radius:1.4583vw;
        padding: 0 0.625vw;
        min-width: 9.7917vw;
        height: 2.8646vw
    }
}

.drag-card .card .bg .highlight-text .inner {
    text-transform: uppercase;
    transform: scale(.75)
}

@media (min-width: 1024px) {
    .drag-card .card .bg .highlight-text .inner {
        font-size:0.8333vw;
        line-height: 1.0417vw;
        letter-spacing: 0.0521vw
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-text {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-text {
        border-radius:7.222vw;
        min-width: 41.667vw;
        padding: 5.556vw;
        height: 13.333vw;
        font-size: 3.333vw;
        letter-spacing: 0.278vw;
        line-height: 3.889vw
    }
}

.drag-card .card .bg .highlight-text.hide {
    opacity: 0
}

.drag-card .card .bg .highlight-text.bottom {
    top: auto;
    bottom: 0;
    transform: translate(-50%,50%)
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-text.bottom {
    }
}

@media (max-width: 1023px) {
    .drag-card .card .bg .highlight-text.bottom {
        width:41.667vw;
        height: 13.333vw
    }
}

.drag-card .card:nth-child(1) {
    transform: rotate(0)
}

.drag-card .card:nth-child(2) {
    transform: rotate(8deg)
}

.drag-card .card:nth-child(3) {
    transform: rotate(16deg)
}

.drag-card .card:nth-child(4) {
    transform: rotate(24deg)
}

.drag-card .card:nth-child(5) {
    transform: rotate(32deg)
}

.drag-card .card:nth-child(6) {
    transform: rotate(40deg)
}

.drag-card .card:nth-child(7) {
    transform: rotate(48deg)
}

.drag-card .card:nth-child(8) {
    transform: rotate(56deg)
}

.drag-card .card:nth-child(9) {
    transform: rotate(64deg)
}

.drag-card .card:nth-child(10) {
    transform: rotate(72deg)
}

.drag-card .tip {
    position: absolute;
    bottom: 0;
    left: 50%;
    text-align: center;
    transform: translateX(-50%)
}

@media (min-width: 1024px) {
    .drag-card .tip {
        width:18.4375vw
    }
}

@media (max-width: 1023px) {
    .drag-card .tip {
    }
}

@media (max-width: 1023px) {
    .drag-card .tip {
        width:88.889vw
    }
}

.drag-card .tip .main-text-wrapper {
    opacity: 0;
    position: absolute;
    transition: .5s
}

@media (min-width: 1024px) {
    .drag-card .tip .main-text-wrapper {
        top:-6.5625vw
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .main-text-wrapper {
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .main-text-wrapper {
        top:-25vw
    }
}

.drag-card .tip .main-text-wrapper.active {
    opacity: 1
}

.drag-card .tip .main-text-wrapper .tip-title {
    width: 100%
}

@media (min-width: 1024px) {
    .drag-card .tip .main-text-wrapper .tip-title {
        font-size:1.1979vw;
        line-height: 1.9271vw
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .main-text-wrapper .tip-title {
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .main-text-wrapper .tip-title {
        font-size:5.556vw;
        line-height: 7.222vw
    }
}

.drag-card .tip .main-text-wrapper .tip-desc {
    width: 100%;
    color: #b3b3b3
}

@media (min-width: 1024px) {
    .drag-card .tip .main-text-wrapper .tip-desc {
        margin-top:0.7813vw;
        font-size: 0.9375vw;
        line-height: 1.0417vw
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .main-text-wrapper .tip-desc {
        color:#b3b3b3
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .main-text-wrapper .tip-desc {
        margin-top:2.778vw;
        font-size: 4.444vw;
        line-height: 5.278vw
    }
}

.drag-card .tip .more {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    opacity: .8
}

@media (min-width: 1024px) {
    .drag-card .tip .more {
        font-size:0.625vw;
        line-height: 0.7813vw;
        letter-spacing: 0.0521vw
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .more {
    }
}

@media (max-width: 1023px) {
    .drag-card .tip .more {
        font-size:3.333vw;
        letter-spacing: 0.278vw;
        line-height: 4.444vw
    }
}

.drag-card .card.active .bg .img {
    transform: scale(1)
}

.drag-card .card.active .text {
    opacity: 1
}

.drag-card.has-plus-button .card .img-wrapper .img {
    transform-origin: center top;
    transform: scale(1)
}

.drag-card.large-current .card.expand {
    z-index: 3
}

.drag-card.large-current .card.expand .bg .highlight-text {
    background: transparent;
    transform: translate(-50%,28%) scale(.6666666666666666)
}

@media (max-width: 1023px) {
    .drag-card.large-current .card.expand .bg .highlight-text {
        transform:translate(-50%,12%) scale(.78125)
    }
}

@media (max-width: 1023px) {
    .drag-card.large-current .card.expand .bg .highlight-text {
        font-size:3.333vw;
        letter-spacing: 0.278vw;
        line-height: 5.556vw
    }
}

.drag-card.large-current .card.expand .img-wrapper img {
    transform: scale(1.45)
}

.drag-card.large-current .card.expand .plus-wrapper {
    opacity: 0
}

.drag-card.large-current .card.expand .highlight-detail-wrapper .highlight-detail {
    transform: translateY(0)
}

.drag-card.large-current .card.expand .bg {
    transform: scale(1.5)
}

@media (max-width: 1023px) {
    .drag-card.large-current .card.expand .bg {
        transform:scale(1.28)
    }
}

.g--circle {
    cursor: pointer;
    transition: .5s;
    transform: rotate(11deg)
}

@media (max-width: 1023px) {
    .g--circle {
        width:25vw;
        height: 25vw
    }
}

@media (min-width: 1024px) {
    .g--circle {
        width:6.6667vw;
        height: 6.6667vw
    }
}

.g--circle.is-blue {
}

@media (max-width: 1023px) {
    .g--circle.is-blue {
        width:22.222vw;
        height: 22.222vw
    }
}

@media (min-width: 1024px) {
    .g--circle.is-blue {
        width:6.3021vw;
        height: 6.3021vw
    }
}

.g--circle img {
    transition: .3s
}

@media (min-width: 1024px) {
    .g--circle:hover {
        transform:translateY(-20%)
    }

    .g--circle:hover img {
        transform: scale(1.1)
    }
}

.g--circle .text {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(-7.81deg);
    line-height: 1.25;
    letter-spacing: 0;
    text-align: center
}

@media (min-width: 1024px) {
    .g--circle .text {
        font-size:0.625vw
    }
}

@media (max-width: 1023px) {
    .g--circle .text {
        line-height:1.27;
        font-size: 11px
    }
}

.g--modal {
    color: #fff;
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    position: fixed;
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    background: #000;
    z-index: 1050;
    transform: translateY(0);
    transition: .5s;
    overflow-y: scroll
}

@media (max-width: 1023px) {
    .g--modal {
        display:flex;
        flex-direction: column
    }
}

.g--modal.hide {
    visibility: hidden;
    transform: translateY(100%)
}

.g--modal .close-button {
    position: absolute;
    order: -1;
    cursor: pointer
}

@media (max-width: 1023px) {
    .g--modal .close-button {
        width:5.372vw;
        height: 5.372vw;
        top: 4.444vw;
        right: 3.611vw
    }
}

@media (min-width: 1024px) {
    .g--modal .close-button {
        width:2.7083vw;
        height: 2.7083vw;
        top: 2.8646vw;
        right: 2.7604vw
    }
}

.g--modal .g--modal-content {
    display: flex;
    flex-direction: column
}

.text-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%
}

@media (min-width: 1024px) {
    .text-wrapper {
        padding-left:2.7604vw
    }
}

.text-wrapper.in-bottom {
    position: absolute
}

@media (min-width: 1024px) {
    .text-wrapper.in-bottom {
        bottom:3.3854vw
    }
}

@media (max-width: 1023px) {
    .text-wrapper.in-bottom {
    }
}

@media (max-width: 1023px) {
    .text-wrapper.in-bottom {
        top:85.278vw
    }
}

.text-wrapper.in-bottom .top-text {
    white-space: nowrap;
    display: flex;
    order: 1
}

.text-wrapper.in-bottom .line {
    order: 0
}

@media (max-width: 1023px) {
    .text-wrapper.in-bottom .line {
        margin-bottom:4.444vw
    }
}

@media (min-width: 1024px) {
    .text-wrapper.in-bottom .line {
        margin-bottom:1.3542vw
    }
}

.text-wrapper .top-text {
    display: flex
}

@media (max-width: 1023px) {
    .text-wrapper .top-text {
        margin-left:5.556vw;
        margin-right: 5.556vw
    }
}

@media (max-width: 1023px) {
    .text-wrapper .top-text {
        align-items:flex-start;
        justify-content: space-between
    }
}

.text-wrapper .top-text .category {
    display: flex
}

@media (min-width: 1024px) {
    .text-wrapper .top-text .category {
        margin-left:6.9792vw
    }
}

@media (max-width: 1023px) {
    .text-wrapper .top-text .category {
        align-items:center
    }
}

.text-wrapper .top-text .category .label {
    line-height: 1.56;
    letter-spacing: 0
}

@media (max-width: 1023px) {
    .text-wrapper .top-text .category .label {
        margin-right:1.667vw
    }
}

@media (min-width: 1024px) {
    .text-wrapper .top-text .category .label {
        margin-right:0.3646vw;
        font-size: 0.9375vw
    }
}

@media (max-width: 1023px) {
    .text-wrapper .top-text .category .label {
        line-height:1.58;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .text-wrapper .top-text .category .label {
        font-size:3.333vw
    }
}

.text-wrapper .line {
    background: #fff;
    height: 1px;
    width: 100%
}

@media (min-width: 1024px) {
    .text-wrapper .line {
        width:94.4792vw
    }
}

.text-wrapper.normal .top-text {
}

@media (max-width: 1023px) {
    .text-wrapper.normal .top-text {
        margin-top:17.778vw
    }
}

@media (min-width: 1024px) {
    .text-wrapper.normal .top-text {
        margin-top:5vw
    }
}

.text-wrapper.normal .title {
}

@media (max-width: 1023px) {
    .text-wrapper.normal .title {
        width:38.056vw
    }
}

.text-wrapper.normal .line {
}

@media (max-width: 1023px) {
    .text-wrapper.normal .line {
        margin-top:4.444vw;
        margin-bottom: 11.111vw
    }
}

@media (min-width: 1024px) {
    .text-wrapper.normal .line {
        margin-top:1.875vw;
        margin-bottom: 1.6146vw
    }
}

.modal-h1 {
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .modal-h1 {
        font-size:1.4583vw
    }
}

@media (max-width: 1023px) {
    .modal-h1 {
        line-height:1.36;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .modal-h1 {
        font-size:3.889vw
    }
}

#section-kv {
    color: #000;
    background: #fff;
    display: flex;
    justify-content: space-between
}

@media (max-width: 1023px) {
    #section-kv {
        flex-direction:column-reverse
    }
}

#section-kv .img {
}

@media (min-width: 1024px) {
    #section-kv .img {
        margin-top:5.8854vw;
        margin-right: 5.8333vw;
        width: 54.5313vw;
        height: 40.3125vw
    }
}

@media (max-width: 1023px) {
    #section-kv .img {
        object-fit:cover
    }
}

@media (max-width: 1023px) {
    #section-kv .img {
        width:100vw;
        height: 112.778vw
    }
}

#section-kv .texts {
    display: flex;
    justify-content: center;
    flex-direction: column
}

@media (min-width: 1024px) {
    #section-kv .texts {
        padding:0 2.2917vw 0 4.1667vw
    }
}

@media (max-width: 1023px) {
    #section-kv .texts {
    }
}

@media (max-width: 1023px) {
    #section-kv .texts {
        padding:11.111vw 5.556vw
    }
}

#section-kv .title {
}

@media (min-width: 1024px) {
    #section-kv .title {
        width:30.5208vw;
        height: 6.25vw
    }
}

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

@media (max-width: 1023px) {
    #section-kv .title {
        width:74.444vw;
        height: 8.333vw
    }
}

#section-kv .subtitle {
    position: relative;
    font-size: 0
}

@media (max-width: 1023px) {
    #section-kv .subtitle {
        width:100%
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle {
        margin-top:3.333vw
    }
}

#section-kv .subtitle .line-through {
    display: inline-block;
    position: relative;
    font-size: 0
}

#section-kv .subtitle .line-through > * {
}

@media (min-width: 1024px) {
    #section-kv .subtitle .line-through > * {
        font-size:3.125vw;
        line-height: 3.125vw
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle .line-through > * {
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle .line-through > * {
        font-size:7.778vw;
        line-height: 9.444vw
    }
}

#section-kv .subtitle .line-through .line {
    position: absolute;
    left: 0;
    background: #00b2d2
}

@media (min-width: 1024px) {
    #section-kv .subtitle .line-through .line {
        top:1.6146vw;
        width: calc(100% - 0.5208vw);
        height: 0.3125vw
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle .line-through .line {
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle .line-through .line {
        top:5vw;
        width: calc(100% - 2.222vw);
        height: 0.833vw
    }
}

#section-kv .subtitle .follow {
}

@media (min-width: 1024px) {
    #section-kv .subtitle .follow {
        font-size:3.125vw;
        line-height: 3.125vw
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle .follow {
    }
}

@media (max-width: 1023px) {
    #section-kv .subtitle .follow {
        font-size:7.778vw;
        line-height: 9.444vw
    }
}

#section-kv .desc {
    display: flex;
    align-items: flex-end
}

@media (min-width: 1024px) {
    #section-kv .desc {
        margin-top:1.9792vw
    }
}

@media (max-width: 1023px) {
    #section-kv .desc {
    }
}

@media (max-width: 1023px) {
    #section-kv .desc {
        margin-top:3.611vw
    }
}

#section-kv .desc span {
    display: inline
}

@media (min-width: 1024px) {
    #section-kv .desc span {
        font-size:1.4583vw;
        line-height: 1.4583vw
    }
}

@media (max-width: 1023px) {
    #section-kv .desc span {
    }
}

@media (max-width: 1023px) {
    #section-kv .desc span {
        font-size:4.444vw;
        letter-spacing: -0.111vw;
        line-height: 4.444vw
    }
}

#section-kv .desc #after-price {
    display: none
}

@media (max-width: 1023px) {
    #section-kv .desc #after-price {
        width:22.222vw;
        margin-left: 3.889vw
    }
}

@media (min-width: 1024px) {
    #section-kv .desc #after-price {
    }
}

@media (min-width: 1024px) {
    #section-kv .desc #after-price {
        margin-left:1.0417vw;
        width: 6.25vw
    }
}

#section-kv .desc #after-price.show {
    display: inline-block
}

#section-kv .medium {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif
}

#section-kv .light {
    font-family: 'SlateForOnePlusLight','Helvetica Neue',Helvetica,Arial,sans-serif
}

#section-kv-pacman {
    position: relative;
    height: calc(100vh);
    height: calc((100 * var(--vh, 1vh)));
    color: #000;
    background-color: #fff;
    will-change: color,background-color;
    transition: color .5s,background .5s
}

#section-kv-pacman .bg {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-repeat: repeat;
    will-change: opacity;
    transition: opacity .5s
}

@media (min-width: 1024px) {
    #section-kv-pacman .bg {
        background-position:5.7292vw 3.8021vw;
        background-size: 7.3958vw 6.25vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .bg {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .bg {
        background-position:9.722vw 6.667vw;
        background-size: 11.944vw 14.722vw
    }
}

#section-kv-pacman .bg.bg-dark {
    z-index: 1;
    opacity: 0;
    will-change: opacity;
    transition: opacity .5s;
    background-color: #000 !important;
}

#section-kv-pacman .vertical-center {
    display: flex;
    position: relative;
    z-index: 2;
    height: 100%
}

@media (min-width: 1024px) {
    #section-kv-pacman .vertical-center {
        align-items:center;
        justify-content: flex-end
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .vertical-center {
        flex-direction:column;
        align-items: center;
        justify-content: flex-end;
        position: absolute;
        top: 50px;
        width: 100%;
        height: calc(100% - 50px)
    }
}

#section-kv-pacman .texts {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center
}

@media (min-width: 1024px) {
    #section-kv-pacman .texts {
        width:23.6458vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .texts {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .texts {
        margin:8.333vw auto 0
    }
}

#section-kv-pacman .title {
}

@media (min-width: 1024px) {
    #section-kv-pacman .title {
        width:23.3854vw;
        height: 6.9271vw
    }
}

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

@media (max-width: 1023px) {
    #section-kv-pacman .title {
        width:46.389vw;
        height: 13.611vw
    }
}

#section-kv-pacman .title path {
    will-change: fill;
    transition: fill .5s
}

#section-kv-pacman .logo-wrapper {
    position: relative
}

@media (min-width: 1024px) {
    #section-kv-pacman .logo-wrapper {
        margin-top:1.5625vw;
        width: 16.3542vw;
        height: 3.8542vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .logo-wrapper {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .logo-wrapper {
        margin-top:3.333vw;
        width: 33.333vw;
        height: 7.778vw
    }
}

#section-kv-pacman .logo-wrapper .logo {
    width: 100%;
    height: 100%
}

#section-kv-pacman .logo-wrapper .tm {
    position: absolute;
    top: 0;
    right: 0
}

@media (min-width: 1024px) {
    #section-kv-pacman .logo-wrapper .tm {
        width:0.4167vw;
        height: 0.2448vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .logo-wrapper .tm {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .logo-wrapper .tm {
        width:0.833vw;
        height: 0.556vw
    }
}

#section-kv-pacman .logo-wrapper .tm path {
    will-change: fill;
    transition: fill .5s
}

#section-kv-pacman .legal {
    opacity: .3
}

@media (min-width: 1024px) {
    #section-kv-pacman .legal {
        margin-top:0.5208vw;
        font-size: 0.625vw;
        line-height: 0.625vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .legal {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .legal {
        margin-top:2.222vw;
        font-size: 2.222vw;
        line-height: 2.778vw
    }
}

#section-kv-pacman .subtitle {
    position: relative;
    font-size: 0
}

@media (min-width: 1024px) {
    #section-kv-pacman .subtitle {
        margin-top:2.0833vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle {
        margin-top:2.778vw;
        width: 49.722vw
    }
}

#section-kv-pacman .subtitle .line-through {
    display: inline-block;
    position: relative;
    font-size: 0
}

#section-kv-pacman .subtitle .line-through > * {
}

@media (min-width: 1024px) {
    #section-kv-pacman .subtitle .line-through > * {
        font-size:2.5vw;
        line-height: 3.125vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle .line-through > * {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle .line-through > * {
        font-size:5vw;
        line-height: 6.111vw
    }
}

#section-kv-pacman .subtitle .line-through .line {
    position: absolute;
    left: 0;
    background: #ffd800
}

@media (min-width: 1024px) {
    #section-kv-pacman .subtitle .line-through .line {
        top:1.6146vw;
        width: calc(100% - 0.4167vw);
        height: 0.3125vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle .line-through .line {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle .line-through .line {
        top:2.778vw;
        width: calc(100% - 0.556vw);
        height: 0.556vw
    }
}

#section-kv-pacman .subtitle .follow {
}

@media (min-width: 1024px) {
    #section-kv-pacman .subtitle .follow {
        font-size:2.5vw;
        line-height: 3.125vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle .follow {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .subtitle .follow {
        font-size:5vw;
        line-height: 6.111vw
    }
}

#section-kv-pacman .desc {
    display: flex;
    align-items: center
}

@media (min-width: 1024px) {
    #section-kv-pacman .desc {
        margin-top:1.9792vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .desc {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .desc {
        margin-top:3.611vw
    }
}

#section-kv-pacman .desc span {
    display: inline
}

@media (min-width: 1024px) {
    #section-kv-pacman .desc span {
        font-size:1.4583vw;
        line-height: 1.4583vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .desc span {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .desc span {
        font-size:4.444vw;
        letter-spacing: -0.111vw;
        line-height: 4.444vw
    }
}

#section-kv-pacman .desc #after-price {
    display: inline-block;
    position: relative
}

@media (max-width: 1023px) {
    #section-kv-pacman .desc #after-price {
        width:22.222vw;
        height: 13.333vw;
        margin-left: 3.889vw
    }
}

@media (min-width: 1024px) {
    #section-kv-pacman .desc #after-price {
    }
}

@media (min-width: 1024px) {
    #section-kv-pacman .desc #after-price {
        margin-left:1.0417vw;
        width: 6.25vw;
        height: 3.75vw
    }
}

#section-kv-pacman .desc #after-price .light,#section-kv-pacman .desc #after-price .dark {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    will-change: opacity;
    transition: opacity .5s
}

#section-kv-pacman .desc #after-price .light {
    opacity: 1;
    z-index: 0
}

#section-kv-pacman .desc #after-price .dark {
    z-index: 1
}

#section-kv-pacman .desc #after-price .word {
    fill: #000;
    will-change: fill;
    transition: fill .5s
}

#section-kv-pacman .desc #after-price .line {
    stroke: #000;
    will-change: stroke;
    transition: stroke .5s
}

#section-kv-pacman .phone-wrapper0 {
    position: relative
}

@media (min-width: 1024px) {
    #section-kv-pacman .phone-wrapper0 {
        width:68.6979vw;
        height: 24.2188vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .phone-wrapper0 {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .phone-wrapper0 {
        width:75.833vw;
        height: 108.611vw
    }
}

#section-kv-pacman .phone-wrapper0 img {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .5s;
    will-change: opacity
}

@media (max-width: 1023px) {
    #section-kv-pacman .phone-wrapper0 img {
        object-fit:cover;
        object-position: top
    }
}

#section-kv-pacman .phone-wrapper0 img.silver {
    opacity: 1
}

#section-kv-pacman .btn-wrapper {
    z-index: 5;
    text-align: center
}

@media (min-width: 1024px) {
    #section-kv-pacman .btn-wrapper {
        position:absolute;
        top: 83.91%;
        left: 50%;
        transform: translateX(-50%)
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper {
        width:19.167vw;
        height: 11.111vw
    }
}

#section-kv-pacman .btn-wrapper .btn {
    position: relative;
    margin: 0 auto;
    border: 1px solid #000;
    background-color: #fff;
    cursor: pointer;
    will-change: border-color,background-color;
    transition: border-color .5s,background-color .5s
}

@media (min-width: 1024px) {
    #section-kv-pacman .btn-wrapper .btn {
        border-radius:1.5104vw;
        width: 5.9375vw;
        height: 2.9688vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .btn {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .btn {
        margin-top:6.667vw;
        border-radius: 3.056vw;
        width: 12.222vw;
        height: 6.111vw
    }
}

#section-kv-pacman .btn-wrapper .btn .inner {
    position: absolute;
    top: 0;
    transition: transform .5s
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .btn .inner {
        right:0.278vw
    }
}

@media (min-width: 1024px) {
    #section-kv-pacman .btn-wrapper .btn .inner {
        width:2.8646vw;
        height: 2.8646vw;
        right: 0.0521vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .btn .inner {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .btn .inner {
        top:0.139vw;
        width: 5.278vw;
        height: 5.278vw
    }
}

#section-kv-pacman .btn-wrapper .btn .inner path {
    fill: #fef682;
    transition: fill .5s
}

#section-kv-pacman .btn-wrapper .btn .inner-img {
    opacity: 0
}

#section-kv-pacman .btn-wrapper .btn .inner-img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    will-change: opacity;
    transition: opacity .5s
}

#section-kv-pacman .btn-wrapper .btn .inner-img .moon {
    opacity: 0
}

#section-kv-pacman .btn-wrapper .discover {
    font-family: 'OnePlus Sans Display Medium','Helvetica Neue',Helvetica,Arial,sans-serif;
    opacity: .8
}

@media (min-width: 1024px) {
    #section-kv-pacman .btn-wrapper .discover {
        margin-top:1.0417vw;
        font-size: 0.625vw;
        line-height: 0.7813vw;
        letter-spacing: 0.0521vw
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .discover {
    }
}

@media (max-width: 1023px) {
    #section-kv-pacman .btn-wrapper .discover {
        margin-top:1.667vw;
        font-size: 1.944vw;
        letter-spacing: 0.047vw;
        line-height: 3.333vw
    }
}

#section-kv-pacman.dark {
    color: #fff;
    background-color: #000
}

#section-kv-pacman.dark .bg-dark {
    opacity: 1
}

#section-kv-pacman.dark .title path {
    fill: #fff
}

#section-kv-pacman.dark .logo-wrapper .tm path {
    fill: #fff
}

#section-kv-pacman.dark #after-price .word {
    fill: #fff
}

#section-kv-pacman.dark #after-price .line {
    stroke: #fff
}

#section-kv-pacman.dark #after-price .dark {
    opacity: 1
}

#section-kv-pacman.dark .phone-wrapper0 .green {
    opacity: 1
}

#section-kv-pacman.dark .btn {
    border-color: #fff;
    background-color: #000
}

#section-kv-pacman.dark .btn .inner {
    transform: translateX(-100%)
}

#section-kv-pacman.dark .btn .inner-svg path {
    fill: #55cf85
}

#section-kv-pacman.dark .btn .inner-img .moon {
    opacity: 1
}

#section-kv-pacman.dark .btn .inner-img .sun {
    opacity: 0
}

#section-film {
    position: relative;
    color: #fff;
    width: 100%;
    height: 180vh;
    height: calc(180 * var(--vh, 1vh))
}

#section-film .sticky-item {
    position: -webkit-sticky;
    position: sticky;
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    #section-film .sticky-item {
        padding:3.9583vw 4.1667vw 3.6458vw;
        padding-top: calc(3.9583vw + 61px)
    }
}

#section-film .cover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    pointer-events: none
}

#section-film .circle-tip {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 5;
    transform: rotate(10deg);
    text-align: center;
    color: #000;
    opacity: 0
}

@media (min-width: 1024px) {
    #section-film .circle-tip {
        top:calc(2.3958vw + 61px);
        left: 18.4896vw;
        padding: 0 1.5625vw;
        width: 4.1667vw;
        height: 4.1667vw;
        font-size: 0.625vw;
        line-height: 0.7813vw;
        letter-spacing: 0.0521vw
    }
}

#section-film .circle-tip.show {
    opacity: 1
}

@media (max-width: 1023px) {
    #section-film .circle-tip {
        display:none
    }
}

@media (max-width: 1023px) {
    #section-film .circle-tip {
        top:calc(11.111vw + 50px);
        right: 10vw;
        width: 22.222vw;
        height: 22.222vw
    }
}

#section-film .bg-cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg,rgba(0,0,0,0.2) 0,rgba(0,0,0,0) 100%)
}

@media (max-width: 1023px) {
    #section-film .bg-cover {
        background:rgba(0,0,0,0.6)
    }
}

#section-film .bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center
}

#section-film .bg-wrapper .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: .3s;
    object-fit: cover
}

#section-film .bg-wrapper .bg.active {
    opacity: 1
}

#section-film .fg {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 6;
    height: 100%;
    width: 100%
}

@media (max-width: 1023px) {
    #section-film .fg {
        justify-content:space-between
    }
}

@media (max-width: 1023px) {
    #section-film .fg {
        padding:0 5.556vw
    }
}

#section-film .intro {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    position: relative;
    z-index: 2
}

@media (min-width: 1024px) {
    #section-film .intro {
        font-size:0.625vw;
        line-height: 2.8646vw;
        letter-spacing: 0.0521vw
    }
}

@media (max-width: 1023px) {
    #section-film .intro {
        margin-top:calc(13.7vh + 50px);
        margin-top: calc((13.7 * var(--vh, 1vh)) + 50px)
    }
}

@media (max-width: 1023px) {
    #section-film .intro {
        font-size:3.056vw;
        letter-spacing: 0.278vw;
        line-height: 4.444vw
    }
}

#section-film .list {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    z-index: 5
}

@media (max-width: 1023px) {
    #section-film .list {
    }
}

@media (max-width: 1023px) {
    #section-film .list {
        margin-top:2.778vw
    }
}

#section-film .list .item {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    letter-spacing: 0;
    cursor: pointer
}

@media (min-width: 1024px) {
    #section-film .list .item {
        margin-top:0.5208vw;
        height: 2.8646vw;
        font-size: 2.3438vw;
        line-height: 2.7604vw
    }
}

@media (max-width: 1023px) {
    #section-film .list .item {
    }
}

@media (max-width: 1023px) {
    #section-film .list .item {
        font-size:5.556vw;
        line-height: 9.444vw;
        height: 9.444vw
    }
}

#section-film .list .item .progress-bg {
    visibility: hidden;
    position: absolute;
    width: 100%;
    bottom: 0;
    background: rgba(255,255,255,0.6);
    overflow: hidden
}

@media (min-width: 1024px) {
    #section-film .list .item .progress-bg {
        height:0.1042vw
    }
}

@media (max-width: 1023px) {
    #section-film .list .item .progress-bg {
    }
}

@media (max-width: 1023px) {
    #section-film .list .item .progress-bg {
        height:0.556vw
    }
}

#section-film .list .item .progress-bg .inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    transform-origin: left center;
    transform: scaleX(0);
    transition: 0s
}

#section-film .list .item .normal {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    color: rgba(255,255,255,0.7)
}

#section-film .list .item .highlight {
    position: absolute;
    top: 0;
    left: 0;
    white-space: nowrap;
    opacity: 1
}

#section-film .list.in-view .normal {
    opacity: 1
}

#section-film .list.in-view .highlight {
    opacity: 0
}

#section-film .list.in-view .item.active .progress-bg,#section-film .list.in-view .item.force-active .progress-bg {
    visibility: visible
}

#section-film .list.in-view .item.active .normal,#section-film .list.in-view .item.force-active .normal {
    opacity: 0
}

#section-film .list.in-view .item.active .highlight,#section-film .list.in-view .item.force-active .highlight {
    opacity: 1
}

#section-film .list.in-view .item.active .inner:not(.force) {
    transform: scaleX(1);
    transition: transform 5s linear
}

#section-film .list.in-view .item.force-active .progress-bg .inner.force {
    transition: 0s !important;
    transform: scaleX(1) !important
}

#section-film .list.show-highlight-text .item .normal {
    opacity: 0;
    transition: .3s
}

#section-film .list.show-highlight-text .item .highlight {
    opacity: 1;
    transition: .3s
}

#section-film .button {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    border: 1px solid #fff;
    cursor: pointer;
    text-transform: uppercase
}

@media (min-width: 1024px) {
    #section-film .button {
        border-radius:2.0313vw;
        width: 9.7917vw;
        height: 4.0625vw;
        font-size: 0.625vw;
        line-height: 3.125vw;
        letter-spacing: 0.0521vw
    }
}

@media (min-width: 1024px) {
    #section-film .button {
    }
}

@media (min-width: 1024px) {
    #section-film .button {
        margin-top:2.1875vw
    }
}

@media (max-width: 1023px) {
    #section-film .button {
        margin-bottom:10vh;
        margin-bottom: calc(10 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-film .button {
        border-radius:7.222vw;
        width: 38.889vw;
        height: 14.444vw;
        font-size: 3.333vw;
        letter-spacing: 0.278vw;
        line-height: 5.556vw
    }
}

#section-film .film-modal {
    display: none
}

.film-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%
}

@media (min-width: 1024px) {
    .film-modal .video {
        height:80vh;
        height: calc(80 * var(--vh, 1vh));
        width: 142.22222222222223vh;
        width: calc(142.22222222222223 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    .film-modal .video {
        width:100vw;
        height: 56.25vw
    }
}

.film-modal .close {
    position: absolute;
    z-index: 10;
    cursor: pointer
}

@media (min-width: 1024px) {
    .film-modal .close {
    }
}

@media (min-width: 1024px) {
    .film-modal .close {
        top:2.7604vw;
        right: 2.8646vw;
        width: 2.8125vw;
        height: 2.8125vw
    }
}

@media (max-width: 1023px) {
    .film-modal .close {
    }
}

@media (max-width: 1023px) {
    .film-modal .close {
        top:3.333vw;
        right: 5.556vw;
        width: 6.667vw;
        height: 6.667vw
    }
}

#section-design {
    overflow: hidden;
    min-height: 100vh;
    min-height: calc(100 * var(--vh, 1vh));
    color: #fff;
    background: #000
}

@media (min-width: 1024px) {
    #section-design {
        padding-top:2.8646vw;
        padding-bottom: 6.1979vw
    }
}

#section-design .color-selector-wrapper {
    display: flex
}

@media (min-width: 1024px) {
    #section-design .color-selector-wrapper {
        padding-right:11.3021vw
    }
}

@media (min-width: 1024px) {
    #section-design .color-selector-wrapper {
        justify-content:flex-end
    }
}

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

@media (max-width: 1023px) {
    #section-design .color-selector-wrapper {
        margin-top:11.111vw;
        padding: 0 5.556vw
    }
}

#section-design .color-selector {
    position: relative
}

@media (min-width: 1024px) {
    #section-design .color-selector {
        margin-top:-4.0104vw;
        padding-left: 0.7813vw;
        width: 44.5833vw;
        height: 5.3646vw
    }
}

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

@media (max-width: 1023px) {
    #section-design .color-selector {
        height:18.333vw
    }
}

#section-design .color-selector .btn-wrapper {
    display: flex;
    align-items: center
}

#section-design .color-selector .btn-wrapper .color {
    border-radius: 50%;
    cursor: pointer
}

@media (min-width: 1024px) {
    #section-design .color-selector .btn-wrapper .color {
        width:3.8021vw;
        height: 3.8021vw
    }
}

@media (max-width: 1023px) {
    #section-design .color-selector .btn-wrapper .color {
    }
}

@media (max-width: 1023px) {
    #section-design .color-selector .btn-wrapper .color {
        width:12.778vw;
        height: 12.778vw
    }
}

#section-design .color-selector .btn-wrapper .color.silver {
    background: linear-gradient(90deg,#f7fefe,#b7bebe)
}

#section-design .color-selector .btn-wrapper .color.blue {
    background: #84d9fe
}

#section-design .color-selector .btn-wrapper .color.gray {
    background: #717577
}

#section-design .color-selector .btn-wrapper .color.green {
    background: #549068
}

#section-design .color-selector .btn-wrapper .color +.color {
}

@media (max-width: 1023px) {
    #section-design .color-selector .btn-wrapper .color +.color {
        margin-left:7.222vw
    }
}

@media (min-width: 1024px) {
    #section-design .color-selector .btn-wrapper .color +.color {
        margin-left:2.2917vw
    }
}

#section-design .color-selector .line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255,255,255,0.8)
}

#section-design .color-selector .slider {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #fff;
    transition: .4s
}

@media (min-width: 1024px) {
    #section-design .color-selector .slider {
        width:5.3646vw;
        height: 0.1563vw
    }
}

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

@media (max-width: 1023px) {
    #section-design .color-selector .slider {
        width:15vw;
        height: 0.833vw
    }
}

#section-design .big-title {
}

@media (min-width: 1024px) {
    #section-design .big-title {
        margin-left:5.5729vw
    }
}

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

@media (max-width: 1023px) {
    #section-design .big-title {
        padding:0 5.556vw
    }
}

#section-design .cards {
}

@media (min-width: 1024px) {
    #section-design .cards {
        margin-top:4.3229vw
    }
}

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

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

#section-design .carousel-modal {
    position: absolute;
    visibility: hidden;
    pointer-events: none
}

.carousel-modal {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000
}

.carousel-modal .arrows {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 10;
    top: 50%;
    width: 100%;
    transform: translateY(-50%)
}

@media (min-width: 1024px) {
    .carousel-modal .arrows {
        padding:0 2.8646vw
    }
}

.carousel-modal .arrows .left,.carousel-modal .arrows .right {
    cursor: pointer;
    opacity: 1;
    transition: .3s
}

.carousel-modal .arrows .left.hide,.carousel-modal .arrows .right.hide {
    cursor: auto;
    opacity: 0
}

.carousel-modal .arrows .left {
    transform: rotate(180deg)
}

.carousel-modal .slick-slide {
    display: inline-block;
    opacity: .5;
    transition: .3s;
    pointer-events: none
}

@media (max-width: 1023px) {
    .carousel-modal .slick-slide {
        width:93.889vw;
        height: 135vw
    }
}

.carousel-modal .slick-slide.slick-current {
    pointer-events: auto;
    opacity: 1
}

.carousel-modal .slick-slide +.slick-slide {
}

@media (max-width: 1023px) {
    .carousel-modal .slick-slide +.slick-slide {
        margin-left:5.556vw
    }
}

.carousel-modal .carousel {
    /* top: 50%; */
    height: 100%
}

.carousel-modal .carousel .img-scroll {
    position: absolute;
    top: 85%; /*50%*/
    transform: translateY(-50%);
    transition: .5s;
    font-size: 0
}

@media (min-width: 1024px) {
    .carousel-modal .carousel .img-scroll {
        left:calc(50% - 15vw);
        width: 453.125vw
    }
}

@media (max-width: 1023px) {
    .carousel-modal .carousel .img-scroll {
        position:relative;
        width: 100%;
        top: 50%;
    }
}

.carousel-modal .carousel .img-scroll .item {
    display: inline-block;
    transition: .5s
}

@media (min-width: 1024px) {
    .carousel-modal .carousel .img-scroll .item {
        width:30vw;
        height: 43.2292vw
    }
}

@media (min-width: 1024px) {
    .carousel-modal .carousel .img-scroll .item {
        opacity:0
    }
}

@media (max-width: 1023px) {
    .carousel-modal .carousel .img-scroll .item {
    }
}

@media (max-width: 1023px) {
    .carousel-modal .carousel .img-scroll .item {
        width:93.889vw;
        height: 135vw
    }
}

.carousel-modal .carousel .img-scroll .item.active {
    opacity: 1
}

.carousel-modal .carousel .img-scroll .item .img {
    width: 100%;
    height: 100%
}

.carousel-modal .pagination {
    position: absolute;
    color: #fff
}

@media (min-width: 1024px) {
    .carousel-modal .pagination {
        bottom:4.0625vw;
        right: 2.8646vw;
        font-size: 2.3438vw;
        line-height: 1.9271vw
    }
}

@media (max-width: 1023px) {
    .carousel-modal .pagination {
    }
}

@media (max-width: 1023px) {
    .carousel-modal .pagination {
        bottom:3.333vw;
        right: 5.556vw;
        font-size: 5.556vw;
        line-height: 10.278vw
    }
}

.carousel-modal .close {
    position: absolute;
    z-index: 10;
    cursor: pointer
}

@media (min-width: 1024px) {
    .carousel-modal .close {
    }
}

@media (min-width: 1024px) {
    .carousel-modal .close {
        top:2.7604vw;
        right: 2.8646vw;
        width: 2.8125vw;
        height: 2.8125vw
    }
}

@media (max-width: 1023px) {
    .carousel-modal .close {
    }
}

@media (max-width: 1023px) {
    .carousel-modal .close {
        top:3.333vw;
        right: 5.556vw;
        width: 6.667vw;
        height: 6.667vw
    }
}

#section-camera {
}

@media (min-width: 1024px) {
    #section-camera {
        padding-top:5.3125vw
    }
}

@media (max-width: 1023px) {
    #section-camera {
        width:100%
    }
}

#section-camera .cards-wrapper {
    overflow: hidden;
    width: 100%
}

#section-camera .big-title {
    font-family: 'SlateForOnePlusLight','Helvetica Neue',Helvetica,Arial,sans-serif
}

@media (min-width: 1024px) {
    #section-camera .big-title {
        width:29.7917vw;
        font-size: 6.1458vw
    }
}

#section-camera .scroll-box {
    position: relative
}

#section-camera .scroll-box .nav-anchor.g--ls-hidden {
    position: absolute
}

@media (max-width: 1023px) {
    #section-camera .scroll-box .nav-anchor.g--ls-hidden {
        margin-top:-20.833vw
    }
}

#section-camera .cards-night-wrapper {
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper {
        margin:11.0938vw auto 0;
        width: 68.75vw;
        height: 42.5vw
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper {
        overflow:hidden;
        flex-direction: column;
        width: 100%
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper {
        margin-top:25vw
    }
}

#section-camera .cards-night-wrapper .card-scroll {
    width: 100%
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .card-scroll {
        display:flex;
        justify-content: space-between;
        width: 100%;
        height: 100%
    }
}

#section-camera .cards-night-wrapper .slick-slide {
    display: inline-block;
    opacity: .5;
    transition: .3s;
    pointer-events: none
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .slick-slide {
        width:69.444vw
    }
}

#section-camera .cards-night-wrapper .slick-slide.slick-current {
    pointer-events: auto;
    opacity: 1
}

#section-camera .cards-night-wrapper .slick-slide +.slick-slide {
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .slick-slide +.slick-slide {
        margin-left:5.556vw
    }
}

#section-camera .cards-night-wrapper .item {
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item {
        width:18.75vw
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item {
        display:inline-block;
        font-size: 0
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item {
        width:69.444vw;
        height: 85.833vw
    }
}

#section-camera .cards-night-wrapper .item .img-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    cursor: pointer
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .img-wrapper {
        border-radius:1.5625vw;
        height: 23.125vw
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item .img-wrapper {
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item .img-wrapper {
        border-radius:4.167vw;
        width: 69.444vw;
        height: 85.833vw
    }
}

#section-camera .cards-night-wrapper .item .img-wrapper .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .img-wrapper .play-btn {
        width:4.3229vw;
        height: 4.3229vw
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item .img-wrapper .play-btn {
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item .img-wrapper .play-btn {
        width:16.667vw;
        height: 16.667vw
    }
}

#section-camera .cards-night-wrapper .item .img-wrapper .img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

#section-camera .cards-night-wrapper .item .text {
    text-align: center
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text {
        margin-top:3.1771vw;
        width: 18.6979vw
    }
}

#section-camera .cards-night-wrapper .item .text .highlight {
    opacity: .5;
    text-transform: uppercase
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text .highlight {
        font-size:0.625vw;
        line-height: 0.7813vw;
        letter-spacing: 0.0651vw
    }
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text .highlight {
        font-family:'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item .text .highlight {
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-night-wrapper .item .text .highlight {
        width:50vw;
        height: 14.444vw
    }
}

#section-camera .cards-night-wrapper .item .text .title {
    opacity: .9
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text .title {
        margin:1.1458vw auto 0;
        font-size: 1.1979vw;
        line-height: 1.25vw
    }
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text .title {
    }
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text .title {
        width:16.875vw
    }
}

#section-camera .cards-night-wrapper .item .text .detail {
    opacity: .75;
    transition: opacity .3s
}

@media (min-width: 1024px) {
    #section-camera .cards-night-wrapper .item .text .detail {
        margin-top:1.0938vw;
        font-size: 0.9375vw;
        line-height: 1.0417vw
    }
}

#section-camera .cards-night-text {
    position: relative
}

@media (max-width: 1023px) {
    #section-camera .cards-night-text {
        margin-top:8.333vw;
        height: 41.944vw
    }
}

#section-camera .cards-night-text .text {
    position: absolute;
    opacity: 0;
    transition: .3s;
    text-align: center
}

#section-camera .cards-night-text .text.active {
    opacity: 1
}

#section-camera .cards-night-text .text .highlight {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    opacity: .5;
    text-transform: uppercase
}

@media (max-width: 1023px) {
    #section-camera .cards-night-text .text .highlight {
        font-size:3.333vw;
        letter-spacing: 0.278vw;
        line-height: 4.444vw
    }
}

#section-camera .cards-night-text .text .title {
    opacity: .9
}

@media (max-width: 1023px) {
    #section-camera .cards-night-text .text .title {
        margin-top:4.444vw;
        font-size: 5vw;
        line-height: 6.389vw
    }
}

#section-camera .cards-night-text .text .detail {
    opacity: .75;
    text-align: center;
    transition: opacity .3s
}

@media (max-width: 1023px) {
    #section-camera .cards-night-text .text .detail {
        margin-top:3.333vw;
        font-size: 3.889vw;
        line-height: 5.556vw
    }
}

#section-camera .title-desc {
}

@media (min-width: 1024px) {
    #section-camera .title-desc {
        width:28.6458vw
    }
}

#section-camera .title-desc .title {
}

@media (min-width: 1024px) {
    #section-camera .title-desc .title {
        font-size:3.125vw;
        line-height: 3.125vw
    }
}

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

@media (max-width: 1023px) {
    #section-camera .title-desc .title {
        font-size:7.778vw;
        line-height: 9.444vw
    }
}

#section-camera .title-desc .desc {
    opacity: .75;
    transition: opacity .3s
}

@media (min-width: 1024px) {
    #section-camera .title-desc .desc {
        margin-top:1.5104vw;
        font-size: 1.25vw;
        line-height: 1.4583vw
    }
}

@media (max-width: 1023px) {
    #section-camera .title-desc .desc {
        opacity:1
    }
}

@media (max-width: 1023px) {
    #section-camera .title-desc .desc {
        margin-top:5.556vw;
        font-size: 3.889vw;
        line-height: 5.556vw
    }
}

@media (min-width: 1024px) {
    #section-camera .title-desc.is-column {
        display:flex
    }
}

@media (min-width: 1024px) {
    #section-camera .title-desc.is-column .desc {
        margin-top:0
    }
}

#section-camera .scroll-box-row {
    position: relative;
    width: 100%
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row {
        display:flex;
        flex-direction: column-reverse
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row {
        padding:0 5.556vw
    }
}

#section-camera .scroll-box-row .text {
    flex: 1;
    display: flex;
    align-items: center;
    top: 0
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .text {
        margin-left:7.1875vw;
        height: 35.5729vw
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .text {
        position:-webkit-sticky;
        position: sticky
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row .text {
        color:#fff
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row .text {
        margin-top:11.111vw;
        font-size: 3.889vw;
        line-height: 5.556vw
    }
}

#section-camera .scroll-box-row .img {
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .img {
        width:52.7083vw;
        height: 35.5729vw;
        margin-top: -35.5729vw;
        margin-left: 39.7917vw
    }
}

#section-camera .scroll-box-row .img .img-text {
    opacity: .75;
    transition: opacity .3s
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .img .img-text {
        margin-bottom:4.6354vw;
        width: 32.7083vw
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .img .img-text {
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .img .img-text {
        font-size:1.25vw;
        line-height: 1.4583vw
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row .img .img-text {
        color:#fff
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row .img .img-text {
        font-size:3.889vw;
        line-height: 5.556vw
    }
}

#section-camera .scroll-box-row .img img {
    width: 100%;
    object-fit: cover
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row .img img {
        border-radius:1.8229vw;
        height: 35.5729vw
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row .img img {
        object-fit:cover
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row .img img {
        border-radius:2.778vw;
        width: 88.889vw;
        height: 60vw
    }
}

#section-camera .scroll-box-row +.scroll-box-row {
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row +.scroll-box-row {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row +.scroll-box-row {
        margin-top:8.75vw
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.first {
        flex-direction:column
    }
}

#section-camera .scroll-box-row.first .text {
    align-items: flex-start
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.first .text {
        top:calc(((100vh + 61px - 12.3958vw) / 2));
        top: calc((((100 * var(--vh, 1vh)) + 61px - 12.3958vw) / 2));
        height: 16.6667vw
    }
}

#section-camera .scroll-box-row.first .img {
    position: relative
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.first .img {
        margin-top:6.25vw;
        height: calc(35.5729vw + 10.7292vw)
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.first .img img {
        visibility:hidden
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.first .img img {
        display:none
    }
}

#section-camera .scroll-box-row.first .img .nav-anchor.g--pt-hidden {
    position: absolute
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.first .img .nav-anchor.g--pt-hidden {
        margin-top:-90px
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.first .img-text {
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.first .img-text {
        margin-top:5.556vw
    }
}

#section-camera .scroll-box-row.second {
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.second {
        margin-top:-35.5729vw
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.second {
        height:200vh;
        height: calc(200 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.second {
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.second {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.second .img {
        position:-webkit-sticky;
        position: sticky;
        margin-top: 0
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.second .img {
        top:calc((100vh - 61px - 35.5729vw) / 2 + 61px);
        top: calc(((100 * var(--vh, 1vh)) - 61px - 35.5729vw) / 2 + 61px)
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.second .text {
        position:absolute
    }
}

@media (min-width: 1024px) {
    #section-camera .scroll-box-row.second .text {
        margin-top:calc(200vh - 36.9792vw);
        margin-top: calc((200 * var(--vh, 1vh)) - 36.9792vw)
    }
}

@media (max-width: 1023px) {
    #section-camera .scroll-box-row.third .text .title {
        width:80%
    }
}

#section-camera .img-text-wrapper {
    display: flex;
    justify-content: space-between
}

@media (min-width: 1024px) {
    #section-camera .img-text-wrapper {
        margin-top:9.1146vw
    }
}

@media (max-width: 1023px) {
    #section-camera .img-text-wrapper {
        flex-direction:column-reverse
    }
}

@media (max-width: 1023px) {
    #section-camera .img-text-wrapper {
        margin-top:25vw;
        padding: 0 5.556vw
    }
}

#section-camera .img-text-wrapper .img {
}

@media (min-width: 1024px) {
    #section-camera .img-text-wrapper .img {
        flex:0 0 55.8333vw;
        margin-left: 4.1667vw;
        border-radius: 1.8229vw;
        width: 55.8333vw;
        height: 40.5208vw
    }
}

@media (max-width: 1023px) {
    #section-camera .img-text-wrapper .img {
        object-fit:cover
    }
}

@media (max-width: 1023px) {
    #section-camera .img-text-wrapper .img {
        margin-top:11.111vw;
        border-radius: 2.778vw;
        width: 88.889vw;
        height: 64.444vw
    }
}

#section-camera .img-text-wrapper .text {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center
}

#section-camera .story-box {
    position: relative;
    height: 118vh;
    height: calc(118 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    #section-camera .story-box {
        margin-top:11.6146vw
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box {
        height:auto
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box {
        margin-top:25vw
    }
}

#section-camera .story-box .text {
    z-index: 2
}

@media (min-width: 1024px) {
    #section-camera .story-box .text {
        margin-left:15.3125vw;
        margin-top: 14.5833vw;
        width: 28.5938vw
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .text {
        position:absolute
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .text {
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .text {
        width:88.889vw
    }
}

#section-camera .story-box .text .title {
}

@media (max-width: 1023px) {
    #section-camera .story-box .text .title {
        width:50vw
    }
}

#section-camera .story-box .sticky-item {
    z-index: 1;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    width: 100%
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item {
        padding:0 5.556vw
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item {
        top:calc(((100vh - 41.25vw + 60px) / 2));
        top: calc((((100 * var(--vh, 1vh)) - 41.25vw + 60px) / 2))
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item {
        position:-webkit-sticky;
        position: sticky
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item {
        overflow:hidden;
        height: auto
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item {
        top:calc(50px + 13.889vw)
    }
}

#section-camera .story-box .sticky-item .phone-wrapper0 {
    position: absolute
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 {
        right:19.7917vw;
        border-radius: 2.0833vw;
        width: 19.2708vw;
        height: 41.25vw
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 {
        transform-origin:50% 65%
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 {
        position:relative;
        transform-origin: 0 50%
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 {
        margin:11.111vw auto 0;
        border-radius: 8.333vw;
        width: 77.778vw;
        height: 166.667vw
    }
}

#section-camera .story-box .sticky-item .phone-wrapper0 .phone-border {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper {
    overflow: hidden;
    position: absolute;
    z-index: 0;
    top: 1%;
    left: 1.5%;
    width: 97%;
    height: 98%
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper {
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper {
        border-radius:2.0833vw
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrappe0r .dual-video-wrapper {
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper {
        border-radius:8.333vw
    }
}

#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 50%
}

#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-top,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-top {
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-top,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-top {
        border-top-left-radius:2.0833vw;
        border-top-right-radius: 2.0833vw
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-top,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-top {
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-top,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-top {
        border-top-left-radius:8.333vw;
        border-top-right-radius: 8.333vw
    }
}

#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-bottom,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-bottom {
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-bottom,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-bottom {
        border-bottom-left-radius:2.0833vw;
        border-bottom-right-radius: 2.0833vw
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-bottom,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-bottom {
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top.video-bottom,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom.video-bottom {
        border-bottom-left-radius:8.333vw;
        border-bottom-right-radius: 8.333vw
    }
}

#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video {
    object-fit: cover;
    transition: .3s
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video {
        width:26.0417vw;
        height: 26.0417vw
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video {
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video {
        transform:translate(-3.6458vw,-2.8646vw);
        transform-origin: 9.375vw 10.1563vw
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video {
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video {
        width:83.333vw;
        height: 83.333vw;
        transform-origin: 43.056vw 46.389vw
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video.rotate,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video.rotate {
    }
}

@media (min-width: 1024px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video.rotate,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video.rotate {
        transform:rotate(90deg) translate(-3.6458vw,-2.8646vw)
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video.rotate,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video.rotate {
    }
}

@media (max-width: 1023px) {
    #section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-top .video.rotate,#section-camera .story-box .sticky-item .phone-wrapper0 .dual-video-wrapper .video-bottom .video.rotate {
        transform:rotate(90deg) translate(-19.444vw,-16.111vw)
    }
}

#section-camera .wide-open-container {
    height: 200vh;
    height: calc(200 * var(--vh, 1vh));
    will-change: opacity
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container {
        margin-top:-7.8125vw
    }
}

@media (max-width: 1023px) {
    #section-camera .wide-open-container {
        height:auto
    }
}

@media (max-width: 1023px) {
    #section-camera .wide-open-container {
        margin-top:25vw;
        padding: 0 5.556vw
    }
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item {
        position:-webkit-sticky;
        position: sticky;
        width: 100%;
        height: 100vh;
        height: calc(100 * var(--vh, 1vh))
    }
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item .title-desc-wrapper {
        position:absolute
    }
}

@media (max-width: 1023px) {
    #section-camera .wide-open-container .sticky-item .title-desc-wrapper {
        position:relative
    }
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item img,#section-camera .wide-open-container .sticky-item .text-bg {
        position:absolute
    }
}

#section-camera .wide-open-container .sticky-item img {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

@media (max-width: 1023px) {
    #section-camera .wide-open-container .sticky-item img {
        position:relative;
        transform-origin: 50% 30%
    }
}

@media (max-width: 1023px) {
    #section-camera .wide-open-container .sticky-item img {
        margin-top:11.111vw;
        border-radius: 2.778vw;
        width: 88.889vw;
        height: 118.333vw
    }
}

#section-camera .wide-open-container .sticky-item .mask {
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(180deg,transparent 0,#000 100%);
    transform: translateY(100%);
    transition: .5s
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item .mask {
        height:20.2604vw
    }
}

#section-camera .wide-open-container .sticky-item .mask.show {
    transform: translateY(0)
}

#section-camera .wide-open-container .sticky-item .text-bg {
    display: none
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item .text-bg {
        z-index:3;
        bottom: 0;
        right: 0;
        background: #000;
        transition: .8s
    }
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item .text-bg {
        width:38.0208vw;
        height: 15.625vw;
        transform: translateY(15.625vw)
    }
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item .text-bg.show {
        transform:translateY(0)
    }
}

#section-camera .wide-open-container .sticky-item .title-desc-wrapper {
    z-index: 5;
    transition: .8s
}

@media (min-width: 1024px) {
    #section-camera .wide-open-container .sticky-item .title-desc-wrapper {
        bottom:4.1667vw;
        right: 6.6667vw;
        transform: translateY(15.625vw)
    }
}

#section-camera .wide-open-container .sticky-item .title-desc-wrapper .desc {
    color: #fff
}

#section-camera .wide-open-container .sticky-item .title-desc-wrapper.show {
    transform: translateY(0)
}

#section-camera .leave-home-text {
}

@media (min-width: 1024px) {
    #section-camera .leave-home-text {
        margin:12.3438vw auto 0;
        width: 60.7813vw
    }
}

@media (max-width: 1023px) {
    #section-camera .leave-home-text {
        display:flex;
        flex-direction: column
    }
}

@media (max-width: 1023px) {
    #section-camera .leave-home-text {
        margin-top:25vw;
        padding: 0 5.556vw
    }
}

#section-camera .leave-home-text .title {
}

@media (min-width: 1024px) {
    #section-camera .leave-home-text .title {
        flex:0 0 24.1667vw;
        width: 24.1667vw
    }
}

#section-camera .leave-home-text .desc {
    flex: 1
}

@media (min-width: 1024px) {
    #section-camera .leave-home-text .desc {
        margin-left:4.0625vw
    }
}

#section-camera .cards-sights {
}

@media (min-width: 1024px) {
    #section-camera .cards-sights {
        margin-top:4.2708vw;
        height: 37.2917vw
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-sights {
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-sights {
        margin-top:11.111vw
    }
}

#section-camera .cards-sights .card {
}

@media (min-width: 1024px) {
    #section-camera .cards-sights .card {
        width:20.625vw;
        height: 27.5vw;
        margin-left: -10.3125vw
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-sights .card {
    }
}

@media (max-width: 1023px) {
    #section-camera .cards-sights .card {
        width:69.444vw;
        height: 92.778vw
    }
}

#section-camera .quiet-container {
}

@media (min-width: 1024px) {
    #section-camera .quiet-container {
        margin-top:10.4167vw
    }
}

#section-camera .quiet-container .title-desc {
    width: 100%
}

@media (max-width: 1023px) {
    #section-camera .quiet-container .title-desc {
    }
}

@media (max-width: 1023px) {
    #section-camera .quiet-container .title-desc {
        padding:0 5.556vw
    }
}

#section-camera .quiet-container .title-desc .title {
}

@media (min-width: 1024px) {
    #section-camera .quiet-container .title-desc .title {
        flex:0 0 25.9896vw;
        width: 25.9896vw;
        margin-right: 5.1042vw
    }
}

#section-camera .quiet-container .img-wrapper {
    position: relative;
    cursor: pointer
}

#section-camera .quiet-container .img-wrapper .img {
    width: 100%
}

@media (min-width: 1024px) {
    #section-camera .quiet-container .img-wrapper .img {
        margin-top:3.6458vw;
        height: 36.5625vw
    }
}

@media (max-width: 1023px) {
    #section-camera .quiet-container .img-wrapper .img {
    }
}

@media (max-width: 1023px) {
    #section-camera .quiet-container .img-wrapper .img {
        margin-top:11.111vw;
        width: 100vw;
        height: 59.444vw
    }
}

#section-camera .quiet-container .img-wrapper .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

@media (min-width: 1024px) {
    #section-camera .quiet-container .img-wrapper .play-btn {
        width:5.7813vw;
        height: 5.7813vw
    }
}

@media (max-width: 1023px) {
    #section-camera .quiet-container .img-wrapper .play-btn {
    }
}

@media (max-width: 1023px) {
    #section-camera .quiet-container .img-wrapper .play-btn {
        width:16.667vw;
        height: 16.667vw
    }
}

#section-camera .youtube-modal {
    display: none
}

.popup-img-container .g--video-wrapper {
    margin-top: 0
}

.popup-img-container .g--video-wrapper img {
    margin: 0 auto
}

@media (min-width: 1024px) {
    .popup-img-container .g--video-wrapper img {
        height:calc(100vh - 5.7292vw);
        height: calc((100 * var(--vh, 1vh)) - 5.7292vw)
    }
}

@media (max-width: 1023px) {
    .popup-img-container .g--video-wrapper img {
        width:90%
    }
}

.popup-img-container .g--popup-close,.popup-video-container .g--popup-close {
    position: fixed
}

@media (min-width: 1024px) {
    .popup-img-container .g--popup-close,.popup-video-container .g--popup-close {
    }
}

@media (min-width: 1024px) {
    .popup-img-container .g--popup-close,.popup-video-container .g--popup-close {
        top:2.7604vw;
        right: 2.8646vw
    }
}

@media (max-width: 1023px) {
    .popup-img-container .g--popup-close,.popup-video-container .g--popup-close {
    }
}

@media (max-width: 1023px) {
    .popup-img-container .g--popup-close,.popup-video-container .g--popup-close {
        top:3.333vw;
        right: 5.556vw
    }
}

.youtube-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%
}

@media (min-width: 1024px) {
    .youtube-modal .video {
        height:80vh;
        height: calc(80 * var(--vh, 1vh));
        width: 142.22222222222223vh;
        width: calc(142.22222222222223 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    .youtube-modal .video {
        width:100vw;
        height: 56.25vw
    }
}

.youtube-modal .close {
    position: absolute;
    z-index: 10;
    cursor: pointer
}

@media (min-width: 1024px) {
    .youtube-modal .close {
    }
}

@media (min-width: 1024px) {
    .youtube-modal .close {
        top:2.7604vw;
        right: 2.8646vw;
        width: 2.8125vw;
        height: 2.8125vw
    }
}

@media (max-width: 1023px) {
    .youtube-modal .close {
    }
}

@media (max-width: 1023px) {
    .youtube-modal .close {
        top:3.333vw;
        right: 5.556vw;
        width: 6.667vw;
        height: 6.667vw
    }
}

/*--- pac-man ----*/
#section-pacman {
    position: relative;
    z-index: 2
}

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

#section-pacman .youtube-modal {
    display: none
}

#section-pacman .play {
    position: absolute;
    pointer-events: none;
    transform: translate(-50%,-50%)
}

@media (max-width: 1023px) {
    #section-pacman .play {
        width:11.111vw;
        height: 11.111vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .play {
        width:7.3438vw;
        height: 7.3438vw
    }
}

#section-pacman .play.active {
    pointer-events: auto
}

@media (max-width: 1023px) {
    #section-pacman .play {
    }
}

@media (max-width: 1023px) {
    #section-pacman .play {
        left:50vw;
        top: 26.389vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .play {
        top:50%;
        left: 50%
    }
}

#section-pacman .text .desc {
    color: #b3b3b3
}

@media (min-width: 1024px) {
    #section-pacman .text .desc {
        margin-top:2.0833vw
    }
}

#section-pacman .title {
    color: #ffd800
}

#section-pacman .h2 .title,#section-pacman .h3 .title {
    opacity: .8
}

#section-pacman .part-1 .glitch-title {
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .glitch-title {
        /* width:31.25vw removed */
        width:39.25vw;
        font-size: 4.95vw;
    }
}

#section-pacman .part-1 .sticky-container {
    height: 220vh;
    height: calc(220 * var(--vh, 1vh))
}

#section-pacman .part-1 .sticky-container .sticky {
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    top: 0
}

@media (max-width: 1023px) {
    #section-pacman .part-1 .sticky-container .sticky {
        min-height:100vh;
        min-height: calc(100 * var(--vh, 1vh));
        overflow: hidden
    }
}

#section-pacman .part-1 .sticky-container .cover {
    z-index: 1;
    width: 100%;
    height: 40%;
    top: 0;
    pointer-events: none;
    background: linear-gradient(180deg,#000 0,rgba(0,0,0,0) 100%)
}

#section-pacman .part-1 .sticky-container .text {
    z-index: 2;
    display: flex;
    pointer-events: none
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .sticky-container .text {
        left:8.4896vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .sticky-container .text {
        top:60px
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-1 .sticky-container .text {
        transform:translateX(-50%);
        left: 50%;
        flex-direction: column
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-1 .sticky-container .text {
        top:30.556vw
    }
}

#section-pacman .part-1 .sticky-container .text .desc {
    line-height: 1.17;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .sticky-container .text .desc {
        width:24.9479vw !important;
        /* margin-left: 8.75vw; removed */
        margin-left: 4.75vw;
        font-size: 1.25vw
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-1 .sticky-container .text .desc {
        line-height:1.43;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-1 .sticky-container .text .desc {
        margin-top:5.556vw;
        font-size: 3.889vw
    }
}

#section-pacman .part-1 .sticky-container .scale-wrapper {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    cursor: pointer
}

#section-pacman .part-1 .sticky-container .scale-wrapper canvas {
    transform-origin: top
}

#section-pacman .part-1 .sticky-container .scale-wrapper .screen {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .sticky-container .scale-wrapper .screen {
        overflow:hidden
    }
}

#section-pacman .part-1 .sticky-container .scale-wrapper #canvasPlayer {
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    transform-origin: top
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .sticky-container .scale-wrapper #canvasPlayer {
        width:60vw;
        height: 35.6771vw
    }
}

#section-pacman .part-1 .title {
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .title {
        width:34.3229vw
    }
}

#section-pacman .part-1 .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-1 .desc {
        width:24.9479vw
    }
}

#section-pacman .part-2 {
}

@media (max-width: 1023px) {
    #section-pacman .part-2 {
        margin-bottom:15.556vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 {
        margin-left:8.4896vw;
        margin-bottom: 12.5vw
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-2 {
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-2 {
        margin-top:calc(-100vh + 77.778vw + 25vw);
        margin-top: calc((-100 * var(--vh, 1vh)) + 77.778vw + 25vw)
    }
}

#section-pacman .part-2 .sticky-container {
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .sticky-container {
        height:calc(32.3958vw + 35.625vw + 11.25vw)
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-2 .sticky-container {
        height:130vh;
        height: calc(130 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-2 .sticky-container .sticky {
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-2 .sticky-container .sticky {
        top:calc(50vh - (103.333vw / 2));
        top: calc((50 * var(--vh, 1vh)) - (103.333vw / 2))
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .sticky-container .sticky {
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .sticky-container .sticky {
        top:calc(50vh - (35.625vw / 2));
        top: calc((50 * var(--vh, 1vh)) - (35.625vw / 2))
    }
}

#section-pacman .part-2 .text-list {
}

@media (max-width: 1023px) {
    #section-pacman .part-2 .text-list {
        margin-bottom:8.889vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list {
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list {
        margin-top:calc(-17.8125vw)
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t1 {
        transform:translateY(-50%)
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-2 .text-list .t1 {
        position:absolute;
        top: 0
    }
}

#section-pacman .part-2 .text-list .t1 .title {
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t1 .title {
        width:31.6146vw
    }
}

#section-pacman .part-2 .text-list .t1 .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t1 .desc {
        width:23.5417vw
    }
}

#section-pacman .part-2 .text-list .t2 {
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t2 {
        margin-top:16.1979vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t2 {
        transform:translateY(-50%)
    }
}

#section-pacman .part-2 .text-list .t2 .title {
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t2 .title {
        width:23.5417vw
    }
}

#section-pacman .part-2 .text-list .t2 .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .text-list .t2 .desc {
        width:27.4479vw
    }
}

#section-pacman .part-2 .img-text-container {
    display: flex;
    flex-direction: column
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .img-text-container {
        width:85.5208vw
    }
}

#section-pacman .part-2 .img-wrapper {
    align-self: flex-end;
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-pacman .part-2 .img-wrapper {
        width:88.889vw;
        height: 60vw;
        border-radius: 3.333vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-2 .img-wrapper {
        width:52.7083vw;
        height: 35.625vw;
        border-radius: 1.8229vw
    }
}

#section-pacman .part-2 .img-wrapper .before {
    top: 0;
    left: 0;
    width: 101%;
    height: 100%
}

#section-pacman .part-2 .img-wrapper .after {
    left: 0;
    top: 0;
    width: 101%;
    height: 100%
}

#section-pacman .part-3 {
}

@media (max-width: 1023px) {
    #section-pacman .part-3 {
        margin-bottom:25vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 {
        margin-left:20.4167vw
    }
}

#section-pacman .part-3 .whats-box-title {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .whats-box-title {
        width:68.4375vw
    }
}

#section-pacman .part-3 .whats-box-text {
    color: #b3b3b3
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .whats-box-text {
        margin-top:2.0833vw;
        margin-bottom: 7.2917vw;
        width: 23.4896vw
    }
}

#section-pacman .part-3 .main-container .text {
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .main-container .text {
        margin-top:16.667vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .main-container .text {
        margin-bottom:8.3333vw
    }
}

#section-pacman .part-3 .main-container .text .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .main-container .text .desc {
        width:23.4896vw;
        margin-top: 2.0833vw
    }
}

#section-pacman .part-3 .main-container .main-img {
    border-radius: 30px
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .main-container .main-img {
        margin-top:3.333vw;
        width: 88.889vw;
        height: 59.167vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .main-container .main-img {
        width:59.7917vw;
        height: 35.8333vw
    }
}

#section-pacman .part-3 .sec-container {
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container {
        margin-top:16.667vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container {
        margin-top:4.1667vw
    }
}

#section-pacman .part-3 .sec-container .h2 .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .h2 .desc {
        width:32.5vw
    }
}

#section-pacman .part-3 .sec-container .c-1 {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .c-1 {
        margin-bottom:8.3333vw;
        margin-top: 4.0104vw
    }
}

#section-pacman .part-3 .sec-container .c-1 .title {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .c-1 .title {
        width:17.2396vw
    }
}

#section-pacman .part-3 .sec-container .c-1 .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .c-1 .desc {
        width:22.0833vw
    }
}

#section-pacman .part-3 .sec-container .c-2 {
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container .c-2 {
        margin-top:16.667vw
    }
}

#section-pacman .part-3 .sec-container .c-2 .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .c-2 .desc {
        width:23.0208vw
    }
}

#section-pacman .part-3 .sec-container .img-text-container {
    display: flex;
    align-items: center
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container .img-text-container {
        flex-direction:column-reverse
    }
}

#section-pacman .part-3 .sec-container .img-text-container .phone-wrapper0 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .img-text-container .phone-wrapper0 {
        width:11.4063vw;
        height: 24.3229vw;
        border-radius: 0.7292vw
    }
}

#section-pacman .part-3 .sec-container .img-text-container .img,#section-pacman .part-3 .sec-container .img-text-container .video-wrapper {
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container .img-text-container .img,#section-pacman .part-3 .sec-container .img-text-container .video-wrapper {
        width:88.889vw;
        height: 56.944vw;
        border-radius: 3.333vw;
        margin-top: 6.667vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .img-text-container .img,#section-pacman .part-3 .sec-container .img-text-container .video-wrapper {
        width:40vw;
        height: 25.5729vw;
        border-radius: 1.8229vw;
        margin-right: 1.9271vw
    }
}

#section-pacman .part-3 .sec-container .img-text-container .video-wrapper {
    position: relative;
    background: #e3e3e3;
    display: flex
}

#section-pacman .part-3 .sec-container .img-text-container .video-wrapper .p-w {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2
}

#section-pacman .part-3 .sec-container .img-text-container .video-wrapper .video {
    z-index: 1
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container .img-text-container .video-wrapper .video {
        width:42.778vw;
        height: 91.111vw;
        border-radius: 3.889vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .img-text-container .video-wrapper .video {
        width:10.5208vw;
        height: 24.2708vw;
        border-radius: 1.5625vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .img-text-container .video-wrapper .video {
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-3 .sec-container .img-text-container .video-wrapper .video {
        transform:translateY(-0.1302vw)
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container .img-text-container .video-wrapper .video {
        transform:scale(.975)
    }
}

#section-pacman .part-3 .sec-container .c-2 .video-wrapper {
}

@media (max-width: 1023px) {
    #section-pacman .part-3 .sec-container .c-2 .video-wrapper {
        height:100vw
    }
}

#section-pacman .part-4 {
}

@media (min-width: 1024px) {
    #section-pacman .part-4 {
        margin-top:12.5vw
    }
}

#section-pacman .part-4 .glitch-title {
}

@media (max-width: 1023px) {
    #section-pacman .part-4 .glitch-title {
        font-size: 12.5vw;
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .glitch-title {
        /* width:41.6667vw removed */
        width:39.6667vw
    }
}

#section-pacman .part-4 .drag-card-wrapper {
}

@media (max-width: 1023px) {
    #section-pacman .part-4 .drag-card-wrapper {
        margin-top:6.667vw
    }
}

#section-pacman .part-4 .text {
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .text {
        margin-left:20.4167vw;
        margin-bottom: 8.3333vw
    }
}

#section-pacman .part-4 .text .title {
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .text .title {
        width:30.9896vw
    }
}

#section-pacman .part-4 .text .desc {
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .text .desc {
        width:30.9896vw
    }
}

#section-pacman .part-4 .drag-card-wrapper {
    width: 100%;
    overflow: hidden
}

#section-pacman .part-4 .cards {
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .cards {
        height:36.9792vw;
        margin-top: 7.6563vw
    }
}

#section-pacman .part-4 .cards .plus-wrapper,#section-pacman .part-4 .cards .highlight-detail {
    background: #343434
}

#section-pacman .part-4 .cards .highlight-text {
    background: #ffd800
}

@media (max-width: 1023px) {
    #section-pacman .part-4 .cards {
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-4 .cards {
        margin-top:13.056vw;
        height: 117.5vw
    }
}

#section-pacman .part-4 .cards .tip {
    opacity: .6
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .cards .tip {
        bottom:2.6042vw
    }
}

#section-pacman .part-4 .cards .card {
}

@media (min-width: 1024px) {
    #section-pacman .part-4 .cards .card {
        margin-left:-10.4167vw;
        width: 20.8333vw;
        height: 27.5vw
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-4 .cards .card {
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-4 .cards .card {
        margin-left:-34.722vw;
        width: 69.444vw;
        height: 92.778vw
    }
}

#section-pacman .part-5 {
    z-index: 2;
    poistion: relative
}

@media (min-width: 1024px) {
    #section-pacman .part-5 {
        padding-top:8.3333vw
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-5 {
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-5 {
        margin-top:calc(41.667vw)
    }
}

#section-pacman .part-5 .fade-out {
    position: relative;
    z-index: 2
}

#section-pacman .part-5 .fade-out.not-click {
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none
}

#section-pacman .part-5 .title-wrapper {
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .title-wrapper {
        width:68.333vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .title-wrapper {
        /* margin-left:20vw */
        margin:0 15vw
    }
}

#section-pacman .part-5 .title {
    line-height: 1.21;
    letter-spacing: 0;
    line-height: 1;
    letter-spacing: 0;
    opacity: .8
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .title {
        font-size:7.778vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .title {
        font-size:3.125vw
    }
}

#section-pacman .part-5 .title.title-ul {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 2px
}

#section-pacman .part-5 .mask {
    background: #000;
    z-index: -1
}

#section-pacman .part-5 .sticky-container {
    height: 200vh;
    height: calc(200 * var(--vh, 1vh))
}

#section-pacman .part-5 .sticky-container .sticky {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .sticky-container .sticky {
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .sticky-container .sticky {
        top:calc(50vh - 10.4167vw / 2);
        top: calc((50 * var(--vh, 1vh)) - 10.4167vw / 2)
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .sticky-container .sticky {
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .sticky-container .sticky {
        top:calc(50vh - 76.111vw / 2 + 50px);
        top: calc((50 * var(--vh, 1vh)) - 76.111vw / 2 + 50px)
    }
}

#section-pacman .part-5 .wrapper {
    position: relative
}

#section-pacman .part-5 .img-wrapper {
    position: relative;
    z-index: 1
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .img-wrapper {
        margin-top:11.111vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .img-wrapper {
        margin-top:8.3333vw
    }
}

#section-pacman .part-5 .img-wrapper img {
    margin-left: auto;
    margin-right: auto
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .img-wrapper img {
        width:88.889vw;
        height: 20.972vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .img-wrapper img {
        width:40.4167vw;
        height: 9.4792vw
    }
}

#section-pacman .part-5 .text {
    text-align: center;
    line-height: 1.17;
    letter-spacing: 0;
    line-height: 1.23;
    letter-spacing: 0;
    z-index: 0;
    margin: 0 auto
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .text {
        font-size:3.611vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .text {
        width:33.0729vw;
        font-size: 1.25vw
    }
}

@media (min-width: 1024px) {
    #section-pacman .part-5 .text {
        margin-top:50vh;
        margin-top: calc(50 * var(--vh, 1vh))
    }
}

@media (max-width: 1023px) {
    #section-pacman .part-5 .text {
        margin-top:-20vh;
        margin-top: calc(-20 * var(--vh, 1vh))
    }
}

.part5-modal {
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 8%
}

@media (min-width: 1024px) {
    .part5-modal {
        padding-top:6.3021vw
    }
}

@media (max-width: 1023px) {
    .part5-modal {
        overflow-y:auto
    }
}

.part5-modal .modal-content {
    align-self: flex-start;
    background-color: #000;
}

@media (max-width: 1023px) {
    .part5-modal .modal-content {
        padding-bottom:17.778vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-content {
        margin-top:1.875vw;
        margin-bottom: 4.375vw;
        margin-left: 5.2083vw
    }
}

.part5-modal .modal-content .main-text {
}

@media (max-width: 1023px) {
    .part5-modal .modal-content .main-text {
        margin-bottom:6.667vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-content {
        display:flex;
        flex-direction: column
    }
}

@media (max-width: 1023px) {
    .part5-modal {
        flex-direction:column
    }
}

@media (max-width: 1023px) {
    .part5-modal .bg {
        width:100%
    }
}

@media (max-width: 1023px) {
    .part5-modal .bg {
        height:94.444vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .bg {
        z-index:0
    }
}

@media (min-width: 1024px) {
    .part5-modal .bg {
        width:55.1562vw;
        height: 41.0938vw;
        margin-left: 5.9896vw
    }
}

.part5-modal .close {
    z-index: 1;
    cursor: pointer
}

@media (max-width: 1023px) {
    .part5-modal .close {
        width:5.556vw;
        height: 5.556vw;
        top: 4.444vw;
        right: 4.444vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .close {
        right:3.8021vw;
        top: 2.7604vw;
        width: 2.7083vw;
        height: 2.7083vw
    }
}

.part5-modal .modal-text-wrapper {
}

@media (max-width: 1023px) {
    .part5-modal .modal-text-wrapper {
        margin-top:8.889vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-text-wrapper {
        width:26.4583vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-text-wrapper {
        display:flex;
        flex-direction: column
    }
}

.part5-modal .modal-text-wrapper .ps {
    line-height: 1.2;
    letter-spacing: 0;
    line-height: 1.67;
    letter-spacing: 0
}

@media (max-width: 1023px) {
    .part5-modal .modal-text-wrapper .ps {
        font-size:3.333vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-text-wrapper .ps {
        font-size:0.9375vw
    }
}

.part5-modal .modal-text-wrapper .ps.first {
}

@media (max-width: 1023px) {
    .part5-modal .modal-text-wrapper .ps.first {
        margin-top:16.667vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-text-wrapper .ps.first {
        margin-top:5.2083vw
    }
}

.part5-modal .modal-text-wrapper .ps.sec {
}

@media (max-width: 1023px) {
    .part5-modal .modal-text-wrapper .ps.sec {
        margin-top:5.556vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .modal-text-wrapper .ps.sec {
        margin-top:1.5625vw
    }
}

.part5-modal .modal {
    width: 100%
}

@media (min-width: 1024px) {
    .part5-modal .modal {
        padding:0 3.2813vw
    }
}

.part5-modal .modal-bottom {
    z-index: 1;
    width: 100%;
    left: 0
}

@media (min-width: 1024px) {
    .part5-modal .modal-bottom {
        padding-left:3.2813vw;
        padding-right: 3.2813vw
    }
}

@media (max-width: 1023px) {
    .part5-modal .modal-bottom {
        bottom:10%
    }
}

.part5-modal .line {
    height: 1px;
    background: #ffd800
}

@media (min-width: 1024px) {
    .part5-modal .line {
        margin-bottom:0.0521vw
    }
}

@media (min-width: 1024px) {
    .part5-modal .line {
        position:absolute
    }
}

@media (min-width: 1024px) {
    .part5-modal .line {
        left:3.2813vw;
        width: calc(100vw - 3.2813vw * 2)
    }
}

@media (max-width: 1023px) {
    .part5-modal .line {
        width:100%;
        position: absolute
    }
}

@media (max-width: 1023px) {
    .part5-modal .line {
        bottom:8.889vw
    }
}

@media (max-width: 1023px) {
    .part5-modal .bg-wrapper {
        z-index:0;
        position: relative
    }
}

.part5-modal .gray {
    color: #b3b3b3
}

.part5-modal .gray.last {
}

@media (max-width: 1023px) {
    .part5-modal .gray.last {
        margin-bottom:6.111vw
    }
}

@media (min-width: 1024px) {
    .pacman-pop .g--popup-close {
    }
}

@media (min-width: 1024px) {
    .pacman-pop .g--popup-close {
        top:2.7604vw;
        right: 2.8646vw;
        width: 2.8125vw;
        height: 2.8125vw
    }
}

@media (max-width: 1023px) {
    .pacman-pop .g--popup-close {
    }
}

@media (max-width: 1023px) {
    .pacman-pop .g--popup-close {
        top:3.333vw;
        right: 5.556vw;
        width: 6.667vw;
        height: 6.667vw
    }
}
/*--- pac-man ----*/

#section-chip {
    position: relative;
    z-index: 3
}

#section-chip .chip-container {
}

@media (max-width: 1023px) {
    #section-chip .chip-container {
        padding-top:35.556vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container {
        padding-top:7.1875vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord {
        display:flex;
        flex-direction: column
    }
}

#section-chip .chip-container .nord .new-level {
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

#section-chip .chip-container .nord .new-level .title {
    line-height: 1.01;
    letter-spacing: 0
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .new-level .title {
        margin-left:5.556vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .new-level .title {
        margin-left:4.0625vw;
        font-size: 6.1458vw
    }
}

#section-chip .chip-container .nord .new-level .desc {
    line-height: 1.17;
    letter-spacing: 0;
    color: #787777
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .new-level .desc {
        margin-top:2.5vw;
        width: 29.8438vw;
        font-size: 1.25vw
    }
}

#section-chip .chip-container .nord .middle-wrapper {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .middle-wrapper {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .middle-wrapper {
        margin-top:7.6042vw;
        margin-left: 20vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .middle-wrapper .g--circle {
        z-index:2
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .middle-wrapper .g--circle {
        right:5.556vw;
        top: -12.5vw
    }
}

#section-chip .chip-container .nord .middle-wrapper .video-wrapper {
    width: 100%;
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .middle-wrapper .video-wrapper {
        height:111.111vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .middle-wrapper .video-wrapper {
        width:60vw;
        height: 33.2813vw;
        border-radius: 1.8229vw
    }
}

#section-chip .chip-container .nord .middle-wrapper .video-wrapper .video {
    object-fit: cover;
    width: 100%;
    height: 100%
}

#section-chip .chip-container .nord .warp {
    position: relative;
    display: flex;
    flex-direction: column
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .warp {
        margin-top:11.111vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .warp {
        margin-left:20vw;
        margin-top: 2.7604vw
    }
}

#section-chip .chip-container .nord .warp .title {
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .warp .title {
        width:34.2188vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .warp .g--circle {
        top:0
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .warp .g--circle {
        left:50.2083vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .warp .g--circle {
        bottom:-70%;
        right: 0
    }
}

#section-chip .chip-container .nord .warp .title {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .warp .title {
        margin-bottom:5.556vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .nord .warp .title {
        line-height:1.21;
        font-size: 28px
    }
}

#section-chip .chip-container .nord .warp .desc {
    color: #787777;
    line-height: 1.17;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    #section-chip .chip-container .nord .warp .desc {
        width:31.8229vw;
        margin-top: 1.1979vw;
        font-size: 1.25vw
    }
}

#section-chip .chip-container .dimension {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension {
        margin-top:11.875vw
    }
}

#section-chip .chip-container .dimension .sticky-container {
    height: 220vh;
    height: calc(220 * var(--vh, 1vh))
}

#section-chip .chip-container .dimension .sticky-container .sticky {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .sticky {
        padding-top:8.889vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .sticky {
        min-height:100vh;
        min-height: calc(100 * var(--vh, 1vh));
        overflow: hidden
    }
}

#section-chip .chip-container .dimension .sticky-container .title {
    color: #fff
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .title {
        width:58.611vw;
        margin-left: 5.556vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container .title {
        top:4.0625vw;
        width: 23.125vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container .title {
        position:absolute
    }
}

#section-chip .chip-container .dimension .sticky-container .scale-wrapper {
    z-index: -1;
    width: 100%;
    display: flex;
    flex-direction: column
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .scale-wrapper {
        position:absolute;
        top: 0;
        left: 0;
        min-height: 100vh;
        min-height: calc(100 * var(--vh, 1vh))
    }
}

#section-chip .chip-container .dimension .sticky-container .screen {
    width: 100%;
    height: 100vh;
    height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container .screen {
        overflow:hidden
    }
}

#section-chip .chip-container .dimension .sticky-container #canvasPlayer {
    z-index: -1;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container #canvasPlayer {
        width:60vw;
        height: 35.6771vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container #canvasPlayer {
        width:100%;
        height: 100vh;
        height: calc(100 * var(--vh, 1vh))
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container #canvasPlayer {
        transform-origin:top
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container #canvasPlayer {
        transform-origin:top
    }
}

#section-chip .chip-container .dimension .sticky-container .desc {
    position: relative;
    color: #787777
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .desc {
        margin-top:calc(83.889vw + 90px)
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container .desc {
        margin-top:calc(60px + 35.6771vw + 2.4479vw);
        width: 29.7917vw
    }
}

#section-chip .chip-container .dimension .sticky-container .desc p:first-child {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .desc p:first-child {
        margin-bottom:5.556vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container .desc p:first-child {
        margin-bottom:1.4583vw
    }
}

#section-chip .chip-container .dimension .sticky-container .g--circle {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .dimension .sticky-container .g--circle {
        right:11.111vw;
        top: calc(72.222vw + 90px)
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .dimension .sticky-container .g--circle {
        top:calc(37.3438vw + 60px);
        right: 21.6531vw
    }
}

#section-chip .chip-container .alive {
    background: #fff
}

@media (max-width: 1023px) {
    #section-chip .chip-container .alive {
        margin-top:13.889vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive {
        margin-top:12.0313vw
    }
}

#section-chip .chip-container .alive .top-text {
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text {
        margin-bottom:3.0729vw
    }
}

#section-chip .chip-container .alive .top-text .alive-text {
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text .alive-text {
        width:55.1042vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text .alive-text {
        display:flex
    }

    #section-chip .chip-container .alive .top-text .alive-text .title {
        flex: 0 0 auto
    }

    #section-chip .chip-container .alive .top-text .alive-text .desc {
        flex: 1 1 0%
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text .alive-text .title {
        max-width:20.8333vw
    }
}

#section-chip .chip-container .alive .top-text .g--circle {
    z-index: 10
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text .g--circle {
        top:0
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text .g--circle {
        right:18.2813vw
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .alive .top-text .text-container {
        flex-direction:column
    }
}

#section-chip .chip-container .alive .top-text .text-container .desc {
    color: #787777
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .top-text .text-container .desc {
        margin-left:8.8021vw
    }
}

#section-chip .chip-container .alive .sticky-container {
    z-index: 3
}

@media (max-width: 1023px) {
    #section-chip .chip-container .alive .sticky-container {
        padding-bottom:35.556vw
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .sticky-container {
        margin-top:2.7083vw;
        padding-bottom: 6.875vw
    }
}

#section-chip .chip-container .alive .sticky-container .sticky-circle {
    position: -webkit-sticky;
    position: sticky;
    transform: translateZ(2px);
    z-index: 10
}

@media (max-width: 1023px) {
    #section-chip .chip-container .alive .sticky-container .sticky-circle {
        margin-top:-136.111vw;
        height: 136.111vw
    }
}

#section-chip .chip-container .alive .sticky-container .sticky-circle .g--circle {
}

@media (max-width: 1023px) {
    #section-chip .chip-container .alive .sticky-container .sticky-circle .g--circle {
        top:-2.778vw;
        right: 5.556vw
    }
}

#section-chip .chip-container .alive .sticky-container .sticky {
    transform: translateZ(0);
    z-index: 8
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .sticky-container .sticky {
    }
}

@media (min-width: 1024px) {
    #section-chip .chip-container .alive .sticky-container .sticky {
        top:calc(50vh - 20.8854vw + 25px);
        top: calc((50 * var(--vh, 1vh)) - 20.8854vw + 25px)
    }
}

@media (max-width: 1023px) {
    #section-chip .chip-container .alive .sticky-container .sticky {
        top:0
    }
}

#section-chip .chip-container .alive .sticky-container .h {
    height: 100vh;
    height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content {
        flex:1
    }
}

.nord-modal .img-text {
    line-height: 1.56;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .nord-modal .img-text {
        font-size:0.9375vw
    }
}

.nord-modal .fs-wrapper {
    display: flex;
    flex-direction: column
}

@media (min-width: 1024px) {
    .nord-modal .fs-wrapper.phone-65-wrapper {
        top:21.755725190839694%;
        right: 39.32670237184392%
    }
}

@media (max-width: 1023px) {
    .nord-modal .fs-wrapper.phone-65-wrapper {
        top:11.39240506329114%;
        left: 51.24223602484472%
    }
}

@media (min-width: 1024px) {
    .nord-modal .fs-wrapper.phone-30t-wrapper {
        top:37.97709923664122%;
        right: 1%
    }
}

@media (max-width: 1023px) {
    .nord-modal .fs-wrapper.phone-30t-wrapper {
        top:46.20253164556962%;
        left: 68.63354037267081%
    }
}

.nord-modal .fs-wrapper .f-row {
    line-height: 1;
    letter-spacing: 0;
    color: rgba(255,255,255,0.5)
}

@media (min-width: 1024px) {
    .nord-modal .fs-wrapper .f-row {
        font-size:0.7813vw
    }
}

@media (max-width: 1023px) {
    .nord-modal .fs-wrapper .f-row {
        line-height:1.33;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .nord-modal .fs-wrapper .f-row {
        font-size:3.333vw
    }
}

.nord-modal .fs-wrapper .s-row {
    line-height: 1.5;
    letter-spacing: .1em
}

@media (min-width: 1024px) {
    .nord-modal .fs-wrapper .s-row {
        font-size:0.5208vw
    }
}

@media (max-width: 1023px) {
    .nord-modal .fs-wrapper .s-row {
        line-height:1.4;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .nord-modal .fs-wrapper .s-row {
        font-size:2.778vw
    }
}

.nord-modal .g--modal-content {
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content {
        padding:0 2.7604vw
    }
}

.nord-modal .g--modal-content .content-top-text .text {
    line-height: 1.2;
    letter-spacing: 0;
    opacity: .8
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-top-text .text {
        margin-bottom:11.111vw
    }
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-top-text .text {
        font-size:0.9375vw;
        width: 27.5521vw
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-top-text .text {
        line-height:1.67;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-top-text .text {
        font-size:3.333vw
    }
}

.nord-modal .g--modal-content .content-middle-wrapper {
    display: flex
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-middle-wrapper {
        margin-top:4.6875vw
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-middle-wrapper {
        flex-direction:column
    }
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-middle-wrapper {
        justify-content:center
    }
}

.nord-modal .g--modal-content .content-middle-wrapper .left-text {
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-middle-wrapper .left-text {
        margin-bottom:4.444vw
    }
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-middle-wrapper .left-text {
        margin-top:11.25vw
    }
}

.nord-modal .g--modal-content .content-middle-wrapper .img-wrapper {
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-middle-wrapper .img-wrapper {
        width:89.444vw;
        height: 43.889vw
    }
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-middle-wrapper .img-wrapper {
        width:68.0729vw;
        height: 27.2917vw
    }
}

.nord-modal .g--modal-content .content-middle-wrapper .img-wrapper img {
    z-index: -1
}

.nord-modal .g--modal-content .content-bottom-text {
    display: flex;
    justify-content: center
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-bottom-text {
        margin-top:4.444vw
    }
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-bottom-text {
        margin-top:3.0208vw
    }
}

.nord-modal .g--modal-content .content-bottom-text .bottom-text-wrapper {
    display: flex;
    flex-direction: column
}

.nord-modal .g--modal-content .content-bottom-text .title {
    line-height: 1.17;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-bottom-text .title {
        font-size:1.25vw
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-bottom-text .title {
        align-self:center;
        line-height: 1.43;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-bottom-text .title {
        font-size:3.889vw
    }
}

.nord-modal .g--modal-content .content-bottom-text .text {
    line-height: 1.2;
    letter-spacing: 0;
    opacity: .8
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-bottom-text .text {
        margin-top:13.333vw
    }
}

@media (min-width: 1024px) {
    .nord-modal .g--modal-content .content-bottom-text .text {
        margin-top:0.625vw;
        width: 20.8333vw;
        font-size: 0.625vw
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-bottom-text .text {
        line-height:1.33;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .nord-modal .g--modal-content .content-bottom-text .text {
        font-size:3.333vw
    }
}

@media (min-width: 1024px) {
    .dimension-modal {
        overflow-y:hidden
    }
}

@media (min-width: 1024px) {
    .dimension-modal .g--modal-content {
        height:100%
    }
}

.dimension-modal .content {
    display: flex;
    min-height: 100vh;
    min-height: calc(100 * var(--vh, 1vh))
}

@media (min-width: 1024px) {
    .dimension-modal .content {
        height:100%
    }
}

@media (max-width: 1023px) {
    .dimension-modal .content {
        flex-direction:column
    }
}

.dimension-modal .content .img-wrapper {
    z-index: -1
}

@media (max-width: 1023px) {
    .dimension-modal .content .img-wrapper {
        overflow:hidden
    }
}

@media (max-width: 1023px) {
    .dimension-modal .content .img-wrapper {
        width:100vw;
        height: 100.833vw
    }
}

@media (min-width: 1024px) {
    .dimension-modal .content .img-wrapper {
        height:100%
    }
}

@media (min-width: 1024px) {
    .dimension-modal .content .img-wrapper {
        width:63.9063vw
    }
}

.dimension-modal .content .img-wrapper img {
    object-fit: cover
}

@media (min-width: 1024px) {
    .dimension-modal .content .img-wrapper img {
        object-position:center 95%
    }
}

.dimension-modal .content .right-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper {
        margin-top:8.333vw
    }
}

@media (min-width: 1024px) {
    .dimension-modal .content .right-wrapper {
        margin-left:6.4583vw
    }
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper .text p {
        line-height:1.19;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper .text p {
        font-size:4.444vw
    }
}

.dimension-modal .content .right-wrapper img {
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper img {
        margin-bottom:5.556vw;
        width: 53.056vw;
        hegiht: 25vw
    }
}

@media (min-width: 1024px) {
    .dimension-modal .content .right-wrapper img {
        margin-bottom:1.6146vw;
        width: 19.2708vw;
        height: 9.6875vw
    }
}

.dimension-modal .content .right-wrapper .note {
    color: #b3b3b3;
    line-height: 1.56;
    letter-spacing: 0
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper .note {
        margin-top:16.667vw;
        margin-bottom: 33.333vw
    }
}

@media (min-width: 1024px) {
    .dimension-modal .content .right-wrapper .note {
        margin-top:1.4583vw;
        font-size: 0.9375vw;
        width: 24.0625vw
    }
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper .note {
        line-height:1.67;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .dimension-modal .content .right-wrapper .note {
        font-size:3.333vw
    }
}

.alive-modal .normal .line {
    margin-bottom: 0
}

@media (min-width: 1024px) {
    .alive-modal .g--modal-content {
        position:relative;
        flex: 1
    }
}

.alive-modal .mid-line {
    position: absolute;
    left: 50%;
    height: 100%;
    width: 1px;
    background: #fff
}

.alive-modal .content {
    height: 100%;
    display: flex
}

@media (min-width: 1024px) {
    .alive-modal .content {
        padding:0 4.4792vw;
        padding-top: 1.875vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content {
        flex-direction:column
    }
}

.alive-modal .content .pt-line {
    width: 100%;
    height: 1px;
    background: #fff
}

@media (max-width: 1023px) {
    .alive-modal .content .pt-line {
        margin-top:11.111vw;
        margin-bottom: 11.111vw
    }
}

.alive-modal .content .right-wrapper .img-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media (min-width: 1024px) {
    .alive-modal .content .right-wrapper .img-text-wrapper {
        margin-top:4.375vw
    }
}

.alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper {
    display: flex;
    align-items: center;
    flex-direction: column
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper {
        margin-bottom:33.333vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper {
        margin-top:1.7708vw
    }
}

.alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .num {
    font-family: 'SlateForOnePlusLight','Helvetica Neue',Helvetica,Arial,sans-serif;
    line-height: 1.33;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .num {
        font-size:2.3438vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .num {
        line-height:1.21;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .num {
        font-size:7.778vw
    }
}

.alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .score {
    line-height: 1.5;
    letter-spacing: .1em;
    color: #fff;
    opacity: .6
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .score {
        margin-bottom:1.111vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .score {
        margin-right:0.9375vw;
        font-size: 0.5208vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .score {
        line-height:1.45;
        letter-spacing: .0909em
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .score {
        font-size:3.056vw
    }
}

.alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .prev {
    line-height: 1.5;
    letter-spacing: .1em;
    color: #fff;
    opacity: .6
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .prev {
        margin-top:2.778vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .prev {
        margin-top:0.7813vw;
        font-size: 0.5208vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .prev {
        line-height:1.45;
        letter-spacing: .0909em
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .prev {
        font-size:3.056vw
    }
}

.alive-modal .content .right-wrapper .img-text-wrapper .score-wrapper .prev-num {
    color: #fff;
    opacity: .6
}

.alive-modal .content .right-wrapper .img-text-wrapper img {
}

@media (max-width: 1023px) {
    .alive-modal .content .right-wrapper .img-text-wrapper img {
        width:31.667vw;
        height: 40.833vw;
        margin-top: 8.889vw;
        margin-bottom: 5.556vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .right-wrapper .img-text-wrapper img {
        width:16.25vw;
        height: 16.25vw
    }
}

.alive-modal .content .left-wrapper {
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper {
        margin-top:11.111vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper {
        width:45.5208vw;
        margin-right: 4.2708vw
    }
}

.alive-modal .content .left-wrapper .img-text-wrapper {
    display: flex
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .img-text-wrapper {
        margin-top:11.111vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .img-text-wrapper {
        margin-top:4.0625vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .img-text-wrapper {
        justify-content:flex-start
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .img-text-wrapper {
        justify-content:space-between
    }
}

.alive-modal .content .left-wrapper .img-text-wrapper img {
    flex: 0 0 auto
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .img-text-wrapper img {
        margin:2.5vw 0;
        width: 48.056vw;
        height: 89.444vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .img-text-wrapper img {
        width:31.9792vw;
        height: 25vw
    }
}

.alive-modal .content .left-wrapper .img-text-wrapper .text-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 auto
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .img-text-wrapper .text-list {
        width:33.056vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .img-text-wrapper .text-list {
        padding:0.6771vw 0;
        margin-right: 2.6042vw
    }
}

.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .title,.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .desc {
    line-height: 1;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .title,.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .desc {
        font-size:0.7813vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .title,.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .desc {
        line-height:1.23;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .title,.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .desc {
        font-size:3.611vw
    }
}

.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .title {
    opacity: .5
}

.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-list-container .desc {
    opacity: .6
}

.alive-modal .content .left-wrapper .img-text-wrapper .text-list .text-container-0 .desc {
    opacity: 1
}

.alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title,.alive-modal .content .left-wrapper .left-top-text .desc,.alive-modal .content .right-wrapper .left-top-text .desc,.alive-modal .content .left-wrapper .right-top-text .desc,.alive-modal .content .right-wrapper .right-top-text .desc {
    line-height: 1.44;
    letter-spacing: .0013em;
    color: #b3b3b3
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title,.alive-modal .content .left-wrapper .left-top-text .desc,.alive-modal .content .right-wrapper .left-top-text .desc,.alive-modal .content .left-wrapper .right-top-text .desc,.alive-modal .content .right-wrapper .right-top-text .desc {
        font-size:0.7813vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title,.alive-modal .content .left-wrapper .left-top-text .desc,.alive-modal .content .right-wrapper .left-top-text .desc,.alive-modal .content .left-wrapper .right-top-text .desc,.alive-modal .content .right-wrapper .right-top-text .desc {
        line-height:1.67;
        letter-spacing: .0833em
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title,.alive-modal .content .left-wrapper .left-top-text .desc,.alive-modal .content .right-wrapper .left-top-text .desc,.alive-modal .content .left-wrapper .right-top-text .desc,.alive-modal .content .right-wrapper .right-top-text .desc {
        font-size:3.333vw
    }
}

.alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title {
        margin-bottom:2.222vw
    }
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title {
        margin-bottom:0.4688vw
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title {
        line-height:1.43;
        letter-spacing: .0714em
    }
}

@media (max-width: 1023px) {
    .alive-modal .content .left-wrapper .left-top-text .title,.alive-modal .content .right-wrapper .left-top-text .title,.alive-modal .content .left-wrapper .right-top-text .title,.alive-modal .content .right-wrapper .right-top-text .title {
        font-size:3.889vw
    }
}

.alive-modal .content .left-wrapper .left-top-text .desc,.alive-modal .content .right-wrapper .left-top-text .desc,.alive-modal .content .left-wrapper .right-top-text .desc,.alive-modal .content .right-wrapper .right-top-text .desc {
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .alive-modal .content .left-wrapper .left-top-text .desc,.alive-modal .content .right-wrapper .left-top-text .desc,.alive-modal .content .left-wrapper .right-top-text .desc,.alive-modal .content .right-wrapper .right-top-text .desc {
        width:34.0104vw
    }
}

.fig .label-img-container {
    background: #f3f3f3
}

@media (max-width: 1023px) {
    .fig .label-img-container {
        width:88.889vw;
        min-height: 125vw;
        padding: 4.444vw 3.333vw;
        border-radius: 2.778vw
    }
}

@media (min-width: 1024px) {
    .fig .label-img-container {
        width:60vw;
        min-height: 32.8125vw;
        border-radius: 1.8229vw;
        padding: 3.6458vw 1.7708vw
    }
}

.fig .label-img-container .label-img .line {
    width: 100%;
    height: 1px;
    background: #000
}

.fig .label-img-container .label-img .label {
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif;
    line-height: 5;
    letter-spacing: .0833em
}

@media (min-width: 1024px) {
    .fig .label-img-container .label-img .label {
        font-size:0.625vw
    }
}

@media (max-width: 1023px) {
    .fig .label-img-container .label-img .label {
        line-height:1.54;
        letter-spacing: .0769em
    }
}

@media (max-width: 1023px) {
    .fig .label-img-container .label-img .label {
        font-size:3.611vw;
        margin-top: 1.667vw;
        margin-bottom: 3.333vw
    }
}

.fig .label-img-container .label-img .img-wrapper {
    overflow: hidden
}

@media (max-width: 1023px) {
    .fig .label-img-container .label-img .img-wrapper {
        border-radius:2.778vw
    }
}

@media (min-width: 1024px) {
    .fig .label-img-container .label-img .img-wrapper {
        border-radius:1.8229vw
    }
}

.fig.fig-1 {
}

@media (max-width: 1023px) {
    .fig.fig-1 {
        margin-top:8.333vw
    }
}

.fig.fig-1 .label-img-container {
    display: flex
}

@media (max-width: 1023px) {
    .fig.fig-1 .label-img-container {
        flex-direction:column
    }
}

.fig.fig-1 .label {
}

@media (min-width: 1024px) {
    .fig.fig-1 .label {
        margin-bottom:1.3542vw
    }
}

.fig.fig-1 .img-wrapper {
}

@media (max-width: 1023px) {
    .fig.fig-1 .img-wrapper {
        width:82.222vw;
        height: 44.444vw
    }
}

@media (min-width: 1024px) {
    .fig.fig-1 .img-wrapper {
        width:27.1875vw;
        height: 17.3438vw
    }
}

.fig.fig-1 .label-img-1 {
}

@media (max-width: 1023px) {
    .fig.fig-1 .label-img-1 {
        margin-top:5.556vw
    }
}

@media (min-width: 1024px) {
    .fig.fig-1 .label-img-1 {
        margin-left:1.875vw
    }
}

.fig.fig-2 {
    overflow: hidden;
    position: relative;
    z-index: 9;
    transform: translateZ(1px)
}

@media (max-width: 1023px) {
    .fig.fig-2 {
        margin-top:41.111vw
    }
}

@media (min-width: 1024px) {
    .fig.fig-2 {
        margin-top:6.875vw
    }
}

.fig.fig-2 video {
    object-fit: cover;
    transform: scale(.965,.928)
}

@media (max-width: 1023px) {
    .fig.fig-2 .label-img {
        display:flex;
        flex-direction: column
    }
}

.fig.fig-2 .bottom-text {
    color: #787777;
    line-height: 1.06;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    .fig.fig-2 .bottom-text {
        width:29.4271vw;
        font-size: 0.9375vw
    }
}

@media (max-width: 1023px) {
    .fig.fig-2 .bottom-text {
        order:3
    }
}

@media (max-width: 1023px) {
    .fig.fig-2 .bottom-text {
        line-height:1.43;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    .fig.fig-2 .bottom-text {
        font-size:3.889vw
    }
}

.fig.fig-2 .phone-wrapper0 {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden
}

@media (max-width: 1023px) {
    .fig.fig-2 .phone-wrapper0 {
        width:82.222vw;
        height: 50vw;
        margin-top: 4.444vw
    }
}

@media (min-width: 1024px) {
    .fig.fig-2 .phone-wrapper0 {
        width:38.6458vw;
        height: 17.5vw;
        margin-top: 2.1354vw;
        border-radius: 1.8229vw
    }
}

.fig.fig-2 .phone-wrapper0 #canvasPlayer {
    overflow: hidden;
    object-fit: cover
}

.fig.fig-2 .phone-wrapper0 .phone {
    z-index: 2
}

@media (max-width: 1023px) {
    .fig.fig-2 .phone-wrapper0 {
        order:3
    }
}

.fig.fig-2 .phone-wrapper0 .img-wrapper {
    z-index: 1;
    transform: scale(.965)
}

#section-oos {
    position: relative;
    z-index: 2
}

#section-oos .nav-ahchor {
    position: absolute;
    margin-top: 100vh;
    margin-top: calc(100 * var(--vh, 1vh))
}

#section-oos .pt-black-line {
}

@media (max-width: 1023px) {
    #section-oos .pt-black-line {
        margin-bottom:20.833vw;
        margin-top: 11.111vw
    }
}

#section-oos .phone-sticky-container {
    height: 330vh;
    height: calc(330 * var(--vh, 1vh));
    margin-top: -100vh;
    margin-top: calc(-100 * var(--vh, 1vh))
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container {
        height:280vh;
        height: calc(280 * var(--vh, 1vh))
    }
}

#section-oos .phone-sticky-container .sticky {
    width: 100%;
    display: flex;
    justify-content: center
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container .sticky {
        flex-direction:column;
        justify-content: flex-end
    }
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container .sticky {
        height:calc(154.167vw + 60px)
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper {
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper {
        width:58.8542vw
    }
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper {
        margin-top:50px
    }
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper {
        margin-top:60px
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper .screen {
    height: 100vh;
    height: calc(100 * var(--vh, 1vh));
    overflow: hidden
}

#section-oos .phone-sticky-container .sticky .top-wrapper .black-line-container {
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .black-line-container {
        margin-top:29.6875vw
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper .black-line-container .desc {
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .black-line-container .desc {
        margin-top:2.2917vw
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper .black-line-container .desc:before {
    display: none
}

#section-oos .phone-sticky-container .sticky .top-wrapper img {
    z-index: 0
}

#section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper {
    margin-top: 60px;
    transform-origin: 50% 50% 0
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper {
        width:72.222vw;
        height: 154.167vw
    }
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper {
        width:58.8542vw;
        height: 27.5vw
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper #canvasPlayer {
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper #canvasPlayer {
        width:66.667vw;
        height: 148.889vw
    }
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper #canvasPlayer {
        width:56.7708vw;
        height: 25.5208vw
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper .phone-wrapper0 {
    position: relative;
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper .phone-wrapper0 {
        width:72.222vw;
        height: 154.167vw;
        border-radius: 2.778vw
    }
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper .phone-wrapper0 {
        width:58.8542vw;
        height: 27.5vw;
        border-radius: 1.8229vw
    }
}

#section-oos .phone-sticky-container .sticky .top-wrapper .scale-wrapper .phone-wrapper0 .phone {
    object-fit: cover;
    position: absolute;
    z-index: 4
}

#section-oos .phone-sticky-container .sticky .top-wrapper .text {
    position: relative;
    z-index: 1;
    color: #fff
}

@media (min-width: 1024px) {
    #section-oos .phone-sticky-container .sticky .top-wrapper .text {
        padding-top:15vw
    }
}

#section-oos .dun-wrapper {
}

@media (max-width: 1023px) {
    #section-oos .dun-wrapper {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper {
        margin-top:12.0833vw
    }
}

#section-oos .dun-wrapper .dun-container {
    width: 100%;
    display: flex;
    justify-content: center
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .dun-container {
        min-height:200vh;
        min-height: calc(200 * var(--vh, 1vh))
    }
}

#section-oos .dun-wrapper .video-text-wrapper {
    display: flex;
    flex-direction: column
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .video-text-wrapper {
        width:60.1042vw
    }
}

#section-oos .dun-wrapper .video-wrapper {
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-oos .dun-wrapper .video-wrapper {
        width:88.889vw;
        height: 61.111vw;
        border-radius: 2.778vw
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .video-wrapper {
        width:40vw;
        height: 25.5729vw;
        border-radius: 1.8229vw
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .video-wrapper {
        position:-webkit-sticky;
        position: sticky
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .video-wrapper {
        top:calc(50vh - (25.5729vw / 2));
        top: calc((50 * var(--vh, 1vh)) - (25.5729vw / 2))
    }
}

#section-oos .dun-wrapper .video-wrapper #canvasPlayer {
    overflow: hidden;
    object-fit: cover
}

#section-oos .dun-wrapper .video-wrapper video {
    object-fit: cover
}

#section-oos .dun-wrapper .black-line-container {
    display: flex
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .black-line-container {
        margin-bottom:5.4167vw
    }
}

#section-oos .dun-wrapper .black-line-container .title {
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .black-line-container .title {
        width:31.25vw
    }
}

#section-oos .dun-wrapper .black-line-container .desc {
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .black-line-container .desc {
        margin-left:4.375vw;
        width: 25.5729vw
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .black-line-container .desc {
        align-self:center
    }
}

#section-oos .dun-wrapper .text-wrapper {
    display: flex;
    flex-direction: column;
    align-self: flex-end
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .text-wrapper {
        width:18.125vw;
        margin-top: 3.125vw;
        margin-left: 61.875vw
    }
}

@media (max-width: 1023px) {
    #section-oos .dun-wrapper .text-wrapper {
        order:1
    }
}

#section-oos .dun-wrapper .text-container {
    display: flex
}

#section-oos .dun-wrapper .text-container:first-child {
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .text-container:first-child {
        margin-bottom:21.25vw
    }
}

#section-oos .dun-wrapper .text-container .img-wrapper {
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .text-container .img-wrapper {
        margin-right:1.875vw
    }
}

#section-oos .dun-wrapper .text-container {
}

@media (max-width: 1023px) {
    #section-oos .dun-wrapper .text-container {
        margin-top:18.889vw;
        margin-bottom: 5.556vw
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .text-container {
        width:18.125vw
    }
}

#section-oos .dun-wrapper .text-container.text-container-1 {
}

@media (max-width: 1023px) {
    #section-oos .dun-wrapper .text-container.text-container-1 {
        margin-top:5.556vw
    }
}

#section-oos .dun-wrapper .text-container .desc {
    color: #787777
}

@media (max-width: 1023px) {
    #section-oos .dun-wrapper .text-container .desc {
        margin-top:2.778vw
    }
}

@media (min-width: 1024px) {
    #section-oos .dun-wrapper .text-container .desc {
        margin-top:1.3542vw
    }
}

#section-oos .hz-wrapper {
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper {
        margin-top:5.3646vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container {
    display: flex;
    align-items: center
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper .hz-img-text-container {
        justify-content:center
    }

    #section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
    }
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
        margin-right:1.9792vw
    }
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container {
        flex-direction:column-reverse
    }
}

#section-oos .hz-wrapper .hz-img-text-container:first-child {
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container:first-child {
        margin-bottom:18.889vw
    }
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper .hz-img-text-container:first-child {
        margin-bottom:4.7917vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container:first-child .text-container .title {
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container:first-child .text-container .title {
        width:77.778vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
        width:88.889vw;
        height: 63.611vw
    }
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
        border-radius:1.8229vw;
        width: 40vw;
        height: 25.5208vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container .img-wrapper img {
    object-fit: cover
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
    }
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container .img-wrapper {
        margin-top:5.556vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container .img-wrapper img {
    transition: 1s
}

#section-oos .hz-wrapper .hz-img-text-container .img-wrapper.scale img {
    transform: scale(4.8)
}

#section-oos .hz-wrapper .hz-img-text-container .text-container {
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper .hz-img-text-container .text-container {
        width:18.3333vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container .text-container .title {
    line-height: 1.05;
    letter-spacing: 0
}

@media (min-width: 1024px) {
    #section-oos .hz-wrapper .hz-img-text-container .text-container .title {
        font-size:1.9792vw;
        margin-bottom: 1.0417vw
    }
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container .text-container .title {
        line-height:1.3;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container .text-container .title {
        font-size:5.556vw
    }
}

#section-oos .hz-wrapper .hz-img-text-container .text-container .desc {
    color: #787777
}

@media (max-width: 1023px) {
    #section-oos .hz-wrapper .hz-img-text-container .text-container .desc {
        margin-top:2.778vw
    }
}

#section-oos .skate-wrapper {
    display: flex;
    flex-direction: column-reverse
}

@media (max-width: 1023px) {
    #section-oos .skate-wrapper {
        margin-top:16.111vw;
        margin-right: 5.556vw
    }
}

@media (min-width: 1024px) {
    #section-oos .skate-wrapper {
        margin-top:11.0938vw
    }
}

#section-oos .skate-wrapper .img-wrapper {
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-oos .skate-wrapper .img-wrapper {
        width:88.889vw;
        height: 53.461vw;
        margin-top: 11.111vw
    }
}

@media (min-width: 1024px) {
    #section-oos .skate-wrapper .img-wrapper {
        width:59.7917vw;
        height: 35.8333vw;
        margin-top: 5.3125vw;
        border-radius: 1.5625vw
    }
}

#section-oos .skate-wrapper .img-wrapper img {
    object-fit: cover
}

#section-oos .skate-wrapper .text-container {
}

@media (min-width: 1024px) {
    #section-oos .skate-wrapper .text-container {
        width:63.3333vw
    }
}

#section-oos .skate-wrapper .text-container .desc {
    align-self: flex-end;
    color: #787777
}

@media (min-width: 1024px) {
    #section-oos .skate-wrapper .text-container .desc {
        margin-top:2.8125vw;
        width: 39.7396vw
    }
}

#section-oos .no-conn-container {
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container {
        margin-top:25vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container {
        margin-top:10.1042vw
    }
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container {
        display:flex;
        flex-direction: column
    }
}

#section-oos .no-conn-container .title-wrapper {
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .title-wrapper {
        margin-right:5.556vw
    }
}

#section-oos .no-conn-container .title-wrapper .title {
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .title-wrapper .title {
        width:40.4167vw
    }
}

#section-oos .no-conn-container .title-wrapper .desc {
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .title-wrapper .desc {
        margin-top:1.4583vw;
        width: 37.6563vw
    }
}

#section-oos .no-conn-container .middle-wrapper {
    display: flex
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .middle-wrapper {
        margin-right:5.556vw;
        margin-top: 11.111vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .middle-wrapper {
        margin-top:5.9375vw
    }
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .middle-wrapper {
        flex-direction:column
    }
}

#section-oos .no-conn-container .middle-wrapper .h3-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

#section-oos .no-conn-container .middle-wrapper .h3-container .desc {
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .middle-wrapper .h3-container .desc {
        margin-top:2.778vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .middle-wrapper .h3-container .desc {
        margin-top:1.4583vw;
        width: 27.6563vw
    }
}

#section-oos .no-conn-container .middle-wrapper .h3-container:last-child {
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .middle-wrapper .h3-container:last-child {
        margin-top:11.111vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .middle-wrapper .h3-container:last-child {
        margin-left:4.2188vw
    }
}

#section-oos .no-conn-container .middle-wrapper .h3-container:last-child .title {
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .middle-wrapper .h3-container:last-child .title {
        width:77.778vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .middle-wrapper .h3-container:last-child .title {
        width:25.5208vw
    }
}

#section-oos .no-conn-container .bottom-wrapper {
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .bottom-wrapper {
        margin-top:11.111vw;
        margin-bottom: 25vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .bottom-wrapper {
        margin-top:3.6979vw;
        margin-bottom: 6.5104vw
    }
}

#section-oos .no-conn-container .bottom-wrapper .img-wrapper {
    margin-left: auto;
    margin-right: auto;
    overflow: hidden
}

@media (max-width: 1023px) {
    #section-oos .no-conn-container .bottom-wrapper .img-wrapper {
        width:88.889vw;
        height: 59.444vw
    }
}

@media (min-width: 1024px) {
    #section-oos .no-conn-container .bottom-wrapper .img-wrapper {
        width:60.0521vw;
        height: 34.7396vw;
        border-radius: 1.8229vw
    }
}

#section-oos .no-conn-container .bottom-wrapper .img-wrapper img {
    object-fit: cover
}

#section-oos .drag-card-wrapper {
    width: 100%;
    overflow: hidden
}

#section-oos .cards {
}

@media (min-width: 1024px) {
    #section-oos .cards {
        height:36.9792vw;
        margin-top: 7.6563vw
    }
}

@media (max-width: 1023px) {
    #section-oos .cards {
    }
}

@media (max-width: 1023px) {
    #section-oos .cards {
        margin-top:13.056vw;
        height: 117.5vw
    }
}

#section-oos .cards .tip {
    opacity: .6
}

@media (min-width: 1024px) {
    #section-oos .cards .tip {
        bottom:2.6042vw
    }
}

#section-oos .cards .card {
    background-color: transparent;
    border-color: transparent;
}

@media (min-width: 1024px) {
    #section-oos .cards .card {
        margin-left:-10.4167vw;
        width: 20.8333vw;
        height: 27.5vw
    }
}

@media (max-width: 1023px) {
    #section-oos .cards .card {
    }
}

@media (max-width: 1023px) {
    #section-oos .cards .card {
        margin-left:-34.722vw;
        width: 69.444vw;
        height: 92.778vw
    }
}

.black-line-container {
}

@media (max-width: 1023px) {
    .black-line-container {
        margin-right:5.556vw
    }
}

@media (max-width: 1023px) {
    .black-line-container {
        flex-direction:column
    }
}

.black-line-container .desc {
    position: relative
}

@media (max-width: 1023px) {
    .black-line-container .desc {
        margin-top:5.556vw
    }
}

@media (min-width: 1024px) {
    .black-line-container .desc {
        width:29.8438vw
    }
}

.black-line-container .title.normal p {
    transition: opacity .5s linear,transform .5s ease-in;
    opacity: 0;
    transform: translateY(50px)
}

.black-line-container .title.show p {
    opacity: 1;
    transform: translateY(0)
}

.black-line-container .title.show p:nth-child(0) {
    transition: opacity .5s 0s,transform .5s 0s ease-out
}

.black-line-container .title.show p:nth-child(1) {
    transition: opacity .5s .15s,transform .5s .15s ease-out
}

.black-line-container .title.show p:nth-child(2) {
    transition: opacity .5s .3s,transform .5s .3s ease-out
}

.black-line-container .title.show p:nth-child(3) {
    transition: opacity .5s .44999999999999996s,transform .5s .44999999999999996s ease-out
}

.black-line-container .desc.normal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity .5s linear,transform .5s ease-out
}

.black-line-container .desc.show {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s .6s,transform .5s .6s ease-out
}

@media (max-width: 1023px) {
    .border-10 {
    }
}

@media (max-width: 1023px) {
    .border-10 {
        border-radius:2.778vw
    }
}

#section-notes {
    color: #787777;
    line-height: 1.25;
    letter-spacing: 0
}

@media (max-width: 1023px) {
    #section-notes {
        margin-bottom:35.556vw
    }
}

@media (min-width: 1024px) {
    #section-notes {
        width:30.6771vw;
        margin-bottom: 8.3854vw;
        margin-right: 20vw;
        font-size: 0.625vw
    }
}

@media (max-width: 1023px) {
    #section-notes {
        line-height:1.67;
        letter-spacing: 0
    }
}

@media (max-width: 1023px) {
    #section-notes {
        font-size:3.333vw
    }
}

#section-notes .note-wrapper .note {
    display: flex
}

@media (max-width: 1023px) {
    #section-notes .note-wrapper .note {
        margin-bottom:3.333vw
    }
}

#section-notes .dis-wrapper {
}

@media (max-width: 1023px) {
    #section-notes .dis-wrapper {
        margin-top:11.111vw
    }
}

@media (min-width: 1024px) {
    #section-notes .dis-wrapper {
        margin-top:3.3333vw
    }
}

#section-notes .title {
    color: rgba(0,0,0,0.6);
    font-family: 'Medium-65','Helvetica Neue',Helvetica,Arial,sans-serif
}

#section-notes .line {
    background: #787777;
    width: 100%;
    height: 1px
}

@media (min-width: 1024px) {
    #section-notes .line {
        margin-top:0.5729vw;
        margin-bottom: 1.0938vw
    }
}

@media (max-width: 1023px) {
    #section-notes .line {
    }
}

@media (max-width: 1023px) {
    #section-notes .line {
        margin:4.444vw 0
    }
}

#section-notes .content {
}

@media (min-width: 1024px) {
    #section-notes .content {
        margin-left:0.7813vw;
        width: 29.8958vw
    }
}

body {
    color: #fff;
    background: #000;
    transition: background .5s,color .5s
}

body.theme-white {
    color: #000;
    background: #fff
}