@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; background-image: url(../images/treasure/game_Bg.png); background-size: 1920px 1080px; overflow: hidden; }
body { background-color: #FDF4DE; }

/* 인트로 페이지 */
.introPage { width:100%; height:100%; position: absolute; top:0; left:0; background-image: url(../images/treasure/intro_bg.png); background-size: 1920px 1080px; }
.introPage div { position: absolute; }
.intro_title { background-image: url(../images/treasure/intro_title.png); width:1109px; height: 731.5px; background-size: 100% 100%; top:104px; left: 50%; transform: translateX(-50%); z-index: 1; display: none; }
.boat { background-image: url(../images/treasure/boat.png); width:816px; height: 952px; background-size: 60% 60%; background-repeat: no-repeat; top: 469px; left: 1965px; animation: boat 2s 1s linear forwards; }
.intro_text { background-image: url(../images/treasure/intro_txt.png); width:367px; height: 320.5px; background-size: 100% 100%; top: 335px; left: 1394px; display: none; }
.intro_start { background-image: url(../images/treasure/introStart.png); width:314px; height: 152px; background-size: 100% 100%; top:450px; left: 1376px; display: none; cursor: pointer; }
.intro_start.on { background-image: url(../images/treasure/introStart_H.png); }

@keyframes boat {
    0% { left:1965px; }
    100% { left: 1430px; }
}

/* 스타트 페이지 */
.startPage { width:100%; height:100%; position: absolute; top:0; left:0; display: none; }
.startTitle { position: absolute; top:50px; left:50%; transform: translateX(-50%); background-image: url(../images/treasure/title.png); width:1000.5px; height:211px; background-size: 100% 100%; }

/* 단원 고르기 */
.lesson { position: absolute; top:173px; left:0px; width:393px; }

.lesson > div { cursor: pointer; width:255px; height:103px; background-size: 100% 100%; cursor: pointer; background-image: url(../images/treasure/lesson1.png); margin: auto; margin-bottom: 8px; }
.lesson > div a { display: block; width:100%; height:100%; }
.lesson > div.choose, .lesson > div.on { background-image: url(../images/treasure/lesson1_H.png); }
.lesson > div:nth-child(2) { background-image: url(../images/treasure/lesson2.png); }
.lesson > div:nth-child(3) { background-image: url(../images/treasure/lesson3.png); }
.lesson > div.choose:nth-child(2), .lesson > div.on:nth-child(2) { background-image: url(../images/treasure/lesson2_H.png); }
.lesson > div.choose:nth-child(3), .lesson > div.on:nth-child(3) { background-image: url(../images/treasure/lesson3_H.png); }

/* 모둠 정하기 */
.personBg { background-image: url(../images/treasure/modum_bg.png); width:1377.5px; height: 537px; background-size: 100% 100%; position: absolute; top:299px; left:50%; transform: translateX(-50%); }

.person { position: absolute; top: 122px; left: 422px; width: 370px; }
.person > div { width: 175px; height: 110px; line-height: 110px; cursor: pointer; margin: auto; margin-bottom: 20px; text-align: center; font-size: 45px; color: #000; border-radius: 50px; background-color: #8BEEDA; position: relative; } 
.person > div:last-of-type { margin-bottom: 0; }
.person > div.select, .person > div.on { color:#fff; background-color: #C19EFA; }
/* .person > div.select::after, .person > div.on::after { content:""; display:block; border-radius: 50px; border:5px solid #F8A300; position: absolute; top:0; left:0; width:175px; height:110px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } */

.orderBox { position: absolute; top: 101px; left: 818px; width: 520.5px; height: 365px; }
.random_btn { position: absolute; top: -70px; left: 425px; width: 114.5px; height: 62px; cursor: pointer; background-image: url(../images/treasure/random.png); background-size: 100% 100%; }
.random_btn.on { background-image: url(../images/treasure/random_H.png); }
.boxBg { background-size:100% 100%; width:226px; height:178.5px; position: absolute; pointer-events: none; }
.boxBg1 { background-image:url(../images/treasure/charBg1.png); top:0; left:0; }
.boxBg2 { background-image:url(../images/treasure/charBg2.png); top:0; right:0; }
.boxBg3 { background-image:url(../images/treasure/charBg3.png); bottom:0; left:0; }
.boxBg4 { background-image:url(../images/treasure/charBg4.png); bottom:0; right:0; }
.boxBg.noSelect { opacity: 0.3; }

/* 순서 정하기 drag and drop 영역 */
.dragBox { position: absolute; top:0; left:0; }
.drag { position: absolute; cursor: pointer; width:163px; height:155px; }
.drag.noSelect { opacity: 0.3; pointer-events: none; display: block; }
.target { position: absolute; width:163px; height:155px; }
.target1, .drag1 { top: 23px; left: 54px;}
.target2, .drag2 { top: 23px; left: 351px;}
.target3, .drag3 { top: 209px; left: 54px;}
.target4, .drag4 { top: 209px; left: 351px;}

/* 하단 버튼 */
.whiteBg { position: absolute; width:1920px; height: 172px; background-size: 1923px 100%; bottom:46px; 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; }
.howPlayPopup > div { width:1471px; height:828.5px; top:50%; left:50%; transform: translate(-50%, -50%); position: absolute; background-image: url(../images/treasure/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:245px; 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/treasure/num1.png); }
.howPlayPopup .text > p:nth-child(2)::after { background-image: url(../images/treasure/num2.png); }
.howPlayPopup .text > p:nth-child(3)::after { background-image: url(../images/treasure/num3.png); }

.howPlayPopup .play2 .text { top: 220px; 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; display: none; }
.quizBg { background-image: url(../images/treasure/main_bg.png); width:1920px; height:1080px; background-size:100% 100%; pointer-events: none; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); }
.home { position: absolute; cursor: pointer; left:20px; top:20px; width:75px; height:75px;  z-index: 51; background-image: url(../images/treasure/home.png); background-size: 100% 100%; }
.home.on { background-image: url(../images/treasure/home_H.png); }

.popNoBox { position: absolute; z-index: 52; top:0; left:0; width:100%; height: 100%; display: none; }
.popNo { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-image: url(../images/treasure/alert.png); background-size: 100% 100%; width:588px; height:181px; }

.timer { display: none; position:absolute; width:102px; height: 120px; line-height: 148px; font-size: 55px; text-align: center; top:-122px; left:1540px; cursor: pointer; background-image: url(../images/treasure/timer.png); background-size:100% 100%; font-family: 'BMJUA'; color:#D00000; }
.timer.move { animation: moveTimer 1s linear infinite; }

@keyframes moveTimer {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(15deg); }
    30% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
    70% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

/* bingo section */
.bingo_section, .bingo_view { position: absolute; top: 386px; left: 1039px; width: 790px; height: 626px; }
.bingo_section > div, .bingo_view > div { float: left; cursor: pointer; position: relative; }

.bingo_view { pointer-events:none; }
.treasure_section > div:nth-child(1) { width: 177px; height: 145px; }
.treasure_section > div:nth-child(2) { width: 211px; height: 145px; }
.treasure_section > div:nth-child(3) { width: 212px; height: 145px; }
.treasure_section > div:nth-child(4) { width: 190px; height: 145px; }
.treasure_section > div:nth-child(5) { width: 177px; height: 166px; }
.treasure_section > div:nth-child(6) { width: 211px; height: 166px; }
.treasure_section > div:nth-child(7) { width: 212px; height: 166px; }
.treasure_section > div:nth-child(8) { width: 190px; height: 166px; }
.treasure_section > div:nth-child(9) { width: 177px; height: 166px; }
.treasure_section > div:nth-child(10) { width: 211px; height: 166px; }
.treasure_section > div:nth-child(11) { width: 212px; height: 166px; }
.treasure_section > div:nth-child(12) { width: 190px; height: 166px; }
.treasure_section > div:nth-child(13) { width: 177px; height: 172px; }
.treasure_section > div:nth-child(14) { width: 211px; height: 172px; }
.treasure_section > div:nth-child(15) { width: 212px; height: 172px; }
.treasure_section > div:nth-child(16) { width: 190px; height: 172px; }

.bingo_view > div > span { position: absolute; display: block; background-size:100% 100%; }
.bingo_view > div:nth-child(4n + 1) > span { background-image: url(../images/treasure/box1.png); width:188px; height:192px; left:0; }
.bingo_view > div:nth-child(4n + 2) > span { background-image: url(../images/treasure/box2.png); width:169.5px; height:136.5px; left:66px; }
.bingo_view > div:nth-child(4n + 3) > span { background-image: url(../images/treasure/box3.png); width:188px; height:172.5px; left:54px; }
.bingo_view > div:nth-child(4n + 4) > span { background-image: url(../images/treasure/box4.png); width:198px; height:176px; left:27px; }
.bingo_view > div:nth-child(4n + 1).fail > span { background-image: url(../images/treasure/box1_fail.png); }
.bingo_view > div:nth-child(4n + 2).fail > span { background-image: url(../images/treasure/box2_fail.png); }
.bingo_view > div:nth-child(4n + 3).fail > span { background-image: url(../images/treasure/box3_fail.png); }
.bingo_view > div:nth-child(4n + 4).fail > span { background-image: url(../images/treasure/box4_fail.png); }
.bingo_view > div:nth-child(4n + 1).small > span { background-image: url(../images/treasure/box1_s.png); }
.bingo_view > div:nth-child(4n + 2).small > span { background-image: url(../images/treasure/box2_s.png); }
.bingo_view > div:nth-child(4n + 3).small > span { background-image: url(../images/treasure/box3_s.png); }
.bingo_view > div:nth-child(4n + 4).small > span { background-image: url(../images/treasure/box4_s.png); }
.bingo_view > div:nth-child(4n + 1).more > span { background-image: url(../images/treasure/box1_m.png); }
.bingo_view > div:nth-child(4n + 2).more > span { background-image: url(../images/treasure/box2_m.png); }
.bingo_view > div:nth-child(4n + 3).more > span { background-image: url(../images/treasure/box3_m.png); }
.bingo_view > div:nth-child(4n + 4).more > span { background-image: url(../images/treasure/box4_m.png); }
.bingo_view > div.boom1::after { content:""; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-image: url(../images/treasure/boom1.png); width:241.5px; height:230.5px; background-size:100% 100%; }
.bingo_view > div.boom2::after { content:""; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-image: url(../images/treasure/boom2.png); width:226px; height:207px; background-size:100% 100%; }

.bingo_view > div:nth-child(1) > span { top:-40px; }
.bingo_view > div:nth-child(2) > span { top:17px; }
.bingo_view > div:nth-child(3) > span { top:-23px; }
.bingo_view > div:nth-child(4) > span { top:-27px; }
.bingo_view > div:nth-child(5) > span { top:-18px; }
.bingo_view > div:nth-child(6) > span { top:39px; }
.bingo_view > div:nth-child(7) > span { top:-1px; }
.bingo_view > div:nth-child(8) > span { top:-5px; }
.bingo_view > div:nth-child(9) > span { top:-18px; }
.bingo_view > div:nth-child(10) > span { top:39px; }
.bingo_view > div:nth-child(11) > span { top:-1px; }
.bingo_view > div:nth-child(12) > span { top:-5px; }
.bingo_view > div:nth-child(13) > span { top:-18px; }
.bingo_view > div:nth-child(14) > span { top:39px; }
.bingo_view > div:nth-child(15) > span { top:-1px; }
.bingo_view > div:nth-child(16) > span { top:-3px; }

.bigScore { position: absolute; background-image: url(../images/treasure/point_pouch.png); background-size: 100% 100%; width:142px; height:137px; top:50%; left:50%; text-align: center; font-size:70px; line-height: 158px; transform: translate(-50%, -50%) scale(0); animation: bigScore 1.5s ease forwards; display: none; } 
.noClick { position: absolute; top:0; left:0; width:100%; height:100%; display: none; z-index: 999; }

@keyframes bigScore { 
    0% { transform: translate(-50%, -50%) scale(0); }
    100% { transform: translate(-50%, -50%) scale(2); }
}

/* questionBox */
.questionBox { position: absolute; top: 137px; left: 223px; width: 1470px; height: 178px; }
.questionNum { position: absolute; width: 105px; text-align: center; top: 49px; left: 1471px; font-size: 56px; }

.questionBox > p.question { width: 95%; font-size: 50px; line-height: 65px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.inputDiv { position: absolute; top: 256px; left: -12px; width: 750px; text-align: center; } 

/* input 스타일 */
.inputDiv input[type="text"] { width: 80px; height: 80px; text-align: center; font-size: 50px; border-radius: 20px; border: 5px solid #87D3E2; color: #000; vertical-align: middle; margin: 0 3px; box-shadow: 2px 2px 8px inset grey; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; }
.inputDiv.moreWord input[type="text"] { width: 70px; height: 70px; }
.inputDiv span { margin:0 15px; display: inline-block; }

/* 보너스 */
.bonusPop { position: absolute; top:0; left:0; z-index: 999; width:100%; height:100%; background-color: rgba(0,0,0,0.5); display: none; }
.bonusBox { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-size: 100% 100%; background-image: url(../images/treasure/bonus_bg.png); width:1166px; height:659px; }

.innerBox { position: absolute; pointer-events: none; top:228px; width:514px; opacity: 0.5; }
.innerBox p { text-align: center; font-size:35px; }
.bigTreasure { position: absolute; top:70px; left:50%; transform: translateX(-50%); background-image: url(../images/treasure/bonus.png); background-size:100% 100%; width:379.5px; height: 193px; }
.innerBox:nth-child(2) { left:49px; }
.innerBox:nth-child(4) { left:603px; text-align: center; }
.innerBox:nth-child(4) > div { width:163px; height:155px; display: inline-block; position: relative; margin-top: 20px; }
.animal { width:163px; height:155px; background-size: 100% 100%; }
.animal.drag1 { background-image: url(../images/treasure/drag1.png); }
.animal.drag2 { background-image: url(../images/treasure/drag2.png); }
.animal.drag3 { background-image: url(../images/treasure/drag3.png); }
.animal.drag4 { background-image: url(../images/treasure/drag4.png); }
.animal > span { position: absolute; background-image: url(../images/treasure/point_pouch.png); background-size: 100% 100%; width:64.5px; height:62px; bottom:0px; right:0px; text-align: center; font-size:30px; line-height: 70px; text-indent: 2px; }

.bonusCheck { position: absolute; background-size: 100% 100%; background-image: url(../images/treasure/check.png); width:75px; height:75px; cursor: pointer; top:123px; }
.bonusCheck.on { background-image: url(../images/treasure/check_H.png); }
.bonusCheck.select { background-image: url(../images/treasure/check_s.png); }
.bonusCheck:nth-child(1) { left:273px; }
.bonusCheck:nth-child(3) { left:831px; }

.bonusCheck.select + .innerBox { opacity: 1; pointer-events: auto; }

.changeScore.num2 > div:nth-child(3) { display: none; }
.changeScore.num2 > div:nth-child(4) { display: none; }
.changeScore.num3 > div:nth-child(4) { display: none; }

.smallCheck { position: absolute; background-size: 100% 100%; background-image: url(../images/treasure/check.png); width:50px; height:50px; cursor: pointer; top:155px; left:50%; transform: translateX(-50%); }
.smallCheck.on { background-image: url(../images/treasure/check_H.png); }
.smallCheck.select { background-image: url(../images/treasure/check_s.png); }

.okBtn { position: absolute; left:465px; top:536px; background-size: 100% 100%; background-image: url(../images/treasure/bonusOK.png); cursor: pointer; width:232.5px; height:118.5px; }
.okBtn.on { background-image: url(../images/treasure/bonusOK_H.png); }


/* 정답확인 버튼 */
.check { position: absolute; width: 198px; height: 129px; top:358px; left: 267px; background-image: url(../images/balloon/okbtn.png); cursor: pointer; display: none; background-size: 100% 100%; }
.check.on { background-image: url(../images/balloon/okbtn_H.png); }

/* Character_div */
.Character_div { position: absolute; top: 938px; left: 304px; }
.Character_div > span > span.score { position: absolute; background-image: url(../images/treasure/point_pouch.png); background-size: 100% 100%; width:71px; height:68.5px; top:-105px; left:49px; text-align: center; font-size:35px; line-height: 80px; text-indent: 2px; }

.Character_div > span { width:163px; height:155px; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-size: 100% 100%; }
.Character_div > span:nth-child(1) { left:0; }
.Character_div > span:nth-child(2) { left:183px; }
.Character_div > span:nth-child(3) { left:366px; }
.Character_div > span:nth-child(4) { left:549px; }

.Character_div > span.Char_drag1 { background-image: url(../images/treasure/drag1.png); }
.Character_div > span.Char_drag2 { background-image: url(../images/treasure/drag2.png); }
.Character_div > span.Char_drag3 { background-image: url(../images/treasure/drag3.png); }
.Character_div > span.Char_drag4 { background-image: url(../images/treasure/drag4.png); }
.Character_div > span.Char_drag1.select { background-image: url(../images/treasure/drag1_H.png); }
.Character_div > span.Char_drag2.select { background-image: url(../images/treasure/drag2_H.png); }
.Character_div > span.Char_drag3.select { background-image: url(../images/treasure/drag3_H.png); }
.Character_div > span.Char_drag4.select { background-image: url(../images/treasure/drag4_H.png); }

 /* 결과 창 */
.result { display: none; opacity: 1; transition: 0.5s; width:100%; height:100%; position: absolute; top:0; left:0; z-index: 50; background-color: rgba(0,0,0,0.5); }
.failed { display:none; background-image: url(../images/treasure/feedback.png); width:1190.5px; height:673px; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-size:100% 100%; }
.result .popupClose { top: 242px; left: 1514px; }

.result > div .Character { position: absolute; top: 377px; width: 300px; height: 288px; left: 770px; }
.result > div .Character > div { position: absolute; background-size:100% 100%; top: 50%; transform: translateY(-50%);}

.result > div .Character.check1 > div { width:295px; height:279px; left:0; }
.result > div .Character.check1 > div:nth-child(2) { display: none; }
.result > div .Character.check1 > div:nth-child(3) { display: none; }
.result > div .Character.check1 > div:nth-child(4) { display: none; }

.result > div .Character.check2 > div { width:295px; height:279px; }
.result > div .Character.check2 > div:nth-child(1) { left: -210px; }
.result > div .Character.check2 > div:nth-child(2) { left: 100px; }
.result > div .Character.check2 > div:nth-child(3) { display: none; }
.result > div .Character.check2 > div:nth-child(4) { display: none; }

.result > div .Character.check3 > div { width:246px; height:232.5px; }
.result > div .Character.check3 > div:nth-child(1) { left: 310px; }
.result > div .Character.check3 > div:nth-child(2) { left: -74px; }
.result > div .Character.check3 > div:nth-child(3) { left: 160px; }
.result > div .Character.check3 > div:nth-child(4) { display:none; }

.result > div .Character.check4 > div { width:196.5px; height:186px; }
.result > div .Character.check4 > div:nth-child(1) { left: -362px; }
.result > div .Character.check4 > div:nth-child(2) { left: -170px; }
.result > div .Character.check4 > div:nth-child(3) { left: 22px; }
.result > div .Character.check4 > div:nth-child(4) { left: 213px; }

.result > div .Character > div.finish_drag1 { background-image: url(../images/treasure/drag1.png); }
.result > div .Character> div.finish_drag2 { background-image: url(../images/treasure/drag2.png); }
.result > div .Character> div.finish_drag3 { background-image: url(../images/treasure/drag3.png); }
.result > div .Character> div.finish_drag4 { background-image: url(../images/treasure/drag4.png); }

.xml { display: none; }