@charset "utf-8";
@import url("./default.css"); 

body{ }

#container {width:100%; margin:50px auto 0; }
#container:after { content:""; display:block; clear:both; }

#layerBell{width:758px;height:426px;position:fixed; left:calc(50% - 339px); top:calc(50% - 213px);  padding:0px 30px 0px; z-index:999; background:#fff;  box-sizing:border-box; -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);
box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.25);}
#layerBell .lb_titlebox { text-align:center; position:relative; width:100%; height:110px; }
#layerBell .lb_titlebox:before { content:""; display:block; width:178px; height:192px; background:url(../images/layer/layer_bg.png) center top no-repeat; position:absolute; right:0; bottom:0; }
#layerBell .lb_titlebox h3 { font-size:28px; color:#333; font-weight:500; padding:38px 0 6px; }
#layerBell .lb_titlebox p { font-size:14px; color:#666666; }
#layerBell.bellview { display:none; }
#layerBell .close{position:absolute;bottom:5px;right:5px;}
#layerBell ul { height:240px;  overflow-y:scroll; position:relative; box-sizing:border-box; padding:20px; background:#f5f5f5; }
#layerBell ul:before { content:""; display:block; width:1px; height:100%; background:#ccc; position:absolute; left:18px; top:0px; }
#layerBell ul li { line-height:50px; font-size:15px; color:#333; margin-bottom:10px;  }
#layerBell ul li a { display:block; width:100%; height:50px; line-height:50px; position:relative; padding:0 85px 0 55px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#333; box-sizing:border-box; }
#layerBell ul li a span.Blink { display:block; position:absolute; right:15px; top:calc(50% - 13px); width:55px; height:25px; line-height:25px; background:#999; font-size:12px; color:#fff; text-align:center;  transition:all 0.4s; }

#layerBell ul li a:before { content:""; display:block; width:38px; height:38px; position:absolute; left:0; top:6px; background:#eee url(../../../images/member/cal_off.png) 11px center no-repeat; border-radius:50%; transition:all 0.4s; }
#layerBell ul li a:hover { font-weight:500; }
#layerBell ul li a:hover:before { background:#01b093 url(../../../images/member/cal_on.png) 11px center no-repeat; transition:all 0.4s; }

#layerBell ul li a:hover span.Blink { background:#444;  transition:all 0.4s;}
#layerBell .today_close_box { width:100%; position:relative; background:#f5f5f5; margin-top:12px; text-align:right; }
#layerBell .today_close_box span { display:block; width:calc(100% - 172px); cursor:pointer; line-height:45px; font-weight:500; color:#4e4e4e; box-sizing:border-box; padding:0 44px 0 0; }
#layerBell .today_close_box span:before { content:""; display:inline-block; background:url(../images/layer/new_chk_on.png) left top no-repeat; width:18px; height:17px; position:relative; margin:0 12px 0 0; top:3px; }
#layerBell .bell_close {position:absolute; right:0; bottom:0; }
#layerBell .bell_close a { display:block; vertical-align:top; text-align:center; width:172px; height:45px; line-height:45px; text-align:center; font-weight:500; color:#4e4e4e; background:#fae86c;  }
#layerBell .bell_close i { color:#fff !important; }

#layerBell table.cStyle {border-top:2px solid #93a9d7; width:100%; border-left:1px solid #dddddd; font-size:13px; text-align:center; border-collapse:collapse; word-break:break-all; margin:0px 0; background:#fff;}
#layerBell table.cStyle th {background:#f4f6fa; color:#444; line-height:24px; padding:6px 5px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd;}
#layerBell table.cStyle td {color:#555; padding:6px 5px; line-height:20px; border-right:1px solid #dddddd; border-bottom:1px solid #dddddd; font-size:14px; font-weight:500; }
#layerBell .tablecont {  position:relative;  box-sizing:border-box; padding:20px; background:#f5f5f5;}
#layerBell .layer_table {  overflow-y:scroll; position:relative; box-sizing:border-box; height:203px;}
#layerBell table.cStyle .Blick { display:block; width:68px; height:28px; margin:0 auto; line-height:28px; background:#d95f5f; font-size:13px; color:#fff; text-align:center;  transition:all 0.4s; font-weight:500; border-radius:3px; }
#layerBell table.cStyle .Blick:hover { background:#c31414;  transition:all 0.4s;}
#layerBell .lb_chk { display:inline-block; height:28px; margin:0 auto; line-height:28px; background:#5d86e0; font-size:13px; color:#fff; text-align:center;  transition:all 0.4s; font-weight:500; border-radius:3px; padding:0 10px;}
#layerBell .bell_text { }


