/* ----------------- first Stage */
.dc_container {
    position: fixed;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000000000;
}

.dc_container .dc_rm_container {
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.dc_container div,
.dc_container img {
    position: absolute;
}


.dc_container .centerLeft {
    left: 50%;
    transform: translate(-50%);
}

.dc_container .stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: 0.3s ease-in-out;
}

.dc_container .noShow {
    display: none;
}

.dc_container .hide {
    opacity: 0;
    pointer-events: none;
}

.dc_container .dc_rm_container .dc_box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.3s ease-in-out;
    background-color: #ffffff;
}

.dc_container .logo {
    width: calc(130/640*100%);
    left: calc(52/640*100%);
    top: calc(52/960*100%);
    pointer-events: none;
}

.dc_container .copy {
    width: calc(431/640*100%);
    left: calc(63/640*100%);
    top: calc(177/960*100%);
    transition: 0.3s ease-in-out;
    pointer-events: none;
}

.dc_container .info {
    width: calc(392/640*100%);
    left: calc(63/640*100%);
    top: 50%;
    transform: translate(0, 500%);
    transition: 0.3s ease-in-out;
    pointer-events: none;
}

.dc_container .arrowBox {
    width: calc(78/640*100vw);
    height: calc(115/640*100vw);
    top: 50%;
    transform: translate(-50%, 170%);
    transition: 0.3s ease-in-out;
}

.dc_container .arrow {
    width: calc(51/640*100vw);
}

.dc_container .arrow1 {
    bottom: 0;
    left: 0;
}

.dc_container .arrow1.arrowMove {
    animation: arrowMove 1s ease-in-out infinite alternate;
}

.dc_container .arrow2.arrowMove {
    animation: arrowMove2 1s ease-in-out infinite alternate;
}

.dc_container .arrow2 {
    top: 0;
    right: 0;
    transform: rotate(180deg);
}

@keyframes arrowMove {
    100% {
        transform: translateY(30%);
    }
}

@keyframes arrowMove2 {
    100% {
        transform: rotate(180deg) translateY(30%);
    }
}

.dc_container .teehtContainer {
    width: 100%;
    height: 100%;
    top: 0%;
    transform: translate(-50%, 33%);
}

.dc_container .teethBox {
    width: calc(533/640*100vw);
    height: calc(306/640*100vw);
    top: 0%;
    transform: translate(-50%, 0%);
}

.dc_container .teeth {
    width: 100%;
}

.dc_container .sm {
    transition: 0.1s ease-in-out;
}

.dc_container .sm1 {
    width: calc(83/640*100vw);
    left: calc(441/533*100%);
    top: calc(145/306*100%);
}

.dc_container .sm2 {
    width: calc(61/640*100vw);
    left: calc(328/533*100%);
    top: calc(117/306*100%);
}

.dc_container .sm3 {
    width: calc(89/640*100vw);
    left: calc(257/533*100%);
    top: calc(133/306*100%);
}

.dc_container .sm4 {
    width: calc(45/640*100vw);
    left: calc(152/533*100%);
    top: calc(145/306*100%);
}

.dc_container .sm5 {
    width: calc(61/640*100vw);
    left: calc(14/533*100%);
    top: calc(101/306*100%);
}

.dc_container .gum {
    width: calc(186/640*100vw);
    left: 64%;
    top: 70%;
}



.dc_container .cta {
    width: calc(500/640*100%);
    left: calc(72/640*100%);
    bottom: calc(40/960*100%);
}


.dc_container .stage {
    transition: 0.3s ease-in-out;
    background-color: #ffffff;
}

.dc_container .pic {
    width: 100%;
    top: 0;
}



.dc_container .end_copy {
    width: calc(420/640*100vw);
    left: calc(37/640*100%);
    top: calc(687/960*100%);
}

.dc_container .button {
    width: calc(305/640*100vw);
    left: calc(298/640*100%);
    top: calc(827/960*100%);
}

.dc_container .clickArea {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}


.dc_container .player {
    position: absolute;
    width: calc(566/640*100%);
    height: calc(318/640*100vw);
    top: calc(322/960*100%);
    overflow: hidden;
    border-radius: 10px;
}

.dc_container #video {
    width: 100%;
    height: auto;
}


.dc_container .layer {
    width: 100%;
    bottom: 19%;
}

.dc_container .volume {
    position: absolute;
    right: 0%;
    top: 0%;
    width: 10%;
    height: auto;
}

.dc_container .pause {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 10%;
    height: auto;
}



/* ----- media queries */
@media (max-aspect-ratio: 320/481) {}

@media (max-aspect-ratio: 320/630) {}

@media (min-aspect-ratio: 540/721) {
    /* // .firstStage .txt {
        //     width: 65%;
        // }
        // .firstStage .button {
        //     width: 45%;
        //     top: 70%;
        // } */
}