@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');
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff');
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Escoredream';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
    font-weight: 900;
    font-display: swap;
}
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; box-sizing: border-box;}
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;}
button {border: 0;  cursor: pointer;  outline: 0; background-color:transparent; padding: 0; font-family: 'Noto Sans KR', sans-serif;}
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; }
.mt30{margin-top:30px;}
.index_bg{background:#f3f5f7;}
.container{max-width:800px;margin:0 auto;}

/*--- level 정렬 ---*/
.flex_wr2{display:flex;	justify-content:space-between;	flex-wrap: wrap;}
.flex_wr2 div{display:flex; /*상자안에 숫자를 정중앙정렬하기 위해*/
	/*align-items:center; 세로 중앙정렬*/
	justify-content:center; /*가로 중앙정렬*/
	width:46%;
	margin: 2%;}

/*--- index 정렬 ---*/
.flex_wr{display:flex;	justify-content:space-between;	flex-wrap: wrap;}
.flex_wr div{display:flex; /*상자안에 숫자를 정중앙정렬하기 위해*/
	/*align-items:center; 세로 중앙정렬*/
	justify-content:center; /*가로 중앙정렬*/
	width:46%;
	margin: 2%;}
@media(max-width:430px){
	.flex_wr div{
		flex:46%;
	}
}

#wrapper{position:relative;width:98%;max-width:650px;min-width:290px;margin:0 auto;text-align:left; padding-bottom:30px}
#container{max-width:650px; padding: 0 20px;  margin: auto; }
/* ---------- MAIN ---------- */
#MainWrap{width: 100%;  margin:0 auto;}
.headerWrap{display: flex; align-items: center; justify-content: space-between;padding: 10px 20px; width: 100%; position: relative; margin: auto;}
.logo{background:url(../image/ci_logo.png) no-repeat; width: 77px; height: 18px;}
.right {display: flex; align-items: center;  gap: 12px;}
.right a{display: block; width: 100%; height: 100%;}
.right .top_login, .right .top_logout{background:url("../image/ico_login.png") no-repeat; background-size:28px; width: 28px; height:28px; }
.right .top_logout{background-position: 0px -37px}

.titleWrap{text-align: center; padding-top: 20px;}
.title {font-family: 'Escoredream'; font-weight: 800;  margin: 0 0px 25px;  font-size:28px; letter-spacing: -0.03rem; word-break: keep-all; }
.title > strong{color: #2168a5; font-size: 32px; font-weight:900; letter-spacing: -0.05rem; }
#container .date{color: #8d8f93; max-width: 500px; letter-spacing: -0.03rem; font-size: 15px;  padding:0 0 15px 23px; position: relative}
#container .date::before{content: ''; position: absolute; width:18px; height:20px; left: 0; background: url("../image/ico_date.png") no-repeat center; }

.main_inner{display: flex; flex-flow:nowrap;  gap: 12px; width: 100%; max-width: 500px; margin:0 auto 15px}
.level-card {width: 100%; background-color:#FFF; cursor: pointer; border-radius: 15px;  box-shadow: 3.5px 3.5px 7px rgba(0, 0, 0, 0.07); overflow: hidden; color: #fff;  position: relative; display: flex; flex-flow: column; z-index: 1;}
.level-card:hover{box-shadow:5px 5px 14px rgba(0,0,0,0.14);}
.level {font-size: clamp(40px, 6vw, 44px); width: 100%; box-sizing: border-box; line-height: 100%; font-family: 'Escoredream'; font-weight: 800;}
.level.hsk6{background:#c79adf; padding:25px 20px 35px;}
.level.hsk5{background:#eea5b0; padding:25px 20px 35px;}
.level.hsk4{background:#7fcecf;  padding:25px 20px 35px;}
.level.hsk3{background:#f5d556;  padding:25px 20px 35px;}

span.blank{ width: 100%; line-height: 100%; background-color:#FFF; color: var(--black); font-size: 16px; padding:15px 15px 20px; box-sizing: border-box}
/*버튼컬러*/
.play {position: absolute; right:6%; top:53%;  border: none; border-radius: 50%;  width:54px;  height:54px; border: 3px solid #FFF; color:#FFF; z-index: 10;}
.play.hsk6, .play.hsk5, .play.hsk4, .play.hsk3{background-image: url("../image/ico_main_play.png"); background-repeat: no-repeat; background-position: center; background-size:  18px 20px;}
.play.hsk6{background-color:#c79adf;}
.play.hsk5{background-color:#eea5b0;}
.play.hsk4{background-color:#7fcecf;}
.play.hsk3{background-color:#f5d556;}
.date{width: 100%; margin:0 auto;}
.sub-title,  
.sub-txt{ max-width: 500px; width: 100%; margin:0 auto;}
.sub-title{text-align: left; font-family: 'Escoredream'; font-weight:600;  padding:30px 0px 5px;  font-size:20px; letter-spacing: -0.05rem; }
.sub-txt{color: #8d8f93; font-size: 15px;letter-spacing: -0.03rem; padding-bottom: 15px;}
.grammar{align-items: flex-start; padding: 15px; box-sizing: border-box}
.lec-title{color: #6f7173; font-size: 18px; font-weight: 600; letter-spacing: -0.05rem; word-break: keep-all}
.badge{border-radius: 5px; color: #5f5f5f; padding: 4px 10px; font-size: 14px; margin-bottom: 3px; }
.badge.yellow{background-color: #fff2a6;}
.badge.pink{background-color: #ffded1;}
.lec-play{align-self:flex-end; margin-top: 10px; opacity: .7;}

.main_box_btn{ width: 100%; max-width: 500px; margin: auto}
.menu-list { background-color:#FFF; box-shadow: 3.5px 3.5px 7px rgba(0, 0, 0, 0.07);  border-radius: 15px; list-style: none;  padding:10px;  margin: 40px 0 30px; }
.menu-list li {position: relative}
.menu-list li::after{content: ''; position: absolute;right: 10px; top: 50%; transform: translate(0, -50%); width:6px; height: 10px; background: url("../image/ico_arrow.png") no-repeat center; background-size: 6px 10px}
.menu-list li a{font-size: 16px;display: block;  padding:15px 40px; width: 100%; height: 100%; font-weight:500; color:##67696f;}
.menu-list li a.refund, .menu-list li a.event{position: relative}
.menu-list li a.refund::before, .menu-list li a.event::before{content: ''; width: 25px; height: 25px; position: absolute; left:5px; top:50%; transform: translate(0, -50%); background: url("../image/ico_main.png") no-repeat; background-size: 25px;}
.menu-list li a.event::before{background-position:0px -40px}

.main_foot_btn .footWrap {display: flex;  justify-content:space-between; align-items: center;  width: 100%; max-width: 400px; margin: auto; }
.main_foot_btn .footWrap li{position: relative; text-align: center;}
.main_foot_btn .footWrap li::after{content: ''; position: absolute; right:0%; top:15%;  width:1px; height:90%; background-color:#e0e0e0;}
.main_foot_btn .footWrap li:last-child::after{display: none}
.main_foot_btn .footWrap li:nth-child(1) { flex: 0.9; }
.main_foot_btn .footWrap li:nth-child(2) { flex: 1.2; }
.main_foot_btn .footWrap li:nth-child(3) { flex: 0.9; }
.main_foot_btn .footWrap li a{font-size: 14px; color:##67696f;}

/* sub */
#header{position: relative; top:0;height:55px; z-index:100; width:100%;background: #a3abb4}
#header img{vertical-align: bottom; max-width:399px;width:80%; padding-top:45px;}

.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}

#header2{position: relative; top:0;height:110px; z-index:100; width:100%;}
#header2 img{vertical-align: bottom; max-width:399px;width:80%; padding-top:45px;}
.h_hsk6{background:#c79adf;}
.h_hsk5{background:#eea5b0;}
.h_hsk4{background:#7fcecf;}
.h_hsk3{background:#f5d556;}
.h_yellow{background-color: #f5e691;}
.h_pink{background-color: #ffdacd;}
.h_box2{position:relative;!important;min-height:90%;max-width:650px;min-width:290px;margin:0 auto;line-height:55px; color:#000;font-weight:500; font-size:17px;letter-spacing:-1px;  }
.h_box2 .btn_pre{position:absolute;top:3px;left:0px; width:35px;height:50px }
.h_box2 .btn_pre a{ display:block;width:35px;height:50px;background:url(../image/btn_pre.png) no-repeat 8px 12px; cursor:pointer}
.h_box2 .btn_home{position:absolute;top:3px;right:0px; width:35px;height:50px }
.h_box2 .btn_home a{ display:block;width:35px;height:50px;background:url(../image/btn_home.png) no-repeat 2px 10px; cursor:pointer}
.h_bi{display: flex;  align-items: center; justify-content: center; width: 100%; margin:0 auto; max-width:400px; padding-top: 40px; flex-flow: nowrap;}
.h_bi img{width:calc(65% - 5px)!important; max-width:100%!important;  height:auto;    padding-top:0!important;}
.h_bi img:first-child{max-width:140px!important;height: auto; margin-right: 10px;}
.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; }
@media (max-width:480px){
	.h_bi{width:68%; max-width: 255px; flex-flow: column; align-items: flex-start; padding-top:23px; position: absolute; left: 50%; transform: translate(-50%, 0)}
	.h_bi img {width: 100%!important;} 
	.h_bi img:first-child{width:55%!important;max-width:125px!important; padding-bottom:3px;}
}
/* 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 .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:}
.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:18px;font-weight:normal;  color: #646565; padding:25px 0 10px 0;letter-spacing:-0.05em;}
.dtilWrap .expl{font-size:15px;  color: #646565}
.dtilWrap .ex{font-size: 16px; font-weight:500; color: #1e63ac}
.dtilWrap .tit img{vertical-align: middle; margin-right: 1px}
.dtilWrap p.subtxt{font-size: 14px;}
.dtilWrap p.subtxt.pt10{padding-top: 10px;}
.dtilWrap p.subtxt strong{font-weight: normal; color: #1e63ac }
.dtilWrap .box_que{ position: absolute; top: 66px; left: 30px; background: #fff; border-radius: 5px;z-index: 500; font-size: 15px; font-weight: 400; color: #666; padding:35px 20px 10px 15px; border: 1px solid #9592cb; text-align: left;box-shadow: 0 0 5px 1px #e8ecef;}
.dtilWrap .box_que .btn_close{position:absolute;top:3px;right:0px; 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:-12px; width:20px;height:20px;background:url("../image/box_arrow.png") no-repeat 0 0}
.dtilWrap .box_que .left141{left: 141px;}
.dtilWrap .box_que .left165{left: 165px;}
.dtilWrap .box_que ul{}
.dtilWrap .box_que ul li{background:url("../image/ico_check2.png") no-repeat 0 0; padding: 0 0 9px 18px}
.dtilWrap .box_que ul li.popgui_tit{ background-position: 0 80px;padding: 0 0 5px 0}
.dtilWrap .box_que ul li.popgui_tit2{ background-position: 0 80px;padding: 15px 0 5px 0}
.dtilWrap .box_que ul li .hl{ color: #222; font-weight: 500}

.dtilWrap .item{}
.dtilWrap .item a{padding: 0px 0 0 23px;font-size:15px;font-weight:300; color: #777; 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_chart{ position: relative; display: flex; border-radius: 15px;  background: #fff; width:70%; max-width: 350px;  height: 140px; margin:0 auto; box-sizing: border-box;  margin-bottom: 10px;box-shadow: 2px 2px 7px 0px #d9dbde; font-size: 18px; font-weight: 600; color: #555; cursor: pointer;  overflow: hidden}

.dtilWrap .box_chart .l_num{position: absolute; top: 150px; right:-12%; font-size: 13px; color: #9a9ba0; font-weight: normal; z-index:11;}
.dtilWrap .box_chart .chart{position: absolute; top: 50px;  text-align: center; font-size: 14px; z-index:10;}
.dtilWrap .box_chart .chart img{height:80px;}
.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{ background:url("../image/ico_link.png") no-repeat 97% 12px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    padding: 10px 10px;
    box-sizing: border-box;
    letter-spacing: -0.05em;
    height: 50px;
    width: 100%;
    text-align: left;
    font-size:18px;
    font-weight: 600;
    color: #000;
    z-index: 11;}
.dtilWrap .txt_detail .hl{color: #6164f1;font-weight:400;}
.dtilWrap .hsk6_bg{background:#e9d7f2;}
.dtilWrap .hsk5_bg{background:#fbd6db;}
.dtilWrap .hsk4_bg{background:#bfe6e7;}
.dtilWrap .hsk3_bg{background:#f9e8a7;}
.dtilWrap .add_bg{background-color: #b6caf4}
.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;}


/* lecture */
.lecWrap{position:relative;width:100%;margin:0 auto; margin-bottom: 25px; padding-top: 15px;}
.top_btn{ position: relative; padding: 10px; height: 30px }
.lec_tit .lec_guide{ position: absolute; text-align: right;box-sizing: border-box; right: 0; width: 155px; margin: 0 auto;border-radius: 3px; top: 12px}
.lec_tit{position:relative;font-size:20px;font-weight:700;padding: 15px 0 0px 0px;letter-spacing:-1px; }
.lec_tit .txt_hsk6{color: #c79adf}
.lec_tit .txt_hsk5{color: #eea5b0}
.lec_tit .txt_hsk4{color: #7fcecf}
.lec_tit .txt_hsk3{color: #f5d556}
.lec_tit > li{font-size: 14px; color: #646565; font-weight: normal; padding: 5px 0px 10px;}

.lec_tit .box_que{ position: absolute; top: 55px; right: 0px; 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;}
.lec_tit .box_que .btn_close{position:absolute;top:3px;right:0px; width:35px;height:30px }
.lec_tit .box_que .btn_close a{ display:block;width:35px;height:30px;background:url("../image/box_close.png") no-repeat 4px 4px; cursor:pointer}
.lec_tit .box_que .box_arrow{position:absolute;top:-12px; width:20px;height:20px;background:url("../image/box_arrow.png") no-repeat 0 0}
.lec_tit .box_que .right3{right: 3px;}
.lec_tit .box_que .left228{left: 228px;}
.lec_tit .box_que ul{}
.lec_tit .box_que ul li{background:url("../image/ico_check2.png") no-repeat 0 0; padding: 0 0 9px 18px}
.lec_tit .box_que ul li .hl{ color: #222; font-weight: 500}

.guide_leclist{font-size:14px;font-weight:300; text-align:left; padding: 10px 0 5px 14px;background:url(../image/ico_guide.png) no-repeat 0px 14px; color: #646464}
.guide_leclist .hl{color: #428fd9;font-weight:400;}

.lec_tit .expl{font-size:13px;  color: #646565;font-weight:normal; vertical-align: middle}
table.leclist{width:100%; text-align:center; padding:1px}
table.leclist th{font-size: clamp(13px, 2vw, 14px);color:#fff;font-weight:normal;letter-spacing:-1px;text-align:center;height:33px;padding:0 2px 0 0;background:#99a1af;}
table.leclist th img{ vertical-align:middle}
table.leclist td{font-size: clamp(14.5px, 2vw, 16px);color:#222;font-weight:normal;letter-spacing:-1px;line-height:130%;text-align:center;padding:10px 0}
table.leclist tr{ border-bottom: 1px solid #e6eaee}
table.leclist td.lefta{ text-align:left; }
table.leclist td .compl{ color: #999; font-size: 12px; padding: 1px 5px; border-radius: 3px}
.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}
.lec-btn-wrap{display: flex; flex-flow: nowrap; width: 100%; gap:10px;}
.lec-btn-wrap > div {flex: 1;}
.lec-btn-wrap > .lec-btn{display: block;padding:3px; font-weight: 500; font-size: 14px; color: #fff; line-height: 34px; border: 1px solid #d3d5d9; border-radius: 13px;}
.lec-btn-wrap > .lec-btn > a{ display: flex; flex-flow: column; align-items: center;  justify-content: center; width: 100%; min-height:32px; box-sizing: border-box;}
.lec-btn-wrap > .lec-btn .day_cert{ font-size:12px; font-weight: 400; color: #1299e2}
/*로그인*/
.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 .top{ position:absolute; top:3px; left:3px; width:100%} 
.layer_popup .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 .top .viewno a{color:#fff; font-size:16px;width:130px; height:27px;display: block }
.layer_popup .top .close {position:relative; float:left; width:30px; height:30px;}
.layer_popup .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 #2a80dd; position: relative }

.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 }
.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;}
.layer_popup .logint{font-weight:700; color:#2170c5; font-size: 24px; padding-bottom: 20px}
.alert_pop > div.btn_area{width: 100%;}
.alert_pop > div.btn_area > div{width: 48%; margin: 1%; float: left; padding: 10px 0 10px 0;display: block;text-align: center;box-sizing: border-box; }
.alert_pop > div.btn_area > div:first-child{ background-color: #aeafb1;}
.alert_pop > div.btn_area > div a{color: #FFF; display: block;}
.alert_pop > div.btn_area > div:last-child{background:#2170c5;}

/*31110 단기학습법 팝업 추가*/
.alert_pop .lpop_img {text-align: center;}
.alert_pop .lpop_img > img{width: 100%; max-width: 302px;}
.alert_pop .pop_ck{ text-align:left; padding-top: 15px;}
.alert_pop .pop_ck.idcheck{ text-align: right; margin-right: 6px}
.alert_pop .pop_ck .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; font-size: 13px; }
.alert_pop .pop_ck .idcheck input[type=checkbox].css-checkbox {overflow: hidden;position: absolute;left: -1000px;width: 1px;height: 1px;}
.alert_pop .pop_ck .idcheck input[type=checkbox].css-checkbox:checked + label{background-position:0 -50px; }
/*31110 단기학습법 팝업 추가 END*/

.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;}

.login .idcheck{ text-align: right; margin-right: 6px}
.login .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; }
.login .idcheck input[type=checkbox].css-checkbox {overflow: hidden;position: absolute;left: -1000px;width: 1px;height: 1px;}
.login .idcheck input[type=checkbox].css-checkbox:checked + label{background-position:0 -50px;}

.layer_popup .btn_area{padding: 15px 0 0 0;display: block;text-align: center;box-sizing: border-box; height: 60px}
.layer_popup .btn_area_join{padding: 10px 0 10px 0;display: block;text-align: center;box-sizing: border-box; background:#2170c5; margin: 4px 6px 0 6px}
.layer_popup .btn_area_join a{ display: block}
.layer_popup .btn_area_join span{ color: #fff}

.login .btn_login{padding: 11px 0px 12px 0px;font-size: 15px;width: 96%;background: #000; color: #fff;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #fff}

.login .find_idpw {width: 100%;max-width: 300px;margin: 0 auto;text-align: center;padding: 15px 0; }
.login .find_idpw a{color: #000}
.login .find_idpw span {display: inline-block;margin: 0 20px;width: 1px;height: 12px;line-height: 10px;background: #ddd;text-indent: -9999px;}



/*탭*/
.tab-wrap ul{display: flex; flex-direction: row; margin: 15px 0 20px;}
.tab-wrap ul li{width: 100%; border-bottom: 2px solid #e0e0e0;}
.tab-wrap ul li a{display: block; text-align: center; color:#67696f; padding: 15px 0; font-weight: 400; font-size:15px;}
.tab-wrap ul li.on{border-bottom-color:#0043cc !important; }
.tab-wrap ul li.on a{font-weight: 600; color:#0043cc; } 


.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: #0043cc;  border-bottom: 2px solid #0043cc;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:#000;line-height:140%; font-weight: 700}
.board_list_type3 .ans .con .hl2 a{text-decoration: underline; color:#6164f1;}
.board_list_type3 .ans .con .hl2{color:#6164f1;line-height:140%; font-weight: 500}
.board_list_type3 .ans .con .hl3{color:#444;line-height:140%; font-weight: 500}
.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}
.board_list_type3 .ans .con > table{width: 100%; margin-top: 5px; border: 1px solid #d5dade; border-bottom: none;}
.board_list_type3 .ans .con > table th{background: #e8ebef; color:#000; border-left: 1px solid #d5dade;}
.board_list_type3 .ans .con > table th, .board_list_type3 .ans .con > table td{text-align: center; padding:7px 5px}
.board_list_type3 .ans .con > table td{background: #f8f9fa; border-left: 1px solid #d5dade; border-bottom: 1px solid #d5dade;}
.board_list_type3 .ans .con > table th:first-child, .board_list_type3 .ans .con > table td:first-child{border-left: none; }

/* 공지사항 */
.inquaryboard_area{margin-bottom: 15px;}
.inquaryboard_area .board_list_type1{width: 100%; border-collapse: collapse;}
.inquaryboard_area .board_list_type1 thead th{padding: 15px 0; font-size: 14px; color: #333;text-align: center;  background-color: #f3f5f7;}
.inquaryboard_area .board_list_type1 thead tr{border-bottom: 1px solid #e6eaee;}
.inquaryboard_area .board_list_type1 tbody tr{border-bottom: 1px solid #e6eaee;}
.inquaryboard_area .board_list_type1 tbody td{font-size: 14px; text-align: center; color: #000;}
.inquaryboard_area .board_list_type1 tbody td a{color: #333;}
.inquaryboard_area .board_list_type1 tbody td.tal{ padding: 15px 10px; font-size: 14px; text-align: left !important;  position: relative;}
.inquaryboard_area .board_list_type1 tbody td.tal a{letter-spacing: -0.03rem}
.inquaryboard_area .board_list_type1 tbody td.date{ color:#555; font-size: 13px; font-weight: 300; letter-spacing:-0.03rem;white-space: nowrap; }
.inquaryboard_area .board_list_type1 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문의(리스트) */
.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;}



/* =========================
   버튼 영역 
========================= */

/* 공통 */
.btn_area {display: flex;flex-wrap: wrap;	gap: 5px;	width: 100%;	margin: 10px auto 0;	height: auto;	box-sizing: border-box;}
/* 기본 정렬 (2개 이상) */
.btn_area:not(.n1) {justify-content:flex-start;}
/* 버튼 공통 */
.btn_area .btn_box {display: flex; flex-flow: nowrap; align-items: center;	justify-content: center;	border-radius: 13px;	border: 1px solid #d3d5d9;	background: #fff;	box-sizing: border-box;}
/* 버튼 링크 */
.btn_area .btn_box a {display: block;	width: 100%;	padding: 10px 0;	font-size: 14px;	font-weight: 500;	color: #444;	text-align: center;}



/* =========================
   버튼 개수별 설정
========================= */
/*게시판 하단*/
.btn_area.board{justify-content:center!important; flex-flow: nowrap;}
.btn_area.board .btn_box {flex: 0 0 70%;}

/* 1개 → 좌측 정렬 + 50% */
.btn_area.n1 {justify-content: flex-start;}
.btn_area.n1 .btn_box {flex: 0 0 100%;}
/* 2개 */
.btn_area.n2 .btn_box {flex: 0 0 48.5%;}
/* 3개 */
.btn_area.n3 .btn_box {flex: 0 0 32%;}

/* =========================
   모바일 대응
========================= */
@media (max-width: 430px) {

	/* 1개일 때 모바일은 full */
	.btn_area.n1 .btn_box {flex: 0 0 100%;}
	/* 3개 → 2열 */
	.btn_area.n3 .btn_box {flex: 0 0 48%;}
	/*게시판 하단*/
	.btn_area.board .btn_box {width: 100%!important;        justify-content: space-evenly!important;}
	.btn_area.board.n3 .btn_box, .btn_area.board.n1 .btn_box{flex: inherit; }
}



/*버튼 leclist*/
.btn_area2 { margin: 0 auto;  width: 100%;  display: block;  text-align: center;  box-sizing: border-box;  height: 70px; margin-top: 10px; padding-top: 10px}
.btn_area2 .day_cert{ font-size:12px; font-weight: 400; color: #1299e2}
.btn_area2.n2 > .btn_box2 {width: 48%;    margin: 1%;    float: left;    border-radius: 13px;    box-sizing: border-box;    border: 1px solid #d3d5d9;    background: #FFF;}
.btn_area2.n3 > .btn_box2 {width: 31.3%;    margin:1%;    float: left;    border-radius: 13px;    box-sizing: border-box;    border: 1px solid #d3d5d9; background: #FFF;}
.btn_area2.n1 > .btn_box2 a, .btn_area2.n2 > .btn_box2 a, .btn_area2.n3 > .btn_box2 a {display: block;    padding: 7px 0;    font-weight: 500;font-size: 14px;color: #fff; line-height: 34px; border: 1px solid #d3d5d9; border-radius: 13px;  }
.btn_area2.n1 > .btn_box2 a, .btn_area2.n2 > .btn_box2 a, .btn_area2.n3 > .btn_box2 a {color: #444;}





/* 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}

/* refund */
.refundWrap{position:relative;width:100%;height:100%;height:auto !important;min-height:100%;margin:0 auto;}
.refundWrap .ref_tit{background:url(../image/ico_ref.png) no-repeat 13px 26px; padding: 23px 0 0 39px;font-size:22px;font-weight:700;color: #333; clear: both}
.refundWrap .ref_box{ background:url(../image/evt_bg.png) repeat-x; padding: 15px; margin-bottom: 20px}
.refundWrap .ref_box .ref_stit{background: #3086e3 url(../image/ico_event.png) no-repeat 8px 50%; ; padding: 15px 20px;font-size:14px;border-radius:10px; box-shadow: 0 0 5px 1px #e8ecef;color:#b6dfff;}
.refundWrap .ref_box .ref_stit ul{}
.refundWrap .ref_box .ref_stit ul li{ padding: 0 0 10px 16px;background:url(../image/ico_check3.png) no-repeat 0px 0;}
.refundWrap .ref_box .ref_stit ul li a{text-decoration: underline; color: #ffe325; }
.refundWrap .ref_box .ref_stit .wt{ color:#fff}
.refundWrap .ref_box .ref_stit .b_txt{font-size:17px; text-align: center;font-weight:500;color: #ffe325; padding-bottom: 10px}
.refundWrap .s_txt{font-size:14px;font-weight:400; text-align:left; padding: 0 5px 13px 0px;color: #646464}
.refundWrap .ref_txt{font-size:15px;font-weight:500;}
.refundWrap .ref_box .idcheck{ text-align: left; margin-right: 6px}
.refundWrap .ref_box .idcheck input[type=checkbox].css-checkbox + label {display:inline-block; height:px; padding-left:25px !important; line-height:20px !important; background:url(../image/input_chk2.png) no-repeat 0 0; background-size:25px; cursor:pointer; vertical-align:middle; font-size:14px; }
.refundWrap .ref_box .idcheck input[type=checkbox].css-checkbox {overflow: hidden;position: absolute;left: -1000px;width: 1px;height: 1px;}
.refundWrap .ref_box .idcheck input[type=checkbox].css-checkbox:checked + label{background-position:0 -42px;}
.refundWrap .ref_box2{background-color: #edf0f2; border-radius:13px; padding: 30px; margin: 15px 10px; font-size: 16px; line-height: 160%;  font-weight: 400;  color: #666;}
.refundWrap .ref_box2 .txtbox > p{margin-bottom:10px;}
.refundWrap .input_tit{position: relative; clear: both; padding: 29px 0 4px 0px;font-weight:600;font-size:17px;color: #434343; border-bottom: 1px solid #cfd5d9; margin-bottom: 10px}
.refundWrap .input_tit .hl, .refundWrap .ref_box2 .hl{color:#3086e3}
.refundWrap .input_item{position: relative;clear: both; height: 38px;}
.refundWrap .filebox .upload-name {display: inline-block;padding: 7px 10px;vertical-align: middle;border: 1px solid #dddddd;color: #999999;border-radius: 30px; }
.refundWrap .filebox label {display: inline-block;vertical-align: middle;cursor: pointer;background:#3086e3; padding: 7px 10px;font-weight:400;font-size:14px;color: #fff;border-radius: 30px}
.refundWrap .filebox input[type="file"] {position: absolute;width: 0;height: 0;padding: 0;overflow: hidden;border: 0;text-align: center}

.refundWrap .filebox select  {-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.refundWrap .filebox select.rank{padding: 7px 11px;vertical-align: middle;border: 1px solid #3086e3; background-color: #FFF; font-size: 14px; color: #3086e3;border-radius: 30px; background: url("../image/ico_arrow3.png") calc(100% - 7px) center no-repeat; width:95px;}
.refundWrap .input_item 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}
.refundWrap .line{border-bottom: 1px solid #cfd5d9; margin-bottom: 20px}
.refundWrap .btn_confirm{ float: left; text-align: center;box-sizing: border-box; background:#aeafb1; width: 110px; border-radius: 30px; vertical-align: middle}
.refundWrap .btn_confirm a{ display: block; padding: 7px 0;font-weight:400;font-size:14px;color: #fff}
.refundWrap .btn_confirm2{ float: left; text-align: center;box-sizing: border-box; background:#3086e3; width: 90px; border-radius: 30px; vertical-align: middle}
.refundWrap .btn_confirm2 a{ display: block; padding: 7px 0;font-weight:400;font-size:14px;color: #fff}
.refundWrap .file_name{float: left;box-sizing: border-box; background:#f3f5f7;  border-radius: 30px; border: 1px solid #3086e3;padding: 6px 10px;font-weight:400;font-size:14px; color: #3086e3 }
.refundWrap .nofile{float: left;box-sizing: border-box; background:#f3f5f7;  border-radius: 30px; border: 1px solid #c4cdd6;padding: 6px 10px;font-weight:400;font-size:14px; color: #a7afb8 }
.refundWrap .margin30{ margin-bottom: 30px}
.refundWrap .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}
.refundWrap .guide_txt{font-size:14px;font-weight:300; text-align:left; padding: 0 8px 10px 34px;background:url(../image/ico_txt.png) no-repeat 25px 3px; color: #646464}

.refundWrap .btn_area{padding: 10px 0 10px 0;display: block;text-align: center;box-sizing: border-box; height: 60px; width: 100%; margin:0 auto; padding-left: 8%;}
.refundWrap .btn_area > button:first-child{width: 45%; display: block; float: left; margin-right: 2%;}
.refundWrap .btn_area > button:last-child{width: 45%; display: block;}
.refundWrap .btn_area4{padding: 10px 0 10px 0;display: block;text-align: center;box-sizing: border-box; height: 60px}
.refundWrap .btn_appli{padding: 11px 0px 12px 0px;font-size: 15px;background: #2170c5;width: 50%;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #fff; border-radius: 15px; border: 0px}
.refundWrap .btn_edit{padding: 11px 0px 12px 0px;font-size: 15px;background: #fff;width: 50%;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #444; border-radius: 15px; border: 1px solid #d3d5d9}
.refundWrap .btn_gray{padding: 11px 0px 12px 0px;font-size: 15px;background: #aeafb1;width: 50%;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #e7e7e8; border-radius: 15px; border: 0px}
.refundWrap .btn_layer{text-decoration: underline; }
.refundWrap .s_txt > table{width: 100%; margin-top: 5px; border: 1px solid #d5dade; border-bottom: none;}
.refundWrap .s_txt > table th{background: #e8ebef; color:#000; border-left: 1px solid #d5dade;}
.refundWrap .s_txt > table th, .refundWrap .s_txt > table td{text-align: center; padding:7px 5px}
.refundWrap .s_txt > table td{background: #f8f9fa; border-left: 1px solid #d5dade; border-bottom: 1px solid #d5dade;}
.refundWrap .s_txt > table th:first-child, .refundWrap .s_txt > table td:first-child{border-left: none; }

.refundWrap .s_txt .hl2{color:#3086e3; text-decoration: underline}
.refundWrap .s_txt .hl2 > a{color:#3086e3;}
.refundWrap .s_txt .hl3{color:#444;line-height:140%; font-weight: 500; padding-top: 15px;}

/* event */
.eventWrap{position:relative;width:100%;height:100%;height:auto !important;min-height:100%;margin:0 auto;}
.evt_tit{background:url(../image/ico_box.png) no-repeat 15px 25px; padding: 23px 0 0 37px;font-size:22px;font-weight:700;color: #333; clear: both}
.eventWrap .evt_box{ background:url(../image/evt_bg.png) repeat-x; padding: 15px; margin-bottom: 20px}
.eventWrap .evt_box .evt_stit{background: #3086e3 url(../image/ico_event.png) no-repeat 8px 50%; ; padding: 15px 20px;font-size:13px;border-radius:10px; box-shadow: 0 0 5px 1px #e8ecef;color:#ffe325;}
.eventWrap .evt_box .evt_stit hl{color:#ffe325;}
.eventWrap .evt_box .evt_stit ul{}
.eventWrap .evt_box .evt_stit ul li{ padding: 0 0 4px 11px;background:url(../image/ico_circle.png) no-repeat 0px 2px;}

.eventWrap .evt_box .evt_stit .s_txt{font-size:17px; text-align: center;font-weight:500;color: #fff; padding-bottom: 10px}
.eventWrap .evt_box .evt_stit .s_txt .hl{color:#ffe325;}
.eventWrap .evt_box .evt_guide{font-weight:400;font-size:15px;color: #555; padding: 12px 0 15px 0; line-height: 160%}
.eventWrap .evt_box .evt_guide .hl{font-weight:600;font-size:16px;color: #3086e3}
.eventWrap .evt_box .idcheck{ text-align: left; margin-right: 6px}
.eventWrap .evt_box .idcheck input[type=checkbox].css-checkbox + label {display:inline-block; height:px; padding-left:25px !important; line-height:20px !important; background:url(../image/input_chk2.png) no-repeat 0 0; background-size:25px; cursor:pointer; vertical-align:middle; font-size:14px; }
.eventWrap .evt_box .idcheck input[type=checkbox].css-checkbox {overflow: hidden;position: absolute;left: -1000px;width: 1px;height: 1px;}
.eventWrap .evt_box .idcheck input[type=checkbox].css-checkbox:checked + label{background-position:0 -42px;}
.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:#3086e3}
.eventWrap .evt_box .evtgui_txt a {color:#3086e3}
.eventWrap .evt_box .sml_txt{font-size:14px;font-weight:300; text-align:left; padding: 0 8px 10px 31px;color: #777}
.eventWrap .evt_box .input_box{ 
	position: relative; border-radius: 7px; background: #d4e5f8; 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:#3086e3}
.eventWrap .input_item{position: relative;clear: both; height: 38px;}
.eventWrap .input_item2{position: relative;clear: both; height: 38px; margin: 10px 0}
.eventWrap .input_box .input_item 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 .input_box .input_item2 select { 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 url(../image/ico_sel.png) no-repeat 98% 50%; margin-right: 5px; font-size: 14px}
.eventWrap .input_box .guide_txt{font-size:14px;font-weight:300; text-align:left; padding: 0 8px 10px 34px;background:url(../image/ico_txt.png) no-repeat 25px 3px; color: #646464}
.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}

.eventWrap .btn_area4{padding: 10px 0 10px 0;display: block;text-align: center;box-sizing: border-box; height: 90px}
.eventWrap .btn_appli{padding: 11px 0px 12px 0px;font-size: 15px;background: #2170c5;width: 50%;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #fff; border-radius: 15px; border: 0px}
.eventWrap .btn_edit{padding: 11px 0px 12px 0px;font-size: 15px;background: #fff;width: 50%;display: inline-block;text-align: center;box-sizing: border-box;vertical-align: top;cursor: pointer; color: #444; border-radius: 15px; border: 1px solid #d3d5d9}



/* 260122 버튼 추가 */
.btn_compare {position: absolute;	top:10px;	right:0;	z-index: 20; }
.btn_compare a {display: inline-block;	padding: 10px 15px;	font-size: 14px;	font-weight: 600;	color: #1e63ac;	background: #fff;	border: 1px solid #1e63ac;	border-radius: 8px;	line-height: 1;}
.btn_compare a:hover {background: #1e63ac;	color: #fff;}
.dtilWrap.pt20{padding-top: 20px;}

/* 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%;}