.product-nav {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: -webkit-transform .4s ease;
    -webkit-transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease,-webkit-transform .4s ease;
    overflow: initial;
    background-color: initial;
    border-bottom: none;
}
.product-nav:before {
    content: "";
    top: 0;
    left: 0;
    background: -webkit-gradient(linear,left bottom,left top,from(transparent),color-stop(25%,#000));
    background: linear-gradient(0deg,transparent,#000 25%);
    opacity: 0;
    -webkit-transition: opacity .3s;
    transition: opacity .3s;
    pointer-events: none;
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}
.product-nav.fixed {
    background-color: initial;
}
.product-nav-list {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50vh;
    transform-origin: 50% 50vh;
    -webkit-transform: perspective(52.0833vw);
    transform: perspective(52.0833vw);
}
.product-nav-title {
    border: 1px solid #fcee0a;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 10;
    border-image-slice: 10 fill;
    border-image-source: url(../_images/nav-product-b05d0e.svg);
}
.product-nav-link {
    padding: 8px 20px;
    line-height: 3rem;
    font-size: 1rem;
}
.product-nav-link:nth-child(2) {
    border-left: none;
    color: #fcee0a !important;
}
.product-nav-tab,
.product-nav-actions {
    background-color: initial;
}
.product-nav-tab li a {
    color: #fcee0a;
    opacity: .4;
}
.product-nav-tab .active a,
.product-nav-tab li a:hover {
    color: #fcee0a;
    opacity: 1;
}
.product-nav-tab .active a:after {
    border-bottom-color: #fcee0a;
    opacity: 1;
}
.product-nav-tabs {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: rotateY(-7deg);
    transform: rotateY(-7deg);
}
.product-nav-actions {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: rotateY(-5deg);
    transform: rotateY(-5deg);
}

@media screen and (max-width: 768px) {
    .product-nav-title {
        border: unset;
        border-image-repeat: unset;
        border-image-outset: unset;
        border-image-width: unset;
        border-image-slice: unset;
        border-image-source: unset;
        position: relative;
    }
    .product-nav-link {
        color: #fcee0a;
        font-size: 14px !important;
    }
    .product-nav-list .pnlcv--left {
        width: 100%;
    }
    .product-nav-title:after {
        content: "";
        display: block;
        position: absolute;
        left: -15px;
        right: -15px;
        bottom: 0;
        height: 1px;
        background-color: #fcee0a;
    }
    .product-nav-link:nth-child(2) {
        color: #fcee0a !important;
        border-left: 1px solid #fcee0a;
        opacity: .4;
    }
    .product-nav-tabs,
    .product-nav-actions {
        -webkit-transform-origin: unset;
        transform-origin: unset;
        -webkit-transform: unset;
        transform: unset;
    }
    .product-nav-tabs {
        width: 74%;
        order: 0;
    }
    .product-nav-actions {
        order: 0;
        padding-left: 5px;
    }
}

.main-content {
    overflow-x: unset;
}
.hidden {
    display: none;
}
.border--yellow {
    border: 1px solid #fcee0a
}

.border--cyan {
    border: 1px solid #5ef6ff
}

.border--yellow-br,.border--yellow-tl {
    border: 1px solid #fcee0a;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 30;
    border-image-slice: 30 fill
}

@media (max-width: 1024px) and (orientation:portrait) {
    .border--yellow-br,.border--yellow-tl {
        border:1px solid #fcee0a;
        border-image-repeat: stretch;
        border-image-outset: 1;
        border-image-width: 10;
        border-image-slice: 10 fill
    }
}

.border--picture {
    border: 1px solid #5ef6ff;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 30;
    border-image-slice: 30 fill
}

.border--video {
    border: 1px solid #5ef6ff;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 200%;
    border-image-slice: 50% fill;
    border-image-outset: 1 1 7 1
}

.border--nav-product {
    border: 1px solid #fcee0a;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 10;
    border-image-slice: 10 fill
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .border--nav-product {
        border:none;
        -webkit-border-image: none;
        -o-border-image: none;
        border-image: none
    }
}

.border--nav-buy {
    border: 1px solid #5ef6ff;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 20;
    border-image-slice: 20 fill
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .border--nav-buy {
        border:none;
        -webkit-border-image: none;
        -o-border-image: none;
        border-image: none
    }
}

.border--option,.border--option-active,.border--option-left,.border--option-left-active,.border--option-right,.border--option-right-active {
    border: 1px solid #5ef6ff;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 20;
    border-image-slice: 20 fill
}

.border--spec-phone {
    border: 1px solid #5ef6ff;
    border-image-repeat: stretch;
    border-image-outset: 1;
    border-image-width: 80;
    border-image-slice: 80 fill
}

#loading {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    background-color: #000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    color: #5ef6ff
}

#loading .loading-screen-1 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

@media (max-width: 1024px) and (orientation:portrait) {
    #loading .loading-screen-1 {
        -webkit-box-align:unset;
        align-items: unset;
        margin-top: 20vh;
        margin-top: calc(var(--vh, 1vh)*20)
    }
}

#loading .loading-screen-1.done {
    -webkit-animation: flash .2s linear infinite;
    animation: flash .2s linear infinite
}

#loading .loading-screen-1 .warning-interface {
    position: relative;
    width: 900px
}

@media (orientation: portrait) and (max-width:720px) {
    #loading .loading-screen-1 .warning-interface {
        padding-bottom:20px
    }
}

#loading .loading-screen-1 .warning-interface .attention {
    width: 126px;
    height: 125px;
    margin: 0 auto;
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: opacity .12s linear,-webkit-transform .12s linear;
    -webkit-transition: opacity .12s linear,-webkit-transform .12s linear;
    transition: transform .12s linear,opacity .12s linear;
    transition: transform .12s linear,opacity .12s linear,-webkit-transform .12s linear;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

#loading .loading-screen-1 .warning-interface .attention svg {
    width: 100%;
    height: 100%
}

#loading .loading-screen-1 .warning-interface .attention.done {
    -webkit-animation: flash .2s linear infinite;
    animation: flash .2s linear infinite
}

#loading .loading-screen-1 .warning-interface .loading-text-1 {
    width: 100px;
    height: 30px;
    padding: 3px 10px;
    border: 1px solid #5ef6ff;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 1.3px;
    margin-top: 65px;
    -webkit-transition: width .3s linear;
    transition: width .3s linear;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

#loading .loading-screen-1 .warning-interface .loading-text-1 .box {
    width: 5px;
    height: 100%;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: width .5s linear,opacity .1s linear;
    transition: width .5s linear,opacity .1s linear;
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

#loading .loading-screen-1 .warning-interface .loading-text-1 .box .text {
    width: 260px;
    height: 100%
}

#loading .loading-screen-1 .warning-interface .loading-text-1.done {
    background-color: #5ef6ff;
    color: #000
}

#loading .loading-screen-1 .warning-interface .loading-text-box {
    width: 0;
    height: 42px;
    overflow: hidden;
    margin-top: 10px;
    padding-left: 10px;
    -webkit-transition: width .2s linear;
    transition: width .2s linear;
    white-space: nowrap
}

#loading .loading-screen-1 .warning-interface .loading-text-box .height-area {
    height: 14px;
    overflow: hidden;
    -webkit-transition: height .3s linear;
    transition: height .3s linear;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

#loading .loading-screen-1 .warning-interface .loading-text-box .line {
    font-size: 12px;
    line-height: 14px;
    letter-spacing: .94px
}

#loading .loading-screen-1 .warning-interface .loading-text-2 {
    margin-top: 15px;
    padding-left: 10px;
    font-size: 9px;
    line-height: 12px;
    letter-spacing: .6px
}

#loading .loading-screen-1 .warning-interface .loading-container {
    width: 100%;
    height: 85px;
    -webkit-clip-path: polygon(0 0,50% 0,50% 100%,0 100%);
    clip-path: polygon(0 0,50% 0,50% 100%,0 100%);
    transition: -webkit-clip-path .1s linear;
    -webkit-transition: -webkit-clip-path .1s linear;
    transition: clip-path .1s linear;
    transition: clip-path .1s linear,-webkit-clip-path .1s linear;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-bar {
    width: 100%;
    height: 20px;
    border: 1px solid #5ef6ff;
    margin-top: 12px;
    padding: 4px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-bar .bar {
    width: 0;
    height: 100%;
    background-color: #5ef6ff
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box {
    width: 100%;
    height: 65px;
    border-left: 1px solid #5ef6ff;
    border-right: 1px solid #5ef6ff;
    border-bottom: 1px solid #5ef6ff;
    display: -webkit-box;
    display: flex
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 {
    position: relative;
    width: 158px;
    display: -webkit-box;
    display: flex
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .left {
    position: absolute;
    left: 0;
    bottom: 5px;
    width: 69px;
    height: 10px;
    overflow: hidden;
    -webkit-transition: height .1s linear;
    transition: height .1s linear;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .left .content {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 69px;
    height: 35px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .left .content .error {
    width: 14px;
    height: 14px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .left .content .protocol {
    font-size: 12px;
    line-height: 1;
    letter-spacing: normal;
    -webkit-transform: scale(.567);
    transform: scale(.567);
    -webkit-transform-origin: top;
    transform-origin: top;
    margin-top: 3px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .left .content .text {
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: normal;
    -webkit-transform: scale(.42);
    transform: scale(.42);
    -webkit-transform-origin: top;
    transform-origin: top;
    margin-top: -4.2px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .right {
    position: absolute;
    top: 29px;
    left: 67px;
    width: 46px;
    height: 7px;
    overflow: hidden;
    -webkit-transition: width .1s linear,height .3s linear;
    transition: width .1s linear,height .3s linear;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .right .boot {
    font-size: 12px;
    line-height: 1.56;
    letter-spacing: normal;
    -webkit-transform: scale(.39);
    transform: scale(.39);
    -webkit-transform-origin: left top;
    transform-origin: left top;
    width: 220px;
    height: 72px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box2 {
    width: 638px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: normal
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box2 .container {
    width: 152px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box2 .container .number {
    width: 12px;
    overflow: hidden;
    -webkit-transition: width .3s linear;
    transition: width .3s linear;
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box2 .container .number .loading-number {
    white-space: nowrap;
    text-align: center
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .box3 {
    width: 100px
}

#loading .loading-screen-1 .warning-interface .loading-container .loading-box .line {
    width: 1px;
    height: 38px;
    margin-top: 27px;
    background-color: #5ef6ff
}

#loading .loading-screen-1 .warning-interface .build {
    font-size: 12px;
    line-height: 1.54;
    letter-spacing: normal;
    text-align: right;
    position: absolute;
    top: 350px;
    left: 815px;
    width: 35px;
    height: 15px;
    overflow: hidden;
    -webkit-transition: width .1s linear,height .3s linear;
    transition: width .1s linear,height .3s linear;
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

#loading .loading-screen-1 .warning-interface .build .container {
    width: 67px;
    height: 36px
}

#loading .loading-screen-1 .warning-interface .build .container .text {
    -webkit-transform: scale(.92);
    transform: scale(.92);
    -webkit-transform-origin: bottom;
    transform-origin: bottom
}

@media (max-width: 1024px) and (orientation:portrait) {
    #loading .loading-screen-1 .warning-interface {
        width:320px
    }

    #loading .loading-screen-1 .warning-interface .attention {
        width: 80px;
        height: 125px
    }

    #loading .loading-screen-1 .warning-interface .loading-text-1 {
        height: 17px;
        padding: 0 5px;
        margin-top: 31px;
        font-size: 12px;
        line-height: 12px;
        letter-spacing: 1.1px
    }

    #loading .loading-screen-1 .warning-interface .loading-text-1 .box .text {
        -webkit-transform-origin: left center;
        transform-origin: left center;
        -webkit-transform: scale(.67);
        transform: scale(.67);
        width: 209px
    }

    #loading .loading-screen-1 .warning-interface .loading-text-1.done {
        font-size: 11px;
        line-height: 17px;
        letter-spacing: 1.3px
    }

    #loading .loading-screen-1 .warning-interface .loading-text-1.done .box .text {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    #loading .loading-screen-1 .warning-interface .loading-text-box {
        width: 0;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }

    #loading .loading-screen-1 .warning-interface .loading-text-2 {
        margin-top: -10px;
        -webkit-transform-origin: left top;
        transform-origin: left top;
        -webkit-transform: scale(.6);
        transform: scale(.6)
    }

    #loading .loading-screen-1 .warning-interface .loading-container {
        height: 61px
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-bar {
        height: 20px;
        padding: 4px;
        margin-top: 10px
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box {
        height: 41px
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 {
        width: 50px
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .left {
        -webkit-transform: scale(.7);
        transform: scale(.7);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box .box1 .right {
        display: none
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box .box2 {
        width: 213px;
        font-size: 18px;
        line-height: 29px;
        letter-spacing: normal
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box .box3 {
        width: 55px
    }

    #loading .loading-screen-1 .warning-interface .loading-container .loading-box .line {
        height: 30px;
        margin-top: 11px
    }

    #loading .loading-screen-1 .warning-interface .build {
        top: 270px;
        left: unset;
        right: 8px;
        -webkit-transform: scale(.6);
        transform: scale(.6);
        -webkit-transform-origin: right top;
        transform-origin: right top
    }
}

#loading .loading-screen-1.show {
    opacity: 1
}

#loading .loading-screen-1.show .warning-interface .attention {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}

#loading .loading-screen-1.show .warning-interface .loading-text-1 {
    width: 260px
}

#loading .loading-screen-1.show .warning-interface .loading-text-1 .box {
    width: 260px;
    opacity: 1
}

#loading .loading-screen-1.show .warning-interface .loading-text-box {
    width: 100%
}

#loading .loading-screen-1.show .warning-interface .loading-text-box .height-area {
    height: 42px
}

#loading .loading-screen-1.show .warning-interface .loading-container {
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,0 100%)
}

#loading .loading-screen-1.show .warning-interface .loading-container .loading-box .box1 .left {
    height: 35px
}

#loading .loading-screen-1.show .warning-interface .loading-container .loading-box .box1 .right {
    width: 86px;
    height: 28px
}

#loading .loading-screen-1.show .warning-interface .loading-container .loading-box .box2 .number {
    width: 152px
}

#loading .loading-screen-1.show .warning-interface .build {
    width: 67px;
    height: 36px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #loading .loading-screen-1.show .warning-interface .loading-text-1,#loading .loading-screen-1.show .warning-interface .loading-text-1 .box {
        width:150px
    }

    #loading .loading-screen-1.show .warning-interface .loading-text-box {
        width: 200%
    }

    #loading .loading-screen-1.show .warning-interface .loading-text-box .height-area {
        height: 42px
    }
}

#loading .loading-screen-2 {
    opacity: 0;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#loading .loading-screen-2 .status-interface {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 3.7vh 1.5625vw;
    padding: calc(var(--vh, 1vh)*3.7) 1.5625vw
}

#loading .loading-screen-2 .status-interface .flex-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: flex
}

#loading .loading-screen-2 .status-interface .flex-wrapper .left-wrapper {
    position: relative;
    width: 46.875vw;
    height: 0;
    overflow: hidden;
    -webkit-transition: height .5s linear;
    transition: height .5s linear
}

#loading .loading-screen-2 .status-interface .flex-wrapper .left-wrapper .cover {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 96px;
    background-color: rgba(0,0,0,.7)
}

#loading .loading-screen-2 .status-interface .flex-wrapper .left-wrapper .content-container {
    display: -webkit-box;
    display: flex;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: 4px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #loading .loading-screen-2 .status-interface .flex-wrapper .left-wrapper .content-container {
        line-height:22px
    }
}

