@charset "UTF-8";

* {margin:0; padding:0; border:0;}
body,html {width:100%; height:100%; overflow: hidden;}

a {text-decoration:none; color:#222222;}
a:visited {text-decoration:none; color:#222222;}
a:active {text-decoration:none; color:#222222;}
a:link {text-decoration:none; color:#222222;}

ul, ol, dl {list-style: none;}

table {border-collapse: collapse;}

/*인풋요소 포커스 시 외곽선 안보이게*/
:focus {outline:none;}

/*input[type="number"]요소에 상하 화살표 없애기*/
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}



/*
    ************************************************* 공통 *************************************************
*/
.pageOutWrap {position:absolute; top:0; left:0; width:1920px; height:1017px; overflow:hidden; transform-origin: top left;}


/*
    *** 오버버튼
*/
.overButton {cursor:pointer;}
.overButton .basic {display:block;}
.overButton .over {display: none;}
.overButton:hover .basic {display:none;}
.overButton:hover .over {display: block;}


/*
    *** 페이지
*/
.page {position:relative; width:100%; height:100%;}


/*
    *** 시퀀스 컨테이너
*/
.seqContainer {font-size:0;}
.seqContainer > img {display:none;}
.seqContainer > img:nth-of-type(1) {display:block;}




/*
    ************************************************* 인트로 *************************************************
*/
.intro {background-image:url("../images/introBg.jpg");}

.intro .buttonWrap {display:flex; gap:110px; position:absolute; left:50%; top:453px; transform:translateX(-50%);}

.intro .howToPlayPopup {display:none; align-items: center; justify-content: center; position:absolute; top:0; left:0; z-index:1; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.70);}
.intro .howToPlayPopup .win {position:relative; width:1324px; height:710px; background-image:url("../images/howToPlayWinBg.png");}
.intro .howToPlayPopup .win .btnClosePopup {position:absolute; top:55px; right:55px; width:135px; height:80px; cursor:pointer; background-image:url("../images/btnClosePopup.png");}
.intro .howToPlayPopup .win > ul {margin-top:236px; margin-left:164px;}
.intro .howToPlayPopup .win > ul li {display:flex; align-items: center; font-size:36px; color:#614444; font-family: PretendardSB; margin-bottom:30px;}
.intro .howToPlayPopup .win > ul li .num {display:flex; justify-content: center; align-items:center;width:62px; height:63px; font-size:26px; color:#ffffff; font-family:Jalnan; margin-right:19px; background-image:url("../images/howToPlayNumBg.png");}
.intro .howToPlayPopup .win > ul li .bold {color:#232124; font-family:PretendardEB;}
.intro .howToPlayPopup .win > ul li .underline {border-bottom:solid 4px #FFD29D;}





/*
    ************************************************* 게임화면 *************************************************
*/
.gameStage {background-image:url("../images/gamePlayFarBg.png"); background-position: center top; background-repeat: no-repeat;}

/*
    *** 게임 배경
*/
.gameStage .movingBgWrap {position:absolute; bottom:0; left:0; width:100%; overflow: hidden;}
.gameStage .movingBgWrap .bgContainer {display:flex;}
.gameStage .movingBgWrap .bgContainer > img:nth-of-type(2) {margin-left:-1px;}


/*
    *** 생명 게이지
*/
.gameStage .lifeGauge {position:absolute; top:340px; left:15px; z-index:20;}
.gameStage .lifeGauge .lifeMarkerWrap {position:absolute; top:17px; left:35px;}
.gameStage .lifeGauge .lifeMarkerWrap .marker {width:30px; height:20px; margin-bottom:5px; background-image:url("../images/lifeMark_on.png");}
.gameStage .lifeGauge .lifeMarkerWrap .marker.off {background-image:url("../images/lifeMark_off.png");}


/*
    *** 점프버튼
*/
.gameStage .btnJump {position:absolute; left:245px; bottom:40px; z-index:20;}


/*
    *** 모은 물병
*/
.gameStage .waterBottleStatus {position:absolute; left:539px; bottom:21px; width:102px; height:182px; z-index:20;}
.gameStage .waterBottleStatus[data-step="0"] {background-image:url("../images/bottle_step0.png");}
.gameStage .waterBottleStatus[data-step="1"] {background-image:url("../images/bottle_step1.png");}
.gameStage .waterBottleStatus[data-step="2"] {background-image:url("../images/bottle_step2.png");}
.gameStage .waterBottleStatus[data-step="3"] {background-image:url("../images/bottle_step3.png");}
.gameStage .waterBottleStatus[data-step="4"] {background-image:url("../images/bottle_step4.png");}
.gameStage .waterBottleStatus[data-step="5"] {background-image:url("../images/bottle_step5.png");}



/*
    *** 플레이어
*/
.gameStage .player {position:absolute; top:145px; left:-400px; z-index:10;}
.gameStage .player > div {display:none;}

/*엔딩 캐릭터*/
.gameStage .endingFriend {position:absolute; bottom:192px; right:100px; z-index:10;}
.gameStage .endingFriend > div {display:none;}
.gameStage .endingFriend > div:first-child {display:block;}


/*
    *** 선인장, 물병
*/
.gameStage .gameObject {position:absolute; z-index:1;}
.gameStage .gameObject.cactus {top:565px;}
.gameStage .gameObject.waterBottle {top:110px; width:130px; height:185px; background-image: url("../images/bottle_quiz.png");}
.gameStage .gameObject.waterBottle .bottleTitle {display:block; margin-top:13px; font-size:30px; color:#A950FF; font-family:Jalnan; text-align:center;}



/*
    *** 퀴즈 팝업
*/
.gameStage .quizPopup {display:none; justify-content: center; align-items: center; position:absolute; top:0; left:0; z-index:30; width:100%; height:100%;}
.gameStage .quizPopup.on {display:flex;}


.gameStage .quizPopup .popupWin {
    position: relative;
    width: 1295px;
    height: 564px;
    border-radius: 50px;
    border: solid 6px #854810;
    box-sizing: border-box;
    padding:0 90px;
    margin-top:-300px;
    opacity:0;
    background-color: #ffffff;
}
.gameStage .quizPopup .popupWin::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 27px;
    left: 50%;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-left:-80px;
    background-color:#D9D9D9;
    box-shadow:
            35px 0 0 #D9D9D9,
            70px 0 0 #D9D9D9,
            105px 0 0 #D9D9D9,
            140px 0 0 #D9D9D9;
}
.gameStage .quizPopup .popupWin::after {content: ""; position: absolute; bottom:27px; width: 15px; height: 15px; border-radius: 50%; margin-left:-80px; background-color:#B7702E;}
.gameStage .quizPopup.quiz1 .popupWin::after {left:50%;}
.gameStage .quizPopup.quiz2 .popupWin::after {left:calc(50% + 35px);}
.gameStage .quizPopup.quiz3 .popupWin::after {left:calc(50% + 70px);}
.gameStage .quizPopup.quiz4 .popupWin::after {left:calc(50% + 105px);}
.gameStage .quizPopup.quiz5 .popupWin::after {left:calc(50% + 140px);}

.gameStage .quizPopup .popupWin.on {opacity:1; margin-top:0; transition:all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);}


.gameStage .quizPopup .popupWin .quizNumBar {
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    width: 358px;
    height: 83px;
    font-size:46px;
    color:#FBE7D5;
    font-family:PretendardB;
    border-radius: 80px;
    box-shadow: 0px 6px 0px 2px #854810;
    background-color: #B7702E;
}
.gameStage .quizPopup .popupWin .quizNumBar .headText {
    color: #ffffff;
    font-family: PretendardEB;
    text-shadow: 1px 0px 0px #854810, 0px 1px 0px #854810, -1px 0px 0px #854810, 0px -1px 0px #854810, 1px 1px 0px #854810, -1px 1px 0px #854810, -1px -1px 0px #854810, 1px -1px 0px #854810,
    2px 0px 0px #854810, 0px 2px 0px #854810, -2px 0px 0px #854810, 0px -2px 0px #854810, 2px 2px 0px #854810, -2px 2px 0px #854810, -2px -2px 0px #854810, 2px -2px 0px #854810,
    3px 0px 0px #854810, 0px 3px 0px #854810, -3px 0px 0px #854810, 0px -3px 0px #854810, 3px 3px 0px #854810, -3px 3px 0px #854810, -3px -3px 0px #854810, 3px -3px 0px #854810;
}
.gameStage .quizPopup .popupWin .quizNumBar .currentQuizNum {margin-left:33px;}
.gameStage .quizPopup .popupWin .quizNumBar .slash {width:23px; height:35px; margin:0 23px; background-image:url("../images/quizePopup_slash.png");}


.gameStage .quizPopup .popupWin .quesWrap {display: flex; justify-content: center; align-items: center; height: 250px; margin-top: 45px;}
.gameStage .quizPopup .popupWin .quesWrap .question {font-size:60px; color:#000000; font-family:PretendardB; text-align: center;}
.gameStage .quizPopup .popupWin .quesWrap .question.smallText {font-size:52px;}
.gameStage .quizPopup .popupWin .quesWrap .underline {border-bottom:solid 4px #ee3e20;}


.gameStage .quizPopup .popupWin .answerWrap {display:flex; justify-content: space-between; align-items: center; height:150px; /*background-color:rgba(222,2,121,0.2)*/}
.gameStage .quizPopup .popupWin .answerWrap .answerList {display:flex; align-items:center; font-size:60px; color:#000000; font-family:PretendardB; margin-bottom:5px; cursor:pointer;}
.gameStage .quizPopup .popupWin .answerWrap .answerList .num {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 74px;
    height: 74px;
    font-size: 50px;
    color: #000000;
    font-family: PretendardB;
    border-radius:50%;
    border:solid 3px #B8DEED;
    margin-right:20px;
    background-color:#D2EDF8;
}
.gameStage .quizPopup .popupWin .answerWrap .answerList.smallText {font-size:50px;}
.gameStage .quizPopup .popupWin .answerWrap .answerList.smallText .num {width:65px; height:65px; font-size:45px;}

.gameStage .quizPopup .popupWin .answerWrap .answerList.on {color:#A411F5;}
.gameStage .quizPopup .popupWin .answerWrap .answerList.on .num {color:#ffffff; border-color:#A94FDC; background-color:#BE63F1;}


.gameStage .quizPopup.dirCol .popupWin .quesWrap {height: 200px; margin-top: 40px;}
.gameStage .quizPopup.dirCol .popupWin .answerWrap {flex-direction:column; align-items: flex-start; /*height:250px;*/}


.gameStage .feedbackPopup {display:flex; justify-content: center; align-items: center; position:absolute; top:0; left:0; z-index:40; width:100%; height:100%; background-color:rgba(0,0,0,0.7);}



/*
    *** 성공팝업
*/
.gameStage .successPopup {display:flex; justify-content: center; align-items: center; position:absolute; top:0; left:0; z-index: 50; width:100%; height:100%; background-color:rgba(0,0,0,0.7);}
.gameStage .successPopup .successWin {width:844px; height:586px; background-image:url("../images/quizCorrectPopupBg.png");}
.gameStage .successPopup .successWin .message {font-size:56px; color:#6A1242; font-family:Jalnan; text-align: center; margin-top:290px; margin-bottom:36px;}
.gameStage .successPopup .successWin .message .accent {color:#D8277C;}
.gameStage .successPopup .successWin .buttonWrap {display:flex; align-items: center; justify-content: center; gap:10px;}
.gameStage .successPopup .successWin .buttonWrap .btnGoToStart {width:190px; height:94px; cursor:pointer; background-image:url("../images/btnGoStart.png");}
.gameStage .successPopup .successWin .buttonWrap .btnRestart {width:190px; height:94px; cursor:pointer; background-image:url("../images/btnRetry.png");}



/*
    *** 실패팝업
*/
.gameStage .failPopup {display:flex; justify-content: center; align-items: center; position:absolute; top:0; left:0; z-index: 50; width:100%; height:100%; background-color:rgba(0,0,0,0.7);}
.gameStage .failPopup .failWin {width:673px; height:463px; background-image:url("../images/quizWrongPopupBg.png");}
.gameStage .failPopup .failWin .message {font-size:56px; color:#262325; font-family:Jalnan; text-align: center; margin-top:215px; margin-bottom:36px;}
.gameStage .failPopup .failWin .message .accent {color:#2C3BC7;}
.gameStage .failPopup .failWin .buttonWrap {display:flex; align-items: center; justify-content: center; gap:10px;}
.gameStage .failPopup .failWin .buttonWrap .btnGoToStart {width:190px; height:94px; cursor:pointer; background-image:url("../images/btnGoStart.png");}
.gameStage .failPopup .failWin .buttonWrap .btnRestart {width:190px; height:94px; cursor:pointer; background-image:url("../images/btnRetry.png");}