@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/bingo/bg.png); background-size: 1920px 1080px; }
body { background-color: #FDF4DE; }

/* 인트로 페이지 */
.introPage { width:100%; height:100%; position: absolute; top:0; left:0; }
.introPage div { position: absolute; }
.clock { background-image: url(../images/bingo/clock.png); width:794px; height: 862.5px; background-size: 100% 100%; top:50%; left: 50%; transform: translate(-50%, -50%); animation: clock 1s 4s linear forwards; }
.title { background-image: url(../images/bingo/intro_title.png); width:0px; height: 580.5px; background-size: 768.5px 580.5px; top:167px; left: 0px; animation: titleWidth 1s 2s linear forwards; }
.pencil { background-image: url(../images/bingo/pencil.png); width:284.5px; height: 276px; background-size: 100% 100%; top:20px; left: 0px; animation: pencil 1s 2s linear forwards; }

@keyframes titleWidth {
    0% { width:0; }
    100% { width: 768.5px; }
}
@keyframes pencil {
    0% { left:0; }
    100% { left: 700px; }
}
@keyframes clock {
    0% { transform: translate(-50%, -50%); }
    20% { transform: translate(-50%, -50%) rotate(15deg); }
    40% { transform: translate(-50%, -50%) rotate(-15deg); }
    60% { transform: translate(-50%, -50%) rotate(15deg); }
    80% { transform: translate(-50%, -50%) rotate(-15deg); }
    100% { transform: translate(-50%, -50%); }
}

/* 스타트 페이지 */
.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/bingo/title.png); width:1277px; height:222px; background-size: 100% 100%; }

