html {}

/* layout */
#allWrap {position:absolute; width:100%; height:100%; height:100%;  background:#fff;}
#allWrap:after {content:""; display:block; clear:both;}
#wrap {position:relative; left:50%; top:50%; width:1000px; height:630px; margin:-320px 0 0 -490px;}
#logo {position:absolute; left:12px; bottom:0; z-index:100;}

#headTit {position:absolute; left:0; top:0; z-index:1100;}
#slogo {position:absolute; right:0; top:0; z-index:1100;}


/* bg video */
.main_area {position:absolute; left:0; top:0; width:100%; height:100%; background:url('../images/img/bg_background.jpg') center top no-repeat; background-size:cover;}
.main_area video {width:100%;}


/* head fixed */
#lecture {position:absolute; left:0; top:0; padding:0 0 8px 0; background:url('../images/img/bg_lecture.png') right bottom no-repeat; z-index:90;}
#lecture p {display:inline-block; font-size:17px; color:#fff; font-weight:600; padding:12px 34px 0 24px;}
#lecture p span {display:inline-block; font-size:16px; color:#fff; padding:0 0 0 9px; margin:0 0 0 7px; background:url('../images/img/bg_lecture_span.png') left top no-repeat;}
#headTit {position:absolute; right:0; top:0; z-index:1100;}


/* paging */
#paging {display:; position:absolute; right:18px; bottom:9px; z-index:1100;}
#paging span {font-size:15px; color:#fff; line-height:1.2; font-weight:300; padding:0 2px;}
#paging span strong {font-size:19px; color:#fff; font-weight:800; line-height:1.2;}
#paging .pagePrev {display:inline-block; width:30px; height:40px; margin:0 0 -15px 0; background:url('../images/img/btn_page_prev.png') left top no-repeat;}
#paging .pagePrev:hover {background:url('../images/img/btn_page_prev_on.png') left top no-repeat;}
#paging .pageNext {display:inline-block; width:30px; height:40px; margin:0 0 -15px 0; background:url('../images/img/btn_page_next.png') left top no-repeat;}
#paging .pageNext:hover {background:url('../images/img/btn_page_next_on.png') left top no-repeat;}
#paging * {vertical-align:bottom;}
#paging .click {display:none; position:absolute; right:-18px; top:-60px;}


