@charset "utf-8";

@import url(common.css);

#container {position:relative; background:url(/images/template/02283/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:278px; overflow:hidden;}
.main_visual  p{ position:relative; width:980px; margin:0 auto; z-index:1; }

/* 퀵메뉴 */
.Q_link {position:absolute; top: -146px; right:-140px; width:110px; padding:0 2px 2px; background-color:#b0b0b0; border-radius:6px}
.Q_link h2 {margin:10px 24px; text-align:center; font-size:13px; font-family:"NanumBold"; color:#fff}
.Q_link ul {width:100%; padding:7px 0; margin:0 auto; background-color:#fff; border-radius:6px}
.Q_link ul li {margin:0 5px 5px; padding-top:7px; line-height:16px; border-top:1px dashed #b0b0b0}
.Q_link ul li:first-child {border-top:0}
.Q_link ul li a {display:block; letter-spacing:-1px; font-size:11px; font-family:'돋움',Dotum; color:#666}
.Q_link ul li a img {margin:0 5px}
.Q_link ul li a:hover {text-decoration:underline}

/* 공지사항 */
.notice { position:relative; width:260px; height:120px; float:left; margin:25px 0 0; overflow:hidden;}  
.notice h2 { font-size:14px; color:#64b613; padding:5px 0 0; border-top:3px solid #64b613; display:inline-block }
.notice .btn_more{ position:absolute; top:4px; right:0; background:url('/images/template/02283/main/btn_more.png') no-repeat 50% 50%; width:16px; height:16px; text-indent:-10000px; z-index:10 }
.notice .list_box{padding:10px 0 0; font-family:'돋움',Dotum; font-size:12px; overflow:hidden;}
.notice .list_box li{ font-family:'돋움',Dotum; line-height:22px; font-size:12px; overflow:hidden; position:relative; float:left; width:100%;}
.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/02283/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice .list_box li span.date { position:absolute; top:0; right:0; color:#444;}

/* 공지사항 */
.notice02 { position:relative; width:260px; height:120px; float:left; margin:25px 0 0 35px; overflow:hidden;}  
.notice02 h2 { font-size:14px; color:#64b613; padding:5px 0 0; border-top:3px solid #64b613; display:inline-block }
.notice02 .btn_more{ position:absolute; top:4px; right:0; background:url('/images/template/02283/main/btn_more.png') no-repeat 50% 50%; width:16px; height:16px; text-indent:-10000px; z-index:10 }
.notice02 .list_box{padding:10px 0 0; font-family:'돋움',Dotum; font-size:12px; overflow:hidden;}
.notice02 .list_box li{ font-family:'돋움',Dotum; line-height:22px; font-size:12px; overflow:hidden; position:relative; float:left; width:100%;}
.notice02 .list_box li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#444;}
.notice02 .list_box li a:hover{ text-decoration:underline;}
.notice02 .list_box li span.text {float:left; padding-left:8px; background:url("/images/template/02283/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice02 .list_box li span.date { position:absolute; top:0; right:0; color:#444;}

/* 바로가기 */ 
.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:104px; padding-top:7px;}
.M_link li span{ display:block; margin-top:10px;}
.M_link li.link1{background-color: #f2c400;}
.M_link li.link2{ background-color:#eb615a}
.M_link li.link3{ background-color:#63a7d9}
.M_link li.link4{background-color: #63a7d9;}
.M_link li.link5{ background-color:#f2c400}
.M_link li.link6{ background-color:#eb615a}
.M_link li.link7{ background-color:#eb615a}
.M_link li.link8{ background-color:#63a7d9}
.M_link li.link9{background-color: #f2c400;}

/* 학교앨범 */
.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/02283/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/02283/main/btn_prev.png) no-repeat; }
.pop .nss_pg a.stop{ background:url(/images/template/02283/main/btn_stop.png) no-repeat; }
.pop .nss_pg a.next{ background:url(/images/template/02283/main/btn_next.png) no-repeat; }
.pop .nss_pg a.list{ background:url(/images/template/02283/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:186px; float:right; overflow:hidden; border:1px solid #ddd; border-top:0; }
.schedule h2{ position:absolute; top:25px; left:0; font-size:15px; line-height:52px; color:#333; width:32%; text-align:center; }
.schedule p.day{ position:absolute; top:60px; font-family:"NanumBold"; font-size:40px; line-height:1; color:#00aeff; margin:15px 0 0; display:block; width:32%; text-align:center; }
.schedule .date_view{ position:absolute; top:125px; left:0; width:32%; text-align:center; margin:15px 0 0;}
.schedule .date_view a{ position:absolute; top:0px; clear:both; vertical-align:middle; font-size:0; text-indent:-10000em; width:21px; height:23px; z-index:11;}
.schedule .date_view a.pre{background:url(/images/template/02283/main/btn_c_pre.png) no-repeat 0 0; left:10px;}
.schedule .date_view a.next{ background:url(/images/template/02283/main/btn_c_next.png) no-repeat 0 0; right:10px;}
.schedule .date_view span{ font-family:'돋움',Dotum; font-size:12px; color:#333; line-height:2;}
.schedule .sch_list{ position:absolute; right:0; overflow:hidden; overflow-y:auto; width:67%; height:186px; border-left:1px solid #ddd;}
.schedule .sch_list ul{ line-height:24px; font-family:'돋움',Dotum; font-size:11px; color:#333; padding:15px 20px 10px;}
.schedule .sch_list li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.schedule .sch_list li strong{ display:inline-block; width:80px; text-align:left; font-weight:bold; color:#333}
.schedule .btn_more{ position:absolute; left:26%; top:45px; width:16px; height:16px; text-indent:-9999em; line-height:0; font-size:0; background:url(/images/template/02283/main/btn_more.png) no-repeat;}

/* 바로가기 */ 
.M_link02 { position:relative; width:100%; clear:both; background-color:#f19600; 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:14.2%; }
.M_link02 li a{display:block;color: #e2e9f4;font-family:"NanumBold";font-size:13px;letter-spacing:-1px;}
.M_link02 li a:hover{ color:#fff;}
.M_link02 li span{ padding-left:4px;}


/* 배너존 */
.banner_zone{ position:relative; z-index:1; width:980px; height:78px; margin:0 auto; overflow:hidden; clear:both; background:#fff;}
.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/02283/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02283/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02283/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02283/main/btn_b_list.gif) no-repeat; width:15px; }
.banner_zone ul{ padding-top:17px; margin:0 10px 0 70px; height:45px; overflow:hidden}
.banner_zone ul li{ float:left; margin-left:10px;}
.banner_zone ul li a img{ width:170px; height:45px}


/*통합공지사항*/
div#pop_header{background:#5ecdd7 !important}


@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%;}

	/* 퀵메뉴 */
	.Q_link { display: none; }
		
	/* 공지사항 */
	.notice { width:48%;}
	.notice02{ width:48%; margin-left:0; float:right;}
	
	/* 바로가기 */ 
	.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%; border-top:1px solid #ddd; 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, .notice02 { width:100%;}
	
	/* 학교앨범 */
	.gallery{ width:100%;}

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

	/* 행사일정 */
	.schedule h2,
	.schedule p.day,
	.schedule .date_view{ width:34%; }
	.schedule .sch_list{ width:60%;}

	/* 바로가기 */ 
	.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:left; width:50%; }
	.M_link li:first-child{ width:50%}
	.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:25%; }	
}

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

}