@charset "UTF-8";
@import url('Pretendard.css');

:root {
  --colorMain:#0068FF;
  --colorSub:#5D57EB;
  --colorBlack:#000;
  --colorGray90:#1E2124;
  --colorGray80:#33363D;
  --colorGray70:#464C53;
  --colorGray60:#58616A;
  --colorGray50:#6D7882;
  --colorGray40:#8A949E;
  --colorGray30:#B1B8BE;
  --colorGray10:#E6E8EA;
  --colorBorderGray:#CDD1D5;
  --colorBgGray:#F4F5F6;
  --colorNavy:#134998;
  --colorBlue:#0052B2;
  --colorGreen:#228738;
  --colorRed:#DE3412;
  --colorWhite:#fff;
}
/********* common_layout *********/
/* html, body {height:100%} */
body {color:var(--colorGray90); font-family: 'Pretendard', 'sans-serif'; font-size:16px;line-height:1.6;letter-spacing:-0.014em;font-weight:400;word-break:keep-all;min-width: 280px;transition: 0.3s ease-in-out;overflow-x:hidden}
i {vertical-align:middle}/*transform:translateY(-0.1em)*/
a, button {transition:0.2s}
sup, sub {line-height:1}
.hide {position: absolute; left: -9999px; overflow: hidden; width: 1px; height: 1px; line-height: 1px; font-size: 1px;}
.wrapper {position: relative; z-index: 1; min-height: 100%;}
#real_contents {width: 100%;overflow:hidden}
.container {position: relative; max-width: 1400px; margin: 0 auto;}