/* common */
textarea::-webkit-input-placeholder { /* WebKit, Blink, Edge */color:#c5c5c5;}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color:#c5c5c5; opacity:1;}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */color:#c5c5c5; opacity:1;}
textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */color:#c5c5c5;}
textarea::-ms-input-placeholder { /* Internet Explorer Edge  */color:#c5c5c5;}

.effectspeak01, .effectspeak02, .effectspeak03, .effectspeak04, .effectspeak05, .effectspeak06, .effectspeak07 {display:none;}


/* navigation */
#indexNavi {position:absolute; left:0%; bottom:0%; width:0%; height:520px; margin:0 0 5%  0; background:#22262a; opacity : 1;  border-radius:0px 10px 10px 0; overflow-y:hidden; z-index:110;}
#navigation {width:0px; height:500px;}
#navigation:after {content:""; display:block; clear:both;}
#navigation > ul {padding:30px 0 0 0;}
#navigation > ul:after {content:""; display:block; clear:both;}
#navigation > ul > li {float:left; text-align:left;}

#navigation > ul > li:nth-child(1) {width:250px; margin:0 0 0 7px;}
#navigation > ul > li:nth-child(1) > #topNavi01 {display:block; width:250px; height:35px; margin-left : -20px; background:url('../images/img/navi01.gif') left top no-repeat; }
#navigation > ul > li:nth-child(1) > #topNavi01:hover {background:url('../images/img/navi01_on.gif') left top no-repeat;}
#navigation > ul > li:nth-child(1) > #topNavi01.hover {background:url('../images/img/navi01_on.gif') left top no-repeat;}
#navigation > ul > li:nth-child(1) > #topNavi01.on {background:url('../images/img/navi01_on.gif') left top no-repeat;}

#navigation > ul > li:nth-child(2) {width:250px; margin:15px 0 0 20px; }
#navigation > ul > li:nth-child(2) > #topNavi02 {display:block; width:250px; height:35px; margin-left : -30px;background:url('../images/img/navi02.gif') left top no-repeat;}
#navigation > ul > li:nth-child(2) > #topNavi02:hover {background:url('../images/img/navi02_on.gif') left top no-repeat;}
#navigation > ul > li:nth-child(2) > #topNavi02.hover {background:url('../images/img/navi02_on.gif') left top no-repeat;}
#navigation > ul > li:nth-child(2) > #topNavi02.on {background:url('../images/img/navi02_on.gif') left top no-repeat;}

#navigation > ul > li:nth-child(3) {width:250px; margin:20px 0 0 5px;}
#navigation > ul > li:nth-child(3) > #topNavi03 {display:block; width:250px; height:35px; margin-left : -20px;background:url('../images/img/navi03.gif') left top no-repeat;}
#navigation > ul > li:nth-child(3) > #topNavi03:hover {background:url('../images/img/navi03_on.gif') left top no-repeat;}
#navigation > ul > li:nth-child(3) > #topNavi03.hover {background:url('../images/img/navi03_on.gif') left top no-repeat;}
#navigation > ul > li:nth-child(3) > #topNavi03.on {background:url('../images/img/navi03_on.gif') left top no-repeat;}

#navigation > ul > li ul {margin:10px 0 0 0;}
#navigation > ul > li ul li {display:block; float:none; padding:0 0 0 10px;}
#navigation > ul > li ul li a {display:block; font-size:15px; color:#fff; font-weight:300; line-height:1.4; margin:0 0 8px 0; padding:0 0 0 12px; }
#navigation > ul > li ul li a:hover {color:#ffd200;}
#navigation > ul > li ul li a.hover {color:#ffd200;}
#navigation > ul > li ul li a.on {color:#ffd200;}
#navigation ul > li:nth-child(2) ul li a {padding:0; background:url('');}




.quizWrap {position:absolute; left:0%; top:0%; width:1000px; height:600px; margin:0 0 0 0; background:url('../images/img/cover_Quiz.jpg') left top no-repeat; z-index:10;}
.quizWrap .quiz {display:none; width:100%; height:100%;}
.quizWrap .quiz:after {content:""; display:block; clear:both;}

.quizWrap .quiz .num {position:relative; left:90px; top:130px; font-family: 'Cafe24Dangdanghae'; font-size:50px; color:#fff;}
.quizWrap .quiz .num u {font-family: 'Cafe24Dangdanghae'; font-size:50px; color:#fff; font-weight:300; text-decoration:none;}
.quizWrap .quiz .num span {position:absolute; left:50%; top:8px; display:inline-block;}
.quizWrap .quiz .num span.o {width:64px; height:60px; background:url('../images/img/img_num_o.png') left top no-repeat; margin:-10px 0 0 -505px;}
.quizWrap .quiz .num span.x {width:64px; height:60px; background:url('../images/img/img_num_x.png') left top no-repeat; margin:-10px 0 0 -505px;}
.quizWrap .quiz .tit {position:absolute; left:165px; bottom:70%; width:750px; font-family: 'Cafe24Dangdanghae';  font-size:30px; color:#fff; line-height:1.2; font-weight:500; letter-spacing:-0.5px; word-break:keep-all;}
.quizWrap .quiz .tit span { font-family: 'Cafe24Dangdanghae';  font-size:30px; line-height:1.2; font-weight:600;color:#9aedff; }
.quizWrap .quiz .tit a { font-family: 'S-CoreDream-3Light';  font-size:25px; line-height:1.2; font-weight:600;color:#9aedff; }
.quizWrap .quiz .tit b { font-family: 'S-CoreDream-3Light';  font-size:24px; line-height:1.2; font-weight:600;color:#fff; }
.quizWrap .quiz .tit li { font-size:20px; line-height:1.2; font-weight:600;color:#fff; }

.quizWrap .quiz .ox {margin:135px 0 0 440px;}
.quizWrap .quiz .ox:after {content:""; display:block; clear:both;}
.quizWrap .quiz .ox ul:after {content:""; display:block; clear:both;}
.quizWrap .quiz .ox ul li {display:inline-block; margin:0 45px;}
.quizWrap .quiz .ox ul li a {display:inline-block; text-indent:-9999px;}
.quizWrap .quiz .ox ul li:nth-child(1) a {width:153px; height:153px; background:url('../images/img/img_quiz_o.png') 50% top no-repeat;}
.quizWrap .quiz .ox ul li:nth-child(1) a.w {width:153px; height:153px; background:url('../images/img/img_quiz_o_wrong.png') 50% top no-repeat;}
.quizWrap .quiz .ox ul li:nth-child(1) a.r {width:153px; height:153px; background:url('../images/img/img_quiz_o_right.png') 50% top no-repeat;}
.quizWrap .quiz .ox ul li:nth-child(2) a {width:153px; height:153px; background:url('../images/img/img_quiz_x.png') 50% top no-repeat;}
.quizWrap .quiz .ox ul li:nth-child(2) a.w {width:153px; height:153px; background:url('../images/img/img_quiz_x_wrong.png') 50% top no-repeat;}
.quizWrap .quiz .ox ul li:nth-child(2) a.r {width:153px; height:153px; background:url('../images/img/img_quiz_x_right.png') 50% top no-repeat;}

.quizWrap .quiz .feedback {display:none; position:absolute; left:0; top: 405px; bottom:0; width:1000px; height:200px ; background:url('../images/img/bg_feedback.png') left top no-repeat; z-index:1;}
.quizWrap .quiz .feedback .fbox {margin:45px 0 0px 45px;}
.quizWrap .quiz .feedback .fbox:after {content:""; display:block; clear:both;}
.quizWrap .quiz .feedback .anwtit {font-family: 'Cafe24Dangdanghae';font-size:30px; color:#fff; font-weight:600; padding:0 0 0px 20px; }
.quizWrap .quiz .feedback .anwtit span {display:inline-block; font-family: 'Cafe24Dangdanghae';  font-size:30px; color:#ffde42; font-weight:600; }
.quizWrap .quiz .feedback .anwtxt {position:absolute; width:900px;  height:80px ;  margin:10px 0px 0px 20px; word-break:keep-all; overflow:hidden;}
.quizWrap .quiz .feedback .anwtxt .scConf {font-size:16px; position:absolute; width:900px; height:100px;  margin:0px 0px 0px 0px; padding:0 0 0px 0; word-break:keep-all; overflow:scroll;}
.quizWrap .quiz .feedback .anwtxt span {position:absolute; left:0; top:6px; display:inline-block; width:60px; height:26px; font-size:20px; color:#ffde42; font-weight:600; line-height:26px; text-align:center; background:#a7f0f8; margin:0 0px 0 0;}
.quizWrap .quiz .feedback .anwtxt p {min-height:26px; font-size:18px; color:#fff; font-weight:600; line-height:1.3; margin:3px 40px 0 0px; word-break:keep-all;}
.quizWrap .quiz .nextQuizBtn , .quizWrap .quiz .resultQuizBtn{display:none; position:absolute; right:50px; bottom:130px;z-index:100;}

.quizWrap .quiz .mChoice {position: absolute; top:190px; margin:0px 0 0 165px;}
.quizWrap .quiz .mChoice:after {content:""; display:block; clear:both;}
.quizWrap .quiz .mChoice ul {text-align:left; margin:0 30px 0 0;}
.quizWrap .quiz .mChoice ul:after {content:""; display:block; clear:both;}
.quizWrap .quiz .mChoice ul li {display:block; padding:0 0 0 0;}
.quizWrap .quiz .mChoice ul li a {position:relative; display:inline-block; font-size:20px;  font-weight:400; color:#fff; line-height:1.5; letter-spacing:0px; padding:0 0 0 29px; word-break:keep-all;}
.quizWrap .quiz .mChoice ul li a span {position:absolute; left:0; top:3px; width:20px; height:20px; text-align:center; font-size:20px; font-weight:400; color:#fff;  line-height:27px; border-radius:10px;}
.quizWrap .quiz .mChoice ul li a.s {color:#9aedff;}
.quizWrap .quiz .mChoice ul li a.s span {color:#9aedff;}
.quizWrap .quiz .mChoice ul li a.r {color:#f2cf2e;  font-weight:300;}
.quizWrap .quiz .mChoice ul li a.r span {color:#f2cf2e;  font-weight:300;}


/* popup */
.notiPop {position:absolute; left:0; top:0; width:100%; height:100%; text-align:center; background:url('../images/img/bg_noti_pop.png') left top repeat; z-index:150;}
.notiPop img.r {position:absolute; left:220px; top:170px; }/*맞았을때*/
.notiPop img.w {position:absolute;left:220px; top:170px; } 
.notiPop img.re {position:absolute; left:220px; top:170px; } 
.notiPop img.dataR {position:absolute; left:50%; top:50%; margin:-144px 0 0 -144px;}


/* result */
.resultWrap {display:none; position:absolute; left:0%; top:0%; width:1000px; height:600px; text-align:center; margin:0px 0 0 0px; background:url('../images/img/bg_resultwrap.jpg') left top no-repeat; z-index:0; }
.resultWrap .thxBox {width:100%; margin:150px 0 0 0px;}
.resultWrap .thxBox .tit {font-family: 'Cafe24Dangdanghae'; font-size:50px; color:#fff; font-weight:600; line-height:1.2;}
.resultWrap .thxBox .totalTxt {font-size:25px; color:#fff; line-height:1.2; padding:0 0 12px 0;}
.resultWrap .thxBox .totalTxt span {font-size:25px; color:#ffde42; line-height:1.2;}
.resultWrap .thxBox .totalTxt u {display:inline-block;font-size:25px; color:#ffde42; font-weight:700; line-height:1.2; text-align:center; text-decoration:none; margin:0 0 -15px 0;}
.resultWrap .thxBox .totalTxt * {vertical-align:top;}
.resultWrap .thxBox .resultTable {width:100%; margin:10px 0 0 0; overflow:hidden;}
.resultWrap .thxBox .resultTable ul {display:inline-block; border:4px #fff solid; border-radius:20px;}
.resultWrap .thxBox .resultTable ul:after {content:""; display:block; clear:both;}
.resultWrap .thxBox .resultTable ul li {float:left; width:156px; text-align:center; border-right:2px #fff solid;}
.resultWrap .thxBox .resultTable ul li:last-child {border-right:0;}
.resultWrap .thxBox .resultTable ul li .q {width:100%; font-family: 'Cafe24Dangdanghae'; font-size:40px; color:#fff; line-height:1.1; padding:4px 0 2px 0; border-bottom:2px #fff solid;}
.resultWrap .thxBox .resultTable ul li .a {display:inline-block; margin:22px 0;}
.resultWrap .thxBox .resultTable ul li .a.o {width:64px; height:60px; background:url('../images/img/img_rt_o.png') left top no-repeat;}
.resultWrap .thxBox .resultTable ul li .a.x {width:64px; height:60px; background:url('../images/img/img_rt_x.png') left top no-repeat;}
.resultWrap .requiz {display:inline-block; margin:14px 0 0 0px;}


/* arrangement */
.arrangementWrap {position:absolute; left:0px; top:0px; width:1000px; height:600px; margin:0px 0 0 0px; background:url('../images/img/cover_arrangement.jpg') left top no-repeat; overflow:hidden; z-index:0;}

.arrangementWrap .page {position:absolute; left:450px; bottom:25px;}
.arrangementWrap .page span {font-size:15px; color:#fff; line-height:20px; padding:0 12px;}
.arrangementWrap .page u {font-weight:800; line-height:24px; text-decoration:none;}
.arrangementWrap .page u.now {font-size:16px; color:#fff;}
.arrangementWrap .page u.total {font-size:15px; color:#fff;}
.arrangementWrap .page .wDivprev {display:inline-block; width:20px; height:20px; margin:0 0 -3px  8px; background:url('../images/img/btn_wdiv_page_prev.png') left top no-repeat;}
.arrangementWrap .page .wDivprev:hover {background:url('../images/img/btn_wdiv_page_prev_on.png') left top no-repeat;}
.arrangementWrap .page .wDivnext {display:inline-block; width:20px; height:20px; margin:0 0 -3px 0; background:url('../images/img/btn_wdiv_page_next.png') left top no-repeat;}
.arrangementWrap .page .wDivnext:hover {background:url('../images/img/btn_wdiv_page_next_on.png') left top no-repeat;}

.arrangementWrap .util {position:absolute; right:40px; top:82px;}
.arrangementWrap .util ul:after {content:""; display:block; clear:both;}
.arrangementWrap .util ul li {float:left; margin:0 0 0 10px;}
.arrangementWrap .util ul li a {display:inline-block; width:55px; height:53px;}
.arrangementWrap .util ul li a.download {background:url('../images/img/btn_util_download.png') left top no-repeat;}
.arrangementWrap .util ul li a.download:hover {background:url('../images/img/btn_util_download_on.png') left top no-repeat;}
.arrangementWrap .util ul li a.print {background:url('../images/img/btn_util_print.png') left top no-repeat;}
.arrangementWrap .util ul li a.print:hover {background:url('../images/img/btn_util_print_on.png') left top no-repeat;}



/* script scroll */
.mCustomScrollbar{ -ms-touch-action: pinch-zoom; touch-action: pinch-zoom; /* direct pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action: auto; touch-action: auto; }
.mCustomScrollBox{ /* contains plugin's markup */position: relative;overflow: hidden;height: 100%;max-width: 100%;outline: none;direction: ltr;}
.mCSB_container{ /* contains the original content */overflow: hidden;width: auto;height: auto;}
.mCSB_inside > .mCSB_container{ margin-right: 0; }
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right: 0; } /* non-visible scrollbar */
.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */margin-right: 0;margin-left: 30px;}
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left: 0; } /* RTL direction/left-side scrollbar */
.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */position: absolute;width: 16px;height: auto;left: auto;top: 0;right: 10px;bottom: 0;}
.mCSB_outside + .mCSB_scrollTools{ right: -26px; } /* scrollbar position: outside */
.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools, 
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */right: auto;left: 0;}
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left: -26px; } /* RTL direction/left-side scrollbar (scrollbar position: outside) */
.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */position: absolute;top: 0;left: 0;bottom: 0;right: 0; height: auto;}
.mCSB_scrollTools a + .mCSB_draggerContainer{ margin: 20px 0; }
.mCSB_scrollTools .mCSB_draggerRail{width: 2px;padding:0;height: 100%;margin: 0 auto;background:#d7d7d7;box-sizing:border-box;-webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px;}
.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */cursor: pointer;width: 100%;height: 10px; /* minimum dragger height */z-index: 1;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */position: relative;width: 10px;height: 10px;margin: 0 auto;border-radius:100px;background:#42b3d9;text-align: center;}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar, 
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width: 12px; /* auto-expanded scrollbar */ }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail, 
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width: 8px; /* auto-expanded scrollbar */ }
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{display: block;position: absolute;height: 20px;width: 100%;overflow: hidden;margin: 0 auto;cursor: pointer;}
.mCSB_scrollTools .mCSB_buttonDown{ bottom: 0; }

/*scrollbar themes*/
/*dark (dark colored scrollbar)*/
.mCS-dark>.mCSB_scrollTools .mCSB_draggerRail{}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{	background:#42b3d9; /* rgba fallback */}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{	background:#42b3d9;}
.mCS-dark>.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark>.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{	background:#42b3d9;}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonUp{	background-position:-80px 0;}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonDown{	background-position:-80px -20px;}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonLeft{	background-position:-80px -40px;}
.mCS-dark>.mCSB_scrollTools .mCSB_buttonRight{	background-position:-80px -56px;}