@charset "utf-8";

@import url(common.css);

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

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

/* 메인비주얼 */
.main_visual{ position:relative; width:100%; }
.main_visual p{ width:980px; margin:0 auto;}
.main_visual img{ width:100%; }

/* 공지사항 */
.notice { position:relative; width:310px; height:220px; float:left; }  
.notice h2 { font-size:13px; font-family:'NanumBold'; }
.notice h2 a{ position:absolute; top:15px; display:block; width:77px; line-height:24px; height:28px; text-align:center; color:#fff; background:url(/images/template/02287/main/tab_off.gif) no-repeat 0 0;}
.notice h2.tit_1 a{ left:0; }
.notice h2.tit_2 a{ left:80px; }
.notice h2 a.current{ background:url(/images/template/02287/main/tab_on.gif) no-repeat 0 0; }
.notice .btn_more{ position:absolute; top:15px; right:0; background:url('/images/template/02287/main/btn_more.png') no-repeat 0 0; width:18px; height:18px; text-indent:-10000px; z-index:10 }
.notice .list_box.on{ display:block; }
.notice .list_box{ display:none; padding:55px 0 0; font-family:'돋움',Dotum; font-size:12px; overflow:hidden;}
.notice .list_box li{ font-family:'돋움',Dotum; line-height:25px; 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:8px; background:url("/images/template/02287/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice .list_box li span.date { position:absolute; top:0; right:0; color:#666;}

/* 공지사항 #2 */
.notice_cnt { position:relative; width:310px; height:220px; float:left; margin-left:25px;}  
.notice_cnt h2 { font-size:13px; font-family:'NanumBold'; }
.notice_cnt h2 a{ position:absolute; top:15px; display:block; width:77px; line-height:24px; height:28px; text-align:center; color:#fff; background:url(/images/template/02287/main/tab_off.gif) no-repeat 0 0;}
.notice_cnt h2.tit_1 a{ left:0; }
.notice_cnt h2.tit_2 a{ left:80px; }
.notice_cnt h2 a.current{ background:url(/images/template/02287/main/tab_on.gif) no-repeat 0 0; }
.notice_cnt .btn_more{ position:absolute; top:15px; right:0; background:url('/images/template/02287/main/btn_more.png') no-repeat 0 0; width:18px; height:18px; text-indent:-10000px; z-index:10 }
.notice_cnt .list_box.on{ display:block; }
.notice_cnt .list_box{ display:none; padding:55px 0 0; font-family:'돋움',Dotum; font-size:12px; overflow:hidden;}
.notice_cnt .list_box li{ font-family:'돋움',Dotum; line-height:25px; font-size:12px; overflow:hidden; position:relative;}
.notice_cnt .list_box li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#444;}
.notice_cnt .list_box li a:hover{ text-decoration:underline;}
.notice_cnt .list_box li span.text {float:left; padding-left:8px; background:url("/images/template/02287/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice_cnt .list_box li span.date { position:absolute; top:0; right:0; color:#666;}

/* .notice.Ty02 { margin-left:25px;} */
/* .notice_cnt.Ty02 { margin-left:25px;}   */

/* 학교앨범 */
.gallery{ position:relative; width:310px; height:210px; background:#fff; float:right;}
.gallery h2{ font-size:16px; font-family:"NanumBold"; text-align:center; color:#fff; line-height:40px; background:#eb5a38; }
.gallery .btn_more{ position:absolute; top:10px; right:15px; background:url('/images/template/02287/main/btn_more02.png') no-repeat 0 0; width:18px; height:18px; text-indent:-10000px; z-index:10 }
.gallery ul.gall_list{ position:relative; height:171px; border:1px solid #ddd; border-top:0; box-sizing:border-box;}
.gallery .gall_list p.img{ position:absolute; top:15px; left:15px;}
.gallery .gall_list p.img img{ width:141px; height:111px;}
.gallery .gall_list li a{ padding:18px 25px 0 170px; *padding-top:0; display:block; font-size:12px;}
.gallery .gall_list li a dl{overflow:hidden; }
.gallery .gall_list li a dt{  font-family:'굴림',gulim; font-size:14px; color:#111; line-height:18px; height:40px; font-weight:bold; overflow:hidden;}
.gallery .gall_list li a dl dd{ color:#555; line-height:15px; font-size:11px; overflow:hidden; height:50px;}
.gallery .gall_list li a dl dd{ color:#888; padding:50px 0 0; display:block; text-align:right;}

/* 바로가기 */
.M_link{ position:relative; width:470px; height:210px;    display: inline-block; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff;  clear:both; box-sizing:border-box;}
.M_link ul{ width:100%; }
.M_link li{ width:33%; height:105px; float:left; box-sizing:border-box; border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
.M_link li a{ display:block; color:#444; padding-top:65px; font-family:"Nanum"; font-size:13px; text-align:center; letter-spacing:-1px;}
.M_link li a:hover{ color:#02a99f;}
.M_link li.link_01, .M_link li.link_04{ width:34%; *width:33%;}
.M_link li img{margin-top: -77px;}
.M_link li a span{display:block; margin-top:-18px; word-break:keep-all;}

/* 팝업존 */
.popBox{ position:relative; width:310px; height:201px; background-color:#fff; overflow:hidden; margin:25px 0 0 25px; float:left; }
.pop{ position:relative; margin:0 auto}
.pop h2{ font-size:16px; font-family:"NanumBold"; color:#fff; padding-left:14px; line-height:37px; overflow:hidden; background:#02a99f;}
.pop .nss_pg{ position:absolute; top:9px; right:12px}
.pop .nss_pg > span{ position:absolute; display:inline-block; font-family:"Nanum"; line-height:20px; color:#fff; font-size:13px; right:90px; width:45px; text-align:center}
.pop .nss_pg > span strong{ color:#ffdb4f}
.pop .nss_pg a{ display:block; float:left; font-size:0; text-indent:-10000em; width:20px; height:20px; margin-left:3px; }
.pop .nss_pg a.pre{ background:url(/images/template/02287/main/btn_prev.png) no-repeat center center; }
.pop .nss_pg a.stop{ background:url(/images/template/02287/main/btn_stop.png) no-repeat center center; }
.pop .nss_pg a.next{ background:url(/images/template/02287/main/btn_next.png) no-repeat center center; }
.pop .nss_pg a.list{ background:url(/images/template/02287/main/btn_list.png) no-repeat center center; }
.pop .pop_img{ position:relative; border:1px solid #dadada; border-top:0; height:163px;}
.pop .pop_img li{ display:none; width:235px; height:145px; margin:0 auto; padding:9px 0 0;}
.pop .pop_img li img{ width:100%; height:145px;}
.pop .pop_img li.on{ display:block}


/* 영양소식 */ 
.meal_menu {    position: relative;    float: left;    overflow: hidden;    width: 198px;    height: 210px;    background-color: #d8e9fb;    border: 1px solid #b1ceed;}
.meal_menu h2 {padding:20px 25px 0; line-height:24px; font-size:16px; font-family:"NanumBold"; color:#46649b}
.meal_menu .btn_more {position:absolute; top:25px; right:25px; width:17px; height:17px; text-indent:-10000px; background:url('/images/template/02287/main/btn_more.png') no-repeat 0 0; z-index:10}
.meal_menu p.today{line-height:28px; margin:10px 25px 0; text-align:center; font-family:"NanumBold"; color:#fff; background-color:#46649b}
.meal_menu .meal_list {    position: relative;    height: 108px;    margin: 10px 25px 0;    z-index: 10;    overflow-y: auto;    background: #c6e0f9e3;    font-family: "Nanum";    color: #212f49;    font-size: 13px;}
.meal_menu .meal_list li {width:60%; font-size:12px; font-family:'돋움',Dotum; line-height:20px; display:block; background:url("/images/template/02287/main/notice_dot.gif") no-repeat 0 10px; color:#fff;padding-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.meal_menu .img {position:absolute; bottom:10px; right:25px; z-index:1}
.meal_menu .img img {width:85px; height:75px;}


/* 행사일정 */
.schedule{ position:relative; width:310px; height:220px; background-color:#f7c852; overflow:hidden; float:right;}
.schedule .date_view{ position:relative; width:85%; margin:0 auto; padding-top:20px; text-align:center; }
.schedule .date_view a{ position:absolute; top:24px; display:block; font-size:0; line-height:0; width:15px; height:15px; }
.schedule .date_view a.pre{ left:50px; background:url(/images/template/02287/main/btn_c_prev.png) no-repeat;}
.schedule .date_view a.next{ right:50px; background:url(/images/template/02287/main/btn_c_next.png) no-repeat;}
.schedule .date_view span{  line-height:22px; font-weight:bold; font-family:"NanumBold"; font-size:14px; font-weight:bold; color:#fffcbd;}
.schedule .inner{ margin:15px auto 0; }
.schedule table{ width:85%; margin:0 auto;}
.schedule table th, 
.schedule table td{ margin:0; padding:0}
.schedule table thead th{color:#fff; font-size:12px; line-height:26px; background:#eb5a38;}
.schedule table tbody td{ color:#333; font-size:12px; line-height:20px; padding:2px 0; text-align:center}
.schedule table tbody td .today{ display:inline-block; color:#fff; width:20px; height:20px; background:url(/images/template/02287/main/schd_today.png) no-repeat 50% 50%}
.schedule table tbody td .check{ display:inline-block; color:#fff; width:20px; height:20px; background:url(/images/template/02287/main/schd_check.png) no-repeat 50% 50%}
.schedule table tbody{ background:#fff;}
.schedule .list{ width:85%; height:75px; margin:12px auto 0; overflow:hidden; overflow-y:auto; }
.schedule .list ul{ line-height:22px; font-family:'돋움',Dotum; font-size:12px; color:#fff; padding:5px 7px;}
.schedule .list li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.schedule .list li strong{ display:inline-block; width:25px; text-align:right; margin-right:7px; font-weight:bold; color:#064867}

/* 배너존 */
.banner_zone{ position:relative; z-index:1; width:100%; height:78px; overflow:hidden; clear:both;     margin-top: 20px;}
.banner_zone .inner{ position:relative; width:980px; margin:0 auto; overflow:hidden}
.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/02287/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02287/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02287/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02287/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}
 
  .main_visual #new_slider{width: 980px;  position: relative; margin : 0 auto; height:275px; }
  .main_visual .bx-viewport{ height:275px !important; }
  .main_visual #new_slider .bx-wrapper img{ width:980px; height:275px; }
 
@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%; margin-top:0; padding-top:69px; background:none; }
	.main_content { width:95%; height:100%; }
		
	.main_visual, .notice, .notice_cnt, .popBox, .schedule, .gallery, .M_link, .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%;}

	/* 공지사항 */
	.notice { width:48%; }
	.notice.Ty02 { margin-left:0; float:right;}  
	
	/* 공지사항 */
	.notice_cnt { width:48%; }
	.notice_cnt.Ty02 { margin-left:0; float:right;}
	

	/* 학교앨범 */
	.gallery{ width:48%; float:left; margin:25px 0 0;}
	.gallery ul.list_box{ height:141px}
	.gallery .list_box span.img{ width:40%;}
	.gallery .list_box span.img img{ width:100%; }
	.gallery .list_box a.gal_link{ padding:18px 25px 0 50%;}	
	
	/* 바로가기 */
	.M_link{ width:48%; height:181px; float:right; clear:none; }
	.M_link li{ height:90px;}

	/* 팝업존 */
	.popBox{ width:48%; margin:25px 0 0 0; }
	
	/* 행사일정 */
	.schedule{ position:relative; width:48%;}

	/* 배너존 */
	.banner_zone .inner{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%}	
	
       .main_visual #new_slider{width: 100%;  height:auto;}
       .main_visual .bx-viewport{height:auto !important;}	

}

@media (max-width: 600px) {	

	/* 공지사항 */
	.notice { width:100%; }
	.notice.Ty02 { margin-top:10px;}  
	.notice_cnt { width:100%;      margin-left: 0px; }
	.notice_cnt.Ty02 { margin-top:10px;} 

	/* 학교앨범 */
	.gallery{ width:100%;}
	.gallery .list_box a.gal_link{ padding:18px 25px 0 48%;}	
	
	/* 바로가기 */
	.M_link{ width:100%; margin-top:15px; }
	
		/* 식단 */
	.meal_menu{    width: 100%;}

	/* 팝업존 */
	.popBox{ width:100%; margin-top:15px;}
	
	/* 행사일정 */
	.schedule{ width:100%; margin-top:15px;}
	
}

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

@media (max-width: 380px) {

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