/* ----------------- 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 .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;
}

.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;
    background-color: rgba(0, 0, 0, 0.1);
}

.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(182/886*100vw);
    left: calc(676/886*100vw);
    top: calc(28/1326*100%);
}

.dc_container .copy {
    width: calc(560/886*100vw);
    left: calc(28/886*100vw);
    top: calc(30/1326*100%);
    transition: 0.5s ease-in-out;
}

.dc_container .copy.move {
    transform: translate(7%, 41%);
}

.dc_container .legal {
    width: calc(66/886*100vw);
    left: calc(28/886*100vw);
    top: calc(1101/1326*100%);
}

.dc_container .manual {
    width: calc(639/886*100vw);
    left: calc(129/886*100vw);
    top: 50%;
    transform: translateY(293%);
    transition: 0.3s ease-in-out;
}

.dc_container .heartBeat {
    animation: heartBeat 0.5s ease-in-out infinite alternate;
}

@keyframes heartBeat {
    100% {
        transform: translateY(293%) scale(0.9);
    }
}

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

.dc_container .bot1Box {
    width: calc(235/886*100vw);
    height: calc(783/886*100vw);
    left: calc(197/886*100vw);
    top: calc(392/1326*100%);
    transition: 0.3s ease-in-out;
}

.dc_container .bot1Box.out {
    transform: translate(-200%);
}

.dc_container .bottle {
    width: 100%;
    transform-origin: 50% 39%;
    transition: 0.3s ease-in-out;
}

.dc_container .bot1.turn {
    transform: rotate(-13deg);
}

.dc_container .kap {
    width: calc(83/235*100%);
    left: calc(76/235*100%);
    top: calc(28/783*100%);
    transition: 0.2s linear, transform 0.6s linear;
}

.dc_container .kap.up {
    transform: translateY(-300%);
}

.dc_container .kap.out {
    opacity: 0;
}

.dc_container .puf1 {
    width: calc(299/886*100vw);
    left: calc(-51/235*100%);
    top: calc(-56/783*100%);
}

.dc_container .bot2Box {
    width: calc(234/886*100vw);
    height: calc(783/886*100vw);
    left: calc(471/886*100vw);
    top: calc(392/1326*100%);
    transition: 0.5s ease-in-out;

}

.dc_container .bot2Box.out {
    transform: translate(200%);
}

.dc_container .bot2.turn {
    transform: rotate(12deg);
}

.dc_container .puf2 {
    width: calc(282/886*100vw);
    left: calc(-9/235*100%);
    top: calc(-71/783*100%);
}

.dc_container .puf {
    transform-origin: bottom;
    transition: 0.3s ease-in-out, transform 0.6s ease-in-out;
}

.dc_container .puf.out {
    opacity: 0;
    transform: scale(0.8);
}

.dc_container .dood {
    /* transition: 0.3s ease-in-out; */
    transform-origin: bottom;
    transition: 0.3s ease-in-out, transform 1.2s ease-in-out;
}

.dc_container .dood1 {
    width: calc(335/886*100vw);
    left: calc(-108/235*100%);
    top: calc(-312/783*100%);
}

.dc_container .dood2 {
    width: calc(335/886*100vw);
    left: calc(17/235*100%);
    top: calc(-242/783*100%);
}

.dc_container .dood.out {
    opacity: 0;
    transform: scale(0.2);
}

.dc_container .bot2Box.move {
    width: calc(217/886*100vw);
    transform: translate(-50%, 12%) rotate(-7deg);
    transition: 0.5s ease-in-out;
}

.dc_container .bot1Box.move {
    width: calc(268/886*100vw);
    transform: translate(144%, -6%) rotate(10deg);
    transition: 0.5s ease-in-out;
}

/*.dc_container .bot1Box.move {
     transform: translate(144%, -6%) rotate(10deg);
     transition: 0.7s ease-in-out;
 } */


.dc_container .graph {
    width: calc(728/886*100vw);
    left: calc(22/886*100%);
    top: calc(7/1326*100%);
    transition: 0.7s ease-in-out;
}

.dc_container .graph.out {
    transform: scale(0);
}

.dc_container .dot {
    transition: 0.5s ease-in-out;
}

.dc_container .dot1 {
    width: calc(128/886*100vw);
    left: calc(69/886*100%);
    top: calc(-34/1326*100%);
    transition: 0.5s ease-in-out;
}

.dc_container .dot2 {
    width: calc(171/886*100vw);
    left: calc(245/886*100%);
    top: calc(-103/1326*100%);
    transition: 0.5s ease-in-out;
}

.dc_container .dot3 {
    width: calc(419/886*100vw);
    left: calc(-189/886*100%);
    top: calc(1204/1326*100%);
    transition: 0.5s ease-in-out;
}

.dc_container .dot4 {
    width: calc(423/886*100vw);
    left: calc(604/886*100%);
    top: calc(906/1326*100%);
    transition: 0.5s ease-in-out;
}

.dc_container .bgBox {
    width: 100%;
    height: 0;
    left: 0;
    top: 0;
    overflow: hidden;
    transition: 1s ease-in-out;
}

.dc_container .bgBox.small {
    height: 100%;
}

.dc_container .newBg {
    width: 100vw;
    height: auto;
}

.dc_container .cta {
    width: calc(588/886*100vw);
    bottom: calc(5/1326*100%);
    transition: 0.3s ease-in-out;
    z-index: 10;
}

.dc_container .cta.out {
    transform: translate(-50%, 200%);
}

.dc_container .heartBeat2 {
    animation: heartBeat2 0.5s ease-in-out infinite alternate;
}

@keyframes heartBeat2 {
    100% {
        transform: translate(-50%) scale(0.9);
    }
}

.dc_container .info {
    width: calc(302/886*100vw);
    left: calc(116/886*100vw);
    bottom: calc(145/1326*100%);
    transition: 0.3s ease-in-out;
}

.dc_container .new {
    width: calc(227/886*100vw);
    left: calc(-69 / 886* 100vw);
    top: calc(450 / 1326* 100%);
    transition: 0.3s ease-in-out;

}






.dc_container .clickArea {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}






/* ----- media queries */
@media (max-aspect-ratio: 320/481) {
    .dc_container .manual {
        transform: translateY(300%);
    }

    @keyframes heartBeat {
        100% {
            transform: translateY(300%) scale(0.9);
        }
    }

    .dc_container .newBg {
        width: auto;
        height: 100vh;
    }

    .dc_container .cta {
        bottom: 4%;
    }
}

@media (max-aspect-ratio: 320/630) {
    .dc_container .manual {
        transform: translateY(400%);
    }

    @keyframes heartBeat {
        100% {
            transform: translateY(400%) scale(0.9);
        }
    }

    .dc_container .bot2Box.move {
        width: calc(217 / 886* 100vw);
        transform: rotate(-7deg);
        top: 55%;
        left: 41%;
    }

    /*.dc_container .bot1Box.move {
         width: calc(268/886*100vw);
         transform: rotate(5deg);
         transition: 0.3s ease-in-out;
         top: 45%;
         left: 69%;
     } */
    .dc_container .bot1Box.move {
        transform: rotate(10deg);
        transition: 0.5s ease-in-out;
        top: 48%;
        left: 67%;
    }

}

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