.product-nav.fixed {
    position: fixed !important;
}
.page-content p {
    margin-bottom: 0;
}

.padding-side {
    padding-left: 30px;
    padding-right: 30px
}

.padding-top-1x {
    padding-top: 10px
}

.padding-top-2x {
    padding-top: 20px
}

.padding-top-3x {
    padding-top: 30px
}

.padding-top-4x {
    padding-top: 40px
}

.padding-top-5x {
    padding-top: 50px
}

.padding-top-6x {
    padding-top: 60px
}

.padding-top-7x {
    padding-top: 70px
}

.padding-top-8x {
    padding-top: 80px
}

.padding-top-9x {
    padding-top: 90px
}

.font-bold {
    font-weight: 700
}

.margin-10vw {
    height: 10vw
}

.margin-1x {
    height: 0;
    width: 100%;
    padding-bottom: 2%
}

@media screen and (max-width: 735px) {
    .margin-1x {
        padding-bottom:4%
    }
}

.margin-1x.frozen {
    padding-bottom: 5px
}

.margin-2x {
    height: 0;
    width: 100%;
    padding-bottom: 4%
}

@media screen and (max-width: 735px) {
    .margin-2x {
        padding-bottom:8%
    }
}

.margin-2x.frozen {
    padding-bottom: 10px
}

.margin-3x {
    height: 0;
    width: 100%;
    padding-bottom: 6%
}

@media screen and (max-width: 735px) {
    .margin-3x {
        padding-bottom:12%
    }
}

.margin-3x.frozen {
    padding-bottom: 15px
}

.margin-4x {
    height: 0;
    width: 100%;
    padding-bottom: 8%
}

@media screen and (max-width: 735px) {
    .margin-4x {
        padding-bottom:16%
    }
}

.margin-4x.frozen {
    padding-bottom: 20px
}

.margin-5x {
    height: 0;
    width: 100%;
    padding-bottom: 10%
}

@media screen and (max-width: 735px) {
    .margin-5x {
        padding-bottom:20%
    }
}

.margin-5x.frozen {
    padding-bottom: 25px
}

.margin-6x {
    height: 0;
    width: 100%;
    padding-bottom: 12%
}

@media screen and (max-width: 735px) {
    .margin-6x {
        padding-bottom:24%
    }
}

.margin-6x.frozen {
    padding-bottom: 30px
}

.margin-7x {
    height: 0;
    width: 100%;
    padding-bottom: 14%
}

@media screen and (max-width: 735px) {
    .margin-7x {
        padding-bottom:28%
    }
}

.margin-7x.frozen {
    padding-bottom: 35px
}

.margin-8x {
    height: 0;
    width: 100%;
    padding-bottom: 16%
}

@media screen and (max-width: 735px) {
    .margin-8x {
        padding-bottom:32%
    }
}

.margin-8x.frozen {
    padding-bottom: 40px
}

.margin-9x {
    height: 0;
    width: 100%;
    padding-bottom: 18%
}

@media screen and (max-width: 735px) {
    .margin-9x {
        padding-bottom:36%
    }
}

.margin-9x.frozen {
    padding-bottom: 45px
}

.margin-10x {
    height: 0;
    width: 100%;
    padding-bottom: 20%
}

@media screen and (max-width: 735px) {
    .margin-10x {
        padding-bottom:40%
    }
}

.margin-10x.frozen {
    padding-bottom: 50px
}

.margin-top-20x {
    margin-top: 200px
}

.margin-top-10x {
    margin-top: 100px
}

.margin-top-8x {
    margin-top: 80px
}

.margin-top-7x {
    margin-top: 70px
}

.margin-top-6x {
    margin-top: 60px
}

.margin-top-5x {
    margin-top: 50px
}

.padding-top-10x {
    padding-top: 100px
}

@media screen and (max-width: 735px) {
    .margin-top-20x {
        margin-top:100px
    }

    .margin-top-10x {
        margin-top: 50px
    }

    .margin-top-8x {
        margin-top: 40px
    }

    .padding-top-10x {
        padding-top: 50px
    }
}

.container-1920 {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}
.container-text {
    max-width: 1200px;
    min-width: 300px;
    display: block;
    margin: auto;
    width: 100%
}
.page-content {
    position: relative;
    z-index: 1;
}

.font-headline-4 {
    font-size: 60px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-4 {
        font-size:36px
    }
}

@media screen and (max-width: 768px) {
    .font-headline-4 {
        font-size:32px
    }
}

.font-headline-3 {
    font-size: 48px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-3 {
        font-size:34px
    }
}

@media screen and (max-width: 768px) {
    .font-headline-3 {
        font-size:28px
    }
}

.font-headline-2 {
    font-size: 40px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-2 {
        font-size:32px
    }
}

@media screen and (max-width: 768px) {
    .font-headline-2 {
        font-size:28px
    }
}

.font-headline-1 {
    font-size: 30px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-headline-1 {
        font-size:24px;
        line-height: 1.2
    }
}

@media screen and (max-width: 768px) {
    .font-headline-1 {
        font-size:20px;
        line-height: 1.2
    }
}

.font-title {
    font-size: 24px;
    line-height: 1.2
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-title {
        font-size:20px
    }
}

@media screen and (max-width: 768px) {
    .font-title {
        font-size:20px
    }
}

.font-subheading {
    font-size: 20px;
    line-height: 1.5
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-subheading {
        font-size:18px
    }
}

@media screen and (max-width: 768px) {
    .font-subheading {
        font-size:18px
    }
}

.font-subtitle {
    font-size: 18px;
    line-height: 1.5
}

@media screen and (min-width: 769px) and (max-width:1599px) {
    .font-subtitle {
        font-size:16px
    }
}

@media screen and (max-width: 768px) {
    .font-subtitle {
        font-size:16px
    }
}

.font-body-2 {
    line-height: 1.5;
    font-size: 16px
}

.font-body-1 {
    font-size: 14px;
    line-height: 1.7
}

.font-descriptions {
    font-size: 12px;
    line-height: 1.7
}

/*-------------------------*/
.landing-container .container {
    max-width: initial;
}

.landing-container .g--container,.landing-container .g--ls-container,.landing-container .g--ls-narrow-container,.landing-container .g--ls-sub-container,.landing-container .g--pt-container,.landing-container .g--pt-sub-container {
    margin: 0 auto
}

.landing-container .g--container {
    width: 1600px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .g--container {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .g--container {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .g--container {
        width:94.44444444444444vw
    }
}

.landing-container .g--ls-container {
    width: 1600px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .g--ls-container {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .g--ls-container {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .g--pt-container {
        width:94.44444444444444vw
    }
}

.landing-container .g--ls-sub-container {
    width: 1400px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .g--ls-sub-container {
        width:1050px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .g--ls-sub-container {
        width:875px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .g--pt-sub-container {
        width:83.33333333333333vw!important
    }
}

.landing-container .g--ls-narrow-container {
    width: 1200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .g--ls-narrow-container {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .g--ls-narrow-container {
        width:750px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .g--pt-hidden,.pt-hidden {
        display:none!important
    }
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    .g--ls-hidden,.ls-hidden {
        display:none!important
    }
}

.landing-container .z-font-bg,.landing-container .z-font-bg * {
    font-size: 219px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-bg,.landing-container .z-font-bg * {
        font-size:164px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-bg,.landing-container .z-font-bg * {
        font-size:60px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-bg,.landing-container .z-font-bg * {
        font-size:60px;
        line-height: 1.2
    }
}

.landing-container .z-font-display,.landing-container .z-font-display * {
    font-size: 100px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-display,.landing-container .z-font-display * {
        font-size:60px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-display,.landing-container .z-font-display * {
        font-size:52px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-display,.landing-container .z-font-display * {
        font-size:52px;
        line-height: 1.2
    }
}

.landing-container .z-font-headline-4,.landing-container .z-font-headline-4 * {
    font-size: 60px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-headline-4,.landing-container .z-font-headline-4 * {
        font-size:36px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-headline-4,.landing-container .z-font-headline-4 * {
        font-size:34px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-headline-4,.landing-container .z-font-headline-4 * {
        font-size:32px;
        line-height: 1.2
    }
}

.landing-container .z-font-headline-3,.landing-container .z-font-headline-3 * {
    font-size: 48px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-headline-3,.landing-container .z-font-headline-3 * {
        font-size:34px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-headline-3,.landing-container .z-font-headline-3 * {
        font-size:28px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-headline-3,.landing-container .z-font-headline-3 * {
        font-size:28px;
        line-height: 1.2
    }
}

.landing-container .z-font-headline-2,.landing-container .z-font-headline-2 * {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-headline-2,.landing-container .z-font-headline-2 * {
        font-size:32px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-headline-2,.landing-container .z-font-headline-2 * {
        font-size:28px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-headline-2,.landing-container .z-font-headline-2 * {
        font-size:28px;
        line-height: 1.2
    }
}

.landing-container .z-font-headline-1,.landing-container .z-font-headline-1 * {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-headline-1,.landing-container .z-font-headline-1 * {
        font-size:24px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-headline-1,.landing-container .z-font-headline-1 * {
        font-size:20px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-headline-1,.landing-container .z-font-headline-1 * {
        font-size:20px;
        line-height: 1.2
    }
}

.landing-container .z-font-title,.landing-container .z-font-title * {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-title,.landing-container .z-font-title * {
        font-size:20px;
        line-height: 1.2
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-title,.landing-container .z-font-title * {
        font-size:20px;
        line-height: 1.2
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-title,.landing-container .z-font-title * {
        font-size:20px;
        line-height: 1.2
    }
}

.landing-container .z-font-subheading,.landing-container .z-font-subheading * {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-subheading,.landing-container .z-font-subheading * {
        font-size:18px;
        line-height: 1.5
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-subheading,.landing-container .z-font-subheading * {
        font-size:18px;
        line-height: 1.5
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-subheading,.landing-container .z-font-subheading * {
        font-size:18px;
        line-height: 1.5
    }
}

.landing-container .z-font-subtitle,.landing-container .z-font-subtitle * {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-subtitle,.landing-container .z-font-subtitle * {
        font-size:16px;
        line-height: 1.5
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-subtitle,.landing-container .z-font-subtitle * {
        font-size:16px;
        line-height: 1.5
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-subtitle,.landing-container .z-font-subtitle * {
        font-size:16px;
        line-height: 1.5
    }
}

.landing-container .z-font-body-2,.landing-container .z-font-body-2 * {
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-body-2,.landing-container .z-font-body-2 * {
        font-size:16px;
        line-height: 1.5
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-body-2,.landing-container .z-font-body-2 * {
        font-size:16px;
        line-height: 1.5
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-body-2,.landing-container .z-font-body-2 * {
        font-size:16px;
        line-height: 1.5
    }
}

.landing-container .z-font-body-1,.landing-container .z-font-body-1 * {
    font-size: 14px;
    line-height: 1.7;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-body-1,.landing-container .z-font-body-1 * {
        font-size:14px;
        line-height: 1.7
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-body-1,.landing-container .z-font-body-1 * {
        font-size:14px;
        line-height: 1.7
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-body-1,.landing-container .z-font-body-1 * {
        font-size:14px;
        line-height: 1.7
    }
}

.landing-container .z-font-descriptions,.landing-container .z-font-descriptions * {
    font-size: 12px;
    line-height: 1.7;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-descriptions,.landing-container .z-font-descriptions * {
        font-size:12px;
        line-height: 1.7
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-descriptions,.landing-container .z-font-descriptions * {
        font-size:12px;
        line-height: 1.7
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-descriptions,.landing-container .z-font-descriptions * {
        font-size:12px;
        line-height: 1.7
    }
}

.landing-container .z-font-tip,.landing-container .z-font-tip * {
    font-size: 28px;
    line-height: 1.2;
    font-weight: 400
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container .z-font-tip,.landing-container .z-font-tip * {
        font-size:14px;
        line-height: 1.7
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .z-font-tip,.landing-container .z-font-tip * {
        font-size:14px;
        line-height: 1.7
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .z-font-tip,.landing-container .z-font-tip * {
        font-size:14px;
        line-height: 1.7
    }
}

.landing-container .g--black {
    color: #151515
}

.landing-container .g--white {
    color: #fff
}

.landing-container .g--grey-light {
    color: #b3b3b3
}

.landing-container .g--grey-dark {
    color: #666
}

.landing-container {
    color: #151515;
    position: relative;
    padding-top: 0;
    z-index: 2;
    overflow-x: initial;
}

.landing-container #kv .note {
    font-size: 18px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .note {
        font-size:14px;
        width: 83.333vw;
        margin: 15px auto 0
    }
}

.landing-container #kv .kv-container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    margin-top: -51px;
    max-height: 1400px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #kv .kv-container {
        max-height:1050px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #kv .kv-container {
        max-height:875px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container {
        max-height:200vh;
        max-height: calc(var(--vh, 1vh)*200)
    }
}

.landing-container #kv .kv-container .black {
    color: #fff;
    background-color: #000
}

.landing-container #kv .kv-container .white {
    color: #000;
    background-color: #fff
}

.landing-container #kv .kv-container img[src],.landing-container #kv .kv-container img[srcset] {
    opacity: 1
}

.landing-container #kv .kv-container .container {
    height: 100%;
    margin: 0 auto;
    padding-top: 50px;
    width: 1700px;
    max-width: initial;
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #kv .kv-container .container {
        width:1275px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #kv .kv-container .container {
        width:960px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .container {
        width:83.33333333333333vw
    }
}

.landing-container #kv .kv-container .curtain,.landing-container #kv .kv-container .stage {
    width: 100%;
    height: 100%
}

.landing-container #kv .kv-container.clip-path .stage {
    z-index: 2;
    will-change: clip-path;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.clip-path .stage {
        -webkit-clip-path:inset(100% 0 0 0);
        clip-path: inset(100% 0 0 0)
    }
}

.landing-container #kv .kv-container .stage {
    overflow: hidden;
    position: relative
}

.landing-container #kv .kv-container .stage .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .stage .bg .container {
        width:94.44444444444444vw
    }
}

.landing-container #kv .kv-container .stage .bg .container .image-container {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    flex-direction: row-reverse
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .stage .bg .container .image-container {
        padding:110px 0 0
    }
}

.landing-container #kv .kv-container .stage .bg .container .image-container .wrapper {
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: end;
    justify-content: flex-end
}

.landing-container #kv .kv-container .stage .bg .container .image-container .wrapper img {
    height: 100%;
    width: auto;
    -webkit-transition: opacity .6s ease;
    transition: opacity .6s ease
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .stage .bg .container .image-container .wrapper {
        width:100%;
        height: 100%;
        -webkit-box-align: center;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center
    }

    .landing-container #kv .kv-container .stage .bg .container .image-container .wrapper>img {
        -webkit-box-flex: 0;
        flex: 0 0 auto;
        height: 100%;
        width: auto;
        min-height: 1px;
        min-width: 1px
    }
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    .landing-container #kv .kv-container .stage .fg {
        display:-webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between
    }

    .landing-container #kv .kv-container .stage .fg>img {
        height: 100%;
        width: auto;
        min-width: 1px;
        -webkit-box-flex: 0;
        flex: 0 0 auto
    }
}

.landing-container #kv .kv-container .curtain {
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .curtain {
        z-index:1
    }
}

.landing-container #kv .kv-container .curtain,.landing-container #kv .kv-container .curtain .wrapper {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100vw
}

.landing-container #kv .kv-container .curtain .text .slogan-container .more {
    opacity: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .curtain .text .slogan-container .more {
        opacity:1
    }
}

.landing-container #kv .kv-container .text {
    width: auto;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    justify-content: center;
    padding: 50px 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #kv .kv-container .text {
        padding:38px 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #kv .kv-container .text {
        padding:31px 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text {
        padding:20px 0 10px;
        -webkit-box-align: stretch;
        align-items: stretch;
        -webkit-box-pack: stretch;
        justify-content: stretch
    }
}

.landing-container #kv .kv-container .text .more,.landing-container #kv .kv-container .text .name,.landing-container #kv .kv-container .text .slogan {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    line-height: 1
}

.landing-container #kv .kv-container .text .name {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    margin-left: -.05em;
    font-size: 150px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #kv .kv-container .text .name {
        font-size:130px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #kv .kv-container .text .name {
        font-size:106px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text .name {
        font-size:42px
    }
}

.landing-container #kv .kv-container .text .name .line {
    display: -webkit-box;
    display: flex;
    overflow: hidden
}

.landing-container #kv .kv-container .text .name .line span {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.landing-container #kv .kv-container .text .slogan-container {
    margin-top: 30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    max-width: 591px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #kv .kv-container .text .slogan-container {
        margin-top:23px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #kv .kv-container .text .slogan-container {
        margin-top:19px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #kv .kv-container .text .slogan-container {
        max-width:512px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #kv .kv-container .text .slogan-container {
        max-width:418px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text .slogan-container {
        max-width:100vw;
        -webkit-box-flex: 1;
        flex: 1 1 auto;
        margin-top: 20px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text .slogan * {
        font-size:20px
    }
}

.landing-container #kv .kv-container .text .more {
    margin-top: 1em
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text .more * {
        font-size:18px
    }
}

.landing-container #kv .kv-container .text .p-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%
}

.landing-container #kv .kv-container .text .p-wrapper .placeholder,.landing-container #kv .kv-container .text .p-wrapper p {
    white-space: pre-wrap;
    width: 100%
}

.landing-container #kv .kv-container .text .p-wrapper .placeholder {
    visibility: hidden;
    padding-bottom: .05em;
    line-height: 1
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text .p-wrapper .placeholder {
        line-height:1.2
    }
}

.landing-container #kv .kv-container .text .p-wrapper p {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    line-height: 1
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container .text .p-wrapper p {
        line-height:1.2
    }
}

.landing-container #kv .kv-container.active .text .name .line span {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: kv-title-show;
    animation-name: kv-title-show;
    -webkit-animation-duration: .92s;
    animation-duration: .92s
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.active .text .name .line span {
        -webkit-animation-duration:.3s;
        animation-duration: .3s
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.active .text .name .line.line-1 span.g--ls-hidden {
        -webkit-animation-delay:0s;
        animation-delay: 0s
    }

    .landing-container #kv .kv-container.active .text .name .line.line-2 span.g--ls-hidden {
        -webkit-animation-delay: .2s;
        animation-delay: .2s
    }
}

.landing-container #kv .kv-container.active .text .name .line-1 span:first-child {
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.landing-container #kv .kv-container.active .text .name .line-1 span:nth-child(2) {
    -webkit-animation-delay: .08s;
    animation-delay: .08s
}

.landing-container #kv .kv-container.active .text .name .line-1 span:nth-child(3) {
    -webkit-animation-delay: .16s;
    animation-delay: .16s
}

.landing-container #kv .kv-container.active .text .name .line-1 span:nth-child(4) {
    -webkit-animation-delay: .24s;
    animation-delay: .24s
}

.landing-container #kv .kv-container.active .text .name .line-1 span:nth-child(5) {
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

.landing-container #kv .kv-container.active .text .name .line-1 span:nth-child(6) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.landing-container #kv .kv-container.active .text .name .line-1 span:nth-child(7) {
    -webkit-animation-delay: .48s;
    animation-delay: .48s
}

