/*
    *** 공통
 */
.jellyPop .btnRetry { width: 258px; height: 98px; background-image: url("../images/jellypop/jellyReBtn.png"); background-repeat: no-repeat; cursor: pointer; }
.jellyPop .btnRetry:active { background-image: url("../images/jellypop/jellyReBtn_hover.png"); }

.jellyPop .contentOutWrap { background-image: none; }


/*
    ***인트로
*/
.jellyPop .gameIntro { position:relative; width:100%; height:100%; background-image:url("../images/jellypop/introBg.png"); z-index: 1; }
.jellyPop .studyText { position: absolute; bottom: 228px; left: 50%; transform: translateX(-50%); font-size: 40px; color: #ffffff; font-family: Jalnan; white-space: nowrap;
    text-shadow: 1px 0px 0px #005BBF, 0px 1px 0px #005BBF, -1px 0px 0px #005BBF, 0px -1px 0px #005BBF, 1px 1px 0px #005BBF, -1px 1px 0px #005BBF, -1px -1px 0px #005BBF, 1px -1px 0px #005BBF,
    2px 0px 0px #005BBF, 0px 2px 0px #005BBF, -2px 0px 0px #005BBF, 0px -2px 0px #005BBF, 2px 2px 0px #005BBF, -2px 2px 0px #005BBF, -2px -2px 0px #005BBF, 2px -2px 0px #005BBF,
    3px 0px 0px #005BBF, 0px 3px 0px #005BBF, -3px 0px 0px #005BBF, 0px -3px 0px #005BBF, 3px 3px 0px #005BBF, -3px 3px 0px #005BBF, -3px -3px 0px #005BBF, 3px -3px 0px #005BBF;
}

.jellyPop .gameIntro .btnGameStart { position: absolute; left: 50%; bottom: 58px; transform: translateX(-50%); background-image: url("../images/jellypop/jellyPopStartBtn.png"); background-repeat: no-repeat;
    width: 366px; height: 126px; cursor: pointer; }
.jellyPop .gameIntro .btnGameStart:active { background-image: url("../images/jellypop/jellyPopStartBtn_hover.png"); }

/*
    *** 게임 팝업
 */
.jellyPop .gamePopupWrap { display: none; align-items: center; justify-content: center; position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; background-image: url("../images/jellypop/popBg.png"); background-repeat: no-repeat; z-index: 2; }
.jellyPop .gamePopupWrap .popup { position: relative; width: 1510px; height: 820px; margin: 0 auto;
    filter: drop-shadow(0px 30px 20px rgba(0, 0, 0, 0.05)); background-image: url("../images/jellypop/popupBg.png"); background-repeat: no-repeat; }
.jellyPop .gamePopupWrap .popup .titleArea { width: 1470px; height: 170px;
    background-image: url("../images/jellypop/popupTitle.png"); background-repeat: no-repeat; margin: 0 auto; }
.jellyPop .gamePopupWrap .popup .textArea { padding: 119px 305px; box-sizing: border-box; text-align: center; }
.jellyPop .gamePopupWrap .popup .textArea .mainText { font-size: 72px; font-family: "PretendardB"; line-height: 1.6; }
.jellyPop .gamePopupWrap .popup .textArea .btnConfirm { position: absolute; bottom: 107px; left: 50%; transform: translateX(-50%);
    background-image: url("../images/jellypop/jellyPopConfirmBtn.png"); background-repeat: no-repeat; width: 256px; height: 116px; cursor: pointer; }
.jellyPop .gamePopupWrap .popup .textArea .btnConfirm:active { background-image: url("../images/jellypop/jellyPopConfirmBtn_hover.png"); }


/*
    *** 게임화면
 */
.jellyPop .gamePage { display: none; position: relative; top: 0; left: 0; width: 100%; height: 100%; background-image: url("../images/jellypop/gameBg.png"); background-repeat: no-repeat; }

/*젤리아이콘*/
.jellyPop .gamePage .jellyArea { position: absolute; top: 104px; right: 56px; display: flex; flex-direction: column; }
.jellyPop .gamePage .jellyArea .jelly { background-image: url("../images/jellypop/jellyIcon_1.png"); background-repeat: no-repeat; width: 170px; height: 170px; margin-top: -25px; }
.jellyPop .gamePage .jellyArea .jelly.type2 { background-image: url("../images/jellypop/jellyIcon_2.png"); }
.jellyPop .gamePage .jellyArea .jelly.type3 { background-image: url("../images/jellypop/jellyIcon_3.png"); }
.jellyPop .gamePage .jellyArea .jelly.type4 { background-image: url("../images/jellypop/jellyIcon_4.png"); }
.jellyPop .gamePage .jellyArea .jelly.type5 { background-image: url("../images/jellypop/jellyIcon_5.png"); }
.jellyPop .gamePage .jellyArea .jelly.type6 { background-image: url("../images/jellypop/jellyIcon_6.png"); }
/*소리버튼*/
.jellyPop .gamePage .btnSound { width: 104px; height: 104px; position: absolute; top: 153px; left: 803px;
    background-image: url("../images/jellypop/jellyConversationBtn.png"); background-repeat: no-repeat; cursor: pointer; z-index: 2; }
