/*
    ************************************ 공통 요소 ************************************
*/
[data-page] { display: none;}
.paddingNon { padding: 0 !important; }
.paddingNon { padding: 0 !important; }
.btnPopup { position: absolute; right: 56px; }
/*.gapNon { gap: 0 !important; }*/


.inputArea.underLine { position: relative;  }
.inputArea.underLine:before { content: ''; width: 100%; position: absolute; bottom: 10px; left: 0; border-bottom: 3px solid #000; box-sizing: border-box; }



/*
    *** 커스텀 스크롤
*/

.mCSB_scrollTools {
    width: 32px;
    opacity:1 !important;
}

.mCSB_inside>.mCSB_container { padding-right: 30px; margin-right: unset; }

.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 #5AAA4A;
    box-sizing: border-box;
    box-shadow: 0px 0px 4px 2px rgba(255, 255, 255, 0.25) inset;
    background: #81DB6F;
}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {background: #57BA43;}
.mCS-dark-thick.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar {background: #57BA43;}

.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:903px;
    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.bg6 .contentOutWrap {background-image:url("../images/contentBg6.png");} /*오공완*/
body.bg7 .contentOutWrap {background-image:url("../images/contentBg7.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: 18px; box-sizing: border-box;}
.pageFrame .pageFrameHead.end { align-items: flex-end; padding-bottom: 30px; 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: 1808px; height: 100%; box-sizing: border-box; /*padding:50px;*/ }
.mainContentBox .cl_page { position: absolute; height: 100%; background-color:#ffffff; /*border-radius: 30px 30px 0 0;*/ border-radius: 12px 12px 0.5px 0; }
/*.mainContentBox .cl_page:before {content:""; position:absolute; top:-10px; left:-10px; z-index:-1; width:calc(100% + 20px); height:calc(100% + 20px); !*border-radius: 40px 40px 0 0;*! border-radius: 12px 12px 0 0; background-color:rgba(0, 0, 0, 0.10);}*/
.mainContentBox .cl_page::before {content:""; position:absolute; top:-10px; left:-10px; z-index:-1; width:calc(100% + 20px); height:calc(100% + 20px); /*border-radius: 40px 40px 0 0;*/ border-radius: 12px 12px 0 0; background-color:rgba(0, 0, 0, 0.10);}
.mainContentBox .cl_page.scriptContent::before { display: none; }
.mainContentBox .cl_page.pageVideo { border-radius: 12px; height: calc(100% - 51px); background-color: transparent; }
.mainContentBox .cl_page.pageVideo.videoPopupArea { background-color: #fff; height: calc(100%); border-radius: 12px 12px 0 0; }
.mainContentBox .cl_page.pageVideo.videoPopupArea.active { background-color: transparent; height: calc(100% - 51px); border-radius: 12px; }
.mainContentBox .cl_page.pageVideo::before { display: none; }
.mainContentBox .cl_page.pageVideo::after { height: calc(100% + 20px); border-radius: 12px; content:""; position:absolute; top:-10px; left:-10px; z-index:-1; width:calc(100% + 20px); background-color:rgba(0, 0, 0, 0.10); }
/*.mainContentBox .cl_page.pageVideo:before { border-radius: 22px; }*/

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

/*
    *** 한글폰트
*/
.Nanum { font-family: "NanumGoB" !important;}


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

/*
    *** 레이아웃2 - 발문높이
*/


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


/*
    *** 레이아웃4 - 발문높이 188
*/
body.layout4 .pageFrame .pageFrameHead {height:188px;}


/*
    *** 레이아웃5 - 발문높이 92
*/
body.layout5 .pageFrame .pageFrameHead {height:92px;}

/*
    *** 레이아웃6 - 발문높이
*/

body.layout6 .pageFrame .pageFrameHead {height:206px;}
/*
    *** 레이아웃7 - 발문높이 98 (오공완)
*/
body.layout7 .pageFrame .pageFrameHead {height:98px;}
/*
    *** 레이아웃8 - Work Together 타이틀 두줄일때
*/
body.layout8 .pageFrame .pageFrameHead {height:284px; padding-bottom: 22px; }


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

/*
    *** 레이아웃 체크
*/
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; }

/*
    *** 레이아웃 오공완
*/
/*인트로 페이지*/
.todayStudyIntro { position: absolute; top: 0; left: 0; background: url("../images/todayStudyInrtoBg.png") no-repeat; background-size: cover; width: 1920px; height: 903px; z-index: 22; }
.todayStudyIntro.grade6 { background-image: url("../images/todayStudyIntroBg_grade6.png"); }
.todayStudyIntro .textWrap { position: absolute; top: 389px; left: 50%; transform: translateX(-50%); text-align: center; }
.todayStudyIntro .textWrap .subText { font-family: "JalnanGothic"; font-size: 35px; color: #0094D0; margin-bottom: 11px; }
.todayStudyIntro .textWrap .title { margin-bottom: 23px; }
.todayStudyIntro .textWrap .mainTitle { color: #fff; font-size: 56px; font-family: "Jalnan"; margin-bottom: 50px;
    text-shadow: 3px 0px 0px #2596C6, 0px 3px 0px #2596C6, -3px 0px 0px #2596C6, 0px -3px 0px #2596C6, 3px 3px 0px #2596C6, -3px 3px 0px #2596C6, -3px -3px 0px #2596C6, 3px -3px 0px #2596C6,
    3px 0px 0px #2596C6, 0px 3px 0px #2596C6, -3px 0px 0px #2596C6, 0px -3px 0px #2596C6, 3px 3px 0px #2596C6, -3px 3px 0px #2596C6, -3px -3px 0px #2596C6, 3px -3px 0px #2596C6,
    3px 0px 0px #2596C6, 0px 3px 0px #2596C6, -3px 0px 0px #2596C6, 0px -3px 0px #2596C6, 3px 3px 0px #2596C6, -3px 3px 0px #2596C6, -3px -3px 0px #2596C6, 3px -3px 0px #2596C6;
    box-sizing: border-box;
}


/*탭페이지들*/
.todayStudyBox .todayTitle { display: flex; align-items: center; gap: 20px; height: 118px; font-size: 60px; font-family: "NanumGoB"; letter-spacing: -0.96px; border-radius: 12px 12px 0 0; background-color: #F6F8E8; padding: 0 40px; box-sizing: border-box;  z-index: 1}
.todayStudyBox .todayTitle.twoLine { height: 196px; align-items: flex-start; padding-top: 21px; line-height: 78px;}
.todayStudyBox .todayTitle.twoLine .cl_btnSpeaker { margin-top: -1px;}
.todayStudyBox .commentPop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  z-index: 21; background-color: rgba(0, 0, 0, 0.80);}
.todayStudyBox .commentPop .cl_correctMo { display: none;}
.todayStudyBox .commentPop .cl_failMo { display: none;}

.todayStudyBox .underLine { display: inline-block; border-bottom: 4px solid #000; line-height: 1;}

.todayStudyBox .commentPop.correct { display: block;}
.todayStudyBox .commentPop.correct .cl_correctMo{ display: block;}

.todayStudyBox .commentPop.wrong { display: block;}
.todayStudyBox .commentPop.wrong .cl_failMo{ display: block;}

/*끝 페이지*/
.todayStudyFinish { display: none; position: absolute; top: 0; left: 0; background-image: url("../images/todayStudyFinishBg.png"); background-repeat: no-repeat; background-size: cover; width: 1920px; height: 903px; z-index: 21; }
.todayStudyFinish > img {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);}

/*끝 페이지 폭죽*/
.firework { display: none; position: absolute; top: 0; left: 0; z-index: 21; width: 100%; height: 100%; }
.firework img {position: absolute; top: 30px; left: 50%; transform: translateX(-50%);}

/*팝업*/
.todayStudyPopup { position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.8); width: 100%; height: 100%; z-index: 21; }
.todayStudyPopup .popup { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.todayStudyPopup .popup .pop { position: relative; padding: 80px 120px; box-sizing: border-box; border-radius: 20px; border: 10px solid #94EBC9; background-color: #FFF; z-index: 9; }
.todayStudyPopup .popup .pop .textArea {  font-size: 60px; font-family: "PretendardB"; letter-spacing: -0.6px; text-align: center; line-height: 180%; margin-bottom: 80px; }
.todayStudyPopup .popup .pop .textArea .conversationIcon { display: inline-flex; align-items: center; width: 82px; height: 82px; background-image: url("../images/conversationIcon.png"); margin: 0 20px; vertical-align: -20px; }
.todayStudyPopup .popup .icon { position: absolute; left: 43px; top: -70px; width: 110px; height: 97px; background-image: url("../images/todayPopupIcon_1.png"); }
.todayStudyPopup .popup .icon.grade6 { width: 109px; height: 104px; background-image: url("../images/todayPopupIcon_2.png"); }

/* 기본 width 1168px 나머지는 각 페이지에서 width 조절*/
.todayStudyBox .roundBgBox { display: flex; justify-content: center; align-items: center; width: 1168px;font-size: 60px; color: #000;  font-family: "HallymGoB"; background-color: #F2F2F2; border-radius: 12px;  padding: 60px 0; box-sizing: border-box;}
.todayStudyBox .roundBgBox.fontM { font-size: 54px;}
.todayStudyBox .roundBgBox.Nanum { font-family: "NanumGoB";}
/* 2줄*/
.todayStudyBox .roundBgBox.twoLine { flex-direction: column; padding: 20px 0; line-height: 91px;}
/* 텍스트 왼쪽정렬 정렬 후 왼쪽패딩 각 페이지에서 조절 기본 60px*/
.todayStudyBox .roundBgBox.left { justify-content: flex-start; padding-left: 60px;}
.todayStudyBox .roundBgBox.twoLine.left { align-items: flex-start}


/* A, B 1,2,3 마크 */
.todayStudyBox .markText { display: flex; gap: 20px; letter-spacing: -0.54px;}
.todayStudyBox .mark {display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;font-size: 34px;color: #fff;font-family: "HallymGoB";border-radius: 20px;background-color: #8F8072;box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.10) inset; margin-top: 18px;}


/* 오공환 화살표 */
.todayStudyBox .arrowIcon { width: 102px; height: 62px; background: url("../images/todayArrwIcon.png")no-repeat; }
.todayStudyBox .arrowIcon.sizeS { width: 52px; height: 32px; background: url("../images/todayArrwIconS.png")no-repeat; }

/* 오공완 select 종류 타입 ( ox item 타입,number 타입, img 타입, text 타입 )*/
/* 오공완 문제  */
.todayStudyBox.flexPage { display: flex; flex-direction: column;}
.todayStudyBox.flexPage .contentsArea { display: flex; justify-content: center; align-items: center;}
.todayStudyBox.flexPage .contentsArea.column { flex-direction: column; }


/*오공완 문제에 따른 상단 마진*/
.todayStudyBox.flexPage .contentsArea.imgOxType { margin-top: 49px; }
.todayStudyBox.flexPage .contentsArea.imgChoiceType { margin-top: 88px; }
.todayStudyBox.flexPage .contentsArea.imgSelectType { margin-top: 80px; }
.todayStudyBox.flexPage .contentsArea.numSelectType { margin-top: 102px; }
.todayStudyBox.flexPage .contentsArea.imgSoundType { margin-top: 116px; }
.todayStudyBox.flexPage .contentsArea.roundBoxType { margin-top: 30px; }
.todayStudyBox.flexPage .contentsArea.tableThreeType { margin-top: 42px; }
.todayStudyBox.flexPage .contentsArea.tableFourType { margin-top: 22px; }
.todayStudyBox.flexPage .contentsArea.imgThreeType { margin-top: 130px; }
.todayStudyBox.flexPage .contentsArea.imgThreeSelectType { margin-top: 113px; }
.todayStudyBox.flexPage .contentsArea.textSelectType { margin-top: 107px; }
.todayStudyBox.flexPage .contentsArea.textFourType { margin-top: 137px; }
.todayStudyBox.flexPage .contentsArea.textColumnType { margin-top: 38px; }

.todayStudyBox .pageArea .imgArea { border-radius: 20px; border:6px solid #E2E2E2; box-sizing: border-box;}
.todayStudyBox .pageArea .imgArea img { display: block; border-radius: 12px;}
.todayStudyBox .pageArea .audioList { gap: 30px;}
.todayStudyBox .pageArea .bogiAudio { width: 79px; height: 68px; background: url("../images/todayStudySpeaker.png")no-repeat; cursor: pointer}
.todayStudyBox .pageArea .bogiAudio:hover {background: url("../images/todayStudySpeaker_hover.png")no-repeat;}

.todayStudyBox .pageArea .end { pointer-events: none !important;}
.todayStudyBox .pageArea .end .bogiAudio { pointer-events: auto !important; }

.todayStudyBox .flex { display: flex; align-items: center; justify-content: center; }
.todayStudyBox .flex.column { flex-direction: column;}

.todayStudyBox .selectList { cursor: pointer;}

.todayStudyBox .selectArea { display: flex; gap: 60px; }
.todayStudyBox .selectArea.gapS { gap: 30px;}
.todayStudyBox .selectArea.gapR { gap: 72px;}
.todayStudyBox .selectArea.gapM { gap: 120px;}
.todayStudyBox .selectArea.gapL { gap: 160px;}
.todayStudyBox .selectArea.gapXL { gap: 180px}

/* select - ox or number 박스 타입 */
.todayStudyBox .selectArea.boxType .selectList { position: relative; width: 276px; height: 276px; box-sizing: border-box; border-radius: 20px; border: 2px solid  #D5D5D5; background-color: #E2E2E2 ;box-shadow: 0 0 10px 0 #FFF inset; cursor: pointer;}
.todayStudyBox .selectArea.boxType .audioList .selectList { border-radius: 20px; border: 2px solid #D5D5D5; background: #E2E2E2; box-shadow: 0 0 10px 0 #FFF inset; }
.todayStudyBox .selectArea.boxType .selectList:hover{ border-color: #84B6E9;  background-color: #fff; border-width: 10px;}
.todayStudyBox .selectArea.boxType .selectList:hover:before { background-color: #fff; border: none;}
.todayStudyBox .selectArea.boxType .selectList.xItem:hover { border-color: #F19797;}
.todayStudyBox .selectArea.boxType .selectList.correct,
.todayStudyBox .selectArea.boxType .selectList.end { border-color: #84B6E9; background-color: #DAECFF; border-width: 10px;}
.todayStudyBox .selectArea.boxType .selectList.correct:before,
.todayStudyBox .selectArea.boxType .selectList.end:before { background-color: #DAECFF; border: none; box-shadow: none;}
.todayStudyBox .selectArea.boxType .selectList:before { content: '';position: absolute; top: 50%; left: 50%;  transform: translate(-50%,-50%); display: flex; justify-content: center; align-items: center; width: 236px; height: 236px; border-radius: 10px; border: 2px solid #D2D2D2; background-color: #E2E2E2; box-shadow: 0 0 10px 0 rgba(255,255,255,0.8) inset; box-sizing: border-box; }

/*
ox hover 시 컬러
 */
.todayStudyBox .selectArea.boxType .selectList.oItem:before { background: url("../images/oItemL.png")no-repeat center ;}
.todayStudyBox .selectArea.boxType .selectList.xItem:before {  background: url("../images/xItemL.png")no-repeat center;}

.todayStudyBox .selectArea.boxType .selectList.oItem:hover:before,
.todayStudyBox .selectArea.boxType .selectList.oItem.correct:before,
.todayStudyBox .selectArea.boxType .selectList.oItem.end:before { background: url("../images/oItemL_on.png")no-repeat center ;}
.todayStudyBox .selectArea.boxType .selectList.xItem:hover:before{ background: url("../images/xItemL_on.png")no-repeat center ;}

/*
선택 및 정답시 color
*/
.todayStudyBox .selectArea.boxType .selectList.xItem.correct,
.todayStudyBox .selectArea.boxType .selectList.xItem.end { border-color: #F19797; background-color: #FFDEDE; border-width: 10px;}
.todayStudyBox .selectArea.boxType .selectList.xItem.correct:before,
.todayStudyBox .selectArea.boxType .selectList.xItem.end:before { border: none; box-shadow: none; background:#FFDEDE url("../images/xItemL_on.png")no-repeat center ;}

/*
number
*/
.todayStudyBox .selectArea.boxType .selectList.num:before { font-size: 130px; color: #949292;font-family: "Jalnan";}
.todayStudyBox .selectArea.boxType .selectList.num0:before { content: '0'}
.todayStudyBox .selectArea.boxType .selectList.num1:before { content: '1'}
.todayStudyBox .selectArea.boxType .selectList.num2:before { content: '2'}
.todayStudyBox .selectArea.boxType .selectList.num3:before { content: '3'}
.todayStudyBox .selectArea.boxType .selectList.num4:before { content: '4'}
.todayStudyBox .selectArea.boxType .selectList.num:hover:before { color: #1CA6EB;}
.todayStudyBox .selectArea.boxType .selectList.num.correct:before,
.todayStudyBox .selectArea.boxType .selectList.num.end:before { color: #0048FF;}
.todayStudyBox .selectArea.boxType .selectList.num.correct,
.todayStudyBox .selectArea.boxType .selectList.num.end { border-color: #0048FF}

/*
box sizeS
*/
.todayStudyBox .selectArea.boxType .selectList.sizeS { width: 200px; height: 200px;}
.todayStudyBox .selectArea.boxType .selectList.sizeS:before { width: 160px; height: 160px;}
.todayStudyBox .selectArea.boxType .selectList.sizeS.num:before { font-size: 100px;}

/*
ox sizeS
*/
.todayStudyBox .selectArea.boxType .selectList.sizeS.oItem:before { background: url("../images/oItemS.png")no-repeat center ;}
.todayStudyBox .selectArea.boxType .selectList.sizeS.xItem:before {  background: url("../images/xItemS.png")no-repeat center;}

.todayStudyBox .selectArea.boxType .selectList.sizeS.oItem:hover:before,
.todayStudyBox .selectArea.boxType .selectList.sizeS.oItem.correct:before,
.todayStudyBox .selectArea.boxType .selectList.sizeS.oItem.end:before { background: url("../images/oItemS_on.png")no-repeat center ;}
.todayStudyBox .selectArea.boxType .selectList.sizeS.xItem:hover:before,
.todayStudyBox .selectArea.boxType .selectList.sizeS.xItem.correct:before,
.todayStudyBox .selectArea.boxType .selectList.sizeS.xItem.end:before { background: url("../images/xItemS_on.png")no-repeat center ;}



/* select - text 박스 타입 */
.todayStudyBox .selectArea.textType { align-items: flex-start; gap: 52px;}
.todayStudyBox .selectArea.textType.gapS { gap: 42px;}
.todayStudyBox .selectArea.textType .selectList { display: flex; align-items: center; gap: 30px; cursor: pointer;}
.todayStudyBox .selectArea.textType .selectList .textNum { display: flex; justify-content: center; align-items: center; width: 62px; height: 62px; border-radius: 100%; border:4px solid #686B8B; background-color: #7B7EA3; box-sizing: border-box;
    font-size: 33px; color: #fff; font-family: "Jalnan";
    text-shadow:
            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
}
.todayStudyBox .selectArea.textType .selectList .text { font-size: 54px; color: #000; font-family: "HallymGoB";;}
.todayStudyBox .selectArea.textType .selectList .text.Nanum { font-family: "NanumGoB";}

.todayStudyBox .selectArea.textType .selectList:hover .textNum {
    background-color: #28C3F2; border-color: #28C3F2;
    text-shadow: 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
}
.todayStudyBox .selectArea.textType .selectList:hover .text { color: #1CA6EB;}
.todayStudyBox .selectArea.textType .selectList:hover .text .bogiBorder { background: #1CA6EB; }

.todayStudyBox .selectArea.textType .selectList.end .textNum,
.todayStudyBox .selectArea.textType .selectList.correct .textNum { background-color: #0048FF; border-color: #053DCA;
    text-shadow: 1px 0px 0px #0033b3, 0px 1px 0px #0033b3, -1px 0px 0px #0033b3, 0px -1px 0px #0033b3, 1px 1px 0px #0033b3, -1px 1px 0px #0033b3, -1px -1px 0px #0033b3, 1px -1px 0px #0033b3,
    2px 0px 0px #0033b3, 0px 2px 0px #0033b3, -2px 0px 0px #0033b3, 0px -2px 0px #0033b3, 2px 2px 0px #0033b3, -2px 2px 0px #0033b3, -2px -2px 0px #0033b3, 2px -2px 0px #0033b3
}

.todayStudyBox .selectArea.textType .selectList.end .text .bogiBorder,
.todayStudyBox .selectArea.textType .selectList.correct .text .bogiBorder { background: #0048FF; }


.todayStudyBox .selectArea.textType .selectList.end .text,
.todayStudyBox .selectArea.textType .selectList.correct .text { color: #0048FF;}

/* select - 테이블 타입 */
.todayStudyBox .tableType table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; text-align: center; font-size: 46px; font-family: "NanumGoB"; color: #000; border: 2px solid #AFE0DC; position: relative; }
.todayStudyBox .tableType thead tr { border-radius: 12px 12px 0 0; height: 102px; box-sizing: border-box; }
.todayStudyBox .tableType thead tr th { background-color: #CCF3F0; width: 560px; padding: 16px 0; border-right: 2px solid #AFE0DC; border-bottom: 2px solid #AFE0DC; }
.todayStudyBox .tableType thead tr th:first-of-type { border-radius: 12px 0 0 0; }
.todayStudyBox .tableType thead tr th:last-of-type { border-radius: 0 12px 0 0; border-right: none; }
.todayStudyBox .tableType tbody tr:hover td { color: #28C3F2; }
.todayStudyBox .tableType tbody tr td { padding: 16px 0; cursor: pointer; border-bottom: 2px solid #AFE0DC; border-right: 2px solid #AFE0DC; position: relative; }
.todayStudyBox .tableType tbody tr td:last-of-type { border-right: none; }
.todayStudyBox .tableType tbody tr:last-of-type td { border-bottom: none; }
.todayStudyBox .selectArea.textType.tableType .selectList { display: revert; height: 102px; box-sizing: border-box; }
.todayStudyBox .selectArea.textType.tableType .selectList .textNum { position: absolute; left: -82px; top: 50%; transform: translateY(-50%); }
.todayStudyBox .selectArea.textType.tableType .selectList .text { font-size: 46px; font-family: "NanumGoB"; }

/* select - img 박스 타입 */
.todayStudyBox .selectArea.imgType .selectList img { display: block; border-radius: 12px;}
.todayStudyBox .selectArea.imgType .selectList { position: relative; border-radius: 20px; border: 6px solid #E2E2E2; box-sizing: border-box;}
.todayStudyBox .selectArea.imgType .selectList:before { content: ''; position: absolute; top: -1px; left: -1px; width: 80px; height: 80px; background-color: #D2D2D4; border-radius: 14px 0 60px 0;
    font-size: 31px; color: #fff; font-family: "Jalnan"; padding-top: 17px; padding-left: 21px;  box-sizing: border-box;;
    text-shadow:
            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
}
.todayStudyBox .selectArea.imgType .selectList.img1:before { content: '1'}
.todayStudyBox .selectArea.imgType .selectList.img2:before { content: '2'}
.todayStudyBox .selectArea.imgType .selectList.img3:before { content: '3'}
.todayStudyBox .selectArea.imgType .selectList.img4:before { content: '4'}

.todayStudyBox .selectArea.imgType .selectList:hover { border-color: #57B9EA}
.todayStudyBox .selectArea.imgType .selectList:hover:before { background-color: #57B9EA;
    text-shadow: 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
}

.todayStudyBox .selectArea.imgType .selectList.end,
.todayStudyBox .selectArea.imgType .selectList.correct { border-color: #0048FF;}

.todayStudyBox .selectArea.imgType .selectList.end:before,
.todayStudyBox .selectArea.imgType .selectList.correct:before {
    background-color: #0048FF;
    text-shadow: 1px 0px 0px #0033b3, 0px 1px 0px #0033b3, -1px 0px 0px #0033b3, 0px -1px 0px #0033b3, 1px 1px 0px #0033b3, -1px 1px 0px #0033b3, -1px -1px 0px #0033b3, 1px -1px 0px #0033b3,
    2px 0px 0px #0033b3, 0px 2px 0px #0033b3, -2px 0px 0px #0033b3, 0px -2px 0px #0033b3, 2px 2px 0px #0033b3, -2px 2px 0px #0033b3, -2px -2px 0px #0033b3, 2px -2px 0px #0033b3

}

/* bogiType 양쪽 정렬일때 gap*/
.todayStudyBox .selectArea.textType.both { gap: 240px;}

.todayStudyBox .selectArea.textType .bogi .selectList { justify-content: flex-start;}
.todayStudyBox .selectArea.textType .bogi .selectList { margin-bottom: 52px;}
.todayStudyBox .selectArea.textType .bogi .selectList:last-child { margin-bottom: 0;}

/* 보기에 하이픈 긴거 있을때 */
.todayStudyBox .selectArea.textType .bogiBorder { width: 30px; height: 3px; background: #000; display: inline-block; margin-bottom: 15px; }



/* input , textBox-type1,2 type1 = 회색 박스 쉐도우 들어감 type2  하얀색 박스 쉐도우 없음 두께 다름 */


.todayStudyBox .inputWrap { font-size: 60px; color: #000; font-family: "HallymGoB";}
.todayStudyBox .roundTextBox { border-radius: 12px; box-sizing: border-box;}
.todayStudyBox .roundTextBox.type1 { border: 2px solid rgba(0, 0, 0, 0.30);background: #F8F8F8;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25) inset;}
.todayStudyBox .roundTextBox.type2 { border: 4px solid rgba(0, 0, 0, 0.30);;background: #fff;}
.todayStudyBox .inputArea { position: relative; }
.todayStudyBox .inputArea input{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-size: 60px;
    font-family: "HallymGoB";
    background-color: transparent;
    letter-spacing: -1.056px;
    pointer-events: auto;
}
.todayStudyBox .inputArea .answer{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    justify-content: center;
    align-items: center;
    letter-spacing: -1.056px;
    color: #0048FF;
    text-align: center;
}


/* circle */
.todayStudyBox .circle {display: inline-block; width: 53px; height: 53px; text-align: center; line-height: 53px; font-size: 33px; color: #fff; font-family: "Jalnan"; border-radius: 100%;}

.todayStudyBox .circle.sky { background-color: #8DCDD8}

/* imgChoiceType */
.todayStudyBox .pageArea .choiceImgArea { position: relative; }
.todayStudyBox .selectArea.textType.choiceImgArea .selectList { position: absolute; z-index: 3; }
.todayStudyBox .selectArea.textType.choiceImgArea .selectList .textNum { position: relative; z-index: 3; }
.todayStudyBox .selectArea.textType.choiceImgArea .selectList .choiceImg { position: absolute; z-index: 2; }

.todayStudyBox .selectArea.textType.choiceImgArea .selectList .choiceImg .choiceAnswer { display: none; }

.todayStudyBox .selectArea.textType.choiceImgArea .selectList:hover .choiceImg .choiceAnswer { display: inline-block; }
.todayStudyBox .selectArea.textType.choiceImgArea .selectList:hover .choiceImg .choiceBasic { display: none; }

.todayStudyBox .selectArea.textType.choiceImgArea .selectList .textNum { background-color: #878CF8; border-color: #686B8B; }
.todayStudyBox .selectArea.textType.choiceImgArea .selectList:hover .textNum,
.todayStudyBox .selectArea.textType.choiceImgArea .selectList.end .textNum,
.todayStudyBox .selectArea.textType.choiceImgArea .selectList.correct .textNum { background-color: #0048FF; border-color: #0040E3; text-shadow: 1px 0px 0px #0033b3, 0px 1px 0px #0033b3, -1px 0px 0px #0033b3, 0px -1px 0px #0033b3, 1px 1px 0px #0033b3, -1px 1px 0px #0033b3, -1px -1px 0px #0033b3, 1px -1px 0px #0033b3,
2px 0px 0px #0033b3, 0px 2px 0px #0033b3, -2px 0px 0px #0033b3, 0px -2px 0px #0033b3, 2px 2px 0px #0033b3, -2px 2px 0px #0033b3, -2px -2px 0px #0033b3, 2px -2px 0px #0033b3; }

.todayStudyBox .selectArea.textType.choiceImgArea .selectList.correct .choiceImg .choiceAnswer,
.todayStudyBox .selectArea.textType.choiceImgArea .selectList.end .choiceImg .choiceAnswer { display: inline-block; }
.todayStudyBox .selectArea.textType.choiceImgArea .selectList.correct .choiceImg .choiceBasic,
.todayStudyBox .selectArea.textType.choiceImgArea .selectList.end .choiceImg .choiceBasic { display: none; }

/*
    *** 레이아웃 lookandthink
*/
.lookAndThink { padding: 55px 72px 0 72px; box-sizing: border-box; }
.lookAndThink .cl_pageTitle { margin-bottom: 25px; }
.lookAndThink .toggleVideo { margin: 0 auto; margin-bottom: 35px; }
.lookAndThink .toggleVideo video { border: 6px solid #E2E2E2; border-radius: 12px; }
.lookAndThink .cl_openObject { width: 1524px; margin-left: 70px; }

/*
    *** 레이아웃 readAndThink
*/
.readAndThink { padding: 40px 72px 0 72px; box-sizing: border-box; }
.readAndThink .cl_pageTitle { margin-bottom: 40px; }
.readAndThink .imgArea { display: flex; justify-content: center; margin: 0 auto; margin-bottom: 40px; }
.readAndThink .cl_openObject { width: 1534px; margin: 0 auto; }

/*
    *** 발음선택해서 어휘듣기
*/

.audioPronounce .words { position: absolute; top: 64px; left: 161px; display: flex; flex-wrap: wrap; gap: 50px 30px; }
.audioPronounce .words .word { margin-right: 28px; }
.audioPronounce .words .word:nth-child(4n) { margin-right: 0; }
.audioPronounce .words .word .imgArea { width: 328px; }
.audioPronounce .words .word .imgArea img { width: 100%; }
.audioPronounce .words .word .textArea { display: flex; align-items: center; justify-content: center; width: 328px; height: 90px;
    font-size: 54px; color: #000; font-family: "HallymGoB"; background-color: #E5FEF4; border-radius: 12px; cursor: pointer; }

.audioPronounce .words .word .textArea:hover,
.audioPronounce .words .word .textArea.on.playing { color: #0048FF}


/*
    *** 발음 어휘 페이지
*/
.wordsPronounce .word { position: absolute; top: 55px; left: 50%; transform: translateX(-50%); }
.wordsPronounce .word .imgArea { width: 799px; height: 499px; display: flex; align-items: center; justify-content: center; background-color: #F2F2F2; border: 1px solid #E2E2E2; border-radius: 12px; padding: 20px; box-sizing: border-box; margin-bottom: 40px; }
.wordsPronounce .word .textArea .lang { width: 799px; display: flex; align-items: center; justify-content: center; padding: 10px 0; box-sizing: border-box; text-indent: -99999px; pointer-events: none; }
.wordsPronounce .word .textArea .english { height: 128px; font-size: 72px; font-family: "HallymGoB"; border-radius: 12px 12px 0 0; background-color: #E5FEF4; box-sizing: border-box;  cursor: pointer;}
.wordsPronounce .word .textArea .korean { height: 90px; font-size: 54px; font-family: "NanumGoB"; border-radius: 0 0 12px 12px; background-color: #F6F5EE; box-sizing: border-box; }
.wordsPronounce .word .textArea .lang.active { text-indent: 0; pointer-events: auto; }
.wordsPronounce .word .textArea .lang.english:hover,
.wordsPronounce .word .textArea .lang.english.on { color: #0048FF; }


/*언어선택*/
.wordsPronounce .selectWord { width: 82px; height: 148px; position: absolute; top: 665px; left: 1325px; padding: 10px; box-sizing: border-box; border-radius: 12px; border: 1px solid #E2E2E2; background-color: #F2F2F2; }
.wordsPronounce .selectWord .langBtn { width: 62px; height: 60px; display: flex; align-items: center; justify-content: center; color: #6C6C6C; font-size: 33px; font-family: "GodoB";
    padding: 10px 20px; box-sizing: border-box; border-radius: 12px; background-color: #B9B9B9; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.25) inset, 0 3px 0 0 rgba(255, 255, 255, 0.25) inset; cursor: pointer; }
.wordsPronounce .selectWord .langBtn:hover { position: relative; background-color: #E2E2E2;box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.25) inset, 0 3px 0 0 rgba(255, 255, 255, 0.25) inset; }
.wordsPronounce .selectWord .langBtn.on { color: #fff; background-color: #EA8715; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.25) inset, 0 3px 0 0 rgba(255, 255, 255, 0.25) inset;
    text-shadow: 1px 0px 0px #b56911, 0px 1px 0px #b56911, -1px 0px 0px #b56911, 0px -1px 0px #b56911, 1px 1px 0px #b56911, -1px 1px 0px #b56911, -1px -1px 0px #b56911, 1px -1px 0px #b56911,
    2px 0px 0px #b56911, 0px 2px 0px #b56911, -2px 0px 0px #b56911, 0px -2px 0px #b56911, 2px 2px 0px #b56911, -2px 2px 0px #b56911, -2px -2px 0px #b56911, 2px -2px 0px #b56911;
}
.wordsPronounce .selectWord .langBtn.english { margin-bottom: 8px; }
.wordsPronounce .selectWord .langBtn:hover:after { position: absolute; top: 50%; transform: translateY(-50%); left: 71px; display: flex; justify-content: center;
    content: '단어 보기'; width: 118px; height: 51px; font-size: 24px; color: #fff; font-family: "GodoM"; letter-spacing: -0.48px; white-space: nowrap; border-radius: 10px;
     padding: 12px 10px 10px 10px; box-sizing: border-box; text-shadow: none; background-color: #623021; }
.wordsPronounce .selectWord .langBtn.korean:hover:after { content: '뜻 보기'; }

.wordsPronounce .selectWord .langBtn.english.on:hover:after { content: '단어 가리기'; width: 150px; }
.wordsPronounce .selectWord .langBtn.korean.on:hover:after { content: '뜻 가리기'; width: 130px; }

.wordsPronounce .selectWord .langBtn:hover::before { content: ""; position: absolute; left: 66px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 6px solid #623021; }

/*재생정지 버튼*/
.wordsPronounce .playBtnArea { position: absolute; top: 30px; right: 56px; display: flex; align-items: center; justify-content: center; gap: 10px;
    background-color: #F2F2F2; border-radius: 60px; border: 1px solid #E2E2E2; padding: 10px; box-sizing:;}
.wordsPronounce .playBtnArea .btnPlay { width: 230px; height: 70px; background-image: url("../images/pronouncePlay.png"); background-repeat: no-repeat; cursor: pointer; }
.wordsPronounce .playBtnArea .btnStop { width: 75px; height: 70px; background-image: url("../images/pronounceStop.png"); background-repeat: no-repeat; cursor: pointer; }
.wordsPronounce .playBtnArea .btnPlay:hover { background-image: url("../images/pronouncePlay_hover.png"); }
.wordsPronounce .playBtnArea .btnStop:hover { background-image: url("../images/pronounceStop_hover.png"); }
.wordsPronounce .playBtnArea .btnPlay.pause { background-image: url("../images/pronouncePause.png"); }
.wordsPronounce .playBtnArea .btnPlay.pause:hover { background-image: url("../images/pronouncePause_hover.png"); }
.wordsPronounce .prevBtn.dis { background-image: url("../images/prevBtn_dis.png"); display: none; }
.wordsPronounce .nextBtn.dis { background-image: url("../images/nextBtn_dis.png"); display: none; }
.wordsPronounce .prevBtn.noneClick { background-image: url("../images/prevBtn_dis.png"); pointer-events: none; }
.wordsPronounce .nextBtn.noneClick { background-image: url("../images/nextBtn_dis.png"); pointer-events: none; }


/* 퀴즈 완료시 dot 체크표시 */
.wordsPronounce .dot.check { background: url("../images/check_dot.png") center center no-repeat; width: 34px; height: 34px; }
.wordsPronounce .dot.check.on { border: 5px solid #FFB969 !important; }


/* 슬라이드 컨테이너(simpleSlide) */
.slideContainer { width: 100%; height: 100%; }
/*이전 다음 버튼*/
.navi { position: absolute; top: 50%; transform: translateY(-50%); background-repeat: no-repeat; cursor: pointer; }

.prevBtn { left: 0; width: 58px; height: 92px; background-image: url("../images/prevBtn.png"); }
.nextBtn { right: 0; width: 58px; height: 92px; background-image: url("../images/nextBtn.png"); }
.prevBtn:hover { background-image: url("../images/prevBtn_hover.png"); }
.nextBtn:hover { background-image: url("../images/nextBtn_hover.png"); }
.prevBtn.dis { background-image: url("../images/prevBtn_dis.png"); }
.nextBtn.dis { background-image: url("../images/nextBtn_dis.png"); }


/*페이지이동버튼*/
.pagination { position: absolute; top: 30px; left: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50px; background: rgba(0, 0, 0, 0.10); padding: 3px; box-sizing: border-box; }
.pagination .dots { display: flex; align-items: center; justify-content: center; gap: 12px; }
.pagination .dots .dot { width: 24px; height: 24px; background-color: rgba(0, 0, 0, 0.10); border: 5px solid #F0F0F0; border-radius: 50%; cursor: pointer; }
.pagination .dots .dot.on, .wordsPronounce .pagination .dots .dot:hover { background-color: #FFB969; border-color: #FFF; }

.pagination .dots.number .dot { width: 60px; height: 60px; box-sizing: border-box; position: relative; background-color: #E2E2E2; border: 5px solid #D2D2D4; }
.pagination .dots.number .dot.on { background-color: #E0522E; border-color: #fff;}


.pagination .dots.number .dot::after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 31px; font-family: "Jalnan"; color: #747474; }
.pagination .dots.number .dot.on::after { color: #fff; }
.pagination .dots.number .dot:first-of-type::after { content: "1"; }
.pagination .dots.number .dot:nth-of-type(2)::after { content: "2"; }
.pagination .dots.number .dot:nth-of-type(3)::after { content: "3"; }
.pagination .dots.number .dot:nth-of-type(4)::after { content: "4"; }
.pagination .dots.number .dot:nth-of-type(5)::after { content: "5"; }
.pagination .dots.number .dot:nth-of-type(6)::after { content: "6"; }


/*
    *** dragLineAndWrite
 */
.dragLineAndWrite .btnTabWrap { position: absolute; top: 332px; right: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 40px; background-color: #DFDFD2; padding: 12px; box-sizing: border-box; }
.dragLineAndWrite .writeArea { display: flex; align-items: center; position: absolute; bottom: 0; left: 0; width: 100%; height: 321px; background-color: #F9F9F0; padding-left: 20px; box-sizing: border-box; }


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

/*
    *** readAndChoose
 */
.readAndChoose .textBox { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 1548px;
    border-radius: 30px; background-color: #F6F5EE; padding: 20px 70px; box-sizing: border-box; }
.readAndChoose .textBox .flexArea { display: flex; align-items: center; gap: 30px; margin-bottom: 40px; }
.readAndChoose .textBox .flexArea:nth-last-child(1) { margin-bottom: 0; }
.readAndChoose .textBox .bullet { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; font-size: 34px; color: #fff; font-family: "HallymGoB";
    border-radius: 20px; background-color: #8F8072; box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.10) inset; }
.readAndChoose .textBox .text { font-size: 66px; font-family: "HallymGoB"; letter-spacing: -1.056px; cursor: pointer; }
.readAndChoose .textBox .text:hover { color: #0048FF; }

.readAndChoose .correctWrap .num { position: absolute; left: 13px; top: -1px; width: 62px; height: 62px; font-size: 33px; display: flex; align-items: center; justify-content: center;
    color: #E2792F; font-family: "Jalnan"; border-radius: 50%; background-color: #E5DFD3; border: 2px solid rgba(0, 0, 0, 0.04);
    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; z-index: 5;
}
.readAndChoose .correctWrap .correctItem:hover .num {
    background-color: #28C3F2;
    border-color: #28C3F2;
    text-shadow: 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;
    color: #fff;
}
.readAndChoose .correctWrap .correctItem:hover > img {
    transform: scale(1.05);
    transform-origin: center center;
    transition: all 0.3s ease-out;
}

.readAndChoose .correctWrap .correctItem { position: absolute; cursor: pointer; }
.readAndChoose .correctWrap .correctItem.end .num {
    background-color: #0048FF;
    border-color: #053DCA;
    color: #fff;
    text-shadow: 1px 0px 0px #0033b3, 0px 1px 0px #0033b3, -1px 0px 0px #0033b3, 0px -1px 0px #0033b3, 1px 1px 0px #0033b3, -1px 1px 0px #0033b3, -1px -1px 0px #0033b3, 1px -1px 0px #0033b3, 2px 0px 0px #0033b3, 0px 2px 0px #0033b3, -2px 0px 0px #0033b3, 0px -2px 0px #0033b3, 2px 2px 0px #0033b3, -2px 2px 0px #0033b3, -2px -2px 0px #0033b3, 2px -2px 0px #0033b3;
}
.readAndChoose .correctWrap .correctItem.correct:before,
.readAndChoose .correctWrap .correctItem.end:before{ content: ''; position: absolute; top: 46%; left: 0; transform: translateY(-50%); width: 179px; height: 179px;
    background-repeat: no-repeat; background-image: url("../images/readAndCheck_oItem.png"); z-index: 5}


/*
    *** 그림보고 단어 쓰고 정답체크하기
 */
.pictureWrap { width: 100%; height: calc(100% - 85px); display: flex; flex-direction: column; align-items: flex-start; margin-left: 80px; }
.pictureWrap .pictureBox { border-bottom: 2px solid transparent; border-image: repeating-linear-gradient( 90deg, #D2D2D4 0 8px, transparent 6px 16px) 1; padding: 20px 0; display: flex; align-items: center; width: 70%; }
.pictureWrap .pictureBox.noBorder { border: none; }
.pictureWrap .pictureBox .num { width: 62px; height: 62px; font-size: 33px; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
color: #fff; font-family: "Jalnan"; border-radius: 50%; background-color: #7B7EA3; border: 4px solid #686B8B;
text-shadow: 1px 0px 0px #686B8B, 0px 1px 0px #686B8B, -1px 0px 0px #686B8B, 0px -1px 0px #686B8B, 1px 1px 0px #686B8B, -1px 1px 0px #686B8B, -1px -1px 0px #686B8B, 1px -1px 0px #686B8B,
2px 0px 0px #686B8B, 0px 2px 0px #686B8B, -2px 0px 0px #686B8B, 0px -2px 0px #686B8B, 2px 2px 0px #686B8B, -2px 2px 0px #686B8B, -2px -2px 0px #686B8B, 2px -2px 0px #686B8B; margin-right: 18px; }

.pictureWrap .pictureBox .num.orange { background-color: #E5DFD3; border-color: #DCD6CA; color: #E2792F;
    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;
}


.pictureWrap .picture {position: relative;}
.pictureWrap .hint { background: url("../images/hint.png") center center no-repeat; width: 84px; height: 54px; position: absolute; bottom: 0px; right: -60px; cursor: pointer; }
.pictureWrap .hint:hover { background: url("../images/hint_hover.png") center center no-repeat; }
.pictureWrap .hint.on { background: url("../images/hint_hover.png") center center no-repeat; }
.pictureWrap .hintBox { display: none; background-color: #62B5F9; border: 5px solid #2C93E9; border-radius: 16px; gap: 7px; position: absolute; left: 120%; top: 50%; transform: translateY(-50%); padding: 12px; z-index: 2; cursor: default; }
.pictureWrap .hintBox.on { display: flex; }
.pictureWrap .hintBox::after { content: ""; position: absolute; background: url("../images/polygon.png") center center no-repeat; width: 15px; height: 20px; top: 50%; left: -15px; transform: translateY(-50%); }
.pictureWrap .hintBox span.cover { background: url("../images/hint_cover.png") center center no-repeat; width: 74px; height: 68px; }
.pictureWrap .hintBox span { display: inline-block; cursor: pointer; width: 74px; height: 68px; }
.pictureWrap .hintBox span p { font-family: "HallymGoB"; font-size: 40px; text-align: center; line-height: 68px; display: none; width: 74px; height: 68px; border: 2px solid #2C93E9; border-radius: 12px; background-color: #fff; box-sizing: border-box; }
.pictureWrap .hintBox span p.on { display: inline-block; }
.pictureWrap .hint .hintClose { background: url("../images/hint_close.png") center center no-repeat; width: 46px; height: 46px; position: absolute; top: -25px; right: -25px; cursor: pointer; z-index: 4; }

.pictureWrap .textArea { margin-left: 134px; }
.pictureWrap .textArea .text { display: flex; font-size: 60px; font-family: "HallymGoB"; gap: 18px; letter-spacing: -1.056px; align-items: center; }
.pictureWrap .textArea .text.audioClick { cursor: pointer; }
.pictureWrap .textArea .text .inputArea { position: relative; width: 260px; height: 100px; }
.pictureWrap .textArea .text .inputArea:before { content: ''; width: 100%; position: absolute; bottom: 10px; left: 0; border-bottom: 3px solid #000; box-sizing: border-box; }
.pictureWrap .textArea .text .inputArea input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 66px; font-family: "HallymGoB"; background-color: transparent; letter-spacing: -1.056px; }
.pictureWrap .textArea .text .answer { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); display: none; letter-spacing: -1.056px; color: #0048FF; text-align: center; font-size: 66px; }

.pictureWrap .cl_btnAns { position: absolute; right: 50px; bottom: 40px; }

.pictureWrap .checkAnswer { background: url("../images/individualAns.png") center center no-repeat; width: 78px; height: 78px; cursor: pointer; }
.pictureWrap .checkAnswer:hover { background: url("../images/individualAns_hover.png") center center no-repeat; }
.pictureWrap .checkAnswer.re { background: url("../images/individualRe.png") center center no-repeat; width: 78px; height: 78px; cursor: pointer; }
.pictureWrap .checkAnswer.re:hover { background: url("../images/individualRe_hover.png") center center no-repeat; }


.pictureWrap .list .inputArea { background: url("../images/line_bg.png") center center; position: relative; height: 84px; }

/*
    *** tip box
 */
.tipBoxWrap { position: absolute; top: 20px; right: 20px; }
.tipBoxWrap.leftOver {left:6px; right:auto; top:-72px;}
.tipBoxWrap .tipBox { background: url("../images/tip.png") center center no-repeat; width: 148px; height: 52px; }
.tipBoxWrap .tipBox:hover { background: url("../images/tip_hover.png") center center no-repeat; cursor: pointer; }
.tipBoxWrap.active .tipBox { background: url("../images/tip_active.png") center center no-repeat; }

.tipBoxWrap .tipText { display: none; font-size: 30px; font-family: "NanumGoB"; word-break: keep-all; position: absolute; bottom: -130px; left: -360px; background-color: #fff; border: 3px solid #3276F3; border-radius: 16px; padding: 16px 20px; z-index: 999; }
.tipBoxWrap.active .tipText { display: block; }
.tipBoxWrap .tipClose { background: url("../images/tip_close.png") center center no-repeat; width: 48px; height: 48px; position: absolute; top: -20px; right: -20px; cursor: pointer; }

.tipBoxWrap .tipText {top: 78px; left:0; bottom:auto;}
.tipBoxWrap .tipText .bulletList > li {position:relative; padding-left:27px; white-space: nowrap; margin-bottom:10px;}
.tipBoxWrap .tipText .bulletList > li:last-child {margin-bottom:0;}
.tipBoxWrap .tipText .bulletList > li:before {content:""; position:absolute; top:10px; left:0; width:12px; height:12px; border-radius:50%; background-color:#0048FF;}

/*
    *** 스스로 평가 체크 영역
 */
.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"); }


/*
    *** true false 체크  checkTrueFalse
 */
.checkTrueFalse .checkList {  padding: 0 85px; box-sizing: border-box; }
.checkTrueFalse .checkList .list { display: flex; align-items: center; justify-content: space-between; padding: 46px; box-sizing: border-box; border-bottom: 2px solid transparent; border-image: repeating-linear-gradient( 90deg, #D2D2D4 0 8px, transparent 6px 16px) 1; }
.checkTrueFalse .checkList .list.twoLine { align-items: flex-start;}
.checkTrueFalse .checkList .list:nth-last-child(1) { border-bottom: 0; }
.checkTrueFalse .checkList .list .textArea { position: relative; display: flex; align-items: center; justify-content: center; gap: 39px; }
.checkTrueFalse .checkList .list .textArea.twoLine { align-items: flex-start;}
.checkTrueFalse .checkList .list .textArea.twoLine .num { margin-top: 15px;}
.checkTrueFalse .checkList .list .checkArea { display: flex; align-items: center; justify-content: center; gap: 80px; }
.checkTrueFalse .checkList .list .num { width: 62px; height: 62px; font-size: 33px; color: #fff; font-family: "Jalnan"; display: flex; align-items: center; justify-content: center;
    background-color: #7B7EA3; border: 4px solid #686B8B; box-sizing: border-box; border-radius: 50%;
    text-shadow: 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; flex-shrink: 0;
}
.checkTrueFalse .checkList .list .text { font-size: 66px; font-family: "HallymGoB"; letter-spacing: -1.056px; }
.checkTrueFalse .checkList .list .text.on .line { text-decoration: line-through; text-decoration-color: #E0522E; }
.checkTrueFalse .checkList .list .editText { display: none; position: absolute; bottom: -40px; right: 130px; font-size: 40px; font-family: "HallymGoB"; color: #E0522E; }
.checkTrueFalse .checkList .check { display: flex; align-items: center; justify-content: center; gap: 20px; font-size: 70px; color: #9070AF; font-family: "Jalnan"; }
.checkTrueFalse .checkList .check .checkBox { display: inline-flex; width: 68px; height: 62px; border: 4px solid #606060; border-radius: 15px; box-sizing: border-box; cursor: pointer; }
.checkTrueFalse .checkList .check.on .checkBox { position: relative; border-color: #606060; }
.checkTrueFalse .checkList .check.on .checkBox:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 49px; height: 38px;
    background-image: url("../images/trueFalseCheckIcon_none.png"); }

.checkTrueFalse.result .checkList .check.on .checkBox { position: relative; border-color: #0048FF; }
.checkTrueFalse.result .checkList .check.on .checkBox:before { background-image: url("../images/trueFalseCheckIcon.png"); }

.checkTrueFalse .checkList .check[data-correct-check].eachComp .checkBox { position: relative; border-color: #0048FF; }
.checkTrueFalse .checkList .check[data-correct-check].eachComp .checkBox:before { background-image: url("../images/trueFalseCheckIcon.png"); }

/*
    *** writeInput 쓰기
 */
/* 기존 font 40px -> 46px 로 바꿈 1/6*/
.writeInput input { position: absolute; top: 0; left: 0; text-align: center; width: 100%; height: 100%; font-size: 46px; font-family: "NanumGoB"; background-color: transparent; }
.writeInput textarea {position: absolute;top: 0;left: 0;text-align: center;width: 100%; /*    height: 100%;*/font-size: 46px;font-family: "NanumGoB";background-color: transparent;resize:none;overflow: auto;       /* 스크롤 기능은 유지 */scrollbar-width: none; /* Firefox용: 스크롤바 숨김 */-ms-overflow-style: none; /* IE, Edge용: 스크롤바 숨김 */}
.writeInput textarea::-webkit-scrollbar {display: none;}

.writeInput .answer { position: absolute; top: 0; left: 0; display: none; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 46px; font-family: "NanumGoB"; color: #0048FF; }

.writeInput .answer.on,
.inputArea .answer.on { display: flex !important; }

.text[data-audio] { cursor: pointer; }
.text[data-audio].on,
.text[data-inputAudio].on { color: #0048FF; }
.text[data-inputAudio]:has(.answer.on) { cursor: pointer; }
.text[data-inputAudio]:has(.answer.on):hover { color: #0048FF; }

.text[data-audio].noneClick,
.text[data-inputAudio].noneClick {pointer-events: none;}

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

/*
    *** 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: 90px 111px; }
.characterArea { display: flex; align-items: center; margin-bottom: 50px; }
.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: 70px 0 0 76px; }
.numContentTextArea.scroll { padding: 50px 12px 50px 76px; }
.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: 44px; right: 40px; 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 140px 70px 90px; box-sizing: border-box; background-image: url("../images/bookPopupBg.png"); background-repeat: no-repeat; background-size: cover;}
.bookPopup.scrollType { padding-right: 40px;}
.bookPopup.scrollType .mCSB_inside>.mCSB_container { margin-right: 130px;}
.bookPopup.scrollType .mainTitleBox { margin: 0 0 40px 0;}

.bookPopup .mainTitleBox { position: relative; display: flex; align-items: center; justify-content: center; width: 1540px; height: 113px; border-radius: 30px; border: 3px solid #B6EAD5;
    background: #E5FEF4; padding: 40px 60px; box-sizing: border-box; margin: 0 auto; margin-bottom: 40px; }
.bookPopup .mainTitleBox .mainTitle { font-size: 54px; font-family: "NanumGoB"; }
.bookPopup .mainTitleBox .title { position: absolute; left: 40px; top: -46px; font-size: 28px; color: #369C73; font-family: "NanumGoB";
    border-radius: 60px 60px 0px 0px; background: #B6EAD5; padding: 6px 40px; box-sizing: border-box; }
.bookPopup .text { text-indent: 60px; color: #000; font-family: "NanumGoB"; font-size: 54px; line-height: 92px; letter-spacing: -0.768px; text-align: justify;  }
.bookPopup .bookTextArea.text { height: 620px;}
.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: 12px 12px 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 .buttonArea.dimmed { pointer-events: none;}
.scriptArea .scriptHeader .scriptPlay { position: static !important; background: url("../images/scriptPlayBtn.png")no-repeat; width: 82px; height: 83px; cursor: pointer; }
.scriptArea .scriptHeader .scriptPlay:hover { background: url("../images/scriptPlayBtn_hover.png"); }
.scriptArea .scriptHeader .scriptPlay.pause { background: url("../images/scriptPauseBtn.png")no-repeat; }
.scriptArea .scriptHeader .scriptPlay.pause:hover { background: url("../images/scriptPauseBtn_hover.png") !important; }
.scriptArea .scriptHeader .scriptStop { position: static !important; background: url("../images/scriptStopBtn.png")no-repeat; width: 82px; height: 83px; margin-right: 20px; cursor: pointer; }
.scriptArea .scriptHeader .scriptStop:hover { background: url("../images/scriptStopBtn_hover.png"); }

/*.scriptContent { padding: 30px 20px 10px 71px; height: 670px; }*/
.mainContentBox .cl_page .scriptContent { padding: 30px 20px 30px 71px; height: 750px; }

.mainContentBox .cl_page .scriptContent .mCSB_container,
.mainContentBox .cl_page .scriptContent .scriptFlex,
.mainContentBox .cl_page .talkContent .scriptFlex { display: inline-flex; flex-direction: column; align-items: flex-start; }

.scriptContent .sceneTitle { position: relative; color: #4438B4; font-size: 36px; font-family: "Jalnan"; padding-top: 10px; box-sizing: border-box; margin-bottom: 50px; }
.scriptContent .sceneTitle:after { position: absolute; top: 0px; left: 120px; 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.num5:after { content: '5'; }
.scriptContent .sceneTitle.num6:after { content: '6'; }
.scriptContent .sceneTitle.num7:after { content: '7'; }

.scriptContent .sceneTitle.noneText { height: 64px; margin-bottom: 30px; }
.scriptContent .sceneTitle.noneText:after { justify-content: flex-start; left: 0; width: 83px; height: 64px; box-sizing: border-box;;
    padding-left: 27px; background-image: url("../images/scriptBalloon_noneText.png");}

.scriptContent .charSpeechContent { display: inline-flex; flex-direction: column;}
.scriptContent .scriptBalloonArea { display: inline-flex; gap: 46px; align-items: flex-start; margin-bottom: 46px; cursor: pointer; }
.scriptContent .scriptBalloonArea:last-child { margin-bottom: 0;}
.scriptContent .scriptBalloonArea .balloonScriptArea { flex: 1; }
.scriptContent .scriptBalloonArea .balloonScriptArea.speech.play .cl_balloon.script { color: #0048FF; }
.scriptContent .scriptBalloonArea .scriptSubTitle { display: none; color: #3DA291; font-size: 50px; font-family: "NanumGoB"; padding-left: 48px; box-sizing: border-box; margin-top: 6px; }

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

.scriptContent .scriptBalloonArea.play .cl_balloon { color: #0048FF; }
.scriptContent .mCSB_scrollTools { margin-top: 47px; height: 615px; }
.scriptBalloonArea.play .cl_character { border-color: #0048FF; }


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


/*
    *** correctSongQuiz 퀴즈
*/
/*노래영역*/
.correctSongQuiz { display: flex; }
.correctSongQuiz .songWrap { width: 800px; padding: 20px 35px 20px 52px; box-sizing: border-box; }
.correctSongQuiz .songWrap .btnArea { position: relative;  border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.80); padding: 18px 33px; display: inline-flex; align-items: center; justify-content: center; gap: 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(33, 33, 33, 0.70) 68%, rgba(54, 54, 54, 0.70) 100%); }
.correctSongQuiz .songWrap .sectionBtnArea { position: absolute; top: 32px; left: 585px; display: flex; align-items: center; }
.correctSongQuiz .songWrap .sectionBtnArea .btnSection { font-size: 31px; color: #5C5C5D; font-family: "Jalnan"; box-sizing: border-box; cursor: pointer;
    padding: 10px 20px; border-radius: 20px 0 0 20px; background-color: #CBC9D2; box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset; letter-spacing: -0.31px; }
.correctSongQuiz .songWrap .sectionBtnArea .btnSection.section2 { border-radius: 0 20px 20px 0; }
.correctSongQuiz .songWrap .sectionBtnArea .btnSection:hover { background-color: #ECECEF; box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset; }
.correctSongQuiz .songWrap .sectionBtnArea .btnSection.on { color: #fff; background-color: #8360EF; box-shadow: 0 2px 0 0 rgba(255, 255, 255, 0.25) inset, 0 -2px 0 0 rgba(0, 0, 0, 0.25) inset; }

.correctSongQuiz .songWrap .lyricsArea { height: 640px; padding-top: 8px; }
.correctSongQuiz .songWrap .lyricsArea .lyrics { color: #000; font-size: 54px; line-height: 150%; letter-spacing: -0.54px; font-family: "HallymGoB"; padding-right: 40px;; }
/*.correctSongQuiz .songWrap .lyricsArea .lyrics:hover,*/
.correctSongQuiz .songWrap .lyricsArea .lyrics.play { color: #0048FF; }

/*ox퀴즈영역*/
.correctSongQuiz .correctWrap { position: relative; flex: 1; background-color: #FFF7E2; border-radius: 0 12px 12px 0; }
.correctSongQuiz .correctItem { position: absolute; background-repeat: no-repeat; cursor: pointer; }
.correctSongQuiz .correctWrap .correctItem.correct:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 179px; height: 179px; background-image: url("../images/oItem.png"); }
.correctSongQuiz .correctWrap .correctItem.end:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 179px; height: 179px; background-image: url("../images/oItem.png"); }
/*
    *** 드롭타운퀴즈
*/
.selectDropDownArea .cl_btnAns { position: absolute; right: 40px; bottom: 44px; }

/*
    *********************************** 말풍선대사 **********************************
*/
.balloonSpeech .talkBtnArea { display: flex; align-items: center; gap: 8px; position: absolute; top: 126px; left: 20px; }
.balloonSpeech .charTabBtn { position: absolute; top: 230px; right: 0; display: flex; align-items: center; gap: 12px;
    padding: 12px; box-sizing: border-box; border-radius: 100px 0 0 100px; background: rgba(255, 255, 255, 0.40); }
.balloonSpeech .playBtnArea { width: 168px; height: 84px; position: absolute; top: 126px; right: 20px; display: flex; align-items: center; justify-content: center; border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.80); background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(33, 33, 33, 0.70) 68%, rgba(54, 54, 54, 0.70) 100%); }
.balloonSpeech .playBtnArea.dimmed:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); border-radius: 30px; z-index: 2; }
.balloonSpeech .playBtnArea .cl_btnListenSong, .balloonSpeech .playBtnArea .cl_btnStopSong { position: static; }
.balloonSpeech .playBtnArea .btnArea {  display: flex; align-items: center; justify-content: center; gap: 24px; }

.balloonSpeech .charSpeechContent .bayChar { position: absolute; top: 487px; left: 653px; }
.balloonSpeech .charSpeechContent .char { position: absolute; }
.balloonSpeech .charSpeechContent .balloon { position: absolute; font-size: 54px; font-family: "HallymGoB"; letter-spacing: -0.54px;
    padding: 12px 24px; box-sizing: border-box; border-radius: 12px; border: 2px solid #242424; background-color: #FFF; z-index: 2; }
.balloonSpeech .charSpeechContent .balloon.left:after { content: ''; width: 43px; height: 40px; position: absolute; bottom: -35.5px; right: 40px;
    background-image: url("../images/balloonBefore_type1_new.png"); z-index: 0; }
.balloonSpeech .charSpeechContent .balloon.right:after { content: ''; width: 43px; height: 40px; position: absolute; bottom: -35.5px; left: 24px;
    background-image: url("../images/balloonBefore_type2_new.png"); z-index: 0; }
.balloonSpeech .charSpeechContent .balloon.play { color: #0048FF; }
.balloonSpeech .charSpeechContent .balloon.repeating { color: #E0522E; }

.balloonSpeech .charSpeechContent .balloon .repeatBalloon { position: absolute; top: -33px;left: -21px; z-index: 99; }

/*
    *********************************** readAndSpeak **********************************
*/
.readAndSpeak .listenBtnArea { display: flex; align-items: center; gap: 14px; position: absolute; top: 10px; left: 10px; }
.readAndSpeak .playBtnArea { position: absolute; top: 10px; right: 10px; padding: 18px 33px;
    border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.80); background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(33, 33, 33, 0.70) 68%, rgba(54, 54, 54, 0.70) 100%); }
.readAndSpeak .playBtnArea.dimmed:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); border-radius: 30px; z-index: 10; }
.readAndSpeak .playBtnArea .btnArea {  display: flex; align-items: center; justify-content: center; gap: 24px; }

/* readAndSpeak 기본 재생 정지버튼만 있는경우 */
.readAndSpeak .playBtnArea.basic { padding: 18px 24px; }
.readAndSpeak .playBtnArea.basic .cl_btnListenSong{ left: 24px;}
.readAndSpeak .playBtnArea.basic .cl_btnStopSong{ left: 96px;}


.readAndSpeak .charSpeechContent .balloon { position: absolute; font-size: 54px; font-family: "HallymGoB"; letter-spacing: -0.54px;
    padding: 12px 24px; box-sizing: border-box; border-radius: 12px; border: 2px solid #242424; background-color: #FFF; }
.readAndSpeak .charSpeechContent .balloon.left:after { content: ''; width: 43px; height: 40px; position: absolute; bottom: -35.5px; right: 40px;
    background-image: url("../images/balloonBefore_type1_new.png"); z-index: 1; }
.readAndSpeak .charSpeechContent .balloon.right:after { content: ''; width: 43px; height: 40px; position: absolute; bottom: -35.5px; left: 24px;
    background-image: url("../images/balloonBefore_type2_new.png"); z-index: 1; }

.readAndSpeak .charSpeechContent .balloon.center:after { left: 50% !important; transform: translateX(-50%) !important; }
.readAndSpeak .charSpeechContent .balloon.play { color: #0048FF !important; }
.readAndSpeak .charSpeechContent .balloon.play > * { color: #0048FF !important;;}
.readAndSpeak .charSpeechContent .balloon.repeating { color: #E0522E !important; }
.readAndSpeak .charSpeechContent .balloon.repeating > * { color: #E0522E !important; }
.readAndSpeak .charSpeechContent .balloon .repeatBalloon { position: absolute; top: -33px;left: -21px;}


    /*
        *********************************** readAndSpeakChar **********************************
    */
.readAndSpeakChar .charTabArea { position: absolute; top: 35px; left: 30px; width: 248px; height: 797px; display: flex; flex-direction: column; align-items: center; gap: 40px;
    padding: 40px 40px 0 40px; border-radius: 30px; background: rgba(39, 178, 229, 0.10); box-sizing: border-box; }
.readAndSpeakChar .listenBtnArea { position: absolute; top: 10px; left: 10px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.readAndSpeakChar .playBtnArea { height: 84px; position: absolute; top: 10px; right: 10px; display: flex; align-items: center; justify-content: center; gap: 24px; border-radius: 30px;
    border-radius: 30px; border: 1px solid rgba(0, 0, 0, 0.80); background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(33, 33, 33, 0.70) 68%, rgba(54, 54, 54, 0.70) 100%); padding: 0 30px;  }

.readAndSpeakChar .playBtnArea .btnArea { display: flex; gap: 20px; justify-content: center; align-items: center; }

.readAndSpeakChar .talkContent { position: absolute; top: 142px; left: 320px; width: 1467px; height: 649px; padding: 27px 0 0 0; box-sizing: border-box; }
.readAndSpeakChar .talkContent .charSpeechContent { display: none; margin-left: 70px; padding-top: 15px;}
.readAndSpeakChar .talkContent .char { width: 125px; height: 124px; background-repeat: no-repeat; }
.readAndSpeakChar .talkContent .charSpeechContent .balloon { display: inline-flex; align-items: center; gap: 32px; margin-bottom: 30px; }
.readAndSpeakChar .talkContent .charSpeechContent .balloon:nth-last-child(1) { margin-bottom: 0; }
.readAndSpeakChar .talkContent .charSpeechContent .balloon .text { position: relative; display: flex; align-items: flex-start; justify-content: center; font-size: 54px; font-family: "HallymGoB";
    border-radius: 12px; background-color: #FFF; padding: 16px 36px; box-sizing: border-box; cursor: pointer; }
.readAndSpeakChar .talkContent .charSpeechContent .balloon .text:after { content: ''; width: 15px; height: 22px; position: absolute; top: 50%; left: -13px; transform: translateY(-50%);
    background-image: url("../images/balloonBefore_type3.png"); z-index: 1; }

.readAndSpeakChar .talkContent .charSpeechContent .balloon .text.singleText:after {  display: none;}
.readAndSpeakChar .talkContent .charSpeechContent .speech.play .text { color: #0048FF; }
.readAndSpeakChar .talkContent .charSpeechContent .speech.play .text > * { color: #0048FF !important;;}
.readAndSpeakChar .playBtnArea.dimmed:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); border-radius: 30px; z-index: 3; }



.readAndSpeakChar .talkContent .charSpeechContent .balloon.repeating { color: #E0522E; }
.readAndSpeakChar .talkContent .charSpeechContent .balloon.repeating .text > * { color: #E0522E !important;; }
.readAndSpeakChar .talkContent .charSpeechContent .balloon .repeatBalloon { position: absolute; top: -33px;left: -21px;}

    /*
        *********************************** readAndSpeakChar(boxMode) **********************************
    */
.readAndSpeakChar.boxMode .talkContent { background: rgba(255, 255, 255, 0.80); width: 800px; max-height: 600px; position: absolute; top: 120px; left: 80px; border-radius: 24px; padding: 40px 20px 40px 0; }

.readAndSpeakChar.boxMode .talkContent .charSpeechContent .balloon { margin-bottom: 0; display: block; }
.readAndSpeakChar.boxMode .talkContent .charSpeechContent .balloon.speechTitle .text { display: block; font-family: "GeoramaEB"; font-size: 80px; color: #8B4723; padding: 0; }
.readAndSpeakChar.boxMode .talkContent .charSpeechContent .balloon.speechTitle.play .text { color: #0048FF }

.readAndSpeakChar.boxMode .talkContent .charSpeechContent .balloon .text { padding: 0; display: block; background-color: transparent; letter-spacing: -0.54px; }
.readAndSpeakChar.boxMode .speech .text p { font-size: 40px; font-family: "NanumGoB"; color: #3DA291; display: none; margin-top: 5px; letter-spacing: -0.64px; line-height: 130%; }
.readAndSpeakChar.boxMode .speech .text p.on { display: block }
.readAndSpeakChar.boxMode .speech .text p.active { display: block }


/*
    *********************************** wordsCorrectMatch **********************************
*/

.wordsCorrectMatch .selectWrap { position: absolute; top: 21px; left: 109px; width: 1590px; height: 725px; background-image: url("../images/wordsBox.png"); }
.wordsCorrectMatch .selectWrap .num { position: absolute; top: 11px; left: 103px; font-family: "Jalnan"; font-size: 35px; color: #fff; }
.wordsCorrectMatch .selectWrap .wordWrap .num { left: 623px; }
.wordsCorrectMatch .selectWrap .meanWrap .num { left: 1243px; }
.wordsCorrectMatch .selectWrap .title { position: absolute; top: 7px; left: 159px; font-size: 40px; font-family: "NanumGoB"; color: #fff; }
.wordsCorrectMatch .selectWrap .wordWrap .title { left: 679px; }
.wordsCorrectMatch .selectWrap .meanWrap .title { left: 1317px; }
/*음원, 단어, 뜻 매치 되는 부분*/
.wordsCorrectMatch .selectMatch { position: absolute; top: 92px; left: 50px; box-sizing: border-box; }
.wordsCorrectMatch .selectMatch .select { position: absolute; display: flex; align-items: center; justify-content: center; width: 450px; height: 100px; font-size: 46px; font-family: "HallymGoB";
    border-radius: 100px; border: 4px solid #F7ECD2; background-color: #FFF; box-sizing:border-box; cursor: pointer; }
.wordsCorrectMatch .selectMatch .select:nth-child(1) { top: 0; left: 0; }
.wordsCorrectMatch .selectMatch .select:nth-child(2) { top: 124px; left: 0; }
.wordsCorrectMatch .selectMatch .select:nth-child(3) { top: 248px; left: 0; }
.wordsCorrectMatch .selectMatch .select:nth-child(4) { top: 372px; left: 0; }
.wordsCorrectMatch .selectMatch .select:nth-child(5) { top: 496px; left: 0; }
.wordsCorrectMatch .selectMatch .select:hover { border: 6px solid #E0522E; }
.wordsCorrectMatch .selectMatch .select.correct { border: 6px solid #E0522E; }
.wordsCorrectMatch .selectMatch .select.wrong { animation: wrongAni 0.4s normal }


.wordsCorrectMatch .selectWrap .selectAudio .audio .audioIcon { width: 65px; height: 56px;  background-image: url("../images/wordAudioIcon.png"); background-position: center center; background-repeat: no-repeat;  }
.wordsCorrectMatch .selectWrap .selectAudio .audio:hover .audioIcon,
.wordsCorrectMatch .selectWrap .selectAudio .audio.correct .audioIcon{ background-image: url("../images/wordAudioIcon_hover.png"); }
.wordsCorrectMatch .selectWrap .selectWords { left: 470px; }
.wordsCorrectMatch .selectWrap .selectMean { left: 1090px; }
/*정답체크 확인*/
.wordsCorrectMatch .countWord { position: absolute; top: 14px; left: 30px; }
.wordsCorrectMatch .countWord .dots { display: flex; align-items: center; justify-content: center; gap: 6px; }
.wordsCorrectMatch .countWord .dots .dot { width: 43px; height: 43px; background-image: url("../images/wordCount.png"); }
.wordsCorrectMatch .countWord .dots .dot.on { background-image: url("../images/wordCount_on.png"); }

/*팝업*/
.wordsCorrectMatch .popupWrap { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background-color: rgba(0,0,0,0.6); }
.wordsCorrectMatch .popupWrap .popup { background: url("../images/word_popup.png") center center no-repeat; width: 704px; height: 201px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.wordsCorrectMatch .popupWrap.grade6 .popup { background: url("../images/word_popup_grade6.png") center center no-repeat; width: 704px; height: 212px; }
.wordsCorrectMatch .popupWrap.mean .popup { background: url("../images/word_popup_mean.png") center center no-repeat; width: 543px; }
.wordsCorrectMatch .popupWrap.grade6.mean .popup { background: url("../images/word_popup_mean_grade6.png") center center no-repeat; width: 543px; }
.wordsCorrectMatch .popupWrap .popup .popText { display: flex; justify-content: center; align-items: center; gap: 20px; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); width: 100%; }
.wordsCorrectMatch .popupWrap .popup .num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; font-size: 33px; color: #fff; font-family: "Jalnan";
    border-radius: 50%; border: 6px solid #9F592B; background-color: #9F592B; }
.wordsCorrectMatch .popupWrap .popup .text { font-size: 50px; color: #fff; font-family: "Jalnan"; }
.wordsCorrectMatch .popupWrap .popup .text .orange { color: #F8EC66; }

.wordsCorrectMatch .popupWrap .popup .close { position: absolute; top: -36px; right: -36px; width: 76px; height: 76px; background-image: url("../images/btnClosePop.png"); cursor: pointer; }
.wordsCorrectMatch .popupWrap .popup .close:hover { background-image: url("../images/btnClosePop_hover.png"); }

/*완료화면 팝업*/
.completePopup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.80); z-index: 21; display: none; }
.completePopup .imgArea { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.completePopup .btnRe { position: absolute; bottom: 210px; left: 50%; transform: translateX(-50%); width: 261px; height: 68px;
    background-image: url("../images/reBtn_big.png"); cursor: pointer; }
.completePopup .btnRe:hover { background-image: url("../images/reBtn_big_hover.png"); }

/*
    *********************************** 사다리타기 **********************************
*/

.ladderWrap .ladderTxtWrap { display: flex; justify-content: center; position: absolute; }
.ladderWrap .ladderTxtWrap .ladderTxt { position: relative; text-align: center; z-index: 4; }
.ladderWrap .ladderTxtWrap .ladderTxt .text { font-size: 34px; font-family: "HallymGoB"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; }
.ladderWrap .ladderTxtWrap .ladderTxt .checkAnswer { background: url("../images/individualAns.png") center center no-repeat; width: 78px; height: 78px; cursor: pointer; position: absolute; bottom: -15px; right: -50px; }
.ladderWrap .ladderTxtWrap .ladderTxt .checkAnswer.re { background: url("../images/individualRe.png") center center no-repeat; }
.ladderChoiceWrap { display: flex; justify-content: center; position: absolute; z-index: 5; }
.ladderChoice { background: url("../images/ladder_select_box.png") center center no-repeat; width: 80px; height: 72px; cursor: pointer; position: relative; }
.ladderChoice.on { background: url("../images/ladder_select_box_on.png") center center no-repeat;  }
.ladderChoice.active[data-answer="o"] { background: url("../images/ladder_answer_o.png") center center no-repeat; pointer-events: none; }
.ladderChoice.active[data-answer="x"] { background: url("../images/ladder_answer_x.png") center center no-repeat; pointer-events: none; }
.ladderChoice[data-user-answer="o"] { background: url("../images/ladder_answer_o.png") center center no-repeat; }
.ladderChoice[data-user-answer="x"] { background: url("../images/ladder_answer_x.png") center center no-repeat; }
.ladderLineWrap { position: absolute; z-index: 3; }
.ladderLine { position: absolute; display: none; }
.ladderLine.active { position: absolute; display: block; }

.ladderChoice.on .choiceBox { display: block; }
.choiceBox { background: url("../images/ladder_choice_box.png") center center no-repeat; width: 182px; height: 94px; position: absolute; display: none; }
.choiceInner { display: flex; align-items: center; height: 81%; width: 90%; margin-left: 10px; }
.choiceO { background: url("../images/choice_o.png") center center no-repeat; width: 42px; height: 42px; flex: 50%; }
.choiceX { background: url("../images/choice_x.png") center center no-repeat; width: 36px; height: 36px; flex: 50%; }

/*
    *********************************** 양자택일 **********************************
*/
.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; }


/*
    *********************************** 선긋기 페이지 **********************************
*/
.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:#000; 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: 358px; border-radius: 10px; border: 3px solid #E0CCFF; background: #F3E9FF; }
.eachPraise .praiseBox.blue { border: 3px solid #CBDCEF; background: #E6F1FF; }
.eachPraise .praiseBox.green { border: 3px solid #CBE5C7; background: #E4F7E2; }
.eachPraise .praiseBox.yellow { border: 3px solid #EAE3B9; background: #F9F6E1; }

.eachPraise .praiseBox .mainText { font-size: 66px; font-family: "NanumGoB"; padding: 50px 0 0 170px; box-sizing: border-box; }
.eachPraise .praiseBox .praiseInput { position: absolute; left: 170px; bottom: 72px; 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;}

/*
    *********************************** 한글자씩 맞추는 퀴즈(ready to write)  *************************************
*/
.wordQuiz .questionKr { width: 1018px; height: 113px; font-size: 72px; font-family: "PretendardB"; border-radius: 12px 12px 0 0; background-color: #E5FEF4; border-radius: 12px; border: 5px solid #DCF9ED; display: flex; align-items: center; justify-content: center;}
.wordQuiz .cl_btnAns { position: absolute; right: 50px; bottom: 40px; }
.wordQuiz .questionBoxWrap { display: flex; gap: 8px; }
.wordQuiz .questionBoxWrap .questionBox { width: 106px; height: 112px; background-color: #F2F2F2; border-radius: 12px; border: 5px solid #e6e6e6; font-size: 54px; font-family: "HallymGoB"; text-align: center; }
.wordQuiz .questionBoxWrap .questionBox p {display: none;}
.wordQuiz .questionBoxWrap .questionBox input[type=text] {width: 100%; height: 100%; border-radius: 12px; font-size: 54px; font-family: "HallymGoB"; text-align: center; display: none; }
.wordQuiz .questionBoxWrap .questionBox.quizAnswer { position: relative; background-color: #00C174; border: 5px solid #00C174;}
.wordQuiz .questionBoxWrap .questionBox.quizAnswer p { color: #fff; text-align: center; line-height: 112px; display: block; }
.wordQuiz .questionBoxWrap .questionBox.quizAnswer::before { position: absolute; content: ""; background: url("../images/check_answer.png") center center no-repeat; width: 37px; height: 37px; top: -30px; left: 50%; transform: translateX(-50%); }
.wordQuiz .questionBoxWrap .questionBox.on { background-color: #fff; border: 5px solid #00C174; position: relative; }
.wordQuiz .questionBoxWrap .questionBox:first-of-type input { display: block }
.wordQuiz .questionBoxWrap .questionBox.on::before { position: absolute; content: ""; background: url("../images/quiz_char.png") center center no-repeat; width: 70px; height: 70px; bottom: -90px; left: 50%; transform: translate(-50%); }
.wordQuiz.grade6 .questionBoxWrap .questionBox.on::before { position: absolute; content: ""; background: url("../images/quiz_char_grade6.png") center center no-repeat; width: 70px; height: 70px; bottom: -90px; left: 50%; transform: translate(-50%); }
.wordQuiz .questionBoxWrap .questionBox.on::after { position: absolute; content: ""; background: url("../images/up_arrow.png") center center no-repeat; width: 11px; height: 8px; bottom: -18px; left: 50%; transform: translate(-50%); }
.wordQuiz .questionBoxWrap .questionBox.on.wrong { animation: wrongAni 0.4s normal; }
.wordQuiz .questionBoxWrap .questionBox.on.wrong::before { background: url("../images/quiz_char_notanswer.png") center center no-repeat; }
.wordQuiz.grade6 .questionBoxWrap .questionBox.on.wrong::before { background: url("../images/quiz_char_notanswer_grade6.png") center center no-repeat; }
.wordQuiz .firework { display: none; width: 939px; height: 497px; position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); z-index: 30; }
.wordQuiz .firework.on { display: block; }
.wordQuiz .firework.on img { top: 130px; }


/* review 컨텐츠 유형별 게임  */

/*
 O 문제 맞추기 유형
*/
.reviewContents .borderBox { position: relative; ; border-radius: 12px; border: 6px solid #E9E9E9; box-sizing: border-box;}
.reviewContents .correctAns { position: relative; width: 1572px; height: 506px; margin: 0 auto;}
.reviewContents .correctAns .flexBox { height: 100%; display: flex; justify-content: center; align-items: center; gap: 156px;}
.reviewContents .correctAns .flexBox .correctItem { position: relative; display: flex; justify-content: center; align-items: center; width: 507px; height: 119px; font-size: 66px; color: #000; font-family: "HallymGoB"; border: 3px solid #E4E5D0; border-radius: 12px; background-color: #F6F8DD; margin-bottom: 52px; cursor: pointer;}
.reviewContents .correctAns .flexBox .correctItem:last-child { margin-bottom: 0;}
.reviewContents .correctAns .flexBox .correctItem:hover { background-color: #E9EDB6; border-color: #E9EDB6;}
.reviewContents .correctAns .flexBox .correctItem.correct { background-color: #F6F8DD; border-color: #E4E5D0;}
.reviewContents .correctAns .flexBox .correctItem.end { background-color: #F6F8DD; border-color: #E4E5D0; color: #0048FF}

.reviewContents .correctAns .flexBox .correctItem.correct:before { content: ''; position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 179px; height: 179px;
    background-repeat: no-repeat; background-image: url("../images/correctCheck_oItem.png"); }
.reviewContents .correctAns .flexBox .correctItem.end:before { content: ''; position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%); width: 179px; height: 179px;
    background-repeat: no-repeat; background-image: url("../images/correctCheck_oItem_end.png"); }

/* 그림 위에 투명 type */

.reviewContents .correctAns .flexBox .correctItem.transparent { border: none; background-color: transparent;}
.reviewContents .correctAns .flexBox .correctItem.transparent:hover { border: none; background-color: transparent;;}
.reviewContents .correctAns .flexBox .correctItem.transparent.correct { border: none; background-color: transparent;}
.reviewContents .correctAns .flexBox .correctItem.transparent.end { border: none; background-color: transparent;}




/*
  보기에서 찾아 input 텍스트 유형
*/

.reviewContents.bogiInput .contents{ position: relative; width: 1572px; height: 420px; margin: 0 auto;}
.reviewContents.bogiInput .bogiList { position: absolute; top: -63px; right: 36px; display: flex; align-items: center; gap: 44px; border-radius: 60px; border: 3px solid #E9E9E9; background-color: #EDF7FB; padding: 15px 60px 15px 20px; box-sizing: border-box;}
.reviewContents.bogiInput .bogiList .text { font-size: 40px; color: #000;font-family: "HallymGoB"; cursor: pointer;}
.reviewContents.bogiInput .bogiList .text:hover { color: #0048FF;}
.reviewContents.bogiInput .bogiList .text.on.playing  { color: #0048FF;}

.reviewContents.bogiInput .flexBox { height: 100%; display: flex; align-items: center; gap: 133px;}
.reviewContents.bogiInput .flexBox .imgArea { margin-left: 125px;}
.reviewContents.bogiInput .flexBox .textWrap .list { display: flex; gap: 30px;}

.reviewContents.bogiInput .flexBox .textWrap .list .text { display: flex; align-items: center; gap: 8px; font-size: 40px; color: #000; font-family: "HallymGoB"; cursor: pointer;}
.reviewContents.bogiInput .flexBox .textWrap .list.on .text,
.reviewContents.bogiInput .flexBox .textWrap .list.play .text { color: #0048FF}

.reviewContents.bogiInput .flexBox .textWrap .list .inputArea { position: relative; width: 247px; height: 60px; }
.reviewContents.bogiInput .flexBox .textWrap .list .inputArea:before { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; border-bottom: 3px solid #000; box-sizing: border-box; }
.reviewContents.bogiInput .flexBox .textWrap .list .inputArea input { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; height: 100%; font-size: 40px;  font-family: "HallymGoB"; background-color: transparent; letter-spacing: -1.056px; pointer-events: auto; }
.reviewContents.bogiInput .flexBox .textWrap .list .text .answer { width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: none; justify-content: center; align-items: center; letter-spacing: -1.056px; color: #0048FF; text-align: center;  font-family: "HallymGoB";}
.reviewContents.bogiInput .flexBox .textWrap .list .text .answer.noneColor { color: #000}
.reviewContents.bogiInput .flexBox .textWrap .list.play .text .answer.noneColor { color: #0048FF}

.reviewContents.bogiInput .playBtnArea{position: relative; top: 0; left: 0;display: none; width: 274px;height: 77px; background: transparent; border-radius: 0; border: none;}
.reviewContents.bogiInput .playBtnArea.dimmed:before { background-color: transparent; display: none;}
.reviewContents.bogiInput .playBtnArea .cl_btnListenSong{position: static; background-image: url(../images/btnListen.png) ;background-repeat: no-repeat;width: 274px;height: 77px;}
.reviewContents.bogiInput .playBtnArea .cl_btnListenSong.pause{ background-image: url(../images/btnExampleSound_pause.png) ;background-repeat: no-repeat;}

.reviewContents.bogiInput .playBtnArea .cl_btnListenSong:hover { background-image: url(../images/btnListen_hover.png) !important;}
.reviewContents.bogiInput .playBtnArea .cl_btnListenSong.pause:hover{ background-image: url(../images/btnExampleSound_pause_hover.png) !important;;background-repeat: no-repeat;}

.reviewContents.bogiInput .playBtnArea .cl_btnListenSong.playing { background-image: url(../images/btnExampleSound_ing.png) !important;;background-repeat: no-repeat;}
.reviewContents.bogiInput .playBtnArea .cl_btnListenSong.playing:hover{ background-image: url(../images/btnExampleSound_ing_hover.png) !important;;background-repeat: no-repeat;}

.reviewContents.bogiInput .playBtnArea .cl_btnStopSong { display: none;}




/*
  zoom팝업 & input 텍스트 오디오 유형
*/

.reviewContents .contentWrap { display: flex; justify-content: center; gap: 30px;}

.reviewContents .contentWrap .contents {position: relative; width: 430px; height: 506px; display: flex;justify-content: center; align-items: flex-end; padding-bottom: 25px; box-sizing: border-box;}
.reviewContents .contentWrap .contents .cl_zoomPopBtn { right: 16px; bottom: 16px;}
.reviewContents.zoomInputAud .inputAudArea { position: static; width: 1112px; height: 506px; padding: 10px 0 10px 50px; box-sizing: border-box; border-radius:12px; background-color: #F2F2F2;}
.reviewContents.zoomInputAud .inputAudArea .list { display: flex; gap: 20px; cursor: pointer;}
.reviewContents.zoomInputAud .inputAudArea .bullet {display: flex;align-items: center;justify-content: center;width: 56px;height: 56px;font-size: 34px;color: #fff;font-family: "HallymGoB";border-radius: 20px;background-color: #C4B2A1;box-shadow: 0 -3px 0 0 rgba(0, 0, 0, 0.10) inset; margin-top: 6px;}

.reviewContents.zoomInputAud .inputAudArea .list .text { display: flex; align-items: center; gap: 8px; font-size: 46px; color: #000; font-family: "HallymGoB";  cursor: pointer; pointer-events: none;}
/*.reviewContents.zoomInputAud .inputAudArea .list .text:hover { color: #0048FF}*/
.reviewContents.zoomInputAud .inputAudArea .list.on .text,
.reviewContents.zoomInputAud .inputAudArea .list.play .text { color: #0048FF}
.reviewContents.zoomInputAud .inputAudArea .list .inputArea { position: relative; width: 247px; height: 69px; }
.reviewContents.zoomInputAud .inputAudArea .list .inputArea:before { content: ''; width: 100%; position: absolute; bottom: 0; left: 0; border-bottom: 3px solid #000; box-sizing: border-box; }
.reviewContents.zoomInputAud .inputAudArea .list .inputArea input { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; text-align: center;
    width: 100%; height: 100%; font-size: 46px;  font-family: "HallymGoB"; background-color: transparent; letter-spacing: -1.056px; pointer-events: auto;}
.reviewContents.zoomInputAud .inputAudArea .list .text .answer { width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: none; justify-content: center; align-items: center; letter-spacing: -1.056px; color: #0048FF; text-align: center;   font-family: "HallymGoB"; font-size: 46px;}
.reviewContents.zoomInputAud .inputAudArea .list .text .answer.noneColor { color: #000}
.reviewContents.zoomInputAud .inputAudArea .list.play .text .answer.noneColor { color: #0048FF}

.reviewContents.zoomInputAud .playBtnArea{position: relative; top: 0; left: 0;display: none; width: 274px;height: 77px; background: transparent; border-radius: 0; border: none;}
.reviewContents.zoomInputAud .playBtnArea.dimmed:before { background-color: transparent; display: none;}
.reviewContents.zoomInputAud .playBtnArea .cl_btnListenSong{position: static; background-image: url(../images/btnListen.png) ;background-repeat: no-repeat;width: 274px;height: 77px;}
.reviewContents.zoomInputAud .playBtnArea .cl_btnListenSong.pause{ background-image: url(../images/btnExampleSound_pause.png) ;background-repeat: no-repeat;}

.reviewContents.zoomInputAud .playBtnArea .cl_btnListenSong:hover { background-image: url(../images/btnListen_hover.png) !important;}
.reviewContents.zoomInputAud .playBtnArea .cl_btnListenSong.pause:hover{ background-image: url(../images/btnExampleSound_pause_hover.png) !important;;background-repeat: no-repeat;}

.reviewContents.zoomInputAud .playBtnArea.allListen .cl_btnListenSong {position: static; background-image: url(../images/btnListen_all.png) ;background-repeat: no-repeat;width: 274px;height: 77px;}
.reviewContents.zoomInputAud .playBtnArea.allListen .cl_btnListenSong.pause{ background-image: url(../images/btnExampleSound_pause.png) ;background-repeat: no-repeat;}
.reviewContents.zoomInputAud .playBtnArea.allListen .cl_btnListenSong:hover { background-image: url(../images/btnListen_all_hover.png) !important;}
.reviewContents.zoomInputAud .playBtnArea.allListen .cl_btnListenSong.pause:hover{ background-image: url(../images/btnExampleSound_pause_hover.png) !important;;background-repeat: no-repeat;}

.reviewContents.zoomInputAud .playBtnArea .cl_btnStopSong { display: none;}

.reviewContents.zoomInputAud .playBtnArea .cl_btnListenSong.playing { background-image: url(../images/btnExampleSound_ing.png) !important;;background-repeat: no-repeat;}
.reviewContents.zoomInputAud .playBtnArea .cl_btnListenSong.playing:hover{ background-image: url(../images/btnExampleSound_ing_hover.png) !important;;background-repeat: no-repeat;}



/*
  checkContents
*/

.reviewContents .checkPageWrap { }
.reviewContents .checkPageWrap .checkPage { width: 1572px; height: 506px; margin: 0 auto;}
.reviewContents .checkPageWrap .checkPage .flexBox { display: flex; justify-content: center;  margin-top: 30px;}

.reviewContents .checkPageWrap .checkArea { position: relative;}
.reviewContents .checkPageWrap .check { position: absolute; display: flex; align-items: center; justify-content: center;  }
.reviewContents .checkPageWrap .checkBox { display: inline-flex; width: 68px; height: 62px; border: 4px solid #606060; border-radius: 10px; box-sizing: border-box; cursor: pointer; }
.reviewContents .checkPageWrap .check.on .checkBox { position: relative; border-color: #606060; }
.reviewContents .checkPageWrap .check.on .checkBox:before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 49px; height: 38px;
    background-image: url("../images/trueFalseCheckIcon_none.png"); }

/*
.reviewContents .checkPageWrap .check.on .checkBox { position: relative; border-color: #0048FF; }

*/
.reviewContents .checkPageWrap .check.on .checkBox:before { background-image: url("../images/trueFalseCheckIcon_black.png"); }
.reviewContents .checkPageWrap .check.end { pointer-events: none;}
.reviewContents .checkPageWrap .check.on.end .checkBox { position: relative; border-color: #0048FF; }
.reviewContents .checkPageWrap .check.on.end .checkBox:before { background-image: url("../images/trueFalseCheckIcon.png"); }



/* 예시듣기 컨텐츠 */
.reviewContents .exContent { width: 1572px; height: 420px; margin: 0 auto;}


    /*
        *** 이미지컷 뷰어
    */
.imageCutViewer {height:100%;}

.icvContainer {position:relative; height:100%; overflow: hidden;}
.icvContainer > img {display:block;}

.icvContainer .arrowBtn {position:absolute; top:50%; z-index:10; transform:translateY(-50%); width:58px; height:92px; cursor:pointer;}
.icvContainer .btnPrevArrow {left:0; background-image:url("../images/prevBtn.png");}
.icvContainer .btnPrevArrow:hover {background-image:url("../images/prevBtn_hover.png");}
.icvContainer .btnNextArrow {right:0; background-image:url("../images/nextBtn.png");}
.icvContainer .btnNextArrow:hover {right:0; background-image:url("../images/nextBtn_hover.png");}

.icvContainer .icvPagination {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index:10;
    padding: 6px;
    border-radius: 50px;
    background-color: rgba(0, 0, 0, 0.20);
}
.icvContainer .icvPagination .dot {width:40px; height:40px; border-radius:50%; border:solid 5px rgba(255, 255, 255, 0.40); box-sizing: border-box; background-color:rgba(0, 0, 0, 0.10); cursor:pointer;}
.icvContainer .icvPagination .dot.on,
.icvContainer .icvPagination .dot:hover {border-color:#ffffff; background-color:#EA8715;}
.icvContainer .icvPagination.TL {top:20px; bottom:auto; left:20px; right:auto;}
.icvContainer .icvPagination.TR {top:20px; bottom:auto; left:auto; right:20px;}
.icvContainer .icvPagination.BL {top:auto; bottom:20px; left:20px; right:auto;}
.icvContainer .icvPagination.BR {top:auto; bottom:20px; left:auto; right:20px;}
.icvContainer.zoomImageCutContainer .icvPagination.TR {right:76px;}

.zoomImageCutContainer {display:none; position:absolute; bottom:0; left:50%; transform:translateX(-50%); z-index:20; width:1838px; height:889px; border-radius:12px 12px 0 0; overflow: visible;}
.zoomImageCutContainer:before {content:""; position:absolute; top:-10px; left:-10px; z-index:-1; width:calc(100% + 20px); height:calc(100% + 20px); border-radius: 22px 22px 0 0; background-color:rgba(0, 0, 0, 0.10);}
.zoomImageCutContainer img {border-radius:12px 12px 0 0;}
.zoomImageCutContainer .cl_btnClosePopup {top:-14px; right:-41px;}




/*
    개별&전체재생
*/
.singleAudioWrap .singleText { position: relative;}
.singleAudioWrap .singleText:hover,
.singleAudioWrap .singleText.playing { color: #0048FF !important;;}
.singleAudioWrap .singleText.repeating { color: #E0522E !important;;}
.singleAudioWrap .singleText .repeatBalloon { display: none;}
.readAndSpeakChar .talkContent .singleAudioWrap .singleText.repeating .repeatBalloon { display: block; position: absolute; top: 0; left: -62px;}




.singleAudioWrap .cursorNon { pointer-events: none !important;;}
@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"); }

}


/*틀렸을때 공통애니메이션*/
@keyframes wrongAni {
    0% { transform: translateX(-5px); }
    25% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}