#loading .loading-screen-2 .status-interface .flex-wrapper .left-wrapper .content-container .status-content {
    margin-left: 3.125vw;
    white-space: nowrap;
    overflow: hidden
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper {
    margin-left: 3.125vw;
    width: 46.875vw
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box {
    position: relative;
    width: 41.67vw;
    height: 46.3vh;
    height: calc(var(--vh, 1vh)*46.3);
    border: 1px solid #5ef6ff;
    opacity: 0;
    -webkit-transition: opacity .1s linear;
    transition: opacity .1s linear;
    -webkit-transition-delay: .5s;
    transition-delay: .5s
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-title {
    width: 100%;
    height: 35px;
    background-color: #5ef6ff;
    color: #000;
    padding-left: 1.5625vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-title .title {
    font-size: 18px;
    line-height: 24.5px;
    letter-spacing: 2px
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-title .point-group {
    position: absolute;
    right: .78vw;
    width: 35px;
    height: 5px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-title .point-group .point {
    width: 5px;
    height: 5px;
    background-color: #000;
    border-radius: 50%
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area {
    padding: 1.67vh 1.5625vw 2.78vh;
    padding: calc(var(--vh, 1vh)*1.67) 1.5625vw calc(var(--vh, 1vh)*2.78);
    height: calc(46.3vh - 36px);
    height: calc(var(--vh, 1vh)*46.3 - 36px);
    overflow: hidden
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area .title {
    font-size: 16px;
    line-height: 21.76px;
    letter-spacing: 2.22px
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area .line {
    width: 100%;
    height: 1px;
    background-color: #5ef6ff
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area .line:first-child {
    margin-top: 1vh;
    margin-top: calc(var(--vh, 1vh)*1)
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area .line:not(:first-child) {
    margin-top: .5vh;
    margin-top: calc(var(--vh, 1vh)*0.5)
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area .overflow {
    margin-top: 2.78vh;
    margin-top: calc(var(--vh, 1vh)*2.78);
    overflow: hidden;
    height: 0;
    -webkit-transition: height .3s linear;
    transition: height .3s linear
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box .command-area .overflow .text {
    font-size: 16px;
    line-height: 24px;
    letter-spacing: 2px
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box.box1 {
    margin-left: 5.205vw
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box.box1 .command-area .overflow {
    -webkit-transition-delay: .8s;
    transition-delay: .8s
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box.box2 {
    margin-top: .9vh;
    margin-top: calc(var(--vh, 1vh)*0.9)
}

#loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper .command-box.box2 .command-area .overflow {
    -webkit-transition-delay: 1.1s;
    transition-delay: 1.1s
}

@media (max-width: 1024px) and (orientation:portrait) {
    #loading .loading-screen-2 .status-interface {
        padding:0 2.78vw
    }

    #loading .loading-screen-2 .status-interface .flex-wrapper {
        display: block
    }

    #loading .loading-screen-2 .status-interface .flex-wrapper .left-wrapper {
        width: 100%
    }

    #loading .loading-screen-2 .status-interface .flex-wrapper .right-wrapper {
        display: none
    }
}

#loading .loading-screen-2 .status-interface .float-windows {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

#loading .loading-screen-2 .status-interface .float-windows .float-window {
    position: absolute;
    width: 27.7vw;
    height: 15.2vw;
    background-color: #000;
    border: 3px solid #5ef6ff;
    opacity: 0
}

#loading .loading-screen-2 .status-interface .float-windows .float-window .bar {
    width: 100%;
    height: .7vw;
    background-color: #5ef6ff
}

#loading .loading-screen-2 .status-interface .float-windows .float-window .img-container {
    width: 100%;
    height: 14vw;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

#loading .loading-screen-2 .status-interface .float-windows .float-window .img-container img {
    width: 26.5vw;
    height: 13vw
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1 {
    z-index: 3
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:first-child {
    top: calc(33vh + 0vw + 0px);
    top: calc(var(--vh, 1vh)*33 + 0vw + 0px);
    left: 18.23vw
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(2) {
    top: calc(33vh + .7vw + 8px);
    top: calc(var(--vh, 1vh)*33 + .7vw + 8px);
    left: calc(18.23vw + 10px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(3) {
    top: calc(33vh + 1.4vw + 16px);
    top: calc(var(--vh, 1vh)*33 + 1.4vw + 16px);
    left: calc(18.23vw + 20px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(4) {
    top: calc(33vh + 2.1vw + 24px);
    top: calc(var(--vh, 1vh)*33 + 2.1vw + 24px);
    left: calc(18.23vw + 30px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(5) {
    top: calc(33vh + 2.8vw + 32px);
    top: calc(var(--vh, 1vh)*33 + 2.8vw + 32px);
    left: calc(18.23vw + 40px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(6) {
    top: calc(33vh + 3.5vw + 40px);
    top: calc(var(--vh, 1vh)*33 + 3.5vw + 40px);
    left: calc(18.23vw + 50px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(7) {
    top: calc(33vh + 4.2vw + 48px);
    top: calc(var(--vh, 1vh)*33 + 4.2vw + 48px);
    left: calc(18.23vw + 60px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(8) {
    top: calc(33vh + 4.9vw + 56px);
    top: calc(var(--vh, 1vh)*33 + 4.9vw + 56px);
    left: calc(18.23vw + 70px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(9) {
    top: calc(33vh + 5.6vw + 64px);
    top: calc(var(--vh, 1vh)*33 + 5.6vw + 64px);
    left: calc(18.23vw + 80px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(10) {
    top: calc(33vh + 6.3vw + 72px);
    top: calc(var(--vh, 1vh)*33 + 6.3vw + 72px);
    left: calc(18.23vw + 90px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(11) {
    top: calc(33vh + 7vw + 80px);
    top: calc(var(--vh, 1vh)*33 + 7vw + 80px);
    left: calc(18.23vw + 100px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(12) {
    top: calc(33vh + 7.7vw + 88px);
    top: calc(var(--vh, 1vh)*33 + 7.7vw + 88px);
    left: calc(18.23vw + 110px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(13) {
    top: calc(33vh + 8.4vw + 96px);
    top: calc(var(--vh, 1vh)*33 + 8.4vw + 96px);
    left: calc(18.23vw + 120px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(14) {
    top: calc(33vh + 9.1vw + 104px);
    top: calc(var(--vh, 1vh)*33 + 9.1vw + 104px);
    left: calc(18.23vw + 130px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(15) {
    top: calc(33vh + 9.8vw + 112px);
    top: calc(var(--vh, 1vh)*33 + 9.8vw + 112px);
    left: calc(18.23vw + 140px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(16) {
    top: calc(33vh + 10.5vw + 120px);
    top: calc(var(--vh, 1vh)*33 + 10.5vw + 120px);
    left: calc(18.23vw + 150px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(17) {
    top: calc(33vh + 11.2vw + 128px);
    top: calc(var(--vh, 1vh)*33 + 11.2vw + 128px);
    left: calc(18.23vw + 160px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(18) {
    top: calc(33vh + 11.9vw + 136px);
    top: calc(var(--vh, 1vh)*33 + 11.9vw + 136px);
    left: calc(18.23vw + 170px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(19) {
    top: calc(33vh + 12.6vw + 144px);
    top: calc(var(--vh, 1vh)*33 + 12.6vw + 144px);
    left: calc(18.23vw + 180px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(20) {
    top: calc(33vh + 13.3vw + 152px);
    top: calc(var(--vh, 1vh)*33 + 13.3vw + 152px);
    left: calc(18.23vw + 190px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(21) {
    top: calc(33vh + 14vw + 160px);
    top: calc(var(--vh, 1vh)*33 + 14vw + 160px);
    left: calc(18.23vw + 200px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(22) {
    top: calc(33vh + 14.7vw + 168px);
    top: calc(var(--vh, 1vh)*33 + 14.7vw + 168px);
    left: calc(18.23vw + 210px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(23) {
    top: calc(33vh + 15.4vw + 176px);
    top: calc(var(--vh, 1vh)*33 + 15.4vw + 176px);
    left: calc(18.23vw + 220px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(24) {
    top: calc(33vh + 16.1vw + 184px);
    top: calc(var(--vh, 1vh)*33 + 16.1vw + 184px);
    left: calc(18.23vw + 230px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2 {
    z-index: 2
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(25) {
    top: calc(21.85vh + 0vw + 0px);
    top: calc(var(--vh, 1vh)*21.85 + 0vw + 0px);
    left: 33.28vw
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(26) {
    top: calc(21.85vh + .7vw + 8px);
    top: calc(var(--vh, 1vh)*21.85 + .7vw + 8px);
    left: calc(33.28vw + 10px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(27) {
    top: calc(21.85vh + 1.4vw + 16px);
    top: calc(var(--vh, 1vh)*21.85 + 1.4vw + 16px);
    left: calc(33.28vw + 20px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(28) {
    top: calc(21.85vh + 2.1vw + 24px);
    top: calc(var(--vh, 1vh)*21.85 + 2.1vw + 24px);
    left: calc(33.28vw + 30px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(29) {
    top: calc(21.85vh + 2.8vw + 32px);
    top: calc(var(--vh, 1vh)*21.85 + 2.8vw + 32px);
    left: calc(33.28vw + 40px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(30) {
    top: calc(21.85vh + 3.5vw + 40px);
    top: calc(var(--vh, 1vh)*21.85 + 3.5vw + 40px);
    left: calc(33.28vw + 50px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(31) {
    top: calc(21.85vh + 4.2vw + 48px);
    top: calc(var(--vh, 1vh)*21.85 + 4.2vw + 48px);
    left: calc(33.28vw + 60px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(32) {
    top: calc(21.85vh + 4.9vw + 56px);
    top: calc(var(--vh, 1vh)*21.85 + 4.9vw + 56px);
    left: calc(33.28vw + 70px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(33) {
    top: calc(21.85vh + 5.6vw + 64px);
    top: calc(var(--vh, 1vh)*21.85 + 5.6vw + 64px);
    left: calc(33.28vw + 80px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(34) {
    top: calc(21.85vh + 6.3vw + 72px);
    top: calc(var(--vh, 1vh)*21.85 + 6.3vw + 72px);
    left: calc(33.28vw + 90px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(35) {
    top: calc(21.85vh + 7vw + 80px);
    top: calc(var(--vh, 1vh)*21.85 + 7vw + 80px);
    left: calc(33.28vw + 100px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(36) {
    top: calc(21.85vh + 7.7vw + 88px);
    top: calc(var(--vh, 1vh)*21.85 + 7.7vw + 88px);
    left: calc(33.28vw + 110px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(37) {
    top: calc(21.85vh + 8.4vw + 96px);
    top: calc(var(--vh, 1vh)*21.85 + 8.4vw + 96px);
    left: calc(33.28vw + 120px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(38) {
    top: calc(21.85vh + 9.1vw + 104px);
    top: calc(var(--vh, 1vh)*21.85 + 9.1vw + 104px);
    left: calc(33.28vw + 130px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(39) {
    top: calc(21.85vh + 9.8vw + 112px);
    top: calc(var(--vh, 1vh)*21.85 + 9.8vw + 112px);
    left: calc(33.28vw + 140px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(40) {
    top: calc(21.85vh + 10.5vw + 120px);
    top: calc(var(--vh, 1vh)*21.85 + 10.5vw + 120px);
    left: calc(33.28vw + 150px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(41) {
    top: calc(21.85vh + 11.2vw + 128px);
    top: calc(var(--vh, 1vh)*21.85 + 11.2vw + 128px);
    left: calc(33.28vw + 160px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(42) {
    top: calc(21.85vh + 11.9vw + 136px);
    top: calc(var(--vh, 1vh)*21.85 + 11.9vw + 136px);
    left: calc(33.28vw + 170px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(43) {
    top: calc(21.85vh + 12.6vw + 144px);
    top: calc(var(--vh, 1vh)*21.85 + 12.6vw + 144px);
    left: calc(33.28vw + 180px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(44) {
    top: calc(21.85vh + 13.3vw + 152px);
    top: calc(var(--vh, 1vh)*21.85 + 13.3vw + 152px);
    left: calc(33.28vw + 190px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(45) {
    top: calc(21.85vh + 14vw + 160px);
    top: calc(var(--vh, 1vh)*21.85 + 14vw + 160px);
    left: calc(33.28vw + 200px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(46) {
    top: calc(21.85vh + 14.7vw + 168px);
    top: calc(var(--vh, 1vh)*21.85 + 14.7vw + 168px);
    left: calc(33.28vw + 210px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(47) {
    top: calc(21.85vh + 15.4vw + 176px);
    top: calc(var(--vh, 1vh)*21.85 + 15.4vw + 176px);
    left: calc(33.28vw + 220px)
}

#loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(48) {
    top: calc(21.85vh + 16.1vw + 184px);
    top: calc(var(--vh, 1vh)*21.85 + 16.1vw + 184px);
    left: calc(33.28vw + 230px)
}

@media (max-width: 1024px) and (orientation:portrait) {
    #loading .loading-screen-2 .status-interface .float-windows .float-window {
        width:80.56vw;
        height: 44.44vw
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window .bar {
        height: 2vw
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window .img-container {
        height: 42.44vw
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window .img-container img {
        width: 76vw;
        height: 37.25vw
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:first-child {
        top: calc(32.5vh + 0vw + 0px);
        top: calc(var(--vh, 1vh)*32.5 + 0vw + 0px);
        left: -8vw
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(2) {
        top: calc(32.5vh + 2vw + 4px);
        top: calc(var(--vh, 1vh)*32.5 + 2vw + 4px);
        left: calc(-8vw + 4px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(3) {
        top: calc(32.5vh + 4vw + 8px);
        top: calc(var(--vh, 1vh)*32.5 + 4vw + 8px);
        left: calc(-8vw + 8px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(4) {
        top: calc(32.5vh + 6vw + 12px);
        top: calc(var(--vh, 1vh)*32.5 + 6vw + 12px);
        left: calc(-8vw + 12px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(5) {
        top: calc(32.5vh + 8vw + 16px);
        top: calc(var(--vh, 1vh)*32.5 + 8vw + 16px);
        left: calc(-8vw + 16px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(6) {
        top: calc(32.5vh + 10vw + 20px);
        top: calc(var(--vh, 1vh)*32.5 + 10vw + 20px);
        left: calc(-8vw + 20px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(7) {
        top: calc(32.5vh + 12vw + 24px);
        top: calc(var(--vh, 1vh)*32.5 + 12vw + 24px);
        left: calc(-8vw + 24px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(8) {
        top: calc(32.5vh + 14vw + 28px);
        top: calc(var(--vh, 1vh)*32.5 + 14vw + 28px);
        left: calc(-8vw + 28px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(9) {
        top: calc(32.5vh + 16vw + 32px);
        top: calc(var(--vh, 1vh)*32.5 + 16vw + 32px);
        left: calc(-8vw + 32px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(10) {
        top: calc(32.5vh + 18vw + 36px);
        top: calc(var(--vh, 1vh)*32.5 + 18vw + 36px);
        left: calc(-8vw + 36px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(11) {
        top: calc(32.5vh + 20vw + 40px);
        top: calc(var(--vh, 1vh)*32.5 + 20vw + 40px);
        left: calc(-8vw + 40px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(12) {
        top: calc(32.5vh + 22vw + 44px);
        top: calc(var(--vh, 1vh)*32.5 + 22vw + 44px);
        left: calc(-8vw + 44px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(13) {
        top: calc(32.5vh + 24vw + 48px);
        top: calc(var(--vh, 1vh)*32.5 + 24vw + 48px);
        left: calc(-8vw + 48px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(14) {
        top: calc(32.5vh + 26vw + 52px);
        top: calc(var(--vh, 1vh)*32.5 + 26vw + 52px);
        left: calc(-8vw + 52px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(15) {
        top: calc(32.5vh + 28vw + 56px);
        top: calc(var(--vh, 1vh)*32.5 + 28vw + 56px);
        left: calc(-8vw + 56px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(16) {
        top: calc(32.5vh + 30vw + 60px);
        top: calc(var(--vh, 1vh)*32.5 + 30vw + 60px);
        left: calc(-8vw + 60px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(17) {
        top: calc(32.5vh + 32vw + 64px);
        top: calc(var(--vh, 1vh)*32.5 + 32vw + 64px);
        left: calc(-8vw + 64px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(18) {
        top: calc(32.5vh + 34vw + 68px);
        top: calc(var(--vh, 1vh)*32.5 + 34vw + 68px);
        left: calc(-8vw + 68px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(19) {
        top: calc(32.5vh + 36vw + 72px);
        top: calc(var(--vh, 1vh)*32.5 + 36vw + 72px);
        left: calc(-8vw + 72px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(20) {
        top: calc(32.5vh + 38vw + 76px);
        top: calc(var(--vh, 1vh)*32.5 + 38vw + 76px);
        left: calc(-8vw + 76px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(21) {
        top: calc(32.5vh + 40vw + 80px);
        top: calc(var(--vh, 1vh)*32.5 + 40vw + 80px);
        left: calc(-8vw + 80px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(22) {
        top: calc(32.5vh + 42vw + 84px);
        top: calc(var(--vh, 1vh)*32.5 + 42vw + 84px);
        left: calc(-8vw + 84px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(23) {
        top: calc(32.5vh + 44vw + 88px);
        top: calc(var(--vh, 1vh)*32.5 + 44vw + 88px);
        left: calc(-8vw + 88px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window1:nth-child(24) {
        top: calc(32.5vh + 46vw + 92px);
        top: calc(var(--vh, 1vh)*32.5 + 46vw + 92px);
        left: calc(-8vw + 92px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(25) {
        top: calc(16.76vh + 0vw + 0px);
        top: calc(var(--vh, 1vh)*16.76 + 0vw + 0px);
        left: 11.11vw
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(26) {
        top: calc(16.76vh + 2vw + 4px);
        top: calc(var(--vh, 1vh)*16.76 + 2vw + 4px);
        left: calc(11.11vw + 4px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(27) {
        top: calc(16.76vh + 4vw + 8px);
        top: calc(var(--vh, 1vh)*16.76 + 4vw + 8px);
        left: calc(11.11vw + 8px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(28) {
        top: calc(16.76vh + 6vw + 12px);
        top: calc(var(--vh, 1vh)*16.76 + 6vw + 12px);
        left: calc(11.11vw + 12px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(29) {
        top: calc(16.76vh + 8vw + 16px);
        top: calc(var(--vh, 1vh)*16.76 + 8vw + 16px);
        left: calc(11.11vw + 16px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(30) {
        top: calc(16.76vh + 10vw + 20px);
        top: calc(var(--vh, 1vh)*16.76 + 10vw + 20px);
        left: calc(11.11vw + 20px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(31) {
        top: calc(16.76vh + 12vw + 24px);
        top: calc(var(--vh, 1vh)*16.76 + 12vw + 24px);
        left: calc(11.11vw + 24px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(32) {
        top: calc(16.76vh + 14vw + 28px);
        top: calc(var(--vh, 1vh)*16.76 + 14vw + 28px);
        left: calc(11.11vw + 28px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(33) {
        top: calc(16.76vh + 16vw + 32px);
        top: calc(var(--vh, 1vh)*16.76 + 16vw + 32px);
        left: calc(11.11vw + 32px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(34) {
        top: calc(16.76vh + 18vw + 36px);
        top: calc(var(--vh, 1vh)*16.76 + 18vw + 36px);
        left: calc(11.11vw + 36px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(35) {
        top: calc(16.76vh + 20vw + 40px);
        top: calc(var(--vh, 1vh)*16.76 + 20vw + 40px);
        left: calc(11.11vw + 40px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(36) {
        top: calc(16.76vh + 22vw + 44px);
        top: calc(var(--vh, 1vh)*16.76 + 22vw + 44px);
        left: calc(11.11vw + 44px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(37) {
        top: calc(16.76vh + 24vw + 48px);
        top: calc(var(--vh, 1vh)*16.76 + 24vw + 48px);
        left: calc(11.11vw + 48px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(38) {
        top: calc(16.76vh + 26vw + 52px);
        top: calc(var(--vh, 1vh)*16.76 + 26vw + 52px);
        left: calc(11.11vw + 52px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(39) {
        top: calc(16.76vh + 28vw + 56px);
        top: calc(var(--vh, 1vh)*16.76 + 28vw + 56px);
        left: calc(11.11vw + 56px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(40) {
        top: calc(16.76vh + 30vw + 60px);
        top: calc(var(--vh, 1vh)*16.76 + 30vw + 60px);
        left: calc(11.11vw + 60px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(41) {
        top: calc(16.76vh + 32vw + 64px);
        top: calc(var(--vh, 1vh)*16.76 + 32vw + 64px);
        left: calc(11.11vw + 64px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(42) {
        top: calc(16.76vh + 34vw + 68px);
        top: calc(var(--vh, 1vh)*16.76 + 34vw + 68px);
        left: calc(11.11vw + 68px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(43) {
        top: calc(16.76vh + 36vw + 72px);
        top: calc(var(--vh, 1vh)*16.76 + 36vw + 72px);
        left: calc(11.11vw + 72px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(44) {
        top: calc(16.76vh + 38vw + 76px);
        top: calc(var(--vh, 1vh)*16.76 + 38vw + 76px);
        left: calc(11.11vw + 76px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(45) {
        top: calc(16.76vh + 40vw + 80px);
        top: calc(var(--vh, 1vh)*16.76 + 40vw + 80px);
        left: calc(11.11vw + 80px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(46) {
        top: calc(16.76vh + 42vw + 84px);
        top: calc(var(--vh, 1vh)*16.76 + 42vw + 84px);
        left: calc(11.11vw + 84px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(47) {
        top: calc(16.76vh + 44vw + 88px);
        top: calc(var(--vh, 1vh)*16.76 + 44vw + 88px);
        left: calc(11.11vw + 88px)
    }

    #loading .loading-screen-2 .status-interface .float-windows .float-window.window2:nth-child(48) {
        top: calc(16.76vh + 46vw + 92px);
        top: calc(var(--vh, 1vh)*16.76 + 46vw + 92px);
        left: calc(11.11vw + 92px)
    }
}

#loading .loading-screen-2.show {
    opacity: 1;
    -webkit-animation: flash .2s linear .8s 2;
    animation: flash .2s linear .8s 2
}

#loading .loading-screen-2.show .status-interface .flex-wrapper .left-wrapper {
    height: 100%
}

#loading .loading-screen-2.show .status-interface .flex-wrapper .left-wrapper .cover {
    opacity: 0
}

#loading .loading-screen-2.show .status-interface .flex-wrapper .right-wrapper .command-box {
    opacity: 1
}

#loading .loading-screen-2.show .status-interface .flex-wrapper .right-wrapper .command-box.box2 {
    -webkit-transition-delay: .9s;
    transition-delay: .9s
}

#loading .loading-screen-2.show .status-interface .flex-wrapper .right-wrapper .command-box .command-area .overflow {
    height: 100%
}

.landing-container {
    position: relative
}

#section-panel {
    padding-top: 60px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel {
        padding-top:90px
    }
}

.scene-3 #section-panel {
    visibility: hidden;
    pointer-events: none
}

#section-panel .panel-container {
    -webkit-box-align: center;
    align-items: center;
    padding: 0 30px;
    height: 100%;
    pointer-events: none
}

#section-panel .left,#section-panel .right {
    height: 100%;
    padding: 90px 0 60px;
    pointer-events: auto
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .left,#section-panel .right {
        padding:62px 0 60px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .left,#section-panel .right {
        padding:54px 0 60px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel .left,#section-panel .right {
        width:100%;
        padding: 20px 10px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .left,#section-panel .right {
        padding:20px 20px 60px
    }
}

#section-panel .left,#section-panel .right,#section-panel .title-container {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

#section-panel .left,#section-panel .title-container {
    -webkit-box-align: start;
    align-items: flex-start
}

#section-panel .left {
    -webkit-box-pack: justify;
    justify-content: space-between
}

#section-panel .title-container {
    -webkit-box-pack: start;
    justify-content: flex-start;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.scene-0 #section-panel .title-container {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0)
}

.scene-1 #section-panel .title-container {
    transition: opacity .6s ease 0s,-webkit-transform .6s ease-out 0s;
    -webkit-transition: opacity .6s ease 0s,-webkit-transform .6s ease-out 0s;
    transition: transform .6s ease-out 0s,opacity .6s ease 0s;
    transition: transform .6s ease-out 0s,opacity .6s ease 0s,-webkit-transform .6s ease-out 0s;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

#section-panel .title-container .line {
    display: -webkit-box;
    display: flex
}

#section-panel .title-wrapper {
    border-bottom: 1px solid #fcee0a;
    padding: 20px 100px 45px 20px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .title-wrapper {
        padding:14px 69px 31px 14px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .title-wrapper {
        padding:12px 60px 27px 12px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel .title-wrapper {
        padding:5px 10px 20px
    }
}

.scene-1.back #section-panel .title-wrapper {
    -webkit-transition: border-color .1s ease .2s;
    transition: border-color .1s ease .2s
}

.scene-2 #section-panel .title-wrapper {
    border-color: transparent;
    -webkit-transition: border-color 0s ease .2s;
    transition: border-color 0s ease .2s
}

@media (max-width: 1024px) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .title-wrapper {
        padding:15px 15px 20px
    }
}

#section-panel .title {
    width: 460px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .title {
        width:319px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .title {
        width:275px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .title {
        width:255px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .title {
        width:320px
    }
}

#section-panel .title .line {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    line-height: 1;
    font-size: 60px;
    margin: 6px 0
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .title .line {
        font-size:40px;
        margin: 4px 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .title .line {
        font-size:36px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .title .line {
        font-size:32px;
        margin: 3px 0
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .title .line {
        font-size:36px;
        margin: 4px 0
    }
}

.scene-0 #section-panel .title .line {
    opacity: 0;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%)
}

.scene-1 #section-panel .title .line {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.scene-1 #section-panel .title .line:first-child {
    transition: opacity 42ms ease .6s,-webkit-transform .125s ease-out .6s;
    -webkit-transition: opacity 42ms ease .6s,-webkit-transform .125s ease-out .6s;
    transition: opacity 42ms ease .6s,transform .125s ease-out .6s;
    transition: opacity 42ms ease .6s,transform .125s ease-out .6s,-webkit-transform .125s ease-out .6s
}

.scene-1 #section-panel .title .line:nth-child(2) {
    transition: opacity 42ms ease .725s,-webkit-transform .125s ease-out .725s;
    -webkit-transition: opacity 42ms ease .725s,-webkit-transform .125s ease-out .725s;
    transition: opacity 42ms ease .725s,transform .125s ease-out .725s;
    transition: opacity 42ms ease .725s,transform .125s ease-out .725s,-webkit-transform .125s ease-out .725s
}

.scene-1 #section-panel .title .line:nth-child(3) {
    transition: opacity 42ms ease .85s,-webkit-transform .125s ease-out .85s;
    -webkit-transition: opacity 42ms ease .85s,-webkit-transform .125s ease-out .85s;
    transition: opacity 42ms ease .85s,transform .125s ease-out .85s;
    transition: opacity 42ms ease .85s,transform .125s ease-out .85s,-webkit-transform .125s ease-out .85s
}

.scene-1.back #section-panel .title .line:first-child {
    transition: -webkit-transform .08s ease-out 0s;
    -webkit-transition: -webkit-transform .08s ease-out 0s;
    transition: transform .08s ease-out 0s;
    transition: transform .08s ease-out 0s,-webkit-transform .08s ease-out 0s
}

.scene-1.back #section-panel .title .line:nth-child(2) {
    transition: -webkit-transform .08s ease-out .06s;
    -webkit-transition: -webkit-transform .08s ease-out .06s;
    transition: transform .08s ease-out .06s;
    transition: transform .08s ease-out .06s,-webkit-transform .08s ease-out .06s
}

.scene-1.back #section-panel .title .line:nth-child(3) {
    transition: -webkit-transform .08s ease-out .12s;
    -webkit-transition: -webkit-transform .08s ease-out .12s;
    transition: transform .08s ease-out .12s;
    transition: transform .08s ease-out .12s,-webkit-transform .08s ease-out .12s
}

.scene-2 #section-panel .title .line:first-child {
    transition: opacity 0s ease .3s,-webkit-transform .08s ease-out 0s;
    -webkit-transition: opacity 0s ease .3s,-webkit-transform .08s ease-out 0s;
    transition: transform .08s ease-out 0s,opacity 0s ease .3s;
    transition: transform .08s ease-out 0s,opacity 0s ease .3s,-webkit-transform .08s ease-out 0s
}

.scene-2 #section-panel .title .line:nth-child(2) {
    transition: opacity 0s ease .3s,-webkit-transform .08s ease-out .06s;
    -webkit-transition: opacity 0s ease .3s,-webkit-transform .08s ease-out .06s;
    transition: transform .08s ease-out .06s,opacity 0s ease .3s;
    transition: transform .08s ease-out .06s,opacity 0s ease .3s,-webkit-transform .08s ease-out .06s
}

.scene-2 #section-panel .title .line:nth-child(3) {
    transition: opacity 0s ease .3s,-webkit-transform .08s ease-out .12s;
    -webkit-transition: opacity 0s ease .3s,-webkit-transform .08s ease-out .12s;
    transition: transform .08s ease-out .12s,opacity 0s ease .3s;
    transition: transform .08s ease-out .12s,opacity 0s ease .3s,-webkit-transform .08s ease-out .12s
}

.scene-2 #section-panel .title .line {
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%);
    opacity: 0
}

#section-panel .title .line .price {
    margin-left: .5em
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .title .line .price {
        margin-left:.3em
    }
}

#section-panel .info {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: start;
    justify-content: flex-start;
    line-height: 1;
    margin-top: 23px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel .info {
        margin-top:20px
    }
}

.scene-0 #section-panel .info {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

.scene-1 #section-panel .info {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: opacity 42ms ease .85s,-webkit-transform .125s ease-out .85s;
    -webkit-transition: opacity 42ms ease .85s,-webkit-transform .125s ease-out .85s;
    transition: opacity 42ms ease .85s,transform .125s ease-out .85s;
    transition: opacity 42ms ease .85s,transform .125s ease-out .85s,-webkit-transform .125s ease-out .85s
}

.scene-1.back #section-panel .info,.scene-2 #section-panel .info {
    transition: opacity 0s ease .1s,-webkit-transform .1s ease .12s;
    -webkit-transition: opacity 0s ease .1s,-webkit-transform .1s ease .12s;
    transition: transform .1s ease .12s,opacity 0s ease .1s;
    transition: transform .1s ease .12s,opacity 0s ease .1s,-webkit-transform .1s ease .12s
}

.scene-2 #section-panel .info {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%)
}

#section-panel .price {
    font-size: 30px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .price {
        font-size:24px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .price {
        font-size:24px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .price {
        font-size:24px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .price {
        font-size:18px
    }
}

#section-panel .date {
    margin-bottom: .1em;
    font-size: 20px
}

#section-panel .date:not(:first-child) {
    margin-left: 1em
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .date {
        font-size:18px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .date {
        font-size:18px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .date {
        font-size:18px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .date {
        font-size:12px
    }
}

#section-panel .logo-wrapper {
    padding: 20px 40px 20px 20px;
    display: -webkit-box;
    display: flex;
    border-top: none;
    border-right: 1px solid #fcee0a
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .logo-wrapper {
        padding:14px 28px 14px 14px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .logo-wrapper {
        padding:12px 24px 12px 12px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .logo-wrapper {
        padding:7px 10px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .logo-wrapper {
        padding:10px 15px
    }
}

.scene-0 #section-panel .logo-wrapper {
    opacity: 0;
    -webkit-transform: translateY(-30%);
    transform: translateY(-30%)
}

.scene-1 #section-panel .logo-wrapper {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    transition: opacity 42ms ease .975s,-webkit-transform .125s ease-out .975s;
    -webkit-transition: opacity 42ms ease .975s,-webkit-transform .125s ease-out .975s;
    transition: opacity 42ms ease .975s,transform .125s ease-out .975s;
    transition: opacity 42ms ease .975s,transform .125s ease-out .975s,-webkit-transform .125s ease-out .975s
}

.scene-1.back #section-panel .logo-wrapper,.scene-2 #section-panel .logo-wrapper {
    transition: opacity 0s ease .3s,-webkit-transform .1s ease .2s;
    -webkit-transition: opacity 0s ease .3s,-webkit-transform .1s ease .2s;
    transition: transform .1s ease .2s,opacity 0s ease .3s;
    transition: transform .1s ease .2s,opacity 0s ease .3s,-webkit-transform .1s ease .2s
}

.scene-2 #section-panel .logo-wrapper {
    opacity: 0;
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%)
}

#section-panel .title-border {
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0
}

.scene-1.back #section-panel .title-border,.scene-2 #section-panel .title-border {
    transition: -webkit-transform .1s ease .2s;
    -webkit-transition: -webkit-transform .1s ease .2s;
    transition: transform .1s ease .2s;
    transition: transform .1s ease .2s,-webkit-transform .1s ease .2s
}

.scene-2 #section-panel .title-border {
    -webkit-transform: scale(0);
    transform: scale(0)
}

#section-panel .title-border .edition {
    top: calc(100% + 8px);
    left: 0;
    width: 192px;
    height: 14px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .title-border .edition {
        width:133px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .title-border .edition {
        width:115px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .title-border .edition {
        height:10px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .title-border .edition {
        height:8px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .title-border .edition {
        width:127px;
        height: 10px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .title-border .edition {
        width:194px;
        height: 14px
    }
}

.scene-0 #section-panel .title-border .edition {
    opacity: 0
}

.scene-1 #section-panel .title-border .edition {
    opacity: 1;
    -webkit-transition: opacity 42ms ease 1.1s;
    transition: opacity 42ms ease 1.1s
}

#section-panel .logo {
    width: 257px;
    height: 32px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .logo {
        width:178px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .logo {
        width:154px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .logo {
        height:22px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .logo {
        height:19px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .logo {
        width:128px;
        height: 16px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .logo {
        width:186px;
        height: 23px
    }
}

#section-panel .right {
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: end;
    justify-content: flex-end
}

#section-panel .control-container,#section-panel .picture-container,#section-panel .video-container {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center
}

#section-panel .picture-container {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
    margin-bottom: 20px;
    width: 260px;
    height: 290px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .picture-container {
        width:180px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .picture-container {
        width:156px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .picture-container {
        height:201px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .picture-container {
        height:174px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .picture-container {
        width:90px;
        height: 101px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .picture-container {
        width:172px;
        height: 190px
    }
}

.scene-2 #section-panel .picture-container {
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform 0s ease .4s;
    -webkit-transition: -webkit-transform 0s ease .4s;
    transition: transform 0s ease .4s;
    transition: transform 0s ease .4s,-webkit-transform 0s ease .4s
}

#section-panel .picture-container .poster-wrapper {
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    -webkit-clip-path: polygon(11% 0,100% 0,100% 100%,0 100%,0 10%);
    clip-path: polygon(11% 0,100% 0,100% 100%,0 100%,0 10%)
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .picture-container .poster-wrapper {
        -webkit-clip-path:polygon(17% 0,100% 0,100% 100%,0 100%,0 15%);
        clip-path: polygon(17% 0,100% 0,100% 100%,0 100%,0 15%)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .picture-container .poster-wrapper {
        -webkit-clip-path:polygon(18% 0,100% 0,100% 100%,0 100%,0 16%);
        clip-path: polygon(18% 0,100% 0,100% 100%,0 100%,0 16%)
    }
}

#section-panel .picture-container .pic-poster {
    height: 100%;
    width: auto
}

#section-panel .picture-container .picture-label,#section-panel .picture-container .poster-wrapper {
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0
}

.scene-0 #section-panel .picture-container .picture-label,.scene-0 #section-panel .picture-container .poster-wrapper {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.scene-1 #section-panel .picture-container .picture-label,.scene-1 #section-panel .picture-container .poster-wrapper {
    -webkit-transform: scale(1);
    transform: scale(1)
}

.scene-2 #section-panel .picture-container .picture-label {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.scene-1 #section-panel .picture-container .picture-label {
    transition: -webkit-transform .25s ease .16s;
    -webkit-transition: -webkit-transform .25s ease .16s;
    transition: transform .25s ease .16s;
    transition: transform .25s ease .16s,-webkit-transform .25s ease .16s
}

.scene-1 #section-panel .picture-container .poster-wrapper {
    transition: -webkit-transform 83ms ease .16s;
    -webkit-transition: -webkit-transform 83ms ease .16s;
    transition: transform 83ms ease .16s;
    transition: transform 83ms ease .16s,-webkit-transform 83ms ease .16s
}

.scene-1 #section-panel .picture-container .poster {
    -webkit-animation: g--flicker-reverse .2s ease .16s 2;
    animation: g--flicker-reverse .2s ease .16s 2
}

.scene-2 #section-panel .picture-container .picture-label {
    transition: -webkit-transform .208s ease;
    -webkit-transition: -webkit-transform .208s ease;
    transition: transform .208s ease;
    transition: transform .208s ease,-webkit-transform .208s ease
}

.scene-2 #section-panel .picture-container .poster {
    -webkit-animation: g--flicker .2s ease 0s 2 normal forwards;
    animation: g--flicker .2s ease 0s 2 normal forwards
}

.scene-0 #section-panel .picture-container .button-expand {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.scene-1 #section-panel .picture-container .button-expand {
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .125s ease-out .46s;
    -webkit-transition: -webkit-transform .125s ease-out .46s;
    transition: transform .125s ease-out .46s;
    transition: transform .125s ease-out .46s,-webkit-transform .125s ease-out .46s
}

.scene-2 #section-panel .picture-container .button-expand {
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform .125s ease;
    -webkit-transition: -webkit-transform .125s ease;
    transition: transform .125s ease;
    transition: transform .125s ease,-webkit-transform .125s ease
}

#section-panel .video-container {
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
    width: 580px;
    height: 330px;
    padding-bottom: 20px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .video-container {
        width:402px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .video-container {
        width:347px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .video-container {
        height:229px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .video-container {
        height:198px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-panel .video-container {
        width:160px;
        height: 156px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel .video-container {
        width:344px;
        height: 196px
    }
}

.scene-0 #section-panel .video-container {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.scene-1 #section-panel .video-container {
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .167s ease .327s;
    -webkit-transition: -webkit-transform .167s ease .327s;
    transition: transform .167s ease .327s;
    transition: transform .167s ease .327s,-webkit-transform .167s ease .327s;
    -webkit-animation: g--flicker .125s linear .494s;
    animation: g--flicker .125s linear .494s
}

.scene-2 #section-panel .video-container {
    -webkit-transform: scale(0);
    transform: scale(0);
    transition: -webkit-transform .05s linear;
    -webkit-transition: -webkit-transform .05s linear;
    transition: transform .05s linear;
    transition: transform .05s linear,-webkit-transform .05s linear
}

@media (max-width: 1024px) and (orientation:portrait) {
    .scene-2 #section-panel .video-container {
        -webkit-transform:scaleX(0);
        transform: scaleX(0)
    }
}

.scene-0 #section-panel .video-container .button-play {
    -webkit-transform: scale(0);
    transform: scale(0)
}

.scene-1 #section-panel .video-container .button-play {
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .125s ease-out .619s;
    -webkit-transition: -webkit-transform .125s ease-out .619s;
    transition: transform .125s ease-out .619s;
    transition: transform .125s ease-out .619s,-webkit-transform .125s ease-out .619s
}

#section-panel .label-container {
    position: absolute;
    bottom: 0;
    padding: 5px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel .label-container {
        padding:2px
    }
}

#section-panel .button {
    width: 60px;
    height: 60px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .button {
        width:42px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .button {
        width:36px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-panel .button {
        height:42px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-panel .button {
        height:36px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel .button {
        width:40px;
        height: 40px
    }
}

#section-panel .label {
    color: #5ef6ff
}

#section-panel .video-label {
    right: 0;
    bottom: 5px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-panel .video-label {
        right:1px;
        bottom: 3px
    }
}

#section-keywords {
    pointer-events: none;
    padding-top: 60px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-keywords {
        padding-top:90px
    }
}

#section-keywords .panel-container {
    padding: 0 30px;
    height: 100%
}

#section-keywords .left {
    height: 100%;
    padding: 90px 0 60px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: end;
    align-items: flex-end
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-keywords .left {
        padding:62px 0 60px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-keywords .left {
        padding:54px 0 60px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-keywords .left {
        width:100%;
        padding: 20px 10px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-keywords .left {
        padding:20px 20px 60px
    }
}

#section-keywords .keyword-container {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-content: space-between;
    width: 260px;
    height: 260px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-keywords .keyword-container {
        width:165px;
        height: 165px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-keywords .keyword-container {
        width:160px;
        height: 160px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-keywords .keyword-container {
        width:118px;
        height: 118px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-keywords .keyword-container {
        width:155px;
        height: 155px
    }
}

#section-keywords .keyword {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    width: 120px;
    height: 120px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-keywords .keyword {
        width:75px;
        height: 75px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-keywords .keyword {
        width:75px;
        height: 75px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-keywords .keyword {
        width:55px;
        height: 55px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-keywords .keyword {
        width:70px;
        height: 70px
    }
}

#section-keywords .keyword:nth-child(3) span {
    -webkit-transform: scale(.8);
    transform: scale(.8)
}

.scene-0 #section-keywords .keyword {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%)
}

.scene-1 #section-keywords .keyword {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.scene-2 #section-keywords .keyword {
    -webkit-transform: translateX(-300%);
    transform: translateX(-300%)
}

.scene-1 #section-keywords .keyword:first-child {
    transition: -webkit-transform .2s ease-out .6s;
    -webkit-transition: -webkit-transform .2s ease-out .6s;
    transition: transform .2s ease-out .6s;
    transition: transform .2s ease-out .6s,-webkit-transform .2s ease-out .6s
}

.scene-2 #section-keywords .keyword:first-child {
    transition: -webkit-transform .2s ease-out 0s;
    -webkit-transition: -webkit-transform .2s ease-out 0s;
    transition: transform .2s ease-out 0s;
    transition: transform .2s ease-out 0s,-webkit-transform .2s ease-out 0s
}

.scene-1 #section-keywords .keyword:nth-child(2) {
    transition: -webkit-transform .2s ease-out .5s;
    -webkit-transition: -webkit-transform .2s ease-out .5s;
    transition: transform .2s ease-out .5s;
    transition: transform .2s ease-out .5s,-webkit-transform .2s ease-out .5s
}

.scene-2 #section-keywords .keyword:nth-child(2) {
    transition: -webkit-transform .2s ease-out .3s;
    -webkit-transition: -webkit-transform .2s ease-out .3s;
    transition: transform .2s ease-out .3s;
    transition: transform .2s ease-out .3s,-webkit-transform .2s ease-out .3s
}

.scene-1 #section-keywords .keyword:nth-child(3) {
    transition: -webkit-transform .2s ease-out .7s;
    -webkit-transition: -webkit-transform .2s ease-out .7s;
    transition: transform .2s ease-out .7s;
    transition: transform .2s ease-out .7s,-webkit-transform .2s ease-out .7s
}

.scene-2 #section-keywords .keyword:nth-child(3) {
    transition: -webkit-transform .2s ease-out .1s;
    -webkit-transition: -webkit-transform .2s ease-out .1s;
    transition: transform .2s ease-out .1s;
    transition: transform .2s ease-out .1s,-webkit-transform .2s ease-out .1s
}

.scene-1 #section-keywords .keyword:nth-child(4) {
    transition: -webkit-transform .2s ease-out .4s;
    -webkit-transition: -webkit-transform .2s ease-out .4s;
    transition: transform .2s ease-out .4s;
    transition: transform .2s ease-out .4s,-webkit-transform .2s ease-out .4s
}

.scene-2 #section-keywords .keyword:nth-child(4) {
    transition: -webkit-transform .2s ease-out .2s;
    -webkit-transition: -webkit-transform .2s ease-out .2s;
    transition: transform .2s ease-out .2s;
    transition: transform .2s ease-out .2s,-webkit-transform .2s ease-out .2s
}

#section-keywords .keyword .line:not(:first-child) {
    margin-top: 6px
}

#section-keywords .keyword .strong {
    width: auto;
    height: 1em
}

.scene-anchor.scene-anchor-2-5,.scene-anchor.scene-anchor-3-5 {
    height: 80vh;
    height: calc(var(--vh, 1vh)*80)
}

.scene-anchor.scene-anchor-4-5 {
    height: 70vh;
    height: calc(var(--vh, 1vh)*70)
}

.scene-anchor.scene-anchor-2,.scene-anchor.scene-anchor-3,.scene-anchor.scene-anchor-4 {
    height: 50vh;
    height: calc(var(--vh, 1vh)*50)
}

.role-container .role-1-desc .cus-description {
    position: absolute;
    right: -51.85185185185185%;
    white-space: nowrap
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .cus-description {
        right:-27.160493827160494%
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .cus-description {
        right:-34.72222222222223%
    }
}

.role-container .role-1-desc .cus-description .desc-square {
    width: 120px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .cus-description .desc-square {
        width:60%
    }
}

.role-container .role-1-desc .desc-0,.role-container .role-1-desc .desc-1,.role-container .role-1-desc .desc-5 {
    font-size: 18px;
    line-height: 1.5
}

@media (orientation: portrait) and (max-width:720px) {
    .role-container .role-1-desc .desc-0,.role-container .role-1-desc .desc-1,.role-container .role-1-desc .desc-5 {
        font-size:16px
    }
}

.role-container .role-1-desc .desc-3 .text-b {
    font-size: 12px;
    line-height: 1.67
}

.role-container .role-1-desc .desc-3 .text-s {
    font-size: 18px;
    line-height: 1.5
}

@media (orientation: portrait) and (max-width:720px) {
    .role-container .role-1-desc .desc-3 .text-s {
        font-size:16px
    }
}

.role-container .role-1-desc .desc-2 .text-b,.role-container .role-1-desc .desc-4 .text-b,.role-container .role-1-desc .desc-6 .text-b {
    font-size: 18px;
    line-height: 1.5
}

@media (orientation: portrait) and (max-width:720px) {
    .role-container .role-1-desc .desc-2 .text-b,.role-container .role-1-desc .desc-4 .text-b,.role-container .role-1-desc .desc-6 .text-b {
        font-size:16px
    }
}

.role-container .role-1-desc .desc-2 .text-s,.role-container .role-1-desc .desc-4 .text-s,.role-container .role-1-desc .desc-6 .text-s {
    font-size: 12px;
    line-height: 1.67
}

.role-container .role-1-desc .desc-0 {
    top: 46.2962962962963%;
    width: 74.07407407407408%;
    height: 3.703703703703703%
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .desc-0 {
        width:49.38271604938272%
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .desc-0 {
        width:52.083333333333336%
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-0 {
        width:100.30864197530865%;
        height: 37.80502592854136%;
        top: 60.63070196086823%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-0 {
        width:110.24305555555556%;
        height: 38.91906119199856%;
        top: 52.66110083968878%
    }
}

.role-container .role-1-desc .desc-1 {
    top: 48.433048433048434%;
    width: 114.19753086419753%;
    height: 21.43874643874644%
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .desc-1 {
        width:89.50617283950616%
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .desc-1 {
        width:86.80555555555556%
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-1 {
        width:57.098765432098766%;
        height: 3.566511880051072%;
        top: 49.93116632071501%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-1 {
        width:50%;
        height: 3.911967490948309%;
        top: 44.135017846596305%
    }
}

.role-container .role-1-desc .desc-2 {
    top: 47.72079772079771%;
    width: 72.34567901234567%;
    height: 22.507122507122503%
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .desc-2 {
        width:62.09876543209876%
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .desc-2 {
        width:55.55555555555556%
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-2 {
        width:63.888888888888886%;
        height: 2.853209504040858%;
        top: 57.064190080817156%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-2 {
        width:48.611111111111114%;
        height: 4.012274349690574%;
        top: 55.168772308245394%
    }
}

.role-container .role-1-desc .desc-3 {
    top: 67.66381766381767%;
    left: -22.839506172839506%;
    width: 80.86419753086419%;
    height: 22.792022792022788%;
    right: auto
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .desc-3 {
        width:74.44444444444443%
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .desc-3 {
        width:80.72916666666666%
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-3 {
        width:98.76543209876543%;
        height: 19.615815340280896%;
        top: 68.83367928498569%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-3 {
        width:86.80555555555556%;
        height: 20.061371748452867%;
        top: 75.73167835040957%
    }
}

.role-container .role-1-desc .desc-4 {
    top: 42.02279202279202%;
    left: -24.69135802469136%;
    width: 68.02469135802468%;
    height: 3.703703703703703%;
    right: auto
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-4 {
        width:49.382716049382715%;
        height: 3.031535098043411%;
        top: 42.08484018460265%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-4 {
        width:52.083333333333336%;
        height: 3.00920576226793%;
        top: 42.12888067175102%
    }
}

.role-container .role-1-desc .desc-5 {
    top: 52.70655270655271%;
    width: 79.01234567901234%;
    height: 33.20987654320987%
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .desc-5 {
        width:62.5%
    }
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .desc-5 {
        width:60.76388888888889%
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-5 {
        width:101.85185185185186%;
        height: 46.364654440663934%;
        top: 54.74595735878396%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-5 {
        width:97.22222222222223%;
        height: 32.09819479752459%;
        top: 54.16570372082275%
    }
}

.role-container .role-1-desc .desc-6 {
    top: 42.73504273504273%;
    width: 72.22222222222221%;
    height: 19.159544159544158%
}

@media (min-width: 1024px) and (max-width:1365px) {
    .role-container .role-1-desc .desc-6 {
        width:55.55555555555556%
    }
}

@media (min-width: 1280px) and (max-width:1366px) {
    .role-container .role-1-desc .desc-6 {
        width:55.03472222222223%
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .role-container .role-1-desc .desc-6 {
        width:89.50617283950618%;
        height: 30.315350980434115%;
        top: 54.74595735878396%;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    .role-container .role-1-desc .desc-6 {
        width:86.80555555555556%;
        height: 22.067508923298153%;
        top: 55.168772308245394%
    }
}

.scene-anchor.scene-anchor-5 {
    height: 30vh;
    height: calc(var(--vh, 1vh)*30)
}

.scene-anchor.scene-anchor-5-3 {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100)
}

.scene-anchor.scene-anchor-5-6,.scene-anchor.scene-anchor-6 {
    height: 30vh;
    height: calc(var(--vh, 1vh)*30)
}

.scene-anchor.scene-anchor-6-5 {
    height: 120vh;
    height: calc(var(--vh, 1vh)*120)
}

#section-role .role-container .role-2 .role-2-scale {
    -webkit-transform-origin: 51.1% 52%;
    transform-origin: 51.1% 52%;
    opacity: 1
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-2 .role-2-scale {
        -webkit-transform-origin:52% 92%;
        transform-origin: 52% 92%
    }
}

#section-role .role-container .role-2 .role-2-scale.scale-hidden {
    opacity: 0
}

#section-role .role-container .role-2 .role-2-scale .role-2-cover {
    -webkit-transform-origin: 50% -85%;
    transform-origin: 50% -85%
}

@media (orientation: portrait) and (max-width:720px) {
    #section-role .role-container .role-2 .role-2-scale .role-2-cover {
        -webkit-transform-origin:50% -100%;
        transform-origin: 50% -100%
    }
}

#section-role .role-container .role-2 .role-2-scale .role-2-cover .yellow-cover {
    opacity: 1
}

#section-role .role-container .role-2 .role-2-scale .role-2-cover.change-color .yellow-cover,#section-role .role-container .role-2 .role-2-scale .role-2-cover .green-cover {
    opacity: 0
}

#section-role .role-container .role-2 .role-2-scale .role-2-cover.change-color .green-cover {
    opacity: 1
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-role .role-container .role-2 .role-2-scale {
        -webkit-transform-origin:52% 77.5%;
        transform-origin: 52% 77.5%
    }
}

#section-role .role-container .role-2 .role-2-video {
    position: absolute;
    top: 13.24vh;
    top: calc(var(--vh, 1vh)*13.24);
    left: calc(50vw - 17.2vh);
    left: calc(50vw - var(--vh, 1vh)*17.2);
    width: 34.35vh;
    width: calc(var(--vh, 1vh)*34.35);
    height: 73.52vh;
    height: calc(var(--vh, 1vh)*73.52)
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-2 .role-2-video {
        top:calc(50vh - 38.5vw);
        top: calc(var(--vh, 1vh)*50 - 38.5vw);
        left: 26.285vw;
        width: 47.43vw;
        height: 101.5vw
    }
}

#section-role .role-container .role-2 .role-2-video .border {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 100%
}

#section-role .role-container .role-2 .role-2-video .video {
    position: absolute;
    z-index: 2;
    width: 97%;
    height: 97%;
    top: 1.5%;
    left: 1.4%
}

#section-role .role-container .role-2 .role-2-video .video .video-clip {
    overflow: hidden;
    border-radius: 5%
}

#section-role .role-container .role-2 .role-2-video .charge {
    width: 4.62962962962963vh;
    width: calc(var(--vh, 1vh)*4.62963);
    height: 34.907407407407405vh;
    height: calc(var(--vh, 1vh)*34.90741);
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    -webkit-transform: translateX(-50%) translateY(150%);
    transform: translateX(-50%) translateY(150%)
}

#section-role .role-container .role-2 .role-2-video .charge.active {
    opacity: 1;
    -webkit-transform: translateX(-50%) translateY(92%);
    transform: translateX(-50%) translateY(92%);
    transition: opacity 0s 3s,-webkit-transform .5s 3s;
    -webkit-transition: opacity 0s 3s,-webkit-transform .5s 3s;
    transition: opacity 0s 3s,transform .5s 3s;
    transition: opacity 0s 3s,transform .5s 3s,-webkit-transform .5s 3s
}

#section-role .role-container .role-2 .role-2-video .charge.inactive {
    transition: opacity 0s .5s,-webkit-transform .5s;
    -webkit-transition: opacity 0s .5s,-webkit-transform .5s;
    transition: opacity 0s .5s,transform .5s;
    transition: opacity 0s .5s,transform .5s,-webkit-transform .5s
}

#section-role .role-container .role-2 .role-2-video .charge img {
    width: 100%;
    height: 100%
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-role .role-container .role-2 .role-2-video {
        left:30vw;
        width: 40vw;
        height: 85.53vw
    }
}

#section-role .role-container .role-2-desc,#section-role .role-container .role-2-video {
    opacity: 0
}

#section-role .role-container .role-2-desc.show,#section-role .role-container .role-2-video.show {
    opacity: 1
}

#section-role .role-container .role-desc.role-2-desc .cus-description {
    position: absolute;
    width: 24.074074074074073vh;
    width: calc(var(--vh, 1vh)*24.07407)
}

#section-role .role-container .role-desc.role-2-desc .cus-description .desc-square {
    width: 80px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-desc.role-2-desc .cus-description {
        width:70px;
        font-size: 12px
    }

    #section-role .role-container .role-desc.role-2-desc .cus-description .desc-square {
        width: 90%
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-role .role-container .role-desc.role-2-desc .cus-description {
        width:100px
    }

    #section-role .role-container .role-desc.role-2-desc .cus-description .desc-square {
        width: 80%
    }
}

#section-role .role-container .role-desc.role-2-desc .desc-0 {
    top: 16.944444444444443vh;
    top: calc(var(--vh, 1vh)*16.94444);
    left: 0;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%)
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-role .role-container .role-desc.role-2-desc .desc-0 {
        top:20.833333333333336vh;
        top: calc(var(--vh, 1vh)*20.83333)
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-desc.role-2-desc .desc-0 {
        top:23.61111111111111vw
    }
}

#section-role .role-container .role-desc.role-2-desc .desc-1 {
    top: 31.388888888888886vh;
    top: calc(var(--vh, 1vh)*31.38889);
    left: 0;
    -webkit-transform: translateX(-105%);
    transform: translateX(-105%)
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-role .role-container .role-desc.role-2-desc .desc-1 {
        top:41.66666666666667vh;
        top: calc(var(--vh, 1vh)*41.66667)
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-desc.role-2-desc .desc-1 {
        top:48.61111111111111vw
    }
}

#section-role .role-container .role-desc.role-2-desc .desc-2 {
    top: 26.85185185185185vh;
    top: calc(var(--vh, 1vh)*26.85185);
    right: 0;
    -webkit-transform: translateX(105%);
    transform: translateX(105%)
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-role .role-container .role-desc.role-2-desc .desc-2 {
        top:35.15625vh;
        top: calc(var(--vh, 1vh)*35.15625)
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-desc.role-2-desc .desc-2 {
        top:47.22222222222222vw
    }
}

#section-role .role-container .role-desc.role-2-desc .desc-3 {
    top: 43.425925925925924vh;
    top: calc(var(--vh, 1vh)*43.42593);
    right: 0;
    -webkit-transform: translateX(105%);
    transform: translateX(105%)
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-role .role-container .role-desc.role-2-desc .desc-3 {
        top:58.59375vh;
        top: calc(var(--vh, 1vh)*58.59375)
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-desc.role-2-desc .desc-3 {
        top:72.22222222222221vw
    }
}

#section-role .role-container .role-2-bg {
    z-index: 1
}

#section-role .role-container .role-2-bg .green {
    opacity: 0;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#000),color-stop(175.65%,#007449));
    background: linear-gradient(180deg,#000 50%,#007449 175.65%)
}

#section-role .role-container .role-2-bg .yellow {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#000),color-stop(175.65%,#faff37));
    background: linear-gradient(180deg,#000 50%,#faff37 175.65%)
}

#section-role {
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    top: 0;
    left: 0
}

#section-role .cus-flex-center {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

#section-role .role-container {
    z-index: 2
}

#section-role .role-container .role-wrapper {
    z-index: 2;
    width: 75vh;
    width: calc(var(--vh, 1vh)*75);
    height: 130vh;
    height: calc(var(--vh, 1vh)*130);
    margin-top: -3vh;
    margin-top: calc(var(--vh, 1vh)*-3);
    margin-left: calc(50vw - 37.5vh);
    margin-left: calc(50vw - var(--vh, 1vh)*37.5)
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role .role-container .role-wrapper {
        width:90vw;
        height: 155.77vw;
        margin-top: -10vw;
        margin-left: 5vw
    }
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-role .role-container .role-wrapper {
        width:75vw;
        height: 129.81vw;
        margin-left: 12.5vw
    }
}

#section-role .role-container .role-1,#section-role .role-container .role-1 .role-1-scale .end-frame {
    opacity: 0
}

#section-role .role-container .role-1 .role-1-scale .end-frame.end-show {
    opacity: 1
}

#section-role .role-container.ready .role-0 {
    opacity: 0;
    -webkit-transition: opacity 0s ease .2s;
    transition: opacity 0s ease .2s
}

#section-role .role-container.ready .role-1 {
    opacity: 1;
    -webkit-transition: opacity .2s;
    transition: opacity .2s
}

#section-role .role-container .role-2,.scene-5 #section-role .role-container .role-1 {
    visibility: hidden;
    pointer-events: none
}

.scene-5 #section-role .role-container .role-2 {
    visibility: visible;
    pointer-events: all
}

.scene-7 #section-role .role-container .role-2 {
    visibility: hidden;
    pointer-events: none
}

#section-bg .gradient {
    background: -webkit-gradient(linear,left top,left bottom,color-stop(50%,#000),color-stop(175.65%,rgba(250,255,55,.4)));
    background: linear-gradient(180deg,#000 50%,rgba(250,255,55,.4) 175.65%);
    opacity: 0;
    z-index: 2
}

#section-bg .gradient.show {
    opacity: 1;
    -webkit-transition: opacity .4s ease-out .3s;
    transition: opacity .4s ease-out .3s
}

.scene-2 #section-bg .gradient {
    opacity: 0;
    -webkit-transition: opacity 0s;
    transition: opacity 0s
}

.scene-1.back #section-bg .gradient {
    -webkit-transition: opacity .2s ease .3s;
    transition: opacity .2s ease .3s
}

.scene-2-5 #section-bg .gradient {
    visibility: hidden;
    pointer-events: none
}

#section-bg .glitch {
    z-index: 1;
    -o-object-fit: cover;
    object-fit: cover
}

.scene-anchor.scene-anchor-8 {
    height: 100vh;
    height: calc(var(--vh, 1vh)*100)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .scene-anchor.scene-anchor-8 {
        height:200vh;
        height: calc(var(--vh, 1vh)*200)
    }
}

#section-pack {
    width: 100%;
    height: 100%
}

#stage:not(.scene-7) #section-pack {
    visibility: hidden;
    pointer-events: none
}

#stage:not(.scene-7) #section-pack .filter .glitch,#stage:not(.scene-7) #section-pack .option-wrapper {
    opacity: 0
}

#stage.scene-8 #section-pack .filter .glitch,#stage.scene-8 #section-pack .option-wrapper {
    opacity: 0;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear
}

#section-pack .phone-container0 {
    position: absolute;
    z-index: 4;
    top: 13.24vh;
    top: calc(var(--vh, 1vh)*13.24);
    left: calc(50vw - 17.2vh);
    left: calc(50vw - var(--vh, 1vh)*17.2);
    width: 34.35vh;
    width: calc(var(--vh, 1vh)*34.35);
    height: 73.52vh;
    height: calc(var(--vh, 1vh)*73.52)
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-pack .phone-container0 {
        top:calc(50vh - 38.5vw);
        top: calc(var(--vh, 1vh)*50 - 38.5vw);
        left: 26.285vw;
        width: 47.43vw;
        height: 101.5vw
    }
}

#section-pack .phone-container0 .phone {
    width: 100%;
    height: 100%
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-pack .phone-container0 {
        left:30vw;
        width: 40vw;
        height: 85.53vw
    }
}

#section-pack .filter-container {
    position: absolute;
    z-index: 3;
    top: calc(13.24vh + 10px);
    top: calc(var(--vh, 1vh)*13.24 + 10px);
    left: calc(50vw - 17.2vh + 10px);
    left: calc(50vw - var(--vh, 1vh)*17.2 + 10px);
    width: calc(34.35vh - 20px);
    width: calc(var(--vh, 1vh)*34.35 - 20px);
    height: calc(73.52vh - 20px);
    height: calc(var(--vh, 1vh)*73.52 - 20px)
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-pack .filter-container {
        top:calc(50vh - 38.5vw + 5px);
        top: calc(var(--vh, 1vh)*50 - 38.5vw + 5px);
        left: calc(26.285vw + 5px);
        width: calc(47.43vw - 10px);
        height: calc(101.5vw - 10px)
    }
}

#section-pack .filter-container .filter {
    width: 100%;
    height: 100%;
    background-color: #000;
    border-radius: 5%;
    overflow: hidden
}

#section-pack .filter-container .filter .glitch,#section-pack .filter-container .filter .glitch img {
    width: 100%;
    height: 100%
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-pack .filter-container {
        left:calc(30vw + 5px);
        width: calc(40vw - 10px);
        height: calc(85.53vw - 10px)
    }
}

#section-pack .option-wrapper {
    position: absolute;
    z-index: 3;
    top: 68.5vh;
    top: calc(var(--vh, 1vh)*68.5);
    left: calc(50vw + 17.2vh + 60px);
    left: calc(50vw + var(--vh, 1vh)*17.2 + 60px);
    width: 219px;
    height: 120px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-pack .option-wrapper {
        top:calc(53vh + 63vw);
        top: calc(var(--vh, 1vh)*53 + 63vw);
        left: calc(50vw - 170px);
        width: 340px;
        height: 50px;
        display: -webkit-box;
        display: flex;
        -webkit-box-pack: justify;
        justify-content: space-between
    }
}

#section-pack .option-wrapper .option {
    position: relative;
    width: 100%;
    height: 50px
}

#section-pack .option-wrapper .option:not(:first-child) {
    margin-top: 20px
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    #section-pack .option-wrapper .option:hover .item.off {
        opacity:0
    }

    #section-pack .option-wrapper .option:hover .item.on {
        opacity: 1
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-pack .option-wrapper .option {
        width:165px;
        text-align: center
    }

    #section-pack .option-wrapper .option:not(:first-child) {
        margin: 0
    }
}

#section-pack .option-wrapper .option .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 13px 15px;
    font-size: 16px;
    line-height: 24px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-pack .option-wrapper .option .item {
        padding:13px 50px;
        white-space: nowrap
    }
}

#section-pack .option-wrapper .option .item.off {
    color: #5ef6ff;
    opacity: 1
}

#section-pack .option-wrapper .option .item.on {
    color: #000;
    opacity: 0
}

#section-pack .option-wrapper .option .item .i-border {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transform: scale(.7);
    transform: scale(.7);
    -webkit-transform-origin: left top;
    transform-origin: left top
}

#section-pack .option-wrapper .option .item .i-border.active {
    -webkit-transform: scale(1);
    transform: scale(1);
    transition: -webkit-transform .25s ease;
    -webkit-transition: -webkit-transform .25s ease;
    transition: transform .25s ease;
    transition: transform .25s ease,-webkit-transform .25s ease
}

#section-pack .option-wrapper .option .item .cus-text {
    position: relative;
    z-index: 2
}

#section-pack .option-wrapper .option.active {
    pointer-events: none
}

#section-pack .option-wrapper .option.active .item.off {
    opacity: 0
}

#section-pack .option-wrapper .option.active .item.on {
    opacity: 1
}

@media (max-width: 1024px) and (orientation:portrait) and (orientation:portrait) and (min-width:721px) and (max-width:1024px) {
    #section-pack .option-wrapper {
        top:calc(57vh + 42.765vw);
        top: calc(var(--vh, 1vh)*57 + 42.765vw)
    }
}

#section-pack .pack-img-wrapper {
    position: relative;
    z-index: 1;
    margin-top: 19.58vh;
    margin-top: calc(var(--vh, 1vh)*19.58);
    width: 100%;
    height: calc(100% - 19.58vh);
    height: calc(100% - var(--vh, 1vh)*19.58);
    overflow: hidden
}

#section-pack .pack-img-wrapper .left {
    position: absolute;
    top: 0;
    right: calc(51vw + 8.6vh);
    right: calc(51vw + var(--vh, 1vh)*8.6);
    width: 77.7vh;
    width: calc(var(--vh, 1vh)*77.7);
    height: 52.47vh;
    height: calc(var(--vh, 1vh)*52.47)
}

#section-pack .pack-img-wrapper .mid {
    position: absolute;
    top: 0;
    left: calc(50vw - 8.6vh);
    left: calc(50vw - var(--vh, 1vh)*8.6);
    width: 17.2vh;
    width: calc(var(--vh, 1vh)*17.2);
    height: 50vh;
    height: calc(var(--vh, 1vh)*50)
}

#section-pack .pack-img-wrapper .right {
    position: absolute;
    top: 0;
    left: calc(51vw + 8.6vh);
    left: calc(51vw + var(--vh, 1vh)*8.6);
    width: 78.6vh;
    width: calc(var(--vh, 1vh)*78.6);
    height: 50.43vh;
    height: calc(var(--vh, 1vh)*50.43)
}

#section-pack .pack-img-wrapper .tag {
    position: absolute;
    top: calc(50.43vh + 8px);
    top: calc(var(--vh, 1vh)*50.43 + 8px);
    left: calc(51vw + 27vh);
    left: calc(51vw + var(--vh, 1vh)*27)
}

#section-pack .mobile-packs-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#section-pack .mobile-packs-wrapper .gradient {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: -webkit-gradient(linear,left bottom,left top,from(transparent),to(#000));
    background: linear-gradient(0deg,transparent,#000);
    opacity: 0
}

.scene-8 #section-pack .mobile-packs-wrapper .gradient {
    opacity: 1;
    -webkit-transition: opacity .5s linear .5s;
    transition: opacity .5s linear .5s
}

#section-pack .mobile-packs-wrapper .main-pack {
    position: absolute;
    z-index: 2;
    top: calc(50vh - 42vw);
    top: calc(var(--vh, 1vh)*50 - 42vw);
    left: 35vw;
    width: 29.425vw;
    height: 83.925vw
}

#section-pack .mobile-packs-wrapper .other-pack {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 300vw
}

#section-pack .mobile-packs-wrapper .other-pack .packs {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#section-pack .mobile-packs-wrapper .other-pack .badge {
    position: absolute;
    z-index: 2;
    top: calc(50vh + 52vw);
    top: calc(var(--vh, 1vh)*50 + 52vw);
    left: 37vw;
    width: 50vw
}

#section-pack .mobile-packs-wrapper .other-pack .tag {
    position: absolute;
    z-index: 3;
    left: 5.56vw;
    bottom: 27.78vw
}

.scene-anchor.scene-anchor-9 {
    height: 300vh;
    height: calc(var(--vh, 1vh)*300)
}

#section-specs {
    background-color: #000;
    overflow: hidden
}

#stage:not(.scene-9) #section-specs {
    visibility: hidden;
    pointer-events: none
}

#section-specs .border {
    position: absolute;
    z-index: 3;
    top: 0;
    width: auto;
    height: 100%;
    visibility: hidden
}

#section-specs .border.left {
    left: 0
}

#section-specs .border.right {
    right: 0
}

#section-specs .border.flash {
    visibility: visible;
    -webkit-animation: flash .2s linear 2;
    animation: flash .2s linear 2
}

@-webkit-keyframes flash {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes flash {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

#section-specs .mask-area {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: -webkit-gradient(linear,left top,left bottom,color-stop(45%,#000),to(transparent));
    background: linear-gradient(180deg,#000 45%,transparent)
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .mask-area {
        height:122px;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(76%,#000),to(transparent));
        background: linear-gradient(180deg,#000 76%,transparent)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-specs .mask-area {
        height:140px;
        background: -webkit-gradient(linear,left top,left bottom,color-stop(57%,#000),to(transparent));
        background: linear-gradient(180deg,#000 57%,transparent)
    }
}

#section-specs .scroll-area {
    position: relative;
    z-index: 1;
    width: 1150px;
    margin: 220px auto 0;
    overflow-y: scroll
}

#section-specs .scroll-area::-webkit-scrollbar {
    width: 0
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-specs .scroll-area {
        width:896px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area {
        width:83.33vw;
        margin-top: 30px
    }
}

#section-specs .scroll-area .specs-container {
    width: 100%
}

#section-specs .scroll-area .specs-container .title {
    font-size: 30px;
    line-height: 36px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .title {
        font-size:20px;
        line-height: 30px
    }
}

#section-specs .scroll-area .specs-container .specs-wrapper {
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .specs-wrapper {
        display:block
    }
}

#section-specs .scroll-area .specs-container .specs-wrapper .specs .spec {
    margin-top: 20px
}

#section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .t {
    font-size: 16px;
    line-height: 24px
}

#section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .d {
    font-size: 24px;
    line-height: 36px;
    margin-top: 5px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .specs-wrapper .specs .spec {
        margin-top:10px;
        display: -webkit-box;
        display: flex
    }

    #section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .d,#section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .t {
        font-size: 14px;
        line-height: 24px
    }

    #section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .t {
        width: 56px
    }

    #section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .d {
        margin-left: 10px;
        margin-top: 0
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .t {
        font-size:14px;
        line-height: 20px
    }

    #section-specs .scroll-area .specs-container .specs-wrapper .specs .spec .d {
        font-size: 20px;
        line-height: 24px
    }
}

#section-specs .scroll-area .specs-container .remark {
    font-size: 14px;
    line-height: 24px;
    margin-top: 60px
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .remark {
        font-size:12px;
        line-height: 20px
    }
}

#section-specs .scroll-area .specs-container .more {
    color: #5ef6ff;
    font-size: 14px;
    line-height: 24px;
    margin-top: 30px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .more {
        margin-top:20px
    }
}

#section-specs .scroll-area .specs-container .phone-wrapper {
    position: relative;
    width: 100%;
    height: 480px;
    margin-top: 120px;
    overflow: hidden;
    display: block
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-specs .scroll-area .specs-container .phone-wrapper {
        margin-top:83px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-specs .scroll-area .specs-container .phone-wrapper {
        margin-top:72px;
        height: 410px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .phone-wrapper {
        width:80.55vw;
        height: 50vw;
        margin: 60px auto 0;
        opacity: 1
    }
}

#section-specs .scroll-area .specs-container .phone-wrapper .border {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#section-specs .scroll-area .specs-container .phone-wrapper .bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .4
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .phone-wrapper .bg.opacity {
        opacity:1
    }
}

#section-specs .scroll-area .specs-container .phone-wrapper .text-container {
    position: relative;
    z-index: 3;
    padding: 30px;
    color: #5ef6ff
}

#section-specs .scroll-area .specs-container .phone-wrapper .text-container .text {
    font-size: 40px;
    line-height: 48px
}

#section-specs .scroll-area .specs-container .phone-wrapper .text-container .learn {
    font-size: 14px;
    line-height: 24px;
    margin-top: 20px;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-specs .scroll-area .specs-container .phone-wrapper .text-container .learn {
        margin-top:14px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-specs .scroll-area .specs-container .phone-wrapper .text-container .learn {
        margin-top:12px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-specs .scroll-area .specs-container .phone-wrapper .text-container {
        padding:10px
    }

    #section-specs .scroll-area .specs-container .phone-wrapper .text-container .text {
        font-size: 20px;
        line-height: 24px
    }
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    #section-specs .scroll-area .specs-container .phone-wrapper:hover .bg {
        opacity:1
    }
}

#section-aside {
    pointer-events: none
}

#section-aside .pnlcv--left {
    width: 100%
}

#section-aside .cus-text .b-wrapper {
    margin-bottom: 10px
}

#section-aside .title-0,#section-aside .title-1,#section-aside .title-2 {
    width: 580px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-aside .title-0,#section-aside .title-1,#section-aside .title-2 {
        width:400px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-aside .title-0,#section-aside .title-1,#section-aside .title-2 {
        width:400px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-aside .title-0,#section-aside .title-1,#section-aside .title-2 {
        width:250px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-aside .title-0,#section-aside .title-1,#section-aside .title-2 {
        width:270px
    }
}

#section-aside .title-3 {
    width: 420px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-aside .title-3 {
        width:320px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-aside .title-3 {
        width:320px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-aside .title-3 {
        width:250px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-aside .title-3 {
        width:270px
    }
}

#section-aside .title-4,#section-aside .title-5 {
    width: 400px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-aside .title-4,#section-aside .title-5 {
        width:275px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-aside .title-4,#section-aside .title-5 {
        width:275px
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-aside .title-4,#section-aside .title-5 {
        width:250px
    }
}

@media (orientation: portrait) and (max-width:720px) {
    #section-aside .title-4,#section-aside .title-5 {
        width:270px
    }

    .scene-7 #section-aside .title-4,.scene-7 #section-aside .title-5 {
        width: 93.89vw
    }
}

#section-aside .aside-title {
    position: absolute;
    top: 13.888888888888888vh;
    top: calc(var(--vh, 1vh)*13.88889);
    left: 2.777777777777778vh;
    left: calc(var(--vh, 1vh)*2.77778);
    padding: 20px 20px 30px;
    color: #fcee0a
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-aside .aside-title {
        padding:10px 10px 20px;
        top: 112px;
        left: 10px
    }
}

#section-aside .aside-title .border {
    z-index: 1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0
}

#section-aside .aside-title .border.active {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    transition: opacity 0s .2s,-webkit-transform .4s;
    -webkit-transition: opacity 0s .2s,-webkit-transform .4s;
    transition: transform .4s,opacity 0s .2s;
    transition: transform .4s,opacity 0s .2s,-webkit-transform .4s
}

#section-aside .aside-title .border.inactive {
    transition: opacity 0s .1s,-webkit-transform .4s;
    -webkit-transition: opacity 0s .1s,-webkit-transform .4s;
    transition: transform .4s,opacity 0s .1s;
    transition: transform .4s,opacity 0s .1s,-webkit-transform .4s
}

#section-aside .aside-title .aside-tips {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    font-size: 12px;
    line-height: 1.67;
    opacity: 0;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-aside .aside-title .aside-tips {
        top:calc(95vh - 150px);
        top: calc(var(--vh, 1vh)*95 - 150px);
        left: 10px
    }
}

.scene-5-3 #section-aside .aside-title .aside-tips {
    opacity: 1
}

.scene-5-6 #section-aside .aside-title .aside-tips {
    opacity: 0
}

#section-aside .aside-title .cus-text {
    z-index: 2
}

#section-aside .aside-title .cus-text .text-b {
    font-size: 40px;
    line-height: 1.2
}

@media (min-width: 1366px) and (max-width:1919px) {
    #section-aside .aside-title .cus-text .text-b {
        font-size:24px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #section-aside .aside-title .cus-text .text-b {
        font-size:24px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-aside .aside-title .cus-text .text-b {
        font-size:20px
    }
}

#section-aside .aside-title .cus-text .text-s {
    font-size: 14px;
    line-height: 1.7
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-aside .aside-title .cus-text .text-s {
        font-size:14px
    }
}

#stage {
    margin-top: -60px;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    #stage {
        margin-top:-50px
    }
}

#section-bg {
    z-index: 1
}

#section-role {
    z-index: 5
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-role {
        z-index:11;
        pointer-events: none
    }
}

#section-panel {
    z-index: 10
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    #section-panel {
        z-index:12
    }
}

#section-keywords {
    z-index: 10
}

@media (max-width: 1024px) and (orientation:portrait) {
    #section-keywords {
        z-index:12
    }
}

#section-aside {
    z-index: 9
}

@media (max-width: 1024px) and (orientation:portrait) {
    #stage:not(.scene-6) #section-aside {
        z-index:12
    }
}

#section-pack {
    z-index: 11
}

#section-specs {
    z-index: 12
}

.scene-anchor {
    height: 50vh;
    height: calc(var(--vh, 1vh)*50)
}

.scene-anchor-1 {
    height: 10vh;
    height: calc(var(--vh, 1vh)*10)
}

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

body.hide-body {
    overflow: visible;
    height: auto
}

#universal-loading-canvas {
    display: none
}

.one-video-container .close-btn {
    cursor: inherit
}

.landing-container .container {
    padding: 0;
    margin: 0;
    width: auto
}

.landing-container .container:after,.landing-container .container:before {
    content: none
}

.g--center,.g--container,.g--sub-container {
    margin: 0 auto
}

.g--container {
    width: 1496px
}

@media (min-width: 1366px) and (max-width:1919px) {
    .g--container {
        width:1036px
    }
}

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

@media (orientation: portrait) and (max-width:720px) {
    .g--container {
        width:88.88888888888889vw
    }
}

@media (orientation: portrait) and (min-width:721px) and (max-width:1024px) {
    .g--container {
        width:93.75vw
    }
}

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

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

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

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

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

.landing-container .font--h1 {
    font-size: 60px;
    line-height: 72px
}

@media (min-width: 1366px) and (max-width:1919px) {
    .landing-container .font--h1 {
        font-size:40px;
        line-height: 48px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .font--h1 {
        font-size:36px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .font--h1 {
        font-size:32px;
        line-height: 38px
    }
}

.landing-container .font--keyword {
    font-size: 20px;
    line-height: 24px
}

@media (min-width: 1366px) and (max-width:1919px) {
    .landing-container .font--keyword {
        font-size:13px;
        line-height: 16px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .font--keyword {
        font-size:12px;
        line-height: 14px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .font--keyword {
        font-size:9px;
        line-height: 11px
    }
}

.landing-container .font--label {
    font-size: 12px;
    line-height: 14px
}

.landing-container .font--p {
    white-space: pre-line;
    font-size: 18px;
    line-height: 27px
}

@media (min-width: 1366px) and (max-width:1919px) {
    .landing-container .font--p {
        font-size:16px;
        line-height: 24px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    .landing-container .font--p {
        font-size:14px;
        line-height: 24px
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .font--p {
        font-size:14px;
        line-height: 24px
    }
}

.landing-container .font--p sup {
    top: -1em;
    font-size: 9px;
    top: -1.3em
}

.landing-container .font--link {
    font-size: 20px;
    line-height: 30px;
    color: #5ef6ff
}

.landing-container .font--note {
    font-size: 12px;
    line-height: 1.7
}

.landing-container {
    font-size: 16px
}

.landing-container * {
    box-sizing: border-box
}

.landing-container .link,.landing-container a {
    text-decoration: none;
    cursor: inherit;
    font-size: inherit;
    line-height: inherit
}

.landing-container .link,.landing-container .link.acitve,.landing-container .link:focus,.landing-container .link:hover,.landing-container a,.landing-container a.acitve,.landing-container a:focus,.landing-container a:hover {
    color: inherit
}

.landing-container canvas,.landing-container img,.landing-container video {
    display: block
}

.landing-container img,.landing-container video {
    max-width: none
}

.landing-container canvas img {
    display: none
}

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

.landing-container sup {
    top: -1.2em;
    font-size: 35%;
    top: -1.8em
}

@-webkit-keyframes g--flicker {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@keyframes g--flicker {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes g--flicker-reverse {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes g--flicker-reverse {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

body {
    background: #000
}

body.no-scroll {
    overflow: hidden
}

.landing-container,#navbar {
    color: #fcee0a
}

.landing-container .vertical-center {
    height: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center
}

.landing-container .vertical-center>* {
    width: 100%
}

.landing-container .horizontal-center {
    width: 100%;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column
}

.landing-container .horizontal-center>* {
    height: 100%
}

.landing-container .text-center {
    text-align: center
}

.landing-container .g--sticky-container,.landing-container .relative,.landing-container .sticky-container {
    position: relative
}

.landing-container .sticky,.landing-container .sticky-item {
    position: -webkit-sticky;
    position: sticky;
    top: 0
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    .landing-container .relative-ls {
        position:relative
    }
}

.landing-container .absolute {
    position: absolute;
    top: 0;
    left: 0
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    .landing-container .absolute-ls {
        position:absolute;
        top: 0;
        left: 0
    }
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .absolute-pt {
        position:absolute;
        top: 0;
        left: 0
    }
}

.landing-container .fixed {
    position: fixed;
    top: 0;
    left: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    .landing-container .fixed-pt {
        position:fixed;
        top: 0;
        left: 0
    }
}

.g--image-wrapper {
    position: relative;
    width: 100%;
    height: 0
}

.g--image-wrapper>img {
    position: absolute;
    width: 100%;
    height: 100%
}

.g--full,.g--full-width {
    width: 100%
}

.g--full,.g--full-height {
    height: 100%
}

.icon--hover {
    position: relative
}

.icon--hover .default {
    display: block
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    :hover.icon--hover .default {
        display:none
    }
}

.icon--hover .hover {
    display: none
}

@media (orientation: landscape) and (min-width:1024px),(orientation:portrait) and (min-width:1025px) {
    :hover.icon--hover .hover {
        display:block
    }
}

.panel--curved {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50vh;
    transform-origin: 50% 50vh;
    -webkit-transform: perspective(52.0833vw);
    transform: perspective(52.0833vw);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

@media (max-width: 1024px) and (orientation:portrait) {
    .panel--curved {
        -webkit-transform:none;
        transform: none;
        -webkit-transform-style: flat;
        transform-style: flat
    }
}

.pnlcv--left,.pnlcv--right {
    -webkit-box-flex: 0;
    flex: 0 0 auto
}

.pnlcv--left {
    -webkit-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotateY(5deg);
    transform: rotateY(5deg)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .pnlcv--left {
        -webkit-transform:none;
        transform: none
    }
}

.pnlcv--right {
    -webkit-transform-origin: right;
    transform-origin: right;
    -webkit-transform: rotateY(-5deg);
    transform: rotateY(-5deg)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .pnlcv--right {
        -webkit-transform:none;
        transform: none
    }
}

.no-perspective .pnlcv--left,.no-perspective .pnlcv--right {
    -webkit-transform: none;
    transform: none
}

#cz-slider {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    z-index: 99;
    display: none
}

#cz-slider .stretch-box,#cz-slider .stretch-box>* {
    position: relative;
    height: 100%
}

#cz-slider .stretch-box>* {
    width: 100%
}

#cz-slider .stretch-box .border {
    opacity: 0
}

#cz-slider .stretch-box .clip-wrapper .inner,#cz-slider .stretch-box .clip-wrapper .outer {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0,100% 0,100% calc(100% - 60px),calc(100% - 60px) 100%,0 100%);
    clip-path: polygon(0 0,100% 0,100% calc(100% - 60px),calc(100% - 60px) 100%,0 100%)
}

#cz-slider .stretch-box .clip-wrapper .outer {
    width: 100%;
    height: 100%;
    background: #fcee0a
}

#cz-slider .stretch-box .clip-wrapper .inner {
    width: calc(100% - 2px);
    height: calc(100% - 2px)
}

#cz-slider .stretch-box .clip-wrapper .inner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#cz-slider .stretch-box .clip-wrapper .border-r {
    width: 2%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: #fcee0a
}

#cz-slider .stretch-box .border-l {
    width: auto;
    height: 78%;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: translateX(-99%);
    transform: translateX(-99%)
}

#cz-slider .stretch-box .border-l img {
    width: 100%;
    height: 100%
}

#cz-slider .stretch-box .box-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}

#cz-slider .stretch-box.expand {
    width: 890px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .stretch-box.expand {
        width:616px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .stretch-box.expand {
        width:533px;
        width: 480px
    }
}

#cz-slider .stretch-box.expand .box-mask {
    opacity: 0
}

#cz-slider .stretch-box.shrink {
    width: 320px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .stretch-box.shrink {
        width:222px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .stretch-box.shrink {
        width:192px;
        width: 170px
    }
}

#cz-slider .stretch-box.shrink .inner,#cz-slider .stretch-box.shrink .outer {
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,100% 100%,0 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,100% 100%,0 100%)
}

#cz-slider .stretch-box.shrink .box-mask {
    opacity: .4
}

#cz-slider .stretch-box.shrink:hover .outer {
    background: #5ef6ff
}

#cz-slider .stretch-box.shrink:hover .inner {
    -webkit-clip-path: polygon(1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),1px calc(100% - 1px));
    clip-path: polygon(1px 1px,calc(100% - 1px) 1px,calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),1px calc(100% - 1px))
}

#cz-slider .stretch-box.shrink:hover .box-mask {
    opacity: 0
}

#cz-slider .stretch-box.border-anime .border {
    -webkit-animation: blink .2s step-start .4s 2 forwards;
    animation: blink .2s step-start .4s 2 forwards
}

#cz-slider .stretch-box.border-anime-reverse .border {
    opacity: 1;
    -webkit-animation: blink-reverse .1s step-end 2 forwards;
    animation: blink-reverse .1s step-end 2 forwards
}

#cz-slider .twinkle {
    position: relative;
    width: 100%;
    height: 100%
}

#cz-slider .twinkle .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#cz-slider .twinkle .layer .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fcee0a
}

#cz-slider .twinkle .layer-0 {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#cz-slider .twinkle .layer-0 .content {
    height: 20%;
    top: auto;
    bottom: 0;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

#cz-slider .twinkle .layer-1 .content {
    height: 30%;
    opacity: 0
}

#cz-slider .twinkle .layer-2 .content {
    height: 60%;
    opacity: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    #cz-slider .twinkle .layer-2 .content {
        height:80%
    }
}

#cz-slider .twinkle.active .layer-0 {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
    transition: opacity 0s .1s,-webkit-transform .1s;
    -webkit-transition: opacity 0s .1s,-webkit-transform .1s;
    transition: transform .1s,opacity 0s .1s;
    transition: transform .1s,opacity 0s .1s,-webkit-transform .1s
}

@media (max-width: 1024px) and (orientation:portrait) {
    #cz-slider .twinkle.active .layer-0 {
        -webkit-transform:translateY(-40%);
        transform: translateY(-40%)
    }
}

#cz-slider .twinkle.active .layer-0 .content {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    transition: -webkit-transform .1s linear;
    -webkit-transition: -webkit-transform .1s linear;
    transition: transform .1s linear;
    transition: transform .1s linear,-webkit-transform .1s linear
}

#cz-slider .twinkle.active .layer-1 {
    opacity: 0;
    -webkit-transition: opacity 0s .3s;
    transition: opacity 0s .3s
}

#cz-slider .twinkle.active .layer-1 .content {
    opacity: 1;
    -webkit-transition: opacity 0s .2s;
    transition: opacity 0s .2s
}

#cz-slider .twinkle.active .layer-2 .content {
    opacity: 1;
    -webkit-transition: opacity 0s .4s;
    transition: opacity 0s .4s
}

#cz-slider .center-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#cz-slider .center-wrapper,#cz-slider .container {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center
}

#cz-slider .container {
    z-index: 2;
    position: relative;
    max-width: initial;
    width: 1700px;
    height: 570px;
    overflow: hidden;
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container {
        width:1177px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container {
        width:1018px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container {
        height:395px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container {
        height:341px;
        width: 920px
    }
}

#cz-slider .container .slider {
    position: relative;
    width: 1670px;
    height: 548px;
    opacity: 0
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .slider {
        width:1156px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .slider {
        width:1000px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .slider {
        height:379px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .slider {
        height:328px;
        width: 900px
    }
}

#cz-slider .container .slider .stretch-box {
    position: absolute;
    top: 0;
    left: 0
}

#cz-slider .container .mask {
    position: absolute;
    top: 11px;
    left: 15px;
    width: 1670px;
    height: 548px;
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    pointer-events: none
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .mask {
        top:8px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .mask {
        top:7px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .mask {
        left:10px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .mask {
        left:9px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .mask {
        width:1156px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .mask {
        width:1000px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .mask {
        height:379px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .mask {
        height:328px
    }
}

#cz-slider .container .mask>* {
    width: 320px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .mask>* {
        width:222px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .mask>* {
        width:192px;
        width: 170px
    }
}

#cz-slider .container .mask>:first-child {
    -webkit-transform: rotateY(5deg);
    transform: rotateY(5deg)
}

#cz-slider .container .mask>:nth-child(2) {
    width: 890px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .container .mask>:nth-child(2) {
        width:616px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .container .mask>:nth-child(2) {
        width:533px;
        width: 480px
    }
}

#cz-slider .container .mask>:nth-child(3) {
    -webkit-transform: rotateY(-5deg);
    transform: rotateY(-5deg)
}

#cz-slider .bg {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000
}

#cz-slider .s-btn {
    position: absolute;
    z-index: 3;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 60px;
    height: 60px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .s-btn {
        width:42px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .s-btn {
        width:36px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .s-btn {
        height:42px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .s-btn {
        height:36px
    }
}

#cz-slider .s-btn img {
    width: 100%;
    height: 100%
}

#cz-slider .s-btn.next {
    right: 20px;
    -webkit-transform: translateX(200%);
    transform: translateX(200%)
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .s-btn.next {
        right:14px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .s-btn.next {
        right:12px
    }
}

#cz-slider .s-btn.prev {
    left: 20px;
    -webkit-transform: translateX(-200%);
    transform: translateX(-200%)
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .s-btn.prev {
        left:14px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .s-btn.prev {
        left:12px
    }
}

#cz-slider .s-btn .normal {
    opacity: 1
}

#cz-slider .s-btn .s-hover {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0
}

#cz-slider .s-btn:hover .normal {
    opacity: 0
}

#cz-slider .s-btn:hover .s-hover {
    opacity: 1
}

#cz-slider .close {
    z-index: 3;
    width: 38px;
    height: 38px;
    position: absolute;
    top: 42px;
    right: 42px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .close {
        width:26px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .close {
        width:23px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .close {
        height:26px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .close {
        height:23px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .close {
        top:29px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .close {
        top:25px
    }
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .close {
        right:29px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .close {
        right:25px
    }
}

#cz-slider .slide-line {
    z-index: 3;
    position: absolute;
    display: -webkit-box;
    display: flex;
    bottom: calc(40vh - 219.2px);
    bottom: calc((var(--vh, 1vh)*50 - 274px)*0.8);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-box-pack: center;
    justify-content: center
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .slide-line {
        bottom:calc(40vh - 152px);
        bottom: calc((var(--vh, 1vh)*50 - 190px)*0.8)
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .slide-line {
        bottom:calc(40vh - 131.2px);
        bottom: calc((var(--vh, 1vh)*50 - 164px)*0.8)
    }
}

#cz-slider .slide-line>:not(:first-child) {
    margin-left: 10px
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .slide-line>:not(:first-child) {
        margin-left:7px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .slide-line>:not(:first-child) {
        margin-left:6px
    }
}

#cz-slider .slide-line .line {
    width: 40px;
    height: 3px;
    border: 1px solid #5ef6ff
}

@media (min-width: 1366px) and (max-width:1919px) {
    #cz-slider .slide-line .line {
        width:28px
    }
}

@media (min-width: 1024px) and (max-width:1365px) {
    #cz-slider .slide-line .line {
        width:24px
    }
}

#cz-slider .slide-line .line.current {
    background: #5ef6ff
}

#cz-slider .bg,#cz-slider .s-btn,#cz-slider .slide-line {
    opacity: 0
}

#cz-slider.show {
    display: block
}

#cz-slider.disappear {
    display: none
}

#cz-slider.open .bg {
    opacity: .8;
    -webkit-transition: opacity .5s;
    transition: opacity .5s
}

#cz-slider.open .slide-line,#cz-slider.open .slider {
    opacity: 1;
    -webkit-transition: opacity 0s .5s;
    transition: opacity 0s .5s
}

#cz-slider.open .mask {
    opacity: 0;
    -webkit-transition: opacity 0s .5s;
    transition: opacity 0s .5s
}

#cz-slider.open .s-btn {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    transition: opacity 0s .2s,-webkit-transform .5s .5s;
    -webkit-transition: opacity 0s .2s,-webkit-transform .5s .5s;
    transition: opacity 0s .2s,transform .5s .5s;
    transition: opacity 0s .2s,transform .5s .5s,-webkit-transform .5s .5s
}

#cz-slider.open .slide-line {
    opacity: 1;
    -webkit-transition: opacity 0s .5s;
    transition: opacity 0s .5s
}

#slider-pt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    z-index: 99;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    visibility: hidden
}

#slider-pt .twinkle {
    position: relative;
    width: 100%;
    height: 100%
}

#slider-pt .twinkle .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#slider-pt .twinkle .layer .content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fcee0a
}

#slider-pt .twinkle .layer-0 {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

#slider-pt .twinkle .layer-0 .content {
    height: 20%;
    top: auto;
    bottom: 0;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transform: scaleY(0);
    transform: scaleY(0)
}

#slider-pt .twinkle .layer-1 .content {
    height: 30%;
    opacity: 0
}

#slider-pt .twinkle .layer-2 .content {
    height: 60%;
    opacity: 0
}

@media (max-width: 1024px) and (orientation:portrait) {
    #slider-pt .twinkle .layer-2 .content {
        height:80%
    }
}

#slider-pt .twinkle.active .layer-0 {
    -webkit-transform: translateY(-10%);
    transform: translateY(-10%);
    opacity: 0;
    transition: opacity 0s .1s,-webkit-transform .1s;
    -webkit-transition: opacity 0s .1s,-webkit-transform .1s;
    transition: transform .1s,opacity 0s .1s;
    transition: transform .1s,opacity 0s .1s,-webkit-transform .1s
}

@media (max-width: 1024px) and (orientation:portrait) {
    #slider-pt .twinkle.active .layer-0 {
        -webkit-transform:translateY(-40%);
        transform: translateY(-40%)
    }
}

#slider-pt .twinkle.active .layer-0 .content {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
    transition: -webkit-transform .1s linear;
    -webkit-transition: -webkit-transform .1s linear;
    transition: transform .1s linear;
    transition: transform .1s linear,-webkit-transform .1s linear
}

#slider-pt .twinkle.active .layer-1 {
    opacity: 0;
    -webkit-transition: opacity 0s .3s;
    transition: opacity 0s .3s
}

#slider-pt .twinkle.active .layer-1 .content {
    opacity: 1;
    -webkit-transition: opacity 0s .2s;
    transition: opacity 0s .2s
}

#slider-pt .twinkle.active .layer-2 .content {
    opacity: 1;
    -webkit-transition: opacity 0s .4s;
    transition: opacity 0s .4s
}

#slider-pt .twinkle-container {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 5.555555555555555vw;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 88.88888888888889vw;
    height: 76vh;
    height: calc(var(--vh, 1vh)*76);
    opacity: 1;
    pointer-events: none
}

#slider-pt .box-container {
    position: relative;
    z-index: 2;
    margin-left: 5.555555555555555vw;
    height: 76vh;
    height: calc(var(--vh, 1vh)*76);
    display: -webkit-box;
    display: flex
}

#slider-pt .box-container .box {
    position: relative;
    width: 88.88888888888889vw;
    height: 100%;
    margin-right: 5.555555555555555vw;
    flex-shrink: 0
}

#slider-pt .box-container .box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

#slider-pt .bg {
    opacity: 0;
    background: #000
}

#slider-pt .close {
    position: absolute;
    width: 20px;
    height: 20px;
    right: 20px;
    top: 20px
}

#slider-pt .slide-line {
    z-index: 3;
    position: absolute;
    width: 190px;
    height: 4px;
    bottom: 8vh;
    bottom: calc(var(--vh, 1vh)*8);
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    display: -webkit-box;
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between
}

#slider-pt .slide-line .line {
    width: 40px;
    height: 4px;
    border: 1px solid #5ef6ff
}

#slider-pt .slide-line .line.current {
    background: #5ef6ff
}

