@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Roboto');

/*
 * 템플릿		: template030
 * 작성일 	: 2016.02.13
 * 최종수정	: 
 * 내용		: 공통 CSS
 */


/*나눔바른고딕*/
@font-face {
		font-family: 'NanumBarunGothic';
		font-weight: normal;
		font-style: normal;
		src: url('../font/NanumBarunGothic.eot') ,
url('../font/NanumBarunGothic.woff') format('woff'),
url('../font/NanumBarunGothic.ttf') format('truetype');
}
@font-face {
		font-family: 'NanumBarunGothicBold';
		font-weight: normal;
		font-style: normal;
		src: url('../font/NanumBarunGothicBold.eot') ,
url('../font/NanumBarunGothicBold.woff') format('woff'),
url('../font/NanumBarunGothicBold.ttf') format('truetype');
}

body { font-size:12px; font-family:'Dotum', '돋움', 'NanumGothic', '나눔고딕', sans-serif;}

/* common */
.fl { float:left; }
.fr { float:right; }
.cl { clear:both; }
.pt5 { padding-top:5px; }
.f_blue { color:#0E72BC; }
.hidden{ width:0;height:0;font-size:0;line-height:0;overflow:hidden; text-indent:-9999px; visibility:hidden; }
caption{ width:0;height:0;font-size:0;line-height:0;overflow:hidden;  text-indent:-9999px;visibility:hidden; }

/*모바일 퀵메뉴 색상 정의 2018.06.22 임근기 추가*/
.mobileQuickTextColor{color:#e5f908;} 

/* Skinp Navigation */
.skipnavigation { display:block; width:100%; height:0; visibility:hidden; }
.skipnavigation:focus { height:28px; visibility:visible; font-size:1em; line-height:28px; border:1px solid #DADADA; }


/** Skip Navigation **/
#skipNavi{position:absolute; left:0; top:0; width:100%; z-index:9999;}
#skipNavi li{position:absolute; left:0; top:0; width:100%; z-index:9999;}
#skipNavi a{overflow:hidden; display:block; width:1px; height:1px; margin-bottom:-1px; color:#444; font-size:0; text-decoration:none;}
#skipNavi a:active, #skipNavi a:focus{width:100%; height:auto; padding:5px 0; background:#666; font-size:12px;color:#fff; text-align:center;}


/*
 * Layout 
 */
.header_wrapper { position:relative; width:100%;  background:#FFF; z-index:1000; }
.contents_wrapper { width:100%; background:#ffffff; margin-top:10px;}
.footer_wrapper { width:100%; background:#e5e6e8; }

#Header { position:relative; width:100%; margin:0 auto; }

#section_0 { }
#section_1 { }
#section_4 { margin-bottom:14px; }
#section_5 { }
#section_6 { float:left; margin-right:20px;  }
#section_7 { float:left; margin-right:20px;  }
#section_8 { float:left; }
#section_9 { display:inline-block; margin:20px 0 ; }

/* 
/* 
 * Main Contents 
 */
.contents_middle_top { width:100%; margin-bottom:30px; }
.contents_middle_box { width:950px; clear:both; margin:0px auto; box-sizing:border-box; overflow:hidden; }

.contents_middle_box .index_top_middle { float:left; position:relative; width:700px; height:500px; }
.contents_middle_box .index_top_right { float:right; width:250px; height:500px; background-color:#FFF; overflow:hidden; }

.contents_middle_box.main_middle_area { overflow:hidden;}

.contents_middle_box .sub_middle_area { float:left; position:relative; width:730px; min-height:550px; overflow:hidden; }
.contents_middle_box .sub_middle_aside { float:left; width:200px; margin-right:20px; }

/* 추가 : 2016.03.01 - start */
.adbar { position:relative; width:100%; height:18px; margin-bottom:-18px; padding:0 5px; line-height:18px; text-align:right; box-sizing:border-box;  background:#666; opacity:0.75; z-index:2000; }
.adbar a { display:inline-block; height:18px; padding:0 3px; color:#FFF; background:#000; }


#blind_bg{
	display:none; z-index:11; position:fixed; top:0; left:0; width:100%; height:100%; background:#000; 
	-khtml-opacity:.50; /*safari*/
	-ms-filter:alpha(opacity=50);/*IE8*/
	-moz-opacity:.50;/*FF*/
	filter:alpha(opacity=50); /*IE7*/
	opacity:.50;  /*all other browsers*/
}

img{ max-width:100%;}


/* 추가 : 2016.04.29 - 말줄임 표시 */
.ellipsis { width:90%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;clear: both;float:left;color:black;}

.related_sites_container { position:relative; width:950px; height:78px; padding:17px 45px 19px; border:1px solid #E3E3E3; box-sizing:border-box; }
.related_sites_container .viewport { width:860px; height:42px; overflow:hidden; }
.related_sites_container .viewport .related_sites { width:4000px; overflow:hidden;  }
.related_sites_container .viewport .related_sites li { float:left; margin-right:10px; }
.related_sites_container .viewport .related_sites li a { }
.related_sites_container .related_control { height:0; }
.related_sites_container .related_control .related_prev { position:absolute; top:27px; left:14px; width:12px; height:23px; background:url('../images/main_related_prev.gif') no-repeat; width:12px; height:23px; text-indent:-8000px; }
.related_sites_container .related_control .related_prev:hover { background:url('../images/main_related_prev_over_skin_003.gif') no-repeat; }
.related_sites_container .related_control .related_next { position:absolute; top:27px; right:14px; width:12px; height:23px; background:url('../images/main_related_next.gif') no-repeat; width:12px; height:23px; text-indent:-8000px; }
.related_sites_container .related_control .related_next:hover { background:url('../images/main_related_next_over_skin_003.gif') no-repeat; }

/*main slide*/
.main_slide_banner_container { position:relative; width:630px; height:610px; overflow:hidden; }
.main_slide_banner_container .main_slide li { line-height:0; }
.main_slide_banner_container .bx-wrapper { position: relative;	margin: 0 auto; padding: 0;	 }
.main_slide_banner_container .bx-wrapper img { max-width: 100%; display: block; }
.main_slide_banner_container .bx-wrapper .bx-viewport { background: #fff;	
	/*fix other elements on the page moving (on Chrome)*/
	-webkit-transform: translatez(0);
	-moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0); }

/* AUTO CONTROLS (START / STOP) */
.main_slide_banner .bx-wrapper .bx-controls-auto { left:13px; bottom:36px;}
.main_slide_banner .bx-wrapper .bx-pager{ left:15px ; bottom:15px ;}
.main_slide_banner .bx-wrapper .bx-pager.bx-default-pager a {
	background: #fff;text-indent: -9999px;display:inline-block;vertical-align:middle;
	width: 12px;height: 12px;margin-right: 5px; -moz-border-radius: 10px;
	-webkit-border-radius: 10px;border-radius: 10px;}

.main_slide_banner .bx-wrapper .bx-pager.bx-default-pager a:hover,
.main_slide_banner .bx-wrapper .bx-pager.bx-default-pager a.active {
	background: none;
	border:2px solid #fff;	
	width: 8px;
	height: 8px;	}

/*popup zone*/
.main_middle_popupzone { position:relative; width:308px; height:398px; border:1px solid #e7e7e7;}
.main_middle_popupzone img { width:310px; height:400px; }
.main_middle_popupzone .popupzone_list{position:relative;}
.main_middle_popupzone .popupzone_list li{position:relative; width:308px; height:398px; }
.main_middle_popupzone .popup{position:relative; width:auto; height:100%; background-repeat:no-repeat; background-size:cover; background-position:center; }
.main_middle_popupzone .popup a{display:block; width:100%; height:100%; overflow:hidden; text-indent:-99999px;}

.main_middle_popupzone .bx-pager { left:15px; bottom:15px; }
.main_middle_popupzone .bx-pager .bx-pager-item { display:inline-block; }
.main_middle_popupzone .bx-pager .bx-pager-item .bx-pager-link { display:inline-block; width:9px; height:9px; margin-right:5px; border-radius:100%; text-indent:-9000px; background:#666; }
.main_middle_popupzone .bx-pager .bx-pager-item .bx-pager-link.active { background-color:#0076B6;}

/* AUTO CONTROLS (START / STOP) */
.main_middle_popupzone .bx-wrapper .bx-controls-auto { left:13px; bottom:30px;}
.main_middle_popupzone .bx-wrapper .bx-controls-auto .bx-start {display:inline-block; text-indent:-9999px; width:24px; height:23px; outline:0; background:url('../images/controls_playstop.png') -24px -22px no-repeat; margin:0px;}
.main_middle_popupzone .bx-wrapper .bx-controls-auto .bx-start:hover,
.main_middle_popupzone .bx-wrapper .bx-controls-auto .bx-start.active {background-position:-24px 0px;}
.main_middle_popupzone .bx-wrapper .bx-controls-auto .bx-stop {display:inline-block; text-indent:-9999px; width:24px; height:23px; outline:0; background:url('../images/controls_playstop.png') 0px -22px no-repeat;	margin:0px;}
.main_middle_popupzone .bx-wrapper .bx-controls-auto .bx-stop:hover,
.main_middle_popupzone .bx-wrapper .bx-controls-auto .bx-stop.active {background-position: 0px 0px;}

.index_mlsv_box .school_menu_wrap img{ width:300px; height:180px !important;}


#Header .header_gnb ul.nav >li .subDepth li .sub-subDepth {display:none;}


/* banner */
#section_9 .banner_btn{position:absolute; top:-35%; right:0; border:none; padding:0; }
#section_9 .banner_btn a{display:inline-block; width:72px;height:15px;color:#fff;padding:3px;text-align:center; background:#555; font-weight:normal; }

@media screen and (min-width: 1024px) {
#Header .header_gnb{ height:68px !important;}
}


/*========================================================================
1023px 
========================================================================*/
@media screen and (max-width: 1023px) {
	
	body{overflow-x:hidden;}

	#wrapper_all{margin-left:0px;}
	#skipNavi { display:none; }
	
	.contents_wrapper { margin-top:0px;}
	.header_wrapper { border-top:none; height:auto;}
	.footer_wrapper { margin-top:0px}

	.contents_middle_box { width:auto;}
	.contents_middle_box .index_board_02 { width:auto; }

	#Header{ height:auto; }

	#section_0 { border-bottom:none; background:#fff;}
	#section_1 { border-bottom:none; position:absolute; margin-left:-260px; top:0px;}
	#section_4 { float:left; width:48%; padding-left:1%; margin-right:2%; margin-top:20px;}
	#section_5 { float:left; width:48%; padding-right:1%; margin-right:0; margin-top:20px;}
	#section_6 { float:left; width:32%; margin-right:2%; }
	#section_7 { float:left; width:32%; margin-right:2%; }
	#section_8 { float:left; width:32%; margin-right:0; }
	#section_9 { width:100% ; margin:40px 0 ; }
	
	#section_9 .related_sites_container { width:100%; }
	#section_9 .related_sites_container .viewport { width:100%; }
	
	.contents_middle_top .contents_middle_box .fl{ float:none; }
	.contents_middle_top .contents_middle_box .fr{ float:none; }

	.contents_middle_box.main_middle_area { overflow:hidden;  padding:0 10px;}
	.index_mlsv_box .school_menu_wrap img { width:100%; }
	
	#Header .header_login_mobile .class_go{position:absolute; top:23px; right:13px;}
	#Header .header_login_mobile .class_go .class_01 a{display:inline-block;color:#fff; background:#808080; padding:6px; font-size:11px; border:1px solid #666;}
	
	#Header .header_gnb ul.nav >li .subDepth li .sub-subDepth {display: none; }
	#Header .header_gnb ul.nav >li .subDepth li .sub-subDepth li { height:auto; }
	#Header .header_gnb ul.nav >li .subDepth li .sub-subDepth li a {display:block; font-size:11px; display:block; color:#fff; font-weight:400; height:32px; line-height:32px; padding:0px 25px;}
	#Header .header_gnb ul.nav >li .subDepth li .sub-subDepth li a:hover { color:#fff; font-weight:bold; }
	

}
/*========================================================================
768px 
========================================================================*/
@media screen and (max-width: 768px) {
	
	#section_6 { float:left; width:49%; margin-right:2%;}
	#section_7 { float:left; width:49%; margin-right:0px; }
	#section_8 { float:none; clear:both; width:100%; padding-top:50px;}

}

@media screen and (max-width: 767px) {
	.index_mlsv_box{ height:auto !important;}
	.index_mlsv_box .school_menu_wrap img{ width:100% !important; height:auto !important;}
}

/*========================================================================
480px 
========================================================================*/
@media screen and (max-width: 480px) {
	
	.contents_middle_box.top_line{margin:10px auto 0; padding-top:0px; border-top:none; }

	#section_4 { float:none; width:95%; margin:10px 0 ; padding:0 2.5%; }
	#section_5 { float:none; width:95%; margin-right:0; padding:0 2.5%; }
	#section_6 { float:none; width:100%; margin-bottom:30px;}
	#section_7 { float:none; width:100%; margin-right:0;}
	#section_8 { float:none; width:100%; padding-top:35px;}
	
	.main_middle_popupzone,
	.main_middle_popupzone .popupzone_list li,
	.main_middle_popupzone img{ height:auto !important;}
	.related_sites_container,
	.related_sites_container .viewport{ width:100%;}
	
	#Header .header_login_mobile .class_go{position:absolute; top:10px; right:12px;}
}