@charset "utf-8";

@import url(common.css);

#container {position:relative; background:url(/images/template/02212/main/m_bg.gif) repeat-x 0 530px;}
#container:after {content:""; display:block; clear:both;}

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

/* visual */
.main_visual { position:relative; width:100%; height:358px; overflow:hidden; background:url("/images/template/02212/main/visual_bg_01.png") no-repeat;}
.main_visual  p{ position:relative; width:980px; margin:0 auto; z-index:1; }

/* 공지사항 */
.notice { position:relative; width:260px; height:145px; float:left; overflow:hidden; margin-right:30px;}  
.notice h2 {font-size:16px; font-family:"NanumBold"}
.notice h2 a {display:block; position:absolute; top:20px; height:27px; line-height:27px; text-align:center; color:#959595}
.notice h2.tit_1 a {left:0px;}
.notice h2.tit_2 a {left:80px}
.notice h2 a.current {color:#64b613;; border-bottom:3px solid #64b613;} 
/*.notice .btn_more {position:absolute; top:25px; right:25px; background:url('/images/template/02212/main/btn_more.gif') no-repeat 0 0; width:16px; height:16px; text-indent:-10000px; z-index:10 }*/
.notice .btn_more {position:absolute; top:25px; right:0px; background:url('/images/template/02212/main/btn_more.png') no-repeat 0 0; width:16px; height:16px; text-indent:-10000px; z-index:10 }
.notice .list_box.on {display:block}
.notice .list_box {display:none; overflow:hidden; /*margin:0 25px;*/ padding:62px 0 0; font-family:'돋움',Dotum; font-size:12px}
.notice .list_box li {position:relative; font-family:'돋움',Dotum; line-height:22px; font-size:12px; overflow:hidden; }
.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; width:70%; padding-left:8px; background:url('/images/template/02212/main/notice_dot.gif') no-repeat 0 9px; }
.notice .list_box li span.date {position:absolute; top:0; right:0; color:#727272}


/* 바로가기 */ 
.M_link{ position:relative; float:right; width:400px; z-index:20;}
.M_link li{ float:left; width:33.33%; }
.M_link li:first-child{ width:33.34%}
.M_link li a{ display:block; color:#fff; font-family:"NanumBold"; font-size:13px; letter-spacing:-1px; text-align:center; height:130px; padding-top:15px;}
.M_link li span{ display:block; margin-top:10px;}
.M_link li.link1{ background-color:#ffbd89;}
.M_link li.link2{ background-color:#eb615a;}
.M_link li.link3{ background-color:#004a80;}

/* 학교앨범 */
.gallery{ position:relative; width:260px; height:160px; overflow:hidden; float:left; margin:25px 0 0; }
.gallery h2{font-size:14px; font-family:"NanumBold"; line-height:30px; color:#333; }
.gallery .btn_more{ position:absolute; right:0; top:4px; width:16px; height:16px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02212/main/btn_more.png) no-repeat;}
.gallery ul.gall_list{ padding:5px 0 0; overflow:hidden;}
.gallery ul.gall_list li{ float:left; width:121px; margin-left:16px;}
.gallery ul.gall_list li:first-child { margin-left:0;}
.gallery ul.gall_list li a{ color:#555; font-size:12px; 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:121px; height:95px}
.gallery ul.gall_list li a .txt{ display:block; font-weight:bold; padding:13px 0 0; line-height:14px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 팝업존 */
.pop{ position:relative; width:260px; height:160px; float:left; margin:25px 0 0 35px;}
.pop h2{font-size:14px; font-family:"NanumBold"; padding:0 0 10px 0; color:#444; line-height:25px;}
.pop .nss_pg{ position:absolute; top:0; right:0}
.pop .nss_pg > span{ position:absolute; font-family:'돋움',Dotum; line-height:28px; color:#666; font-size:12px; left:-60px; display:inline-block; width:50px; text-align:right}
.pop .nss_pg > span strong{ color:#0588be}
.pop .nss_pg a{ display:block; float:left; font-size:0; text-indent:-10000em; width:22px; height:22px; margin-left:3px;}
.pop .nss_pg a.pre{ background:url(/images/template/02212/main/btn_prev.png) no-repeat; }
.pop .nss_pg a.stop{ background:url(/images/template/02212/main/btn_stop.png) no-repeat; }
.pop .nss_pg a.next{ background:url(/images/template/02212/main/btn_next.png) no-repeat; }
.pop .nss_pg a.list{ background:url(/images/template/02212/main/btn_list.png) no-repeat; }
.pop .pop_img{ position:relative; }
.pop .pop_img li{ display:none; width:260px; height:127px; text-align:center; margin:0 auto}
.pop .pop_img li img{ width:100%; height:127px; vertical-align:middle;}
.pop .pop_img li.on{ display:block}

/* 행사일정 */
.schedule{ position:relative; width: 398px; height: 188px; overflow:hidden; float: right; background-color:#0697e1; overflow: hidden; border: 1px solid #ddd; border-top: 0;}
.schedule h2{font-size:16px; font-family:"NanumBold"; line-height:30px; color:#fff; padding:20px 0 0 25px }
.schedule .btn_more{ position:absolute; left:100px; top:25px; width:16px; height:16px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02212/main/btn_more.gif) no-repeat;}
.schedule .date_view{position:relative; width:40%; font-family:'돋움',Dotum; font-weight:bold; font-size:14px; color:#fff; padding:10px 25px;}
.schedule .sch_list{ width:40%; font-family:'돋움',Dotum; font-size:12px; color:#fff; margin-left: 25px; height:100px;}
.schedule .sch_list ul{padding:0 13px 0 0; height:90px; overflow:hidden; overflow-y:auto; clear:both;}
.schedule .sch_list ul li{ line-height:25px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.schedule .inner{position:absolute; top:12px; right:15px; width: 48%; height: 165px; background-color: #fff; }
.schedule table{ width:100%; margin:0 auto; font-family:'돋움',Dotum;}
.schedule table thead th{ color:#fff; font-size:12px; font-weight:normal; letter-spacing:-1px; line-height:35px; background-color:#007cbc}
.schedule table tbody tr:first-child td { padding:10px 0 0}
.schedule table tbody td{ color:#222; font-size:12px; line-height:22px; text-align:center}
.schedule table tbody td .check{ display:inline-block; width:19px; line-height:20px; font-weight:bold; color:#00a1b9; border-bottom:2px solid #00a1b9; }
.schedule table tbody td .today{ display:inline-block; width:19px; line-height:20px; font-weight:bold; color:#f25953; border-bottom:2px solid #f25953; }

/* 바로가기 */ 
.M_link02{ position:relative; width:100%; clear:both; background-color:#364956; margin-top:20px; float:left;}
.M_link02 ul { position:relative; width:980px; padding:10px 0; margin:0 auto; overflow:hidden; box-sizing:border-box;}
.M_link02 li{ float:left; width:20%; }
.M_link02 li a{ display:block; color:#bccbe0; font-family:"NanumBold"; font-size:13px; letter-spacing:-1px;}
.M_link02 li a:hover{ color:#fff;}
.M_link02 li span{ padding-left:5px;}

/* 배너존 */
.banner_zone{ position:relative; z-index:1; width:980px; height:78px; overflow:hidden; clear:both; background:#fff; margin:0 auto;}
.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/02212/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02212/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02212/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02212/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,
	.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:95%; margin:0 auto; height:100%; }
		
	.main_visual, .notice, .gallery, .M_link, .M_link02, .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}
	
	/* visual */
	.main_visual { height:auto;}
	.main_visual  p{ width:100%; }
	.main_visual  p img{ width:100%;}
	
	/* 공지사항 */
	.notice { width:100%;}
	
	/* 바로가기 */ 
	.M_link{ margin-top:25px; width:100%;}
	
	/* 학교앨범 */
	.gallery{ width:48%;}
	.gallery ul.gall_list li{ width:-webkit-calc(50% - 8px); width:-moz-calc(50% - px); width:calc(50% - 8px);}	
	.gallery ul.gall_list li a .img img{ width:100%; }

	/* 팝업존 */
	.pop{ width:48%; float:right; margin:25px 0 0 0;}	
	.pop .pop_img li{ width:100%; }

	/* 행사일정 */
	.schedule{ width:100%; margin:25px 0 0 0; }
	
	/* 바로가기 */ 
	.M_link02 ul { width:95%;}

	/* 배너존 */
	.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) {	
	
	/* 공지사항 */
	.notice { width:100%;}
	
	/* 학교앨범 */
	.gallery{ width:100%;}

	/* 팝업존 */
	.pop{ width:100%; float:right; margin:25px 0 0 0;}	
	.pop .pop_img li{ width:100%; }


	/* 바로가기 */ 
	.M_link02 li{ float:left; width:50%; }

	/* 배너존 */
	.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{ float:none; width:100%; }
	.M_link li:first-child{ width:100%}
	.M_link li a{  font-size:12px;text-align:left; height:auto; padding:10px 0 10px 10px; box-sizing:border-box;}
	.M_link li span{ display:inline-block; margin-top:0;}
	.M_link li img{ width:50px; }	
}

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

}