#slider-pt.open {
    visibility: visible
}

#slider-pt.open .twinkle-container {
    opacity: 0;
    -webkit-transition: opacity 0s .5s;
    transition: opacity 0s .5s
}

#slider-pt.open .bg {
    opacity: .8;
    -webkit-transition: opacity .4s;
    transition: opacity .4s
}

#slider-pt .clip-box .c-outer {
    background: rgba(252,238,10,.5)
}

#slider-pt .clip-box .c-inner,#slider-pt .clip-box .c-outer {
    -webkit-clip-path: polygon(3% 0,100% 0,100% 90%,85% 100%,3% 100%,0 97%,0 30%,3% 27%);
    clip-path: polygon(3% 0,100% 0,100% 90%,85% 100%,3% 100%,0 97%,0 30%,3% 27%)
}

#slider-pt .clip-box .c-inner {
    position: absolute;
    top: 1px;
    left: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    background: #000
}

#slider-pt .clip-box .c-inner .img {
    width: 100%;
    height: 100%
}

#slider-pt .clip-box .c-inner .c-border {
    position: absolute;
    bottom: 0;
    height: 100%;
    background: #fcee0a;
    opacity: 0
}

#slider-pt .clip-box .c-inner .left {
    left: 0;
    width: 1.5%
}

