@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

.lnb{position:absolute; bottom:0; left:0; width:100%; margin:0 auto; border-top:1px solid rgba(255,255,255,0.3)}
.lnb ul{width:1200px; margin:0 auto; text-align:center;}
.lnb ul li{display:inline-block;position:relative; margin:0 15px;}
.lnb ul li:first-child{margin-left:0;}
.lnb ul li a{position:relative; display:block; min-width:170px; height:60px; line-height:60px; padding:0 25px; text-align: center; font-size:18px; color:#fff}
.lnb ul li a.on{color:#01b4e5;}
.lnb ul li a.on:before{content:'' ; position:absolute; top:-1px; left:0; display:block; width:100%; height:2px; background:#01b4e5}

.list_top{padding:40px; background:#f6f6f6}
.list_top .list01 > li{color: #111; font-weight:bold;}
.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{position:relative; font-size:40px; margin-bottom:35px; padding-bottom:20px; color:#000; text-align:center;}
.sub_tit:after{content:""; display:block; width:60px; height:1px; background:#dddddd; position:absolute; bottom:0; left:50%; -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%)}
.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; }

.added{margin-bottom:40px; font-size:19px; color:#333; font-weight:400; letter-spacing: -0.02em; text-align:center;}
.added > .btn_area{padding-bottom:0}
.area_subVisual{position: relative; height:300px;}
.area_subVisual .text{position:absolute; top:50%; width:100%; transform: translateY(-50%); text-align:center;}
.area_subVisual .text p{color:#fff; font-size:35px; font-weight:700; animation: fade-in-bottom 1.2s;}
.area_subVisual:before{content:''; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(0,0,0,0.2)}

.img_visual{margin-bottom:60px; padding:40px 60px; background: #eaf1f3;}
.img_visual{box-sizing: border-box; position:relative; display: flex; flex-direction: column; justify-content: center; height:300px; }
.img_visual img{position:absolute; transform:translateY(-50%); right:60px; top:50%; height:250px;}
.img_visual h2{margin-bottom:15px; font-size:35px; color:#111;}

.img_title{margin-bottom:60px; padding:40px 60px; background: #f6f6f6;}
.img_title{box-sizing: border-box; position:relative; display: flex; flex-direction: column; justify-content: center; height:300px; }

.area_usb .text h2,
.img_title h2{margin-bottom:15px; font-size:35px; color:#111;}

.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;}

.teacher_video .box{margin-bottom:80px;}
.teacher_video .inr{display: flex; justify-content: space-between; margin-bottom:25px; border:1px solid #ddd;}
.teacher_video .inr .img{width:45%; height:290px;}
.teacher_video .inr .txt{width:55%; padding:40px;}
.teacher_video .inr .txt h4{margin-bottom:15px; font-size:23px;}
.teacher_video .inr .txt p{margin-bottom:8px;}

#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}

.list_poster {display: flex;flex-wrap: wrap;justify-content: space-between;}
.list_poster li{position:relative; margin-top:50px; width:31%; text-align:center;}
.list_poster li p{margin:15px 0 0 0; color:#444; text-align:center; font-size:18px; font-weight:500; word-break: keep-all;}
.list_poster li img{width:100%}
.list_poster li .img{position:relative}

.snb{margin-bottom:70px;}
.snb ul{overflow:hidden; text-align:center;}
.snb ul li{display:inline-block; text-align:center; min-width:150px; margin:0 5px; }
.snb ul li:first-child{border-left:0}
.snb ul li a{position:relative; display:block; width:100%; padding:15px 30px; border: 1px solid #ddd; border-radius: 8px;}
.snb ul li a.on{background:#111; border:1px solid #111; color:#fff; font-weight:bold;}

.area_photo .photoList > li a > em{padding:0; margin:7px 0; border:0;}
.area_photo .photoList > li .write{padding:0;border:0;}

.like_button a{position:absolute; right:10px; top:50%; display:inline-block; padding:7px 15px 7px 35px; background:#fff url(../images/board/icon_like.png) no-repeat 13px 50%; background-size:15px; border: 1px solid #ff5b5a; color: #ff5b5a; font-size: 14px; transform: translateY(-50%);}
.like_button.on a{ display:inline-block; background:#ff5b5a url(../images/board/icon_like_w.png) no-repeat 13px 50%; background-size:15px; color:#fff;}
.like_button a i{padding-right:5px;}

.comming{margin-bottom:30px; background:#f8f8f8; padding:30px; text-align:center; }
.comming p{color:#d7171a; font-size:25px; font-weight:bold;}

.area_usb_inr{ display: flex; }
.area_usb_inr .text{padding:80px 40px;}

.area_comming{position:relative; max-width:960px; margin:0 auto; padding:100px 10px; background: #555; text-align:center; }
.area_comming h3{margin:0 0 10px 0; font-size:55px; color:#fff; letter-spacing: 5px;}
.area_comming p{color:#fff;}

/* 이용약관 */
.area_policy{}
.area_policy h6{margin-bottom:20px; font-weight:700; font-size:17px; color:#222;}
.area_policy h2{padding:30px 0; font-weight:700; font-size:40px; color:#222; text-align:center;}
.area_policy p{line-height:1.6; font-size:14px;}
.area_policy ul li,
.area_policy p{line-height:1.6; font-weight:300; font-size:15px; color:#666;}
.area_policy ul li ul{margin-bottom:10px; padding-left:15px;}
.area_policy ul li{margin-bottom:8px;}
.area_policy ul li:last-child{margin:0;}
.area_policy ul li ul li{margin-bottom:2px; font-size:15px;}
.area_policy ul li ul{margin-top:5px; margin-bottom:20px;}
.area_policy .inr_policy{padding:40px 0; border-bottom:1px solid #ddd;}
.area_policy .inr_policy:last-child{border:none;}

.txt_point {color: #0066d0;}

img.img_ytb {border:5px solid #111; border-radius: 30px;}
img.img_ytb2 {}

.video_list {display: flex; justify-content: space-between; margin-top:40px;}
.video_list > div{box-sizing:border-box; width:32%; border:1px solid #ddd;}
.video_list > div h4{padding:15px 0; color:#fff; text-align:center;}
.video_list > div.red h4{background:#af0000}
.video_list > div.green h4{background:#00c52b}
.video_list > div.blue h4{background:#0079e8}
.video_list > div .list{padding:20px;}
.video_list > div .list li{margin-top:35px;}
.video_list > div .list li:first-child{margin-top:0}
.video_list > div .list .img{position:relative; overflow:hidden; width:100%; height:auto; padding-bottom:56.25%; max-width:unset; margin:15px 0; border-radius:4px;}
.video_list > div .list .img img{position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%);}
.video_list > div .list .img iframe{position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%);}

.video_list > div .list .title{overflow: hidden; margin-bottom:15px;}
.video_list > div .list .title b{float:left; height:40px; line-height:20px; box-sizing:border-box; padding:10px 15px; background:#363636; font-weight:700; font-size:15px; color:#FFF; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
.video_list > div .list .title b.bg-2{background:#4258f1}
.video_list > div .list .title b.bg-3{background:#FF4500}
.video_list > div .list .title b.bg-4{background:#FF0000}
.video_list > div .list .title b.bg-5{background:#00FF00}
.video_list > div .list .title span{float:left; line-height:40px; padding-left:10px; width:calc(100% - 90px); font-weight:500; letter-spacing:-0.05em;}

.video_list2 .list{display: flex; justify-content: space-between; margin-top:40px;}
.video_list2 .list li{width:32%}
.video_list2 .list li:first-child{margin-top:0}
.video_list2 .list .img{position:relative; overflow:hidden; width:100%; height:auto; padding-bottom:56.25%; max-width:unset; margin:15px 0; border-radius:4px;}
.video_list2 .list .img img{position:absolute; top:50%; left:50%; width:100%; height:100%; transform:translate(-50%, -50%); -webkit-transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%);}
.video_list2 .list .title{overflow: hidden; margin-bottom:15px;}
.video_list2 .list .title b{float:left; height:40px; line-height:20px; box-sizing:border-box; padding:10px 15px; background:#363636; font-weight:700; font-size:15px; color:#FFF; -webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;}
.video_list2 .list .title b.bg-2{background:#4258f1}
.video_list2 .list .title span{float:left; line-height:40px; width:calc(100% - 90px); padding-left:10px; font-weight:500; letter-spacing:-0.05em;}

#content .area_survey table.table tbody td.cont{width:60%; text-align:left;}
#content .area_survey table.table tbody td i{display:inline-block; margin:3px 0;}
#content .area_survey table.table tbody td.left{text-align:left;}
.area_survey .completion img{width:100%;}


 @media all and (max-width:1240px){
	.lnb ul{width:100%;}
	
	.area_online img,
	.img_ytb,
	.area_chedule img{width:100%}

	img.img_ytb2{width:100%}

	.video_list > div{width:33%}
	.video_list > div .list .title span{display:block; width:100%; padding-left:0}
 }

 @media all and (max-width:1024px){
	.area_usb_inr{display:block;}
	.area_usb_inr > *{float:left; width:50%;}
	.area_usb_inr .text{padding:20px 30px;}

	.video_list > div .list .title span{line-height:1.7; display:block; margin-top:7px; width:100%; padding-left:0}
 }

@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%}

	.img_visual 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;}

	.lnb{overflow-x:auto; overflow-y:hidden; width:100%; margin-top:0; border-bottom:1px solid #ddd;}
	.lnb ul{display:table; margin:0 auto; width:100%; height:45px;}
	.lnb ul li{display:table-cell; min-width:120px; white-space: nowrap; vertical-align:middle;}
	.lnb ul li a{min-width:auto; line-height:45px; height:45px; padding:0 10px; margin:0; font-size:14px;}

	.snb{overflow-x:auto; overflow-y:hidden; width:100%; margin-top:0; margin-bottom:40px;}
	.snb ul{display:table; margin:0 auto; width:100%;}
	.snb ul li{display:table-cell; min-width:auto; white-space: nowrap; padding:0 5px; vertical-align:middle;}
	.snb ul li:first-child{}
	.snb ul li a{display:block; padding:10px 15px; font-size:13px; white-space:nowrap;}
	
	#content.sub{padding:40px 0}

	.area_subVisual{height:200px;}
	.area_subVisual .text p{font-size:20px;}

	.added{margin-bottom:20px;  font-size:14px;}

	.list01 > li:before{top:8px;}
	.sub_tit{margin-bottom:15px; padding-bottom:15px; 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_title,
	.img_visual{height:200px; padding: 20px 30px;}
	.img_visual img{right:20px;}
	.img_title h2,
	.img_visual h2{font-size:18px;}

	.area_policy{margin-top:20px !important;}
	.area_policy h2{padding:0px 0; font-weight:600; font-size:22px;}
	.area_policy h6{margin-bottom:10px; font-weight:600; font-size:14px;}
	.area_policy ul li{margin-bottom:5px;}
	.area_policy ul li ul{padding-left:10px;}
	.area_policy ul li ul li{font-size:13px;}
	.area_policy ul li,
	.area_policy p{line-height:1.7; font-size:13px;}
	.area_policy .inr_policy{padding:25px 0;}

	.area_usb_inr > *{float:none; width:100%;}
	.area_usb .text h2, 
	.img_title h2{font-size:18px;}
	
	
	.video_list{display:block;}
	
	.video_list > div{width:100%;}
	.video_list2 .list .title b,
	.video_list > div .list .title b{width:80px; height:auto; padding:5px 10px; font-size:14px;}
	.video_list > div .list .title span{width: calc(100% - 90px); padding-left:10px;}
	.video_list2 .list .title span{line-height:30px;}

	.teacher_video .inr .img{height:250px;}
	.teacher_video .inr .txt{padding:20px;}
	.teacher_video .inr .txt h4{font-size:16px;}
	
	.video_list2 .list{display:block;}
	.video_list2 .list li{width:100%; margin-bottom:35px;}

	.list_poster li{width:49%;}
	.list_poster li p{font-size:14px;}

	#content .area_survey table.table thead th.no,
	#content .area_survey table.table tbody td.no{display:none;}
	#content .area_survey table.table tbody td.cont{border-left:0;word-break: break-all;}
	#content .area_survey table.table th, #content .area_survey table.table td{padding:5px;}

}

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

	.img_visual img{height:100px;}
	
	.video_list2 .list,
	.video_list > div .list{padding: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;}
	
	.img_visual{text-align:center;}
	.img_visual img{position:static; margin-top:10px; transform: translateY(0%);}

	.teacher_video .inr{display:block;}
	.teacher_video .inr .txt,
	.teacher_video .inr .img{width:100%;}
}

@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%;}

	#content .area_survey table.table th, 
	#content .area_survey table.table td{font-size:12px;}
}