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

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

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

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

.dc_container .stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.dc_container .stage.hide {
    transition: none;
}
.dc_container .noShow {
    display: none;
}

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

.dc_container .center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

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

.dc_container .centerTop {
    top: 50%;
    transform: translate(0, -50%);
}

.dc_container .bg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    /* width: 100%;
    height: auto; */
    width: auto;
    height: 100%;
}

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

.dc_container .dc_box {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: 0.5s ease-in-out;
}

.dc_container .dc_box.noTransit div,
.dc_container .dc_box.noTransit img {
    transition: none;
}

.dc_container .stage {
    transition: 0.3s ease-in-out;
}


.dc_container .logo {
    width: calc(187/640*100%);
    left: calc(66/640*100%);
    top: calc(66/960*100%);
}

.dc_container .copy {
    width: calc(346/640*100%);
    left: calc(56/640*100%);
    top: calc(196/960*100%);
}

.dc_container .legal {
    width: calc(559/640*100%);
    top: calc(888/960*100%);
}

.dc_container .bull {
    width: calc(403/640*100%);
    right: 0;
    /* top: calc(146/960*100%); */
    bottom: calc(74/960*100%);
    /* top: 50%;
    transform: translateY(-45%); */
}

.dc_container .wheelBox {
    width: calc(443/640*100%);
    left: calc(62/640*100%);
    /* top: calc(409/960*100%); */
    bottom: calc(550/960*100%);
    transition: 0.3s ease-in-out;
}

.dc_container .wheel,
.dc_container .wheel_txt {
    width: 100%;
}

.dc_container .wheel_txt {
    transition: 0.3s ease-in-out;
}

.dc_container .pointer {
    width: calc(35/443*100%);
    transform: translate(-50%, -30%);
}

.dc_container .touch_icon {
    width: calc(148/640*100%);
    top: 50%;
    transform: translate(-50%, 78%);
}

.dc_container .touch_icon.move {
    animation: iconAnim 0.5s ease-in-out infinite alternate;
}

@keyframes iconAnim {
    100% {
        transform: translate(-50%, 78%) scale(0.8);
    }
}

@keyframes iconAnim2 {
    100% {
        transform: translate(-50%, 210%) scale(0.8);
    }
}

.dc_container .touch_txt {
    width: calc(324/640*100%);
    top: 50%;
    transform: translate(-50%, 570%);
}

.dc_container .touch_bg {
    width: 100%;
    bottom: 0;
}

.dc_container .cta {
    width: calc(388/640*100%);
    top: calc(776/960*100%);
}

.dc_container .arrow_right {
    width: calc(56/640*100%);
    left: calc(530/640*100%);
    top: calc(550/960*100%);
}

.dc_container .bonusBox {
    width: calc(388/640*100%);
    left: calc(125/640*100%);
    top: calc(424/960*100%);
    transition: 0.3s ease-in-out, opacity 0s;
}

.dc_container .bonusBox.left {
    transform: translate(-150%);
}

.dc_container .bonusBox.right {
    transform: translate(150%);
    opacity: 0;
}

.dc_container .bonus {
    width: 100%;
}

.dc_container .horn {
    width: calc(53/388*100%);
    transform: translateY(-50%);
    transform-origin: bottom;
}

.dc_container .horn_left {
    left: calc(132/388*100%);
    transform: translateY(-50%) rotateY(180deg);
}

.dc_container .horn_right {
    left: calc(199/388*100%);
}
.dc_container .pulse {
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0% {transform: translate(-50%) scale(1);}
    50% {transform: translate(-50%) scale(1.1);}
    100% {transform: translate(-50%) scale(1);}
}

.dc_container .leftMove {
    animation: leftMove 3s ease-in-out infinite;
}
@keyframes leftMove {
    0% {transform: translateY(-50%) rotateY(180deg) rotate(0deg);}
    10% {transform: translateY(-50%) rotateY(180deg) rotate(10deg);}
    20% {transform: translateY(-50%) rotateY(180deg) rotate(0deg);}
    30% {transform: translateY(-50%) rotateY(180deg) rotate(10deg);}
    40% {transform: translateY(-50%) rotateY(180deg) rotate(0deg);}
    100% {transform: translateY(-50%) rotateY(180deg) rotate(0deg);}
}
.dc_container .rightMove {
    animation: rightMove 3s ease-in-out infinite;
}
@keyframes rightMove {
    0% {transform: translateY(-50%) rotate(-0deg);}
    10% {transform: translateY(-50%) rotate(10deg);}
    20% {transform: translateY(-50%) rotate(-0deg);}
    30% {transform: translateY(-50%) rotate(10deg);}
    40% {transform: translateY(-50%) rotate(-0deg);}
    100% {transform: translateY(-50%) rotate(-0deg);}
}

/* ----- media queries */
@media (max-aspect-ratio: 280/481) {
    .dc_container .bg {
        width: auto;
        height: 100%;
    }

    .dc_container .bonusBox {
        top: calc(490/960*100%);
    }

    .dc_container .arrow_right {
        top: calc(600/960*100%);
    }


}

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


    .dc_container .touch_icon {
        transform: translate(-50%, 210%);
    }

    .dc_container .touch_txt {
        transform: translate(-50%, 970%);
    }

    .dc_container .wheelBox {
        bottom: calc(395/960*100%);
    }

    .dc_container .touch_icon.move {
        animation: iconAnim2 0.5s ease-in-out infinite alternate;
    }

    .dc_container .bonusBox {
        top: calc(540/960*100%);
    }
    
    .dc_container .arrow_right {
        top: calc(625/960*100%);
    }
}


@media (min-aspect-ratio: 540/721) {}