#slider-pt .clip-box .c-inner .right {
    right: 0;
    width: 3%
}

#slider-pt .clip-box.border-anime .c-border {
    -webkit-animation: blink .2s step-start .5s 2 forwards;
    animation: blink .2s step-start .5s 2 forwards
}

@-webkit-keyframes blink {
    0% {
        opacity: 0
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

@keyframes blink {
    0% {
        opacity: 0
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

#slider-pt .clip-box.border-anime-reverse .c-border {
    opacity: 1;
    -webkit-animation: blink-reverse .1s step-end 2 forwards;
    animation: blink-reverse .1s step-end 2 forwards
}

@-webkit-keyframes blink-reverse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 0
    }
}

@keyframes blink-reverse {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 0
    }
}

.desc-line {
    height: 100%;
    top: 0;
    left: 0
}

.desc-line,.desc-line .line {
    position: absolute;
    width: 100%
}

.desc-line .line {
    height: 1px;
    background: #fcee0a
}

.desc-square {
    height: 16px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .desc-square {
        height:16px
    }
}

.desc-square .square-line {
    width: 100%;
    height: 8px;
    background: #fcee0a;
    margin-bottom: 2px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .desc-square .square-line {
        height:7px;
        margin-bottom: 4px
    }
}

.desc-square .square-wrapper {
    position: relative;
    width: 90%;
    height: 8px;
    overflow: hidden
}