.landing-container #kv .kv-container.active .text .name .line-2 span:first-child {
    -webkit-animation-delay: .24s;
    animation-delay: .24s
}

.landing-container #kv .kv-container.active .text .name .line-2 span:nth-child(2) {
    -webkit-animation-delay: .32s;
    animation-delay: .32s
}

.landing-container #kv .kv-container.active .text .name .line-2 span:nth-child(3) {
    -webkit-animation-delay: .4s;
    animation-delay: .4s
}

.landing-container #kv .kv-container.active .text .name .line-2 span:nth-child(4) {
    -webkit-animation-delay: .48s;
    animation-delay: .48s
}

@-webkit-keyframes kv-title-show {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes kv-title-show {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.landing-container #kv .kv-container.active .text .p-wrapper p {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: kv-slogan-show;
    animation-name: kv-slogan-show;
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
    -webkit-animation-duration: 1.1s;
    animation-duration: 1.1s
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.active .text .p-wrapper p {
        -webkit-animation-name:kv-slogan-pt-show;
        animation-name: kv-slogan-pt-show;
        -webkit-animation-delay: .2s;
        animation-delay: .2s;
        -webkit-animation-duration: 1s;
        animation-duration: 1s
    }

    @-webkit-keyframes kv-slogan-pt-show {
        0% {
            -webkit-transform: translateY(100%);
            transform: translateY(100%)
        }

        to {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }

    @keyframes kv-slogan-pt-show {
        0% {
            -webkit-transform: translateY(100%);
            transform: translateY(100%)
        }

        to {
            -webkit-transform: translateY(0);
            transform: translateY(0)
        }
    }
}

@-webkit-keyframes kv-slogan-show {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes kv-slogan-show {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.landing-container #kv .kv-container.active .text .p-wrapper.more p {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.active .text .p-wrapper.more p {
        -webkit-animation-delay:.4s;
        animation-delay: .4s;
        -webkit-animation-duration: .8s;
        animation-duration: .8s
    }
}

.landing-container #kv .kv-container.active .curtain {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-duration: .8s;
    animation-duration: .8s;
    -webkit-animation-name: kv-curtain-out;
    animation-name: kv-curtain-out
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.active .curtain {
        -webkit-animation-name:kv-curtain-pt-out;
        animation-name: kv-curtain-pt-out;
        -webkit-animation-delay: .6s;
        animation-delay: .6s;
        -webkit-animation-duration: .6s;
        animation-duration: .6s
    }

    @-webkit-keyframes kv-curtain-pt-out {
        0% {
            height: 100%
        }

        to {
            height: 0
        }
    }

    @keyframes kv-curtain-pt-out {
        0% {
            height: 100%
        }

        to {
            height: 0
        }
    }
}

@-webkit-keyframes kv-curtain-out {
    0% {
        width: 100%
    }

    to {
        width: 0
    }
}

@keyframes kv-curtain-out {
    0% {
        width: 100%
    }

    to {
        width: 0
    }
}

.landing-container #kv .kv-container.active.clip-path .curtain {
    -webkit-animation-name: none;
    animation-name: none
}

.landing-container #kv .kv-container.active.clip-path .stage {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-name: kv-stage-in;
    animation-name: kv-stage-in;
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #kv .kv-container.active.clip-path .stage {
        -webkit-animation-name:kv-stage-pt-in;
        animation-name: kv-stage-pt-in;
        -webkit-animation-delay: .6s;
        animation-delay: .6s;
        -webkit-animation-duration: .6s;
        animation-duration: .6s
    }

    @-webkit-keyframes kv-stage-pt-in {
        0% {
            -webkit-clip-path: inset(100% 0 0);
            clip-path: inset(100% 0 0)
        }

        to {
            -webkit-clip-path: inset(0 0 0);
            clip-path: inset(0 0 0)
        }
    }

    @keyframes kv-stage-pt-in {
        0% {
            -webkit-clip-path: inset(100% 0 0);
            clip-path: inset(100% 0 0)
        }

        to {
            -webkit-clip-path: inset(0 0 0);
            clip-path: inset(0 0 0)
        }
    }
}

@-webkit-keyframes kv-stage-in {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0)
    }

    to {
        -webkit-clip-path: inset(0);
        clip-path: inset(0)
    }
}

@keyframes kv-stage-in {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0)
    }

    to {
        -webkit-clip-path: inset(0);
        clip-path: inset(0)
    }
}

.landing-container #overview {
    background-color: #fff;
    overflow: hidden;
    width: 100%;
    padding-top: 50px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #overview {
        padding-top:38px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #overview {
        padding-top:31px
    }
}

.landing-container #overview .container {
    opacity: 0;
    -webkit-transition: opacity .6s ease;
    transition: opacity .6s ease;
    padding: 90px 0 60px;
    display: -webkit-box;
    display: flex
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #overview .container {
        padding:68px 0 45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #overview .container {
        padding:56px 0 38px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #overview .container {
        -webkit-transition:none;
        opacity: 1;
        transition: none;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        padding: 30px 0
    }
}

.landing-container #overview .container.show {
    opacity: 1
}

.landing-container #overview .container.show .script .keywords .keyword {
    -webkit-animation-name: overview-keywords-show;
    animation-name: overview-keywords-show;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out
}

.landing-container #overview .container.show .script .keywords .keyword:first-child {
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(2) {
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(3) {
    -webkit-animation-duration: .4s;
    animation-duration: .4s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(4) {
    -webkit-animation-duration: .5s;
    animation-duration: .5s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(5) {
    -webkit-animation-duration: .6s;
    animation-duration: .6s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(6) {
    -webkit-animation-duration: .7s;
    animation-duration: .7s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(7) {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.landing-container #overview .container.show .script .keywords .keyword:nth-child(8) {
    -webkit-animation-duration: .9s;
    animation-duration: .9s
}

.landing-container #overview .container.show .script .details.g--pt-hidden {
    -webkit-animation-name: overview-details-show;
    animation-name: overview-details-show;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-duration: 1s;
    animation-duration: 1s
}

@-webkit-keyframes overview-keywords-show {
    0% {
        -webkit-transform: translateY(400%);
        transform: translateY(400%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes overview-keywords-show {
    0% {
        -webkit-transform: translateY(400%);
        transform: translateY(400%)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@-webkit-keyframes overview-details-show {
    0% {
        -webkit-transform: translateY(300px);
        transform: translateY(300px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes overview-details-show {
    0% {
        -webkit-transform: translateY(300px);
        transform: translateY(300px)
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.landing-container #overview .container .script {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.landing-container #overview .container .script .keywords {
    position: relative;
    z-index: 2;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    align-self: flex-start
}

.landing-container #overview .container .script .keywords .keyword {
    cursor: pointer;
    color: #b3b3b3;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    user-select: none;
    overflow: hidden;
    -webkit-transform: translateY(400%);
    transform: translateY(400%)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #overview .container .script .keywords .keyword {
        -webkit-transform:translateY(0);
        transform: translateY(0)
    }
}

.landing-container #overview .container .script .keywords .keyword .w {
    line-height: 1.3;
    transition: color .2s ease-out,-webkit-transform .1s ease-out;
    -webkit-transition: color .2s ease-out,-webkit-transform .1s ease-out;
    transition: color .2s ease-out,transform .1s ease-out;
    transition: color .2s ease-out,transform .1s ease-out,-webkit-transform .1s ease-out;
    -webkit-transform: translateY(.1em);
    transform: translateY(.1em)
}

@media (orientation: portrait) and (max-width:568px) {
    .landing-container #overview .container .script .keywords .keyword .w {
        font-size:26px
    }
}

.landing-container #overview .container .script .details.g--pt-hidden {
    pointer-events: visible;
    margin-top: 20px;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    bottom: 12.365591397849464%;
    left: 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #overview .container .script .details.g--pt-hidden {
        margin-top:15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #overview .container .script .details.g--pt-hidden {
        margin-top:13px
    }
}

.landing-container #overview .container .script .details.g--pt-hidden .detail {
    max-width: 21em;
    display: none;
    position: absolute;
    bottom: 0;
    left: 0
}

.landing-container #overview .container .script.g--ls-hidden {
    -webkit-box-flex: 0;
    flex: 0 0 100%
}

.landing-container #overview .container .script.g--ls-hidden .details {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: start;
    align-items: flex-start;
    overflow: hidden
}

.landing-container #overview .container .script.g--ls-hidden .detail {
    font-size: 14px;
    line-height: 17px;
    -webkit-box-flex: 0;
    flex: 0 0 100%
}

.landing-container #overview .container .scenes {
    -webkit-box-flex: 1;
    flex: 1 1 auto;
    position: relative;
    height: calc(90vh - 50px);
    height: calc(var(--vh, 1vh)*90 - 50px);
    max-height: 930px;
    min-height: 800px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #overview .container .scenes {
        max-height:698px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #overview .container .scenes {
        max-height:581px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #overview .container .scenes {
        min-height:600px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #overview .container .scenes {
        min-height:500px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #overview .container .scenes {
        height:auto;
        max-height: 100vh;
        max-height: calc(var(--vh, 1vh)*100);
        min-height: 0;
        -webkit-box-flex: 0;
        flex: 0 0 255px
    }
}

.landing-container #overview .container .scenes .wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 0;
    -webkit-transition: opacity .6s ease-out;
    transition: opacity .6s ease-out
}

