@charset "utf-8";

@import url(common.css);

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

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

/* 메인비주얼 */
.main_visual{ position:relative; width:1020px; margin:30px auto 0; text-align:center;}
.main_visual p img{ width:100%; }

/* 260619 동영상 */
.visual_wrap {display: flex; gap:1%; width:1020px; margin: 15px auto 0;}
.visual_wrap .main_visual {flex: 1; height: 336px; border-radius: 5px; overflow: hidden; margin: 0 0 0;}
.visual_wrap .video_box {flex: 1; height: 336px; height: 336px; border-radius: 5px; overflow: hidden;}
.visual_wrap .video_box video {width: 100%; height: 100%; object-fit: cover;}

/* 바로가기 240730 */
.M_link{position:relative; width:700px; height:198px; float:left;}
.M_link ul{ width:100%;overflow:hidden;}
.M_link li{position:relative;height:200px; margin-left:8px; float:left; border-radius:5px; }
.M_link li:first-child{ margin-left:0;}
.M_link li a {display:block; height:198px; color:#fff; line-height:30px; font-family:"NanumBold";}
.M_link li .info{ display:block; padding:20px 0 0 20px; font-size:13px; color:#fff; line-height:24px; }
.M_link li span{ display:block; padding:0 0 0 20px; font-size:20px; color:#fff; line-height:30px;}
.M_link li.link1{ background:#ff9000; width:228px;  }
.M_link li.link2{ background:#009dff;width:228px; }
.M_link li.link3{ background:#20ce6a; width:228px;}
.M_link li img {position:absolute; bottom:20px; right:20px;}

/* 행사일정 */
.schedule{ position:relative; width:307px; height:198px; float:right;  border: 1px solid #e1e1e1; border-radius: 5px; background-color:#fff; overflow:hidden;}
.schedule .date_view{ position:relative; width:100%; height:37px; text-align:center; background:#526e88; }
.schedule .date_view a{ position:absolute; top:11px; display:block; font-size:0; line-height:0; width:8px; height:12px; }
.schedule .date_view a.pre{ left:20px; background:url(/images/template/02226/main/c_btn_left.png) no-repeat;}
.schedule .date_view a.next{ right:20px; background:url(/images/template/02226/main/c_btn_right.png) no-repeat;}
.schedule .date_view span{ line-height:35px; color:#abdbf8; font-family:"NanumBold"; font-size:16px;}
.schedule .inner{ width:100%; margin:0;}
.schedule table{ width:100%; font-family:'돋움',Dotum; margin-left:-1px;}
.schedule table thead th{ color:#848484; font-size:12px; letter-spacing:-1px; line-height:34px; font-weight:normal; }
.schedule table tbody td{ color:#848484; letter-spacing:-1px; font-size:11px; line-height:22px; text-align:center; border-left:1px solid #ddd; border-top:1px solid #ddd;}
.schedule table tbody td .chack{ display:block; background:#f1f1f1; color:#111;}
.schedule table tbody td .today { display:block; background: url(/images/template/02226/main/c_circle.png)no-repeat center; color:#ff8425; font-weight:bold; }
.schedule .sun { color: #ff7034;}
.schedule .sat { color: #00d8ff;}

/* 공지사항 */
.notice { position:relative; width:464px; height:200px; float:left; background:#e8f4ff /*url(/images/template/02226/main/ico_notice.png) no-repeat 95% 10px*/; border-radius:5px; overflow:hidden; margin: 8px 0 0;}/* 240730 */
.notice h2{position:absolute; top:20px; left:20px; font-size:20px; font-family:"NanumBold"; color:#000;}
.notice .list_box{ margin:60px 20px 0; font-family:'돋움',Dotum; font-size:12px; clear:both;}
.notice .list_box a{color:#3c3c3c;}
.notice .list_box a:hover { text-decoration:underline;}
.notice .list_box .top_list{ width:80%; }
.notice .list_box .top_list dt {font-size:15px; font-family:"NanumBold"; color:#333; margin:0 0 12px 0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
.notice .list_box .top_list dd {font-family:"Nanum"; color:#666; margin: 7px 0 0 0; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}  
.notice .list_box .top_list .date {display:block; padding-left:25px; margin-top:5px; background: url(/images/template/02226/main/time.png) no-repeat left 1px;;}
.notice .list_box .ul_list{ padding-top:10px}
.notice .list_box .ul_list li{ position:relative; font-family:'돋움',Dotum; font-size:11px; line-height:24px; color:#777777; overflow:hidden;}
.notice .list_box .ul_list li a { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#444;}
.notice .list_box .ul_list li a:hover{ text-decoration:underline;}
.notice .list_box .ul_list li span.text {float:left; padding-left:8px; background:url("/images/template/02226/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice .list_box .ul_list li span.date { position:absolute; top:0; right:0; color:#777777; font-size: 11px; }
.notice .btn_more{ position:absolute; top:18px; right:20px; background:url('/images/template/02226/main/btn_more.png') no-repeat 0 0; width:62px; height:21px; text-indent:-10000px; z-index:10 }

/* 학교앨범 */
.gallery{ position:relative; width:544px; height:198px; border:1px solid #ddd; background:#fff; overflow:hidden; float:right; margin:8px 0 0; border-radius:5px;}
.gallery h2 {font-size:20px; font-family:"NanumBold"; padding:0 0 5px 20px; line-height:55px; color:#1d1d1d}
.gallery .btn_more{ position:absolute; top:18px; right:20px; background:url('/images/template/02226/main/btn_more.png') no-repeat 0 0; width:62px; height:21px; text-indent:-10000px; z-index:10 }
.gallery ul.gall_list{ padding:0 20px; overflow:hidden;}
.gallery ul.gall_list li{ float:left; width:32%; margin-left:2%;}
.gallery ul.gall_list li:first-child { margin-left:0;}
.gallery ul.gall_list li a{ color:#424242; 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:100%; height:89px}
.gallery ul.gall_list li a .txt{ display:block; margin-top:15px; line-height:14px; text-align:center; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}

/* 공지사항 02 */
.notice02 { position:relative; width:464px; height:198px; float:left;  border-radius:5px; overflow:hidden; border:1px solid #ddd; margin: 8px 0 0;}/* 240730 */
.notice02 h2 {position:absolute; top:20px; font-size:20px; font-family:"NanumBold";}
.notice02 h2 a {color:#666;}
.notice02 h2.tit_1 {left:20px; }
.notice02 h2.tit_2 {left:120px; padding-left:20px; background:url(/images/template/02226/main/bar.gif) no-repeat 0 50%; }
.notice02 h2 a.current{ color:#000; }
.notice02 .list_box.on {display:block;}
.notice02 .list_box{display:none; margin:60px 20px 0; font-family:'돋움',Dotum; font-size:12px; clear:both;}
.notice02 .list_box li{ position:relative; font-family:'돋움',Dotum; font-size:11px; line-height:24px; color:#777777; overflow:hidden;}
.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/02226/main/notice_dot.gif") no-repeat 0 9px; width:70%;}
.notice02 .list_box li span.date { position:absolute; top:0; right:0; color:#777777; font-size: 11px; }
.notice02 .btn_more{ position:absolute; top:18px; right:20px; background:url('/images/template/02226/main/btn_more.png') no-repeat 0 0; width:62px; height:21px; text-indent:-10000px; z-index:10 }

/* 바로가기 */
.M_link02{ position:relative; width:304px; height:198px; float:left; margin:8px 0 0 8px;  }
.M_link02 ul{ width:100%; overflow:hidden; }
.M_link02 li{position:relative; width:146px; height:198px; margin-left:8px; float:left; border-radius:5px; border:1px solid #ddd;}
.M_link02 li:first-child{ margin-left:0;}
.M_link02 li a{ display:block; width:148px; height:200px; color:#555; font-family:"Nanum"; font-size:18px;}
.M_link02 li .info{ display:block; padding:20px 0 0 20px; font-size:13px; color:#526e88; line-height:24px; }
.M_link02 li span{ display:block; padding:0 0 0 20px; font-size:18px; color:#555; line-height:30px;}
.M_link02 li img {position:absolute; bottom:0; right:0;}
.M_link02 li.link1 { background:#f9f9f9; }
.M_link02 li.link2 { background:#e8f4ff; }

/* 팝업존 */
.pop{ position:relative; width:232px; height:198px; float:right; border-radius:5px; border:1px solid #ddd; overflow:hidden; margin:8px 0 0 8px; }
.pop h2{ height:37px; font-size:14px; line-height:37px; padding-left:20px; color:#fff; background:#009dff;}
.pop .nss_pg > span{ position:absolute; top:0; right:105px; width:40px; font-family:"Nanum"; color:#fff; font-size:12px; display:inline-block; text-align:right; line-height:37px;}
.pop .nss_pg > span strong{ color:#ffdf2e;}
.pop .nss_pg{ position:absolute; top:0; right:0; }
.pop .nss_pg a{ display:block; float:left; font-size:0; text-indent:-10000em; width:30px; height:37px; border-left:1px solid #4dbbff;}
.pop .nss_pg a.pre{ background:url(/images/template/02226/main/btn_prev.gif) no-repeat center;}
.pop .nss_pg a.stop{ background:url(/images/template/02226/main/btn_stop.gif) no-repeat center;}
.pop .nss_pg a.next{ background:url(/images/template/02226/main/btn_next.gif) no-repeat center;}
.pop .pop_img{ width:100%; height:161px;}
.pop .pop_img li{ display:none;}
.pop .pop_img li img{ width:100%; height:161px; }
.pop .pop_img li.on{ display:block}

/* 배너존 */
.banner_zone{ position:relative; width:100%; height:44px; background-color:#fff; margin:20px 0; float:left; *padding-bottom:20px; overflow:hidden;}
.banner_zone h2{ font-size:15px; font-family:"NanumBold"; color:#1d1d1d; position:absolute; top:10px; left:0;}
.banner_zone .btn{ position:absolute; left:70px; top:13px}
.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/02226/main/btn_b_prev.gif) no-repeat}
.banner_zone .btn a.stop{ background:url(/images/template/02226/main/btn_b_stop.gif) no-repeat}
.banner_zone .btn a.next{ background:url(/images/template/02226/main/btn_b_next.gif) no-repeat}
.banner_zone .btn a.list{ background:url(/images/template/02226/main/btn_b_list.gif) no-repeat; width:15px; }
.banner_zone ul{ height:44px; float:left; overflow:hidden; margin-left:130px;}
.banner_zone ul li{ float:left; margin-left:15px;}
.banner_zone ul li a img{ width:163px; height:44px}
 
@media (max-width: 800px) {
	
	#container,
	.main_content,
	.M_link, 
	.schedule,
	.notice,
	.notice02,
	.gallery,
	.M_link02,
	.M_link02 li,
	.pop,
	.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:70px}
	.main_content { width:95%; height:100%; }
		
	.main_visual, .notice, .pop, .schedule, .gallery, .M_link, .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{ position:relative; width:100%; margin:10px auto 0;}

        /* 260619 동영상 */
	.visual_wrap {width: 95%; flex-direction: column;}
	.visual_wrap .main_visual, .visual_wrap .video_box {height: auto; margin: 2% 0 0;}
	.visual_wrap .video_box video {height: auto;}

	/* 바로가기 */
	.M_link{width:100%;  height:auto;}/* 170510 */
	.M_link ul{ width:100%;overflow:hidden;}
	.M_link li{width:33.333333%; height:150px; margin-left:2%;}/* 170510 */
	.M_link li.link1{ background:#ff9000; width:32%;  }/* 170510 */
.M_link li.link2{ background:#009dff;width:32%; }/* 170510 */
.M_link li.link3{ background:#20ce6a; width:32%; margin-left:2%; margin-top:0}/* 170510 */
	.M_link li img {position:absolute; bottom:20px; right:20px; width:65px;}

	/* 행사일정 */
	.schedule{width:100%; height:200px; float:left; margin-top:8px;}/* 170510 */

	/* 공지사항 */
	.notice {width:49%; height:200px; float:right;}

	/* 학교앨범 */
	.gallery {width:100%; height:200px; float:left; margin-top:8px;}/* 170510 */

	/* 공지사항 02 */
	.notice02 {width:49%; height:200px; float:right;}

	/* 바로가기 */
	.M_link02{ width:49%; height:200px; float:left; margin:8px 0 0;}
	.M_link02 li{ width:49%; height:200px; margin-left:2%;}

	/* 팝업존 */
	.pop {width:49%; height:200px; float:right;}

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

}

@media (max-width:680px) {
	
	/* 바로가기 */
	.M_link li span{font-size:18px; }

	/* 행사일정 */
	.schedule{width:100%; height:200px; float:none; margin-top:8px;}

	/* 공지사항 */
	.notice {width:100%; height:200px; float:none;}

	/* 학교앨범 */
	.gallery {width:100%; height:200px; float:none; margin-top:8px;}

	/* 공지사항 02 */
	.notice02 {width:100%; height:200px; float:none;}

	/* 바로가기 */
	.M_link02{ width:100%; height:auto; float:none; margin:8px 0 0;}
	.M_link02 li{height:auto; padding-bottom:60px;}
	.M_link02 li a{ height:auto;}
	.M_link02 li img {height:50px; }
	.M_link02 li.link1 { background:#f9f9f9; }
	.M_link02 li.link2 { background:#e8f4ff; }

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

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

}

@media (max-width: 560px) {	

	/* 바로가기 */
	.M_link li .info{display:none;}
	.M_link li span{padding:20px 10px 0; font-size:14px; text-align:center; line-height:1.4;}
	.M_link li img {right:50%; width:64px; margin-right:-32px;}

	/* 팝업존 */
	.pop{ width:100%; }	
	
}

@media (max-width: 480px) {
	
	

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

}