@media (max-width: 1024px) and (orientation:portrait) {
    .desc-square .square-wrapper {
        height:5px
    }
}

.desc-square .square-wrapper .square {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #fcee0a
}

.cus-description {
    width: 500px;
    height: 200px
}

.cus-description,.cus-description>* {
    position: absolute
}

.cus-description[data-type*=left] {
    text-align: left
}

.cus-description[data-type*=left] .desc-square,.cus-description[data-type*=left] .desc-text,.cus-description[data-type*=left] .line {
    left: 0
}

.cus-description[data-type*=left] .desc-square {
    -webkit-clip-path: inset(0 0 0 100%);
    clip-path: inset(0 0 0 100%)
}

.cus-description[data-type*=left] .desc-square .square-line {
    -webkit-clip-path: polygon(0 0,100% 0,85% 100%,0 100%);
    clip-path: polygon(0 0,100% 0,85% 100%,0 100%)
}

.cus-description[data-type*=left] .desc-square .square-wrapper {
    margin-right: auto
}

.cus-description[data-type*=left] .desc-square .square {
    -webkit-transform-origin: left;
    transform-origin: left
}

.cus-description[data-type*=left] .line {
    -webkit-transform-origin: right;
    transform-origin: right
}

.cus-description[data-type*=right] {
    text-align: right
}