.landing-container #overview .container .scenes .scene {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    height: 75.26881720430107%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: end;
    justify-content: flex-end
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #overview .container .scenes .scene {
        width:100%;
        height: 90%;
        -webkit-box-pack: center;
        justify-content: center
    }
}

.landing-container #overview .container .scenes .scene img {
    height: 100%;
    width: auto;
    min-width: 1px
}

@media (max-width: 1024px) and (orientation:portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #overview .container .scenes {
        flex-basis:480px
    }
}

.landing-container #overview .container[data-selected="1"] .script .keywords .keyword:first-child .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="1"] .details .detail:first-child {
    margin-left: 0;
    display: block
}

.landing-container #overview .container[data-selected="1"] .scenes .wrapper:first-child {
    opacity: 1
}

.landing-container #overview .container[data-selected="2"] .script .keywords .keyword:nth-child(2) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="2"] .details .detail:first-child {
    margin-left: -100%
}

.landing-container #overview .container[data-selected="2"] .details .detail:nth-child(2) {
    display: block
}

.landing-container #overview .container[data-selected="2"] .scenes .wrapper:nth-child(2) {
    opacity: 1
}

.landing-container #overview .container[data-selected="3"] .script .keywords .keyword:nth-child(3) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="3"] .details .detail:first-child {
    margin-left: -200%
}

.landing-container #overview .container[data-selected="3"] .details .detail:nth-child(3) {
    display: block
}

.landing-container #overview .container[data-selected="3"] .scenes .wrapper:nth-child(3) {
    opacity: 1
}

.landing-container #overview .container[data-selected="4"] .script .keywords .keyword:nth-child(4) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="4"] .details .detail:first-child {
    margin-left: -300%
}

.landing-container #overview .container[data-selected="4"] .details .detail:nth-child(4) {
    display: block
}

.landing-container #overview .container[data-selected="4"] .scenes .wrapper:nth-child(4) {
    opacity: 1
}

.landing-container #overview .container[data-selected="5"] .script .keywords .keyword:nth-child(5) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="5"] .details .detail:first-child {
    margin-left: -400%
}

.landing-container #overview .container[data-selected="5"] .details .detail:nth-child(5) {
    display: block
}

.landing-container #overview .container[data-selected="5"] .scenes .wrapper:nth-child(5) {
    opacity: 1
}

.landing-container #overview .container[data-selected="6"] .script .keywords .keyword:nth-child(6) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="6"] .details .detail:first-child {
    margin-left: -500%
}

.landing-container #overview .container[data-selected="6"] .details .detail:nth-child(6) {
    display: block
}

.landing-container #overview .container[data-selected="6"] .scenes .wrapper:nth-child(6) {
    opacity: 1
}

.landing-container #overview .container[data-selected="7"] .script .keywords .keyword:nth-child(7) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="7"] .details .detail:first-child {
    margin-left: -600%
}

.landing-container #overview .container[data-selected="7"] .details .detail:nth-child(7) {
    display: block
}

.landing-container #overview .container[data-selected="7"] .scenes .wrapper:nth-child(7) {
    opacity: 1
}

.landing-container #overview .container[data-selected="8"] .script .keywords .keyword:nth-child(8) .w {
    color: #151515;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #overview .container[data-selected="8"] .details .detail:first-child {
    margin-left: -700%
}

.landing-container #overview .container[data-selected="8"] .details .detail:nth-child(8) {
    display: block
}

.landing-container #overview .container[data-selected="8"] .scenes .wrapper:nth-child(8) {
    opacity: 1
}

@-webkit-keyframes overview-scene-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes overview-scene-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-5%);
        transform: translateY(-5%)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.landing-container #phoneBody {
    position: relative
}

.landing-container #phoneBody .gallery {
    position: fixed;
    z-index: 99;
    top: -999vh;
    top: calc(var(--vh, 1vh)*-999);
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

.landing-container #phoneBody .gallery .bg-mask {
    background-color: rgba(0,0,0,.9);
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.landing-container #phoneBody .gallery .close {
    position: absolute;
    z-index: 2;
    top: 40px;
    right: 40px;
    width: 36px;
    height: 36px;
    color: #fff;
    cursor: pointer
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .close {
        top:130px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .close {
        top:120px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .close {
        right:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .close {
        right:25px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .close {
        width:27px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .close {
        width:23px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .close {
        height:27px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .close {
        height:23px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .close {
        top:20px;
        right: 10px;
        width: 24px;
        height: 24px
    }
}

.landing-container #phoneBody .gallery .arrow {
    width: 36px;
    height: 36px;
    position: absolute;
    z-index: 2;
    top: calc(50vh - 18px);
    top: calc(var(--vh, 1vh)*50 - 18px);
    cursor: pointer
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .arrow {
        width:27px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .arrow {
        width:23px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .arrow {
        height:27px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .arrow {
        height:23px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .arrow {
        top:calc(50vh - 14px);
        top: calc(var(--vh, 1vh)*50 - 14px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .arrow {
        top:calc(50vh - 11px);
        top: calc(var(--vh, 1vh)*50 - 11px)
    }
}

.landing-container #phoneBody .gallery .arrow.left {
    left: calc(34.375vw - 50px)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .arrow.left {
        left:calc(34.375vw - 38px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .arrow.left {
        left:calc(34.375vw - 31px)
    }
}

.landing-container #phoneBody .gallery .arrow.right {
    right: calc(34.375vw - 50px);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .arrow.right {
        right:calc(34.375vw - 38px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .arrow.right {
        right:calc(34.375vw - 31px)
    }
}

.landing-container #phoneBody .gallery .pic-display {
    position: relative;
    z-index: 2;
    width: 31.25vw;
    height: 46.875vw;
    overflow: hidden
}

.landing-container #phoneBody .gallery .pic-display .pic-container {
    position: absolute;
    top: 0;
    left: 0;
    transition: -webkit-transform .5s cubic-bezier(.45,0,.55,1);
    -webkit-transition: -webkit-transform .5s cubic-bezier(.45,0,.55,1);
    transition: transform .5s cubic-bezier(.45,0,.55,1);
    transition: transform .5s cubic-bezier(.45,0,.55,1),-webkit-transform .5s cubic-bezier(.45,0,.55,1);
    display: -webkit-box;
    display: flex
}

.landing-container #phoneBody .gallery .pic-display .pic-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 31.25vw;
    height: 46.875vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .pic-display .pic-container img {
        width:320px;
        height: 480px
    }
}

.landing-container #phoneBody .gallery .pic-display .pic-container .pic-1 {
    top: 3.9375vw;
    height: 39vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .pic-display .pic-container .pic-1 {
        top:40.5px;
        height: 399px
    }
}

.landing-container #phoneBody .gallery .pic-display .pic-container .pic-2 {
    top: .052499999999998vw;
    height: 46.77vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .pic-display .pic-container .pic-2 {
        top:.560000000000002px;
        height: 478.88px
    }
}

.landing-container #phoneBody .gallery .pic-display .pic-container .pic-3 {
    top: 1.9025vw;
    height: 43.07vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .pic-display .pic-container .pic-3 {
        top:19.5px;
        height: 441px
    }
}

.landing-container #phoneBody .gallery .pic-display .pic-container .pic-5,.landing-container #phoneBody .gallery .pic-display .pic-container .pic-8 {
    top: 12.1625vw;
    height: 22.55vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .pic-display .pic-container .pic-5,.landing-container #phoneBody .gallery .pic-display .pic-container .pic-8 {
        top:124.03px;
        height: 231.94px
    }
}


@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .pic-display {
        width:320px;
        height: 480px
    }
}

.landing-container #phoneBody .gallery .number {
    position: absolute;
    z-index: 2;
    top: calc(50vh + 23.4375vw + 30px);
    top: calc(var(--vh, 1vh)*50 + 23.4375vw + 30px);
    color: #fff;
    font-size: 28px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .gallery .number {
        top:calc(50vh + 23.4375vw + 23px);
        top: calc(var(--vh, 1vh)*50 + 23.4375vw + 23px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .gallery .number {
        top:calc(50vh + 23.4375vw + 19px);
        top: calc(var(--vh, 1vh)*50 + 23.4375vw + 19px)
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .gallery .number {
        top:calc(50vh + 270px);
        top: calc(var(--vh, 1vh)*50 + 270px);
        font-size: 18px
    }
}

.landing-container #phoneBody .part-1 {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 200vh;
    height: calc(var(--vh, 1vh)*200)
}

.landing-container #phoneBody .part-1 .sticky-part {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow-x: hidden
}

.landing-container #phoneBody .part-1 .nav-anchor {
    position: absolute;
    left: 0;
    bottom: -100px;
    width: 100%;
    height: 50px
}

.landing-container #phoneBody .phone-part {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100)
}

.landing-container #phoneBody .phone-part .container {
    position: relative;
    width: 1600px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container {
        width:100%
    }
}

.landing-container #phoneBody .phone-part .container img {
    cursor: pointer
}

.landing-container #phoneBody .phone-part .container .phone {
    position: absolute;
    z-index: 2;
    width: 402px;
    height: 816px;
    top: calc(50vh - 408px);
    top: calc(var(--vh, 1vh)*50 - 408px);
    left: 599px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .phone {
        width:301px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .phone {
        width:251px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .phone {
        height:612px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .phone {
        height:510px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .phone {
        top:calc(50vh - 306px);
        top: calc(var(--vh, 1vh)*50 - 306px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .phone {
        top:calc(50vh - 255px);
        top: calc(var(--vh, 1vh)*50 - 255px)
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .phone {
        left:449px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .phone {
        left:374px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .phone {
        width:53.1vw;
        height: 95vw;
        top: calc(50vh - 47.5vw);
        top: calc(var(--vh, 1vh)*50 - 47.5vw);
        left: 23.45vw
    }
}

.landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
    position: absolute;
    top: 50px;
    left: 0;
    width: 238px;
    height: 357px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        top:38px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        top:31px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        width:179px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        width:149px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        height:268px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        height:223px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .pic1,.landing-container #phoneBody .phone-part .container .pic4,.landing-container #phoneBody .phone-part .container .pic7 {
        width:120px;
        height: 180px;
        left: 30px
    }
}

.landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
    position: absolute;
    top: 50px;
    right: 0;
    width: 235px;
    height: 354px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
        top:38px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
        top:31px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
        width:176px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
        width:147px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
        height:266px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic8 {
        height:221px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .pic2,.landing-container #phoneBody .phone-part .container .pic5,.landing-container #phoneBody .phone-part .container .pic5 {
        width:120px;
        height: 180px;
        top: calc(100vh - 180px);
        top: calc(var(--vh, 1vh)*100 - 180px);
        right: 30px
    }
}

.landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
    position: absolute;
    top: calc(100vh - 400px);
    top: calc(var(--vh, 1vh)*100 - 400px);
    right: 170px;
    width: 235px;
    height: 354px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        top:calc(100vh - 300px);
        top: calc(var(--vh, 1vh)*100 - 300px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        top:calc(100vh - 250px);
        top: calc(var(--vh, 1vh)*100 - 250px)
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        right:128px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        right:106px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        width:176px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        width:147px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        height:266px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .pic3,.landing-container #phoneBody .phone-part .container .pic6,.landing-container #phoneBody .phone-part .container .pic9 {
        height:221px
    }
}

.landing-container #phoneBody .phone-part .container .color-text {
    position: absolute;
    z-index: 1;
    top: calc(50vh - 132px);
    top: calc(var(--vh, 1vh)*50 - 132px);
    width: 100%;
    text-align: center;
    white-space: nowrap;
    font-size: 219px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .color-text {
        top:calc(50vh - 99px);
        top: calc(var(--vh, 1vh)*50 - 99px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .color-text {
        top:calc(50vh - 82px);
        top: calc(var(--vh, 1vh)*50 - 82px)
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .color-text {
        font-size:164px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .color-text {
        font-size:137px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .color-text {
        font-size:60px;
        top: calc(50vh - 36px);
        top: calc(var(--vh, 1vh)*50 - 36px)
    }
}

.landing-container #phoneBody .phone-part .container .color-text.blue {
    color: #00b2d2
}

.landing-container #phoneBody .phone-part .container .color-text.black {
    color: #fff
}

.landing-container #phoneBody .phone-part .container .content-box {
    position: absolute;
    z-index: 3;
    top: 79.5vh;
    top: calc(var(--vh, 1vh)*79.5);
    left: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .content-box {
        left:30px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .option-box {
    display: -webkit-box;
    display: flex
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option {
    width: 39px;
    height: 39px;
    border: 2px solid #b3b3b3;
    border-radius: 50%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    cursor: pointer
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option {
        width:30px;
        height: 30px
    }
}

@media (max-width: 768px) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option {
        width:24px;
        height: 24px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option.active {
    border-color: #4e4e4e
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option.right {
    margin-left: 33px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option.right {
        margin-left:25px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option.right {
        margin-left:21px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option.right {
        margin-left:20px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option .circle {
    width: 26px;
    height: 26px;
    border-radius: 50%
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option .circle {
        width:22px;
        height: 22px
    }
}

@media (max-width: 768px) {
    .landing-container #phoneBody .phone-part .container .content-box .option-box .option .circle {
        width:16px;
        height: 16px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option .circle.blue {
    background-color: #00b2d2
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option .circle.black {
    background-color: #4e4e4e
}

.landing-container #phoneBody .phone-part .container .content-box .option-box .option .circle.gray {
    background-color: #777b82
}

.landing-container #phoneBody .phone-part .container .content-box .arrow-box {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 45px;
    cursor: pointer
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box {
        margin-top:34px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box {
        margin-top:28px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box {
        margin-top:20px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .arrow-box .arrow {
    width: 31px;
    height: 24px;
    transition: -webkit-transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
    transition: transform .25s linear;
    transition: transform .25s linear,-webkit-transform .25s linear
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .arrow {
        width:23px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .arrow {
        width:19px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .arrow {
        height:18px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .arrow {
        height:15px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .arrow {
        width:18px;
        height: 12px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .arrow-box .text {
    margin-left: 15px;
    font-size: 28px;
    line-height: 34px;
    color: #151515
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .text {
        font-size:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .text {
        font-size:18px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .text {
        line-height:26px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .text {
        line-height:21px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .phone-part .container .content-box .arrow-box .text {
        margin-left:7px;
        font-size: 14px
    }
}

.landing-container #phoneBody .phone-part .container .content-box .arrow-box .text.white {
    color: #fff
}

.landing-container #phoneBody .phone-part .container .content-box .arrow-box:hover .arrow {
    -webkit-transform: translateX(30%);
    transform: translateX(30%)
}

.landing-container #phoneBody .part-gray {
    z-index: 3;
    background-color: #000
}

.landing-container #phoneBody .part-blue,.landing-container #phoneBody .part-gray {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-origin: top center;
    transform-origin: top center;
    overflow: hidden
}

.landing-container #phoneBody .part-blue {
    z-index: 2;
    background-color: #fff
}

.landing-container #phoneBody .part-black {
    position: relative;
    z-index: 1;
    background-color: #000
}

.landing-container #phoneBody .part-2 {
    position: relative;
    z-index: 1;
    background-color: #f9f9f9;
    width: 100%;
    height: 350vh;
    height: calc(var(--vh, 1vh)*350);
    margin-top: -40vh;
    margin-top: calc(var(--vh, 1vh)*-40)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 {
        height:380vh;
        height: calc(var(--vh, 1vh)*380)
    }
}

.landing-container #phoneBody .part-2 .sticky-part-2 {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow: hidden
}

.landing-container #phoneBody .part-2 .left-phone {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 48vw;
    height: 20.5vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 .left-phone {
        width:78vw;
        height: 36.3vw;
        top: 50px
    }
}

.landing-container #phoneBody .part-2 .right-phone {
    position: absolute;
    bottom: 0;
    left: 50vw;
    width: 46.875vw;
    height: 41.4vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 .right-phone {
        z-index:3;
        left: calc(100vw - 37.44vh);
        left: calc(100vw - var(--vh, 1vh)*37.44);
        width: 37.44vh;
        width: calc(var(--vh, 1vh)*37.44);
        height: 50vh;
        height: calc(var(--vh, 1vh)*50)
    }
}

.landing-container #phoneBody .part-2 .right-phone .phone1,.landing-container #phoneBody .part-2 .right-phone .phone2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.landing-container #phoneBody .part-2 .right-phone .phone1 {
    z-index: 2
}

.landing-container #phoneBody .part-2 .right-phone .phone2 {
    z-index: 1
}

.landing-container #phoneBody .part-2 .right-phone .focus {
    z-index: 2;
    position: absolute;
    top: 11.4vw;
    left: 8.1vw;
    width: 6.4vw;
    height: 6.4vw;
    opacity: 0;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear
}

.landing-container #phoneBody .part-2 .right-phone .focus.active {
    opacity: .8
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 .right-phone .focus {
        top:17.7vh;
        top: calc(var(--vh, 1vh)*17.7);
        left: 9.5vh;
        left: calc(var(--vh, 1vh)*9.5);
        width: 11.232vh;
        width: calc(var(--vh, 1vh)*11.232);
        height: 11.232vh;
        height: calc(var(--vh, 1vh)*11.232)
    }
}

.landing-container #phoneBody .part-2 .text-box {
    width: 1200px;
    margin: 0 auto;
    padding-top: 41.2vh;
    padding-top: calc(var(--vh, 1vh)*41.2)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .part-2 .text-box {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .part-2 .text-box {
        width:750px
    }
}

.landing-container #phoneBody .part-2 .text-box .title {
    color: #00b2d2;
    overflow: hidden
}

.landing-container #phoneBody .part-2 .text-box .title.black {
    color: #000
}

.landing-container #phoneBody .part-2 .text-box .text {
    margin-top: 70px;
    color: #000;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .part-2 .text-box .text {
        margin-top:53px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .part-2 .text-box .text {
        margin-top:44px
    }
}

.landing-container #phoneBody .part-2 .text-box .text span {
    color: #666
}

.landing-container #phoneBody .part-2 .text-box .text.width {
    width: 540px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .part-2 .text-box .text.width {
        width:405px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .part-2 .text-box .text.width {
        width:338px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 .text-box .text {
        margin-top:20px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 .text-box.box1 {
        padding-top:calc(36vw + 80px);
        width: 83.33vw;
        margin: 0 auto
    }
}

.landing-container #phoneBody .part-2 .text-box.box2 {
    position: absolute;
    top: -18vh;
    top: calc(var(--vh, 1vh)*-18);
    left: calc(50vw - 600px)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .part-2 .text-box.box2 {
        left:calc(50vw - 450px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .part-2 .text-box.box2 {
        left:calc(50vw - 375px)
    }
}

.landing-container #phoneBody .part-2 .text-box.box2 .title span {
    -webkit-transition: color .5s linear;
    transition: color .5s linear
}

.landing-container #phoneBody .part-2 .text-box.box2 .title span.blue {
    color: #00b2d2
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #phoneBody .part-2 .text-box.box2 {
        padding-top:0;
        top: 70px;
        left: 8.335vw;
        width: 83.33vw
    }

    .landing-container #phoneBody .part-2 .text-box.box2 .text.width {
        width: 100%
    }
}

.landing-container #phoneBody .part-2 .params-container {
    position: absolute;
    z-index: 2;
    top: calc(8.7vw - 32px);
    left: 12.5vw;
    width: 30vw
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container {
        top:calc(8.7vw - 26px)
    }
}

.landing-container #phoneBody .part-2 .params-container .params {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    color: #fff;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear;
    position: absolute;
    left: 0
}

.landing-container #phoneBody .part-2 .params-container .params.param1 {
    top: 0
}

.landing-container #phoneBody .part-2 .params-container .params.param2 {
    top: calc(7.5vw - 32px)
}

.landing-container #phoneBody .part-2 .params-container .params.param2 .left,.landing-container #phoneBody .part-2 .params-container .params.param2 .right {
    -webkit-transition-delay: .25s;
    transition-delay: .25s
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container .params.param2 {
        top:calc(7.8vw - 26px)
    }
}

.landing-container #phoneBody .part-2 .params-container .params.param3 {
    top: calc(7.5vw - 32px);
    opacity: 0
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container .params.param3 {
        top:calc(7.8vw - 26px)
    }
}

.landing-container #phoneBody .part-2 .params-container .params.param3 .right {
    color: #00b2d2
}

.landing-container #phoneBody .part-2 .params-container .params.param3.show {
    opacity: 1
}

.landing-container #phoneBody .part-2 .params-container .params.param4 {
    top: calc(13vw - 32px)
}

.landing-container #phoneBody .part-2 .params-container .params.param4 .left,.landing-container #phoneBody .part-2 .params-container .params.param4 .right {
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container .params.param4 {
        top:calc(13.3vw - 26px)
    }
}

