@charset "UTF-8"; 

button {font-size:16px;}
#wrap > .icon-close {top:14px; right:14px; width:54px; height:54px; background:url(../img/game08/icon-close.png) no-repeat center center / 54px auto;}
#wrap > .icon-home {top:20px; left:20px; width:54px; height:57px; background:url(../img/game08/btn-home.png) no-repeat center center / 54px auto;}

/***** 인트로 화면 *****/
#intro {position:relative; width:100%; height:100%; background:#f5ebeb; display:none;}
#intro.show {display:block;}
#intro .title {position:absolute; z-index:100; top:58px; left:50%; transform:translate(-50%, -250%); width:670px; height:105px; transition:transform 1s;}
#intro .title.show {transform:translate(-50%, 0%);}
#intro .title span {font-size:0; text-indent:-9999px;}
#intro .wrap-btn {position:absolute; z-index:100; bottom:40px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; align-items:center; width:572px; gap:6px;}
#intro .wrap-btn button {width:283px; height:80px; border-radius:100px; transition:transform .5s;}

/* 버튼 제목을 text로 처리 시 text-shadow가 부드럽게 보이지 못하는 이슈 있어 이미지로 대체하나, 변동사항 고려하여 기존 스타일소스는 살려두고 font-size만 0으로 설정 */
#intro .wrap-btn button span {display:block; width:203px; height:66px; border-radius:4px; font-family:'OMPOP'; font-size:0px; text-indent:-9999px; color:#FFF; text-shadow:-4px 0px #0286CE, 0px 4px #0286CE, 4px 0px #0286CE, 0px -4px #0286CE;} 
#intro .wrap-btn button.btn-howToPlay {background:url(../img/game08/btn-howToPlay.png) no-repeat center top / cover;}
#intro .wrap-btn button.btn-start {background:url(../img/game08/btn-start.png) no-repeat center top / cover;}

.bg {position:absolute; z-index:90; top:0; left:0; width:100%; height:100%;}
#intro .bg {width:100%; height:100%; background:url(../img/game08/bg-main.png) no-repeat left top / 100% auto;}

#intro .wrap-char .char {width:194px; height:298px; left:366px; bottom:140px; position:absolute; z-index:200;}
#intro .wrap-char .char .head {position:absolute; z-index:203; top:0; left:0; width:194px; height:176px; background:url(../img/game08/intro-char-head.png) no-repeat center center / cover; animation:shakeHead 2.2s ease-in infinite; animation-delay:.5s;}
#intro .wrap-char .char .body {position:absolute; z-index:202; bottom:0; left:0; width:194px; height:132px; background:url(../img/game08/intro-char-body.png) no-repeat center center / cover;}
#intro .wrap-char .char .body + .body-shadow {content:''; position:absolute; z-index:201; bottom:-6px; left:50%; transform:translateX(-50%); width:133px; height:26px; border-radius:100%; background:rgba(0,0,0,.1);}
@keyframes shakeHead {
    0% {transform:rotate(0deg);}
    15% {transform:rotate(-5deg);}
    30% {transform:rotate(4deg);}
    55% {transform:rotate(0deg);}
    100% {transform:rotate(0deg);}
}

#intro .wrap-char .robot {width:282px; height:404px; position:absolute; z-index:200; right:362px; bottom:130px;}
#intro .wrap-char .robot .body {position:absolute; z-index:202; top:-2px; left:50%; transform:translateX(-50%); width:212px; height:349px; background:url(../img/game08/intro-robot-body.png) no-repeat center center / cover;}
#intro .wrap-char .robot .under {position:absolute; z-index:201; bottom:0; left:50%; transform:translateX(-50%); margin-left:7px; width:200px; height:72px; background:url(../img/game08/intro-robot-under.png) no-repeat center center / cover;}
#intro .wrap-char .robot .light01 {position:absolute; z-index:204; bottom:50px; left:50%; transform:translateX(-50%); width:202px; height:104px; background:url(../img/game08/intro-robot-light-01.png) no-repeat center center / cover; animation:light01 2s ease-in-out infinite; opacity:.1;}
#intro .wrap-char .robot .light02 {position:absolute; z-index:203; bottom:50px; left:50%; transform:translateX(-50%); width:282px; height:92px; background:url(../img/game08/intro-robot-light-02.png) no-repeat center center / cover; animation:light02 2s ease-in-out infinite; opacity:1;}
@keyframes light01 {
    0% {opacity:.1;}
    30% {opacity:1;}
    60% {opacity:.1;}
    100% {opacity:.1;}
}
@keyframes light02 {
    0% {opacity:1;}
    30% {opacity:.1;}
    60% {opacity:1;}
    100% {opacity:1;}
}

#intro .wrap-obj > div {position:absolute; z-index:210;}
#intro .wrap-obj .obj-01 {width:77px; height:110px; left:148px; bottom:235px; background:url(../img/game08/intro-obj-01.png) no-repeat center center / cover;  animation:obj01 1.5s ease-in-out infinite;}
#intro .wrap-obj .obj-02 {width:70px; height:74px; left:236px; bottom:426px; background:url(../img/game08/intro-obj-02.png) no-repeat center center / cover; animation:obj02 1.6s ease-in infinite alternate;}
#intro .wrap-obj .obj-03 {width:74px; height:74px; left:566px; bottom:432px; background:url(../img/game08/intro-obj-03.png) no-repeat center center / cover; animation:obj03 2.2s ease-in-out infinite;}
#intro .wrap-obj .obj-04 {width:155px; height:126px; right:162px; bottom:356px; background:url(../img/game08/intro-obj-04.png) no-repeat center center / cover; animation:obj03 1.8s ease-in-out infinite;}
#intro .wrap-obj .obj-05 {width:115px; height:105px; right:184px; bottom:180px; background:url(../img/game08/intro-obj-05.png) no-repeat center center / cover; animation:obj03 2s ease infinite alternate;}
@keyframes obj01 {
    0% {transform:translateY(0);}
    50% {transform:translateY(10px);}
    100% {transform:translateY(0%);}
}
@keyframes obj02 {
    0% {transform:translateY(0);}
    50% {transform:translateY(10px);}
    100% {transform:translateY(-10px);}
}
@keyframes obj03 {
    0% {transform:translateY(0);}
    50% {transform:translateY(20px);}
    100% {transform:translateY(0);}
}