.cus-description[data-type*=right] .desc-square,.cus-description[data-type*=right] .desc-text,.cus-description[data-type*=right] .line {
    right: 0
}

.cus-description[data-type*=right] .desc-square {
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0)
}

.cus-description[data-type*=right] .desc-square .square-line {
    -webkit-clip-path: polygon(0 0,100% 0,100% 100%,25% 100%);
    clip-path: polygon(0 0,100% 0,100% 100%,25% 100%)
}

.cus-description[data-type*=right] .desc-square .square-wrapper {
    margin-left: auto
}

.cus-description[data-type*=right] .desc-square .square {
    -webkit-transform-origin: right;
    transform-origin: right
}

.cus-description[data-type*=right] .line {
    -webkit-transform-origin: left;
    transform-origin: left
}

.cus-description[data-type*=up] .desc-text {
    bottom: 10px
}

@media (max-width: 1024px) and (orientation:portrait) {
    .cus-description[data-type*=up] .desc-text {
        bottom:6px
    }
}

.cus-description[data-type*=up] .desc-square {
    bottom: 1px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%)
}

.cus-description[data-type*=up] .line {
    bottom: 0
}

.cus-description[data-type*=down] .desc-text {
    top: 0;
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .cus-description[data-type*=down] .desc-text {
        -webkit-transform:translateY(-106%);
        transform: translateY(-106%)
    }
}

