@charset "utf-8";

@import url(common.css);

#container {position:relative; }
#container:after {content:""; display:block; clear:both;}

.main_content {position:relative; z-index:7; width:1020px; margin:15px auto 0; }
 
/* 메인 비주얼 */
.main_visual{width:100%; height:445px; background:#ececec url(/images/template/02194/main/visual_bg.png) no-repeat 50% 50%; background-size:cover;}
.main_visual p{width:1020px; margin:0 auto; text-align:center; padding:50px 0 0;}

/* 바로가기 */
.M_link{ position:relative; height:220px; margin:-280px auto 0;}
.M_link ul{ overflow:hidden; width:830px; margin-left:96px;}
.M_link li{ float:left; width:200px; height:220px; margin-left:10px; box-shadow:1px 1px 2px 0 rgba(0, 0, 0, 0.4); border-radius:10px; overflow:hidden; text-align:center;}
.M_link li:first-child{ margin-left:0;}
.M_link li a{ display:block; color:#fff; height:210px; padding-top:10px; }
.M_link li.link1{ background:#588fe3 url(/images/template/02194/main/link_bg.png) repeat-y 50% 0}
.M_link li.link2{ background:#32bee1 url(/images/template/02194/main/link_bg.png) repeat-y 50% 0}
.M_link li.link3{ background:#e35591 url(/images/template/02194/main/link_bg.png) repeat-y 50% 0}
.M_link li.link4{ background:#7ec04d url(/images/template/02194/main/link_bg.png) repeat-y 50% 0}
.M_link li h2{ color:#fff; font-family:"NanumBold"; font-size:22px; padding:15px 0 0 0;}
.M_link li p{ font-family:"Nanum"; color:rgba(255,255,255,0.8); font-size:12px; padding:15px 20px 0; line-height:16px; }
.M_link li a:hover p{ color:rgba(255,255,255,1);}

/* 학교앨범*/
.gallery{ position:relative; width:330px; height:160px; overflow:hidden; float:left;margin-top:70px; }
.gallery h2{ color:#111; font-size:20px; background:url(/images/template/02194/main/tit_bullet.gif) no-repeat 0 0; padding:15px 0 0;}
.gallery .btn_more{ position:absolute; top:10px; right:0; background:url('/images/template/02194/main/btn_more.png') no-repeat 0 0; width:18px; height:18px; text-indent:-10000px; z-index:10 }
.gallery ul{overflow:hidden; margin:12px 0 0}
.gallery ul li{ float:left; margin-left:12px; width:102px;}
.gallery ul li:first-child{ margin-left:0;}
.gallery ul li a{ color:#fff; 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:102px; height:82px; }
.gallery ul li a .txt{ display:block; padding:10px 0 0; color:#444; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 공지사항 */
.notice { position:relative; width:330px; height:160px; float:left; margin:70px 0 0 20px; background:url(/images/template/02194/main/tit_bg.gif) repeat-x 0 0;}  
.notice h2 a{ position:absolute; font-size:14px; top:0; color:#777; display:block; text-align:center; letter-spacing:-1px; width:93px; height:35px; z-index:1; line-height:35px; border:1px solid #ddd; border-bottom:0; background:#fff; }
.notice h2.tit_1 a{ left:0; }
.notice h2.tit_2 a{ left:94px; }
.notice h2 a.current{ background:#f2f2f2; color:#111; height:36px; border:1px solid #525252; border-bottom:0; z-index:2;}
.notice .btn_more{ position:absolute; top:10px; right:0; background:url('/images/template/02194/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:52px 5px 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;}
.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/02194/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice .list_box li span.date { position:absolute; top:0; right:0; color:#666;}


/* 팝업존 */
.pop{position:relative;width:320px;height:160px;float:right;margin-top:70px;overflow:hidden;background: #999;}
.pop .nss_pg{ position:absolute; top:0; right:0; z-index:100}
.pop .nss_pg > span{ position:absolute;font-family:"Nanum"; line-height:26px; color:#fff; font-size:12px; right:40px; display:inline-block; width:50px;}
.pop .nss_pg > span strong{ font-family:"NanumBold";}
.pop .nss_pg a{ display:block; font-size:0; text-indent:-10000em; width:24px; height:24px; float:left; margin-left:2px;}
.pop .nss_pg a.play{ background:url(/images/template/02213/main/btn_play.png) no-repeat; }
.pop .nss_pg a.stop{ background:url(/images/template/02213/main/btn_stop.png) no-repeat; }
.pop .nss_pg a.pre{ background:url(/images/template/02213/main/btn_prev.png) no-repeat; } /* 240610 */
.pop .nss_pg a.next{ background:url(/images/template/02213/main/btn_next.png) no-repeat; } /* 240610 */
.pop .pop_img{ position:absolute; top:0; left:0; z-index:1; width:100%}
.pop .pop_img li{ display:none;}
.pop .pop_img li img{ width:100%; height:160px}
.pop .pop_img li.on{ display:block}

/* 홍보동영상 링크 */
.M_link03 {    position: relative;    width: 330px;    height: 160px;    overflow: hidden;    float: inherit;    margin-top: 70px;       padding-left: 17px;}


/* 바로가기 */
.M_link02 {width:100%; height:100px; position:relative; z-index:7; clear:both; background:url(/images/template/02194/main/link_bg02.gif) repeat-x 0 0; margin:30px 0 0; float:left;  }
.M_link02 ul{ width:1020px; margin:0 auto;}
.M_link02 li{ float:left; width:12.5%; *width:12.49%;}
.M_link02 li a{ display:block; color:#1d1d1d; border-right:1px solid #e1e1e1; font-family:"Nanum"; font-size:13px; letter-spacing:-1px; text-align:center; line-height:20px; padding:15px 0 0; height:85px;}
.M_link02 li a:hover{ color:#0087c6; text-decoration:underline;}
.M_link02 li:first-child a{border-left:1px solid #e1e1e1}
.M_link02 li span{ display:block; padding-top:10px;}

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

@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%;  background-image:none;}
	.main_content { width:95%; margin:0 auto; height:100%; }
		
	.main_visual, .notice, .gallery, .M_link, .M_link02, .M_link03, .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}
	 
	/* 메인 비주얼 */
	.main_visual{ height:310px; }
	.main_visual p{width:100%; padding-top:30px;}

	/* 바로가기 */
	.M_link{ height:auto; margin-top:-165px;}
	.M_link ul{ width:100%; margin-left:0;}
	.M_link li{ width:23%; height:135px; margin-left:2.2%;}	
	.M_link li img{ width:80px; height:71px}	
	.M_link li h2{ font-size:16px; padding-top:12px;}
	.M_link li p{ display:none; }		

	/* 학교앨범*/
	.gallery{ width:100%; }
	.gallery ul li{width:-webkit-calc(33.33% - 8px); width:-moz-calc(33.33% - 8px); width:calc(33.33% - 8px);}
	.gallery ul li a .img img{ width:100%; }
	
	/* 공지사항 */
	.notice { width:48%; margin:35px 0 0 0; }  

       /* 홍보영상 */
       .M_link03 {    position: relative;    width: 48%;    height: 160px;    overflow: hidden;    float: inherit; padding-bottom: 34px;}
       .M_link03 li img { width: 100%; height: 150px;     padding-top: 37px;}

	
	/* 팝업존 */
	.pop{ width:48%; margin-top:35px; }

	/* 바로가기 */
	.M_link02 { height:200px; border-top:1px solid #e1e1e1; border-left:1px solid #e1e1e1; background:#faf9f8;  }
	.M_link02 ul{ width:100%; }
	.M_link02 li{ width:25%;}
	.M_link02 li a{border-bottom:1px solid #d9d9d9; padding:15px 0 0;}
	.M_link02 li:first-child a{border-left:0}
		
	/* 배너존 */
	.banner_zone {width:95%;}
	.banner_zone ul{ margin-left:90px; }
	.banner_zone ul li{width:-webkit-calc(33.33% - 10px); width:-moz-calc(33.33% - 10px); width:calc(33.33% - 10px); margin-left:10px; }
	.banner_zone ul li a img{ width:100%}
       

}

@media (max-width: 640px) {	

	/* 메인 비주얼 */	
	.main_visual{ height:380px;}

	/* 바로가기 */
	.M_link{ margin-top:-240px;}
	.M_link li{ width:48%; height:100px; margin-bottom:2%;}	
	.M_link li.link3{ margin-left:0;}
	.M_link li img{ width:50px; height:45px}	
	
	/* 공지사항 */
	.notice { width:100%; }  
	
	/* 팝업존 */
	.pop{ width:100%; }	
			
}

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

       
       /* 홍보영상 */
       .M_link03 {    position: relative;    width: 100%;    height: 160px;    overflow: hidden;    float: inherit;    margin-top: 70px;    padding-left: 0px;}
       .M_link03 li img { width: 100%; height: 150px;}
}

@media (max-width: 480px) {	
	 
	/* 메인 비주얼 */
	.main_visual{ height:360px;}
	.main_visual p img{width:90%;}

	/* 바로가기 */
	.M_link{ margin-top:-240px;}


       
       /* 홍보영상 */
       .M_link03 {    position: relative;    width: 100%;    height: 160px;    overflow: hidden;    float: inherit;    margin-top: 70px;    padding-left: 0px;}
       .M_link03 li img { width: 100%; height: 150px;}
}

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

       
       /* 홍보영상 */
       .M_link03 {    position: relative;    width: 100%;    height: 160px;    overflow: hidden;    float: inherit;    margin-top: 70px;    padding-left: 0px;}
       .M_link03 li img { width: 100%; height: 150px;}
}