.jellyPop .gamePage .btnSound:active { background-image: url("../images/jellypop/jellyConversationBtn_hover.png"); }

/*게임유형 공통*/
.jellyPop .gamePage .wordArea { position: relative; top: 100px; left: 60px; width: 1590px; height: 730px; border-radius: 50px; }
.jellyPop .gamePage .wordArea .blankCellArea { position: absolute; left: 50%; transform: translateX(-50%); display: flex; }
.jellyPop .gamePage .wordArea .blankCellArea .space { display: flex; align-items: center; justify-content: center; }
.jellyPop .gamePage .wordArea .blankCellArea .blankCell { background-repeat: no-repeat; cursor: pointer; }
.jellyPop .gamePage .wordArea .blankCellArea .blankCell.active { background-image: url("../images/jellypop/jellyBlank_hover.png"); }
.jellyPop .gamePage .wordArea .blankCellArea .blankCell.on { background-image: url("../images/jellypop/jellyBlank_on.png"); }
.jellyPop .gamePage .wordArea .blankCellArea .blankCell.wrong { animation: vibration 0.1s 6; }
.jellyPop .gamePage .wordArea .wordSelectArea { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; background-repeat: no-repeat; cursor: pointer; }
.jellyPop .gamePage .wordArea .wordSelectArea .alphabetCell { display: flex; align-items: center; justify-content: center;
    color: #fff; font-family: "Jalnan"; background-image: url("../images/jellypop/selectBlock.png"); }

/*단어유형*/
.jellyPop .gamePage .wordArea.type1 .blankCellArea { top: 244px; gap: 30px; }
.jellyPop .gamePage .wordArea.type1 .blankCellArea .blankCell { width: 182px; height: 182px; background-image: url("../images/jellypop/jellyBlank_big.png"); color: #FF6700; font-size: 113px; font-family: "Jalnan";}
.jellyPop .gamePage .wordArea.type1 .blankCellArea .blankCell.active { background-image: url("../images/jellypop/jellyBlank_big_hover.png"); }
.jellyPop .gamePage .wordArea.type1 .blankCellArea .blankCell.on { display: flex; align-items: center; justify-content: center; background-image: url("../images/jellypop/jellyBlank_big_on.png"); }
/*선택*/
.jellyPop .gamePage .wordArea.type1 .wordSelectArea { top: 511px; gap: 20px; }
.jellyPop .gamePage .wordArea.type1 .wordSelectArea .alphabetCell { width: 162px; height: 162px; font-size: 100px;
    filter: drop-shadow(0px 6px 4px rgba(0, 0, 0, 0.10)); background-size: 162px; }

/*문장유형*/
.jellyPop .gamePage .wordArea.type2 .blankCellArea { position: absolute; top: 273px; gap: 20px; }
.jellyPop .gamePage .wordArea.type2 .blankCellArea:before { position: absolute; bottom: 37px; right: -30px; content: '.'; font-size: 60px; color: #FF6700; font-family: "Jalnan"; }
.jellyPop .gamePage .wordArea.type2 .blankCellArea .blankCell { width: 138px; height: 138px; background-image: url("../images/jellypop/jellyBlank.png"); }

.jellyPop .gamePage .wordArea.type2 .wordSelectArea { top: 527px; gap: 10px; }
.jellyPop .gamePage .wordArea.type2 .wordSelectArea .alphabetCell { width: 130px; height: 130px; font-size: 80px; background-size: 130px; }

@keyframes vibration {
    0%{
        transform: rotate(3deg);
    }
    100%{
        transform: rotate(-3deg);
    }
}

/*인디게이터*/
.jellyPop .gamePage .indicatorArea { display: flex; align-items: center; gap: 56px; position: absolute; left: 80px; bottom: 80px; }
.jellyPop .gamePage .indicatorArea .indicatorWrap { display: flex; align-items: center; }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator { background-repeat: no-repeat; width: 90px; height: 90px; cursor: pointer; text-indent: -999px; }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.word { background-image: url("../images/jellypop/jellyWordIcon.png"); }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.word.active { background-image: url("../images/jellypop/jellyWordIcon_hover.png"); }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.word.on { background-image: url("../images/jellypop/jellyWordIcon_on.png"); }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.sentence { background-image: url("../images/jellypop/jellySentenceIcon.png"); }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.sentence.active { background-image: url("../images/jellypop/jellySentenceIcon_hover.png"); }
.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.sentence.on { background-image: url("../images/jellypop/jellySentenceIcon_on.png"); }

/*버튼*/
.jellyPop .gamePage .buttonArea { position: absolute; right: 266px; bottom: 81px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.jellyPop .gamePage .buttonArea .btnAnswer { display: block; width: 258px; height: 98px; background-image: url("../images/jellypop/jellyAnsBtn.png"); background-repeat: no-repeat; cursor: pointer; }
.jellyPop .gamePage .buttonArea .btnAnswer:active { background-image: url("../images/jellypop/jellyAnsBtn_hover.png"); }
.jellyPop .gamePage .buttonArea .btnNextQuiz { width: 258px; height: 98px; background-image: url("../images/jellypop/jellyNextBtn.png"); background-repeat: no-repeat; cursor: pointer; }
.jellyPop .gamePage .buttonArea .btnNextQuiz:active { background-image: url("../images/jellypop/jellyNextBtn_hover.png"); }
.jellyPop .gamePage .buttonArea .btnRetry { display: none; }

.jellyPop .gamePage .buttonArea .resultToggle.on .btnAnswer { display: none; }
.jellyPop .gamePage .buttonArea .resultToggle.on .btnRetry { display: block; }


/*
    *** 볼륨조절바
*/
.jellyPop .volumeWrap {position:absolute; left:18px; top:18px; z-index:10; cursor:pointer;}
.jellyPop .volumeWrap .btnVolume {width:84px; height:84px; background-image:url("../images/spaceAdventure/btnVolume.png");}
.jellyPop .volumeWrap .btnVolume:hover {background-image:url("../images/spaceAdventure/btnVolume_over.png");}


/*
    *** 젤리완료 화면
 */
.jellyPop .gameComplete { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("../images/jellypop/completeBg.png"); background-repeat: no-repeat; z-index: 4; padding: 100px 140px; box-sizing: border-box; }
.jellyPop .gameComplete .randomTextBox { width: 1640px; height: 680px; display: flex; align-items: center; justify-content: center; }
.jellyPop .gameComplete .completeText { display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; }
.jellyPop .gameComplete .completeText.type1 { width: 1552px; height: 495px; background-image: url("../images/jellypop/completeText_1.png"); }
.jellyPop .gameComplete .completeText.type2 { width: 1640px; height: 680px; background-image: url("../images/jellypop/completeText_2.png"); }
.jellyPop .gameComplete .completeText.type3 { width: 1640px; height: 680px; background-image: url("../images/jellypop/completeText_3.png"); }
.jellyPop .gameComplete .btnRetry { position: absolute; left: 50%; bottom: 131px; transform: translateX(-50%); }





/*스피커버튼*/
/*.cl_jellyBtnSpeaker { background-image: url("../images/jellypop/jellyPopSpeaker.png"); background-repeat: no-repeat; width: 84px; height: 84px; cursor: pointer; }*/
/*.cl_jellyBtnSpeaker:active { background-image: url("../images/jellypop/jellyPopSpeaker_hover.png") }*/



@media (hover: hover) and (pointer: fine) {
    /*
          *** 인트로
      */
    /*시작버튼*/
    .jellyPop .gameIntro .btnGameStart:hover { background-image: url("../images/jellypop/jellyPopStartBtn_hover.png"); }
    /*확인버튼*/
    .jellyPop .gamePopupWrap .popup .textArea .btnConfirm:hover { background-image: url("../images/jellypop/jellyPopConfirmBtn_hover.png"); }

    /*
        *** 젤리게임
     */
    /*소리듣기버튼*/
    .jellyPop .gamePage .btnSound:hover { background-image: url("../images/jellypop/jellyConversationBtn_hover.png"); }
    /*!*단어아이콘*!*/
    /*.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.word:hover { background-image: url("../images/jellypop/jellyWordIcon_hover.png"); }*/
    /*!*문장아이콘*!*/
    /*.jellyPop .gamePage .indicatorArea .indicatorWrap .indicator.sentence:hover { background-image: url("../images/jellypop/jellySentenceIcon_hover.png"); }*/

    /*정답확인버튼*/
    .jellyPop .gamePage .buttonArea .btnAnswer:hover { background-image: url("../images/jellypop/jellyAnsBtn_hover.png"); }
    /*다시하기버튼*/
    .jellyPop .btnRetry:hover { background-image: url("../images/jellypop/jellyReBtn_hover.png"); }
    /*다음문제버튼*/
    .jellyPop .gamePage .buttonArea .btnNextQuiz:hover { background-image: url("../images/jellypop/jellyNextBtn_hover.png"); }

}