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



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

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

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


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




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

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

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


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

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


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

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




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

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


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


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


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


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


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

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


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

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



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

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

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

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



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

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

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




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

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

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

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

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

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


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

/*
    *** ox영역
*/
.oxArea { display: flex; align-items: center; justify-content: center; gap: 142px; }
.oxArea.start { justify-content: flex-start; padding-left: 111px; }
.oxArea .selectArea { display: flex; gap: 40px; }
.oxArea .selectArea.column { flex-direction: column; }
.oxArea .selectArea .speakerArea { display: flex; align-items: center; flex-direction: column; gap: 30px; }


/*
    *** 이미지선택박스영역
*/
.imgSelectArea { display: flex; align-items: center; justify-content: center; gap: 69px; }


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

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

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

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


/*
    *** 심플 비디오 영역
*/
.simpleVideo .characterTabArea { display: flex; align-items: center; gap: 96px; height: 100%; }
.simpleVideo .characterTabArea .characterTab { height: 100%; position: relative; display: flex; flex-direction: column; align-items: center; padding: 78px 0 0 98px; box-sizing: border-box; }
.simpleVideo .characterTabArea .characterTab .char { display: flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 20px; border: 5px solid #fff; border-radius: 50%; }
.simpleVideo .characterTabArea .characterTab .char:nth-last-child(1) { margin-bottom: 0; }
.simpleVideo .characterTabArea .characterTab .char.on { border-radius: 283px; border: 5px solid #137AE2; box-sizing: border-box; }
.simpleVideo .characterTabArea .characterTab .char:hover{ border: 5px solid #137AE2; }
.simpleVideo .characterTabArea .videoArea { display: none; position: relative; width: 1310px; height: 760px; background-color: #ddd; border-radius: 30px; overflow: hidden; }


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


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

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

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

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

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

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

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



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


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

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




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

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


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

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

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

.createName .moIcon { position: absolute; bottom: 40px; right: 66px; background-image: url("../images/createNameMoIcon.png"); background-repeat: no-repeat; width: 230px; height: 382px; }

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

/*
    *********************************** 선긋기 페이지 **********************************
*/
.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 .dotItem {cursor:pointer; position:absolute;}
.drawLine .startGroup {position:absolute;}
.drawLine .endGroup {position:absolute;}

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

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



/*
    *********************************** 소리익히기 *************************************
*/
.learnSound {display:flex; justify-content: center; align-items: center;}
.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 {font-size:160px; color:#000000; font-family:PretendardB; text-align:center; cursor: pointer; }
.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: 560px; flex-direction: column; justify-content: center; border-right: 3px dashed #CFCFCF }

.learnSound.halfType .learnSoundArea .imgCell { padding-left: 0; flex: 0; }
.learnSound.halfType .learnSoundArea .soundCell .textCell { font-size: 120px; }
.learnSound.halfType .learnSoundArea .soundBtnCell { position: absolute; top: 0px; left: 120px; }



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

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



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


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

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


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

/*
    *********************************** 보기단어선택  *************************************
*/
.bogiWordSelect { display: flex; flex-direction: column; align-items: center; padding-top: 38px; box-sizing: border-box; }
.bogiWordSelect .bogiList { display: inline-flex; align-items: center; justify-content: center; gap: 100px; border-radius: 60px;
    background: #D4EEFA; padding: 10px 40px; box-sizing: border-box; margin: 0 auto; }
.bogiWordSelect .bogiList .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; }

.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 .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; }
.bogiWordSelect .answerArea .answerCell input { background: transparent; font-size: 120px; font-family: "PrintBoldR"; padding-left: 37px; box-sizing: border-box; margin-top: -15px; }
.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: 0px; right: 308px; display: flex; gap: 12px; padding: 12px; box-sizing: border-box; border-radius: 0px 0px 50px 50px; background: #A0D2DE; z-index: 0; }
.conversation .conversationTab.type2 { right: 0; }
.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 .repeatWordsMark {
    display:none;
    position:relative;
    width: 198px;
    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")}






/*
    *********************************** 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:nth-last-child(1) .list { border-bottom: 0; padding-top: 40px; }
.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 { width: 100%; text-align: center; background: transparent; font-family: "PrintBoldR"; font-size: 120px; box-sizing: border-box; margin-top: -15px; }
.oxInputQuiz .answerCell .answer { display: none; position: absolute; top: 0; width: 100%; text-align: center; color: #137AE2; }

/*
    *********************************** 타이머있는 게임 페이지 **********************************
*/
.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: 67px; }



/*타이머 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 .volumeArea { position: absolute; bottom: 19px; right: 67px; z-index: 5; }
.alphabetQuiz .volumeArea .cl_btnSpeakerVol { }


@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"); }

}