@charset "utf-8";

@import url(common.css);

#container {position:relative; height:100%; background:url(/images/template/02360/main/m_bg.gif) repeat 0 0; padding:50px 0 0; }
#container:after {content:""; display:block; clear:both;}

.main_content {position:relative; z-index:7; width:1020px; margin:0 auto; }
.main_content:after {content:""; display:block; clear:both;}

/* 메인비주얼 */
.main_visual{ position:relative; width:460px; float:left; }
.main_visual p img { width:100%; }
.main_visual .web_visual {display:block;}
.main_visual .tab_visual {display:none;}

/* 학교앨범 */
.gallery { position:relative; width:560px; height:200px; float:left; overflow:hidden; background:#fff; }  
.gallery h2{font-size:16px; color:#333; padding:20px 0 0 20px; }
.gallery .btn_more{ position:absolute; top:22px; right:20px; z-index:10; font-size:12px; padding-left:14px; color:#555; font-family:"Nanum";  background:url("/images/template/02360/main/btn_more.gif") no-repeat 0 center;}
.gallery ul.gall_list{ padding:15px 20px 0; overflow:hidden;}
.gallery ul.gall_list li{ position:relative; float:left; width:32%; margin-left:2%;}
.gallery ul.gall_list li:first-child{ margin-left:0;}
.gallery ul.gall_list li a{ color:#333; font-size:11px; font-family:'돋움',Dotum;}
.gallery ul.gall_list li a:hover{ text-decoration:underline}
.gallery ul.gall_list li a .img{ display:block}
.gallery ul.gall_list li a .img img{ width:100%; height:100px}
.gallery ul li a .txt{ display:block; margin-top:10px; line-height:14px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 공지사항 */
.notice { position:relative; width:370px; height:200px; *height:198px; float:left; overflow:hidden; background:#fff; margin-top:10px; }
.notice h2{font-size:16px; color:#333; padding:20px 0 0 20px; }
.notice .btn_more{ position:absolute; top:22px; right:20px; z-index:10; font-size:12px; padding-left:14px; color:#555; font-family:"Nanum";  background:url("/images/template/02360/main/btn_more.gif") no-repeat 0 center;}
.notice .list_box{padding:15px 20px 0; font-family:'돋움',Dotum; font-size:12px; overflow:hidden;}
.notice .list_box li{ font-family:'돋움',Dotum; line-height:24px; font-size:12px; overflow:hidden; position:relative;}
.notice .list_box li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#444;}
.notice .list_box li a:hover{ text-decoration:underline;}
.notice .list_box li span.text {float:left; padding-left:10px; background:url("/images/template/02360/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice .list_box li span.date { position:absolute; top:0; right:0; color:#444;}

/* 바로가기 */
.M_link{ position:relative; width:190px; height:200px; margin-top:10px; float:left; background:url("/images/template/02360/main/M_link_bg.gif") repeat;   }
.M_link h2{font-size:16px; color:#fff; padding:20px 0 0 20px; }
.M_link ul{ padding:8px 20px 0; }
.M_link li{ margin-top:8px; background:#5e8b16;}
.M_link li a{ display:block; line-height:36px; color:#fff; font-family:"NanumBold"; font-size:13px; letter-spacing:-1px; background:url(/images/template/02360/main/ico_arrow.png) no-repeat 95% 50%}
.M_link li a:hover{text-decoration:underline}
.M_link li a span{ display:block; padding-left:10px;}

/* 팝업존 */
.pop{ position:relative; width:235px; height:200px; background-color:#fff; overflow:hidden; float:left; }
.pop h2{ font-size:16px; line-height:55px; font-family:"NanumBold"; color:#fff; padding-left:14px; overflow:hidden; background:url("/images/template/02360/main/pop_bg.gif") repeat;}
.pop .list {position:relative; height:121px; padding:13px 25px 10px; font-family:'돋움',Dotum; line-height:24px; font-size:12px; overflow-y:auto; background:url("/images/template/02360/main/pop_bg2.gif") repeat;}
.pop .list li a { display:block; padding-left:10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#fff; background:url("/images/template/02360/main/pop_dot.png") no-repeat 0 9px;}
.pop .list li a:hover{text-decoration:underline}
.pop .btn_more {display:none;}

/* 바로가기 */
.M_link02 { position:relative; width:325px; height:200px; float:left; background:#f7ede4; }
.M_link02 h2 {font-size:16px; line-height:55px; color:#333; padding:0 0 0 25px; }
.M_link02 ul { padding:10px 20px 0; }
.M_link02 li {position:relative;  width:33.3%;float:left;  text-align:center;}
.M_link02 li a { display:block; height:110px; color:#444; font-family:"NanumBold"; font-size:13px; letter-spacing:-1px;}
.M_link02 li a:hover{text-decoration:underline}
.M_link02 li a span { display:block; padding-top:75px;}
.M_link02 li a img {position:absolute; top:0; left:50%; margin-left:-44px;}

/* 바로가기 */
.M_link03{ position:relative; width:560px; float:left; margin-top:10px;}
.M_link03 li{position:relative; width:49%; float:left; margin-left:2%; background:#fff; text-align:center;}
.M_link03 li:first-child { margin-left:0;}
.M_link03 li a { display:block; line-height:73px; color:#444; font-family:"Nanum"; font-size:14px; letter-spacing:-1px;}
.M_link03 li a:hover{text-decoration:underline}
.M_link03 li a img {width:50px; height:48px; margin-right:10px;}

/* 배너존 */
.banner_zone{ position:relative; width:1020px; margin:10px auto 20px; padding:15px 0; overflow:hidden; background:#fff;}
.banner_zone h2{ font-size:15px; font-family:"NanumBold"; color:#1d1d1d; position:absolute; top:17px; left:20px;}
.banner_zone .btn{ position:absolute; left:20px; top:40px}
.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/02360/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02360/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02360/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02360/main/btn_b_list.gif) no-repeat; width:15px; }
.banner_zone ul{ margin-left:100px; height:45px; overflow:hidden}
.banner_zone ul li{ float:left; margin-left:10px;}
.banner_zone ul li a img{ height:45px}
 
@media (max-width: 800px) {
	
	#container,
	.main_content,
	.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:69px; }
	.main_content { width:95%; height:100%; padding-top:15px; }
		
	.main_visual, .notice, .pop, .gallery, .M_link, .M_link02, .M_link03, .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{ width:100%; }
	.main_visual .web_visual {display:none;}
	.main_visual .tab_visual {display:block;}

	/* 학교앨범 */
	.gallery {width:49%;}

	/* 공지사항 */
	.notice {width:49%; float:right; margin-top:0;}

	/* 바로가기 */
	.M_link{ width:49%;}

	/* 팝업존 */
	.pop {width:49%; float:right; margin:10px 0 0;}

	/* 바로가기 */
	.M_link02{ width:49%; height:125px; margin:10px 0 0;}
	.M_link02 h2{ display:none; }
	.M_link02 ul { padding:0; }
	.M_link02 li a{ height:125px; }
	.M_link02 li a span {padding-top:85px;}
	.M_link02 li a img {position:absolute; top:20px; margin-left:-35px; width:70px}

	/* 바로가기 */
	.M_link03{ width:49%; float:right; margin:10px 0 0;}
	.M_link03 li{width:100%; margin:5px 0 0; float:none; text-align:left;}
	.M_link03 li:first-child { margin:0;}
	.M_link03 li a{ line-height:60px; }
	.M_link03 li a img {position:absolute; top:50%; left:20px; width:50px; height:48px; margin:-24px 0 0 0;}
	.M_link03 li a span {padding-left:80px;}
	

	/* 배너존 */
	.banner_zone {width:95%; }
	.banner_zone ul li{ width:-webkit-calc(33% - 15px); width:-moz-calc(33% - 15px); width:calc(33% - 15px);}
	.banner_zone ul li a img{ width:100%}	

}

@media (max-width: 640px) {	
	

	/* 학교앨범 */
	.gallery { width:100%; }
	
	/* 공지사항 */
	.notice { width:100%; margin:10px 0 0;}

}

@media (max-width: 560px) {

	/* 학교앨범 */
	.gallery {float:none;}
	
	/* 공지사항 */
	.notice {float:none;}

	/* 바로가기 */
	.M_link{ width:100%; float:none; }
			
	/* 팝업존 */
	.pop{ width:100%; float:none; }

	/* 바로가기 */
	.M_link02{ width:100%; float:none;}

	/* 바로가기 */
	.M_link03{ width:100%; float:none;}

	/* 배너존 */
	.banner_zone ul li{ width:-webkit-calc(50% - 20px); width:-moz-calc(50% - 20px); width:calc(50% - 20px);}	
		
}


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