@charset "utf-8";
/* CSS Document */
/* com2zoa design KJh 24.06.17 */

/******** Common ********/
.mobile_bg {display: none; position: fixed; width: 100%; height: 100%;  left: 0; top: 0; background: #000; z-index:400}
.clear_fix::after{content: ""; display: block; clear: both}
.hide{display: none}
.hidden{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}

/* Layout */
#wrap {position: relative; width: 100%; min-width: 330px; font-weight: 500}
#content{position: relative}
.header_top {position: absolute; top:0; right:0; width:100%}
.header_top .qmu_mem a {display:block; font-weight:400}
.logo_top a {display: block}

.qmenu {display:flex; justify-content:flex-end; align-items: center}
.qmenu .qmu_btn {font-size:0; margin:0 2px}
.qmenu .qmu_btn a {display:block; width:26px; height:26px; border-radius:50% 50%}
.qmenu .qmu_btn.btn_search a {background:#ffbf6b url(../images/main/btn_srchmn.png) no-repeat 50% 50%}
.qmenu .qmu_btn.btn_all a {background:#ffa473 url(../images/main/btn_allmn.png) no-repeat  50% 50%}

/* Visual */
.visual {position:relative; overflow:hidden}
.visual .visual_wrap {position:relative}
.visual_wrap .slick-arrow {display:none !important}
.visual_wrap .slick-dots li button, .visual_wrap .btn_visual li button {border:none; background:none; font-size:0}
.visual_wrap .visual_item{display:block !important}
.visual_wrap .visual_item > a{position: relative; display:block !important}
.visual_wrap .visual_item > a:focus-visible{outline:2px solid #000}
.visual_wrap .visual_item span.vbg_txt{height:0; width:0; line-height:0; font-size:0;text-indent:-9999999px}
/*재생,일시정지*/
.visual_wrap .btn_visual{position: absolute; right:50%; top:142px; margin:0 -600px 0 0}
.visual_wrap .btn_visual li.blind{display:none}
.visual_wrap .btn_visual button{width:16px; height:16px; margin: 0 0 0 4px; cursor:pointer; border-radius:50%; box-sizing: border-box}
.visual_wrap .btn_visual button.vbtn_pause{background:url(../images/main/vbtn_play.png) 0 0 no-repeat}
.visual_wrap .btn_visual .vbtn02 button.vbtn_pause{background:url(../images/main/vbtn_pause.png) 0 0 no-repeat}
/*비주얼 이동 블릿*/
.visual_wrap .slick-dots {position: absolute; right:50%; top:144px; margin:0 -582px 0 0}
.visual_wrap .slick-dots li {display:block; float: left; margin: 0 5px 0 0; border-radius:50px; box-sizing: border-box}
.visual_wrap .slick-dots li button{display:block; width:11px; height:11px; border-radius:50px; cursor:pointer; box-sizing: border-box; box-shadow:0 1px 4px rgba(0, 0, 0, 0.2), inset -2px -1px 4px rgba(0, 0, 0, 0.1); border:3px solid #fff}
.visual_wrap .slick-dots li.slick-active button{display:block; width:35px; height: 11px; background:#fff; border:none; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), inset -2px -1px 3px rgba(0, 0, 0, 0.02)}

/* vquick */
.vquick_wrap ul li a {display:flex; flex-wrap: wrap; justify-content: center; flex-direction:column; text-align: center; line-height:130%; font-size:1.154em}
.vquick_wrap ul li a .vq_icon {display:block; width:70px; height:70px; padding-top:13px; margin:0 auto 5px;  box-sizing: border-box; border:2px solid #e5e5e5; border-radius:50% 50%}
.vquick_wrap ul li a .vq_icon img {margin:0 auto}
.vquick_list {position:relative; padding:14px 24px}
.vquick_list button.slick-arrow {position:absolute; top:50%; margin-top:-5px; width:12px; height:15px; font-size:0; }
.vquick_list button.slick-prev {left:8px; background:url(../images/main/btn_vquick_prev.gif) no-repeat  50% 50%}
.vquick_list button.slick-next {right:8px; background:url(../images/main/btn_vquick_next.gif) no-repeat  50% 50%}
.vquick_wrap ul li:hover a .vq_icon {border-color:#71b4ff; transition: .3s}   
.vquick_wrap ul li:hover a .vq_tit {transition: .3s; color:#3a8be5}

/* Poplayer */
/*팝업레이어 노출시 컨텐츠위로 가려져서 버튼클릭 안될시에는 .popup_on{display:none}/.popup_on.active {display:block} 주면됨 */
.main_openpop .pop_tit{font-size: 15px; color:#fff; font-weight: 400}
.main_openpop .popup_on.active {display:block}
.main_openpop .popup_layer_wrap {overflow: hidden; position: relative; width:268px; margin:0 auto}
.main_openpop button{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px; cursor: pointer}
.main_openpop .slick-prev,.main_openpop .slick-next {position: absolute; bottom:14px; width:28px; height:28px; /*z-index:100*/}
.main_openpop .slick-prev {left:0; background:url(../images/main/btn_pop_arr01.png) 0 0 no-repeat; z-index: 1}
.main_openpop .slick-next {right:0; background:url(../images/main/btn_pop_arr02.png) 0 0 no-repeat}
.main_openpop .popup_layer{position: relative; box-sizing: border-box}
.main_openpop .popup_imgsize {overflow:hidden; width:268px; height:235px; margin:0 auto; border-radius:15px;  background:#fff url(../images/main/no_popup.jpg) no-repeat 50% 50% ; box-shadow:0 0 5px rgba(0, 0, 0, 0.1)}
.main_openpop .popup_imgsize img {width:268px; height:235px; border-radius:10px}
.main_openpop .popup_layer .popup_tit {display:block; width:268px; margin:20px auto; box-sizing: border-box}
.main_openpop .popup_layer .popup_tit a {display:block; overflow:hidden; padding:0 36px; color:#000; font-size: 15px; font-weight:400; text-align: center; text-overflow:ellipsis; white-space:nowrap}
.qmu_popup a span{font-size:0}

/***************** Layout ******************/

/*Userquick*/
#quick02 {min-height:306px}
#quick02 .quick_box {display:none; overflow: hidden; position: absolute; top:0; left:0; width:100%;height:275px; margin:32px 0 0; padding:13px 10px; background:#fff; border-radius:10px; border:2px solid #ccc; box-sizing:border-box}
#quick02 .quick_box .quick_list {display:flex; flex-wrap:wrap; text-align: center; font-weight: 500; box-sizing: border-box}
#quick02 .quick_box .quick_list li {margin:5px auto 0}
#quick02 .quick_box .quick_list li a {display: block}
#quick02 .quick_box .quick_list .qmu_tit {line-height:120%}
#quick02 .quick_box .quick_list .qmu_icon {display:block; width:64px; height:64px; margin:4px auto; box-sizing: border-box; border-radius: 50%; text-align: center; background-color:#efefef; background-repeat: no-repeat; background-position:50% 50%}
#quick02 .quick_box .quick_list li:hover .qmu_icon {transition: .3s}
#quick02 .quick_box.qb01 .quick_list li:hover .qmu_icon {background-color:#ffcb4d}
#quick02 .quick_box.qb02 .quick_list li:hover .qmu_icon {background-color:#ff92b6}
#quick02 .quick_box.qb03 .quick_list li:hover .qmu_icon {background-color:#60b3f3}

#quick02 .quick_btns {display: flex; flex-wrap:wrap; justify-content: space-between; width:96%; margin:0 2%}
#quick02 .quick_btns li {width:calc(100% / 3); text-align: center}
#quick02 .quick_btns li a {line-height:130%; text-align: center}
#quick02 .quick_btns li.on .quick_box {display: block}
#quick02 .quick_btns li .qk {display:block; position: relative; height:32px; line-height:32px; flex-direction: column; margin:0 4px; box-sizing: border-box; font-size:14px; border-radius:10px 10px 0 0; color:#fff; z-index:1}
#quick02 .quick_btns li .qk01 {background:#ffcb4d}
#quick02 .quick_btns li .qk02 {background:#ff92b6}
#quick02 .quick_btns li .qk03 {background:#60b3f3}

#quick02 .quick_btns .btn:hover .qk, #quick02 .quick_btns .btn.on .qk {background:#fff}
#quick02 .quick_btns .btn:hover .qk01, #quick02 .quick_btns .btn.on .qk01  {color:#ffa54d}
#quick02 .quick_btns .btn:hover .qk02, #quick02 .quick_btns .btn.on .qk02  {color:#ff92b6}
#quick02 .quick_btns .btn:hover .qk03, #quick02 .quick_btns .btn.on .qk03  {color:#60b3f3}

.line_color01 #quick02 .quick_box {border-color:#ddf1ff}
.line_color02 #quick02 .quick_box {border-color:#ebfcc7}
.line_color03 #quick02 .quick_box {border-color:#ffeef4}
.line_color04 #quick02 .quick_box {border-color:#f3f3ff}
.qckbox {position:relative}
.qckbox.on {display: block; z-index:200}

/*학생*/
#quick02 .qb01 ul li span.qico1_v1{background-image:url(../images/main/useqm01_v1.png)}
#quick02 .qb01 ul li span.qico1_v2{background-image:url(../images/main/useqm01_v2.png)}
#quick02 .qb01 ul li span.qico1_v3{background-image:url(../images/main/useqm01_v3.png)}
#quick02 .qb01 ul li span.qico1_v4{background-image:url(../images/main/useqm01_v4.png)}
#quick02 .qb01 ul li span.qico1_v5{background-image:url(../images/main/useqm01_v5.png)}
#quick02 .qb01 ul li span.qico1_v6{background-image:url(../images/main/useqm01_v6.png)}
#quick02 .qb01 ul li:hover span.qico1_v1{background-image:url(../images/main/useqm01_v1_a.png)}
#quick02 .qb01 ul li:hover span.qico1_v2{background-image:url(../images/main/useqm01_v2_a.png)}
#quick02 .qb01 ul li:hover span.qico1_v3{background-image:url(../images/main/useqm01_v3_a.png)}
#quick02 .qb01 ul li:hover span.qico1_v4{background-image:url(../images/main/useqm01_v4_a.png)}
#quick02 .qb01 ul li:hover span.qico1_v5{background-image:url(../images/main/useqm01_v5_a.png)}
#quick02 .qb01 ul li:hover span.qico1_v6{background-image:url(../images/main/useqm01_v6_a.png)}
/*학부모*/
#quick02 .qb02 ul li span.qico2_v1{background-image:url(../images/main/useqm02_v1.png)}
#quick02 .qb02 ul li span.qico2_v2{background-image:url(../images/main/useqm02_v2.png)}
#quick02 .qb02 ul li span.qico2_v3{background-image:url(../images/main/useqm02_v3.png)}
#quick02 .qb02 ul li span.qico2_v4{background-image:url(../images/main/useqm02_v4.png)}
#quick02 .qb02 ul li span.qico2_v5{background-image:url(../images/main/useqm02_v5.png)}
#quick02 .qb02 ul li span.qico2_v6{background-image:url(../images/main/useqm02_v6.png)}
#quick02 .qb02 ul li:hover span.qico2_v1{background-image:url(../images/main/useqm02_v1_a.png)}
#quick02 .qb02 ul li:hover span.qico2_v2{background-image:url(../images/main/useqm02_v2_a.png)}
#quick02 .qb02 ul li:hover span.qico2_v3{background-image:url(../images/main/useqm02_v3_a.png)}
#quick02 .qb02 ul li:hover span.qico2_v4{background-image:url(../images/main/useqm02_v4_a.png)}
#quick02 .qb02 ul li:hover span.qico2_v5{background-image:url(../images/main/useqm02_v5_a.png)}
#quick02 .qb02 ul li:hover span.qico2_v6{background-image:url(../images/main/useqm02_v6_a.png)}
/*교직원*/
#quick02 .qb03 ul li span.qico3_v1{background-image:url(../images/main/useqm03_v1.png)}
#quick02 .qb03 ul li span.qico3_v2{background-image:url(../images/main/useqm03_v2.png)}
#quick02 .qb03 ul li span.qico3_v3{background-image:url(../images/main/useqm03_v3.png)}
#quick02 .qb03 ul li span.qico3_v4{background-image:url(../images/main/useqm03_v4.png)}
#quick02 .qb03 ul li span.qico3_v5{background-image:url(../images/main/useqm03_v5.png)}
#quick02 .qb03 ul li span.qico3_v6{background-image:url(../images/main/useqm03_v6.png)}
#quick02 .qb03 ul li:hover span.qico3_v1{background-image:url(../images/main/useqm03_v1_a.png)}
#quick02 .qb03 ul li:hover span.qico3_v2{background-image:url(../images/main/useqm03_v2_a.png)}
#quick02 .qb03 ul li:hover span.qico3_v3{background-image:url(../images/main/useqm03_v3_a.png)}
#quick02 .qb03 ul li:hover span.qico3_v4{background-image:url(../images/main/useqm03_v4_a.png)}
#quick02 .qb03 ul li:hover span.qico3_v5{background-image:url(../images/main/useqm03_v5_a.png)}
#quick02 .qb03 ul li:hover span.qico3_v6{background-image:url(../images/main/useqm03_v6_a.png)}


/* 팝업존 */
#main_popup {margin-top:20px}
.pop_wrap {overflow:hidden; position: relative; display:flex; justify-content:space-between; background:#fff; border-radius:15px; border:2px solid #fff}
.pop_topbox {position: relative; width:105px}
.pop_wrap .tit {padding:15px 0 ;text-align: center}
.pop_wrap .tit span {padding:6px 0 6px 26px; background:url(../images/main/bg_pop_mtit.gif) no-repeat 0 50%}
.pop_wrap .more {top:0; right:0; display:block; width:30px; height:30px; border-radius:0 0 0 30px; background:#fff}
#content .pop_wrap .more a {width:30px; height:30px; line-height:30px; margin-left:2px; text-align: center}
#content .pop_wrap .more:hover a {line-height:35px}
.pop_area {overflow: hidden; position: relative; width:100%; box-sizing: border-box; font-family:NSK}
.pop_wrap .pop_area {width:calc(100% - 110px); padding:16px 0}
.pop_wrap .pop_area .pop_tb {overflow: hidden; height:80px}
.pop_wrap .pop_list .poplst_txt {height:25px; background-image:url(../images/main/blt_poplst_off.png); background-repeat:no-repeat; background-position:left 50%}
.pop_wrap .pop_list .poplst_txt:hover {background-image:url(../images/main/blt_poplst_on.png); text-decoration: underline; transition: .3s}
.pop_wrap .pop_list .poplst_txt a {display:block; width:90%; height:25px; line-height:25px; padding-left:12px; color:#222; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop_wrap .pop_list .poplst_txt a:hover{font-weight:500; color:#000}
.pop_wrap .btn_slide {display:flex; position:absolute; bottom:0; left:0; width:105px; padding:5px 7px 6px;justify-content: space-between; align-items: center; background:#eee; border-radius:0 15px 0 0; box-sizing: border-box}
.pop_wrap .btn_slide li {width:calc(100% / 3)}
.pop_wrap .btn_slide li a {display:block; width:27px; height:27px; line-height:25px; margin:0 3px}
.pop_wrap .btn_slide li a img {vertical-align: middle}

.line_color01 .pop_wrap {border-color:#a6d9f9}
.line_color02 .pop_wrap {border-color:#c1eb91}
.line_color03 .pop_wrap {border-color:#ffb7cf}
.line_color04 .pop_wrap {border-color:#d2d1ff}
.line_color01 .pop_wrap .more {background:#a6d9f9}
.line_color02 .pop_wrap .more {background:#c1eb91}
.line_color03 .pop_wrap .more {background:#ffb7cf}
.line_color04 .pop_wrap .more {background:#d2d1ff}
.line_color01 .pop_wrap .btn_slide {background:#87c5eb}
.line_color02 .pop_wrap .btn_slide {background:#a5d66e}
.line_color03 .pop_wrap .btn_slide {background:#ff92b6}
.line_color04 .pop_wrap .btn_slide {background:#b0aefc}

/***Content  Common***/    
#content h3.tit {font-size:1.154em; font-weight:500}
.conline01 {margin:0 10px}
.conline02 {margin:0 10px}

#content h3.tit span {display:inline-block}
#content h3.tit img {vertical-align: middle}

/*더보기버튼 공통*/
#content .more{position: absolute}
#content .more a{display: block;  width:12px; height:12px; transition: all .3s}
#content .more img {transition: all .3s}
#content .more a:hover{transform: rotate(180deg)}

/* 공지사항 */
#main_notice {overflow:hidden; position: relative; margin:20px 0 0; border-radius:15px 15px 0 0; background: #fff}
.notice_box {position: relative; padding:1px 0 0} 
.notice_box::before{display: block; clear: both; content: ""; position: absolute; top:0; left:0; width: 100%; height:44px; border-radius:20px 20px 0 0; background: #71b4ff}
.notice_box h3 {position:absolute; top:6px; width:calc(100%/3 - 6px)}
.notice_box h3 a {display:block; width:98%; height:32px; line-height:32px; margin:0 auto; font-size:14px; font-weight:500; color:#fff; transition: all .3s; text-align: center; background-color:#6398d4; border-radius:50px; box-sizing: border-box}
.notice_box h3 a span{display:inline-block}
.notice_box .on a , .notice_box h3 a:hover {background-color:#fff}
.notice_box .on a span, .notice_box h3 a:hover span{display:inline-block; color:#000; transition:.3s}
.notice_box .noticetab01 {left:6px}
.notice_box .noticetab02 {left:calc(33.3% + 3px)}
.notice_box .noticetab03 {right:6px}
.notice_box h3 a {margin:0 2px}
.notice_box .notice_tb {overflow: hidden; height:184px; margin-top:43px}
.notice_box .notice_tb .more{display: none}
.notice_box .notice_tb ul {overflow:hidden; height:160px}
.notice_box .notice_tb li {position:relative; height:26px; line-height:190%; padding-left:14px; background:url(../images/main/blt_notilst_off.png) no-repeat 3px 50%}
.notice_box .notice_tb li a {color:#000}
.notice_box .notice_tb li:hover{background:url(../images/main/blt_notilst_on.png) no-repeat 3px 50%; font-weight:500; text-decoration: underline}
.notice_box ul li .tit {width:auto; margin:0}
.notice_box ul li .tit a {display:block; overflow:hidden; width:70%; text-overflow:ellipsis; white-space:nowrap; color:#111; font-weight:400; font-family:NSK}
.notice_box ul li .date {position:absolute; top:50%; right:4px; width:60px; height:24px; line-height:22px; margin-top:-12px; text-align:right; font-size:13px; color:#868686; font-family:NSK; font-weight:200; background:url(../images/main/blt_notice_date.gif) no-repeat 0 50%; font-size:14px}
.notice_box .notice_tb li:hover .date {background:url(../images/main/blt_notice_dateon.gif) no-repeat 0 50%; color:#000}
.notice_box .notice_tb li.first_list {position: relative; min-height:72px; padding:0 0 6px; background:none}
.notice_box .notice_tb li.first_list .tit a {width:70%; height:34px; line-height:32px; padding-left:76px; background:#fff url(../images/main/bg_notice_mtit.gif) no-repeat 8px bottom; color:#000; font-weight:500; font-family:CGC}
.notice_box .notice_tb li.first_list .txt {padding:5px 10px 5px 76px; background:#eee; border-radius:10px; font-family:NSK; font-weight:400}
.notice_box .notice_tb li.first_list .txt a {display:block; width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.notice_box .notice_tb li.first_list .date {position:absolute; top:0; left:5px; margin:0; border:2px solid #eee; border-top:0; border-radius:0 0 50px 50px; width:57px; height:60px; padding:28px 0 0; background:#fff url(../images/main/bg_notice_alim.gif) no-repeat 50% 6px; box-sizing: border-box; text-align: center; color:#000; font-weight:500; font-family:CGC}
#main_notice .noti_more {display:none}

/* 이달의 행사 */
#main_calendar {margin-top:20px}
.cal_wrap {position: relative; padding:0 7px 7px; background:#ffcf5d; border-radius:20px}
.cal_wrap .tit {padding:18px 5px 12px; color:#fff}
.cal_wrap .more {top:19px; left:98px}
.cal_wrap .cal_area {overflow: hidden; border-radius:0 0 15px 15px; background:#fff; box-sizing: border-box}
.cal_wrap .cal_tb {overflow: hidden; height:120px; box-sizing: border-box; padding:8px 10px; font-family:NSK}
.cal_wrap .cal_list .callst_txt {height:24px; font-weight:300; padding-left:10px; background:url(../images/main/blt_callst.gif) no-repeat 0 50%}
.cal_wrap .cal_list .callst_txt a {display:block; overflow:hidden; width:90%; text-overflow:ellipsis; white-space:nowrap; color:#393939}
.cal_wrap .cal_list .callst_txt span {display:inline-block; min-width:46px; height:24px; line-height:24px; font-weight:600; box-sizing: border-box; text-align: center}
.cal_toparea {display:flex; justify-content: space-between; align-items: center; position:absolute; top:15px; left:0; width:100%; height:34px; margin:0 auto; background:#fff; border-radius:50px 50px}
.cal_wrap .cal_list .callst_txt:hover a {text-decoration: underline; transition:.3s; color:#000}
.cal_wrap .btn_slide {position:absolute; top:14px; right:14px; display:flex; width:110px; margin:0 auto; justify-content: space-between; align-items: center}
.cal_wrap .btn_slide li {width:calc(100% / 3)}
.cal_wrap .btn_slide li a {display:block; width:34px; height:31px; line-height:29px; margin:0 auto; background:#fff; border-radius:50px 50px 0 0; text-align: center; border:2px solid #ffb852; border-bottom:0; box-sizing: border-box}
.cal_wrap .btn_slide li a img {vertical-align: middle}
.cal_year {display:block; margin:0 auto; padding:0; background:#ffb852; border-radius:5px 5px 0 0; padding:5px; text-align: center; color:#fff; font-weight:400; font-size:1.077em}
.cal_year span {font-size:1.429em; font-weight:600}

/* 오늘의 식단 */
#main_food {margin-top:20px}
.food_wrap {overflow:hidden; position: relative; padding:0 7px 7px; background:#ff92b6; border-radius:20px}
.food_wrap:before {content:""; display:block; position: absolute; bottom:0; left:0; width:100%; height:126px; background:#ffbed3}
.food_wrap .tit {padding:6px 0; color:#fff}
.food_wrap h3.tit span {padding:10px 0 10px 35px; background:url(../images/main/blt_food_tit.gif) no-repeat 5px 50%}
.food_wrap .more {top:16px; right:16px}
.food_area {overflow: hidden; position: relative; width:100%; padding:12px 9px 0;  box-sizing: border-box; font-size:1.077em; border-radius:15px; background:#fff; font-weight:300}
.food_txt {overflow:hidden; height:40px; line-height:130%; font-family:NSK; margin:0 10px 5px}
.food_date {display:block; margin:0 auto 12px; padding:8px; background:#fff; border-radius:50px; text-align: center; color:#333; font-size:1.077em; font-weight:400}
.food_date .fday_txt {padding-left:5px; font-weight:600; color:#65a22a}
.food_photo {overflow: hidden; width:154px; height:91px; border-radius:30px; border:1px solid #e0e0e0; background:#e0e0e0 url(../images/main/bg_food_img.gif) no-repeat 50% 50%; box-sizing: border-box; margin:0 auto 10px}
.food_photo a {display:block; width:154px; height:91px}
.food_photo a img {width:100%; height:100%}
.food_link a {display:flex; justify-content: space-between; align-items: center; padding:7px 14px 6px; background:#7dc85f; border-radius:20px 20px 0 0; color:#fff; font-weight:600}
.food_link a span {display:block; width:60px; height:26px; background:#fff url(../images/main/btn_food_view.gif) no-repeat 50% 50%; border-radius:50px; font-size:0}
.food_link:hover a {transition: .3s; background:#409f1a}

/* 앨범 */
#main_album {margin-top:20px}
.album_wrap {position: relative; min-height:240px}
.album_wrap .tit {margin-bottom:14px; text-align: center}
.album_wrap .tit span {padding-right:20px}
.album_wrap .more {top:5px; left:50%; margin-left:45px}
.album_wrap .photo_area {position: relative; height:200px}
.album_wrap .photo_area:before {content:""; display:block; position: absolute; bottom:0; left:0; width:100%; height:62px; background:#ededed; border-radius:30px 30px 10px 10px}
.album_wrap .photo_lst {padding:0 50px}
.album_wrap .photo_item {width:185px; margin: 0 auto; padding:0}
.album_wrap .photo_item .photo_box {width:185px; height:200px; margin:0 auto}
.album_wrap .photo_item .photo {position: relative; overflow: hidden; width:185px; height:154px; margin: 0 auto; border-radius:40px 40px 5px 5px; background:url(../images/main/bg_noimg.png) no-repeat 50% 50% #bdbdbd; box-shadow:1px 1px 3px rgba(0,0,0,0.15)}
.album_wrap .photo_item .photo img {width:185px; height:154px}
.album_wrap .photo_item .txt a {display:block; overflow: hidden; height:40px; line-height:40px;  margin:0 auto; font-size:1.077em; color:#000; font-weight:400; text-align:center; text-overflow:ellipsis; white-space:nowrap}
.album_wrap .photo_item .txt:hover a, .album_wrap .photo_item:hover .txt a{color:#000; text-decoration:underline}
.album_wrap .photo_item .photo a::after{content: ""; display: block; clear: both; position:absolute; left:0; bottom:100%; width:100%; height:100%; background:rgba(0,0,0,0.6) url(../images/main/bg_photo_view.png) no-repeat 50% 50%; transition:all .8s}
.album_wrap .photo_box:hover .photo a::after{bottom:0}
.album_wrap .photo_item .photo a:focus img,
.album_wrap .photo_item .photo a:active img{display:block; width:210px; height:180px; border:2px solid #000; box-sizing:border-box}
.photo_box02 {text-align: center}

.album_wrap .slick-arrow {position:absolute; bottom:10px; width:39px; height:39px; font-size:0}
.album_wrap button.slick-prev {left:8px; background:url(../images/main/btn_album_prev.png) no-repeat  50% 50%}
.album_wrap button.slick-next {right:8px; background:url(../images/main/btn_album_next.png) no-repeat  50% 50%}
.album_wrap .slick-dots li button {border:none; background:none; font-size:0}


/* class */
#main_class {margin-top:20px}
.class_wrap {overflow:hidden; position:relative; background:#fff; border-radius:20px 20px; border:2px solid #fdce5d}
.class_wrap .more {top:16px; right:15px}
.class_wrap .tit  {padding:9px 14px 10px}
.class_wrap .tit span {padding:5px 0 5px 30px; background:url(../images/main/blt_class_tit.png) no-repeat 0 50%}
.class_area {position:relative; height:90px; padding:0 12px}
.class_wrap .grade {position:relative; float:left; width:100%; box-sizing:border-box; padding:14px 30px; background:#a5d66e; border-radius:5px 5px 30px 30px}
.class_wrap .grade>li {float:left; width:16.6%}
.class_wrap .grade>li dt>a {display:block;  margin:0 auto; text-align:center; color:#fff; font-weight:500; font-size:1.077em; box-sizing: border-box; transition:ease-in-out .3s; border-radius:50%}
.class_wrap .grade>li dt>a span {display:inline-block; width:21px; height:21px; line-height:21px; border-radius:50% 50%}
.class_wrap .grade .on dt>a span {background:#fff; color:#000}
.class_wrap .grade_name {display:none; float:left}
.class_list {position:absolute; top:49px; left:0; width:100%; height:42px; padding:0; box-sizing:border-box; text-align: center}
.class_list>li {display:inline-block; margin:0 1px; font-weight:400}
.class_list>li a {display:block; padding:15px 8px}
.class_list>li:hover a {transition:ease-in .2s; color:#099173; font-weight:600; text-decoration: underline}

.kinder_wrap {position:relative; background:#fdce5d; padding:9px 8px 7px}
.kinder_wrap a {position:relative; display:flex; justify-content: space-between; align-items: center; padding:7px 10px; background:#fff; border-radius: 50px 50px; color:#fff; font-weight:400}
.kinder_wrap a:hover span {transition:.3s; background:#f882a8}
.kinder_wrap a span {display:block; width:54px; height:32px; line-height:28px; background:#93979c; border-radius:50px; text-align: center}
.kinder_wrap a span img {vertical-align:middle}


/* 배너 */
#main_banner {margin-top:20px; background:#e0e0e0}
.banner_wrap {position: relative; height:82px; box-sizing: border-box}
.banner_wrap .tit {display:inline-block; padding:15px 0 0 12px}
/*버튼*/
.banner_wrap .btns{position: absolute; left:10px; bottom:15px}
.banner_wrap .btns li {float: left}
.banner_wrap .btns li:nth-child(2){margin: 0 3px}
.banner_wrap .btns span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.banner_wrap .btns button{display: block; cursor: pointer; width:28px; height:28px; border-radius:50%; background-color: #fff; background-repeat: no-repeat;  background-position: center; transition: all .3s}
.banner_wrap .btns button:focus-visible{outline:2px solid #000}
.banner_wrap .btns button.ban_btn_prev{background-image:url(../images/main/btn_ban_prev.gif)}
.banner_wrap .btns button.ban_btn_stop{background-image:url(../images/main/btn_ban_stop.gif)}
.banner_wrap .btns button.ban_btn_next{background-image:url(../images/main/btn_ban_next.gif)}
.banner_wrap .ban_area{margin:-20px 0 0 125px}
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 193px; height:59px; margin: 0 auto; border-radius:10px; background:#b8b8b8 url(../images/main/no_banner.gif) no-repeat 50% 50%; border: 1px solid #e0e0e0; border-radius:10px; box-sizing: border-box}
.banner_wrap .ban_item img {margin: 0 auto; width:193px; height:59px; transition: all .5s}
.banner_wrap .ban_item:hover img{transform: scale(110%)}
/*배너_더보기*/
.banner_wrap .more{top:14px; left:85px}

/* 퀵메뉴 */
#quickmenu .btn_top {display: block}
#quickmenu .btn_top a {display:block; width:41px; height:52px; background:#93979c url(../images/main/btn_top_pc.png) no-repeat 50% 50%; border-radius: 50px 50px; font-size:0}

/* Footer */
#footwrap {background: #525c65}
#footwrap .add_telinfo {color:#fff; text-align:left}
#footwrap .add .address p.copy{color:#929ba3; margin-top:10px}
#footwrap .add .address {color:#fff; font-weight:300}
#footwrap .add_telinfo li {margin:4px 0}
#footwrap .ftit {display: inline-block; padding:0 10px; margin-right:4px; background:#71787e; border-radius:50px 50px; text-align: center}
#footwrap .fadmin {display:none}

/******** MOBILE LAYOUT ********/
@media only screen and (max-width:1024px) {
    .skip_navi .pc_skip{display:none}
    /*Mainheader */
    #mainheader {position: relative; z-index:100}
    .header_top .header_box{position: relative; height:46px}
    .logo_top a{display: block; position: absolute; top:5px; left:10px}
    .logo_top a img {width:130px}
    
    /* Mobile Menu */
    .qmenu {position:absolute; top:9px; right:9px}
    .qmenu .qmu_btn a {width:30px; height:30px}
    
    /* GNB */
    .mobile_bg{z-index: 500 !important}
    #gnb {display: none; position:fixed; top:0; right:0;  width: 250px; height:100%; min-height:100%; background:#fff; z-index:1000; overflow-y:auto; box-sizing:border-box}
    #gnb p.mb_gnbtit {display: block; padding:0 20px; height:47px; line-height:47px; background:#60b3f3; color:#fff; font-size:1.231em}
    #gnb p.mb_gnbtit img {vertical-align: middle}
    /*GNB_상단*/
    #gnb .allbtnclose .closebtn {display:block; position:absolute; top:8px; right:10px; width:31px; height: 31px; overflow: hidden; background: url(../images/main/btn_allmn_close.gif) no-repeat 50% 50%; line-height:0; text-indent:-9999px}
    /*GNB_메뉴버튼*/
    #gnb .mbl_area {padding:6px 10px; background:#fff; box-sizing: border-box}
    #gnb .mbl_area ul {display: flex; justify-content: space-between; align-items: center}
    #gnb .mbl_area li {width:48.5%; height: 29px; line-height:29px; border-radius:50px; background:#ededed; box-sizing: border-box}
    #gnb .mbl_area li a {display:block; color:#000; font-size: 13px; font-weight:400; text-align: center}
    #gnb .mbl_area li:hover a {color:#b47ef6}
    /*GNB_메뉴타이틀*/
    #gnb .gnb_list{padding:0 10px}
    #gnb .gnb_list .depth1 > h2{margin-bottom: 10px}
    #gnb .gnb_list .depth1 > h2 a{display:block; min-height:45px; border-radius:10px; font-size:15px; font-weight:500; padding:13px 48px 13px 15px; margin:0; width:auto; background:#efefef url(../images/main/bg_mn.png) no-repeat right top; color:#000; box-sizing: border-box}
    #gnb .gnb_list .depth1 > h2 a[target=_blank] span{display:inline-block; padding-right:15px}
    #gnb .gnb_list .act > h2 a {position: relative; background:#ffcb4d url(../images/main/bg_mn_a.png) no-repeat right top; color:#fff}
    /*GNB_메뉴세부*/
    #gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width:100%; padding:0; margin:10px auto; border-radius:10px; background:#fff; box-sizing: border-box}
    #gnb .gnb_list .depth1 .navi_sub ul > li {padding-left:15px; background-image:url(../images/main/bg_thirdmn.png); background-repeat:no-repeat; background-position:5px 12px; border-bottom: 1px solid #e0e0e0}
    #gnb .gnb_list .depth1 .navi_sub ul > li:last-child{border-bottom: none}
    #gnb .gnb_list .depth1 .navi_sub ul > li > a {line-height:130%; display:block; padding:8px 0; font-size: 14px; font-weight: 400}
    #gnb .gnb_list .depth1 .navi_sub ul > li > a[target=_blank] span{display:inline-block; padding-right:15px}
    #gnb .gnb_list .depth1 .navi_sub ul > li:hover{background-image:url(../images/main/bg_thirdmn_a.png)}
    #gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {color:#ff9800; font-weight:600}

    /* Visual */
    .visual .visual_wrap {position: relative;  margin: 0 auto}
    .visual .visual_item {position:relative; width:auto; height:292px; margin: 0 auto}
    .visual .visual_item > a {display: block; height:290px}
    .visual .item1 {background:url(../images/main/v_m_spring.jpg) no-repeat center top}
    .visual .item2 {background:url(../images/main/v_m_summer.jpg) no-repeat center top}
    .visual .item3 {background:url(../images/main/v_m_autumn.jpg) no-repeat center top}
    .visual .item4 {background:url(../images/main/v_m_winter.jpg) no-repeat center top}
    
	.visual_wrap .slick-dots {margin:0; top:146px; margin:0 -125px 0 0}
	.visual_wrap .btn_visual {margin:0; top:142px; margin:0 -142px 0 0}
	.visual_wrap .slick-dots li button {width:9px; height:9px}
	.visual_wrap .slick-dots li.slick-active button {width:30px; height:9px}

    /* conv_bg영역  */
    .conv_bgwrap {position:relative; padding:20px 10px; transition:all ease-in-out .3s}
    .conv_bgwrap:before {content:""; display:block; position: absolute; bottom:0; left:0; width:100%; height:60px}
    .line_color01 .conv_bgwrap {background:#ddf1ff}
    .line_color01 .conv_bgwrap:before {background:#a6d9f9}
    .line_color02 .conv_bgwrap {background:#ebfcc7}
    .line_color02 .conv_bgwrap:before {background:#c1eb91}
    .line_color03 .conv_bgwrap {background:#ffeef4}
    .line_color03 .conv_bgwrap:before {background:#ffb7cf}
    .line_color04 .conv_bgwrap {background:#f3f3ff}
    .line_color04 .conv_bgwrap:before {background:#d2d1ff}
    
    /* Vquick */
    .vquick_wrap ul {position:relative; flex-wrap: wrap}
    .vquick_wrap ul li a {position:relative; line-height:130%; font-size:1.077em}
    .vquick_wrap ul li a .vq_icon img {transform: scale(0.8)}
    
    /* quick02 */
    #quick02 .quick_box .qb_tit img {height:26px}
    #quick02 .quick_box .quick_list .qmu_icon {background-size:50% auto}
    
    /* Poplayer */
    .main_openpop .popup_open{display:none}
    .main_openpop{ position: absolute; top:47px; right:0; width: 100%}
    .main_openpop .popup_layer_wrap {width:220px; margin:10px auto}
    .main_openpop .popup_layer .popup_tit {width:220px; margin:13px auto}
    .main_openpop .popup_on{display:none; width: 100%; height:244px; margin: 0 auto; background:rgba(255,255,255,0.9); box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1); border:1px solid #f5f5f5; border-left:0; border-right:0}
    .main_openpop .popup_imgsize {width:220px; height:193px; background-size:222px auto}
    .main_openpop .popup_imgsize img {width:220px; height:193px}
    .main_openpop .slick-prev, .main_openpop .slick-next {bottom:7px}
    
    .qmu_popup a, .openact > a {position: absolute; top:9px; right:79px; width: 30px; height: 30px; border-radius: 50%; background: #fff; border:2px solid #ffcb4d; text-align: center; box-sizing: border-box; z-index: 1}
    .qmu_popup a{ background-image:url(../images/main/btn_pop_moff.png); background-position:50% 50%; background-repeat:no-repeat}
    .qmu_popup.openact > a {background-color:#ffcb4d; background-image:url(../images/main/btn_pop_mon.png)} 
    
    /* ==========컨텐츠========== */
    
    /* 공지사항 */
    #main_notice .noti_more {display:block}
    #main_notice .noti_more a {display:block; padding:5px 10px; border-radius:50px; border:1px solid #e1e1e1; text-align:center; color:#5b5b5b; font-size:12px}
    
    /* 앨범 */
    .album_wrap .tit img {height:24px}
    
    /* 학급홈페이지 */
    .class_elemen {min-height:92px}
    .class_etc a {background-size:28px auto}
    
    /* 배너영역 */
    .banner_wrap .more {top:17px; left:85px}
    .banner_wrap .ban_area {margin:-18px 0 0 110px}
    .banner_wrap .ban_item a {width:173px; height:53px}
    .banner_wrap .ban_item img {width:173px; height:53px}
    
    #quickmenu {display:none}
    #quickmenu .btn_top {display:none}

    /* Footer */
    #footwrap{padding:0 10px 20px }
    #footwrap .foot_menu .foot_mlst{position: relative}
    #footwrap .foot_menu .mb_menu {position: relative; margin:0 auto 10px; text-align: center; background:#fff; border-radius:0 0 15px 15px}
    #footwrap .foot_menu .mb_menu li {display: inline-block; padding:0 6px 0 12px; margin:0; height:46px; line-height:46px; background:url(../images/main/bg_foot_bar.gif) no-repeat left center}
    #footwrap .foot_menu .mb_menu li:first-child {background:none}
    #footwrap .foot_menu .mb_menu li a {display:block; font-size: 13px; font-weight: 400}
    /*PC버튼*/
    #footwrap .pc_menu {margin: 0 0 15px; border-radius:10px; text-align:center; background: none; font-size: 13px; font-weight: 400; color:#fff; border:1px solid rgba(255,255,255,0.4)} 
    #footwrap .pc_menu li a {display: block; padding:10px 0; color:#fff; font-weight:400}
    #footwrap .pc_menu li.li_1{float: left; display:block; width:50%}
    #footwrap .pc_menu li.li_1 a {border-right:1px solid rgba(255,255,255,0.4)}
    #footwrap .pc_menu li.li_3 {float: right; display:block; width:50%}
    #footwrap .pc_menu li.li_3 a {color:#8eccff}
    #footwrap .pc_menu li.li_4 {float: left; display:block; width: 100%}
    #footwrap .pc_menu li.li_4 a {padding:10px 0; border-top:1px solid rgba(255,255,255,0.4)}
    #footwrap .pc_menu li.li_2, #footwrap .foot_menu .pc_menu  li.li_5{display: none}
    #footwrap .add_telinfo {max-width:280px; margin:0 auto; text-align: center}
    /*주소*/
    #footwrap .add .address{width:auto; line-height:160%; text-align: center; font-size: 13px; color:#fff}
    #footwrap .add .address span.add_txt{display: block; margin-bottom: 10px}
    #footwrap .address br{display: none}
    #footwrap .add .address p.copy{padding:10px 50px 20px; line-height: 130%; font-weight: 400; font-size: 12px}
    #footwrap .count_box{display:none}
    .foot_logo {text-align: center}

    /********************************************* Layout **********************************************/

    /***Content  Common***/   
    .mb_none{display: none}
    

}

/******** PC LAYOUT ********/
@media only screen and (min-width:1025px) {
    .skip_navi .mb_skip{display:none}
    #wrap {min-width:1380px}
    .btn_top_pc{position: absolute; top:35px; right:50%; margin-right: -670px}

    /* Mainheader */
    .headerwrap {position: relative; width: 100%; height: 122px; margin: 0 auto}
    .logo_top {position:absolute; top:10px; left:0} 
    .top_btn_area {position:absolute; top:11px; right:0} 
    .header_top{position: relative; width: 1200px; margin: 0 auto; padding-top:50px}
    .header_top .qmenu {min-width:200px; padding:0 5px; background:#f5f5f5; border-radius:50px 50px; box-sizing: border-box}
    .header_top .qmu_mem a {padding:11px 3px; margin:0 5px; font-size:1.077em}


    /* GNB */
    #gnb .allbtnclose, #gnb .mbl_area, #gnb .navi_sub {display: none}
    #gnb .mb_gnbtit, #gnb p.gnb_mbtxt{display: none}
    #gnb .depth1 {position: relative; float: left; width: 12.5%; padding:27px 0; text-align: center; z-index:1000; text-align: center; font-weight:400}
    #gnb .depth1 h2 a{display: inline; text-align: center; font-size:18px; color: #000; font-weight:500}
    #gnb .depth1.active h2 a {color:#2a93f5}
    #gnb .navi_sub {position: absolute; left:50%; top:60px; width:200px; margin-left:-100px; padding:5px 7px; border-radius:5px 5px 25px 25px; box-shadow:1px 1px 3px rgba(0,0,0,0.2); border:2px solid #3ab6ff; background: #fff; box-sizing: border-box}
    #gnb .navi_sub li{border-bottom: 1px solid #d2d2d2}
    #gnb .navi_sub li:last-child {border-bottom:none}
    #gnb .navi_sub a{display: block; line-height: 130%; padding: 6px 3px; margin:4px 0; text-align: center; font-size:1.077em; font-weight:500; letter-spacing:-0.3px; word-break:keep-all}
    #gnb .navi_sub li:hover a, #gnb .depth1.active .navi_sub .depth2 > li.active a {font-weight:500; background:#eee; border-radius:10px; transition:.3s; color:#000}
    #gnb .navi_sub li:last-child a{border:none}
    #gnb .depth1.active .navi_sub {display: block; z-index: 30}
    #gnb .depth1.active .navi_sub li:hover a {transition:.3s}


    /* Visual */ 
    .visual{margin-bottom: 0}
    .visual .visual_wrap {width: 100%; margin: 0 auto}
    .visual .visual_item{display: block; width:100%; height:695px}
    .visual .visual_item > a {display: block; height:695px}
    .visual .item1 a:focus-visible{height:693px; outline:2px solid #000}
    .visual .item1 {background:url(../images/main/v_pc_spring.jpg) no-repeat center top}
    .visual .item2 {background:url(../images/main/v_pc_summer.jpg) no-repeat center top}
    .visual .item3 {background:url(../images/main/v_pc_autumn.jpg) no-repeat center top}
    .visual .item4 {background:url(../images/main/v_pc_winter.jpg) no-repeat center top}
    .visual_wrap .slick-dots {top:284px; margin:0 -530px 0 0}
    .visual_wrap .btn_visual {top:281px; margin:0 -548px 0 0}
    
    /*vquick */
    .vquick_wrap ul li a .vq_icon {width:89px; height:89px; padding-top:21px; margin:0 auto 8px}
    .vquick_list li a:hover .vq_icon img,
    .vquick_list li a:focus .vq_icon img {animation:effect 2s ease infinite}
    
    /* Poplayer */
    .main_openpop {position: relative}
    .main_openpop .popup_on {display:none; position: absolute; top:-320px; left:10px; width:294px; height:303px}
    .main_openpop .popup_layer_wrap {width:294px; height:303px; padding:13px 12px; background:rgba(255,255,255,0.75); border-radius:30px; box-sizing: border-box; box-shadow:2px 0 3px rgba(0,0,0,0.1)}
    .main_openpop .popup_open a{display:block; position: absolute; top:-390px; left:0; width:125px; height:56px; background:#ffcb4d; border:2px solid #ffcb4d; border-left:0; ; border-radius:0 50px 50px 0; box-sizing: border-box; color:#fff; text-align: center; font-size:15px; z-index:10}
    .main_openpop .popup_open a span {display:inline-block; padding:18px 20px 18px 35px; background:url(../images/main/blt_popupopen.png) no-repeat 5% 50%}
    .main_openpop .popup_open.openact > a {background:#ffcb4d; border-color:#fff}

    /********************************************* Layout **********************************************/
    .conv_bgwrap {position: absolute; top:122px; left:50%; width:375px; margin:0 0 0 -600px}
    
    /* vquick  */
    .vquick_wrap {width:1200px; margin:-164px auto 0}
    .vquick_wrap .vquick_area {width:810px; margin:0 0 0 auto}
    
    /* quick02 */
    #quick02 {min-height:407px}
    #quick02 .quick_btns {flex-direction:column}
    #quick02 .quick_btns li.btn {width:60px; margin:8px 0 0 -64px}
    #quick02 .quick_btns li .qk {width:60px; height:60px; margin:0; line-height:58px; border-radius:60px 0 0 60px; text-align: center; font-size:1.154em; font-weight:600}
    #quick02 .quick_btns li .qk span {padding-left:6px}
    #quick02 .quick_box {width:375px; height:407px; padding:30px; margin:0; border-radius:40px}
    #quick02 .quick_btns li .qk01 {margin-top:30px}
    #quick02 .quick_box {border-width:3px}
    #quick02 .quick_box .quick_list .qmu_icon {width:84px; height:84px; margin:10px auto}
    #quick02 .quick_box .quick_list .qmu_tit {font-size:1.077em}
    #quick02 .quick_box .quick_list li {margin:18px auto 0; min-height: 137px}

    /***Content  Common***/   
    .pc_none{display:none}
    .content_area{position: relative}
    .conline {position: relative}
    .conline01 {width:1200px; margin:30px auto 0; height:242px}
    .conline02 {position:relative; width:1200px; margin:50px auto 58px; height:251px}
    .conline02 .conbox_wrap {position:absolute; top:0; right:0; display: flex; justify-content: space-between; width:810px; padding:0}
    #content h3.tit {font-size:1.231em}
    
    /* popup */
    #main_popup {margin-top:18px}
    .pop_wrap {border-radius:40px; border-width:3px}
    .pop_topbox {width:134px}
    .pop_wrap .btn_slide {width:134px; padding:8px 17px; border-radius:0 100px 0 0}
    .pop_wrap .tit {padding:9px 0}
    .pop_wrap .tit span {padding:42px 0 5px; background:url(../images/main/bg_pop_tit.gif) no-repeat 50% 0}
    .pop_wrap .pop_area {width:calc(100% - 134px); padding:20px 0}
    .pop_wrap .pop_list .poplst_txt a {font-size:1.077em}
    .pop_wrap .more {width:54px; height:38px; border-radius:0 0 0 100px}
    #content .pop_wrap .more a {width:54px; height:38px; line-height:38px; border-radius:0 0 0 100px}
    
    /* 공지사항 */
    #main_notice {position:absolute; top:0; right:0; width:810px; margin:0}
    .notice_box::before {height:54px; border-radius:40px 40px 0 0}
    .notice_box {border-bottom:1px solid #e1e1e1; padding:1px 10px 0}
    .notice_box .noticetab01 {left:16px}
    .notice_box .noticetab02 {left:192px}
    .notice_box .noticetab03 {left:370px}
    .notice_box h3 {top:8px; width:166px}
    .notice_box h3 a {width:166px; height:38px; line-height:38px; font-size:15px}
    #main_notice .noti_more {display:block; position: absolute; top:8px; right:17px}
    #main_notice .noti_more a {display:block; width:38px; height:38px; background:#fff url(../images/main/btn_more_b.png) no-repeat 50% 50%; border-radius:50%; font-size:0}
    .notice_box .notice_tb {margin-top:53px; height:187px}
    .notice_box .notice_tb li.first_list {min-height:84px; background:none; margin-bottom:6px; padding:0}
    .notice_box .notice_tb li.first_list .tit a {width:70%; height:38px; line-height:36px; padding:0 0 0 110px; font-size:14px; background-position:12px 50%}
    .notice_box .notice_tb li {height:29px; line-height:29px; margin:0; padding:0}
    .notice_box .notice_tb li a {font-size:14px}
    .notice_box ul li .tit a {padding-left:15px}
    .notice_box .notice_tb ul {margin-bottom:0; height:180px; background:none; border-radius:0}
    .notice_box .notice_tb li.first_list .date {left:15px; width:72px; height:78px; padding:42px 0 0; background-position:50% 12px; font-size:13px}
    .notice_box .notice_tb li.first_list .txt {padding:7px 10px 7px 110px}

    /* 이달의 행사 */
    #main_calendar {width:375px; margin:0}
    .cal_wrap {border-radius:40px}
    .cal_wrap .tit {padding:22px 13px 15px}
    .cal_wrap .cal_area {border-radius:0 0 35px 35px}
    .cal_wrap .cal_tb {height:140px; padding:12px 18px; font-size:1.077em}
    .cal_wrap .cal_list .callst_txt {height:28px; padding-left:8px}
    .cal_wrap .cal_list .callst_txt span {min-width:52px}
    .cal_wrap .more {top:22px; left:110px}
    .cal_year {height:42px; padding:10px; font-size:1.231em; box-sizing: border-box}
    .cal_wrap .btn_slide  {top:19px; right:20px; width:135px}
    .cal_wrap .btn_slide li a {width:39px; height:34px; line-height:30px}
    
    /* 오늘의 식단 */
    #main_food {width:375px; margin:0}
    .food_wrap {margin: 0; border-radius:40px}
    .food_area {padding:12px 12px 0; border-radius:35px}
    .food_areabox {display:flex; justify-content: space-between}
    .food_box {min-height:124px; padding:20px 18px; text-align: left; background-position:left 50% top 60px}
    .food_txt {width:calc(100% - 154px); height:80px; margin:7px 12px; line-height:140%}
    .food_wrap .tit {padding:12px 10px 4px}
    .food_wrap .more {top:20px; right:20px}
    .food_date {margin-bottom:9px}
    .food_link a {padding:8px 16px 6px}
        
    /* 앨범 */
    #main_album {width:554px; margin:0}
    .album_wrap .tit {margin-bottom:20px}
    .album_wrap .more {top:7px; margin-left:64px}
    .album_wrap .photo_item .txt a {height:44px; line-height:44px}
    
    /* class */
    #main_class {width:234px; margin:0; padding-right:0}
    .class_wrap {border-radius:40px}
    .class_wrap .tit {padding:19px 12px}
    .class_wrap .more {top:22px; right:18px}
    .class_wrap .grade {padding:17px 12px}
    .class_list {top:55px}
    .class_list>li a {padding:21px 8px}
    .class_area {height:110px}
    .kinder_wrap {padding:11px 15px 10px}
    .kinder_wrap a span {height:38px; line-height:36px}

    /* Banner */
    #main_banner {margin:0}
    .banner_wrap {width:1200px; margin:0 auto}
    .banner_wrap .tit {padding:15px 0 0}
    .banner_wrap .btns {left:0; bottom:12px}
    .banner_wrap .btns button {width:31px; height:31px}
    .banner_wrap .btns li:nth-child(2) {margin:0 5px}
    .banner_wrap .more {top:15px}
    
    /* 퀵메뉴 */
    #quickmenu {position:absolute; top:-90px; left:50%; margin-left:625px;  z-index:1}

    /* Footer */
    #footwrap .foot_area {position:relative; width:1200px; margin:0 auto }
    #footwrap .mb_menu {display:none}
    #footwrap .pc_menu {height:56px; box-sizing: border-box; background:#fff; border-radius: 0 0 20px 20px}
    #footwrap .pc_menu:after {content:""; clear:both; display:block; height:0}
    #footwrap .pc_menu li {float:left; height:56px; line-height:56px; padding: 0 17px; background:url(../images/main/bg_foot_bar.gif) left center no-repeat; text-align: center}
    #footwrap .pc_menu li:first-child {background: none; padding-left:25px}
    #footwrap .pc_menu li a {font-size:14px; color:#535353; font-weight:400}
    #footwrap .pc_menu li.li_3 a{font-weight:500; color: #0a8af5}
    #footwrap .pc_menu li a:hover{font-weight:600}
    #footwrap .add_area {position: relative; width: 1200px; margin: 0 auto; box-sizing: border-box}
    #footwrap .add .address {padding:30px 0 30px 180px; font-size: 14px; line-height: 150%; text-align: left; font-weight:300}
    #footwrap .add .address p.copy {margin-top:15px; font-size: 13px; letter-spacing:1px}
    #footwrap .ftit {font-weight:500}
    #footwrap .add_area .add br{display: none}
    
    /* Footer_count */ 
    #footwrap .count_box{display:block; overflow: hidden; position: absolute; top:11px; right:10px; width: 335px; box-sizing: border-box; border:2px solid #e0e0e0; border-radius:10px}
    #footwrap .count_box ul {display:flex; justify-content:space-between}
    #footwrap .count_box ul li {width:calc(100% / 2); height:31px; line-height:29px; font-size:14px; font-weight: 400; box-sizing: border-box; display: flex; justify-content: space-between;  box-sizing: border-box}
    #footwrap .count_box ul li .num{display: inline-block; width:calc(100% - 68px); margin:0 10px; text-align:right; font-weight:400}
    .add_telinfo {display: flex; justify-content: flex-start; flex-wrap:wrap}
    #footwrap .add_telinfo li {margin:5px 12px 3px 0}
    #footwrap .count_box ul li.total {background:#e0e0e0}
    #footwrap .count_box ul li .tit {width:68px; border-radius:50px 50px; text-align: center}
    #footwrap .count_box ul li.today .num {color:#ff552e}
    
    /*Admin*/
    #footwrap .pc_menu li.fadmin {display: block; background:none}
    #footwrap .pc_menu li.fadmin a {display: block; width:78px; height:30px; line-height:30px; padding:0 0 0 20px; margin:13px 0; border-radius:50px; background:#525c65 url(../images/main/btn_admin.png) no-repeat 8px 50%; color: #fff; font-size: 13px; font-weight: 400; box-sizing: border-box; transition: all .3s}
    #footwrap .pc_menu li.fadmin a span{margin-left: 40px}
    #footwrap .pc_menu li.fadmin a:hover {background-color:#2c3742; border-color:#2c3742; color: #fff}
    /*FootLogo*/
    #footwrap .foot_logo {position: absolute; top:25px; left:0}
    
}

/**** LOWSET FIX ****/
@media only screen and (min-width:1025px) and (max-width:1299px) {
#mainheader{position: relative; margin: 0 auto}
#mainheader .headerwrap{position: absolute; top:0; left:0}
}

@media only screen and (min-width:1300px) {
/* Menu FIX */
.top_bar_fix{position:absolute; top:0; left:0; width:100%; z-index:1000; transition: 0.6s}
.fixed {position:fixed; top:0; left:0; width:100%; height: 100px; padding-left:0; margin-top:-36px; background:rgba(255,255,255,0.9); box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap {background:none; height:auto}
.fixed .header_top {padding-top: 37px}
.fixed .logo_top, .fixed .qmenu{display: none}
.fixed #gnb .depth1 {padding: 23px 0}
.fixed ul.gnb_list{margin:0 auto; padding: 0}
.fixed #gnb .navi_sub {top:60px}
}

/********* TABLET LAYOUT[중간사이즈 조정관련] *********/

@media only screen and (min-width:1025px) and (max-width:1316px) {
/* Topquick */
#main_topquick{right:0}
.topquick_wrap .vquick_list{margin: 0 25px}
    
    /* 팝업 위치 
    .main_openpop .popup_open a {top:-513px}
    .main_openpop .popup_on {top:-455px}*/
    
}
/********* TABLET LAYOUT[중간사이즈 조정 끝] *********/

@media only screen and (max-width:820px) {
.address .telnumbox{text-align: left}
.address .telnumbox{width: 250px; margin: 0 auto}
.address .telnumbox li{margin-bottom: 3px}
}

@media only screen and (max-width:580px) {
.food_link a {font-size:13px}
/* footer */
.address dl.add_num dd li{display:block; padding:0; background:none}
}


/**** keyframe ****/

@keyframes effect{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-5px)}
}
@keyframes effect2 {
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-3px)}
}