.cus-description[data-type*=down] .desc-square,.cus-description[data-type*=down] .line {
    top: 0
}

.cus-description[data-type=left] .desc-text,.cus-description[data-type=right] .desc-text {
    top: 0;
    -webkit-transform: translateY(-110%);
    transform: translateY(-110%)
}

@media (max-width: 1024px) and (orientation:portrait) {
    .cus-description[data-type=left] .desc-text,.cus-description[data-type=right] .desc-text {
        -webkit-transform:translateY(-106%);
        transform: translateY(-106%)
    }
}

.cus-description[data-type=left] .desc-square,.cus-description[data-type=right] .desc-square {
    top: 0
}

.cus-description[data-type=left] .line,.cus-description[data-type=right] .line {
    top: 0;
    left: 0;
    width: 100%;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: center;
    transform-origin: center
}

.cus-description[data-type=left] .line.line-active,.cus-description[data-type=right] .line.line-active {
    -webkit-transform: scaleX(1);
    transform: scaleX(1)
}

.cus-description[data-type=left] .line.line-active,.cus-description[data-type=left] .line.line-inactive,.cus-description[data-type=right] .line.line-active,.cus-description[data-type=right] .line.line-inactive {
    transition: -webkit-transform .4s;
    -webkit-transition: -webkit-transform .4s;
    transition: transform .4s;
    transition: transform .4s,-webkit-transform .4s
}