/***** 놀이 방법 가이드 화면 *****/
.guide {width:100%; height:100%; position:absolute; top:0; left:0; z-index:220; background:rgba(0, 0, 0, 0.80); transform:translateY(0%); transition:transform .45s; display:none; }
.guide .outline {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:800px; height:340px; background:url(../img/game08/guide/guide-outline.png) no-repeat center center / cover;}
.guide .outline .txt {position:absolute; z-index:221; top:-32px; left:-14px; width:233px; height:73px; background:url(../img/game08/guide/guide-title-bg.png) no-repeat left top / cover;}
/* .guide .outline .txt::before {content:''; position:absolute; top:10px; left:24px; width:175px; height:46px; background:url(../img/game08/guide/guide-title-02.png) no-repeat left top / cover;} */
.guide .outline .txt::after {content:''; position:absolute; z-index:222; bottom:-1px; right:-33px; width:100px; height:97px; background:url(../img/game08/guide/guide-title-obj.png) no-repeat left top / cover;}
.guide .outline .txt span {position:absolute; z-index:221; top:21px; left:46px; font-family:'OAGothic'; font-weight:700; color:#FFF; font-size:0px; line-height:32px; display:block; width:107px; height:28px; /*background:url(../img/game08/guide/guide-title-txt.png) no-repeat center center / contain;*/}

.guide ul {width:775px; height:315px; border-radius:22px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; flex-direction:column; justify-content:center; background:url(../img/game08/guide/guide-screen.png) no-repeat left top / cover;}
.guide .desc {position:relative; padding-left:44px; font-family:'NotoSans'; font-size:26px; line-height:40px; letter-spacing:-1px; color:#000; margin:12px 0; text-align:left; width:702px; margin:0 auto 20px;}
.guide .desc::before {content:''; position:absolute; left:0; top:0px; width:36px; height:39px;}
.guide .desc:first-child{margin-top: 23px;}
.guide .desc:last-child {margin-bottom:0;}
.guide .desc:first-child::before {background:url(../img/game08/guide/guide-num-01.png) no-repeat left top / cover;}
.guide .desc:nth-child(2)::before {background:url(../img/game08/guide/guide-num-02.png) no-repeat left top / cover;}
.guide .desc:last-child::before {background:url(../img/game08/guide/guide-num-03.png) no-repeat left top / cover;}
.guide .desc.active {font-weight:700;}

.guide .btn-close {background:#FFF; position:absolute; z-index:222; top:-23px; right:-14px; width:58px; height:63px; font-size:0; text-indent:-9999px; background:url(../img/game08/guide/icon-close-guide.png) no-repeat left top / cover;}



/***** 게임화면 *****/
.wrap-game {position:relative; width:100%; height:100%; background:#B0E2FE; display:none;}
.wrap-game.show {display:block;}

.wrap-parts {position:absolute; z-index:200; top:0; left:50%; transform:translateX(-50%); display:flex; justify-content:space-between; align-items:center; gap:14px; width:1080px; height:149px;}
.wrap-parts .part {width:94px; height:100%; position:relative;}
.wrap-parts .part::before {content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%); width:34px; height:57px; background:url(../img/game08/game-frame-02.png) no-repeat center top / cover;}
.wrap-parts .part:last-child {width:120px;}

.wrap-parts .part .frame {position:absolute; z-index:203; left:0; bottom:0; width:94px; height:94px;}
.wrap-parts .part .frame .bg {position:absolute; top:0; left:0; z-index:200; width:100%; height:100%; background:url(../img/game08/game-frame.png) no-repeat center center / cover; opacity:1; visibility:visible;}
.wrap-parts .part .frame.big {width:120px; height:94px;}
.wrap-parts .part .frame.big .bg {background:url(../img/game08/game-frame-big.png) no-repeat center center / cover;}

.wrap-parts .part.success .obj.ani {animation:shakePart 1s ease;}
.wrap-parts .part.fail .obj.ani {animation:shakePartFail 1s ease;}
@keyframes shakePart {
    0%, 100% { transform:translate(-50%, -50%); }
    20%, 60% { transform:translate(-45%, -50%) rotate(10deg); }
    40%, 80% { transform:translate(-55%, -50%) rotate(-10deg); }
}

@keyframes shakePartFail {
    0%, 100% { transform:translate(-50%, -50%); }
    10%, 30%, 50%, 70%, 90% { transform:translate(-48%, -52%) rotate(5deg); }
    20%, 40%, 60%, 80% { transform:translate(-52%, -48%) rotate(-5deg); }
}

.wrap-parts .part.fail .smoke01 {position:absolute; z-index:250; top:28px; right:-4px; width:34px; height:42px; background:url(../img/game08/smoke.png) no-repeat center center / contain;
    animation:failSmoke01 1s ease-out;
    animation-delay:.2s;
    opacity:0;
}
.wrap-parts .part.fail .smoke02 {position:absolute; z-index:250; top:18px; left:6px; width:28px; height:35px; transform:scaleX(-1); background:url(../img/game08/smoke.png) no-repeat center center / contain;
    animation:failSmoke02 1.6s;
    animation-delay:.5s;
    opacity:0;
}
@keyframes failSmoke01 {
    0% {opacity:0; top:28px; right:-4px;}
    /* 25% {opacity:1;} */
    50% {opacity:1;}
    /* 75% {opacity:1;} */
    100% {opacity:0; top:12px; right:-20px;}
}
@keyframes failSmoke02 {
    0% {opacity:0; top:18px; left:6px;}
    25% {opacity:1;}
    50% {opacity:1;}
    75% {opacity:1;}
    100% {opacity:0; top:0; left:-8px;}
}

/* 로봇 각 파트 */
.wrap-parts .part .obj {position:absolute; z-index:222; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; height:100%;}
.wrap-parts .part .obj.arm-left {background:url(../img/game08/game-part/arm-left-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.arm-right {background:url(../img/game08/game-part/arm-right-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.leg-left {background:url(../img/game08/game-part/leg-left-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.leg-right {background:url(../img/game08/game-part/leg-right-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.body {background:url(../img/game08/game-part/body-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.shoulder-left {background:url(../img/game08/game-part/shoulder-left-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.shoulder-right {background:url(../img/game08/game-part/shoulder-right-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.ear-left {background:url(../img/game08/game-part/ear-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.ear-right {background:url(../img/game08/game-part/ear-off.png) no-repeat center center / cover;}
.wrap-parts .part .obj.face {background:url(../img/game08/game-part/face-off.png) no-repeat center center / cover;}

.wrap-parts .part.success .obj.arm-left {background:url(../img/game08/game-part/arm-left-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.arm-right {background:url(../img/game08/game-part/arm-right-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.leg-left {background:url(../img/game08/game-part/leg-left-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.leg-right {background:url(../img/game08/game-part/leg-right-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.body {background:url(../img/game08/game-part/body-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.shoulder-left {background:url(../img/game08/game-part/shoulder-left-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.shoulder-right {background:url(../img/game08/game-part/shoulder-right-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.ear-left {background:url(../img/game08/game-part/ear-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.ear-right {background:url(../img/game08/game-part/ear-on.png) no-repeat center center / cover;}
.wrap-parts .part.success .obj.face {background:url(../img/game08/game-part/face-on.png) no-repeat center center / cover;}


.wrap-stone {position:absolute; z-index:200; bottom:133px; left:0; padding:0 110px 0 100px; display:flex; justify-content:space-between; align-items:center; gap:14px; width:100%; height:333px; background:url(../img/game08/game-water.png) no-repeat left top / cover;}
.wrap-stone .stone {position:relative; width:calc(100% - 200px); height:100%;}
.wrap-stone .stone .obj {position:absolute; z-index:202; top:16px; left:50%; transform:translateX(-50%); width:100px; height:50px; border-radius:50%; background:url(../img/game08/game-stone.png) no-repeat center center / contain;}
.wrap-stone .stone .obj.obj02 {background:url(../img/game08/game-stone-02.png) no-repeat center center / contain;}

/* 성공, 실패 상태표시 */
.wrap-game .part .status {font-size:0; text-indent:-9999px; position:absolute; z-index:210; top:25px; left:50%; transform:translateX(-50%); width:86px; height:57px; display:flex; justify-content:center; align-items:center; display:none; background:url(../img/game08/game-status-ing.png) no-repeat center center / cover; animation:upDown 2.5s ease infinite;}
.wrap-game .part.success .status {top:25px; width:109px; height:44px; background:url(../img/game08/game-status-success.png) no-repeat center center / cover; animation:unset;}
.wrap-game .part.fail .status {top:24px; width:70px; height:57px; background:url(../img/game08/game-status-fail.png) no-repeat center center / cover; animation:unset;}
.wrap-game .part .status.show {display:flex;}

/* 결과 페이지에서 "틀린문제 다시풀기" 버튼을 클릭하여 틀린 문제만 다시 푸는 게임으로 이동하였을때의 틀린문제 상단 오브젝트 스타일 (필요에 따라 활용 가능하며, 사용 안할 시 주석처리) */
/* .wrap-game .part.disabled {}  */

/* 플레이어 */
.wrap-game .player {position:absolute; z-index:300; top:-100px; left:105px; width:86px; height:135px;}
.wrap-game .player .head {position:absolute; z-index:302; top:0; left:0; width:88px; height:80px; background:url(../img/game08/game-player-head.svg) no-repeat center center / cover; animation:shakeHead02 3.5s ease-in infinite; animation-delay:1s;}
.wrap-game .player .body {position:absolute; z-index:301; bottom:0; left:0; width:88px; height:59px; background:url(../img/game08/game-player-body.svg) no-repeat center center / cover;}
.wrap-game .player .body + .body-shadow {content:''; position:absolute; z-index:201; bottom:-6px; left:50%; margin-left:1px; transform:translateX(-50%); width:54px; height:14px; transition:width .45s, height .45s; border-radius:100%; background:rgba(0,0,0,.1);}
.wrap-game .player.jump {animation: playerJump 1s ease;}
.wrap-game .player.success:before {content:'성공!'; position:absolute; font-size:16px; color:#fff; display:none;}
.wrap-game .player.fail:before {content:'실패'; position:absolute; font-size:16px; color:#fff; display:none;}

.wrap-game .player.success .head {background:url(../img/game08/game-player-head-success.svg) no-repeat center center / cover;}
.wrap-game .player.success .body {background:url(../img/game08/game-player-body-success.svg) no-repeat center center / cover;}

.wrap-game .player.fail .head {background:url(../img/game08/game-player-head-fail.svg) no-repeat center center / cover;}
.wrap-game .player.fail .body {background:url(../img/game08/game-player-body-success.svg) no-repeat center center / cover;} /* success와 같은 이미지 */

@keyframes shakeHead02 {
    0% {transform:rotate(0deg);}
    10% {transform:rotate(-3deg);}
    20% {transform:rotate(3deg);}
    30% {transform:rotate(0deg);}
    100% {transform:rotate(0deg);}
}

@keyframes upDown {
    0% { transform: translate(-50%, 0); }
    40% { transform: translate(-50%, -6px); }
    80% { transform: translate(-50%, 0); }
    100% { transform: translate(-50%, 0); }
}

@keyframes playerJump {
    0% { transform: translateY(0); }
    35% { transform: translateY(-20%); }
    100% { transform: translateY(0); }
}

.wrap-quiz {background:url(../img/game08/game-quiz-bg.jpg) no-repeat left bottom / cover; width:100%; height:352px; position:absolute; z-index:220; left:0; bottom:0;}

/* 타이머 */
.wrap-timer {position:absolute; z-index:230; right:0; top:-14px; width:130px; height:130px; background:url(../img/game08/timer/timer-bg-01.png) no-repeat center center / cover; border-radius: 50%;box-shadow: 0px 6px rgba(0, 0, 0, 0.15);}
.wrap-timer .bg-02 {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:113px; height:113px; border-radius:50%; background:linear-gradient(135deg, #2726A6 45%, #231976); box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.25);}
.wrap-timer .txt {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:87px; height:87px; /*border:1px solid rgba(176, 251, 255, 0.5);*/ border-radius:50%; background:url(../img/game08/timer/timer-txt-border.svg) no-repeat center center / cover;}
.wrap-timer .txt .timer-flex {position:absolute; width:100%; top:17px; display:flex; justify-content:center; align-items:flex-end; padding-right:2px;}

#timerDisplay {display:flex; justify-content:flex-end; align-items:center; width:auto; height:30px; margin-right:2px;}
#timerDisplay img {width:16px; height:30px; margin:0 2px;}

.wrap-timer .txt .timer-flex .sec {display:block; font-family:'OAGothic'; font-weight:700; font-size:0px; line-height:20px; color:#B0FBFF; width:19px; height:20px; background:url(../img/game08/timer/timer-txt-sec.svg) no-repeat center center / 19px auto;}
.wrap-timer .txt .desc {display:block; text-align:center; position:absolute; z-index:114; bottom:20px; left:50%; transform:translateX(-50%); font-family:'OAGothic'; font-weight:500; font-size:0; line-height:16px; letter-spacing:-0.3px; color:#B0FBFF; width:64px; height:13px; background:url(../img/game08/timer/timer-txt-desc.svg) no-repeat center center / 64px auto;}
.wrap-timer .timer-progress-bar {width:106px; height:106px; position:absolute; z-index:230; top:50%; left:50%; transform:translate(-50%, -50%);}
.wrap-timer .timer-progress-bar svg {width:106px; height:106px;}

.wrap-quiz .box {position:absolute; top:-48px; left:50%; transform:translateX(-50%); width:1230px; height:382px; background:url(../img/game08/game-box.png) no-repeat center center / cover;}

/* 문제 카운트 */
.wrap-quiz .badge-num {position:absolute; top:16px; left:50px; width:100px; height:40px; font-family:'OAGothic'; font-weight:700; font-size:26px; color:#FFF;}

.wrap-quiz .box .wrap-desc {width:1174px; height:308px; position:absolute; left:50%; transform:translateX(-50%); bottom:14px; display:flex; justify-content:space-between; align-items:center; padding:42px 60px;}

/* 문제 영역 */
.wrap-quiz .area-question {position:relative; width:500px; height:200px; border-radius:18px; display:flex; justify-content:flex-start; align-items:center;}
.wrap-quiz .area-question .question {text-align:left; word-break:keep-all; font-family:'NotoSans'; font-weight:700; letter-spacing:-1.5px; font-size:30px; color:#FFF; line-height:45px;}
.wrap-quiz .area-question .question span {display:inline-block; vertical-align:bottom;}
.wrap-quiz .area-question .timer {position:absolute; top:0; right:0; width:120px; height:50px; background:#333; font-size:20px; color:#FFF; font-weight:bold; border-radius:0 0 0 18px; display:flex; justify-content:center; align-items:center;}

/* 정답 버튼 영역 */
.wrap-quiz .wrap-btn {width:494px; height:100%; border-radius:18px; display:flex; flex-direction:column; justify-content:center; gap:14px;}
.wrap-quiz .wrap-btn button {position:relative; height:94px; padding:0 0 0 20px; border:2px solid rgba(0, 0, 0, 0.1); border-radius:14px; background:#F7F7F7; display:flex; align-items:center; box-shadow: inset 0 -5px 5px rgba(0, 0, 0, 0.12);}
.wrap-quiz .wrap-btn button .num-circle {line-height:24px; display:block; margin-right:7px; width:30px; height:30px; border:2px solid rgba(105, 137, 156, 0.4); background:transparent; font-size:20px; font-weight:700; color:#000;}


/*** Button - 문제 유형별 ***/
/* ox형 */
.wrap-quiz .wrap-btn .wrap-ox {display:flex; justify-content:center; gap:34px; margin-right:30px;}
.wrap-quiz .wrap-btn .wrap-ox button {width:180px; height:180px; border-radius:50%; font-size:0; text-indent:-9999px; padding:0; transition:all 0s;}
.wrap-quiz .wrap-btn .wrap-ox button.btn-o {background:url(../img/game08/btn-quiz-o.svg) no-repeat center top / cover;}
.wrap-quiz .wrap-btn .wrap-ox button.btn-x {background:url(../img/game08/btn-quiz-x.svg) no-repeat center top / cover;}
.wrap-quiz .wrap-btn .wrap-ox button.btn-o.correct {background:url(../img/game08/btn-quiz-o-correct.svg) no-repeat center top / cover;}
.wrap-quiz .wrap-btn .wrap-ox button.btn-x.correct {background:url(../img/game08/btn-quiz-x-correct.svg) no-repeat center top / cover;}


/* 선택형 (2지선다 및 3지선다 문장형) */
.wrap-quiz .wrap-btn .btn-answer-choice {max-height:94px; transition:all 0s;}
.wrap-quiz .wrap-btn .btn-answer-choice .txt-answer {font-family:'NotoSans'; font-weight:700; font-size:22px; letter-spacing:-1.5px;}

.wrap-quiz .wrap-btn .btn-answer-choice.correct {background:url(../img/game08/game-btn-correct.png) no-repeat center bottom / 101% auto; }
.wrap-quiz .wrap-btn .btn-answer-choice.correct .txt-answer, .wrap-quiz .wrap-btn .btn-answer-choice.wrong .txt-answer {color:#FFF;}
.wrap-quiz .wrap-btn .btn-answer-choice.correct .num-circle {line-height:28px; background:#F7F7F7; box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.1); color:#1F8DF5; border:0;}

.wrap-quiz .wrap-btn .btn-answer-choice.wrong {background:url(../img/game08/game-btn-wrong.png) no-repeat center bottom / 101% auto;}
.wrap-quiz .wrap-btn .btn-answer-choice.wrong .num-circle {line-height:28px; background:#F7F7F7; box-shadow:inset 0 -4px 0 0 rgba(0,0,0,.1); color:#FD4968; border:0;}

/* 선택형 (단어형) */
.wrap-quiz .wrap-btn .wrap-select-word {display:flex; justify-content:center; gap:14px;}
.wrap-quiz .wrap-btn .wrap-select-word button {flex:1; justify-content:center; padding:0; height:180px; border:4px solid rgba(0,0,0,.1); transition:all 0s;}
.wrap-quiz .wrap-btn .wrap-select-word button span {font-family:'NotoSans'; font-weight:700; font-size:24px; letter-spacing:-1px;}

.wrap-quiz .wrap-btn .wrap-select-word button.correct {background:url(../img/game08/game-btn-word-correct.png) no-repeat center center / cover;}
.wrap-quiz .wrap-btn .wrap-select-word button.correct span, .wrap-quiz .wrap-btn .wrap-select-word button.wrong span {color:#FFF;}
.wrap-quiz .wrap-btn .wrap-select-word button.wrong {background:url(../img/game08/game-btn-word-wrong.png) no-repeat center center / cover;}

/* 주관식 (답 입력형) */
.wrap-quiz .wrap-btn .wrap-answer-text {display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:27px;}
.wrap-quiz .wrap-btn .wrap-answer-text input {background:#FFF; padding:32px 20px; width:400px; height:100px; text-align:center; font-family:'NotoSans'; font-weight:700; font-size:24px; border:4px solid #C1C5D3; border-radius:14px; overflow:hidden; resize:none;}
.wrap-quiz .wrap-btn .answer-text::placeholder {color:#999;}
.wrap-quiz .wrap-btn .wrap-answer-text input + .btn-answer-submit {border:0; box-shadow:unset; background:url(../img/game08/btn-quiz-confirm.png) no-repeat center top / 160px auto; justify-content:center; width:160px; height:54px; border-radius:40px; font-size:0; text-indent:-9999px;}
.wrap-quiz .wrap-btn .wrap-answer-text input.on + .btn-answer-submit {background:url(../img/game08/btn-quiz-confirm-blue.png) no-repeat center top / 160px auto;}
.wrap-quiz .wrap-btn .wrap-answer-text input.correct {border:4px solid #1F8DF5; color:#1F8DF5;}
.wrap-quiz .wrap-btn .wrap-answer-text input.wrong {border:4px solid #FD4968; color:#FD4968;}

/* .wrap-quiz .wrap-btn .wrap-answer-text {display:flex; flex-direction:column; justify-content:flex-start; align-items:center; gap:27px;}
.wrap-quiz .wrap-btn .wrap-answer-text textarea {padding:32px 20px; width:400px; height:100px; text-align:center; font-family:'NotoSans'; font-weight:700; font-size:24px; border:4px solid #C1C5D3; border-radius:14px; overflow:hidden; resize:none;}
.wrap-quiz .wrap-btn .answer-text::placeholder {color:#999;}
.wrap-quiz .wrap-btn .wrap-answer-text textarea + .btn-answer-submit {border:0; box-shadow:unset; background:url(../img/game08/btn-quiz-confirm.png) no-repeat center top / 160px auto; justify-content:center; width:160px; height:54px; border-radius:40px; font-size:0; text-indent:-9999px;}
.wrap-quiz .wrap-btn .wrap-answer-text textarea.on + .btn-answer-submit {background:url(../img/game08/btn-quiz-confirm-blue.png) no-repeat center top / 160px auto;}
.wrap-quiz .wrap-btn .wrap-answer-text textarea.correct {border:4px solid #1F8DF5; color:#1F8DF5;}
.wrap-quiz .wrap-btn .wrap-answer-text textarea.wrong {border:4px solid #FD4968; color:#FD4968;} */




/* 이미지 선택형 */
.wrap-quiz .wrap-btn .wrap-select-img {display:flex; justify-content:center; gap:14px;}
.wrap-quiz .wrap-btn .wrap-select-img button {width:240px; height:180px; border-radius:7px; padding:7px; background:#FFF; transition:all 0s;}
.wrap-quiz .wrap-btn .wrap-select-img button .img {position:relative; width:100%; height:100%; display:flex; justify-content:center; align-items:center; border-radius:7px; overflow:hidden;}
.wrap-quiz .wrap-btn .wrap-select-img button .img img {width:100%; height:100%; object-fit:cover;}
.wrap-quiz .wrap-btn .wrap-select-img button .desc {display:block; position:absolute; left:0; bottom:0; width:auto; height:22px; background:rgba(0,0,0,.8); border-radius:0 7px 0 7px; padding:3px 7px; font-family:'NotoSans'; font-weight:500; font-size:13px; letter-spacing:-1px; color:rgba(255,255,255,.9);}
.wrap-quiz .wrap-btn .wrap-select-img button.correct {background:#1F8DF5;}
.wrap-quiz .wrap-btn .wrap-select-img button.wrong {background:#FD4968;}


/*** 해설 Overlay ***/
.overlay {position:absolute; z-index:240; bottom:30px; left:50%; padding:45px 60px; transform:translate(-200%, 0); transition:transform .75s; width:1224px; height:348px;}
.overlay.show {transform:translate(-50%, 0);}
.overlay .btn-close-overlay {position:absolute; top:30px; right:30px; width:35px; height:35px; background:url(../img/game08/icon-close-overlay.png) no-repeat center top / cover;}
.overlay .badge-quiz {position:absolute; top:45px; left:60px; height:68px;}
.overlay .desc {font-family:'NotoSans'; font-weight:700; font-size:50px; line-height:60px; letter-spacing:-1.5px; word-break:keep-all; text-align:left; margin-top:95px; }
.overlay + .dim {position:absolute; z-index:239; top:0; left:0; width:100%; height:100%; background:transparent;}

/* Overlay - success */
.overlay.success {background:url(../img/game08/quiz-bg-overlay-success.png) no-repeat center center / cover;}
.overlay.success .badge-quiz {width:158px;background:url(../img/game08/badge-overlay-success.png) no-repeat left top / cover;}

/* Overlay - fail */
.overlay.fail {background:url(../img/game08/quiz-bg-overlay-fail.png) no-repeat center center / cover;}
.overlay.fail .badge-quiz {width:225px; background:url(../img/game08/badge-overlay-fail.png) no-repeat left top / cover;}


/***** 결과 화면 *****/
#result {position:relative; width:100%; height:100%; background:#f6f7f6; display:none;}
#result .bg {width:100%; height:100%; background:url(../img/game08/result/result-bg.jpg) no-repeat center center / cover;}
#result.show {display:block;}

#result .title {position:absolute; z-index:220; top:0; left:50%; transform:translateX(-50%);}
#result .title .txt-result {position:absolute; z-index:230; top:70px; color:#8ADCFF; white-space:nowrap; font-family:'OAGothic'; font-weight:700; font-size:40px; letter-spacing:-1.5px; text-align:center;}

#result .wrap-count {position:absolute; z-index:200; top:224px; left:210px; padding:14px 0; width:229px; height:127px; text-align:center; font-family:'OAGothic'; font-weight:700; font-size:30px; letter-spacing:-1.5px; text-shadow:0 3px 0 rgba(0,0,0,.1); color:#575BE0; background:url(../img/game08/result/bubble.png) no-repeat center center / cover;}
#result .wrap-count .line1 {display:inline-block; font-size:30px; color:#E64CC1;}

#result .wrap-char .char {width:194px; height:298px; left:366px; bottom:140px; position:absolute; z-index:200;}
#result .wrap-char .char .head {position:absolute; z-index:203; top:0; left:0; width:194px; height:176px; background:url(../img/game08/intro-char-head.png) no-repeat center center / cover; animation:shakeHead 2.2s ease-in infinite; animation-delay:.5s;}
#result .wrap-char .char .body {position:absolute; z-index:202; bottom:0; left:0; width:194px; height:132px; background:url(../img/game08/intro-char-body.png) no-repeat center center / cover;}
#result .wrap-char .char .body + .body-shadow {content:''; position:absolute; z-index:201; bottom:-6px; left:50%; transform:translateX(-50%); width:133px; height:26px; border-radius:100%; background:rgba(0,0,0,.1);}

#result .wrap-char .robot {width:282px; height:404px; position:absolute; z-index:200; right:362px; bottom:130px;}
#result .wrap-char .robot .body {position:absolute; z-index:202; bottom:55px; left:50%; transform:translateX(-50%); width:212px; height:348px; background:url(../img/game08/result/part-robot.png) no-repeat center bottom / contain;}
#result .wrap-char .robot .under {position:absolute; z-index:201; bottom:0; left:50%; transform:translateX(-50%); margin-left:7px; width:200px; height:72px; background:url(../img/game08/intro-robot-under.png) no-repeat center center / cover;}
#result .wrap-char .robot .light01 {position:absolute; z-index:204; bottom:50px; left:50%; transform:translateX(-50%); width:202px; height:104px; background:url(../img/game08/intro-robot-light-01.png) no-repeat center center / cover; animation:light01 2s ease-in-out infinite; opacity:.1;}
#result .wrap-char .robot .light02 {position:absolute; z-index:203; bottom:50px; left:50%; transform:translateX(-50%); width:282px; height:92px; background:url(../img/game08/intro-robot-light-02.png) no-repeat center center / cover; animation:light02 2s ease-in-out infinite; opacity:1;}


/* 문제를 전부 맞혔을 때 */
#result.perfect .wrap-char .char .head {position:absolute; z-index:203; top:0; left:0; width:194px; height:176px; background:url(../img/game08/result/head-char-perfect.png) no-repeat center center / cover; animation:shakeHead 2.2s ease-in infinite; animation-delay:.5s;}
#result.perfect .title {width:1014px; height:181px; background:url(../img/game08/result/result-title-bg-short.png) no-repeat center top / cover;}
#result.perfect .title .txt-result {left:162px; top:60px; font-size:54px;}
#result.perfect .title::before {content:''; position:absolute; right:132px; top:52px; width:94px; height:94px; background:url(../img/game08/result/title-robot-perfect.png) no-repeat center center / cover;}
#result.perfect .title .neon {width:685px; height:134px; background:url(../img/game08/result/titile-neon-perfect.png) no-repeat center center / cover;}

/* 문제를 5~9개 맞혔을 때 */
#result.wrong5-9 .wrap-char .char .head {background:url(../img/game08/result/head-char-wrong.png) no-repeat center center / cover; animation:shakeHeadSlow 4.5s ease-out infinite; animation-delay:.5s;}
#result.wrong5-9 .wrap-char .char .body {background:url(../img/game08/result/body-char-wrong.png) no-repeat center center / cover;}
#result.wrong5-9 .title {width:1100px; height:164px; background:url(../img/game08/result/result-title-bg-long.png) no-repeat center top / cover;}
#result.wrong5-9 .title .txt-result {left:152px;}
#result.wrong5-9 .title::before {content:''; position:absolute; right:132px; top:52px; width:94px; height:94px; background:url(../img/game08/result/title-robot-wrong5-9.png) no-repeat center center / cover;}
#result.wrong5-9 .wrap-count {font-size:24px;}

/* 문제를 0~4개 맞혔을 때 */
#result.wrong0-4 .wrap-char .char .head {background:url(../img/game08/result/head-char-wrong0-4.png) no-repeat center center / cover; animation:shakeHeadSlow 4.5s ease-out infinite; animation-delay:.5s;}
#result.wrong0-4 .wrap-char .char .body {left:-10px; width:239px; height:133px; background:url(../img/game08/result/body-char-wrong0-4.png) no-repeat center center / cover;}
#result.wrong0-4 .title {width:1100px; height:164px; background:url(../img/game08/result/result-title-bg-long.png) no-repeat center top / cover;}
#result.wrong0-4 .title .txt-result {left:150px;}
#result.wrong0-4 .title::before {content:''; position:absolute; right:132px; top:52px; width:94px; height:94px; background:url(../img/game08/result/title-robot-wrong5-9.png) no-repeat center center / cover;}
#result.wrong0-4 .wrap-count {font-size:24px;}

/* 재도전 성공 */
#result.retried.perfect .wrap-count {padding:32px 0;}

/* 재도전 실패 */
#result.retried.wrong .title {width:1100px; height:164px; background:url(../img/game08/result/result-title-bg-long.png) no-repeat center top / cover;}
#result.retried.wrong .title .txt-result {left:152px;}
#result.retried.wrong .title::before {content:''; position:absolute; right:132px; top:52px; width:94px; height:94px; background:url(../img/game08/result/title-robot-wrong5-9.png) no-repeat center center / cover;}
#result.retried.wrong .wrap-char .char .head {background:url(../img/game08/result/head-char-wrong0-4.png) no-repeat center top / cover; animation:shakeHeadSlow 4.5s ease-out infinite; animation-delay:.5s;}

@keyframes shakeHeadSlow {
    0% {transform:rotate(0deg);}
    20% {transform:rotate(-4deg);}
    40% {transform:rotate(4deg);}
    60% {transform:rotate(0deg);}
    100% {transform:rotate(0deg);}
}

.obj-get {position:absolute; z-index:200; width:302px; height:405px; right:343px; bottom:133px;}
.obj-get span {position:absolute;}
.obj-get span:before {position:absolute; width:100%; height:100%; font-size:0px; color:#000; text-indent:-9999px;}

.obj-get span.arm-left {z-index:222; top:204px; left:45px; width:56px; height:85px;}
.obj-get span.arm-left:before {content:'arm-left'; background:url(../img/game08/result/part-arm-left.svg) no-repeat center center / contain;}
.obj-get span.arm-right {z-index:220; top:205px; right:63px; width:56px; height:85px;}
.obj-get span.arm-right:before {content:'body'; background:url(../img/game08/result/part-arm-right.svg) no-repeat center center / contain;}

.obj-get span.leg-left {bottom:52px; left:82px; width:60px; height:84px;}
.obj-get span.leg-left:before {content:'leg-left'; background:url(../img/game08/result/part-leg-left.svg) no-repeat center center / contain;}
.obj-get span.leg-right {bottom:52px; right:99px; width:60px; height:84px;}
.obj-get span.leg-right:before {content:'leg-right'; background:url(../img/game08/result/part-leg-right.svg) no-repeat center center / contain;}

.obj-get span.shoulder-left {z-index:220; top:192px; left:88px; width:38px; height:38px;}
.obj-get span.shoulder-left:before {content:'shoulder-left'; background:url(../img/game08/result/part-shoulder-left-02.svg) no-repeat center center / contain;}
.obj-get span.shoulder-right {z-index:220; top:192px; right:105px; width:38px; height:38px;}
.obj-get span.shoulder-right:before {content:'shoulder-right'; background:url(../img/game08/result/part-shoulder-right-02.svg) no-repeat center center / contain;}

.obj-get span.ear-left {z-index:225; top:5px; left:38px; width:70px; height:70px;}
.obj-get span.ear-left:before {content:'ear-left'; background:url(../img/game08/result/part-ear-left.svg) no-repeat center center / contain;}
.obj-get span.ear-right {z-index:225; top:5px; right:93px; width:37px; height:70px;}
.obj-get span.ear-right:before {content:'ear-right'; background:url(../img/game08/result/part-ear-right.svg) no-repeat center center / contain;}

.obj-get span.body {z-index:220; bottom:119px; left:85px; width:113px; height:94px;}
.obj-get span.body:before {content:'body'; background:url(../img/game08/game-part/body-on.png) no-repeat center center / cover;}

.obj-get span.face {z-index:230; top:63px; left:20px; width:241px; height:132px;}
.obj-get span.face:before {content:'face'; background:url(../img/game08/result/part-head.svg) no-repeat center center / contain;}
.obj-get span.head-star {display:none; z-index:230; top:0; left:83px; width:112px; height:49px; background:url(../img/game08/result/head-star.png) no-repeat center center / contain; animation:headStar 2.5s ease-out infinite;}
.obj-get span.head-star.show {display:block;}
@keyframes headStar {
    0% {top:10px; transform:rotate(-2deg);}
    25% { transform:rotate(2deg);}
    50% {top:-2px; transform:rotate(-2deg);}
    75% {transform:rotate(2deg);}
    100% {top:10px; transform:rotate(-2deg);}
}

#result.wrong .obj-get span.smoke {right:12px; top:110px; width:68px; height:84px; background:url(../img/game08/smoke.png) no-repeat center center / contain; animation:resultSmoke 2s infinite;}
@keyframes resultSmoke {
    0% {right:12px; top:110px; transform:rotate(-5deg) scale(0.5); opacity:0;}
    25% {transform:rotate(5deg) scale(0.6); opacity:1;}
    50% {transform:rotate(-5deg) scale(0.75); opacity:1;}
    75% {transform:rotate(5deg) scale(0.9);}
    100% {right:-20px; top:84px; transform:rotate(0) scale(1); opacity:0;}
}

#result.wrong .obj-get span.broke-line01 {top:314px; left:50px; width:37px; height:28px; background:url(../img/game08/result/broke-line01.png) no-repeat center center / cover; animation:broke-line01 2s ease infinite; opacity:0;}
#result.wrong .obj-get span.broke-line02 {top:178px; right:48px; width:45px; height:36px; background:url(../img/game08/result/broke-line02.png) no-repeat center center / cover; animation:broke-line02 1.4s .5s ease infinite; opacity:0;}
@keyframes broke-line01 {
    0% {top:314px; left:50px; transform:rotate(0); opacity:0;}
    25% {opacity:1;}
    55% {opacity:1;}
    100% {top:270px; left:0; transform:rotate(-360deg); opacity:0;}
}
@keyframes broke-line02 {
    0% {top:178px; right:48px; transform:rotate(0); opacity:0;}
    25% {opacity:1;}
    55% {opacity:1;}
    100% {top:155px; right:-6px; transform:rotate(240deg); opacity:0;}
}

#result.wrong .obj-get span.broke-bolt01 {top:150px; right:20px; width:37px; height:36px; background:url(../img/game08/result/broke-bolt01.png) no-repeat center center / cover;
    offset-path: path('M 0,50 Q 2,-33 80,-36');
    offset-distance: 0%;
    animation:broke-bolt01 1.4s .3s ease infinite;
    opacity:0;
}
#result.wrong .obj-get span.broke-bolt02 {top:276px; left:50px; width:27px; height:27px; background:url(../img/game08/result/broke-bolt02.png) no-repeat center center / cover;
    offset-path: path('M 0,17 Q -10,-35 -74,-60');
    offset-distance: 0%;
    animation:broke-bolt02 1.4s .6s ease infinite;
    opacity:0;
}
@keyframes broke-bolt01 {
    0% {offset-distance:0%; transform:rotate(0); opacity:0;}
    50% {opacity:1;}
    70% {opacity:1;}
    100% {offset-distance:100%; transform:rotate(270deg); opacity:0;}
}
@keyframes broke-bolt02 {
    /* 0% {top:276px; left:50px; transform:rotate(0); opacity:0;}
    25% {opacity:1;}
    55% {opacity:1;}
    100% {top:232px; left:-34px; transform:rotate(-270deg); opacity:0;} */
    0% {offset-distance:0%; transform:rotate(0); opacity:0;}
    50% {opacity:1;}
    70% {opacity:1;}
    100% {offset-distance:100%; transform:rotate(-270deg); opacity:0;}
}

#result .wrap-btn {position:absolute; z-index:250; bottom:40px; left:50%; transform:translateX(-50%); display:flex; justify-content:center; align-items:center; width:100%; gap:14px;}
#result .wrap-btn button {width:360px; height:80px; border-radius:40px; transition:transform .5s; color:#fff; font-size:36px; letter-spacing:-1px;}
/* #result .wrap-btn button span {display:block;} */
#result .wrap-btn button.btn-replay {background:url(../img/game08/result/btn-replay.png) no-repeat center center / cover; font-family:'OMPOP'; text-shadow:-3px 0px #009B6E, 0px 3px #009B6E, 3px 0px #009B6E, 0px -3px #009B6E; font-size:0;}

/* .btn-endplay (활동 종료하기) 버튼 삭제 */
/* #result .wrap-btn button.btn-endplay {background:url(../img/game08/result/btn-endplay.png) no-repeat center center / cover; font-family:'OMPOP'; text-shadow:-3px 0px #EA4A00, 0px 3px #EA4A00, 3px 0px #EA4A00, 0px -3px #EA4A00; font-size:0;} */

#result .wrap-btn button.btn-restart {background:url(../img/game08/result/btn-restart.png) no-repeat center center / cover; font-family:'OMPOP'; font-size:0;}

/* .overlay 닫힘 후 다음 문제 보이기 전까지 클릭 방지 */
.click-blocker {position:fixed; top:0; left:0; width:100%; height:100%; background-color:transparent; opacity:0.4; z-index:99999;}


/* 문제 관련 이미지 */
.q_soclai_game08_05 {width:94px; height:46px; background:url(../img/game08/q_soclai_game08_05.png) no-repeat center center / cover;}