@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/balloon/intro_bg.png); background-size: 1920px 1080px; }
.introPage div { position: absolute; }
.intro_title { background-image: url(../images/balloon/intro_title.png); width:1173.5px; height: 290px; background-size: 100% 100%; top:50px; left: 50%; transform: translateX(-50%); z-index: 1; display: none; }
.intro_text { width: 401px; top: 618px; left: 527px; display: none; text-align: center; font-size: 40px; line-height: 70px; }
.intro_start { background-image: url(../images/balloon/introStart.png); width:314px; height: 152px; background-size: 100% 100%; top:852px; left: 1107px; display: none; cursor: pointer; }
.intro_start.on { background-image: url(../images/balloon/introStart_H.png); }

/* 스타트 페이지 */
.startPage { width:100%; height:100%; position: absolute; top:0; left:0; background-image: url(../images/balloon/main_bg.png); background-size: 1920px 1080px; display: none; }
.startTitle { position: absolute; background-image: url(../images/balloon/intro_title.png); width:1173.5px; height: 290px; background-size: 100% 100%; top:35px; left: 50%; transform: translateX(-50%); }

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

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

/* 모둠 정하기 */
.personBg { width:1377.5px; height: 537px; position: absolute; top:375px; 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: 98px; left: 818px; width: 520.5px; height: 365px; }
.random_btn { position: absolute; top: -70px; left: 429px; width: 114.5px; height: 62px; cursor: pointer; background-image: url(../images/balloon/random.png); background-size: 100% 100%; }
.random_btn.on { background-image: url(../images/balloon/random_H.png); }
.boxBg { background-size:100% 100%; width:226px; height:178.5px; position: absolute; pointer-events: none; }
.boxBg1 { background-image:url(../images/balloon/charBg1.png); top:0; left:0; }
.boxBg2 { background-image:url(../images/balloon/charBg2.png); top:0; right:0; }
.boxBg3 { background-image:url(../images/balloon/charBg3.png); bottom:0; left:0; }
.boxBg4 { background-image:url(../images/balloon/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:0; 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/balloon/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/balloon/question_btn.png); }
.modified1.on { background-image: url(../images/balloon/question_btn_H.png); }
.modified2 { background-image: url(../images/balloon/gamehow_btn.png); }
.modified2.on { background-image: url(../images/balloon/gamehow_btn_H.png); }

.howPlayPopup .text { position: absolute; top:300px; 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/balloon/num1.png); }
.howPlayPopup .text > p:nth-child(2)::after { background-image: url(../images/balloon/num2.png); }
.howPlayPopup .text > p:nth-child(3)::after { background-image: url(../images/balloon/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/balloon/close.png); background-size: 100% 100%; }
.popupClose.on { background-image: url(../images/balloon/close_H.png); }