/* skip navi */
.skip_navi {position:absolute; z-index:999999; width:100%; left:0; top:0; text-align:center;}
.skip_navi a {display:block; position:absolute; left:0; top:-9999px; z-index:1; width:100%; height:40px; line-height:40px; background-color:var(--colorGray90); color:#fff; font-size:20px; font-weight:700;}
.skip_navi a:hover, .skip_navi a:focus {top:0;}

.blind1400, .blind1280, .blind1080, .blind768, .blind480 {display:inline-block}
.add1400, .add1280, .add1080, .add768, .add480 {display:none !important}
th.blind1400, th.blind1280, th.blind1080, th.blind768, th.blind480, 
td.blind1400, td.blind1280, td.blind1080, td.blind768, td.blind480 {display:table-cell}
col.blind1400, col.blind1280, col.blind1080, col.blind768, col.blind480 {display:table-column}
colgroup.blind1400, colgroup.blind1280, colgroup.blind1080, colgroup.blind768, colgroup.blind480 {display:table-column-group}

/* 공통 스타일 정의 */
.dis_bl {display:block !important}
.dis_inb {display:inline-block !important}
.dis_in {display:inline !important}
.dis_table {display:table !important;width:100%;height:100%}
.dis_table .tcell {display:table-cell !important;width:100%;vertical-align:middle}
.flex {display:flex}
.flex2 {display:inline-flex}
.fwrap {flex-wrap:wrap}

.agt {align-items:flex-start}
.agc {align-items:center}
.age {align-items:flex-end}

.jsl {justify-content:left}
.jsr {justify-content:right}
.jsc {justify-content:center}
.jsb {justify-content:space-between}

.fl {float:left}
.fr {float:right}
.fn {float:none}

.vt {vertical-align:top !important}
.vm {vertical-align:middle !important}
.vb {vertical-align:bottom !important}
.vbase {vertical-align:baseline !important}

.fw400 {font-weight:400 !important}
.fw500 {font-weight:500 !important}
.fw700 {font-weight:700 !important}
.underline {text-decoration:underline}

.tl {text-align:left !important}
.tc {text-align:center !important}
.tr {text-align:right !important}
.els {display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;overflow:hidden}
.els2 {display:-webkit-inline-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;word-break:break-word;overflow:hidden}

.fs085 {font-size:0.85em}
.fs09 {font-size:0.9em}
.fs095 {font-size:0.95em}
.fs10 {font-size:1em}
.fs105 {font-size:1.05em}
.fs11 {font-size:1.1em}
.fs115 {font-size:1.15em}
.fs12 {font-size:1.2em}

.s_txt {font-size:0.9375rem}
.s_txt_top {margin-bottom:10px}
.s_txt_bottom {margin-top:10px}
.s_txt_left {display:inline-block;margin-right:10px}
.s_txt_right {display:inline-block;margin-left:10px}

.c_main {color:var(--colorMain) !important}
.c_sub {color:var(--colorSub) !important}
.c_red {color:var(--colorRed) !important}
.c_green {color:var(--colorGreen) !important}
.c_blue {color:var(--colorBlue) !important}
.c_navy {color:var(--colorNavy) !important}
.c_black {color:var(--colorBlack) !important}
.c_gray90 {color:var(--colorGray90) !important}
.c_gray80 {color:var(--colorGray80) !important}
.c_gray70 {color:var(--colorGray70) !important}
.c_gray60 {color:var(--colorGray60) !important}
.c_gray40 {color:var(--colorGray40) !important}
.c_white {color:var(--colorWhite) !important}

.bg_main {background-color:var(--colorMain) !important}
.bg_sub {background-color:var(--colorSub) !important}
.bg_red {background-color:var(--colorRed) !important}
.bg_green {background-color:var(--colorGreen) !important}
.bg_blue {background-color:var(--colorBlue) !important}
.bg_navy {background-color:var(--colorNavy) !important}
.bg_black {background-color:var(--colorBlack) !important}
.bg_gray90 {background-color:var(--colorGray90) !important}
.bg_gray80 {background-color:var(--colorGray80) !important}
.bg_gray70 {background-color:var(--colorGray70) !important}
.bg_gray60 {background-color:var(--colorGray60) !important}
.bg_gray40 {background-color:var(--colorGray40) !important}
.bg_gray {background-color:var(--colorBgGray) !important}
.bg_white {background-color:var(--colorWhite) !important}

/* 텍스트 리스트 - dot, line */
.list_txt_group {margin-bottom:20px;padding-bottom:20px}
.list_txt_group:last-child {margin-bottom:0;padding-bottom:0}
.list_txt_group .list_tit {margin-bottom:10px;font-weight:700;color:var(--colorGray90)}
.list_txt_group .list_txt {margin-bottom:6px;font-size:1em;position:relative}
.list_txt_group .list_txt:last-child {margin-bottom:0 !important}
.list_txt_group .list_txt::before {display:none;content:"";background-color:var(--colorGray80);position:absolute;left:0;top:10px}
.list_txt_group .list_txt.red::before {}
.list_txt_group .list_txt.dot {padding-left:10px}
.list_txt_group .list_txt.dot::before {display:block;width:4px;height:4px;border-radius:100%}
.list_txt_group .list_txt.line {padding-left:10px}
.list_txt_group .list_txt.line::before {display:block;width:5px;height:1px;top:0.65em}
.list_txt_group .list_txt.dl {display:flex;column-gap:19px}
.list_txt_group .list_txt.dl::after {width:1px;height:13px;content:'';background-color:var(--colorBorderGray);position:absolute;right:-10px;top:50%;transform:translateY(-50%)}
.list_txt_group .list_txt.dl:last-child::after {display:none}
.list_txt_group .list_txt .dt {display:inline-block;font-weight:500;position:relative;vertical-align:top}
.list_txt_group .list_txt .dd {display:inline-block;vertical-align:top}

.list_txt_group .list_txt.fs_s {font-size:0.95em}
.list_txt_group .list_txt.fs_b {margin-bottom:4px;padding-left:12px;font-weight:500;font-size:1.1em}
.list_txt_group .list_txt.c_main::before {background-color:var(--colorMain)}
.list_txt_group .list_txt.c_sub::before {background-color:var(--colorSub)}
.list_txt_group .list_txt.c_red::before {background-color:var(--colorRed)}
.list_txt_group .list_txt.c_blue::before {background-color:var(--colorBlue)}
.list_txt_group .list_txt.c_gray90::before {background-color:var(--colorGray90)}
.list_txt_group .list_txt.c_gray80::before {background-color:var(--colorGray80)}
.list_txt_group .list_txt.c_gray70::before {background-color:var(--colorGray70)}
.list_txt_group .list_txt.c_gray60::before {background-color:var(--colorGray60)}
.list_txt_group .list_txt.c_gray40::before {background-color:var(--colorGray40)}

/* 상태구분 텍스트 */
.state_txt_group {}
.state_txt_group .state_txt {display:inline-block;margin-right:6px;padding-right:12px;font-weight:500;vertical-align:top;position:relative}
.state_txt_group .state_txt::after {width:4px;height:4px;content:'';background-color:var(--colorBorderGray);border-radius:100%;position:absolute;right:0;top:50%;transform:translateY(-50%)}
.state_txt_group .state_txt:last-child {margin-right:0;padding-right:0}
.state_txt_group .state_txt:last-child::after {display:none}
.state_txt_group .state_txt .current {font-weight:700;text-decoration:underline}
.state_txt_group .state_txt .sbtn {display:inline-block}
.state_txt_group .state_txt .sbtn:hover, 
.state_txt_group .state_txt .sbtn:focus {color:var(--colorSub)}

/* 슬라이드 공통 */
.slide_wrap {height:100%}
.slide_wrap .slide_box {}
.slide_wrap .img_box {display:flex;align-items:center;justify-content:center;width:100%;height:0;padding-bottom:75%;position:relative;overflow:hidden}
.slide_wrap .img_box .img {display:flex;align-items:center;justify-content:center;width:100%;height:100%;background-color:var(--colorBgGray);position:absolute;left:0;top:0}/* 4:3 :75%    // 16:9 :56.25%   9:16 : 177.78%  //  13:9 : 69.23%   9:13: 144.44% */
.slide_btn {display:flex;align-items:center;gap:6px}
.slide_btn .pbar {width:100%;height:2px;font-size:0;line-height:0;background-color:var(--colorBorderGray);background-image:linear-gradient(to right, var(--colorMain), var(--colorMain));background-repeat:no-repeat;background-size:0 100%;position:relative;overflow:hidden;transition:background-size .4s ease-in-out;}
/*.slide_btn .pbar .fill {width:0%;height:100%;font-size:0;line-height:0;background-color:var(--colorMain);position:absolute;left:0;top:0}*/
.slide_btn .ctrl {display:flex;align-items:center;gap:4px}
.slide_btn .btn {font-family:'xeicon';display:inline-block;width:48px;height:48px;color:var(--colorGray50);background-color:var(--colorWhite);background-position:center;background-repeat:no-repeat;box-shadow:0 0 30px rgba(0, 0, 0, 0.15);border-radius:100%;vertical-align:middle;transition:0.3s}
.slide_btn .btn::after {font-size:1.2rem;color:inherit;transition:0.3s}
.slide_btn .btn:hover,
.slide_btn .btn:focus {background-color:var(--colorMain)}
.slide_btn .btn:hover::after,
.slide_btn .btn:focus::after {color:#fff}
.slide_btn .btn.prev, .slide_btn .btn.next {} 
.slide_btn .btn.play, .slide_btn .btn.stop {width:24px;height:24px;color:var(--colorGray90);background-color:rgba(0,0,0,0.2);border:1px solid transparent}
.slide_btn .btn.prev:hover, .slide_btn .btn.next:hover, 
.slide_btn .btn.play:hover, .slide_btn .btn.stop:hover, 
.slide_btn .btn.prev:focus, .slide_btn .btn.next:focus, 
.slide_btn .btn.play:focus, .slide_btn .btn.stop:focus {color:var(--colorSub)}
.slide_btn .btn.prev::after {display:block;content:"\e93d";font-weight:700}
.slide_btn .btn.next::after {display:block;content:"\e940";font-weight:700}
.slide_btn .btn.play::after {display:block;content:"\ea3e";font-size:12px}
.slide_btn .btn.stop::after {display:block;content:"\ea3b";font-size:12px}
.slide_btn .paging {}
.slide_btn .paging .dots {display:inline-flex;align-items:center;column-gap:5px}
.slide_btn .paging:not(.num) {font-size:0;line-height:0}
.slide_btn .paging:not(.num) .dots button {display:block;width:11px;height:11px;font-size:0;line-height:0;background-color:var(--colorWhite);border:1px solid var(--colorGray90);border-radius:12px}
.slide_btn .paging:not(.num) .dots .slick-active button {;background-color:var(--colorGray90)}

/* 메인 팝업 */
.main_pop {position:fixed;z-index:10000}
.main_pop .pop_box {font-size:0}
.main_pop .pop_btn_area {display:flex;align-items:center;justify-content:space-between;padding:10px;color:#fff;background-color:#212121}
.main_pop .pop_btn_area label {}
.main_pop .pop_btn_area input {}
.main_pop .pop_btn_area button {color:#fff}

/* 레이어 팝업 */
.layer_pop {display:none;width:100%;height:100%;font-weight:400;color:var(--colorGray90);background-color:rgba(0,0,0,0.5);position:fixed;left:0;top:0;z-index:10000}
.layer_pop .pop_inner {display:flex;align-items:center;justify-content:center;height:100%}
.layer_pop .pop_wrap {width:100%;max-width:640px;border-radius:8px;overflow:hidden}
.layer_pop .pop_wrap.s1 {max-width:520px}
.layer_pop .pop_wrap.s2 {max-width:700px}
.layer_pop .pop_wrap.s3 {max-width:960px}
.layer_pop .pop_wrap.s4 {max-width:1200px}
.layer_pop .pop_wrap.s5 {max-width:96%}
.layer_pop .pop_head {display:flex;justify-content:space-between;align-items:center;padding:15px 22px;background-color:#EEF4FF}
.layer_pop .pop_head .head_tit {font-size:20px;line-height:1.1;font-weight:700}
.layer_pop .pop_head .btn_pop_close {width:18px;height:18px;font-size:0;line-height:0;background-image:url(/images/edu/kor/user/header/sitemap_close_icon2.png);background-position:left top;background-repeat:no-repeat;background-size:cover}
.layer_pop .pop_body {max-height:76vh;min-height:100px;background-color:#fff;overflow-y:auto}
.layer_pop .pop_body::-webkit-scrollbar {width:8px;height:8px}
.layer_pop .pop_body::-webkit-scrollbar-track {background-color:#fdfdfd}
.layer_pop .pop_body::-webkit-scrollbar-thumb {background-color:#777}
.layer_pop .pop_body::-webkit-scrollbar-thumb:hover {background-color:#1197d5}
.layer_pop .pop_body .pop_cont {padding:22px}
.layer_pop .pop_body .pop_cont .cont_tit {font-size:18px}
.layer_pop .pop_body .page_gap:not(:last-child) {margin-bottom:28px}
.layer_pop .pop_body .list_txt_group {}
.layer_pop .pop_body .list_txt_group .list_txt {margin-bottom:3px}
.layer_pop .pop_body .join_step {margin-bottom:30px}
.layer_pop .pop_tail {padding:15px 10px 27px 10px;background-color:#fff;box-shadow:0 -8px 10px rgba(0,0,0,0.05)}
.layer_pop .pop_tail .cont_btn_list_area {margin-top:0}

/* 팝업 : 배정강사 정보 */
.pop_teacher .teach_profile {display:flex;column-gap:24px}
.pop_teacher .teach_profile .photo {display:flex;align-items:center;justify-content:center;width:174px;height:232px;background-color:var(--colorBgGray);border:1px solid var(--colorBorderGray);overflow:hidden}
.pop_teacher .teach_profile .photo img {}
.pop_teacher .teach_profile .table {display:grid;align-items:stretch;row-gap:24px;width:calc(100% - 198px)}

/* 팝업 : 설문조사 */
.pop_survey1_1 .pop_body .table {margin-bottom:15px}
.pop_survey1_1 .pop_body .table:last-child {margin-bottom:0}

/* 팝업 : 강사 인증번호 연동 확인 */
.pop_auth_number .input_form .inp_btn {display:flex;column-gap:4px}

/* 팝업 : 오프라인 교육신청 유의사항 */
.prec_pop.layer_pop .pop_wrap.s1 {max-width:600px}
.prec_pop .pop_body .pop_cont .cont_tit {}
.prec_pop .pop_body .pop_cont .cont_tit .num {display:inline-block;width:24px;height:24px;margin-right:6px;color:#fff;font-size:16px;line-height:25px;border-radius:100%;background-color:var(--colorMain);vertical-align:text-top}
.prec_pop .pop_body .pop_cont .bd_box.bg {border:0}

/* 팝업 : 학습자료실 내용 상세보기 */
.dr_view {}
.dr_view .pop_body .pop_cont .bd_box {background-color:var(--colorBgGray);border-color:var(--colorBgGray)}




