@charset "utf-8";
@font-face {
  font-family: 'NanumSquareRoundEB';
  src: url('../font/NanumSquareRoundEB.woff') format('woff');
}
@font-face {
  font-family: "CookieRunBold";
  src: url("../font/CookieRunBold.woff") format("woff");
}
@font-face {
  font-family: "CookieRunRegular";
  src: url("../font/CookieRunRegular.woff") format("woff");
}

#mainFrame{width: inherit; height: inherit; overflow-x: hidden;}
.metabus{width: 1280px; height: 720px; position: relative;}

/************************* 상단 게이지 바 *************************/
#container{width: 100%; height: 50px; display: block; position: absolute;top: 0px; background: none;}
.gageBar-wrap{display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100px; padding: 30px 50px; background-image: linear-gradient(to bottom, #999, transparent);}
.gageBar-wrap > div{width: 100%; height: 44px; position: relative;}
.gageBar-wrap > .txt-vs{order: 0; width: 115px; height: 80px; margin: 0 15px; background: url(../images/metabus/gage_vs.PNG) center / contain no-repeat; filter: drop-shadow(0 5px 0 rgba(0,0,0,0.1));}
.gageBar-wrap > div > .gage-bg{width: 100%; height: 100%; background: center / contain no-repeat; position: relative; filter: drop-shadow(0 5px 0 rgba(0,0,0,0.1));}
.gageBar-wrap > div > .gage-bg > .gage-inner{display: flex; align-items: center; overflow: hidden; position: absolute; top: 50%; transform: translateY(-50%); width: 86%; height: 29px; background-color: gray; border-radius: 50px;}
#gageUp3::before{content: ''; width: 100%; height: 29px; background: url(../images/metabus/green_middle.PNG) right center / cover no-repeat; border-radius: 50px;}
#gageUp1::before{content: ''; margin-left: auto; width: 100%; height: 30px; background: url(../images/metabus/pink_middle.PNG) left center / cover no-repeat; border-radius: 50px;}
.gageBar-wrap > div > p.gage-txt{position: absolute; top: 10px;}
.gageBar-wrap > .gage-left{order: -1;}
.gageBar-wrap > .gage-left > .gage-bg{background-image: url(../images/metabus/gagebar_left.PNG);}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner{left: 8px;}
.gageBar-wrap > .gage-left > p.gage-txt{right: 24px; width: 25px; height: 25px; background: url(../images/metabus/gage_txt00.PNG) center / contain no-repeat;}
.gageBar-wrap > .gage-right{order: 1;}
.gageBar-wrap > .gage-right > .gage-bg{background-image: url(../images/metabus/gagebar_right.PNG);}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner{right: 11px;}
.gageBar-wrap > .gage-right > p.gage-txt{left: 10px; width: 50px; height: 27px; background: url(../images/metabus/gage_txt01.PNG) center / contain no-repeat;}

/*.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp1::before{animation: gageUp1 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp2::before{animation: gageUp2 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp3::before{animation: gageUp3 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp4::before{animation: gageUp4 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp5::before{animation: gageUp5 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp6::before{animation: gageUp6 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp7::before{animation: gageUp7 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp8::before{animation: gageUp8 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-left > .gage-bg > .gage-inner.gageUp9::before{animation: gageUp9 1s linear forwards; transform-origin: left;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp1::before{animation: gageUp1 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp2::before{animation: gageUp2 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp3::before{animation: gageUp3 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp4::before{animation: gageUp4 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp5::before{animation: gageUp5 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp6::before{animation: gageUp6 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp7::before{animation: gageUp7 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp8::before{animation: gageUp8 1s linear forwards; transform-origin: right;}
.gageBar-wrap > .gage-right > .gage-bg > .gage-inner.gageUp9::before{animation: gageUp9 1s linear forwards; transform-origin: right;}*/


/************************* 팝업 *************************/
.popup {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.7); }
.popup.ON{display: block;}
.popup .popupCont {width: calc(100% - 80px); height: calc(100% - 145px); padding: 50px 60px 40px 80px; position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); background: url(../images/metabus/game-pop-bg-stroke.png) center / contain no-repeat;} 
.closeBtn {position: absolute; top: 2px; right: 18px; width: 50px; height: 55px; background: url(../images/metabus/close-btn00.png) center top / 50px 110px no-repeat; z-index: 1;}
.closeBtn:hover{background-position: 0 bottom;}
.popup .popupCont > div{width: 100%; height: 455px; display: block; position: relative;}
/* .popup .popupCont > div.ON{display: block;} */

