@charset "utf-8";

* { -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
    user-select: none;
    margin: 0;
    padding: 0; font-family: 'NanumSquareEB'; }

input[type="text"] { -webkit-user-select: auto;
	-moz-user-select: auto;
	-ms-user-select: auto;
    user-select: auto;
    outline: none; }

@font-face {
    font-family: 'NanumSquareB';
    font-weight: 400;
    src: url(../fonts/NanumSquareB.woff) format('woff');
}

@font-face {
    font-family: 'NanumSquareEB';
    font-weight: 400;
    src: url(../fonts/NanumSquareEB.woff) format('woff');
}

@font-face {
    font-family: 'BMJUA';
    font-weight: 400;
    src: url(../fonts/BMJUA.woff) format('woff');
}

#container { width:1920px; height:1080px; position: relative; top:0; left:0; overflow: hidden; }
body { background-color: #FDF4DE; }

/* 인트로 페이지 */
.introPage { width:100%; height:100%; position: absolute; top:0; left:0; background-image: url(../images/ox/intro_bg.jpg); background-size: 1920px 1080px; }
.introPage div { position: absolute; display: none; }
.intro_title1 { background-image: url(../images/ox/title1.png); width:943.5px; height: 300.5px; background-size: 100% 100%; top:200px; left: 50%; transform: translateX(-50%); z-index: 1; }
.intro_title2 { background-image: url(../images/ox/title2.png); width:688.5px; height: 199.5px; background-size: 100% 100%; top:530px; left: 50%; transform: translateX(-50%); z-index: 1; }
.intro_start { background-image: url(../images/ox/gamestart.png); width:314px; height: 152px; background-size: 100% 100%; top:800px; left: 50%; transform: translateX(-50%); cursor: pointer; }
.intro_start.on { background-image: url(../images/ox/gamestart_H.png); }

/* 스타트 페이지 */
.startPage { width:100%; height:100%; position: absolute; top:0; left:0; background-image: url(../images/ox/start_bg.jpg); background-size: 1920px 1080px; display: none; }
.startTitle1 { position: absolute; background-image: url(../images/ox/title1.png); width:755px; height: 240.5px; background-size: 100% 100%; top:25px; left: 254px; z-index: 1; }
.startTitle2 { position: absolute; background-image: url(../images/ox/title2.png); width:551px; height: 159.5px; background-size: 100% 100%; top:85px; left: 990px; }

/* 단원 고르기 */
.lesson { position: absolute; top: 455px; left: 235px; width: 507px; }

.lesson > div { cursor: pointer; width:297px; height:102.5px; background-size: 100% 100%; cursor: pointer; background-image: url(../images/ox/lesson.png); margin: auto; margin-bottom: 12px; text-align: center; font-size:45px; line-height: 100px; }
.lesson > div.choose, .lesson > div.on { background-image: url(../images/ox/lesson_H.png); color:#fff; }

.personBg {  width:1300px; height: 530px; border-radius: 40px; position: absolute; top:240px; left:50%; transform: translateX(-50%); }
.person {  position: absolute; top: 372px; left: 1179px; width: 457px; height: 332px; }
.person > span { position: absolute; top: 60px; font-size: 35px; left: 0; width:100%; text-align: center; }
.person > input[type="text"].numInput { width: 250px; height: 200px; position: absolute; top:80px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 200px; color:#5B503A; background-color: transparent; border:0; outline: 0; font-family: 'BMJUA'; line-height: 300px; }
.person .personBtn { cursor: pointer; width:47.5px; height:69.5px; position: absolute; top:70px; background-size: 100% 100%; top:218px; }
.person .personBtn.upPerson { background-image: url(../images/ox/right.png); right:-47px; }
.person .personBtn.upPerson.on { background-image: url(../images/ox/right_H.png); }
.person .personBtn.downPerson { background-image: url(../images/ox/left.png); left:-47px; }
.person .personBtn.downPerson.on { background-image: url(../images/ox/left_H.png); }

.person_section { position: absolute; top:50px; left:50px; }
.person_section > div { display: inline-block; }

/* 하단 버튼 */
.whiteBg { position: absolute; width:1920px; height: 172px; background-size: 1923px 100%; bottom:30px; left:0; }
.howPlayBtn { position: absolute; cursor: pointer; left:999px; top:34px; width:233.5px; height:152px; background-image: url(../images/balloon/howPop.png); background-size:100% 100%; }
.howPlayBtn.on { background-image: url(../images/balloon/howPop_H.png); }
.startBtn { position: absolute; cursor: pointer; left:664px; top:33px; width:314px; height:152px; background-image: url(../images/balloon/start.png); background-size:100% 100%; }
.startBtn.on { background-image: url(../images/balloon/start_H.png); }

/* 게임 방법 팝업 */
.howPlayPopup { display: none; width:100%; height:100%; background-color: rgba(0,0,0,0.5); position: absolute; top:0; left:0; z-index: 2; }
.howPlayPopup > div { width:1471px; height:828.5px; top:50%; left:50%; transform: translate(-50%, -50%); position: absolute; background-image: url(../images/ox/gamehow_bg.png); background-size: 100% 100%; }
.howPlayPopup > div > span { position: absolute; display: block; background-size: 100% 100%; height:51px; top: 45px; }
.howPlayPopup > div.play1 > span { width: 153px; left: 51px; background-image: url(../images/balloon/gamehow_title.png); }
.howPlayPopup > div.play2 > span { width: 195.5px; left: 32px; background-image: url(../images/balloon/question_title.png); }

.modified { position: absolute; cursor: pointer; left:1120px; top:36px; width:244px; height:72px; background-size: 100% 100%; } 
.modified1 { background-image: url(../images/treasure/question_btn.png); }
.modified1.on { background-image: url(../images/treasure/question_btn_H.png); }
.modified2 { background-image: url(../images/treasure/gamehow_btn.png); }
.modified2.on { background-image: url(../images/treasure/gamehow_btn_H.png); }

.howPlayPopup .text { position: absolute; top:169px; left:165px; width:100%; }
.howPlayPopup .text > p { margin-bottom: 55px; position: relative; font-size: 42px; width: 1250px; line-height: 65px; }
.howPlayPopup .text > p:last-child { margin-bottom: 0px; }
.howPlayPopup .text > p::after { content:""; display: block; position: absolute; width:63.5px; height:63.5px; background-size:100% 100%; top:-2px; left:-85px; }
.howPlayPopup .text > p:nth-child(1)::after { background-image: url(../images/ox/num1.png); }
.howPlayPopup .text > p:nth-child(2)::after { background-image: url(../images/ox/num2.png); }
.howPlayPopup .text > p:nth-child(3)::after { background-image: url(../images/ox/num3.png); }
.howPlayPopup .text > p:nth-child(4)::after { background-image: url(../images/ox/num4.png); }
.howPlayPopup .text > p:nth-child(5)::after { background-image: url(../images/ox/num5.png); }

.howPlayPopup .play2 .text { top: 167px; left: 149px; }
.howPlayPopup .play2 .text > p { margin-bottom: 30px; font-size:26px; width: 1050px; line-height: normal; }
.howPlayPopup .play2 .text > p::after { width:40px; height:40px; top: -6px; left: -55px; }
.howPlayPopup .play2 .text > p > span { color: #6B6B6B; display: block; font-size: 20px; margin-top: 10px; }
.howPlayPopup .play2 .text > img { position: absolute; top: 185px; left: 0px; width: 1170px; }

.play2 { display: none; }

.popupClose { position: absolute;  top:183px; left:1632px; width:25.5px; height:25.5px; cursor: pointer; background-image: url(../images/treasure/close.png); background-size: 100% 100%; }
.popupClose.on { background-image: url(../images/treasure/close_H.png); }

/* 퀴즈 페이지 */
.quizPage { width:100%; height:100%; position: absolute; top:0; left:0; background-size:100% 100%; background-image: url(../images/ox/main_bg.jpg); display: none; }
.home { position: absolute; cursor: pointer; left:20px; top:20px; width:75px; height:75px;  z-index: 51; background-image: url(../images/ox/home.png); background-size: 100% 100%; }
.home.on { background-image: url(../images/ox/home_H.png); }

.pageNum { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; left: 1260px; text-align: center; width: 110px; letter-spacing: -1px; }
.pageNum.reQuizs .count { font-size:23px; }
.pageNum.reQuizs .allPage { display: none; }

.questionBox { position: absolute; top: 100px; left: 253px; width: 1248px; height: 205px; }
.questionBox > p.question { width: 95%; font-size: 50px; line-height: 65px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); word-break: keep-all; }

.section { position: absolute; top:433px; }
.section > div { position: absolute; background-size:100% 100%; cursor: pointer; text-align: center; line-height: 265px; display: none; font-size:40px; }
.section.o_section > div { width:145.5px; height:180px; background-image: url(../images/ox/left_char.png); }
.section.x_section > div { width:179px; height:207.5px; background-image: url(../images/ox/right_char.png); }
.section > div:nth-child(1) { top:0; left:-20px; }
.section > div:nth-child(2) { top:0; left:160px; }
.section > div:nth-child(3) { top:0; left:340px; }
.section > div:nth-child(4) { top:0; left:520px; }
.section > div:nth-child(5) { top:0; left:700px; }
.section > div:nth-child(6) { top:150px; left:-20px; }
.section > div:nth-child(7) { top:150px; left:160px; }
.section > div:nth-child(8) { top:150px; left:340px; }
.section > div:nth-child(9) { top:150px; left:520px; }
.section > div:nth-child(10) { top:150px; left:700px; }
.section > div:nth-child(11) { top:300px; left:-20px; }
.section > div:nth-child(12) { top:300px; left:160px; }
.section > div:nth-child(13) { top:300px; left:340px; }
.section > div:nth-child(14) { top:300px; left:520px; }
.section > div:nth-child(15) { top:300px; left:700px; }
.section > div:nth-child(16) { top:450px; left:-20px; }
.section > div:nth-child(17) { top:450px; left:160px; }
.section > div:nth-child(18) { top:450px; left:340px; }
.section > div:nth-child(19) { top:450px; left:520px; }
.section > div:nth-child(20) { top:450px; left:700px; }

.section.smallChar > div { line-height: 215px; font-size:35px; }
.section.o_section.smallChar > div { width:116px; height:144px; }
.section.x_section.smallChar > div { width:143px; height:166px; }
.section.smallChar > div:nth-child(1) { top:40px; left:-20px; }
.section.smallChar > div:nth-child(2) { top:40px; left:125px; }
.section.smallChar > div:nth-child(3) { top:40px; left:270px; }
.section.smallChar > div:nth-child(4) { top:40px; left:415px; }
.section.smallChar > div:nth-child(5) { top:40px; left:560px; }
.section.smallChar > div:nth-child(6) { top:40px; left:705px; }
.section.smallChar > div:nth-child(7) { top:155px; left:-20px; }
.section.smallChar > div:nth-child(8) { top:155px; left:125px; }
.section.smallChar > div:nth-child(9) { top:155px; left:270px; }
.section.smallChar > div:nth-child(10) { top:155px; left:415px; }
.section.smallChar > div:nth-child(11) { top:155px; left:560px; }
.section.smallChar > div:nth-child(12) { top:155px; left:705px; }
.section.smallChar > div:nth-child(13) { top:270px; left:-20px; }
.section.smallChar > div:nth-child(14) { top:270px; left:125px; }
.section.smallChar > div:nth-child(15) { top:270px; left:270px; }
.section.smallChar > div:nth-child(16) { top:270px; left:415px; }
.section.smallChar > div:nth-child(17) { top:270px; left:560px; }
.section.smallChar > div:nth-child(18) { top:270px; left:705px; }
.section.smallChar > div:nth-child(19) { top:385px; left:-20px; }
.section.smallChar > div:nth-child(20) { top:385px; left:125px; }
.section.smallChar > div:nth-child(21) { top:385px; left:270px; }
.section.smallChar > div:nth-child(22) { top:385px; left:415px; }
.section.smallChar > div:nth-child(23) { top:385px; left:560px; }
.section.smallChar > div:nth-child(24) { top:385px; left:705px; }
.section.smallChar > div:nth-child(25) { top:500px; left:-20px; }
.section.smallChar > div:nth-child(26) { top:500px; left:125px; }
.section.smallChar > div:nth-child(27) { top:500px; left:270px; }
.section.smallChar > div:nth-child(28) { top:500px; left:415px; }
.section.smallChar > div:nth-child(29) { top:500px; left:560px; }
.section.smallChar > div:nth-child(30) { top:500px; left:705px; }
.o_section { left:85px; }
.x_section { left:1046px; }

.reQuiz { position: absolute; top: 443px; left: 1738px; width:138.5px; height:108.5px; cursor: pointer; display: none; background-image: url(../images/ox/reAnswer.png); background-size:100% 100%; }
.reQuiz.on { background-image: url(../images/ox/reAnswer_H.png); }

.check { position: absolute; width: 198px; height: 129px; top: 47px; right: -350px; cursor: pointer; background-size: 100% 100%; background-image: url(../images/ox/check.png); }
.check.on { background-image: url(../images/ox/check_H.png); }
.reset { position: absolute; width: 198px; height: 129px; top: 47px; right: -350px; cursor: pointer; background-size: 100% 100%; background-image: url(../images/ox/retry.png); display: none; }
.reset.on { background-image: url(../images/ox/retry_H.png); }
.next { position: absolute; width: 88px; height: 88px; bottom: 20px; right: 20px; cursor: pointer; background-size: 100% 100%; background-image: url(../images/ox/next.png); display: none; }
.next.on { background-image: url(../images/ox/next_H.png); }


.finishNum { color: #005F9F; font-size: 60px; position: absolute; width: 900px; left: 556px; top: 418px; height: 249px; letter-spacing: -2px; text-align: center; }
.finishNum.smallText { font-size: 45px; }
.finishNum > span { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); width:95%; display: block; }
.finish .finish_char { position: absolute; left: 50%; top: 715px; transform: translateX(-50%); width: 1850px; text-align: center; }
.finish .finish_char > div { display: inline-block; background-size: 100% 100%; background-image: url(../images/ox/finish_char.png); width:145.5px; height:180px; line-height: 265px; font-size:40px; display: none; }
.finish .finish_char.small > div { width:116px; height:144px; line-height: 215px; font-size:35px; }

.failed, .no_failed, .resurrection, .finish { position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; display: none; background-size:100% 100%; }
.failed { width:1037.5px; height:454.5px; background-image: url(../images/ox/failed_pop.png); }
.resurrection, .no_failed { width:1037.5px; height:454.5px; background-image: url(../images/ox/reAnswer_pop.png); }
.finish { width:100%; height:100%; background-image: url(../images/ox/finish_bg.jpg); }

.resurrection > div, .failed > div { position: absolute; top: 350px; cursor: pointer; font-size: 45px; background-color: #FF8D00; padding: 15px 0; border-radius: 50px; width: 250px; text-align: center; }
.resurrection > div.yes_res { left:200px; }
.resurrection > div.no_res { right:200px; }
.resurrection > div.on, .failed > div.on { background-color:#00C1FF; color:#fff; }
.failed > div { left:50%; transform: translateX(-50%); }
.resurrection > p, .no_failed > p { text-align: center; color: #fff; font-size: 45px; position: absolute; width: 100%; top: 252px; }
.no_failed > p { top:280px; }

.checkingBg { position: absolute; top:0; left:0; width:100%; height:100%; z-index: 2; display: none; }
.checking { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-image: url(../images/ox/feedback.png); width:1127.5px; height:776.5px; background-size: 100% 100%; }
.checking .ox { background-size: 100% 100%; position: absolute; top:0; left:0; }
.checking.true .ox { background-image: url(../images/ox/o.png); width:295.5px; height:295.5px; top: 87px; left: 81px; }
.checking.fail .ox { background-image: url(../images/ox/x.png); width:250.5px; height:300px; top: 90px; left: 104px; }
.checking .check_frog { background-size: 100% 100%; background-image: url(../images/ox/o_char.png); position: absolute; top: 131px; left: 551px; width:286.5px; height:298px; animation: frogAni 1.5s linear infinite; }
.checking .check_frog.on { transform: rotateY(180deg); }

@keyframes frogAni { 
    0% { top: 131px; }
    25% { top: 70px; }
    50% { top: 131px; }
    75% { top: 70px; }
    100% { top: 131px; }
}

.xml { display: none; }