@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

.list02 > li{position:relative; line-height:1.7; padding-left:13px; margin-bottom:7px;}
.list02 > li:before{content:""; position:absolute; left:0; top:12px; width:5px; height:1px; margin-right:5px; background:#555;}
.list01 > li{overflow: hidden; position:relative; line-height:1.7; padding-left:13px; margin-bottom:7px;}
.list01 > li:before{content:""; position:absolute; left:0; top:12px; width:4px; height:4px; margin-right:5px; background:#777; border-radius:50%;}

.wrap{}
.wrap .sub_tit{text-align:center;}
.sub_tit.bd0{border-bottom:0; padding-bottom:0}

#content.sub{overflow: hidden; padding:80px 0}
.sub_tit{margin-bottom:50px; padding-bottom:30px; border-bottom:2px solid #333; font-size:35px; color:#111; font-family: 'NEXON Lv1 Gothic OTF Bold';}
.sub_tit02{position:relative; padding-left:18px; margin-bottom:20px; font-size:20px; color:#111; }
.sub_tit02::after{content:''; display:block; position:absolute; left:0; top:12px; width:5px; height:5px; background:#1a63a6; }

.sub_visual{background: #f2f9ff;}
.sub_visual .wrapper{box-sizing: border-box; position:relative; display: flex; flex-direction: column; justify-content: center; height:300px; }
.sub_visual .wrapper img{position:absolute; transform:translateY(-50%); right:0; top:50%; height:250px;}
.sub_visual h2{margin-bottom:15px; font-size:35px; color:#111; font-family: 'NEXON Lv1 Gothic OTF Bold';}

.box01.mgb0{margin-bottom:0; padding-bottom:0; border-bottom:0}
.box01{display:flex; justify-content: space-between; margin-bottom:60px; padding-bottom:60px; border-bottom:1px solid #ddd;}
.box01 .title h3{display:flex;align-items: flex-start;font-size:25px;color:#111;font-weight:bold;flex-direction: column;}
.box01 .title h3 span{ display: block; width: 31px; height: 31px; line-height: 31px; text-align: center; border-radius: 100%; vertical-align: top; margin-bottom:10px; background: #1a63a6; font-size: 13px; font-weight: 800; color: #fff; }
.box01 .title p{margin-top:7px;}
.box01 .cont{width:75%;}
.box01 .cont .list01 > li{margin-bottom:10px;}
.box01 .cont .list01 > li i{font-weight:bold; color:#1a63a6; padding-right:10px;}
.box01 .cont .list01 > li i:after{ content: '-'; padding-left: 10px;}
.box01 .cont .list01 > li > ul{margin-top:10px;}

.box02{margin-bottom:60px;}
.btn_area.v1{padding:0}
.gray_box{background:#f7f7f7; padding:30px;}
.box_alert{margin-bottom:20px;}
.box_alert p{display:inline-block; position:relative; padding-left:1.375rem; font-weight:400; color:#db773b;}
.box_alert p:before{content:""; display:block; position:absolute; top:0.375em; left:0; width:13px; height:14px; background:#db773b url(/images/content/icon_alert.png) no-repeat 50% 50%; border-radius:50%;}

.img_map{margin-top:20px;}
.img_map img{width:100%;}
.kit{margin-top:20px;}
.kit ul{display: flex; justify-content: space-between;}
.kit ul li{width:31%; text-align:center; background:#fff; border:1px solid #ddd;}
.kit ul li > div{display: flex; flex-direction: column; justify-content: center; height:120px; color:#fff;}
.kit ul li > div h4{font-size:22px;}
.kit ul li .kit01{background:#af0000;}
.kit ul li .kit02{background:#00c52b;}
.kit ul li .kit03{background:#0079e8;}

.list_deatil .sort{display:block; float:left; width:55px; box-sizing:border-box; padding-right:20px; font-weight:600;}
.list_deatil .desc{margin-left:55px;}

.teacher > ul > li .top{display: flex; justify-content: flex-start;align-items: center;margin-bottom:20px;}
.teacher > ul > li .top h4{margin-right:10px; border:1px solid #1a63a6; padding:6px 25px; border-radius:30px; font-size:14px; color:#1a63a6;}
.teacher > ul{}
.teacher > ul > li{width:100%;}
.teacher > ul > li:first-child{margin-bottom:30px; border-bottom:1px dashed #ddd;}
.teacher > ul > li img{width:100%;}
.teacher > ul > li h5{margin:20px 0 10px 0; text-align:center; font-size:18px;}
.teacher .list_deatil{padding:30px; background:#f9f9f9; }
.img_wrap {display: flex; justify-content: space-between;}
.img_wrap > div{width:49%}
.teacher_img_wrap{display: flex; justify-content: space-between;}
.teacher_img_wrap > div{width:49%}
.teacher_img_wrap > .img{height:290px;}

#content table.table td{padding:15px 25px;}

.level_test{}
.level_test ul {display: flex; justify-content: space-between; flex-wrap: wrap;}
.level_test ul li{display:flex; width:49%; margin-bottom:10px; }
.level_test ul li:last-child{margin-bottom:0}
.level_test ul li p{width:90%; padding:15px; background:#2f4961; color:#fff}
.level_test ul li b{display:flex; align-items: center;justify-content: center;width:80px; border:1px solid #ddd; background:#fff;}

th.point{background:#777 !important; color:#fff;}

.pack_list {display: flex; justify-content: space-between; margin-top:20px;}
.pack_list > div{box-sizing:border-box; width:31%; border:1px solid #ddd;}
.pack_list > div h4{padding:15px 0; color:#fff; text-align:center;}
.pack_list > div.red h4{background:#af0000}
.pack_list > div.green h4{background:#00c52b}
.pack_list > div.blue h4{background:#0079e8}
.pack_list > div .txt{padding:20px;}
.pack_list .btn_area{padding:0}

.add_item_wrap {padding: 15px; text-align: right;}
.tabs.member_tab {overflow:hidden; list-style: none; max-width:800px;	margin: 0 auto 40px;}
.tabs.member_tab li {float: left; width:20%; margin: 0;padding: 0;overflow: hidden;position: relative;}
.tabs.member_tab li a {box-sizing:border-box; text-decoration: none; display: block;padding: 20px 0;background: #eee;outline: none; text-align:center;}
.tabs.member_tab li.active a, 
.tabs.member_tab li.active a:hover  {background: #1a63a6; color:#fff;	}
.tab_container{overflow: hidden;	clear: both;	float: left; width: 100%;background: #fff;}
.tab_content {}

.area_membercheck .box{margin-bottom:40px;}
.area_membercheck .box h3{position:relative; padding-left:13px; font-size:21px; color:#111;}
.area_membercheck .box h3:before{content:''; position:absolute; left:0; top:7px; display:block; width:3px; height:18px; background:#1a63a6}


 @media all and (max-width:1200px){
	
 }


@media all and (max-width:960px){
	.box01{display:block}
	.box01 .title{margin-bottom:20px;}
	.box01 .title h3{flex-direction: row;  justify-content: center; align-items: center; line-height: 1;}
	.box01 .title p{text-align:center;}
	.box01 .title h3 span{margin-bottom:0; margin-right:10px; }
	.box01 .cont{width:100%}

	.sub_visual .wrapper img{height:150px;}

	.student_list .input200{width:100% !important;}
}

@media all and (max-width:767px){
	

	body,
	p,
	li,
    a{font-family: 'Montserrat', Sans-serif; font-size:14px;}
	
	#content.sub{padding:40px 0}
	.list01 > li:before{top:8px;}
	.sub_tit{margin-bottom:30px; font-size:20px; word-break:keep-all; text-align:center;}
	.sub_tit02{margin-bottom:15px; font-size:18px}
	.sub_tit02::after{top:10px;}
	.box01{margin-bottom:40px; padding-bottom:40px;}
	.box01 .title h3{font-size:18px;}
	.box01 .title h3 span{line-height:25px; width:25px; height:25px; margin-right:8px; font-size:11px;}
	.box01 .cont .list01 > li i{display:block; margin-bottom:5px;}
	.box01 .cont .list01 > li i:after{display:none;}
	.box02{margin-bottom:40px;}
	#content table.table th,
	#content table.table td{padding:10px; font-size:13px}

	.sub_visual{display:none;}

	.gray_box{padding:15px;}
	
	.teacher > ul > li .top h4{padding:3px 16px;}
	.teacher > ul > li h5{font-size:16px;}

	.level_test ul li{width:100%;}
	.level_test ul li p{padding:10px;}
	.level_test ul li b{width:50px}

	.ask{position:fixed; top:auto; bottom:0; width:100%;}
	.ask a{width:100%;}
	#del_item_6 { min-width: auto; padding:0 5px;}
	.student_list .input200{font-size:12px;}
	
	.tabs.member_tab li a{padding:10px 0;}
	.area_membercheck .box h3{padding-left:10px; font-size:16px;}
	.area_membercheck .box h3:before{top:6px; height:14px;}
	.area_membercheck .table .button{min-width:auto;}

	.img_check{width:100%;}

	
}

@media all and (max-width:660px){
	.list_deatil .sort{float:none;}
	.list_deatil .desc{margin-left:10px;}
}

@media all and (max-width:600px){
	.teacher > ul{display:block;}
	.teacher > ul > li{width:100%; margin-bottom:25px;}

	.kit ul li > div h4{font-size:16px;}
	.kit ul li > div p b{display:block;}

	.pack_list{display:block;}
	.pack_list > div{width:100%; margin-bottom:20px;}
	.pack_list > div h4{padding:8px 0;}

	.teacher_img_wrap{display:block;}
	.teacher_img_wrap > div{width:100%;}
	.teacher_img_wrap > .img{margin-bottom:20px;}
}

@media all and (max-width:480px){
	.bbsView.student_list > tbody > tr > th, 
	.bbsView.student_list > tbody > tr > td{display: table-cell; width: auto; padding:5px;}

	.teacher .list_deatil{padding:15px;}

	.teacher_img_wrap > .img{height:250px;}

	.tabs.member_tab li{width:33.3%;}
}