@charset "utf-8";

@import url(common.css);

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

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

/* 메인 비주얼 */
.main_visual{width:620px; height:368px; overflow:hidden; position:absolute; top:10px; left:0; z-index:10}

/* 학교앨범 */
.gallery{width:620px; height:170px; overflow:hidden; position:absolute; background-color:#fff; box-shadow:3px 3px 2px 0 rgba(0, 0, 0, 0.2); border-radius:13px; top:346px; left:0; border:1px solid #b8b8b8; z-index:11;} 
.gallery h2{font-size:16px; font-family:"NanumBold"; padding:20px 0 10px 25px; color:#1d1d1d}
.gallery .btn_more{ position:absolute; right:25px; top:20px;   z-index: 10;}
.gallery ul{overflow:hidden; padding:0 24px 0}
.gallery ul li{ float:left; width:134px; overflow:hidden; margin-left:12px}
.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:79px}
.gallery ul li a .txt{ display:block; margin-top:10px; line-height:14px; text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center;}

.cont_box{width:270px; height:440px; overflow:hidden; position:absolute; background-color:#fff; box-shadow:3px 3px 2px 0 rgba(0, 0, 0, 0.2); border-radius:13px; top:25px; right:3px; padding:25px 20px; border:1px solid #b8b8b8;}

/* 공지사항 */
.notice { width:100%; height:205px; position:relative; border-bottom:1px dashed #ddd;}
.notice h2{ font-size:14px; font-family:"NanumBold"; line-height:30px}
.notice h2 a{ display:block; color:#fff; background-color:#9d9d9d; text-align:center; position:absolute; top:0; border-radius:20px}
.notice h2.tit_1 a{  width:30%; left:0; }
.notice h2.tit_2 a{  width:30%; left:32%; }
.notice h2 a:hover{text-decoration:underline}
.notice h2 a.current{ color:#fff; background:#006bb6;}
.notice .btn_more{ position:absolute; right:5px; top:10px;   z-index: 10;}
.notice .list_box.on { display:block}
.notice .list_box{ display:none; padding:44px 5px 0; font-family:'돋움',Dotum; font-size:12px}
.notice .list_box a{color:#3c3c3c;}
.notice .list_box a:hover { text-decoration:underline;}
.notice .list_box ul li{ font-family:'돋움',Dotum; line-height:24px; font-size:12px;}
.notice .list_box ul li a { display:block; background:url("/images/template/02109/main/notice_dot.gif") no-repeat 0 8px; padding-left:8px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* 행사일정 */
.schedule{width:100%; height:255px; overflow:hidden; position:relative; clear:both; padding-top:27px; }
.schedule h2{font-size:15px; font-family:"NanumBold"; padding:0 0 14px 0; color:#1d1d1d}
.schedule .date_view{position:absolute; top:27px; right:0; font-family:'돋움',Dotum; font-size:12px}
.schedule .date_view a{ display:inline-block; vertical-align:middle; font-size:0; text-indent:-10000em; width:15px; height:15px;}
.schedule .date_view span{ margin:0 6px 0; line-height:15px; font-weight:bold}
.schedule .date_view a.pre{background:url(/images/template/02109/main/btn_c_prev.gif) no-repeat}
.schedule .date_view a.next{ background:url(/images/template/02109/main/btn_c_next.gif) no-repeat}
.schedule .inner{ width:100%; margin:0 auto 12px; background-color:#f5f5f5; padding-bottom:10px}
.schedule table{ width:100%; font-family:'돋움',Dotum}
.schedule table thead th{ color:#fff; font-size:12px; font-weight:normal; letter-spacing:-1px; background-color:#00a1b9; line-height:27px}
.schedule table tbody tr:first-child td{padding:10px 0 0}
.schedule table tbody td{ color:#222; letter-spacing:-1px; font-size:11px; background-color:#f5f5f5; line-height:22px; text-align:center}
.schedule table tbody td .chack{ display:inline-block; width:22px; height:22px; font-weight:bold; color:#fff; background:#f5f5f5 url(/images/template/02109/main/schd_bg.gif) no-repeat center center}
.schedule table tbody td .today{ display:inline-block; width:22px; height:22px; font-weight:bold; color:#fff; background:#f5f5f5 url(/images/template/02109/main/day_bg.gif) no-repeat center center} /* 20161118 추가 */

/* 바로가기 */
.M_link{ position:absolute; top:568px; left:0;}
.M_link h2{font-size:15px; font-family:"NanumBold"; padding:0 0 10px 5px; color:#1d1d1d}
.M_link ul{ width:620px; height:135px; overflow:hidden; border-radius:13px; border:1px solid #b8b8b8; }
.M_link ul li{ float:left; width:25%;}
.M_link ul li a{ display:block; height:191px; color:#1d1d1d; border-left:1px solid #e1e1e1; font-family:"Nanum"; font-size:15px; letter-spacing:-1px; text-align:center; line-height:20px;;}
.M_link ul li a:hover{ color:#ea5504}
.M_link ul li:first-child a{border-left:0}
.M_link ul li a span{ display:block;}
.M_link img {padding:20px;  }
.M_link ul li.link1 a{ background:#ffffff}
.M_link ul li.link2 a{ background:#f4f7f6}
.M_link ul li.link3 a{ background:#ffffff}
.M_link ul li.link4 a{ background:#f4f7f6}

/* 팝업존 */
.pop{width:310px; overflow:hidden; position:absolute; top:568px; right:0;height: 165px;}
.pop h2{font-size:16px; font-family:"NanumBold"; padding:0 0 10px 5px; color:#1d1d1d}
.pop .nss_pg{ position:absolute; top:2px; right:0; }
.pop .nss_pg > span{ position:absolute; font-family:'돋움',Dotum; line-height:22px; color:#666; font-size:12px; right:110px; display:inline-block; width:50px; text-align:right}
.pop .nss_pg > span strong{ color:#0588be}
.pop .nss_pg a{ display:block; position:absolute; font-size:0; text-indent:-10000em; width:20px; height:20px;}
.pop .nss_pg a.pre{ background:url(/images/template/02109/main/btn_prev.gif) no-repeat; right:79px;}
.pop .nss_pg a.stop{ background:url(/images/template/02109/main/btn_stop.gif) no-repeat; right:56px;}
.pop .nss_pg a.next{ background:url(/images/template/02109/main/btn_next.gif) no-repeat; right:33px;}
.pop .nss_pg a.list{ background:url(/images/template/02109/main/btn_list.gif) no-repeat; right:11px;}
.pop .pop_img li{ display:none; /*! border:1px solid #b8b8b8; */ border-radius:13px; overflow:hidden; text-align:center; /*! padding:23px 37px; */}
.pop .pop_img li img{ width:300px; height:134px;border: 1px solid #b8b8b8;border-radius: 13px;box-sizing: border-box;}
.pop .pop_img li.on{ display:block}

/* 배너존 */
.banner_zone{width:100%; height:73px; overflow:hidden; border-top:2px solid #575757;  position:absolute; top:820px; left:0;}
.banner_zone h2{ font-size:15px; font-family:"NanumBold"; color:#1d1d1d; position:absolute; top:25px; left:0; }
.banner_zone .btn{ position:absolute; left:65px; top:25px;}
.banner_zone .btn a{ float:left; font-size:0; text-indent:-10000em; width:20px; height:20px; vertical-align:top;margin-right: 2px;}
.banner_zone .btn a.pre{background:url(/images/template/02109/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{background:url(/images/template/02109/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02109/main/btn_b_list.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02109/main/btn_b_next.gif) no-repeat}

.banner_zone ul{ padding-top:15px; margin-left:150px; height:45px; overflow:hidden}
.banner_zone ul li{ float:left; margin-left:10px;}
.banner_zone ul li a img{ width:155px; height:45px}

@media (max-width: 800px) {
	
	#container,
	.main_content,
	.M_link,
	.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:68px }
	.main_content { width:95%; margin:0 auto; height:100%; min-height:1110px}
		
	.notice, .gallery, .main_visual, .pop, .schedule, .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{width:100%; height:368px; overflow:hidden; position:absolute; top:10px; left:0; text-align:center;}
	.main_visual p img{ width:100%; height:368px;}
	
	/* 학교앨범 */
	.gallery{top:345px; left:0; width:100%; box-sizing:border-box;}
	.gallery ul li{  margin-left:2.6%;; width:23%;}
	.gallery ul li a .img img{ width:100%;}
	
	.cont_box{ width:48%; height:auto; top:570px; left:0; box-sizing:border-box; box-shadow:none;}
	
	/* 행사일정 */
	.schedule{height:auto; }
	.schedule .inner { margin-bottom:0}
	
	/* 바로가기 */
	.M_link{ top:570px; left:52%; width:48%;}
	.M_link h2{ display:none;}
	.M_link ul{ width:100%; height:300px; box-sizing:border-box;}
	.M_link ul li{ width:50%; }
	.M_link ul li a {height:150px; background-position:center 25px !important;}
	.M_link ul li a span{ }
	.M_link ul li.link1 a,
	.M_link ul li.link2 a,
	.M_link ul li.link3 a{border-bottom:1px solid #e1e1e1; }
	.M_link ul li.link5 a{ background-color:#ffffff}

	/* 팝업존 */
	.pop{top:890px; left:52%; width:48%; }
	.pop .pop_img li img{ width:100%;}	

	/* 배너존 */
	.banner_zone{width:100%; top:1483px; left:0}
	.banner_zone ul{ width:70%; margin-left:0;}	
	.banner_zone ul li{ width:-webkit-calc(32.5% - 10px); width:-moz-calc(32.5% - 10px); width:calc(32.5% - 10px);}
	.banner_zone ul li a img{ width:100%; height:45px}
		
}

@media (max-width: 620px) {	
	
	#container { margin-top:20px; padding-top:48px; }	
	.main_content { min-height:1670px}
		
	/* 메인 비주얼 */
	.main_visual p img{ height:320px;}	
	
	/* 학교앨범 */
	.gallery{top:305px;}
	
	.cont_box{ width:100%; top:525px; left:0; box-sizing:border-box; box-shadow:none; height:490px; }

	/* 바로가기 */
	.M_link{ top:1048px; left:0; width:100%;}

	/* 팝업존 */
	.pop{top:1370px; left:0; width:100%; }

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

@media (max-width: 480px) {	
	
	#container { margin-top:-30px; padding-top:98px; }	
	.main_content { min-height:1680px}
		
	/* 메인 비주얼 */
	.main_visual p img{ height:220px;}	
	
	/* 학교앨범 */
	.gallery {top:217px;  height:auto; }	
	.gallery ul{ margin-left:-3%;}
	.gallery ul li{ margin:0 0 10px 3%; width:47%;}
	.gallery ul li:first-child{ margin-left:3%;}
	
	.cont_box{ top:526px;}

	/* 바로가기 */
	.M_link{ top:1045px; }

	/* 팝업존 */
	.pop{top:1370px; }
	
	/* 배너존 */
	.banner_zone{ top:1580px;}
	.banner_zone ul{ width:50%; }
	.banner_zone ul li{ width:90%;}
	
	
}