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

/* 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 {overflow:hidden; position: relative; width: 100%; min-width: 320px; font-weight:500}
#content{position: relative}
#content h3.tit {font-size:1.385em; font-weight:700}
#content h3.tit span {display:inline-block; font-weight:700}

/*더보기버튼 공통*/
#content .btn_more {position: absolute}
#content .btn_more a {display: block; width:11px; height:11px; line-height:9px; text-align: center; transition: all .3s}
#content .btn_more img {width:11px; height:11px; transition: all .3s; vertical-align: middle}
#content .btn_more a:hover img {transform: rotate(180deg)}
#content .btn_more:hover a {transition:.3s}

.header_top .logo {position: absolute; top:22px; left:0}
.header_top .logo a {display: block}
.header_top .logo span {display: block; width:276px; height:48px; background:url(../images/main/logo.png) no-repeat 0 0; font-size:0}
.top_btn_area {position: absolute; top:26px; right:0; display:flex; align-items: center; gap:10px}
.qmenu {display:flex; justify-content:flex-end; align-items: center}
.qmenu > p a {display:block}
.qmenu > p a span{display:block; text-align:center}

.qmenu .qmu_btn {font-size:0}
.qmenu .qmu_btn a {display:block; width:36px; height:36px; border-radius:50%; margin-left:8px}
.qmenu .qmu_btn.btn_search a {background:#dcdcdc url(../images/main/btn_srch.png) no-repeat 50% 50%}
.qmenu .qmu_btn.btn_all a {background:#626262 url(../images/main/btn_allmn.png) no-repeat  50% 50%}
.qmenu_logbox {position: relative; font-size:1.154em}
.qmenu_logbox .log_box { display:none; position: absolute; top: 100%; left:50%; width:138px; margin-left:-69px; padding:0}
.qmenu_logbox .log_list {margin-top:5px; background:#ededed; border-radius:15px; padding:7px; box-shadow:0 3px 6px rgba(0,0,0,0.15)}
.qmenu_logbox .log_list li {margin-top:5px}
.qmenu_logbox .log_list li:first-child {margin-top:0}
.qmenu_logbox .log_list li a {display:block; padding:8px 10px; background:#fff; border-radius:50px; text-align: center}
.qmenu_logbox .log_list li:hover a {color:#397cf6; transition:.3s}
.qmenu_logbox .qmn_login a {display:block; width:118px; height:36px; line-height:34px; padding:0 15px; border:1px solid #dcdcdc; border-radius:50px; box-sizing: border-box; background:#fff url(../images/main/btn_log_arr.png) no-repeat right 10px top 50%}
.qmenu_logbox .qmn_login.qmn_logout a {background:#fff; text-align: center}

/* Visual */
.visual {position:relative; overflow:hidden}
.visual .visual_wrap {position:relative; width: 100%; margin: 0 auto}
.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 {position:relative; display: block; width:100%; height:347px}
.visual_wrap .visual_item > a {position: relative; display:block; height:347px}
.visual_wrap .visual_item > a:focus-visible {height:347px; outline:2px solid #000}
.visual .item1 {background:url(../images/main/v_m01.jpg) no-repeat center top} /* 메인1 */
.visual .item2 {background:url(../images/main/v_m02.jpg) no-repeat center top} /* 메인2 */
.visual .item3 {background:url(../images/main/v_m03.jpg) no-repeat center top} /* 메인3 */
.visual_item span.vbg_txt {font-size:0}

/* 비주얼 캐릭터 */
.vcharact {display:none}

/*재생,일시정지*/
.visual_wrap .btn_visual {position: absolute; top:180px; left:50%; margin-left:-62px}
.visual_wrap .btn_visual button {width:6px; height:9px; 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:180px; left:50%; margin-left:-129px}
.visual_wrap .slick-dots li {display:block; float: left; margin: 0 5px 0 0; box-sizing: border-box}
.visual_wrap .slick-dots li button{width:10px; height:5px; background:rgba(255,255,255,0.4); border-radius:50px; box-sizing: border-box; box-shadow:2px 1px 1px 1px rgba(0, 0, 0, 0.2)}
.visual_wrap .slick-dots li.slick-active button{width:28px; background: #fff}

/* 비주얼 퀵메뉴 */    
.vquick_wrap ul {display:flex; justify-content: space-between; flex-wrap:wrap; gap:8px}
.vquick_wrap ul li {width:calc(100% / 2 - 4px); position:relative; overflow:hidden; display:block; padding:2px; border-radius:10px; transition:.3s; box-sizing: border-box}
.vquick_wrap ul li:before {content:""; display: block; position: absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(180deg, #1374aa, #32d5cc); inset:0; z-index:1}
.vquick_wrap ul li:after {content:""; position:absolute; inset:0; background:linear-gradient(0deg, #ac50ef, #4cbefd); opacity:0; transition:opacity .6s ease-in-out; z-index:1}
.vquick_wrap ul li a {position:relative; display:flex; align-items:center; justify-content: space-between; height:100%; padding:5px 10px 5px 0; background:#fff; border-radius:8px; z-index:2; box-sizing: border-box; font-size:1.143em}
.vquick_wrap ul li:hover:after {opacity:1}
.vquick_wrap ul li span.vq_ico {width:50px; text-align: center}
.vquick_wrap ul li span.vq_ico img {height:32px}
.vquick_wrap ul li .vq_txt {transition:.3s}
.vquick_wrap ul li:hover .vq_txt {color:#8011d1; transition:.3s}

/* 퀵 */
#quick02 {display:none}

/***************** Layout ******************/
/***Content  Common***/   

 /*Notice*/
#main_notice .cont_toparea {padding:28px 0 20px; margin-bottom:30px; border-bottom:1px solid rgba(2552,255,255,0.3)}
#main_notice .cont_toparea h3.tit {text-align: center}
#main_notice .cont_toparea h3.tit span {padding:2px 20px 2px 34px; background:url(../images/main/blt_notice_tit.png) no-repeat 0 50%; color:#fff}
#main_notice .btn_more {display: block; top:34px; left:50%; margin-left:58px}
.notice_wrap {position: relative}
.notice_box .notice_tb {overflow: hidden; height:137px}
.notice_box .notice_tb ul {overflow:hidden; height:137px}
.notice_box .notice_tb li {position:relative; min-height:36px; line-height:36px; box-sizing: border-box}
.notice_box .notice_tb li:hover{text-decoration: underline}
.notice_box ul li .tit {width:auto; margin:0}
.notice_box ul li .tit a {display:block; overflow:hidden; width:70%; text-overflow:ellipsis; white-space:nowrap; color:#262626; font-weight:500; font-size:1.231em; color:#fff}
.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:0; width:70px; height:20px; line-height:20px; margin-top:-10px; text-align:right; font-size:1.077em; font-weight:400; color:#fff; opacity:0.25}

/* 예약 신청 */
#content .main_reserv h3.tit span {color:#1d5ebd}
.main_reserv {position: relative; margin:20px 0}
.main_reserv .btn_slide {display:flex; position:absolute; top:0; right:0; justify-content: space-between; align-items: center; box-sizing: border-box; border:1px solid #d8d8d8}
.main_reserv .btn_slide li {width:calc(100% / 3)}
.main_reserv .btn_slide li a {display:block; width:36px; height:20px; line-height:20px; text-align: center; border-left:1px solid #d8d8d8; background:#fff}
.main_reserv .btn_slide li:first-child a {border-left:0}
.main_reserv .btn_slide li a img {vertical-align: middle}
.main_reserv .btn_more {top:3px; left:76px}
.main_reserv .cont_toparea {margin-bottom:18px}
.reserv_tb {overflow:hidden; position:relative; border:1px solid #d8d8d8; min-height:166px; box-sizing:border-box}
.reserv_tb:after {content:""; display:block; position: absolute; top:0; left:0; width:1px; height:100%; background:#fff}
.reserv_tb .reserv_ibox {border-left:1px solid #d8d8d8}
.reserv_tb .reserv_ibox a {display: block; position:relative; padding:13px 16px; height:118px; box-sizing: border-box; word-break: keep-all}
.reserv_tb p.nodata {width:100%; align-content:center; margin:30px 0 0; padding:78px 0 0; box-sizing:border-box; text-align:center; font-size:1.2em; background:url(../images/main/bg_reserv_nodata.gif) no-repeat 50% 0}

.reserv_ibox .rcate {display: inline-block; padding:3px 11px; background:#e1e4ea; border-radius:5px}
.reserv_ibox .reserv_tit {line-height:120%; min-height:44px; padding:5px 50px 6px 0; font-size:1.308em; font-weight:600; word-break:keep-all; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;line-height:1.2;max-height:2.2em; margin-bottom:6px}
.reserv_ibox .reserv_target {display:block; color:#818181; margin-top:5px}
.reserv_ibox .btn_reserv {position:absolute; bottom:12px; right:12px; width:25px; height:25px; border-radius:50%; background:#7c7c7c url(../images/main/btn_reserv_arr.png) no-repeat 50% 50%; font-size:0; transition:.3s ease-in-out}

.reserv_ibox a:before {content:""; display:block; position:absolute; bottom:0; right:0; width:60px; height:60px; border-radius:60px 0 0 0; transition:.3s ease-in-out; opacity:0.1}

/* ribox1 주중 , ribox2 주말, ribox3 방학, ribox4 연중 ribox5 특별 */
.ribox1 .rcate {background:#ff51a2; color:#fff}
.ribox1 a {background:url(../images/main/bg_reserv_ico01.png) no-repeat right 15px top 15px}
.ribox1 a:hover .btn_reserv {background-color:#ff51a2}
.ribox1 a:hover:before {background:#ff51a2}
.ribox2 .rcate {background:#8c5ada; color:#fff}
.ribox2 a {background:url(../images/main/bg_reserv_ico02.png) no-repeat right 15px top 15px}
.ribox2 a:hover .btn_reserv {background-color:#8c5ada}
.ribox2 a:hover:before {background:#8c5ada}
.ribox3 .rcate {background:#5d92ef; color:#fff}
.ribox3 a  {background:url(../images/main/bg_reserv_ico03.png) no-repeat right 15px top 15px}
.ribox3 a:hover .btn_reserv {background-color:#5d92ef}
.ribox3 a:hover:before {background:#5d92ef}
.ribox4 .rcate {background:#12b39a; color:#fff}
.ribox4 a {background:url(../images/main/bg_reserv_ico04.png) no-repeat right 15px top 15px}
.ribox4 a:hover .btn_reserv {background-color:#12b39a}
.ribox4 a:hover:before {background:#12b39a}
.ribox5 .rcate {background:#fcb200; color:#fff}
.ribox5 .reserv_tit span {color:#fcb200}
.ribox5 a {background:url(../images/main/bg_reserv_ico05.png) no-repeat right 15px top 15px}
.ribox5 a:hover .btn_reserv {background-color:#fcb200}
.ribox5 a:hover:before {background:#fcb200}
/*
.ribox1 .reserv_tit span {color:#ff539e}
.ribox2 .reserv_tit span {color:#8c5ada}
.ribox3 .reserv_tit span {color:#5d92ef}
.ribox4 .reserv_tit span {color:#12b39a}
*/

/* 프로그램 안내 */
#content .main_program h3.tit span {color:#1d5ebd}

.main_program {position:relative; margin:20px 0}
.main_program .btn_more {top:3px; right:0}
.main_program .cont_toparea {margin-bottom:18px}
.main_program .pro_lst {display: flex; justify-content: space-between; gap:20px}
.main_program .pro_lst li {width:calc(100% / 4 - 10px)}
.main_program .pro_lst li a {display: block; height:86px; padding:18px; border-radius:10px; font-size:1.308em; font-weight:600; text-shadow:0 3px 6px rgba(0,0,0,0.1); color:#fff; box-sizing: border-box}
.pro_lst .pro_lst01 a {background: url(../images/main/bg_pro_charact01.gif) no-repeat right 0 bottom 0, url(../images/main/bg_program01.gif) repeat-x left 0 bottom 0}
.pro_lst .pro_lst02 a {background: url(../images/main/bg_pro_charact02.gif) no-repeat right 0 bottom 0, url(../images/main/bg_program02.gif) repeat-x left 0 bottom 0}
.pro_lst .pro_lst03 a {background: url(../images/main/bg_pro_charact03.gif) no-repeat right 0 bottom 0, url(../images/main/bg_program03.gif) repeat-x left 0 bottom 0}
.pro_lst .pro_lst04 a {background: url(../images/main/bg_pro_charact04.gif) no-repeat right 0 bottom 0, url(../images/main/bg_program04.gif) repeat-x left 0 bottom 0}

.prolst_box {display: flex; align-items: center; height:100%}
.prolst_tit {padding-right:36px; line-height:120%; position: relative; text-shadow:0 3px 6px rgba(0,0,0,0.2); font-weight:600}
.prolst_tit span {display: block}
.prolst_tit:after {content:""; display: block; position: absolute; top:50%; right:0; width:25px; height:25px; margin-top:-12px; background:rgba(0,0,0,0.3) url(../images/main/btn_pro_arr.png) no-repeat 50% 50%; border-radius:50%}
.main_program .pro_lst li:hover .prolst_tit:after {animation:effect 2s ease-in-out infinite }
.main_program .pro_lst li:hover .prolst_tit span {color:#ffe81b; transition:.3s}

/* 팝업 고정 영역 */
.line_color01 .main_fixpop {background:#ebe6fd}
.line_color02 .main_fixpop {background:#dde3ed}
.line_color03 .main_fixpop {background:#dbe7e6}
.main_fixpop {position: relative; padding:20px 10px 15px}
.popup_wrap {position: relative}
.popup_wrap .cont_toparea {position: relative}
.popup_wrap .cont_toparea h3.tit {text-align: center; padding:0 5px 0 40px}
.popup_wrap .cont_toparea h3.tit span {padding:2px 22px 2px 30px; background:url(../images/main/blt_popup_tit.png) no-repeat 0 50%; color:#171717}
.popup_wrap .btn_more {display: block; top:7px; left:50%; margin-left:65px}
.main_fixpop .popup_layer_wrap {position:relative}
.main_fixpop .popup_layer {position: relative; box-sizing: border-box}
.main_fixpop .popup_imgsize {display:block; width:318px; height:256px; margin:15px auto 13px; background:#fff url(../images/main/nopopup.gif) no-repeat 50% 50%; border:1px solid #afb9b8; box-sizing: border-box; box-shadow:0px 3px 6px 1px rgba(0, 0, 0, 0.08)}
.main_fixpop .popup_imgsize a {display:block;}
.main_fixpop .popup_imgsize img {width:316px; height:254px}
.popup_layer_wrap button.slick-arrow {display:none !important}
.pop_zone {display: flex; justify-content: space-between; align-items: center; padding:0 5px}
.pop_count {display:flex; font-size:1.231em; font-weight:600; color:#787878}

.pop_count .custom_paging {position:relative}
.pop_count .custom_paging + .custom_paging{display:none !important;}
.pop_count .custom_paging li {position:absolute; width:100%; left:0; top:-13px; opacity:0; font-weight:600; color:#787878}
.pop_count .custom_paging li.slick-active{opacity:1;}
.pop_count .custom_paging li span {display:inline}
.pop_count .custom_paging li span.num {color:#3d51ee; font-weight:800; font-size:1.375em}

.pop_zone .btn_slide {display:flex; justify-content: space-between; align-items: center; box-sizing: border-box; border:1px solid #d8d8d8}
.pop_zone .btn_slide li {width:calc(100% / 3)}
.pop_zone .btn_slide li a {display:block; width:42px; height:26px; line-height:26px; text-align: center; border-left:1px solid #d8d8d8; background:#fff}
.pop_zone .btn_slide li:first-child a {border-left:0}
.pop_zone .btn_slide li a img {vertical-align: middle}

.pop_zone .btn_slide {display:flex; justify-content: space-between; align-items: center; box-sizing: border-box; border:1px solid #d8d8d8}
.pop_zone .btn_slide li {width:calc(100% / 3)}
.pop_zone .btn_slide li button {display:block; width:36px; height:20px; line-height:19px; text-align: center; border-left:1px solid #d8d8d8; background:#fff}
.pop_zone .btn_slide li:first-child button {border-left:0}
.pop_zone .btn_slide li button img {vertical-align: middle}


/* 팝업존 */
.pop_area {overflow: hidden; position: relative; width:100%; box-sizing: border-box; }
.pop_area .cont_toparea {position:relative; display: flex; justify-content: space-between; position: relative; background:#fff; padding:5px 30px 5px 5px; font-size:1.231em}
.pop_tb {overflow: hidden; height:60px; margin-top:5px}
.pop_list .poplst_txt {position:relative; height:30px; border-bottom:1px solid rgba(0,0,0,0.2)}
.pop_list .poplst_txt a {display:block; width:95%; height:30px; line-height:30px; padding:0 7px; color:#222; font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pop_list .poplst_txt:last-child {border-bottom:0}
.pop_area .cont_toparea  .btn_more {top:11px; right:10px}
.pop_area .btn_slide {display:flex; justify-content: space-between; align-items: center; box-sizing: border-box; gap:6px}
.pop_area .btn_slide li {width:calc(100% / 3)}
.pop_area .btn_slide li button {display:block; padding:0 3px; height:11px; text-align: center; background:none}
.pop_area .btn_slide li button img {vertical-align:super}

/* 유관기관 */
#footwrap .fm_site {position:relative; background:#767880; padding:12px 10px}
#footwrap .fm_site > ul {display: flex; justify-content: space-between; gap:4px}
#footwrap .fm_site > ul > li {position: relative; width:calc(100% / 2 - 2px) ; box-sizing: border-box}
.fm_site .site_tit {position: relative; width:100%; height:32px; line-height:32px; margin: 0 auto; box-sizing: border-box}
.fm_site .site_tit a { display:block; height:32px; padding-left:10px; padding-right:25px; background:#fff; box-sizing:border-box; font-weight:500; color:#000; border-radius:5px}
.fm_site .site_tit .fm_arr {display: block; content: " "; clear: both; position:absolute; top:50%; right:5px; width:20px; height:7px; margin-top:-3px; text-align: center; box-sizing: border-box}
.fm_site .site_tit .fm_arr img {transition:.3s ease-in-out}
.fm_site .site_tit.active .fm_arr img {transform: rotate(180deg)}
.fm_site .site_tit.active a {background:#eee; border-radius:0 0 5px 5px}
.fm_site .site_lst {overflow:hidden; display:none; position: absolute; height: 0; width:100%; background:#fff; box-sizing:border-box; border-radius:5px 5px 0 0; box-shadow:0px -2px 4px rgba(0, 0, 0, 0.1)}
.fm_site .site_lst ul {overflow-y:auto; height:140px; padding:5px}
.fm_site .site_lst ul li {padding:4px 0; border-bottom:1px solid #ccc}
.fm_site .site_lst ul li:last-child{padding-bottom: 0; border-bottom: none}
.fm_site .site_lst ul li a {position:relative;  display:block; overflow:hidden; width:100%; padding:7px 32px 7px 10px; text-overflow:ellipsis;  white-space:nowrap; font-weight:400; color:#000;  box-sizing: border-box}
.fm_site .site_lst ul li a:after {content:"GO"; display:block; position:absolute; top:50%; right:0; width:30px; height:20px; line-height:20px; margin-top:-10px; background:#353e4b;border-radius:50px 50px; text-align: center; color:#fff; font-size: 11px}
.fm_site .site_lst {display: block; bottom:calc(100%); left:0}
.fm_site .site_lst ul li:hover a {color:#000; font-weight:400}
.fm_site .site_lst ul li:hover a:after {background:#3782df; font-weight:500; transition:all .3s}

/* Footer */
#footwrap {position: relative; background:#2a2d40 url(../images/main/flogo.png) no-repeat left 50% bottom 10px; padding-bottom:80px}
/*PC버튼*/
#footwrap .pc_menu {display:flex; justify-content:center; padding:13px 10px; text-align:center; border-bottom:1px solid rgba(255,255,255, 0.2)}
#footwrap .pc_menu li {padding: 0 15px; background:url(../images/main/bg_foot_dott.png) left center no-repeat; text-align: center}
#footwrap .pc_menu li a {color:#fff; font-weight:500; font-size:1.077em}
#footwrap .pc_menu li.li_2 a {color:#eec432}
#footwrap .pc_menu li:first-child {background: none; padding-left:0}
#footwrap .fadmin {display:none}
#footwrap address .add_txt {display:inline-block; line-height:130%; color:#fff; padding:3px 0 3px 20px; background:url(../images/main/blt_footer_add.png) no-repeat 0 50%; word-break: keep-all; font-size:1.077em}
#footwrap address .add_tel {display:block; color:#fff}
.count_box {display: none}
.add_wrap address {margin:10px 0}
.add_wrap {text-align: center}
#footwrap .copy {color:rgba(255,255,255,0.3); padding:0 55px; word-break: keep-all; font-weight:400}



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

/* Layout */
#mainheader {position: relative; z-index:100}
.headerwrap {position: absolute; top:0; left:0; width: 100%; min-width: 320px; margin: 0; text-align: left}
.fixed .headerwrap {position:fixed; box-shadow:0 2px 5px rgba(0,0,0,0.1); background:rgba(0,0,0,0.5); height:54px}
.header_top {position: relative}
.header_top .logo  {top:10px; left:10px}
.header_top .logo a span {width:200px; height:34px; background-size:200px auto !important}
.top_btn_area {top:12px; right:10px}
.qmenu {gap:8px}
.qmenu .qmu_btn {font-size:0}
.qmenu .qmu_btn.btn_all a {display:block; width:29px; height:29px; margin:0; background-color:rgba(255,255,255,0.2); background-size:16px auto}  
.qmenu_logbox .qmn_login a {width:29px; height:29px; padding:0; font-size:0; background:#fff url(../images/main/btn_log_in.png) no-repeat 50% 50%}
.qmenu_logbox .qmn_login.qmn_logout a {background:#fff url(../images/main/btn_log_out.png) no-repeat 50% 50%}
.qmenu_logbox .log_box {width:120px; margin-left:-60px}
    
/* GNB */
.mobile_bg{z-index: 500 !important}
#gnb {display: none; position:fixed; top:0; right:0;  width:250px; height:100%; min-height:100%; background:#fff; z-index:501; overflow-y:auto; box-sizing:border-box}

/* GNB_상단 */
#gnb p.mb_gnbtit {display: block; height:72px; padding:18px 0 0 15px; box-sizing: border-box; font-size:1.385em; font-weight:600; color:#fff; background:linear-gradient(90deg, #b360fa, #8b6efa)}
#gnb .allbtnclose .closebtn {display:block; position:absolute; top:15px; right:10px; width:24px; height:24px; overflow: hidden; background:url(../images/main/btn_gmn_close.png) no-repeat 50% 50%; line-height:0; text-indent:-9999px}
/*GNB_메뉴버튼*/
#gnb .mbl_area {margin:-20px 5px 0; box-sizing: border-box; background:#fff; padding:5px 5px 0; border-radius:5px}
#gnb .mbl_area ul {display: flex; justify-content: space-between; align-items: center}
#gnb .mbl_area li {width:calc(100% / 2 - 3px) }
#gnb .mbl_area li:first-child {border:0}
#gnb .mbl_area li a {display:block; color:#000; font-size:1.077em; font-weight:500; text-align:center; background:#efefef; padding:8px; box-sizing: border-box; border-radius:5px}
#gnb .mbl_area li:hover a {background:#3f51b5; transition:.3s; color:#fff}
#gnb .mbl_area li:first-child:hover a {background:#7f55ca}

/* GNB_메뉴타이틀 */
#gnb .gnb_list {padding:0 10px 40px; background: url(../images/main/logo.gif) no-repeat left 50% bottom 0; background-size:220px auto}
#gnb .gnb_list .depth1 > h2 {position:relative}
#gnb .gnb_list .depth1 > h2 a {display:block; min-height:44px; font-size:16px; font-weight:500; padding:16px 40px 16px 10px; margin:5px 0; width:auto;  color:#5d5d5d; box-sizing: border-box; background:#f0f0f0; border-radius:5px}
#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:-12px; width:23px; height:23px; background:url(../images/main/blt_mnarr_off.png) no-repeat 50% 50%; border-radius:5px}
#gnb .gnb_list .act > h2 a {position: relative; background:#314354; color:#fff}
#gnb .gnb_list .act > h2 a:before {background:url(../images/main/blt_mnarr_on.png) no-repeat 50% 50%; right:8px}

/*GNB_메뉴세부*/
#gnb .gnb_list .depth1 .navi_sub {display:none; position: relative; width:100%; box-sizing: border-box; margin:5px 0; overflow: hidden}
#gnb .gnb_list .depth1 .navi_sub ul {margin:0 10px}
#gnb .gnb_list .depth1 .navi_sub ul > li {position:relative; padding-left:10px}
#gnb .gnb_list .depth1 .navi_sub ul > li:after {content:""; display: block; position: absolute; top:10px; left:0; width:4px; height:4px; background:#919191; border-radius:50%}    
#gnb .gnb_list .depth1 .navi_sub ul > li > a {line-height:120%; display:block; padding:5px 0; font-size:1.077em; font-weight: 400; color:#353535}
#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 a {text-decoration: underline; font-weight:700; color:#000}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover:after {background:#314354}
#gnb .gnb_list .depth1 .navi_sub ul > li:hover > a {color:#353535}
    
/* visual */
.visual .visual_wrap {margin: 0 auto}
.visual .visual_item {position:relative; width:auto; margin: 0 auto}
.visual .visual_item > a {display: block}
.visual .visual_item:before {height:147px}

 
/********************************************* Layout **********************************************/
/***Content  Common***/   
.mb_none{display: none}
#content .btn_more a {width:9px; height:9px}
#content .btn_more img {width:9px; height:9px; vertical-align: super}
    
/* common */
.content_area {margin:0 10px; box-sizing: border-box}
.content01 {position: relative; margin:0}
.content02 {margin:0}
.content02 .cont_wrap {margin:0 10px}

/* 비주얼 퀵메뉴 */   
.vquick_wrap {width:auto; margin:0; padding:20px 10px} 

/* notice */
.line_color01 #main_notice {background:#6f4def}
.line_color02 #main_notice {background:#0c3a7d}
.line_color03 #main_notice {background:#005751}
#main_notice .cont_toparea {padding:0; margin-bottom:15px}
#main_notice .cont_toparea h3.tit {text-align: left; padding:12px 0 10px}
#main_notice .cont_toparea h3.tit span {padding:6px 10px 6px 26px; background-size:20px auto}
#main_notice .btn_more {top:20px; left:inherit; margin:0; right:10px}
#main_notice .notice_wrap {padding:0 10px 20px}
.notice_box .notice_tb {height:82px}
.notice_box .notice_tb ul {height:82px}
.notice_box .notice_tb li {min-height:28px; line-height:28px}
.notice_box ul li .tit a {font-size:1.077em}
.notice_box ul li .date {font-size:1em}
    
/* 예약신청 */
.reserv_tb .reserv_ibox a {min-height:118px; padding:13px 16px}
.reserv_tb {min-height:120px}
.reserv_ibox .reserv_tit {padding-right:60px; min-height:34px; padding-bottom:2px; line-height:1.1; max-height:1.2em; margin-bottom:5px}
.reserv_tb p.nodata {background-size:48px auto; padding:55px 0 0; margin:22px 0 0; font-size:1.071em}
    
/* 프로그램 안내 */
.main_program .pro_lst {flex-wrap: wrap; gap:10px}
.main_program .pro_lst li {width:calc(100% / 2 - 5px)}
.main_program .pro_lst li a {background-size:auto 116px, auto 116px}

/* 팝업  */
.popup_wrap .cont_toparea h3.tit {padding:0}
.popup_wrap .btn_more {top:5px; margin-left:45px}
.main_fixpop .popup_imgsize {width:282px; height:225px; margin:15px auto 0}
.main_fixpop .popup_imgsize img {max-width:inherit; width:280px; height:225px}
.pop_zone {width:282px; margin:18px auto; padding:0}
.pop_area .cont_toparea {padding:9px 28px 9px 10px; font-size:1.077em}
.pop_area .btn_slide {gap:5px}
.pop_area .btn_slide li {height:10px}
.pop_area .btn_slide li button {height:10px}
.pop_area .btn_slide li button img {vertical-align:super}

/*Userquick*/
#quick02 {display: none}
    
/* 유관기관 */
#footwrap .fm_site > ul {flex-wrap:wrap; gap:4px}
.fm_site .site_tit {width:100%}
.fm_site .site_lst {width:100%; margin:0}   
    
/* Footer */
#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; border-bottom:1px solid rgba(255,255,255, 0.2)}
#footwrap .foot_menu .mb_menu li {width:calc(100% / 3); margin:0; height:30px; line-height:30px; border-left:1px solid rgba(255,255,255, 0.2)}
#footwrap .foot_menu .mb_menu li:first-child {width:10%; border:0}
#footwrap .foot_menu .mb_menu li a {display:block; font-size: 13px; font-weight: 400; color:#fff}
#footwrap .foot_menu .mb_menu li img {vertical-align: middle}


    
}


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

/* Layout */
#wrap {min-width:1420px}
.top_bar_fix{position:absolute; top:0; left:0; width:100%; z-index:1000; transition: 0.6s}
.headerwrap {position:relative; width: 100%; height:92px; margin: 0 auto}
.header_top {position: relative; width:1400px; margin: 0 auto}
    
/* GNB */
.gnb_box {max-width:1400px; margin: 0 auto; box-sizing: border-box;  padding:0 362px}
.gnb_list {display: flex; justify-content:center}
#gnb .allbtnclose, #gnb .mbl_area, #gnb .gnb_wrap {display: none}
#gnb .mb_gnbtit, #gnb p.gnb_mbtxt {display: none}
#gnb .depth1 {position: relative; float:left; width:25%; text-align: center; font-weight:500}
#gnb .depth1 h2 a {display:block; padding:36px 0; text-align: center; font-size:20px; font-weight:600; color:#fff}
#gnb .depth1.active h2 a {color:#fdee68}
#gnb .navi_sub {position: absolute; left: 0; top:93px; width: 100%; height:400px; border-left:1px solid #dcdcdc; font-size:16px; background:#fff;
opacity:0;  pointer-events:none;  transform:translateY(10px);  transition:opacity .35s ease, transform .35s ease;  z-index:100}
#gnb .navi_sub ul {overflow: hidden; background:#fff}
#gnb .navi_sub li {display: block; line-height: 180%; width:calc(100% - 16px); margin:10px auto; text-align: center}
#gnb .navi_sub a:hover {background:#b04ec4; border-radius:5px; color:#fff}
#gnb .navi_sub li a {display: block; line-height: 130%; padding:10px; text-align: center; font-size:16px; font-weight:500; letter-spacing:-0.3px; word-break:keep-all; color:#4d4d4d}
#gnb .depth1.last .navi_sub {border-right:1px solid #dcdcdc}
.gnb_bg {overflow:hidden; width: 100%; height:400px; position: absolute; left: 0; top:92px;  background:#f2f2f2; box-shadow: 0 6px 8px rgba(0, 0, 0, .1); opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .35s ease, transform .35s ease; z-index:99; border-top:1px solid #dcdcdc}
    
/* 대메뉴 hover */
.headerwrap.on {background:#fff}
.headerwrap.on .logo span {background:url(../images/main/logo_gmn.png) no-repeat 0 0}
.headerwrap.on #gnb .depth1 h2 a {color:#000}
.headerwrap.on #gnb .depth1.active h2 a, .headerwrap.on #gnb .depth1 h2:hover a {color:#b04ec4}
.headerwrap.on .gnb_bg {opacity:1; pointer-events:auto;  transform:translateY(0)}
.headerwrap.on #gnb .navi_sub {opacity:1;  pointer-events:auto; transform:translateY(0)}
    
/* visual */
.visual .visual_wrap {max-width:1980px}
.visual .visual_item {height:766px}
.visual .visual_item > a {height:766px}
.visual .item1 a:focus-visible {height:762px; outline:2px solid #000}
.visual .item1 {background:url(../images/main/v_pc01.jpg) no-repeat center top} /* 메인1 */
.visual .item2 {background:url(../images/main/v_pc02.jpg) no-repeat center top} /* 메인2 */
.visual .item3 {background:url(../images/main/v_pc03.jpg) no-repeat center top} /* 메인3 */

/* 캐릭터 */
.vcharact_wrap {position: relative; z-index: 1}
.vcharact {position: absolute; opacity: 0; animation:flyIn 1s ease-out forwards, bounce 1.1s ease-in-out 1s infinite}

.vcharact .vcharact_effect {position:absolute; animation:blink 2s infinite;}
.line_color01 .vcharact1 {display:block; width:220px; height:210px; top:-85px; left:-160px; opacity:1}
.line_color02 .vcharact2 {display:block; width:220px; height:218px; top:-80px; left:-152px; opacity:1}
.line_color03 .vcharact3 {display:block; width:200px; height:190px; top:-96px; left:-138px; opacity:1}
.vcharact1 .vcharact_effect {left:0; bottom:0}
.vcharact2 .vcharact_effect {left:0; top:1px}
.vcharact3 .vcharact_effect {left:0; bottom:0}

/* 비주얼 블릿 */
.visual_wrap .slick-dots {top:295px; margin-left:-674px}
.visual_wrap .btn_visual {top:295px; margin-left:-610px}
    
/********************************************* Layout **********************************************/
/***Content Common***/   
.pc_none{display:none}

#content h3.tit {font-size:1.692em}
.content_area {position: relative; max-width: 1400px; margin:0 auto}
.visual_cont {position: relative}
.content01 {position: absolute; top:0; right:50%; transform:translate(calc(700px - 0px), 0); width:362px; height:766px; padding-top:92px; box-sizing: border-box}
.content01:before {content:""; display:block; position:absolute; bottom:275px; right:-426px; width:490px; height:290px;background:url(../images/main/bg_vquickbg.png) no-repeat 0 100%}
.content02 {display:flex}
.content02 .cont_wrap {width:1038px; padding-right:50px; box-sizing: border-box}

/* visual quick */
.vquick_wrap {height:396px; padding-bottom:50px; margin-left:45px; box-sizing: border-box}
.vquick_wrap ul {gap:16px}
.vquick_wrap ul li {width:calc(100% / 2 - 8px)}
.vquick_wrap ul li a {display:flex; flex-direction: column; align-items:center; gap:22px; padding:30px 15px 33px;  font-size:1.462em} 
.vquick_wrap ul li span.vq_ico {width:auto}
.vquick_wrap ul li span.vq_ico img {height:auto}
.vquick_wrap ul li:hover span.vq_ico img {animation:bounce 1s ease-in-out infinite}

/* NOTICE */
#main_notice {position:relative; height:calc(100% - 396px); padding-left:45px}
#main_notice:before {content:""; display: block; position: absolute; bottom:0; left:0; width:100%; height:100%; min-width:100vw; opacity:0; transition:background-color 1.2s ease, opacity 1.2s ease}
.line_color01 #main_notice:before {background:#6f4def; opacity:1}
.line_color02 #main_notice:before {background:#0c3a7d; opacity:1}
.line_color03 #main_notice:before {background:#005751; opacity:1}

/* 예약신청 */
.main_reserv {margin:50px 0 34px }
.main_reserv .cont_toparea {margin-bottom:23px}
.main_reserv .btn_more {top:5px; left:92px}
.main_reserv .btn_slide li a {width:40px; height:28px; line-height:28px}
.reserv_tb .reserv_ibox a {height:164px; padding:20px 30px}
.reserv_ibox .btn_reserv {bottom:20px; right:20px; width:31px; height:31px;}
.reserv_ibox .rcate {font-size:1.154em}
.reserv_ibox .reserv_tit {font-size:1.538em}
.reserv_ibox .reserv_target {font-size:1.077em}
.reserv_tb .reserv_ibox a {background-position:right 24px top 30px}
.reserv_ibox a:before {width:84px; height:84px; border-radius:84px 0 0 0}

/* 프로그램 안내 */
.main_program {margin:34px 0 50px}
.main_program .cont_toparea {margin-bottom:23px}
.main_program .btn_more {right:inherit; left:135px; top:5px}
.main_program .pro_lst li a {height:160px; padding:22px 25px; font-size:1.538em}
.prolst_box {position:relative; align-items: flex-start}
.prolst_tit {width:100%}
.prolst_tit:after {width:31px; height:31px; margin-top:0; top:0}
    

/* 고정 팝업 */
.main_fixpop:before {content:""; display: block; position: absolute; bottom:0; left:0; width:100%; height:100%; min-width:100vw}
.line_color01 .main_fixpop:before {background:#ebe6fd}
.line_color02 .main_fixpop:before {background:#dde3ed}
.line_color03 .main_fixpop:before {background:#dbe7e6}
.main_fixpop {width:362px; box-sizing: border-box; padding:50px 0} 
.main_fixpop .popup_layer_wrap {padding-left:35px}
.pop_zone {margin-bottom:13px}
.pop_zone .btn_slide li button  {width:40px; height:28px; line-height:25px}
.pop_count {font-size:1.385em}
.pop_area {width:318px; margin:0 5px 0 auto}
.pop_area .cont_toparea {height:34px; padding:10px 32px 10px 10px; box-sizing: border-box}
.pop_list .poplst_txt {height:30px}
.pop_list .poplst_txt a {height:30px; line-height:30px; font-size:1.154em}
.pop_tb {height:58px; margin-top:5px}

/* 유관기관 */
#footwrap .fm_site {padding:16px 0}
#footwrap .fm_site > ul {max-width:1400px; margin: 0 auto; gap:11px}
#footwrap .fm_site > ul > li{width:calc(100% / 4)}
.fm_site .site_tit {height:50px; line-height:50px}
.fm_site .site_tit a {height:50px; font-size:1.154em}
.fm_site .site_lst ul li a {font-size:1.077em}

/* Footer */
#footwrap {padding:0; background:#2a2d40}
#footwrap .foot_area {position:relative; max-width:1400px; margin:0 auto; display: flex; justify-content: space-between; align-items: center}
.foot_menu {display:none}
#footwrap .mb_menu {display:none}
.foot_pcwrap {width:1038px; border-right:1px solid rgba(255,255,255,0.2)}
#footwrap .pc_menu {position: relative; padding:0; justify-content: flex-start; border-bottom:0}
#footwrap .pc_menu li {height:64px; line-height:64px; padding: 0 25px; background:url(../images/main/bg_foot_dott.png) left center no-repeat; text-align: center}
#footwrap .pc_menu li a {font-size:1.154em; color:#fff; font-weight:400}    
#footwrap .pc_menu li a:hover{font-weight:600}
    
/*Admin*/
#footwrap .pc_menu li.fadmin {display:block}
#footwrap .pc_menu li.fadmin a {display: block; padding-left:24px; background: url(../images/main/btn_admin.png) no-repeat left 0 top 23px; font-size:1.154em; font-weight: 400; box-sizing: border-box; transition: all .3s; color:#fff; opacity:0.6}
#footwrap .pc_menu li.fadmin a:hover {opacity:1}
#footwrap .pc_menu:after {content:""; display:block; position: absolute; top:64px; right:0; width:calc(100% + 150%);     height:1px; background:rgba(255,255,255,0.2)}    

#footwrap .add_wrap {position: relative; padding:25px 0 60px; text-align: left; box-sizing: border-box; font-size:1.154em}
#footwrap address {display:flex; justify-content: flex-start; padding-right:350px; margin:0; flex-wrap:wrap}
#footwrap address .add_tel {margin:6px 23px}

#footwrap .count_box {display:block; overflow: hidden; width:362px; padding-left:45px; box-sizing: border-box}
#footwrap .count_box h3 {display:none}
#footwrap .count_box ul {padding-top:65px; padding-bottom:10px; background:url(../images/main/flogo.png) no-repeat 50% 0}
#footwrap .count_box ul li {height:34px; margin-bottom:5px; padding:3px 0 0; font-size:1.154em; font-weight:500; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; color:#fff; background:rgba(255,255,255,0.5); text-align: center}
#footwrap .count_box ul li .tit {display:block; width:80px}
#footwrap .count_box ul li .num {display: inline-block; width:calc(100% - 80px); text-align:right; font-weight:400; font-size:15px; padding:0 13px; box-sizing: border-box}
#footwrap .count_box ul li.today {background:rgba(255,255,255,0.2); color:#eec432}
#footwrap .copy {position:relative; text-align:left; padding:5px 0 0}


}

/**** LOWSET FIX ****/
@media only screen and (min-width:1025px) and (max-width:1299px) {
#mainheader{position: relative; margin: 0 auto}
#mainheader .headerwrap{position: absolute; top:0; left:0}
}
@media only screen and (min-width:1400px) {
/* Menu FIX */
.fixed {position:fixed; top:0; left:0; width:100%; height:92px; padding-left:0; margin-top:0; background:#fff; box-shadow:0 5px 10px rgba(0, 0, 0, 0.1); transition: 0.6s}
.fixed .logo span {background:url(../images/main/logo_gmn.png) no-repeat 0 0}
.fixed #gnb .depth1 h2 a {color:#000}
    
}
/********* TABLET LAYOUT[중간사이즈 조정관련] *********/
@media only screen and (min-width:1025px) and (max-width:1650px) {
/* 대메뉴 */
.gnb_box {width:100%}
#gnb .navi_sub li a {padding:5px 8px; font-size:15px}

}

@media only screen and (max-width:500px) {
/* 예약신청 */
.reserv_tb .reserv_ibox a {border:0}
    
/* 프로그램 안내 */
.main_program .pro_lst {gap:8px}
.main_program .pro_lst li {width:100%}
.prolst_tit span {display: inline-block}

}

/* topquick 애니메이션 */

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

@keyframes blink {
    0% {opacity:0}
    50% {opacity:1}
    100% {opacity:0}  
}

/* 슝~ 날아오는 구간 */
@keyframes flyIn {
  0% {
    opacity: 0;
    transform: translate(150px, -100px) scale(1);
  }
  60% {
    opacity: 1;
    transform: translate(-10px, 10px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

/* 통통 튀기기 반복 */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}