.landing-container #phoneBody .part-2 .params-container .params.param5 {
    top: calc(17vw - 32px)
}

.landing-container #phoneBody .part-2 .params-container .params.param5 .left,.landing-container #phoneBody .part-2 .params-container .params.param5 .right {
    -webkit-transition-delay: .75s;
    transition-delay: .75s
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container .params.param5 {
        top:calc(17.5vw - 26px)
    }
}

.landing-container #phoneBody .part-2 .params-container .params .left {
    -webkit-box-flex: 1;
    flex: 1;
    height: 1px;
    background-color: #fff;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: left center;
    transform-origin: left center
}

.landing-container #phoneBody .part-2 .params-container .params .left,.landing-container #phoneBody .part-2 .params-container .params .right {
    transition: -webkit-transform .5s linear;
    -webkit-transition: -webkit-transform .5s linear;
    transition: transform .5s linear;
    transition: transform .5s linear,-webkit-transform .5s linear
}

.landing-container #phoneBody .part-2 .params-container .params .right {
    -webkit-box-flex: 2;
    flex: 2;
    white-space: nowrap;
    margin-left: 10px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    line-height: 1.2
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #phoneBody .part-2 .params-container .params .right {
        margin-left:8px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #phoneBody .part-2 .params-container .params .right {
        margin-left:6px
    }
}

.landing-container #phoneBody .part-2 .params-container .params .right .main {
    font-size: 30px
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container .params .right .main {
        font-size:24px
    }
}

.landing-container #phoneBody .part-2 .params-container .params .right .sub {
    font-size: 24px
}

@media (max-width: 1599px) and (min-width:769px) {
    .landing-container #phoneBody .part-2 .params-container .params .right .sub {
        font-size:20px
    }
}

.landing-container #phoneBody .part-2 .params-container.active .params .left {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.landing-container #phoneBody .part-2 .params-container.active .params .right {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #phoneBody .part-2 .params-container.disappear .param1,.landing-container #phoneBody .part-2 .params-container.disappear .param2,.landing-container #phoneBody .part-2 .params-container.disappear .param4,.landing-container #phoneBody .part-2 .params-container.disappear .param5 {
    opacity: 0
}

.landing-container #phoneBody .part-2 .mobile-params {
    position: absolute;
    z-index: 2;
    top: 10vh;
    top: calc(var(--vh, 1vh)*10);
    left: 8.335vw
}

.landing-container #phoneBody .part-2 .mobile-params .mobile-param {
    margin-top: 10px
}

.landing-container #phoneBody .part-2 .mobile-params .mobile-param.param2 {
    color: #00b2d2
}

.landing-container #quality {
    color: #fff
}

.landing-container #quality canvas img {
    display: none
}

.landing-container #quality .section {
    width: 100%;
    overflow: hidden
}

.landing-container #quality .section1 {
    background-color: #000;
    z-index: 1
}

.landing-container #quality .section1 .content-wrapper {
    position: relative;
    width: 1600px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section1 .content-wrapper {
        width:83.33333333333333vw;
        height: 100%
    }
}

