@charset "utf-8";
/* CSS Document */
/* com2zoa design KEJ, publishing KJH 2025.08.06 */
/* ※아래 적용된 스타일은 기본레이아웃 구성이므로 각 학교에 맞게 전반적 수정해야함 */

/* 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: 320px; font-weight:500}
#content{position: relative}
#content h3.tit {font-size:1.308em; font-weight:500; }
#content h3.tit span {font-weight:600}

/*더보기버튼 공통*/
#content .btn_more {position: absolute}
#content .btn_more a {display: block;  width:40px; height:24px; line-height:25px; background:#d9d9d9; border-radius:50px; text-align: center; transition: all .3s}
#content .btn_more img {width:12px; height:12px; transition: all .3s; vertical-align: middle}
#content .btn_more a:hover img {transform: rotate(180deg)}
#content .btn_more:hover a {background:#44a9cf; transition:.3s}

.header_top .logo{position: absolute; top:65px; left:0}
.header_top .logo a{display: block}
.top_btn_area{position: absolute; top:10px; right:0; display:flex; align-items: center; gap:12px}
.qmenu {display:flex; justify-content:flex-end; align-items: center}
.qmenu > p a {display:block}
.qmenu > p a span{display:block; text-align:center; color:#6d6d6d} 
.top_btn_area .qmu_popup a {display:block; height:26px; line-height:30px; padding:0 36px 0 12px; border-radius:50px; background:#ffd33b url(../images/main/btn_qmn_pop.png) no-repeat right 8px top 50%; color:#fff; font-weight:600}

/* 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}
.vm_charct {display:none}

/*재생,일시정지*/
.visual_wrap .btn_visual {position: absolute; top:245px; left:48px}
.visual_wrap .btn_visual button{width:10px; height:11px; margin: 0 0 0 4px; cursor:pointer; box-sizing: border-box}
.visual_wrap .btn_visual button.vbtn_play{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; top:245px; left:10px}
.visual_wrap .slick-dots li {display:block; float: left; margin: 0 3px 0 0; box-sizing: border-box}
.visual_wrap .slick-dots li button{width: 14px; height:10px; background: #cecece; border-radius:50px; border:2px solid #cececf; box-sizing: border-box}
.visual_wrap .slick-dots li.slick-active button{width:20px; background: #fff}

/* 레이어 팝업 */
.mpop_top {display:flex; width:595px; margin:0 auto 25px; align-items: center; justify-content: space-between}
.mpop_tit {font-size:28px; font-weight:600; color:#fff}
.mpop_tit span {padding:3px 0 0 40px; background:url(../images/main/blt_mpop_tit.png) no-repeat 0 50%}
.mpop_bg {position: fixed; top: 0;left: 0; width: 100%;height: 100%; background-color: #000; opacity: 0.5; z-index:110}
.mpopup_box {display:none}
.mpopup_box.on {display:block}
.mpop_lstwrap {position:fixed; top:200px; left:50%; margin-left:-355px; z-index:111}
.mpop_lstwrap .mpop_tb {width:715px} /* 595px + padding 0 60px 더한값 */
.mpop_list {position:relative; padding:0 60px}
.mpop_layer a {display: block; overflow: hidden; width:595px; height:342px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); border-radius:30px}
.mpop_layer img {width:595px; height:342px}
.mpop_lstwrap .slick-arrow {position: absolute; top:50%; width:49px; height:49px; margin-top:-25px; font-size:0}
.mpop_lstwrap .slick-prev {left:0; background:url(../images/main/btn_mpop_prev.png) no-repeat 50% 50%}
.mpop_lstwrap .slick-next {right:0; background:url(../images/main/btn_mpop_next.png) no-repeat 50% 50%}
.mpop_lstwrap .btn_slide {display: flex; justify-content:center; align-items: center; margin:10px 0}
.mpop_lstwrap .btn_slide li a {display:block; padding:12px 22px; border-radius:50px; text-align: center; background:rgba(255,255,255,0.35); color:#fff; margin-left:5px; font-size:1.231em; box-sizing: border-box}
.mpop_lstwrap .btn_slide li a span {display:inline-block}
.btn_mpop {position:absolute; top:760px; right:280px}
.btn_mpop .btn_mpoptit:after {content:""; display:block; position:absolute; top:-6px; left:-6px; width:96px; height:96px; border:1px solid rgba(255,255,255,0.7); border-radius:50%; animation:rotate2 2s linear infinite; z-index:0; box-shadow:0 4px 5px rgba(0,0,0,0.1)}
.btn_mpop .btn_mpoptit:before {content:""; display:block; position:absolute; top:0; left:0; width:86px; height:86px; border-radius:50%; background:rgba(255,255,255,0.5); animation:rotate 20s linear infinite; z-index:0}
.btn_mpop .btn_mpoptit a {position:relative; display:block; width:70px; height:70px; margin:8px; line-height:120%; padding:18px 0; background:linear-gradient(90deg, #1d8ce7, #5a5ab4); border-radius:50%; text-align: center; color:#fff; font-size:1.154em; box-sizing: border-box; z-index:1}
.btn_mpop .btn_mpoptit a span {display: block; color:#fffaa1}

.mpop_right {display: flex; gap:20px}
.btn_poptoday a {display:block; line-height:42px; padding:0 20px; background:rgba(255,255,255,0.4); text-align: center; color:#fff; font-size:17px; border-radius:50px; text-shadow:1px 1px 5px rgba(0,0,0,0.4)}
.btn_popclose a {display:block; line-height:42px; padding:0 25px; background:rgba(255,255,255,0.4); border-radius:50px}
.btn_popclose a img {vertical-align: middle}

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

/***Content  Common***/    
.content03 {border:2px solid #ebebeb; border-left:0; border-right:0}
.content04 {background:#f4f4f4}

 /*Notice*/
#main_notice {margin-bottom:18px}
.notice_top {display: flex; align-items:flex-end; padding:12px 0}
.notice_top .noti_toptit {font-size:1.231em}
.notice_top .noti_toptit span {font-weight:600; font-size:1.125em}
.notice_top .noti_toptxt {padding-left:10px; font-size:0.923em; font-weight:500; color:#878787}

.notice_wrap {position: relative}
.notice_box {padding-top:46px; background:url(../images/main/blt_noticetit.png) no-repeat 0 7px}
.notice_box h3 {position:absolute; top:0}
.notice_box h3 a {display:block; width:100%; height:45px; line-height:47px; margin:0 auto; font-size:1.231em; font-weight:500; color:#353535; transition: all .3s; text-align: center}
.notice_box h3 a span{display:inline-block}
.notice_box .on a, .notice_box h3 a:hover {background:url(../images/main/blt_noti_arr.png) no-repeat 50% 0}
.notice_box .on a, .notice_box h3:hover a {display:inline-block; color: #2f8fb3; font-weight:600; transition:.3s}
.notice_box .noticetab01 {left:46px; width:90px}
.notice_box .noticetab02 {left:136px; width:100px}
.notice_box .notice_tb {overflow: hidden; height:194px; border-bottom:2px solid #e7e7e7}
.notice_box .notice_tb ul {overflow:hidden; height:180px}
.notice_box .notice_tb li {position:relative; height:26px; line-height: 210%; padding-left:14px; margin-left:6px}
.notice_box .notice_tb li:before {content:""; display: block; position: absolute; top:10px; left:0; width:5px; height:5px; background:#6e6e6e; transform: rotate(45deg)}
.notice_box .notice_tb li:hover:before {background:#45aacf}
.notice_box .notice_tb li:hover{text-decoration: underline}
.notice_tb .ncate {display:none}
.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:#262626; font-weight:500}
.notice_box ul li .tit a img {vertical-align:middle}
.notice_box ul li .txt {display: none}
.notice_box ul li .date {position:absolute; top:50%; right:10px; width:70px; height:20px; line-height:22px; margin-top:-10px; text-align:right; font-size:12px; color:#939393; padding-left:15px; background: url(../images/main/blt_noti_date.png) no-repeat 0 50%}
.notice_box .btn_more {display: block; top:10px; right:0}
.notice_box .btn_more:hover a {background:#44a9cf}

/* 첫번째 공지사항 */
.notice_box .notice_tb li.first_list {position: relative; min-height:66px; margin:0 0 14px; padding:13px 10px 13px 85px; background:#f9f9f9; box-sizing: border-box; border-radius: 5px}
.notice_box .notice_tb li.first_list:before {background:none}
.notice_box .notice_tb li.first_list .tit a {width:90%; height:26px; line-height:26px; font-weight:500; color:#000; font-size:1.077em}
.notice_box .notice_tb li.first_list .txt {display:block}
.notice_box .notice_tb li.first_list .txt a {display:block; width:80%; height:18px; line-height:18px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#8b8b8b}
.notice_box .notice_tb li.first_list .date {right:inherit; left:10px; width:68px;height:auto; line-height:140%; margin-top:-20px; padding-top:26px; font-weight:500;  padding-left:0; background: none}
.notice_box .notice_tb li.first_list .date .date_ym {display: block; background:#fff; border-radius:50px; text-align: center; padding:2px 4px 0; color:#000}
.notice_box .notice_tb li.first_list .date .date_d {position: absolute; top:3px; left:0; width:68px; text-align: center; font-size:1.667em; font-weight:600; color:#44a9cf}

/* 팝업존 */
#main_popup {position: relative}
#main_popup .pop_topbox {position: relative; background:#367891; border-radius:5px}
#main_popup .pop_wrap .tit {padding:13px 10px 12px; color:#fff; font-weight:600}
#main_popup .pop_wrap .btn_more {top:9px; right:10px}
#main_popup .pop_wrap .btn_more a {background:#2e677d}
#main_popup .pop_wrap .btn_more:hover a {background:#4287a1}
.pop_area {overflow: hidden; position: relative; width:100%}
.pop_wrap .pop_area .pop_tb {overflow: hidden; height:94px; padding:15px 10px; box-sizing: border-box}
.pop_wrap .pop_list .poplst_txt {position:relative; height:30px}
.pop_wrap .pop_list .poplst_txt a {display:block; width:90%; height:30px; line-height:30px; padding-left:14px; color:#222; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.077em}
.pop_wrap .pop_list .poplst_txt:before {content:""; display: block; position: absolute; top:10px; left:0; width:5px; height:5px; background:#6e6e6e; transform: rotate(45deg)}
.pop_wrap .pop_list .poplst_txt:hover:before {background:#45aacf}
.pop_wrap .pop_list .poplst_txt:hover{text-decoration: underline}

.pop_wrap .btn_slide {display:flex; position:absolute; top:9px; right:58px; justify-content: space-between; align-items: center; box-sizing: border-box}
.pop_wrap .btn_slide li {background:#4287a1; border-radius:50px}
.pop_wrap .btn_slide li:first-child {margin-right:8px}
.pop_wrap .btn_slide li a {display:block; width:40px; height:24px; line-height:26px; text-align: center}
.pop_wrap .btn_slide li a img {vertical-align: middle}


/* 이달의 행사 */
#main_calendar {margin-bottom:17px}
.cal_wrap {position: relative; background:#fff; border:1px solid #d8ecf4; border-radius:5px}
.cal_wrap .tit {color:#2a5666; font-weight:500}
.cal_wrap .cal_toparea {position:relative; background:#d8ecf4; padding:15px 10px 12px}
.cal_wrap .cal_toparea .cal_month {display:block; width:63px; height:35px; padding:13px 0 0; background:#fff; text-align: center; border-radius:35px 35px 0 0; ; font-weight:600; font-size:1.231em; box-sizing: border-box}
.cal_wrap .cal_toparea .cal_month span {color:#3ca5dc; font-size:1.5em}
.cal_wrap .cal_area {position:relative; overflow: hidden; width:100%; box-sizing: border-box; padding:6px 50px 6px 10px}
.cal_wrap .cal_tb {overflow: hidden; height:94px; box-sizing: border-box}
.cal_wrap .cal_list .callst_txt {margin:3px 0}
.cal_wrap .cal_list .callst_txt a {display:block; overflow:hidden; width:100%; text-overflow:ellipsis; white-space:nowrap; color:#393939}
.cal_today {display:block; height:24px; line-height:26px; margin-top:12px; background:#fff; border-radius:50px; text-align: center; color:#656565; font-size:1.154em}
.cal_today span {font-weight:600; color:#000}
#main_calendar .btn_more {top:12px; right:10px}
#main_calendar .btn_more a {background:#b3d4e1}
.cal_wrap .cal_list .callst_txt:first-child a {margin-top:0}
.cal_wrap .cal_list .callst_txt span {display:inline-block; min-width:56px; height:24px; line-height:26px; font-weight:500; box-sizing: border-box; text-align: center; background:#f3f3f3; border-radius:5px; color:#000; margin-right:5px}
.cal_wrap .cal_list .callst_txt:hover a {text-decoration: underline; transition:.3s}
.cal_wrap .cal_list .callst_txt:hover span {background:#959595; color:#fff}
.cal_wrap .btn_slide {position:absolute; top:50%; right:10px; background:#f3f3f3; border-radius: 50px; margin-top:-45px}
.cal_wrap .btn_slide li a {display:block; width:32px; height:45px; line-height:45px; margin:0 auto; text-align: center; box-sizing: border-box; border-top:1px solid rgba(255,255,255,0.5)}
.cal_wrap .btn_slide li:first-child a {border-top:0}
.cal_wrap .btn_slide li a img {vertical-align: middle}

/* 앨범 */
#main_album {margin:0 0 20px; background:#f6f6f6}
.album_wrap {position: relative; padding:0 10px}
.album_wrap .album_toparea {padding:18px 10px 15px}
#main_album .btn_more {top:13px; right:20px}
#main_album .btn_more a {background:#d9d9d9}
#main_album .btn_more:hover a {background:#afafaf}
#main_album .btn_slide {display:flex; position:absolute; top:13px; right:68px; justify-content: space-between; align-items: center; box-sizing: border-box}
#main_album .btn_slide li {background:#fff; border-radius:50px}
#main_album .btn_slide li:first-child {margin-right:8px}
#main_album .btn_slide li a {display:block; width:40px; height:24px; line-height:26px; text-align: center}
#main_album .btn_slide li a img {vertical-align: middle}
.album_wrap .photo_area {position: relative; padding:0 10px; box-sizing: border-box}
.album_wrap .photo_item {width:210px; margin: 0 auto; padding:0}
.album_wrap .photo_item .photo_box {width:210px; margin:0 auto}
.album_wrap .photo_item .photo {position: relative; overflow: hidden; width:210px; height:125px; margin: 0 auto; border-radius:5px; background:url(../images/main/bg_noimg.png) no-repeat 50% 50% #bdbdbd; box-shadow:2px 2px 4px rgba(0,0,0,0.15)}
.album_wrap .photo_item .photo img {width:210px; height:125px}
.album_wrap .photo_item .txt a {display:block; overflow: hidden; height:46px; line-height:50px;  margin:0 auto; font-size:1.077em; color:#000; font-weight:500; 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_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:224px; height:121px; border:2px solid #000; box-sizing:border-box}
.photo_lst {min-height:174px}

/*비공개 게시물*/
.album_wrap .secret_post .photo_img .photo{position: relative}
.album_wrap .secret_post .photo_img a{pointer-events: none}
.album_wrap .secret_post .photo_img .photo img{filter: blur(11px)}
.album_wrap .secret_post .photo_img .photo::after{content: ""; display: block; clear: both; position:absolute; left:0; bottom:0; width:100%; height:100%; background:rgba(255,255,255,0.3) url(../images/main/secret_img.png) no-repeat 50% 50%; transition:all .8s}
.album_wrap .secret_post .secret_img .photo {background:#dbdbdb}
.album_wrap .secret_post .photo_item .photo a::after{display: none !important}

/* 오늘의 식단 */
#main_food {position: relative; margin:0 10px 20px}
.food_wrap {overflow:hidden; border-radius:5px; background:#f2ffdd}
.food_wrap .tit {padding:18px 10px 15px; background:#d4eb9e}
.food_wrap .tit span {font-weight:600}
.food_today {display:block; margin:0 15px; height:46px; line-height:48px; background:#fff; border-radius: 0 0 20px 20px; text-align: center; font-weight:500; box-shadow:0 2px 0 rgba(0,0,0,0.06)}
.food_today p {display:inline-block; padding:0 0 0 32px; background:url(../images/main/blt_food_tit.gif) no-repeat 0 12px; font-size:1.154em}
.food_today p span {font-weight:600}
.food_area {overflow: hidden; position: relative; width:100%; padding:15px; box-sizing: border-box; font-weight:500}
.food_txt {overflow:hidden; height:74px; line-height:150%}
.food_txt a {font-size:1.077em; color:#3d3d3d}
.food_txt:hover a {text-decoration: underline; transition:.3s}
.food_img {overflow:hidden; width:150px; height:100px; margin:0 auto 12px; border-radius:5px; background:#fff url(../images/main/bg_food_noimg.gif) no-repeat 50% 50%}
.food_img img {width:150px; height:100px}
#main_food .btn_more {top:14px; right:10px}
#main_food .btn_more a {background:#bcd67f}
#main_food .btn_more:hover a {background:#95b746}

/* 바로가기 서비스 */
.mquick_top {padding:20px 0; text-align: center}
.mquick_top .mquick_toptit {font-size:1.308em}
.mquick_top .mquick_toptit span {font-weight:600; font-size:1.125em}
.mquick_top .mquick_toptxt {display:block; margin-top:14px; font-weight:500; color:#878787}

.mquick_list {position:relative; padding-bottom:44px}
.mquick_list .mqmn a {display:flex; flex-wrap: wrap; justify-content: center; flex-direction:column; text-align: center; line-height:130%; font-size:1.077em}
.mquick_list .mqmn a .mq_icon {position:relative; overflow:hidden;display:block; width:95px; height:95px; margin:0 auto 12px; border-radius:50% 50%; background:#f7f7f7}
.mquick_list .mqmn a .mq_icon:before{content:""; display: block; position: absolute; top:0; left:0; width:100%; height:0; background:linear-gradient(0, #59c9c8, #55b3e3); z-index:1; transition:.6s}
.mquick_list .mqmn:hover a .mq_icon:before {height:100%}
.mquick_list .mqmn a .mq_icon span {position:relative; display:block; width:76px; height:76px; margin:9px auto; padding-top:14px; box-sizing: border-box; border-radius:50% 50%; background:#fff; box-shadow:2px 0 4px rgba(0,0,0,0.05); z-index:2}
.mquick_list .mqmn a .mq_icon img {margin:0 auto; vertical-align: middle}
.mquick_list button.slick-arrow {position:absolute; bottom:0; height:30px; line-height:30px; background:#f3f3f3; font-size:0; transition:.3s}
.mquick_list button.slick-prev {left:0; width:calc(100% / 2); border-radius:50px 0 0 50px}
.mquick_list button.slick-prev:after {content:"이전"; display:block; position:absolute; top:0; left:10px; width:calc(100% - 30px); height:30px; line-height:32px; padding-left:20px; background:url(../images/main/blt_mq_prev.png) no-repeat 0 50%; font-size:14px; color:#979797; text-align:left}
.mquick_list button.slick-next:after {content:"다음"; display:block; position:absolute; top:0; right:10px;  width:calc(100% - 30px); height:30px; line-height:32px; padding-right:20px; background:url(../images/main/blt_mq_next.png) no-repeat 100% 50%; font-size:14px; color:#979797; text-align: right}
.mquick_list button.slick-next {right:0; width:calc(100% / 2 - 1px); border-radius:0 50px 50px 0}
.mquick_list button:hover {background-color:#ddd; transition:.3s}
.mquick_list .mqmn:hover a .mq_icon img {transition: .3s; transition:transform 1.2s;transform-style: preserve-3d; transform: rotateY(360deg)}   
.mquick_list .mqmn:hover a .mq_tit {transition: .3s; color:#3a8be5}

/* 학년별 공부방 */
.main_grade {margin-bottom:16px}
.main_grade li {margin-top:13px}
.main_grade li a {display: block; border-radius:5px; height:52px; line-height:54px; padding:0 20px; box-sizing: border-box; color:#fff; font-size:1.231em; transition:.4s}
.main_grade li.grade01 a {background:#59c9c8 url(../images/main/bg_grade01.png) no-repeat 100% 100%}
.main_grade li.grade02 a {background:#55b3e3 url(../images/main/bg_grade02.png) no-repeat 100% 100%}
.main_grade li.grade03 a {background:#88c579 url(../images/main/bg_grade03.png) no-repeat 100% 100%}
.main_grade li.grade01:hover a {background-color:#2fb5b4}
.main_grade li.grade02:hover a {background-color:#1693d3}
.main_grade li.grade03:hover a {background-color:#64b151}
.main_grade li:hover a {transition:.4s}
.main_grade li a span {font-weight:600}

/* 배너 */
.banner_wrap {position: relative; box-sizing: border-box; padding:20px 10px}
.banner_wrap .tit {display:block; margin-bottom:20px}
.ban_toparea {position: relative}
#main_banner .btn_more {top:16px; right:10px}
#main_banner .btn_more a {background:#a7a7a7}
#main_banner .btn_more:hover a {background:#afafaf}
#main_banner .btn_slide {display:flex; position:absolute; top:-4px; left:74px; justify-content:space-between; align-items: center; box-sizing: border-box}
#main_banner .btn_slide li {background:#dedede; border-radius:50px}
#main_banner .btn_slide li:first-child {margin-right:6px}
#main_banner .btn_slide li button {display:block; width:40px; height:24px; line-height:26px; text-align: center; background:none}
#main_banner .btn_slide li button img {vertical-align: middle}

#main_banner .ban_item a {overflow: hidden; display: block; width: 214px; height:55px; margin: 0 auto; border-radius:10px; background:#fff url(../images/main/no_banner.gif) no-repeat 50% 50%; /*border: 1px solid #e0e0e0;*/ border-radius:5px; box-sizing: border-box}
#main_banner .ban_item img {margin: 0 auto; width:214px; height:55px; transition: all .5s}
#main_banner .ban_item:hover img{transform: scale(120%)}

/* Footer */
#footwrap {position: relative; background:#727d82}
#footwrap .fadmin {display:none}
#footwrap .copy {padding:15px 25px 10px; line-height:150%; text-align: center; background:#616c71; color:#b3bfc4}
#footwrap address {color:#fff; font-weight:400; word-break: keep-all; font-size:1.077em}
#footwrap .add_wrap {line-height:150%; padding:0 10px; text-align: center}
.add_telinfo .tel_info {display:flex; justify-content:center; flex-wrap:wrap; margin:6px 0 8px; color:#d8d8d8}
.add_telinfo .tel_info span {padding:0 10px}
.add_telinfo .tel_tit {display:inline-block; width:72px; height:20px; line-height:24px;background:#646f74; border-radius:50px 50px; color:#fff}
.add_telinfo li:first-child .tel_tit {background:#48555c}


/*Userquick*/
#quick02 .quick_box {display:none; overflow: hidden; position: absolute; background: #fff; border:2px solid #6dbae5; box-sizing:border-box; border-radius:30px 0 0 30px; border-right:0}
#quick02 .quick_box .quick_list {display:flex; flex-wrap:wrap; padding:20px 10px; min-height:255px; text-align: center; font-weight: 500; box-sizing: border-box}
#quick02 .quick_box .quick_list li {width:calc(100% / 3); margin:2px auto}
#quick02 .quick_box .quick_list li a {display: block; color:#777}
#quick02 .quick_box .quick_list .qmu_tit {line-height:130%; font-size:1.154em}
#quick02 .quick_box .quick_list .qmu_icon {display:block; width:46px; height:46px; margin:5px auto; box-sizing: border-box; text-align: center; background-repeat: no-repeat}
#quick02 .quick_box .quick_list li:hover .qmu_icon {background-repeat: no-repeat}
#quick02 .quick_list li:hover .qmu_tit {color:#000}
#quick02 .qbox_tit {padding:21px 0; text-align: center; background:#6dbae5; color:#fff; font-size:17px}
#quick02 .qbox_tit p {display:inline-block; position:relative; padding:0 26px}
#quick02 .qbox_tit p span {font-weight:600}
#quick02 .qbox_tit p:before {content:""; display:block; position:absolute; top:50%; left:0; width:7px; height:7px; margin-top:-5px; border-radius:50%; background:#fff}
#quick02 .qbox_tit p:after {content:""; display:block; position:absolute; top:50%; right:0; width:7px; height:7px; margin-top:-5px; border-radius:50%; background:#fff}

#quick02 .quick_btns .qk {display:block; position: relative; width:110px; height:85px; padding:15px 12px; margin:0 auto 10px; border-radius:18px; flex-direction: column; z-index: 10; background-color:#fff; box-sizing: border-box; color:#fff; font-size:15px; box-shadow: 2px 0 4px rgba(0,0,0,0.07)}
#quick02 .quick_btns .qk:before {content:"QUICK"; display:block; position:absolute; top:20px; right:10px; color:#e5e5e5; font-size:10px; transition:.3s}
#quick02 .quick_btns .qk:after {content:""; display:block; position:absolute; bottom:13px; left:10px; width:35px; height:25px; background:#d8d8d8 url(../images/main/btn_quick_arr.png) no-repeat 50% 50%; border-radius:50px; transition:.3s}
#quick02 .quick_btns .qk span {display: block; color:#000; font-weight:400; transition:.3s}
#quick02 .quick_btns .qk01 {background:#fff url(../images/main/btn_qcktit01.png) no-repeat right 10px bottom 10px}
#quick02 .quick_btns .qk02 {background:#fff url(../images/main/btn_qcktit02.png) no-repeat right 10px bottom 10px}
#quick02 .quick_btns .qk03 {background:#fff url(../images/main/btn_qcktit03.png) no-repeat right 10px bottom 10px}

#quick02 .quick_btns .qk:hover:before, #quick02 .quick_btns .on .qk:before  {color:#9c9c9c}
#quick02 .quick_btns .qk:hover:after, #quick02 .quick_btns .on .qk:after  {background-color:#5599bf}
#quick02 .quick_btns .qk01:hover, #quick02 .quick_btns .on .qk01 {background:#fff url(../images/main/btn_qcktit01_a.png) no-repeat right 10px bottom 10px}
#quick02 .quick_btns .qk02:hover, #quick02 .quick_btns .on .qk02 {background:#fff url(../images/main/btn_qcktit02_a.png) no-repeat right 10px bottom 10px}
#quick02 .quick_btns .qk03:hover, #quick02 .quick_btns .on .qk03 {background:#fff url(../images/main/btn_qcktit03_a.png) no-repeat right 10px bottom 10px}

/*학생*/
#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 li a:hover span.qico1_v1{background-image:url(../images/main/useqm01_v1_a.png)}
#quick02 .qb01 li a:hover span.qico1_v2{background-image:url(../images/main/useqm01_v2_a.png)}
#quick02 .qb01 li a:hover span.qico1_v3{background-image:url(../images/main/useqm01_v3_a.png)}
#quick02 .qb01 li a:hover span.qico1_v4{background-image:url(../images/main/useqm01_v4_a.png)}
#quick02 .qb01 li a:hover span.qico1_v5{background-image:url(../images/main/useqm01_v5_a.png)}
#quick02 .qb01 li a: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 li a:hover span.qico2_v1{background-image:url(../images/main/useqm02_v1_a.png)}
#quick02 .qb02 li a:hover span.qico2_v2{background-image:url(../images/main/useqm02_v2_a.png)}
#quick02 .qb02 li a:hover span.qico2_v3{background-image:url(../images/main/useqm02_v3_a.png)}
#quick02 .qb02 li a:hover span.qico2_v4{background-image:url(../images/main/useqm02_v4_a.png)}
#quick02 .qb02 li a:hover span.qico2_v5{background-image:url(../images/main/useqm02_v5_a.png)}
#quick02 .qb02 li a: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 li a:hover span.qico3_v1{background-image:url(../images/main/useqm03_v1_a.png)}
#quick02 .qb03 li a:hover span.qico3_v2{background-image:url(../images/main/useqm03_v2_a.png)}
#quick02 .qb03 li a:hover span.qico3_v3{background-image:url(../images/main/useqm03_v3_a.png)}
#quick02 .qb03 li a:hover span.qico3_v4{background-image:url(../images/main/useqm03_v4_a.png)}
#quick02 .qb03 li a:hover span.qico3_v5{background-image:url(../images/main/useqm03_v5_a.png)}
#quick02 .qb03 li a:hover span.qico3_v6{background-image:url(../images/main/useqm03_v6_a.png)}

.btn_top a {text-align:center}



/*************** MOBILE LAYOUT ***************/
@media only screen and (max-width:1024px) {
/* Common */
.skip_navi .pc_skip{display:none}

/* Layout */
#mainheader {position: relative; z-index:100}
.headerwrap {height:74px}
.header_top .logo {top:36px; left:10px; box-sizing: border-box}
.header_top .logo a img {width: 125px}
.top_btn_area {position:inherit}
.qmenu {width:100%; border-bottom:1px solid #f4f4f4}
.qmenu > p {width:calc(100% / 2)}
.qmenu > p a {padding:9px 10px 8px}
.qmenu > p a span {text-align: right}
.qmenu .qmu_btn {width:calc(100% / 2)}
.qmenu .qmu_btn a {width:100%; border-radius:0; box-sizing: border-box; font-size:1.077em}
.qmenu .qmu_btn.btn_all {border-left:1px solid #f4f4f4}
.qmenu .qmu_btn.btn_all a {background:#fff url(../images/main/blt_qmn_allmn.png) no-repeat 10px 50%}
.qmenu .qmu_log a {background:#fff url(../images/main/blt_qmn_mlog.png) no-repeat 10px 50%}
.qmu_popup {position: absolute; top:40px; right:10px}
    
/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0;  width:295px; height:100%; min-height:100%; background:#fff; z-index:501; overflow-y:auto; box-sizing:border-box}

/* GNB_상단 */
.gnb_wrap {padding:0 13px 12px; background:url(../images/main/bg_mn_mark.png) no-repeat 0 0, linear-gradient(110deg, #5cbdc5, #56a6da)}
#gnb p.mb_gnbtit{display: block; height:58px; line-height:58px; padding:3px 0 0 32px; box-sizing: border-box; background:url(../images/main/blt_allmn_tit.png) no-repeat 0 50% ; font-size:20px; font-weight:500; color:#fff}
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:15px; right:13px; width:28px; height:28px; overflow: hidden; background:url(../images/main/btn_mn_close.png) no-repeat 50% 50%; line-height:0; text-indent:-9999px}
/*GNB_메뉴버튼*/
#gnb .mbl_area {padding:0; box-sizing: border-box}
#gnb .mbl_area ul {display: flex; justify-content: space-between; align-items: center; flex-wrap:wrap; gap:5px}
#gnb .mbl_area li {width:calc(100% / 2 - 5px)}
#gnb .mbl_area li a {display:block; color:#000; font-size: 15px; font-weight:500; text-align:right; background:#fff; border-radius:5px; padding:10px; box-sizing: border-box}
#gnb .mbl_area li.mbtn_login a {background:#fff url(../images/main/blt_mn_log.png) no-repeat 12px 50%}
#gnb .mbl_area li.mbtn_join a {background:#fff url(../images/main/blt_mn_join.png) no-repeat 12px 50%}
#gnb .mbl_area li.mbtn_srch {width:100%; margin-top:5px}
#gnb .mbl_area li.mbtn_srch a {background:url(../images/main/blt_mn_srch.png) no-repeat 12px 50%, linear-gradient(110deg, #0d99a6, #2b8ac7); color:#fff}
    
/* GNB_메뉴타이틀 */
#gnb .gnb_list{padding:12px 13px}
#gnb .gnb_list .depth1 > h2 {position:relative; margin-bottom:5px}
#gnb .gnb_list .depth1 > h2 a {display:block; min-height:44px; border-radius:5px; font-size:16px; font-weight:500; padding:18px 60px 13px 20px; margin:0; width:auto;  color:#5d5d5d; box-sizing: border-box; border:2px solid #f0f0f0}
#gnb .gnb_list .depth1 > h2 a[target=_blank] span{display:inline-block; padding-right:15px}
#gnb .gnb_list .depth1 > h2 a:before {content:""; display:block; position: absolute; top:50%; right:8px; margin-top:-15px; width:49px; height:30px; background:#f2f2f2 url(../images/main/blt_mnarr_off.png) no-repeat 50% 50%; border-radius:50px; box-shadow:1px 2px 4px rgba(0, 0, 0, 0.1)}
#gnb .gnb_list .act > h2 a {position: relative; background:#616c71; color:#fff; border-color:#616c71}
#gnb .gnb_list .act > h2 a:before {background:#fff url(../images/main/blt_mnarr_on.png) no-repeat 50% 50%; right:6px; box-shadow:2px 4px 7px rgba(0, 0, 0, 0.1)}
    
/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width:100%; padding:5px 12px; margin:5px auto 15px; box-sizing: border-box; background:#f2f2f2; border-radius:5px}
#gnb .gnb_list .depth1 .navi_sub ul > li {padding-left:22px; background-image:url(../images/main/blt_submn_off.gif); background-repeat:no-repeat; background-position:2px 11px; border-bottom: 1px solid #dedede}
#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:10px 0 8px; font-size: 15px; font-weight: 400; color:#3d3d3d}
#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/blt_submn_on.gif)}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {color:#43a3dc}
    
.leftmn > ul > li {margin-top:6px}
.leftmn > ul > li:first-child {margin-top:0}
.leftmn > ul > li > a {position:relative; display: block; line-height: 130%; border-radius:10px; padding:11px 36px 11px 12px; font-size:1.154em; font-weight:500; color: #000; transition: all .3s; box-sizing: border-box; word-break:keep-all; border:2px solid #fff}
.leftmn ul > li:last-child a {margin-bottom: 0}
.leftmn ul > li > a:hover, .leftmn .leftmenuover > a {color:#000; font-weight:500; text-decoration:none; background:#fff}
.leftmn ul > li > a:hover:after, .leftmn .leftmenuover > a:after {background:#ffd369 url(../images/sub/blt_subleft_a.png) no-repeat 50% 50%}

/* visual */
.visual:before {content:""; display: block; position:absolute; bottom:0; left:0; width:100%; height:175px; background:#f6f6f6}
.visual .visual_wrap {margin: 0 auto}
.visual .visual_item {position:relative; width:auto; height:268px; margin: 0 auto; padding-bottom:34px; box-sizing: border-box}
.visual .visual_item > a {display: block; height:268px}
.visual .visual_item .vm_wrap {display:block; overflow: hidden; background:#eee; height:234px; width:calc(100% - 20px); margin:0 10px; border-radius:20px}
.visual .item1 .vm_wrap {background:url(../images/main/vbg_m01_nn.jpg) no-repeat center top}
.visual .item2 .vm_wrap {background:url(../images/main/vbg_m02_nnnn.jpg) no-repeat center top}

.vm_charct {display:block; position:absolute; bottom:0; right:50%}
.visual .item1 .vm_charct {margin-right:-215px}
.visual .item1 .vm_charct img{width:210px; height:109px}
.visual .item2 .vm_charct {margin-right:-180px}
.visual .item2 .vm_charct img{width:187px; height:115px}

/* Poplayer */
.main_openpop .popup_open{display:none}
.main_openpop{ position: absolute; top:44px; right:0; width: 100%; z-index:1}
.main_openpop .popup_layer_wrap {margin:20px auto 4px}
.main_openpop .popup_layer .popup_tit {margin:15px auto}
.main_openpop .popup_on{display:none; width: 100%; height:290px; 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 .slick-prev, .main_openpop .slick-next {bottom:18px}

/********************************************* Layout **********************************************/
/***Content  Common***/   
.mb_none{display: none}
    
/* common */
.content_area {margin:0 10px; box-sizing: border-box}
.content02 {margin:0}
.content04 {margin:20px 0 0}
    
/* notice */
.notice_box {background-size:24px auto; background-position:0 10px}
.notice_box .noticetab01 {left:22px}
.notice_box .noticetab02 {left:112px}

/* Footer */
#footwrap {padding:0 0 48px}
#footwrap .foot_menu .foot_mlst{position: relative}
#footwrap .foot_menu .mb_menu {position: relative; display:flex; justify-content: center; align-items: center; margin:0 auto; text-align: center}
#footwrap .foot_menu .mb_menu li {padding:0 10px; margin:0; height:50px; line-height:54px; background:url(../images/main/bg_foot_bar.gif) no-repeat right center}
#footwrap .foot_menu .mb_menu li:first-child {padding:0; background:none}
#footwrap .foot_menu .mb_menu li:first-child a {width:25px; height:48px; background:url(../images/main/blt_foot_home.gif) no-repeat 50% 50%; font-size:0}
#footwrap .foot_menu .mb_menu li:last-child {background: none}
#footwrap .foot_menu .mb_menu li a {display:block; font-size: 13px; font-weight: 400; color:#fff}
/*PC버튼*/
#footwrap .pc_menu {display:flex; justify-content: flex-start; flex-wrap:wrap; margin:0 10px 14px; border-radius:10px; text-align:center; background:#616c71; font-size: 13px; font-weight:500; color:#fff}
#footwrap .pc_menu li {width:calc(100% / 2)}
#footwrap .pc_menu li a {display: block; padding:15px 0 12px; color:#fff}
#footwrap .pc_menu li.li_1 a {color:#6ecaff}
#footwrap .pc_menu li.li_2 a {border-left:1px solid #727d82; box-sizing: border-box}
#footwrap .pc_menu li.li_3 {width:100%; border-top:1px solid #727d82}
#footwrap .pc_menu li.li_4{display: none}
#footwrap .add_telinfo {max-width:380px; margin:14px auto}
#footwrap .add_telinfo {line-height:150%}
/*주소*/
#footwrap .count_box{display:none}
.add_telinfo .tel_info span:nth-child(2n) {background:url(../images/main/bg_foot_telbar.gif) no-repeat 0 3px}
}


/******** PC LAYOUT ********/
@media only screen and (min-width:1025px) {
/* Common */
.skip_navi .mb_skip{display:none}

/* Layout */
#wrap {min-width:1220px}
.headerwrap {position:relative; width: 100%; height: 125px; margin: 0 auto}
.headerwrap:before {content:""; display: block; position: absolute; top:44px; left:0; width:100%; height:1px; background:#f4f4f4}    
.header_top {position: relative; width:1200px; padding-top:44px; margin: 0 auto}
.qmenu {gap:10px}
.qmenu > p a {font-size:1.231em; font-weight:500}
.qmenu .qmu_join a {padding:3px 20px 0 30px; background:url(../images/main/blt_qmn_join.png) no-repeat 0 50%}    
.qmenu .qmu_log a {padding:3px 20px 0 30px; background:url(../images/main/blt_qmn_log.png) no-repeat 0 50%}    
    
.qmenu .qmu_btn {font-size:0}
.qmenu .qmu_btn a {display:block; width:49px; height:26px; border-radius:50px}
.qmenu .qmu_btn.btn_search a {background:#747d82 url(../images/main/btn_qmn_srch.png) no-repeat 50% 50%}
.qmenu .qmu_btn.btn_all a {background:#747d82 url(../images/main/btn_qmn_allmn.png) no-repeat  50% 50%}

/* GNB */
.gnb_box{ margin: 0 auto}
.gnb_list{display: flex; justify-content: flex-end; padding:0 0 0 250px}
#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:16.6%; padding:34px 20px 28px; text-align: center; font-weight:500}
#gnb .depth1 h2 a{display: inline; text-align: center; font-size:19px; font-weight:500; color:#000}
#gnb .depth1.active h2 a {color:#4792cb; font-weight:600}
#gnb .navi_sub {overflow: hidden; position: absolute; left:50%; top:68px; width:214px; margin-left:-107px; padding:15px 7px 25px; background: #fff; box-sizing: border-box; border-radius:20px 20px 5px 5px; border:2px solid #4792cb; border-bottom:0}
#gnb .navi_sub::before{content: ""; display: block; clear: both; position: absolute; top:0; left:50%; margin-left: -49px; width:98px; height:16px; background:#4792cb url(../images/main/bg_menu_arr.gif) no-repeat 50% 50%; border-radius:0 0 50px 50px; z-index:1}
#gnb .navi_sub::after{content: "HYOCHEON MIDDLE SCHOOL"; display: block; clear: both; position: absolute; bottom:0; left:0;  width:100%; height:25px; line-height:27px; text-align: center; background:#4792cb; z-index:1; color:#8abee5; font-size:12px}
#gnb .navi_sub ul { overflow: hidden; background:#fff; border-radius:0 0 30px 30px; padding:5px 0}
#gnb .navi_sub li a {display: block; line-height: 130%; padding:12px 5px 7px; text-align: center; font-size:1.231em; font-weight:500; letter-spacing:-0.3px; word-break:keep-all; border-bottom:1px solid #ebebeb; color:#4d4d4d}
#gnb .navi_sub li:hover a, #gnb .depth1.active .navi_sub .depth2 > li.active a {font-weight:500; transition:.3s; color:#0a87c8}
#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 .visual_wrap {width: 100%; margin: 0 auto}
.visual .visual_item{display: block; width:100%; height:599px}
.visual .visual_item > a {display: block; height:599px}
.visual .item1 a:focus-visible{height:599px; outline:2px solid #000}
.visual .item1 {background:url(../images/main/v01_p_n.jpg) no-repeat center top}
.visual .item2 {background:url(../images/main/v02_p_n.jpg) no-repeat center top}
.visual_wrap .slick-dots {top:572px; left:50%; margin-left:538px; z-index:1}
.visual_wrap .slick-dots li button {width:16px; height:12px}
.visual_wrap .slick-dots li.slick-active button {width:30px}
.visual_wrap .btn_visual {top:572px; left:50%; margin-left:589px; z-index:1}

/********************************************* Layout **********************************************/
/***Content Common***/   
.pc_none{display:none}

#content h3.tit {font-size:1.462em}
#content .btn_more a {width:50px; height:30px; line-height:32px}

.content_area {position: relative; width: 1200px; margin:0 auto}
.content01 {display:flex; justify-content: space-between; margin:0 auto 45px}
.content01 .conwrap {width:406px; margin-left:38px;  margin-top:20px}
.content02 {position:relative; width:100%}
.content02:before {content:""; display: block; position:absolute; top:0; left:0; width:calc(100% - 50%); height:100%; background:#f6f6f6}
.content02 .conwrap {position:relative; display:flex; justify-content: space-between; width:1200px; margin:0 auto}
.content03 {display:flex; justify-content: space-between; margin:46px auto 55px}
.content04 {width:100%}

/* NOTICE */
#main_notice {width:794px; margin:-49px 0 0; flex:1 0 0}
.notice_top {padding:13px 0 12px; align-items: center}
.notice_top .noti_toptxt {padding-left:20px; font-size:1.154em}
.notice_top .noti_toptit {font-size:23px}
.notice_wrap {margin-top:20px}
.notice_box {padding-top:48px; background-position:0 5px}
.notice_box h3 a {height:48px; line-height:50px; font-size:1.462em}
.notice_box .notice_tb ul {border-top:1px solid #e7e7e7; height:275px; box-sizing: border-box}
.notice_box .noticetab01 {width:110px}
.notice_box .noticetab02 {left:156px; width:130px}
.notice_box .btn_more {top:8px; right:17px}
.notice_box .notice_tb {height:272px; border:0}
.notice_box .notice_tb ul {display:flex; overflow:hidden; position:relative; padding-top:100px; flex-wrap:wrap; gap:23px}
.notice_box .notice_tb li.nlist {padding:13px; height:171px; width:236px; margin:0; border:1px solid #eee; box-sizing: border-box; border-radius:5px}
.notice_tb li.nlist .ncate {display: block}
.notice_box ul li.nlist  .noti_lsttop {display: block; height:22px}
.notice_box ul li.nlist .tit {padding:15px 2px 15px; min-height:36px}
.notice_box ul li.nlist .tit a {overflow:hidden; display:block; width:100%; margin:0; height:36px; line-height:140%; color:#000; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; box-sizing: border-box; font-size:1.077em}
.notice_box ul li.nlist .txt {display: block; border-top:1px solid #ccc}
.notice_box ul li.nlist .txt a {overflow:hidden; display:block; margin:16px 0; height:36px; line-height:140%; color:#000;  font-size:1.077em; font-weight:300}
.notice_box ul li.nlist.ncate {display:block}
.notice_box .notice_tb li.nlist:before {display: none}
.notice_box .notice_tb li.nlist .date {top:14px; right:15px; margin-top:0}
.notice_box .notice_tb li.first_list {position:absolute; top:0; left:0; width:100%; min-height:60px; margin-top:24px; background:none; padding:4px 10px 0 124px; margin-bottom:16px; border:0}
.notice_box .notice_tb li.first_list .tit a  {font-size:1.231em}
.notice_box .notice_tb li.first_list .tit {margin-bottom:5px}
.notice_box .notice_tb li.first_list .txt a {font-size:1.154em}
.notice_box .notice_tb li.first_list .date {left:0; width:110px; font-size:15px; padding-top:30px; margin-top:-25px}
.notice_box .notice_tb li.first_list .date .date_d {width:110px; top:0; font-size:2em}
.notice_box .notice_tb li.first_list .date .date_ym {background:#f6f6f6}
.notice_box .ncate span {display:inline-block; min-width:46px; height:19px; line-height:21px; border-radius:4px; border:1px solid #ff5539; color:#ff5539; font-size:12px; text-align:center; box-sizing: border-box}
    
/* popup존 */
.pop_wrap .btn_slide {right:70px}
.pop_wrap .btn_slide li a {width:52px; height:30px; line-height:32px}
.pop_wrap .btn_slide li:first-child {margin-right:5px}
#main_popup .pop_wrap .tit {padding:16px 20px 14px; font-size:1.385em}
.pop_wrap .pop_list .poplst_txt a {width:85%; font-size:1.154em}
.pop_wrap .pop_area .pop_tb {height:100px; padding:21px 10px; background:url(../images/main/bg_popzone.png) no-repeat right 10px top 50%}
    
/* 이달의 행사 */
#main_calendar {margin:0}
.cal_today {position:absolute; top:9px; right:65px; width:182px; height:30px; line-height:32px; margin:0}
#main_calendar .btn_more {top:9px; right:9px}
.cal_wrap .cal_toparea {padding:17px 20px 13px}
.cal_wrap .cal_area {padding:13px 50px 13px 20px}
.cal_wrap .cal_list .callst_txt a {font-size:1.154em}
.cal_wrap .cal_list .callst_txt span {min-width:80px; font-size:14px}

/* 앨범 */
#main_album {width:755px; height:223px;margin:0; border-radius: 0 5px 5px 0}
.album_wrap {padding:0}
.album_wrap .album_toparea {padding:18px 13px 12px}
#main_album .btn_slide {top:10px; right:76px}
#main_album .btn_slide li a {width:52px; height:30px; line-height:32px}
#main_album .btn_more {top:10px}
.album_wrap .photo_item .txt a {font-size:1.154em}

/* 식단 */
#main_food {width:406px; margin:0}
.food_img {position:absolute; top:15px; right:15px; margin:0; }
.food_wrap .tit {padding:17px 20px 13px}
#main_food .btn_more {top:9px; right:9px}
.food_today {height:44px; line-height:46px}
.food_today p {font-size:1.308em}
.food_txt {height:86px; line-height:160%}
.food_txt a {font-size:1.154em}
.food_area {padding:22px 200px 22px 26px}

/* 퀵 서비스 */
.main_quick {width:900px; margin-right:26px}
.mquick_top {display:flex; align-items: center; text-align: left}
.mquick_top .mquick_toptxt {margin:0 0 0 15px; font-size:15px}
.mquick_top .mquick_toptit {font-size:26px}
.mquick_top .mquick_toptit span {font-size:28px}
.mquick_list {padding-bottom:20px}
.mquick_list .mqmn a {font-size:1.154em}
.mquick_list .mqmn a .mq_icon {margin:0 auto 15px}

.main_grade {width:313px; margin:23px 0}
.main_grade li {margin-top:17px}
.main_grade li:first-child {margin-top:0}

/* banner */
#main_banner {width:1200px; margin:0 auto}
#main_banner .btn_more a {width:52px; height:25px; line-height:27px}
#main_banner .btn_slide {left:82px}
#main_banner .btn_slide li button {width:52px; height:25px; line-height:27px}
#main_banner .tit {margin-bottom:16px}

/* Footer */
#footwrap .foot_area {position:relative; width:1200px; margin:0 auto }
#footwrap .mb_menu {display:none}
#footwrap .pc_menu {border-bottom:1px solid #869095}
#footwrap .pc_menu:after {content:""; clear:both; display:block; height:0}
#footwrap .pc_menu li {float:left; height:66px; line-height:66px; padding: 0 20px; background:url(../images/main/blt_foot_dot.gif) left center no-repeat; text-align: center}
#footwrap .pc_menu li:first-child {background: none; padding-left:0}
#footwrap .pc_menu li a {font-size:14px; color:#fff; font-weight:500}
#footwrap .pc_menu li.li_1 a {font-weight:500; color:#6ecaff; padding-left:22px; background:url(../images/main/blt_privacy.gif) no-repeat 0 0}
#footwrap .pc_menu li a:hover{font-weight:600}
/*Admin*/
#footwrap .pc_menu li.fadmin {display:block; position:absolute; top:0; right:0; padding:0; text-align:right; background:none}
#footwrap .pc_menu li.fadmin a {display: block; width:207px; height:44px; line-height:44px; margin:11px 0; padding:0 15px; border-radius:5px;border:2px solid #8a9499; background:url(../images/main/blt_admin.png) no-repeat 12px 50%; color: #cbd0d3; font-size: 14px; font-weight: 400; box-sizing: border-box; transition: all .3s; font-family:'Gmarket Sans'}
#footwrap .pc_menu li.fadmin a:hover {border-color:#ccc; color:#fff}
#footwrap .add_wrap {position: relative; text-align: left; margin:24px 0 25px; padding:5px 0 0 132px; background:url(../images/main/flogo.gif) no-repeat 0 0}
.add_telinfo .tel_info {display: inline-block; margin:7px 0 0}
.add_telinfo .tel_info span {font-size:14px; padding:0 10px; background:url(../images/main/bg_foot_bar.gif) no-repeat 0 3px}
.add_telinfo .tel_info span:first-child {background:none}
.add_telinfo .tel_tit {width:82px; text-align: center}

#footwrap address {font-size:1.154em}
#footwrap address span.add_txt {padding:0 0 0 20px; margin-bottom:15px; background:url(../images/main/blt_add.gif) no-repeat 0 1px}
#footwrap address span.add_txt br {display: none}
#footwrap .ftit {font-weight:500}
#footwrap .count_box {display:block; overflow: hidden; position: absolute; top:0; right:0; width:207px}
#footwrap .count_box h3 {display:none}
#footwrap .count_box ul li {height:47px; line-height:47px; padding:0 12px; font-size:14px; font-weight:500; box-sizing: border-box; display: flex; justify-content: space-between;  box-sizing: border-box; color:#fff; border-radius: 5px}
#footwrap .count_box ul li .tit {display:block; width:65px; margin-left:6px; padding-left:16px; background:url(../images/main/blt_count_tit.png) no-repeat 0 17px}
#footwrap .count_box ul li .num{display: inline-block; width:calc(100% - 80px); text-align:right; font-weight:300; font-size:13px}
#footwrap .count_box ul li.today {background:#8a9499; margin-bottom:9px}
#footwrap .count_box ul li.today .num {color:#ffda69}
#footwrap .count_box ul li.total {background:#616c71}
#footwrap .copy {padding:10px 0 5px; text-align:left}
#footwrap .copy span {display:block; width:1200px; margin:0 auto}  
}

/**** 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:125px; padding-left:0; margin-top:-45px; background:rgba(255,255,255,0.9); box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .gnb_box{ margin: 0 auto; background:none}
.fixed .header_top {padding-top:40px}
.fixed .header_top .logo {top:65px}
    
}
/********* TABLET LAYOUT[중간사이즈 조정관련] *********/
@media only screen and (min-width:1480px) {
/*Userquick*/
#quick02 {position: absolute; right:14px; top:138px; width:125px; height:394px; border-radius:50px 50px 20px 20px; background:#6cb8e2; z-index:10; box-sizing: border-box; box-shadow:4px 4px 8px rgba(0,0,0,0.1)}
#quick02 .userquick_tit {position:relative; line-height:140%; padding:18px 10px 55px; background:#e9f1f5; text-align: center; border-radius:48px 48px 0 0}
#quick02 .userquick_tit img {vertical-align: middle; width:65px}
#quick02 .quick_wrap .qckbox {margin-top:-45px}
#quick02 .quick_box {right: calc(100%); top:56px; width:365px}
#quick02 .quick_btns .btn.on .quick_box, #quick02 .quick_btns .btn:hover .quick_box {display: block}
.btn_top a {position:relative; display: block; padding:7px 0; text-align: center; background:url(../images/main/btn_top.png) no-repeat center center}
.btn_top a span {position: relative; display: inline-block; padding:2px; color:#fff; font-size:0}
#quick02 .qbox_close{display:none}
}

@media only screen and (max-width:1479px) {
/*Userquick*/
#quick02 .userquick_tit{display:none}
#quick02 {position: fixed; left:0; top:inherit !important; bottom: 0; height:56px; width:100%; min-width:290px; background:#6dbae5; z-index:1; box-sizing: border-box; border-radius:15px 15px 0 0}
#quick02 .quick_wrap .qckbox {margin-top:0}
#quick02 .quick_box {top:-295px; left:0; width:calc(100%); height:287px; border-radius:25px 25px 8px 8px; border:2px solid #6dbae5}
#quick02 .quick_btns {display: flex; gap:8px; justify-content:space-between}
#quick02 .quick_btns li {width:calc(100% / 3); text-align: center}
#quick02 .quick_btns li.on .quick_box {display: block}
.qckbox {position:relative; padding:6px 50px 6px 6px}
#quick02 .quick_btns .qk span {padding:13px 10px 18px 10px; border-radius:5px}
#quick02 .quick_btns li .qk {display:block; position: relative; width:100%; margin:0; padding:0; height:auto; flex-direction: column; z-index: 10; box-sizing: border-box; border-radius:12px; text-align: left; font-size:13px}
#quick02 .quick_btns .qk:before {display:none}
#quick02 .quick_btns .qk:after{display:none}
.qckbox .btn_top {position: absolute; top:0; right:0}
.qckbox .btn_top a {display: block; width:50px; height:56px; padding:0; background:url(../images/main/btn_top_m.png) no-repeat 50% 50%}
.qckbox .btn_top a span {font-size:0}
#quick02 .quick_box .quick_list .qmu_tit {font-size:1em}
#quick02 .qbox_tit {padding:13px 0}
#quick02 .quick_btns .qk, #quick02 .quick_btns .on .qk, #quick02 .quick_btns .qk:hover {background-position:right 8px bottom 7px; background-size:28px auto !important}
#quick02 .quick_box .quick_list {min-height:inherit; padding:10px 10px}
#quick02 .qbox_close{display:block}
#quick02 .qbox_close a {display:block; padding:6px 10px 4px; background:#ededed; border-radius:50px; text-align: center; margin:0 10px}
#quick02 .qbox_close a span {padding-right:15px; background:url(../images/main/btn_qbox_close.gif) no-repeat 100% 50%}
}
	
@media only screen and (max-width:730px) {
    /* popup 레이어 */
    .mpop_lstwrap {top:150px; margin-left:-150px}
    .mpop_lstwrap .mpop_tb {width:300px}
    .mpop_top {display:block; width:300px; margin:0 auto }
    .mpop_tit {text-align: center; font-size:24px}
    .mpop_list {padding:0}
    .mpop_layer a {width:300px; height:172px; border-radius:15px}
    .mpop_layer img {width:300px; height:172px}
    .mpop_right {justify-content: space-between; margin:10px 0}
    .btn_poptoday a {line-height:32px; font-size:14px}
    .btn_popclose a {line-height:32px}
    .mpop_lstwrap .slick-arrow {top:100%; width:30px; height:30px; margin-top:10px; background-size:30px auto}
    .mpop_lstwrap .slick-prev {left:50%; margin-left:-40px}
    .mpop_lstwrap .slick-next {right:50%; margin-right:-40px}
}


/* topquick 애니메이션 */
@keyframes jumping{ 
    0% {background-position:50% 15px}
    50% {background-position:50% 5px}
    100% {background-position:50% 15px}  
}

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