@charset "utf-8";

/* 인트로 */
.game-wrp .bg, .game-wrp .bg-obj {animation: zoomOut 2s}
.game-wrp .bg-obj img {animation: bg-ani1 3s linear 3s infinite}
.game-wrp .bg-obj img:last-child {animation-name: bg-ani2}

#intro .intro-title {top: 108px; width: 39.45%; opacity:0}
#intro .intro-subtitle {top: 421px; height:44px; opacity:0}
#intro .btn-start {background: #FF8329; border-color: #FFA360; box-shadow: 0px 8px #D24F17 !important}
#intro.show .intro-title,
#intro.show .intro-subtitle {opacity:1; transition-duration: 1s; transition-delay: 2s}
#intro.show>.btn {animation-delay: 2s}

#intro .intro-ai-1 {bottom:0; left:0; width:520px;height:472px; transform: translateX(0); animation: intro-rod 3s linear 2s infinite alternate; opacity: 0}
#intro.show .intro-ai-1 {opacity: 1; transition-duration: 1s; transition-delay: 2s}
#intro .intro-ai-2 {bottom:0; left:auto; right:-8%; width:100%;height:431px; transform: translate(-100%, 100%)}
#intro.show .intro-ai-2 {transform: translate(0%, 0%); animation: bg-ani2 3s linear 2s infinite;transition: 2s}

/* 라운드 */
#round .round-obj {bottom:0; left: 35%}
#round .bx-inner{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px 68px;border: 12px solid #C6ECFF;box-shadow: 0 10px #0072AA}
#life {background: #C6ECFF; box-shadow: 8px 8px #6594F0}
#life i{background-image: url(../img/game08/common/icon-star.png); background-size: 100% auto;}
#life i.off{background-image: url(../img/game08/common/icon-star-off.png)}

/* 엔딩 */
#ending .bx {display: flex; justify-content: center; align-items: center; min-height: 200px; box-shadow: 8px 8px #53A7F4}
#ending .bx h3 {margin-bottom: 0}
#ending .btn-reset {background: #FA5151; border-color: #FF8B8B; box-shadow: 0px 8px #D32020 !important; opacity: 0}
#ending.show .bx {transition-delay: 4s}
/*#wrap .finish .btn-reset{animation-delay: 8s}*/

#ending [class*=ending-] {width: 100%; height: 100%; top:0; left: 0; transform: translateX(0); opacity: 0; transition: 0.5s}
#ending [class*=ending-].active {opacity: 1}
#ending [class*=ending-]>* {position: absolute}

#ending .end-ai {position: relative; width: 100%; height: 100%}
#ending .end-ai01 {top:auto; bottom:0; left: 157px; width:492px;}
#ending .end-ai02 {top:auto; bottom:53px; left: 642px; width:159px; height: 470px; transform-origin: 0% 0%; background: url(../img/game08/common/end-ai02.png) no-repeat 0 0 /auto 100%;}
#ending .end-ai03 {top:auto; bottom:83px; left: 565px; width: 175px;}
#ending.show .end-ai01 {animation:end-rod1 3s}
#ending.show .end-ai02 {animation:end-rod2 3s linear both}
#ending.show .end-ai03 {animation:water-ani 3s linear both}
#ending.show .on .end-ai02 {background-image: url(../img/game08/common/end-ai02-1.png);}
#ending.show .on .end-ai03 {display: none;}
#ending .ending-2 .end-ai01 {width: 300px; animation:end-rod3 1.6s infinite both}
#ending .ending-2 .fish {background-repeat: no-repeat; background-position: 0 0; background-size: 100% auto; animation:end-rod3 1.6s infinite both}
#ending .ending-2 .wave{top:auto; bottom:0; right:-23%; transform: translate(-50%, 80%);transition-duration: 2s}
#ending .ending-2.active .wave {transform: translate(0%, 0%);animation: bg-ani2 3s linear 2s infinite}
#ending .ending-3 .char {background-repeat: no-repeat; background-position: center center; background-size: auto 100%; animation: bg-ani1 3s linear 2s infinite}

.conpetti {width: 100%;height: 100%}
.conpetti img {position: absolute; top: -50%; left:0;}
#ending.show .conpetti img {animation: conpetti 3s linear infinite}
#ending.show .conpetti img:nth-child(4),
#ending.show .conpetti img:nth-child(6) {animation-delay: 1s}
#ending.show .conpetti img:nth-child(1),
#ending.show .conpetti img:nth-child(3) {animation-delay: .5s}

