@charset "utf-8";

@import url(common.css);

#container {position:relative; padding-left:180px}


/* 비주얼 */
#visual_area { position:relative; background:url(/images/template/00016/main/M_visual.jpg) no-repeat; *background:url(/images/template/00016/main/M_visual_2.jpg) no-repeat; background-size:cover; width:100%; min-width:1092px; height:881px}
#visual_area .vis_txt_1, #visual_area .vis_txt_2{ font-size:0; line-height:0; text-indent:-9999em; position:absolute}

#content{ position:absolute; top:0; right:0; width:750px}
#content:after {content:""; display:block; clear:both;}

/* 공지사항 */
div.notice_wrap{ margin-left:350px; width:400px; padding-top:32px; height:188px; background-color:#fff; border-bottom:1px solid #f5f5f5;}
div.notice { position:relative; background:url(/images/template/00016/main/notice_bg.gif) repeat-x; width:360px; height:165px; margin:0 auto; overflow:hidden}
div.notice h2{font-size:17px; font-family:'NanumBold'}
div.notice h2.tit_1{position:absolute; top:0; left:0; }
div.notice h2.tit_2{position:absolute; top:0; left:132px}
div.notice h2 a{display:block; height:33px; line-height:33px; width:129px; text-align:center; color:#b0b0b3; background:#ececec; border:1px solid #ececec; border-bottom:0}
div.notice h2 a:hover{ text-decoration:underline}
div.notice h2 a:active,
div.notice h2 a:focus,
div.notice h2 a.current{color:#2e2e2e; background:#fff; border:1px solid #666; border-bottom:1px solid #fff}

div.notice .list_box{ display:none; padding:50px 0 0; text-align:left; clear:both; overflow:hidden}
div.notice .ul_list,
div.notice .ul_list a{ display:block}
div.notice .ul_list ul li{ font-family:'dotum', '돋움'; height:22px; overflow:hidden; font-size:12px;}
div.notice .ul_list ul li a {float:left; width:250px; line-height:22px; background:url("/images/template/00016/main/notice_dot.gif") no-repeat 0 8px; padding-left:9px; color:#707070; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
div.notice .ul_list ul li a:hover,
div.notice .ul_list ul li a:active,
div.notice .ul_list ul li a:focus{ text-decoration:underline}
div.notice .ul_list ul li span.date{color:#959595; display:inline-block; float:right; line-height:22px}
div.notice .btn_more{ position:absolute; right:1px; top:12px; display:block; width:36px; height:12px; text-indent:-10000em; font-size:0; background:url(/images/template/00016/main/btn_more.gif) no-repeat}

/* 포토갤러리 */
.m_gallery{ position:relative; margin-left:350px; width:400px; height:220px; overflow:hidden; background:#fff url(/images/template/00016/main/gall_bg.jpg) no-repeat 110px 0}
.m_gallery a{ display:block; width:50%; float:left; height:185px; border-bottom:1px solid #f5f5f5; padding-top:34px; background-color:#fff}
.m_gallery a h2{margin:0 0 8px 20px; font-size:17px; font-family:'NanumBold'; color:#2e2e2e; background:url(/images/template/00016/main/tit_gall_bg.gif) no-repeat; padding-top:29px}
.m_gallery a p.txt{margin-left:20px; width:152px; font-family:'dotum', '돋움'; font-size:12px; color:#808080; word-break:keep-all; line-height:18px;}
.m_gallery a span.arrow{ margin:30px 0 0 20px; display:block; width:27px; height:27px; background:url(/images/template/00016/main/btn_arrow.gif) no-repeat;}
.m_gallery .arrow2{ position:absolute; top:89px; left:50; width:23px; height:40px; background:url(/images/template/00016/main/arrow_bg.png) no-repeat}

/* 바로가기 */
.m_link{position:relative; margin-left:350px; width:400px;}
.m_link li{ float:left; width:50%}
.m_link li a{ display:block; text-align:center; height:220px; line-height:220px}
.m_link li a img{ *margin-top:35px}
.m_link li.lk01 a{ background-color:#355391;}
.m_link li.lk02 a{ background-color:#888b90;}
.m_link li.lk03 a{ background-color:#a0a2af;}
.m_link li.lk04 a{ background-color:#4e5359;}



/* ie8 미디어쿼리 핵 */
@media \0screen {

 #visual_area { position:relative; background:url(/images/template/00016/main/M_visual_2.jpg) no-repeat; background-size:cover; width:100%; min-width:1092px; height:881px}

}

/* 비주얼 1600px 이하 해상도 작은 이미지 불러오기 */
@media screen and (max-width: 1600px){

	#visual_area {background:url(/images/template/00016/main/M_visual_2.jpg) no-repeat}
	
}


@media screen and (max-width :979px) {		

	#container,
	#visual_area,
	#content,
	#banner_wrap{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; width:100%}
	#container {padding:68px 0 0}
	
	div.notice_wrap,
	div.notice .ul_list ul li a,
	.m_pop,
	#banner_wrap{-webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box}
	
	/* 비주얼 */
	#visual_area {background:url(/images/template/00016/main/M_visual.jpg) no-repeat; width:100%; min-width:0; height:430px; background-position:-20px -20px; background-size:140% auto}	
	

	#content{ position:relative; top:auto; right:auto; width:100%}
	
	/* 공지사항 */
	div.notice_wrap{ margin-left:0; width:100%; padding-top:25px; height:220px; border-bottom:0; border-left:1px solid #f5f5f5}
	div.notice {width:88%}
	div.notice h2.tit_2{left:112px}
	div.notice h2 a{width:109px}
	div.notice .ul_list ul li{ height:24px;}
	div.notice .ul_list ul li a { width:66%; line-height:24px; background:url("/images/template/00016/main/notice_dot.gif") no-repeat 0 9px;}
	
	/* 포토갤러리 */
	.m_gallery{margin-left:0; width:100%; background-position: 180px top; background-size:100% 100%}
	.m_gallery a{border-top:1px solid #f5f5f5; border-bottom:0}
	.m_gallery a p.txt{width:90%}
	
	/* 바로가기 */
	.m_link{margin-left:0; width:100%;}
	.m_link li{ float:left; width:50%}
	
	
	
}



@media screen and (max-width :800px) {		
	
	/* 비주얼 */
	#visual_area {height:360px; background-size:150% auto}
	

}

@media screen and (max-width :690px) {		
	
	/* 비주얼 */
	#visual_area {background:url(/images/template/00016/main/M_visual.jpg) no-repeat; height:320px; background-position:-20px -20px; background-size:150% auto}
	
	/* 공지사항 */
	div.notice h2.tit_2{left:88px}
	div.notice h2 a{width:85px}
	
	/* 포토갤러리 */
	.m_gallery a p.txt{width:80%}
	

}


@media screen and (max-width :560px) {		
	
	/* 비주얼 */
	#visual_area {height:280px; background-size:170% auto}

	
	/* 포토갤러리 */
	.m_gallery{background-position: 100px top;}
	
	
	
	
}

@media screen and (max-width :480px) {		
	
	/* 비주얼 */
	#visual_area {height:240px; background-size:190% auto}
	

}

@media screen and (max-width :380px) {		
	
	/* 비주얼 */
	#visual_area {height:200px; background-size:200% auto}
	

}