/***********************************공통요소들*************************************/
.loadingPage { display: block; position: fixed; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #bee6ee; z-index: 21; }
/*.loadingPage img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }*/
.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; }
[data-audio] { cursor: pointer;}
[data-audio]:hover { color: #0048FF !important;;}
[data-audio].on.playing { color: #0048FF !important;}
/***
    *****페이지*****
***/
/*.cl_page { overflow-y: auto; }*/
.cl_page { width: 100%; height: 100%; box-sizing: border-box; }
.cl_page.flexPage { display: flex; flex-direction: column;}
.cl_page.emoticonTitleBox { padding: 74px 0 0 98px; box-sizing: border-box; }

.cl_page .innerTitleContent {flex:1; min-height:0;}

/***
    *****페이지네이션*****
 ***/
/*.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: #B9CECF; 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: 76px; 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: 31px; color: #565656; background-color: #B9B9B9; border: 4px solid #A7A7A7; border-radius: 12px 12px 0 0;
    padding: 16px 30px; box-sizing: border-box; cursor: pointer; }
.cl_tabBtnWrap .tabBtn.paddingSmall { padding: 20px 25px; }

/*클릭*/
.cl_tabBtnWrap .tabBtn.on { color: #fff; background-color: #E0522E; border-color: #D44623; pointer-events: none; }
.cl_tabBtnWrap .tabBtn.on.active { color: #fff; background-color: #E0522E; border-color: #D44623; }
/*호버*/
.cl_tabBtnWrap .tabBtn:active { background-color: #F2F2F2; border-color: #c4c4c4; color: #565656; }

/*read and check 캐릭터*/
.cl_checkChar { width: 200px; height: 100px; position: absolute; left: 65px; top: 16px; }
.cl_checkChar.grade5 { background: url("../images/grade_5_tf_char.png") center center no-repeat; }
.cl_checkChar.grade6 { background: url("../images/grade_6_tf_char.png") center center no-repeat; }

/*타이틀 체크 표시*/
.cl_sectionTitle .titleCheck { background: url("../images/title_check.png") center center no-repeat; width: 60px; height: 47px; display: inline-block; margin: 0 10px 0 20px; }


/*
*** 숫자 탭 버튼
*/
.cl_numTabBtnWrap { position: absolute; bottom: 10px; right: 86px; display: flex; align-items: center; gap: 8px;
    border-radius: 40px 40px 0 0; background-color: #E4E0BA; padding: 12px 12px 6px 12px; box-sizing: border-box; }

.cl_numTabBtnWrap .cl_btnTab { width: 70px; height: 70px;}
.cl_numTabBtnWrap .cl_btnTab span { width: 56px; height: 56px;}

    /*비디오탭버튼*/
.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: 0 0 40px 40px;
    border: 1px solid #8EB7A7; background-color: #ACD0C2; padding: 10px; 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; }

/*read&write에 들어가는 탭*/
.cl_subTabWrap { display: flex; align-items: center; justify-content: center; position: absolute; top: 10px; right: 10px; bottom: auto; border-radius: 50px; background: #E9E9E9; padding: 12px; gap: 16px; box-sizing: border-box;}

/*그림사전 탭버튼*/
.cl_dictionaryTabButtons { position: absolute; top: 0; right: 143px; display: inline-flex; align-items: center; gap: 12px; border-radius: 0 0 50px 50px; box-sizing: border-box; z-index: 21; padding: 12px; background: #C3D3E1; }

/*
    *** lookandThink 탭버튼
*/
.cl_lookThinkButton { position: absolute; top: 20px; right: 141px; display: flex; align-items: center; gap: 8px;
    border-radius: 40px; background: #D3BFAA; padding: 8px; box-sizing: border-box; z-index: 2; }




.readAndSpeakChar.boxMode .cl_lookThinkButton { padding: 12px; gap: 12px; }
    /*
        *** 세로형 탭
    */
.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.make { background-image: url("../images/stepTabButton_2.png"); width: 246px; margin-left: -37px; z-index: 3; }
.cl_readyTabButtons .tabBtn.presentation { background-image: url("../images/stepTabButton_3.png"); width: 266px; margin-left: -37px; z-index: 2; }
.cl_readyTabButtons .tabBtn.groupChk { background-image: url("../images/stepTabButton_4.png"); width: 310px; margin-left: -37px; z-index: 1; }

.cl_readyTabButtons .tabBtn:active { background-image: url("../images/stepTabButton_1_hover.png") }
.cl_readyTabButtons .tabBtn.make: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.groupChk:active { background-image: url("../images/stepTabButton_4_hover.png") }

.cl_readyTabButtons .tabBtn.on { background-image: url("../images/stepTabButton_1_on.png") }
.cl_readyTabButtons .tabBtn.make.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.groupChk.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.make: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.groupChk: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: #EDEFD0; 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: #282B66; 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: #282B66; 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: #282B66; }
.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: 6px; border-radius: 30px 0px; padding: 12px; box-sizing: border-box; z-index: 18; }


/*발음 어휘 탭 버튼*/
.cl_pronounceTab { position: absolute; top: 10px; left: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    border-radius: 60px; border: 1px solid #E2E2E2; background: #F2F2F2; padding: 10px; box-sizing: border-box; }
.cl_pronounceTab .tabBtn { position: relative; width: 74px; height: 74px; background-repeat: no-repeat; cursor: pointer; }
.cl_pronounceTab .US { background-image: url("../images/pronounceTab_1.png"); }
.cl_pronounceTab .US:hover { background-image: url("../images/pronounceTab_1_hover.png"); }
.cl_pronounceTab .US.on { background-image: url("../images/pronounceTab_1_active.png"); }
.cl_pronounceTab .UK { background-image: url("../images/pronounceTab_2.png"); }
.cl_pronounceTab .UK:hover { background-image: url("../images/pronounceTab_2_hover.png"); }
.cl_pronounceTab .UK.on { background-image: url("../images/pronounceTab_2_active.png"); }
.cl_pronounceTab .AU { background-image: url("../images/pronounceTab_3.png"); }
.cl_pronounceTab .AU:hover { background-image: url("../images/pronounceTab_3_hover.png"); }
.cl_pronounceTab .AU.on { background-image: url("../images/pronounceTab_3_active.png"); }

.cl_pronounceTab .tabBtn:hover:after { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center;
    content: '발음 선택하기'; width: 154px; height: 57px; font-size: 24px; color: #fff; font-family: "GodoB"; letter-spacing: -0.48px;
    background-image: url("../images/pronounceTip.png"); padding-top: 10px; box-sizing: border-box; }



/***
    *****순서 선택*****
***/
.cl_selectOrderWrap { position: relative; }
.cl_selectOrderWrap .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_selectOrderWrap .boxQuestionMark:active { color: #8484F2; border-color: #7070EF; background: #fff; }
.cl_selectOrderWrap .boxQuestionMark.on { color: #fff; border-color: #3333B6; background: #7070EF; }
.cl_selectOrderWrap .boxQuestionMark.on:active { color: #fff; border-color: #3333B6; background: #7070EF; }
.cl_selectOrderWrap .boxQuestionMark.ansCorrect { color: #fff; background-color: #137AE2; border-color: #116AC3; }
.cl_selectOrderWrap .boxQuestionMark.default { color: #B27138; pointer-events: none; }

/*bigSize*/
.cl_dropDownWrap.big .boxQuestionMark {width: 88px; height: 80px; font-size: 42px; }


/***
   *****드롭다운 ox*****
***/
[data-contentType="selectDropDownOx"] .cl_dropDownWrap .boxQuestionMark:hover {background: #DDDDF9;}
[data-contentType="selectDropDownOx"] .cl_dropDownWrap .boxQuestionMark {width: 88px; height: 80px;}
[data-contentType="selectDropDownOx"] .cl_dropDownWrap .boxQuestionMark.oIcon {background: url("../images/dropBoxIconO_act.png") no-repeat; border: 0;}
[data-contentType="selectDropDownOx"] .cl_dropDownWrap .boxQuestionMark.xIcon {background: url("../images/dropBoxIconX_act.png") no-repeat; border: 0;}
[data-contentType="selectDropDownOx"] .cl_dropDownWrap .boxQuestionMark.oIcon.act {background: url("../images/dropBoxIconO.png") no-repeat; border: 0;}
[data-contentType="selectDropDownOx"] .cl_dropDownWrap .boxQuestionMark.xIcon.act {background: url("../images/dropBoxIconX.png") no-repeat; border: 0;}


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

/*윗지게임 버튼*/
.cl_btnStepGame { position: absolute; top: 110px; right: 56px; background-image: url("../images/stepGameIcon.png"); background-repeat: no-repeat; width: 287px; height: 76px; cursor: pointer; }
.cl_btnStepGame:hover { background-image: url("../images/stepGameIcon_hover.png"); }


/*보고쓰기버튼*/
.cl_btnLookWrite { position: absolute; top: 129px; right: 72px; background-image: url("../images/btnLookWrite.png"); background-repeat: no-repeat; width: 256px; height: 77px; cursor: pointer; }
.cl_btnLookWrite:hover { background-image: url("../images/btnLookWrite_hover.png"); }

/*문장쓰기버튼*/
.cl_btnSentenceWrite { position: absolute; top: 129px; right: 72px; background-image: url("../images/btnSentenceWrite.png"); background-repeat: no-repeat; width: 256px; height: 77px; cursor: pointer; }
.cl_btnSentenceWrite:hover { background-image: url("../images/btnSentenceWrite_hover.png"); }

/*영단어보기*/
.cl_btnViewEng { background-image: url("../images/btnViewEng.png"); background-repeat: no-repeat; width: 254px; height: 77px; cursor: pointer; position: absolute; bottom: 30px; right: 33px; }
.cl_btnViewEng:hover { background-image: url("../images/btnViewEng_hover.png"); }
/*한글로보기*/
.cl_btnViewKor { background-image: url("../images/btnViewKor.png"); background-repeat: no-repeat; width: 254px; height: 77px; cursor: pointer; position: absolute; bottom: 30px; right: 33px; }
.cl_btnViewKor:hover { background-image: url("../images/btnViewKor_hover.png"); }

/*readAloud 버튼*/
.cl_btnReadAloud { position: absolute; top: 40px; right: 105px; background-image: url("../images/btnReadAloud.png"); background-repeat: no-repeat; width: 314px; height: 77px; cursor: pointer; }

/*해석보기버튼*/
.cl_btnTransView { position: static !important; border: none !important; box-shadow: none!important; background: url("../images/translateBtn.png")no-repeat !important; width: 201px !important; height: 83px !important; cursor: pointer; }
.cl_btnTransView.type2 { width: 176px; height: 73px; background-size: contain; }
.cl_btnTransView.type2:hover { width: 176px; height: 73px; background-size: contain; }
.cl_btnTransView:hover { background: url("../images/translateBtn_hover.png") no-repeat !important; }
.cl_btnTransView.active { background: url("../images/translateBtn_on.png") no-repeat !important; }
.cl_btnTransView.active:hover { background: url("../images/translateBtn_on_hover.png") no-repeat !important; }

/*확대버튼*/
.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: 23; }
.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_btnTipPopup.playTime { top: 138px; right: 660px; }
.cl_btnTipPopup.step { top: 121px; }

/*퀴즈 팝업 버튼*/
.cl_btnQues { position: absolute; top: 20px; right: 20px; width: 94px; height: 68px; background-image: url("../images/quesBtnIcon.png"); background-repeat: no-repeat; cursor: pointer; }
.cl_btnQues:hover { background-image: url("../images/quesBtnIcon_hover.png"); }

/*표현 업 버튼*/
.cl_btnExpression { position: absolute; bottom: 28px; right: 46px; width: 179px; height: 64px; background-image: url("../images/expressionUp.png"); cursor: pointer; }
.cl_btnExpression:hover { background-image: url("../images/expressionUp_hover.png"); }

/* tip버튼 영어  */

.cl_tipBtn { position: absolute; top: 26px; right: 20px; width: 120px; height: 52px; background-image: url("../images/tipBtn.png"); cursor: pointer; }
.cl_tipBtn:hover { background-image: url("../images/tipBtn_hover.png"); }
.cl_tipBtn.on { background-image: url("../images/tipBtn_on.png"); }

/*페이지 다음이전 버튼*/
.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 { display: none; 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 { display: none; 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: 22; }
.cl_classTipPopup.fixed { width: 800px; text-align: justify; }
.cl_classTipPopup .text { position: relative; font-size: 36px; font-family: "PretendardB"; margin-bottom: 30px; text-indent: 5px; padding-left: 25px; letter-spacing: -0.36px; line-height: 1.3; }
.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_classTipPopup.playTime { top: 200px; right: 645px; }
.cl_classTipPopup.step { top: 185px; }

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

/* zoom 팝업*/

.cl_zoomPopBtn { position: absolute;  background: url("../images/zoomPopBtn.png")no-repeat; width: 76px; height: 76px; cursor: pointer; z-index: 1; }
.cl_zoomPopBtn:hover { background: url("../images/zoomPopBtn_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_btnImageHint { position: absolute; left: 20px; display: inline-block; background-image: url("../images/cl_btnImageHint.png"); background-repeat: no-repeat; cursor: pointer; width: 80px; height: 94px; }
.cl_btnImageHint:hover { background-image: url("../images/cl_btnImageHint_hover.png"); }


/*발표배경 버튼*/
.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"); }

/*리뷰 대화듣기 버튼*/


.cl_btnListen {  background-image: url("../images/btnListen.png"); background-repeat: no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnListen:hover { background-image: url("../images/btnListen_hover.png"); }
/*연습하기 버튼*/
.cl_btnPractice { position: absolute; top: 27px; right: 46px; width: 220px; height: 68px; background-image: url("../images/btnPractice.png"); cursor: pointer; }
.cl_btnPractice:hover { background-image: url("../images/btnPractice_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_btnCalculator { position: absolute; top: 20px; right: 45px; background-image: url("../images/calculator.png"); background-repeat: no-repeat; width: 90px; height: 90px; cursor: pointer; }
.cl_btnCalculator.re { background-image: url("../images/calculator_re.png"); }
.cl_btnCalculator:hover { background-image: url("../images/calculator_hover.png"); }
.cl_btnCalculator.re:hover { background-image: url("../images/calculator_re_hover.png"); }
.cl_btnCalculator:hover:after { position: absolute; left: 50%; transform: translateX(-50%); top: -57px; content: ''; width: 133px; height: 57px; background-image: url("../images/calculator_active.png"); }


/*노래듣기버튼*/
.cl_btnListenSong { display: inline-block; background: url("../images/cl_btnListenSong.png") no-repeat; width: 52px; height: 52px; cursor: pointer; }
.cl_btnListenSong.pause {background-image:url("../images/cl_btnPauseSong.png"); width: 52px; height: 52px; }
.cl_btnListenSong.pause:hover {background-image:url("../images/cl_btnPauseSong_hover.png") !important; }
/*정지*/
.cl_btnStopSong { display: inline-block; background: url("../images/cl_btnStopSong.png") no-repeat; width: 52px; height: 52px; cursor: pointer; }
.cl_btnStopSong:active { background: url("../images/cl_btnStopSong_hover.png")no-repeat; }
/*속도*/
.cl_timeSpeedWrap {   z-index: 2; position: relative; }
.cl_timeSpeedWrap .btnTimeSpeed { width: 92px; height: 48px; font-size: 28px; color: #13664C; font-family: "GodoB"; line-height: 48px; text-align: center;
   ; border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.80); background: linear-gradient(180deg, #FFF 0%, #BAEBED 100%);
    box-shadow: 0 -3px 4px 0 rgba(255, 255, 255, 0.25) inset; box-sizing: border-box; cursor: pointer; }
.cl_timeSpeedWrap .btnTimeSpeed:hover { background: linear-gradient(180deg, #90F4E4 0%, #6DEDDE 100%); box-shadow: 0 -3px 4px 0 rgba(255, 255, 255, 0.25) inset; }
.cl_timeSpeedWrap .btnTimeSpeed.active { background: linear-gradient(180deg, #0BCA94 0%, #00A186 100%); box-shadow: 0 -3px 4px 0 rgba(255, 255, 255, 0.25) inset; }
.cl_timeSpeedWrap .btnTimeSpeed.active:hover { background: linear-gradient(180deg, #0B8F95 0%, #007075 100%); }

.cl_timeSpeedWrap .speedDropDown { display: none; position: absolute; top: 52px; left: 50%; transform: translateX(-50%); background-color: #fff; padding: 3px; transform: translateX(-50%); box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); border-radius: 10px; }
.cl_timeSpeedWrap .speedDropDown .option { display: flex; align-items: center; justify-content: center; width: 82px; height: 46px;
    font-size: 26px; color: #fff; font-family: "GodoB"; background-color: #15B897; cursor: pointer; }
.cl_timeSpeedWrap .speedDropDown .option:nth-child(1) { border-radius: 10px 10px 0 0; }
.cl_timeSpeedWrap .speedDropDown .option:nth-last-child(1) { border-radius: 0 0 10px 10px; }
.cl_timeSpeedWrap .speedDropDown .option.on { background-color: #047B81; }
/*해석버튼*/
.cl_analysis { text-align: center; width: 92px; height: 48px; line-height: 48px; font-size: 28px; color: #13664C; font-family: "GodoB";  border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.80); background: linear-gradient(180deg, #FFF 0%, #BAEBED 100%); box-shadow: 0 -3px 4px 0 rgba(255, 255, 255, 0.25) inset; box-sizing: border-box; cursor: pointer; }
.cl_analysis:hover { background: linear-gradient(180deg, #90F4E4 0%, #6DEDDE 100%); box-shadow: 0 -3px 4px 0 rgba(255, 255, 255, 0.25) inset; }
.cl_analysis.active { background: linear-gradient(180deg, #0BCA94 0%, #00A186 100%); box-shadow: 0 -3px 4px 0 rgba(255, 255, 255, 0.25) inset;  color: #fff;}


/*손가락클릭버튼*/
.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:active { 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: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_btnAnsCheck.big { background-image: url("../images/individualAns_big.png"); background-size: 78px 78px; width: 78px; height: 78px; }
.cl_btnAnsCheck.big:hover {  background-size: 78px 78px !important; width: 78px !important; height: 78px !important; }
.cl_btnAnsCheck.big.re { background-image: url("../images/individualRe_big.png"); background-size: 78px 78px; width: 78px; height: 78px; }

.exListen { background: url("../images/exListen.png")no-repeat; width: 274px; height: 77px; cursor: pointer;}
.exListen.re { background: url(../images/rebtn.png) no-repeat;}
.exListen:hover { background: url("../images/exListen_hover.png")no-repeat; }

.reviewContents .exListen.re {background-image:url("../images/btnExampleSound_ing.png"); }
.reviewContents .exListen.re:hover {background-image:url("../images/btnExampleSound_ing_hover.png") !important; }

.exListen.on.playing { background: url(../images/btnExampleSound_pause.png) no-repeat;}
.exListen.on.playing:hover { background: url(../images/btnExampleSound_pause_hover.png) no-repeat;}

    /*검색버튼*/
.cl_btnSearch { display: flex; align-items: center; width: 377px; height: 73px; font-size: 32px; color: #383D9F; font-family: "NanumGoB"; cursor: pointer;
    border: 3px solid #161B4F; padding-left: 29px; box-sizing: border-box; border-radius: 50px; background-image: url("../images/btnSearch.png"); background-repeat: no-repeat; background-position: right center; }
.cl_btnSearch:hover { color: #088391; background-image: url("../images/btnSearch_hover.png"); }


/*다음문제버튼*/
.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_btnLookEx { background-image: url("../images/btnListenEx.png"); background-repeat: no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnLookEx:hover { background-image: url("../images/btnListenEx_hover.png"); }
.cl_btnLookEx.re { background: url("../images/rebtn.png")no-repeat; }
.cl_btnLookEx.re:hover { background: url("../images/rebtn_hover.png")no-repeat; }

/*예시보기 버튼*/
.cl_btnExample { position: absolute; background-image: url("../images/btnExample.png"); background-repeat: no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnExample:hover { background-image: url("../images/btnExample_hover.png"); }
.cl_btnExample.re { background: url("../images/rebtn.png")no-repeat; }
.cl_btnExample.re:hover { background: url("../images/rebtn_hover.png")no-repeat; }

/*직접쓰기 버튼*/
.cl_btnExample.cl_directlyBtnExample.re { background: url("../images/directlyBtn.png")no-repeat; }
.cl_btnExample.cl_directlyBtnExample.re:hover { background: url("../images/directlyBtn_hover.png")no-repeat; }

/*예시듣기 버튼*/
.cl_btnSoundExample { display: none; background: url("../images/btnExampleSound.png") center center no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnSoundExample.on { display: block; }

.cl_btnSoundExample.on.pause { background: url("../images/btnExampleSound_pause.png") center center no-repeat; width: 274px; height: 77px; }
.cl_btnSoundExample.on.pause:hover { background: url("../images/btnExampleSound_pause_hover.png") center center no-repeat; }

/*다운로드 Reading 버튼*/

.cl_downloadReading { position: absolute; bottom: 65px; right: 331px; background-image: url("../images/downloadReadingBtn.png"); background-repeat: no-repeat; width: 271px; height: 77px; cursor: pointer; }
.cl_downloadReading:hover { background-image: url("../images/downloadReadingBtn_hover.png"); }



/*예시보기 버튼*/
.cl_btnActiveExample { position: absolute; top: 20px; right: 56px; background-image: url("../images/exampleGlasses.png"); background-repeat: no-repeat; width: 233px; height: 70px; cursor: pointer; }
.cl_btnActiveExample:hover { background-image: url("../images/exampleGlasses_hover.png"); }

/*직접쓰기 버튼*/
.cl_btnWrite { position: absolute; background-image: url("../images/btnWrite.png"); background-repeat: no-repeat; width: 274px; height: 77px; cursor: pointer; }
.cl_btnWrite:hover { background-image: url("../images/btnWrite_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: 244px; height: 71px; 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"); }
.cl_btnChangeRole.dimed { background-image: url("../images/changeRole_dis.png"); pointer-events: none; opacity: 0.5; }


/*박수치기버튼*/
.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 { position: absolute; top: 27px; right: 48px; background: url("../images/understandBtn.png")no-repeat; width: 231px; height: 68px; cursor: pointer; margin-top: 5px; }
.cl_btnUnderstand:active { background: url("../images/understandBtn_hover.png")no-repeat; }

/*슬라이드보기 버튼*/
.cl_btnShowSlide { background: url("../images/showSlideBtn.png")no-repeat; width: 289px; height: 68px; cursor: pointer; margin-top: 5px; }
.cl_btnShowSlide:active { background: url("../images/showSlideBtn_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;  }
.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_btnCreate.dis { background-image: url("../images/createBtn_dis.png"); }
.cl_btnCreate.dis:active { background-image: url("../images/createBtn_dis.png"); pointer-events: none; }
.cl_btnCreate.re { background-image: url("../images/rebtn.png"); }
.cl_btnCreate.re:hover { background-image: url("../images/rebtn_hover.png") }

/*영상보기 버튼*/
.cl_btnViewVideo { background: url("../images/btnViewVideo.png")no-repeat; width: 231px; 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_btnListenSpeech { background: url("../images/btnListenSpeech.png")no-repeat; width: 232px; height: 74px; cursor: pointer; }
.cl_btnListenSpeech:hover { background: url("../images/btnListenSpeech_hover.png")no-repeat; }
.cl_btnListenSpeech.on { background: url("../images/btnListenSpeech_on.png")no-repeat; }

/*전체듣기 버튼*/
.cl_btnListenAll { width: 231px; height: 74px; background-image: url("../images/btnListenAll.png"); cursor: pointer; }
.cl_btnListenAll:hover { background-image: url("../images/btnListenAll_hover.png"); }
.cl_btnListenAll.on { background-image: url("../images/btnListenAll_on.png"); }

/*따라읽기 버튼*/
.cl_btnRepeatSpeak.type3 { width: 231px; height: 74px; background-image: url("../images/btnRepeatSpeakType3.png"); cursor: pointer; }
.cl_btnRepeatSpeak.type3:hover { background-image: url("../images/btnRepeatSpeakType3_hover.png"); }
.cl_btnRepeatSpeak.type3.on { background-image: url("../images/btnRepeatSpeakType3_on.png"); }


/*따라말하기 버튼*/
.cl_btnRepeatSpeak.type2 { background: url("../images/btnRepeatSpeakType2.png")no-repeat; width: 263px; 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: 114px; height: 68px; 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: -34px; top: -34px; z-index: 1; }
.cl_btnClose:hover { background: url("../images/btnClose_hover.png")no-repeat; }

.cl_btnClose.type2 { top: -30px; right: -30px; background-image: url("../images/btnImgPopupClose.png"); width: 56px; height: 56px; }
.cl_btnClose.type2:active { background-image: url("../images/btnImgPopupClose.png"); }
.cl_btnClose.type2:hover { background-image: url("../images/btnImgPopupClose.png"); }

.cl_btnClose.brown { width: 76px; height: 76px; background-image: url("../images/popup_closeIcon.png"); }
.cl_btnClose.brown:hover { background-image: url("../images/popup_closeIcon_hover.png"); }

.cl_btnClose.purple { width: 76px; height: 76px; background-image: url("../images/popup_purple_closeIcon.png"); }
.cl_btnClose.purple:hover { background-image: url("../images/popup_purple_closeIcon_hover.png"); }

.cl_btnClose.green { width: 76px; height: 76px; background-image: url("../images/popup_green_closeIcon.png"); }
.cl_btnClose.green:hover { background-image: url("../images/popup_green_closeIcon_hover.png"); }

/*바로가기 버튼*/
.cl_btnLink { background: url("../images/linkBtn.png")no-repeat; width: 241px; height: 68px; position: absolute; right: 76px; top: 20px; cursor: pointer; }
.cl_btnLink:active { background: url("../images/linkBtn.png")no-repeat; }

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

/*활동자료 버튼(4학년 2학기 10단원)*/
.cl_btnResourceDown.foodTierList { background: url("../images/btnResourceDownFoodTierList.png")no-repeat; width: 281px; height: 70px; position: absolute; right: 105px; top: 40px; cursor: pointer; }
.cl_btnResourceDown.foodTierList:active { background: url("../images/btnResourceDownFoodTierList_hover.png")no-repeat; }
.cl_btnResourceDown.foodTierList:hover { background: url("../images/btnResourceDownFoodTierList_hover.png")no-repeat; }

/*스피커 버튼*/
.cl_btnSpeaker { width: 76px; height: 78px; background-image: url("../images/btnSpeaker.png"); cursor: pointer; flex-shrink: 0; }
.cl_btnSpeaker:hover { background-image: url("../images/btnSpeaker_hover.png"); }
.cl_btnSpeaker.on { background-image: url("../images/btnSpeaker_on.png")}
.cl_btnSpeaker.on.playing { animation: scaleButton 1s infinite alternate; }


.cl_btnSpeaker.big { width: 82px; height: 82px; background-image: url("../images/btnSpeaker_big.png"); }
.cl_btnSpeaker.big:hover { background-image: url("../images/btnSpeaker_big_hover.png"); }
.cl_btnSpeaker.big.play { background-image: url("../images/btnSpeaker_big_play.png"); }
.cl_btnSpeaker.big.on { background-image: url("../images/btnSpeaker_big_on.png"); }
.cl_btnSpeaker.big.on.playing {  animation: scaleButton 1s infinite alternate; }


/*복사하기 버튼*/
.cl_copyBtn { width: 66px; height: 66px; background: url("../images/copyBtn.png"); display: inline-block; cursor: pointer; position: relative; }
.cl_copyBtn:hover { background: url("../images/copyBtn_hover.png"); }
.cl_copyBtn.on::after { content: ""; position: absolute; top: -63px; left: 50%; transform: translateX(-50%); background: url("../images/copy_comment.png"); width: 195px; height: 57px; }


.cl_btnSpeakerVol { background: url("../images/speakerVolBtn.png")no-repeat; width: 91px; height: 91px; cursor: pointer;}
.cl_btnMikeRepeat { background-image: url("../images/mikeRepeat.png"); background-repeat: no-repeat; width: 105px; height: 105px; cursor: pointer; z-index: 2; }
.cl_btnMikeRepeat:hover { background-image: url("../images/mikeRepeat_hover.png"); }

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

/*주사위게임 대본버튼*/
.cl_btnGameScript { position: absolute; bottom: 0; right: 56px; background-image: url("../images/scriptIconUp.png"); background-repeat: no-repeat; width: 149px; height: 68px; cursor: pointer; }
.cl_btnGameScript:hover { background-image: url("../images/scriptIconUp_hover.png"); }

.cl_btnGameScript.close { background-image: url("../images/scriptIconDown.png"); width: 149px; height: 68px; }
.cl_btnGameScript.close:hover { background-image: url("../images/scriptIconDown_hover.png"); }


/*라운드사각버튼*/
.cl_btnRoundRect {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    font-size:40px;
    color:#565656;
    font-family:Jalnan;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.50);
    box-shadow: 0 3px 0 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset;
    cursor:pointer;
    background-color: #B9B9B9;
}
.cl_btnRoundRect:hover {background-color:#E2E2E2;}
.cl_btnRoundRect.on {color:#ffffff; background-color:#0AB5A1;}
.cl_btnRoundRect .smallText { font-size: 19px; font-family: "PretendardM"; }

.cl_page.wordsCorrectMatch .selectWrap .selectAudio .audio.on .audioIcon { animation: scaleButton 1s infinite alternate; }


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

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

/*이전버튼*/
.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: 325px; height: 112px; cursor: pointer; }
.cl_btnStudyStart:hover { background: url("../images/btnStudyStart_hover.png") no-repeat; }
/*.cl_btnStudyStart:active { background: url("../images/btnStudyStart_hover.png")no-repeat; }*/

/*
* *** 동그란 탭버튼
*/
/*블루 버튼*/
.cl_btnTab { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; font-size: 31px; color: #747474; font-family: "Jalnan";
    background: #D2D2D4; border-radius: 50%; cursor: pointer; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.20); }
.cl_btnTab span { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px;
    border: 1px solid rgba(0, 0, 0, 0.10); background: #E2E2E2; 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; pointer-events: none;}
.cl_btnTab.on:active { color: #fff; background: #fff; box-sizing: border-box; }
.cl_btnTab.on span { color: #fff; background: #0A9FEA; box-sizing: border-box; }
.cl_btnTab.on:active span { color: #fff; background: #7070EF; box-sizing: border-box; }

.cl_btnTab.sizeL { width: 70px; height: 70px;}
.cl_btnTab.sizeL span{ width: 56px; height: 56px;}

.pageVideo .cl_btnTab.on { pointer-events: auto; }



/*오렌지 버튼*/
.cl_btnTab.orange.on span { color: #fff; background: #E0522E; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }
.cl_btnTab.orange.on:active span { color: #fff; background: #1BBBC1; border: 1px solid rgba(0,0,0,0.1); box-sizing: border-box; }

/*그린 버튼*/
.cl_btnTab.green.on span {
    background-color: #1BBBC1;
}

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

.cl_btnPlayRound.type2 { background-image: url("../images/btnPlayWord.png"); }
.cl_btnPlayRound.re.type2 { background-image: url("../images/btnPlayWord_re.png"); }
.cl_btnPlayRound.type2:hover { background-image: url("../images/btnPlayWord_hover.png"); }
.cl_btnPlayRound.re.type2:hover { background-image: url("../images/btnPlayWord_re_hover.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: 316px; bottom: 55px; 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; }

/***
    *****띵커벨보드*****
***/
.cl_thinkerBell { position: relative; }
.cl_thinkerBell.thinkerBell_5 { background: url("../images/5_board_bg.png") center center no-repeat; }
.cl_thinkerBell.thinkerBell_6 { background: url("../images/6_board_bg.png") center center no-repeat; }
/*.cl_thinkerBell .thinkerBellBtn { cursor: pointer; background: url("../images/boardBtn.png") center center no-repeat; width: 420px; height: 129px; position: absolute; top: 153px; left: 50%; transform: translateX(-50%); }
.cl_thinkerBell .thinkerBellBtn:hover { background: url("../images/boardBtn_hover.png") center center no-repeat; }*/

.cl_thinkerBell .thinkerBellBtn { cursor: pointer;  width: 420px; height: 129px; position: absolute; top: 153px; left: 50%; transform: translateX(-50%); }

.cl_thinkerBell .thinkerBellBtn .hover { display: none;}
.cl_thinkerBell .thinkerBellBtn .default { display: block;}
.cl_thinkerBell .thinkerBellBtn:hover .hover { display: block;}
.cl_thinkerBell .thinkerBellBtn:hover .default { display: none;}

/***
    *****스크롤바*****
***/
/*::-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: 134px; color: #0048FF; font-size: 54px; font-family: "NanumGoB";
    border: 1px solid rgba(0, 0, 0, 0.20); 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 rgba(0, 0, 0, 0.20); background: #F8ECBF; box-shadow: 0 6px 0 0 rgba(255, 255, 255, 0.40) inset, 0 -6px 0 0 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: 42px; height: 60px; }
.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_openObject.exam:after { content: '예시'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #BC6C3F; font-size: 40px; font-family: "Jalnan";
    text-shadow: 1px 0px 0px #fff, 0px 1px 0px #fff, -1px 0px 0px #fff, 0px -1px 0px #fff, 1px 1px 0px #fff, -1px 1px 0px #fff, -1px -1px 0px #fff, 1px -1px 0px #fff,
    2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff, 2px 2px 0px #fff, -2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff;
}
.cl_openObject.exam:hover:after { color: #EE5706; }


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

/*오늘공부내용타이틀*/
.cl_todayStudyTitle { position: absolute; bottom: 20px; left: 68px; background: url("../images/todayStudyTitle.png")no-repeat; width: 489px; height: 152px; }
.cl_todayStudyImg { position: absolute; bottom: -181px; right: -230px; background: url("../images/todayStudyImg.png")no-repeat; width: 985px; height: 470px; }
.cl_todayStudyImg.type2 { background-image: url("../images/todayStudyImg_type2.png"); }

/*작명소 타이틀*/
.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 { 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.char2 {  background-image: url("../images/directive_char_2.png"); width: 400px; }
.cl_directive.char3 {  background-image: url("../images/directive_char3.png"); width: 170px; height: 78px; }
.cl_directive.pic {  background-image: url("../images/directive_pic.png"); width: 260px; }
.cl_directive.picBr {  background-image: url("../images/picBr.png"); width: 170px; height: 78px; }
.cl_directive.pic.white {  background-image: url("../images/pic_white.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.friends {  background-image: url("../images/directive_friends.png"); width: 287px; }
.cl_directive.card {  background-image: url("../images/directive_card.png"); width: 260px; }
.cl_directive.conversation { top: 25px; right: 620px; background-image: url("../images/directive_conversation.png"); width: 352px; height: 48px; }
.cl_directive.repeat { top: 25px; right: 620px; 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_directive.balloon { top: 12px; right: 20px; background-image: url("../images/directive_balloon.png"); width: 287px; }
.cl_directive.alphabetBlank { top: 12px; right: 20px; background-image: url("../images/alphabetBlank.png"); width: 323px; }
.cl_directive.textBlank { top: 12px; right: 20px; background-image: url("../images/directive_textBlank.png"); width: 260px; }
.cl_directive.textBlank.white {  background-image: url("../images/directive_blank_white.png"); width: 260px; }
.cl_directive.owl { top: 12px; right: 20px; background-image: url("../images/directive_owl.png"); width: 286px; }
.cl_directive.emoticon { top: 12px; right: 20px; background-image: url("../images/directive_emoticon.png"); width: 313px; }
.cl_directive.word { top: 12px; right: 24px; background-image: url("../images/directive_word.png"); width: 260px; }
.cl_directive.wordDrag { top: 12px; right: 24px; background-image: url("../images/directive_wordDrag.png"); width: 287px; }
.cl_directive.mood { top: 249px; right: 69px; background-image: url("../images/directive_fealing.png"); width: 259px; }
.cl_directive.namePlate { top: 249px; right: 69px; background-image: url("../images/directive_nameplate.png"); width: 314px; }
.cl_directive.speaker { top: 9px; right: 12px; background-image: url("../images/directive_speaker.png"); width: 258px; height: 44px; }
.cl_directive.speaker.long { top: 9px; right: 63px; background-image: url("../images/directive_speaker_4.png"); width: 460px; height: 44px; }
.cl_directive.mike { top: 9px; right: 12px; background-image: url("../images/directive_mike.png"); width: 265px; height: 47px; }
.cl_directive.mike.type2 { top: 9px; right: 12px; background-image: url("../images/directive_mike_2.png"); width: 258px; height: 44px; }
.cl_directive.mike.type3 { top: 9px; right: 12px; background-image: url("../images/directive_mike_3.png"); width: 265px; height: 47px; }
.cl_directive.mike.long { top: 9px; right: 63px; background-image: url("../images/directive_mike_4.png"); width: 467px; height: 44px; }
.cl_directive.mike.type5 { top: 10px; right: 37px; background-image: url("../images/directive_mike_5.png"); width: 240px; height: 47px; }
.cl_directive.art { top: 9px; right: 12px; background-image: url("../images/directive_art.png"); width: 260px; height: 39px; }
.cl_directive.key { top: 9px; right: 12px; background-image: url("../images/directive_key.png"); width: 261px; height: 47px; }
.cl_directive.shadow { top: 9px; right: 12px; background-image: url("../images/directive_shadow.png");  width: 287px; height: 39px; }
.cl_directive.box { top: 9px; right: 12px; background-image: url("../images/directive_box.png");  width: 260px; height: 39px; }
.cl_directive.object { top: 9px; right: 12px; background-image: url("../images/directive_object.png");  width: 259px; height: 39px; }
.cl_directive.arrow { top: 9px; right: 12px; background-image: url("../images/directive_arrow.png");  width: 287px; height: 39px; }
.cl_directive.arrowIcon { top: 9px; right: 12px; background-image: url("../images/directive_arrowIcon.png");  width: 253px; height: 40px; }
.cl_directive.qMark { top: 9px; right: 12px; background-image: url("../images/directive_qusMark.png");  width: 287px; height: 39px; }
.cl_directive.dice { top: 9px; right: 12px; background-image: url("../images/directive_dice.png");  width: 287px; height: 39px; }
.cl_directive.crayon { top: 23px; right: 197px; background-image: url("../images/directive_crayon.png");  width: 538px; height: 39px; }
.cl_directive.flagBlank { top: 12px; right: 12px; background-image: url("../images/directive_flagBlank.png");  width: 545px; height: 39px; }
.cl_directive.face { top: 88px; right: 30px; background-image: url("../images/directive_face.png");  width: 260px; height: 39px; }
.cl_directive.colorClick { top: 12px; right: 12px; background-image: url("../images/directive_color.png");  width: 260px; height: 39px; }
.cl_directive.week { top: 12px; right: 12px; background-image: url("../images/directive_week.png");  width: 258px; height: 39px; }
.cl_directive.boxInput { top: 12px; right: 12px; background-image: url("../images/diretiveBoxInput.png");  width: 429px; height: 39px; }
.cl_directive.glasses { top: 12px; right: 12px; background-image: url("../images/directive_glasses.png");  width: 286px; height: 39px; }
.cl_directive.circle { top: 12px; right: 12px; background-image: url("../images/directive_circle.png");  width: 321px; height: 39px; }
.cl_directive.num { top: 12px; right: 12px; background-image: url("../images/directive_num.png");  width: 258px; height: 39px; }
.cl_directive.price { top: 12px; right: 12px; background-image: url("../images/directive_price.png");  width: 258px; height: 39px; }
.cl_directive.numOrder { top: 12px; right: 12px; background-image: url("../images/directive_numOrder.png");  width: 461px; height: 39px; }
.cl_directive.person { top: 12px; right: 12px; background-image: url("../images/directive_person.png");  width: 258px; height: 39px; }
.cl_directive.floor { top: 12px; left: 12px; background-image: url("../images/directive_floor.png");  width: 233px; height: 39px; }

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


/*이모티콘타이틀*/
.cl_emoticonTitle { position: absolute; bottom: 10px; left: 76px; display: flex; align-items: flex-start; justify-content: flex-start; width: 773px; height: 166px;
    color: #2E6BE5; font-family: "Jalnan"; font-size: 56px;font-style: normal;line-height: 130%; /* 70.2px */letter-spacing: -0.54px;
    text-shadow: 3px 0px 0px #fff, 0px 3px 0px #fff, -3px 0px 0px #fff, 0px -3px 0px #fff, 3px 3px 0px #fff, -3px 3px 0px #fff, -3px -3px 0px #fff, 3px -3px 0px #fff,
    2px 0px 0px #fff, 0px 2px 0px #fff, -2px 0px 0px #fff, 0px -2px 0px #fff, 2px 2px 0px #fff, -2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff,
    3px 0px 0px #fff, 0px 3px 0px #fff, -3px 0px 0px #fff, 0px -3px 0px #fff, 3px 3px 0px #fff, -3px 3px 0px #fff, -3px -3px 0px #fff, 3px -3px 0px #fff;
    padding-top: 38px; box-sizing: border-box;; padding-left: 213px; background-image: url("../images/emoticonTitle.png"); background-repeat: no-repeat;
    white-space: nowrap;
}
.cl_emoticonTitle.type2 { background-image: url("../images/emoticonTitle_2.png"); }


/*around the world 아이콘*/
.cl_atwIcon { background: url("../images/atw_1.png")no-repeat; width: 536px; height: 100px; position: absolute; bottom: 10px; left: 66px; }

/*ready to write 타이틀*/
.cl_ready_to_write { background: url("../images/readytowrite_title.png") center center no-repeat; width: 417px; height: 76px; }

/*write and share 타이틀*/
.cl_write_and_share { background: url("../images/writeandshare_title.png") center center no-repeat; width: 463px; height: 61px; }

/*peer check 타이틀*/
.cl_peer_check {background: url("../images/peercheck_title.png") center center no-repeat; width: 325px; height: 83px; }

/*오공완 아이콘*/
.cl_todayStudyIcon { background-image: url("../images/todayStudyIcon.png"); background-repeat: no-repeat; width: 162px; height: 88px; position: absolute; bottom: 10px; left: 56px; }
.cl_todayStudyIcon.grade6 { background-image: url("../images/todayStudyIcon_grade6.png"); }

/*오공완 정답아이콘*/
.cl_correctMo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-image: url("../images/todayStudyOMo_1.png"); background-repeat: no-repeat; width: 327px; height: 452px; z-index: 3;}
.cl_correctMo.type2 { background-image: url("../images/todayStudyOMo_2.png"); width: 391px; height: 363px; }
.cl_correctMo.grade6 { background-image: url("../images/todayStudyOMo_1_grade6.png"); }
.cl_correctMo.type2.grade6 { background-image: url("../images/todayStudyOMo_2_grade6.png"); height: 368px; }
/*오공완 실패아이콘*/
.cl_failMo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background-image: url("../images/todayStudyXMo_1.png"); background-repeat: no-repeat; width: 326px; height: 452px; z-index: 3; }
.cl_failMo.type2 { background-image: url("../images/todayStudyXMo_2.png"); width: 391px; height: 317px; }
.cl_failMo.grade6 { background-image: url("../images/todayStudyXMo_1_grade6.png"); }
.cl_failMo.type2.grade6 { background-image: url("../images/todayStudyXMo_2_grade6.png"); height: 325px; }

/*불릿*/
.cl_bulletBubble.green { background: url("../images/bubbleBullet_green.png")no-repeat; width: 67px; height: 57px; margin-top: 7px; }
.cl_bulletBubble.blue { background: url("../images/bubbleBullet_blue.png")no-repeat; width: 60px; height: 64px; margin-top: 10px; }
.cl_bulletBubble.purple { background: url("../images/bubbleBullet_purple.png")no-repeat; width: 78px; height: 75px; margin-top: 10px; padding-top: 7px;
    color: #FFF;text-align: center; text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.20); font-size: 46px; font-family: "Jalnan"; box-sizing: border-box; }

/*불릿 알파벳*/

.cl_bulletBubble.a { background: url("../images/bubbleBullet_a.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.b { background: url("../images/bubbleBullet_b.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.a.green { background: url("../images/bubbleBullet_a_green.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.b.green { background: url("../images/bubbleBullet_b_green.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.a.blue { background: url("../images/bubbleBullet_a_blue.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.b.blue { background: url("../images/bubbleBullet_b_blue.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.c.blue { background: url("../images/bubbleBullet_c_blue.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.d.blue { background: url("../images/bubbleBullet_d_blue.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.c { background: url("../images/bubbleBullet_c.png")no-repeat; width: 67px; height: 86px; margin-top: -3px; }
.cl_bulletBubble.groupChk { background: url("../images/bubbleBullet_cgoupChk.png")no-repeat; width: 351px; height: 68px; margin-top: 5px; }


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

.cl_bulletDia { width: 43px; height: 43px; margin-top: 15px; background-repeat: no-repeat; flex-shrink: 0; }
.cl_bulletDia.small { width: 35px; height: 35px; margin-top: 20px;}
.cl_bulletDia.brown {  background-image: url("../images/diaBullet_brown.png");  }
.cl_bulletDia.green { background: url("../images/diaBullet_green.png")no-repeat; }
.cl_bulletDia.purple { background-image: url("../images/diaBullet_purple.png")no-repeat; }
.cl_bulletDia.yellow { background-image: url("../images/diaBullet_yellow.png"); }
.cl_bulletDia.blue { background-image: url("../images/diaBullet_blue.png"); }


.cl_bulletDia.small.green { background: url("../images/diaBullet_green_small.png")no-repeat; }
.cl_bulletDia.small.brown { background-image: url("../images/diaBullet_brown_small.png"); }
.cl_bulletDia.small.blue { background-image: url("../images/diaBullet_blue_small.png"); }
.cl_bulletDia.small.yellow { background-image: url("../images/diaBullet_yellow_small.png"); }



/*리뷰블릿*/
.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_talkBullet { position: absolute; top: 12px; left: 64px; width: 212px; height: 59px; background-image: url("../images/talk_bullet.png"); }


/*컨텐트 숫자*/
.cl_contentNum { width: 62px; height: 62px; border-radius: 50%; background: #94EBC9; border: 4px solid #7FD7AB;
    color: #FFF; text-align: center; display: inline-flex; align-items: center; justify-content: center; vertical-align: 10px;font-size: 33px !important;
    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";  box-sizing: border-box; margin-top: 7px; }
.cl_contentNum.small { width: 55px; height: 55px; }
.cl_contentNum.medium { width: 76px; height: 76px; }
.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_contentNum.blueGray { border-color: #93B8E1; background-color: #93B8E1; width: 58px; height: 58px; font-size: 30px;
    text-shadow: 0px 0px 0px #67819e, 0px 0px 0px #67819e, -0px 0px 0px #67819e, 0px -0px 0px #67819e, 0px 0px 0px #67819e, -0px 0px 0px #67819e, -0px -0px 0px #67819e, 0px -0px 0px #67819e,
    1px 0px 0px #67819e, 0px 1px 0px #67819e, -1px 0px 0px #67819e, 0px -1px 0px #67819e, 1px 1px 0px #67819e, -1px 1px 0px #67819e, -1px -1px 0px #67819e, 1px -1px 0px #67819e,
    2px 0px 0px #67819e, 0px 2px 0px #67819e, -2px 0px 0px #67819e, 0px -2px 0px #67819e, 2px 2px 0px #67819e, -2px 2px 0px #67819e, -2px -2px 0px #67819e, 2px -2px 0px #67819e;
}


/*이미지 마크*/
.cl_imgMark {
    position: absolute;
    left: -1px;
    top: -1px;
    background: url("../images/imgMark.png") no-repeat;
    width: 80px;
    height: 80px;
    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: 31px;
    color: #fff;
    box-sizing: border-box;
    padding: 15px 0 0 21px;
    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 #E2E2E2; border-radius: 25px; box-sizing: border-box; }
.cl_imgLine:active { border: 10px solid #cacafc; }
.cl_imgLine img { 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 .text.small { font-size: 90px; }
.cl_imgSelect .text.xSmall { font-size: 72px; }
.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 .text.big span { font-size: 90px; }
.cl_textSelect .text.small span { font-size: 72px; }

.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: #6D6DDB; }
.cl_textSelect.on .text span:before { background-color: #6D6DDB; }

.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;
    background-image: url("../images/d100_0001_01_2.png");
    background-size: 612px 532px;
    width: 612px;
    height: 532px;
    transform-origin: center center;
}
.cl_cardTurnWrap .card .cardFront:before {  width: 100%; height: 100%; content: ''; position: absolute; top: 0px; left: 0px;
    z-index: 2;background-image: url("../images/cardFrontBg_1.png"); background-repeat: no-repeat; }
.cl_cardTurnWrap .card .cardFront img { position: absolute; top: 201px; left: 50%; transform: translateX(-50%); display: block; z-index: 2; }
.cl_cardTurnWrap .card .cardFront .text { position: absolute; top: 63px; left: 50%; transform: translateX(-50%); width: 100%; text-align: center;
    color: #287D87; font-size: 54px; font-family: "NanumGoB"; z-index: 2; }


.cl_cardTurnWrap .card .cardBack {
    transform: scaleX(0);
    position: absolute; top: 0; left: 0;
    transform-origin: center center; width: 612px; height: 532px;   box-sizing: border-box;
    border-radius: 12px; border: 6px solid #D2D2D4; background-color: #F2F2F2;
}
.cl_cardTurnWrap .card .cardBack img { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); display: block; z-index: 2; }
.cl_cardTurnWrap .card .cardBack .text { position: absolute; top: 420px; left: 50%; transform: translateX(-50%); font-size: 54px; font-family: "NanumGoB"; text-align: center; }

/*카드오픈*/
.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 .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:612px; height:532px; 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: #E0522E; }

.timeMoveList .cl_character { filter: grayscale(1); }
.timeMoveList .cl_character.on { filter: grayscale(0); }


/*리뷰캐릭터*/
.cl_character.review { background-size: 140px 140px; width: 140px; height: 140px; }
.cl_character.review.type1 { background-image: url("../images/reviewChar_1.png"); }
.cl_character.review.type2 { background-image: url("../images/reviewChar_2.png"); }
.cl_character.review.type3 { background-image: url("../images/reviewChar_3.png"); }

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

/*캐릭터 유형 - normal*/
.cl_character.basic.type1 {background-image: url("../images/char1_g.png");}
.cl_character.basic.type2 {background-image: url("../images/char2_g.png");}
.cl_character.basic.type3 {background-image: url("../images/char3_g.png");}
.cl_character.basic.type4 {background-image: url("../images/char4_g.png");}
.cl_character.basic.type5 {background-image: url("../images/char5_g.png");}
.cl_character.basic.type6 {background-image: url("../images/char6_g.png");}
.cl_character.basic.type7 {background-image: url("../images/char7_g.png");}
.cl_character.basic.type8 {background-image: url("../images/char8_g.png");}
.cl_character.basic.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");}
.cl_character.type21 {background-image: url("../images/char21.png");}
.cl_character.type22 {background-image: url("../images/char22.png");}
.cl_character.type23 {background-image: url("../images/char23.png");}
.cl_character.stepGirl {background-image: url("../images/step3_girl.png");}
.cl_character.stepBoy {background-image: url("../images/step3_boy.png");}
/*25.05.29 추가*/
.cl_character.basic.type1.on {background-image: url("../images/char1.png");}
.cl_character.basic.type2.on {background-image: url("../images/char2.png");}
.cl_character.basic.type3.on {background-image: url("../images/char3.png");}
.cl_character.basic.type4.on {background-image: url("../images/char4.png");}
.cl_character.basic.type5.on {background-image: url("../images/char5.png");}
.cl_character.basic.type6.on {background-image: url("../images/char6.png");}
.cl_character.basic.type7.on {background-image: url("../images/char7.png");}
.cl_character.basic.type8.on {background-image: url("../images/char8.png");}
.cl_character.basic.type9.on {background-image: url("../images/char9.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_1.png");}
.cl_character.type20 {background-image: url("../images/char20_1.png");}
.cl_character.type21 {background-image: url("../images/char21.png");}
.cl_character.type22 {background-image: url("../images/char22.png");}
.cl_character.type23 {background-image: url("../images/char23.png");}
.cl_character.type24 {background-image: url("../images/char24.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_character.type2.typeToggle { background-color: #FAF9EE; width: 163px; height: 163px; background-size: 163px 163px; border-color: #D7D4CA; cursor: auto; }
.cl_character.type1.typeToggle { background-color: #FAF9EE; width: 163px; height: 163px; background-size: 163px 163px; border-color: #D7D4CA; cursor: auto; }

/*초록색라인 캐릭터*/
.cl_character.openObj { background-color: #F1FBE8; width: 163px; height: 163px; background-size: 163px 163px; cursor: auto; border-color: #C7DEC2; }




/*대화캐릭터*/
/*공통*/
.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.on { border-color: #137AE2; }

/*.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: 66px; font-family: "NanumGoB"; letter-spacing: -0.72px; line-height: 1.3; padding: 30px 36px; box-sizing: border-box;
    border-radius: 20px;border: 8px solid #F8C9A0;background: #FFF; }
.cl_balloon.typeNon { padding: 34px 50px; }
.cl_balloon.typeNon:after { display: none; }
.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.fixed { width: 1200px; }

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


/* characterTalk 말풍선*/
.characterTalk .cl_balloon { position: absolute; left: 445px; }
.characterTalk .cl_balloon:after { border: 24px solid transparent; left: 1px; border-right-color: #F7D6A6;border-left: 0; }
.characterTalk .cl_balloon.type2:after { border-right-color: #9FD7AD; }
.characterTalk .cl_balloon.type3:after { border-right-color: #B5BAF5; }
.characterTalk .cl_balloon.type4:after { border-right-color: #90D3EB; }

/*캐릭터 말풍선*/
.cl_balloon.char {  font-family: "GodoM"; width: auto; white-space: noWrap; position: absolute; top: -67px; left: 50%; transform: translateX(-50%); background-color: #623021; border: none; padding: 10px 10px; font-size: 24px; color: #fff; border-radius: 10px; min-width: 60px; }
.cl_balloon.char:after { bottom: 0; top: auto; left: 50%; border: 10px solid transparent; border-top-color: #623021; border-bottom: 0; margin-left: -10px; margin-bottom: -8px; }
.cl_balloon.char.empty { width: 40px; height: 52px; }
/*캐릭터 표현바꾸기 말풍선*/
.cl_balloon.char.express { background-color: #0C4177; }
.cl_balloon.char.express:after { border-top-color: #0C4177; }

/*캐릭터 3개 이상일경우*/
.threePeople .cl_balloon.char { left: auto; right: 0; transform: translateX(0); }
.threePeople .cl_balloon.char:after { left: auto; transform: translateX(0); right: 24px; }

.lastBalloon .cl_balloon.char { left: auto; right: 0; transform: translateX(0); }
.lastBalloon .cl_balloon.char:after { left: auto; transform: translateX(0); right: 24px; }

.cl_page.characterClickArea .characterArea .cl_balloon { width: 1200px; }



/*대화듣기 말풍선*/
.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; cursor: pointer; }
/*칼라*/
.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; color: #137AE2; }
.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: 20px; color: #000; font-size: 66px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; letter-spacing: -1.056px; }
.cl_sectionTitle.between { width: 100%; justify-content: space-between; }
.cl_sectionTitle .text { flex: 1; line-height:1.3; }
.cl_sectionTitle.inner { padding: 10px 20px; box-sizing: border-box; border-radius: 12px 12px 0 0; background-color: #EBEADA; }


.cl_bulletTitle { display: flex; align-items: flex-start; gap: 20px; color: #000; font-size: 66px; 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.4; letter-spacing: -1.44px; }
.cl_bulletTitle .text .green { color: #008997; }
.cl_bulletTitle .text .orange { color: #FF761A; }
.cl_bulletTitle:nth-last-child(1) { margin-bottom: 0; }


.cl_pageTitle { display: flex; align-items: flex-start; gap: 20px; color: #000; font-size: 66px; font-family: "NanumGoB";  letter-spacing: -1.056px;
    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; }     /*250307 - 스피커 약물이 없는 문장에서는 앞쪽에 margin-left 40px 넣어달라고 함*/

.cl_pageTitle .under { border-bottom: 4px solid #000; }

.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: 66px; font-family: "NanumGoB"; word-break: keep-all;
    word-wrap: break-word; margin-bottom: 56px;letter-spacing: -1.056px; padding-right: 50px; }
.cl_contentNumTitle:nth-last-child(1) { margin-bottom: 0; }
.cl_contentNumTitle .text { position: relative; flex: 1; line-height:1.3; letter-spacing: -0.72px; }
.cl_contentNumTitle .text .indent { padding-left: 68px; }
.cl_contentNumTitle .text .under { border-bottom: 4px solid #000; }
.cl_contentNumTitle .text .orange { color: #FF761A; }
.cl_contentNumTitle .text .green { color: #008997; }
.cl_contentNumTitle .text .blue { color: #0048FF; }
.cl_contentNumTitle .text .small { font-size: 56px; }
.cl_contentNumTitle .text .flexArea { display: flex; align-items: center; gap: 38px; margin-bottom: 20px;}
.cl_contentNumTitle .text .purpleBox { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; font-family: "NanumGoB";
    padding: 3px 26px 0 26px; height: 60px; border-radius: 60px; background: #8784E7; box-sizing: border-box; }
.cl_contentNumTitle .text .blueBox { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 36px; font-family: "NanumGoB";
    padding: 3px 26px 0 26px; height: 60px; border-radius: 60px; background: #6DB8DD; box-sizing: border-box; }
.cl_contentNumTitle .text .fontM { font-size: 54px; }



/***
    *****textarea박스*****
***/
.cl_textareaBox { width: 100%; height: 532px; font-size: 66px; font-family: "NanumGoB"; border-radius: 30px; padding: 20px 12px; box-sizing: border-box; resize: none; }
.cl_textareaBox::placeholder { color: #A0A0A0; font-size: 66px; 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; }
.cl_inputBox textarea { width: 100%; height: 100%; resize: none; font-size: 72px; font-family: "NanumGoB"; padding: 20px 12px; box-sizing: border-box;  }
.cl_inputBox textarea::placeholder { color: #A0A0A0; font-size: 72px; font-family: "NanumGoB"; vertical-align: middle; }
.cl_inputBox textarea:hover { background: #F9F9F9; }
.cl_inputBox textarea:hover::placeholder { color: #000; }

/***
    *****공통 팝업*****
***/
.cl_popupWrap { position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 21;  display: none;}
.cl_popupWrap .popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 833px;
    padding: 40px 50px 60px 80px; box-sizing: border-box; border-radius: 30px; border: 8px solid #F8C9A0; background-color: #FFF; }
.cl_popupWrap .cl_colon { width: 22px; height: 66px; background: url("../images/colon.png") center center no-repeat; margin-left: 45px; }
.cl_popupWrap .popup .cl_btnClose { position: absolute; top: 0; right: 0; cursor: pointer; }
/*스크롤 있을경우*/
.cl_popupWrap .popup .scrollArea { height: 620px; }
.cl_popupWrap .popup .scrollArea .mCSB_container { padding-right: 100px; }

.cl_popupWrap .exText { display: flex; gap: 30px; margin-top: 20px; }
.cl_popupWrap .exText.center { align-items: center; }
.cl_popupWrap .exText .textArea { display: flex; flex-direction: column; gap: 20px; }
.cl_popupWrap .exText .text { font-size: 54px; font-family: "HallymGoB"; }
.cl_popupWrap .exText .text .blue { color: #0048FF; }
.cl_popupWrap .exText .text .orange { color: #E0522E; }

.cl_popupWrap .exText .text .checkIcon { background: url("../images/pop_check_icon.png") center center no-repeat; width: 54px; height: 54px; display: inline-block; margin-right: 30px; margin-bottom: -10px; }

/*
    팝업 보라색
*/
.cl_popupWrap.purple .popup { border-color: #A78FFF; padding: 40px 40px 40px 70px;}
.cl_popupWrap.purple .popup .cl_popupTitle { margin-top: 0; padding-left: 0;}
.cl_popupWrap.purple .popup .cl_popupTitle.purpleDot:before {content: ''; width: 16px; height: 16px; position: absolute; top: 20px; left: -28px; background-image: url("../images/purpleDotIcon.png")}

/*팝업 title*/
.cl_popupTitle { position: relative; color: #000; font-size: 60px; font-family: "NanumGoB"; word-break: keep-all; word-wrap: break-word; white-space: nowrap;
    letter-spacing: -1.056px; padding-left: 45px; margin-top: 40px; }
.cl_popupTitle.asterisk:before { content: ''; width: 25px; height: 28px; position: absolute; top: 20px; left: 0; background-image: url("../images/asteriskBullet.png") }
.cl_popupTitle .orange { color: #E0522E; }
.cl_popupWrap .orange { color: #E0522E; }
.cl_popupWrap .blue { color: #0048FF; }
.cl_popupTitle .bold { font-family: "NanumGoEB"; }

/*팝업 화살표*/
.cl_popupWrap .popArrow { background: url("../images/pop_arrow.png") center center no-repeat; width: 48px; height: 20px; }

/*예 아이콘*/
.cl_exIcon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; font-size: 30px; font-family: "NanumGoB"; color: #fff;
    background-color: #383D9F; border-radius: 50%; box-sizing: border-box; margin-top: 10px; padding-top: 4px; padding-right: 3px; }


/*
    *** 역할 바꾸기 팝업
*/
.cl_popupWrap.role .popup {border-radius:20px; border:solid 10px #94EBC9; padding:0; padding-bottom:50px;}
.cl_popupWrap.role .popup .pop { padding: 0px; }
.cl_popupWrap.role .popup .pop .mainTitle {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 54px;
    font-family: "NanumGoB";
    background-color: #E5FEF4;
    padding: 20px 40px;
    box-sizing: border-box;
    border-radius:10px;
}
.cl_popupWrap.role .popup .pop .mainTitle .cl_bulletDia {margin-top:0;}
.cl_popupWrap.role .popup .pop .selectRoleArea { display: flex; align-items: center; justify-content: center; gap: 40px; margin:50px 40px; }
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole { display: flex; flex-direction: column; align-items: center; justify-content: center;}
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .cl_character {width:184px; height:184px; border:solid 8px #E1DEDE; background-color:#F6F5EB;}
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .cl_character.on {border-color:#3A3AC9;}
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .nameText { font-family: "NanumGoB"; font-size: 36px; white-space: nowrap; margin-top:17px; margin-bottom:8px;}
.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: 40px;
    font-family: "NanumGoB";
}
.cl_popupWrap.role .popup .pop .selectRoleArea .selectRole .inputBox input::placeholder { color: #ADADAD; }
.cl_popupWrap.role .popup .pop .cl_btnFlagStart {position:static; margin:0 auto; margin-bottom: 0px; transform: translateX(0);}
.cl_popupWrap.role .popup .pop .cl_btnClose {top:-36px; right:-36px;}



/***
    페이지네이션 팝업
    ***/
.cl_paginationPopup { display: none; position: fixed; top: 0; left: 0; background-color: #C1E9F1; width: 100%; height: 100%; z-index: 24; 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 .popup { width: 100%; height: 100%; }
.cl_paginationPopup .popupPage .imgArea { width: 100%; height: 100%; }
.cl_paginationPopup.eachPop .popupPage .imgArea { height: auto; }
.cl_paginationPopup .popupPage .imgArea img { width: 100%; height: 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 .popupPage .textArea.oneLine { padding-top: 63px; }

.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; }

/*모아이콘*/
.cl_missionPopup .popup .pop .moIcon { position: absolute; bottom: -23px; right: -75px; background-image: url("../images/alphabetCorrectMo.png"); background-repeat: no-repeat; width: 231px; height: 208px; }
.cl_missionPopup.fail .popup .pop .moIcon { background-image: url("../images/alphabetFailMo.png"); width: 214px; height: 237px; }



/***
    *** 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_1.png"); background-repeat: no-repeat; width: 100%; height: 100%; z-index: 23; }
.cl_beadPopup.grade4 { background-image: url("../images/beadCompletePopup_2.png"); }
.cl_beadPopup .bead { position: absolute; left: 50%; transform: translateX(-50%); top: 125px; background-repeat: no-repeat; width: 620px; height: 620px; }
.cl_beadPopup .bead.type1 { background-image: url("../images/bead_1.png");  }
.cl_beadPopup .bead.type2 { background-image: url("../images/bead_2.png");  }
.cl_beadPopup .bead.type3 { background-image: url("../images/bead_3.png");  }
.cl_beadPopup .bead.type4 { background-image: url("../images/bead_4_1.png");  }
.cl_beadPopup .bead.type5 { background-image: url("../images/bead_5.png"); }
.cl_beadPopup .bead.type6 { background-image: url("../images/bead_6.png"); }
.cl_beadPopup .bead.type7 { background-image: url("../images/bead_7.png"); }
.cl_beadPopup .bead.type8 { background-image: url("../images/bead_8.png"); }
.cl_beadPopup .bead.type9 { background-image: url("../images/bead_9.png"); }
.cl_beadPopup .bead.type10 { background-image: url("../images/bead_10.png"); }
.cl_beadPopup .bead.type11 { background-image: url("../images/bead_11.png"); }
.cl_beadPopup .bead.type12 { background-image: url("../images/bead_12.png"); }
.cl_beadPopup .bead.grade4.type1 { background-image: url("../images/bead_4.png");  }
.cl_beadPopup .bead.grade4.type2 { background-image: url("../images/grade4_bead2.png");  }
.cl_beadPopup .bead.grade4.type3 { background-image: url("../images/grade4_bead3.png");  }
.cl_beadPopup .bead.grade4.type4 { background-image: url("../images/grade4_bead4.png");  }
.cl_beadPopup .bead.grade4.type5 { background-image: url("../images/grade4_bead5.png");  }
.cl_beadPopup .bead.grade4.type6 { background-image: url("../images/grade4_bead6.png");  }
.cl_beadPopup .bead.grade4.type7 { background-image: url("../images/grade4_bead7_.png");  }
.cl_beadPopup .bead.grade4.type8 { background-image: url("../images/grade4_bead8.png");  }
.cl_beadPopup .bead.grade4.type9 { background-image: url("../images/grade4_bead9.png");  }
.cl_beadPopup .bead.grade4.type10 { background-image: url("../images/grade4_bead10.png");  }
.cl_beadPopup .bead.grade4.type11 { background-image: url("../images/grade4_bead11.png");  }
.cl_beadPopup .bead.grade4.type12 { background-image: url("../images/grade4_bead12.png");  }
.cl_beadPopup .popup .title { position: absolute; bottom: 192px; left: 50%; transform: translateX(-50%); font-size: 72px; color: #fff; font-family: "Jalnan"; display: flex; align-items: center;justify-content: center;  width: 100%;
    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;}
/*type3*/
.cl_exBox.type3 { flex-direction: column; gap: 20px; margin-bottom: 0 !important; padding: 25px; }

/*
    *** 알파벳 사선지
*/
.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.s1.long { height: 658px; }
.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_alphabetPaper.s6 {width:292px; height:140px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper_3.png?v=2"); background-position:center;}
.cl_alphabetPaper.s7 {width:864px; height:123px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper_4.png?v=2"); background-position:center;}
.cl_alphabetPaper.s8 {width:940px; height:123px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper_5.png?v=2"); background-position:center;}
.cl_alphabetPaper.s9 {width:702px; height:180px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper_6.png?v=2"); background-position:center;}
.cl_alphabetPaper.s10 {width:1694px; height:162px; border-radius:0px; margin:0; outline:none; background-image:url("../images/wordPaper_7.png?v=2"); background-position:center;}
.cl_alphabetPaper.s11 {width:1215px; height:486px; margin:0; outline:none; background-image:url("../images/wordPaper_8.png?v=2"); background-position:center;}
.cl_alphabetPaper.s12 {width:827px; height:210px; border-radius:0px; margin:0; outline:none; background-image:url("../images/paper_1.png?v=2"); background-position:center;}
.cl_alphabetPaper.s13 {width:588px; height:149px; border-radius:0px; margin:0; outline:none; background-image:url("../images/paper_2.png?v=2"); background-position:center;}
.cl_alphabetPaper.s14 {width:910px; height:123px; border-radius:0px; margin:0; outline:none; background-image:url("../images/paper_3.png?v=2"); background-position:center;}
.cl_alphabetPaper.s15 {width:588px; height:149px; border-radius:0px; margin:0; outline:none; background-image:url("../images/paper_4.png?v=2"); background-position:center;}

/*
    *** 애니메이션 시퀀스 컨테이너
*/
.cl_aniSeqWrap {position:relative;}
.cl_aniSeqWrap > img {display:none; position:absolute; left:50%; transform:translateX(-50%); border-radius: 30px;}
.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: 3; }
.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: 2; }
.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:hover { 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"; }
.cl_repeatColorCard.on .text { color: #137AE2; }


/*칼라박스*/
.cl_readColorBox { display: flex; align-items: center; justify-content: center; width: 357px; height: 151px;
    box-sizing: border-box; border-radius: 30px; border: 2px solid rgba(0, 0, 0, 0.20); background: #FFF; padding: 20px; box-sizing: border-box; cursor: pointer; }

.cl_readColorBox span { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 70px; color: #000; font-family: "PretendardB"; border-radius: 20px; padding: 10px; box-sizing: border-box; }
.cl_readColorBox.green span { border: 5px dashed #89C257; }
.cl_readColorBox.purple span { border: 5px dashed #8387E0; }
.cl_readColorBox.red span { border: 5px dashed #E58186; }
.cl_readColorBox.sky span { border: 5px dashed #68CBD2; }

.cl_readColorBox.green:hover { background: #DFEDD3; }
.cl_readColorBox.purple:hover { background: #DFE0F2; }
.cl_readColorBox.red:hover { background: #F2E1E2; }
.cl_readColorBox.sky:hover { background: #D4EDEF; }

.cl_readColorBox.on {  padding: 12px; }
.cl_readColorBox.green.on { border: 8px solid #74B63A; }
.cl_readColorBox.purple.on { border: 8px solid #8387E0; }
.cl_readColorBox.red.on { border: 8px solid #E35960; }
.cl_readColorBox.sky.on { border: 8px solid #4FCAD2; }

.cl_readColorBox.green.on span { color: #70BE2C; }
.cl_readColorBox.purple.on span { color: #666CDB; }
.cl_readColorBox.red.on span { color: #EA5C63; }
.cl_readColorBox.sky.on span { color: #32B2BB; }

/*
    *** 스티커
 */

/*5학년*/
.cl_sticker { position: absolute; bottom: 13px; right: 30px; background-image: url("../images/sticker1_grade5.svg"); background-repeat: no-repeat; width: 250px; height: 250px; cursor: pointer; }
.cl_sticker.type2 { background-image: url("../images/sticker2_grade5.svg"); }
.cl_sticker.type3 { background-image: url("../images/sticker3_grade5.svg"); }
.cl_sticker.type4 { background-image: url("../images/sticker4_grade5.svg"); }

.cl_sticker.on { background-image: url("../images/sticker1_grade5_on.svg"); }
.cl_sticker.type2.on { background-image: url("../images/sticker2_grade5_on.svg"); }
.cl_sticker.type3.on { background-image: url("../images/sticker3_grade5_on.svg"); }
.cl_sticker.type4.on { background-image: url("../images/sticker4_grade5_on.svg"); }


/*6학년*/
.cl_sticker.grade6 { background-image: url("../images/sticker1_grade6.svg"); background-repeat: no-repeat; width: 250px; height: 250px; }
.cl_sticker.grade6.type2 { background-image: url("../images/sticker2_grade6.svg"); }
.cl_sticker.grade6.type3 { background-image: url("../images/sticker3_grade6.svg"); }
.cl_sticker.grade6.type4 { background-image: url("../images/sticker4_grade6.svg"); }

.cl_sticker.grade6.on { background-image: url("../images/sticker1_grade6_on.svg"); }
.cl_sticker.grade6.type2.on { background-image: url("../images/sticker2_grade6_on.svg"); }
.cl_sticker.grade6.type3.on { background-image: url("../images/sticker3_grade6_on.svg"); }
.cl_sticker.grade6.type4.on { background-image: url("../images/sticker4_grade6_on.svg"); }

/*
    *** 칭찬아이콘
 */
.cl_praiseIcon { position: absolute; top: 33px; left: 46px; background-image: url("../images/praiseIcon_1.svg"); background-repeat: no-repeat; width: 97px; height: 113px; }
.cl_praiseIcon.type2 { background-image: url("../images/praiseIcon_2.svg");left: 45px; width: 101px; height: 99px; }
.cl_praiseIcon.type3 { background-image: url("../images/praiseIcon_3.svg");left: 29px; width: 131px; height: 98px; }
.cl_praiseIcon.type4 { background-image: url("../images/praiseIcon_4.svg");left: 37px; width: 116px; height: 112px; }

/*
    *** 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.on: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_oxQuizBox.type2 { background-image: url("../images/oxSelectBox_2.png"); width: 659px; height: 148px; }
.cl_oxQuizBox.type3 { background-image: url("../images/oxSelectBox_3.png"); width: 273px; height: 106px; }
/*type4*/
.cl_oxQuizBox.type4 { background-image: url("../images/oxSelectBox_4.png"); width: 379px; height: 148px; }
.cl_oxQuizBox.type4 .answer { font-size: 90px; }
.cl_oxQuizBox.type4 .answer.on:after { width: 139px; height: 139px; background-image: url("../images/oxQuizOIcon_2.png"); }
/*type5*/
.cl_oxQuizBox.type5 { background-image: url("../images/oxSelectBox_5.png"); width: 563px; height: 148px; }
/*type6*/
.cl_oxQuizBox.type6 { background-image: url("../images/oxSelectBox_6.png"); width: 484px; height: 148px; }

/*
    *** 보기아이콘
 */
.cl_bogiIcon { background-image: url("../images/bogiIcon.png"); background-repeat: no-repeat; width: 121px; height: 70px; }
.cl_bogiIcon.purple { display: inline-flex; background-image: url("../images/bogiIcon_purple.png"); background-repeat: no-repeat; width: 120px; height: 70px; }
.cl_bogiIcon.darkPurple { display: inline-flex; background-image: url("../images/cl_bogiIcon_darkPurple.png"); background-repeat: no-repeat; width: 120px; height: 70px; }
.cl_bogiIcon.sky { display: inline-flex; background-image: url("../images/bogiIcon_sky.png"); background-repeat: no-repeat; width: 120px; height: 70px; }
.cl_bogiIcon.skyBlue { background-image: url("../images/bogiIcon_skyBlue.png"); background-repeat: no-repeat; width: 94px; height: 59px;  margin-bottom: -8px;}
.cl_sectionTitle .cl_bogiIcon {display: inline-block; position: relative; top: 11px; }


/*
    *** 볼륨조절바
*/
.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;
}

.cl_passwordBtn {width: 78px; height: 78px; background-image: url("../images/passwordBtn.png") ; background-repeat: no-repeat; cursor: pointer;}
.cl_passwordBtn:hover {background-image: url("../images/passwordBtn_over.png") ;}
.cl_passwordBtn.re {background-image: url("../images/passwordBtn_re.png") ;}
.cl_passwordBtn.re:hover { background-image: url("../images/passwordBtn_re.png"); }



/*
    *** 팔레트
 */
.cl_palette { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 16px;
    padding: 16px; border-radius: 30px 60px 60px 0px; background: rgba(0, 0, 0, 0.20); box-sizing: border-box; }
.cl_palette .color { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; background-color: #F8FDFD; border-radius: 50%; cursor: pointer; }
.cl_palette .color span { width: 42px; height: 42px; border-radius: 50%; }

.cl_palette .red span { background-color: #FF181F; }
.cl_palette .orange span { background-color: #e37839; }
.cl_palette .green span { background-color: #65CC40; }
.cl_palette .blue span { background-color: #1B9FD8; }
.cl_palette .purple span { background-color: #8A4DDF; }
.cl_palette .yellow span { background-color: #FFDA46; }
.cl_palette .white span { border: 3px solid #D9D9D9; box-sizing: border-box; background-color: #FEFFE7; }
.cl_palette .black span { background-color: #000; border: 3px solid #fff; }
.cl_palette .deleteColor { background-color: transparent; background-image: url("../images/deleteColorIcon.png"); background-repeat: no-repeat; }

.cl_palette .red:hover { background-color: #FF181F; }
.cl_palette .red:hover span { background-color: #FF181F; border: 3px solid #fff; }
.cl_palette .orange:hover { background-color: #e37839; }
.cl_palette .orange:hover span { background-color: #e37839; border: 3px solid #fff; }
.cl_palette .green:hover { background-color: #65CC40; }
.cl_palette .green:hover span { background-color: #65CC40; border: 3px solid #fff; }
.cl_palette .blue:hover { background-color: #1B9FD8; }
.cl_palette .blue:hover span { background-color: #1B9FD8; border: 3px solid #fff; }
.cl_palette .purple:hover { background-color: #8A4DDF; }
.cl_palette .purple:hover span { background-color: #8A4DDF; border: 3px solid #fff; }
.cl_palette .yellow:hover { background-color: #FFDA46; }
.cl_palette .yellow:hover span { background-color: #FFDA46; border: 3px solid #fff; }
.cl_palette .white:hover { border: 5px solid #D9D9D9; box-sizing: border-box; }
.cl_palette .black:hover { background-color: #000; box-sizing: border-box; }
.cl_palette .deleteColor:hover { background-image: url("../images/deleteColorIcon_on.png") }

.cl_palette .red.on { background-color: #FF181F; }
.cl_palette .red.on span { background-color: #FF181F; border: 3px solid #fff; }
.cl_palette .orange.on { background-color: #e37839; }
.cl_palette .orange.on span { background-color: #e37839; border: 3px solid #fff; }
.cl_palette .green.on { background-color: #65CC40; }
.cl_palette .green.on span { background-color: #65CC40; border: 3px solid #fff; }
.cl_palette .blue.on { background-color: #1B9FD8; }
.cl_palette .blue.on span { background-color: #1B9FD8; border: 3px solid #fff; }
.cl_palette .purple.on { background-color: #8A4DDF; }
.cl_palette .purple.on span { background-color: #8A4DDF; border: 3px solid #fff; }
.cl_palette .yellow.on { background-color: #FFDA46; }
.cl_palette .yellow.on span { background-color: #FFDA46; border: 3px solid #fff; }
.cl_palette .white.on { border: 5px solid #D9D9D9; box-sizing: border-box; }
.cl_palette .black.on { background-color: #000; box-sizing: border-box; }
.cl_palette .deleteColor.on { background-image: url("../images/deleteColorIcon_on.png") }


/*표정아이콘*/
.cl_expression { width: 223px; height: 220px; background-repeat: no-repeat; cursor: pointer; background-position: center center; }
.cl_expression.type1 { background-image: url("../images/expression_1_dis.png"); }
.cl_expression.type2 { background-image: url("../images/expression_2_dis.png"); }
/*25.03.21 주석*/
/*.cl_expression.type1.on { background-image: url("../images/expression_1.png"); }*/
/*.cl_expression.type2.on { background-image: url("../images/expression_2.png"); }*/
/*.cl_expression.type1:hover { background-image: url("../images/expression_1.png"); }*/
/*.cl_expression.type2:hover { background-image: url("../images/expression_2.png"); }*/



/* 25.11.14 말풍선 캐릭터  */

.cl_balloonCha { display: block; width: 111px; height: 111px; background-repeat: no-repeat;background-size: 111px; }
.cl_balloonCha.cha1 { background-image: url("../images/character/balloonCha1.png");}
.cl_balloonCha.cha2 { background-image: url("../images/character/balloonCha2.png");}
.cl_balloonCha.cha3 { background-image: url("../images/character/balloonCha3.png");}
.cl_balloonCha.cha4 { background-image: url("../images/character/balloonCha4.png");}
.cl_balloonCha.cha5 { background-image: url("../images/character/balloonCha5.png");}
.cl_balloonCha.cha6 { background-image: url("../images/character/balloonCha6.png");}
.cl_balloonCha.cha7 { background-image: url("../images/character/balloonCha7.png");}
.cl_balloonCha.cha8 { background-image: url("../images/character/balloonCha8.png");}
.cl_balloonCha.cha9 { background-image: url("../images/character/balloonCha9.png");}
.cl_balloonCha.cha10 { background-image: url("../images/character/balloonCha10.png");}
.cl_balloonCha.cha11 { background-image: url("../images/character/balloonCha11.png");}
.cl_balloonCha.cha12 { background-image: url("../images/character/balloonCha12.png");}
.cl_balloonCha.cha13 { background-image: url("../images/character/balloonCha13.png");}
.cl_balloonCha.cha14 { background-image: url("../images/character/balloonCha14.png");}
.cl_balloonCha.cha15 { background-image: url("../images/character/balloonCha15.png");}
.cl_balloonCha.cha16 { background-image: url("../images/character/balloonCha16.png");}
.cl_balloonCha.cha17 { background-image: url("../images/character/balloonCha17.png");}
.cl_balloonCha.chaA { background-image: url("../images/character/balloonCha_a.png");}
.cl_balloonCha.chaB { background-image: url("../images/character/balloonCha_b.png");}
.cl_balloonCha.chaC { background-image: url("../images/character/balloonCha_c.png");}

.cl_balloonCha.cha1.on { background-image: url("../images/character/balloonCha1_on.png");}
.cl_balloonCha.cha2.on { background-image: url("../images/character/balloonCha2_on.png");}
.cl_balloonCha.cha3.on { background-image: url("../images/character/balloonCha3_on.png");}
.cl_balloonCha.cha4.on { background-image: url("../images/character/balloonCha4_on.png");}
.cl_balloonCha.cha5.on { background-image: url("../images/character/balloonCha5_on.png");}
.cl_balloonCha.cha6.on { background-image: url("../images/character/balloonCha6_on.png");}
.cl_balloonCha.cha7.on { background-image: url("../images/character/balloonCha7_on.png");}
.cl_balloonCha.cha8.on { background-image: url("../images/character/balloonCha8_on.png");}
.cl_balloonCha.cha9.on { background-image: url("../images/character/balloonCha9_on.png");}
.cl_balloonCha.cha10.on { background-image: url("../images/character/balloonCha10_on.png");}
.cl_balloonCha.cha11.on { background-image: url("../images/character/balloonCha11_on.png");}
.cl_balloonCha.cha12.on { background-image: url("../images/character/balloonCha12_on.png");}
.cl_balloonCha.cha13.on { background-image: url("../images/character/balloonCha13_on.png");}
.cl_balloonCha.cha14.on { background-image: url("../images/character/balloonCha14_on.png");}
.cl_balloonCha.cha15.on { background-image: url("../images/character/balloonCha15_on.png");}
.cl_balloonCha.cha16.on { background-image: url("../images/character/balloonCha16_on.png");}
.cl_balloonCha.cha17.on { background-image: url("../images/character/balloonCha17_on.png");}
.cl_balloonCha.chaA.on { background-image: url("../images/character/balloonCha_a_on.png");}
.cl_balloonCha.chaB.on { background-image: url("../images/character/balloonCha_b_on.png");}
.cl_balloonCha.chaC.on { background-image: url("../images/character/balloonCha_c_on.png");}

.cl_balloonCha.cha5.grey { background-image: url("../images/character/balloonCha5_grey.png");}
.cl_balloonCha.cha6.grey { background-image: url("../images/character/balloonCha6_grey.png");}


.cl_balloonText.round { position: relative; display: inline-block; border-radius: 12px; border: 5px solid #D2D2D4; box-sizing: border-box; font-size: 54px; color: #000; font-family: "HallymGoB"; padding: 16px 36px; background-color: #fff;}
.cl_balloonText.on { color: #0048FF}
.cl_balloonText.round:before { content: ''; position: absolute; top: 50%; transform: translateY(-50%); left: -15px; width: 15px; height: 22px; background: url("../images/balloonArrowL.png")no-repeat;}
.cl_balloonText.round.right:before { content: ''; position: absolute; top: 50%; transform: translateY(-50%);left: auto; right: -15px; width: 15px; height: 22px; background: url("../images/balloonArrowR.png")no-repeat;}

/* 재생중 말풍선 캐릭터 효과 */
.play .cl_balloonCha.cha1 { background-image: url("../images/character/balloonCha1_on.png");}
.play .cl_balloonCha.cha2 { background-image: url("../images/character/balloonCha2_on.png");}
.play .cl_balloonCha.cha3 { background-image: url("../images/character/balloonCha3_on.png");}
.play .cl_balloonCha.cha4 { background-image: url("../images/character/balloonCha4_on.png");}
.play .cl_balloonCha.chaA { background-image: url("../images/character/balloonCha_a_on.png");}
.play .cl_balloonCha.chaB { background-image: url("../images/character/balloonCha_b_on.png");}
.play .cl_balloonCha.chaC { background-image: url("../images/character/balloonCha_c_on.png");}



/*
    *** peer check
 */
.cl_starBoxWrap { position: absolute; top: 140px; left: 50%; transform: translateX(-50%); width: 1600px; display: flex; flex-direction: column; gap: 40px; }
.cl_starBoxWrap .starBox { display: flex; border: 5px solid #CDCDFC; border-radius: 16px; }
.cl_starBoxWrap .starText { width: 1060px; border-right: 5px dashed #CDCDFC; padding: 30px 20px 30px 80px; position: relative; background-color: #F5F5FF; border-radius: 12px 0 0 12px; }
.cl_starBoxWrap .starText p { font-size: 54px; font-family: "NanumGoB"; word-break: keep-all; }
.cl_starBoxWrap .starText::after { content: ''; width: 25px; height: 28px; position: absolute; top: 43px; left: 30px; background-image: url("../images/asteriskBullet_perple.png"); }
.cl_starBoxWrap .checkStarWrap { width: 425px; display: flex; justify-content: center; gap: 30px; align-items: center; background-color: #EEEEFF; border-radius: 0 12px 12px 0;  }
.cl_starBoxWrap .checkStar { background: url("../images/star.png") center center no-repeat; width: 98px; height: 94px; cursor: pointer; }
.cl_starBoxWrap .checkStar.on { background: url("../images/star_on.png") center center no-repeat; }



/*
 review 아이콘
*/
.cl_reviewIcon { width: 275px; height: 89px; background: url("../images/reviewIconP.png") no-repeat; }
.cl_reviewIcon.brown {  background: url("../images/reviewIconB.png") no-repeat; }

/*
  대본 아이콘 버튼
*/

.cl_scriptIcon { position: absolute; width: 154px; height: 73px; background: url("../images/scriptBtn.png") no-repeat; cursor: pointer;}
.cl_scriptIcon:hover { background: url("../images/scriptBtn_hover.png") no-repeat;}





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

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

        /*호버*/
        .cl_tabBtnWrap .tabBtn:hover { background-color: #F2F2F2; border-color: #c4c4c4; color: #565656; }
        .cl_tabBtnWrap.type2 .tabBtn:hover { background-color: transparent; border-color: transparent; color: #565656; }
        .cl_tabBtnWrap .tabBtn.on:hover { color: #fff; background-color: #E0522E; border-color: #D44623; }

        /*스탭탭버튼*/
        .cl_readyTabButtons .tabBtn:hover { background-image: url("../images/stepTabButton_1_hover.png") }
        .cl_readyTabButtons .tabBtn.make: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.groupChk: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.make: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.groupChk: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.active { background: url("../images/translateBtn_on.png")no-repeat; }
        .cl_btnTransView:hover { background: url("../images/translateBtn_hover.png")no-repeat; }
        .cl_btnTransView.active: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 { background-image: url("../images/cl_btnListenSong_hover.png"); }
        /*.cl_btnListenSong:not(.pause):hover:after { content: ''; position: absolute; top: -57px; 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_btnListenSong.poem:not(.pause):hover:after {left: -35px; width: 132px; background: url("../images/cl_btnListenSongPoem_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_btnShowSlide:hover { background: url("../images/showSlideBtn_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_btnCreate.dis:hover { background-image: url("../images/createBtn_dis.png"); pointer-events: none; }

        /*영상보기버튼*/
        .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 rgba(0, 0, 0, 0.20); 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; box-sizing: border-box; }
        .cl_btnTab.on:hover span { color: #fff; background: #0A9FEA; box-sizing: border-box; }

        .cl_btnTab.orange:hover span { box-sizing: border-box; background: #fff;  border: 1px solid rgba(0,0,0,0.1); }
        .cl_btnTab.orange.on:hover span { color: #fff; background: #E0522E; 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 #F8C9A0; }
        .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 .cl_balloon.char.express { display: block; }
        .cl_conversationChar.on:hover .cl_balloon.char.express { display: none; }

        .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; }

}


/*26.01.16추가 ox 선택일때*/
.cl_page .oxChoice { position: relative; cursor: pointer; width: 100%; height: 100%; overflow: hidden; }
.cl_page .oxChoice.comp { cursor: unset; }

.cl_page .oxChoice .choiceItem { width: 162px; height: 162px; position: absolute; z-index: 99; }
.cl_page .oxChoice .choiceItem.on { background: url("../images/ox_o.png") center center no-repeat; }

.cl_page .oxChoice .choiceItem1 { top: 51px; left: 397px; }
.cl_page .oxChoice .choiceItem2 { top: 51px; left: 1138px; }
.cl_page .oxChoice .choiceItem3 { top: 464px; left: 1431px; }

.oxChoice .choiceWrong { background: url("../images/ox_x.png") center center no-repeat; position: absolute; width: 142px; height: 142px; display: none; pointer-events: none; transform: translate(-50%, -50%); }


/*26.03.16추가 알파벳 선택일때*/
.choiceBoxItem { width: 80px; height: 72px; background: #FFFFFF; border: 3px solid #606060; border-radius: 12px; cursor: pointer; position: absolute; box-sizing: border-box; }
.choiceBoxItem.result { pointer-events: none; background: #278CF2; border: 3px solid #1884F0; }
.choiceBoxItem.result .choiceText {  color: #fff;  }
.choiceBoxItem::after { content: ""; position: absolute; top: 50%; left: 50%; font-family: "HallymGoB"; font-size: 54px; letter-spacing: -0.54px; }
.choiceBoxItem.clicked,
.choiceBoxItem:hover { border: 3px solid #278CF2; background: #CADFF5;  }
.choiceBoxItem .choiceText { position: absolute; top: 50%; left: 50%; font-family: "HallymGoB"; font-size: 54px; letter-spacing: -0.54px; transform: translate(-50%, -50%); }
.choiceBoxItem .hideChoiceItemWrap { display: none; }
.choiceBoxItem.clicked .hideChoiceItemWrap { display: block; position: absolute; right: 0; top: 0; }
.choiceBoxItem .choiceItemWrap { display: flex; border: 3px solid #606060; border-radius: 12px; box-sizing: border-box; }
.choiceBoxItem .choiceItemWrap .choice { width: 80px; height: 72px; color: #000; text-align: center; font-family: "HallymGoB"; font-size: 54px; line-height: 72px; letter-spacing: -0.54px; background: #fff; border-bottom: 2px solid #BCBCBC; box-sizing: border-box; }
.choiceBoxItem .choiceItemWrap .choice:hover { color: #000; background: #CADFF5; }
.choiceBoxItem .choiceItemWrap .choice:first-of-type { border-radius: 10px 10px 0 0; }
.choiceBoxItem .choiceItemWrap .choice:last-of-type { border-bottom: none; border-radius: 0 0 10px 10px; }