@charset "utf-8";
/* CSS Document */

/*--- common selector ---*/
* {margin:0; padding:0;}
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css); 
@import url(//fonts.googleapis.com/earlyaccess/notosanschinese.css);
@font-face{
 font-family:hansans;
 src:url('/webfont/SourceHanSans-Regular.eot');
 src:local(※),
 url('/webfont/SourceHanSans-Regular.woff') format('woff');
 }

* {
	font-family: "Noto Sans KR", nanum gothic, sans-serif; line-height:130%
}

*:lang(ko) { font-family: "Noto Sans KR", nanum gothic, sans-serif; } 

@font-face {
	font-family:ng;
	src:url(../css/font/NanumGothic.eot);
	src:local(※), url(../css/font/NanumGothic.ttf) format('truetype'), url(../css/font/NanumGothic.otf) format('opentype');
}
body input {
	font-family: "Noto Sans KR", nanum gothic, sans-serif; 
}

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,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;background:transparent;}
body{line-height:1;}
dl,ul,ol,li{list-style:none;}
blockquote,q{quotes: none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
address,caption,cite,code,dfn,em,strong,th,va{font-style:normal;}
legend,caption{visibility:hidden; height:0; width:0; font-size:0;}
hr {display: none;}
table {border-collapse: collapse; border-spacing: 0;}

body,input,select,textarea{ color:#272727; font-weight:normal;} /* 137.5% == 22px */
body{background-color:#fff;-webkit-text-size-adjust:none;}
hr{display:none;}
img,fieldset{border:0;}
input,select,textarea{vertical-align:middle;}
img { vertical-align:top; }
ul,ol,li{list-style:none;}
a{color:#666;text-decoration:none;text-overflow:ellipsis;-o-text-overflow:ellipsis;}
a:link,a:hover,a:active{text-decoration:none;}
strong{font-weight:bold;}
input[type="text"]{-webkit-appearance:none;-webkit-border-radius:0;}
input:checked[type="checkbox"]{background-color:#fff;-webkit-appearance:checkbox;}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal;}
h1{text-align:center;}
input.checkbox {width:13px;height:13px;vertical-align:top; padding:0px; margin:0px;}
.blind{display:none;}
.clear{clear:both;}

/*--- layout ---*/
html, body{height:100%;margin:0;padding:0;}
body{text-align:center;}
.index_bg{background:#eef1f4;}
#wrapper{position:relative;width:98%;height:100%;height:auto !important;min-height:90%;max-width:650px;min-width:290px;margin:0 auto;text-align:left; padding-bottom:30px}

/* index */
.top{background:url(../image/ci_logo.png) no-repeat 2.5% 18px; height: 48px }
.top_login{position:absolute;top:9px;right:2.5%; width:38px;height:36px }
.top_login a{ display:block;width:38px;height:36px;background:url(../image/btn_login.png) no-repeat; cursor:pointer}
.top_logout{position:absolute;top:9px;right:2.5%; width:38px;height:36px }
.top_logout a{ display:block;width:38px;height:36px;background:url(../image/btn_logout.png) no-repeat; cursor:pointer}
.indexWrap{position:relative;!important;min-height:90%;max-width:650px;min-width:290px;margin:0 auto;line-height:55px; color:#555;font-weight:500; font-size:17px;width:95% ;}
.indexWrap .lec_date{font-size: 14px; color: #646464; padding: 0 10px 5px 0; font-weight: 300; text-align: right}
.indexWrap .tob_banner{ position: relative; border-radius: 10px;box-shadow: 0 0 5px 1px #e8ecef; background:url(../image/top_titbg.png) repeat-x; text-align: center;box-shadow: 0 0 5px 1px #e8ecef;}

.indexWrap .tob_down{ position: relative; border-radius: 10px; text-align: center;background:#f9fbfc url(../image/ico_test.png) no-repeat 5px 10px; padding:13px 0 15px 25px;letter-spacing:-1px; clear: both; font-size: 14px; color: #aaaaaa;}
.indexWrap .tob_down a{font-size: 14px; color: #414141; padding: 0 4px; font-weight: 400;}
.indexWrap .tob_down span {display: inline-block;margin: 0 6px;width: 1px;height: 12px;line-height: 12px;background: #ddd;text-indent: -9999px;}

.indexWrap .tob_down2{ position: relative; border-radius: 10px; text-align: center;background:#f9fbfc url(../image/ico_down2.png) no-repeat 5px 10px; padding:13px 0 15px 25px;letter-spacing:-1px; clear: both; margin-bottom: 5px }
.indexWrap .tob_down2 a{font-size: 14px; color: #414141; padding: 0 7px; font-weight: 400;}
.indexWrap .tob_down2 span {display: inline-block;margin: 0 0px;width: 1px;height: 12px;line-height: 12px;background: #ddd;text-indent: -9999px;}

.indexWrap .index_tit{ position: relative; font-size: 18px; font-weight: 600; color: #555; padding: 32px 0 10px 0; clear: both}
.indexWrap .index_tit .tit_date{position: absolute; right: 1px; top: 36px; font-size: 14px; color: #646464; padding: 0 10px 5px 0; font-weight: 300; text-align: right;}
.indexWrap .index_plus{font-size: 14px; text-align: left;font-size: 16px; font-weight: 500; color: #555; text-align: center}
.indexWrap .index_plus .plus_lec1{position: relative; width: 32.4%; float: left; background:#fff; border-radius: 10px; height: 90px; padding-top: 10px; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef;}
.indexWrap .index_plus .plus_lec2{position: relative; width: 32.4%; float: left; margin:0 4px;background:#fff; border-radius: 10px; height: 90px; padding-top: 10px;; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef;}
.indexWrap .index_plus .plus_lec3{position: relative; width: 32.4%; float: left; background:#fff; border-radius: 10px; height: 90px;padding-top: 10px; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef;}

.indexWrap .index_plus .ico_go{ position: absolute; right: 8px; top: 60%; width: 30px; height: 30px; background:url(../image/ico_go.png) no-repeat 0px 0px}
.indexWrap .index_free{position: relative; background:#fff; border-radius: 10px; text-align:left;padding:18px 25px 19px 15px;letter-spacing:-1px; clear: both; margin-bottom: 25px;font-size: 16px; font-weight: 500; color: #555; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef; }
.indexWrap .index_free .ico_go{ position: absolute; right: 9px; top: 15px; width: 30px; height: 30px; background:url(../image/ico_go.png) no-repeat 0px 0px}
.indexWrap .hl{color: #6164f1;}
.index_btn {width: 100%;min-width: 290px;text-align: center;border: 1px solid #d4d9dc; border-radius: 10px;background:url(../image/box_line.png) no-repeat center center;padding: 10px 0;height: 40px}
.index_btn .btn_idx{width:45%; margin:0 2.5%; float: left; border-radius: 13px;  box-sizing: border-box;border: 0px solid #d3d5d9;  }
.index_btn .btn_idx a{font-size: 15px; font-weight: 500; color: #777; display: block; padding: 10px 10px}

/* sub */
#header{position: relative; top:0;height:55px; z-index:100; background:#9181e4; width:100%; }
.h_box{position:relative;!important;min-height:90%;max-width:650px;min-width:290px;margin:0 auto;line-height:55px; color:#fff;font-weight:500; font-size:17px;letter-spacing:-1px; }
.h_box .btn_pre{position:absolute;top:3px;left:0px; width:35px;height:50px }
.h_box .btn_pre a{ display:block;width:35px;height:50px;background:url(../image/btn_pre.png) no-repeat 8px 12px; cursor:pointer}
.h_box .btn_home{position:absolute;top:3px;right:0px; width:35px;height:50px }
.h_box .btn_home a{ display:block;width:35px;height:50px;background:url(../image/btn_home.png) no-repeat 2px 10px; cursor:pointer}
.subWrap{ position:relative;margin: 0 auto;width:100%; padding-top:100px}
.s_box{position:relative;width:92%;height:100%;height:auto !important;min-height:100%;margin:0 auto; }

/* list */
.listWrap{ }
.s_box .txt_guide{font-size:14px;color: #646464;font-weight:400;text-align:right; height: 30px; padding: 25px 0 3px 0 }
.s_box .txt_guide img{ vertical-align: middle}
.table_top{ }
table.slist{width:100%; text-align:center;  cellpadding:0; cellspacing:0;}
table.slist th{text-align:center;height:35px;padding:0}
table.slist th img{ vertical-align:middle}
table.slist td{line-height:130%;text-align:center;padding:10px 0; border:1px solid #e8e9eb;background:#fff;}
table.slist tr{}
table.slist td.compl{background:#c1b2f7;}
table.slist td.compl a.num{color: #fff}
table.slist td.next{position:relative;  box-sizing: border-box; background:#fff;}
table.slist .num{}
table.slist a.num {font-size:17px; font-weight:500; color:#565656; width:100%;  display: block; line-height:38px;letter-spacing:-1px;}
table.slist a.ico {width:100%;  display: block; height: 35px; vertical-align:}
table.slist .next > a{ width: 100%; height: 100%; display: block; }
table.slist .next > a img{width: 100%; max-width: 54px;}

.bottom_btn{ position: relative; padding: 5px 0; height: 25px }
.bottom_btn .btn_leclist{ position: absolute; text-align: center;box-sizing: border-box; background:#a0a4cd;  right: 0; width: 90px; margin: 0 auto;border-radius: 7px;}
.bottom_btn .btn_leclist a{ display: block; padding: 5px 0;font-weight:500;font-size:15px;color: #fff}
.s_box .guide_tit{font-size:17px;font-weight:700; text-align:left; padding: 20px 0 10px 25px;background:url(../image/ico_box.png) no-repeat 2px 18px; color: #646464 }
.s_box .guide_txt{font-size:14px;font-weight:300; text-align:left; padding: 0 0 10px 12px;background:url(../image/ico_txt.png) no-repeat 3px 2px; color: #646464}

/* detail */
.dtilWrap{position:relative;width:100%;height:100%;height:auto !important;min-height:100%;margin:0 auto;}
.tit_day{font-size:23px;font-weight:700; text-align:center; color: #6861e4; padding: 18px 0 6px 0;letter-spacing:-1px;background:url(../image/tit_line.png) no-repeat center;  }
.dtilWrap .tit{position:relative;font-size:21px;font-weight:700;  color: #444; padding: 18px 0 10px 0;letter-spacing:-1px; }
.dtilWrap .txt > p{font-size: 14px;  font-weight: 300; letter-spacing: -0.05em;    color: #777;     padding: 3px 0 15px 0;}
.dtilWrap .box_que{ position: absolute; top: 55px; left: 40px; background: #fff; border-radius: 5px;z-index: 500; font-size: 15px; font-weight: 400; color: #666; padding:35px 20px 15px 18px; border: 1px solid #9592cb; text-align: left;box-shadow: 0 0 5px 1px #e8ecef;}
.dtilWrap .box_que .btn_close{position:absolute;top:5px;right:-2px; width:35px;height:30px }
.dtilWrap .box_que .btn_close a{ display:block;width:35px;height:30px;background:url("../image/box_close.png") no-repeat 4px 4px; cursor:pointer}
.dtilWrap .box_que .box_arrow{position:absolute;top:-11px;left:63px; width:20px;height:20px;background:url("../image/box_arrow.png") no-repeat 0 0}
.dtilWrap .box_que ul{}
.dtilWrap .box_que ul li{background:url("../image/ico_check2.png") no-repeat 0 0; padding: 0 0 10px 23px}
.dtilWrap .box_que ul li .hl{ color: #333; font-weight: 600}

.dtilWrap .item{font-size:15px;font-weight:300; }
.dtilWrap .item a{padding: 3px 0 1px 27px;font-size:15px;color: #333; font-weight:500; background:url(../image/ico_item2.png) no-repeat 0px 0px; display: block}

.dtilWrap .idcheck{  position: absolute; right: 0; top: 17px; font-size:17px;  color: #6861e4 }
.dtilWrap .idcheck input[type=checkbox].css-checkbox + label {display:inline-block; height:px; padding-left:30px !important; line-height:25px !important; background:url(../image/input_chk.png) no-repeat 0 0; background-size:25px; cursor:pointer; vertical-align:middle;}
.dtilWrap .idcheck input[type=checkbox].css-checkbox {overflow: hidden;position: absolute;left: -1000px;width: 1px;height: 1px;}
.dtilWrap .idcheck input[type=checkbox].css-checkbox:checked + label{background-position:0 -50px;}
.dtilWrap .box_lec{ position: relative;border-radius: 15px;  background: #fff; padding: 15px 40px 15px 25px; margin-bottom: 10px;box-shadow: 0 0 5px 1px #e8ecef; font-size: 18px; font-weight: 600; color: #555; cursor: pointer}
.dtilWrap .box_lec .ico_link{ position: absolute; right: 2px; top: 28%; width: 30px; height: 30px; background:url(../image/ico_link.png) no-repeat 0px 0px}
.dtilWrap .txt_detail{font-size:14px;font-weight:400; color: #777}
.dtilWrap .txt_detail .hl{color: #6164f1;font-weight:400;}
.dtilWrap .txt_book{font-size:14px;font-weight:400; color: #00aea0}
.dtilWrap .box_mission{ position: relative;border-radius: 15px;  background: #fff; padding: 19px 10px 15px 10px; margin-bottom: 25px;box-shadow: 0 0 5px 1px #e8ecef;}
.dtilWrap .box_mission .misn_sub1{position: relative;padding: 15px 40px 15px 55px; background: #fff url(../image/ico_type1.png) no-repeat 15px 50%; border-bottom: 1px solid #eef1f4;font-size: 18px; font-weight: 600;color: #555;}
.dtilWrap .box_mission .misn_sub2{position: relative;padding: 15px 40px 10px 55px; background: #fff url(../image/ico_type2.png) no-repeat 15px 50%;border-bottom: 1px solid #eef1f4;font-size: 18px; font-weight: 600;color: #555; cursor: pointer}
.dtilWrap .box_mission .misn_sub3{position: relative;padding: 15px 40px 10px 55px; background: #fff url(../image/ico_type3.png) no-repeat 15px 50%;border-bottom: 1px solid #eef1f4;font-size: 18px; font-weight: 600;color: #555; cursor: pointer}
.dtilWrap .box_mission .misn_sub4{position: relative;padding: 15px 40px 10px 55px; background: #fff url(../image/ico_type4.png) no-repeat 15px 50%;border-bottom: 1px solid #eef1f4;font-size: 18px; font-weight: 600;color: #555; cursor: pointer}
.dtilWrap .box_mission .misn_sub5{position: relative;padding: 15px 40px 10px 55px; background: #fff url(../image/ico_type5.png) no-repeat 15px 50%;border-bottom: 1px solid #eef1f4;font-size: 18px; font-weight: 600;color: #555; cursor: pointer}
.dtilWrap .box_mission .last{border-bottom: 1px solid #fff;}
.dtilWrap .box_mission .ico_link{ position: absolute; right: -7px; top: 30%; width: 30px; height: 30px; background:url(../image/ico_link.png) no-repeat 0px 0px; }
.btn_band{display: block;text-align: center;box-sizing: border-box; background:#6b76f1; margin: 15px 0; width: 52%; margin: 0 auto;border-radius: 13px;}
.btn_band a{ display: block; padding: 13px 0;font-weight:500;font-size:17px;color: #fff}
.guide_txt2{font-size:14px;font-weight:300; text-align:left; padding: 20px 0 10px 14px;background:url(../image/ico_guide.png) no-repeat 0px 23px; color: #646464}
.guide_txt2 .hl{color: #6164f1;font-weight:400;}


/* event */
.eventWrap{position:relative;width:100%;height:100%;height:auto !important;min-height:100%;margin:0 auto;}
.evt_tit{background:url(../image/event_box1.png) no-repeat 7px 18px; padding: 23px 0 0 37px;font-size:22px;font-weight:700;color: #333; clear: both}
.evt_tit .txt{font-size:16px;font-weight:400;color: #666}
.eventWrap .evt_box{ background:url(../image/evt_bg.png) repeat-x; padding: 15px; margin-bottom: 20px}
.eventWrap .evt_box .evt_stit{background: #736df3 url(../image/ico_event.png) no-repeat 8px 50%; ; padding: 15px 5px 15px 38px;font-size:17px;font-weight:500;color: #fff; margin: 10px 0;border-radius:10px; text-align: center;box-shadow: 0 0 5px 1px #e8ecef;}
.eventWrap .evt_box .evt_stit .hl{color:#ffe325}
.eventWrap .evt_box .evt_guide{font-weight:400;font-size:15px;color: #555; padding: 6px 0 15px 0; line-height: 160%}
.eventWrap .evt_box .evt_guide .hl{font-weight:600;font-size:16px;color: #3831de}
.eventWrap .evt_box .evtgui_tit1{font-weight:600;font-size:15px;color: #555;padding: 4px 0 5px 30px;background:url(../image/evt_num1.png) no-repeat 0 0; }
.eventWrap .evt_box .evtgui_tit2{font-weight:600;font-size:15px;color: #555;padding: 4px 0 5px 30px;background:url(../image/evt_num2.png) no-repeat 0 0; margin-top: 15px}
.eventWrap .evt_box .evtgui_tit3{font-weight:600;font-size:15px;color: #555;padding: 4px 0 5px 30px;background:url(../image/evt_num3.png) no-repeat 0 0;margin-top: 15px}
.eventWrap .evt_box .evtgui_txt{font-weight:400;font-size:14px;color: #555;padding: 4px 0 2px 38px;background:url(../image/ico_txt.png) no-repeat 28px 7px;}
.eventWrap .evt_box .evtgui_txt .hl{color:#5f59e9}
.eventWrap .evt_box .input_box{ 
	position: relative; border-radius: 7px; background: #dadee1; padding:0 0 30px 15px; margin-top: 20px}
.eventWrap .input_tit{position: relative; clear: both; padding: 20px 0 10px 5px;font-weight:600;font-size:16px;color: #434343}
.eventWrap .input_tit .hl{color:#3831de}
.eventWrap .input_item{position: relative;clear: both; height: 38px }
.eventWrap .evt_box .input_box input { float: left;width: 100%;height: 35px;outline: none;font-size: 15px;border-top: none;border-right: none;border-left: none;border-image: initial;border-bottom: 1px solid rgb(229, 229, 229);padding: 0px 10px;color: #333;box-sizing: border-box; border-radius: 30px; background: #fff; margin-right: 5px; font-size: 14px}
.eventWrap .btn_confirm{ float: left; text-align: center;box-sizing: border-box; background:#aeafb1; width: 13%; border-radius: 30px;}
.eventWrap .btn_confirm a{ display: block; padding: 7px 0;font-weight:400;font-size:14px;color: #fff}
.eventWrap .guide_txt2{font-size:14px;font-weight:300; text-align:left; padding: 0 8px 10px 25px;background:url(../image/ico_guide.png) no-repeat 10px 3px; color: #646464}

/* lecture */
.top_btn{ position: relative; padding: 10px; height: 30px }
.top_btn .btn_chiquiz{ position: absolute; text-align: center;box-sizing: border-box; background:#898db6;  right: 0; width: 150px; margin: 0 auto;border-radius: 13px;}
.top_btn .btn_chiquiz a{ display: block; padding: 8px 0;font-weight:500;font-size:17px;color: #fff}
.lec_tit{position:relative;font-size:17px;font-weight:600;  color: #444; padding: 21px 0 11px 30px;letter-spacing:-1px;background:url(../image/ico_lec.png) no-repeat 0 19px;  }
.lecWrap{position:relative;width:100%;height:100%;height:auto !important;min-height:100%;margin:0 auto;border: 1px solid #e6eaee; border-radius: 8px; }
.lecWrap ul{}
.lecWrap ul li.lec_link{border-bottom: 1px solid #e6eaee; display: block}
.lecWrap ul li.lec_link a{padding: 10px 20px 10px 10px; display: block;background:url("../image/ico_link.png") no-repeat; background-size: 16px;background-position: center right 8px}


/*로그인*/
.layer_popup {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:url(../image/guide_bg.png);overflow:none ;z-index: 9997;}
.layer_popup .gimg{position:relative;width:100%;height:100%;height:auto !important;min-height:90%;max-width:650px;min-width:290px;margin:0 auto;text-align:left;}
.layer_popup .gimg .top{ position:absolute; top:3px; left:3px; width:100%} 
.layer_popup .gimg .top .viewno {position:relative; float:left; width:130px; height:27px; background:#3a3a3a; text-align:center; margin-right:5px; padding-top:3px;border-radius: 20px; }
.layer_popup .gimg .top .viewno a{color:#fff; font-size:16px;width:130px; height:27px;display: block }
.layer_popup .gimg .top .close {position:relative; float:left; width:30px; height:30px;}
.layer_popup .gimg .top .close a{background: url(../image/bt_close2.png) no-repeat 2px 2px;width:30px; height:30px; display: block }

.login{ padding:30px; min-height: 40vh; max-width: 300px; margin: 0 auto; background-color: #fff; margin-top: 40px;border-radius: 20px; border-top:7px solid #8872fa; position: relative }
.login .bt_close a{ position: absolute; top:13px; right:8px; width:30px; height: 30px; text-indent: -9999px;background: url(../image/bt_close.png) no-repeat 0 0;}
.login .logint{font-weight:700; color:#6b76f1; font-size: 24px; padding-bottom: 20px}

.login .formelem {
    margin-bottom: 10px;
	margin-inline-start: 2px;
    margin-inline-end: 2px;
    padding-block-start: 0.35em;
    padding-inline-start: 0.75em;
    padding-inline-end: 0.75em;
    padding-block-end: 0.625em;
}

.login .Jinp_box input {width: 100%;height: 40px;outline: none;font-size: 15px;border-top: none;border-right: none;border-left: none;border-image: initial;border-bottom: 1px solid rgb(229, 229, 229);padding: 0px;color: #333;box-sizing: border-box;}
.Jinp_box span.Error{font-size: 12px; display: block;  width: 300px; padding-left:0px; letter-spacing: -0.3px;  color: red;  margin-top: 2px;  margin-left: 0px; text-align: left;}

.idcheck{ text-align: right}
.idcheck input[type=checkbox].css-checkbox + label {display:inline-block; height:px; padding-left:15px !important; line-height:25px !important; background:url(../image/input_chk.png) no-repeat 0 0; background-size:25px; cursor:pointer; vertical-align:middle; font-size:15px; }
.idcheck input[type=checkbox].css-checkbox {overflow: hidden;position: absolute;left: -1000px;width: 1px;height: 1px;}
.idcheck input[type=checkbox].css-checkbox:checked + label{background-position:0 -50px;}

.btn_area2{padding: 15px 0 0 0;display: block;text-align: center;box-sizing: border-box;}
.btn_area_join{padding: 10px 0 10px 0;display: block;text-align: center;box-sizing: border-box; background:#6b76f1; margin-top: 4px}
.btn_area_join a{ display: block}
.btn_area_join span{ color: #fff}
.btn_login{padding: 11px 2px 12px;font-size: 15px;background: #000;width: 100%;color: #fff;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #fff}
.find_idpw {width: 100%;max-width: 300px;margin: 0 auto;text-align: center;padding: 15px 0; }
.find_idpw a{color: #000}
.find_idpw span {display: inline-block;margin: 0 20px;width: 1px;height: 12px;line-height: 10px;background: #ddd;text-indent: -9999px;}

/*로그인 추가*/
.login2{ padding:30px; min-height: 40vh; max-width: 400px; margin: 0 auto; margin-top: 40px;position: relative }
.login2 .logint{font-weight:700; color:#6b76f1; font-size: 24px; padding-bottom: 20px; text-align: center}
.login2 .formelem {margin-bottom: 10px;margin-inline-start: 2px;margin-inline-end: 2px;padding-block-start: 0.35em;padding-inline-start: 0.75em;padding-inline-end: 0.75em;padding-block-end: 0.625em;}
.login2 .Jinp_box input {width: 100%;height: 40px;outline: none;font-size: 15px;border-top: none;border-right: none;border-left: none;border-image: initial;border-bottom: 1px solid rgb(229, 229, 229);padding: 0px;color: #333;box-sizing: border-box;}

/* SNS 로그인(아이콘) css */
.login_tit.agree_tit {margin-bottom:13px;  margin-top:30px;}
.login_tit {display: block; width: 100%;  max-width: 350px; margin:0 auto;color: #999;  text-align: center;  position: relative;  font-size: 15px;}
.login_tit::before, .login_tit::after {position: absolute;  content: "";  display: inline-block;  width: 36%;  height: 1px;  background-color: #ccc;  top: 50%;}
.login_tit::before {left: 0;}.login_tit::after {right: 0;}
.join_sns{width: 100%;  max-width: 350px; margin:0 auto; padding-bottom: 15px}
.join_sns li {background-color: #ffffff; background-size: 44px 44px;    float:left; position: relative;}
.join_sns li a {display: block;        width: 44px;        height: 44px;        margin: 6px auto;        }
.join_sns li.google a{background-image: url(../image/icon_circle_google.png); background-repeat: no-repeat;}
.join_sns li.facebook a{background-image: url(../image/icon_circle_facebook.png); background-repeat: no-repeat; width: 45px; height: 46px;}
.join_sns li.apple a{background-image: url(../image/icon_circle_apple.png); background-repeat: no-repeat;}
.join_sns li.naver a{background-image: url(../image/icon_circle_naver.png); background-repeat: no-repeat;}
.join_sns li.kakao a{background-image: url(../image/icon_circle_kakao.png); background-repeat: no-repeat;}
.join_sns li span{color:#000; font-size: 12px; text-align: center; display:inline-block; width: 100%; line-height:20px; letter-spacing: -0.3px;}
.join_sns li.disabled::after{position: absolute; top:6px; left:50%; margin-left:-22px; content:''; display: block; width:44px;height:44px;background:#717171;
        opacity: 60%; border-radius: 22px;}
.join_sns li.disabled span{color:#C1C1C1;}
.join_sns:after{content:'';display: block;clear: both;}
.login-gate .join_sns li{width:20%;}





/*탭*/
.tab{margin: 15px 0 30px;}
.tab > ul{width:100%}
.tab > ul:after{display:block;content:'';clear:both}
.tab > ul > li{display:table;float:left;min-height:40px;box-sizing:border-box}

.tab > ul.n2 > li{width:50%; font-weight: 400;}
.tab > ul > li > a{display:table-cell;width:100%;height:100%; font-size:16px; color:#777;text-align:center;vertical-align:middle;box-sizing:border-box}
.tab .active a {  color: #6861e4;  border-bottom: 2px solid #6861e4;font-weight: 700;}

/* FAQ */
.board_list_type3 > li{display:block;border: 1px solid #e6eaee; border-radius: 8px; margin-top: 8px;}
.board_list_type3 .que{position:relative;padding:20px 40px 20px 38px; color: #000}

.board_list_type3 .que .tit{display:block;overflow:hidden;position:absolute;top:50%;left:8px;width:24px;height:24px;margin-top:-12px;background:url(../image/ico_Q.png) no-repeat 0 0;background-size:24px auto;font-size:1px;color:rgba(0,0,0,0)}
.board_list_type3 .que a{font-size:14px;color:#333}

.board_list_type3 .que .btn{position:absolute;top:50%;right:12px;width:20px;height:12px;margin-top:-6px;border:0;background:url(../image/ico_toggle_arrow.png) no-repeat 0 100%;background-size:14px auto}
:after
.board_list_type3 .que .btn .state{display:inline-block;overflow:hidden;width:1px;height:1px;font-size:1px;color:rgba(0,0,0,0)}

.board_list_type3 .ans{position:relative;padding:15px 15px 20px 15px; background-color: #f3f5f7}
.board_list_type3 .ans .con{font-size:14px;color:#666;line-height:140%; font-weight: 400}
.board_list_type3 .ans .con p{line-height: 150%}
.board_list_type3 .ans .con .hl{font-size:15px;color:#444;line-height:140%; font-weight: 600}
.board_list_type3 .ans .con .hl2{color:#6164f1;line-height:140%; font-weight: 400}
.board_list_type3 .ans .con p a{color:#000;  text-decoration: underline}

.board_list_type3 > li.on .que .tit{background-position:0 100%}
.board_list_type3 > li.on .que .btn{background-position:0 0;}
.board_list_type3 > li.on .ans{display:block}




/* 1:1문의(리스트) */
.inquaryboard_area{margin-bottom: 15px;}
.inquaryboard_area .board_list_type2{width: 100%; border-collapse: collapse;}
.inquaryboard_area .board_list_type2 thead th{padding: 15px 0; font-size: 14px; color: #333;text-align: center;  background-color: #f3f5f7;}
.inquaryboard_area .board_list_type2 thead tr{border-bottom: 1px solid #e6eaee;}
.inquaryboard_area .board_list_type2 tbody tr{border-bottom: 1px solid #e6eaee;}
.inquaryboard_area .board_list_type2 tbody td{padding: 25px 5px; font-size: 14px; text-align: center; color: #000;}
.inquaryboard_area .board_list_type2 tbody td a{color: #333;}
.inquaryboard_area .board_list_type2 tbody td.tal{ padding: 15px 30px 15px 45px;; font-size: 14px; text-align: left !important;  position: relative;}
.inquaryboard_area .board_list_type2 tbody td.date{ color:#555; font-size: 13px; font-weight: 300; letter-spacing: 0; }
.inquaryboard_area .board_list_type2 tbody td.tal span.Qtit{display: block; overflow: hidden; position: absolute; top:37%; left: 13px; width: 24px; height: 24px; margin-top: -2px; background: url(../image/ico_Q.png) no-repeat 0 0; background-size: 24px auto; font-size: 1px; color: rgba(0,0,0,0);}
.inquaryboard_area .board_list_type2 span.Atit{display: block; overflow: hidden; position: absolute; top:37%; left: 13px; width: 24px; height: 24px; margin-top: -12px;font-size: 1px; color: rgba(0,0,0,0);  }

/*1:1문의(작성한글보기)*/
.board_view_type1 .state_box { position: static;  display: flex;    -webkit-box-pack: justify;   justify-content: space-between;   transform: none;    margin-bottom: 6px;}
.board_view_type1 .ac_item {border-top: 1px solid #e6eaee; border-bottom: 1px solid #e6eaee;  margin-top: 8px;}
.board_view_type1 .ac_head {position: relative; display: block; width: 100%; height: auto;  padding: 20px 0px 17px 0px;  text-align: left; border-bottom: 1px solid #e6eaee; background-color:#f3f5f7 }
.board_view_type1 .ac_head .tit_area .kinds { display: inline-block;  font-weight: 700;  font-size: 15px;  color: #603de3;  letter-spacing: -0.5px;  margin-right: 5px;}
.board_view_type1 .ac_head .tit_area .subject { display: inline-block; padding:0px 20px;  font-weight: 700;  font-size: 15px;  color: #111;  letter-spacing: -0.5px;}
.board_view_type1 .ac_panel .inner {padding: 17px 0px 23px 0px; }
.board_view_type1 .ac_panel .reply {font-size: 12px;   margin-bottom: 4px;   padding-left: 20px;   color: #4e2bf4; }
.board_view_type1 .ac_panel .con_area {font-weight: 400;  padding:0px 20px;   font-size: 14px; line-height: 150%;   color: #111;  padding-top: 5px }
.board_view_type1 .state_box .date {  color: #111;  padding-left: 20px;    font-size: 11px;}

/* 1:1문의(작성) */
legend, label.hidden {text-indent: -9999px;  overflow: hidden;  width: 0;  height: 0;   font-size: 0;   line-height: 0;}
select { vertical-align: middle;   -webkit-appearance: none;    background: transparent;}	
textarea {resize: none;  -webkit-appearance: none;}
input, textarea, select { letter-spacing: 0;    border: 0;    outline-style: none;    border-radius: 0;}	
.form { border-top-width: 1px;    border-bottom-width: 1px; }
.divider { margin: 0;   padding: 0;    border: 0;    padding-bottom: 15px;}	
.wrap_inp {position: relative;	display: block; margin-bottom:15px;}
.wrap_inp .inp_tit {position: relative;	    left: 0;    top: 0;    height: auto;    display: block;    margin-bottom: 12px; font-size: 14px; font-weight: bold; color: #000}	
.inp_bundle { display: flex;  -webkit-box-align: center;   align-items: center;  position: relative;  background: #f0f2f5;  border: 1px solid #f0f2f5; border-radius: 8px;  height: 50px;  padding: 0 20px;}
.inp_bundle.focus { border-color: #4e2bf4;  background: #fff;}
.inp_bundle.focus .inp { background: #fff;}
.inp_bundle .inp {display: inline-block;    width: 100%;    height: 100%;    font-weight: 400;    font-size: 15px;    color: #111;    background: transparent;}	
.inp_bundle .select {display: inline-block;    width: 100%;    height: 100%;    font-weight: 400;    font-size: 15px;    color: #111; background-image: url(../image/ico_arrow2.png); background-repeat: no-repeat; background-size: auto 6px; background-position: right center;}
	
.inp_bundle .flex { -webkit-box-flex: 1;    flex: 1 1 0;}	
.textarea_ui textarea { width: 100%;    height: auto;   font-weight: 400;    font-size: 15px;    color: #111;    background: #f0f2f5;    border: 1px solid #f0f2f5;    border-radius: 8px;    padding: 15px 20px; box-sizing: border-box; }

.checkbox_ui{margin-top: 10px; font-size: 14px; }
.use_guide {margin-top: 40px; margin-bottom: 10px;}
.use_guide .tit {font-weight: 700;    font-size: 14px;    color: #111;    margin-bottom: 10px;  }
.bullet_type1 > li {font-weight: 300;  font-size: 14px;  color: #767676;  background:url(../image/ico_txt.png) no-repeat 0 5px; padding: 4px 0 6px 10px;}

/*강의추천*/
.plus_txt{padding:30px 0px 10px 48px;  letter-spacing: -0.05em;   font-size: 16px;     font-weight: 400;    color: #666;  background: url(../image/ico_event2.png) no-repeat 0px 33px;}
.plus_txt > p{font-size: 14px; letter-spacing: -0.05em;  font-weight: 300;   color: #777;     padding: 3px 0 15px 0;}
.dtilWrap .index_plus{ display: flex; font-size: 14px; text-align: left;font-size: 16px; font-weight: 500; color: #555; text-align: center}
.dtilWrap .index_plus .plus_lec1{position: relative; width: 32.4%; float: left; background:#fff; border-radius: 10px; height: 90px; padding-top: 10px; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef;}
.dtilWrap .index_plus .plus_lec2{position: relative; width: 32.4%; float: left; margin:0 4px;background:#fff; border-radius: 10px; height: 90px; padding-top: 10px;; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef;}
.dtilWrap .index_plus .plus_lec3{position: relative; width: 32.4%; float: left; background:#fff; border-radius: 10px; height: 90px;padding-top: 10px; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef;}
.dtilWrap .index_plus .ico_go{ position: absolute; right: 8px; top: 60%; width: 30px; height: 30px; background:url(../image/ico_go.png) no-repeat 0px 0px}

.dtilWrap .hl {color: #6164f1; letter-spacing: -0.02em; }
.dtilWrap .best_lec1 > .hl, .dtilWrap .best_lec2 > .hl{display: block; font-weight:700; font-size: 17px; padding: 7px;}
.dtilWrap .index_plus .best_lec1 > img, .dtilWrap .index_plus .best_lec2 > img{ width:80%; max-width:155px;}
.dtilWrap .index_plus .best_lec1, .dtilWrap .index_plus .best_lec2{position: relative; box-sizing: border-box; width:calc(50% - 2px); margin-right: 2px; float: left; background:#fff; border-radius: 10px; cursor: pointer;box-shadow: 0 0 5px 1px #e8ecef; font-weight: 300; font-size: 14px;  letter-spacing: -0.05em; padding-bottom:20px}
.dtilWrap .index_plus .best_lec1 > .top_bg, .dtilWrap .index_plus .best_lec2 > .top_bg{width: 100%; background-color: #8b9196; margin-bottom: 13px; color: #FFF; font-size: 14px;  top: 0; left: 0; border-top-left-radius: 10px;border-top-right-radius: 10px; padding:7px 10px;  box-sizing: border-box; }
.dtilWrap .index_plus .best_lec1 > p, .dtilWrap .index_plus .best_lec2 > p{padding: 0 15px;}

.dtilWrap .index_plus .best_lec2{margin-left: 2px;float: left;}
.dtilWrap .index_plus .best_lec1 > .top_bg > span, .dtilWrap .index_plus .best_lec2 > .top_bg > span{color:#ffe972; font-weight: 400}

.dtilWrap .best_lec3{width: 100%; border-radius: 10px; position: relative; box-sizing: border-box; background-color: #fffcca; cursor: pointer;  box-shadow: 0 0 5px 1px #e6eaec; font-weight: 300; font-size: 14px;  letter-spacing: -0.05em;  padding:15px 5px; margin-bottom:10px;}
.dtilWrap .best_lec3 > ul {display: flex;  column-gap: 5px;justify-content: center; align-items: center; text-align: center}
.dtilWrap .best_lec3 > ul > li{ position: relative}
.dtilWrap .best_lec3 > ul > li > img{ width:100%; min-width:120px;}
.dtilWrap .best_lec3 > ul > li > p{padding: 0 15px;}
.dtilWrap .best_lec3 > ul > li > .hl{display: block; font-weight:700; font-size: 17px; padding:15px 7px 5px;}
.dtilWrap .best_lec3 > ul > li > .top_bg{background-color: #9181e4; color: #FFF; max-width: 180px; width:100%; margin:0 auto; font-size: 15px;  border-radius:20px; padding:6px 10px;  box-sizing: border-box; }
.dtilWrap .best_lec3 > ul > li > .top_bg > span{color:#fff993; font-weight:400}
@media screen and (max-width: 578px){
	.dtilWrap .index_plus .best_lec2 > .top_bg{ height: 50px; }	
	.dtilWrap .best_lec3 > ul{ column-gap:0px; word-break: keep-all}
	.dtilWrap .best_lec3 > ul > li:first-child{width:65%;}
	.dtilWrap .best_lec3 > ul > li > img{ width:100%; max-width:155px;}
	.dtilWrap .best_lec3 > ul > li > .hl{padding:5px;}}
}

/* booklist */
.booklist_tit{position:relative;font-size:18px;font-weight:700;  color: #444; padding: 18px 0 10px 0;letter-spacing:-1px; }
.booklist{font-size:13px; }
table.blist{width:100%; text-align:center;  cellpadding:0; cellspacing:0;}
table.blist th{line-height:130%;text-align:center;padding:10px 0; border:1px solid #e8e9eb;background:#ddd5f8; font-weight: 500; color: #453791}
table.blist td{line-height:135%;text-align:left;padding:7px; border:1px solid #e8e9eb;background:#fff;}
table.blist td.centerl{text-align:center; color: #9181e4}
table.blist tr{}


/*버튼*/
.btn_area { margin: 0 auto;  width: 90%;  display: block;  text-align: center;  box-sizing: border-box;   margin-top: 15px;    height: 60px}
.btn_area.n1 > .btn_box {width: 55%;    margin: 2%;    margin: 0 auto;    border-radius: 13px;    box-sizing: border-box;    border: 1px solid #d3d5d9;    color: #999;}
.btn_area.n1 > .btn_box.blue a {color: #fff;}
.btn_area.n2 > .btn_box {width: 46%;    margin: 2%;    float: left;    border-radius: 13px;    box-sizing: border-box;    border: 1px solid #d3d5d9;    color: #999;}
.btn_area.n2 > .btn_box.blue a {color: #fff;}
.btn_area.n3 > .btn_box {width: 31%;    margin: 1%;    float: left;    border-radius: 13px;    box-sizing: border-box;    border: 1px solid #d3d5d9;}
.btn_area.n3 > .btn_box.blue a {display: block;    padding: 10px 0;    font-weight: 500;    font-size: 16px;    color: #fff;}
.btn_area.n1 > .btn_box a, .btn_area.n2 > .btn_box a, .btn_area.n3 > .btn_box a {display: block;    padding: 10px 0;    font-weight: 500;    font-size: 16px;    color: #fff;}
.btn_area.n1 > .btn_box a, .btn_area.n2 > .btn_box a, .btn_area.n3 > .btn_box a {color: #999;}
.btn_area.n1 > .btn_box.blue, .btn_area.n2 > .btn_box.blue, .btn_area.n3 > .btn_box.blue { border: 1px solid #6b76f1;    background: #6b76f1;}

/* paginate */
.paginate{text-align:center; margin-bottom: 25px}
.paginate_inner{display:inline-block;width:auto}
.paginate_inner:after{display:block;content:'';clear:both}
.paginate_inner > a{display:inline-block;float:left;width:auto;padding:0 15px 0 14px;font-size:14px;color:#555;line-height:26px;box-sizing:border-box;border: 1px solid #fff;height:26px;}
.paginate_inner > a.prevpage{float:left;width:26px;height:26px;margin-right:5px;padding:0; border: 1px solid #999; border-radius: 5px}
.paginate_inner > a.nextpage{float:left;width:26px;height:26px;margin-left:5px;padding:0; border: 1px solid #999; border-radius: 5px}
.paginate_inner > a.prevpage > span, .paginate_inner > a.nextpage > span{display:inline-block;overflow:hidden;width:1px;height:1px;font-size:1px;color:rgba(0,0,0,0)}
.paginate_inner strong.curr{display:inline-block;float:left;width:auto;padding:0 15px 0 14px;font-size:14px;color:#000;line-height:26px;text-decoration:underline;box-sizing:border-box}
.paginate_inner > a.fir, .paginate_inner > strong.curr.fir, .paginate_inner > a.prevpage + a, .paginate_inner > a.prevpage + strong.curr{background:none}
.paginate_inner strong.curr > span{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px}

/*공지팝업 추가 250211*/
.layer_popup .bt_close a{ position: absolute; top:13px; right:8px; width:30px; height: 30px; text-indent: -9999px;background: url(../image/bt_close.png) no-repeat 0 0;}
.alert_pop{ padding:30px; min-height: 18vh; max-width: 300px; margin: 0 auto; background-color: #fff; margin-top: 200px;border-radius: 20px; border-top:4px solid #d9d9d9; position: relative }
.alert_pop .lpop_txt{ padding: 10px 0 20px 0;font-size: 15px;}
.alert_pop .lpop_txt .hl{ color:#2a80dd;font-weight: 500 }
.alert_pop .lpop_txt .hl2{ color:#2a80dd;font-weight: 500 }
.lpop_txt > dl{letter-spacing: -0.03rem; min-width: 280px;}
.lpop_txt > dl > dt{font-size:1.15rem; font-weight:bold; word-break: keep-all; margin-bottom:10px; }
.lpop_txt > dl > dt.a_ico{position: relative; padding-top: 25px}
.lpop_txt > dl > dt.a_ico::before{content: ''; width: 36px; height: 31px; position: absolute; background: url("../image/ico_alert.png") no-repeat; top: -15px; left: 50%; transform: translate(-50%, 0)}
.lpop_txt > dl > dd.chart{border-top: 1px solid #d9d9d9; background: #f0f6fd; border-bottom: 1px solid #d9d9d9; padding:10px 0; font-size: 0.97rem; color: #000; line-height: 170%;}
.lpop_txt > dl > dd{font-size: 14px; margin:15px 0 5px; color: #555; line-height: 150%;}
@media(max-width:480px){
	.alert_pop {padding:30px 12px 20px;}
}