/***********************************공통요소들*************************************/
.contentsWrap { width: 100%; padding: 40px; box-sizing: border-box; }
.sectionTitle { font-family: "NanumGoB"; font-size: 60px; border-bottom: 1px solid #333333; border-top:solid 3px #333333; padding: 20px 10px; margin-top:100px; box-sizing: border-box; margin-bottom: 30px; background-color:#ffffff;}
.subTitle { font-family: "NanumGoR"; font-size: 30px; margin-bottom: 20px; padding: 10px 10px; border-bottom:dashed 1px #cccccc; background-color:#ffffff;}
.section { position:relative; display: flex; align-items: center; gap: 10px; min-height:300px; margin-bottom: 20px; padding:20px; box-sizing: border-box; border-bottom:solid 3px #333333; background-color:#f5f5f5;}
.section.dirCol {flex-direction: column; align-items: flex-start;}
.wrap { text-align: center; }
.wrap .subText { font-size: 20px; font-family: "NanumGoR"; margin-top: 10px; }

/***
    *****페이지*****
***/
/*.cl_page { overflow-y: auto; }*/
.cl_page { width: 100%; height: 100%; box-sizing: border-box; }
.cl_page.emoticonTitleBox { padding: 74px 0 0 98px; box-sizing: border-box; }


/***
    *****페이지네이션*****
 ***/
/*.cl_pagination { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 20px;*/
/*    text-align: center; border-radius: 50px; background: #C3E9EB; padding: 8px; box-sizing: border-box; }*/
.cl_pagination { z-index: 21;}
/*.cl_pagination .dots { display: flex; align-items: center; justify-content: center; gap: 20px; }*/
/*.cl_pagination .dots .dot { width: 20px; height: 20px; background: #70C1C5; border-radius: 50%; cursor: pointer; }*/
/*.cl_pagination .dots .dot.active { background: #273A60; }*/
/*.cl_pagination .prevButton { background: url("../images/prevButton_default.png")no-repeat; width: 48px; height: 48px; cursor: pointer; }*/
/*.cl_pagination .prevButton.dis { background: url("../images/prevButton_dis.png")no-repeat; }*/
/*.cl_pagination .prevButton:hover { background: url("../images/prevButton_hover.png")no-repeat; }*/
/*.cl_pagination .nextButton { background: url("../images/nextButton_default.png")no-repeat; width: 48px; height: 48px; cursor: pointer; }*/
/*.cl_pagination .nextButton.dis { background: url("../images/nextButton_dis.png")no-repeat; }*/
/*.cl_pagination .nextButton:hover { background: url("../images/nextButton_hover.png")no-repeat; }*/

/*페이지 페이지네이션 버튼*/
.cl_pagination.type2 .dots { position: absolute; top: 33px; right: 117px; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: 50px; background: rgba(0, 0, 0, 0.20); padding: 12px; box-sizing: border-box; }
.cl_pagination.type2 .dots .dot { width: 35px; height: 35px; border: 5px solid rgba(255, 255, 255, 0.40); border-radius: 50%; background-color: rgba(0, 0, 0, 0.10); box-sizing: border-box; cursor: pointer; }
.cl_pagination.type2 .dots .dot:active { background-color: #3463C0; border-color: #fff; }
.cl_pagination.type2 .dots .dot.active { background-color: #3463C0; border-color: #fff; }

/***
    *****탭버튼*****
***/
.cl_tabBtnWrap { position: absolute; right: 105px; bottom: 10px; display: flex; align-items: center; gap: 6px; }
.cl_tabBtnWrap.center { right: auto; left: 50%; transform: translateX(-50%); }
.cl_tabBtnWrap .tabBtn { font-family: "Jalnan"; font-size: 34px; color: #565656; background-color: #D3D3D3; border: 4px solid #BDBBBC;
    padding: 20px 48px; box-sizing: border-box; cursor: pointer; }
.cl_tabBtnWrap .tabBtn.paddingSmall { padding: 20px 25px; }
.cl_tabBtnWrap .tabBtn:nth-child(1) { border-top-left-radius: 20px; }
.cl_tabBtnWrap .tabBtn:nth-last-child(1) { border-top-right-radius: 20px; }

/*클릭*/
.cl_tabBtnWrap .tabBtn.on { color: #fff; background-color: #7070EF; border-color: #5A5AE2; }
.cl_tabBtnWrap .tabBtn.on.active { color: #fff; background-color: #7070EF; border-color: #5A5AE2; }
/*호버*/
.cl_tabBtnWrap .tabBtn:active { background-color: #F2F2F2; border-color: #D9D3D6; color: #565656; }

/*비디오탭버튼*/
.cl_videoTabBtnWrap { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 12px; z-index:50; }

/*오공완탭버튼*/
.cl_todayStudyTabButtons { position: absolute; top: 0; right: 47px; display: inline-flex; align-items: center; gap: 12px; border-radius: 0px 0px 50px 50px; border: 1px solid #7FC3D6; background: #A0D1DE; padding: 12px; box-sizing: border-box; }

/*리뷰 탭버튼*/
.cl_reviewTabButtons { position: absolute; top: -30px; right: 30px; display: inline-flex; align-items: center; gap: 16px; padding: 12px; box-sizing: border-box; border-radius: 50px; background: #E9E9E9; z-index: 3; }

/*
    *** 세로형 탭
*/
.cl_vTabArea {position:relative; display:flex; align-items: flex-start; box-sizing: border-box;}

.cl_vTabArea .vTabButtonWrap {padding-top:60px; box-sizing: border-box;}

.cl_vTabArea .vTabPage {display:none; width:1522px; height:707px; border-radius:30px; border:solid 4px #3AB2D2; box-sizing: border-box; background-color:#ffffff;}
.cl_vTabArea .vTabPage.on {display:block;}


/*세로 탭버튼*/
.cl_vTab {
    position:relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 102px;
    height:121px;
    font-size: 56px;
    color: #565656;
    font-family: Jalnan;
    border-radius: 20px 0px 0px 20px;
    margin-bottom:10px;
    cursor:pointer;
    background-color: #D3D3D3;
}
.cl_vTab:last-child {margin-bottom:0;}
.cl_vTab:after {content:""; position:absolute; top:10px; left:10px; width:86px; height:101px; border-radius:20px 0px 0px 20px; border:2px dashed rgba(255, 255, 255, 0.30); box-sizing: border-box;}

.cl_vTab.on {color:#ffffff; background-color:#3AB2D2;}

/*준비탭버튼*/
.cl_readyTabButtons { position: absolute; top: 0; left: 0; display: flex; }
.cl_readyTabButtons .tabBtn { background-image: url("../images/stepTabButton_1.png"); width: 245px; height: 70px; background-repeat: no-repeat; z-index: 4; cursor: pointer; }
.cl_readyTabButtons .tabBtn.active { background-image: url("../images/stepTabButton_2.png"); width: 266px; margin-left: -35px; z-index: 3; }
.cl_readyTabButtons .tabBtn.presentation { background-image: url("../images/stepTabButton_3.png"); width: 266px; margin-left: -35px; z-index: 2; }
.cl_readyTabButtons .tabBtn.evaluate { background-image: url("../images/stepTabButton_4.png"); width: 266px; margin-left: -35px; z-index: 1; }

.cl_readyTabButtons .tabBtn:active { background-image: url("../images/stepTabButton_1_hover.png") }
.cl_readyTabButtons .tabBtn.active:active { background-image: url("../images/stepTabButton_2_hover.png") }
.cl_readyTabButtons .tabBtn.presentation:active { background-image: url("../images/stepTabButton_3_hover.png") }
.cl_readyTabButtons .tabBtn.evaluate:active { background-image: url("../images/stepTabButton_4_hover.png") }

.cl_readyTabButtons .tabBtn.on { background-image: url("../images/stepTabButton_1_on.png") }
.cl_readyTabButtons .tabBtn.active.on { background-image: url("../images/stepTabButton_2_on.png") }
.cl_readyTabButtons .tabBtn.presentation.on { background-image: url("../images/stepTabButton_3_on.png") }
.cl_readyTabButtons .tabBtn.evaluate.on { background-image: url("../images/stepTabButton_4_on.png") }

.cl_readyTabButtons .tabBtn.on:active { background-image: url("../images/stepTabButton_1_on.png") }
.cl_readyTabButtons .tabBtn.on.active:active { background-image: url("../images/stepTabButton_2_on.png") }
.cl_readyTabButtons .tabBtn.on.presentation:active { background-image: url("../images/stepTabButton_3_on.png") }
.cl_readyTabButtons .tabBtn.on.evaluate:active { background-image: url("../images/stepTabButton_4_on.png") }



/*스탭탭버튼*/
.cl_stepTabButtons { position: absolute; top: 0; left: 0; display: flex; width: 100%; height: 80px; background-color: #A0D1DE; padding: 6px 24px; box-sizing: border-box;}
.cl_stepTabButtons .tabBtn { position: relative; display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; background-color: #1B54AA; border-radius: 50%;
    cursor: pointer; box-sizing: border-box; margin-right: 14px; box-sizing: border-box; }
.cl_stepTabButtons .tabBtn span { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; font-size: 34px; color: #1B54AA; text-align: center; font-family: "Jalnan";
    background-color: #fff; border-radius: 50%; box-sizing: border-box; }
.cl_stepTabButtons .tabBtn:after { content: ''; position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 14px; height: 6px; background-color: #1B54AA; }
.cl_stepTabButtons .tabBtn:nth-last-child(1):after { display: none; }

.cl_stepTabButtons .tabBtn:hover span { background-color: #9FE2FF; }
.cl_stepTabButtons .tabBtn.on { width: 162px; height: 68px; border-radius: 60px; }
.cl_stepTabButtons .tabBtn.on span { width: auto; height: auto; background-color: transparent; color: #fff; }

/*라운드 네모 탭 버튼*/
.cl_roundBtnTab { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; border-radius: 30px 0px; background-color: rgba(0, 0, 0, 0.10); padding: 12px; box-sizing: border-box; z-index: 18; }


    /***
        *****드롭다운*****
    ***/
.cl_dropDownWrap { position: relative; }
.cl_dropDownWrap .boxQuestionMark { position: relative; display: flex; align-items: center; justify-content: center; width: 63px; height: 57px; font-size: 28px; color: #B8B8B8; font-family: "Jalnan";
    border: 3px solid #606060; border-radius: 10px; box-sizing: border-box; background: #fff; cursor: pointer; }
.cl_dropDownWrap .boxQuestionMark:active { color: #8484F2; border-color: #7070EF; background: #fff; }
.cl_dropDownWrap .boxQuestionMark.on { color: #fff; border-color: #3333B6; background: #7070EF; }
.cl_dropDownWrap .boxQuestionMark.on:active { color: #fff; border-color: #3333B6; background: #7070EF; }
.cl_dropDownWrap .boxQuestionMark.ansCorrect { color: #fff; background-color: #137AE2; border-color: #116AC3; }

.cl_dropDownWrap .boxDropDown { display: none; position: absolute; width: 63px; height: 219px; font-size: 28px; color: #2B2B2B; font-family: "Jalnan";
    border: 3px solid #606060; border-radius: 10px; box-sizing: border-box; background: #fff; }
.cl_dropDownWrap .boxDropDown li { display: flex; align-items: center; justify-content: center; height: calc(100% /4); border-bottom: 3px solid #CECECE; box-sizing: border-box; cursor: pointer; }
.cl_dropDownWrap .boxDropDown li:nth-last-child(1) { border-bottom: 0px; }
.cl_dropDownWrap .boxDropDown li:active { color: #fff; background: #7070EF; }


/***
    *****버튼*****
***/

/*해석보기버튼*/
.cl_btnTransView { background: url("../images/translateBtn.png")no-repeat; width: 201px; height: 83px; cursor: pointer; }
.cl_btnTransView:active { background: url("../images/translateBtn_hover.png")no-repeat; }
.cl_btnTransView.on { background: url("../images/translateBtn_on.png")no-repeat; }
.cl_btnTransView.on:active { background: url("../images/translateBtn_on_hover.png")no-repeat; }

/*확대버튼*/
.cl_btnZoom { position: absolute; bottom: 32px; right: 35px; background-image: url("../images/zoomButton.png"); background-repeat: no-repeat; width: 97px; height: 98px; cursor: pointer; }
.cl_btnZoom:active { background-image: url("../images/zoomButton_hover.png"); }

/*수업팁 팝업*/
.cl_btnTipPopup { position: absolute; top: 28px; right: 44px; background-image: url("../images/classTipPopBtn.png"); background-repeat: no-repeat; width: 170px; height: 72px; cursor: pointer; z-index: 7; }
.cl_btnTipPopup:active { background-image: url("../images/classTipPopBtn_hover.png") }
.cl_btnTipPopup.on { background-image: url("../images/classTipPopBtn_on.png") }
.cl_btnTipPopup:active.on { background-image: url("../images/classTipPopBtn_on.png") }
.cl_btnTipClosePopup { position: absolute; top: -25px; right: -25px; background-image: url("../images/classTipCloseBtn.png"); background-repeat: no-repeat; width: 56px; height: 56px; cursor: pointer; }

/*페이지 다음이전 버튼*/
.cl_btnPagePrev { position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-image: url("../images/prevBtn.png"); background-repeat: no-repeat; width: 58px; height: 92px; cursor: pointer; }
.cl_btnPagePrev:active { background-image: url("../images/prevBtn_hover.png"); }
.cl_btnPagePrev.on { background-image: url("../images/prevBtn_on.png"); }
.cl_btnPagePrev.dis { background-image: url("../images/prevBtn_dis.png"); pointer-events: none; }

.cl_btnPageNext { position: absolute; top: 50%; right: 0; transform: translateY(-50%); background-image: url("../images/nextBtn.png"); background-repeat: no-repeat; width: 58px; height: 92px; cursor: pointer; }
.cl_btnPageNext:active { background-image: url("../images/nextBtn_hover.png"); }
.cl_btnPageNext.on { background-image: url("../images/nextBtn_on.png"); }
.cl_btnPageNext.dis { background-image: url("../images/nextBtn_dis.png"); pointer-events: none; }




/*팝업*/
.cl_classTipPopup {  display: none; position: absolute; top: 90px; right: 31px; border-radius: 30px; border: 3px solid #7070EF; background: #FFF;
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.25); padding: 30px 40px; box-sizing: border-box; z-index: 6; }
.cl_classTipPopup .text { position: relative; font-size: 36px; font-family: "PretendardB"; margin-bottom: 30px; text-indent: 5px; padding-left: 25px; }
.cl_classTipPopup .text:nth-last-child(1) { margin-bottom: 0; }
.cl_classTipPopup .text:before { content: ''; position: absolute; top: 12px; left: 0; width: 12px; height: 12px; background-color: #9797ff; border-radius: 50%; }

/*팝업닫기버튼*/
.cl_btnClosePopup { position: absolute; right: 0; background: url("../images/closePopupBtn.png")no-repeat; width: 91px; height: 91px; cursor: pointer; z-index: 1; }
.cl_btnClosePopup:active { background: url("../images/closePopupBtn_hover.png")no-repeat; }

/*힌트듣기버튼*/
.cl_btnListenHint { position: absolute; left: 20px; bottom: 0; display: inline-block; background: url("../images/listenHintBtn.png")no-repeat; width: 80px; height: 94px; cursor: pointer;  z-index: 9;}
/*.cl_listenHintBtn:active { position: relative; }*/
/*.cl_listenHintBtn:active:after { content: ''; position: absolute; top: -51px; left: -16px; background: url("../images/listenHintBtn_hover.png")no-repeat; width: 112px; height: 145px; }*/
.cl_btnListenHint.playing { animation: scaleButton 1s infinite alternate; }

/*발표배경 버튼*/
.cl_btnPresentationBg { position: absolute; bottom: 29px; left: 119px; background-image: url("../images/presentationBgBtn.png"); background-repeat: no-repeat; width: 243px; height: 70px; cursor: pointer; }

/*대화듣기 버튼*/
.cl_btnConversation { position: absolute; top: 12px; left: 12px; background-image: url("../images/conversationButton.png"); background-repeat: no-repeat; width: 236px; height: 74px; cursor: pointer; }
.cl_btnConversation:active { background-image: url("../images/conversationButton_hover.png"); }

.cl_btnConRepeat { position: absolute; top: 12px; left: 12px; background-image: url("../images/btnConversationRepeat.png"); background-repeat: no-repeat; width: 235px; height: 74px; cursor: pointer; }
.cl_btnConRepeat:active { background-image: url("../images/btnConversationRepeat_hover.png"); }



/*AI작명소 버튼*/
.cl_btnAIMakeName { position: absolute; bottom: 62px; right: 98px; background-image: url("../images/makeNameBtn.png"); background-repeat: no-repeat; width: 276px; height: 201px; cursor: pointer; }

/*띵커벨 버튼*/
.cl_btnThinkerBell { position: absolute; top: 157px; right: 56px; background-image: url("../images/ThinkerBellButton.png"); background-repeat: no-repeat; width: 289px; height: 77px; cursor: pointer; }
.cl_btnThinkerBell:active { background-image: url("../images/ThinkerBellButton_hover.png"); }

/*노래듣기버튼*/
.cl_btnListenSong { position: absolute; right: 93px; top: 12px; display: inline-block; background: url("../images/cl_btnListenSong.png")no-repeat; width: 62px; height: 62px; cursor: pointer; }
.cl_btnStopSong { position: absolute; right: 20px; top: 12px; display: inline-block; background: url("../images/cl_btnStopSong.png")no-repeat; width: 62px; height: 62px; cursor: pointer; }
.cl_btnStopSong:active { background: url("../images/cl_btnStopSong_hover.png")no-repeat; }

/*손가락클릭버튼*/
.cl_btnFingerClick { position: absolute; bottom: 13px; right: 18px; background-image: url("../images/fingerBtn.png"); background-repeat: no-repeat; width: 82px; height: 82px; cursor: pointer; }
.cl_btnFingerClick:activer { background-image: url("../images/fingerBtn_hover.png"); }

/*하트버튼*/
.cl_btnHeart { background: url("../images/heartIcon.png")no-repeat; width: 91px; height: 86px; cursor: pointer; z-index: 2; }
.cl_btnHeart.on { background: url("../images/heartIcon_on.png")no-repeat; }

/*정답확인 다시하기버튼*/
.cl_btnAns { background: url("../images/ansbtn.png")no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnAns:active { background: url("../images/ansbtn_hover.png")no-repeat; }
.cl_btnAns.re { background: url("../images/rebtn.png")no-repeat; }
.cl_btnAns.re:active { background: url("../images/rebtn_hover.png")no-repeat; }

.cl_btnReBig { background: url("../images/cl_btnAns_Big.png")no-repeat; width: 274px; height: 80px; cursor: pointer; }
.cl_btnReBig:active { background: url("../images/cl_btnAns_Big_hover.png")no-repeat;width: 274px; height: 80px; }

.cl_btnAnsCheck { position: absolute; left: 359px; top: 175px; background-image: url("../images/individualAns.png"); background-repeat: no-repeat; cursor: pointer; width: 60px; height: 60px; }
.cl_btnAnsCheck.re { background-image: url("../images/individualRe.png"); }
.cl_btnAnsCheck:active { background-image: url("../images/individualAns_hover.png"); background-size: 60px; }
.cl_btnAnsCheck.re:active { background-image: url("../images/individualRe_hover.png"); background-size: 60px; }

/*다음문제버튼*/
.cl_btnNextQue { background: url("../images/nextQueBtn.png")no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnNextQue:active { background: url("../images/nextQueBtn_hover.png")no-repeat; }

/*따라말하기버튼*/
.cl_btnRepeatSpeak { background: url("../images/repeatSpeakBtn.png")no-repeat; width: 308px; height: 77px; cursor: pointer; }
.cl_btnRepeatSpeak:active { background: url("../images/repeatSpeakBtn_hover.png")no-repeat; }

/*칭찬하기버튼*/
.cl_btnPraise { background: url("../images/praiseBtn.png")no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnPraise:active { background: url("../images/praiseBtn_hover.png")no-repeat; }

/*예시듣기 버튼*/
.cl_btnListenEx { background-image: url("../images/listenEx.png"); background-repeat: no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnListenEx:active { background-image: url("../images/listenEx_hover.png");  }

/*시작하기버튼*/
.cl_btnStart { background: url("../images/startBtn.png")no-repeat; width: 274px; height: 85px; cursor: pointer; }
.cl_btnStart:active { background: url("../images/startBtn_hover.png")no-repeat; }
.cl_btnStart.re { background: url("../images/reBtnType2.png")no-repeat; }
.cl_btnStart.re:active { background: url("../images/reBtnType2_hover.png")no-repeat; }

/*깃발 시작하기 버튼*/
.cl_btnFlagStart { position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%); background-image: url("../images/flagStartButton.png"); background-repeat: no-repeat; width: 274px; height: 80px; cursor: pointer; }
.cl_btnFlagStart:active { background-image: url("../images/flagStartButton_hover.png")no-repeat; }

/*역할바꾸기 버튼*/
.cl_btnChangeRole { position: absolute; top: 10px; right: 10px; background-image: url("../images/changeRole.png"); background-repeat: no-repeat; width: 226px; height: 73px; cursor: pointer; }
.cl_btnChangeRole:active { background-image: url("../images/changeRole_hover.png")no-repeat; }


/*박수치기버튼*/
.cl_btnClap { background: url("../images/clapBtn.png")no-repeat; width: 284px; height: 77px; cursor: pointer; }
.cl_btnClap:active { background: url("../images/clapBtn_hover.png")no-repeat; }

.cl_btnClap.type2 { background: url("../images/clapBtnType2.png")no-repeat; width: 256px; height: 77px; cursor: pointer; }
.cl_btnClap.type2:active { background: url("../images/clapBtnType2_hover.png")no-repeat; }

/*이해하기 버튼*/
.cl_btnUnderstand { background: url("../images/understandBtn.png")no-repeat; width: 233px; height: 70px; cursor: pointer; margin-top: 5px; }
.cl_btnUnderstand:active { background: url("../images/understandBtn_hover.png")no-repeat; }

/*생성하기 버튼*/
.cl_btnCreate { position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%); background-image: url("../images/createBtn.png"); background-repeat: no-repeat; width: 274px; height: 77px; cursor: pointer; pointer-events: none; }
.cl_btnCreate:active { background-image: url("../images/createBtn_hover.png"); }
.cl_btnCreate.on { background-image: url("../images/reCreate.png"); }
.cl_btnCreate.on:active { background-image: url("../images/reCreate.png"); }

/*영상보기 버튼*/
.cl_btnViewVideo { background: url("../images/btnViewVideo.png")no-repeat; width: 235px; height: 74px; cursor: pointer; }
.cl_btnViewVideo:active { background: url("../images/btnViewVideo_hover.png")no-repeat; }
.cl_btnViewVideo.on { background: url("../images/btnViewVideo_on.png")no-repeat; }

/*따라말하기 버튼*/
.cl_btnRepeatSpeak.type2 { background: url("../images/btnRepeatSpeakType2.png")no-repeat; width: 268px; height: 74px; cursor: pointer; }
.cl_btnRepeatSpeak.type2:active { background: url("../images/btnRepeatSpeakType2_hover.png")no-repeat; }
.cl_btnRepeatSpeak.type2.on { background: url("../images/btnRepeatSpeakType2_on.png")no-repeat; }

/*CriticalThink 버튼*/
.cl_btnCriticalThink { background: url("../images/btnCriticalThink.png")no-repeat; width: 429px; height: 84px; cursor: pointer; }
.cl_btnCriticalThink:active { background: url("../images/btnCriticalThink_hover.png")no-repeat; }

/*닫기 버튼*/
.cl_btnClose { background: url("../images/btnClose.png")no-repeat; width: 76px; height: 76px; cursor: pointer; position: absolute; right: -40px; top: -40px; z-index: 1; }
.cl_btnClose:active { background: url("../images/btnClose_hover.png")no-repeat; }

/*활동자료 버튼*/
.cl_btnResourceDown { background: url("../images/btnResourceDown.png")no-repeat; width: 243px; height: 70px; position: absolute; right: 105px; top: 40px; cursor: pointer; }
.cl_btnResourceDown:active { background: url("../images/btnResourceDown_hover.png")no-repeat; }

/*스피커 버튼*/
.cl_btnSpeaker { display: inline-block; vertical-align: -20px; background: url("../images/btnSpeakerType1.png")no-repeat; width: 79px; height: 68px; cursor: pointer; margin: 0 20px; box-sizing: border-box; }
.cl_btnSpeaker:active { background: url("../images/btnSpeakerType1_hover.png")no-repeat; }
.cl_btnSpeaker.on { background: url("../images/btnSpeakerType1_hover.png")no-repeat; }
.cl_btnSpeaker.on.playing { animation: scaleButton 1s infinite alternate; }

.cl_btnSpeakerVol { background: url("../images/speakerVolBtn.png")no-repeat; width: 91px; height: 91px; cursor: pointer;}

/*리뷰 대본버튼*/
.cl_btnScript { background-image: url("../images/scriptButton.png"); background-repeat: no-repeat; width: 154px; height: 73px; cursor: pointer; }


/*라운드사각버튼*/
.cl_btnRoundRect {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 72px;
    height: 72px;
    font-size:46px;
    color:#565656;
    font-family:Jalnan;
    border-radius: 20px;
    box-shadow: 0px 3px 0px 0px rgba(255, 255, 255, 0.25) inset, 0px -2px 0px 0px rgba(0, 0, 0, 0.25) inset;
    border: 2px solid rgba(0, 0, 0, 0.10);
    cursor:pointer;
    background-color: #D4D4D4;
}
.cl_btnRoundRect:hover {background-color:#FBFBFB;}
.cl_btnRoundRect.on {color:#ffffff; background-color:#30AFBC;}



@keyframes scaleButton {
    0% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.cl_btnSpeaker.type2 { background: url("../images/btnSpeakerType2.png")no-repeat; width: 82px; height: 82px; }
.cl_btnSpeaker.type2.none { pointer-events: none; }
.cl_btnSpeaker.type2:active { background: url("../images/btnSpeakerType2_hover.png")no-repeat; }
.cl_btnSpeaker.type2.on { background: url("../images/btnSpeakerType2_on.png")no-repeat; }
.cl_btnSpeaker.type2.on:active { background: url("../images/btnSpeakerType2_on.png")no-repeat; }

/*확인버튼*/
.cl_btnConfirm { background: url("../images/btnConfirm.png")no-repeat; width: 188px; height: 72px; cursor: pointer; margin: 0 auto; }
.cl_btnConfirm:active { background: url("../images/btnConfirm_hover.png")no-repeat; }
.cl_btnConfirm.dis { background: url("../images/btnConfirm_dis.png")no-repeat; }

/*이전버튼*/
.cl_btnPrev { background: url("../images/btnPrev.png")no-repeat; width: 188px; height: 72px; cursor: pointer; }
.cl_btnPrev:active { background: url("../images/btnPrev_hover.png")no-repeat; }
.cl_btnPrev.dis { background: url("../images/btnPrev_dis.png")no-repeat; }

/*다음버튼*/
.cl_btnNext { background: url("../images/btnNext.png")no-repeat; width: 188px; height: 72px; cursor: pointer; }
.cl_btnNext:active { background: url("../images/btnNext_hover.png")no-repeat; }
.cl_btnNext.dis { background: url("../images/btnNext_dis.png")no-repeat; }

/*오공완 시작버튼*/
.cl_btnStudyStart { display: inline-block; background: url("../images/btnStudyStart.png")no-repeat; width: 348px; height: 108px; cursor: pointer; }
.cl_btnStudyStart:active { background: url("../images/btnStudyStart_hover.png")no-repeat; }

/*미디어 탭버튼*/
.cl_btnTab { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; font-size: 36px; color: #747474; font-family: "Jalnan";
    background: #B3B1B2; border-radius: 50%; cursor: pointer; box-sizing: border-box; }
.cl_btnTab span { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; background: #D3D3D3;border-radius: 50%; box-sizing: border-box; color: #747474; }
.cl_btnTab:active { background: #F3F3F3; border: 1px solid #B3B1B2; box-sizing: border-box; }
.cl_btnTab:active span { box-sizing: border-box; background: #fff;  border: 1px solid rgba(0,0,0,0.1); }
.cl_btnTab.on { color: #fff; background: #fff; border: 1px solid #B3B1B2; box-sizing: border-box; }
.cl_btnTab.on:active { color: #fff; background: #fff; border: 1px solid #B3B1B2; box-sizing: border-box; }
.cl_btnTab.on span { color: #fff; background: #7070EF; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }
.cl_btnTab.on:active span { color: #fff; background: #7070EF; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }

/*리뷰초록색*/
.cl_btnTab.green { background-color: #B7B7B7; }
.cl_btnTab.green span { background-color: #E2E2E2;color: #747474; }
.cl_btnTab.green:active { background: #F3F3F3; border: 1px solid #B3B1B2; box-sizing: border-box; }
.cl_btnTab.green:active span { box-sizing: border-box; background: #fff;  border: 1px solid rgba(0,0,0,0.1); }
.cl_btnTab.green.on { background-color: #fff;}
.cl_btnTab.green.on span { background-color: #1BBBC1; color: #fff;  }
.cl_btnTab.green.on span { color: #fff; background: #1BBBC1; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }
.cl_btnTab.green.on:active span { color: #fff; background: #1BBBC1; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }


/*플레이 버튼*/
.cl_btnPlayRound {width:78px; height:78px; cursor: pointer; background-image:url("../images/btnPlay_round_78.png");}

/*지우개 버튼*/
.cl_btnEraserRound {width:78px; height:78px; cursor: pointer; background-image:url("../images/btnEraserRound.png");}


/*구슬버튼*/
.cl_btnPopBead { position: absolute; bottom: 27px; left: 50%; transform: translateX(-50%);
    background-image: url("../images/beadPopBtn.png"); background-repeat: no-repeat; width: 291px; height: 90px; cursor: pointer; z-index: 3; }

/*원작알아보기 버튼*/
.cl_btnOriginalCheck { position: absolute; left: 286px; bottom: 77px; background-image: url("../images/originalCheck.png"); background-repeat: no-repeat; width: 354px; height: 109px; cursor: pointer; }
.cl_btnOriginalCheck:active { background-image: url("../images/originalCheck_hover.png"); }


/***
    *****선택박스*****
***/
.cl_selectBox { position: relative; background-image: url("../images/itemBg.png"); background-repeat: no-repeat; width: 330px; height: 330px; cursor: pointer; }
.cl_selectBox.small { background-size: 290px 290px; width: 290px; height: 290px;}
.cl_selectBox.xSmall { background-size: 220px 220px; width: 220px; height: 220px;}

.cl_selectBox.oItem:active { background-image: url("../images/oItemBg_hover.png"); background-repeat: no-repeat; }
.cl_selectBox.oItem.on { background-image: url("../images/oItemBg_on.png"); background-repeat: no-repeat;}
.cl_selectBox.oItem.on:active { background-image: url("../images/oItemBg_on.png");  background-repeat: no-repeat; }

.cl_selectBox.xItem:active { background-image: url("../images/xItemBg_hover.png"); background-repeat: no-repeat; }
.cl_selectBox.xItem.on { background-image: url("../images/xItemBg_on.png"); background-repeat: no-repeat; }
.cl_selectBox.xItem.on:active { background-image: url("../images/xItemBg_on.png"); background-repeat: no-repeat; }

.cl_selectBox.numItem:active { background-image: url("../images/numItemBg_hover.png"); background-repeat: no-repeat; }
.cl_selectBox.numItem.on { background-image: url("../images/numItemBg_on.png"); background-repeat: no-repeat; }
.cl_selectBox.numItem.on:active { background-image: url("../images/numItemBg_on.png"); background-repeat: no-repeat; }

.cl_selectBox.oItem span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-image: url("../images/oItem.png");background-repeat: no-repeat; width: 170px; height: 170px; }
.cl_selectBox.oItem:active span { background-image: url("../images/oItem_on.png"); }
.cl_selectBox.oItem.on span { background-image: url("../images/oItem_on.png"); }
.cl_selectBox.oItem.on:active span { background-image: url("../images/oItem_on.png"); }

.cl_selectBox.xItem span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-image: url("../images/xItem.png"); background-repeat: no-repeat; width: 170px; height: 170px; }
.cl_selectBox.xItem:active span { background-image: url("../images/xItem_on.png"); }
.cl_selectBox.xItem.on span { background-image: url("../images/xItem_on.png"); }
.cl_selectBox.xItem.on:active span { background-image: url("../images/xItem_on.png"); }

.cl_selectBox.numItem span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 160px; font-family: "Jalnan"; color: #BCB7B7; }
.cl_selectBox.numItem:active span { color: #8484F2; }
.cl_selectBox.numItem.on span { color: #8484F2; }
.cl_selectBox.numItem.on:active span { color: #8484F2; }
.cl_selectBox.numItem.xSmall span { font-size: 120px; }

/***
    *****스크롤바*****
***/
/*::-webkit-scrollbar {*/
/*    width: 22px;  !* 세로축 스크롤바 폭 너비 *!*/
/*    !* 가로축 스크롤바 폭 너비 *!*/
/*}*/

/*::-webkit-scrollbar-thumb {*/
/*    background: #F47A1E; !* 스크롤바 막대 색상 *!*/
/*    border-radius: 80px;*/
/*    border: 1px solid #BA4F06;*/
/*    box-shadow: 0px 0px 4px 2px rgba(255, 255, 255, 0.25) inset;*/
/*}*/
/*::-webkit-scrollbar-thumb:hover {*/
/*    background: #BA4F06;*/
/*}*/
/*::-webkit-scrollbar-track {*/
/*    background: linear-gradient(to right, transparent 46%, #D9D9D9 46%, #D9D9D9 53%, transparent 53%);*/
/*    border-radius: 80px;*/
/*}*/



/*
    *** 각종 박스
*/

/*사각 라운드 박스 (드래그 아이템)*/
.cl_roundRectBox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 206px;
    height: 208px;
    font-size:120px;
    color:#000000;
    font-family:HallymGoB;
    line-height:1;
    border:solid 10px #71CBE3;
    box-sizing: border-box;
    border-radius:20px;
    background-color:#ffffff;
}
.cl_roundRectBox.off {border-color:#E0E0E0; color:#E0E0E0;}





/***
    *****clickItem*****
***/
.cl_openObject { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 172px; color: #137AE2; font-size: 68px; font-family: "PretendardB";
    border: 1px solid #dbdbdb; background: #F2F2F2; border-radius: 10px; box-sizing: border-box; cursor: pointer; }
.cl_openObject:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 10px; border: 1px solid #A7836F; background: #F8ECBF;box-shadow: 0px 6px 0px 0px rgba(255, 255, 255, 0.40) inset, 0px -6px 0px 0px rgba(0, 0, 0, 0.10) inset;  }
.cl_openObject:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url("../images/clickItem_qmIcon.png")no-repeat; width: 47px; height: 70px; }
.cl_openObject:active:before { border-radius: 10px; border: 1px solid #A7836F; background: #FCE280;box-shadow: 0px 6px 0px 0px rgba(255, 255, 255, 0.40) inset, 0px -6px 0px 0px rgba(0, 0, 0, 0.10) inset;}
.cl_openObject:active:after { background: url("../images/clickItem_qmIcon_hover.png")no-repeat; }
.cl_openObject.exam:after { background: none; content: '예시'; font-size: 80px; color: #BC6C3F;   font-family: "Jalnan"; width: auto; height: auto; }

.cl_openObject.on:before { display: none; }
.cl_openObject.on:after { display: none; }


/***
    *****불릿, 기타*****
***/

/*오늘공부내용타이틀*/
.cl_todayStudyTitle { position: absolute; bottom: 10px; left: 87px; background: url("../images/todayStudyTitle.png")no-repeat; width: 600px; height: 190px; }
.cl_todayStudyImg { position: absolute; bottom: 0; right: 0; background: url("../images/todayStudyImg.png")no-repeat; width: 860px; height: 360px; }

/*작명소 타이틀*/
.cl_namingTitle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); background-image: url("../images/namingTitle.png"); background-repeat: no-repeat; width: 472px; height: 75px; }
/*지시문*/
/*.cl_directive {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    position: absolute;*/
/*    top: 12px;*/
/*    right: 12px;*/
/*    color: rgba(0, 0, 0, 0.70);*/
/*    font-size: 30px;*/
/*    font-family: "GodoM";*/
/*    !*text-shadow: 1px 0px 0px , 0px 1px 0px #c8c8c8, -1px 0px 0px #c8c8c8, 0px -1px 0px #c8c8c8, 1px 1px 0px rgb(199, 199, 199), -1px 1px 0px #c8c8c8, -1px -1px 0px #c8c8c8, 1px -1px 0px #c8c8c8,*!*/
/*    !*2px 0px 0px #c8c8c8, 0px 2px 0px #c8c8c8, -2px 0px 0px #c8c8c8, 0px -2px 0px #c8c8c8, 2px 2px 0px #c8c8c8, -2px 2px 0px #c8c8c8, -2px -2px 0px #c8c8c8, 2px -2px 0px #c8c8c8;*!*/
/*    z-index: 2;*/
/*}*/
/*.cl_directive.white {*/
/*    text-shadow: 1px 0px 0px , 0px 1px 0px #ffffff, -1px 0px 0px #ffffff, 0px -1px 0px #ffffff, 1px 1px 0px rgb(199, 199, 199), -1px 1px 0px #ffffff, -1px -1px 0px #ffffff, 1px -1px 0px #ffffff,*/
/*    2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff, 2px 2px 0px #ffffff, -2px 2px 0px #ffffff, -2px -2px 0px #ffffff, 2px -2px 0px #ffffff;*/
/*}*/
/*.cl_directive.speaker { display:flex; align-items: center; justify-content: flex-end; position: relative; text-align: right; text-shadow: none; margin-bottom: 32px; }*/
/*.cl_directive.speaker:before {content: ''; position: absolute; left: 750px; top: 50%; transform: translateY(-50%); background: url("../images/directiveIcon.png")no-repeat; width: 21px; height: 19px;  }*/
/*.cl_directive.speaker:after {content: ''; position: absolute; left: 780px; top: 50%; transform: translateY(-50%); background: url("../images/speakerIcon_mini.png")no-repeat; width: 44px; height: 44px;  }*/

/*.cl_directive:before { content: ''; position: absolute; left: -25px; top: 50%; transform: translateY(-50%); background: url("../images/directiveIcon.png")no-repeat; width: 21px; height: 19px; }*/

/*.cl_directive .square { display: inline-block; width: 28px; height: 25px; border-radius: 5px; border: 2px solid #606060; background: #FFF; box-sizing: border-box; margin: 0 3px; }*/
.cl_directive { position: absolute; top: 12px; right: 12px; background-repeat: no-repeat; width: 284px; height: 39px; z-index: 2; }
.cl_directive.left { right: auto; left: 110px; top: 20px; }
.cl_directive.char {  background-image: url("../images/directive_char.png");  }
.cl_directive.pic {  background-image: url("../images/directive_pic.png"); width: 260px; }
.cl_directive.mission1 {  background-image: url("../images/directive_mission_1.png"); width: 436px; }
.cl_directive.blank {  background-image: url("../images/directive_blank.png"); width: 242px; }
.cl_directive.alphabet {  background-image: url("../images/directive_alphabet.png"); width: 287px; }
.cl_directive.friend {  background-image: url("../images/directive_friend.png"); width: 260px; }
.cl_directive.card {  background-image: url("../images/directive_card.png"); width: 260px; }
.cl_directive.conversation { top: 124px; background-image: url("../images/directive_conversation.png"); width: 352px; height: 48px; }
.cl_directive.repeat { top: 124px; background-image: url("../images/directive_repeat.png"); width: 352px; height: 48px; }
.cl_directive.name { top: 20px; right: 20px; background-image: url("../images/directive_name.png"); width: 260px; }
.cl_directive.english { top: 20px; right: 20px; background-image: url("../images/directive_english.png"); width: 331px; }


/*리뷰타이틀*/
.cl_reviewTitle { background-image: url("../images/reviewTitle.png"); background-repeat: no-repeat; width: 251px; height: 72px; }


/*이모티콘타이틀*/
.cl_emoticonTitle {display: flex; align-items: center; justify-content: flex-start; background-image: url("../images/emoticonTitle.png"); background-repeat: no-repeat; width: 824px; height: 133px; color: #FFF;
    font-family: "Jalnan"; font-size: 54px;font-style: normal;font-weight: 700;line-height: 130%; /* 70.2px */letter-spacing: -0.54px;
    text-shadow: 3px 0px 0px #15AFB7, 0px 3px 0px #15AFB7, -3px 0px 0px #15AFB7, 0px -3px 0px #15AFB7, 3px 3px 0px #15AFB7, -3px 3px 0px #15AFB7, -3px -3px 0px #15AFB7, 3px -3px 0px #15AFB7,
    2px 0px 0px #15AFB7, 0px 2px 0px #15AFB7, -2px 0px 0px #15AFB7, 0px -2px 0px #15AFB7, 2px 2px 0px #15AFB7, -2px 2px 0px #15AFB7, -2px -2px 0px #15AFB7, 2px -2px 0px #15AFB7,
    3px 0px 0px #15AFB7, 0px 3px 0px #15AFB7, -3px 0px 0px #15AFB7, 0px -3px 0px #15AFB7, 3px 3px 0px #15AFB7, -3px 3px 0px #15AFB7, -3px -3px 0px #15AFB7, 3px -3px 0px #15AFB7;
    padding-right: 60px; box-sizing: border-box;; padding-left: 250px;
}
.cl_emoticonTitle.type2 { background-image: url("../images/emoticonTitle_2.png"); }

    /*오공완 아이콘*/
.cl_todayStudyIcon { background: url("../images/todayStudyIcon.png")no-repeat; width: 198px; height: 86px; position: absolute; bottom: 10px; left: 80px; }
.cl_todayStudyIcon.grade4 { background: url("../images/todayIcon_1.png")no-repeat; bottom: 10px; left: 80px; }

.cl_correctMo { display: none; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-image: url("../images/todayStudyOMo.png"); background-repeat: no-repeat; width: 510px; height: 220px; }
.cl_failMo { display: none; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); background-image: url("../images/todayStudyXMo.png"); background-repeat: no-repeat; width: 510px; height: 220px; }

/*불릿*/
.cl_bulletBubble.green { background: url("../images/bubbleBullet_green.png")no-repeat; width: 67px; height: 57px; margin-top: 15px; }
.cl_bulletBubble.blue { background: url("../images/bubbleBullet_blue.png")no-repeat; width: 60px; height: 64px; margin-top: 10px; }

.cl_bulletSquare { background: url("../images/squareBullet_purple.png")no-repeat; width: 62px; height: 62px; }

.cl_bulletDia.brown { background: url("../images/diaBullet_brown.png")no-repeat; width: 62px; height: 62px; margin-top: 25px; }
.cl_bulletDia.green { background: url("../images/diaBullet_green.png")no-repeat; width: 62px; height: 62px; margin-top: 25px; }
.cl_bulletDia.purple { background: url("../images/diaBullet_purple.png")no-repeat; width: 62px; height: 62px; margin-top: 25px; }

/*리뷰블릿*/
.cl_bulletReview { background-image: url("../images/reviewtitlebullet.png"); background-repeat: no-repeat; width: 78px; height: 75px;
    font-size: 46px; color: #FFF; text-align: center; text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.20);  font-family: "Jalnan"; padding-top: 8px; box-sizing: border-box; margin-top: 10px; }


/*컨텐트 숫자*/
.cl_contentNum { width: 70px; height: 70px; border-radius: 50%; background: #A5DFE5; border: 4px solid #78CCD4;
    color: #FFF; text-align: center; display: flex; align-items: center; justify-content: center;
    text-shadow: 0px 0px 0px #749da1, 0px 0px 0px #749da1, -0px 0px 0px #749da1, 0px -0px 0px #749da1, 0px 0px 0px #749da1, -0px 0px 0px #749da1, -0px -0px 0px #749da1, 0px -0px 0px #749da1,
    1px 0px 0px #749da1, 0px 1px 0px #749da1, -1px 0px 0px #749da1, 0px -1px 0px #749da1, 1px 1px 0px #749da1, -1px 1px 0px #749da1, -1px -1px 0px #749da1, 1px -1px 0px #749da1,
    2px 0px 0px #749da1, 0px 2px 0px #749da1, -2px 0px 0px #749da1, 0px -2px 0px #749da1, 2px 2px 0px #749da1, -2px 2px 0px #749da1, -2px -2px 0px #749da1, 2px -2px 0px #749da1;
    font-family: "Jalnan"; font-size: 36px; }
.cl_contentNum.small { width: 55px; height: 55px; }
.cl_contentNum.blue { border: 0; background-color: #28C3F2;
    text-shadow: 0px 0px 0px #1c89aa, 0px 0px 0px #1c89aa, -0px 0px 0px #1c89aa, 0px -0px 0px #1c89aa, 0px 0px 0px #1c89aa, -0px 0px 0px #1c89aa, -0px -0px 0px #1c89aa, 0px -0px 0px #1c89aa,
    1px 0px 0px #1c89aa, 0px 1px 0px #1c89aa, -1px 0px 0px #1c89aa, 0px -1px 0px #1c89aa, 1px 1px 0px #1c89aa, -1px 1px 0px #1c89aa, -1px -1px 0px #1c89aa, 1px -1px 0px #1c89aa,
    2px 0px 0px #1c89aa, 0px 2px 0px #1c89aa, -2px 0px 0px #1c89aa, 0px -2px 0px #1c89aa, 2px 2px 0px #1c89aa, -2px 2px 0px #1c89aa, -2px -2px 0px #1c89aa, 2px -2px 0px #1c89aa;
}
.cl_contentNum.gray { border-color: #686B8B; background-color: #7B7EA3;
    text-shadow: 0px 0px 0px #565872, 0px 0px 0px #565872, -0px 0px 0px #565872, 0px -0px 0px #565872, 0px 0px 0px #565872, -0px 0px 0px #565872, -0px -0px 0px #565872, 0px -0px 0px #565872,
    1px 0px 0px #565872, 0px 1px 0px #565872, -1px 0px 0px #565872, 0px -1px 0px #565872, 1px 1px 0px #565872, -1px 1px 0px #565872, -1px -1px 0px #565872, 1px -1px 0px #565872,
    2px 0px 0px #565872, 0px 2px 0px #565872, -2px 0px 0px #565872, 0px -2px 0px #565872, 2px 2px 0px #565872, -2px 2px 0px #565872, -2px -2px 0px #565872, 2px -2px 0px #565872;
}


/*이미지 마크*/
.cl_imgMark {
    position: absolute;
    left: 0;
    top: 0;
    background: url("../images/imgMark.png") no-repeat;
    width: 118px;
    height: 118px;
    text-shadow: 1px 0px 0px #747474, 0px 1px 0px #747474, -1px 0px 0px #747474, 0px -1px 0px #747474, 1px 1px 0px #747474, -1px 1px 0px #747474, -1px -1px 0px #747474, 1px -1px 0px #747474,
    2px 0px 0px #747474, 0px 2px 0px #747474, -2px 0px 0px #747474, 0px -2px 0px #747474, 2px 2px 0px #747474, -2px 2px 0px #747474, -2px -2px 0px #747474, 2px -2px 0px #747474;
    font-family: "Jalnan";
    font-size: 38px;
    color: #fff;
    box-sizing: border-box;
    padding: 17px;
    cursor: pointer;
}
.cl_imgMark:active { background: url("../images/imgMark_hover.png")no-repeat; }
.cl_imgMark.on { background: url("../images/imgMark_on.png")no-repeat; }

/*라인이미지*/

.cl_imgLine { display: inline-flex; position: relative; border: 10px solid #EAE8E8; border-radius: 40px; box-sizing: border-box; }
.cl_imgLine:active { border: 10px solid #cacafc; }
.cl_imgLine img { border-radius: 30px; display: block; }
.cl_imgLine .cl_imgMark { background: url("../images/imgMark.png")no-repeat; }
.cl_imgLine:active .cl_imgMark { background: url("../images/imgMark_hover.png")no-repeat; }

.cl_imgSelect { position: relative; border-radius: 40px; border: 10px solid #EAE8E8; box-sizing: border-box; cursor: pointer; }
.cl_imgSelect:active { border-color: #cacafc; }
.cl_imgSelect.on { border-color: #8484F2; }
.cl_imgSelect.on:active { border-color: #8484F2; }

.cl_imgSelect .text { font-size: 110px; font-family: "PretendardB"; }
.cl_imgSelect.on .cl_imgMark { background: url("../images/imgMark_on.png")no-repeat; }
.cl_imgSelect.on:active .cl_imgMark { background: url("../images/imgMark_on.png")no-repeat; }
.cl_imgSelect:active .cl_imgMark { background: url("../images/imgMark_hover.png")no-repeat; }
.cl_imgSelect img { display: block; border-radius: 30px; }

.cl_imgSelect.typeText {  width: 576px; height: 217px; display: flex; align-items: center; justify-content: center; font-size: 90px; font-family: "PretendardB"; }

/*오공완 섹렉트 텍스트*/
.cl_textSelect { display: flex; align-items: center; gap: 30px; cursor: pointer; }
.cl_textSelect .text span { position: relative; font-size: 60px; font-family: "PretendardB"; padding-right: 50px; }
.cl_textSelect .text span:before { content: ''; position: absolute; top: 50%; right: 10px; width: 30px; height: 3px; background-color: #000; }
.cl_textSelect .text span:nth-last-child(1):before { display: none; }

.cl_textSelect:hover .cl_contentNum.gray { background-color: #8484F2; border-color: #6D6DDB; }
.cl_textSelect:hover .text span { color: #8484F2; }
.cl_textSelect:hover .text span:before { background-color: #8484F2; }

.cl_textSelect.on .cl_contentNum.gray { background-color: #8484F2; border-color: #6D6DDB; }
.cl_textSelect.on .text span { color: #8484F2; }
.cl_textSelect.on .text span:before { background-color: #8484F2; }

.cl_textSelect.correct .cl_contentNum.gray { background-color: #137AE2; border-color: #116AC3; }
.cl_textSelect.correct .text span { color: #137AE2; }
.cl_textSelect.correct .text span:before { background-color: #8484F2; }

/*돌아가는 카드*/

.cl_cardTurnWrap .card { position:relative;  width: 668px; height: 628px; cursor: pointer; }
.cl_cardTurnWrap .card .cardFront {
    position: absolute;
    top: 0;
    left: 0;
    display:flex;
    justify-content: center;
    align-items: center;
    /*transform: scaleX(0);*/
    background-image: url("../images/sampleImg_2.png");
    width: 668px;
    height: 628px;
    transform-origin: center center;
    border: 10px solid #EAE8E8; border-radius: 42px;
}
.cl_cardTurnWrap .card:hover .cardFront { border: 10px solid #137AE2;  border-radius: 42px; }


.cl_cardTurnWrap .card .cardBack {
    transform: scaleX(0);
    position: absolute; top: 0; left: 0; display:flex; justify-content: center; align-items: center; font-size: 72px; font-family: "PretendardB"; text-align: center;
    transform-origin: center center; background:rgba(255,255,255,0.7); width: 688px; height: 648px;   box-sizing: border-box; border-radius: 42px;
}
.cl_cardTurnWrap .card .cardBack:before { background-image: url("../images/cardBackBg_1.png"); background-repeat: no-repeat;
    width: 100%; height: 100%; border-radius: 30px; content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    /*background-size: 100% 100%;*/
}
/*.cl_cardTurnWrap .card .cardBack:after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; background-color: rgba(218, 236, 255, 0.90); border-radius: 42px; }*/

.cl_cardTurnWrap .card .cardBack img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block;}
.cl_cardTurnWrap .card .cardBack .text { z-index: 2; }


/*카드오픈*/
.cl_cardTurnWrap .card.open .cardFront {
    animation-name: cardOpenBack;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
.cl_cardTurnWrap .card.open .cardFront > img { width:668px; height:628px; object-fit: contain; object-position: center center;}
.cl_cardTurnWrap .card.open .cardBack {
    transform:scaleX(0);
    animation-name: cardOpenFront;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    animation-timing-function: ease-out;
}

/*!*카드오픈 애니메이션*!*/
@keyframes cardOpenFront {
    0% {transform:scaleX(0); filter: brightness(1.05)}
    60% {transform:scaleX(1); filter: brightness(1)}
    /*85% {transform:scaleX(0.85); filter: brightness(0.90)}*/
    /*89% {transform:scaleX(0.9); filter: brightness(0.95)}*/
    100% {transform:scaleX(1);}
}

@keyframes cardOpenBack {
    0% {transform:scaleX(1);}
    100% {transform:scaleX(0); filter: brightness(0.6)}
}

/*카드클로즈*/
.cl_cardTurnWrap .card.close .cardBack {
    transform:scaleX(0);
    animation-name: cardCloseBack;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    animation-timing-function: ease-out;
}
.cl_cardTurnWrap .card.close .cardFront > img {width:668px; height:628px; object-fit: contain; object-position: center center;}
.cl_cardTurnWrap .card.close .cardFront {
    animation-name: cardCloseFront;
    animation-duration: 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
}
/*!*카드클로즈 애니메이션*!*/
@keyframes cardCloseFront {
    0% {transform:scaleX(1);}
    100% {transform:scaleX(0); filter: brightness(0.6)}
}

@keyframes cardCloseBack {
    0% {transform:scaleX(0); filter: brightness(1.05)}
    60% {transform:scaleX(1); filter: brightness(1)}
    85% {transform:scaleX(0.85); filter: brightness(0.90)}
    89% {transform:scaleX(0.9); filter: brightness(0.95)}
    100% {transform:scaleX(1);}
}


/*
    *** 캐릭터
*/

/*캐릭터 공통*/
.cl_character {
    cursor: pointer;
    border: 4px solid #D9D9D9;
    border-radius: 50%;
    box-sizing: border-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #fff;
}
.cl_character.on {border-color: #7070EF;}

/*캐릭터 사이즈*/
.cl_character.small {width: 70px; height: 70px; background-size:70px;}
.cl_character.mid {width: 140px; height: 140px; background-size:140px;}

/*캐릭터 유형 - normal*/
.cl_character.type1 {background-image: url("../images/char1_g.png");}
.cl_character.type2 {background-image: url("../images/char2_g.png");}
.cl_character.type3 {background-image: url("../images/char3_g.png");}
.cl_character.type4 {background-image: url("../images/char4_g.png");}
.cl_character.type5 {background-image: url("../images/char5_g.png");}
.cl_character.type6 {background-image: url("../images/char6_g.png");}
.cl_character.type7 {background-image: url("../images/char7_g.png");}
.cl_character.type8 {background-image: url("../images/char8_g.png");}
.cl_character.type9 {background-image: url("../images/char9_g.png");}
.cl_character.type10 {background-image: url("../images/char10_g.png");}
.cl_character.type11 {background-image: url("../images/char11_g.png");}
.cl_character.type12 {background-image: url("../images/char12_g.png");}
.cl_character.type13 {background-image: url("../images/char13_g.png");}
.cl_character.type14 {background-image: url("../images/char14_g.png");}
.cl_character.type15 {background-image: url("../images/char15_g.png");}
.cl_character.type16 {background-image: url("../images/char16_g.png");}
.cl_character.type17 {background-image: url("../images/char17_g.png");}
.cl_character.type18 {background-image: url("../images/char18_g.png");}
.cl_character.type19 {background-image: url("../images/char19_g.png");}
.cl_character.type20 {background-image: url("../images/char20_g.png");}

/*캐릭터 유형 - on*/
.cl_character.type1 {background-image: url("../images/char1.png");}
.cl_character.type2 {background-image: url("../images/char2.png");}
.cl_character.type3 {background-image: url("../images/char3.png");}
.cl_character.type4 {background-image: url("../images/char4.png");}
.cl_character.type5 {background-image: url("../images/char5.png");}
.cl_character.type6 {background-image: url("../images/char6.png");}
.cl_character.type7 {background-image: url("../images/char7.png");}
.cl_character.type8 {background-image: url("../images/char8.png");}
.cl_character.type9 {background-image: url("../images/char9.png");}
.cl_character.type10 {background-image: url("../images/char10.png");}
.cl_character.type11 {background-image: url("../images/char11.png");}
.cl_character.type12 {background-image: url("../images/char12.png");}
.cl_character.type13 {background-image: url("../images/char13.png");}
.cl_character.type14 {background-image: url("../images/char14.png");}
.cl_character.type15 {background-image: url("../images/char15.png");}
.cl_character.type16 {background-image: url("../images/char16.png");}
.cl_character.type17 {background-image: url("../images/char17.png");}
.cl_character.type18 {background-image: url("../images/char18.png");}
.cl_character.type19 {background-image: url("../images/char19.png");}
.cl_character.type20 {background-image: url("../images/char20.png");}



/*큰사이즈*/
.cl_character.big {
    width: 280px;
    height: 280px;
    box-sizing: border-box;
    border:none;
    background-repeat: no-repeat;
}
.cl_character.big.type1 { background-image: url("../images/cha1_big.png"); }
.cl_character.big.type2 { background-image: url("../images/cha2_big.png"); }
.cl_character.big.type3 { background-image: url("../images/cha3_big.png"); }
.cl_character.big.type4 { background-image: url("../images/cha4_big.png"); }

.cl_character.big.type1.on { background-image: url("../images/cha1_big_on.png") !important; }
.cl_character.big.type2.on { background-image: url("../images/cha2_big_on.png") !important; }
.cl_character.big.type3.on { background-image: url("../images/cha3_big_on.png") !important; }
.cl_character.big.type4.on { background-image: url("../images/cha4_big_on.png") !important; }


/*대화캐릭터*/
/*공통*/
.cl_conversationChar { background-repeat: no-repeat; cursor: pointer; background-position: center center; width: 164px; height: 164px; border-radius: 50%; box-sizing: border-box; }
/*칼라*/
.cl_conversationChar.yellow { background-color: #F7E445; border: 8px solid #F7E445; }
.cl_conversationChar.blue { background-color: #B7DEFA; border: 8px solid #B7DEFA; }
.cl_conversationChar.green { background-color: #94D364; border: 8px solid #94D364; }
/*사이즈*/
.cl_conversationChar { background-size: 127px 147px; }
.cl_conversationChar.blue { background-size: 106px 145px; }
.cl_conversationChar.small { width: 80px; height: 80px; background-size: 62px 72px; background-color: #BDBDBD; border: 3px solid #A5A5A5; }
.cl_conversationChar.blue.small { width: 80px; height: 80px; background-size: 51px 72px; }
.cl_conversationChar.greeb.small { width: 77px; height: 77px; background-size: 77px 77px; }

.cl_conversationChar.type1 { background-image: url("../images/charCon_1_on.png"); }
.cl_conversationChar.type2 { background-image: url("../images/charCon_2_on.png"); }
.cl_conversationChar.type3 { background-image: url("../images/charCon_3_on.png"); }
.cl_conversationChar.type4 { background-image: url("../images/charCon_4_on.png"); }
.cl_conversationChar.type5 { background-image: url("../images/charCon_5_on.png"); }
.cl_conversationChar.type6 { background-image: url("../images/charCon_6_on.png"); }
.cl_conversationChar.type7 { background-image: url("../images/charCon_7_on.png"); }

.cl_conversationChar.type1.on { background-image: url("../images/charCon_1.png"); }
.cl_conversationChar.type2.on { background-image: url("../images/charCon_2.png"); }
.cl_conversationChar.type3.on { background-image: url("../images/charCon_3.png"); }
.cl_conversationChar.type4.on { background-image: url("../images/charCon_4.png"); }
.cl_conversationChar.type5.on { background-image: url("../images/charCon_5.png"); }
.cl_conversationChar.type6.on { background-image: url("../images/charCon_6.png"); }
.cl_conversationChar.type7.on { background-image: url("../images/charCon_7.png"); }

.cl_conversationChar.small.type1 { background-image: url("../images/charCon_1.png"); }
.cl_conversationChar.small.type2 { background-image: url("../images/charCon_2.png"); }
.cl_conversationChar.small.type3 { background-image: url("../images/charCon_3.png"); }
.cl_conversationChar.small.type4 { background-image: url("../images/charCon_4.png"); }
.cl_conversationChar.small.type5 { background-image: url("../images/charCon_5.png"); }
.cl_conversationChar.small.type6 { background-image: url("../images/charCon_6.png"); }
.cl_conversationChar.small.type7 { background-image: url("../images/charCon_7.png"); }
.cl_conversationChar.small.type1.on { background-image: url("../images/charCon_1_on.png"); background-color: #F7E445; border: 3px solid #F7E445; }
.cl_conversationChar.small.type2.on { background-image: url("../images/charCon_2_on.png"); background-color: #F7E445; border: 3px solid #F7E445; }
.cl_conversationChar.small.type3.on { background-image: url("../images/charCon_3_on.png"); background-color: #F7E445; border: 3px solid #F7E445; }
.cl_conversationChar.small.type4.on { background-image: url("../images/charCon_4_on.png"); background-color: #B7DEFA; border: 3px solid #B7DEFA; }
.cl_conversationChar.small.type5.on { background-image: url("../images/charCon_5_on.png"); background-color: #B7DEFA; border: 3px solid #B7DEFA; }
.cl_conversationChar.small.type6.on { background-image: url("../images/charCon_6_on.png"); background-color: #B7DEFA; border: 3px solid #B7DEFA; }
.cl_conversationChar.small.type7.on { background-image: url("../images/charCon_7_on.png"); background-color: #94D364; border: 3px solid #94D364; }



/*
    ***말풍선
*/
.cl_balloon { display: none; position: relative; font-size: 72px; font-family: "NanumGoB"; letter-spacing: -0.72px; padding: 34px 40px; box-sizing: border-box;
    border-radius: 20px;border: 8px solid #F7D6A6;background: #FFF; }
.cl_balloon:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 28px solid transparent;
    border-right-color: #F7D6A6;border-left: 0;margin-top: -28px;margin-left: -28px;}

.cl_balloon.type2 { border-radius: 20px;border: 8px solid #9FD7AD; }
.cl_balloon.type2:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 28px solid transparent;
    border-right-color: #9FD7AD;border-left: 0;margin-top: -28px;margin-left: -28px;}

.cl_balloon.type3 { border-radius: 20px;border: 8px solid #B5BAF5;background: #FFF; }
.cl_balloon.type3:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 28px solid transparent;
    border-right-color: #B5BAF5;border-left: 0;margin-top: -28px;margin-left: -28px;}

.cl_balloon.type4 { border-radius: 20px;border: 8px solid #90D3EB;background: #FFF; }
.cl_balloon.type4:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 28px solid transparent;
    border-right-color: #90D3EB;border-left: 0;margin-top: -28px;margin-left: -28px;}

/*대본말풍선*/
.cl_balloon.script { display: inline-block; background: #EEEDF7; border: none; padding: 16px 48px; }
.cl_balloon.script:after {content: '';position: absolute;left: 0;top: 50%;width: 0;height: 0;border: 20px solid transparent;
    border-right-color: #EEEDF7;border-left: 0;margin-top: -20px;margin-left: -20px;}

/*대화듣기 말풍선*/
.cl_balloonConversation { position: relative; display: inline-flex; font-size: 72px; font-family: "PretendardB"; padding: 24px 80px; box-sizing: border-box; border-radius: 200px; z-index: 2; }
/*칼라*/
.cl_balloonConversation.green { background-color: #A0E36D; }
.cl_balloonConversation.yellow { background-color: #F7E445; }
.cl_balloonConversation.blue { background-color: #B7DEFA; }
.cl_balloonConversation:before {content: '';position: absolute;left: -13px;bottom: 12px; background-repeat: no-repeat; width: 45px; height: 23px; z-index:0; }
.cl_balloonConversation.green:before { background-image: url("../images/balloonLeft_1.png"); }
.cl_balloonConversation.yellow:before { background-image: url("../images/balloonRight.png"); left: auto; right: -13px; }
.cl_balloonConversation.blue:before { background-image: url("../images/balloonLeft_2.png"); }
/*활성화*/
.cl_balloonConversation.on { border: 8px solid #137AE2; box-sizing: border-box; }
.cl_balloonConversation.left.on:before { background-image: url("../images/balloonLeft1_on.png"); left: -23px; bottom: 20px; }
.cl_balloonConversation.right.on:before { background-image: url("../images/balloonRight1_on.png"); right: -26px; bottom: 20px; }

/*볼륨말풍선*/
.cl_volumeBalloon { background-image: url("../images/volumeBalloon.png"); background-repeat: no-repeat; width: 79px; height: 175px; filter: drop-shadow(0px 0px 10px #fff) }
.cl_volumeBalloon .bar { width: 19px; height: 114px; background: #000; border-radius: 30px; position: absolute; top: 48%; left: 50%; transform: translate(-50%,-50%); }
.cl_volumeBalloon .bar .activeBar { height: 40%; width: 100%; background: #FF7E27; border-radius: 30px; position: absolute; bottom: 0; }
.cl_volumeBalloon .bar .activeBar .controller { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 51px; height: 32px;
    background-image: url("../images/volumeController.png"); background-repeat: no-repeat; cursor: pointer; }

/***
    *****text 레이아웃*****
***/
.cl_sectionTitle { display: flex; align-items: flex-start; gap: 32px; color: #000; font-size: 72px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; }
.cl_sectionTitle.between { width: 100%; justify-content: space-between; }
.cl_sectionTitle .text { flex: 1; line-height:1.3; }

.cl_bulletTitle { display: flex; align-items: flex-start; gap: 0; color: #000; font-size: 72px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; white-space: nowrap; margin-bottom: 64px; }
.cl_bulletTitle.clickTitle {  margin-bottom: 30px; }
.cl_bulletTitle.clickTitle > .text > span { position: relative; }
.cl_bulletTitle.emoticonTitle {  gap: 12px; }
.cl_bulletTitle .text { position: relative; flex: 1; line-height:1.3; letter-spacing: -1.44px; }
.cl_bulletTitle:nth-last-child(1) { margin-bottom: 0; }



.cl_pageTitle { display: flex; align-items: flex-start; gap: 21px; color: #000; font-size: 72px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; white-space: nowrap; margin-bottom: 84px; }
.cl_pageTitle.twoLine { margin-bottom: 40px; }
.cl_pageTitle.smallGap { margin-bottom: 20px; }
.cl_pageTitle .text { flex: 1; line-height:1.3; }
.cl_pageTitle .cl_btnSpeaker {margin:0;}

.cl_checkTitle { position: relative; display: flex; align-items: flex-start; gap: 32px; color: #000; font-size: 72px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; padding-left: 263px; box-sizing: border-box; }
.cl_checkTitle:before { content: ''; position: absolute; left: 0; background-image: url("../images/checkTitle.png"); background-repeat: no-repeat; width: 246px; height: 75px;  }


.cl_contentNumTitle {  display: flex; align-items: flex-start; gap: 30px; color: #000; font-size: 72px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; margin-bottom: 62px; }
.cl_contentNumTitle:nth-last-child(1) { margin-bottom: 0; }
.cl_contentNumTitle .text { position: relative; flex: 1; line-height:1.3; letter-spacing: -0.72px; }

/***
    *****textarea박스*****
***/
.cl_textareaBox { width: 100%; height: 636px; font-size: 72px; font-family: "NanumGoB"; border-radius: 30px; padding: 20px 12px; box-sizing: border-box; resize: none; }
.cl_textareaBox::placeholder { color: #A0A0A0; font-size: 72px; font-family: "NanumGoB"; }
.cl_textareaBox:active { background: #F9F9F9; }
.cl_textareaBox:active::placeholder { color: #000; }


/***
    ***** input 박스 *****
 */
.cl_inputBox { display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 186px; font-size: 72px; font-family: "NanumGoB"; border-radius: 30px; border-radius: 10px;
    border: 8px solid #EAEAEA; padding: 20px 12px; box-sizing: border-box; }
.cl_inputBox::placeholder { color: #A0A0A0; font-size: 72px; font-family: "NanumGoB"; }
.cl_inputBox:active { background: #F9F9F9; }
.cl_inputBox:active::placeholder { color: #000; }

/***
    *****공통 팝업*****
***/
.cl_popupWrap { position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 21;  display: none;}
.cl_popupWrap.type2 { position: absolute; border-radius: 30px; }
.cl_popupWrap .popup { position: relative; }
.cl_popupWrap .popup .pop { position: relative; padding: 80px 120px; box-sizing: border-box; border-radius: 20px; border: 10px solid #91D8DB; background: #FFF; }
.cl_popupWrap.type2 .popup .pop { width: 1207px; height: 603px; border-color: #CACBFF; padding-top: 171px; }
.cl_popupWrap.role .popup .pop { padding: 0px; }
.cl_popupWrap.role .popup .pop .mainTitle { display: flex; align-items: center; font-size: 56px; font-family: "PretendardB"; background-color: #B2EDEF; padding: 20px 40px; box-sizing: border-box; }

.cl_popupWrap .popup .textArea { font-size: 60px; font-family: "PretendardB"; text-align: center; line-height: 120px; margin-bottom: 80px; }
.cl_popupWrap.type2 .popup .textArea { line-height: 1.6; }
.cl_popupWrap .popup .textArea .purple { color: #4F0BED; }
.cl_popupWrap.role .popup .pop .selectRoleArea { display: flex; align-items: center; justify-content: center; gap: 60px; padding: 60px 60px 180px 60px; }
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 50px; }
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .inputBox { width: 235px; height: 86px; border-radius: 20px; background-color: #F1F1F1;box-shadow: 0px 3px 5px 3px rgba(0, 0, 0, 0.10) inset; }
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .inputBox.on { background-color: #fff; }
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .inputBox input { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    background-color: transparent; text-align: center; font-size: 46px; font-family: "PretendardB"; }
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .inputBox input::placeholder { color: #ADADAD; }
.cl_popupWrap.role .popup .pop .cl_btnFlagStart { margin-bottom: 0px; }

.cl_popupWrap .popup .icon { position: absolute; background: url("../images/popupMiniIcon.png")no-repeat; width: 141px; height: 122px; top: -85px; left: 70px; }
.cl_popupWrap .popup .missionIcon { position: absolute; background: url("../images/missionIcon.png")no-repeat; width: 284px; height: 234px; top: -120px; left: 50%; transform: translateX(-50%); z-index: 2;
    text-shadow: 3px 0px 0px #4547af, 0px 3px 0px #4547af, -3px 0px 0px #4547af, 0px -3px 0px #4547af, 3px 3px 0px #4547af, -3px 3px 0px #4547af, -3px -3px 0px #4547af, 3px -3px 0px #4547af,
    2px 0px 0px #4547af, 0px 2px 0px #4547af, -2px 0px 0px #4547af, 0px -2px 0px #4547af, 2px 2px 0px #4547af, -2px 2px 0px #4547af, -2px -2px 0px #4547af, 2px -2px 0px #4547af,
    3px 0px 0px #4547af, 0px 3px 0px #4547af, -3px 0px 0px #4547af, 0px -3px 0px #4547af, 3px 3px 0px #4547af, -3px 3px 0px #4547af, -3px -3px 0px #4547af, 3px -3px 0px #4547af;
    font-size: 48px; font-family: "Jalnan"; color: #fff; display: flex; align-items: center; justify-content: center; padding-top: 85px; box-sizing: border-box;;
}
.cl_popupWrap.type2 .popup .missionIcon { top: -105px; background: url("../images/missionPopIcon_2.png")no-repeat; width: 284px; height: 215px; padding-top: 67px; }
.cl_popupWrap.type2 .popup .moChar { position: absolute; bottom: -70px; right: -60px; }
.cl_popupWrap.type2 .popup .cheerMoChar { position: absolute; bottom: -10px; right: -100px; background-image: url("../images/timerOxQuiz_mo.png"); background-repeat: no-repeat; width: 327px; height: 269px; }
.cl_popupWrap.type2 .readyIcon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url("../images/readyGoIcon.png")no-repeat; width: 650px; height: 642px; }

/***
    ***레디 팝업
 */
.cl_readyPopup { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 21;  display: none;}
.cl_readyPopup .popup { position: relative; }
.cl_readyPopup .popup .readyIcon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url("../images/readyGoIcon.png")no-repeat; width: 650px; height: 642px; }


/***
    페이지네이션 팝업
    ***/
/*.cl_paginationPopup { position: fixed; top: 0; left: 0; display: flex; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 21; }*/
/*.cl_paginationPopup .popup { position: relative; }*/
/*.cl_paginationPopup .popup .popPage { position: relative; padding: 80px 120px; box-sizing: border-box; border-radius: 20px; border: 10px solid #91D8DB; background: #FFF; }*/
/*.cl_paginationPopup.type2 .popup .popPage { padding: 80px 120px 150px 120px; }*/
/*.cl_paginationPopup .cl_bulletTitle { margin-bottom: 12px; }*/
/*.cl_paginationPopup .cl_bulletDia.green { margin-top: 20px; }*/
/*.cl_paginationPopup .cl_bulletTitle .text { font-size: 60px; }*/

.cl_paginationPopup { display: none; position: fixed; top: 0; left: 0; background-color: #C1E9F1; width: 100%; height: 100%; z-index: 21; padding: 20px; box-sizing: border-box; }
.cl_paginationPopup .speakTextArea { display: flex; align-items: center; padding: 50px 30px; box-sizing: border-box; border-radius: 30px; background: #F2F2F2; margin-bottom: 60px; }
.cl_paginationPopup .speakTextArea .textArea { width: 80%; text-align: center; font-family: "PretendardB"; font-size: 72px;}
.cl_paginationPopup .speakTextArea .textArea .blue { color: #137AE2; }
.cl_paginationPopup .equalizer { display: flex; align-items: center; justify-content: center; }
.cl_paginationPopup .popupPage { position: absolute; width:1882px; height: 1043px; border-radius: 30px; border: 8px solid rgba(71, 135, 158, 0.20); background: #E4EAF4; box-sizing: border-box;}
.cl_paginationPopup .popupPage .imgArea img { width: 100%; }
.cl_paginationPopup .popupPage .textArea { color: #000; font-size: 72px; letter-spacing: -0.72px; font-family: "NanumGoB"; padding: 33px 0 0 53px; box-sizing: border-box; }

.cl_paginationPopup .cl_btnClosePopup { top: 0; right: 0; }


/***
    미션팝업
 ***/
.cl_missionPopup {  position: fixed; top: 0; left: 0; display: flex; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 23; }
.cl_missionPopup .popup { position: relative; }
.cl_missionPopup .popup .pop { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; position: relative; width: 1227px; height: 717px;
    box-sizing: border-box; border-radius: 20px; border: 10px solid #B77E3B; padding: 56px 0; background: #F9F6E7; }

.cl_missionPopup .popup .missionIcon { position: absolute; background: url("../images/missionPopIcon.png")no-repeat; width: 365px; height: 188px; top: -110px; left: 50%; transform: translateX(-50%); z-index: 2; }
.cl_missionPopup.fail .popup .missionIcon { background: url("../images/missionPopIconFail.png")no-repeat; width: 290px; height: 178px; top: -100px; }

.cl_missionPopup .popup .pop .title { position: relative; display: inline-flex; justify-content: center; font-size: 36px; color: #fff; font-family: "PretendardB"; text-align: center;
    padding: 10px 42px; box-sizing: border-box; border-radius: 60px; background: #B77E3B; box-sizing: border-box; margin-bottom: 80px; }
.cl_missionPopup .popup .pop .title span { width: 100%; position: absolute; display: none; background: #B77E3B; box-sizing: border-box; border-radius: 60px;  }
.cl_missionPopup.fail .popup .pop .title span { display: block; }
.alphabetQuiz .cl_missionPopup .boxWrap { margin-bottom: 0; }
.cl_missionPopup .popup .pop .arrow { margin: 30px 0; }
.cl_missionPopup .popup .pop .text { width: 96px; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 40px; font-family: "Jalnan"; color: #9C7C68;
    border-radius: 20px; border: 6px solid #B5A195; background: #F4F1EE; box-sizing: border-box; }
.cl_missionPopup .popup .pop .boxWrapOn { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 80px; }
.cl_missionPopup .popup .pop .boxWrapOn .text { background: #6BB0F5; border-color: #137AE2; color: #fff; font-family: "GodoB"; font-size: 50px;
    text-shadow: 1px 0px 0px #137AE2, 0px 1px 0px #137AE2, -1px 0px 0px #137AE2, 0px -1px 0px #137AE2, 1px 1px 0px #137AE2, -1px 1px 0px #137AE2, -1px -1px 0px #137AE2, 1px -1px 0px #137AE2,
    2px 0px 0px #137AE2, 0px 2px 0px #137AE2, -2px 0px 0px #137AE2, 0px -2px 0px #137AE2, 2px 2px 0px #137AE2, -2px 2px 0px #137AE2, -2px -2px 0px #137AE2, 2px -2px 0px #137AE2,
    3px 0px 0px #137AE2, 0px 3px 0px #137AE2, -3px 0px 0px #137AE2, 0px -3px 0px #137AE2, 3px 3px 0px #137AE2, -3px 3px 0px #137AE2, -3px -3px 0px #137AE2, 3px -3px 0px #137AE2;
}
.cl_missionPopup .popup .pop .boxWrapOn .text.fail { width: 96px; height: 90px; display: flex; align-items: center; justify-content: center; font-size: 0; border-radius: 20px; border: 6px solid #D9D9D9; background: #FFF; color: #D9D9D9;
    background-image: url("../images/emptyIcon.png"); background-position: center center; background-repeat: no-repeat;  }
.cl_missionPopup .popup .pop .boxWrapOn .text.fail img { display: none; }


/***
    *** gameoverpopup
 */
.cl_gameOverPopup { position: fixed; top: 0; left: 0; display: flex; display: none;  align-items: center; justify-content: center; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 23; }
.cl_gameOverPopup .popup { background-image: url("../images/gameOver.png"); background-repeat: no-repeat; background-position: center center; width: 1080px; height: 390px; }
.cl_gameOverPopup .popup .cl_btnReBig { position: absolute; bottom: 139px; left: 50%; transform: translateX(-50%);  }

/***
    *** excellent
 */
.cl_excellentPopup { position: fixed; top: 0; left: 0; display: flex; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 23; }
.cl_excellentPopup .popup { background-image: url("../images/excellent.png"); background-repeat: no-repeat; background-position: center center; width: 1580px; height: 810px; }
.cl_excellentPopup .popup .cl_btnReBig { position: absolute; bottom: 139px; left: 50%; transform: translateX(-50%);  }

/***
    *** 구슬 팝업
 */
.cl_beadPopup { display: none; position: fixed; top: 0; left: 0; background-image: url("../images/beadCompletePopup.png"); background-repeat: no-repeat; width: 100%; height: 100%; z-index: 23; }
.cl_beadPopup .popup .title { position: absolute; bottom: 192px; left: 50%; transform: translateX(-50%); font-size: 72px; color: #fff; font-family: "Jalnan";
    text-shadow: 1px 0px 0px #72471d, 0px 1px 0px #72471d, -1px 0px 0px #72471d, 0px -1px 0px #72471d, 1px 1px 0px #72471d, -1px 1px 0px #72471d, -1px -1px 0px #72471d, 1px -1px 0px #72471d,
    2px 0px 0px #72471d, 0px 2px 0px #72471d, -2px 0px 0px #72471d, 0px -2px 0px #72471d, 2px 2px 0px #72471d, -2px 2px 0px #72471d, -2px -2px 0px #72471d, 2px -2px 0px #72471d,
    3px 0px 0px #72471d, 0px 3px 0px #72471d, -3px 0px 0px #72471d, 0px -3px 0px #72471d, 3px 3px 0px #72471d, -3px 3px 0px #72471d, -3px -3px 0px #72471d, 3px -3px 0px #72471d;
}
.cl_beadPopup .popup .title .yellow { color: #FFEF5A; }

.cl_beadPopup .popup .charText { width: 100%; position: absolute; bottom: 55px; left: 54%; transform: translateX(-50%); font-size: 42px; font-family: "GodoM"; color: #fff; text-align: center;
    text-shadow: 1px 0px 0px #a37445, 0px 1px 0px #a37445, -1px 0px 0px #a37445, 0px -1px 0px #a37445, 1px 1px 0px #a37445, -1px 1px 0px #a37445, -1px -1px 0px #a37445, 1px -1px 0px #a37445,
    2px 0px 0px #a37445, 0px 2px 0px #a37445, -2px 0px 0px #a37445, 0px -2px 0px #a37445, 2px 2px 0px #a37445, -2px 2px 0px #a37445, -2px -2px 0px #a37445, 2px -2px 0px #a37445,
    3px 0px 0px #a37445, 0px 3px 0px #a37445, -3px 0px 0px #a37445, 0px -3px 0px #a37445, 3px 3px 0px #a37445, -3px 3px 0px #a37445, -3px -3px 0px #a37445, 3px -3px 0px #a37445;
}

/*
    *** 보기 박스
*/
.cl_exBox {display:flex; justify-content: center; align-items: center; position:relative; padding:32px; box-sizing: border-box;}

/*type1*/
.cl_exBox.type1 {min-height:213px; border-radius: 30px; border:solid 9px #ffffff; background-color:#EFFDFD;}
.cl_exBox.type1:before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border:dashed 3px #62BFCF; box-sizing: border-box; border-radius:24px; pointer-events: none;}

/*type2*/
.cl_exBox.type2 {min-height:250px; border-radius:20px; background-color:#EFEFEF;}

/*
    *** 알파벳 사선지
*/
.cl_alphabetPaper {position:relative; border-radius: 30px; box-sizing: border-box; background-repeat: no-repeat; margin:10px; outline:solid 10px rgba(0, 0, 0, 0.10); background-color:#ffffff;}

.cl_alphabetPaper.s1 {width:879px; height:640px; background-image:url("../images/alphabetPaper1.png"); background-position:center 63px;}
.cl_alphabetPaper.s2 {width:700px; height:312px; border-radius:20px; background-image:url("../images/alphabetPaper3.png"); background-position:center;}
.cl_alphabetPaper.s3 {width:217px; height:177px; border-radius:5px; border:solid 2px #F9B438; margin:0; outline:none; background-image:url("../images/alphabetPaper4.png?v=2"); background-position:center;}
.cl_alphabetPaper.s4 {width:726px; height:106px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper.png?v=2"); background-position:center;}
.cl_alphabetPaper.s5 {width:339px; height:133px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper_2.png?v=2"); background-position:center;}

/*
    *** 애니메이션 시퀀스 컨테이너
*/
.cl_aniSeqWrap {position:relative;}
.cl_aniSeqWrap > img {display:none;}
.cl_aniSeqWrap > img:first-child {display:block;}


/*
    *** 타이머
*/
.cl_timer { position: absolute; top: 0px; left: 0px; display: flex; align-items: center; background: rgba(255,255,255,0.3); border-radius: 30px 0px 80px 0px; padding: 15px 12px 30px 12px; box-sizing: border-box; }
.cl_timer .timer { display: flex; align-items: center; font-size: 30px; color: #6520B6; font-family: "Jalnan"; justify-content: center;
    background: url("../images/timerIcon.png")no-repeat; width: 98px; height: 118px; padding-top: 20px; box-sizing: border-box; z-index: 2; }
.cl_timer .barArea { display: flex; justify-content: flex-end; width: 257px; height: 28px; border-radius: 30px; background: #FFF;
    box-shadow: 0 2px 3px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.2); margin-top: 20px; margin-left: -27px; padding: 4px; box-sizing: border-box; z-index: 1; }
.cl_timer .barArea .bar { display: flex; align-items: center; width: 222px; height: 20px; background: #4A4A4A; border-radius: 30px; }
.cl_timer .barArea .activeBar { background: #FF7E27; width: 100%; height: 100%; border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.20); box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.25) inset; box-sizing: border-box; }

/*
    *** 네임박스
 */

.cl_nameListBox { position: relative; width: 1540px; height: 461px; border-radius: 30px; background: #E9E9E9; margin-left: 133px; box-sizing: border-box; padding: 90px 60px; margin-bottom: 38px; }
.cl_nameListBox .exBtn { position: absolute; top: 5px; left: 5px; display: inline-flex; align-items: center; font-size: 32px; color: #fff;
    font-family: "NanumGoB"; border-radius: 60px; background: #77CADB; padding: 6px 40px; box-sizing: border-box;}

.cl_nameListBox .nameList { display: flex; flex-wrap: wrap; gap: 30px; }
.cl_nameListBox .nameBox { display: flex; align-items: center; justify-content: center; font-size: 54px; font-family: "PretendardB";
    background-image: url("../images/nameBox_1.png"); background-repeat: no-repeat; width: 260px; height: 125px; cursor: pointer; }
.cl_nameListBox .nameBox.type2 { background-image: url("../images/nameBox_2.png") }
.cl_nameListBox .nameBox.type3 { background-image: url("../images/nameBox_3.png") }
.cl_nameListBox .nameBox.type4 { background-image: url("../images/nameBox_4.png") }
.cl_nameListBox .nameBox.type5 { background-image: url("../images/nameBox_5.png") }
.cl_nameListBox .nameBox.type6 { background-image: url("../images/nameBox_6.png") }
.cl_nameListBox .nameBox.type7 { background-image: url("../images/nameBox_7.png") }
.cl_nameListBox .nameBox.type8 { background-image: url("../images/nameBox_8.png") }
.cl_nameListBox .nameBox.type9 { background-image: url("../images/nameBox_9.png") }
.cl_nameListBox .nameBox.type10 { background-image: url("../images/nameBox_10.png") }

/*
    *** 칼라박스
 */
.cl_repeatColorCard { width: 520px; height: 320px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; border-radius: 30px; cursor: pointer; box-sizing: border-box; }
.cl_repeatColorCard.on { border: 10px solid #137AE2 !important; }
.cl_repeatColorCard.orange { border: 10px solid #F9E9AC; background: #FDF0BD; }
.cl_repeatColorCard.orange:hover { border: 10px solid #EBCE5B; }
.cl_repeatColorCard.green { border: 10px solid #D0F6A0; background: #E0FDBD; }
.cl_repeatColorCard.green:hover { border: 10px solid #A3DF59; }
.cl_repeatColorCard .text { font-size: 72px; font-family: "PretendardB"; }


/*
    *** 스티커
 */

/*3학년*/
.cl_sticker { position: absolute; bottom: 20px; right: 34px; background-image: url("../images/sticker1_grade3.png"); background-repeat: no-repeat; width: 250px; height: 250px; cursor: pointer; }
.cl_sticker.type2 { background-image: url("../images/sticker2_grade3.png"); }
.cl_sticker.type3 { background-image: url("../images/sticker3_grade3.png"); }
.cl_sticker.type4 { background-image: url("../images/sticker4_grade3.png"); }

.cl_sticker.on { background-image: url("../images/sticker1_grade3_on.png"); }
.cl_sticker.type2.on { background-image: url("../images/sticker2_grade3_on.png"); }
.cl_sticker.type3.on { background-image: url("../images/sticker3_grade3_on.png"); }
.cl_sticker.type4.on { background-image: url("../images/sticker4_grade3_on.png"); }

/*4학년*/
.cl_sticker.grade4 { background-image: url("../images/sticker1_grade4.png"); background-repeat: no-repeat; width: 250px; height: 250px; }
.cl_sticker.grade4.type2 { background-image: url("../images/sticker2_grade4.png"); }
.cl_sticker.grade4.type3 { background-image: url("../images/sticker3_grade4.png"); }
.cl_sticker.grade4.type4 { background-image: url("../images/sticker4_grade4.png"); }

.cl_sticker.grade4.on { background-image: url("../images/sticker1_grade4_on.png"); }
.cl_sticker.grade4.type2.on { background-image: url("../images/sticker2_grade4_on.png"); }
.cl_sticker.grade4.type3.on { background-image: url("../images/sticker3_grade4_on.png"); }
.cl_sticker.grade4.type4.on { background-image: url("../images/sticker4_grade4_on.png"); }

/*
    *** 칭찬아이콘
 */
.cl_praiseIcon { position: absolute; top: 48px; left: 40px; background-image: url("../images/praiseIcon_1.png"); background-repeat: no-repeat; width: 98px; height: 113px; }
.cl_praiseIcon.type2 { background-image: url("../images/praiseIcon_2.png"); width: 102px; height: 99px; }
.cl_praiseIcon.type3 { background-image: url("../images/praiseIcon_3.png"); width: 131px; height: 99px; }
.cl_praiseIcon.type4 { background-image: url("../images/praiseIcon_4.png"); width: 116px; height: 113px; }

/*
    *** ox퀴즈 박스
 */
.cl_oxQuizBox { display: flex; align-items: center; justify-content: center; background-image: url("../images/oxSelectBox.png"); background-repeat: no-repeat; width: 349px; height: 125px; }
.cl_oxQuizBox:before { content: ''; position: absolute; background-image: url("../images/dashedIconOx.png"); background-repeat: no-repeat; width: 6px; height: 46px; }
.cl_oxQuizBox .answer { width: 50%; position: relative; text-align: center; font-size: 72px; font-family: "HallymGoB"; cursor: pointer; }
.cl_oxQuizBox .answer.correct:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background-image: url("../images/oxQuizOIcon.png"); background-repeat: no-repeat; width: 121px; height: 121px; }


/*
    *** 보기아이콘
 */
.cl_bogiIcon { background-image: url("../images/bogiIcon.png"); background-repeat: no-repeat; width: 121px; height: 70px; }


/*
    *** 볼륨조절바
*/
.cl_volumeController {/*display:flex;*/ display:none; justify-content:center; align-items:center; position:absolute; top:-205px; left:50%; transform: translateX(-50%); width:93px; height:189px; background-image:url("../images/volumeBg.png");}
.cl_volumeController.bottom { background-image: url("../images/volumeBg_bottom.png"); top: 95px; }
.cl_volumeController .volumeTrack {position:relative; width:19px; height:114px; border-radius:15px; margin-bottom:15px; margin-left:3px; background-color:#000000;}
.cl_volumeController .volumeTrack .trace {position:absolute; left:0; bottom:0; width:100%; height:50%; border-radius:20px; background-color:#FF7E27;}
.cl_volumeController .volumeTrack .volumeBar {
    position:absolute;
    left:-12px;
    bottom:50%;
    margin-bottom:-12px;
    width: 39px;
    height: 20px;
    border-radius: 60px;
    border: 2px solid #000;
    background: linear-gradient(180deg, #FFF 0%, #F2F2F2 100%);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    cursor:pointer;
}


















@media (hover: hover) and (pointer: fine) {

        /***
            *****탭버튼*****
        ***/
        /*호버*/
        .cl_tabBtnWrap .tabBtn:hover { background-color: #F2F2F2; border-color: #D9D3D6; color: #565656; }
        .cl_tabBtnWrap.type2 .tabBtn:hover { background-color: transparent; border-color: transparent; color: #565656; }
        .cl_tabBtnWrap .tabBtn.on:hover { color: #fff; background-color: #7070EF; border-color: #5A5AE2; }

        /*스탭탭버튼*/
        .cl_readyTabButtons .tabBtn:hover { background-image: url("../images/stepTabButton_1_hover.png") }
        .cl_readyTabButtons .tabBtn.active:hover { background-image: url("../images/stepTabButton_2_hover.png") }
        .cl_readyTabButtons .tabBtn.presentation:hover { background-image: url("../images/stepTabButton_3_hover.png") }
        .cl_readyTabButtons .tabBtn.evaluate:hover { background-image: url("../images/stepTabButton_4_hover.png") }

        .cl_readyTabButtons .tabBtn.on:hover { background-image: url("../images/stepTabButton_1_on.png") }
        .cl_readyTabButtons .tabBtn.on.active:hover { background-image: url("../images/stepTabButton_2_on.png") }
        .cl_readyTabButtons .tabBtn.on.presentation:hover { background-image: url("../images/stepTabButton_3_on.png") }
        .cl_readyTabButtons .tabBtn.on.evaluate:hover { background-image: url("../images/stepTabButton_4_on.png") }



        /***
            *****드롭다운*****
        ***/
        .cl_dropDownWrap .boxQuestionMark:hover { color: #8484F2; border-color: #7070EF; background: #fff; }
        .cl_dropDownWrap .boxQuestionMark.on:hover { color: #fff; border-color: #3333B6; background: #7070EF; }
        .cl_dropDownWrap .boxDropDown li:hover { color: #fff; background: #7070EF; }

        /***
            *****버튼*****
        ***/

        /*해석보기버튼*/
        .cl_btnTransView:hover { background: url("../images/translateBtn_hover.png")no-repeat; }
        .cl_btnTransView.on:hover { background: url("../images/translateBtn_on_hover.png")no-repeat; }

        /*페이지 이전 다음 버튼*/
        .cl_btnPagePrev:hover { background-image: url("../images/prevBtn_hover.png"); }
        .cl_btnPageNext:hover { background-image: url("../images/nextBtn_hover.png"); }

        /*확대버튼*/
        .cl_btnZoom:hover { background-image: url("../images/zoomButton_hover.png"); }

        /*수업팁 팝업*/
        .cl_btnTipPopup:hover { background-image: url("../images/classTipPopBtn_hover.png") }
        .cl_btnTipPopup.on:hover { background-image: url("../images/classTipPopBtn_on.png") }

        /*팝업닫기버튼*/
        .cl_btnClosePopup:hover { background: url("../images/closePopupBtn_hover.png")no-repeat; }

        /*힌트듣기버튼*/
        /*.cl_btnListenHint:hover { position: absolute; }*/
        .cl_btnListenHint:hover:after { content: ''; position: absolute; top: -51px; left: -16px; background: url("../images/listenHintBtn_hover.png")no-repeat; width: 112px; height: 145px; }

        /*발표배경버튼*/
        .cl_btnPresentationBg:hover:after {content: ''; position: absolute; top: -92px; left: -1px; background-image: url("../images/presentationBgBtn_hover.png"); width: 246px; height: 162px; }

        /*대화듣기버튼*/
        .cl_btnConversation:hover { background-image: url("../images/conversationButton_hover.png"); }
        .cl_btnConRepeat:hover { background-image: url("../images/btnConversationRepeat_hover.png"); }


        /*AI작명소*/
        .cl_btnAIMakeName:hover:after { content: ''; position: absolute; background-image: url("../images/makeNameBtn_hover.png"); width: 276px; height: 201px; }

        /*노래듣기버튼*/
        .cl_btnListenSong:hover:after { content: ''; position: absolute; top: -58px; left: -25px; background: url("../images/cl_btnListenSong_hover.png")no-repeat; width: 112px; height: 119px; }
        .cl_btnStopSong:hover { background: url("../images/cl_btnStopSong_hover.png")no-repeat; }

        /*손가락클릭버튼*/
        .cl_btnFingerClick:hover { background-image: url("../images/fingerBtn_hover.png"); }

        /*띵커벨버튼*/
        .cl_btnThinkerBell:hover { background-image: url("../images/ThinkerBellButton_hover.png"); }


    /*정답확인 다시하기버튼*/
        .cl_btnAns:hover { background: url("../images/ansbtn_hover.png")no-repeat; }
        .cl_btnAns.re:hover { background: url("../images/rebtn_hover.png")no-repeat; }
        .cl_btnReBig:hover { background: url("../images/cl_btnAns_Big_hover.png")no-repeat;}
        .cl_btnAnsCheck:hover { background-image: url("../images/individualAns_hover.png"); background-size: 60px; }
        .cl_btnAnsCheck.re:hover { background-image: url("../images/individualRe_hover.png"); background-size: 60px; }

        /*다음문제버튼*/
        .cl_btnNextQue:hover { background: url("../images/nextQueBtn_hover.png")no-repeat; }

        /*따라말하기버튼*/
        .cl_btnRepeatSpeak:hover { background: url("../images/repeatSpeakBtn_hover.png")no-repeat; }

        /*칭찬하기버튼*/
        .cl_btnPraise:hover { background: url("../images/praiseBtn_hover.png")no-repeat; }

        /*예시보기 버튼*/
        .cl_btnListenEx:hover { background-image: url("../images/listenEx_hover.png"); }

        /*시작하기버튼*/
        .cl_btnStart:hover { background: url("../images/startBtn_hover.png")no-repeat; }
        .cl_btnStart.re:hover { background: url("../images/reBtnType2_hover.png")no-repeat; }

        /*깃발 시작하기 버튼*/
        .cl_btnFlagStart:hover { background-image: url("../images/flagStartButton_hover.png"); }

        /*역할바꾸기 버튼*/
        .cl_btnChangeRole:hover { background-image: url("../images/changeRole_hover.png"); }


    /*박수치기버튼*/
        .cl_btnClap:hover { background: url("../images/clapBtn_hover.png")no-repeat; }
        .cl_btnClap.type2:hover { background: url("../images/clapBtnType2_hover.png")no-repeat; }

        /*이해하기버튼*/
        .cl_btnUnderstand:hover { background: url("../images/understandBtn_hover.png")no-repeat; }

        /*생성하기 버튼*/
        .cl_btnCreate:hover { background-image: url("../images/createBtn_hover.png"); }
        .cl_btnCreate.on:hover { background-image: url("../images/reCreate.png"); }

        /*영상보기버튼*/
        .cl_btnViewVideo:hover { background: url("../images/btnViewVideo_hover.png")no-repeat; }
        .cl_btnViewVideo.on:hover { background: url("../images/btnViewVideo_on.png")no-repeat; }

        /*따라말하기버튼type2*/
        .cl_btnRepeatSpeak.type2:hover { background: url("../images/btnRepeatSpeakType2_hover.png")no-repeat; }
        .cl_btnRepeatSpeak.type2.on:hover { background: url("../images/btnRepeatSpeakType2_on.png")no-repeat; }

        /*원작알아보기 버튼*/
        .cl_btnOriginalCheck:hover { background-image: url("../images/originalCheck_hover.png"); }

        /*CriticalThink 버튼*/
        .cl_btnCriticalThink:hover { background: url("../images/btnCriticalThink_hover.png")no-repeat; }

        /*닫기버튼*/
        .cl_btnClose:hover { background: url("../images/btnClose_hover.png")no-repeat; }

        /*활동자료 버튼*/
        .cl_btnResourceDown:hover { background: url("../images/btnResourceDown_hover.png")no-repeat; }

        /*스피커버튼*/
        .cl_btnSpeaker:hover { background: url("../images/btnSpeakerType1_hover.png")no-repeat; }
        .cl_btnSpeaker.type2:hover { background: url("../images/btnSpeakerType2_hover.png")no-repeat; }
        .cl_btnSpeaker.type2.on:hover { background: url("../images/btnSpeakerType2_on.png")no-repeat; }


        /*확인버튼*/
        .cl_btnConfirm:hover { background: url("../images/btnConfirm_hover.png")no-repeat; }

        /*이전버튼*/
        .cl_btnPrev:hover { background: url("../images/btnPrev_hover.png")no-repeat; }

        /*다음버튼*/
        .cl_btnNext:hover { background: url("../images/btnNext_hover.png")no-repeat; }

        /*오공완 시작버튼*/
        .cl_btnStudyStart:hover { background: url("../images/btnStudyStart_hover.png")no-repeat; }

        /*미디어탭버튼*/
        .cl_btnTab:hover { background: #F3F3F3; border: 1px solid #B3B1B2; box-sizing: border-box; }
        .cl_btnTab:hover span { color: #747474; box-sizing: border-box; background: #fff;  border: 1px solid rgba(0,0,0,0.1); }
        .cl_btnTab.on:hover { color: #fff; background: #fff; border: 1px solid #B3B1B2; box-sizing: border-box; }
        .cl_btnTab.on:hover span { color: #fff; background: #7070EF; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }

        .cl_btnTab.green:hover span { box-sizing: border-box; background: #fff;  border: 1px solid rgba(0,0,0,0.1); }
        .cl_btnTab.green.on:hover span { color: #fff; background: #1BBBC1; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }

        /*페이지네이션*/
        .cl_pagination.type2 .dots .dot:hover { background-color: #3463C0; border-color: #fff; }

        /***
            *****선택박스*****
        ***/
        .cl_selectBox.oItem:hover { background-image: url("../images/oItemBg_hover.png"); background-repeat: no-repeat; }
        .cl_selectBox.xItem:hover { background-image: url("../images/xItemBg_hover.png");background-repeat: no-repeat;  }
        .cl_selectBox.numItem:hover { background-image: url("../images/numItemBg_hover.png"); background-repeat: no-repeat; }

        .cl_selectBox.oItem:hover span { background-image: url("../images/oItem_on.png"); background-repeat: no-repeat; }
        .cl_selectBox.xItem:hover span { background-image: url("../images/xItem_on.png"); background-repeat: no-repeat; }
        .cl_selectBox.numItem:hover span { color: #8484F2; }

        .cl_selectBox.oItem.on:hover { background-image: url("../images/oItemBg_on.png"); background-repeat: no-repeat; }
        .cl_selectBox.xItem.on:hover { background-image: url("../images/xItemBg_on.png"); background-repeat: no-repeat; }
        .cl_selectBox.numItem.on:hover { background-image: url("../images/numItemBg_on.png"); background-repeat: no-repeat; }

        .cl_selectBox.oItem.on:hover span { background-image: url("../images/oItem_on.png"); background-repeat: no-repeat; }
        .cl_selectBox.xItem.on:hover span { background-image: url("../images/xItem_on.png"); background-repeat: no-repeat; }
        .cl_selectBox.numItem.on:hover span { color: #8484F2; }

        /***
            *****클릭아이템*****
        ***/
        .cl_openObject:hover:before { border-radius: 10px; border: 1px solid #A7836F; background: #FCE280;box-shadow: 0px 6px 0px 0px rgba(255, 255, 255, 0.40) inset, 0px -6px 0px 0px rgba(0, 0, 0, 0.10) inset;}
        .cl_openObject:hover:after { background: url("../images/clickItem_qmIcon_hover.png")no-repeat; }
        .cl_openObject.exam:hover:after { background: none; }


        /***
            *****불릿, 기타*****
        ***/
        /*이미지마크*/
        .cl_imgMark:hover { background: url("../images/imgMark_hover.png")no-repeat; }
        .cl_imgSelect:hover { border-color: #cacafc; }
        .cl_imgSelect.on:hover { border-color: #8484F2; }
        .cl_imgSelect.on:hover .cl_imgMark { background: url("../images/imgMark_on.png")no-repeat; }
        .cl_imgSelect:hover .cl_imgMark { background: url("../images/imgMark_hover.png")no-repeat; }

        .cl_imgLine:hover { border: 10px solid #cacafc; }
        .cl_imgLine:hover .cl_imgMark { background: url("../images/imgMark_hover.png")no-repeat; }

        /*캐릭터*/
        .cl_character.big:hover { background-image: url("../images/cha1_big_on.png"); }
        .cl_character.big.type2:hover { background-image: url("../images/cha2_big_on.png"); }
        .cl_character.big.type3:hover { background-image: url("../images/cha3_big_on.png"); }
        .cl_character.big.type4:hover { background-image: url("../images/cha4_big_on.png"); }

        /*.cl_character.big:hover { background-color: #F5F5F5; }*/
        /*.cl_character.big.on:hover { border-color: #F7D6A6; background-color: #FFE9D2; }
        .cl_character.big.type2.on:hover { border-color: #9FD7AD; background-color: #EBF0D7; }
        .cl_character.big.type3.on:hover { border-color: #B5BAF5; background-color: #E3E5F8; }
        .cl_character.big.type4.on:hover { border-color: #90D3EB; background-color: #D4F1F4; }*/

        /*대화캐릭터*/
        .cl_conversationChar.type1:hover { background-image: url("../images/charCon_1_on.png"); }
        .cl_conversationChar.type2:hover { background-image: url("../images/charCon_2_on.png"); }
        .cl_conversationChar.type3:hover { background-image: url("../images/charCon_3_on.png"); }
        .cl_conversationChar.type4:hover { background-image: url("../images/charCon_4_on.png"); }
        .cl_conversationChar.type5:hover { background-image: url("../images/charCon_5_on.png"); }
        .cl_conversationChar.type6:hover { background-image: url("../images/charCon_6_on.png"); }

        .cl_conversationChar:hover { border-color: #137AE2; }
        .cl_conversationChar:hover.yellow { background-color: #F7E445; }
        .cl_conversationChar:hover.blue { background-color: #B7DEFA; }

        /***
           *****textarea박스*****
       ***/
        .cl_textareaBox:hover { background: #F9F9F9; }
        .cl_textareaBox:hover::placeholder { color: #000; }

        /***
            *****input 박스*****
        ***/
        .cl_inputBox:hover { background: #F9F9F9; }
        .cl_inputBox:hover::placeholder { color: #000; }

}