/*
    ************************************ 공통 요소 ************************************
*/
.paddingNon { padding: 0 !important; }
.paddingNon { padding: 0 !important; }
.btnPopup { position: absolute; right: 56px; }
/*.gapNon { gap: 0 !important; }*/



/*
    *** 커스텀 스크롤
*/
.mCSB_scrollTools {
    width: 32px;
    opacity:1 !important;
}

.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar, .mCS-light-thick.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 22px;
    border-radius: 80px;
    border: 1px solid #BA4F06;
    box-sizing: border-box;
    box-shadow: 0px 0px 4px 2px rgba(255, 255, 255, 0.25) inset;
    background: #F47A1E;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {background: #F47A1E;}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {background: #F47A1E;}

.mCS-dark-thick.mCSB_scrollTools .mCSB_draggerRail, .mCS-light-thick.mCSB_scrollTools .mCSB_draggerRail {
    width: 2px;
    background-color:#D9D9D9;
}


/*
    *** 화면 블록
*/
.screenBlock {position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}




/*
    ************************************ 외곽 레이아웃 ************************************
*/

html, body {height:100%; overflow: hidden;}

/*화면 전체를 감싸는 영역*/
.pageOutWrap {display:block; position:relative; width:100%; height:100%; overflow: hidden; background-size:cover; background-position:center center;}


/*스케일로 리사이징 되는 영역*/
.contentOutWrap {
    width:1920px;
    height:1080px;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;

    background-image:url("../images/contentBg1.png");
}


/*
    *** 배경
*/
body.bg2 .contentOutWrap {background-image:url("../images/contentBg2.png");}
body.bg3 .contentOutWrap {background-image:url("../images/contentBg3.png");}
body.bg4 .contentOutWrap {background-image:url("../images/contentBg4.png");}
body.bg5 .contentOutWrap {background-image:url("../images/contentBg5.png");}

body.bgCheck .contentOutWrap {background-image:url("../images/contentBg_checkPage.png");}




/*
    ************************************ 페이지 레이아웃 ************************************
*/

.pageFrame {display:flex; flex-direction: column; width:100%; height:100%; box-sizing: border-box;}
.pageFrame .pageFrameHead {position:relative; display:flex; align-items: center; padding: 0 57px; box-sizing: border-box;}
.pageFrame .pageFrameHead.start { align-items: flex-start; padding-top: 30px; box-sizing: border-box;}
.pageFrame .pageFrameHead.end { align-items: flex-end; padding-bottom: 42px; box-sizing: border-box;}
.pageFrame .pageFrameHead.end.smallGap { padding-bottom: 20px; }
.pageFrame .pageFrameBody {position:relative; display:flex; justify-content:center; align-items:flex-start; flex:1; box-sizing: border-box;}