/* page01 */
.page01 .result-ai.correct p, [data-page="1"] .result-ai.correct p{bottom: 206px;left: 197px}
.page01 .result-ai.wrong p, [data-page="1"] .result-ai.wrong p{bottom: 184px;left: 187px}
.page01 .retry .result-ai.wrong p, [data-page="1"] .retry .result-ai.wrong p{bottom: 203px;left: 202px}
.page01 .ending-2 .fish {top:146px; left: 408px; width: 600px; height: 467px; background-image: url(../img/game08/page01/end-ai05.png)}
.page01 .ending-2 .fish.on {background-image: url(../img/game08/page01/end-ai06.png)}
.page01 .ending-3 .char {top: 145px; left: 100px; width: 1002px; height: 524px; background-image: url(../img/game08/page01/end-ai07.png)}
.page01 .ending-3 .char.on {background-image: url(../img/game08/page01/end-ai08.png)}

/* page02 */
.page02 .ending-2 .fish {top:145px; left: 408px; width: 544px; height: 458px; background-image: url(../img/game08/page02/end-ai05.png)}
.page02 .ending-2 .fish.on {background-image: url(../img/game08/page02/end-ai06.png)}
.page02 .ending-3 .char {top: 105px; left: 130px; width: 1002px; height: 559px; background-image: url(../img/game08/page02/end-ai07.png)}
.page02 .ending-3 .char.on {background-image: url(../img/game08/page02/end-ai08.png)}

/* page03 */
.page03 .result-ai.correct p, [data-page="3"] .result-ai.correct p{bottom: 195px;left: 195px;transform: rotate(9deg)}
.page03 .result-ai.wrong p, [data-page="3"] .result-ai.wrong p{bottom: 178px;left: 178px;transform: rotate(8deg)}
.page03 .retry .result-ai.wrong p, [data-page="3"] .retry .result-ai.wrong p{bottom: 197px;left: 196px}
.page03 .ending-2 .fish {top:146px; left: 408px; width: 437px; height: 405px; background-image: url(../img/game08/page03/end-ai05.png)}
.page03 .ending-2 .fish.on {background-image: url(../img/game08/page03/end-ai06.png)}
.page03 .ending-3 .char {top: 135px; left: 150px; width: 941px; height: 523px; background-image: url(../img/game08/page03/end-ai07.png)}
.page03 .ending-3 .char.on {background-image: url(../img/game08/page03/end-ai08.png)}

/* 사회 */
.pages [class*=page]>*:not(.intro-title, .intro-subtitle) {top:auto;left: auto; transform: translateX(0)}
.social #round .bx{top:90px}

@keyframes zoomOut {
	0%,30%{
        transform: scale(1.5)
    }
    100%{
        transform: scale(1)
    }
}
@keyframes bg-ani1 {
	0%,100%{
        transform: translateY(0)
    }
    50%{
        transform: translateY(-10px)
    }
}
@keyframes bg-ani2 {
	0%,100%{
        transform: translateY(0)
    }
    50%{
        transform: translateY(10px)
    }
}
@keyframes intro-rod {
    0% {
        transform:rotate(2deg);
    }
	50% {
        transform:rotate(-2deg);
    }
	100% {
        transform:rotate(2deg);
    }
}
@keyframes end-rod3 {
    0% {
        transform:rotate(.5deg);
    }
	50% {
        transform:rotate(-.5deg);
    }
	100% {
        transform:rotate(.5deg);
    }
}
@keyframes end-rod1 {
	0% {
        transform:rotate(0deg);
    }
	35%, 100% {
        transform:rotate(-.5deg);
    }
	65% {
        transform:rotate(.5deg);
    }
}
@keyframes end-rod2 {
    0% {
        transform:rotate(0deg);
    }
	35%, 100% {
        transform:rotate(-3deg);
    }
	65% {
        transform:rotate(3deg);
    }
}
@keyframes water-ani {
    0% {
        transform:translate(0, 0)
    }
	35%, 100% {
        transform:translate(18px, -5px)
    }
	65% {
        transform:translate(-20px, 5px)
    }
}
@keyframes conpetti {
    0% {
        transform: translateY(0%)
    }
    75% {
        transform: translateY(580px)
    }
    100% {
        transform: translateY(650px)
    }
}

.social #round .step-index>li{background: #2847ea;color: #fff}
.social #round .step-index>.active{background: #c6ecff;color: #2847ea}