.landing-container #quality .section1 .content-wrapper .feature-list {
    padding-top: 150px;
    margin-left: 100px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .feature-list {
        padding-top:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .feature-list {
        padding-top:94px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .feature-list {
        margin-left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .feature-list {
        margin-left:63px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section1 .content-wrapper .feature-list {
        padding-top:60px;
        padding-bottom: 20px;
        margin-left: 0;
        z-index: 2;
        position: relative;
        margin-bottom: 16px
    }
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:first-child .feature {
    transition: -webkit-transform .5s linear .1s;
    -webkit-transition: -webkit-transform .5s linear .1s;
    transition: transform .5s linear .1s;
    transition: transform .5s linear .1s,-webkit-transform .5s linear .1s
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:nth-child(2) .feature {
    transition: -webkit-transform .5s linear .2s;
    -webkit-transition: -webkit-transform .5s linear .2s;
    transition: transform .5s linear .2s;
    transition: transform .5s linear .2s,-webkit-transform .5s linear .2s
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:nth-child(3) .feature {
    transition: -webkit-transform .5s linear .3s;
    -webkit-transition: -webkit-transform .5s linear .3s;
    transition: transform .5s linear .3s;
    transition: transform .5s linear .3s,-webkit-transform .5s linear .3s
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:nth-child(4) .feature {
    transition: -webkit-transform .5s linear .4s;
    -webkit-transition: -webkit-transform .5s linear .4s;
    transition: transform .5s linear .4s;
    transition: transform .5s linear .4s,-webkit-transform .5s linear .4s
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:nth-child(5) .feature {
    transition: -webkit-transform .5s linear .5s;
    -webkit-transition: -webkit-transform .5s linear .5s;
    transition: transform .5s linear .5s;
    transition: transform .5s linear .5s,-webkit-transform .5s linear .5s
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:nth-child(6) .feature {
    transition: -webkit-transform .5s linear .6s;
    -webkit-transition: -webkit-transform .5s linear .6s;
    transition: transform .5s linear .6s;
    transition: transform .5s linear .6s,-webkit-transform .5s linear .6s
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper {
    overflow: hidden
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper .feature {
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper .feature.moveY {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #quality .section1 .content-wrapper .feature-list .cut-wrapper:last-child .feature {
    color: #00b2d2
}

.landing-container #quality .section1 .content-wrapper .remark-wrapper {
    position: absolute;
    z-index: 3;
    right: 0;
    width: 500px;
    margin-left: 100px;
    margin-top: 480px;
    overflow: hidden;
    bottom: 100px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        width:375px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        width:313px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        margin-left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        margin-left:63px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        margin-top:360px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        margin-top:300px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper {
        width:170px;
        left: 0;
        margin-left: 0;
        margin-bottom: 48px;
        bottom: 0
    }
}

.landing-container #quality .section1 .content-wrapper .remark-wrapper .word-wrapper {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    transition: -webkit-transform .5s linear .2s;
    -webkit-transition: -webkit-transform .5s linear .2s;
    transition: transform .5s linear .2s;
    transition: transform .5s linear .2s,-webkit-transform .5s linear .2s
}

.landing-container #quality .section1 .content-wrapper .remark-wrapper .word-wrapper.moveY {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section1 .content-wrapper .remark-wrapper .word-wrapper .z-font-headline-1 {
        font-size:18px;
        line-height: 22px
    }
}

.landing-container #quality .section1 .content-wrapper .img-wrapper {
    position: relative;
    z-index: 2;
    margin-left: calc(800px - 50vw);
    margin-bottom: 50px;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper {
        margin-left:calc(600px - 50vw)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper {
        margin-left:calc(500px - 50vw)
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper {
        margin-bottom:38px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper {
        margin-bottom:31px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper {
        position:relative;
        bottom: 0;
        left: calc(91.67vw - 269px);
        margin: 0
    }
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper {
        left:calc(91.67vw - 385px)
    }
}

.landing-container #quality .section1 .content-wrapper .img-wrapper img {
    width: 1693px;
    height: 1085px;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
    transition: -webkit-transform 1s linear;
    -webkit-transition: -webkit-transform 1s linear;
    transition: transform 1s linear;
    transition: transform 1s linear,-webkit-transform 1s linear
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper img {
        width:1270px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper img {
        width:1058px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper img {
        height:814px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper img {
        height:678px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section1 .content-wrapper .img-wrapper img {
        width:389.7px;
        height: 706.2px
    }
}

.landing-container #quality .section1 .content-wrapper .img-wrapper img.moveY {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #quality .section2 {
    z-index: 4;
    position: relative;
    background-color: #151515;
    margin-top: -1px
}

.landing-container #quality .section2 .content-wrapper {
    position: relative;
    width: 1600px;
    height: 950px;
    margin: 0 auto 3.5vw
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper {
        width:1000px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper {
        height:713px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper {
        height:594px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section2 .content-wrapper {
        width:83.33333333333333vw;
        height: unset;
        margin: 0 auto
    }
}

.landing-container #quality .section2 .content-wrapper .title-wrapper {
    position: relative;
    z-index: 1;
    padding-left: 200px;
    padding-top: 150px;
    margin-bottom: 140px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        padding-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        padding-left:125px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        padding-top:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        padding-top:94px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        margin-bottom:105px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        margin-bottom:88px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper {
        padding-left:0;
        padding-top: 60px;
        margin-bottom: 20px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section2 .content-wrapper .title-wrapper .z-font-headline-2 {
        font-size:20px;
        line-height: 24px
    }
}

.landing-container #quality .section2 .content-wrapper .img-wrapper {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper {
        position:relative;
        margin-bottom: 111px
    }
}

.landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
    position: absolute;
    width: 1400px;
    height: 950px;
    top: 0;
    left: 100px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
        width:1050px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
        width:875px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
        height:713px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
        height:594px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
        left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img1 {
        left:63px
    }
}

.landing-container #quality .section2 .content-wrapper .img-wrapper .img2 {
    position: relative;
    width: 487px;
    height: 253px;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img2 {
        width:365px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img2 {
        width:304px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img2 {
        height:189px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img2 {
        height:158px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section2 .content-wrapper .img-wrapper .img2 {
        position:absolute;
        top: calc(50% - 54px);
        left: calc(50% - 100px);
        width: 200px;
        height: 108px
    }
}

.landing-container #quality .section2 .content-wrapper .img-wrapper .img2 canvas {
    width: 100%;
    height: 100%;
    -webkit-transform: scale(1.01);
    transform: scale(1.01)
}

.landing-container #quality .section2 .content-wrapper .img-wrapper .img4 {
    width: 83.33333333333333vw;
    height: 38.055vw;
    position: relative;
    z-index: 2
}

.landing-container #quality .section2 .content-wrapper .remark-wrapper {
    position: absolute;
    width: 506px;
    margin-left: 822px;
    z-index: 1;
    bottom: 100px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        width:380px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        width:316px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        margin-left:617px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        margin-left:514px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        bottom:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        bottom:63px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section2 .content-wrapper .remark-wrapper {
        position:relative;
        width: 67.5vw;
        margin-top: 0;
        margin-bottom: 72px;
        margin-left: 0;
        bottom: 0
    }
}

.landing-container #quality .section3 {
    z-index: 5;
    position: relative;
    margin-top: -151px;
    background-color: #000
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 {
        margin-top:-1px
    }
}

.landing-container #quality .section3 .content-wrapper {
    width: 1600px;
    height: 56.25vw;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section3 .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section3 .content-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper {
        width:83.33333333333333vw;
        height: 217.2222vw
    }
}

.landing-container #quality .section3 .content-wrapper .title-wrapper {
    position: relative;
    z-index: 1;
    padding-left: 200px;
    padding-top: 150px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section3 .content-wrapper .title-wrapper {
        padding-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section3 .content-wrapper .title-wrapper {
        padding-left:125px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section3 .content-wrapper .title-wrapper {
        padding-top:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section3 .content-wrapper .title-wrapper {
        padding-top:94px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .title-wrapper {
        padding-left:0;
        padding-top: 60px;
        margin-bottom: 20px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .title-wrapper .z-font-headline-2 {
        font-size:20px;
        line-height: 24px
    }
}

.landing-container #quality .section3 .content-wrapper .img-wrapper {
    position: absolute;
    top: 0;
    left: 0
}

.landing-container #quality .section3 .content-wrapper .img-wrapper .img1,.landing-container #quality .section3 .content-wrapper .img-wrapper .img4 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 56.25vw
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .img-wrapper .img1,.landing-container #quality .section3 .content-wrapper .img-wrapper .img4 {
        height:217.2222vw
    }
}

.landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper {
    position: absolute;
    top: 18.59375vw;
    left: 50vw;
    opacity: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper {
        top:57.59375vw
    }
}

.landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img2,.landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img3 {
    position: absolute;
    width: 41.666667vw;
    height: 41.666667vw;
    -webkit-transform: translate(-50%,-4vw);
    transform: translate(-50%,-4vw)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img2,.landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img3 {
        -webkit-transform:translate(-51%,-4vw);
        transform: translate(-51%,-4vw)
    }
}

.landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img2 {
    z-index: 2
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img2 {
        width:170vw;
        height: 170vw
    }
}

.landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img3 {
    z-index: 3
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .img-wrapper .xinpian-wrapper .img3 {
        width:170vw;
        height: 170vw
    }
}

.landing-container #quality .section3 .content-wrapper .remark-wrapper {
    position: relative;
    z-index: 1;
    padding-top: 40px;
    margin-left: 200px;
    width: 618px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        padding-top:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        padding-top:25px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        margin-left:125px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        width:464px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        width:386px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .section3 .content-wrapper .remark-wrapper {
        width:267px;
        padding-top: 0;
        margin-left: 0;
        margin-bottom: 10px
    }
}

.landing-container #quality .note {
    margin-top: -9vh;
    margin-top: calc(var(--vh, 1vh)*-9);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    background-color: #000;
    z-index: 4;
    position: relative
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .note {
        margin-top:0
    }
}

.landing-container #quality .note .content-wrapper {
    width: 1200px;
    margin: 150px 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .note .content-wrapper {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .note .content-wrapper {
        width:750px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #quality .note .content-wrapper {
        margin:113px 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #quality .note .content-wrapper {
        margin:94px 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #quality .note .content-wrapper {
        width:83.33333333333333vw;
        margin: 60px 0 120px
    }
}

.landing-container #quality .blue {
    color: #00b2d2
}

.landing-container #quality .heavyGray {
    color: #666
}

.landing-container #quality .white {
    color: #fff
}

.landing-container #quality .gray {
    color: #b3b3b3
}

.landing-container #camera-0 {
    background: #fff;
    width: 100%
}

.landing-container #camera-0>* {
    position: relative
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .font-special-0 {
        font-size:18px;
        line-height: 22px
    }
}

.landing-container #camera-0 .part-0 {
    width: 1200px;
    margin: auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-0 {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-0 {
        width:750px
    }
}

.landing-container #camera-0 .part-0 .s-container {
    width: 100%;
    padding-top: 150px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-0 .s-container {
        padding-top:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-0 .s-container {
        padding-top:94px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-0 {
        width:83.33333333333333vw
    }

    .landing-container #camera-0 .part-0 .s-container {
        padding: 60px 0
    }
}

.landing-container #camera-0 .part-0 .container {
    position: relative;
    width: 100%;
    height: 100%
}

.landing-container #camera-0 .part-0 .desc {
    width: 636px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-0 .desc {
        width:477px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-0 .desc {
        width:398px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-0 .desc {
        width:100%
    }
}

.landing-container #camera-0 .part-0 .img-wrapper {
    position: relative;
    width: 400px;
    height: 533px;
    margin: 150px auto 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        width:300px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        width:250px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        height:400px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        height:333px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        margin:113px auto 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        margin:94px auto 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-0 .img-wrapper {
        margin:30px auto 0;
        width: 83.33333333333333vw;
        height: auto
    }
}

.landing-container #camera-0 .part-0 .img-wrapper .people {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-0 .img-wrapper .people {
        position:relative;
        width: 83.33333333333333vw;
        height: 110.83333333333333vw
    }
}

.landing-container #camera-0 .part-0 .img-wrapper .people img {
    width: 100%;
    height: 100%
}

.landing-container #camera-0 .part-0 .img-wrapper .people-0 {
    z-index: 0
}

.landing-container #camera-0 .part-0 .img-wrapper .people-1 {
    z-index: 1
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-0 .img-wrapper .people-1 {
        margin-top:-55.416666666666664vw
    }
}

.landing-container #camera-0 .part-0 .img-wrapper .people-2 {
    z-index: 2
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-0 .img-wrapper .people-2 {
        margin-top:-55.416666666666664vw
    }
}

.landing-container #camera-0 .part-0 .img-wrapper .people-2 .final-people {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.landing-container #camera-0 .part-1 {
    width: 100%;
    margin-top: 250px;
    background: #000;
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-1 {
        margin-top:188px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-1 {
        margin-top:156px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-1 {
        margin-top:10px;
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }
}

.landing-container #camera-0 .part-1 .desc {
    z-index: 2;
    position: absolute;
    top: 150px;
    left: calc(50vw - 600px);
    color: #fff
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-1 .desc {
        top:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-1 .desc {
        top:94px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-1 .desc {
        left:calc(50vw - 450px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-1 .desc {
        left:calc(50vw - 375px)
    }
}

@media (min-width: 2200px) {
    .landing-container #camera-0 .part-1 .desc {
        top:250px;
        left: 680px
    }
}

.landing-container #camera-0 .part-1 .desc .content {
    width: 445px;
    margin-top: 40px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-1 .desc .content {
        width:334px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-1 .desc .content {
        width:278px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-0 .part-1 .desc .content {
        margin-top:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-0 .part-1 .desc .content {
        margin-top:25px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-1 .desc {
        top:60px;
        left: 8.333333333333334vw
    }

    .landing-container #camera-0 .part-1 .desc .content {
        width: 100%;
        margin-top: 60px
    }
}

.landing-container #camera-0 .part-1 .bg {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-0 .part-1 .bg {
        height:150vw
    }
}

.landing-container #camera-0 .part-1 img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

.landing-container #camera-1 {
    background: #fff
}

.landing-container #camera-1>* {
    position: relative
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .font-special-0 {
        font-size:18px;
        line-height: 22px
    }

    .landing-container #camera-1 .font-special-1 {
        font-size: 14px;
        line-height: 17px
    }

    .landing-container #camera-1 .font-special-2 {
        font-size: 16px;
        line-height: 19px
    }
}

.landing-container #camera-1 .overflow-x {
    width: 100%;
    overflow: hidden
}

.landing-container #camera-1 .camera2-sticky {
    position: relative;
    width: 100%
}

.landing-container #camera-1 .camera2-sticky .s-item,.landing-container #camera-1 .camera2-sticky .s-item>* {
    width: 100%;
    height: calc(100vh - 48px);
    height: calc(var(--vh, 1vh)*100 - 48px)
}

.landing-container #camera-1 .camera2-sticky .s-item>* {
    display: -webkit-box;
    display: flex
}

.landing-container #camera-1 .camera2-sticky .s-item .item-0 {
    position: relative;
    background: #fff;
    -webkit-box-align: center;
    align-items: center
}

.landing-container #camera-1 .camera2-sticky .s-item .item-1 {
    -webkit-box-align: center;
    align-items: center
}

.landing-container #camera-1 .camera2-sticky .s-item .item-1,.landing-container #camera-1 .camera2-sticky .s-item .item-2 {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none
}

.landing-container #camera-1 .camera2-sticky .s-item .item-2 {
    background-color: #151515
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .camera2-sticky .s-item .item-2 {
        height:100vh;
        height: calc(var(--vh, 1vh)*100)
    }
}

.landing-container #camera-1 .camera2-sticky .s-item .item-2 .text-wrapper {
    position: absolute;
    top: 0;
    display: -webkit-box;
    display: flex;
    white-space: nowrap
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .camera2-sticky .s-item .item-2 .text-wrapper {
        width:83.33333333333333vw;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.landing-container #camera-1 .part-0 {
    padding: 90px 0 70px;
    background: #151515
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-0 {
        padding:68px 0 53px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-0 {
        padding:56px 0 44px
    }
}

.landing-container #camera-1 .part-0 .container {
    margin: auto;
    width: 1200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-0 .container {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-0 .container {
        width:750px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-0 {
        padding:40px 0 60px
    }

    .landing-container #camera-1 .part-0 .container {
        width: 83.33333333333333vw
    }
}

.landing-container #camera-1 .part-0 .desc {
    width: 765px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-0 .desc {
        width:574px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-0 .desc {
        width:478px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-0 .desc {
        width:100%
    }
}

.landing-container #camera-1 .part-0 .img-wrapper {
    margin: 70px auto 0;
    width: 900px;
    height: 704px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        margin:53px auto 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        margin:44px auto 0
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        width:675px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        width:563px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        height:528px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        height:440px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-0 .img-wrapper {
        width:83.33333333333333vw;
        height: 107.5vw;
        margin-top: 18px
    }
}

.landing-container #camera-1 .part-0 .img-wrapper img {
    width: 100%;
    height: 100%
}

.landing-container #camera-1 .part-1 {
    width: 100%;
    height: 170vh;
    height: calc(var(--vh, 1vh)*170)
}

.landing-container #camera-1 .part-1 .bg {
    position: relative;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    background: #f9f9f9;
    overflow: hidden
}

.landing-container #camera-1 .part-1 .bg .img-women {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg {
        height:calc(100vh - 48px);
        height: calc(var(--vh, 1vh)*100 - 48px)
    }

    .landing-container #camera-1 .part-1 .bg .img-women {
        position: absolute;
        top: calc(50% - 28vw - 48px);
        width: 100%;
        height: 56.25vw
    }
}

.landing-container #camera-1 .part-1 .bg .bg-gap {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: calc(100% + 2px);
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    -webkit-box-pack: stretch;
    justify-content: stretch;
    -webkit-box-align: stretch;
    align-items: stretch
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg .bg-gap {
        top:calc(50% - 28vw - 48px);
        height: 56.25vw
    }
}

.landing-container #camera-1 .part-1 .bg .bg-gap .gap {
    background: #151515;
    -webkit-box-flex: 2;
    flex-grow: 2;
    flex-shrink: 1;
    flex-basis: 0;
    will-change: flex;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg .bg-gap .gap {
        background:#f9f9f9
    }
}

