@charset "utf-8";

@import url(common.css);
body {background:#eee;}

#container {position:relative; background:#eee url(/images/template/02327/main/bg_mvisual.png) no-repeat center top;  min-height:437px; *background:url(/images/template/02327/main/bg_mvisual.png) no-repeat center 112px;}
#container:after {content:""; display:block; clear:both;}

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

/* 메인 비주얼 */
.main_visual{margin-top:112px; }

.cont01 {position:relative; overflow:hidden; }


/* 공지사항 */
.notice {position:relative;width:261px;height:153px; float:left; border-radius:4px; border:1px solid #c9c9c9; padding:20px; background:#fff url(/images/template/02327/main/bg_notice_title.gif) repeat-x left top;/*margin-top:-80px;*/}
.notice h2{ font-size:16px; font-family:"NanumBold"; }
.notice h2 a{ display:block; color:#ade8ff; text-align:center; position:absolute; top:0; line-height:51px;  }
.notice h2.tit_1 a{ left:5%;}
.notice h2.tit_2 a{ left:30%;}
.notice h2.tit_3 a{ left:66%;}
.notice h2 a:hover{text-decoration:underline}
.notice h2 a.current{ color:#fff; background:url(/images/template/02327/main/bar_notice_on.gif) no-repeat 0 bottom;}
.notice .btn_more{ position:absolute; right:20px; top:20px; width:10px; height:10px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02327/main/btn_more_wh.gif) no-repeat;}
.notice .list_box{ display:none; padding:44px 0 0 0; font-family:'돋움',Dotum; font-size:12px}
.notice .list_box.on { display:block;}
.notice .list_box a{color:#444;}
.notice .list_box a:hover { text-decoration:underline;}
.notice .list_box ul li{ font-family:"Nanum"; line-height:22px; font-size:13px; }
.notice .list_box ul li a { display:block; background:url(/images/template/02327/main/bul_notice.gif) no-repeat 0 8px; padding-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 팝업존 */
.pop{width:303px; height:193px; border-radius:4px; border:1px solid #c9c9c9; background:#fff url(/images/template/02145/main/bg_pop_title.gif) repeat-x left top; overflow:hidden; position:relative; float:left; margin:0 0 0 35px;}
.pop h2 {font-size:16px; height:50px; line-height:50px; padding-left:20px; font-family:"NanumBold"; color:#fff;}
.pop .nss_pg .number {color:#fff; position:absolute; width:40px; right:160px; top:20px; z-index:10; font-size:12px; }
.pop .nss_pg { position:absolute; top:0; right: 0; width:148px; height:50px;}
.pop .nss_pg a{ float:left; font-size:0; text-indent:-10000em; width:37px; height:50px;}
.pop .nss_pg a.pre{ background:url(/images/template/02145/main/btn_prev.gif) no-repeat; }
.pop .nss_pg a.stop{ background:url(/images/template/02145/main/btn_stop.gif) no-repeat; }
.pop .nss_pg a.next{ background:url(/images/template/02145/main/btn_next.gif) no-repeat; }
.pop .nss_pg a.list{ background: #02a980 url(/images/template/02145/main/btn_list.gif) no-repeat; }
.pop .pop_img{width:284px; margin:0 auto; padding:10px 0 0 0; height:145px;background:url(/images/template/02145/main/bg_food.png) no-repeat;overflow:hidden;}
.pop .pop_img li{ display:none;}
.pop .pop_img li img{width:100%;height:114px;overflow:hidden;}
.pop .pop_img li.on{display:block;}

/* 행사일정 */
.schedule{width:240px; height:195px; float:left; margin-left: 35px; position:relative; padding:0 30px; border: 1px solid #ccc; border-radius:4px; background:#fff url(/images/template/02145/main/bg_patten_schedule.gif) repeat-x left top;}
.schedule .btn_more{position:absolute; right:20px; top:15px; width:10px; height:10px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02145/main/btn_more_wh.gif) no-repeat;}
.schedule .date_view {position:relative; width:60%; height:42px; line-height:42px; margin:0 auto; text-align:center; font-family:'돋움',Dotum; font-size:14px; }
.schedule .date_view a{position:absolute; top:12px; display:block;  vertical-align:middle; font-size:0; text-indent:-10000em;   width:16px; height:20px;}
.schedule .date_view span{color:#6dcff6; font-weight:bold; }
.schedule .date_view a.pre{left:0; background:url(/images/template/02145/main/btn_pre.png) no-repeat 0 5px;}
.schedule .date_view a.next{right:0; background:url(/images/template/02145/main/btn_next.png) no-repeat 10px 5px;}
.schedule .inner{width:100%; /* background-color:#4a7390; */float:left;}
.schedule table{width:100%;font-family:'돋움',Dotum;}
.schedule table thead th{color:#fff;font-size:12px;font-weight:normal;letter-spacing:-1px;line-height:20px;color:#1f394b;font-weight:bold;}
.schedule table tbody tr:first-child td{padding:2px 0 0}
.schedule table tbody td{ color:#f7f7f7; letter-spacing:-1px; font-size:11px;  line-height:20px; text-align:center}
.schedule table tbody td:first-child { color:#ffdfa0;}
.schedule table tbody td:last-child { color:#b9e3ff;}
.schedule table tbody td .chack{display:inline-block;width:18px;height:18px;background:#508ab6 url(/images/template/02145/main/bg_eventday.png) no-repeat center center;}
.schedule table tbody td .today{ display:inline-block; width:18px; height:18px; background:url(/images/template/02145/main/bg_today.png) center center;}


/* 학교앨범 */
.gallery{width:261px; height:153px; border-radius:4px; border:1px solid #c9c9c9; background:#fff; overflow:hidden; float:left; margin:14px 0 0; position:relative; border:1px solid #ccc; padding:20px;}
.gallery h2{font-size:16px; font-family:"NanumBold"; padding:0 0 16px 0; color:#1d1d1d}
.gallery .btn_more{ position:absolute; right:20px; top:16px; width:19px; height:19px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02327/main/btn_arrow_more.gif) no-repeat;}
.gallery ul{ overflow:hidden;}
.gallery ul li{ float:left;  width:48%}
.gallery ul li:first-child {margin-right:4%;}
.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:92px}
.gallery ul li a .txt{ display:block; margin:13px 0 18px; line-height:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;}

/* 학급홈페이지 */
.M_link02{width:261px; height:153px; border-radius:4px; border:1px solid #c9c9c9; background:#fff; overflow:hidden; float:left; margin:14px 0 0 35px; position:relative; border:1px solid #ccc; padding:20px; position:relative;}
.M_link02 a {display:block; height:100%;}
.M_link02 img {position:absolute; top:80px; right:10px;}
.M_link02 h2{font-size:16px; font-family:"NanumBold"; padding:0 0 16px 0; color:#1d1d1d}
.M_link02 p { font-size:12px; color:#828282; }
.M_link02 span {position:absolute;  left:20px;  bottom:50px; color:#fff; background:#5f747d; padding:7px 15px; border-radius:20px; font-family:"NanumBold";font-size:12px;}


/* 식단 */
.meal_menu {width:301px; height:195px; border-radius:4px; overflow:hidden; position:relative; float:left; margin:14px 0 0 35px; background:#5fa72a url(/images/template/02327/main/bg_food.png) repeat;}
.meal_menu h2 {font-size:16px;; height:50px; line-height:50px; font-family:"NanumBold"; color:#fff; padding-left:20px; background:#27a113;}
.meal_menu .kcal {position:absolute; top:70px; left:120px; font-family:"NanumBold"; color:#222; font-size:17px;}
.meal_menu .img {position:absolute; top:75px; left:20px;  }
.meal_menu .img img {width:79px; height:83px;}
.meal_menu ul {margin:50px 20px 0 120px; height:70px; overflow-y:auto;}
.meal_menu ul li {display:inline-block; font-size:12px; color:#fff; margin-right:5px;}
.meal_menu ul li a {color:#fff;}
.meal_menu .btn_more {position:absolute; right:20px; top:20px; width:10px; height:10px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02327/main/btn_more_wh.gif) no-repeat;}

/* 학부모서비스 */
.M_link03{width:261px; height:153px; border-radius:4px; border:1px solid #c9c9c9; background:#fff; overflow:hidden; float:left; margin:14px 0 20px 0; position:relative; border:1px solid #ccc; padding:20px;}
.M_link03 a {display:block; height:100%;}
.M_link03 img {position:absolute; top:80px; right:10px;}
.M_link03 h2{font-size:16px; font-family:"NanumBold"; padding:0 0 16px 0; color:#1d1d1d}
.M_link03 p { font-size:12px; color:#828282; }
.M_link03 span {position:absolute;  left:20px;  bottom:50px; color:#fff; background:#5f747d; padding:7px 15px; border-radius:20px; font-family:"NanumBold";font-size:12px;}

/* 학교알리미 */
.M_link04 {width:261px; height:153px; border-radius:4px; border:1px solid #c9c9c9; background:#fff; overflow:hidden; float:left; margin:14px 0 20px 35px; position:relative; border:1px solid #ccc; padding:20px;}
.M_link04 a {display:block; height:100%;}
.M_link04 img {position:absolute; top:80px; right:10px;}
.M_link04 h2{font-size:16px; font-family:"NanumBold"; padding:0 0 16px 0; color:#1d1d1d}
.M_link04 p { font-size:12px; color:#828282; width:140px;}
.M_link04 span {position:absolute;  left:20px;  bottom:50px; color:#fff; background:#5f747d; padding:7px 15px; border-radius:20px; font-family:"NanumBold";font-size:12px;}


/*퀵링크*/
.M_link {width:303px; height:193px; float:left; margin:14px 0 20px 35px; position:relative; border-radius:4px; background:#cee0e8; box-sizing:border-box;}
.M_link ul {padding:25px;}
.M_link ul li{margin-bottom:20px;}
.M_link ul li img {margin-right:10px;}
.M_link ul li a {font-size:14px; color:#0e2530; font-family:"NanumBold";}


/* 배너존 */
.banner_zone{position:relative; width:980px; height:65px; clear:both; overflow:hidden; padding:0 0 20px 0; }
.banner_zone h2{ font-size:15px; font-family:"NanumBold"; color:#1d1d1d; position:absolute; top:0; left:0;}
.banner_zone .btn{ position:absolute; left:0; top:25px}
.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/02327/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02327/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02327/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02327/main/btn_b_list.gif) no-repeat; width:15px; }
.banner_zone ul{ margin-left:80px; height:45px; overflow:hidden;}
.banner_zone ul li{width:170px;  float:left; margin-left:10px;}
.banner_zone ul li a img{width:100%; height:45px}

@media (max-width:800px) {
	body {background-color:#ff4121;}
	#container,
	.main_content,
	.notice,
	.pop, 
	.meal_menu, 
	.schedule, 
	.M_link02,
	.M_link03,
	.M_link04,
	.M_link05,
	.gallery,
	.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;     background: url(/images/template/02327/main/bg_mvisual.png) repeat-x center top;/*!  */}
	.main_content { width:90%; margin:0 auto; height:100%; min-height:1140px}
		
	.notice, .gallery, .main_visual, .pop, .schedule, .M_link01, .M_link02, .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%;height:auto;float:none;margin-top:50px;}
	.main_visual img{ width:100%;margin-top:20px;}


	/* 공지사항 */
	.notice { width:48.5%; height:195px; float:left; }

	/* 팝업존 */
	.pop{width:48.5%; height:195px; float:right; margin:0; }	

	/* 오늘의 식단 */
	.meal_menu{ float:left; width:48.5%; height:188px; float:right; clear:none; margin:20px 0 0 0;}

	/* 행사일정 */
	.schedule{width:48.5%; height:188px; float:left; clear:both; margin:20px 0 0;}
	.schedule .date_box {display:none;}
		
	/* 학교앨범 */
	.gallery{ float:right;  clear:none; width:48.5%; height:188px; margin:20px 0 0 0;}

	
	/* 학급홈페이지 */
	.M_link02{width:48.5%; height:188px; margin:20px 0 0;}

	/* 학부모서비스 */
	.M_link03 {width:48.5%; height:188px; margin:20px 0 0;}

	/* 학교알리미 */
	.M_link04 {width:48.5%; height:188px; float:right; margin:20px 0 0;}


	/*퀵링크*/
	.M_link {width:100%; height:auto; margin:20px 0 20px;}
	.M_link ul {padding:10px 25px; overflow:hidden;}
	.M_link ul li{width:50%; float:left; margin:20px 0;}


	/* 배너존 */
	.banner_zone {width:100%;}
	.banner_zone h2, .banner_zone .btn{left:14px}
	.banner_zone ul li{width:-webkit-calc(32.5% - 10px); width:-moz-calc(32.5% - 10px); width:calc(32.5% - 10px);}67px
	.banner_zone ul li a img{ width:100%}

}


@media (max-width:640px) {
	
	/* 공지사항 */
	.notice { width:100%; height:195px; float:none; }

	/* 팝업존 */
	.pop{ width:100%; height:195px; float:none; margin:20px 0 0; }	

	/* 오늘의 식단 */
	.meal_menu{width:100%; height:188px; float:none; margin:20px 0 0 0;}

	/* 행사일정 */
	.schedule{width:100%; height:188px; float:none;}
		
	/* 학교앨범 */
	.gallery{ float:none;  clear:none; width:100%; height:188px; margin:20px 0 0 0; }

	
	/* 학급홈페이지 */
	.M_link02{width:100%; height:188px; float:none; margin:20px 0 0;}

	/* 학부모서비스 */
	.M_link03 {width:100%; height:188px; float:none; margin:20px 0 0;}

	/* 학교알리미 */
	.M_link04 {width:100%; height:188px; float:none; margin:20px 0 0;}


	/*퀵링크*/
	.M_link {width:100%; height:auto; float:none; margin:20px 0 20px;}




}

@media (max-width:560px) {		

	/*퀵링크*/
	.M_link {width:100%; height:auto; float:none; margin:20px 0 20px;}
	.M_link ul li {width:100%; float:none;}

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

	/* 배너존 */
	.banner_zone ul li{ width:90%;}	
}