@charset "utf-8";

@import url(common.css);

#container {position:relative; z-index:2}
#container:after {content:""; display:block; clear:both}

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

/* 메인비주얼 */
.main_visual_wrap {position:relative; width:100%; height:355px; background:url('/images/template/02254/main/bg_01.gif') repeat 0 0; border-bottom:2px solid #0b54a1}
.main_visual {position:relative; width:1020px; margin:0 auto; text-align:center}
.main_visual p {width:100%}
.main_visual p img {width:100%}

/* 공지사항 */
.notice {position:relative; float:left; width:420px; height:210px; margin-top:30px; overflow:hidden}  
.notice h2 {margin:0; font-size:14px; font-family:"NanumBold"; letter-spacing:-1px} 
.notice h2 a {display:block; position:absolute; top:0; width:100px; line-height:35px; text-align:center; color:#515151; background-color:#eee}
.notice h2.tit_1 a {left:0}
.notice h2.tit_2 a {left:101px}
.notice h2.tit_3 a {left:202px}
.notice h2 a.current {color:#fff; background-color:#006bb6} 
.notice .btn_more {position:absolute; top:10px; right:0; width:17px; height:17px; text-indent:-10000px; background:url('/images/template/02254/main/btn_more.gif') no-repeat 0 0; z-index:10 }
.notice .list_box.on {display:block}     
.notice .list_box {display:none; overflow:hidden; padding:15px 5px 0; margin-top:35px;  border-top:2px solid #006bb6} 
.notice .list_box li {position:relative;  font-family:"돋움",Dotum; font-size:12px; line-height:33px; *line-height:33px; 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/02254/main/notice_dot.gif') no-repeat 0 15px}
.notice .list_box li span.date {position:absolute; top:0; right:0; color:#727272}

/* 행사사진 */
.m_v {position:relative; float:left; width:265px; height:210px; margin:30px 0 0 35px}
.m_v h2 {height:35px; margin:0; line-height:35px; font-size:14px; font-family:"NanumBold"; letter-spacing:-1px}


/* 행사사진 */
.gallery {position:relative; float:left; width:265px; height:210px; margin:30px 0 0 35px}
.gallery h2 {height:35px; margin:0; line-height:35px; font-size:14px; font-family:"NanumBold"; letter-spacing:-1px}
.gallery .btn_more {position:absolute; top:10px; right:0; width:17px; height:17px; text-indent:-10000px; background:url('/images/template/02254/main/btn_more.gif') no-repeat 0 0; z-index:10 }
.gallery ul {overflow:hidden; border:1px solid #ddd}
.gallery ul li {float:left; width:50%; *width:49%; text-align:center}
.gallery ul li:first-child {margin-left:0}
.gallery ul li a {color:#424242; 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:85px}
.gallery ul li a .txt {display:none; margin-top:15px; line-height:14px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 팝업존 */
.pop{ position:relative; width:265px; height:210px; float:right; margin-top:30px; overflow:hidden; }
.pop h2{font-size:14px; font-family:"NanumBold"; padding: 0; line-height:35px;}
.pop .nss_pg{ position:absolute; top:10px; right:1px; }
.pop .nss_pg > span{ font-family:'돋움',Dotum; line-height:28px; color:#fff; font-size:12px; display:inline-block; width:45px; text-align:center}
.pop .nss_pg > span strong{ color:#fff155}
.pop .nss_pg a{ display:block; width:18px; float:left; font-size:0; text-indent:-10000em; height:18px; margin:0 0 0 0}
.pop .nss_pg a.pre{ background:url(/images/template/02254/main/btn_c_prev.gif) no-repeat;}
.pop .nss_pg a.next{ background:url(/images/template/02254/main/btn_c_next.gif) no-repeat; }
.pop .nss_pg a.stop{ background:url(/images/template/02254/main/btn_stop.gif) no-repeat; }
.pop .nss_pg a.list{ background:url(/images/template/02254/main/btn_list.gif) no-repeat; }
.pop .pop_img{width:100%;height:175px;}
.pop .pop_img li{ display:none; width:100%; height:100%; }
.pop .pop_img li img{ width:100%;height:100%;}
.pop .pop_img li.on{ display:block}

/* 영양소식 */ 
.meal_menu {position:absolute; top:260px; right:0; overflow:hidden; width:265px; height:140px}
.meal_menu h2 { margin:0;  line-height:35px; padding-left:12px;font-size:14px; font-family:"NanumBold"; letter-spacing:-1px; color:#fff; background-color:#f39200; vertical-align:middle; border-bottom:2px solid #e23b00}
.meal_menu .btn_more {position:absolute; top:10px; right:0; width:17px; height:17px; text-indent:-10000px; background:url('/images/template/02254/main/btn_more.gif') no-repeat 0 0; z-index:10}  
.meal_menu .meal_list { height:102px;padding:0; border:1px solid #ddd; border-top:0; overflow-y: auto;}
.meal_menu .meal_list ul{padding-top:10px;}
.meal_menu .meal_list ul:after{display:block;clear:both;content:''}
.meal_menu .meal_list li{float:left;width:48%;}
.meal_menu .meal_list li span.text {margin-left:10px;float:left; width:70%; padding-left:13px; background:url('/images/template/02254/main/meal_dot.gif') no-repeat 0 10px;font-size:12px; font-family:'돋움',Dotum; line-height:25px;vertical-align:middle;}

/* 바로가기 */
.M_link {position:relative; float:left; width:720px; height:140px; margin-top:20px; background-color:#dae7f1; border-top:0; clear:both}
.M_link ul {overflow:hidden; margin:5px; height:130px; background-color:#fff}
.M_link li {float:left; width:20%; text-align:center} 
.M_link li a {display:block; color:#010101}
.M_link li a:hover {text-decoration:underline}
.M_link li a p {margin:10px 0 20px; letter-spacing:-1px; font-size:13px; font-family:"Nanum"}
.M_link li a img {margin-top:20px}


/* 배너존 */
.banner_zone_wrap {width:100%; background-color:#fff; border-top:1px solid #e7e7e7}
.banner_zone {position:relative; width:1020px; padding:10px 0; margin:0 auto;overflow:hidden;}
.banner_zone h2 {position:absolute; top:25px; left:15px; font-size:15px; font-family:"NanumBold"; color:#1d1d1d}
.banner_zone .btn {position:absolute; top:25px; left:90px}
.banner_zone .btn a {float:left; font-size:0; text-indent:-10000em; width:20px; height:20px; margin:0 2px; vertical-align:top}
.banner_zone .btn a.pre {background:url('/images/template/02254/main/btn_b_prev.gif') no-repeat}
.banner_zone .btn a.stop{background:url('/images/template/02254/main/btn_b_stop.gif') no-repeat;}
.banner_zone .btn a.next{background:url('/images/template/02254/main/btn_b_next.gif') no-repeat}
.banner_zone .btn a.list{background:url('/images/template/02254/main/btn_b_list.gif') no-repeat}
.banner_zone ul {margin-left:170px; height:48px; overflow:hidden}
.banner_zone ul li{ float:left; margin-left:15px;}
.banner_zone ul li a img {width:153px; height:48px}





@media (max-width:800px) {
	
	#container, .main_content, 
	.notice, .pop, .gallery, .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}
	
	.main_visual, .main_content, .main_visual,
	.notice, .pop, .gallery, .M_link, .meal_menu,
	.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}
	
	#container {width:100%; padding-top:68px}
	.main_content {width:96%; margin:0 auto; height:100%; min-height:670px; }
	
	/* 메인비주얼 */
	.main_visual_wrap {height:auto}
	.main_visual {width:100%; height:auto}

	/* 공지사항 */
	.notice {width:100%; margin-top:30px}  
	
	/* 학교상징 */
	.m_v {width:100%; height:auto; margin:20px 0 20px 0}
        .m_v  img {width:100%; height:100%}
	
	/* 팝업존 */	
	.pop{ width:48%; float:left;margin-top: 0; }
	.pop .pop_img li{ width:100%; }

	/* 영양소식 */ 
	.meal_menu {top:400px; width:48%; height:auto;margin-top:10px;}
	.meal_menu .meal_list {height:162px}
	
	/* 바로가기 */
	.M_link {width:100%; margin:20px 0;}
	
	/* 배너존 */
	.banner_zone {width:100%}
	.banner_zone ul li{width:-webkit-calc(32% - 10px); width:-moz-calc(32% - 10px); width:calc(32% - 10px); margin-left:10px;}
	.banner_zone ul li a img{ width:100%}

}

@media (max-width: 690px) {
	
	/* 배너존 */
	.banner_zone h2 {display:none}
	.banner_zone .btn {left:10px}
	.banner_zone ul {margin-left:80px}
	
	
}

@media (max-width: 600px) {	

	/* 팝업존 */
	.pop{ width:100%; }	
	
	/* 영양소식 */ 
	.meal_menu {position:relative; top:0; left:0; float:left; width:100%; margin-top:20px}
	.meal_menu .meal_list {height:100px}

	/* 바로가기 */
	.M_link, .M_link ul {height:auto}
	.M_link li {height:50px; border-left:1px dashed #3262ad}
	.M_link li.link1, .M_link li.link2, .M_link li.link3, .M_link li.link4 {width:50%; border-bottom:1px dashed #3262ad}
	.M_link li.link1, .M_link li.link3, .M_link li.link5 {border-left:0}
	.M_link li.link5 {width:100%}
	.M_link li a {position:relative; padding:5px 25px; line-height:40px; text-align:left}
	.M_link li a img {position:absolute; top:-15px; left:10px; width:40px; height:40px; color:#fff}
	.M_link li a p {margin:0 0 0 40px}
	
	
}


@media (max-width: 480px) {
	
	/* 바로가기 */
	.M_link, .M_link ul {height:auto}
	.M_link li.link1, .M_link li.link2, .M_link li.link3, .M_link li.link4 {width:100%}
	.M_link li {border-left:0}
	
	
	/* 배너존 */
	.banner_zone ul li {width:-webkit-calc(48% - 10px); width:-moz-calc(48% - 10px); width:calc(48% - 10px);}
	
	
}

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