.landing-container #camera-1 .part-1 .bg .bg-gap .view {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: stretch;
    justify-content: stretch;
    -webkit-box-align: stretch;
    align-items: stretch;
    flex-shrink: 1;
    flex-basis: 0;
    -webkit-box-flex: 1;
    flex-grow: 1
}

.landing-container #camera-1 .part-1 .bg .bg-gap .view.in {
    -webkit-box-flex: 8;
    flex-grow: 8
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg .bg-gap .view {
        -webkit-box-flex:2;
        flex-grow: 2
    }

    .landing-container #camera-1 .part-1 .bg .bg-gap .view.in {
        -webkit-box-flex: 8;
        flex-grow: 8
    }
}

.landing-container #camera-1 .part-1 .bg .camera {
    position: absolute;
    width: 1300px;
    height: 600px;
    bottom: 0;
    right: 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        width:975px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        width:813px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        height:450px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        height:375px
    }
}

@media (min-width: 2560px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        width:1714px;
        height: 790px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg .camera {
        width:84.72222222222221vw;
        height: 69.44444444444444vw;
        bottom: 0;
        right: 0
    }
}

.landing-container #camera-1 .part-1 .bg .camera img {
    width: 100%;
    height: 100%
}

@media (min-width: 2560px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        width:1286px
    }
}

@media (min-width: 2560px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        width:1071px
    }
}

@media (min-width: 2560px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        height:593px
    }
}

@media (min-width: 2560px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .camera {
        height:494px
    }
}

.landing-container #camera-1 .part-1 .bg .title {
    position: absolute;
    top: 130px;
    left: calc(50vw - 600px)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .title {
        top:98px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .title {
        top:81px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .title {
        left:calc(50vw - 450px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .title {
        left:calc(50vw - 375px)
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg .title {
        top:40px;
        left: 8.333333333333334vw
    }
}

@media (min-width: 2560px) {
    .landing-container #camera-1 .part-1 .bg .title {
        top:230px
    }
}

.landing-container #camera-1 .part-1 .bg .tips-c {
    position: absolute;
    top: 310px;
    left: calc(50vw - 600px);
    width: 820px;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        top:233px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        top:194px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        left:calc(50vw - 450px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        left:calc(50vw - 375px)
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        width:615px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        width:513px
    }
}

.landing-container #camera-1 .part-1 .bg .tips-c .tip-1 {
    margin-top: 30px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-1 .bg .tips-c .tip-1 {
        margin-top:23px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-1 .bg .tips-c .tip-1 {
        margin-top:19px
    }
}

@media (min-width: 2560px) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        top:420px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-1 .bg .tips-c {
        -webkit-box-orient:vertical;
        -webkit-box-direction: normal;
        flex-direction: column;
        top: 150px;
        left: 8.333333333333334vw
    }

    .landing-container #camera-1 .part-1 .bg .tips-c .tips {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .landing-container #camera-1 .part-1 .bg .tips-c .tips.tip-1 {
        margin-top: 14px
    }
}

.landing-container #camera-1 .part-2 {
    background: #fff;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-2 {
        margin-top:30px
    }
}

.landing-container #camera-1 .part-2 .tips {
    margin-top: 30px
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    .landing-container #camera-1 .part-2 .tips {
        text-align:center
    }
}

.landing-container #camera-1 .part-2 .desc {
    width: 802px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .desc {
        width:602px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .desc {
        width:501px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-2 .desc {
        width:100%
    }
}

.landing-container #camera-1 .part-2 .img-wrapper {
    position: relative;
    margin-top: 80px;
    width: 780px;
    height: 516px;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        margin-top:60px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        margin-top:50px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        width:585px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        width:488px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        height:387px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        height:323px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-2 .img-wrapper {
        margin-top:30px;
        width: 100vw;
        height: 66vw
    }
}

.landing-container #camera-1 .part-2 .img-wrapper .peoples {
    width: 100%;
    height: 100%
}

.landing-container #camera-1 .part-2 .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: all .5s;
    transition: all .5s
}

.landing-container #camera-1 .part-2 .mask.active {
    opacity: 0
}

.landing-container #camera-1 .part-2 .mask img {
    width: 100%;
    height: 100%
}

.landing-container #camera-1 .part-2 .change-btn {
    position: relative;
    width: 120px;
    height: 60px;
    margin: 36px auto 0;
    background: #151515;
    border-radius: 45px;
    display: -webkit-box;
    display: flex
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .change-btn {
        width:90px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .change-btn {
        width:75px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .change-btn {
        height:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .change-btn {
        height:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .change-btn {
        margin:27px auto 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .change-btn {
        margin:23px auto 0
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .change-btn {
        border-radius:34px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .change-btn {
        border-radius:28px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-2 .change-btn {
        width:60px;
        height: 30px;
        margin: 30px auto 0
    }
}

.landing-container #camera-1 .part-2 .change-btn .left-btn,.landing-container #camera-1 .part-2 .change-btn .right-btn {
    position: relative;
    width: 60px;
    height: 60px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    border-radius: 50%
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .change-btn .left-btn,.landing-container #camera-1 .part-2 .change-btn .right-btn {
        width:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .change-btn .left-btn,.landing-container #camera-1 .part-2 .change-btn .right-btn {
        width:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-2 .change-btn .left-btn,.landing-container #camera-1 .part-2 .change-btn .right-btn {
        height:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-2 .change-btn .left-btn,.landing-container #camera-1 .part-2 .change-btn .right-btn {
        height:38px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-2 .change-btn .left-btn,.landing-container #camera-1 .part-2 .change-btn .right-btn {
        width:30px;
        height: 30px
    }
}

.landing-container #camera-1 .part-2 .change-btn .left-btn img,.landing-container #camera-1 .part-2 .change-btn .right-btn img {
    width: 100%;
    height: 100%
}

.landing-container #camera-1 .part-2 .change-btn .left-btn .border,.landing-container #camera-1 .part-2 .change-btn .right-btn .border {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 50%
}

.landing-container #camera-1 .part-2 .change-btn .left-btn .border.click,.landing-container #camera-1 .part-2 .change-btn .right-btn .border.click {
    border: 2px solid #fff
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-2 .change-btn .left-btn .border.click,.landing-container #camera-1 .part-2 .change-btn .right-btn .border.click {
        border:1px solid #fff
    }
}

.landing-container #camera-1 .part-3 {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content
}