/* 메인 페이지 */
.quizPage { width:100%; height:100%; position: absolute; top:0; left:0; display: none; background-size:100% 100%; background-image: url(../images/balloon/game_bg.png); }
.home { position: absolute; cursor: pointer; left:20px; top:20px; width:75px; height:75px;  z-index: 51; background-image: url(../images/balloon/home.png); background-size: 100% 100%; }
.home.on { background-image: url(../images/balloon/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/balloon/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:132px; left:1510px; cursor: pointer; background-image: url(../images/balloon/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: 320px; left: 1032px; width: 725px; height: 626px; }
.bingo_section > div, .bingo_view > div { float: left; cursor: pointer; position: relative; width:119.5px; height: 137px; margin:0 35px; margin-bottom:21px; }
.bingo_section > div:nth-child(4n + 1), .bingo_view > div:nth-child(4n + 1) { margin-left: 0; }
.bingo_section > div:nth-child(4n), .bingo_view > div:nth-child(4n) { margin-right: 0; }
.bingo_section > div:nth-child(n + 13), .bingo_view > div:nth-child(n + 13) { margin-top: -6px; }

.bingo_view { pointer-events:none; }

.bingo_view > div > span { position: absolute; display: block; background-size:100% 100%; width:119.5px; height: 137px; }
.bingo_view > div > span > span { position: absolute; display: block; top: 27px; left: 24px; width: 60px; height: 60px; font-family: 'BMJUA'; border: 5px solid rgba(0,0,0,0.3); text-align: center; font-size: 42px; background-color: #fff; border-radius: 50%; line-height: 67px; -webkit-background-clip: padding-box; background-clip: padding-box; }
.bingo_view > div:nth-child(4n + 1) > span { background-image: url(../images/balloon/box1.png); }
.bingo_view > div:nth-child(4n + 2) > span { background-image: url(../images/balloon/box2.png); }
.bingo_view > div:nth-child(4n + 3) > span { background-image: url(../images/balloon/box3.png); }
.bingo_view > div:nth-child(4n + 4) > span { background-image: url(../images/balloon/box4.png); }

.bingo_view > div.dart_f > span { background-size:88.5px 130.5px; background-position: 50% 50%; background-repeat: no-repeat; }
.bingo_view > div.flower_f > span::after { content:""; position: absolute; left:50%; transform: translateX(-50%); background-size: 100% 100%; top:-100px; background-image: url(../images/balloon/flower.png); width:515.5px; height:214.5px; }
.bingo_view > div.dart_f > span > span { display: none; }
.bingo_view > div:nth-child(4n + 1).dart_f > span { background-image: url(../images/balloon/box1_fail.png); }
.bingo_view > div:nth-child(4n + 2).dart_f > span { background-image: url(../images/balloon/box2_fail.png); }
.bingo_view > div:nth-child(4n + 3).dart_f > span { background-image: url(../images/balloon/box3_fail.png); }
.bingo_view > div:nth-child(4n + 4).dart_f > span { background-image: url(../images/balloon/box4_fail.png); }

.bingo_view > div.correct > span > span::after { content:""; display: block; position: absolute; background-size:100% 100%; background-image: url(../images/balloon/dart.png); width:96px; height:86px; animation: dart 0.4s linear forwards; z-index: 1; transform: rotate(90deg); top:-30px; left:210px; }
.bingo_view > div.fail > span > span::after { content:""; display: block; position: absolute; background-size:100% 100%; background-image: url(../images/balloon/dart.png); width:96px; height:86px; animation: dart_fail 0.4s linear forwards; z-index: 1; transform: rotate(90deg); top:-30px; left:210px; }

@keyframes dart { 
    0% { transform: rotate(90deg); top:-30px; left:300px; }
    50% { transform: rotate(45deg); top:-70px; left:165px; }
    100% { transform: rotate(0deg); top:-50px; left:30px; }
}

@keyframes dart_fail { 
    0% { transform: rotate(90deg); top:-30px; left:300px; }
    50% { transform: rotate(45deg); top:-70px; left:165px; }
    100% { transform: rotate(20deg); top:50px; left:70px; }
}

.bingo_view > div.boom1::after { content:""; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-image: url(../images/balloon/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/balloon/boom2.png); width:226px; height:207px; background-size:100% 100%; }

.bigScore { position: absolute; background-image: url(../images/balloon/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: 94px; left: 247px; width: 1409px; height: 178px; }
.questionNum { position: absolute; width: 105px; text-align: center; top: 55px; left: 1410px; font-size: 56px; }

.questionBox > p.question { width: 95%; font-size: 50px; line-height: 65px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); letter-spacing: -1px; }
.inputDiv { position: absolute; top: 256px; left: -69px; 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 span { margin:0 15px; display: inline-block; font-size: 50px; vertical-align: middle; }

/* 정답확인 버튼 */
.check { position: absolute; width: 198px; height: 129px; top:363px; left: 210px; 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: 864px; left: 284px; }
.Character_div > span > span.score { position: absolute; background-image: url(../images/balloon/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/balloon/drag1.png); }
.Character_div > span.Char_drag2 { background-image: url(../images/balloon/drag2.png); }
.Character_div > span.Char_drag3 { background-image: url(../images/balloon/drag3.png); }
.Character_div > span.Char_drag4 { background-image: url(../images/balloon/drag4.png); }
.Character_div > span.Char_drag1.select { background-image: url(../images/balloon/drag1_H.png); }
.Character_div > span.Char_drag2.select { background-image: url(../images/balloon/drag2_H.png); }
.Character_div > span.Char_drag3.select { background-image: url(../images/balloon/drag3_H.png); }
.Character_div > span.Char_drag4.select { background-image: url(../images/balloon/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/balloon/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/balloon/drag1.png); }
.result > div .Character> div.finish_drag2 { background-image: url(../images/balloon/drag2.png); }
.result > div .Character> div.finish_drag3 { background-image: url(../images/balloon/drag3.png); }
.result > div .Character> div.finish_drag4 { background-image: url(../images/balloon/drag4.png); }

.xml { display: none; }