charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');


/* reset */
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
h1, h2, h3, h4, h5, h6 {font-weight: 700; font-size: inherit;}
a {color: inherit; text-decoration: inherit;}
img {vertical-align: middle;}
a img {border: none;}
li {list-style: none;}
address, em, i {font-style: normal;}
a:focus {outline: none}
button:focus {outline: none}

body{font-family: 'Nanum Gothic', sans-serif;   width:100%; height:100%;  font-size:13px; overflow:hidden; position:relative;}
body::-webkit-scrollbar {display:none;}
.wrap{width:100%; height:100%; position:relative; overflow:hidden; }
.inner{overflow:hidden; position:relative; width:100%; height:100%;  }
html{height:100%; width:100%;}

.contentBox { background:#fff url('../../file/img/cover.png') no-repeat center/cover; }


/* 상단 */
.top{background:#1D1D1D; width:100%; height:40px; line-height:40px; color:#fff; padding:0 10px; box-sizing:border-box; }
.top button.end{background:none; border:none;font-family: 'Nanum Gothic', sans-serif; color:#1d1d1d; cursor:pointer; border-radius:100px; background:#fff;
 padding:3px 10px; box-sizing:border-box; font-weight:bold;}
.top .index{display:inline-block; float:right; }
.top .index button{background:none; border:none; font-family: 'Nanum Gothic', sans-serif; color:#fff; cursor:pointer; letter-spacing:6px; }
ul.index{padding:15px; box-sizing:border-box;  overflow:hidden;color:#1d1d1d; background:#FFF199;  z-index:10;  overflow:hidden; box-shadow:0px 5px 10px rgba(0,0,0,10%);
 width:100%; z-index:1000;  position:absolute; top: -100%; transition: all 0.3s;}
ul.index li{padding-bottom:10px; margin-bottom:10px; text-align:center; position:relative; cursor:pointer;}
ul.index li:after{position:absolute; content:''; width:25px; height:1px; background:#1d1d1d; left:50%; bottom:0; transform:translateX(-50%);}
ul.index li:last-child{padding-bottom:0;  margin-bottom:0px;}
ul.index li:last-child:after{display:none;}
ul.index li a{font-size:15px; width:100%; height:100%; display:block;}
ul.index li.selected a{color:#FF3D00; font-weight:bold;}
ul.index.open{ top: 40px; transition: all 0.3s;}
ul.index li.selected:after{background:#FF3D00;}

/* 하단 */
.bottom{width:100%;  background:#1D1D1D; color:#fff;   overflow:hidden; position:absolute; bottom:0; left:0 ;}
.bar_box{width:100%; height:15px; background:#ddd;}
.bar_box .time_bar{width:50%; height:15px; background:#FFF199; }
.bottom ul{padding:10px; box-sizing:border-box; overflow:hidden;  background:#fff; display:inline-block; float:left; }
.bottom ul li{float:left; display:inline-block; color:#1d1d1d; font-weight:bold; font-size:15px; cursor:pointers;}
.bottom button.next{float:right;  display:inline-block; background:none; border:none; color:#fff; font-family: 'Nanum Gothic', sans-serif;
 letter-spacing:2px;  cursor:pointer; line-height:40px; font-size:18px;}
.bottom button.next span{color:#FFF199;}
.bottom .button{overflow:hidden;  display:flex; align-items: center; justify-content: space-between; box-sizing:border-box; padding: 7px 0px; }
.bottom .button ul{background:none; padding:0px 10px; box-sizing:border-box; }
.bottom .button ul li{margin-right:5px;}
.bottom .button ul li.volume{width:26px; height:26px; border-radius:100%; background:#FFF199; text-align:center; line-height:26px;}
.bottom .pasing{display:inline-block; float:right;}
.bottom .pasing ul{padding:0;}
.bottom .pasing ul li{float:left; display:inline-block; font-size:18px;}
.bottom .pasing ul li a{width:100%; height:100%; display:block; color:#fff; font-weight:normal;}
.bottom .pasing ul li.now a{color:#FFF199;}

/* 내용 */
.contentBox{height:100%; width:100%; position:relative;  }
.content_inner{padding:20px 20px  100px  20px; box-sizing:border-box;  height:100%;  width:100%;  overflow-y:auto; }
.content_inner::-webkit-scrollbar {display:none;}
.content_inner .titleBox{ padding-bottom:20px; width:100%; overflow:hidden;}
.content_inner .titleBox h3{font-size:22px; position:relative; padding-left:15px; box-sizing:border-box;   }
.content_inner .titleBox h3:after{position:absolute; content:''; width:7px; height:7px; background:#1d1d1d; left:0; top:50%; transform:translateY(-50%); border-radius:100px;}
.content{ background:#fff; box-shadow:0px 0px 10px rgba(0,0,0,10%); border-radius:10px; }
.content .wrap{padding:15px;  box-sizing:border-box; overflow:hidden;}
.content .main_title{ font-size:18px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #ddd;}
.content .sub_title{font-weight:normal;}

.content::-webkit-scrollbar{width:5px;}
.content::-webkit-scrollbar-track{background:#ddd; border-radius:100px;}
.content::-webkit-scrollbar-thumb{background:#1d1d1d; border-radius:100px;}



/* 내용 - 메모장 */
div.memo{width:100%; height:100%; z-index:999; background:rgba(0,0,0,50%);  display:none; left:50%; top:50%;  position:absolute;
 transform:translate(-50%,-50%);}
div.memo .memoBox {width: 100%; overflow: hidden; height: 350px; left:50%; top:50%;  position:absolute;
 transform:translate(-50%,-50%); overflow: hidden;}
div.memo .memoBox textarea{width:80%; height:261px; background:#fff; border-radius:27px; box-shadow:5px 5px 10px rgba(0,0,0,20%); left:50%; top:50%;  position:absolute;
 transform:translate(-50%,-45%);padding:20px; box-sizing:border-box; border:none; outline:none; overflow:hidden; resize: none;}
div.memo .memoBox .close_btn{position:absolute; color:#fff;  font-size:30px; left:85%; top:1%; cursor:pointer;}
div.memo.open{display:block;}
div.memo.close{display:none;}
div.memo h3{position:absolute; color:#fff; font-weight:bold; font-size:40px; left:50%; top:-1%; transform:translateX(-50%);}



/* 내용 - 선수학습 */
.list_inner{display:block;}
.list_inner.change{display:none;}
.content .wrap_02{padding:0;}
p.sub_title{text-align:center; margin-bottom:15px; text-align:left; margin-top:10px; line-height:1.5;}
p.sub_title span{font-weight:bold;}
.wrap h3.tit{color:#7D0B00; text-align:center; background: linear-gradient(90deg,#FDF8E2, #FFF2ED); padding:10px 0;box-sizing:border-box;}
.list_wrap{width:100%;  padding:20px; box-sizing:border-box;}
.list_wrap table{ width:100%;  font-size:13px;  }
.list_wrap table th{font-weight:normal; padding:10px 0; box-sizing:border-box; border-bottom:1px solid #ddd;}
.list_wrap table tr:first-child{}
.list_wrap table .quiz{width:60%; line-height:1.9; }
.list_wrap table .o{width:13%; background:#F6FCFF;}
.list_wrap table .x{width:13%; background:#FFF8F8;}
.list_wrap table td{padding:10px 0;  box-sizing:border-box;}
.list_wrap table .o input[type="checkbox"]{ display:none;}
.list_wrap table .o input[type="checkbox"] + label{ display:block; width:15px; height:15px; background:#fff; border:1px solid #ddd;  margin:0 auto; position:relative;}
.list_wrap table .o input[type="checkbox"]:checked + label:after{content:url(../images/check_icon_02.png); position:absolute;  text-align: center;
 width:15px; height:15px; left:50%; top:50%; transform:translate(-50%, -40%);}

.list_wrap table .x input[type="checkbox"]{ display:none;}
.list_wrap table .x input[type="checkbox"] + label{ display:block; width:15px; height:15px; background:#fff; border:1px solid #ddd;  margin:0 auto; position:relative;}
.list_wrap table .x input[type="checkbox"]:checked + label:after{content:url(../images/check_icon_02.png); position:absolute;  text-align: center;
 width:15px; height:15px; left:50%; top:50%; transform:translate(-50%, -40%);}


/* 내용 - 선수학습  결과 */
.result_inner{}
.result_wrap{width:100%;  text-align:center;  padding:20px; box-sizing:border-box;}
.result_wrap .title{width:100%; overflow:hidden; margin-bottom:20px;}
.result_wrap .title h3{font-size:16px; margin-bottom:10px;}
.result_wrap .title h3 i{font-size:25px; color:#FFF199;}
.result_wrap .title h3 span.result{font-size:30px; color:#7D0B00; position:relative;}
.result_wrap .title h3 span.result:after{position:absolute; content:''; left:0; bottom:0; background:#1d1d1d; width:100%; height:2px;}
.result_wrap .title  p.sub_tit{font-weight:normal; font-size:13px; line-height:1.9;}
.result_wrap .title  p.sub_tit span.bold{font-weight:bold;}
.resultBox{}
.resultBox .rating{display:inline-block;width:115px; height:115px; border-radius:100px; border:6px solid #B5B5B5; color:#B5B5B5;}
.resultBox .rating.rating_02{margin:0 5px;}
.resultBox .rating ul{width:100%; overflow:hidden; padding:15px 0; box-sizing:border-box;}
.resultBox .rating ul li{font-size:16px; margin-bottom:5px;}
.resultBox .rating ul li.download_btn{margin-bottom:0; font-size:11px; background:#fff; color:#B5B5B5; border:1px solid #B5B5B5; border-radius:30px; display:inline-block;
 box-shadow:0px 3px 6px rgba(0,0,0,16%);}
.resultBox .rating ul li.download_btn a{width:100%; height:100%;display:block; padding:3px 7px; box-sizing:border-box;}
.resultBox .rating.active li.download_btn{color:#A73300; border:1px solid #A73300;}
.resultBox .rating:hover li.download_btn{color:#A73300; border:1px solid #A73300;}
.resultBox .rating.rating_03.active{border:6px solid #530092; color:#530092; }
.resultBox .rating.rating_02.active{border:6px solid #00399C; color:#00399C; }
.resultBox .rating.rating_01.active{border:6px solid #00630A; color:#00630A; }

.resultBox .rating.rating_03:hover{border:6px solid #530092; color:#530092; }
.resultBox .rating.rating_02:hover{border:6px solid #00399C; color:#00399C; }
.resultBox .rating.rating_01:hover{border:6px solid #00630A; color:#00630A; }


/* 내용 - 2 */
ul.step{ display:inline-block; float:left; width:17%;   position:relative;}
ul.step li{position:relative; margin-bottom:15px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%;}
ul.step li:after{position:absolute; right:-3px; top:50%; transform:translateY(-50%); content:'';  width:7px; height:1px; background:#1d1d1d;  box-sizing:border-box; padding-right:5px;}
ul.step li:last-child{margin-bottom:0px;}
ul.step li.selected{color:#FF3D00; position:relative; font-weight:bold;}
ul.step li.selected:after {background:#FF3D00;}
ul.step_name{overflow:hidden; display:inline-block; float:right; width:80%; }
ul.step_name li{margin-bottom:15px;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width: 100%;}
ul.step_name li:last-child{margin-bottom:0px;}
ul.step_name li.selected{color:#FF3D00;  font-weight:bold;}


/* 내용 - 3 */
.content.left{border:1px solid #002A01;}
.content_left_inner h2.title{color:#002A01; margin-bottom:10px; font-size:22px;}
.content_left_inner ul li{margin-bottom:10px;}
.content_left_inner ul li:last-child{margin-bottom:0;}

.content.right{border:1px solid #320047;}
.content_right_inner h2.title{color:#320047; margin-bottom:10px; font-size:22px;}
.content_right_inner ul li{margin-bottom:10px;}
.content_right_inner ul li:last-child{margin-bottom:0;}


/* 내용 - 4 */
.content.quiz{ }
.content.quiz .quizBox{padding:10px; box-sizing:border-box; line-height:1.7; text-align:center;}
ul.ox{overflow:hidden; margin-top:20px;}
ul.ox li{float:left; display:inline-block; width:50%; text-align:center;}
ul.ox li a{width:100%; height:100%; display:block;}
ul.ox li a img{width:70%;}


div.answer{width:100%; height:100%; position:absolute; z-index:999; background:rgba(0,0,0,30%); left:50%; top:50%;  transform:translate(-50%,-50%); display:none;}
div.answer .answerBox{width:80%; height:261px; background:#192A58; border-radius:27px; box-shadow:5px 5px 10px rgba(0,0,0,20%); left:50%; top:50%;  position:absolute;
 transform:translate(-50%,-50%);padding:15px; box-sizing:border-box;}
div.answer .answerBox h3{font-size:40px; color:#fff; text-align:center; margin-bottom:15px;}
div.answer .answerBox .infoBox{width:100%; height:133px; border-radius:10px; background:#fff; padding:15px;  box-sizing:border-box; line-height:1.5;
 overflow-y:auto;}
div.answer .answerBox p.next{color:#fff; text-align:center; font-weight:bold; position:absolute; left:50%; bottom:10px;  transform:translateX(-50%);}
div.answer .answerBox p.next a{width:100%; height:100%; display:inline-block;}

div.mistake{width:100%; height:100%; position:absolute; z-index:999; background:rgba(0,0,0,30%); left:0; top:50%; transform:translateY(-50%); display:none;}
div.mistake .mistakeBox{border-radius:27px; box-shadow:5px 5px 10px rgba(0,0,0,20%); left:50%; top:50%;  position:absolute;
 transform:translate(-50%,-50%);padding:15px; box-sizing:border-box; width:80%; background:#CC0000; height:122px;}
div.mistake .mistakeBox h3{font-size:40px; color:#fff; text-align:center; }
div.mistake .mistakeBox p.replay{color:#fff; font-weight:bold;  left:50%; bottom:10px;  transform:translateX(-50%); position:absolute;  }
div.mistake .mistakeBox p.replay a{width:100%; height:100%; display:inline-block;}
div.answer.open{display:block;}
div.mistake.open{display:block;}
div.answer.close{display:none;}
div.mistake.close{display:none;}

div.answer .answerBox .infoBox::-webkit-scrollbar{width:5px;}
div.answer .answerBox .infoBox::-webkit-scrollbar-track{background:#ddd; border-radius:100px;}
div.answer .answerBox .infoBox::-webkit-scrollbar-thumb{background:#1d1d1d; border-radius:100px;}



/* 내용 - 5 */
.videoBox video{width:100%; height:250px; background:rgba(0,0,0,10%);  border-radius:33px; box-shadow:5px 5px 10px rgba(0,0,0,16%); position:relative; overflow: hidden;}


/* 내용 - 6 */
.quiz_list_box{width:100%; margin:20px 0;}
.quiz_list{width:100%;}
.quiz_list li{width:100%;  line-height:1.5;margin-bottom:20px;}
.quiz_list li a{ width:100%; height:100%; display:block; font-size:15px;}
.quiz_list li a p.num{display:inline-block; float:left;  margin-right:10px; position:relative; font-weight:bold;}
.quiz_list li a p.text{ }
.quiz_list li.check a{color:#DC0000; }
.quiz_list li.check a p.num:after{position:absolute; content:url(../images/check_icon.png); left:-8px; top:-10px;}
.check_btn{width:100px; height:26px; line-height:26px; background:#FFF199; border-radius:11px; text-align:center; overflow:visible; box-shadow:3px 3px 6px rgba(0,0,0,16%);
 margin:0 auto;}
.check_btn a{width:100%; height:100%; display:block; font-size:13px; font-weight:bold;}
.check_btn a img{width:15%;}


/* 내용 - 7 */
.print_btn{width:100px; height:26px; line-height:26px; background:#FFF199; border-radius:11px; text-align:center; overflow:visible; box-shadow:3px 3px 6px rgba(0,0,0,16%);
 margin:0 auto;}
.print_btn a{width:100%; height:100%; display:block; font-size:13px; font-weight:bold;}
.print_btn a img{width:15%;}



/* 내용 - 8 */
.this_time{width:100%; height:40%; overflow:hidden;}
.this_time_inner{width:100%; padding:20px; box-sizing:border-box;  overflow:hidden;}
.iconBox{ display:block; text-align:center; margin-bottom:20px;}
.iconBox p.img{ margin:0 auto 10px;}
.iconBox p.img img{width:10%;}
.iconBox p.title{font-size:16px; font-weight:bold;}
.this_time_inner .iconBox p.title{color:#414141;}
.next_time{width:100%; height:50%; background:#414141; color:#fff; border-radius:0 0 10px 10px;}
.next_time_inner{width:100%; overflow:hidden;  padding:20px; box-sizing:border-box;}


div.list{width:100%;  display:inline-block; float:right; overflow-y:auto;}
div.list h3{margin-bottom:10px;}
div.list ul{width:100%;  overflow:hidden;}
div.list ul li{margin-bottom:10px;}
div.list ul li:last-child{margin-bottom:0;}


div.list::-webkit-scrollbar{width:5px;}
div.list::-webkit-scrollbar-track{background:#ddd; border-radius:100px;}
div.list::-webkit-scrollbar-thumb{background:#1d1d1d; border-radius:100px;}