/* 단원 고르기 */
.lesson { position: absolute; top:50px; left:0px; width:210.5px; height:65px; background-size: 100% 100%; cursor: pointer; background-image: url(../images/bingo/lessonM.png); }
.lesson > span { line-height: 65px; font-size: 22px; color: #fff; margin-left: 45px; }

.lessonChoose { position: absolute; top: 100%; left: 0; display: none; z-index: 1; }
.lesson .lessonChoose > div { cursor: pointer; width:210.5px; height:65px; background-size: 100% 100%; background-image: url(../images/bingo/lesson.png); line-height: 65px; font-size: 22px; color: #fff; text-indent: 60px; position: relative; }
.lesson .lessonChoose > div.choose, .lesson .lessonChoose > div.on { background-image: url(../images/bingo/lesson_H.png); }
.lessonChoose > div a { display: block; width:100%; height:100%; position: absolute; top:0; left:0; }

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

.person { position: absolute; top: 284px; left: 202px; width: 438px; }
.person > div { background-image: url(../images/bingo/modum.png); width:286px; height: 114px; line-height: 114px; background-size:100% 100%; cursor: pointer; margin:auto; margin-bottom: 20px; text-align: center; font-size: 60px; color:#676662; } 
.person > div:last-of-type { margin-bottom: 0; }
.person > div.select, .person > div.on { background-image: url(../images/bingo/modum_H.png); color:#fff; }

.orderBox { position: absolute; top: 244px; left: 800px; width: 624.5px; height: 438px; }
.random_btn { position: absolute; top: -114px; left: 402px; width: 130px; height: 70.5px; cursor: pointer; background-image: url(../images/bingo/random.png); background-size: 100% 100%; }
.random_btn.on { background-image: url(../images/bingo/random_H.png); }
.boxBg { background-size:100% 100%; width:270.5px; height:214.5px; position: absolute; pointer-events: none; }
.boxBg1 { background-image:url(../images/bingo/charBg1.png); top:0; left:0; }
.boxBg2 { background-image:url(../images/bingo/charBg2.png); top:0; right:0; }
.boxBg3 { background-image:url(../images/bingo/charBg3.png); bottom:0; left:0; }
.boxBg4 { background-image:url(../images/bingo/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:196.5px; height:186px; }
.drag.noSelect { opacity: 0.3; pointer-events: none; display: block; }
.target { position: absolute; width:196.5px; height:186px; }
.target1, .drag1 { top: 29px; left: 60px;}
.target2, .drag2 { top: 29px; left: 414px;}
.target3, .drag3 { top: 252px; left: 60px;}
.target4, .drag4 { top: 252px; left: 414px;}

/* 하단 버튼 */
.howPlayBtn { position: absolute; cursor: pointer; left:193px; top:895px; width:292px; height:159px; background-image: url(../images/bingo/howToPlay.png); background-size:100% 100%; }
.howPlayBtn.on { background-image: url(../images/bingo/howToPlay_H.png); }
.startBtn { position: absolute; cursor: pointer; left:1434px; top:895px; width:291px; height:159px; background-image: url(../images/bingo/start.png); background-size:100% 100%; }
.startBtn.on { background-image: url(../images/bingo/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:1284px; height:697px; top:50%; left:50%; transform: translate(-50%, -50%); position: absolute; background-image: url(../images/bingo/howToPlay_bg.png); background-size: 100% 100%; }
.howPlayPopup > div > span { color: #fff; position: absolute; display: block; width: 205px; text-align: center; top: 32px; left: 192px; font-size: 30px; letter-spacing: -0.5px; }
.howPlayPopup > div.play1 > span { top: 31px; font-size: 34px; }

.modified { position: absolute; cursor: pointer; left:970px; top:575px; width:234.5px; height:84px; background-size: 100% 100%; } 
.modified1 { background-image: url(../images/bingo/howPop2.png); }
.modified1.on { background-image: url(../images/bingo/howPop2_H.png); }
.modified2 { background-image: url(../images/bingo/howPop.png); }
.modified2.on { background-image: url(../images/bingo/howPop_H.png); }

.howPlayPopup .text { position: absolute; top:170px; left:170px; width:100%; }
.howPlayPopup .text > p { margin-bottom: 75px; position: relative; font-size: 32px; width: 940px; line-height: 45px; }
.howPlayPopup .text > p:last-child { margin-bottom: 0px; }
.howPlayPopup .text > p::after { content:""; display: block; position: absolute; width:55px; height:55px; background-size:100% 100%; top:-7px; left:-75px; }
.howPlayPopup .text > p:nth-child(1)::after { background-image: url(../images/bingo/num1.png); }
.howPlayPopup .text > p:nth-child(2)::after { background-image: url(../images/bingo/num2.png); }
.howPlayPopup .text > p:nth-child(3)::after { background-image: url(../images/bingo/num3.png); }

.howPlayPopup .play2 .text { top: 134px; 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: 900px; }

.play2 { display: none; }

.popupClose { position: absolute; top:250px; left:1510px; width:54px; height:54px; cursor: pointer; background-image: url(../images/bingo/close.png); background-size: 100% 100%; }
.popupClose.on { background-image: url(../images/bingo/close_H.png); }

/* 빙고 페이지 */
.quizPage { width:100%; height:100%; position: absolute; top:0; left:0; display: none; }
.quizBg { background-image: url(../images/bingo/bingo_bg.png); width:1693px; height:888.5px; 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:63px; height:64.5px;  z-index: 51; background-image: url(../images/bingo/home.png); background-size: 100% 100%; }
.home.on { background-image: url(../images/bingo/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/bingo/alert.png); background-size: 100% 100%; width:588px; height:181px; }

/* bingo section */
.bingo_section { position: absolute; top: 226px; left: 173px; width: 552px; height: 541px; }
.bingo_section > div { width: 132px; height: 130px; float: left; cursor: pointer; margin: 3px; }

.bingo_view { position: absolute; top: 226px; left: 173px; width: 552px; height: 541px; pointer-events:none; }
.bingo_view > div { width: 132px; height: 130px; position: absolute; cursor: pointer; border-radius: 20px; color:transparent; }
.bingo_view > div:nth-child(1) { top:3px; left:3px; }
.bingo_view > div:nth-child(2) { top:3px; left:142px; }
.bingo_view > div:nth-child(3) { top:3px; left:281px; }
.bingo_view > div:nth-child(4) { top:3px; left:420px; }
.bingo_view > div:nth-child(5) { top:139px; left:3px; }
.bingo_view > div:nth-child(6) { top:139px; left:142px; }
.bingo_view > div:nth-child(7) { top:139px; left:281px; }
.bingo_view > div:nth-child(8) { top:139px; left:420px; }
.bingo_view > div:nth-child(9) { top:275px; left:3px; }
.bingo_view > div:nth-child(10) { top:275px; left:142px; }
.bingo_view > div:nth-child(11) { top:275px; left:281px; }
.bingo_view > div:nth-child(12) { top:275px; left:420px; }
.bingo_view > div:nth-child(13) { top:411px; left:3px; }
.bingo_view > div:nth-child(14) { top:411px; left:142px; }
.bingo_view > div:nth-child(15) { top:411px; left:281px; }
.bingo_view > div:nth-child(16) { top:411px; left:420px; }

.bingo_view > div.select { margin-top: -7px; background-color: #A975E0; box-shadow: 0 7px 0 #9260C6; color:#fff; font-family: 'BMJUA'; text-align: center; line-height: 130px; font-size:70px; }
.bingo_view > div.select.boom { color:transparent; background-color:#999999; box-shadow: 0 7px 0 #666666; }
.bingo_view > div.select.Turn0 { color:transparent; background-color:#83CD82; box-shadow: 0 7px 0 #6FB16E; }
.bingo_view > div.select.Turn1 { color:transparent; background-color:#F77A78; box-shadow: 0 7px 0 #D26462; }
.bingo_view > div.select.Turn2 { color:transparent; background-color:#5881DB; box-shadow: 0 7px 0 #4366B4; }
.bingo_view > div.select.Turn3 { color:transparent; background-color:#E579C0; box-shadow: 0 7px 0 #C45A9F; }

.bingo_view > div.select.Turn0.bingoClear { box-shadow: 0 7px 0 #6FB16E, 10px 17px 10px yellow, 10px -10px 10px yellow, -10px -10px 10px yellow, -10px 17px 10px yellow; z-index: 1; }
.bingo_view > div.select.Turn1.bingoClear { box-shadow: 0 7px 0 #D26462, 10px 17px 10px yellow, 10px -10px 10px yellow, -10px -10px 10px yellow, -10px 17px 10px yellow; z-index: 1; }
.bingo_view > div.select.Turn2.bingoClear { box-shadow: 0 7px 0 #4366B4, 10px 17px 10px yellow, 10px -10px 10px yellow, -10px -10px 10px yellow, -10px 17px 10px yellow; z-index: 1; }
.bingo_view > div.select.Turn3.bingoClear { box-shadow: 0 7px 0 #C45A9F, 10px 17px 10px yellow, 10px -10px 10px yellow, -10px -10px 10px yellow, -10px 17px 10px yellow; z-index: 1; }

.bingo_view > div > span { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: block; background-size:100% 100%; }
.bingo_view > div.boom > span { background-image: url(../images/bingo/boom.png); width:173.5px; height:167px; }
.bingo_view > div.bonus > span::after { content:""; display: block; background-image: url(../images/bingo/bonus.png); width:160.5px; height:52px; left:50%; transform: translateX(-50%); top:-20px; background-size: 100% 100%; position: absolute; }

.bingo_view > div.Turn_drag1 > span { background-image: url(../images/bingo/drag1.png); width:118px; height:111.5px; }
.bingo_view > div.Turn_drag2 > span { background-image: url(../images/bingo/drag2.png); width:118px; height:111.5px; }
.bingo_view > div.Turn_drag3 > span { background-image: url(../images/bingo/drag3.png); width:118px; height:111.5px; }
.bingo_view > div.Turn_drag4 > span { background-image: url(../images/bingo/drag4.png); width:118px; height:111.5px; }

/* questionBox */
.questionBox { position: absolute; top: 162px; left: 876px; width: 848px; height: 723px; padding: 40px; }
.questionNum { position: absolute; width: 113px; font-size: 80px; text-align: center; top: -57px; left: 85px; font-size:80px; font-family: 'BMJUA'; color:#fff; }
.timer { display: none; position:absolute; width:125px; height: 152.5px; line-height: 189px; font-size: 80px; text-align: center; top:-75px; right:-25px; cursor: pointer; background-image: url(../images/bingo/timer.png); background-size:100% 100%; font-family: 'BMJUA'; }
.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); }
}

.questionBox > p.question { width: 90%; margin: auto; margin-top: 60px; font-size: 50px; line-height: 80px; text-align: center; }
.questionBox > p.question.noCenter { text-align: left; }
.inputDiv { position: absolute; top: 471px; left: 50%; transform: translateX(-50%); width: 100%;
text-align: center; }

/* input 스타일 */
.inputDiv input[type="text"] { width: 80px; height: 120px; text-align: center; font-size: 50px; background-color: #B3DEE5; border-radius: 10px; border:2px solid #BDDADE; color: #000; vertical-align: middle; margin:0 3px; }
.inputDiv span { margin:0 15px; display: inline-block; font-size: 50px; vertical-align: middle; }

/* 정답확인 버튼 */
.check { position: absolute; width: 170.5px; height: 81px; bottom: 30px; left: 50%; transform: translateX(-50%); background-image: url(../images/bingo/answer.png); cursor: pointer; display: none; background-size: 100% 100%; }
.check.on { background-image: url(../images/bingo/answer_H.png); }
.check.correct { background-image: url(../images/bingo/answer_O.png); pointer-events: none; }
.check.fail { background-image: url(../images/bingo/answer_X.png); pointer-events: none; }

.answerChar { position: absolute; width: 132px; height: 130px; top:50%; left:50%; transform: translate(-50%, -50%) scale(0); opacity: 0; transition:transform 1s ease-in; pointer-events: none; } 
.noClick { position: absolute; top:0; left:0; width:100%; height:100%; display: none; z-index: 999; }
.answerChar.bonus { transform: translate(-50%, -50%) scale(2); opacity: 1; }
.answerChar.Turn_drag1 { transform: translate(-50%, -50%) scale(2); opacity: 1; }
.answerChar.Turn_drag2 { transform: translate(-50%, -50%) scale(2); opacity: 1; }
.answerChar.Turn_drag3 { transform: translate(-50%, -50%) scale(2); opacity: 1; }
.answerChar.Turn_drag4 { transform: translate(-50%, -50%) scale(2); opacity: 1; }
.answerChar.boom { transform: translate(-50%, -50%) scale(2); opacity: 1; }

.answerChar > span { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); display: block; background-size:100% 100%; }
.answerChar.Turn_drag1 > span { background-image: url(../images/bingo/drag1.png); width:118px; height:111.5px; }
.answerChar.Turn_drag2 > span { background-image: url(../images/bingo/drag2.png); width:118px; height:111.5px; }
.answerChar.Turn_drag3 > span { background-image: url(../images/bingo/drag3.png); width:118px; height:111.5px; }
.answerChar.Turn_drag4 > span { background-image: url(../images/bingo/drag4.png); width:118px; height:111.5px; }
.answerChar.boom > span { background-image: url(../images/bingo/boom.png); width:173.5px; height:167px; }
.answerChar.bonus > span::after { content:""; display: block; background-image: url(../images/bingo/bonus.png); width:160.5px; height:52px; left:50%; transform: translateX(-50%); top:-20px; background-size: 100% 100%; position: absolute; }


/* Character_div */
.Character_div { position: absolute; top: 799px; left: 160px; }
.Character_div > span { position: absolute; top:0; width:135px; height:135px; border-radius: 50%; }
.Character_div > span.select { top:-7px; }
.Character_div > span:nth-child(1) { left:0; }
.Character_div > span:nth-child(2) { left:148px; }
.Character_div > span:nth-child(3) { left:296px; }
.Character_div > span:nth-child(4) { left:444px; }

.Character_div > span.Char_drag1::after { width:100%; height:100%; content:""; display: block; background-color:rgba(0,0,0,0.5); position: absolute; top:0; left:0; border-radius: 50%; }
.Character_div > span.Char_drag2::after { width:100%; height:100%; content:""; display: block; background-color:rgba(0,0,0,0.5); position: absolute; top:0; left:0; border-radius: 50%; }
.Character_div > span.Char_drag3::after { width:100%; height:100%; content:""; display: block; background-color:rgba(0,0,0,0.5); position: absolute; top:0; left:0; border-radius: 50%; }
.Character_div > span.Char_drag4::after { width:100%; height:100%; content:""; display: block; background-color:rgba(0,0,0,0.5); position: absolute; top:0; left:0; border-radius: 50%; }
.Character_div > span.select::after { display: none; }

.Character_div > span:nth-child(1) { background-color:#83CD82; }
.Character_div > span:nth-child(2) { background-color:#F77A78; }
.Character_div > span:nth-child(3) { background-color:#5881DB; }
.Character_div > span:nth-child(4) { background-color:#E579C0; }
.Character_div > span:nth-child(1).select { box-shadow: 0 7px 0 #6FB16E; }
.Character_div > span:nth-child(2).select { box-shadow: 0 7px 0 #D26462; }
.Character_div > span:nth-child(3).select { box-shadow: 0 7px 0 #4366B4; }
.Character_div > span:nth-child(4).select { box-shadow: 0 7px 0 #C45A9F; }
.Character_div > span > span { width:118px; height:111.5px; display: block; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-size: 100% 100%; }
.Character_div > span.Char_drag1 > span { background-image: url(../images/bingo/drag1.png); }
.Character_div > span.Char_drag2 > span { background-image: url(../images/bingo/drag2.png); }
.Character_div > span.Char_drag3 > span { background-image: url(../images/bingo/drag3.png); }
.Character_div > span.Char_drag4 > span { background-image: url(../images/bingo/drag4.png); }

 /* 결과 창 */
.result { display: none; transition: 0.5s; width:100%; height:100%; position: absolute; top:0; left:0; z-index: 50; background-color: rgba(0,0,0,0.5); }
.result .popupClose { top: 30px; right:30px; left:auto; }
.finish, .failed { display:none; background-image: url(../images/bingo/result.png); width:653px; height:492px; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); background-size: 100% 100%; } 

.prize { position: absolute; width:224px; height:242.5px; background-size: 100% 100%; top:257px; left:532px; }
.finish .prize { background-image: url(../images/bingo/great.png); }
.failed .prize { background-image: url(../images/bingo/good.png); }

.result > div > p { position: absolute; top: 365px; left: 50%; transform: translateX(-50%); font-size: 32px; line-height: 44px; text-align: center; width: 100%; }

.result > div.failed > p { font-size: 24px; line-height: 37px; top:373px; }

.result > div .Character { position: absolute; top: 120px; width: 246.5px; left: 50%; transform: translateX(-50%); }
.result > div .Character > div { position: absolute; background-size:100% 100%;}

.result > div .Character.check1 > div { width:100%; height:100%; top:0; 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.check2 > div { width:100%; height:100%; top:0; }
.result > div .Character.check2 > div:nth-child(1) { left: -30%; }
.result > div .Character.check2 > div:nth-child(2) { right: -30%; }
.result > div .Character.check2 > div:nth-child(3) { display: none; }

.result > div .Character.check3 > div { width:100%; height:100%; top:0; }
.result > div .Character.check3 > div:nth-child(1) { left: -70%; }
.result > div .Character.check3 > div:nth-child(2) { left:0; }
.result > div .Character.check3 > div:nth-child(3) { right: -70%; }

.result > div .Character > div.finish_drag1 { background-image: url(../images/bingo/result1.png); width:246.5px; height:226px; }
.result > div .Character> div.finish_drag2 { background-image: url(../images/bingo/result2.png); width:246.5px; height:226px; }
.result > div .Character> div.finish_drag3 { background-image: url(../images/bingo/result3.png); width:246.5px; height:226px; }
.result > div .Character> div.finish_drag4 { background-image: url(../images/bingo/result4.png); width:246.5px; height:226px; }

.xml { display: none; }