.mainContentBox {position:relative; width: 1807px; height: 100%; border-radius: 30px; box-sizing: border-box; /*padding:50px;*/ background-color:#ffffff;}
.mainContentBox:before {content:""; position:absolute; top:-10px; left:-10px; z-index:-1; width:calc(100% + 20px); height:calc(100% + 20px); border-radius: 40px; background-color:rgba(44, 95, 114, 0.20);}

.mainContentBox.bg2:before {background-color:rgba(112, 58, 25, 0.20);}
.mainContentBox.bg3:before {background-color:rgba(44, 95, 114, 0.20);}
.mainContentBox.bg4:before {background-color:rgba(38, 98, 120, 0.20);}
.mainContentBox.bg5:before {background-color:rgba(46, 140, 129, 0.20);}


.mainContentBox.clear {width: 1827px; height: 100%; border-radius: 0; background-color:transparent;}
.mainContentBox.clear:before {content:none;}


/*
    *** 레이아웃1 - 발문높이 238
*/
body.layout1 .pageFrame .pageFrameHead {height:238px;}
body.layout1 .pageFrame .mainContentBox {height:800px;}
body.layout1 .pageFrame .mainContentBox.typeBlue { background-color: #EFFAF7; }


/*
    *** 레이아웃2 - 발문높이 285
*/
body.layout2 .pageFrame .pageFrameHead {height:285px;}
body.layout2 .pageFrame .mainContentBox {height:760px;}


/*
    *** 레이아웃3 - 발문높이 154
*/
body.layout3 .pageFrame .pageFrameHead {height:154px;}
body.layout3 .pageFrame .mainContentBox {height:891px; }
body.layout3 .pageFrame .pageFrameHead .cl_directive { top: 98px; right: 53px; }

/*
    *** 레이아웃3 - 발문높이 118
*/
body.layout4 .pageFrame .pageFrameHead {height:118px;}
body.layout4 .pageFrame .mainContentBox {height:927px;}


/*
    *** 레이아웃4 - 발문높이 94
*/
body.layout5 .pageFrame .pageFrameHead {height:94px;}
body.layout5 .pageFrame .mainContentBox {height:944px;}

/*
    *** 레이아웃5 - 발문높이 308
*/
body.layout6 .pageFrame .pageFrameHead {height: 308px;}
body.layout6 .pageFrame .mainContentBox {height: 730px;}

/*
    *** 레이아웃7 - 발문높이 285
*/
body.layout7 .pageFrame .pageFrameHead {height:184px;}
body.layout7 .pageFrame .mainContentBox {height:861px;}


/*
    *** 레이아웃 full - 발문영역 없음
*/
body.layoutFull .pageFrame .pageFrameHead {display:none;}
body.layoutFull .pageFrame .pageFrameBody {padding-top:41px;}
body.layoutFull .pageFrame .mainContentBox {height:1004px;}

/*
    *** 레이아웃 체크
*/
body.layoutCheck .pageFrame .pageFrameHead {height:174px;}
body.layoutCheck .pageFrame .mainContentBox { height:876px; position: relative; overflow: visible; border: 10px solid #D6BDAB; box-sizing: border-box; padding: 39px 53px; }
body.layoutCheck .pageFrame .mainContentBox:before { content: ''; position: absolute; top: -13px; left: -19px; background-image: url("../images/checkContentBox.png");
    background-repeat: no-repeat; width: 1827px; height: 883px; z-index: 0; background-color: transparent; border-radius: 0; }

/*
    *** 레이아웃 오공완
*/
body[data-pageType="todayStudyComplete"]{ opacity: 0; }
.todayStudyIntro { position: absolute; top: 0; left: 0; background: url("../images/todayStudyInrtoBg.png") no-repeat; background-size: cover; width: 1920px; height: 1080px; z-index: 22; }
.todayStudyIntro.grade4 { background-image: url("../images/todayStudyIntroBg_grade4.png"); }
.todayStudyIntro .textWrap { position: absolute; bottom: 214px; left: 50%; transform: translateX(-50%); text-align: center; }
.todayStudyIntro .textWrap .mainTitle { color: #fff; font-size: 45px; font-family: "Jalnan"; margin-bottom: 54px;
    text-shadow: 3px 0px 0px #D05900, 0px 3px 0px #D05900, -3px 0px 0px #D05900, 0px -3px 0px #D05900, 3px 3px 0px #D05900, -3px 3px 0px #D05900, -3px -3px 0px #D05900, 3px -3px 0px #D05900,
    3px 0px 0px #D05900, 0px 3px 0px #D05900, -3px 0px 0px #D05900, 0px -3px 0px #D05900, 3px 3px 0px #D05900, -3px 3px 0px #D05900, -3px -3px 0px #D05900, 3px -3px 0px #D05900,
    3px 0px 0px #D05900, 0px 3px 0px #D05900, -3px 0px 0px #D05900, 0px -3px 0px #D05900, 3px 3px 0px #D05900, -3px 3px 0px #D05900, -3px -3px 0px #D05900, 3px -3px 0px #D05900;
    box-sizing: border-box;
}
.todayStudyFinish { position: absolute; top: 0; left: 0; background: url("../images/todayStudyFinishBg.png")no-repeat; background-size: cover; width: 1920px; height: 1080px; z-index: 21; }

/*
    *** 오공완박스
*/
.todayStudyBox { display: none; padding: 38px 33px; box-sizing: border-box; height: 100%; }
.todayStudyBox .blankBox { display: flex; align-items: center; justify-content: center; width: 1543px; height: 250px; border-radius: 20px; background: #EFEFEF; margin: 0 auto; margin-bottom: 40px; }
.todayStudyBox .blankBox .text { font-size: 140px; font-family: "HallymGoB"; display: flex; align-items: center; justify-content: center; gap: 60px; }
.todayStudyBox .blankBox .text .blank { width: 175px; height: 165px; background: #d7d7d7; border-radius: 30px; }
.todayStudyBox .blankBox .word { display: flex; align-items: flex-end; justify-content: center; }
.todayStudyBox .blankBox .line { display: block; width: 40px; border-bottom: 7px solid #000; margin-bottom: 20px; box-sizing: border-box; }

.todayStudyBox.threeImg .cl_pageTitle { margin-bottom: 118px; }
.todayStudyBox.threeImg .cl_pageTitle.twoLine { margin-bottom: 80px; }
.todayStudyBox.threeImg .imgSelectArea .cl_imgSelect { width: 380px; height: 426px; }
.todayStudyBox.threeImg .imgSelectArea { gap: 120px; }

/*오공완 알파벳쓰기*/
.todayStudyBox.writeAlphabet .cl_alphabetPaper.s12 input { width: 100%; height: 100%; position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    text-align: center; font-size: 200px; color: #000; font-family: "PrintBoldR"; background-color: transparent; }
.todayStudyBox.writeAlphabet .cl_alphabetPaper.s12 .answerCell { position: absolute; top: -5px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 200px; color: #137AE2; font-family: "PrintBoldR"; }
.todayStudyBox.writeAlphabet .blankBox { width: 827px; height: 198px; font-size: 110px; font-family: "PretendardB"; display: flex; align-items: center; justify-content: center; gap: 50px;
    border-radius: 30px; background: #EFEFEF; }

/*가로 보기 박스*/
.todayStudyBox.rowBogiBox .cl_imgSelect { display: flex; align-items: center; justify-content: center; width: 540px; height: 150px; text-align: center; margin-bottom: 36px; }
.todayStudyBox.rowBogiBox .cl_imgSelect .text { font-size: 90px; }
.todayStudyBox.rowBogiBox .cl_imgSelect:nth-last-child(1) { margin-bottom: 0; }
.todayStudyBox.rowBogiBox .imgBox { display: flex;  width: 1564px; height: 216px; border-radius: 35px; border: 10px solid #EAE8E8; box-sizing: border-box; margin: 0 auto; margin-bottom: 57px; }
.todayStudyBox.rowBogiBox .imgBox { width: 1364px; }
.todayStudyBox.rowBogiBox .imgBox .text { display: flex; align-items: center; justify-content: center; gap: 15px; text-align: center; font-size: 72px; padding: 20px 0; box-sizing: border-box; width: 100%; font-family: "PretendardB"; }
.todayStudyBox.rowBogiBox .imgBox .imgArea img { height: 100%; }
.todayStudyBox.rowBogiBox .oxArea .imgArea { border: none; width: 100%; }
.todayStudyBox.rowBogiBox .oxArea .selectArea{gap: 50px;}
.todayStudyBox.rowBogiBox .oxArea .flexArea { display: flex; align-items: center; gap: 100px; }
.todayStudyBox.rowBogiBox .cl_textSelect { width: 600px; }

/*이미지 텍스트 박스 같이있는것*/
.todayStudyBox.imgTextBox .oxArea {justify-content: space-around;}
.todayStudyBox.imgTextBox .cl_pageTitle { margin-bottom: 54px; }
.todayStudyBox.imgTextBox .imgBox .text { text-align: center; font-size: 60px; padding: 30px 0; box-sizing: border-box; width: 100%; font-family: "PretendardB"; }
.todayStudyBox.imgTextBox .imgBox .imgArea { height: 416px; }
.todayStudyBox.imgTextBox .imgBox .imgArea img { width: 100%; height: 100%; border-radius: 25px 25px 0 0; }
.todayStudyBox.imgTextBox .imgBox { width: 643px; border-radius: 35px; border: 10px solid #EAE8E8; box-sizing: border-box; }
.todayStudyBox.imgTextBox .oxArea .imgArea { border: none; width: 100%; }
.todayStudyBox.imgTextBox .oxArea .selectArea{gap: 80px; position: relative; left: -230px;}

/*
    *** 레이아웃 리뷰
*/
.reviewArea { padding: 36px 0px 0 31px; box-sizing: border-box; overflow: hidden; }
.reviewArea .cl_bulletTitle { gap: 23px; margin-bottom: 36px; }
.reviewArea .cl_bulletTitle.twoLine { margin-bottom: 20px; }

/*박스*/
.reviewArea .subContentBox { position: relative; width: 1250px; height: 626px; margin: 0 auto; }
.reviewArea .subContentBox.line { width: 1572px; height: 550px; margin-left: 106px; box-sizing: border-box; border-radius: 30px; border: 6px solid #E9E9E9; }
.reviewArea .subContentBox .subPage { position: absolute; width: 100%; height: 100%; display: none; }
.reviewArea .subContentBox .subPage .oxArea { height: 100%; gap: 100px; }
.reviewArea .subContentBox .subPage .oxArea .cl_btnSpeaker.type2 { position: absolute; top: 20px; left: 20px; margin: 0; }
.reviewArea .subContentBox .imgBox { display: flex; justify-content: center; }
.reviewArea .subContentBox .imgBox img { display: flex; align-items: center; justify-content: center; }

.reviewArea .bottomBtnArea { position: absolute; bottom: -100px; right: 0; }

/*양쪽정렬 인풋퀴즈 25.03.24 추가*/
.reviewArea.flexInputQuiz .cl_bulletTitle.oneLine { margin-bottom: 59px; }
.reviewArea.flexInputQuiz .subContentBox.line { width: 1572px; height: 614px; }
.reviewArea.flexInputQuiz .cl_btnSpeaker { position: absolute; top: 30px; left: 30px; }
.reviewArea.flexInputQuiz .inputArea { height: 100%; display: flex; align-items: center; justify-content: center; gap: 130px; }
.reviewArea.flexInputQuiz .inputArea.start { justify-content: flex-start; }
.reviewArea.flexInputQuiz .inputBox { display: flex; align-items: center; justify-content: center; font-size: 130px; font-family: "HallymGoB"; letter-spacing: 10px; }
.reviewArea.flexInputQuiz .inputBox input { width: 150px; height: 171px; display: flex; align-items: center; justify-content: center; border-radius: 20px; border: 2px solid rgba(0, 0, 0, 0.80);
    background: #F8F8F8; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; font-size: 130px; font-family: "HallymGoB"; text-align: center; color: #000; margin-right: 10px; }
.reviewArea.flexInputQuiz .inputBox input.correct { color: #137AE2; }
.reviewArea.flexInputQuiz .subContentBox .subPage { padding: 40px 146px; box-sizing: border-box; }
.reviewArea.flexInputQuiz .imgArea { width: 45%; }
.reviewArea.flexInputQuiz .imgArea img { width: 100%; }


/*
    *** 스스로 평가 체크 영역
 */
.checkOneself .checkArea { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; box-sizing: border-box; border-bottom: 1px dashed rgba(0,0,0,0.1); }
.checkOneself .checkArea:nth-last-child(1) { border-bottom: none; }
.checkOneself .checkArea .textArea { display: flex; align-items: center; gap: 22px; }
.checkOneself .checkArea .icon { background-image: url("../images/checkPageIcon_1.png"); background-repeat: no-repeat; width: 102px; height: 102px; }
.checkOneself .checkArea .icon.type2 { background-image: url("../images/checkPageIcon_2.png"); }
.checkOneself .checkArea .text { color: #000; font-size: 72px; font-family: "NanumGoB"; }
.checkOneself .checkArea .text .orange { color: #FF761A; }
.checkOneself .checkArea ul.checkList { display: flex; gap: 8px; border-radius: 120px; border: 1px solid rgba(0, 0, 0, 0.20); background: #F2F2F2; box-sizing: border-box; }
.checkOneself .checkArea ul.checkList li { background-image: url("../images/checkOneself_1.png"); background-position: center center; background-repeat: no-repeat;
    width: 136px; height: 136px; cursor: pointer; z-index: 2; }
.checkOneself .checkArea ul.checkList li:nth-child(2) { background-image: url("../images/checkOneself_2.png"); }
.checkOneself .checkArea ul.checkList li:nth-child(3) { background-image: url("../images/checkOneself_3.png"); }

.checkOneself .checkArea ul.checkList li.on { background-image: url("../images/checkOneself_1_on.png"); width: 136px; height: 136px; background-position: center bottom; }
.checkOneself .checkArea ul.checkList li:nth-child(2).on { background-image: url("../images/checkOneself_2_on.png") }
.checkOneself .checkArea ul.checkList li:nth-child(3).on { background-image: url("../images/checkOneself_3_on.png") }

.checkOneself.grade4 .checkArea ul.checkList li { background-image: url("../images/checkOneSelf_1_4.png"); }
.checkOneself.grade4 .checkArea ul.checkList li:nth-child(2) { background-image: url("../images/checkOneSelf_2_4.png"); }
.checkOneself.grade4 .checkArea ul.checkList li:nth-child(3) { background-image: url("../images/checkOneSelf_3_4.png"); }

.checkOneself.grade4 .checkArea ul.checkList li.on { background-image: url("../images/checkOneSelf_1_4_on.png"); }
.checkOneself.grade4 .checkArea ul.checkList li.on:nth-child(2) { background-image: url("../images/checkOneSelf_2_4_on.png"); }
.checkOneself.grade4 .checkArea ul.checkList li.on:nth-child(3) { background-image: url("../images/checkOneSelf_3_4_on.png"); }



/*
    ***발표평가 별표영역
 */
.starCheck { padding: 31px 88px; box-sizing: border-box; }
.starCheck .checkArea { display: flex; justify-content: space-between; align-items: center; padding: 40px 0; box-sizing: border-box; border-bottom: 3px dashed rgba(0, 0, 0, 0.10); }
.starCheck .checkArea:nth-last-child(1) { border-bottom: none; }
.starCheck .checkArea .text { position: relative; font-size: 72px;  font-family: "NanumGoB"; padding-left: 60px; line-height: 130%; }
.starCheck .checkArea .text:before { content: ''; position: absolute; top: 25px; left: 0px;  width: 25px; height: 25px; background-color: #7ac6cb; border-radius: 50%; }
.starCheck .checkArea ul.checkList { display: flex; gap: 20px; border-radius: 200px; background: #CAE0D9; box-sizing: border-box; padding: 20px 40px; }
.starCheck .checkArea ul.checkList li { background-image: url("../images/starIcon.png"); background-position: center center; background-repeat: no-repeat;
    width: 94px; height: 94px; cursor: pointer; z-index: 2; }
.starCheck .checkArea ul.checkList li.on { background-image: url("../images/starIcon_on.png") }

/*
    *** 오늘배울내용영역
*/
.todayLearnArea { padding: 82px 98px; }

/*
    *** clickItem 영역
*/
.openObjectArea { padding: 82px 98px; }
.openObject { margin-bottom: 82px; }
.openObject:nth-last-child(1) { margin-bottom: 0; }
.openObjectArea .cl_btnAns {  position: absolute; right: 50px; bottom: 40px; }

.openObjectArea.type2 { display: flex; justify-content: center; gap: 76px; }
.openObjectArea.type2 .imgBox { position: relative; border: 10px solid #EAE8E8; border-radius: 30px; box-sizing: border-box; }
.openObjectArea.type2 .imgBox img { display: block; }
.openObjectArea.type2 .imgBox .cl_contentNum { position: absolute; top: -30px; left: -30px; width: 60px; height: 60px; }
.openObjectArea.type2 .cl_openObject { height: 148px; }

/*
    *** 캐릭터 영역
*/
.characterClickArea { padding: 64px 67px; }
.characterArea { display: flex; align-items: center; margin-bottom: 64px; }
.characterArea:nth-last-child(1) { margin-bottom: 0; }
.characterArea .cl_character { margin-right: 54px; }

.characterClickArea.typeToggle .toggleBox { position: relative; width: 1673px; height: 580px; font-family: "NanumGoB"; font-size: 72px; border-radius: 30px; border: 8px solid #D7D4CA; background: #FFF; padding: 12px 12px 12px 24px; box-sizing: border-box; }
.characterClickArea.typeToggle .toggleBox .textBox { display: none; text-indent: 110px; line-height: 130%; text-align: justify; letter-spacing: -1.5px; padding-right: 28px; box-sizing: border-box; }
.characterClickArea.typeToggle .cl_inputBox { width: 1673px !important; height: 580px; position: absolute; top: 65px; left: 67px; border-radius: 30px; border: 8px solid #4B5783; background: #F9F9F9; z-index: 21; box-sizing: border-box; }
.characterClickArea.typeToggle .cl_inputBox textarea { border-radius: 20px; }
.characterClickArea.typeToggle .buttonArea { position: absolute; bottom: 40px; right: 98px; width: 274px; height: 77px; }
.characterClickArea.typeToggle .buttonArea .cl_btnExample { display: block; }
.characterClickArea.typeToggle .buttonArea .cl_btnWrite { display: none; }
.characterClickArea.typeToggle .buttonArea.example .cl_btnExample { display: none; }
.characterClickArea.typeToggle .buttonArea.example .cl_btnWrite { display: block; }


/*
    *** 숫자컨텐츠영역
*/
.numContentTextArea { padding: 62px 0 0 80px; }
.numContentTextArea.scroll { padding: 62px 5px 62px 80px; }
.numContentTextArea .typeFlex { display: flex; align-items: flex-start; gap: 60px; }

/*
    *** ox영역
*/
.oxArea { display: flex; align-items: center; justify-content: center; gap: 142px; }
.oxArea .imgArea { width: 725px; border-radius: 30px; border: 10px solid rgba(0, 0, 0, 0.10); box-sizing: border-box; }
.oxArea .imgArea.borderNone { border: 0; border-radius: 0; }
.oxArea .imgArea img { display: block; width: 100%; border-radius: 20px; }
.oxArea.start { justify-content: flex-start; padding-left: 111px; }
.oxArea .selectArea { display: flex; gap: 40px; }
.oxArea .selectArea.column { flex-direction: column; }
.oxArea .selectArea.moreGap { gap: 60px; }
.oxArea .selectArea.bigGap { gap: 80px; }
.oxArea .selectArea .speakerArea { display: flex; align-items: center; flex-direction: column; gap: 30px; }

/*4개있는 layout형식 ox*/
.oxArea.fourLayout { flex-direction: column; }
.oxArea.fourLayout .selectArea { flex-direction: column; }
.oxArea.fourLayout .flexArea { display: flex; align-items: center; justify-content: flex-start; }
.oxArea.fourLayout .flexArea .cl_textSelect { width: 730px; padding: 60px; box-sizing: border-box; }

/*테이블형식ox*/
.oxArea.table {padding: 0;}
.oxArea.table .tableTit{display: flex; margin-left: 108px;}
/*25.07.09 디자인 수정에서 폰트 사이즈 수정함*/
.oxArea.table .tableTit .titText {display: flex; align-items: center; justify-content: center; font-family: "NanumGoB"; font-size: 54px; letter-spacing: -.5px; width: 526px; height: 102px;}
.oxArea.table .tableTit .titText.small { font-size: 46px; }
.oxArea.table .tableTit .titText.green {border: 2px solid #B4DAA3;background: #CDF1BD;}
.oxArea.table .tableTit .titText.lGreen {border: 2px solid #B4DAA3;background: #CDF1BD;}
.oxArea.table .tableTit .titText.sky {border: 2px solid #AFE0DC;background: #CCF3F0;}
.oxArea.table .tableTit .titText:first-child {border-radius: 20px 0px 0px 0px; border-right: 0;}
.oxArea.table .tableTit .titText:last-child {border-radius: 0px 20px 0px 0px;}
.oxArea.table .cl_textSelect .text span {display: inline-flex; align-items: center; justify-content: center; width: 526px; height: 110px; font-family: "NanumGoB"; font-size: 54px; letter-spacing: -.5px; text-align: center; padding: 0; }
.oxArea.table .cl_textSelect .text span.green {border: 2px solid #B4DAA3;border-top: 0;}
.oxArea.table .cl_textSelect .text span.sky {border: 2px solid #AFE0DC;border-top: 0;}
.oxArea.table .cl_textSelect .text span.lGreen {border: 2px solid #B4DAA3;border-top: 0;}
.oxArea.table .cl_textSelect .text span:before {display: none;}
.oxArea.table .cl_textSelect .text span:first-child {border-right: 0;}
/*.oxArea.table .cl_textSelect.last span.green {border-radius: 0px 0px 0px 20px;}*/
.oxArea.table .cl_textSelect.last span:nth-child(1) { border-radius: 0px 0px 0px 20px; }
.oxArea.table .cl_textSelect.last span:nth-last-child(1) { border-radius: 0px 0px 20px 0px; }
/*.oxArea.table .cl_textSelect.last span.sky {border-radius: 0px 0px 20px 0px;}*/

.oxArea.table .cl_textSelect.last span.lGreen:nth-child(1) {border-radius: 0px 0px 0px 20px;}
.oxArea.table .cl_textSelect.last span.lGreen:nth-last-child(1) {border-radius: 0px 0px 20px 0px;}

.oxArea.table .selectArea {align-items: center; gap:0; width: 100%; border-right: 0;}
.oxArea.table .cl_pageTitle {margin-bottom: 47px;}

/*공통으로 들어가는 단어*/
.commonWord .imgArea { display: flex; align-items: center; justify-content: center; gap: 30px; border-radius: 60px; background: #F4F0E0; padding: 30px; box-sizing: border-box; border: none; }
.commonWord.oxArea .imgArea img { width: 424px; border-radius: 30px 30px 0px 0px; }
.commonWord.oxArea .imgArea .text { text-align: center; font-size: 72px; font-family: "PretendardB"; padding: 20px 0; background-color: #fff; border-radius: 0px 0px 30px 30px; box-sizing: border-box; }
.commonWord.oxArea { gap: 212px; }
.commonWord.oxArea .imgArea { width: 938px; height: 550px; }
.commonWord .cl_imgSelect.typeText { width: 264px; height: 216px; }



/*
    *** 이미지선택박스영역
*/
.imgSelectArea { display: flex; align-items: center; justify-content: center; gap: 69px; }
.imgSelectArea .cl_imgSelect { width: 727px; }
.imgSelectArea .cl_imgSelect img { width: 100%; height: 100%; }
.imgSelectArea.fourLine { flex-direction: column; gap: 80px; }
.imgSelectArea.fourLine .flexWrap { display: flex; align-items: center; justify-content: center; gap: 60px; }
.imgSelectArea.fourLine .cl_imgSelect { width: 576px; height: 217px; display: flex; align-items: center; justify-content: center; }

    /*
        ***숫자선택박스영역
    */
.numSelectArea { display: flex; align-items: center; justify-content: center; gap: 120px; }
.numSelectArea .speakerArea { display: flex; align-items: center; flex-direction: column; gap: 30px; }

/*
    *** 버튼영역
*/
.bottomBtnArea { position: absolute; bottom: 40px; right: 98px; display: flex; align-items: center; gap: 30px; z-index: 20; }

/*
    *** 비디오영역
*/
.videoPopupArea { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 83px; }
.videoPopupArea .videoPopBtn { position: relative; cursor: pointer; }
.videoPopupArea .videoPopBtn:active .playBtn { background: url("../images/btnPlayVideoL_hover.png")no-repeat; }
.videoPopupArea .videoPopBtn .playBtn { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: url("../images/btnPlayVideoL.png")no-repeat; width: 156px; height: 156px; }
.videoPopupArea .videoPopup { display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius:30px; background-color:#ffffff; }

/*썸네일 A,B 탭*/
.videoPopupArea .videoChangeTab {display:none; top:-50px; right:60px; background-color:#A0D2DE;}
.videoPopupArea .videoChangeTab.on {display:flex;}


/*
    *** 심플 비디오 영역
*/
.simpleVideo .characterTabArea { display: flex; align-items: center; gap: 96px; height: 100%; }
.simpleVideo .characterTabArea .characterTab { height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; padding: 78px 0 0 98px; box-sizing: border-box; }
.simpleVideo .characterTabArea.oneChar .characterTab { pointer-events: none; }
.simpleVideo .characterTabArea .characterTab .char { cursor: pointer; background-image: url("../images/0004_02_sp02_1.png"); background-repeat: no-repeat; width: 283px; height: 283px; }
.simpleVideo .characterTabArea .characterTab .char2 { background-image: url("../images/0004_02_sp02_2.png") }
.simpleVideo .characterTabArea .characterTab .char3 { background-image: url("../images/0004_02_sp02_3.png") }
.simpleVideo .characterTabArea .characterTab .char4 { background-image: url("../images/0004_02_sp02_4.png") }
.simpleVideo .characterTabArea .characterTab .char5 { background-image: url("../images/0004_02_sp02_5.png") }
.simpleVideo .characterTabArea .characterTab .char1:hover { background-image: url("../images/0004_02_sp02_1_on.png"); }
.simpleVideo .characterTabArea .characterTab .char2:hover { background-image: url("../images/0004_02_sp02_2_on.png"); }
.simpleVideo .characterTabArea .characterTab .char3:hover { background-image: url("../images/0004_02_sp02_3_on.png"); }
.simpleVideo .characterTabArea .characterTab .char4:hover { background-image: url("../images/0004_02_sp02_4_on.png"); }
.simpleVideo .characterTabArea .characterTab .char5:hover { background-image: url("../images/0004_02_sp02_5_on.png"); }
.simpleVideo .characterTabArea .characterTab .char1.on { background-image: url("../images/0004_02_sp02_1_on.png"); }
.simpleVideo .characterTabArea .characterTab .char2.on { background-image: url("../images/0004_02_sp02_2_on.png"); }
.simpleVideo .characterTabArea .characterTab .char3.on { background-image: url("../images/0004_02_sp02_3_on.png"); }
.simpleVideo .characterTabArea .characterTab .char4.on { background-image: url("../images/0004_02_sp02_4_on.png"); }
.simpleVideo .characterTabArea .characterTab .char5.on { background-image: url("../images/0004_02_sp02_5_on.png"); }
/*.simpleVideo .characterTabArea .characterTab .char.on { border-radius: 283px; border: 5px solid #137AE2; box-sizing: border-box; }*/
/*.simpleVideo .characterTabArea .characterTab .char:hover{ border: 5px solid #137AE2; }*/
.simpleVideo .characterTabArea .videoArea { display: none; position: relative; width: 1310px; height: 760px; background-color: #ddd; border-radius: 30px; overflow: hidden; }


/*
    *** 심플 오디오 영역
 */
.simpleAudio { padding: 92px 88px; box-sizing: border-box; }
.simpleAudio .changeImgArea { /*position:relative;*/ display: flex; }


/*
    *** book팝업
 */
.bookPopup { padding: 70px 60px 70px 120px; box-sizing: border-box; background-image: url("../images/bookPopupBg.png"); background-repeat: no-repeat; }
.bookPopup .mainTitleBox { position: relative; display: flex; align-items: center; justify-content: center; width: 1540px; height: 113px; border-radius: 30px; border: 3px solid #77CADB;
    background: #E6F0F4; padding: 40px 60px; box-sizing: border-box; margin: 0 auto; margin-bottom: 40px; }
.bookPopup .mainTitleBox .mainTitle { font-size: 56px; font-family: "NanumGoB"; }
.bookPopup .mainTitleBox .title { position: absolute; left: 40px; top: -46px; font-size: 28px; color: #fff; font-family: "NanumGoB";
    border-radius: 60px 60px 0px 0px; background: #77CADB; padding: 6px 40px; box-sizing: border-box; }
.bookPopup .text { text-indent: 60px; color: #000; font-family: "NanumGoB"; font-size: 64px; line-height: 1.4; letter-spacing: -0.768px; text-align: justify; padding-right: 60px; }
.bookPopup .text .blue { color: #008997; }

/*
    *** 대본영역
*/
.scriptArea .scriptHeader { display: flex; justify-content: space-between; align-items: center; height: 115px; padding: 0 80px 0 30px;
    background: #7F74E8; border-radius: 30px 30px 0px 0px; border: 1px solid rgba(0, 0, 0, 0.10); }
.scriptArea .scriptHeader .titleArea { display: flex; align-items: center; gap: 30px; }
.scriptArea .scriptHeader .titleArea .title { color: #fff; font-size: 52px; font-family: "Jalnan";
    text-shadow: 3px 0px 0px #4F3AC9, 0px 3px 0px #4F3AC9, -3px 0px 0px #4F3AC9, 0px -3px 0px #4F3AC9, 3px 3px 0px #4F3AC9, -3px 3px 0px #4F3AC9, -3px -3px 0px #4F3AC9, 3px -3px 0px #4F3AC9,
    2px 0px 0px #4F3AC9, 0px 2px 0px #4F3AC9, -2px 0px 0px #4F3AC9, 0px -2px 0px #4F3AC9, 2px 2px 0px #4F3AC9, -2px 2px 0px #4F3AC9, -2px -2px 0px #4F3AC9, 2px -2px 0px #4F3AC9,
    3px 0px 0px #4F3AC9, 0px 3px 0px #4F3AC9, -3px 0px 0px #4F3AC9, 0px -3px 0px #4F3AC9, 3px 3px 0px #4F3AC9, -3px 3px 0px #4F3AC9, -3px -3px 0px #4F3AC9, 3px -3px 0px #4F3AC9;
}
.scriptArea .scriptHeader .buttonArea { display: flex; gap: 20px; }
.scriptArea .scriptHeader .scriptPlay { background: url("../images/scriptPlayBtn.png")no-repeat; width: 82px; height: 83px; cursor: pointer; }
.scriptArea .scriptHeader .scriptPlay:active { background: url("../images/scriptPlayBtn_hover.png"); }
.scriptArea .scriptHeader .scriptPlay.pause { background: url("../images/scriptPauseBtn.png")no-repeat; }
.scriptArea .scriptHeader .scriptPlay.pause:active { background: url("../images/scriptPauseBtn_hover.png"); }
.scriptArea .scriptHeader .scriptStop { background: url("../images/scriptStopBtn.png")no-repeat; width: 82px; height: 83px; margin-right: 20px; cursor: pointer; }
.scriptArea .scriptHeader .scriptStop:active { background: url("../images/scriptStopBtn_hover.png"); }

.scriptContent { padding: 54px 20px 0 98px; height: 841px; }
.scriptContent .sceneTitle { position: relative; color: #4438B4; font-size: 40px; font-family: "Jalnan"; padding-top: 10px; box-sizing: border-box; margin-bottom: 50px; }
.scriptContent .sceneTitle:after { position: absolute; top: 0px; left: 130px; content: '1'; background: url("../images/scriptBalloon.png")no-repeat;
    width: 61px; height: 48px; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; font-size: 36px; }
.scriptContent .sceneTitle.num2:after { content: '2'; }
.scriptContent .sceneTitle.num3:after { content: '3'; }
.scriptContent .sceneTitle.num4:after { content: '4'; }

.scriptContent .sceneTitle.noneText:after { left: 0; }

.scriptContent .scriptBalloonArea { display: flex; gap: 46px; align-items: flex-start; margin-bottom: 80px; cursor: pointer; }
.scriptContent .scriptBalloonArea .scriptSubTitle { display: none; color: #FF761A; font-size: 52px; font-family: "NanumGoB"; padding-left: 48px; box-sizing: border-box; margin-top: 20px; }

.scriptContent.showSubTitle .scriptBalloonArea { margin-bottom: 50px; }
.scriptContent.showSubTitle .scriptBalloonArea .scriptSubTitle { display: block; }

.scriptContent .scriptBalloonArea.play .cl_balloon { color: #4F0BED; }

.scriptBalloonArea.play .cl_character { border-color: #8D8DF2; }



/*
    *** iframe 팝업
*/
.iframePopup {position:absolute; top:0; left:0; width:100%; height:100%; z-index: 20;}
.iframePopup iframe {width:100%; height:100%; overflow: hidden;}


/*
    *** songAudio 퀴즈
*/
.songAudio .songArea { z-index: 2; position: absolute; top: 0; right: 0; width: 176px; height: 86px; padding: 12px 20px; box-sizing: border-box; border-radius: 0px 30px; border: 1px solid #000; background: rgba(0, 0, 0, 0.70); }
.songAudio .selectItem:before { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; background: url("../images/oIcon.png")no-repeat; width: 317px; height: 317px; }
.songAudio .selectItem.on:before { display: block; }
.songAudio .cl_btnAns { position: absolute; right: 98px; bottom: 40px; }

/*
    *** 드롭타운퀴즈
*/
.selectDropDownArea .cl_btnAns { position: absolute; right: 98px; bottom: 33px; }



/*
    *********************************** 양자택일 **********************************
*/
.alternativeQuiz { display: flex; justify-content: center; gap: 57px; padding-top: 78px; box-sizing: border-box; }
.alternativeQuiz .alternativeArea { position: relative; }
.alternativeQuiz .cl_contentNum { position: absolute; top: -30px; left: -30px; }
.alternativeQuiz .imgBox img { border-radius: 30px; border: 10px solid #EAE8E8; box-sizing: border-box; }
.alternativeQuiz .flexArea { display: flex; align-items: center; justify-content: center; gap: 11px; }
.alternativeQuiz .alternative { display: flex; align-items: center; justify-content: center; width: 260px; height: 140px; font-size: 54px; text-align: center; font-family: "NanumGoEB";
    border-radius: 30px; border: 8px solid #EAE8E8; background: #FFF; box-sizing: border-box; cursor: pointer; }
.alternativeQuiz .alternative.on { border: 8px solid #6D6DDB; background: #DFDFFF; }
/*.alternativeQuiz .alternative.check { border: 8px solid #6D6DDB; background: #DFDFFF; }*/
.alternativeQuiz .alternative.correct { border: 8px solid #137AE2; background: #DAECFF; }
.alternativeQuiz .alternative:hover { border-color: #8484F2;}

/*
    *********************************** 알파벳 쓰기 페이지 **********************************
*/


.writeAlphabet .cl_exBox {font-size:100px; color:#137AE2; font-family:HallymGoB; font-weight:bold; margin-bottom:28px;}
.writeAlphabet .cl_exBox .alphabet {margin:0 60px; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #FFF; cursor: pointer;}
/*.writeAlphabet .cl_exBox .alphabet.on, .cl_exBox .alphabet:hover {
    text-shadow: 1px 0px 0px #FF7700, 0px 1px 0px #FF7700, -1px 0px 0px #FF7700, 0px -1px 0px #FF7700, 1px 1px 0px #FF7700, -1px 1px 0px #FF7700, -1px -1px 0px #FF7700, 1px -1px 0px #FF7700,
    2px 0px 0px #FF7700, 0px 2px 0px #FF7700, -2px 0px 0px #FF7700, 0px -2px 0px #FF7700, 2px 2px 0px #FF7700, -2px 2px 0px #FF7700, -2px -2px 0px #FF7700, 2px -2px 0px #FF7700;
}*/
.writeAlphabet .cl_exBox .alphabet > span {position:relative; z-index:1;}
.writeAlphabet .cl_exBox .alphabet.on:before {
    content: attr(data-alphabet);
    position: absolute;
    font-size: 100px;
    color: #137AE2;
    font-family: HallymGoB;
    font-weight: bold;
    -webkit-text-stroke-width: 5px;
    -webkit-text-stroke-color: #FF7700;
    z-index:0;
}

.writeAlphabet .gridCol2 {display:flex; align-items: center; justify-content: space-between;}
.writeAlphabet .cl_alphabetPaper {position:relative;}
.writeAlphabet .cl_alphabetPaper .cl_btnPlayRound {position:absolute; top:12px; right:12px;}
.writeAlphabet .cl_alphabetPaper .cl_btnEraserRound {position:absolute; top:12px; right:12px; z-index:3;}
.writeAlphabet .cl_alphabetPaper canvas {position:relative; z-index:2;}
.writeAlphabet .cl_alphabetPaper canvas:hover {cursor:url("../images/icon_pencil.png") 0 75, auto !important;}
.writeAlphabet .cl_alphabetPaper .bgAlphabet {position:absolute; z-index:1; left:50%; transform:translateX(-50%); top:82px;}



/*
    *********************************** 단어 쓰기 페이지 **********************************
*/
.writeWord { display: flex; background: #F1F9FB; border-radius: 30px; }
.writeWord .cl_exBox .wordBtn { display: flex; align-items: center; justify-content: center; width: 317px; height: 195px;
    background-repeat: no-repeat; cursor: pointer; border-radius: 20px; border: 10px solid #EAE8E8; box-sizing: border-box; background-position: center center; }
.writeWord .cl_exBox .wordBtn:hover { border-color: #8484F2; border: 10px solid #8484F2; }
.writeWord .cl_exBox .wordBtn.on { border-color: #8484F2; border: 10px solid #8484F2; }
.writeWord .gridCol2 {display:flex; align-items: center; justify-content: space-between;}
.writeWord .cl_alphabetPaper { position:absolute; top: 211px; right: 125px; }
.writeWord .cl_alphabetPaper .cl_btnPlayRound {position:absolute; top:12px; right:12px;}
.writeWord .cl_alphabetPaper .cl_btnEraserRound {position:absolute; top:12px; right:12px; z-index:3;}
.writeWord .cl_alphabetPaper canvas {position:relative; z-index:2;}
.writeWord .cl_alphabetPaper canvas:hover {cursor:url("../images/icon_pencil.png") 0 75, auto !important;}
.writeWord .cl_alphabetPaper .bgAlphabet {position:absolute; z-index:1; left:50%; transform:translateX(-50%); top:-15px; color: #DCDCDC; font-size: 460px; font-family: "PrintBoldR"; }
.writeWord .cl_alphabetPaper .bgAlphabet.small { font-size: 380px; top: 39px; }
.writeWord canvas { width: 100%; height: 100%; }
.writeWord .buttonArea { display: flex; align-items: center; justify-content: center; gap: 30px; position: absolute; bottom: 97px; right: 125px; }
.writeWord .cl_directive { top: 25px; left: 472px; }

/*
    *********************************** 작명소 페이지 **********************************
 */
.makingName { padding: 32px 0 0 31px; box-sizing: border-box; }
.makingName .namingBox { display: flex; align-items: center; justify-content: center; background-image: url("../images/namingBox.png"); background-repeat: no-repeat; width: 1014px; height: 227px; margin-left: 133px; }
.makingName .namingBox:hover { background-image: url("../images/namingBox_hover.png"); }
.makingName .namingBox input { width: 94%; height: 100%; background: transparent; text-align: center;  font-size: 72px; font-family: "NanumGoB"; margin: 0 auto; }
.makingName .namingBox input::placeholder { color: #D1D0C1; }

/***
    ***팝업
    */
.createName { padding: 105px 0 0 75px; box-sizing: border-box; }
.createName .genderBox { position: relative; display: flex; align-items: center; justify-content: center; width: 1508px; height: 286px; padding: 40px 0px 20px 0px;
    box-sizing: border-box; border-radius: 30px; background: #E6F0F4; margin-left: 76px; margin-bottom: 50px; }
.createName .genderBox .gender { height: 100%; position: relative; display: flex; align-items: center; gap: 45px; border-right: 1px dashed #B5BABC; padding: 0 80px; box-sizing: border-box; }
.createName .genderBox .gender:nth-last-child(1) { border-right: 0; }
.createName .genderBox .gender .text { font-size: 64px; font-family: "PretendardB"; }
.createName .genderBox .boy .icon { background-image: url("../images/selectGenderIcon_2.png"); background-repeat: no-repeat; width: 146px; height: 121px; }
.createName .genderBox .boy .icon.on { background-image: url("../images/selectGenderIcon_2_on.png"); }
.createName .genderBox .girl .icon { background-image: url("../images/selectGenderIcon_1.png"); background-repeat: no-repeat;  width: 169px; height: 119px;}
.createName .genderBox .girl .icon.on { background-image: url("../images/selectGenderIcon_1_on.png"); }
.createName .genderBox input[type="checkbox"]{display: none;}
.createName .genderBox input[type="checkbox"] + label{ position: relative; display: inline-block; background-image: url("../images/radioButton.png"); background-repeat: no-repeat; width: 61px; height: 62px; cursor: pointer; }
.createName .genderBox input:checked + label{ background-image: url("../images/radioButton_on.png"); }

.createName .createNameBox { position: relative; background-image: url("../images/createNameBox.png"); background-repeat: no-repeat; width: 1484px; height: 268px; margin-left: 76px; }
.createName .createNameBox .title { position: absolute; top: 20px; left: 28px; color: rgba(0, 0, 0, 0.60); font-size: 32px; font-family: "NanumGoB"; }
.createName .createNameBox .name { color: #000; }
.createName .createNameBox .nameArea { font-size: 100px; position: absolute; top: 50%; left: 50%; display: flex; justify-content: center; transform: translate(-50%,-50%); width: 100%; font-family: "PretendardB";  }
.createName .createNameBox .nameArea .placeholder { color: #D1D0C1; font-size: 72px; font-family: "NanumGoB"; }

.createName .moIcon { position: absolute; bottom: 40px; right: 66px; background-image: url("../images/createNameMoIcon.png"); background-repeat: no-repeat; width: 186px; height: 189px; }
.createName .moBalloon { position: absolute; bottom: 227px; right: 22px; background-image: url("../images/createNameBalloon.png"); background-repeat: no-repeat; width: 182px; height: 195px; }

.createName .genderBox .exBtn { position: absolute; top: 5px; left: 5px; display: inline-flex; align-items: center; font-size: 28px; color: #fff; font-family: "NanumGoB";
    border-radius: 60px; background: #77CADB; padding: 6px 40px; box-sizing: border-box; }

/*
    *********************************** 손가락 클릭 페이지 **********************************
*/
/*.fingerClick { display: none; }*/
/*.fingerClick.loaded { display: block; }*/

/*
    *********************************** 선긋기 페이지 **********************************
*/
.drawLine .lineDot {width:36px; height:36px; border-radius:50%; border:solid 4px #000000; box-sizing: border-box; background-color:#ffffff;}
.drawLine .lineDot.end {border-color:#137AE2; background-color:#DAECFF;}
.drawLine .lineDot.targetAll {border-color:#000 !important; background-color:#fff !important;}



.cl_page.drawLine {position:relative; background-image:url("../images/alphabetDrawLineBg.png");}

.startAlphabet {display:flex; position:absolute; top:220px; left:475px; z-index:11;}
.startAlphabet .text {font-size:100px; color:#FFC907; font-family:HallymGoB; cursor:pointer;}
.startAlphabet .text:nth-of-type(2) {margin-left:180px;}
.startAlphabet .text:nth-of-type(3) {margin-left:208px;}
.startAlphabet .text:nth-of-type(4) {margin-left:174px;}

.startAlphabet .text:hover {color:#137AE2; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #FFC907;}

.endAlphabet {position:absolute; z-index:11; cursor:pointer;}
.endAlphabet.text1 {top:543px; left:449px;}
.endAlphabet.text2 {top:559px; left:685px;}
.endAlphabet.text3 {top:606px; left:1029px;}
.endAlphabet.text4 { top: 571px; left: 1320px; }

.startGroup .dotItem.dot1 {top:350px; left:518px;}
.startGroup .dotItem.dot2 {top:357px; left:786px;}
.startGroup .dotItem.dot3 {top:356px; left:1093px;}
.startGroup .dotItem.dot4 {top:354px; left:1235px;}

.endGroup .dotItem.dot1 {top:542px; left:574px;}
.endGroup .dotItem.dot2 {top:567px; left:842px;}
.endGroup .dotItem.dot3 {top:556px; left:1048px;}
.endGroup .dotItem.dot4 {top:526px; left:1254px;}



/*
    *** 선긋기 요소
*/
.drawLine .dotItem {cursor:pointer; position:absolute;}
.drawLine .startGroup {position:absolute; top: 0; left: 0; }
.drawLine .endGroup {position:absolute; top: 0; left: 0; }

.drawLine .lineDrawArea {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index:10;
}
.drawLine .dotItem {
    position: absolute;
    z-index: 2;
}
.drawLine .dotBtn {
    position: absolute;
    width: 40px;
    height: 40px;
    z-index:100;
}

.drawLine .dotBtn.end {pointer-events: none;}
.drawLine .lineDrawArea line {stroke:#137AE2; stroke-linecap:round; stroke-width:10px; transition:opacity .4s ease-in-out}
.drawLine .lineDrawArea line {opacity:1 !important;}



/*
    *********************************** 소리익히기 *************************************
*/
.learnSound {display:flex; justify-content: center; align-items: center; background-color: #F0F5F6; border-radius: 30px; }
.learnSound .learnSoundArea {display:flex; align-items: center; align-items: center; width:100%; height:100%;}
.learnSound .learnSoundArea .imgCell {flex:1; padding-left:170px; box-sizing: border-box;}
.learnSound .learnSoundArea .soundCell {display:flex; flex-direction: column; align-items: center; width:1514px;}
.learnSound .learnSoundArea .soundCell .soundBtnCell {margin-bottom:40px;}
.learnSound .learnSoundArea .soundCell .textCell { opacity: 1; font-size:160px; color:#000000; font-family:PretendardB; text-align:center; cursor: pointer; }
.learnSound .learnSoundArea .soundCell .textCell:hover { opacity: 0.6; }
.learnSound .learnSoundArea .soundCell .textCell.on { opacity: 0.6; }
.learnSound .learnSoundArea .soundCell .textCell .highlight {color:#FF5A00;}

.learnSound.halfType .flexWrap { display: flex; align-items: center; height: 100%; }
.learnSound.halfType .learnSoundArea { position: relative; width: 50%; height: 570px; flex-direction: column; justify-content: space-between; border-right: 3px dashed #CFCFCF; padding: 60px 60px 60px 60px; box-sizing: border-box; }
.learnSound.halfType .learnSoundArea:nth-last-child(1) { border-right: 0; }

.learnSound.halfType .learnSoundArea .imgCell { display: flex; align-items: center; padding-left: 0; pointer-events: none;}
.learnSound.halfType .learnSoundArea .soundCell { width: auto; }
.learnSound.halfType .learnSoundArea .soundCell .textCell { font-size: 120px; }
.learnSound.halfType .learnSoundArea .soundBtnCell { position: absolute; top: 0px; left: 120px; }



/*
    *********************************** 이미지탭말풍선 *************************************
*/
.tabBalloon { padding: 77px 46px; box-sizing: border-box; }
.tabBalloon .imgTabArea { display: flex; justify-content: center; gap: 60px; margin-bottom: 46px; }
.tabBalloon .imgTabArea .imgTab { position: relative;background-repeat: no-repeat; width: 506px; height: 371px; cursor: pointer; }
.tabBalloon .imgTabArea .imgTab .text { position: absolute; top: 9px; right: 8px; font-size: 30px; color: #fff; font-family: "GodoM"; z-index: 1; }
.tabBalloon .imgTabArea .imgTab:after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    background-image: url("../images/balloonLine_off.png"); background-repeat: no-repeat; width: 540px; height: 398px; }
.tabBalloon .imgTabArea .imgTab.on:after { background-image: url("../images/balloonLine.png"); }
.tabBalloon .imgTabArea .imgTab:hover:after { background-image: url("../images/balloonLine_hover.png"); }

.tabBalloon .balloon { display: flex; display: none; align-items: center; justify-content: center; position: relative; background: #CACAFC; border-radius: .4em; height: 253px; font-size: 72px; font-family: "NanumGoB";}
.tabBalloon .balloon:after { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 0;
    border: 20px solid transparent; border-bottom-color: #CACAFC; border-top: 0; margin-left: -20px; margin-top: -19px; }
.tabBalloon .balloon1:after { left: 17%; }
.tabBalloon .balloon3:after { left: 83%; }



/*
    *********************************** subPagePagination *************************************
*/
.subPagination .subPageWrap { width: 100%; height: 100%; }
.subPagination .subPage { display: none; width: 100%; height: 100%; }
.subPagination .subPage:nth-child(1) { display: block; }
.subPagination .subPage .bg { width: 100%; height: 100%; }
.subPagination .subPage .bg img { width: 100%; }
.subPagination .cl_pagination.type2 .dots { top: 10px; right: 10px; }
.subPagination .cl_paginationPopup .cl_pagination.type2 .dots { top: 33px; right: 117px; }


/*
    *********************************** 서로칭찬하기 페이지  *************************************
*/
.eachPraise { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 17px; }
.eachPraise .flexWrap { display: flex; align-items: center; justify-content: center; gap: 20px; }
.eachPraise .praiseBox { position: relative; width: 872px; height: 415px; border-radius: 10px; border: 5px solid #E0CCFF; background: #F3E9FF; }
.eachPraise .praiseBox.blue { border: 5px solid #CBDCEF; background: #E6F1FF; }
.eachPraise .praiseBox.green { border: 5px solid #CBE5C7; background: #E4F7E2; }
.eachPraise .praiseBox.yellow { border: 5px solid #EAE3B9; background: #F9F6E1; }

.eachPraise .praiseBox .mainText { font-size: 72px; font-family: "NanumGoB"; padding: 65px 0 0 177px; box-sizing: border-box; }
.eachPraise .praiseBox .praiseInput { position: absolute; left: 197px; bottom: 88px; width: 385px; height: 103px; font-size: 64px; font-family: "PretendardB"; text-align: center;
    border-radius: 10px; border: 2px solid rgba(0, 0, 0, 0.30); background-color: #F8F8F8; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; }
.eachPraise .praiseBox .praiseInput::placeholder { color: #adadad; }
.eachPraise .praiseBox .praiseInput.on { background-color: #fff; }


/*
    *********************************** 카드따라읽기  *************************************
*/
.repeatColorCard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
.repeatColorCard .flexWrap { display: flex; align-items: center; justify-content: center; gap: 40px; }

/*
    *********************************** 보기단어선택  *************************************
*/
.bogiWordSelect { display: flex; flex-direction: column; align-items: center; padding-top: 38px; box-sizing: border-box; }
.bogiWordSelect .bogiList { display: inline-flex; align-items: center; justify-content: center; gap: 100px; border-radius: 60px;
    background: #D4EEFA; padding: 10px 40px; box-sizing: border-box; margin: 0 auto; }
.bogiWordSelect .bogiList.purple {background: #E4E3F1;}
.bogiWordSelect .bogiList .list { font-size: 50px; font-family: "PretendardB"; cursor: pointer; }
.bogiWordSelect .bogiList .list:hover { color: #137AE2; }
.bogiWordSelect .bogiList .list.on { color: #137AE2; }

.bogiWordSelect .answerArea .imgSection .imgArea { position: relative; }
.bogiWordSelect .answerArea .imgSection .imgArea .cl_contentNum { position: absolute; bottom: 18px; right: 18px; z-index: 1; }
.bogiWordSelect .answerArea .imgSection .imgArea.right .cl_contentNum { position: absolute; bottom: 18px; left: 18px; z-index: 1; }
.bogiWordSelect .answerArea .imgSection .imgArea img { display: block; font-size: 0; margin: 0; padding: 0; pointer-events: none; }

.bogiWordSelect .answerArea .imgSection .topLeft { position: absolute; top: 210px; left: 220px;  }
.bogiWordSelect .answerArea .imgSection .topRight { position: absolute; top: 210px; left: 486px; }
.bogiWordSelect .answerArea .imgSection .bottomLeft { position: absolute; top: 478px; left: 220px; }
.bogiWordSelect .answerArea .imgSection .bottomRight { position: absolute; top: 478px; left: 486px; }

.bogiWordSelect .answerArea .imgSection .bottomLeft .cl_contentNum { bottom: auto; top: 18px; }
.bogiWordSelect .answerArea .imgSection .bottomRight .cl_contentNum { bottom: auto; top: 18px; }

.bogiWordSelect .answerArea .imgSection .topLeft.on { z-index: 3; }
.bogiWordSelect .answerArea .imgSection .topRight.on { z-index: 2; }
.bogiWordSelect .answerArea .imgSection .bottomLeft.on { z-index: 2; }

.bogiWordSelect .answerArea .imgSection .topLeft.on img { outline: 10px solid #137AE2; border-top-left-radius: 96%;  }
.bogiWordSelect .answerArea .imgSection .topRight.on img { outline: 10px solid #137AE2; border-top-right-radius: 110%; }
.bogiWordSelect .answerArea .imgSection .bottomLeft.on img { outline: 10px solid #137AE2; border-bottom-left-radius: 120%; }
.bogiWordSelect .answerArea .imgSection .bottomRight.on img { outline: 10px solid #137AE2; border-bottom-right-radius: 120%; }

.bogiWordSelect .answerArea .answerListArea { position: absolute; left: 871px; top: 190px; }
.bogiWordSelect .answerArea .answerList { display: flex; align-items: center; margin-bottom: 40px; }
.bogiWordSelect .answerArea .answerList:nth-last-child(1) { margin-bottom: 0; }

.bogiWordSelect .answerArea .answerCell .answer { position: absolute; top: 0; display: none; color: #137AE2; font-size: 120px; font-family: "PrintBoldR"; padding-left: 37px; box-sizing: border-box; margin-top: -15px; cursor: pointer; }
.bogiWordSelect .answerArea .answerCell input { position: absolute; background: transparent; font-size: 120px; font-family: "PrintBoldR"; padding-left: 37px; box-sizing: border-box; margin-top: -15px; z-index: 2; }
.bogiWordSelect .answerArea .answerCell input::placeholder {  color: #DCDCDC; }


/*
    *********************************** 대화듣기  *************************************
*/
.conversation { background-image: url("../images/conversationBg.png"); width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; }
.conversation .conversationTab { position: absolute; top: -1px; right: 308px; display: flex; gap: 12px; padding: 12px; box-sizing: border-box; border-radius: 0px 0px 50px 50px; background: #add1d8; z-index: 0; }
.conversation .conversationTab.type2 { right: -1px; border-top-right-radius: 10px; }
.conversation .conversationArea { padding: 130px 160px 45px 160px; box-sizing: border-box; }

.conversation .conversationArea .balloonArea { display: flex; align-items: center; gap: 45px; margin-bottom: 70px; }
.conversation .conversationArea .balloonArea:nth-last-child(1) { margin-bottom: 0; }
.conversation .conversationArea .balloonArea.right { justify-content: flex-start; flex-direction: row-reverse; }
.conversation.repeat { background-image: url("../images/conversationBg_2.png") }
.conversation.repeat .balloonArea .balloon { display: flex; align-items: center; gap: 45px; }

.conversation .cl_conversationChar { position: relative; }

/*
    *** 따라말하기 마크
*/
.conversation .repeatWordsMark {
    display:none;
    position:relative;
    width: 206px;
    height: 24px;
    border-radius: 30px;
    background: #898989;
}

.conversation .repeatWordsMark .trace {
    width: 50%;
    height: 100%;
    border-radius: 30px 0px 0px 30px;
    border: 1px solid #E2640E;
    background: #FF7E27;
}

.conversation .repeatWordsMark .mic {position:absolute; top:-76px; left:0%; transform:translateX(-50%); width:90px; height:165px; background-image:url("../images/icon_followProgress.png")}


/*
    *********************************** 스피커 대화듣기 *************************************
*/
.listenSpeaker .changeTextArea { position: absolute; bottom: 0; width: 100%; height: 170px;
    background-color: #fff; border-radius: 0px 0px 30px 30px; padding-left: 75px; box-sizing: border-box; z-index: 2; }
.listenSpeaker .changeTextArea li { display: flex; align-items: center; gap: 37px; height: 100%; }
.listenSpeaker .changeTextArea .character { background-repeat: no-repeat; width: 138px; height: 138px; background-size: 138px 138px; border-radius: 50%; }
.listenSpeaker .changeTextArea .changeText { font-size: 90px; font-family: "PretendardB"; }
.listenSpeaker .changeTextArea .changeText .orange { color: #FF5A00; }
.listenSpeaker .changeTextArea .changeText .blue { color: #3E60E8; }

/*.listenSpeaker .repeatWordsMark { display:none; position:relative; width: 198px; height: 24px; border-radius: 30px; background: #898989; }*/
.listenSpeaker .repeatWordsMark { display:none; position: absolute;
    bottom: 52px;
    right: 100px;
    /*transform: translateX(-50%);*/
    width: 206px;
    height: 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.40) inset, 0px 4px 3px 3px rgba(0, 0, 0, 0.25);
    border: 10px solid #FFF;
    background: rgba(0, 0, 0, 0.60); z-index: 10}
.listenSpeaker .repeatWordsMark .trace { width: 0%; height: 100%;border-radius: 30px 0px 0px 30px;border: 1px solid #E2640E;box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.40) inset;background: #FF7E27; }
/*.listenSpeaker .repeatWordsMark .mic {position:absolute; top:-76px; left:0%; transform:translateX(-50%); width:90px; height:165px; background-image:url("../images/icon_followProgress.png")}*/
.listenSpeaker .repeatWordsMark .mic {position:absolute; top:-76px; left:0%; transform:translateX(-50%); width:90px; height:165px; background-image:url("../images/icon_followProgress.png")}


/*
    *********************************** 스크립트 탭 플레이어 *************************************
*/
.scriptTabPlayer .tab { position: absolute; left: 61px; width: 328px; height: 178px; border-radius: 30px; color: #A0A0A0; border: 2px solid #ABE1E4; border: 2px solid #DDD;
    background-color: #F7F7F7; background-repeat: no-repeat; background-position: center 8px; cursor: pointer; }
.scriptTabPlayer .tab.on { border: 2px solid #ABE1E4; background-color: #DFF1F2; color: #000; }
.scriptTabPlayer .tab .text { width: 100%; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); text-align: center; font-size: 30px; font-family: "PretendardB"; }

.scriptTabPlayer .tabPage { position: absolute; right: 0; width: 1358px; height: 800px; border-radius: 0px 30px 30px 0px; background: #F2F7EB; }
.scriptTabPlayer .scriptTabContent { height: 770px; }
.scriptTabPlayer .scriptPlay { margin: 0; position: absolute; top: 30px; left: 30px; }

.scriptTabPlayer .scriptTabArea { display: flex; align-items: flex-start; flex-direction: column; gap: 29px; padding-top: 30px; overflow-y: hidden; margin-left: 200px; }


.scriptTabPlayer .scriptTabArea .clock { display: flex; justify-content: center; }
.scriptTabPlayer .textScriptArea { display: flex; align-items: center; justify-content: center; width: 958px; height: 98px; letter-spacing: -0.6px;
    font-size: 60px; font-family: "PretendardB"; background-color: #F6F0AA; border-radius: 100px; cursor: pointer; }
.scriptTabPlayer .scriptTabBalloon.play .textScriptArea { color: #137AE2; }
.scriptTabPlayer .scriptTabBalloon.play .textScriptArea .orange { color: #137AE2; }
.scriptTabPlayer .scriptTabBalloon.play .textScriptArea.first span:after { background-color: #137AE2; }

.scriptTabPlayer .textScriptArea.first { background-color: #E1F3C7; }
.scriptTabPlayer .textScriptArea .indent { padding-left: 20px; }
.scriptTabPlayer .textScriptArea .orange { color: #FF5A00; }
.scriptTabPlayer .mCSB_scrollTools { right: 30px; top: 30px; }
.scriptTabPlayer .cl_directive { right: 63px; }

.scriptTabPlayer .repeatWordsMark { display:none; position: absolute;
    bottom: 52px;
    right: 100px;
    width: 206px;
    height: 20px;
    border-radius: 30px;
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.40) inset, 0px 4px 3px 3px rgba(0, 0, 0, 0.25);
    border: 10px solid #FFF;
    background: rgba(0, 0, 0, 0.60); z-index: 10}
.scriptTabPlayer .repeatWordsMark .trace { width: 0%; height: 100%;border-radius: 30px 0px 0px 30px;border: 1px solid #E2640E;box-shadow: 0px 0px 3px 3px rgba(255, 255, 255, 0.40) inset;background: #FF7E27; }
.scriptTabPlayer .repeatWordsMark .mic {position:absolute; top:-76px; left:0%; transform:translateX(-50%); width:90px; height:165px; background-image:url("../images/icon_followProgress.png")}




/*
    *********************************** inputQuiz  *************************************
*/
.inputQuiz .inputQuizArea { padding: 100px 146px; box-sizing: border-box; }
.inputQuiz .inputArea { display: flex; align-items: center; justify-content: flex-start; gap: 150px; }
.inputQuiz .inputArea.type2 { gap: 106px; }
.inputQuiz .inputBox { display: flex; align-items: center; justify-content: center; font-size: 130px; font-family: "HallymGoB"; letter-spacing: 10px; }
.inputQuiz .inputBox input { width: 150px; height: 171px; display: flex; align-items: center; justify-content: center; border-radius: 20px; border: 2px solid rgba(0, 0, 0, 0.80);
    background: #F8F8F8; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25) inset; font-size: 130px; font-family: "HallymGoB"; text-align: center; color: #000; margin-right: 10px; }
.inputQuiz .inputBox input.correct { color: #137AE2; }
.inputQuiz .inputArea .imgArea {  display: flex; justify-content: flex-end; align-items: center; }
.inputQuiz .inputArea .imgArea img { width: 75%; }


/*
    *********************************** 사전 영역  *************************************
*/
.dictionaryArea { padding: 68px 0 0 79px; box-sizing: border-box; }

/*
    *********************************** ox쓰기 퀴즈  *************************************
*/
.oxInputQuiz { padding: 56px 210px; box-sizing: border-box; }
.oxInputQuiz .flexArea { display: flex; justify-content: space-between; }
.oxInputQuiz .flexArea:nth-child(1) { border-bottom: 3px dashed #E4E4E4; }
.oxInputQuiz .flexArea .list { width: 50%; border-right: 3px dashed #E4E4E4; box-sizing: border-box; display: flex;  gap: 20px; padding-bottom: 36px; }
.oxInputQuiz .flexArea.bottom .list { padding-bottom: 0; padding-top: 36px; }
.oxInputQuiz .flexArea .list:nth-last-child(1) { border-right: 0; }
.oxInputQuiz .flexArea .list .num { color: #59B6C6; font-size: 54px; font-family: "Jalnan"; margin-top: 10px; }
.oxInputQuiz .cl_oxQuizBox { margin-bottom: 20px; }
.oxInputQuiz .quizArea { position: relative; }
.oxInputQuiz .answerCell { position: relative; font-family: "PrintBoldR"; font-size: 120px; }
.oxInputQuiz .answerCell input { position: absolute; top: -7px; width: 100%; text-align: center; background: transparent; font-family: "PrintBoldR"; font-size: 120px; box-sizing: border-box; }
.oxInputQuiz .answerCell .answer { display: none; position: absolute; top: -7px; width: 100%; text-align: center; color: #137AE2; }

/*
* ** 3개짜리 레이아웃
*/
.oxInputQuiz.threeLayout { display: flex; align-items: flex-start; justify-content: center; padding: 0; padding-top: 168px; }
.oxInputQuiz.threeLayout .flexArea { justify-content: center; gap: 112px; }
.oxInputQuiz.threeLayout .flexArea .list { flex-direction: column; padding: 0; padding-right: 112px; }
.oxInputQuiz.threeLayout .flexArea .list .numArea { display: flex; align-items: center; }
.oxInputQuiz.threeLayout .flexArea .list:nth-last-child(1) { padding: 0; }
.oxInputQuiz.threeLayout .flexArea:nth-child(1) { border-bottom: 0; }
.oxInputQuiz.threeLayout .cl_btnAnsCheck { position: static; margin: 0 auto; }
/*
* *** tabLayout
*/
.oxInputQuiz.tabLayout { padding-top: 148px; }
.oxInputQuiz.tabLayout .flexArea:nth-child(1) { border-bottom: 0; }
.oxInputQuiz.tabLayout .flexArea { justify-content: center; }
.oxInputQuiz.tabLayout .flexArea .list { width: auto; flex-direction: column; align-items: flex-start; padding: 0 100px; }
.oxInputQuiz.tabLayout .flexArea:nth-child(2) .list { padding: 0; }
.oxInputQuiz.tabLayout .cl_alphabetPaper.s5 { width: 553px; height: 209px; background-image: url("../images/oxInputWordPaper.png"); }
.oxInputQuiz.tabLayout .cl_btnAnsCheck { top: auto; bottom: -40px; left: 50%; transform: translateX(-50%); }
.oxInputQuiz.tabLayout .cl_oxQuizBox { margin-bottom: 0px; }
.oxInputQuiz.tabLayout .cl_oxQuizBox .answer { font-size: 80px; }
.oxInputQuiz.tabLayout .answerCell .answer { font-size: 150px; top: 24px; }
.oxInputQuiz.tabLayout .answerCell input { font-size: 150px; top: 24px; }

.oxInputQuiz.tabLayout .oxInputTabPage { display: none; }
.oxInputQuiz.tabLayout .oxInputTabPage:nth-child(1) { display: block; }
.oxInputQuiz.tabLayout .oxInputTabPage .topArea { display: flex; align-items: center; justify-content: center; }

.oxInputQuiz.tabLayout .tabBtn { position: absolute; top: 33px; left: 102px; }
.oxInputQuiz.tabLayout .oxInputTab { display: inline-flex; align-items: center; justify-content: center; font-size: 34px; color: #565656; font-family: "Jalnan";
    padding: 12px 24px; box-sizing: border-box; border-radius: 20px 0px 0px 20px; border: 4px solid #BDBBBC; background-color: #D3D3D3; cursor: pointer; }
.oxInputQuiz.tabLayout .oxInputTab:nth-last-child(1) { border-radius: 0px 20px 20px 0px; }
.oxInputQuiz.tabLayout .oxInputTab:hover { border: 4px solid #D9D3D6; background-color: #F2F2F2; }
.oxInputQuiz.tabLayout .oxInputTab.on {border: 4px solid #1E98B8; background: #3AB2D2; color: #fff; }


/*
    *********************************** 타이머있는 게임 페이지 **********************************
*/
.timerGame .heartArea { position: absolute; top: 0px; right: 0px; display: flex; border-radius: 0px 30px 0px 80px; background: rgba(255, 255, 255, 0.30); padding: 7px 9px 7px 26px; box-sizing: border-box; }


/*타이머 ox퀴즈*/
.timerOxQuizArea .cl_btnAns { position: absolute; bottom: 16px; right: 16px; }
/*.timerOxQuizArea .item { position: relative; }*/
.timerOxQuizArea .item .xItem {display: none; position: absolute; background: url("../images/xIcon_small.png") center center no-repeat; width: 188px; height: 188px; }
.timerOxQuizArea .item.wrong .xItem { display: block; }

.timerOxQuizArea .oItem { position: absolute; }
.timerOxQuizArea .oItem:after { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; background: url("../images/oIcon_small.png")center center no-repeat; width: 233px; height: 233px; }
.timerOxQuizArea .oItem.correct:after { display: block; }

.timerOxQuizArea .volumeArea { position: absolute; bottom: 19px; left: 12px; }



/*타이머 alphabet퀴즈*/
.alphabetQuiz { width: 100%; overflow: hidden; }
.alphabetQuiz .alphabet { opacity: 0; background-repeat: no-repeat; background-position:bottom center; width: 197px; height: 302px; position: absolute; cursor: pointer;}
.alphabetQuiz.start .alphabet { opacity: 1; }
.alphabetQuiz .alphabet.a { background-image: url("../images/b.png"); }
.alphabetQuiz .alphabet.b { background-image: url("../images/b.png"); }
.alphabetQuiz .alphabet.c { background-image: url("../images/c.png"); }
.alphabetQuiz .alphabet.d { background-image: url("../images/d.png"); }
.alphabetQuiz .alphabet.e { background-image: url("../images/e.png"); }
.alphabetQuiz .alphabet.f { background-image: url("../images/f.png"); }
.alphabetQuiz .alphabet.g { background-image: url("../images/g.png"); }
.alphabetQuiz .alphabet.h { background-image: url("../images/h.png"); }
.alphabetQuiz .alphabet.i { background-image: url("../images/i.png"); }
.alphabetQuiz .alphabet.j { background-image: url("../images/j.png"); }
.alphabetQuiz .alphabet.k { background-image: url("../images/k.png"); }
.alphabetQuiz .alphabet.l { background-image: url("../images/l.png"); }
.alphabetQuiz .alphabet.m { background-image: url("../images/m.png"); }
.alphabetQuiz .alphabet.n { background-image: url("../images/n.png"); }
.alphabetQuiz .alphabet.o { background-image: url("../images/o.png"); }
.alphabetQuiz .alphabet.p { background-image: url("../images/p.png"); }
.alphabetQuiz .alphabet.q { background-image: url("../images/q.png"); }
.alphabetQuiz .alphabet.r { background-image: url("../images/r.png"); }
.alphabetQuiz .alphabet.s { background-image: url("../images/s.png"); }
.alphabetQuiz .alphabet.t { background-image: url("../images/t.png"); }
.alphabetQuiz .alphabet.u { background-image: url("../images/u.png"); }
.alphabetQuiz .alphabet.v { background-image: url("../images/v.png"); }
.alphabetQuiz .alphabet.w { background-image: url("../images/w.png"); }
.alphabetQuiz .alphabet.x { background-image: url("../images/x.png"); }
.alphabetQuiz .alphabet.y { background-image: url("../images/y.png"); }
.alphabetQuiz .alphabet.z { background-image: url("../images/z.png"); }
.alphabetQuiz .alphabet.mo { background-image: url("../images/mo.png"); }
.alphabetQuiz .alphabet[data-correct="true"] {  }
.alphabetQuiz .alphabet[data-correct="true"]:after { display: none; position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%);
    content: ''; background-image: url("../images/oIcon_small.png"); background-repeat: no-repeat; width: 233px; height: 233px; background-position: center center; }
.alphabetQuiz .alphabet.correct[data-correct="true"]:after { display: block; }

.alphabetQuiz .alphabet.row1 { top: 20px; z-index: 1; }
.alphabetQuiz .alphabet.row2 { top: 210px; z-index: 2; }
.alphabetQuiz .alphabet.row3 { top: 440px; z-index: 3; }

/*@keyframes moveRightToLeft {*/
/*    0%{ right: 0px; opacity: 0; }*/
/*    10%{ right: 10%; opacity: 1; }*/
/*    20%{ right: 20%; opacity: 1; }*/
/*    30%{ right: 30%; opacity: 1; }*/
/*    40%{ right: 40%; opacity: 1; }*/
/*    50%{ right: 50%; opacity: 1; }*/
/*    60%{ right: 60%; opacity: 1; }*/
/*    70%{ right: 70%; opacity: 1; }*/
/*    80%{ right: 80%; opacity: 1; }*/
/*    90%{ right: 90%; opacity: 1; }*/
/*    100%{ right: 100%; opacity: 0; }*/
/*}*/



.alphabetQuiz .answerArea { display: flex; align-items: center; justify-content: center; gap: 20px; position: absolute; bottom: 0; width: 100%; height: 129px;
    border-radius: 0px 0px 30px 30px; background: linear-gradient(180deg, #343434 0%, #000 100%); border-radius: 0 0 30px 30px; }
.alphabetQuiz .answerArea .textArea { display: flex; align-items: center; justify-content: center; gap: 20px; }
.alphabetQuiz .textBox { width: 108px; height: 100px; display: flex; align-items: center; justify-content: center; font-family: "Jalnan"; font-size: 50px; color: #9C7C68;
    border-radius: 20px; border: 6px solid #B5A195; background: #F4F1EE; box-sizing: border-box; }
.alphabetQuiz .textBox.on { border-radius: 20px; border: 6px solid #137AE2; background: #6BB0F5; }
.alphabetQuiz .textBox span { display: none; background: #6BB0F5; }
.alphabetQuiz .textBox.on span { position: absolute; display: block; color: #fff; font-size: 64px; font-family: "GodoM";
    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;*/
}


.alphabetQuiz .boxWrap { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.alphabetQuiz .cl_popupWrap .popup .textArea { margin-bottom: 54px; }

/*
    *** 볼륨조절바
*/
.alphabetQuiz { position: relative; }
.alphabetQuiz .volumeWrap { position: absolute; bottom: 19px; right: 67px; z-index: 5; }
.alphabetQuiz .volumeWrap .btnVolume { background: url("../images/speakerVolBtn.png")no-repeat; width: 91px; height: 91px; cursor: pointer;}


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

    .videoPopupArea .videoPopBtn:hover .playBtn { background: url("../images/btnPlayVideoL_over.png")no-repeat; }


    /*대본*/
    .scriptArea .scriptHeader .scriptPlay:hover { background: url("../images/scriptPlayBtn_hover.png"); }
    .scriptArea .scriptHeader .scriptPlay.pause:hover { background: url("../images/scriptPauseBtn_hover.png"); }
    .scriptArea .scriptHeader .scriptStop:hover { background: url("../images/scriptStopBtn_hover.png"); }

}