@charset "utf-8";

/*
==================================================================================
파일명 : nmr_main.css
버  전 : 2.0
날  짜 : 2022.05.19
제작자 : 하영중

본 파일 소스의 모든 저작권은 netmaru에 있습니다. 임의의 수정 및 배포를 금합니다.
문  의 : 02-597-2343
==================================================================================
*/

/*****************/
/* 기본 세팅 css */
/*****************/
@font-face {
  font-family:'NanumBarunGothic';
  src:url('../font/NanumBarunGothic.eot');
  src:url('../font/NanumBarunGothic.woff') format('woff'),
       url('../font/NanumBarunGothic.ttf') format('truetype'),
       url('../font/NanumBarunGothic.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'NanumBarunGothicBold';
  src:url('../font/NanumBarunGothicBold.eot');
  src:url('../font/NanumBarunGothicBold.woff') format('woff'),
       url('../font/NanumBarunGothicBold.ttf') format('truetype'),
       url('../font/NanumBarunGothicBold.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'NanumSquareB';
  src:url('../font/NanumSquareB.eot');
  src:url('../font/NanumSquareB.woff') format('woff'),
       url('../font/NanumSquareB.ttf') format('truetype'),
       url('../font/NanumSquareB.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'NexaBold';
  src:url('../font/NexaBold.eot');
  src:url('../font/NexaBold.woff') format('woff'),
       url('../font/NexaBold.ttf') format('truetype'),
       url('../font/NexaBold.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'RoundedElegance';
  src:url('../font/RoundedElegance.eot');
  src:url('../font/RoundedElegance.woff') format('woff'),
       url('../font/RoundedElegance.ttf') format('truetype'),
       url('../font/RoundedElegance.eot?#iefix') format('embedded-opentype');
  font-weight:normal;
  font-style:normal;
}

:root{
	/* nmr_check.js에서 결정될 값(컨텐츠 사이즈, 컨텐츠 위치) */
    --cWidth : 0px;
    --cHeight : 0px;
	--cMargin : 0px;
	--cTop : 0px;
	--helpBtnPC : 0;
	--helpBtnMO : 0;
	
	/* 과정별 설정값 */
	--heightlightColor : #00bdc4; /* 강조색 */
	--mapModuleW : 450px; /* 러닝맵 모듈명 width값 */
	--mapChasiW : 450px; /* 러닝맵 차시명 width값 */
	--mapMarginB : 15px; /* 러닝맵 차시별 간격 */
	--quizBtnColor : #fe3040; /* 퀴즈 객관식 버튼 마우스 올렸을 때 배경색, 퀴즈 지문 강조 색 */
}

html, body{font-family:'NanumBarunGothic'; height:100%;	-webkit-text-size-adjust:none; -moz-text-size-adjust:none; -ms-text-size-adjust:none;  -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; overflow:hidden; margin:0; padding:0; list-style:none; line-height:1.3em;}
a{display:block; text-decoration:none;}

/********************************/
/***** 모든 페이지 공통 css *****/
/********************************/
.wrap_all{position:relative; margin:var(--cMargin); top:var(--cTop); width:var(--cWidth); height:var(--cHeight); -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; background:url('../img/bg/bg.jpg'); background-position:-50% -50%; background-size:100% 100%; overflow:hidden;}
.wrap_all.mobile{margin:0; top:0;}
.wrap_all.changeable{position:relative; left:0; top:0; width:100%; height:100%;}
/***** 컨텐츠 영역 *****/
.ui_contents{position:absolute; left:calc((100% - var(--cWidth)) / 2); top:calc((100% - var(--cHeight)) / 2); width:var(--cWidth); height:var(--cHeight); z-index:10;}
.wrap_all.changeable .ui_contents{overflow:hidden;}
.contentsVideo{width:100%; height:100%;}
.wrap_all.fullscreen .ui_contents{left:0px; top:0px; width:100%; height:100%; z-index:10;}

/***** 로딩바 ****/
.ui_loading{position:absolute; left:0px; right:0px; top:0px; bottom:0px; margin:auto; width:64px; height:64px; border-radius:50%; border:8px solid transparent; border-top-color:#cdcfca; border-bottom-color:#cdcfca; animation:loadingAni 1s ease infinite; z-index:20;}
@keyframes loadingAni{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/***** 상단 과정명, 차시명 *****/
.ui_top{position:absolute; width:100%; top:0px; left:0px; opacity:1; transition:0.3s; display:flex; justify-content:space-between; z-index:30; pointer-events:none;}
.ui_top.hide{opacity:0;}
.topLeft{position:relative; left:5px; top:5px; overflow:visible;}
.chasiAll{position:relative; height:auto; display:flex; justify-content:flex-start;}
.chasiNum{position:relative; width:24px; height:21px; padding:3px 0px 0px 0px; text-align:center; font-family:'NexaBold'; color:#404447; font-size:15px; background-color:#ffffff;}
.chasiName{position:relative; height:auto; min-height:21px; background-color:rgba(255, 255, 255, 0.35); padding:3px 10px 0px 10px; font-family:'NanumBarunGothicBold'; color:#404447; font-size:15px;}
.smallNameAll{position:relative; left:24px; display:flex; justify-content:flex-start;}
.smallNameLeft{position:relative; width:11px; height:24px; background-color:#000000;}
.smallNameLeftBar{position:absolute; left:6px; top:4px; width:2px; height:15px; background-color:rgba(255, 255, 255, 0.6);}
.smallNameCenter{position:relative; font-family:'NanumBarunGothicBold'; color:#ffffff; font-size:13px; padding:2px 6px 1px 2px; background-color:#000000;}
.smallNameRight{position:relative; width:0px; height:0px; border-bottom:24px solid rgba(255, 255, 255, 0); border-left:10px solid #000000;}
.topRight{position:absolute; right:10px; top:9px; font-family:'NanumBarunGothicBold'; font-size:16px; color:#ffffff; text-shadow:0px 0px 5px rgba(0, 0, 0, 0.7); text-align:right;}

/***** 중앙 모바일 안내 및 모바일 백넥 및 재생 버튼 *****/
.ui_mobileAll{position:absolute; width:100%; height:231px; top:calc((100% - 231px) / 2); z-index:40; display:none;}
.mobileStartBtn a{position:relative; margin:0 auto; width:179px; height:179px; background-image:url('../img/ui-img/mobileStart.png');}
.mobileStartText{position:relative; width:100%; font-size:14px; text-align:center; margin-top:20px;}
.mobileControl{display:none;}
.mobilePrevBtn a, .mobileNextBtn a{position:absolute; top:calc((100% - 175px) / 2); width:186px; height:175px; transition:left 0.3s; z-index:60;}
.mobilePrevBtn a{left:calc(50% - 250px); background-image:url('../img/ui-img/prev_mobile.png');}
.mobileNextBtn a{left:calc(50% + 75px); background-image:url('../img/ui-img/next_mobile.png');}
.mobilePnPBtn a{position:absolute; left:calc((100% - 143px) / 2); top:calc((100% - 148px) / 2); width:143px; height:148px; background-image:url('../img/ui-img/mobilePnPBtn.png'); background-position:0px 0px; z-index:60;}
.mobilePnPBtn a.toggle{background-position:0px -200px;}
.mobilePrevBtn.hide a{left:-175px;}
.mobileNextBtn.hide a{left:100%;}
.mobilePnPBtn.hide a{visibility:hidden;}

/***** 컨트롤바 *****/
.ui_control{position:absolute; width:100%; bottom:0px; transition:bottom 0.3s; overflow:visible; z-index:70;}

/***** 인덱스 *****/
.ui_index{position:absolute; left:calc((100% - var(--cWidth)) / 2); width:var(--cWidth); transition:bottom 0.3s; z-index:50;}
.ui_index.open{bottom:0px;}
.indexAll{position:relative; width:100%; height:100%; background-image:url('../img/ui-img/indexBg.png'); display:flex; justify-content:flex-start; flex-wrap:wrap;}
.menuBig a{position:relative; display:table; margin-top:47px; height:calc(100% - 47px); table-layout:fixed;}
.menuBig a .menuText{position:relative; width:100%; height:100%; font-family:'NanumBarunGothicBold'; font-size:24px; color:#ffffff; text-align:center; opacity:0.5; word-break:keep-all; word-wrap:break-word; display:table-cell; vertical-align:middle; line-height:1.3em; padding:0px 5px;}
.menuBig a:hover .menuText, .menuBig a:focus .menuText, .menuBig a.selected .menuText{opacity:1;}
.menuContainer{position:relative; display:flex; margin-top:65px; height:calc(100% - 65px); flex-direction:column;}
.menuContainer .menuText{position:relative; width:100%; font-family:'NanumBarunGothicBold'; font-size:24px; color:#ffffff; text-align:center; opacity:0.5; word-break:keep-all; line-height:1.3em; margin:0px 0px 5px 0px;}
.menuSmall a{position:relative; width:calc(100% - 10px); height:auto; font-size:16px; color:#ffffff; opacity:0.5; word-break:keep-all; /*작은 메뉴 위아래 간격*/ margin:10px 0px 0px 0px; padding:0px 0px 0px 27px; text-indent:-17px;}
.menuSmall a:hover, .menuSmall a:focus, .menuSmall a.selected, .menuContainer.selected .menuText{opacity:1;}
.menuLine{position:relative; top:47px; width:1px; height:calc(100% - 47px); background-color:rgba(255, 255, 255, 0.2);}

/***** 자막창 ****/
.ui_script{position:absolute; left:calc((100% - var(--cWidth)) / 2); width:var(--cWidth); background-color:rgba(0, 0, 0, 0.9); transition:bottom 0.3s; z-index:60;}
.ui_script.open{bottom:0px;}
.scriptText{position:absolute; left:10px; top:30px; width:calc(var(--cWidth) - 50px); display:flex; justify-content:space-between; flex-wrap:wrap; align-content:flex-start; font-size:16px; color:#ffffff; word-break:keep-all; line-height:1.3em;}
.scriptText .smi1{position:relative; width:80px; height:auto; overflow:hidden; color:var(--heightlightColor); text-align:right; margin-bottom:10px;}
.scriptText .smi2{position:relative; width:calc(100% - 85px); height:auto; overflow:hidden; margin-left:5px;  margin-bottom:10px;}
.scriptClose a{position:absolute; right:10px; top:10px; width:21px; height:21px;}
.scriptClose a:before, .scriptClose a:after{position:absolute; left:0px; top:9px; width:18px; height:2px; background-color:#ffffff; content:''; opacity:0.5; transition:0.3s;}
.scriptClose a:hover:before, .scriptClose a:hover:after{opacity:1;}
.scriptClose a:before{transform:rotate(45deg);}
.scriptClose a:after{transform:rotate(-45deg);}

/***************************/
/***** 학습 도우미 css *****/
/***************************/
/***** 학습도우미 공통 css *****/
.ui_help{position:absolute; left:calc((100% - var(--cWidth)) / 2); top:calc((100% - var(--cHeight)) / 2); width:var(--cWidth); height:var(--cHeight); font-family:'NanumBarunGothic'; background-image:url("../img/help/helpBg.png"); background-size:contain; z-index:90; display:none; -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left;}
.ui_help.fullscreen{left:0px; top:0px;}
.helpCloseBtn a{position:absolute; right:calc(10 * var(--cWidth) / 1120); top:calc(10 * var(--cHeight) / 630); width:calc(45 * var(--cWidth) / 1120); height:calc(45 * var(--cWidth) / 1120);}
.helpCloseBtn a:before, .helpCloseBtn a:after{position:absolute; left:-2px; top:22px; width:calc(50 * var(--cWidth) / 1120); height:2px; background-color:#1b1b1b; content:''; opacity:0.4; transition:0.3s;}
.helpCloseBtn a:hover:before, .helpCloseBtn a:hover:after{opacity:1;}
.helpCloseBtn a:before{transform:rotate(45deg);}
.helpCloseBtn a:after{transform:rotate(-45deg);}
.helpTabBtnAll{position:relative; margin:0 auto; margin-top:calc(100 * var(--cHeight) / 630); display:flex; justify-content:center;}
.helpTabBtn{margin:0px 5px;}
.helpTabBtn a{position:relative; width:100%; font-size:24px; color:#5b5b5b; text-align:center; text-decoration:none; background-color:#cdcdcd; margin:0px 5px; padding:11px 0px 8px 0px;}
.helpTabBtn a:hover, .helpTabBtn a.selected{color:#ffffff; background-color:#1b1b1b;}

/***** 화면 안내 css *****/
.screenPageAll{position:absolute; left:0px; top:0px; width:100%; height:100%;}
.screenBtn a{position:absolute; width:30px; font-size:22px; text-align:center; color:#5b5b5b; border:1px solid #5b5b5b; padding:6px 0px 1px 0px; box-sizing:border-box;}
.screenBtn a.selected{color:#1b1b1b; border:1px solid #1b1b1b; font-weight:700; /***** 화면 안내 버튼 강조 *****/}
.screenBtn:nth-child(1) a{left:calc((268 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc(199 * var(--cHeight) / 630);}
.screenBtn:nth-child(2) a{left:calc((867 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc(199 * var(--cHeight) / 630);}
.screenBtn:nth-child(3) a{left:calc((268 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc((484 * var(--cHeight) / 630) - (30px - (30 * var(--cHeight) / 630)));}
.screenBtn:nth-child(4) a{left:calc((669 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc((520 * var(--cHeight) / 630) - (30px - (30 * var(--cHeight) / 630)));}
.screenBtn:nth-child(5) a{left:calc((757 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc((520 * var(--cHeight) / 630) - (30px - (30 * var(--cHeight) / 630)));}
.screenBtn:nth-child(6) a{left:calc((867 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc((484 * var(--cHeight) / 630) - (30px - (30 * var(--cHeight) / 630)));}
.screenBtn:nth-child(7) a{left:calc((867 * var(--cWidth) / 1120) - (30px - (30 * var(--cWidth) / 1120))); top:calc((277 * var(--cHeight) / 630) - (30px - (30 * var(--cHeight) / 630)));}
.screenAll{position:absolute; left:calc(302 * var(--cWidth) / 1120); top:calc(199 * var(--cHeight) / 630); width:calc(560 * var(--cWidth) / 1120); height:calc(315 * var(--cHeight) / 630);}
.screenContainer{position:absolute; left:0px; top:0px; width:100%; height:100%; background-size:contain;}

/***** 러닝맵 css *****/
.mapPage{position:absolute; left:0px; top:0px; width:100%; height:100%;}
.module{position:absolute; width:var(--mapModuleW); font-size:20px; color:#5b5b5b; text-align:center; border:1px solid #5b5b5b; padding:10px 0px 7px 0px;}
.module.selected{color:#000000; border:1px solid #000000;}
.mapBundle{position:absolute;}
.mapChasiNameAll{position:relative; overflow:hidden; display:flex; justify-content:left; width:var(--mapChasiW); margin-bottom:var(--mapMarginB); line-height:1.3em;}
.mapChasiNum{position:relative; width:60px; font-family:'NanumBarunGothic'; font-size:18px; color:#5b5b5b;}
.mapChasiLine{position:relative; top:0px; width:2px; height:19px; background-image:url('../img/help/chapLine.png'); margin:0px 5px 0px 5px;}
.mapChasiTxt{position:relative; width:calc(100% - 70px); font-family:'NanumBarunGothic'; font-size:18px; color:#5b5b5b; letter-spacing:-1px; word-break:keep-all;}
.mapChasiNameAll.selected .mapChasiNumTxt, .mapChasiNameAll.selected .mapChasiTxt{font-family:'NanumBarunGothicBold'; color:#1b1b1b;}/* 현재 차시 강조(굵기와 글자 색) */
/* 러닝맵 백넥버튼 css */
.mapMoveAll{position:absolute; width:100%; top:calc(570 * var(--cHeight) / 630); display:flex; justify-content:center;}
.mapPrevBtn a, .mapNextBtn a{position:relative; width:22px; height:25px; background:url(../img/help/mapMove.png); background-position:0px 0px;}
.mapPrevBtn a{background-position:0px 0px;}
.mapPrevBtn a:hover{background-position:0px -50px;}
.mapNextBtn a{background-position:-50px 0px;}
.mapNextBtn a:hover{background-position:-50px -50px;}
.mapNowNum, .mapTotNum{position:relative; top:4px; width:30px; text-align:center; font-family:'NanumBarunGothicBold'; font-size:20px;}
.mapNowNum{color:#1b1b1b;}
.mapTotNum{color:#5b5b5b;}
.mapNumDot{position:relative; top:10px; width:6px; height:6px; background:url(../img/help/mapMove.png); background-position:-30px 0px;}

/****** 키보드 제어 css *****/
.key{position:absolute; left:0px; top:0px; width:100%; height:100%; background-size:contain;}

/***** 강사 소개 css *****/
.teacherAll{position:absolute; left:0px; top:0px; width:100%; height:100%;}
.teacher{position:absolute; left:0px; top:0px; width:100%; height:100%; background-size:contain;}

/* 영상 끝나고 나오는 html 컨텐츠 */
.ui_popupContentsAll{position:absolute; left:100%; top:calc((100% - var(--cHeight)) / 2); width:var(--cWidth); height:var(--cHeight); font-family:'NanumBarunGothic'; z-index:11; -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left;}
.ui_popupContentsAll.show{left:0px; transition:left 0.5s;}
.ui_popupContentsAll.show.fullscreen{left:0px; top:0px; transition:0s;}

/* skip버튼 */
.ui_skipBtn a{position:absolute; right:20px; bottom:10%; width:82px; height:82px; background-image:url('../img/ui-img/skipBtn.png'); background-position:0px 0px; z-index:45;}
.ui_skipBtn a:hover{background-position:0px -100px;}

/* 북마크 */
.ui_bookmark{position:absolute; z-index:85;}
.ui_bookmark.text{right:0px; top:100px; width:309px; height:auto;}
.bookmarkBtn a{position:absolute; right:0px; top:0px; width:29px; height:118px; background-color:rgba(0, 0, 0, 0.8); display:table; z-index:2;}
.bookmarkBtn a:hover{background-color:rgba(255, 255, 255, 0.8);}
.bookmarkBtnText{position:absolute; left:2px; top:2px; width:25px; height:114px; font-family:'NanumBarunGothic'; color:rgba(255, 255, 255, 0.8); font-size:16px; border:1px solid rgba(255, 255, 255, 0.1); text-align:center; box-sizing:border-box; padding:21px 0px 0px 0px; line-height:1.5em; display:table-cell; vertical-align:middle;}
.bookmarkBtn a:hover .bookmarkBtnText{border:1px solid rgba(0, 0, 0, 0.1); color:rgba(0, 0, 0, 0.8);}
.bookmarkBody{position:absolute; right:-280px; top:0px; width:280px; background-color:rgba(0, 0, 0, 0.8); z-index:1; transition:right 0.5s;}
.bookmarkBody.show{right:29px;}
.bookmarkTop{position:relative; width:280px; height:11px;}
.bookmarkMiddle{position:relative; width:280px;}
.bookmarkBottom{position:relative; width:280px; height:11px;}
.bookmarkText{position:relative; font-family:'NanumBarunGothic'; font-size:14px;}
.bookmarkText a{position:relative; width:260px; color:#ffffff; opacity:0.5; text-decoration:none; word-break:keep-all; padding:5px 5px 5px 12px; text-indent:0px; display:block;}
.bookmarkText a:hover, .bookmarkText a.selected{opacity:1; background-color:#252021;}
.bookmarkText a:before{position:absolute; left:5px; top:12px; content:""; width:0px; height:0px; border-left:4px solid #ffffff; border-top:2px solid transparent; border-bottom:2px solid transparent; opacity:0.5;}
.bookmarkText a:hover:before, .bookmarkText a.selected:before{opacity:1;}

/********************/
/***** 퀴즈 css *****/
/********************/
.quizAll{position:absolute; left:0px; top:0px; width:100%; height:100%; font-family:'NanumBarunGothic'; background-image:url("../img/bg/bg_quiz.jpg");}
.quizNumber{position:absolute; left:0px; top:0px;}
.quizNumber img{height:var(--cHeight)}
/* 문제 텍스트 */
.quizTextAll{position:absolute; left:calc((233 * var(--cWidth) / 1120)); top:calc((52 * var(--cHeight) / 630)); width:calc((800 * var(--cWidth) / 1120)); height:calc((100 * var(--cHeight) / 630)); display:flex; flex-direction:column-reverse;}
.quizTextSmall{position:relative; width:100%; font-family:'NanumBarunGothic'; font-size:17px; word-break:keep-all; letter-spacing:0px; /* 글자 색깔 */ color:#fe3040; margin-bottom:3px;}
.quizText{position:relative; width:100%; font-family:'NanumBarunGothicBold'; font-size:23px; line-height:1.3em; word-break:keep-all; letter-spacing:-1px; /* 글자 색깔 */ color:#1b1b1b;}
.quizText .highlight{/* 퀴즈 강조 글자 색깔 */ color:#fe3040; border-bottom:2px solid #fe3040;}
.quizContentsAll{position:absolute; left:calc((200 * var(--cWidth) / 1120)); top:calc((170 * var(--cHeight) / 630));} /* 퀴즈 문제 컨텐츠(보기, 버튼)이 시작되는 위치 */
/* 버튼 공통 */
.quizBtnAll{position:relative; font-family:'NanumBarunGothic';}
.quizBtn{position:relative; cursor:pointer;}
/* 보기 박스 */
.quizExampleAll{position:relative; width:600px; height:auto; font-size:18px; padding:20px 10px 10px 10px; border:2px solid #201d1d; border-radius:5px; margin:10px 0px 30px 33px; line-height:1.3em;}
.quizExampleAll:before{content:' <보 기> '; position:absolute; left:calc((100% - 70px) / 2); top:-12px; width:70px; text-align:center; background-color:#ffffff; font-family:'NanumSquareB'; font-size:20px;}
/* 객관식 버튼 */
.quizBtnAll.select{margin:15px 0px 0px 0px;}
.quizBtnAll.select .quizBtn a{width:700px; padding:3px 0px 0px 60px; line-height:1.3em; font-size:18px; color:#1c1622; word-break:keep-all; margin-bottom:10px;}
.quizBtnAll.select .quizBtn a:before{z-index:2;}
.quizBtnAll.select .quizBtn a:after{z-index:1;}
.quizBtnAll.select .quizBtn a:before{position:absolute; left:33px; top:3px; width:20px; height:20px; border:2px solid #000000; border-radius:50%; box-sizing:border-box; font-family:'RoundedElegance'; font-size:14px; font-weight:bold; text-align:center; padding:0px 0px 5px 0px; line-height:1.4em;}
.quizBtnAll.select .quizBtn a.hover:before{background-color:var(--quizBtnColor); border:2px solid var(--quizBtnColor); color:#ffffff;}
.quizBtnAll.select .quizBtn a.selected:before, .quizBtnAll.select .quizBtn a.correct:before{background-color:#000000; border:2px solid #000000; color:#ffffff;}
.quizBtnAll.select .quizBtn1 a:before{content:'1';}
.quizBtnAll.select .quizBtn2 a:before{content:'2';}
.quizBtnAll.select .quizBtn3 a:before{content:'3';}
.quizBtnAll.select .quizBtn4 a:before{content:'4';}
.quizBtnAll.select .quizBtn5 a:before{content:'5';}
.quizBtnAll.select .quizBtn a.selected:after{content:'✔'; position:absolute; left:33px; top:-2px; width:20px; text-align:center; line-height:1.4em; color:var(--quizBtnColor); font-size:20px; z-index:3;}
.quizBtnAll.select .quizBtn a.correct:after{content:'정답'; position:absolute; left:0px; top:3px; width:37px; height:20px; background-color:var(--quizBtnColor); line-height:1.9em; color:#ffffff; font-size:12px; padding:0px 0px 0px 6px; font-family:'NanumSquareB';}
/* 보기 있을 때 객관식 버튼 */
.quizBtnAll.select.example{width:700px; display:flex; flex-wrap:wrap; justify-content:flex-start;}
.quizBtnAll.select.example .quizBtn{width:calc(50% - 60px);}
/* OX 버튼 */
.quizBtnAll.ox{margin:15px 0px 0px 148px; width:390px; display:flex; justify-content:space-between;}
.quizBtnAll.ox .quizBtn a{width:150px; height:150px; background-position:0px 0px;}
.quizBtnAll.ox .quizBtn a.hover{background-position:-150px 0px;}
.quizBtnAll.ox .quizBtn a.selected{background-position:-300px 0px;}
.quizBtnAll.ox .quizBtn a.correct{background-position:-450px 0px;}
.quizBtnAll.ox .quizBtn1 a{background-image:url('../img/quiz/quiz_ox_selNum1.png');}
.quizBtnAll.ox .quizBtn2 a{background-image:url('../img/quiz/quiz_ox_selNum2.png');}
/* 해설 */
.quizFeedbackAll{position:absolute; left:calc((91 * var(--cWidth) / 1120)); top:100%; width:calc((940 * var(--cWidth) / 1120)); height:calc((140 * var(--cHeight) / 630)); background-image:url('../img/quiz/quiz_feedbackBg.png'); opacity:0; transition:0.3s; background-size:cover;}
.quizFeedbackAll.show{top:calc((390 * var(--cHeight) / 630)); opacity:1;}
.quizFeedbackNextBtn a{position:absolute; left:calc((781 * var(--cWidth) / 1120)); top:0px; width:159px; height:140px; background-image:url('../img/quiz/quizBtn.png');}
.quizFeedbackNextBtn a{background-position:0px 0px;}
.quizFeedbackNextBtn a.last{background-position:0px -150px;}
.quizFeedbackNextBtn a:hover{background-position:-200px 0px;}
.quizFeedbackNextBtn a.last:hover{background-position:-200px -150px;}
.quizFeedbackDapTxt{position:absolute; left:0px; top:calc((56 * var(--cWidth) / 1120)); width:calc((118 * var(--cWidth) / 1120)); text-align:center; font-family:'NanumBarunGothicBold'; font-size:42px; color:#ffffff; overflow:visible;}
.quizFeedbackExplainTxt{position:absolute; left:calc((134 * var(--cWidth) / 1120)); top:calc((44 * var(--cHeight) / 630)); width:calc((608 * var(--cWidth) / 1120)); height:calc((69 * var(--cHeight) / 630)); text-align:left; font-family:'NanumBarunGothic'; font-size:17px; color:#1b1b1b; word-break:keep-all;}

/* 정오답 표시 */
.quizOx{position:absolute; left:calc((121 * var(--cWidth) / 1120)); top:calc((161 * var(--cHeight) / 630));}
/* 다시 풀기 얼럿창 */
.quizReTry{position:absolute; left:0; top:0; width:100%; height:100%; background-image:url('../img/quiz/quiz_try.png'); background-size:contain; z-index:4;}
/* 결과보기 */
.quizResultAll{position:absolute; left:0px; top:0px; width:100%; height:100%; background-image:url('../img/bg/bg_quiz_result.jpg'); background-size:contain; z-index:4;}
.quizResultOx{position:absolute; left:calc((153 * var(--cWidth) / 1120)); top:calc((350 * var(--cHeight) / 630)); width:calc((184 * var(--cWidth) / 1120)); display:flex; justify-content:space-between;}
.quizResult{position:relative; width:calc((72 * var(--cWidth) / 1120)); height:calc((72 * var(--cWidth) / 1120)); background-size:cover;}
.quizResult.yes{background-image:url('../img/quiz/quiz_result_yes.png');}
.quizResult.no{background-image:url('../img/quiz/quiz_result_no.png');}
.quizReplayBtn a{position:absolute; left:calc((337 * var(--cWidth) / 1120)); top:calc((489 * var(--cHeight) / 630)); width:127px; height:33px; background-image:url('../img/quiz/quizReplayBtn.png'); background-position:0px 0px; text-indent:-9999px; cursor:pointer; }
.quizReplayBtn a:hover{background-position: 0px -50px;}

/************************/
/***** 의견입력 css *****/
/************************/
.thinkAll{position:absolute; left:0px; top:0px; width:100%; height:100%; overflow:hidden;}
.thinkTxt{position:absolute; left:calc((258 * var(--cWidth) / 1120)); top:calc((207 * var(--cHeight) / 630)); width:calc((800 * var(--cWidth) / 1120)); font-family:'NanumBarunGothicBold'; font-size:calc((22 * var(--cWidth) / 1120)); color:#1b1b1b; word-break:keep-all; letter-spacing:0px; overflow:visible; line-height:1.3em;}
.thinkBoard{position:absolute; left:calc((272 * var(--cWidth) / 1120)); top:calc((274 * var(--cHeight) / 630)); width:calc((798 * var(--cWidth) / 1120)); height:calc((145 * var(--cHeight) / 630)); overflow:hidden;}
.thinkBoard textarea{position:absolute; width:100%; height:100%; font-family:'NanumBarunGothic'; font-size:18px; color:#1b1b1b; background:none; border:none; line-height:37px; background-image:url('../img/thinking/thinkingLine.png'); padding:0px; resize:none;}
.thinkBtn1 a{position:absolute; left:calc((794 * var(--cWidth) / 1120)); top:calc((484 * var(--cHeight) / 630)); width:95px; height:43px; background-image:url('../img/thinking/thinkingBtn1.png'); background-position:0px 0px;}
.thinkBtn2 a{position:absolute; left:calc((905 * var(--cWidth) / 1120)); top:calc((484 * var(--cHeight) / 630)); width:165px; height:43px; background-image:url('../img/thinking/thinkingBtn2.png'); background-position:0px 0px;}
.thinkBtn1 a:hover, .thinkBtn2 a:hover, .thinkBtn3 a:hover{background-position:0px -50px;}
.alertPop{position:absolute; left:0px; top:0px; width:100%; height:100%; display:none; background-size:cover;}
.alertPop.no{background-image:url('../img/thinking/thinkingAlert1.png');}
.alertPop.save{background-image:url('../img/thinking/thinkingAlert2.png');}

/**************************/
/***** 체크리스트 css *****/
/**************************/
.checkListAll{position:absolute; left:0px; top:0px; width:100%; height:100%;}
.checkList{position:absolute; left:0px; top:0px; width:100%; height:100%; -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; background-size:contain;}
.checkList1{background-image:url("../img/checkList/checkList01.jpg"); z-index:3;}
.checkList2{background-image:url("../img/checkList/checkList02.jpg"); z-index:2;}
.checkList3{background-image:url("../img/checkList/checkList03.jpg"); z-index:1;}

.checkListStartBtn a{position:absolute; display:block; left:calc((703 * var(--cWidth) / 1120)); top:calc((442 * var(--cHeight) / 630)); width:95px; height:43px; background-image:url("../img/checkList/checkListStartBtn.png"); background-position:0px 0px;}
.checkListStartBtn a:hover{background-position:0px -50px;}
.checkListResultBtn{position:absolute; display:none; left:calc((960 * var(--cWidth) / 1120)); top:calc((518 * var(--cHeight) / 630)); width:91px; height:33px; background-image:url("../img/checkList/checkListEndBtn.png"); background-position:0px 0px;}
.checkListResultBtn.selected{display:block; cursor:pointer;}
.checkListResultBtn.selected:hover{background-position:0px -50px;}

.checkListContainerAll{position:absolute; width:calc((969 * var(--cWidth) / 1120)); height:calc((320 * var(--cHeight) / 630)); left:calc((76 * var(--cWidth) / 1120)); top:calc((192 * var(--cHeight) / 630)); font-family:'NanumBarunGothic'; font-size:16px; word-break:keep-all}
.checkListContainer{position:relative; width:100%; height:35px; display:table; background-color:#ffffff; border-bottom:1px solid #e5e5e5;}
.checkListContainer:last-child{border-bottom:none;}
.checkListContainerTop{position:absolute; width:calc((969 * var(--cWidth) / 1120)); height:calc((67 * var(--cHeight) / 630)); left:calc((76 * var(--cWidth) / 1120)); top:calc((125 * var(--cHeight) / 630)); background-color:#1b1b1b; color:#ffffff; text-align:center; word-break:keep-all; display:table; font-family:'NanumSquareB'; font-size:16px;}
.checkListContainerTop .checkListNumber{color:#ffffff;}
.checkListNumber{position:relative; width:calc((50 * var(--cWidth) / 1120)); text-align:center; font-family:'NanumSquareB'; color:#1b1b1b; display:table-cell; vertical-align:middle; height:100%;}
.checkListCheck{position:relative; width:calc((60 * var(--cWidth) / 1120)); text-align:center; display:table-cell; vertical-align:middle; height:100%;}
.checkListText{position:relative; width:calc((619 * var(--cWidth) / 1120)); display:table-cell; vertical-align:middle; height:100%;}
.checkListBtn a{position:relative; display:block; width:32px; height:30px; background-image:url("../img/checkList/checkListCheck.png"); background-position:0px 0px; margin:0 auto;}
.checkListBtn a.selected{background-position:-50px 0px;}

.checkListAvg{position:absolute; left:calc((155 * var(--cWidth) / 1120)); top:calc((174 * var(--cHeight) / 630)); width:calc((371 * var(--cWidth) / 1120)); text-align:center; font-family:'NanumSquareB'; font-size:40px; color:#1b1b1b; letter-spacing:-0.8px; font-weight:bolder;}
.checkListAvg .highlight{font-size:42px; color:#1b1b1b;}
.checkListResult1, .checkListResult2{position:absolute; top:calc((315 * var(--cHeight) / 630)); width:calc((185 * var(--cWidth) / 1120)); text-align:center; font-family:'NanumBarunGothic'; font-size:22px;}
.checkListResult1{left:calc((155 * var(--cWidth) / 1120));}
.checkListResult2{left:calc((341 * var(--cWidth) / 1120));}
.checkListDownBtn a{display:block; position:absolute; left:calc((258 * var(--cWidth) / 1120)); top:calc((474 * var(--cHeight) / 630)); width:165px; height:43px; background-image:url("../img/checkList/checkListDownBtn.png"); background-position:0px 0px;}
.checkListDownBtn a:hover{background-position:0px -50px;}

/************************/
/***** 정리하기 css *****/
/************************/
.summaryAll{position:absolute; left:0px; top:0px; width:100%; height:100%; background-image:url("../img/summary/summaryBg.jpg"); background-size:contain;}
.summaryContentAll{position:absolute; left:calc((264 * var(--cWidth) / 1120)); top:calc((114 * var(--cHeight) / 630)); width:calc((820 * var(--cWidth) / 1120)); font-family:'NanumBarunGothic'; color:#000000; word-break:keep-all; line-height:1.3em; letter-spacing:-0.03em;}
.summaryContent{position:relative;}
.summaryTextBig, .summaryTextBook{position:relative; font-family:'NanumBarunGothicBold'; font-size:22px; padding:1px 0px 0px 23px; margin:0px 0px 11px 0px;}
.summaryTextBig:before{content:''; position:absolute; left:0px; top:0px; width:20px; height:20px; background-image:url("../img/summary/summaryBullet.png"); background-position:0px 0px;}
.summaryTextMiddle{position:relative; font-size:20px; padding:0px 0px 0px 15px; margin:8px 0px 0px 21px;}
.summaryTextMiddle:before{content:''; position:absolute; left:0px; top:6px; width:11px; height:4px; background-image:url("../img/summary/summaryBullet.png"); background-position:-50px 0px;}
.summaryTextSmall{position:relative; font-size:18px; text-indent:-18px; padding:0px 0px 0px 18px; margin:8px 0px 0px 37px;}
.summaryTextBook:before{content:''; position:absolute; left:0px; top:-2px; width:21px; height:24px; background-image:url("../img/summary/summaryBullet.png"); background-position:-100px 0px;}
.summaryNaviAll{position:absolute; left:calc((617 * var(--cWidth) / 1120)); top:calc((500 * var(--cHeight) / 630)); width:109px; display:flex; justify-content:space-between;}
.summaryPrevBtn a, .summaryNextBtn a{position:relative; width:22px; height:29px; background-image:url("../img/summary/summaryBtn.png");}
.summaryPrevBtn a{background-position:0px 0px;}
.summaryPrevBtn a:hover{background-position:0px -50px;}
.summaryNextBtn a{background-position:-50px 0px;}
.summaryNextBtn a:hover{background-position:-50px -50px;}
.summaryNowPage, .summaryTotalPage{position:relative; font-family:'NanumBarunGothicBold'; font-size:22px; margin:6px 0px 0px 0px;}
.summaryNowPage{color:#909090;}
.summaryTotalPage{color:#000000;}
.summaryPageBar{position:relative; width:1px; height:17px; background-color:#909090; margin:6px 0px 0px 0px;}
.summaryDownBtn a, .summaryPrintBtn a{position:absolute; width:41px; height:41px; top:calc((95 * var(--cHeight) / 630)); background-image:url("../img/summary/summaryBtn.png");}
.summaryDownBtn a{left:calc((890 * var(--cWidth) / 1120)); background-position:-100px 0px;}
.summaryDownBtn a:hover{background-position:-100px -50px;}
.summaryPrintBtn a{left:calc((943 * var(--cWidth) / 1120)); background-position:-150px 0px;}
.summaryPrintBtn a:hover{background-position:-150px -50px;}
/* 정리하기 프린트 */
.printDivAll{width:100%;}
.printDiv{position:relative; width:100%; height:1504px !important; background-image:url("../img/bg/printBg.jpg"); page-break-after:always; background-size:contain; background-repeat:no-repeat;}
.printDivAll .summaryContentAll{left:20px; top:172px; width:calc(100% - 40px); -moz-transform-origin:top left; -webkit-transform-origin:top left; -ms-transform-origin:top left; transform-origin:top left; }
.printDivAll .summaryPage{display:block !important; margin-top:30px;}
.printDivAll .printChasiName{position:absolute; left:110px; top:100px; font-family:'NanumSquareB'; font-size:30px;}
#print_win{border:none;}
@media print{
	body{overflow:visible;}
	.printDiv{-webkit-print-color-adjust:exact;}
	.printDiv:last-child{page-break-after:avoid;}
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
	.printDiv{height:calc(1504px * 0.65) !important;}
	.printDiv .summaryContentAll{left:calc(20px * 0.65); top:calc(172px * 0.65); transform:scale(0.65);}
	.printDivAll .summaryPage{margin-top:calc(30px * 0.65);}
	.printDivAll .printChasiName{left:calc(110px * 0.65); top:calc(100px * 0.65); font-size:calc(30px * 0.65);}
	@media print{
		body{overflow:visible;}
		.printDiv{-webkit-print-color-adjust:exact;}
		.printDiv{page-break-after:avoid;}
	}
}