/************************* quizPopup **************************/
/*.quizPopup .popupCont[data-quiz-idx="2"] .quizBox2,
.quizPopup .popupCont[data-quiz-idx="3"] .quizBox3{display: block;}*/

/* 버튼 */
.answerBtn {position: absolute; top: 50%; right: 5px; transform: translateY(-50%); width: 160px; height: 60px; background: url(../images/metabus/answer-btn.png) top / 160px 120px no-repeat;}
.answerBtn:hover{background-position: 0 bottom;}
.soundBtn { width: calc(141px / 2); height: calc(282px /4); background: url(../images/btn_snd02_tem.png) no-repeat 0 top / cover;     vertical-align: middle; position: relative; bottom: 8px;}
.soundBtn:hover {background-position: 0 bottom;}
.soundBtn.isPlaying {background-position: 0 bottom; animation: scale .5s linear infinite;}

/************************* quizAlert *************************/
.quizAlert{display: flex; justify-content: center; align-items: center; background-color: transparent;}
.quizAlert > div {position: absolute; top: 120px; border-radius: 60px; width: 1100px; height: 420px; background-color: rgba(255,255,255,0.8);}
.quizAlert[data-alert-type="correct"] .correct{opacity: 1; visibility: visible; animation: showAlert .3s ease-in-out forwards; -webkit-animation: showAlert .3s ease-in-out forwards; animation-duration: 2.5s;}
.quizAlert[data-alert-type="correct"] .correct .coin{}
.quizAlert[data-alert-type="incorrect"] .incorrect{opacity: 1; visibility: visible; animation: showAlert .3s ease-in-out forwards; -webkit-animation: showAlert .3s ease-in-out forwards; animation-duration: 2s;}
.quizAlert .incorrect .hint{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.quizAlert .incorrect .hint > .img-charac{order: 1; width: 310px; height: 200px;background: url(../images/metabus/charac00.png) center / cover no-repeat;}
.quizAlert .incorrect .hint > p{text-shadow: 0 1px 2px #a7895f; font-family: 'CookieRunBold'; font-size: 32px; display: flex; justify-content: center; align-items: center; padding-bottom: 20px; width: 420px; height: 100px; background: url(../images/metabus/balloon00.png) center / contain no-repeat;}
.quizAlert .correct > div{ position: absolute; top: 110px; left: 50%; transform: translateX(-50%); background: center / contain no-repeat;}
.quizAlert .correct > div::after{content: ''; animation: shine .8s ease-in-out infinite; -webkit-animation: shine .8s ease-in-out infinite; position: absolute; width: 110px; height: 110px; background: url(../images/metabus/shine00.png) center / contain no-repeat;}
/* 코인 */
.quizAlert .correct .coin{animation: showCoin 1s ease-in-out forwards; -webkit-animation: showCoin 1s ease-in-out forwards; width: 220px; height: 220px; background-image: url(../images/metabus/coin.png); border-radius: 100%;}
.quizAlert .correct .coin::after{ top: 10px; left: 50%; transform: translateX(-50%);  }
/* 진주 */
.quizAlert .correct .pearl{animation: showPearl 1s ease-in-out forwards; -webkit-animation: showPearl 1s ease-in-out forwards; top: 80px; width: 200px; height: 270px; background-image: url(../images/metabus/pearl.png);}
.quizAlert .correct .pearl::after{ top: 70px; left: 55%; transform: translateX(-50%); }
/* 별 */
.quizAlert .correct .star{animation: showCoin 1s ease-in-out forwards; -webkit-animation: showCoin 1s ease-in-out forwards; width: 215px; height: 225px; background-image: url(../images/metabus/star.png);}
.quizAlert .correct .star::after{ top: 10px; left: 40%; transform: translateX(-50%); width: 80px; }
/* 열쇠 */
.quizAlert .correct .key{animation: showKey 1s ease-in-out forwards; -webkit-animation: showKey 1s ease-in-out forwards; width: 220px; height: 220px; background-image: url(../images/metabus/key.png);}
.quizAlert .correct .key::after{ top: 25px; left: 85%; transform: translateX(-50%); }

/************************* itemPopup *************************/
.popup.itemPopup .popupCont {padding: 40px;}
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1,
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-2,
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-3,
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-4,
.popup.itemPopup .popupCont[data-item-type="correct"] .itemBox3,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .itemBox2{display: block;}
.popup.itemPopup .popupCont .itemBox{}
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox::after{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 900px; height: 200px; background: url(../images/metabus/particle00.png) center / contain no-repeat;}
.popup.itemPopup .popupCont .itemBox > p{z-index: 2;}
.popup.itemPopup .popupCont .itemBox > .img{z-index: 1;}
.popup.itemPopup .popupCont[data-item-type="incorrect"] .itemBox1,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .itemBox1-2,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .itemBox1-3,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .itemBox1-4{display: none;}

.popup.itemPopup .popupCont[data-item-type="first"] p{position: absolute; top: 60px; left: 50%; transform: translateX(-50%); font-family: 'CookieRunBold'; font-size: 32px; display: flex; align-items: center; justify-content: center; text-align: center; padding-bottom: 37px; line-height: 38px; width: 380px; height: 150px; background: url(../images/metabus/balloon01.png) center / contain no-repeat;}

.popup.itemPopup .popupCont[data-item-type="first"] .img{position: absolute; left: 50%; transform: translateX(-50%); background: center / contain no-repeat;}
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1 .img{top: 170px; width: 700px; height: 320px; background-image: url(../images/metabus/move-item00.png);}
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-2 .img{top: 130px; width: 760px; height: 340px; background-image: url(../images/metabus/move-item01.png);}
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-3 .img{top: 110px; width: 520px; height: 370px; background-image: url(../images/metabus/move-item02.png);}
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-4 .img{top: 40px; width: 850px; height: 440px; background-image: url(../images/metabus/move-item03.png);}

.popup.itemPopup .popupCont[data-item-type="correct"],
.popup.itemPopup .popupCont[data-item-type="incorrect"]{top: 50%; padding: 0; width: 100%; height: 100%; background: url(../images/metabus/shine01.png) center 50px / 600px 500px no-repeat;}
.popup.itemPopup .popupCont[data-item-type="correct"]::after{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background: url(../images/metabus/shine02.png) center 220px / 250px 200px no-repeat;}
.popup.itemPopup .popupCont[data-item-type="correct"] .txt{z-index: 2; position: absolute; top: 200px; left: 50%; transform: translateX(-50%); width: 340px; height: 230px; background: url(../images/metabus/correct-txt.png) center / contain no-repeat;}
.popup.itemPopup .popupCont[data-item-type="correct"] .txt::after{content: ''; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 370px; height: 200px; background: url(../images/metabus/particle01.png) center / contain no-repeat;}
.popup.itemPopup .popupCont[data-item-type="correct"] .itemBox,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .itemBox{width: 100%; height: 100%;}
.popup.itemPopup .popupCont[data-item-type="correct"] .charac-wrap,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .charac-wrap{z-index: 1; position: absolute; width: 100%; height: 100%;}
.popup.itemPopup .popupCont[data-item-type="correct"] .charac-wrap > .charac,
.popup.itemPopup .popupCont[data-item-type="incorrect"] .charac-wrap > .charac{background: center / contain no-repeat; position: absolute;}
.popup.itemPopup .popupCont[data-item-type="correct"] .charac-wrap > .c1{top: 210px; left: 300px; width: 230px; height: 240px; background-image: url(../images/metabus/charac02.png);}
.popup.itemPopup .popupCont[data-item-type="correct"] .charac-wrap > .c2{top: 260px; left: 740px; width: 300px; height: 180px; background-image: url(../images/metabus/charac03.png);}
.popup.itemPopup .popupCont[data-item-type="correct"] .charac-wrap > .c3{z-index: 10; top: 380px; left: 51%; transform: translateX(-51%); width: 200px; height: 180px; background-image: url(../images/metabus/charac01.png);}

.popup.itemPopup .popupCont[data-item-type="incorrect"]{background-image: url(../images/metabus/shine03.png);}
.popup.itemPopup .popupCont[data-item-type="incorrect"] .txt{z-index: 2; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 450px; height: 400px; background: url(../images/metabus/incorrect-txt.png) center / contain no-repeat;}
.popup.itemPopup .popupCont[data-item-type="incorrect"] .charac-wrap > .c1{top: 330px; left: 275px; width: 230px; height: 220px; background-image: url(../images/metabus/charac04.png);}
.popup.itemPopup .popupCont[data-item-type="incorrect"] .charac-wrap > .c2{top: 330px; left: 800px; width: 200px; height: 200px; background-image: url(../images/metabus/charac05.png);}
.popup.itemPopup .popupCont[data-item-type="incorrect"] button.homeBtn{filter: drop-shadow(0 3px 7px rgba(0,0,0,0.3)); z-index: 3; position: absolute; top: 440px; left: 50%; transform: translateX(-50%); width: 260px; height: 80px; background: url(../images/metabus/reset-btn.png) center top / 260px 160px no-repeat;}
.popup.itemPopup .popupCont[data-item-type="incorrect"] button.homeBtn:hover{background-position-y: bottom;}

.popup.itemPopup .itemBox{position: absolute; top: 0px; left: 0;}
/* 버튼 */
.itemBox > button { width: calc(375px / 2); height: calc(240px / 4); position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); background: no-repeat 0 top / cover;}
.itemBox > button.nextBtn { background-image: url(../images/btn_next.png);}
.itemBox > button.homeBtn:first { background-image: url(../images/btn_restart.png);}
.itemBox > button:hover{background-position: 0 bottom;}

/* 

-퀴즈팝업(quizPopup) 
.quizPopup.ON .popupCont[data-quiz-idx="1"] > 데이터값 넣어주시면 해당 팝업 나옵니다. 순차적으로 [1,2,3,4,5]

-퀴즈알람(quizAlert)
.quizAlert.ON[data-alert-type="correct"] > 퀴즈알람 데이터값 넣어주시면 해당 팝업 나옵니다. 순차적으로 [correct, incorrect]

-마지막 아이템 팝업(itemPopup)
.itemPopup.ON .popupCont[data-quiz-idx="1"] > 데이터값 넣어주시면 해당 팝업 나옵니다. 순차적으로 [first, incorrect, correct]

*/

/* 문제 추가 */
.quizBox[data-typ="B"] .quizContainer,
.quizBox[data-typ="C"] .quizContainer{display: flex; justify-content: space-around; flex-wrap: wrap; position: absolute; top: 130px; width: 100%;}

/******* title *******/
.quizPopup .popupCont .title {position: absolute; top: 0; display: inline-block; font-size: 36px; width: 100%; font-family: 'NanumSquareRoundEB'; word-break: break-all;}
.quizPopup .popupCont .title::after{content: ''; clear: both; display: block;}

.quizPopup .popupCont .title p{padding-left: 62px;}
.quizPopup .popupCont .title p > span{display: inline-block;}
.quizPopup .popupCont[data-quiz-idx="2"] .quizBox2 .title p > span{position: relative; width: 100px;}
.quizPopup .popupCont[data-quiz-idx="2"] .quizBox2 .title p > span::before{content: '['; line-height: 0; position: absolute; top: -9px; left: 0;}
.quizPopup .popupCont[data-quiz-idx="2"] .quizBox2 .title p > span::after{content: ']'; line-height: 0;  position: absolute; top: -9px; right: 0;}
.quizPopup .popupCont .title span.num-icon{float: left; font-family: "GmarketSansB"; color: #fff; text-align: center; font-size: 25px; display: flex; align-items: center; justify-content: center; margin-right: 10px; width: 50px; height: 55px; background: url(../images/metabus/list-icon.png) center / contain no-repeat}
.quizPopup .popupCont .title .view { width: calc(202px / 1.5); height: calc(112px / 1.5); background-color: #9EC4F5; border-radius: 20px; font-size: 50px; line-height: 70px; display: inline-block; text-align: center; color: #24487A; position: relative; bottom: 5px;}
.quizPopup .popupCont .quizBox[data-typ="D"] .title{margin-bottom: 70px;}
.quizPopup .popupCont .quizBox[data-typ="E"] .title{margin-bottom: 20px;}

/******* choceBox *******/
.quizBox .choceBox {display: flex; justify-content: center;}
.quizBox .choceBox li{position: relative; width: 450px; height: 450px; background-color: #DBE8F9; border-radius: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.quizBox .choceBox li:not(:last-of-type){margin-right: 28px;}
.quizBox .choceBox li .num{width: 105px; height: 97px; position: absolute; top: 0; left: 0; background-color: #458FEE; color: #fff; text-align: center; line-height: 94px; border-radius: 30px 0 30px 0;}
.quizBox .choceBox li > img{max-width: 250px; max-height: 250px;}
.quizBox .choceBox li > p{font-size: 160px; padding-top: 25px;}
.quizBox .choceBox input[type=radio] + label { width: 100%; height: 100%;}
.quizBox .choceBox input[type=radio]:checked + label::after {content: ''; width: calc(178px / 2); height: calc(163px / 2); position: absolute; top: 11px; left: 14px; background: url(../images/answer_check.png) no-repeat center / contain; animation: check .2s ease-in-out forwards;}



/******* imgBox *******/
.quizBox .imgBox{width: 100%; height: 100%; display: flex; justify-content: center; margin: 10px 0;}
.quizBox .imgBox .img{padding-bottom: 20px; margin: 0 10px; width: auto; height: 250px; border-radius: 30px; display: flex; flex-direction: column; align-items: center;}
.quizBox .imgBox .img > img {height: 100%; object-fit: cover; vertical-align: top; border-radius: 20px;}
.quizBox .imgBox .img > span{margin-top: 3px; display: flex; align-items: center; font-family: 'NanumSquareRoundEB'; font-size: 18px;}
.quizBox .imgBox .img > span::before{content: ''; margin-right: 7px; width: 10px; height: 10px; background: url(../images/metabus/blk_arrow.png) center / contain no-repeat;}
.quizBox .lineText {font-size: 60px; margin-top: 20px; text-align: center;}
.quizBox .lineText span{display: inline-block; width: 60px; height: 60px; vertical-align: middle; border-bottom: 2px solid #000;}
/******* textBox *******/
.quizBox .answer-wrap{position: absolute; top: 410px; left: 50%; transform: translateX(-50%); width: 570px; padding: 5px; border: 3px solid #ff8a00; border-radius: 50px; position: relative; background-color: #f0ece5;}
.quizBox .textBox {padding: 7px 15px; width: 100%; overflow: hidden; background-color: #fff; border-radius: 50px;}
.quizBox .letterBox {display: flex; justify-content: center; align-items: center; border: 5px solid #9BC4F6; padding: 30px 40px 20px; border-radius: 40px; }
.quizBox[data-typ="E"] .letterBox{ min-width: 460px; display: inline-block; margin-bottom: 30px; padding: 10px 20px 0px;}
.quizBox .letterBox,
.quizBox .letterBox > * {font-size: 60px;}
.quizBox .letterBox > p {margin-left: 10px;}
.quizBox[data-typ="C"] .letterBox > p {margin: 0 20px;}
.quizBox .letterBox.view {position: relative; min-width: 620px;}
.quizBox .letterBox.view,
.quizBox .letterBox.view > p {color: #24487A;}
.quizBox .letterBox.view::after {content: '보기'; width: calc(182px / 1.5); height: calc(82px / 1.5); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background-color: #9EC4F5; border-radius: 20px; font-size: 40px; line-height: 53px;}
/******* input *******/
.quizBox input{caret-color: #463011; outline: none; border: none; width: 370px; background-color: transparent; font-size: 36px; color: #1f4ed5; text-align: center; font-family: 'NanumSquareRoundEB';}
.quizBox .textBox input:focus{outline: none;}
.quizBox .textBox input::placeholder{font-size: 20px; font-family: 'CookieRunRegular'; color: #b3aa9d; font-size: 32px;}
.quizBox .textBox input:focus::placeholder{}
.quizBox[data-typ="D"] .inputBox {width: 100%; text-align: center; margin-top: 30px;}




/* 애니메이션 */
@keyframes check {
    0% { transform: scale(.3); opacity: 0; }
    80% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1;}
}
@keyframes scale{
    0%{transform: scale(1);}
    50%{transform: scale(1.1);}
    100%{transform: scale(1);}
}
@keyframes showAlert { 
    0% { transform:  scale(0.2); opacity: 1;} 
    10% { transform:  scale(1.2); opacity: 1;} 
    15% { transform:  scale(1.0); opacity: 1;} 
    90% { transform:  scale(1.0); opacity: 1;} 
    100% { transform:  scale(1.0); opacity: 1;} 
}
@keyframes showAlert2{
    0% { opacity: 1;} 
    10% { opacity: 1;} 
    60% { opacity: 1;} 
    100% { opacity: 0;} 
}
@keyframes showCoin { 
    20%{transform: translateX(-50%) rotateY(0); top: 150px;}
    60%{transform: translateX(-50%) rotateY(540deg); top: 50px;}
    100%{transform: translateX(-50%) rotateY(0); top: 110px;}
}
@keyframes showKey { 
    0%{transform: translateX(-50%) rotateX(0); top: 150px;}
    50%{transform: translateX(-50%) rotateX(540deg); top: 50px;}
    100%{transform: translateX(-50%) rotateX(0); top: 110px;}
}
@keyframes showPearl {
    0%, 11.1%, to {transform: translateX(-50%)}
    22.2% {transform: translateX(-50%) rotateX(-3deg) skewY(-3deg)}
    33.3% {transform: translateX(-50%) rotateX(3deg) skewY(3deg)}
    44.4% {transform: translateX(-50%) rotateX(-3.125deg) skewY(-3.125deg)}
    55.5% {transform: translateX(-50%) rotateX(1.5625deg) skewY(1.5625deg)}
    66.6% {transform: translateX(-50%) rotateX(-.78125deg) skewY(-.78125deg)}
    77.7% {transform: translateX(-50%) rotateX(.390625deg) skewY(.390625deg)}
    88.8% {transform: translateX(-50%) rotateX(-.1953125deg) skewY(-.1953125deg)}
}
@keyframes shine{
    0%{opacity: 0.5;}
    50%{opacity: 1;}
    100%{opacity: 0.5;}
}
@keyframes gageUp1{0%{width: 0;} 100%{width: 10%;}}
@keyframes gageUp2{0%{width: 10%;} 100%{width: 20%;}}
@keyframes gageUp3{0%{width: 20%;} 100%{width: 30%;}}
@keyframes gageUp4{0%{width: 30%;} 100%{width: 40%;}}
@keyframes gageUp5{0%{width: 40%;} 100%{width: 50%;}}
@keyframes gageUp6{0%{width: 60%;} 100%{width: 70%;}}
@keyframes gageUp7{0%{width: 70%;} 100%{width: 80%;}}
@keyframes gageUp8{0%{width: 80%;} 100%{width: 90%;}}
@keyframes gageUp9{0%{width: 90%;} 100%{width: 100%;}}


/* 

2023/10/24 - 개발5팀 한혜수 주임

1. 퀴즈 유형 2, 3만 남겨두었습니다.
같은 input=text 유형이지만 
- data-quiz-idx="2" = 단답
- data-quiz-idx="3" = 복수답 입니다.

2. 숲/바다/우주/공원 에 따라 알림창 팝업과 성공 팝업 클래스 명이 달라집니다.
아래는 참고 클래스 입니다.
1)숲
.quizAlert .correct .coin
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1

2)바다
.quizAlert .correct .pearl
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-2

3)우주
.quizAlert .correct .star
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-3

4)공원
.quizAlert .correct .key
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-4


2023/11/15 - 개발5팀 한혜수 주임

1, 상단 게이지 바 추가하였습니다.
- 게이지는 10% 단위로 차오르게 제작하였으며
- .gageUp1 ~ .gageUp9 까지의 클래스가 적용됩니다.
- 예시로 html 태그에 클래스 추가하였습니다.

*/

/************************* 개발 추가 *************************/

.none {
  display: none !important;
}

.game-ui-wrap {
  position: absolute;
  bottom: 20px;
  right: 20px;
}

.game-ui-move {
  position: relative;
  display: grid;
  width: 244px;
  height: 166px;
  margin: 0px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  list-style-type: none;
  padding: 0;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  padding: 6px;
  box-sizing: border-box;
}

.game-ui-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  background: none;
  cursor: pointer;
}

.game-ui-show {
  position: absolute;
  bottom: 156px;
  right: -30px;
  width: 30px;
  height: 30px;
  background: none;
  cursor: pointer;
}

.game-ui-move li {
  width: 72px;
  height: 72px;
}

.game-ui-move li:nth-child(1) {
  grid-column: 2;
}

.game-ui-move li:nth-child(2) {
  grid-column: 1;
}

.game-ui-move-btn {
  position: relative;
  width: 72px;
  height: 72px;
  background: none;
  border-radius: 10px;
  cursor: pointer;
}
.game-ui-move-btn img{
  -webkit-touch-callout:none;
}

.minmap-wrap{
  position: absolute;
  top: 20px;
  left: 20px;
}

.minmap-wrap-area{
  position: relative;
  display: grid;
  width: 290px;
  height: 225px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  padding: 10px 0px;
}

.minmap-classList{
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 15px; 
}

.minmap-classList li{
  position: relative;
}

.minmap-classList li:nth-child(1){
  width: 33%;
  margin-right: 7%;
}
.minmap-classList li:nth-child(2){
  width: 30%;
}
.minmap-classList li:nth-child(3){
  width: 30%;
}
.minmap-classList li:nth-child(4){
  width: 40%;
  margin-top: 7%;
  margin-right: 7%;
}
.minmap-classList li:nth-child(5){
  width: 40%;
  margin-top: 7%;
}

.minmap-classList li img{
  width: 100%;
  height: auto;
}

.minmap-classList li .check{
  position: absolute;
  display: none;
  width: 50%;
  height: auto;
  top: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.minmap-classList li.active .classItem{
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.minmap-classList li.active .check{
  display: block;
}

.pointInfo-wrap{
  position: absolute;
  top: 20px;
  right: 20px;
  width: 220px;
  height: 140px;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  padding: 20px 24px;
}

.pointInfo-content{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pointInfo-content img{
  width: 80px;
  height: auto;
}

.pointInfo-content p{
  font-family: 'NanumSquareRoundEB';
  color: #fce93d;
  font-size: 40px;
}

.pointInfo-content .bonus-pointNum{
  font-size: 70px;
  line-height: 60px;
}

.alert-soundCheck{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 700px;
  height: 85px;
  background-color: rgba(23, 109, 230, .9);  /* #458fee; */
  border-radius: 20px;
}

.alert-soundCheck p{
  color: white;
}

/* 모바일 키보드 버튼 추가 */

.game-ui-correct {
  display: none;
  position: absolute;
  bottom: 200px;
  right: 20px;
  width: 72px;
  height: 72px;
  background: none;
  cursor: pointer;
}

.game-ui-correct.show {
  display: block;
}


/* 메타버스 다시하기 추가 */

.popup.itemPopup .popupCont[data-item-type="first"] button.redoBtn{ background: url(../images/metabus/redo-btn.png) center top / 193px 62px no-repeat;}
.popup.itemPopup .popupCont[data-item-type="first"] button.redoBtn:hover{background: url(../images/metabus/redo-btn-active.png) center top / 193px 62px no-repeat;}

.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1 p { top: 30px; }
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-2 p { top: 50px; }
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-3 p{ top: 30px; }
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-4 p{ top: 50px; }

.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1 button,
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-2 button,
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-3 button { bottom: -80px; left: 49%; }
.popup.itemPopup .popupCont[data-item-type="first"] .itemBox1-4 button { bottom: -80px; left: 49%; }