.cus-description .desc-line,.cus-description .desc-text {
    opacity: 0
}

.cus-description.active .desc-line,.cus-description.active .desc-text {
    opacity: 1
}

.cus-description.active .desc-line {
    -webkit-transition: opacity 0s;
    transition: opacity 0s
}

.cus-description.active .desc-text {
    -webkit-transition: opacity 0s .2s;
    transition: opacity 0s .2s
}

.cus-description.active .desc-square {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    transition: -webkit-clip-path .2s .2s;
    -webkit-transition: -webkit-clip-path .2s .2s;
    transition: clip-path .2s .2s;
    transition: clip-path .2s .2s,-webkit-clip-path .2s .2s
}

.cus-description.inactive .desc-line {
    -webkit-transition: opacity 0s .2;
    transition: opacity 0s .2
}

.cus-description.inactive .desc-text {
    -webkit-transition: opacity .1s .1s;
    transition: opacity .1s .1s
}

.cus-description.inactive .desc-square {
    transition: -webkit-clip-path .1s;
    -webkit-transition: -webkit-clip-path .1s;
    transition: clip-path .1s;
    transition: clip-path .1s,-webkit-clip-path .1s
}

.cus-text {
    opacity: 0
}

.cus-text .sub-text {
    opacity: 0;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: .4s;
    transition-duration: .4s
}

.cus-text .sub-text:nth-child(n) {
    -webkit-transition-delay: .1s;
    transition-delay: .1s
}

.cus-text .sub-text:nth-child(2n) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.cus-text .sub-text:nth-child(4n) {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.cus-text .sub-text:nth-child(n+1) {
    -webkit-transition-delay: .2s;
    transition-delay: .2s
}

.cus-text .sub-text:nth-child(odd) {
    -webkit-transition-delay: .3s;
    transition-delay: .3s
}

.cus-text .sub-text:nth-child(4n+1) {
    -webkit-transition-delay: .4s;
    transition-delay: .4s
}

.cus-text.active {
    opacity: 1;
    -webkit-animation: t-blink .1s step-start .7s 1 forwards;
    animation: t-blink .1s step-start .7s 1 forwards
}

.cus-text.active .sub-text {
    opacity: 1
}

@-webkit-keyframes t-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

@keyframes t-blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: .3
    }

    to {
        opacity: 1
    }
}

.landing-container img.loading,.landing-container img:not([src]) {
    opacity: 0
}

.landing-container img.loaded {
    opacity: 1
}

.landing-container .g--popup-user {
    display: none
}

.one-video-container {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 15000;
    left: 0;
    top: 0;
    background-color: #000
}

.one-video-container.embedded {
    position: relative;
    z-index: 3
}

.one-video-container.mobile {
    position: fixed;
    z-index: 15000
}

.one-video-container .close-btn {
    position: absolute;
    z-index: 110;
    cursor: pointer;
    width: 40px;
    height: 40px;
    top: 10px;
    right: 10px
}

.one-video-container .close-btn:after,.one-video-container .close-btn:before {
    content: "";
    display: block;
    background-color: #fff
}

.one-video-container .close-btn:hover:after,.one-video-container .close-btn:hover:before {
    background-color: #fff;
    border-color: #ccc
}

.one-video-container .close-btn:before {
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    height: 0;
    width: 24px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -1px;
    margin-left: -12px
}

.one-video-container .close-btn:after {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    height: 24px;
    width: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -1px;
    margin-top: -12px
}

.one-video-container .close-btn:after,.one-video-container .close-btn:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}

.one-video-container .video-areas {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    background-color: #000
}

.one-video-container .video-areas>div,.one-video-container .video-areas>iframe {
    width: 100%;
    height: 100%
}