/*박스 공통*/
.col_box{float:left;  position:relative; width:30%; height:195px; box-sizing:border-box; background:#fff;} /* 340 / 1100 = */
.col_box h3 { font-family: 'CookieRun'; font-weight:600; }
.col_box h3 a { color:#111; }


#main_cont1 { padding:0 0 58px 0; background:url(../images/main/gal_bg.png) center bottom no-repeat; }

/*메인비주얼*/
.visual_wrap { position:relative; margin:0 0 0 0px; width:100%; height:530px; overflow:hidden; background:#fff7ce url(../images/main/vi_bg1.png) center bottom no-repeat; transition:all 0.4s; box-sizing:border-box; padding:131px 0 0 0; }
#wrap.all_ctype2 .visual_wrap { background:#d1eeff url(../images/main/vi_bg2.png) center bottom no-repeat; transition:all 0.4s;}
.visual_wrap .slick-list { right:-13px; }
.visual_wrap .vi_content { width:1280px; margin:0 auto 0; }
.visual_wrap .vi_content > div { height:530px;  }
.visual_wrap .vi_content div.visual01 { position:relative; }
.visual_wrap img.imgdef { display:block; position:relative; float:right; }

.visual_wrap .vi_txt { position:absolute; left:50%; transform:translateX(-50%); top:150px; z-index:10;  width:100%; max-width:1280px; box-sizing:border-box; padding:0 51px; }

.visual_wrap .vi_txt .vitxt_box { opacity:0;  }
.visual_wrap .vi_txt .vitxt_box.effect { -webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }

.visual_wrap .vi_pcont { position:absolute; text-align:right; left:50%; transform:translateX(-50%); bottom:20px; z-index:10;  width:100%; max-width:1280px; box-sizing:border-box; padding:0 30px; }
.visual_wrap .vi_pbox { border-radius:150px; display:inline-block; vertical-align:top; background:rgba(0,0,0,0.5); padding:13px 10px; }
.visual_wrap .vi_pbox::after { content:""; display:block; clear:both; }
.visual_wrap .vi_pbox .vi_page { float:left; }
.visual_wrap .slick-dots {   }
.visual_wrap .slick-dots::after { content:""; display:block; clear:both; }
.visual_wrap .slick-dots li { float:left; cursor:pointer; width:15px; height:15px; box-sizing:border-box; border-radius:50%; background:none; border:3px solid #fff; margin:0 8px;  }
.visual_wrap .slick-dots li.slick-active { background:#fff; }
.visual_wrap .slick-dots li span { display:none; }

@-webkit-keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fade-in-right {
  0% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}



/*공지사항 type1*/
.noticeGroup{ width:628px; height:300px; box-sizing:border-box; border:2px solid #ddd; border-radius:22px; padding:0 30px; }
.noticeGroup::before { content:""; display:block; width:calc(100% - 60px); height:2px; background:#ff9f1c; position:absolute; left:30px; top:68px; }
.noticeGroup h3 {float:left; padding:0px 20px 0 28px; background:url(../images/main/ndot.png) left center no-repeat; }
.noticeGroup h3.btn1 { padding:0 20px 0 0; background:none; }
.noticeGroup h3 a { display:block; width:100%; height:68px; line-height:68px; box-sizing:border-box; text-align:center; font-size:24px; color:#aaaaaa;  position:relative; }
.noticeGroup h3 a::before { content:""; display:block; width:7px; height:7px; border-radius:50%; background:#04b2d9; position:absolute; right:-7px; top:18px; opacity:0; transition:all 0.4s; } 

.noticeGroup .on_check .tabcontent{display:block;}
.noticeGroup .on_check .btn a { color:#111111; }
.noticeGroup .on_check .btn a::before { opacity:1; }

.noticeGroup div.tabcontent {position:absolute;left:0;top:65px;width:100%; display:none; height:auto; box-sizing:border-box; }
.noticeGroup div ul { margin:15px 29px 0;}
.noticeGroup div ul li {float:left; width:100%; line-height:40px !important; letter-spacing:-0.5px; font-size:16px; border-bottom:1px dashed #ddd;  }
.noticeGroup div ul li:nth-child(5) { border-bottom:0 none; }
.noticeGroup div ul li a {float:left; max-width:calc(100% - 80px); padding:0 0 0 14px; color:#333;overflow:hidden; white-space:nowrap; text-overflow:ellipsis; box-sizing:border-box; position:relative; z-index:1; }
.noticeGroup div ul li a::after { content:""; display:block; width:0%; height:8px; background:#ffbf69; position:absolute; left:11px; top:18px;  z-index:-1; opacity:0.4; transition:all 0.5s; }
.noticeGroup div ul li a:hover::after { width:100%; }
.noticeGroup div ul li a::before { content:""; display:block; width:5px; height:5px; border-radius:50%; background:#ff9f1c; position:absolute; left:0; top:19px; }
.noticeGroup div ul li a:hover { }
.noticeGroup div ul li span {float:right; color:#999999; font-size:15px;}
.noticeGroup div ul li img {vertical-align:middle; display:none;}

.noticeGroup div p.more {position:absolute; clear:both; right:30px; top:-41px; }
.noticeGroup div p.more a { transition:all 0.5s; display:block; color:#04b2d9; font-weight:500; font-size:16px; }
.noticeGroup div p.more a::after { content:""; display:inline-block; vertical-align:top; width:10px; height:14px; background:url(../images/main/arrow1.png) left top no-repeat; margin:6px 0 0 10px; transition:all 0.4s; }
.noticeGroup div p.more a:hover::after {  margin:6px 0 0 15px; }


/*급식*/
.food {width:302px; height:300px; border-radius:15px; border:2px solid #ddd; margin:0 24px 0; padding:0 30px 0; background:url(../images/main/f_bg1.png) left 0px bottom no-repeat, url(../images/main/f_bg2.png) right 16px bottom no-repeat, #fff url(../images/main/f_bg3.png) center bottom no-repeat; overflow:hidden;}
.food h3 { height:68px; box-sizing:border-box; padding:25px 0 0; }
.food h3 a {  font-size:24px; box-sizing: border-box; }
.food h3 a span{ color:#56bf7b; }

.food .f_today {  border-radius:150px; position:relative; text-align:center; width:100%; height:40px; line-height:40px; text-align:center; font-size:18px; color:#fff; font-weight:bold; background:#56bf7b; transition:all 0.5s; }

.food .ftxt { margin-top:13px;  box-sizing: border-box; }
.food .ftxt a { display:block;  
    white-space: normal;
	  font-size:16px; color:#555; 
    line-height: 26px;
	height:78px;
    text-align: left;
    overflow:hidden;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; }
.food .ftxt a:hover { color:#333; font-weight:500;  letter-spacing: -0.2px;}
.food p.more {position:absolute; clear:both; right: 30px;top: 27px;}
.food p.more a { display:block; width:21px; height:21px; text-indent:-999999px; background:url(../images/main/more1.png) center center no-repeat; }


/*월중행사 type1*/
.schedule { width:302px; height:300px; margin:0 0 50px 0px; overflow:hidden; background:#ffe8ec; border-radius:22px; padding:0 17px 0; border:2px solid #f26d6d; }
.schedule h3 { font-size:24px; color:#111; padding:27px 0 0 0; }
.schedule h3 a {   }
.schedule h3 a span { font-size:36px; color:#f26d6d; font-weight:900;  }

#schedule_content {position:relative;  width:100%; height:188px; overflow-y:auto; margin-top:25px; }
/* 스크롤바의 폭 너비 */
#schedule_content::-webkit-scrollbar {
    width: 5px; 
	
}

#schedule_content::-webkit-scrollbar-thumb {
    background:#aaaaaa; /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

#schedule_content::-webkit-scrollbar-track {
    background:#dddddd;  /*스크롤바 뒷 배경 색상*/
	border-radius:10px;
}

div#schedule_scroll ul#schedule_content li { height:47px; padding:6px 0; box-sizing:border-box; }
div#schedule_scroll ul#schedule_content li a{ display:block; color:#333; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; padding:0 0 0 80px; box-sizing:border-box; font-size: 15px; line-height:35px; font-weight:400; }
div#schedule_scroll ul#schedule_content li a span.date { display:block; width:70px; height:35px; line-height:33px; position:absolute; left:0; top:0; background:#fff; transition:all 0.4s; text-align:center; color:#f26d6d; font-size: 16px; font-weight:600; border-radius:150px; border:1px solid #f26d6d; box-sizing:border-box; }
div#schedule_scroll ul#schedule_content li a:hover {   }
div#schedule_scroll ul#schedule_content li a:hover span.date { background:#f26d6d; color:#fff; }

.schedule .more { position:absolute; right:18px; top:28px; }
.schedule .more a { display:block; width:30px; height:30px; border-radius:50%; text-indent:-999999px; background:#f26d6d url(../images/main/more2.png) center center no-repeat;}


/*학급홈페이지*/
.class { position:relative; width:302px; height:330px; float:left; margin:0px 0 0; clear:both; overflow:hidden;  background:none;  box-sizing:border-box; }
.class h3 { letter-spacing:-1px; text-align:center; font-size:26px; height:70px; box-sizing:border-box; padding:27px 0 0 0; }
.class h3 span { color:#f26d6d;}
.class #class_btn { display:block; justify-content:space-between; width:100%; height:260px; overflow:hidden; box-sizing:border-box; border:2px solid #ddd; border-radius:12px; padding:30px 19px 0 19px; background:url(../images/main/c_bg.png) no-repeat center bottom; }
.class #class_btn li { width:calc(50% - 5px); margin-bottom:23px;  float:left; }
.class #class_btn li:nth-child(even) { float:right; }
.class #class_btn li a { display:block; width:100%; height:50px; box-sizing:border-box; line-height:48px; position:relative; color:#000; font-size:16px; background:#fff; transition:all 0.5s; padding:0 0 0 56px; border-radius:150px;   } 
.class #class_btn li:nth-child(1) a { border:1px solid #ff8fab; }
.class #class_btn li:nth-child(2) a { border:1px solid #f26d6d; }
.class #class_btn li:nth-child(3) a { border:1px solid #fcb30f; }
.class #class_btn li:nth-child(4) a { border:1px solid #f5cc00; }
.class #class_btn li:nth-child(5) a { border:1px solid #56bf7b; }
.class #class_btn li:nth-child(6) a { border:1px solid #82be00; }

.class #class_btn li:nth-child(1) a:hover { background:#ffe7f3; }
.class #class_btn li:nth-child(2) a:hover { background:#fde8e8; }
.class #class_btn li:nth-child(3) a:hover { background:#fdf7e9; }
.class #class_btn li:nth-child(4) a:hover { background:#fdf8e0; }
.class #class_btn li:nth-child(5) a:hover { background:#e4ffee; }
.class #class_btn li:nth-child(6) a:hover { background:#f4fedd; }

.class #class_btn li a:before { content:""; display:block; width:50px; height:50px; position:absolute; left:-1px; top:-1px; border-radius:50%; transform:rotate(0deg); transition:all 0.7s; }
.class #class_btn li:nth-child(1) a:before { background:#ff8fab url(../images/main/c_ic1.png) no-repeat center center / 20px; }
.class #class_btn li:nth-child(2) a:before { background:#f26d6d url(../images/main/c_ic2.png) no-repeat center center / 22px; }
.class #class_btn li:nth-child(3) a:before { background:#fcb30f url(../images/main/c_ic3.png) no-repeat center center / 19px; }
.class #class_btn li:nth-child(4) a:before { background:#f5cc00 url(../images/main/c_ic4.png) no-repeat center center / 25px; }
.class #class_btn li:nth-child(5) a:before { background:#56bf7b url(../images/main/c_ic5.png) no-repeat center center / 20px; }
.class #class_btn li:nth-child(6) a:before { background:#82be00 url(../images/main/c_ic6.png) no-repeat center center / 23px; }

.class #class_btn li a:hover:before { transform:rotate(360deg); }


/*갤러리 img는 absolute로 날리고 썸네일을 background로 살리면 깨끗하게 쓸수 있습니다 common.js파일에 갤러리img추출 부분을 소스에 맞게 수정해주면됨*/
.galleryGroup{ margin:0px 0 0px 0px; width:calc(100% - 326px); height:auto; float:right; background:none; }
.galleryGroup h3 { height:89px; text-align:center; display:flex; align-items:center; justify-content:center;}
.galleryGroup h3 a { display:flex; align-items:center; justify-content:center; font-size:26px; color:#111; }
.galleryGroup h3 a::before,
.galleryGroup h3 a::after { content:""; display:inline-block; vertical-align:top; }

.galleryGroup h3 a::before { width:41px; height:39px; background:url(../images/main/gal_deco1.png) left top no-repeat; margin:0 12px 0 0; position:relative; top:0px; }
.galleryGroup h3 a::after { width:46px; height:34px; background:url(../images/main/gal_deco2.png) left top no-repeat; margin:0 0 0 10px; position:relative; top:0px; }

.galleryGroup h3 a span { color:#ff9f1c; } 

.galleryGroup .main_btn { position:absolute; right:0; top:20px; }
.galleryGroup .main_btn:after { content:""; display:block; clear:both; }
.galleryGroup .main_btn li { float:left; margin-left:10px; }
.galleryGroup .main_btn li a { display:block; width:41px; height:41px; border-radius:50%; box-sizing:border-box; border:1px solid #ddd; text-indent:-99999px; }
.galleryGroup .main_btn li.gbtn01 a { background:#fff url(../images/main/g_bt1.png) center center no-repeat; }
.galleryGroup .main_btn li.gbtn03 a { background:#fff url(../images/main/g_bt3.png) center center no-repeat; }
.galleryGroup .main_btn li.more a { background:#fff url(../images/main/g_more.png) center center no-repeat; }


.galleryGroup #gallery_scroll { width:calc(100% + 24px); height:auto; margin:0px 0 0; }
.galleryGroup .slick-slide { width:302px; height:241px; margin:0 24px 0 0; box-sizing:border-box; }
.galleryGroup .slick-slide .gitem a { display:block; position:relative; height:241px; width:100%; border-radius:10px; overflow:hidden; }
.galleryGroup .slick-slide .gitem .pic { width:100%; height:241px; box-sizing:border-box; overflow:hidden; position:relative; background-size:cover !important;}
.galleryGroup .slick-slide .gitem .pic::before { content:"자세히 보기"; display:block; width:100%; height:0%; background:rgba(0,0,0,0.5) url(../images/main/gal_ic.png) center 0px no-repeat; font-size:16px; font-weight:500; color:#fff; box-sizing:border-box; padding:0px 0 0 0; text-align:center; transition:all 0.5s; opacity:0; }
.galleryGroup .slick-slide .gitem a:hover .pic::before { height:100%; padding:124px 0 0 0; opacity:1; background:rgba(0,0,0,0.5) url(../images/main/gal_ic.png) center 67px no-repeat;}
.galleryGroup .slick-slide .gitem .pic img { position:absolute; left:-999999px; top:0; }
.galleryGroup .slick-slide .gitem .g_sub { position:absolute; left:0; bottom:0; height:50px; line-height:50px; box-sizing:border-box; width:100%; padding:0 15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:500; color:#fff; text-align:center; z-index:1;  }

.galleryGroup .slick-slide .g1 .g_sub { background:rgba(255,143,171,0.8); }
.galleryGroup .slick-slide .g2 .g_sub { background:rgba(147,129,255,0.8); }
.galleryGroup .slick-slide .g3 .g_sub { background:rgba(4,178,217,0.8); }

.galleryGroup .slick-slide .gitem a:hover .g_sub { font-weight:bold; }
.galleryGroup .slick-slide .gitem .not_view .pic { background:none !important; }
.galleryGroup .slick-slide .gitem .not_view .pic img { left:0; filter: blur(8px); width:100%; height:100%;}
.galleryGroup .slick-slide .gitem .not_view::before { content:"비공개 게시물 입니다."; display:block; width:100%; background:url(../images/main/gnone.png) center top 65px no-repeat; height:202px; position:absolute; left:0; top:0; z-index:2; text-align:center; box-sizing:border-box; padding:135px 0 0; font-size:16px; font-weight:bold; color:#111; text-shadow:1px 1px 1px rgba(255,255,255,0.7), 1px 0px 1px rgba(255,255,255,0.7), 1px -1px 1px rgba(255,255,255,0.7), -1px 1px 1px rgba(255,255,255,0.7), -1px 0px 1px rgba(255,255,255,0.7), -1px -1px 1px rgba(255,255,255,0.7), 0px -1px 1px rgba(255,255,255,0.7), 0px 1px 1px rgba(255,255,255,0.7); }

.galleryGroup .slick-slide .gitem a::before { box-sizing:border-box; content:""; display:block; width:0px; height:0px; position:absolute; left:0px; top:0px; border:3px solid transparent; border-radius:8px; z-index:3; }
.galleryGroup .slick-slide .gitem a::after { box-sizing:border-box; content:""; display:block; width:0px; height:0px; position:absolute; right:0px; bottom:0px; border:3px solid transparent; border-radius:8px; z-index:3;}
.galleryGroup .slick-slide .gitem a:hover::before { width:100%; height:100%;  
transition:
width 0.35s ease-out,
height 0.35s ease-out 0.35s; }

.galleryGroup .slick-slide .gitem a:hover::after { width:100%; height:100%;    transition:
width 0.35s ease-out,
height 0.35s ease-out 0.35s; }

.galleryGroup .slick-slide .gitem a:hover::before { border-top-color:#ffbf69; border-right-color:#ffbf69; }
.galleryGroup .slick-slide .gitem a:hover::after {  border-bottom-color:#ffbf69; border-left-color:#ffbf69; }




/*팝업버튼*/
.pop_call { position:absolute; left:0; top:580px; z-index:30; }
.pop_call a { overflow:hidden; display:block; width:230px; height:77px; box-sizing:border-box; border-radius:0 150px 150px 0; text-align:center; background:#04b2d9; box-shadow:2px 2px 6px rgba(0,0,0,0.15); line-height:26px; font-size:19px; color:#fff; font-family: 'CookieRun'; font-weight:600; padding:15px 46px 0 0; position:relative; }
.pop_call a span.eng { display:block; text-transform:uppercase; font-weight:400; font-size:17px; }

.pop_call a::before { content:""; display:block; width:65px; height:65px; border-radius:50%; background:#fff url(../images/main/pop_ic.png) center center no-repeat; position:absolute; right:8px; top:6px; }

.pop_call a:hover::before { -webkit-animation: jello-vertical 0.9s both;
	        animation: jello-vertical 0.9s both; }
@-webkit-keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-vertical {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  40% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  50% {
    -webkit-transform: scale3d(0.85, 1.15, 1);
            transform: scale3d(0.85, 1.15, 1);
  }
  65% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  75% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}



/*배너모음*/
#banner {margin:22px 0 0 0; height:100px;  float:none; position:relative; width:100%; box-sizing:border-box; border-top:1px solid #ddd; background:#fff; }

#banner h3 {float:left; padding:36px 0 0;}
#banner h3 a { display:inline-block; position:relative; font-size:24px; color:#010000; padding:0px 0px 0 0; font-family: 'CookieRun'; font-weight:600;}
#banner h3 a span { color:#04b2d9; }

.col_box h3 {  }
.col_box h3 a {  }


#banner .main_btn { position:absolute; right:0px; top:30px; }
#banner .main_btn:after { content:""; display:block; clear:both; }
#banner .main_btn li { float:left; width:38px; margin-left:10px; display:block; }
#banner .main_btn li a { display:block; width:100%; height:38px; border-radius:50%; box-sizing:border-box; text-indent:-999999px; border:1px solid #ddd; }
#banner .main_btn li.bbtn01 a { background:#fff url(../images/main/b_bt1.png) center center no-repeat; }
#banner .main_btn li.bbtn02 a { background:#fff url(../images/main/b_bt2.png) center center no-repeat; }
#banner .main_btn li.bbtn03 a { background:#fff url(../images/main/b_bt3.png) center center no-repeat; }
#banner .main_btn li.more a { background:#04b2d9 url(../images/main/b_more.png) center center no-repeat; border-color:#04b2d9; }


div#banner_scroll {position:absolute;left:122px; top:22px; width:950px; overflow:hidden;  }
div#banner_scroll #banner_content { width:100%;}
div#banner_scroll #banner_content .slick-slide { margin:0 8px 0px 0; width:182px; }
div#banner_scroll #banner_content .banitem {float:left; width:100%; height:55px; box-sizing:border-box; border:1px #ddd solid;}
div#banner_scroll #banner_content .banitem img {float:left;width:100%;height:53px; }




@media (max-width:1684px) and (min-width:1025px) {
/*팝업버튼*/
.pop_call { top:490px; }


}




/*/////////////////////////////////////////////////////////////////////////////////반응형/////////////////////////////////////////////////////////////////////////////////*/

@media all and (max-width:1024px) {

/*레이어 알람*/
#layerBell{width:94%; position:fixed; left:3%; padding:0 3%; }
#layerBell .lb_titlebox:before { display:none; }
#layerBell table.cStyle .Blick { display:inline-block; padding:0 5px; height:auto; line-height:24px; width:auto; }
#layerBell .lb_chk { display:inline-block; height:auto; margin:0 auto; line-height:24px;  padding:0 5px;}
#layerBell .today_close_box { width:100%; position:relative; background:#f5f5f5; margin-top:12px; text-align:center; }
#layerBell .today_close_box span { display:block; box-sizing:border-box; padding:0 5px 0 5px; width:calc(100% - 82px); }
#layerBell .today_close_box span:before {  margin:0 8px 0 0; top:3px; }
#layerBell .bell_close {position:absolute; right:0; bottom:0; }
#layerBell .bell_close a { display:block; vertical-align:top; text-align:center; width:82px; height:45px; line-height:45px; text-align:center; font-weight:500; color:#4e4e4e; background:#fae86c;  }
#layerBell .bell_close i { color:#fff !important; }


#container {width:100%; margin:20px auto 0; min-height:100%;}

/*메인비주얼*/
.visual_wrap { position:relative; margin:0 0 0 0px; width:100%; height:auto; overflow:hidden; background:#fff7ce url(../images/main/vi_bg1.png) no-repeat left bottom / 100%; transition:all 0.4s; box-sizing:border-box; padding:30px 0 0 40%; }
#wrap.all_ctype2 .visual_wrap { background:#d1eeff url(../images/main/vi_bg2.png) no-repeat left bottom / 100%; transition:all 0.4s;}
.visual_wrap .slick-list { right:-13px; }
.visual_wrap .vi_content { width:100%; margin:0 auto 0; max-width:1280px; }
.visual_wrap .vi_content > div { height:auto;  }
.visual_wrap img.imgdef { display:block; position:relative; float:right; width:100%; max-width:654px; margin:0 0 -10px 0; }

.visual_wrap .vi_txt { top:50px; padding:0 20px; }
.visual_wrap .vi_txt img { display:block; width:100%; max-width:500px; }

.visual_wrap .vi_pcont { padding:0 20px; }

/*박스 공통*/
.col_box{float:left; clear:both;  width:94%; margin:0 3% 20px 3% !important;}

/*팝업버튼*/
.pop_call { position:fixed; left:10px; top:inherit; bottom:10px; z-index:30; }
.pop_call a { overflow:hidden; display:block; width:auto; height:auto; box-sizing:border-box; border-radius:10px; text-align:center; line-height:22px; font-size:16px; color:#fff;  padding:10px; }
.pop_call a span.eng {  font-size:14px; margin-top:0px; }

.pop_call a::before { content:""; display:block; width:100%; height:45px; border-radius:10px; background:#fff url(../images/main/pop_ic.png) center center no-repeat; position:static; margin:0 auto 5px; }

.pop_call a:hover::before { -webkit-animation: jello-vertical 0.9s both;
	        animation: jello-vertical 0.9s both; }

/*학급홈페이지*/
.class {  height:auto; }
.class h3 { font-size:26px; height:auto; box-sizing:border-box; padding:20px 0 15px 0; }
.class #class_btn { padding:30px 12px 0 12px; background:url(../images/main/c_bg.png) no-repeat center bottom / cover; }
.class #class_btn li a { font-size:15px; }

#main_cont1 {
  padding: 0 0 0px 0;
  background: url(../images/main/gal_bg.png) center bottom no-repeat;
}



/*배너모음*/
#banner {margin:0px 0 0 0; height:auto;  float:left; position:relative; width:100%; box-sizing:border-box; padding:25px 0 20px; }
#banner .default_layout::before { display:none; }
#banner h3 { float:none; padding:0px 0 0 3%;}
#banner .main_btn { position:absolute; right:3%; top:-5px; }
 
div#banner_scroll {position:relative; left:inherit; top:inherit; width:97%; overflow:hidden; margin:20px 0 0 3%; }
div#banner_scroll ul#banner_content {position:absolute;left:0;top:0;width:100%;}
div#banner_scroll ul#banner_content li {float:left; margin:0 3% 0px 0; width:22%;  }
div#banner_scroll #banner_content .slick-slide { margin:0 15px 0px 0; }


}

@media all and (max-width:910px) {

.visual_wrap .vi_txt { top:50px; padding:0 20px; }
.visual_wrap .vi_txt img { display:block; width:100%; max-width:400px; }
}

@media all and (max-width:740px) {

/*배너모음*/
div#banner_scroll ul#banner_content li {float:left; margin:0 0 0px 3%; width:30%;  }

}


@media all and (max-width:675px) {

.visual_wrap .vi_txt { top:40px; padding:0 20px; }
.visual_wrap .vi_txt img { display:block; width:100%; max-width:300px; }
}

@media all and (max-width:600px) {

/*갤러리 img는 absolute로 날리고 썸네일을 background로 살리면 깨끗하게 쓸수 있습니다 common.js파일에 갤러리img추출 부분을 소스에 맞게 수정해주면됨*/
.galleryGroup{ margin:0px 0 0px 0px; width:94%; height:auto; float:right; background:none; }
.galleryGroup h3 {
  height: 69px;
}
.galleryGroup .main_btn { position:static; right:0; top:0px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
.galleryGroup .main_btn li { float:none; margin-left:10px; }

}

@media all and (max-width:550px) {

.visual_wrap .vi_pcont { padding:0 20px; bottom:10px; }
.visual_wrap .vi_pbox {
  padding: 6px 5px;
}
.visual_wrap .slick-dots li { margin:0 4px; }

/*배너모음*/
div#banner_scroll ul#banner_content li {float:left;  width:47%;  }

}

@media all and (max-width:510px) {
/*공지사항 type1*/
.noticeGroup{  height:350px;  padding:0 20px; }
.noticeGroup::before {  width:calc(100% - 40px); left:20px; top:68px; }
.noticeGroup h3 {float:left; padding:0px 5px 0 5px !important; width:50%; box-sizing:border-box; text-align:center; }
.noticeGroup h3.btn1 { background:none; }
.noticeGroup h3 a { display:inline-block; width:auto;  }

.noticeGroup div.tabcontent {position:absolute;left:0;top:105px;width:100%; display:none; height:auto; box-sizing:border-box; }
.noticeGroup div ul { margin:15px 20px 0;}

.noticeGroup div p.more {position:absolute; clear:both; right:20px; top:-21px; }


}


@media all and (max-width:478px) {

.visual_wrap .vi_txt { top:20px; padding:0 20px; }
.visual_wrap .vi_txt img { display:block; width:100%; max-width:200px; }
}



@media all and (max-width:420px) {
#layerBell ul:before { display:none; }
#layerBell ul li a {  padding:0 85px 0 0px;  }
#layerBell ul li a:before { display:none !important; }	
	
}