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

body{font-family: 'Nanum Gothic', sans-serif; overflow: hidden; width: 1000px; height: 600px; overflow-x:hidden; font-size:16px; background:#fff;}
.wrap{width:100%;}
.inner{overflow:hidden; position:relative;}


/* 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}


/* 상단 */
.top{background:#1D1D1D; width:100%; height:40px; line-height:40px; color:#fff; padding:0 10px; box-sizing:border-box; overflow:hidden;}
.top h2.main_title{font-size:22px; display:inline-block; float:left; font-weight:bold;  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 48%;}
.top h3.sub_title{display:inline-block; float:right; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width: 48%;}

/* 하단 */
.bottom{width:100%; height:40px; line-height:40px; background:#1D1D1D; color:#fff; padding-right:10px; box-sizing:border-box; }
.bottom .logo{width:120px; height:100%; background:#fff; text-align:center; float:left; display:inline-block;}
.bottom .logo img{width:70%; height: auto;}
.bottom .pasingBox {position:relative;     display: flex;}
.bottom .pasingBox .button{width:153px; padding:0 10px; box-sizing:border-box; height:100%; display:inline-block; float:left;}
.bottom .pasingBox .button ul{width:100%; overflow:hidden; }
.bottom .pasingBox .button ul li{float:left; margin-right:5px;}
.bottom .pasingBox .button ul li a{width:100%; height:100%; display:block;}
.bottom .pasingBox .timeBox{display:inline-block;  width: 520px; height:40px;  position:relative; margin: 0 auto;}
.bottom .pasingBox .timeBox .bar_box {width:366px; height:15px; background:#fff; display:inline-block; position:absolute; top:50%; transform:translateY(-50%);}
.bottom .pasingBox .timeBox .bar_box .time_bar{width:0%; height:15px; background:#FFF199;}
.bottom .pasingBox .timeBox ul{display:inline-block; position:absolute; right: 35px; }
.bottom .pasingBox .timeBox ul li{float:left; display:inline-block;}

.bottom .pasingBox .timeBox .replay{position: absolute; background: none; border: 0px; cursor: pointer;  top:50%; transform:translateY(-50%); right:0px;}

.bottom .pasingBox .pasing{display:inline-block; float:right; }
.bottom .pasingBox .pasing ul li{float:left; display:inline-block; font-size:22px;}
.bottom .pasingBox .pasing ul li a{width:100%; height:100%; display:block;}
.bottom .pasingBox .pasing ul li.now a{color:#FFF199;}
.bottom .pasingBox .pasing p.next{position:absolute; right:-11px; top:-68px; z-index:99;}



/* 내용 */
.contentBox{background:url(../images/contents_bg.png) no-repeat center/cover; height:520px; width:100%; position:relative;  z-index:-3;}

/* 인덱스 */
.index{width:90px; height:432px; background:#FFF199; border-radius:0 14px 14px 0;  position:absolute; left:-90px; top:50%; transform:translateY(-50%); padding:15px 10px;
 box-sizing:border-box; }
.index ul li{height:50px; line-height:50px; text-align:center; border-bottom:1px solid rgba(0,0,0,16%); z-index:1000;}
.index ul li:last-child{border-bottom:none;}
.index ul li{width:100%; height:100%; display:block;  font-size:14px; font-weight:bold; cursor:pointer;}
.index ul li:hover{color:#FF3D00;}
.index ul li.selected{color:#FF3D00;}
.index button{position:absolute; right:-48px; top:50%; transform:rotate(90deg) translateY(-50%); background:#FFF199; border-radius: 5px 5px 0px 0px ;
 border:none; letter-spacing:6px; padding:8px 10px 8px 15px; box-sizing:border-box; cursor:pointer; font-size:14px; font-weight:bold; }
.index.open{left:0;}

/* 내용 - 1 */
.titleBox{width:850px;  height:auto; background:#fff; box-shadow:5px 5px 10px rgba(0,0,0,16%); border-radius:19px; position:absolute; top:50%; left:50%;
 transform:translate(-50%, -50%); text-align:center; padding:60px 0; box-sizing:border-box; z-index:-2;}
.titleBox .main_title{font-weight:normal; font-size:56px; margin-bottom:50px;overflow: hidden; word-break: break-word; 
line-height:1.5; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}
.titleBox .sub_title{font-weight:normal; font-size:24px;overflow: hidden; word-break: break-word; 
line-height:1.5; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;}}
.effect_bg{width:100%; height:100%; background:url(../images/main_bg_point.png) no-repeat center; z-index:100;}

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

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


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


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

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


/* 내용 - 2 */
.contentBox_02{background:url(../images/contents_bg.png) no-repeat center/cover; height:520px; width:100%;}
.contentBox_02 h3.title{font-size:35px; font-weight:bold; padding:15px 0; text-align:center; }
.contentBox_02 .content{width:850px; height:384px; background:#fff; box-shadow:5px 5px 10px rgba(0,0,0,16%); border-radius:19px; margin:0 auto; padding:25px; box-sizing:border-box;
 overflow:hidden;}
.contentBox_02 .content .content_inner{overflow-y:auto;  font-weight:bold;  font-size:18px; width:100%; height:100%;}
.contentBox_02 .content .content_inner p{font-weight:bold;}
.contentBox_02 .content .content_inner ul.step{ display:inline-block; float:left; width:85px; /*border-right:1px solid  rgba(0,0,0,11%);*/ position:relative;}
.contentBox_02 .content .content_inner ul.step:after{position:absolute; content:''; width:1px; height:95%; background: rgba(0,0,0,11%); right:1px; top:10px; z-index:1;}
.contentBox_02 .content .content_inner ul.step li{margin-bottom:23px; position:relative;}
.contentBox_02 .content .content_inner ul.step li:last-child{margin-bottom:0;}
.contentBox_02 .content .content_inner ul.step li:after{position:absolute; content:''; width:8px; height:8px; border-radius:100px; background:#1d1d1d; right: -4%; top:50%;
 transform:translateY(-50%);  z-index:2;}
.contentBox_02 .content .content_inner ul.step li.selected:before{position:absolute; content:'';width:16px; height:16px; border-radius:100px; background:#FFF199; right: -8%; top:50%;
 transform:translateY(-50%);}
.contentBox_02 .content .content_inner ul.step li.selected{color:#FF3D00; position:relative;}
.contentBox_02 .content .content_inner ul.step li.selected:after {background:#FF3D00;}
.contentBox_02 .content .content_inner ul.step_name{overflow:hidden; display:inline-block; float:right; width:666px;}
.contentBox_02 .content .content_inner ul.step_name li{margin-bottom:23px;}
.contentBox_02 .content .content_inner ul.step_name li:last-child{margin-bottom:0;}
.contentBox_02 .content .content_inner ul.step_name li.selected{color:#FF3D00;}

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



/* 내용 - 3 */
.content_left{width:412px; display:inline-block; float:left; height:384px; background:#fff; border-radius:19px; box-shadow:5px 5px 10px rgba(0,0,0,16%); padding:25px;
 box-sizing:border-box; border:1px solid #002A01; position:relative;  }
.content_left_inner{ overflow-y: auto; height: 100%;}

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

.content_right{width:412px; display:inline-block; float:right;height:384px; background:#fff; border-radius:19px; box-shadow:5px 5px 10px rgba(0,0,0,16%); padding:25px;
 box-sizing:border-box;  border:1px solid #320047; position:relative;}
.content_right_inner{ overflow-y: auto; height: 100%;}

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

.content_inner_02{width:850px;  margin:0 auto; position:relative;}
.content_inner_02 h2.title{position:absolute; left:50%; transform:translateX(-50%); top:-10%;}
.content_inner_02 ul.list{width:100%;  font-weight:bold; margin-top:20px;}
.content_inner_02 ul.list li{margin-bottom:20px; line-height:1.8;}

/* 내용 - 4 */
.quizBox{width:100%; height:129px; background:#fff; border-radius:19px; box-shadow:5px 5px 10px rgba(0,0,0,16%);  box-sizing:border-box; position:relative;
 line-height:129px; display: flex; align-items: center;}
.quizBox p.quiz{font-size:20px; font-weight:bold; text-align: left; line-height: 30px;    max-height: 70%;     overflow-y: auto;}



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


.quizBox h2.num{   }
.ox{width:100%; overflow:hidden; margin-top:20px;}
.ox li{float:left; display:inline-block; width:50%; text-align:center; }

div.answer{width:100%; height:520px; position:absolute; z-index:999; background:rgba(0,0,0,30%); left:0; top:50%; transform:translateY(-50%); display:none;}
div.answer .answerBox{width:482px; max-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%; max-height:133px; overflow-y:auto; border-radius:10px; background:#fff; padding:15px;  box-sizing:border-box; line-height:1.5; margin-bottom:15px;}
div.answer .answerBox p.next{color:#fff; text-align:center; font-weight:bold;}
div.answer .answerBox p.next a{width:100%; height:100%; display:inline-block;}

div.mistake{width:100%; height:520px; 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:482px; background:#CC0000; height:122px;}
div.mistake .mistakeBox h3{font-size:40px; color:#fff; text-align:center; margin-bottom:20px;}
div.mistake .mistakeBox p.replay{color:#fff; text-align:center; font-weight:bold;}
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{height: 382px; }
.videoBox video{  height: 100%;   border-radius: 33px; position: relative; overflow: hidden;}


/* 내용 - 6 */
.listBox{ max-height:220px; overflow-y:auto; margin-top:20px; }
.listBox::-webkit-scrollbar{width:5px;}
.listBox::-webkit-scrollbar-track{background:#ddd; border-radius:100px;}
.listBox::-webkit-scrollbar-thumb{background:#1d1d1d; border-radius:100px;}




.quiz_list{width:100%;}
.quiz_list li{width:100%;   padding:10px 20px; box-sizing:border-box; line-height:1.5; overflow:hidden; }
.quiz_list li a{font-weight:bold; width:100%; height:100%; display:block;} 
.quiz_list li a p.num{display:inline-block; float:left; width:3%; position:relative;}
.quiz_list li a p.text{width:97%; display:inline-block; float:right;}
.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:124px; height:36px; line-height:36px; background:#FFF199; border-radius:11px; text-align:center;  overflow:visible; box-shadow:3px 3px 6px rgba(0,0,0,16%);
 position:absolute; left:50%; bottom:53px; transform:translateX(-50%);}
.check_btn a{width:100%; height:100%; display:block; font-weight:bold;}

/* 내용 - 7 */
.content_inner_06{font-weight:normal !important; line-height:1.9; }
.print_btn{width:124px; height:36px; line-height:36px; background:#FFF199; border-radius:11px; text-align:center; overflow:visible; box-shadow:3px 3px 6px rgba(0,0,0,16%);
 position:absolute; left:50%; bottom:55px; transform:translateX(-50%);}
.print_btn a{width:100%; height:100%; display:block; font-weight:bold;}


/* 내용 - 8 */
.content_08{padding:0 !important;}
.this_time{width:100%; height:50%; overflow:hidden;}
.this_time_inner{width:100%; padding:40px 20px; box-sizing:border-box; height:100%; overflow:hidden;}
.iconBox{width:15%; display:inline-block; float:left; text-align:center; margin-right:20px;}
.this_time_inner .iconBox{ border-right:1px solid #414141;}
.iconBox p.img{margin-bottom:20px;}
.iconBox p.title{font-size:23px; font-weight:bold;}
.this_time_inner .iconBox p.title{color:#414141;}
.next_time{width:100%; height:50%; background:#414141; color:#fff;}
.next_time_inner{width:100%; overflow:hidden;  padding:40px 20px; box-sizing:border-box; height:100%;}
.next_time_inner .iconBox{ border-right:1px solid #fff;}


div.list{width:82%;  display:inline-block; float:right; overflow-y:auto; height:108px;}
div.list h3{margin-bottom:10px;}
div.list ul{width:100%;  overflow:hidden; line-height:1.5; font-weight: bold;}
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;}


/* 내용 - 메모장 */
div.memo{width:100%; height:520px; position:absolute; z-index:999; background:rgba(0,0,0,30%); left:0; top:50%; transform:translateY(-50%); display:none;}
div.memo .memoBox textarea{width:482px; 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%,-50%);padding:20px; box-sizing:border-box; border:none; outline:none; overflow:hidden; resize: none;}
div.memo .memoBox .close_btn{position:absolute; color:#fff; font-weight:bold; font-size:40px; left:75%; top:18%; 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:15%; transform:translateX(-50%);} 


/*ddrive*/
#dhtmltooltip{
    position: absolute;
    width: auto;
    max-width : 800px;
    line-height: 1.5;
    border: 1px solid black;
    padding: 5px 10px;
    background-color: white;
    visibility: hidden;
    z-index: 999;
    /*Remove below line to remove shadow. Below line should always appear last within this CSS*/
    filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
    font-size: 13px;
    color: #000;
}