@charset "utf-8";
/* CSS Document */
/* com2zoa design KYJ, publishing PJH 26.02.02 */

/******** 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}
a{text-underline-offset:3px}

/* Layout */
#wrap {position: relative; width: 100%; min-width: 320px; font-family:'NSQ'; font-weight: 500}
#content{position: relative; z-index:1}
#mainheader {z-index: 10}
.header_top .qmu_btnbox{display: flex; gap:10px; align-items: center}
.header_top .qmu_btnbox > p{align-content: space-around}
.header_top .qmu_btnbox p.qmu_btn a{display: block; width: 42px; height: 35px; padding: 10px 0; border-radius: 10px; background-position: center; background-repeat: no-repeat; background-color: #fff; text-align: center; font-size: 0; text-indent: -9999px; box-sizing: border-box; transition: all .5s}
.header_top .qmu_btnbox p.qmu_search a{background-color:#678c9d;  background-image:url(../images/main/btn_search.png)}
.header_top .qmu_btnbox p.qmu_site a{background-color:#496d7d; background-image:url(../images/main/btn_sitemap.png)}
.header_top .qmu_btnbox p.qmu_search a:hover{background-color: #75c5ea}
.header_top .qmu_btnbox p.qmu_site a:hover{background-color: #75c5ea}

br.pc_non{display: block}
/* 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}
.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: 27px; height: 27px; border-radius:30px; z-index: 500}
.main_openpop .slick-prev {left:10px; background:url(../images/main/btn_layer_left.png) center no-repeat #fff}
.main_openpop .slick-next {right:10px; background:url(../images/main/btn_layer_right.png) center no-repeat #fff}
.main_openpop .popup_layer{position: relative; padding-top:10px; box-sizing: border-box}
.main_openpop .popup_imgsize{width:230px; height:230px; margin: 0 auto; border-radius: 18px;  background:url(../images/main/no_popup.gif) no-repeat center center #e9e9e9; box-shadow:0 0 5px rgba(0, 0, 0, 0.1)}
.main_openpop .popup_imgsize img{width:230px; height:230px; border-radius: 18px}
.main_openpop .popup_layer .popup_tit{display:block; margin:19px 50px}
.main_openpop .popup_layer .popup_tit a{display:block; overflow:hidden; color:#000; font-size: 15px; font-weight:600; text-overflow:ellipsis; white-space:nowrap}
.qmu_popup a span{font-size:0}
.main_openpop .popup_on{display:none}
.main_openpop .popup_on.active {display:block}

/* popup 기본 닫힘 */
.mpopup_box .popup_on {display: none;}
/* 팝업 열림 상태 */
.mpopup_box.on .popup_on {display: block;}

/* Visual */
.visual {position:relative; overflow:hidden}
.visual_wrap .slick-arrow {display:none !important}
.visual_wrap .slick-dots li button, .visual_wrap .btn_visual li button{border: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; left:50%; top:168px; margin:0 0 0 -565px; z-index: 100}
.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}
/*비주얼 이동 블릿*/
.slick-dots {position: absolute; left:50%; top:170px; margin:0 0 0 -650px; z-index: 100}
.slick-dots li {display:block; float: left; margin: 0 7px 0 0; background:rgba(255, 255, 255, 0.6); border-radius:5px; opacity: 0.8; box-sizing: border-box}
.slick-dots li button{display:block; width:16px; height:12px; border-radius:5px; cursor:pointer; box-sizing: border-box; box-shadow:1px 1px 2px rgba(0, 0, 0, 0.15)}
.slick-dots li.slick-active button{display:block; width: 35px; height: 12px; background:#fff; border:none}


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

/***Content  Common***/    
/*더보기버튼 공통*/
.content_area .conline .more a{display: block; width: 40px; height: 20px; line-height: 20px; border-radius: 50px; text-align: center; align-content: space-around; transition: all .3s}
.content_area .conline .more a img{transition: all .3s}
.content_area .conline .more a:hover img{transform: rotate(180deg)}

/*고정 퀵메뉴*/  
.fixquick_menu ul{display: flex; flex-wrap: wrap; justify-content: space-between; gap: 26px 0}
.fixquick_menu ul li{position:relative; width: calc(100% / 5 - 20px); height: 108px; font-size: 14px; background: #fff; border-radius: 20px; box-shadow: -1px -2px 3px rgba(0, 0, 0, 0.07)}
.fixquick_menu ul li::after{display: block; position: absolute; content: ''; clear: both; width: 60px; height: 50px; top: 0; left: 0; border-radius:20px 0 20px 0; background: url(../images/main/fq_item01.png) center no-repeat #f7f7f7; box-shadow: 2px 2px 2px rgba(0,0,0,0.07)}
.fixquick_menu ul li:nth-child(2)::after{background: url(../images/main/fq_item02.png) center no-repeat #f7f7f7;}
.fixquick_menu ul li:nth-child(3)::after{background: url(../images/main/fq_item03.png) center no-repeat #f7f7f7;}
.fixquick_menu ul li:nth-child(4)::after{background: url(../images/main/fq_item04.png) center no-repeat #f7f7f7;}
.fixquick_menu ul li:nth-child(5)::after{background: url(../images/main/fq_item05.png) center no-repeat #f7f7f7;}
.fixquick_menu ul li a{display: block; width: 100%; height: 108px; padding: 50px 15px 5px 5px; text-align: right; align-content: center; font-size: 14px; line-height: 1.4; box-sizing: border-box; transition: all .3s}
.fixquick_menu ul li a span.sub_qm{margin-left:5px; font-size:13px; color: #717171}
.fixquick_menu ul li span{display: block}
.fixquick_menu ul li span.fq_btn{height: 32px; padding: 7px 12px; border-radius: 50px; background:url(../images/main/fq_arw.png) center right 15px no-repeat #f4f4f4; color:#c8c8c8; text-align: left; box-sizing: border-box; transition: all .3s}
.fixquick_menu ul li a:hover,.fixquick_menu ul li a:hover span{color:#60b4c5}
.fixquick_menu ul li:hover::after{box-shadow: 2px 2px 2px rgba(0,0,0,0.1)}


/* Notice */
.conline01 .bxline1{position: relative}
.conline01 .bxline1::after{display: block; content: ''; clear: both; position: absolute; top:58px; left:0; width: 100%; height: 97px; background: #f5f5f5}
#main_notice{overflow:hidden; position: relative}
.notice_top .more{position: absolute; top: 0}
.notice_box h3 {position:absolute; top:7px; width:33.3%; z-index: 2; box-sizing: border-box}
.notice_box h3 a {position: relative; display:block; width:100%; height:50px; line-height:120%; margin: 0 auto; padding: 9px 0;  font-size:14px; background:url(../images/main/noti_more2.gif)no-repeat right 15px center #42a2b6; font-weight:600; color:#fff; transition: all .3s; text-align: center; box-sizing: border-box}
.notice_box .on a, .notice_box h3 a:hover {display:block; background:url(../images/main/noti_more1.gif)no-repeat right 15px center #3d8b9b; color:#fff; font-weight: 600}
.notice_box .noticetab01 {left:0}
.notice_box .noticetab02 {left:33.3%}
.notice_box .noticetab03 {left:66.6%; padding: 0 7px}
.notice_box .noticetab01 a{border-radius: 15px 0 0 0}
.notice_box .noticetab03 a{border-radius: 0 15px 0 0}
/**공지사항_내용영역**/
.notice_box .notice_tb {position: relative; height:205px; margin-top:114px}
.notice_box .notice_tb ul {overflow:hidden; height:103px; margin-bottom: 10px; border-radius:0 0 15px 15px; background: #f5f5f5; box-sizing: border-box}
.notice_box .notice_tb li {position:relative; height:29px; line-height: 150%; padding-left:20px; z-index: 1; align-content: center}
.notice_box .notice_tb li::after{display: block; clear: both; content: ''; position: absolute; top:12px; left:1px; width: 6px; height: 6px; border-radius: 50px; background: #9d9d9d}
.notice_box .notice_tb li:hover::after{background:#383838}
.notice_box .notice_tb li a{color:#000; font-size:14px; font-weight: 400}
.notice_box .notice_tb li:hover a{color:#000; font-weight:600; text-decoration:underline}
.notice_box .notice_tb p.tit {width:auto; margin:0}
.notice_box .notice_tb p.tit a {display:block; overflow:hidden; width:70%; text-overflow:ellipsis; white-space:nowrap}
.notice_box .notice_tb p.date {position:absolute; top:-4px; right:0; width:68px; height:24px; line-height:25px; background:url(../images/main/ico_notidate.png) no-repeat; background-size: 12px 12px; text-align:right; font-size:13px; color:#ababab; font-weight: 300; font-family:CGC}
/*공지사항_첫번째 리스트*/
.notice_box .notice_tb li.first_list{overflow: hidden; height: 61px; padding: 20px 25px 20px 60px; background:url(../images/main/ico_noti.png)no-repeat center left 10px #fff; box-sizing: border-box}
.notice_box .notice_tb li.first_list::after{display: none}
.notice_box .notice_tb li.first_list{position: absolute; top:-61px; left: 0; width: 100%; margin: 0} 
.notice_box .notice_tb li.first_list .date{top:17px; right:0px; font-size: 14px}
.notice_box .notice_tb li.first_list .tit a{font-size: 15px; font-weight: 600}
.notice_box .notice_tb li.first_list .txt{display: block; width: 90%; height: 65px; padding: 15px; background: #f8f8f8; border-radius: 15px 15px 0 0; box-sizing: border-box}
.notice_box .notice_tb li.first_list .txt a{overflow: hidden; display: block; height: 38px; color:#676767; font-size: 14px}

/*Calendar*/
.cal_wrap{position: relative;  margin:15px 10px 10px; z-index: 1}
.cal_wrap .cal_bx{position: relative; overflow:hidden; border-radius: 15px; border: 2px solid #62b6ec}
.cal_wrap .tit_bx{padding:10px; background: #62b6ec; border-radius: 12px 12px 0 0; box-sizing: border-box}
.cal_wrap h3.tit{padding: 8px 0 5px 45px; background:url(../images/main/ico_cal.png) no-repeat left 2px top 2px; font-size: 16px; font-weight: 500; color:#fff}
.cal_wrap .cal_area{display: flex; gap:10px; height: 135px; padding: 8px ; box-sizing: border-box}
/*연도표기*/
.cal_wrap .tit_bx .cal_year{margin-top: 19px; font-size: 18px; font-weight: 600; padding: 8px 10px; height:41px; background: #fff; align-content: center; border-radius: 20px; box-shadow: 0 -2px 5px rgba(0,0,0,0.1); box-sizing: border-box}
.cal_wrap .tit_bx .cal_year span{display:inline-block; width:74px; height: 26px; margin-right:10px; border-radius:13px; background:#4682a8; text-align: center; align-content: center; font-weight: 500; font-size: 16px; color: #fff}
/*리스트 스타일*/
.cal_wrap .cal_tb{overflow:hidden; width: 100%; background: #fff; box-sizing: border-box}
.cal_wrap .cal_list div{margin:3px 0 }
.cal_wrap .slick-vertical .slick-slide{border:none !important}
.cal_wrap .cal_list li{margin-bottom: 5px}
.cal_wrap .cal_list li{display:block; position:relative; width:90%; height:27px; line-height:27px; padding-left:15px; font-size: 15px; font-weight: 500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cal_wrap .cal_list li::after{display: block; clear: both; content: ''; position: absolute; top:11px; left:1px; width: 6px; height: 6px; border-radius: 50px; background: #a6a6a6}
.cal_wrap .cal_list li:hover{text-decoration: underline}
.cal_wrap .cal_list li:hover::after{background:#1a1a1a}
.cal_wrap .cal_list li span{display: inline-block; margin-right: 24px; font-size: 14px; font-weight: 600}


/*이동버튼*/
.cal_wrap .btn_bx{position: absolute; top:65px; right:10px; width: 120px; height: 33px; padding: 0 10px; box-sizing: border-box}
.cal_wrap ul.btn_slide{display:flex; gap: 7px}
.cal_wrap ul.btn_slide li{flex: 1}
.cal_wrap ul.btn_slide li a{display: block; width:29px; height: 29px; padding: 8px 0; text-align: center; border-radius: 30px; background: #4682a8; transition: all .3s; box-sizing: border-box}
.cal_wrap ul.btn_slide li a:hover{background: #62b6ec}
/*더보기 버튼*/
.cal_wrap .more{position: absolute; top:10px; right:10px}
.cal_wrap .more a{background: #fff}

/*  Photo */
.album_wrap {position: relative; min-height: 246px}
/*앨범 타이틀*/
.album_wrap h3.tit{padding: 8px 0 5px 35px; background:url(../images/main/ico_photo.png) no-repeat left center; font-size: 16px; font-weight: 600; color:#000}
.album_wrap h3.tit span{font-weight: 600}
/*앨범 내용*/
.album_wrap .photo_area {position: relative; height: 190px; padding-top: 14px; z-index: 1}
.album_wrap .photo_area::before{position:absolute; display:block; content:''; width: 100%; height: 103px; bottom:0; left:0; border-radius: 3px 3px 15px 15px; background: #f2f2f2}
.album_wrap .photo_item {width:186px; margin: 0 auto; padding:0}
.album_wrap .photo_item .photo_bx {width:242px; margin:0 auto}
.album_wrap .photo_item .photo{position: relative; overflow: hidden; width:242px; height:144px; margin: 0 auto; border-radius:30px 30px 3px 3px; background:url(../images/main/none_img.png) no-repeat center center #e5e5e5; box-shadow:0 2px 3px rgba(0, 0, 0, 0.1)} 
.album_wrap .photo_item .photo img{width:242px; height:144px; border-radius:30px 30px 3px 3px}
.album_wrap .photo_item .date{padding: 8px 10px 6px; border-bottom: 1px solid #e1e1e1; font-size: 13px; color:#979797; text-align: right}
.album_wrap .photo_item .date span{padding-left:18px; background:url(../images/main/ico_notidate.png) no-repeat left top; background-size:13px 13px}
.album_wrap .photo_item .tit{display:block; overflow: hidden; margin: 12px auto 0; font-size:15px; color:#000; font-weight: 400; text-align:center; text-overflow:ellipsis; white-space:nowrap}
.album_wrap .photo_item:hover .tit span{color:#000; font-weight: 700; text-decoration: underline!important}
.album_wrap .photo_item .photo::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/ico_view.png) no-repeat 50% 50%; transition:all .8s}
.album_wrap .photo_bx:hover .photo::after{bottom:0}
.album_wrap .photo_item .photo:focus img,
.album_wrap .photo_item .photo:active img{display:block; width:190px; height:132px; box-sizing:border-box}
/*이동버튼*/
.album_wrap .btn_bx{position: absolute; top:0; right:35px; height: 33px; padding: 0 10px; box-sizing: border-box}
.album_wrap ul.btn_slide{display:flex; gap:5px;  box-sizing: border-box}
.album_wrap ul.btn_slide li button{display: block; width: 42px; height: 28px; padding: 5px 5px 3px; border-radius:12px; text-align: center; background:#ebebeb; transition: all .3s}
.album_wrap ul.btn_slide li button:hover{background: #f5f5f5}
/*더보기 버튼*/
.album_wrap .more{position: absolute; top:3px; right:5px}
.album_wrap .more a{background: #409fd6}

/*Food*/
#main_food{position: relative}
.food_wrap{margin: 15px 0 20px; box-sizing: border-box}
/*급식 타이틀*/
.food_wrap h3.tit{padding: 12px 0 8px 32px; background:url(../images/main/ico_food.png) no-repeat left center; font-size: 16px; font-weight: 600; color:#000}
.food_wrap h3.tit span{font-weight: 600}
/*내용*/
.food_wrap .food_bx{padding: 10px; border-radius:15px; background: #92cc5e}
.food_wrap .food_area{padding: 10px; border-radius: 12px; background: #fff}
.food_wrap .food_area .food_txt{overflow: hidden; /* height:34px; */ height:95px; line-height: 160%;font-size: 14px; padding: 0 80px 16px 10px; background: url(../images/main/food.png)no-repeat right bottom}
.food_wrap .food_area .food_txt:hover{text-decoration:underline}
.food_wrap .food_area .food_txt a{text-align: center; width:95%; box-sizing: border-box; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; /*-webkit-line-clamp: 2;*/ -webkit-line-clamp: 4; white-space: normal; text-overflow: ellipsis; text-align: left}

/*날짜*/
.food_wrap .food_date{position:relative; margin-bottom: 13px; padding:5px 8px 16px 40px; border-bottom: 1px solid #e2e2e2; font-size: 15px; font-weight: 600; color:#000; text-align: left; background:url(../images/main/food_cal.png)no-repeat left 8px top 1px} 
.food_wrap .food_date span{position:absolute; top:0; right:0; width:81px; height:26px; border: 1px solid #92cc5e; border-radius:13px; text-align: center; align-content: center; display: inline-block; margin-left: 5px; box-sizing: border-box}
/*축산물 이력번호 버튼*/
.food_num{position: absolute; bottom: 0}
.food_wrap .food_num a{position:relative; display: block; width: 384px; height: 52px; padding: 10px 10px 10px 48px; border-radius: 15px; align-content: center; background:url(../images/main/ico_foodnum.png)no-repeat left 20px center #ffcd61; box-sizing: border-box; font-size:15px; color:#fff; transition: all .3s}
.food_wrap .food_num a:hover{background:url(../images/main/ico_foodnum.png)no-repeat left 20px center #92cc5e;}
.food_wrap .food_num .btn_go{position: absolute; display:block; width: 80px; height:30px; top:10px; right: 10px; padding:8px 0px 8px 17px; border-radius:15px; text-align: left; align-content: center; background:url(../images/main/arw_foodnum.png)no-repeat right 10px center #fff; color: #000; box-sizing: border-box}
/*더보기 버튼*/
.food_wrap .more{position: absolute; top:3px; right:0; background: #92cc5e; border-radius: 50px}
 
/* Popup */ 
.pop_wrap {position:relative; height:133px; padding: 10px 15px; border-radius:30px 30px 0 0; background: #fff; box-shadow:0 -2px 2px rgba(0,0,0,0.05); box-sizing: border-box}
.pop_wrap .popup_bx{position:relative}
.pop_wrap h3.tit{font-size: 17px; font-weight: 600; color:#ffc55f; text-align: left}
.pop_wrap h3.tit span{display: inline-block; padding:15px 10px 18px 40px; background:url(../images/main/ico_pop.png) no-repeat top 8px left 3px}
.pop_wrap .pop_area{overflow: hidden; height: 73px; border-top:1px solid #e9e9e9; background: #fff; box-sizing: border-box}
/*팝업내용*/
.pop_wrap .pop_area .pop_tb{overflow: hidden; height:77px; margin: 10px 5px}
.pop_wrap .pop_list div{position:relative}
.pop_wrap .pop_list .slick-slide{height:20px}
.pop_wrap .pop_list .slick-slide::after{display: block; clear: both; content: ''; position: absolute; top:10px; left:1px; width: 6px; height: 6px; border-radius: 50px; background: #a6a6a6}
.pop_wrap .pop_list div div:hover::after{background:#1a1a1a}
.pop_wrap .pop_list div a{display:block; width:90%; height:27px; line-height:27px; padding-left:20px; font-size: 15px; font-weight: 400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop_wrap .pop_list div a:hover{text-decoration: underline}
/*이동 및 더보기 버튼*/
.pop_wrap .btn_bx{position: absolute; top:20px; right:18px; width: 152px; height: 25px} 
.pop_wrap .btn_bx .btn_slide{display: flex; gap:7px}
.pop_wrap .btn_bx .btn_slide li a{display: block; width:45px; height: 25px; text-align: center; align-content: space-around; background:#ebebeb; border-radius:12px; transition: all .3s}
.pop_wrap .btn_bx .btn_slide li a:hover{background: #f5f5f5}
.pop_wrap .btn_bx .btn_slide li a.popup_more{background: #ffc55f}
.pop_wrap .btn_bx .btn_slide li a.popup_more img{transition: all .3s}
.pop_wrap .btn_bx .btn_slide li a.popup_more:hover img{transform: rotate(180deg)}


/* Banner */
.conline03{margin:58px 0 0; padding:23px 0; background:#93a1ac}

.banner_wrap {position: relative; height:55px; box-sizing: border-box}
.banner_wrap .tit{padding:0; color:#fff; font-size: 16px; font-weight: 500}
.banner_wrap .tit span{padding: 10px 0}
/*배너*/
.banner_wrap .ban_item a {overflow: hidden; display: block; width: 214px; height:55px; margin: 0 auto; border-radius:10px; border:1px solid #ededed; background:#ccc}
.banner_wrap .ban_item img {margin: 0 auto; width:214px; height:55px; transition: all .5s}
.banner_wrap .ban_item:hover img{transform: scale(120%)}
/*이동버튼*/
.banner_wrap .btns{display:flex; gap:7px; position: absolute; left:0; bottom:0}
.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:32px; height:22px; border-radius: 50px; background-color: #6d7983; background-repeat: no-repeat;  background-position: center; transition: all .3s}
.banner_wrap .btns button:hover{background-color: #3c4951}
.banner_wrap .btns button:focus-visible{outline:2px solid #000}
.banner_wrap .btns button.ban_btn_prev{background-image:url(../images/main/ban_btn_v1.png)}
.banner_wrap .btns button.ban_btn_stop{background-image:url(../images/main/ban_btn_v2.png)}
.banner_wrap .btns button.ban_btn_next{background-image:url(../images/main/ban_btn_v3.png)}
.banner_wrap .ban_area{margin:-15px 0 0 118px}
/*더보기 버튼*/
.banner_wrap .more{position: absolute; top:-0px; left:80px; width: 12px; height: 12px}

/* Footer */
#footwrap .add .address .add_txt{display: inline-block; margin-bottom: 10px; color:#000; font-weight: 600}
#footwrap .add .address p.copy{color:#a3a3a4}
.address dl.add_num{margin-bottom: 5px; font-weight: 500; color:#515151; font-size: 13px}
.address dl.add_num dt{display: inline-block; padding: 0 21px; margin-bottom: 7px; border-radius: 50px; background:#353e45; color:#fff}


/************************************************************************ MOBILE LAYOUT ************************************************************************/
@media only screen and (max-width:1024px) {
.skip_navi .pc_skip{display:none}
/*Mainheader */
.headerwrap{height: 91px}
.header_top{position: relative; z-index:100}
.header_top::before{position: absolute; display: block; content: ''; top: 36px; width: 100%; height: 1px; background:#eee}
.header_top .header_box{position: relative; /*margin:10px 10px 0*/}
.logo_top a{position: absolute; top:47px; left:10px; display: block; width:129px; height: 31px; background: url(../images/main/logo_m_n.png) no-repeat left top; z-index: 10}
.logo_top img{display: none}

/* Mobile Menu */
.header_top .qmenu .mb_non{display: none}
.header_top .qmu_btnbox{position: absolute; top:46px; right:10px; z-index: 105; gap:10px}
.header_top .qmu_btnbox p a{ transition: all .5s}
.header_top .qmu_btnbox p.qmu_log a{display: block; width: 38px; height: 32px; background: url(../images/main/btn_login.png) no-repeat center #678c9d; border-radius: 10px; font-size: 0; text-indent: -9999px}
.header_top .qmu_btnbox p.qmu_log a:hover{background: url(../images/main/btn_login.png) no-repeat center #75c5ea}
.header_top .qmu_btnbox p.qmu_login a{display: block; width: 42px; height: 28px; background: url(../images/main/btn_login.png) no-repeat center #fff; border-radius: 50px; font-size: 0; text-indent: -9999px}
.header_top .qmu_btnbox p.qmu_login a:hover{background: url(../images/main/btn_login_a.png) no-repeat center #fff}
.header_top .qmu_btnbox p.qmu_logout a{display: block; width: 42px; height: 28px; background: url(../images/main/icon_logout.png) no-repeat 12px center #fff; border-radius: 50px; font-size: 0; text-indent: -9999px}
.header_top .qmu_btnbox p.qmu_logout a:hover{background: url(../images/main/btn_logout_a.png) no-repeat 12px center #fff}
.header_top .qmu_btnbox p.qmu_login a:hover,
.header_top .qmu_btnbox p.qmu_logout a:hover{background-color: #415057}
.header_top .qmu_btnbox p.qmu_btn img{margin-top: 2px; transform: scale(0.95)}
.header_top .qmu_btnbox p.qmu_btn a{box-shadow: none}
.header_top .qmu_btnbox > p{align-content: space-around}
.header_top .qmu_btnbox p.qmu_btn a{width: 38px; height: 32px;  border-radius: 10px}

/* Mobile fix */
.fixed{position:fixed; top:0; left:0; width:100%; min-width: 320px; transition: 0.6s}  
.fixed .header_top .header_btn{height: 44px; background:rgba(255,255,255,0.9); box-shadow:0 2px 3px rgba(0, 0, 0, 0.1)}
.fixed .qmu_popup{display: none}
.fixed .header_top::after{display: none}
.fixed .logo_top a{top:6px}
.fixed .header_top .qmu_btnbox{top:7px}
.fixed .header_top .qmu_btnbox p.qmu_login a{background: url(../images/main/btn_login_a.png) no-repeat center #415057}
.fixed .header_top .qmu_btnbox p.qmu_logout a{background: url(../images/main/btn_logout_a.png) no-repeat center #415057}
    
/* 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:1000; overflow-y:auto; box-sizing:border-box}
.gnb_topbx{background: #f2f2f2; padding: 0 10px 15px}
#gnb p.mb_gnbtit{display: block; height:50px; line-height: 50px; padding-left: 20px; border-radius: 0 0 20px 20px; background:#3b7f9b; font-size:20px; font-weight:500; color:#fff; box-shadow:0 2px 2px rgba(0, 0, 0, 0.03)}
#gnb p.mb_gnbtit span{padding-left:15px}
/*GNB_상단*/
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:10px; right:23px;  width: 28px; height: 28px; border-radius:28px; overflow: hidden; background: url(../images/main/btn_menu_close.gif) no-repeat left top; font-size:0; line-height:0; text-indent:-9999px}
/*GNB_메뉴버튼*/
#gnb .mbl_area{box-sizing: border-box}
#gnb .mbl_area .mbl_btntx{margin-top: 13px}
#gnb .mbl_area ul{display: flex; gap: 8px}
#gnb .mbl_area li {flex: 1; height: 34px; line-height: 34px}
#gnb .mbl_area li a {display:block; padding:0 10px; border:1px solid #eaeaea; border-radius:50px; color:#000; font-size: 14px; font-weight:600; text-align: right; box-sizing: border-box; box-shadow:0 2px 2px rgba(0, 0, 0, 0.03); font-weight: 500}
#gnb .mbl_area li:first-child a{background:url(../images/main/icon_login.png) no-repeat 10px center #fff}
#gnb .mbl_area li:last-child a{background:url(../images/main/icon_join.png) no-repeat 10px center #fff}
#gnb .mbl_area li a span{padding-left: 20px}
#gnb .mbl_area p.mbtn_srch a{display:block; padding:10px; margin-top: 10px; background:url(../images/main/icon_srch_m.gif) no-repeat 10px center;  border-radius:50px; border:1px solid #d5d5d5; color:#000; font-size: 14px; font-weight:600; text-align: right; font-weight: 500; box-sizing: border-box}
/*GNB_메뉴타이틀*/
#gnb .gnb_list{padding: 10px}
#gnb .gnb_list .depth1 > h2{margin-bottom: 10px}
#gnb .gnb_list .depth1 > h2 a{overflow: hidden; position: relative; display:block; line-height:48px; font-size:16px; font-weight:600; padding:0 0 0 15px; margin:0; width:auto; border-radius: 10px; background: #f7f7f7; color:#000; box-sizing: border-box}
#gnb .gnb_list .depth1 > h2 a::after{content: ""; display: block; clear: both; position:absolute; right:0; top:0; width: 27px; height: 38px; background:url(../images/main/bg_mn.gif) no-repeat center #dcdcdc}
#gnb .gnb_list .act > h2 a {position: relative; background:#62b3d4; border-color:#67c4c7; border-bottom: none; color:#fff}
#gnb .gnb_list .act > h2 a::after{background:url(../images/main/bg_mn_a.gif) no-repeat center; box-shadow:0 1px 2px rgba(0, 0, 0, 0.08)}
/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width: 100%; padding:10px; margin:-6px 0 10px; border-bottom:2px solid #62b3d4;  box-sizing: border-box}
#gnb .gnb_list .depth1 .navi_sub ul > li{margin-bottom: 7px; border-bottom: 1px solid #e2e2e2}
#gnb .gnb_list .depth1 .navi_sub ul > li:last-child{margin-bottom: 0; border-bottom: none}
#gnb .gnb_list .depth1 .navi_sub ul > li > a {position: relative; display:block; padding:3px 3px 3px 17px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; overflow: hidden; font-size: 14px; font-weight: 400; line-height:180%;}
#gnb .gnb_list .depth1 .navi_sub ul  > li > a::after{display: block; clear: both; content: ''; position: absolute; top:12px; left:5px; width: 6px; height: 6px; background: #9d9d9d; border-radius: 5px}
#gnb .gnb_list .depth1 .navi_sub ul  > li:hover a::after{background:#3b7f9b}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {color:#499ec1; font-weight:600}

/* Visual */
.visual{margin-bottom: 0; position: relative}
.visual .visual_wrap {position: relative; width: 100%;  margin: 0 auto}
.visual_item{height:373px}
.visual .item1{background:url(../images/main/v01_p_bg.gif) repeat-x center bottom}
.visual .item2{background:url(../images/main/v02_p_bg.gif) repeat-x center bottom}
.visual .item3{background:url(../images/main/v03_p_bg.gif) repeat-x center bottom}
.visual .visual_item::after{display: block; position: absolute; content: ''; clear: both; z-index: 1}
.visual .item1::after{width: 147px; height: 85px; bottom: 134px; left: 50%; margin-left:-72px; background: url(../images/main/v01_child.png)no-repeat; background-size: 147px 85px}
.visual .item2::after{width: 173px; height: 83px; bottom: 130px; left: 50%; margin-left:-87px; background: url(../images/main/v02_child.png)no-repeat; background-size: 173px 83px}
.visual .item3::after{width: 135px; height: 105px; bottom: 128px; left: 50%; margin-left:-63px; background: url(../images/main/v03_childm.png)no-repeat; background-size: 135px 105px}
.visual_item .img_box{display: block; position: relative; width:calc(100% - 20px); max-width:1867px; height:232px; margin:0 auto; border-radius: 30px; box-shadow: 2px 2px 2px rgba(0,0,0,0.1)}
.visual_item .img_box img{width: 100%; height: 352px}
.visual_item.item1 .img_box{background:url(../images/main/v01_m_n.jpg) no-repeat center top}
.visual_item.item2 .img_box{background:url(../images/main/v02_m_n.jpg) no-repeat center top}
.visual_item.item3 .img_box{background:url(../images/main/v03_m_n.jpg) no-repeat center top}
.visual_item .img_box::after,.visual_item .img_box::before{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-148px}
.visual_item.item1 .img_box::after{ left:-48px; background: url(../images/main/boder1_left.gif)no-repeat}
.visual_item.item1 .img_box::before{right:-48px; background: url(../images/main/boder1_right.gif)no-repeat}
.visual_item.item2 .img_box::after{left:-48px; background: url(../images/main/boder2_left.gif)no-repeat}
.visual_item.item2 .img_box::before{right:-48px; background: url(../images/main/boder2_right.gif)no-repeat}
.visual_item.item3 .img_box::after{left:-48px; background: url(../images/main/boder3_left.gif)no-repeat}
.visual_item.item3 .img_box::before{right:-48px; background: url(../images/main/boder3_right.gif)no-repeat}

/*비주얼 이동 블릿, 재생,일시정지*/
.slick-dots, .visual_wrap .btn_visual {display: none !important}

/*팝업레이어*/
.main_openpop .popup_on{position:absolute;top: 0;left: 10px;display:none;width: calc(100% - 20px); height: 292px;margin: 0 auto;text-align: center;border-radius:30px; background:rgba(244,244,244,0.85);box-shadow:5px 5px 10px rgba(0, 0, 0, 0.1);z-index: 95}
.popup_open.btn_popclose a{display:block;position: absolute; top:-83px; right: 0; width: 83px; height:22px;background:url(../images/main/mpop_close.png) center no-repeat;font-size:0;z-index:1000}
.main_openpop .mpop_open{display:block; position: absolute; top:-83px; right:10px; width:83px; height:22px; background:url(../images/main/mpop_open.png) center no-repeat; font-size:0; z-index:95}
    
/*고정 퀵메뉴*/  
.fixquick_menu{position: fixed; left:0; top:inherit !important; bottom: 0; min-width: 300px; height:47px; width:100%; background: #49585e; z-index:10}
.fixquick_menu .fixq_bx{display: flex; justify-content: space-between}
.fixquick_menu .fixq_tit{width: calc(100% - 15px)}
.fixquick_menu .fixq_tit a{display:block; position:relative;  height: 39px; ; margin:4px 0 0 10px; padding-left:38px; line-height:39px; align-content: center; border-radius: 13px; background: url(../images/main/ico_qmu_mb.png)no-repeat center left 12px #fff; font-weight: 700; box-sizing: border-box}
.fixquick_menu .fixq_tit a::after{display: block; position: absolute; content: ''; clear: both; right:7px; top:7px;  width: 38px; height: 26px; border-radius:13px; background: url(../images/main/btn_pop_v1.png)no-repeat center #eee}
.fixquick_menu .fixq_tit a span{font-weight: 500}
.fixquick_menu .btn_top{padding: 10px; align-content: center}
.fixquick_menu .btn_top  a{display:block; font-size: 0; width:27px; height:30px; background: url(../images/main/btn_qmutop_m.png)no-repeat}
.fixquick_menu ul{display:none; overflow:hidden; position: absolute; gap:8px; top: -245px; width: calc(100% - 40px); border: 2px solid #6d7983; border-radius: 13px; margin: 0 10px; padding: 8px; background: #fff; transform: scaleY(0);transform-origin: bottom;transition: transform 0.3s ease;}
.fixquick_menu ul.open {display: block;}
    
.fixquick_menu ul li{width: 100%; height: 37px; margin-bottom:8px; border-radius:8px; box-shadow:none; background: #f7f7f7}
.fixquick_menu ul li:last-child{margin-bottom: 0}
.fixquick_menu ul li::after{width: 20px; height: 21px; left:10px; top:7px; border-radius: 0; box-shadow: none}
.fixquick_menu ul li:hover::after{box-shadow: unset}
.fixquick_menu ul li:nth-child(1)::after{background:url(../images/main/fq_item01m.png)no-repeat}
.fixquick_menu ul li:nth-child(2)::after{background:url(../images/main/fq_item02m.png)no-repeat}
.fixquick_menu ul li:nth-child(3)::after{background:url(../images/main/fq_item03m.png)no-repeat}
.fixquick_menu ul li:nth-child(4)::after{background:url(../images/main/fq_item04m.png)no-repeat}
.fixquick_menu ul li:nth-child(5)::after{background:url(../images/main/fq_item05m.png)no-repeat}
.fixquick_menu ul li:nth-child(2) a span{display: flex; justify-content: right; align-items: end}
.fixquick_menu ul li:nth-child(2) a span.sub_qm{font-size: 11px}
.fixquick_menu ul li a{height:37px; margin-top:0px; padding: 5px 15px 5px 5px; text-align: right; font-size: 13px; line-height: 120%}
.fixquick_menu ul li span.fq_img{width: 30px; height: 30px; margin: 0 5px}
.fixquick_menu ul li span.fq_img img{width: 30px; height: 30px}
.fixquick_menu ul li span.fq_btn{height: 22px; padding: 4px 10px; margin-top: 7px; background-position:center right 10px} 
.fixquick_menu ul li a:hover span.fq_btn{background-position:center right 10px} 
br.mb_non{display: none}
.fixquick_menu .fixq_tit a{font-size: 16px}
.fixquick_menu .fixq_tit a span{font-size: 12px}
    
/* Footer */ 
#footwrap .foot_area{position:relative; padding: 0 10px}
#footwrap .foot_menu .foot_mlst{position: relative}
#footwrap .foot_menu .mb_menu{position: relative; margin:0 auto; text-align: center}
#footwrap .foot_menu .mb_menu li{position: relative; display: inline-block; padding:7px 10px; height: 25px; line-height: 25px}
#footwrap .foot_menu .mb_menu li::after {content:""; clear:both; display:block; position: absolute; top:13px; right:-3px; width: 1px; height: 10px; background: #c0c0c0}
#footwrap .foot_menu .mb_menu li:first-child {padding:6px 3px 6px 8px}
#footwrap .foot_menu .mb_menu li:first-child::after,
#footwrap .foot_menu .mb_menu li:last-child::after{background:none}
#footwrap .foot_menu .mb_menu li a {display:block; font-size: 13px; color:#2c2c2c}
#footwrap .foot_menu .mb_menu li.foot_home a{display:block;  padding:5px 0; width: 18px; height: 18px; line-height: 18px; background:url(../images/main/foot_home.png) no-repeat left 4px}
#footwrap .foot_menu .mb_menu li.foot_home a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
/*PC버튼*/
#footwrap .pc_menu{display: flex; flex-wrap: wrap; border-radius: 10px; background: #f4f4f4}
#footwrap .pc_menu li{flex: 1; min-width: 50%; border-bottom: 1px solid #e8e8e8; text-align: center; box-sizing: border-box}
#footwrap .pc_menu li.li_1{border-right: 1px solid #e8e8e8}
#footwrap .pc_menu li.li_2 a{color:#ffb432}
#footwrap .pc_menu li.li_3{border-bottom: none}
#footwrap .pc_menu li a{display: block; padding: 14px; color:#000}
#footwrap .pc_menu li.li_4, #footwrap .foot_menu .pc_menu  li.li_5{display: none}
/*주소*/
#footwrap .add_area{margin-top:15px}
#footwrap .add .address{width:auto; padding: 0 10px; line-height:160%; text-align: center; font-weight: 400; font-size: 13px}
#footwrap .add p.copy{padding: 10px ; line-height: 130%; background: #f9f9f9; font-weight: 400; font-size: 12px; color:#afafaf; text-align: center}
#footwrap .add_area .add{margin-bottom: 46px}
#footwrap .count_box{display:none}
#footwrap .btn_admin{display:none}
.address dl.add_num{margin-bottom: 10px}

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

/***Content  Common***/   
.mb_none{display: none}
.content_area{position: relative}
.conline02{margin:10px}
/*모바일 더보기버튼 공통*/
.content_area .conline .more a img{width: 12px; height: 12px; vertical-align: middle}
.pop_wrap .pop_list .slick-slide::after{top: 8px}

/* 팝업존 */
#main_popup{margin-top: -130px}
.pop_wrap{padding: 10px; margin: 0 10px; border-radius: 20px 20px 0 0; box-shadow: 0 -3px 1px rgba(0,0,0,0.05)}
.pop_wrap h3.tit{font-size: 17px}
.pop_wrap h3.tit span{padding:5px 10px 15px 26px; border-radius:20px 20px 0 0; background-size: 16px 19px; background-position: top 4px left 3px; font-size: 16px}
.pop_wrap .btn_bx{top: 15px; width: auto}
.pop_wrap .btn_bx .btn_slide{gap:8px}
.pop_wrap .btn_bx .btn_slide li a{width:40px; height: 20px}
.pop_wrap .pop_list div a{font-size: 14px}
.pop_wrap .pop_area .pop_tb{margin: 10px 0}
    
/* 이달의행사 */
#main_calendar{padding: 0 0 15px}
.cal_wrap{margin: 0 10px}
.cal_wrap .tit_bx{padding: 15px 10px 15px}
.cal_wrap h3.tit{padding: 3px 5px 5px 35px; background-size: 23px 23px}
.cal_wrap .tit_bx .cal_year span{margin-right:8px; font-size: 15px}
.cal_wrap .tit_bx .cal_year{margin-top: 12px; font-size: 16px}
.cal_wrap .more{top: 15px}
.cal_wrap .btn_bx{top: 58px; right: 10px}
.cal_wrap .cal_area{padding: 15px}
.cal_wrap .cal_list div a{height: 22px; line-height: 22px; width: 85%}
.cal_wrap .cal_list div a::after{top: 8px; left: 0}
    
/* 공지사항 */
#main_notice{margin: 0 10px}
.notice_box .notice_tb{height: auto}
.notice_box h3{width: calc(100% / 3); padding: 0; border-right: 1px solid #60b4c5}
.notice_box .noticetab03{border-right: none}
.notice_box .noticetab01{left:0; padding: 0}
.notice_box .noticetab02{left:33.3%; padding: 0}
.notice_box .noticetab03{right:0; padding: 0}
.notice_box h3 a,.notice_box h3.on a{background-image: none}
.notice_box .notice_tb ul{height: 106px; margin-bottom:5px; padding: 14px 15px}
.notice_box .notice_tb li.first_list{height:55px; top:-57px; padding:8px 10px 8px 45px; background-position:left 10px center; background-size: 28px 23px}
.notice_box .notice_tb li.first_list .date{ right: 15px; font-size: 13px}
.notice_box .notice_tb p.date{top:1px; right: 0; width:75px;background-size: 15px 15px; background-position: left top 4px}
.notice_box .notice_tb .noti_more a{display: block; padding: 8px 5px; border-radius: 5px 5px 15px 15px; background: #42a2b6; font-size: 13px; text-align: center; transition: all .3s; color: #fff}
.notice_box .notice_tb .noti_more a:hover{background: #3d8b9b}
    
/* 행사앨범 */
.album_wrap {min-height: auto; padding: 10px 0}
.album_wrap ul.btn_slide li button{width: 40px; height: 20px; padding: 2px}
.album_wrap .photo_area::before{bottom: -2px; height: 95px}
.album_wrap h3.tit{padding:5px 5px 5px 35px; background-size: 25px 24px}
.album_wrap .btn_bx{height: 20px; top:12px}    
.album_wrap .more{top: 12px; right: 0}
.album_wrap .photo_item .tit{font-size:14px; font-weight: 600}

/* 오늘의식단 */
.food_wrap{margin: 15px 0 10px; /*padding-bottom: 25px */}
.food_wrap h3.tit{padding:5px 5px 5px 35px; margin-bottom:13px; background-size: 25px 25px}
.food_wrap .more{right: 0}
.food_wrap .food_area .food_txt {height:34px}
.food_wrap .food_bx{padding: 10px; border-radius: 20px}
.food_num{bottom: -35px}
.food_num, .food_wrap .food_num a{width: 100%}
.food_wrap .food_date span{top: 0; font-size: 14px}
.food_wrap .food_date{padding: 5px 5px 15px 35px; background-size: 21px 21px; background-position: top 2px left 5px}


/* Banner */
.conline03{padding: 15px; height: 115px; box-sizing: border-box}
.banner_wrap .btns{left:inherit; bottom:inherit; right: 0; top: 0}
.banner_wrap .more{left: 56px; top: -3px}
.banner_wrap .ban_area{margin:15px 0 auto}
.banner_wrap .ban_item a {width: 215px; height:55px}
.banner_wrap .ban_item img {width: 215px; height:55px}
}

/************************************************************************ PC LAYOUT ************************************************************************/
@media only screen and (max-width:1360px) {
/* visual 버튼 */
.slick-dots{margin: 0 0 0 -600px}
.visual_wrap .btn_visual{margin: 0 0 0 -515px}
}

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

/* Main */
.headerwrap {position: relative; width: 100%; height: 152px; margin: 0 auto; background: #fff}
.headerwrap::before{display: block; position: absolute; content: ''; clear: both; width: 100%; height: 1px; top:75px; left:0; background:#f5f5f5}
.fixed .headerwrap::before{display: none}
.logo_top {position:absolute; top:16px; left:0} 
    
/* Mainheader */
.header_top{position: relative; width: 1300px; margin: 0 auto; padding-top: 75px}
.header_top .qmenu .pc_non{display: none}
.header_top .qmenu_tb{position: absolute; top:20px; right:0; height: 35px}
.header_top .mem_btnbx{display: flex; margin-right: 10px}
.header_top .qmu_mem a{display: block; width: 100px; height: 35px; line-height: 35px; background-position: 13px center; background-repeat: no-repeat; font-size: 16px; font-weight: 500; color:#373737; transition: all .5s; text-align: center;}
.header_top .qmu_mem a span{padding-left: 25px}
.header_top .qmu_mem.qmu_join a span{display: inline-block; padding-left: 35px}
.header_top .qmu_mem.qmu_log a{background-image:url(../images/main/icon_login.png)}
.header_top .qmu_mem.qmu_log a:hover{background-image:url(../images/main/icon_login_a.png)}
.header_top .qmu_mem.qmu_logout a{background-image:url(../images/main/icon_login.png)}
.header_top .qmu_mem.qmu_logout a:hover{background-image:url(../images/main/icon_login_a.png)}
.header_top .qmu_mem.qmu_join a{background-image:url(../images/main/icon_join.png)}
.header_top .qmu_mem.qmu_join a:hover{background-image:url(../images/main/icon_join_a.png)}
.header_top .qmu_mem:hover a{color:#75c5ea}
/*검색 및 사이트맵*/
.header_top .qmu_btnbox p.qmu_btn a{transition: all .3s}

/* 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:30px 0;  text-align: center; z-index: 500; text-align: center}
#gnb .depth1 h2 a{display: inline; text-align: center; font-size:18px; color: #000; font-weight:500}
#gnb .navi_sub{position: absolute; left:50%; top:70px; width:214px; margin-left:-118px; padding:10px; border-radius:20px; box-shadow:0 5px 5px rgba(0, 0, 0, 0.1); border:2px solid #93d2ef; background:#fff}
#gnb .navi_sub::before{content: ""; display: block; clear: both; position: absolute; top:-18px; left:50%; margin-left: -18px; width:36px; height:17px; background:url(../images/main/menu_layer.gif)no-repeat; z-index:1}
#gnb .navi_sub li:nth-child(odd){background:#f5f5f5; border-radius: 18px}
#gnb .navi_sub li a{display: block; line-height: 140%; padding:10px 5px 8px; text-align: center; font-size:15px; color:#000; font-weight: 500}
/*GNB-hover*/
#gnb .depth1.active .navi_sub{display: block; z-index: 30}
#gnb .depth1.active h2 > a{padding:10px 15px 8px; font-weight:600; color: #2f91be}
#gnb .navi_sub li:hover a,
#gnb .depth1.active .navi_sub .depth2 > li.active a{display: block; font-weight:600; border-radius: 18px; background: #75c5ea; color:#fff}

/* Visual */ 
.visual{margin-bottom: 0; position: relative}
.visual .visual_wrap {position: relative; width: 100%;  margin: 0 auto}
.visual_item{height:656px}
.visual .item1{background:url(../images/main/v01_p_bg.gif) repeat-x center bottom}
.visual .item2{background:url(../images/main/v02_p_bg.gif) repeat-x center bottom}
.visual .item3{background:url(../images/main/v03_p_bg.gif) repeat-x center bottom}
.visual .item1::after{display: block; position: absolute; content: ''; clear: both; width: 280px; height: 161px; bottom: 144px; left: 50%; margin-left:265px; background: url(../images/main/v01_child.png)no-repeat; z-index: 1}
.visual .item2::after{display: block; position: absolute; content: ''; clear: both; width: 280px; height: 161px; bottom: 107px; left: 50%; margin-left:-575px; background: url(../images/main/v02_child.png)no-repeat; z-index: 1}
.visual .item3::after{display: block; position: absolute; content: ''; clear: both; width: 241px; height: 186px; bottom: 135px; left: 50%; margin-left:220px; background: url(../images/main/v03_child.png)no-repeat; z-index: 1}

.visual_item .img_box{display: block; position: relative; width:calc(100% - 40px); max-width:1867px; height:352px; margin:155px auto 60px; border-radius: 30px; box-shadow: 2px 2px 2px rgba(0,0,0,0.1)}
.visual_item.item1 .img_box{background:url(../images/main/v01_p_n.jpg) no-repeat right top}
.visual_item.item2 .img_box{background:url(../images/main/v02_p_n.jpg) no-repeat left top}
.visual_item.item3 .img_box{background:url(../images/main/v03_p_n.jpg) no-repeat right top}
.visual_item .img_box img{width: 100%; height: 352px}
.visual_item.item1 .img_box::after{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-149px; left:50%; margin-left:-698px; background: url(../images/main/boder1_left.gif)no-repeat}
.visual_item.item1 .img_box::before{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-149px; left:50%; margin-left:-218px; background: url(../images/main/boder1_right.gif)no-repeat}
.visual_item.item2 .img_box::after{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-149px; left:50%; margin-left:-698px; background: url(../images/main/boder2_left.gif)no-repeat}
.visual_item.item2 .img_box::before{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-149px; left:50%; margin-left:-218px; background: url(../images/main/boder2_right.gif)no-repeat}
.visual_item.item3 .img_box::after{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-149px; left:50%; margin-left:-698px; background: url(../images/main/boder3_left.gif)no-repeat}
.visual_item.item3 .img_box::before{display: block; position: absolute; content: ''; clear: both; width: 48px; height: 48px; bottom:-149px; left:50%; margin-left:-218px; background: url(../images/main/boder3_right.gif)no-repeat}
/********************************************* Layout **********************************************/

/***Content  Common***/   
.pc_none{display:none}
.content_area{position: relative}
.conline01 {position:relative; width: 1300px; margin: 0 auto}
.conline01 .inside_line2{padding-top:30px; display: flex; justify-content: space-between}
.conline02{margin-top: 40px; background:url(../images/main/line2_bg.png) no-repeat bottom center}
.conline02 .bxline_wrap{display:flex; justify-content: space-between; position:relative; width: 1300px; margin: 0 auto}
.conline03{margin:58px 0 0; padding:23px 0; background:#93a1ac}

/*고정 퀵메뉴*/ 
.fixquick_menu{position: absolute; top:-129px; right:0; width: 841px}

/*더보기버튼 공통*/
.content_area .conline .more a{width: 45px; height: 25px; line-height: 28px; border-radius: 13px; box-sizing: border-box}
    
/* Notice */ 
#main_notice{padding:0; width: 830px}
.notice_box::after{height:56px}
.notice_box h3 {top:0; width:33.3%}
.notice_box h3 a {width:100%; height:53px; padding: 10px 20px; font-size:17px; text-align: left; align-content: center; border-right: 1px solid #60b4c5}
.notice_box .on a,.notice_box h3 a:hover{background:url(../images/main/noti_more1.gif)no-repeat right 15px center #3d8b9b; border-color: #3d8b9d}
.notice_box .noticetab01 {left:0; padding:0}
.notice_box .noticetab02 {left:33.3%}
.notice_box .noticetab03 {right:1px; padding:0}
.notice_box .noticetab01 a{border-radius: 15px 0 0 0}
.notice_box .noticetab03 a{border-radius: 0 15px 0 0}
.notice_box h3 a br{display: none}
/**공지사항_내용영역**/ 
.notice_box .notice_tb {height:133px; border-radius:0 0 15px 15px; background: #f5f5f5; box-sizing: border-box}
.notice_box .notice_tb ul {overflow:hidden; height:116px; margin-bottom:0; padding:20px 25px; border-radius: 0 0 15px 15px; background: #f5f5f5; box-sizing: border-box}
.notice_box .notice_tb li {height:30px; line-height: 150%} 
.notice_box .notice_tb li a{font-size:15px} 
.notice_box .notice_tb p.tit {width:auto; margin:0}
.notice_box .notice_tb p.tit a { width:80%}
.notice_box .notice_tb p.date {top:2px; width:78px; background-position:left top 6px; background-size: 13px 13px; font-size:14px}
/*공지사항_첫번째 리스트*/
.notice_box .notice_tb li.first_list{position: absolute; top:-61px; left: 0; width: 100%; margin: 0} 
.notice_box .notice_tb li.first_list .date{top:17px; right:25px; font-size: 14px}
.notice_box .notice_tb li.first_list .tit a{font-size: 15px; font-weight: 600}
.notice_box .notice_tb li.first_list .txt{display: block; height: 65px; padding: 15px; background: #f8f8f8; border-radius: 15px 15px 0 0; box-sizing: border-box}
.notice_box .notice_tb li.first_list .txt a{overflow: hidden; display: block; height: 38px; color:#676767; font-size: 14px}
.notice_box .notice_tb .noti_more a{display: none}

/*Calendar*/ 
#main_calendar{width: 433px; height: 246px}
.cal_wrap{margin:0} 
.cal_wrap .tit_bx{height: 114px}
.cal_wrap h3.tit{font-size: 17px}
.cal_wrap .cal_area{height: 130px; padding: 13px 22px}
/*연도표기*/
.cal_wrap .cal_area .cal_year{margin: 27px 0 10px; font-size: 35px}
.cal_wrap .cal_area .cal_year span{margin-top: 12px; font-size:15px}
/*리스트 스타일*/
.cal_wrap .cal_tb{height:auto}
.cal_wrap .cal_list div{margin:3px 0}  
/*이동버튼*/
.cal_wrap .btn_bx{right:14px}
.cal_wrap ul.btn_slide{height: 32px}
/*더보기 버튼*/
.cal_wrap .more{top:15px}

/*  Photo */
#main_album{width: 882px}
.album_wrap {min-height: 243px}
.album_wrap::after{display: none}
.album_wrap .photo_area::before{left:0; width: 880px}
/*앨범 타이틀*/
.album_wrap h3.tit{padding: 7px 0 7px 40px; font-size: 17px}
/*앨범 내용*/
.album_wrap .photo_area {height: 198px} 
.album_wrap .photo_area .photo_lst{margin: 0 15px}
.album_wrap .photo_item .date{padding:15px 10px} 
.album_wrap .photo_item .tit{margin: 20px auto 0}
/*이동버튼*/
.album_wrap .btn_bx{top:3px; right:45px}
.album_wrap ul.btn_slide li button{width: 45px; height: 25px; padding: 5px 5px 3px}
.album_wrap ul.btn_slide li img{vertical-align: top}
    
/*Food*/
#main_food{position:relative; width: 385px; height: 243px}
.food_wrap{margin: 0 0 20px}
/*급식 타이틀*/
.food_wrap h3.tit{margin-bottom:5px; padding: 10px 0 10px 43px; background-position:left 5px center; font-size: 17px}
/*내용*/
.food_wrap .food_bx{position:relative; box-sizing: border-box}
/*날짜*/
.food_wrap .food_date{font-size: 14px}  
/*급식사진*/
.food_wrap .food_img{position: absolute; top:10px; right: 10px} 

/* Popup */ 
#main_popup{position: absolute; top:-128px; left: 0; width: 432px; height: 133px}

/* Banner */ 
#main_banner{width: 1300px; margin: 0 auto}
.banner_wrap .tit{font-size: 17px} 
/*이동버튼*/
.banner_wrap .btns button{width:38px; height:22px}
.banner_wrap .ban_area{margin:-19px 0 0 140px}
/*더보기 버튼*/ 
.banner_wrap .more{top:-5px; left:96px}
.content_area .conline .banner_wrap .more a{line-height:30px}

/* Footer */
#footwrap {position: relative; height: 242px; background:url(../images/main/foot_bg.gif) repeat-x top left}
#footwrap::before{display: block; position: absolute; content: ''; clear: both; width: 100%; height: 36px; bottom:0; left:0; background: #f9f9f9}
#footwrap .foot_area {width:1300px; margin:0 auto; padding-top: 20px}
#footwrap .mb_menu {display:none}
#footwrap .pc_menu{display: flex; height:66px; gap:30px; padding: 15px 30px; align-items: center; border-radius: 15px; background: #f4f4f4; box-sizing: border-box}
#footwrap .pc_menu li {position: relative; text-align: center}
#footwrap .pc_menu li::after {content:""; clear:both; display:block; position: absolute; top:2px; right:-15px; width: 1px; height: 10px; background: #a2a2a2}
#footwrap .pc_menu li:last-child::after{background: none}
#footwrap .pc_menu li a {font-size:14px; color:#262626; font-weight:400}
#footwrap .pc_menu li.li_2 a{font-weight: 600; color: #ffb432}
#footwrap .pc_menu li a:hover{font-weight:600}
#footwrap .pc_menu li.li_2 a:hover{color:#ff8523}
#footwrap .add_area{position: relative; width: 1300px; margin: 0 auto; box-sizing: border-box}
#footwrap .add_area .address{margin:18px 0 0; padding-bottom: 25px}
#footwrap .add_area .add{font-size: 14px; line-height: 150%; text-align: left; font-weight: 500}
#footwrap .add_area .copy{color:#9d9d9d; font-size: 13px}
#footwrap .add_area .add br{display: none}
#footwrap .add .address .add_txt{background-position: left 2px}
.address dl.add_num dd{margin:-27px 0 0 60px}
.address dl.add_num dd li{position: relative; display: inline-block; padding: 0 13px; font-size: 14px; font-weight: 500}
.address dl.add_num dd li::after {content:""; clear:both; display:block; position: absolute; top:4px; right:-2px; width: 1px; height: 10px; background: #a2a2a2}
.address dl.add_num dd li:last-child::after{display: none}
/* Footer_count */ 
#footwrap .count_box {display:block; position: absolute; top:-6px; right:0}
#footwrap .count_box ul{width:237px; height:95px; border-radius:15px; overflow: hidden; border:2px solid #efefef; box-sizing: border-box}
#footwrap .count_box ul li{display: flex; flex: 1; justify-content: space-between; height:46px; align-items: center; padding:5px 10px 5px 20px; color:#272727; box-sizing:border-box}
#footwrap .count_box ul li:last-child{background: #efefef} 
#footwrap .count_box ul li .tit{padding-left:20px; background:url(../images/main/ico_count.png)no-repeat center left; color:#000; font-size: 14px; font-weight: 600}
#footwrap .count_box ul li .num{font-weight: 600}
#footwrap .count_box ul li.today .num{color:#168cf0}
/*Admin*/
#footwrap .btn_admin{position: absolute; top:-70px; right:235px}
#footwrap .btn_admin a{display: block; width:95px; height: 34px; line-height: 34px; border-radius:50px; border: 1px solid #c8c8c8; background-image:url(../images/main/icon_admin.png); background-position: 10px center; background-repeat: no-repeat; color: #868686; font-size: 14px; font-weight: 500; box-sizing: border-box; transition: all .3s}
#footwrap .btn_admin a span{margin-left: 40px}
#footwrap .btn_admin a:hover{border-color: #2e9ee0; background-image:url(../images/main/icon_admin_a.png); color: #2e9ee0}
/*FootLogo*/
#footwrap .foot_logo{position: absolute; top:-70px; right:25px}
}

/**** LOWSET FIX ****/
@media only screen and (min-width:1025px) and (max-width:1300px) {
#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 3px 5px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .headerwrap{height: 100px; background:none}
.fixed .header_top{padding-top: 37px}
.fixed .header_top .header_box::after{display: none}
.fixed .logo_top, .fixed .qmenu{display: none}
.fixed #gnb .depth1{padding: 23px 0}
.fixed .gnb_box{border-radius: 0; background:none; box-shadow:none}
.fixed ul.gnb_list{margin:0 auto; padding: 0}
.fixed #gnb .gnb_list{margin-left: 0}
.fixed #gnb .navi_sub{top:60px}
.fixed .qmu_popup{display: none} 
}

@media only screen and (min-width:1025px) {
.content_poplayer{ z-index: 1000}
.poplayer_btn span, .main_openpop .popup_open>a span{overflow:hidden; height:0; width:0; line-height:0; font-size:0; text-indent:-9999999px}
.main_openpop{position: relative; z-index:10}
.main_openpop .popup_on{position: absolute; top:-60px; right:15px; width: 252px; height: 289px}
.main_openpop .popup_layer_wrap{width:252px; height:290px; background:#f4f4f4; border-radius: 18px; box-shadow:3px 3px 3px rgba(0, 0, 0, 0.1); text-align: center}
.main_openpop .popup_open a{display:block; position: absolute; top:-69px; right:-15px; width:124px; height:49px; background:url(../images/main/pop_close.png) center no-repeat; z-index:15}
.main_openpop .mpop_open{display:block; position: absolute; top:-129px; right:0px; width:124px; height:49px; background:url(../images/main/pop_open.png) center no-repeat; z-index:11; font-size:0;}
}

@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) {
/*주소*/
.address dl.add_num dd li{display:block; padding:0; background:none}
.address dl.add_num dd li::after {display: none}
}

/**** keyframe ****/
@keyframes shake{
    0% {transform:translateY(3px)}
    50% {transform:translateY(-3px)}
    100% {transform:translateY(3px)}
}
@keyframes shake2{
    0% {transform:translateY(5px)}
    50% {transform:translateY(-5px)}
    100% {transform:translateY(5px)}
}
@keyframes shake3 {
    0%,40%,100% {transform:translatex(0)}
    20%,60% {transform:translatex(-5px)}
}
@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)}
}