.landing-container #camera-1 .part-3 .desc .content {
    width: 730px;
    margin-top: 40px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-3 .desc .content {
        width:548px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-3 .desc .content {
        width:456px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-3 .desc .content {
        margin-top:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-3 .desc .content {
        margin-top:25px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .desc {
        margin-top:50px
    }

    .landing-container #camera-1 .part-3 .desc .content {
        width: 100%;
        margin-top: 20px
    }
}

.landing-container #camera-1 .part-3 .img-wrapper {
    position: relative;
    margin: 124px auto 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-3 .img-wrapper {
        margin:93px auto 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-3 .img-wrapper {
        margin:78px auto 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .img-wrapper {
        margin:40px auto 0;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.landing-container #camera-1 .part-3 .img-wrapper .img-item {
    position: relative;
    width: 589px;
    height: 443px;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-3 .img-wrapper .img-item {
        width:442px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-3 .img-wrapper .img-item {
        width:368px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-3 .img-wrapper .img-item {
        height:332px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-3 .img-wrapper .img-item {
        height:277px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .img-wrapper .img-item {
        width:83.33333333333333vw;
        height: 62.5vw
    }
}

.landing-container #camera-1 .part-3 .img-wrapper .img-item .blackm,.landing-container #camera-1 .part-3 .img-wrapper .img-item img {
    width: 100%;
    height: 100%
}

.landing-container #camera-1 .part-3 .img-wrapper .img-item .blackm>:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0
}

.landing-container #camera-1 .part-3 .img-wrapper .img-item .coverm {
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

.landing-container #camera-1 .part-3 .img-wrapper .img-item .coverm.show {
    opacity: 1
}

.landing-container #camera-1 .part-3 .img-wrapper .item-0-black img {
    -webkit-transform-origin: 68% 11%;
    transform-origin: 68% 11%
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .img-wrapper .item-0-black img {
        -webkit-transform-origin:68% 15%;
        transform-origin: 68% 15%
    }
}

.landing-container #camera-1 .part-3 .img-wrapper .item-1-black img {
    -webkit-transform-origin: 60% 16%;
    transform-origin: 60% 16%
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .img-wrapper .item-1-black img {
        -webkit-transform-origin:61% 19%;
        transform-origin: 61% 19%
    }
}

.landing-container #camera-1 .part-3 .img-wrapper .tips {
    margin-top: 20px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-3 .img-wrapper .tips {
        margin-top:15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-3 .img-wrapper .tips {
        margin-top:13px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .img-wrapper .tips {
        margin-top:10px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-3 .img-wrapper .item-1-black {
        margin-top:20px
    }
}

.landing-container #camera-1 .part-4 {
    padding: 150px 0 145px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 {
        padding:113px 0 109px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 {
        padding:94px 0 91px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-4 {
        padding:40px 0
    }
}

.landing-container #camera-1 .part-4 .desc .content {
    width: 880px;
    margin-top: 40px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .desc .content {
        width:660px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .desc .content {
        width:550px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .desc .content {
        margin-top:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .desc .content {
        margin-top:25px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-4 .desc .content {
        width:100%;
        margin-top: 20px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper {
    position: relative;
    width: 980px;
    margin: 87px auto 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper {
        width:735px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper {
        width:613px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper {
        margin:65px auto 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper {
        margin:54px auto 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-4 .img-wrapper {
        width:55vw;
        height: 116.11111111111111vw;
        margin: 41px auto 0
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .video {
    z-index: 1;
    width: 940px;
    height: 430px;
    margin: 15px 0 0 20px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video {
        width:705px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video {
        width:588px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video {
        height:323px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video {
        height:269px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video {
        margin:11px 0 0 15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video {
        margin:9px 0 0 13px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .video video {
    position: absolute;
    width: 980px;
    height: 550px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video video {
        width:735px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video video {
        width:613px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video video {
        height:413px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .video video {
        height:344px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .border-p {
    position: relative;
    z-index: 2;
    width: 980px;
    height: 460px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .border-p {
        width:735px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .border-p {
        width:613px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .border-p {
        height:345px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .border-p {
        height:288px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .replay {
    position: relative;
    z-index: 3;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin: 30px 0 0 862px;
    cursor: pointer
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay {
        margin:23px 0 0 647px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay {
        margin:19px 0 0 539px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .replay:hover .replay-btn {
    -webkit-transform: translateX(6px);
    transform: translateX(6px)
}

.landing-container #camera-1 .part-4 .img-wrapper .replay .replay-text {
    margin-left: 15px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-text {
        margin-left:11px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-text {
        margin-left:9px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
    width: 28px;
    height: 28px;
    margin-top: -3px;
    flex-shrink: 1;
    transition: -webkit-transform .5s;
    -webkit-transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s,-webkit-transform .5s;
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
        width:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
        width:18px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
        height:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
        height:18px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
        margin-top:-2px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn {
        margin-top:-2px
    }
}

.landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn img {
    width: 28px;
    height: 28px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn img {
        width:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn img {
        width:18px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn img {
        height:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay .replay-btn img {
        height:18px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-4 .img-wrapper .replay {
        margin:20px 0 0 57px
    }

    .landing-container #camera-1 .part-4 .img-wrapper .replay img {
        width: 18px;
        height: 18px;
        margin-right: 7px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-1 .part-4 .img-wrapper .poster {
        position:relative;
        width: 100%;
        height: 100%
    }

    .landing-container #camera-1 .part-4 .img-wrapper .border-p {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%
    }

    .landing-container #camera-1 .part-4 .img-wrapper .v-poster {
        z-index: 1;
        position: absolute;
        top: 2.222222222222222vw;
        left: 1.944444444444444vw;
        width: 51.11111111111111vw;
        height: 110.55555555555556vw;
        overflow: hidden
    }

    .landing-container #camera-1 .part-4 .img-wrapper .v-poster img {
        width: 51.11111111111111vw;
        height: 110.4vw
    }

    .landing-container #camera-1 .part-4 .img-wrapper .play {
        position: absolute;
        z-index: 3;
        top: 50%;
        left: 50%;
        width: 30px;
        height: 30px;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%)
    }
}

.landing-container #camera-2 {
    position: relative;
    background: #000;
    margin-top: -1px;
    padding-top: 30px;
    width: 100%;
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 {
        margin-top:50px
    }
}

.landing-container #camera-2>* {
    position: relative
}

.landing-container #camera-2 .line-height-0 {
    line-height: 1.2
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .font-special-0 {
        font-size:18px;
        line-height: 22px
    }
}

.landing-container #camera-2 .part-1 {
    padding-top: 170px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 {
        padding-top:128px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 {
        padding-top:106px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-1 {
        padding-top:60px
    }
}

.landing-container #camera-2 .part-1 .desc {
    color: #fff
}

.landing-container #camera-2 .part-1 .desc .content {
    margin-top: 40px;
    width: 652px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .desc .content {
        margin-top:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .desc .content {
        margin-top:25px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .desc .content {
        width:489px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .desc .content {
        width:408px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-1 .desc .content {
        width:100%;
        margin-top: 20px
    }
}

.landing-container #camera-2 .part-1 .img-wall {
    position: relative;
    padding-top: 1px;
    margin-top: 92px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall {
        margin-top:69px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall {
        margin-top:58px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-1 .img-wall {
        width:100%;
        margin-top: 60px
    }
}

.landing-container #camera-2 .part-1 .img-wall .g--delay {
    transition: -webkit-transform .4s ease-out;
    -webkit-transition: -webkit-transform .4s ease-out;
    transition: transform .4s ease-out;
    transition: transform .4s ease-out,-webkit-transform .4s ease-out
}

.landing-container #camera-2 .part-1 .img-wall .tips {
    color: hsla(0,0%,100%,.5);
    margin-top: 25px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .tips {
        margin-top:19px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .tips {
        margin-top:16px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-0,.landing-container #camera-2 .part-1 .img-wall .wall-0>*,.landing-container #camera-2 .part-1 .img-wall .wall-1,.landing-container #camera-2 .part-1 .img-wall .wall-1>*,.landing-container #camera-2 .part-1 .img-wall .wall-2,.landing-container #camera-2 .part-1 .img-wall .wall-2>*,.landing-container #camera-2 .part-1 .img-wall .wall-3,.landing-container #camera-2 .part-1 .img-wall .wall-3>* {
    position: absolute
}

.landing-container #camera-2 .part-1 .img-wall .wall-0 img,.landing-container #camera-2 .part-1 .img-wall .wall-1 img,.landing-container #camera-2 .part-1 .img-wall .wall-2 img,.landing-container #camera-2 .part-1 .img-wall .wall-3 img {
    width: 100%;
    height: 100%
}

.landing-container #camera-2 .part-1 .img-wall .wall-0 {
    top: 0;
    left: 160px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 {
        left:120px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 {
        left:100px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 {
        left:260px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
    top: 0;
    left: 0;
    z-index: 2;
    width: 480px;
    height: 360px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        width:360px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        width:300px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        height:270px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        height:225px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        width:624px;
        height: 468px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        width:468px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        width:390px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        height:351px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-0 {
        height:293px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
    top: 280px;
    left: 310px;
    z-index: 1;
    width: 272px;
    height: 362px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        top:210px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        top:175px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        left:233px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        left:194px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        width:204px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        width:170px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        height:272px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        height:226px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        width:354px;
        height: 471px;
        left: 480px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        width:265px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        width:221px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        height:353px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        height:294px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        left:360px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-1 {
        left:300px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
    top: 284px;
    left: 62px;
    z-index: 3;
    width: 292px;
    height: 33px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        top:213px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        top:178px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        left:47px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        left:39px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        width:219px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        width:183px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        height:25px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        height:21px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        width:380px;
        height: 43px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        width:285px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        width:237px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        height:32px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-0 .w-0-2 {
        height:27px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-1 {
    top: 700px;
    left: 160px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 {
        top:525px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 {
        top:438px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 {
        left:120px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 {
        left:100px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 {
        top:750px;
        left: 260px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
    top: -80px;
    left: 470px;
    width: 84px;
    height: 402px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        top:-60px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        top:-50px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        left:353px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        left:294px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        width:63px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        width:53px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        height:302px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        height:251px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        width:109px;
        height: 523px;
        top: -40px;
        left: 600px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        width:82px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        width:68px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        height:392px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-0 {
        height:327px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
    top: 150px;
    left: 100px;
    width: 360px;
    height: 480px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        top:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        top:94px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        left:63px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        width:270px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        width:225px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        height:360px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        height:300px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        width:468px;
        height: 624px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        width:351px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        width:293px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        height:468px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-1 .w-1-1 {
        height:390px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-2 {
    top: 570px;
    left: calc(100% - 978px)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        top:428px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        top:356px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        left:calc(100% - 734px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        left:calc(100% - 611px)
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        left:calc(100% - 1078px)
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
    top: 0;
    left: 0;
    width: 360px;
    height: 480px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        width:270px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        width:225px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        height:360px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        height:300px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        width:468px;
        height: 624px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        width:351px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        width:293px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        height:468px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-0 {
        height:390px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
    top: -170px;
    left: 680px;
    width: 292px;
    height: 545px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        top:-127px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        top:-106px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        left:510px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        left:425px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        width:219px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        width:183px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        height:409px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        height:341px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        width:380px;
        height: 709px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        width:285px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        width:237px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        height:531px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-1 {
        height:443px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
    top: 160px;
    left: 334px;
    width: 360px;
    height: 480px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        top:120px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        top:100px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        left:251px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        left:209px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        width:270px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        width:225px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        height:360px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        height:300px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        width:468px;
        height: 624px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        width:351px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        width:293px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        height:468px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-2 {
        height:390px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
    top: 650px;
    left: 0;
    width: 462px;
    height: 305px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        top:488px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        top:406px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        width:347px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        width:289px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        height:229px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        height:191px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        width:601px;
        height: 397px;
        top: 750px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        width:450px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        width:375px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        height:297px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-3 {
        height:248px
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
    top: 700px;
    left: -250px;
    width: 466px;
    height: 162px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        top:525px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        top:438px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        left:-187px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        left:-156px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        width:350px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        width:291px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        height:122px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        height:101px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        width:606px;
        height: 211px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        width:454px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        width:379px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        height:158px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 .w-2-4 {
        height:132px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        left:calc(100% - 809px)
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-2 {
        left:calc(100% - 674px)
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-3 {
    left: calc(100% - 520px)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 {
        left:calc(100% - 390px)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 {
        left:calc(100% - 325px)
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 {
        left:calc(100% - 602px)
    }
}

.landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
    top: -200px;
    left: 0;
    width: 360px;
    height: 480px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        top:-150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        top:-125px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        width:270px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        width:225px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        height:360px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        height:300px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        width:468px;
        height: 624px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        width:351px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        width:293px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        height:468px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 .w-3-0 {
        height:390px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 {
        left:calc(100% - 452px)
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-1 .img-wall .wall-3 {
        left:calc(100% - 376px)
    }
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-0 {
    width: 94.44444444444444vw;
    height: 70.83333333333333vw;
    margin: auto
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-1 {
    width: 50vw;
    height: 36.11111111111111vw;
    margin: 33.333333333333336vw 0 auto auto
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-2 {
    position: relative;
    width: 58.61111111111111vw;
    height: 6.388888888888888vw;
    z-index: 9;
    margin: -28.88888888888889vw 3.333333333333333vw auto auto
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-3 {
    width: 50vw;
    height: 66.66666666666667vw;
    margin: -12.5vw auto 0 2.777777777777778vw
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-4 {
    width: 50vw;
    height: 66.66666666666667vw;
    margin: -9.722222222222221vw 2.777777777777778vw 0 auto
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-5 {
    position: relative;
    z-index: 9;
    width: 94.44444444444444vw;
    height: 32.77777777777778vw;
    margin: -34.72222222222222vw auto 0 2.777777777777778vw
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-6 {
    width: 94.44444444444444vw;
    height: 125vw;
    margin: -12.5vw auto 0
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-7 {
    position: relative;
    width: 50vw;
    height: 66.66666666666667vw;
    margin: -55.55555555555556vw auto 0 10.555555555555555vw;
    z-index: 3
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-8 {
    position: relative;
    width: 100vw;
    height: 66.66666666666667vw;
    margin-top: -41.666666666666664vw;
    z-index: 1
}

.landing-container #camera-2 .part-1 .img-wall .pt-wall-9 {
    position: relative;
    width: 47.22222222222222vw;
    height: 88.05555555555556vw;
    margin: -83.33333333333333vw 8.333333333333334vw 0 auto;
    z-index: 2
}

.landing-container #camera-2 .part-2 {
    margin-top: 1500px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 {
        margin-top:1125px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 {
        margin-top:938px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 {
        margin-top:-50vw
    }
}

.landing-container #camera-2 .part-2 .pre {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.landing-container #camera-2 .part-2 .container {
    padding: 205px 0;
    display: -webkit-box;
    display: flex;
    margin-left: 200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .container {
        padding:154px 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .container {
        padding:128px 0
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .container {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .container {
        margin-left:125px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 .container {
        margin-left:300px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 .container {
        padding:60px 0;
        margin-left: 8.333333333333334vw;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        flex-direction: column
    }
}

.landing-container #camera-2 .part-2 .container .downlaod .g--grey-light {
    width: 238px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .container .downlaod .g--grey-light {
        width:179px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .container .downlaod .g--grey-light {
        width:149px
    }
}

.landing-container #camera-2 .part-2 figure {
    position: relative;
    width: 65vw;
    overflow: hidden;
    display: -webkit-box;
    display: flex;
    margin-left: auto
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure {
        width:83.33333333333333vw;
        margin: 40px 0 0
    }
}

.landing-container #camera-2 .part-2 figure .wrapper {
    position: relative;
    height: 450px;
    display: -webkit-box;
    display: flex;
    transition: -webkit-transform .2s;
    -webkit-transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s,-webkit-transform .2s
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .wrapper {
        height:338px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .wrapper {
        height:281px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .wrapper {
        height:550px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .wrapper {
        height:330px
    }
}

.landing-container #camera-2 .part-2 figure .wrapper>* {
    position: absolute;
    top: 0;
    left: 0
}

.landing-container #camera-2 .part-2 figure .wrapper img {
    position: absolute;
    left: 0;
    top: 0;
    height: 450px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .wrapper img {
        height:338px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .wrapper img {
        height:281px
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .wrapper img {
        height:550px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .wrapper img {
        height:330px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .wrapper img {
        height:413px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .wrapper img {
        height:344px
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .wrapper {
        height:413px
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .wrapper {
        height:344px
    }
}

.landing-container #camera-2 .part-2 figure .img-0 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-0 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-0 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-0 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-0 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-0 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-0 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-1 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-1 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-1 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-1 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-1 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-1 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-1 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-2 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-2 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-2 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-2 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-2 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-2 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-2 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-3 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-3 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-3 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-3 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-3 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-3 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-3 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-4 {
    width: 599px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-4 {
        width:449px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-4 {
        width:374px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-4 {
        width:732px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-4 {
        width:439px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-4 {
        width:549px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-4 {
        width:457px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-5 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-5 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-5 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-5 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-5 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-5 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-5 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-6 {
    width: 599px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-6 {
        width:449px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-6 {
        width:374px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-6 {
        width:732px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-6 {
        width:439px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-6 {
        width:549px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-6 {
        width:457px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-7 {
    width: 599px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-7 {
        width:449px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-7 {
        width:374px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-7 {
        width:732px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-7 {
        width:439px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-7 {
        width:549px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-7 {
        width:457px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-8 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-8 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-8 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-8 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-8 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-8 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-8 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-9 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-9 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-9 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-9 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-9 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-9 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-9 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-10 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-10 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-10 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-10 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-10 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-10 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-10 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-11 {
    width: 599px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-11 {
        width:449px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-11 {
        width:374px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-11 {
        width:732px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-11 {
        width:439px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-11 {
        width:549px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-11 {
        width:457px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-12 {
    width: 599px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-12 {
        width:449px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-12 {
        width:374px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-12 {
        width:732px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-12 {
        width:439px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-12 {
        width:549px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-12 {
        width:457px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-13 {
    width: 338px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-13 {
        width:253px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-13 {
        width:211px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-13 {
        width:413px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-13 {
        width:248px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-13 {
        width:309px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-13 {
        width:258px!important
    }
}

.landing-container #camera-2 .part-2 figure .img-14 {
    width: 599px!important
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-14 {
        width:449px!important
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-14 {
        width:374px!important
    }
}

@media (min-width: 2260px) {
    .landing-container #camera-2 .part-2 figure .img-14 {
        width:732px!important
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 figure .img-14 {
        width:439px!important
    }
}

@media (min-width: 2260px) and (min-width:1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 figure .img-14 {
        width:549px!important
    }
}

@media (min-width: 2260px) and (min-width:1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 figure .img-14 {
        width:457px!important
    }
}

.landing-container #camera-2 .part-2 .desc {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    margin: auto 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 .desc {
        width:83.33333333333333vw
    }
}

.landing-container #camera-2 .part-2 .desc .tips {
    margin-top: 30px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .tips {
        margin-top:23px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .tips {
        margin-top:19px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 .desc .tips {
        margin-top:20px
    }
}

.landing-container #camera-2 .part-2 .desc .download {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 30px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .download {
        margin-top:23px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .download {
        margin-top:19px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #camera-2 .part-2 .desc .download {
        margin-top:20px
    }
}

.landing-container #camera-2 .part-2 .desc .download img {
    width: 20px;
    height: 20px;
    margin: -5px 10px 0 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .download img {
        width:15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .download img {
        width:13px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .download img {
        height:15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .download img {
        height:13px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .download img {
        margin:-4px 8px 0 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .download img {
        margin:-3px 6px 0 0
    }
}

.landing-container #camera-2 .part-2 .desc .download .download-text:hover {
    color: #fff
}

.landing-container #camera-2 .part-2 .desc .click-area {
    color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    margin-top: 30px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .click-area {
        margin-top:23px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .click-area {
        margin-top:19px
    }
}

.landing-container #camera-2 .part-2 .desc .click-area .click-index {
    margin: 0 20px;
    width: 60px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .click-area .click-index {
        margin:0 15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .click-area .click-index {
        margin:0 13px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .click-area .click-index {
        width:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .click-area .click-index {
        width:38px
    }
}

.landing-container #camera-2 .part-2 .desc .btn-c {
    width: 42px;
    height: 42px;
    cursor: pointer
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .btn-c {
        width:32px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .btn-c {
        width:26px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .desc .btn-c {
        height:32px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .desc .btn-c {
        height:26px
    }
}

.landing-container #camera-2 .part-2 .pt-click-wrapper {
    display: -webkit-box;
    display: flex;
    margin: 20px 0 0;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper {
        margin:15px 0 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper {
        margin:13px 0 0
    }
}

.landing-container #camera-2 .part-2 .pt-click-wrapper .click-area {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.landing-container #camera-2 .part-2 .pt-click-wrapper .click-area>:first-child {
    margin-right: 20px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper .click-area>:first-child {
        margin-right:15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper .click-area>:first-child {
        margin-right:13px
    }
}

.landing-container #camera-2 .part-2 .pt-click-wrapper .btn-c {
    width: 28px;
    height: 28px;
    cursor: pointer
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper .btn-c {
        width:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper .btn-c {
        width:18px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper .btn-c {
        height:21px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #camera-2 .part-2 .pt-click-wrapper .btn-c {
        height:18px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .font-special-0 {
        font-size:18px;
        line-height: 22px
    }

    .landing-container .font-special-1 {
        font-size: 14px;
        line-height: 17px
    }

    .landing-container .font-special-2 {
        font-size: 16px;
        line-height: 19px
    }
}

.landing-container .font-special-3 {
    font-size: 12px;
    line-height: 14px
}

.landing-container #oxygenOS {
    color: #151515
}

.landing-container #oxygenOS .section {
    width: 100%
}

.landing-container #oxygenOS .section1 {
    background-color: #fff;
    height: 550vh;
    height: calc(var(--vh, 1vh)*550)
}

.landing-container #oxygenOS .section1 .nav-anchor {
    position: absolute;
    left: 0;
    top: 34%;
    width: 100%;
    height: 50px
}

.landing-container #oxygenOS .section1 .sticky-item {
    width: 100%;
    height: auto;
    overflow: hidden;
    min-height: 1000px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item {
        min-height:1050px
    }
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section1 .sticky-item {
        min-height:1150px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper {
    width: 1600px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper {
        width:83.33333333333333vw
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper {
    z-index: 3;
    position: relative
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
    padding-top: 54px;
    padding-bottom: 60px;
    margin-left: 100px;
    width: 1600px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        padding-top:41px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        padding-top:34px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        padding-bottom:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        padding-bottom:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        margin-left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        margin-left:63px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper {
        margin-left:0;
        padding-top: 60px;
        padding-bottom: 20px;
        width: 83.33333333333333vw
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper {
    overflow: hidden
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title3,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title3 {
    line-height: 66px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title3,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title3 {
        line-height:50px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title3,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title3 {
        line-height:41px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-1-wrapper .title3,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .white-wrapper .title-wrapper .title-2-wrapper .title3 {
        line-height:32px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
    width: 1105px;
    margin-left: 100px;
    margin-bottom: 60px;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        width:829px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        width:691px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        margin-left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        margin-left:63px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        margin-bottom:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        margin-bottom:38px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper {
        width:83.33333333333333vw;
        margin-left: 0;
        margin-bottom: 40px;
        overflow: unset
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .detail-wrapper .detail-line1 {
    -webkit-transform: translateY(110%);
    transform: translateY(110%)
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
    position: absolute;
    margin-left: 200px;
    margin-bottom: 60px;
    top: 54px;
    -webkit-transform: translateY(160%);
    transform: translateY(160%)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        margin-left:125px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        margin-bottom:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        margin-bottom:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        top:41px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        top:34px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper {
        margin-left:0;
        margin-bottom: 20px;
        top: 60px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .title-wrapper .ls-hidden {
        opacity:0
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .remark-wrapper.ls-hidden {
    position: absolute;
    top: 60px;
    opacity: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .black-wrapper .remark-wrapper.ls-hidden .z-font-subheading {
        font-size:16px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-y {
    position: relative;
    z-index: 2
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden {
    z-index: 2;
    position: relative;
    width: 1332px;
    margin: 0 auto;
    -webkit-transform-origin: 60.5% 0;
    transform-origin: 60.5% 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden {
        width:999px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden {
        width:833px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper {
    position: relative;
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 100%;
    margin: 0 auto;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 203px;
    height: 433px;
    position: relative
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div {
        width:152px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div {
        width:127px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div {
        height:325px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div {
        height:271px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 397px;
    height: 627px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div img {
        width:298px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div img {
        width:248px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div img {
        height:470px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img-div img {
        height:392px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img4,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img6,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img8 {
    margin-top: 72px
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img3,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img5,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7 {
    margin-bottom: 72px
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7 {
    opacity: 0
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7.show {
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
    width: 186px;
    height: auto;
    position: absolute;
    z-index: 2;
    top: 8px;
    left: 8px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
        width:140px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
        width:116px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
        top:6px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
        top:5px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
        left:6px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Pre {
        left:5px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .img7Main {
    opacity: 1
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper .imgborder {
    z-index: 5;
    pointer-events: none
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.pt-hidden .img-wrapper2 {
    margin-top: -12px
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden {
    z-index: 2;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100vw;
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden {
        top:-60px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 1232px;
    margin-left: 100px;
    margin-right: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper {
        width:924px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper {
        width:770px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper {
        margin-left:75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper {
        margin-left:63px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper {
        width:100vw;
        margin-left: 0
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
    -webkit-box-flex: 0;
    flex: 0 0 auto;
    width: 203px;
    height: 433px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
        width:152px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
        width:127px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
        height:325px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
        height:271px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
        width:102px;
        height: 217px
    }
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div {
        width:153px;
        height: 326px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div img {
    -webkit-box-flex: 0;
    flex: 0 0 auto
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div img {
        width:200px;
        height: 315px
    }
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img-div img {
        width:300px;
        height: 450px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img1,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img3,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7Pre {
        margin-bottom:0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img2,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img5,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img6 {
        margin-top:0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img6,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7 {
        margin-top:40px
    }
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img6,.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7 {
        margin-top:70px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7 {
    position: relative;
    opacity: 0
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7.show {
    opacity: 1;
    -webkit-transition: opacity .3s ease;
    transition: opacity .3s ease
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7 img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .canvas-wrapper .img7Pre {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.93,.955);
    transform: scale(.93,.955);
    top: 0;
    left: 0
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .canvas-wrapper .img7Pre {
        -webkit-transform:scale(.93,.91);
        transform: scale(.93,.91)
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .img7Main {
    opacity: 1
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .img-wrapper-g.ls-hidden .img-wrapper .imgborder {
    z-index: 5
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .bg-wrapper {
    opacity: 0
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .bg-wrapper .bg-word {
    z-index: 0;
    position: absolute;
    top: 700px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .bg-wrapper .bg-word {
        top:525px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .bg-wrapper .bg-word {
        top:438px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .bg-wrapper .bg-word {
        top:563px
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
    width: 827px;
    margin-top: 60px;
    margin-left: 573px;
    margin-bottom: 60px;
    opacity: 0
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        width:620px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        width:517px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        margin-top:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        margin-top:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        margin-left:430px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        margin-left:358px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        margin-bottom:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        margin-bottom:38px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper {
        width:83.33333333333333vw;
        margin-top: 0;
        margin-bottom: 128px;
        margin-left: 0;
        opacity: 1
    }
}

.landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper .z-font-subheading {
    line-height: 28.8px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section1 .sticky-item .content-wrapper .remark-wrapper .z-font-subheading {
        line-height:19px
    }
}

.landing-container #oxygenOS .section3 {
    background-color: #151515;
    height: 150vh;
    height: calc(var(--vh, 1vh)*150);
    margin-top: -163px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 {
        margin-top:-122px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 {
        margin-top:-102px
    }
}

.landing-container #oxygenOS .section3 .sticky-item {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item {
        height:-webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content
    }
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper {
    width: 1600px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper {
        width:83.33333333333333vw
    }
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
    padding-top: 54px;
    padding-bottom: 40px;
    margin-left: 200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        padding-top:41px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        padding-top:34px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        padding-bottom:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        padding-bottom:25px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        margin-left:125px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .title-wrapper {
        padding-top:60px;
        padding-bottom: 20px;
        margin-left: 0
    }
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
    width: 1600px;
    margin-bottom: 60px;
    margin-left: 200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        width:1000px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        margin-bottom:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        margin-bottom:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        margin-left:125px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper {
        width:88.88888888888889vw;
        margin-bottom: 20px;
        margin-left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .detail-wrapper .z-font-subheading {
        font-size:16px
    }
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper {
    width: 612px;
    height: 666px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper {
        width:459px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper {
        width:383px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper {
        height:500px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper {
        height:416px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper {
        width:83.33333333333333vw;
        height: 90.68627450980392vw
    }
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper img {
    width: 612px;
    height: 666px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper img {
        width:459px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper img {
        width:383px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper img {
        height:500px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper img {
        height:416px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper img {
        width:83.33333333333333vw;
        height: 90.68627450980392vw
    }
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper .img2 {
    position: absolute
}

.landing-container #oxygenOS .section3 .sticky-item .content-wrapper .img-wrapper .img1 {
    position: relative
}

.landing-container #oxygenOS .section4 {
    background-color: #fff;
    padding-bottom: 150px;
    margin-top: -1px;
    width: 100%;
    overflow: hidden
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 {
        padding-bottom:113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 {
        padding-bottom:94px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 {
        margin-top:-1px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 {
        margin-top:-1px;
        min-height: unset
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 {
        height:auto;
        min-height: unset;
        padding-bottom: 0
    }
}

.landing-container #oxygenOS .section4 .content-wrapper {
    width: 1600px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper {
        width:83.33333333333333vw
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
    padding-top: 54px;
    padding-bottom: 40px;
    margin-left: 200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        padding-top:41px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        padding-top:34px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        padding-bottom:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        padding-bottom:25px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        margin-left:125px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .title-wrapper {
        padding-top:60px;
        padding-bottom: 20px;
        margin-left: 0
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
    width: 827px;
    margin-bottom: 168px;
    margin-left: 200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        width:620px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        width:517px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        margin-bottom:126px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        margin-bottom:105px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        margin-left:125px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper {
        width:84.16666666666667vw;
        margin-left: 0;
        margin-bottom: 80px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .detail-wrapper .z-font-subheading {
        font-size:16px
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    -webkit-perspective: 1000px;
    perspective: 1000px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper {
        width:750px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper {
        padding-bottom:20px;
        width: 83.33333333333333vw;
        -webkit-perspective: 69.44vw;
        perspective: 69.44vw
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper img {
    width: 100%;
    height: 233px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper img {
        height:175px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper img {
        height:146px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper img {
        height:16.39vw
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .border,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .phone {
    width: 1200px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .border,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .phone {
        width:900px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .border,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .phone {
        width:750px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .border,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .phone {
        width:83.33333333333333vw
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .phone {
    position: relative;
    z-index: 1
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .border {
    z-index: 4;
    position: absolute;
    top: 0;
    left: 0;
    border-color: transparent !important;
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
    position: absolute;
    width: 1080px;
    height: 563px;
    left: 60px;
    margin-top: -428px;
    transform: rotateX(50deg);
    -webkit-transform: rotateX(50deg)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        width:810px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        width:675px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        height:422px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        height:352px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        left:45px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        left:38px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        margin-top:-321px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        margin-top:-267px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        width:83.33333333333333vw;
        height: 39.1vw;
        margin-top: 0;
        top: -17%;
        left: 0
    }
}

@media (orientation: portrait) and (min-width:569px) and (max-width:1024px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper,.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
        top:-10%
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .white-wrapper {
    z-index: 3;
    overflow: hidden
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .black-wrapper {
    z-index: 1
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord {
    position: absolute;
    font-size: 90px;
    margin-top: 243px;
    white-space: nowrap;
    color: #151515
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord {
        font-size:68px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord {
        font-size:56px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord {
        margin-top:182px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord {
        margin-top:152px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord {
        font-size:30px;
        margin-top: 0
    }
}

.landing-container #oxygenOS .section4 .content-wrapper .img-wrapper .moveWord.white {
    color: #fff
}

.landing-container #oxygenOS .section5 {
    background-color: #fff;
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 {
        height:auto
    }
}

.landing-container #oxygenOS .section5 .content-wrapper {
    width: 1600px;
    margin: 0 auto
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper {
        width:1200px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper {
        width:1000px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper {
        width:83.33333333333333vw
    }
}

.landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
    padding-top: 54px;
    padding-bottom: 40px;
    margin-left: 200px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        padding-top:41px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        padding-top:34px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        padding-bottom:30px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        padding-bottom:25px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        margin-left:125px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper .title-wrapper {
        padding-top:60px;
        padding-bottom: 20px;
        margin-left: 0
    }
}

.landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper {
    margin-left: 200px;
    width: 886px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper {
        margin-left:150px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper {
        margin-left:125px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper {
        width:665px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper {
        width:554px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper {
        width:83.33333333333333vw;
        margin-bottom: 80px;
        margin-left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper .detail-wrapper .z-font-subheading {
        font-size:16px
    }
}

.landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
    position: relative;
    margin: 30px auto 150px;
    width: 1111px;
    height: 522px
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        margin:23px auto 113px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        margin:19px auto 94px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        width:833px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        width:694px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        height:392px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        height:326px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper {
        margin:0 auto 120px 0;
        width: 72.22222222222221vw;
        height: 33.888888888888886vw
    }
}

.landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper {
    position: absolute;
    top: -50%;
    left: 50%;
    width: 522px;
    height: 1111px;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper {
        width:392px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper {
        width:326px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper {
        height:833px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper {
        height:694px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper {
        width:33.888888888888886vw;
        height: 72.22222222222221vw
    }
}

.landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%
}

.landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
    position: absolute;
    z-index: 1;
    top: 1306px;
    left: -20px;
    width: 560px;
    height: 64px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        top:980px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        top:816px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        left:-15px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        left:-12px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        width:420px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        width:350px
    }
}

@media (min-width: 1366px) and (max-width:1759px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        height:48px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        height:40px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container #oxygenOS .section5 .content-wrapper .img-wrapper .anime-wrapper .charge-line {
        top:89.16666666666667vw;
        left: -5.555555555555555vw;
        width: 45vw;
        height: 5.13vw
    }
}

.landing-container #oxygenOS .blue {
    color: #00b2d2
}

.landing-container #oxygenOS .heavyGray {
    color: #666
}

.landing-container #oxygenOS .white {
    color: #fff
}

.landing-container #oxygenOS .gray {
    color: #b3b3b3
}

.landing-container #popup-mask {
    z-index: 10;
    position: fixed;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: translateY(150vh);
    transform: translateY(150vh);
    background-color: #000
}

.landing-container #popup-mask.show {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.landing-container #popup-mask.fold,.landing-container #popup-mask.show {
    transition: -webkit-transform 1s;
    -webkit-transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s,-webkit-transform 1s
}

.landing-container #popup-mask video {
    width: 100%;
    z-index: 1
}

.landing-container #popup-mask .close {
    z-index: 2;
    position: absolute;
    top: 30px;
    right: 20px;
    width: 42px;
    height: 42px;
    cursor: pointer
}

.landing-container #popup-mask .close:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.landing-container #popup-mask .close:after,.landing-container #popup-mask .close:before {
    background: #fff;
    content: "";
    position: absolute;
    width: 3px;
    height: 40px;
    border-radius: 10px;
    left: 21px
}

.landing-container #popup-mask .close:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}

.landing-container img[data-srcset] {
    opacity: 0
}

.landing-container img[data-srcset].loaded {
    opacity: 1
}

.landing-container canvas img {
    display: none
}