@charset "utf-8";

@import url(common.css);

#container {position:relative; background:url(/images/template/02172/main/m_link_bg.png) repeat-x 0 342px; }
#container:after {content:""; display:block; clear:both;}

.main_content {position:relative; z-index:7; width:980px; margin:0 auto; }

/* 메인비주얼 */
.main_visual{ position:relative; width:100%; background:#cbd8f3 url(/images/template/02172/main/visual_bg.png) repeat 0 0;}
.main_visual p{ position:relative; width:980px; margin:0 auto;}
.main_visual p img{ width:100%; }

/* 바로가기 */ 
.M_link{ position:relative; width:100%; height:135px; }
.M_link ul{ width:100%; padding-top:15px;overflow:hidden;}
.M_link li{ float:left; width:12.4%; }
.M_link li a{ display:block; color:#fff; font-family:"NanumBold"; font-size:14px; letter-spacing:-1px; text-align:center;}
.M_link li a:hover{ color:#ffdf00}
.M_link li span{ display:block; margin-top:8px;}

/* 공지사항 */
.notice { position:relative; width:35%; float:left; height:190px; padding-top:20px; overflow:hidden; background-color:#20a4f4}
.notice h2{ font-size:15px; font-family:"NanumBold"}
.notice h2 a{ position:absolute; top:20px; display:block; color:#fff; letter-spacing:-1px; background:url(/images/template/02172/main/notice_tit_bg.gif) no-repeat 0 center; padding-left:10px}
.notice h2.tit_1 a{ left:20px; background:none; padding-left:0}
.notice h2.tit_2 a{ left:87px; }
.notice h2.tit_3 a{ left:176px; }
.notice h2 a:hover{text-decoration:underline}
.notice h2 a.current{ color:#ffdf00}
.notice .list_box.on{ display:block;}
.notice .list_box{ display:none; border-top:1px solid #fff; margin:32px 20px 0;}
.notice .list_box ul{ overflow:hidden; padding:10px 0 0}
.notice .list_box ul li{ font-family:'돋움',Dotum; height:26px; line-height:26px; font-size:12px; background:url("/images/template/02172/main/notice_dot.gif") no-repeat 0 10px; padding-left:8px;}
.notice .list_box ul li a{color:#fff;}
.notice .list_box ul li a:hover{ text-decoration:underline;}
.notice .list_box ul li span.text { color:#fff; float:left; width:70%; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice .list_box ul li span.date { float:right; color:#fff;}
.notice .btn_more{ position:absolute; right:20px; top:23px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02172/main/btn_more.png) no-repeat;}

/* 갤러리 */
.gallery { position:relative; width:35%; height:190px;  float:left; overflow:hidden; padding-top:20px; background-color:#e1e1e1}
.gallery h2{ font-size:16px; margin:0 0 13px 20px; font-family:"NanumBold"; color:#333;}
.gallery ul{ overflow:hidden; border-top:1px solid #fff; padding:20px 0 0; margin:0 20px;}
.gallery ul li{ float:left; margin-left:3.5%; *margin-left:3%; width:31%;}
.gallery ul li:first-child{ margin-left:0}
.gallery ul li a{ display:block; color:#555; font-size:12px; font-family:'돋움',Dotum}
.gallery ul li a:hover{ text-decoration:underline}
.gallery ul li a .img{ display:block}
.gallery ul li a .img img{ width:100%; height:78px}
.gallery ul li a .txt{ display:block; margin-top:12px; line-height:14px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gallery .btn_more{position:absolute; right:20px; top:23px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02172/main/btn_more02.png) no-repeat;}

/* 팝업존 */
.pop { position:relative; width:30%; height:190px; float:left; padding-top:20px; overflow:hidden; background-color:#00c0cd}
.pop h2{  font-size:16px; margin:0 0 13px 20px; font-family:"NanumBold"; color:#fff;}
.pop .nss_pg {position:absolute; top:23px; right:20px}

.pop .nss_pg a { display: block; float: left; font-size: 0; text-indent: -10000em; width: 19px; height: 18px; margin: 0 0 0 0;}
.pop .nss_pg a.pre {background: url(/images/template/02313/main/btn_c_prev.gif) no-repeat;}
.pop .nss_pg a.stop {background: url(/images/template/02313/main/btn_stop.gif) no-repeat;}
.pop .nss_pg a.next {background: url(/images/template/02313/main/btn_c_next.gif) no-repeat;}
.pop .nss_pg a.list {background: url(/images/template/02313/main/btn_list.gif) no-repeat;}


/*
.pop .nss_pg a.list {background: url(/images/template/02313/main/btn_list.png) no-repeat;}


.pop .nss_pg li {float:left; width:13px; height:13px; margin:0 2px}
.pop .nss_pg li a {display:block; width:100%; height:100%; text-indent:-9999em; background:url('/images/template/02313/main/pop_location.png') no-repeat -17px 0}
.pop .nss_pg li.on a {background:url('/images/template/02313/main/pop_location.png') no-repeat 0 0}
*/
.pop .pop_img {position:relative}
.pop .pop_img li {display:none; width:100%; height:151px; text-align:center; margin:0 auto}
.pop .pop_img li img {width:100%; height:100%; vertical-align:middle}
.pop .pop_img li.on {display:block}

/*
.pop .btn_more{position:absolute; right:20px; top:23px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02172/main/btn_more.png) no-repeat;}
.pop .pop_list{overflow:hidden; border-top:1px solid #fff; padding:15px 0 0; margin:0 20px;}
.pop .pop_list li{  font-size:12px; font-family:'돋움',Dotum; line-height:23px;}
.pop .pop_list li a{ display:block; background:url("/images/template/02172/main/notice_dot.gif") no-repeat 0 10px; padding-left:8px; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pop .pop_list a:hover { text-decoration:underline;}
*/

/* 배너존 */
.banner_zone{ position:relative; z-index:1; height:78px; width:980px; margin:0 auto; overflow:hidden; clear:both; background:#fff;}
.banner_zone h2{ font-size:15px; font-family:"NanumBold"; color:#1d1d1d; position:absolute; top:19px; left:0;}
.banner_zone .btn{ position:absolute; left:0; top:44px}
.banner_zone .btn a{ float:left; font-size:0; text-indent:-10000em; width:14px; height:15px; vertical-align:top}
.banner_zone .btn a.pre{background:url(/images/template/02172/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02172/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02172/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02172/main/btn_b_list.gif) no-repeat; width:15px; }
.banner_zone ul{ padding-top:17px; margin-left:80px; height:45px; overflow:hidden}
.banner_zone ul li{ float:left; margin-left:10px;}
.banner_zone ul li a img{ width:170px; height:45px}

@media (max-width: 800px) {
	
	#container,
	.main_content,
	.M_link, 
	.M_link li,
	.banner_zone{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	#container { width:100%; padding-top:68px; background-image:none;}
	.main_content { width:100%; margin:0 auto; height:100%; }
		
	.main_visual, .noticeBox, .gallery_wrap, .M_link, .pop, .banner_zone{ -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; transition:all 0.3s ease}

	/* 메인비주얼 */
	.main_visual p{ width:100%;}
	
	/* 바로가기 */ 
	.M_link{ background:#5f85bf; height:auto; }
	.M_link ul{ padding:10px 0; }
	.M_link li{ width:33.33%; padding:10px 0 }
	.M_link li:first-child{ width:33.33%; }
		
	/* 공지사항*/ 
	.notice { width:100%;}

	/* 갤러리 */
	.gallery{ width:50%;}
		
	/* 팝업존 */
	.pop{ width:50%; }	
	
	/* 배너존 */
	.banner_zone {width:95%;}
	.banner_zone ul li{width:-webkit-calc(33% - 10px); width:-moz-calc(33% - 10px); width:calc(33% - 10px);}
	.banner_zone ul li a img{ width:100%}	

}

@media (max-width: 560px) {	

	/* 갤러리 */
	.gallery{ width:100%;}
		
	/* 팝업존 */
	.pop{ width:100%; }
	
	/* 배너존 */
	.banner_zone ul li{ width:-webkit-calc(50% - 10px); width:-moz-calc(50% - 10px); width:calc(50% - 10px);}	

}

@media (max-width: 480px) {

	/* 바로가기 */
	.M_link li img{ width:50%;}
		
		
}

@media (max-width: 380px) {
	
	/* 배너존 */
	.banner_zone ul li{ width:-webkit-calc(100% - 10px); width:-moz-calc(100% - 10px); width:calc(100% - 10px);}

}