/* 알림장 */
.ann_tablet { display:none; }

/* 메인비주얼 */
.main_visual { position:relative; width:100%; height:100%; background:#e2e8ff; }
.main_visual ul { position:relative; }
.main_visual ul li { position:relative; text-align:center; }
.main_visual .bx-controls { position:absolute; width:980px; height:26px; left:50%; bottom:85px; margin-left:-490px; }
.main_visual .bx-controls-direction { display:none; }
.main_visual .bx-controls-auto { position:absolute; top:0; left:0; }
.main_visual .bx-controls-auto::after { content:''; display:block; clear:both; height:0; }
.main_visual .bx-controls-auto .bx-controls-auto-item { display:block; float:left; width:auto; }
.main_visual .bx-controls-auto .bx-controls-auto-item a { text-indent:-999em; width:26px; height:26px; }
.main_visual .bx-controls-auto .bx-controls-auto-item a.bx-start { display:none; background:url('/00_common/images/con_com/btn_play.png') no-repeat center center; }
.main_visual .bx-controls-auto .bx-controls-auto-item a.bx-stop { display:block; background:url('/00_common/images/con_com/btn_stop.png') no-repeat center center; }
.main_visual .bx-pager.bx-default-pager { position:absolute; top:5px; left:30px; }
.main_visual .bx-pager.bx-default-pager::after { content:''; display:block; clear:both; height:0; }
.main_visual .bx-pager.bx-default-pager .bx-pager-item { display:block; float:left; margin-left:5px; }
.main_visual .bx-pager.bx-default-pager .bx-pager-item a { display:block; text-indent:-999em; width:16px; height:16px; border:1px solid #4168c3; box-sizing:border-box; border-radius:9px; } /* 비주얼 버튼 색상 */
.main_visual .bx-pager.bx-default-pager .bx-pager-item a.active { background-color:#4168c3; }/* 비주얼 버튼 색상 */

/* 공지사항 */
.notice101 { position:relative; height:100%; overflow:hidden; }
.notice101 h2 { max-width:30%; float:left; font-size:18px; text-align:center; letter-spacing:-1px; }
.notice101 h2 a { display:block; font-family:'NotoM'; color:#000; padding:0 20px;  height:40px; line-height:40px; overflow:hidden;}
.notice101 h2 a:hover { color:#1033ad; }
.notice101 h2 a.current { font-family:'NotoM'; color:#fff; z-index:2; background:#e7573f; border-radius:10px 10px 0 0; }
.notice101 h2 a.current:hover { color:#fff; }
.notice101 .list_box.on { display:block; }
.notice101 .list_box { display:none; position:absolute; top:40px; width:100%; padding-top:15px; font-size:14px; border-top:1px solid #cad3da; }
.notice101 .list_box li { position:relative; line-height:31px; vertical-align:middle; }
.notice101 .list_box li a {width: 75%;position:relative;display:block;padding-left:8px;height:31px;color:#444;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.notice101 .list_box li a:before { content:''; position:absolute; top:15px; left:0; width:2px; height:2px; background:#282829; }
.notice101 .list_box li.new a { padding-left:30px; }
.notice101 .list_box li.new a:after { content:'N'; position:absolute; left:8px; top:7px; width:18px; height:18px; font-size:13px; color:#edf1f4; background:#5574b7; line-height:18px; text-align:center; }
.notice101 .list_box li a:hover { text-decoration:underline; font-family:'NotoM'; }
.notice101 .list_box li span.date { position:absolute; right:0; top:0; color:#000; }
.notice101 .btn_more { position:absolute; right:0; top:-31px; width:16px; height:16px; text-indent:-9999em; line-height:0; font-size:0; background:url('/tempSample/20002/images/main/01_btn_more.png') no-repeat center; }
.notice101 a, .notice101 .btn_more { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 학사일정 */
.drawSchedule101 { position:relative; height:100%; overflow:hidden; }
.drawSchedule101 h2 { height:40px; font-family:'NotoM'; color:#000; font-size:18px; line-height:40px; margin-right:30px; overflow:hidden;  white-space:nowrap;}
.drawSchedule101 .date_view { position:relative; width:150px; height:40px; margin:0 auto; line-height:40px; font-size:15px; color:#fff; font-family:'NotoM'; text-align:center; }
.drawSchedule101 .date_view a { position:absolute; top:13px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; }
.drawSchedule101 .date_view .pre { left:0; background:url('/tempSample/20002/images/main/101_sche_prev.png') no-repeat right center; }
.drawSchedule101 .date_view .next { right:0; background:url('/tempSample/20002/images/main/101_sche_next.png') no-repeat left center; }
.drawSchedule101 .date_view .pre:hover { background:url('/tempSample/20002/images/main/101_sche_prev.png') no-repeat left center; }
.drawSchedule101 .date_view .next:hover { background:url('/tempSample/20002/images/main/101_sche_next.png') no-repeat right center; }
.drawSchedule101 .inner { position:absolute; width:250px; height:205px; font-size:12px; background:#605ca9; color:#fff; border-radius:10px 10px 0 0; padding:0 2%; box-sizing:border-box; z-index:2; }
.drawSchedule101 .inner th { width:12%; height:22px; line-height:22px; font-size:14px; border-top:1px solid #fff; border-bottom:1px solid #fff; }
.drawSchedule101 .inner td { height:22px; line-height:22px; text-align:center;}
.drawSchedule101 .inner td a { display:block; width:20px; height:20px; line-height:20px; margin:1px auto; font-weight:bold; border-radius:10px; box-sizing:border-box; }
.drawSchedule101 .inner td a.check { color:#fff79d; border:1px solid #fff79d; }
.drawSchedule101 .inner td a.check:hover { background:#fff79d; color:#000; }
.drawSchedule101 .inner td a.today { color:#fff; background:#33348e;  }
.drawSchedule101 .inner td a.today:hover { background:#3335eb }
.drawSchedule101 .sch_list { position:relative; margin-left:240px; height:100%; background:#d6deed; padding:20px 18px 8px 28px; box-sizing:border-box; }
.drawSchedule101 .sch_list h3 { position:relative; height:30px; font-family:'NotoM'; color:#000; font-size:16px; line-height:30px; background:url('/tempSample/20002/images/main/101_icon_sche.png') no-repeat right center; }
.drawSchedule101 .sch_list h3:before { content:''; position:absolute; bottom:-10px; width:100%; height:4px; background:url('/tempSample/20002/images/main/101_sche_line.png'); }
.drawSchedule101 .sch_list ul { overflow-y:auto; height:120px; margin-top:22px; font-size:13px; }
.drawSchedule101 .sch_list ul li a { position:relative; display:block; color:#434343; line-height:22px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.drawSchedule101 .sch_list ul li a:hover { font-family:'NotoM'; text-decoration:underline; }
.drawSchedule101 .sch_list ul li a span { color:#1033ad; font-family:'NotoM'; margin-right:8px; }
.drawSchedule101 .sch_list .no_Data { text-align:center; }
.drawSchedule101 .btn_more { position:absolute; right:0; top:10px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; background:url('/tempSample/20002/images/main/01_btn_more.png') no-repeat center; }
.drawSchedule101 .inner, .drawSchedule101 .sch_list, .drawSchedule101 .date_view a, .drawSchedule101 .inner td a, .drawSchedule101 .btn_more { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 식단 */
.meal_menu101 { position:relative; height:100%; background-color:#ffe3df; border-radius:10px 10px 0 0; overflow:hidden; }
.meal_menu101:before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:40px; background:#e7573f; }
.meal_menu101 h2 {position:relative; width:50%; height:40px; line-height:40px; padding:0 40px 0 20px; font-size:18px; color:#fff; font-family:"NotoM"; overflow:hidden; white-space:nowrap;}
.meal_menu101 .meal_info { display:none; }
.meal_menu101 ul { height:90px; overflow-y:auto; margin:10px 0 0; }
.meal_menu101 ul li { position:relative; }
.meal_menu101 dl dt.kcal { position:absolute; left:20px; bottom:0; z-index:10; height:24px; line-height:24px; border-radius:10px; text-align:center; font-size:14px; font-family:"NotoM"; color:#fff79d; padding:0 15px; background:rgba(0,0,0,0.34); }
.meal_menu101 dl dd.meal_list { padding:15px 20px 35px 20px; font-family:"NotoM"; font-size:15px; color:#000; letter-spacing:-1px; line-height:20px; }
.meal_menu101 span.kcal { position:absolute; top:10px; left:15px; font-family:"NotoM"; font-size:16px; color:#fff79d; background:rgba(255,255,255,0.34); height:24px; border-radius:12px; }
.meal_menu101 .imgBg { position:absolute; bottom:0; right:17px; }
.meal_menu101 .imgBg img { width:158px; height:121px; }
.meal_menu101 .btn_more { position:absolute; right:15px; top:12px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; background:url('/tempSample/20002/images/main/101_btn_more2.png') no-repeat center; }
.meal_menu101 ul li.no_Data { top:50%; margin-top:-10px; font-size:15px; line-height:20px; text-align:center }
.meal_menu101 ul, .meal_menu101 .imgBg img, .meal_menu101 .btn_more { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 팝업존 */
.pop101 { position:relative; height:100%; overflow:hidden; background:#e7573f; border-radius:10px 10px 0 0; overflow:hidden; }
.pop101 h2 { width:40%; height:40px; padding-left:20px; font-size:18px; line-height:40px; font-family:"NotoM"; color:#fff; overflow:hidden; white-space:nowrap;}
.pop101 .nss_pg { position:absolute; top:10px; right:21px; }
.pop101 .nss_pg span { position:absolute; top:0; right:75px; width:45px; text-align:right; line-height:20px; height:20px;  color:#fff; font-size:13px; display:inline-block; }
.pop101 .nss_pg span strong { color:#ffc6bd; }
.pop101 .nss_pg a { display:block; float:left; font-size:0; text-indent:-10000em; width:20px; height:20px; border:1px solid #fff; margin-left:2px; }
.pop101 .nss_pg a.pre { background:url('/tempSample/20002/images/main/101_btn_prev.png') no-repeat center; }
.pop101 .nss_pg a.stop { background:url('/tempSample/20002/images/main/101_btn_stop.png') no-repeat center; }
.pop101 .nss_pg a.next { background:url('/tempSample/20002/images/main/101_btn_next.png') no-repeat center; }
.pop101 .nss_pg a.play { background:url('/tempSample/20002/images/main/101_btn_play.png') no-repeat center; }
.pop101 .pop_img { position:relative; width:100%; max-width:350px; margin:0 auto;}
.pop101 .pop_img li {width:100%;height:225px;text-align: center;overflow:hidden;}
.pop101 .pop_img li img {width:100%;height:100%;}
.pop101 .pop_img li a {display:block;height:225px;}
.pop101 .pop_img li.on { display:block }
.pop101 .pop_img li a:focus {
    outline-color: #c00000;
    border: 2px solid #c00000;
}
/* 팝업리스트 레이어 추가 */
.pop101 .pop_layer_box { display:none; position:absolute; left:0; top:0; width:100%; height:100%; background:#394b61; }
.pop101 .pop_layer_box .pop_layer { position:relative; padding:20px; }
.pop101 .pop_layer_box .pop_layer h3 { font-size:18px; color:#fff; }
.pop101 .pop_layer_box .pop_layer ul { height:125px; margin-top:25px; padding:10px 15px 10px 25px; line-height:22px; overflow-y:auto; background:#576c85; }
.pop101 .pop_layer_box .pop_layer ul li { font-size:12px; color:#fff; list-style-type:disc; }
.pop101 .pop_layer_box .pop_layer ul li a { color:#fff; }
.pop101 .pop_layer_box .pop_layer a.pop_close { display:block; position:absolute; right:20px; top:15px; padding:5px 10px; font-family:"NotoR"; color:#fff; background:#576c85; border-radius:5px; }

/* 포토앨범 */
.gallery101 { position:relative; height:100%; background:#fff; border-radius:10px 10px 0 0; overflow:hidden; box-sizing:border-box; background:#e7573f; }
.gallery101 h2 {width:50%; height:40px; line-height:40px; padding:0 40px 0 20px; font-size:18px; color:#fff; font-family:"NotoM";  overflow:hidden; white-space:nowrap;}
.gallery101 a { display:block; height:225px;; overflow:hidden; }
.gallery101 a .img { width:100%; height:100%; }
.gallery101 a img { width:100%; height:100%; }
.gallery101 a:hover img { transform:scale(1.1); }
.gallery101 a .txt { position:absolute; bottom:0; left:0; display:block; width:100%; height:40px; line-height:40px;  color:#fff; font-size:14px; text-align:center; padding:0 15px; background:rgba(0,0,0,0.56); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box; z-index:2; }
.gallery101 a:hover .txt { background:rgba(0,0,0,0.7); }
.gallery101 .btn_more { position:absolute; right:15px; top:12px; width:18px; height:18px; text-indent:-9999em; line-height:0; font-size:0; background:url('/tempSample/20002/images/main/101_btn_more2.png') no-repeat center; }
.gallery101 a img, .gallery101 a .txt, .gallery101 .btn_more { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 학급홈페이지 */
.class101 { position:relative; height:100%; background:#ff9c8d; color:#fff; border-radius:10px 10px 0 0; overflow:hidden; }
.class101 .imgBg { position:absolute; bottom:0; left:10px; width:205px; height:56px; }
.class101 h2 { position:absolute; left:215px; line-height:60px; width:170px; font-family:'NotoM'; font-size:18px; text-align:center; overflow:hidden; white-space:nowrap;}
.class101 .class_box { position:relative; margin:0 25% 0 400px; }
.class101 .class_box span { position:relative; display:block; width:48%; float:left; margin:16px 2% 15px 0; background:#fff url('/tempSample/20002/images/main/01_btn_c_more.png') no-repeat right; overflow:hidden; }
.class101 .class_box select { display:block; width:115%; height:29px; font-size:15px; color:#363636; padding-left:10px; line-height:29px; border:none;  box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; appearance:none; background:none; }
.class101 .class_box select::-ms-expand { display:none; }
.class101 button { position:absolute; right:0; top:0;  width:24%; height:60px; font-size:14px; background:#e7573f; cursor:pointer; }
.class101 button span { position:relative; margin-left:-40px; }
.class101 button span::before { content:''; position:absolute; right:-50px; width:34px; height:11px; background:url('/tempSample/20002/images/main/101_btn_c_go.png') no-repeat; }
.class101 button:hover { background:#d94026; }
.class101 button:hover span:before { right:-60px; }
.class101 h2, .class101 .class_box, .class101 button, .class101 button span:before { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

/* 기능바로가기 */
.classlink101 { position:relative; height:100%; background:#4168c3; color:#fff; border-radius:10px 10px 0 0; overflow:hidden; }
.classlink101 .imgBg { position:absolute; bottom:0; left:10px; width:205px; height:56px; }
.classlink101 ul{position:relative; margin:15px 10px 15px 220px; overflow:hidden;}
.classlink101 ul li{float:left; width:23%; height:35px; margin:0 1%; line-height:33px; border:1px solid #fff; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.classlink101 ul li a{display:block; height:33px; padding:0 10px; font-size:15px; color:#fff; text-align:center; overflow:hidden;}
.classlink101 ul li a:hover{text-decoration:underline;}

/* 바로가기 */
.M_link101 {position:relative;height:100%;overflow:hidden;box-sizing:border-box;}
.M_link101 ul {display:table; table-layout:fixed; width:100%; padding:10px 0; }
.M_link101 ul li { position:relative; display:table-cell; text-align:center; }
.M_link101 ul li a { display:block; padding:15px 0 0; }
.M_link101 ul li a .img { display:block; width:80px; height:80px; border-radius:40px; margin:0 auto; background:#dfeaff; }
.M_link101 ul li a:hover .img { background:#c5d9ff }
.M_link101 ul li a .img img { width:55px; padding-top:13px; }
.M_link101 ul li a:hover .img img { transform:rotateY(180deg); }
.M_link101 ul li a .txt { display:block; height:40px; font-family:'NotoM'; font-size:16px; color:#333; line-height:19px; margin-top:10px; text-align:center; overflow:hidden; }
.M_link101 ul li a:hover .txt { text-decoration:underline; }
.M_link101 ul li a:hover, .M_link101 ul li a:focus { text-decoration:underline; }
.M_link101 ul li a .img, .M_link101 ul li a .img img { transition:all .3s ease; -ms-transition:all .3s ease; -webkit-transition:all .3s ease; }

.MC_wrap .btn_more:hover { transform:rotate(180deg); }

/* 배너존 */
.banner_zone {position:relative; width:100%; border-top:1px solid #fff;}
.banner_zone .inner {position:relative; width:980px; height:70px; margin:0 auto; overflow:hidden;}
.banner_zone .inner h2  {font-size:15px; font-family:"NotoM"; color:#1d1d1d; position:absolute; top:15px; left:0;}
.banner_zone .inner .btn {position:absolute; left:0; top:40px}
.banner_zone .inner .btn a { float:left; font-size:0; text-indent:-10000em; width:14px; height:15px; vertical-align:top}
.banner_zone .inner .btn a.pre {background:url(/tempSample/20002/images/main/btn_b_prev.gif) no-repeat}
.banner_zone .inner .btn a.stop {background:url(/tempSample/20002/images/main/btn_b_stop.gif) no-repeat}
.banner_zone .inner .btn a.next {background:url(/tempSample/20002/images/main/btn_b_next.gif) no-repeat}
.banner_zone .inner .btn a.play {background:url(/tempSample/20002/images/main/btn_b_play.gif) no-repeat}
.banner_zone .inner .btn a.list {background:url(/tempSample/20002/images/main/btn_b_list.gif) no-repeat}
.banner_zone .inner ul {width: calc(100% - 4rem) !important;padding-top:12px;margin-left:70px;height:59px;overflow:hidden}
.banner_zone .inner ul li {width: 19%;float:left;margin-left: 0.5rem;}
.banner_zone .inner ul li a {display:block; border:1px solid #c8d1db;}
.banner_zone .inner ul li a img {width:100%; height:45px}

@media (max-width:1080px) {

	.main_visual, .notice101, .drawSchedule101, .meal_menu101, .pop101, .gallery101, .class101, .M_link101 .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 ul li img { width:100%; }
	.main_visual .bx-controls { width:100%; bottom:10px; left:2.5%; margin-left:auto; }

	/* 배너존 */
	.banner_zone .inner {width:95%;}
	.banner_zone .inner ul li {width: 20%;margin-left: 2%;}
	.banner_zone ul li a img {width:100%}


 }

@media (max-width:960px) {

	/*오늘의식단*/
	.meal_menu101 ul { height:120px; margin:10px 180px 10px 0; }

	/* 학급홈페이지 */
	.class101 .imgBg { display:none; }
	.class101 h2 { left:0; }
	.class101 .class_box { margin:0 25% 0 170px; }

	/* 기능바로가기 */
	.classlink101 .imgBg {display:none;}
	.classlink101 ul{margin:15px 10px;}



 }

 @media (max-width:760px) {

	/*배너존*/
	.banner_zone .inner ul li {width:30%;margin-left: 3%;}

 }

@media (max-width:680px) {

	/*바로가기*/
	.M_link101 ul li a { padding:20px 0 10px;}
	.M_link101 ul li a .img { width:70px; height:70px; }
	.M_link101 ul li a .img img { width:45px; padding-top:15px; }
	.M_link101 ul li a .txt { font-size:14px; }


 }

@media (max-width:580px) {

	/* 학급홈페이지*/
	.class101 .class_box { margin:0 15px 0 170px; }
	.class101 button { position:relative; right:auto; top:auto; width:100%; }

	/* 기능바로가기 */
	.classlink101 ul{margin:10px;}
	.classlink101 ul li{width:48%; margin:5px 1%;}

	/* 바로가기 */
	.M_link101 ul {display:block;}
	.M_link101 ul li {display:block;width: 50%;float:left;}

	/* 배너존 */
	.banner_zone .inner ul li {width: 47%;margin-left:2%;}
 }


 @media (max-width:500px) {

 }

@media (max-width:480px) {

	/*공지사항*/
	.notice101 h2 { font-size:16px; }
	.notice101 h2 a { padding:0 10px; }

	/*오늘의식단*/
	.meal_menu101 ul { height:70px; margin:10px 0 90px 0; }
	.meal_menu101 .imgBg img { width:100px; height:auto; }

	/*학사일정*/
	.class101 h2 { position:relative; text-align:left; line-height:30px; margin-top:10px; padding-left:20px; }
	.class101 .class_box { margin:0 15px 0 15px; }
	.drawSchedule101 .inner { position:relative; width:100%; }
	.drawSchedule101 .sch_list { width:100%; margin-left:0; padding:20px 18px; }


 }

@media (max-width:380px) {

	/* 배너존 */
	.banner_zone .inner ul li {width: 95%;margin-left:0;}

 }