@charset "UTF-8";

/*-------------------------------------------------------------------
    적용영역 : 전체영역
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    최종변경일 : 2025.11.21
-------------------------------------------------------------------*/
:root {
    --mobile-banner-height: 0px;
}
body {height:100%;}
html.open-sitemap,
html.open-sitemap body,
html[data-prevent-scroll="on"],
html[data-prevent-scroll="on"] body {overflow: hidden; height: 100%;}

* {line-height: 1.3; margin: 0; padding: 0; box-sizing: border-box;}
/*body px*/
body{color:#000; font-family: 'Pretendard','Noto Sans KR', sans-serif;}
input, button, textarea, select {font-size: 100%;}
h1, h2, h3, h4, h5, h6 {font-size:17px; font-weight:400;}
#wrap{overflow: hidden; position: relative; width: 100%; min-height: 100%;}

input{border: transparent; background-color: transparent;}
input::placeholder,
input::-webkit-input-placeholder,
input:-ms-input-placeholder {color:#454545;}

.con-area{width:100%;max-width:1500px;margin:0 auto;}
.con-area:after{content:"";display:block;clear:both;}
@media screen and (max-width: 1540px){
    .con-area {padding: 0 20px;}
}

.txt_red{color:#D62F38;}

/* 프린트 스타일 */
@media print{
    * {-webkit-print-color-adjust:exact;}
    #header, #quickMenu, #spot, #footerWrap {display: none;}
}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    html[data-chatbot="wide"] body {overflow: hidden; height: 100%;}
}
@media screen and (max-width: 600px) {
    html[data-chatbot="on"] body {overflow: hidden; height: 100%;}
}

/*-------------------------------------------------------------------
	분류이름 : 버튼
	분류그룹 : 컴포넌트
-------------------------------------------------------------------*/
.temp-btn {display: inline-flex; position: relative; z-index: 1; align-items: center; justify-content: center; font-size: 18px; color: #fff; height: 50px; padding: 0 30px; border: 1px solid #1B9E50; gap: 5px; font-weight: 700; overflow: hidden; transition: 0.2s;}
.temp-btn::before {display: block; content: ''; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-color: #1B9E50; transition: 0.2s;}
.temp-btn > i {font-size: 24px; font-weight: 400;}
.temp-btn.radius {height: 38px; border-radius: 19px; font-size: 16px; padding-right: 25px; padding-left: 25px; padding-top: 4px;}
.temp-btn.radius > i {font-size: 18px;}
.temp-btn:visited,
.temp-btn:link {color: #fff;}
.temp-btn:hover {color: #1B9E50;}
.temp-btn:hover::before {width: 0; right: 0; left: auto;}

.temp-btn.gray {color: #000; border-color: #F5F7F9;}
.temp-btn.gray:visited,
.temp-btn.gray:link {color: #000;}
.temp-btn.gray::before {background-color: #F5F7F9;}
.temp-btn.gray:hover {color: #000;}

.temp-btn.sky {border-color: #53AFBD;}
.temp-btn.sky::before {background-color: #53AFBD;}
.temp-btn.sky:hover {color: #53AFBD;}

.temp-btn.gray-border {color: #454545; border-color: #e9e9e9;}
.temp-btn.gray-border:visited,
.temp-btn.gray-border:link {color: #454545;}
.temp-btn.gray-border::before {background-color: #e9e9e9; width: 0; right: 0; left: auto;}
.temp-btn.gray-border:hover {color: #454545;}
.temp-btn.gray-border:hover::before {width: 100%; left: 0;}

.temp-btn.black {color: #fff; border-color: #000;}
.temp-btn.black:visited,
.temp-btn.black:link {color: #fff;}
.temp-btn.black::before {background-color: #000;}
.temp-btn.black:hover {color: #000;}

.temp-btn.form {height: 60px; padding: 0 20px;}

@media all and (max-width: 1024px) {
    .temp-btn {padding: 0 20px;}
}
@media all and (max-width: 768px) {
    .temp-btn {height: 35px !important; font-size: 14px !important; padding: 0 10px !important;}
    .temp-btn > i {font-size: 20px !important;}
    .temp-btn.form {height: 40px !important;}
}


/*-------------------------------------------------------------------
	분류이름 : 레이어팝업
	분류그룹 : 컴포넌트
-------------------------------------------------------------------*/
.temp-lp {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); align-items: center; justify-content: center; z-index: 110;}
.temp-lp .lp-inner {position: relative; max-width: 96%; max-height: 96%; width: 1100px; background-color: #fff; border-radius: 30px; padding: 65px 50px 50px; font-size: 0; line-height: 0;}
.temp-lp .lp-close {position: absolute; top: 30px; right: 30px; background: none;}
.temp-lp .lp-close::before {font-size: 24px;}
.temp-lp .lp-title {display: flex; min-height: 56px; font-size: 28px; font-weight: 700; text-align: center; margin-bottom: 36px; align-items: center; justify-content: center;}
.temp-lp .lp-cont {overflow-y: auto; max-height: calc(100vh - 243px);}
.temp-lp .lp-cont::-webkit-scrollbar {width: 5px;}
.temp-lp .lp-cont::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, 0.2); width: 5px; border-radius: 10px; background-clip: padding-box;}
.temp-lp .lp-cont::-webkit-scrollbar-track {background-color: transparent;}
.temp-lp .lp-cont .inner p {line-height: 1.6; font-size: 16px; color: #454545;}
.temp-lp .btn-wrap {display: flex; justify-content: center; margin-top: 60px;}
@media all and (min-width: 1025px) {
    .temp-lp .btn-wrap .temp-btn {width: 120px; height: 60px;}
}
@media all and (max-width: 768px) {
    .temp-lp .lp-inner {padding: 45px 20px 20px;}
    .temp-lp .lp-close {top: 20px; right: 20px;}
    .temp-lp .lp-title {font-size: 20px; margin-bottom: 20px;}
    .temp-lp .lp-cont {max-height: calc(100vh - 178px);}
    .temp-lp .lp-cont .inner p {font-size: 14px;}
    .temp-lp .btn-wrap {margin-top: 30px;}
}




/*-------------------------------------------------------------------
	분류이름 : Header
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#header {position: fixed; width: 100%; height: 80px; z-index: 110; background: #fff; top: 0;}
#header.smart-header {transition: top .3s ease;}
#header.smart-header.smart-header-hidden {top: -80px;}
#header.smart-header.open-bg,
#header.smart-header.on,
html.open-sitemap #header.smart-header,
body.open-sitemap #header.smart-header,
#header.smart-header:focus-within {top: 0;}
@media (prefers-reduced-motion: reduce) {
    #header.smart-header {transition: none;}
}
#header > .bg {display: none;}
#header .h_area {display: flex; width: 100%; padding: 0 70px; background: #fff;}
#header .h_area::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #e9e9e9;}
#header .logo {flex-shrink: 0;}
/*logo*/
.logo a,
.logo span {display: block; width:150px; height:80px; background:url('../images/main/welchon_logo.gif') no-repeat center / 150px; text-indent:-9999px;}
#header .left,
#header .right {display: flex; align-items: center; flex: auto;}
#header::before {content: ''; position:fixed; top:0; left: 0; z-index: -2; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
#header .m_header {display: none;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#header .logo a {transition: width 0.3s, background 0.3s}
#header::before {opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s;}
#header.open-bg::before {opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s 0s;}
/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    #header .h_area{padding: 0 40px;}
}
@media screen and (max-width:1640px){
    #header .h_area {padding: 0 20px;}
}
@media screen and (max-width: 1540px){
    .logo a,
    .logo span {width: 110px; background-size: 110px;}
}

@media screen and (max-width: 1440px){
    #header .h_area {padding: 0 20px;}
}

@media screen and (max-width:620px){
    #header.on {background-color: #F5F7F9;}
}




/*-------------------------------------------------------------------
	분류이름 : GNB
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#pc-nav {width:100%;height: 80px; transition:  all 0.5s;}
#pc-nav .bg {display: block; overflow: hidden; position: absolute; top: 100%; left: 0; z-index: -1; width: 100%; height: 0; background-color: #fff;}
#pc-nav .bg .wrap {display: flex; max-width: 1700px; width: 100%; margin: 0 auto; padding-top: 20px; justify-content: flex-end;}
#pc-nav .bg .wrap::after {content: ""; display: block; width: 231px; height: 185px; background: url(../images/common/gnb_bg_01.png) no-repeat center / contain;}
#pc-nav .bg .txt-box {display: block; position: relative; margin-right: 25px; text-align: right;}
#pc-nav .bg .txt-box::before {content: ""; position: absolute; top: 0; left: -100px; width: 184px; height: 182px; background: url(../images/common/gnb_bg_02.png) no-repeat center / contain;}
#pc-nav .bg .txt-box .tit {display: block; position: relative; padding-top: 95px; font-weight: 700; font-size: 30px; color: #000;}
#pc-nav .bg .txt-box .txt {display: block; position: relative; font-weight: 600; font-size: 16px; color: #666666;}
#pc-nav a {display: block;}
#pc-nav .depth1 {display: flex; gap: 20px; overflow: hidden; height: 80px; position: relative;}
#pc-nav .depth1 > li {display: block;flex: auto; position: relative;}
#pc-nav .depth1 > li > a {position:relative; padding: 0 0px; font-size:19px; line-height:80px; color:#000; z-index:100; top:0; font-weight:600; text-align: center;}
#pc-nav .depth1 > li > a:before {content:''; position:absolute; left: 50%; bottom:0; width:0; height: 3px; background:#fff;}

#pc-nav .gnb {position: absolute; top: 80px; left: 0; width: 100%; min-height: 250px; padding: 20px 0;}
#pc-nav .item {position: relative;}
#pc-nav .item .depth2,
#pc-nav .item .depth2 > li {display: block;}
#pc-nav .item .depth2 > li a {display: block; padding: 12px; font-weight: 600; font-size: 16px; color: #7E8790; text-align: center;}

/*-------------------------------------------------------------------
    @variation
-------------------------------------------------------------------*/
#pc-nav .item .tit.icon1 {padding: 3px 0; background-image: url(../images/main/nav_img_01.svg); background-repeat: no-repeat; background-position: 0 center;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#pc-nav .gnb {visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s;}
#pc-nav.open .depth1 > li.active > .gnb {visibility: visible; opacity: 1; transition: opacity 0.3s, visibility 0s 0s;}

#pc-nav .depth1 {transition: height 0.3s;}
#pc-nav .depth1 > li > a {transition: color 0.3s;}
#pc-nav.open .depth1 > li > a {color: #323232; font-weight: 700;}
#pc-nav.open .depth1 > li:hover > a {color: #53AFBD; font-weight: 800;}
#pc-nav.open .depth1 > li > a::before {background: #53AFBD;}

#pc-nav .depth1 > li > a::before {transition: all 0.5s; transform: translateX(-50%);}
#pc-nav .depth1 > li > a.on:before,
#pc-nav .depth1 > li:hover > a:before {width: 100%; background-color: #53AFBD;}

#pc-nav .item .depth2 > li a {transition: color 0.3s;}
#pc-nav .item .depth2 > li a:focus-visible,
#pc-nav .item .depth2 > li a:hover {color: #000;}

#pc-nav .bg {transition: height 0.3s;}

@media screen and (min-width: 1221px) {
    #pc-nav .depth1 {overflow: visible;}
    #pc-nav .depth1 > li {position: static; flex: 0 0 auto;}
    #pc-nav .depth1 > li > a {padding: 0 12px;}
    #pc-nav .gnb {left: var(--submenu-start, 0px); width: calc(100% - var(--submenu-start, 0px)); min-height: 96px; padding: 25px 0; transform: none; background: transparent; z-index: 1;}
    #pc-nav .item .depth2 {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 32px; margin: 0;}
    #pc-nav .item .depth2 > li {width: auto; margin: 0;}
    #pc-nav .item .depth2 > li > a {display: flex; align-items: center; gap: 12px; width: auto; padding: 12px 0; font-size: 16px; line-height: 1.5; text-align: left; white-space: nowrap; color: #666;}
    #pc-nav .item .depth2 > li > a::before {content: ''; width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #999;}
    #pc-nav .item .depth2 > li > a:hover::before,
    #pc-nav .item .depth2 > li > a:focus-visible::before {background-color: currentColor;}
    #pc-nav.open .depth1 > li.active > a {color: #1B9E50;}
    #pc-nav.open .depth1 > li.active > a::before {width: 100%; height: 2px; background: #1B9E50;}
    #pc-nav .bg .wrap {max-width: none; height: 100%; padding: 0 70px; align-items: center;}
    #pc-nav .bg .wrap::after {width: 170px; height: 136px; flex-shrink: 0; align-self: flex-start; margin-top: 6px; background-position: center top;}
    #pc-nav .bg .txt-box {text-align: left; margin-right: 40px;}
    #pc-nav .bg .txt-box::before {display: none;}
    #pc-nav .bg .txt-box .tit {padding-top: 0; font-size: 22px;}
    #pc-nav .bg .txt-box .txt {margin-top: 6px; font-size: 14px;}
}

/*-------------------------------------------------------------------
    @media
-------------------------------------------------------------------*/

@media screen and (max-width: 1680px) {
    #pc-nav .depth1{gap:15px}
    #pc-nav .depth1 > li > a{font-size: 17px;}

}
@media screen and (max-width: 1540px){
    #pc-nav .bg .txt-box::before {display: none;}
    #pc-nav .depth1 > li > a {font-size: 17px;}
    #pc-nav .item .depth2 > li a {padding: 12px 6px; font-size: 15px;}
}
@media screen and (max-width: 1440px){
    #pc-nav .depth1 > li > a{font-size: 16px}
}
@media screen and (max-width: 1280px){
    #pc-nav .depth1{gap: 10px}
}
@media screen and (max-width: 1220px){
    #pc-nav .depth1 {display: none;}
}




/*-------------------------------------------------------------------
	분류이름 : Utils
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#header #utils {display: flex; flex: auto;}
#header #utils .list-wrap{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center;margin-left: auto;}
#header #utils .list-wrap > li {height: 80px; display: flex; align-items: center;}
#header #utils .list-wrap > li.user{display: none;}
#header #utils .list-wrap > li:last-child {margin-left: 0;}
#header #utils .list-wrap .head_sns {display: flex; height: 80px; align-items: center; gap: 8px;}
#header #utils .list-wrap .head_sns li {width: 29px; height: 29px;}
#header #utils .list-wrap .head_sns li a {display: block; width: 29px; height: 29px; background-repeat: no-repeat; background-position: center; background-size: contain;}
#header #utils .list-wrap > li:first-child {display: block;}


#header #utils .list-wrap .body_utils{display: flex; align-items: center; margin-right: 0px; }
#header #utils .list-wrap .body_utils > li {position: relative; margin: 0 12px;}
#header #utils .list-wrap .body_utils > li a {display: block; color:#6C6F78; white-space: nowrap;}
#header #utils .list-wrap .btn_search {width: 40px; height: 40px; margin-right: 10px; background-color: #53AFBD;  border-radius: 50%; }
#header #utils .list-wrap .btn_search::before {content:"\f0d1"; font-family: remixicon !important; color:#fff; font-size: 22px;}

#header #utils .list-wrap > li.top-banner-toggle {margin-right: 10px;}
#header #utils .list-wrap > li.top-banner-toggle .toggle-btn {height: 40px; display: flex; align-items: center; padding: 0 15px; font-size: 16px; font-weight: 600; color: #fff; background-color: #000; border-radius: 40px; line-height: 1; gap: 5px;}
#header #utils .list-wrap > li.top-banner-toggle .toggle-btn::after {display: block; font-family: 'remixicon'; font-size: 18px; content: '\ea78'; font-weight: 400;}
#header #utils .list-wrap > li .btn_menu {position: relative; width: 40px; height: 40px; border-radius: 50%; background-color: #1DA39C;}
#header #utils .list-wrap > li .btn_menu::before { content: ''; position: absolute; top: 13px; left: 12px; width: 16px; height: 14px; border-width: 2px 0; border-style: solid; border-color: #fff; box-sizing: border-box;}
#header #utils .list-wrap > li .btn_menu:after {content:''; position: absolute; top: 50%; right: 12px; width: 16px; height: 2px; background-color: #fff; transform: translateY(-50%);}
#header #utils .list-wrap > li .foreigners-btn {display:inline-block; line-height:40px; margin-right: 10px; padding:0 15px; height: 40px; border-radius:40px; background-color: #1B9E50; font-size: 16px; font-weight:500; color: #fff;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
/*모바일 사이트맵, 검색 none*/
#header #utils .list-wrap > li .type_mobile {display: none;}



#header #utils .list-wrap .body_utils > li:nth-child(2)::before,
#header #utils .list-wrap .body_utils > li:nth-child(3)::before {content: ''; position: absolute; top: 50%; left: -14px; width: 5px; height: 5px; border-radius: 50%; background-color: #d9d9d9; transform: translateY(-50%);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header #utils .list-wrap > li:first-child{transition: margin 0.3s;}
#header #utils .list-wrap > li .btn_search.on{background-color: #53AFBD;}
#header #utils .list-wrap > li .btn_menu::after {transition: width 0.3s, background 0.3s;}
#header #utils .list-wrap > li .btn_menu:focus::after,
#header #utils .list-wrap > li .btn_menu:hover::after {width: 12px; background-color: #fff;}

#header #utils .list-wrap > li.top-banner-toggle .toggle-btn::after {transition: transform 0.3s;}
body[data-top-banner="off"] #header #utils .list-wrap > li.top-banner-toggle .toggle-btn::after,
body[data-top-banner="on"][data-scrolled="start"]:not(.fixed-pop) #header #utils .list-wrap > li.top-banner-toggle .toggle-btn::after {transform: rotate(180deg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1800px){
    #header #utils .list-wrap > li .foreigners-btn {font-size: 15px;}
}
@media screen and (min-width: 1221px) and (max-width: 1850px){
    #pc-nav .depth1 > li > a {padding: 0 10px;}
}
@media screen and (min-width: 1221px) and (max-width: 1440px){
    #pc-nav .depth1 {gap: 6px;}
    #header #utils .list-wrap .body_utils > li {margin: 0 8px;}
}
@media screen and (max-width: 1680px){
    #header #utils .list-wrap .body_utils > li a{font-size: 15px}
}
@media screen and (max-width: 1540px){
    #header #utils .list-wrap > li.top-banner-toggle {margin-right: 5px;}
    #header #utils .list-wrap > li.top-banner-toggle .toggle-btn {gap: 5px; font-size: 14px; padding: 0 10px; height: 35px;}
    #header #utils .list-wrap > li .foreigners-btn {height: 35px; line-height:35px; padding:0 10px; font-size: 14px;}

}
@media screen and (max-width: 1440px){
    #header #utils .list-wrap > li.top-banner-toggle .toggle-btn,
    #header #utils .list-wrap > li .foreigners-btn {font-size: 13px;}
}

@media screen and (max-width: 1280px){
    #header #utils .list-wrap .body_utils > li{margin:0 9px;}
    #header #utils .list-wrap .body_utils > li:nth-child(2)::before,
    #header #utils .list-wrap .body_utils > li:nth-child(3)::before{left:-11px;}
    #header #utils .list-wrap .body_utils > li a {font-size: 14px;}
    #header #utils .list-wrap .btn_search,
    #header #utils .list-wrap > li .foreigners-btn{margin-right: 6px;}
}
@media screen and (max-width:1024px){
    #header #utils .list-wrap .body_utils{display: none;}
    #header #utils .list-wrap > li.user{display: flex;}
    #header #utils .list-wrap > li .m_util{color:#000; height: 40px;width: 40px; margin: 0 auto; justify-content: center; }
    #header #utils .list-wrap .btn_search{background-color: transparent; margin-right: 0;}
    #header #utils .list-wrap > li:first-child{display: none;}
    #header #utils .list-wrap .btn_search::before {color:#000; font-size: 28px;}
    #header #utils .list-wrap > li .btn_menu{display: none;}
    #header #utils .list-wrap > li i{display: block; font-size: 26px; font-weight: 500;}
    #header #utils .list-wrap > li .type_mobile{position: relative; display: block;}
    #header #utils .list-wrap > li .type_mobile .ri-menu-2-line,
    #header #utils .list-wrap > li .type_mobile .ri-close-large-line{display: none;}
    #header #utils .list-wrap > li .type_mobile .ri-menu-2-line.on,
    #header #utils .list-wrap > li .type_mobile .ri-close-large-line.on{display: block;}
    #header #utils .list-wrap > li.top-banner-toggle,
    #header #utils .list-wrap > li .foreigners-btn {display: none;}
}




/*-------------------------------------------------------------------
	분류이름 : 검색창
	분류그룹 : 레이아웃 > Header > Utils
-------------------------------------------------------------------*/
#header #utils .list-wrap > li #menuSearch { display: block; position: absolute; bottom: 80px; left: 0; z-index: 110; width: 100%; -webkit-box-align: center; -moz-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -moz-box-justify-content: center; -ms-flex-pack: center; justify-content: center;}
#header #utils .list-wrap > li #menuSearch .search_close { height: 450px; width: 100%; background-color: #fff; background-repeat: no-repeat; background-image: url(../images/main/welchon_logo.gif); background-position: center 80px; background-size: 120px;}
#header #utils .list-wrap > li #menuSearch .search_close p {position: relative; font-size: 40px; line-height: 40px; text-align: center; padding-top: 180px; transition: all 0.3s;}
#header #utils .list-wrap > li #menuSearch .search_close .input_wrap { position: relative; display: flex; align-items: center;  margin: 0 auto; width: 700px; margin-top: 40px; border-bottom: 1px solid #E9E9E9;}
#header #utils .list-wrap > li #menuSearch .search_close .input_wrap::after{content: ''; bottom: -50px; transform: translateY(-50%); right: -230px; width: 183px; height: 135px; position: absolute; background:url(../images/main/search_char.svg) no-repeat;}
#header #utils .list-wrap > li #menuSearch .search_close .input_wrap input{padding-left: 20px; height: 58px; width: 645px; font-size: 18px;}
#header #utils .list-wrap > li #menuSearch .search_close .input_wrap .sea_button{position: relative; width: 58px; height: 58px;}
#header #utils .list-wrap > li #menuSearch .search_close .input_wrap .sea_button::after{content: "\f0d1"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: 'remixicon' !important; font-size: 28px;}
#header #utils .list-wrap > li #menuSearch .search_close .input_wrap .sea_button span{font-size: 0; text-indent: -9999px;}

#header #utils .list-wrap > li #menuSearch .search_close .close span {display: block; position: absolute; top: 50px; right: 12%;}
#header #utils .list-wrap > li #menuSearch .search_close .close span::before{font-size: 50px; text-indent: 0; content: "\f4c8"; font-family: 'remixicon' !important; }

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#header #utils .list-wrap > li #menuSearch .search_close {transform: translateY(0%); transition: transform 0.3s;}
#header #utils .list-wrap > li #menuSearch.on .search_close {transform: translateY(100%);}
#header #utils .list-wrap > li #menuSearch .search_close .close span {transform: rotate(0deg); transition: transform 0.3s;}
#header #utils .list-wrap > li #menuSearch .search_close .close:hover span {transform: rotate(360deg);}

/* 검색창 */
#header #utils .list-wrap > li #menuSearch {visibility: hidden; opacity: 0; transition: transform 0.3s, visibility 0s 0.3s, opacity 0.3s;}
#header #utils .list-wrap > li #menuSearch.on {visibility: visible; opacity: 1; transition: transform 0.3s, visibility 0s 0s, opacity 0.3s;}

#header #utils .list-wrap > li #menuSearch .search-wrap .search-box .btn-submit {transition: background 0.3s;}
#header #utils .list-wrap > li #menuSearch .search-wrap .search-box .btn-submit:hover {background: #fff url(../images/common/i_search_hover_2.svg) no-repeat center center / 25px}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1800px){
    #header #utils .list-wrap > li #menuSearch .search_close::after{right: 250px;}
}
@media screen and (max-width: 1220px){
    #header #utils .list-wrap > li #menuSearch .search_close p {font-size: 35px;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap{width: 500px;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap::after{ bottom: 0; right: -150px; background-size: 120px; width: 120px; height: 90px;}
}
@media screen and (max-width:830px){
    #header #utils .list-wrap > li #menuSearch .search_close {background-position: center 60px;}
    #header #utils .list-wrap > li #menuSearch .search_close {height: 400px;}
    #header #utils .list-wrap > li #menuSearch .search_close p{font-size: 30px; padding-top: 250px}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap{width: 400px; margin-top: 20px;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap::after{ bottom: 150px; right: 0; left: 50%; transform: translateX(-50%); background-size: 100px; width: 100px; height: 75px;}
}
@media screen and (max-width:620px){
    #header #utils .list-wrap > li #menuSearch .search_close p{padding-top:250px; font-size: 26px;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap{margin-top:0;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap::after{ bottom: 120px;}
}
@media screen and (max-width:520px){
    #header #utils .list-wrap > li #menuSearch .search_close{width: 100%;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap{width: 80%;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap::after{bottom:0; top: -140px;}
}
@media screen and (max-width:390px){
    #header #utils .list-wrap > li #menuSearch .search_close p{font-size: 22px; line-height: 22px;}
    #header #utils .list-wrap > li #menuSearch .search_close .input_wrap input{font-size: 13px; padding-left: 0;}
}


/*-------------------------------------------------------------------
	분류이름 : 팝업
	분류그룹 : 레이아웃 > Header > Utils
-------------------------------------------------------------------*/
.pop_login,
.pop_vill,
.pop_contents {position: fixed; top: -40%; left: 50%; z-index: -3;}

/*닫기 버튼*/
.pop .pop_area { padding:70px 20px; height: 338px; width: 730px; background-color: #fff; border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.pop .pop_close,
.pop_contents .setting_close {position: absolute; right: 40px; top: 40px; height: 40px; width: 40px;}
.pop .pop_close span,
.pop_contents .setting_close span {display: block; font-size: 33px;}
.pop .pop_close span::after,
.pop_contents .setting_close span::after{content: "\f4c8"; font-family: 'remixicon' !important;}

/*로그인*/
.pop .pop_head strong{font-size: 30px; padding-bottom: 20px; text-align: center;display: block;}
.pop .pop_head p{font-size: 22px; text-align: center; padding-bottom: 20px;}
.pop .pop_head span{font-size: 16px; margin-bottom: 30px; text-align: center; display: block; color:#7E8790;}
.pop .pop_body ul.sns{display: flex; width: 313px; margin:0 auto; align-items:center; gap: 10px; margin-top: 10px;}
.pop .pop_body ul.sns li::after{content: none!important;}
.pop .pop_body ul.sns li{flex: 1;}
.pop .pop_body ul.sns li a{cursor: pointer; text-align: center; font-size: 14px; font-weight: 700; display: block; border-radius: 50px;}
.pop .pop_body ul.sns li a span{display: inline-block; position: relative; line-height: 40px; font-size: 14px; height: 40px;}

/*마을회원 로그인*/
.pop .pop_body div.vill_input{display: flex; align-items:center; gap: 10px; width: 635px; margin: 0 auto;}
.pop .pop_body div.vill_input .input{display: flex; align-items:center; gap: 15px;}
.pop .pop_body div.vill_input .input input{border-radius: 10px;display: block; width: 250px; border:1px solid #E9E9E9; padding-left: 42px; height: 50px; line-height: 50px; background-repeat: no-repeat; background-position: 20px center; background-size: 15px;}
.pop .pop_body div.vill_input button{height: 50px; width: 100px; border-radius: 10px; line-height: 50px; background-color: #53AFBD; color:#fff; font-size: 18px; font-weight: 600;}

/*컨텐츠 설정하기*/
.pop_contents {width: 700px; max-width: 100%;}
.pop_contents .pop_area{width: 100%; padding:40px; background-color: #fff; border-radius: 30px;}

.pop_contents .pop_head strong{font-size: 30px; padding-bottom: 20px;text-align: center;}
.pop_contents .pop_head ul{padding: 20px 0 10px 0;}
.pop_contents .pop_head ul > li{position: relative; color: #7E8790; font-size: 16px; line-height: 20px; padding-left: 20px;}
.pop_contents .pop_head ul > li::before{content: ''; position: absolute; width: 3px; height: 3px; background-color: #7E8790; top: 50%; transform: translateY(-50%); border-radius: 50%; left: 10px;}
.pop_contents .pop_head p{font-size: 22px; text-align: center; padding-bottom: 20px;}
.pop_contents .pop_head > span{font-size: 16px; margin-bottom: 30px; text-align: center;text-decoration: underline; color:#7E8790;}

.pop_contents .pop_body{height: calc(100% - 200px); overflow-y: auto;}
.pop_contents .pop_body .list{margin-top: 28px}
.pop_contents .pop_body .list > strong{margin: 10px 0; font-size: 20px; position: relative; display: block; padding-left:10px; z-index: 2;}
.pop_contents .pop_body .list > strong::before{content: ''; position: absolute; top: -5px; left: 0; z-index: -1; border-radius: 50%; background-color: #96d6e0; height: 20px; width: 20px;}
.pop_contents .pop_body .list ul {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.pop_contents .pop_body .list ul .item {position: relative;}
.pop_contents .pop_body .list ul .item input {position: absolute; top: 0; left: 0; opacity: 0;}
.pop_contents .pop_body .list ul .item label {border-radius: 10px; background-color: #F5F7F9; color: #6C6F78; font-size: 16px; padding: 12px 20px; display: block; transition: 0.2s; cursor: pointer;}
.pop_contents .pop_body .list ul .item input:checked + label {background-color: #53AFBD; color: #fff;}
.pop_contents .pop_foo {border-top: 1px dotted #B9C4D0; margin-top: 20px; }
.pop_contents .pop_foo button{color:#fff; font-size: 16px; width: 180px;margin:0 auto; display: block; margin-top: 20px; height: 40px; line-height: 40px;background: #1B9E50;}
.pop_bg.off {position: fixed; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.7);z-index: 100; }

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
.pop .pop_body ul.sns li:nth-child(1) a {background-color: #FFCA08;}
.pop .pop_body ul.sns li:nth-child(1) a span{color:#371D1E;}
.pop .pop_body ul.sns li:nth-child(1) a span::before{content: "\ee6c"; padding-right: 5px; font-family: 'remixicon' !important;}
.pop .pop_body ul.sns li:nth-child(2) a {background-color: #2DB400; }
.pop .pop_body ul.sns li:nth-child(2) a span{padding-left: 24px;color:#fff;}
.pop .pop_body ul.sns li:nth-child(2) a span::before{content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background:url(../images/main/naver_com.svg) no-repeat center/16px; width: 16px; height: 14px; }

/*마을회원 로그인*/
.pop .pop_body div.vill_input .input input:nth-child(1){background-image: url(../images/main/user-line.svg);}
.pop .pop_body div.vill_input .input input:nth-child(2){background-image: url(../images/main/lock-line.svg);}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.pop_login,
.pop_vill,
.pop_contents {opacity: 0; visibility: hidden; transform: translate(-50%, 0); transition: opacity 0.3s, visibility 0.3s, top 0.3s;}
.pop_login.on,
.pop_vill.on,
.pop_contents.on{opacity: 1; visibility: visible; top: 50%; z-index: 110; transform: translate(-50%, -50%); transition: opacity 0.3s, top 0.3s, visibility 0.3s;}

/*닫기 버튼*/
.pop .pop_close span,
.pop_contents .setting_close span {transform: rotate(0deg); transition: transform 0.3s;}
.pop .pop_close span:hover,
.pop_contents .setting_close span:hover{transform: rotate(360deg);}

.pop_contents .pop_close span {transform: rotate(0deg); transition: transform 0.3s;}
.pop_contents .pop_close span:hover {transform: rotate(360deg);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1440px){
    .pop_contents .pop_area{height: 500px;}
}
@media screen and (max-width:760px){
    .pop_vill{width: 88%;}
    .pop .pop_area{width: 100%; height: 100%;}
    .pop .pop_body div.vill_input{width: 100%; display: block;}
    .pop .pop_body div.vill_input .input{display: block;}
    .pop .pop_body div.vill_input .input input{width: 100%; margin-bottom: 10px;}
    .pop .pop_body div.vill_input button{width: 100%;}
}
/*콘텐츠 설정하기 사이즈 추가*/
@media screen and (max-width:700px){
    .pop .pop_close,
    .pop_contents .setting_close {top: 30px; right: 30px;}
    .pop_contents .pop_area {height: 100vh; border-radius: 0; padding: 30px;}
    .pop_contents .pop_head::before {display: block; content: ''; width: 100%; height: 62px; background: url('../images/main/chonsik_char3.svg') no-repeat center / contain; margin-bottom: 25px;}
    .pop_contents .pop_head p,
    .pop_contents .pop_head strong {font-size: 26px;}
    .pop_contents .pop_head ul {padding-bottom: 0;}
    .pop_contents .pop_body {max-height: calc(100% - 310px); height: auto;}
    .pop_contents .pop_body .list > strong {font-size: 16px; padding-left: 0; margin: 5px 0;}
    .pop_contents .pop_body .list > strong::before {display: none;}

    .pop_vill {width: 100%;}
    .pop_vill .pop_area {height: 100vh; border-radius: 0;}
    .pop_vill .pop_head::before {display: block; content: ''; width: 100%; height: 62px; background: url('../images/main/chonsik_char2.svg') no-repeat center / contain; margin-bottom: 25px;}
    .pop_vill .pop_head p {display: none;}
}
@media screen and (max-width:620px){
    .pop .pop_head strong{font-size: 25px;}
    .pop .pop_head p{font-size: 18px;}
    .pop .pop_head span,
    .pop_contents .pop_head ul > li,
    .pop_contents .pop_body .list ul .item label {font-size: 14px;}
}
@media screen and (max-width:520px){
    .pop .pop_close{top:26px}
}


/*-------------------------------------------------------------------
	분류이름 : 사이트맵 (PC)
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#siteMap {opacity: 0; visibility: hidden; position: fixed; left: 0; top:0; width: 100%; height: 100%; z-index: 100;}
#siteMap.on {opacity: 1; visibility: visible;}
#siteMap .wrap {display: flex; height: 100%}
#siteMap .wrap .site_left{padding: 170px 0 0 160px; background-color:#fff; width: calc(100% - 600px);}
#siteMap .wrap .site_left p.tit{position: relative; font-size: 40px; display: inline-block;}
#siteMap .wrap .site_left p.tit::after{content: ''; position: absolute; top:0; right: -180px; width: 146px; height: 120px; background: url(../images/main/chonsik_char2.svg) no-repeat;}

#siteMap .wrap .site_left .depth1{display: flex; width: 70%; margin-top: 120px; flex-wrap: wrap;}
#siteMap .wrap .site_left .depth1 > li {display: flex; width: 50%; margin-bottom: 50px;}
#siteMap .wrap .site_left .depth1 > li > a{font-size: 30px; font-weight: 700; width: 170px;}
#siteMap .wrap .site_left .depth2 {margin-left: 20px;}
#siteMap .wrap .site_left .depth2 > li {padding-bottom: 10px;}
#siteMap .wrap .site_left .depth2 > li > a{font-size: 18px; font-weight: 600; color:#98A1B7;}

#siteMap .wrap .site_right {position: relative; background-image:url(../images/main/sitemap_right_img.png); background-size: cover; background-repeat: no-repeat; width: 600px;}
#siteMap .wrap .site_right .right_close{position: absolute; top: 56px; right: 56px;}
#siteMap .wrap .site_right .right_close span{position: relative; background: none; font-size: 50px; color:#fff; display: block; transform: rotate(0deg);}
#siteMap .wrap .site_right .right_close span:hover{transform: rotate(360deg);}
#siteMap .wrap .site_right .right_close span::before{content: "\f4c8"; font-family: 'remixicon' !important; }
#siteMap .wrap .site_right .address {position: absolute; padding: 100px 0 30px 50px ; bottom: 0; background: url(../images/main/logo_white.png) no-repeat 50px top/88px;}

#siteMap .wrap .site_right .address > ul > li{color:#fff; margin-bottom: 40px;}
#siteMap .wrap .site_right .address > ul > li p{font-size: 16px; font-weight: 600; margin-bottom: 5px;}
#siteMap .wrap .site_right .address > ul > li span{font-size: 14px; font-weight: 500;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#siteMap .brown {color:#8B5C29;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#siteMap .wrap .site_right .right_close span {transition: transform 0.3s;}
#siteMap,
#siteMap.on {transition: opacity 0.3s, visibility 0.3s;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:1800px){
    #siteMap .wrap .site_left .depth1{width: 90%;}
    #siteMap .wrap .site_left .depth1 > li{width: 45%;}
}
@media screen and (max-width:1640px){
    #siteMap .wrap .site_left {width: calc(100% - 400px);}
    #siteMap .wrap .site_left .depth1{width: 100%;}
    #siteMap .wrap .site_right{width: 400px;}
}
@media screen and (max-width:1500px){
    #siteMap .wrap .site_left{padding: 100px 0 0 90px;}
}
@media screen and (max-width:1440px){
    #siteMap .wrap .site_left { padding: 5% 0 0 5%;}
    #siteMap .wrap .site_left .depth1{width: 100%;}
    #siteMap .wrap .site_left .depth1 > li > a{width: 130px; font-size: 24px;}
    #siteMap .wrap .site_right{width: 500px;}
}
@media screen and (max-width:1220px){
    #siteMap .wrap .site_left p.tit{font-size: 24px;}
    #siteMap .wrap .site_left .depth1{margin-top: 30px;}
    #siteMap .wrap .site_left .depth1 > li{width: 100%;}
    #siteMap .wrap .site_left .depth1 > li > a{font-size: 24px;}
    #siteMap .wrap .site_left .depth2{width: 70%;}
    #siteMap .wrap .site_left .depth2 > li > a{font-size: 16px;}
    #siteMap .wrap .site_left .depth1{display:block;}
    #siteMap .wrap .site_left .depth1_hei{height: calc(100% - 170px);overflow-y: scroll;padding: 0 100px 0 0;margin-top: 80px;margin-right: 70px;margin-left: 40px;}
    #siteMap .wrap .site_left .depth1_hei::-webkit-scrollbar {background-color:#e9e9e9; width: 7px; border-radius: 10px;}
    #siteMap .wrap .site_left .depth1_hei::-webkit-scrollbar-thumb{border-radius: 10px; background-color: rgba(27,158,80,0.4);}
}
@media screen and (max-width:1024px){
    #siteMap{display: none;}
}


/*-------------------------------------------------------------------
	분류이름 : 사이트맵 (Mobile)
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#siteMap_m {display: none; position: fixed; top: 79px; left: 0 ;z-index: 100; background-color: #ffff; width: 100%; height: calc(100% - 79px);}
#siteMap_m .siteMapM_area{overflow-y: scroll; height: 100%;}
#siteMap_m .siteMapM_area::-webkit-scrollbar{background-color: #f4f4f4; width: 7px;}
#siteMap_m .siteMapM_area::-webkit-scrollbar-thumb{background-color: #9db7a8; border-radius: 10px;}

#siteMap_m .m_head {position: relative;padding: 20px 20px 0;background-color: #F5F7F9; }
#header #utils .list-wrap > li .m_head .foreigners-btn{display: table;margin-right: 0;padding: 0 14px;}
#siteMap_m .m_head .m_head_sns {display: flex; justify-content: center; align-items: center; gap: 8px; position: absolute; top: 22px; right: 20px;}
#siteMap_m .m_head .m_head_sns li {width: 29px; height: 29px;}
#siteMap_m .m_head .m_head_sns li a {display: block; width: 29px; height: 29px; background-repeat: no-repeat; background-position: center; background-size: contain;}

#siteMap_m .m_body {margin: 0 auto; padding: 0 20px; background-color: #F5F7F9;}
#siteMap_m .m_body .m_login {padding-top: 25px;}
#siteMap_m .m_body .m_login + .m_login {padding-bottom: 25px;}
#siteMap_m .m_body .m_login strong{font-size: 16px;}
#siteMap_m .m_body .m_login p{color:#7E8790; margin-top:5px; font-size:14px;}
#siteMap_m .m_body .m_login ul.m_sns{display: flex; align-items:center; gap: 10px; margin-top: 10px;}
#siteMap_m .m_body .m_login ul.m_sns li{flex: 1;}
#siteMap_m .m_body .m_login ul.m_sns li a{text-align: center; font-size: 14px; font-weight: 700; display: block; border-radius: 50px;}
#siteMap_m .m_body .m_login ul.m_sns li a span {display: inline-block; position: relative; line-height: 40px; font-size: 14px; height: 40px;}
#siteMap_m .m_body .m_login .vill_login{height: 40px; margin-top: 10px; line-height: 40px; background-color: #1B9E50; color:#fff; width: 100%; text-align: center; font-size: 14px; font-weight: 700; display: block; border-radius: 50px;}

#siteMap_m .m_foo {background-color: #fff;}
#siteMap_m .m_foo .accordion{ position: relative; padding: 30px 20px; background-color: #fff;}
#siteMap_m .m_foo .accordion .on {position: relative;}
#siteMap_m .m_foo .accordion .on div {background-color: #F5F7F9;}
#siteMap_m .m_foo > ul {width: 100%;}
#siteMap_m .m_foo > ul > li > button,
#siteMap_m .m_foo > ul > li > a {position: relative; width: 100%; height: 54px;font-size: 16px; text-align: left; color:#000; font-weight: 700; display: flex; align-items: center;}
#siteMap_m .m_foo > ul > li > button::before,
#siteMap_m .m_foo > ul > li > button::after {font-family: 'remixicon';}
#siteMap_m .m_foo > ul > li > button::before {padding-right:5px;}
#siteMap_m .m_foo > ul > li > button::after {content: "\ea4e"; position: absolute; right: 20px; top: 13px; font-size: 20px;}
#siteMap_m .m_foo > ul > li:not(.has) button::after {display: none;}

#siteMap_m .m_foo > ul div {display: none; padding: 20px;}
#siteMap_m .m_foo > ul div > ul > li {padding: 7px 0}
#siteMap_m .m_foo > ul div > ul > li:first-child {padding-top: 0;}
#siteMap_m .m_foo > ul div > ul > li:last-child {padding-bottom: 0;}
#siteMap_m .m_foo > ul div > ul > li a{color:#7E8790;}

/* 사용자, 마을회원 로그인 */
#siteMap_m .user_login {margin: 0 auto; padding: 0 20px; background-color: #F5F7F9;}
#siteMap_m .user_login .login_top p {font-size: 26px; text-align: center; border-bottom: 1px solid #e9e9e9; padding: 30px 0;}
#siteMap_m .user_login .login_con .title > strong{font-size: 16px; font-weight: 600; display: inline-block; margin-top: 20px;}
#siteMap_m .user_login .login_con .title > p{font-size: 14px; font-weight: 500; color:#7E8790; margin:0 0 10px 0;}
#siteMap_m .user_login .login_con .items {padding-bottom: 20px; border-bottom: 1px solid #e9e9e9; margin-bottom: 20px;}
#siteMap_m .user_login .login_con .items ul{display: flex; align-items: center; gap: 10px;}
#siteMap_m .user_login .login_con .items ul li{flex-basis: 50%;}
#siteMap_m .user_login .login_con .items ul li a{display: flex; align-items: center; justify-content: space-between; padding: 0 30px; line-height: 40px; border-radius: 50px; border:1px solid #e9e9e9; box-sizing: border-box; height: 40px; background-color: #fff;}
#siteMap_m .user_login .login_con .items ul li a p{position: relative; padding-left: 20px}
#siteMap_m .user_login .login_con .items ul li a p,
#siteMap_m .user_login .login_con .items ul li a span{line-height: 1; font-weight: 600;}

#siteMap_m .user_login .login_foo {padding-bottom: 30px;}
#siteMap_m .user_login .login_foo ul {display: flex; align-items: center; gap: 10px;}
#siteMap_m .user_login .login_foo ul li {flex-basis: 50%;}
#siteMap_m .user_login .login_foo ul li.vill_logout {flex-basis: 100%;}
#siteMap_m .user_login .login_foo ul li a {display: block; font-weight: 600; height: 40px; line-height: 40px; text-align: center; background-color: #fff; border-radius: 50px; position: relative; box-sizing: border-box;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/

#siteMap_m .m_body .m_login ul.m_sns li:nth-child(1) a {background-color: #FFCA08; color:#371D1E;}
#siteMap_m .m_body .m_login ul.m_sns li:nth-child(1) a span::before{content: "\ee6c"; padding-right: 5px; font-family: 'remixicon' !important;}
#siteMap_m .m_body .m_login ul.m_sns li:nth-child(2) a {background-color: #2DB400; color:#fff;}
#siteMap_m .m_body .m_login ul.m_sns li:nth-child(2) a span{padding-left: 24px;}
#siteMap_m .m_body .m_login ul.m_sns li:nth-child(2) a span::before{content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background:url(../images/main/naver_com.svg) no-repeat center/16px; width: 16px; height: 14px; }

#siteMap_m .m_foo > ul > li:nth-child(1) button::before{content: "\f3e3";}
#siteMap_m .m_foo > ul > li:nth-child(2) button::before{content: "\ee7d";}
#siteMap_m .m_foo > ul > li:nth-child(3) button::before{content: "\f1b7";}
#siteMap_m .m_foo > ul > li:nth-child(4) button::before{content: "\ec3a";}

#siteMap_m .user_login .login_con .items ul li a .heart::before,
#siteMap_m .user_login .login_con .items ul li a .event::before {position: absolute; top:-1px; left:0; font-size: 16px; font-family: 'remixicon' !important;}
#siteMap_m .user_login .login_con .items ul li a .heart::before {content: "\ee0f"; }
#siteMap_m .user_login .login_con .items ul li a .event::before {content: "\edbb"; }

#siteMap_m .user_login .login_foo ul li a.mypage {border:1px solid #1B9E50; color: #1B9E50;}
#siteMap_m .user_login .login_foo ul li a.logout {border:1px solid #53AFBD; color: #53AFBD;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#siteMap_m {opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s;}
#siteMap_m.on{opacity: 1; visibility: visible;}

#siteMap_m .m_foo > ul > li > button::after {transform: rotate(0deg); transition: transform 0.3s;}
#siteMap_m .m_foo > ul > li.on button::after{transform: rotate(180deg);}

#siteMap_m .m_foo > ul > li.on button,
#siteMap_m .m_foo > ul > li.on button::before {text-align: left; color:#1B9E50; font-weight: 700;}

body[data-top-banner="on"]:not([data-scrolled="start"]) #siteMap_m {top: calc(79px + var(--mobile-banner-height)); height: calc(100% - (79px + var(--mobile-banner-height)));} /* 상단배너 ON */

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:1024px){
    /*사이트맵 모바일*/
    #siteMap_m {display: block;}
}
@media screen and (max-width:620px){
    #siteMap_m::before {height: calc(100% - 480px);}
}
@media screen and (max-width:520px){
    #siteMap_m .user_login .login_con .items ul {display: block;}
    #siteMap_m .user_login .login_con .items ul li{margin-bottom: 10px;}
}
@media screen and (max-width:390px){
    #siteMap_m .user_login .login_foo ul {display: block;}
    #siteMap_m .user_login .login_foo ul li {margin-bottom: 10px;}
}


/*-------------------------------------------------------------------
	분류이름 : Footer
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#footer .foo_body {width: 100%; padding: 26px 24px 40px; background: #262626;}
#footer .foo_body .wrap {display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; width: 100%; max-width: 1528px; margin: 0 auto;}
#footer .foo_body .left {display: flex; align-items: flex-start; gap: 100px; min-width: 0;}
#footer .foo_body .right {display: flex; gap: 42px; flex-shrink: 0;}
/* 로고 */
#footer .foo_logo {margin: 25px 0 0; flex-shrink: 0;}
#footer .foo_logo span{display: block; width: 200px; height: 45px; background:url(../images/main/footer_logo_2.png) no-repeat 0 0 / 100% auto; text-indent: -9999px;}
/* 정보 */
#footer .foo_info {margin: 5px 0 0; text-align: left;}
#footer .foo_info .info ul {display: flex; align-items: center; padding-bottom: 26px; gap: 5px 36px;}
#footer .foo_info .info ul li a {display: block; color: #fff; font-size: 16px; font-weight: 700;}
#footer .foo_info address {display: flex; flex-wrap: wrap; align-items: center; color: #808080; gap: 0 12px; font-style: normal; font-weight: 600;}
#footer .foo_info address > div {margin: 1px 0; line-height: 1.5; font-size: 14px;}
/* 대표전화 */
#footer .foo_call {margin: 5px 0 0; min-width: 264px;}
#footer .foo_call ul {display: block;}
#footer .foo_call ul li {font-size: 14px; font-weight: 600; color: #808080;}

/* sns 아이콘 */
#footer .foo_sns_site {display: grid; grid-template-columns: 140px 200px; gap: 30px 32px; align-items: center;}
#footer .foo_sns ul {display: flex; gap: 8px;}
#footer .foo_sns ul li {width: 29px; height: 29px; flex-shrink: 0;}
#footer .foo_sns ul li a {display: block; width: 29px; height: 29px;}
#footer .foo_sns ul li:nth-child(3) {order: -1;}
#footer .foo_ministry {grid-column: 2;}
#footer .foo_ministry img {display: block; max-width: 100%; height: auto;}
/* 패밀리 사이트 */
#footer .f_site {margin: 0;}
#footer .f_site > ul {display: flex;}
#footer .f_site > ul > li {position: relative; width: 100%;}
#footer .f_site > ul > li::before {content: ''; position: absolute; align-self: baseline; bottom: 0; left: 0; width: 100%; height: 50px; background: #161626;}
#footer .f_site > ul > li > a {display: block; height: 40px; position: relative; padding-left: 20px; border: 1px solid #707070; border-radius: 8px; color: #909090; font-weight: 700; line-height: 38px; background: transparent;}
#footer .f_site > ul > li > a::before {content: ''; position: absolute; top: 12px; right: 15px; width: 14px; height: 14px; background: url(../images/main/arrow.png) no-repeat 0 center / 300% auto; opacity: 0.8;}

#footer .f_site .list {display: none; position: absolute; bottom: 40px; left: 0; width: 100%; z-index: 2; overflow: hidden; border-radius: 8px 8px 0 0;}
#footer .f_site .list > ul {padding: 10px 0; height: 200px; overflow-y: auto; background: #000;}
#footer .f_site .list > ul::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;}
#footer .f_site .list > ul::-webkit-scrollbar-thumb {height: 30%; border-radius: 8px; background: #53AFBD;}
#footer .f_site .list > ul::-webkit-scrollbar-track {border-radius: 8px; background: transparent;}
#footer .f_site .list > ul > li > a{margin: 10px 0; padding: 0 0 0 20px; line-height: 30px; font-size: 15px; color:#fff;}
#footer .f_site .list > ul > li > a:hover {text-decoration: underline;}

#footer small {display: block; margin-top: 22px; font-size: 14px; letter-spacing: 0.3px; line-height: 1.6; color: #808080; text-align: left;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#footer .foo_info address:first-child > div:nth-child(1) {background-position: 0 -19%;}
#footer .foo_info address:first-child > div:nth-child(2) {background-position: 0 112%;}
#footer .foo_info address:first-child > div:nth-child(3) {background: transparent; padding-left: 0px;}

#footer .foo_call ul li:nth-child(1) {color:#fff; font-size: 16px; font-weight: 600;}
#footer .foo_call ul li:nth-child(2) {margin: 16px 0 12px; color: #8FC31F; font-size: 40px; line-height: 1.2; font-weight: bold;}

#footer .foo_sns ul li:nth-child(1){background:url(../images/main/i_instar.png) no-repeat;}
#footer .foo_sns ul li:nth-child(2){background:url(../images/main/i_band.png) no-repeat;}
#footer .foo_sns ul li:nth-child(3){background:url(../images/main/i_youtube.png) no-repeat;}
#footer .foo_sns ul li:nth-child(4){background:url(../images/main/i_kakaoStory.png) no-repeat;}
#footer .foo_sns ul li:nth-child(n) {background-size: contain; background-position: center;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.controller button {transition: background 0.3s;}

#footer .f_site > ul > li::before {opacity: 0; transition:  all 0.5s;}
#footer .f_site > ul > li:hover::before,
#footer .f_site > ul > li.on::before {opacity: 1;}

#footer .f_site > ul > li:hover > a,
#footer .f_site > ul > li.on > a {color:#fff;}
#footer .f_site > ul > li > a::before {transform: rotate(-180deg);}
#footer .f_site > ul > li.on > a::before{transform: rotate(0);}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width:1800px){
    #footer .foo_body .left {gap: 50px;}
}
@media screen and (max-width:1500px){
    #footer .foo_body .wrap {display: block; width: 100%;}
    #footer .foo_body .left {margin-bottom: 28px;}
    #footer .foo_body .right{justify-content: space-between; align-items: center;}

    #footer .foo_call ul li:nth-child(2) {font-size: 30px;}

    #footer .f_site > ul{display: block;}
    #footer .f_site {margin: 0;}
    #footer .f_site > ul > li > a{padding-right: 45px;}

    #footer .foo_sns_site {display: grid; align-items: center;}
}
@media screen and (max-width:1024px){
    #footer .foo_body .wrap{display: block;}
    #footer .foo_body .left{display: block; margin-top: 30px;}
    #footer .foo_body .right{display: block; margin: 20px 0 0 0}

    #footer .foo_logo{margin-right: 0;}
    #footer .foo_logo span{margin: auto; background-size: 100%;}

    #footer .foo_info address{justify-content:center; flex-wrap: wrap;}
    #footer .foo_info .info ul,
    #footer .foo_sns ul{justify-content: center;}
    #footer .foo_call{text-align: center; margin-right: 0; margin-left:0;}
    #footer small {text-align: center;}

    #footer .f_site {margin-left: 0;}

    #footer .foo_sns_site {display: block; margin: 0 auto; width: 100%; max-width: 372px;}
    #footer .foo_ministry img {margin: 25px auto 0;}
    #footer .foo_sns_site .foo_sns {margin: 20px 0;}
}
@media screen and (max-width:768px){
    #footer .f_site > ul > li > a {height: 44px; line-height: 44px;}
    #footer .f_site > ul > li > a::before {top: 15px;}
}
@media screen and (max-width:520px){
    #footerWrap {display: none;}
}



@media screen and (max-width: 768px) {
    #footerWrap {display: block;}
    #footer .foo_body {padding: 19px 18px 24px;}
    #footer .foo_body .wrap {display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0; width: 100%;}
    #footer .foo_body .left,
    #footer .foo_body .right,
    #footer .foo_sns_site {display: contents;}
    #footer .f_site {grid-column: 1 / -1; grid-row: 1; margin: 0 0 24px;}
    #footer .f_site > ul > li > a {height: 40px; padding: 0 38px 0 17px; border-radius: 5px; line-height: 38px; font-size: 12px; color: #909090;}
    #footer .f_site > ul > li > a::before {top: 16px; right: 18px; width: 6px; height: 6px; border-top: 2px solid #fff; border-right: 2px solid #fff; background: none; opacity: 1; transform: rotate(-45deg);}
    #footer .f_site > ul > li.on > a::before {transform: rotate(135deg);}
    #footer .f_site > ul > li::before {height: 40px; border-radius: 5px;}
    #footer .f_site .list {bottom: 40px;}
    #footer .foo_call {grid-column: 1 / -1; grid-row: 2; min-width: 0; margin: 0; padding-bottom: 28px; border-bottom: 1px solid #555; text-align: left;}
    #footer .foo_call ul {display: grid; grid-template-columns: 80px minmax(0, 1fr); align-items: center; gap: 7px 0;}
    #footer .foo_call ul li:nth-child(1) {grid-column: 1; grid-row: 1; font-size: 12px; line-height: 1.3;}
    #footer .foo_call ul li:nth-child(2) {grid-column: 2; grid-row: 1; margin: 0; color: #8FC31F; font-size: clamp(28px, 7.5vw, 40px); font-weight: 800; line-height: 1.15; white-space: nowrap;}
    #footer .foo_call ul li:nth-child(3) {grid-column: 2; grid-row: 2; font-size: clamp(10px, 2.8vw, 14px); line-height: 1.5; white-space: nowrap;}
    #footer .foo_logo {grid-column: 1 / -1; grid-row: 3; margin: 28px 0;}
    #footer .foo_logo span {width: 160px; height: 36px; margin: 0; background-size: contain;}
    #footer .foo_info {grid-column: 1 / -1; grid-row: 4; margin: 0; text-align: left;}
    #footer .foo_info .info ul {justify-content: flex-start; flex-wrap: wrap; gap: 10px 28px; padding-bottom: 19px;}
    #footer .foo_info .info ul li a {font-size: 12px; line-height: 1.5;}
    #footer .foo_info address {justify-content: flex-start; gap: 0 9px;}
    #footer .foo_info address > div {margin: 0; font-size: clamp(10px, 2.8vw, 14px); line-height: 1.65;}
    #footer small {margin-top: 16px; font-size: clamp(9px, 2.65vw, 12px); line-height: 1.5; letter-spacing: 0; text-align: left;}
    #footer .foo_ministry {grid-column: 1 / -1; grid-row: 6; align-self: center; min-width: 0; margin-top: 20px; padding-right: 10px;}
    #footer .foo_ministry img {width: 120px; max-width: 100%; height: auto; margin: 0;}
    #footer .foo_sns_site .foo_sns {grid-column: 1 / -1; grid-row: 5; align-self: center; margin: 24px 0 0;}
    #footer .foo_sns ul {justify-content: flex-start; gap: 5px;}
    #footer .foo_sns ul li,
    #footer .foo_sns ul li a {width: 22px; height: 22px;}
}

/*-------------------------------------------------------------------
	분류이름 : 정보수정요청, 탑버튼 (미사용)
	분류그룹 : 레이아웃 > floating
-------------------------------------------------------------------*/
.fixed-btn {position: fixed; right: 24px; bottom: 20px; z-index: 100;}
.fixed-btn > button {width: 50px; height: 50px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; position: relative; font-size: 0; }
.fixed-btn > button + button {margin-top: 10px;}
.fixed-btn > button::before {font-family: "remixicon"; font-size: 24px;}
.fixed-btn > .info-edit {background-color: #53AFBD;}
.fixed-btn > .info-edit::before {content: "\ec80";}
.fixed-btn > .top-btn {background-color: #8FC31F; opacity: 0; transition: 0.2s; visibility: hidden;}
.fixed-btn > .top-btn.show {opacity: 1; visibility: visible;}
.fixed-btn > .top-btn::before {content: "\ea77";}
.fixed-btn > button span {opacity: 0; transition: 0.2s; position: absolute; top: 50%; right: 100%; margin-right: 11px; padding: 7px 13px; border-radius: 26px; background-color: #53AFBD; visibility: hidden; font-size: 12px; font-weight: 700; transform: translateY(-50%); line-height: 1;}
.fixed-btn > button span::before {content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 0; height: 0; display: block; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid #53AFBD; margin: auto 0 auto -5px;}
.fixed-btn > button:hover span {opacity: 1; visibility: visible;}

@media all and (max-width: 768px) {
    .fixed-btn {right: 10px; bottom: 10px;}
    .fixed-btn > button {width: 35px; height: 35px;}
    .fixed-btn > button::before {font-size: 18px;}
}

/*-------------------------------------------------------------------
	분류이름 : 정보수정요청
	분류그룹 : 레이아웃 > floating > 레이어팝업
-------------------------------------------------------------------*/
.info-edit-lp .lp-title {display: block; min-height: auto; font-size: 36px; text-align: left; margin-bottom: 20px;}
.info-edit-lp .lp-cont .inner .edit-text {font-weight: 700; color: #1B9E50; border-bottom: 1px solid #e9e9e9; padding-bottom: 13px;}
.info-edit-lp .edit-form {margin-top: 35px;}
.info-edit-lp .edit-form .item + .item {margin-top: 25px;}
.info-edit-lp .edit-form .item .tit {font-size: 18px; font-weight: 700; color: #000; margin-bottom: 5px;}
.info-edit-lp .edit-form .item.name {font-size: 16px; font-weight: 700; display: flex; flex-wrap: wrap;}
.info-edit-lp .edit-form .item.name .tit {flex-basis: 115px;}
.info-edit-lp .edit-form .item.name .cont strong {font-size: 22px;}
.info-edit-lp .edit-form .item .cont input[type="text"],
.info-edit-lp .edit-form .item .cont textarea {border: 1px solid #e9e9e9; border-radius: 10px; height: 60px; padding: 0 30px; width: 100%; font-size: 16px;}
.info-edit-lp .edit-form .item .cont textarea {height: 180px; padding-top: 20px; padding-bottom: 20px;}
.info-edit-lp .edit-form .file-wrap {display: flex; align-items: center; gap: 10px; padding-left: 10px; padding-bottom: 10px; margin-top: 20px;}
.info-edit-lp .edit-form .file-wrap .file-add {position: relative; min-width: 34px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #1B9E50; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.25); cursor: pointer; transition: 0.2s; border: 1px solid #1B9E50;}
.info-edit-lp .edit-form .file-wrap .file-add::before {font-family: "remixicon"; content: "\ea13"; font-size: 24px; color: #fff; transition: 0.2s;}
.info-edit-lp .edit-form .file-wrap .file-add input {position: absolute; top: 0; left: 0; opacity: 0; width: 0; height: 0;}
.info-edit-lp .edit-form .file-wrap .file-add:hover {background-color: #fff;}
.info-edit-lp .edit-form .file-wrap .file-add:hover::before {color: #1B9E50;}
.info-edit-lp .edit-form .file-wrap .no-file {font-size: 16px; color: #454545;}
.info-edit-lp .edit-form .file-wrap .file-list {display: flex; flex-wrap: wrap; gap: 10px 20px; margin-left: 20px;}
.info-edit-lp .edit-form .file-wrap .file-list > li {display: flex; align-items: center; gap: 5px;}
.info-edit-lp .edit-form .file-wrap .file-name {font-size: 16px; display: flex; align-items: center; gap: 5px; color: #454545;}
.info-edit-lp .edit-form .file-wrap .file-name::before {font-family: "remixicon"; content: "\ea84"; font-size: 24px; color: #53AFBD;}
.info-edit-lp .edit-form .file-wrap .del-btn {font-size: 0; line-height: 0; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid #e9e9e9; border-radius: 5px;}
.info-edit-lp .edit-form .file-wrap .del-btn::before {font-family: "remixicon"; content: "\eb99"; font-size: 18px;}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media all and (max-width: 768px) {
    .info-edit-lp .lp-title {font-size: 25px; margin-bottom: 10px;}
    .info-edit-lp .edit-form {margin-top: 20px;}
    .info-edit-lp .edit-form .item + .item {margin-top: 15px;}
    .info-edit-lp .edit-form .item .tit {font-size: 16px;}
    .info-edit-lp .edit-form .item.name {font-size: 14px;}
    .info-edit-lp .edit-form .item.name .tit {flex-basis: 75px;}
    .info-edit-lp .edit-form .item.name .cont strong {font-size: 18px;}
    .info-edit-lp .edit-form .item .cont input[type="text"],
    .info-edit-lp .edit-form .item .cont textarea {font-size: 14px; padding: 0 10px; height: 45px;}
    .info-edit-lp .edit-form .item .cont textarea {padding-top: 10px; padding-bottom: 10px; height: 100px;}

    .info-edit-lp .edit-form .file-wrap {margin-top: 10px;}
    .info-edit-lp .edit-form .file-wrap .file-list {gap: 5px 10px; margin-left: 0;}
    .info-edit-lp .edit-form .file-wrap .file-name {font-size: 14px;}
    .info-edit-lp .edit-form .file-wrap .file-name::before {font-size: 20px;}
    .info-edit-lp .edit-form .file-wrap .del-btn {width: 20px; height: 20px;}
    .info-edit-lp .edit-form .file-wrap .del-btn::before {font-size: 16px;}

    .info-edit-lp .edit-form .write-btn-wrap {gap: 10px; margin-top: 20px;}
    .info-edit-lp .edit-form .write-btn-wrap .temp-btn {min-width: 80px;}
}


/*-------------------------------------------------------------------
	분류이름 : 로딩화면
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
#loading {display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.85); z-index: 120;}
#loading .inner {position: relative;}
#loading .inner .character { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
#loading .text {animation: loadingRotate 7s linear infinite;}
#loading .svg {display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;}
#loading .border {fill: none; stroke: #fff; stroke-width: 6;}
#loading .progress {fill:none; stroke: #FFB000; stroke-width: 6; stroke-dasharray: 533.8; stroke-dashoffset: 533.8; animation: progress 2s ease-in-out infinite alternate;}
@keyframes loadingRotate {
    100% {transform: rotate(360deg);}
}
@keyframes progress {
    100% {stroke-dashoffset: 0;}
}



/*-------------------------------------------------------------------
	분류이름 : 고정영역
	분류그룹 : 레이아웃
-------------------------------------------------------------------*/
.fixed-area {display: block; position: relative;}
.fixed-contents {position: fixed; bottom: 0; left: 0; width: 100%; z-index: 80;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.fixed-contents.stop {position: absolute;}


/*-------------------------------------------------------------------
	분류이름 : 퀵메뉴
	분류그룹 : 레이아웃 > 고정영역
-------------------------------------------------------------------*/
#quick {display: block; position: absolute; bottom:20px; right: 3%; width: 130px;}
#quick .list {display: flex; position: relative; z-index: 1; margin-top: 10px; gap: 20px; flex-direction: column;}
#quick .list > li {display: flex; justify-content: flex-end;}
#quick .list > li .btn-quick {display: block; position: relative; width: 1em; height: 1em; font-size: 110px; padding-top: 64px; border-radius: 40px; background-repeat: no-repeat; background-position: center; background-size: cover;}
#quick .list > li .btn-quick::before {content: ''; position: absolute; bottom: calc(100% - 64px); right: 0; width: 1em; background-repeat: no-repeat; background-position: center; background-size: contain;}
#quick .list > li .btn-quick::after {content: ''; position: absolute; width: 1em; background-repeat: no-repeat; background-position: center; background-size: contain;}
#quick .list > li .btn-quick em {display: block; position: relative; width: 100%; padding-top:0; font-size: 16px; text-align: center; color: #fff;}

#quick .btn-top {display: flex; position: absolute; bottom: 0; left: 50%; width: 80px; height: 80px; border-radius: 50%; background-color: #1B9E50; border: 1px solid #147a3c; align-items: center; justify-content: center; transform: translate(-50%, 0);z-index:-1}
#quick .btn-top::before {content: ''; display: block; width: 20px; height: 20px; flex-shrink: 0; background: url('../images/main/2026/ico-top.png') no-repeat center / contain;}

#quick .btn-fold {display: none; margin: 0 auto; width: 100%; height: 30px; border: 1px solid #D0D7DE; border-radius: 5px; background-color: #fff; align-items: center; justify-content: center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);}
#quick .btn-fold::before {content: "\EA4D"; font-family: 'remixicon'; font-size: 24px; line-height: 1; color: #000;}

/*-------------------------------------------------------------------
	@variation
-------------------------------------------------------------------*/
#quick .list > li .btn-quick.q1 {background-image: url(../images/main/2025/quick_bg_01.jpg);}
#quick .list > li .btn-quick.q1::before {aspect-ratio: 1 / 0.71287; font-size: 101px; background-image: url(../images/main/2025/quick_ico_01.png);}
#quick .list > li .btn-quick.q2 {background-image: url(../images/main/2025/quick_bg_02.jpg);}
#quick .list > li .btn-quick.q2::before {aspect-ratio: 1 / 0.8; font-size: 90px; background-image: url(../images/main/2025/quick_ico_02.png);}
#quick .list > li .btn-quick.q3 {padding-top:45px;font-size:150px;box-shadow: none;margin-bottom: 20px;}
#quick .list > li .btn-quick.q3::before {bottom: calc(100% - 80px); right: calc(50% - 0.6em); aspect-ratio: 1 / 1.108048; font-size:120px; background-image: url(../images/main/2026/quick_ico_03.png); -webkit-animation: jump 3.5s ease infinite; animation: jump 3.5s ease infinite;}
#quick .list > li .btn-quick.q3 em{color:#000}
#quick .list > li .btn-quick.q3 em br{display:none;}
#quick .list > li .btn-quick.q3 .chatbot-alt{display: block;position: absolute;bottom: 0;right:calc(50% - 0.3em);width:70px;height: 40px;padding: 0 27px 0 14px;border-radius: 30px;background-color:transparent; transition: width .25s ease, background-color .25s ease;}
#quick .list > li .btn-quick.q3 .chatbot-alt:before{content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;border-radius: 30px;border:0px solid #53afbd;}
#quick .list > li .btn-quick.q3 .chatbot-alt> span{overflow: hidden;position: absolute;right:0;top:0;width:0;text-align: left; padding-left: 18px; font-size: 14px;font-weight:600;line-height: 40px;color:#53afbd;opacity: 0;transform: translateX(10px); transition: opacity .15s ease, transform .25s ease;transition-delay: 0.2s;}


#quick .list > li .btn-quick.q3 .chatbot-alt .ani{position: absolute; top: 0; right:0; width:70px; height: 40px; border-radius: 50px; border:0px solid #53afbd; box-sizing: border-box;}
#quick .list > li .btn-quick.q3 .chatbot-alt .ani > span{position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background-color: #53afbd; -webkit-animation: dot-keyframes 2s infinite ease-in-out; animation: dot-keyframes 2s infinite ease-in-out;}
#quick .list > li .btn-quick.q3 .chatbot-alt .ani > span:nth-child(1){margin-left: -8px;}
#quick .list > li .btn-quick.q3 .chatbot-alt .ani > span:nth-child(2){margin-left: -2px; -webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
#quick .list > li .btn-quick.q3 .chatbot-alt .ani > span:nth-child(3){margin-left: 4px; -webkit-animation-delay: 1s; animation-delay: 1s;}
#quick .list > li .btn-quick.q3 .chatbot-alt .ani > span:nth-child(4){margin-left: 10px; -webkit-animation-delay: 1.5s; animation-delay: 1.5s;}

#quick .list > li:nth-child(1) .quick-icon{position: absolute;background-repeat: no-repeat;background-position: 0 0; transition: all 1s;transition-delay: .7s;}
#quick .list > li:nth-child(1) .quick-icon.n1{width: 15px;height:15px;background-image:url(../images/main/2026/quick_ico_03_bg.png);top:-30px;left:40px;animation-duration: 2s;animation-name: bounceIn;animation-delay: .7s;animation-iteration-count: infinite;}



/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#quick .list > li .btn-quick {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2); transition: all 0.3s;}
#quick .list > li .btn-quick.active {font-size: 145px; margin-left: -15px;}
#quick .list > li .btn-quick:focus-visible,
#quick .list > li .btn-quick:hover {box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2);}
#quick .list > li .btn-quick.q3:focus-visible,
#quick .list > li .btn-quick.q3:hover{box-shadow:none}
#quick .list > li .btn-quick.q3:hover .chatbot-alt,
#quick .list > li .btn-quick.q3.auto-open .chatbot-alt{width:258px;background-color:#53afbd}
#quick .list > li .btn-quick.q3:hover .chatbot-alt> span,
#quick .list > li .btn-quick.q3.auto-open .chatbot-alt> span{width:100%; opacity: 1;color:#fff;transform: translateX(0);}
#quick .list > li .btn-quick.q3:hover .chatbot-alt .ani > span,
#quick .list > li .btn-quick.q3.auto-open .chatbot-alt .ani > span{background-color:#fff}
.fixed-contents.stop #quick{  bottom: 20px;}

@media screen and (min-width: 1025px) {
    #quick .list > li .btn-quick.q1:focus-visible::before,
    #quick .list > li .btn-quick.q1:hover::before {animation: jello-diagonal-2 0.8s both;}
    #quick .list > li .btn-quick.q2:focus-visible::before,
    #quick .list > li .btn-quick.q2:hover::before {animation: quick02 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;}
}

#quick .btn-top {opacity: 0; box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2); transition: all 0.3s;}
/* hover */
#quick .btn-top:focus-visible,
#quick .btn-top:hover {background-color: #188B46; box-shadow: 0 8px 15px 0 rgba(0, 0, 0, 0.2); transform: translate(-50%, -5px);}
#quick .btn-top::before {transition: all 0.3s;}
#quick .btn-top:focus-visible::before,
#quick .btn-top:hover::before {transform: translateY(-50%, -5px) scale(1.1);}
/* scroll */
#quick {transition: padding 0.3s;}
body[data-scrolled="start"] #quick {padding-bottom: 115px;}
body[data-scrolled="start"] #quick .btn-top {opacity: 1;z-index:1}

/* 메뉴 접기 (작은 화면) */


@keyframes jello-diagonal-2 {
    0% {transform: skew(0deg 0deg);}
    30% {transform: skew(-25deg -25deg);}
    40% {transform: skew(15deg, 15deg);}
    50% {transform: skew(-15deg, -15deg);}
    65% {transform: skew(5deg, 5deg);}
    75% {transform: skew(-5deg, -5deg);}
    100% {transform: skew(0deg 0deg);}
}
@keyframes quick02 {
    0%,
    100% {transform: rotate(0deg);transform-origin: 100% 0;}
    10% {transform: rotate(2deg);}
    20%,
    40%,
    60% {transform: rotate(-4deg);}
    30%,
    50%,
    70% {transform: rotate(4deg);}
    80% {transform: rotate(-2deg);}
    90% {transform: rotate(2deg);}
}
@keyframes quick03 {
    0%,
    100% {transform: translateX(0%);transform-origin: 50% 50%;}
    15% {transform: translateX(-20%) rotate(-6deg);}
    30% {transform: translateX(10%) rotate(6deg);}
    45% {transform: translateX(-10%) rotate(-3.6deg);}
    60% {transform: translateX(7%) rotate(2.4deg);}
    75% {transform: translateX(-4%) rotate(-1.2deg);}
}
@-webkit-keyframes jump {
    0%,20%,40%,100% { -webkit-transform: translateY(0) }
    10%,30% { -webkit-transform: translateY(-5px) }
}

@keyframes jump {
    0%,20%,40%,100% { transform: translateY(0) }
    10%,30% { transform: translateY(-5px) }
}
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}
@-webkit-keyframes dot-keyframes{
    0%{
        opacity: 0.3;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50%{
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
    100%{
        opacity: 0.3;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

@keyframes dot-keyframes{
    0%{
        opacity: 0.3;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
    50%{
        opacity: 1;
        -webkit-transform: scale(1.1, 1.1);
        transform: scale(1.1, 1.1);
    }
    100%{
        opacity: 0.3;
        -webkit-transform: scale(1, 1);
        transform: scale(1, 1);
    }
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media all and (max-width: 1920px) {
    #quick {right: 20px;}
}
@media all and (max-width: 1500px) {
    #quick {width: 60px;}
    #quick .list {gap: 5px;}
    #quick .list > li .btn-quick {padding-top: 0; font-size: 60px;}
    #quick .list > li .btn-quick::before {width: 0.5em;}
    #quick .list > li .btn-quick.q1::before {bottom: calc(50% - (0.25em * 0.71287));}
    #quick .list > li .btn-quick.q2::before {bottom: calc(50% - (0.25em * 0.8));}
    #quick .list > li .btn-quick.q3::before {right: calc(50% - 0.25em);}
    #quick .list > li .btn-quick em {position: absolute; top: 0; bottom: 16%; right: 100%; width: auto; height: fit-content; white-space: nowrap; margin: auto 15px auto 0; padding: 5px 10px; border-radius: 5px; background-color: #156954;}
    #quick .list > li .btn-quick em::before {content: ''; position: absolute; top: 50%; left: 100%; width: 0; height: 0; display: block; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid #156954; margin: -6px 0 0 0;}
    #quick .list > li .btn-quick em br {display: none;}

    #quick .list > li .btn-quick.q3{padding-top:0;font-size:110px;margin-bottom:0;}
    #quick .list > li .btn-quick.q3 em{color:#fff}
    #quick .list > li .btn-quick.q3::after{bottom:14px;left:0;}
    #quick .list > li .btn-quick.q3::before{font-size: 150px;bottom:28px}
    #quick .list > li .btn-quick.q3 .chatbot-alt{height:30px;}
    #quick .list > li .btn-quick.q3 .chatbot-alt> span{line-height:30px;}
    #quick .list > li .btn-quick.q3 .chatbot-alt .ani{height:30px;}
    #quick .list > li:nth-child(1) .quick-icon.n1{display:none;}

    #quick .btn-top {width: 60px; height: 60px;}
    #quick .btn-fold {display: flex;}

    /* interaction */
    body[data-scrolled="start"] #quick {padding-bottom: 80px;}

    #quick .list > li .btn-quick.active {margin-left: -20px; font-size: 80px;}
    #quick .list > li .btn-quick.active em {display: none;}
    #quick .list > li .btn-quick em {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, opacity 0.3s;}
    #quick .list > li .btn-quick:focus-visible em,
    #quick .list > li .btn-quick:hover em {visibility: visible; opacity: 1; transition: visibility 0s 0s, opacity 0.3s;}

    #quick .list > li .btn-quick.q3.active {margin-left: -20px;font-size:120px;}
    #quick .list > li .btn-quick.q3.active em {display: none;}

    #quick .btn-fold::before {transition: all 0.3s;}
}




#spot .sub-page-header > .depth1-title {position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
#spot .sub-page-header .depth2-wrap {display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; margin-top: 0; margin-bottom: 48px;}
#spot .sub-page-header .depth2-title {flex: 1 1 auto; font-size: 40px; line-height: 1.2; font-weight: 700; color: #222;}
#spot .sub-page-header .depth2-title::after {content: ''; display: inline-block; width: 14px; height: 13px; margin-left: 14px; vertical-align: top; margin-top: 5px; background: linear-gradient(135deg, #1B9E50, #8FC31F); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);}
#spot .sub-page-header .page-breadcrumb {display: flex; align-items: center; gap: 20px; margin-left: auto; font-family: 'Pretendard', sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; color: #555; white-space: nowrap;}
#spot .sub-page-header .page-breadcrumb a {color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;}
#spot .sub-page-header .page-breadcrumb .breadcrumb-home {display: flex; align-items: center; gap: 20px; text-decoration: none;}
#spot .sub-page-header .breadcrumb-home span {text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;}
#spot .sub-page-header .breadcrumb-home i {display: block; font-size: 18px; line-height: 1; color: #999;}
#spot .sub-page-header .page-breadcrumb > i {display: block; width: 6px; height: 6px; border-top: 1px solid #555; border-right: 1px solid #555; transform: rotate(45deg); flex-shrink: 0;}
#spot .sub-page-header .page-breadcrumb > i::before {content: none;}
#spot .sub-page-header .page-breadcrumb > [aria-current] {color: #222; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;}
#spot .sub-page-header .depth2-list {flex-basis: 100%; margin-top: 60px; border-radius: 8px; background: #f3f3f3; overflow: hidden;}
#spot .sub-page-header .depth2-list .item {flex: 1 1 0; width: auto; height: 60px; padding: 0 12px; border-radius: 8px; font-size: 20px; font-weight: 600; line-height: 1.3; color: #454545;}
#spot .sub-page-header .depth2-list .item.active,
.event-page #con .nongchon-week .nongchon-tab .tab-btn.active {background: #1B9E50; color: #fff; font-weight: 700;}
@media (hover: hover) and (min-width: 769px) {
    #spot .sub-page-header .depth2-list .item:not(.active):hover {background: #e3f2e8; color: #1B9E50;}
}
#spot .sub-page-header .mobile-depth2-toggle {display: none;}
@media screen and (min-width: 1025px) {
    #spot .sub-page-header .depth2-title,
    #spot .sub-page-header .depth2-wrap.no-depth2 .depth2-title {flex: 1 1 0; min-width: 0;}
    #spot .sub-page-header .page-breadcrumb {flex: 0 0 auto;}
}
@media screen and (max-width: 1024px) {
    #spot .sub-page-header .depth2-wrap {gap: 20px 16px;}
    #spot .sub-page-header .depth2-title {font-size: 32px;}
    #spot .sub-page-header .page-breadcrumb {flex-basis: 100%; margin: 0; order: 1;}
    #spot .sub-page-header .depth2-list {margin-top: 12px; order: 2;}
    #spot .sub-page-header .depth2-list .item {font-size: 16px;}
}
@media screen and (max-width: 768px) {
    #spot {padding-top: 34px; margin-bottom: 24px;}
    #spot .sub-page-header .depth2-wrap {display: grid; grid-template-columns: auto 44px minmax(0, 1fr) 44px; align-items: center; gap: 0 10px; position: relative; margin: 0 0 24px;}
    #spot .sub-page-header .page-breadcrumb {grid-column: 1 / -1; grid-row: 1; order: initial; width: 100%; margin: 0 0 28px; gap: 14px; flex-wrap: nowrap; overflow: hidden; font-size: 13px; color: #555;}
    #spot .sub-page-header .page-breadcrumb a,
    #spot .sub-page-header .page-breadcrumb > [aria-current] {overflow: hidden; text-overflow: ellipsis; text-decoration: underline; white-space: nowrap;}
    #spot .sub-page-header .page-breadcrumb .breadcrumb-home {gap: 12px; flex-shrink: 0;}
    #spot .sub-page-header .breadcrumb-home i {font-size: 17px;}
    #spot .sub-page-header .depth2-title {grid-column: 1; grid-row: 2; min-width: 0; font-size: 28px; line-height: 44px; white-space: nowrap;}
    #spot .sub-page-header .depth2-title::after {display: none;}
    #spot .sub-page-header .mobile-depth2-toggle {display: flex; grid-column: 2; grid-row: 2; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid #cfcfcf; border-radius: 8px; background: #fff; color: #111; font-size: 25px;}
    #spot .sub-page-header .mobile-depth2-toggle i {display: block; width: 1em; height: 1em; line-height: 1; transform-origin: 50% 50%; transition: transform .25s ease;}
    #spot .sub-page-header .mobile-depth2-toggle i::before {display: block; line-height: 1;}
    #spot .sub-page-header.mobile-menu-open .mobile-depth2-toggle i {transform: rotate(180deg);}
    #spot .sub-page-header .share-wrap {display: flex; grid-column: 4; grid-row: 2; justify-content: flex-end; margin: 0; padding-left: 10px; border-left: 1px solid #e2e2e2;}
    #spot .sub-page-header .share-wrap .share-btn.share-toggle {width: 34px; height: 44px; background: transparent;}
    #spot .sub-page-header .share-wrap .share-btn.share-toggle::before {color: #999; font-size: 25px;}
    #spot .sub-page-header .share-wrap .share-btn.share-toggle.active {background: transparent;}
    #spot .sub-page-header .share-wrap .share-btn.share-toggle.active::before {color: #454545;}
    #spot .sub-page-header .share-wrap .share-list {top: 100%; left: auto; right: 0; z-index: 50; width: max-content; max-width: calc(100vw - 40px); margin-top: 8px; padding: 8px; flex-wrap: wrap; justify-content: flex-end; border: 1px solid #e5e5e5; border-radius: 7px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,.12);}
    #spot .sub-page-header .share-wrap .share-item {flex-shrink: 0;}
    #spot .sub-page-header .depth2-list {display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; z-index: 40; top: calc(100% + 16px); left: 0; right: 0; grid-column: 1 / -1; width: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 1px solid #8f8f8f; border-radius: 6px; background: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.12); visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;}
    #spot .sub-page-header.mobile-menu-open .depth2-list {visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s;}
    #spot .sub-page-header .depth2-wrap::after {content: ''; position: absolute; z-index: 30; top: 100%; left: 50%; width: 100vw; height: 100vh; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,.45) 180px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .22s ease, visibility 0s linear .22s;}
    #spot .sub-page-header.mobile-menu-open .depth2-wrap::after {visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s;}
    #spot .sub-page-header .depth2-list .item {flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-width: 0; height: 60px; padding: 0 18px 0 22px; border-radius: 0; border-bottom: 1px solid #e3e3e3; background: #fff; font-size: 16px; font-weight: 500; line-height: 1.3; color: #454545; text-align: left;}
    #spot .sub-page-header .depth2-list .item:last-child {border-bottom: 0;}
    #spot .sub-page-header .depth2-list .item::after {content: '\ea6e'; flex-shrink: 0; font-family: 'remixicon'; font-size: 20px; font-weight: 400; color: #777;}
    #spot .sub-page-header .depth2-list .item:hover {background: #f7f7f7; color: #454545; font-weight: 500;}
    #spot .sub-page-header .depth2-list .item.active,
    #spot .sub-page-header .depth2-list .item.active:hover {border-radius: 0; background: #e8f4ec; color: #1B9E50; font-weight: 700;}
    #spot .sub-page-header .depth2-list .item.active::after {color: #1B9E50;}
}

#con #travel-info.travel-catalog .catalog-layout {display: grid; grid-template-columns: 310px minmax(0, 1fr); column-gap: 50px; align-items: start;}
#con #travel-info.travel-catalog .catalog-sidebar {padding: 10px 50px 80px 0; border-right: 1px solid #e5e5e5; min-height: 1400px;}
#con #travel-info.travel-catalog .catalog-filter-title {margin: 0 0 26px; font-size: 20px; font-weight: 700; color: #454545;}
#con #travel-info.travel-catalog .catalog-category-title {margin-top: 36px;}
#con #travel-info.travel-catalog .search-area {display: flex; flex-direction: column; gap: 10px; width: 100%;}
#con #travel-info.travel-catalog .search-area .temp-select,
#con #travel-info.travel-catalog .search-area .temp-input {width: 100%; min-width: 0; height: 46px; border: 1px solid #d5d5d5; border-radius: 5px; font-size: 14px; background-color: #fff;}
#con #travel-info.travel-catalog .input-area {display: flex; flex-direction: column; gap: 12px; width: 100%;}
#con #travel-info.travel-catalog .input-area .search-btn {position: static; width: 100%; height: 52px; border-radius: 5px; background: #278795; color: #fff; font-size: 0; line-height: 1.3;}
#con #travel-info.travel-catalog .input-area .search-btn::before {content: '검색하기'; font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 700;}
#con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs {display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%;}
#con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button {height: 44px; border: 1px solid #d6d9de; background: #fff; color: #555; font-size: 15px; cursor: pointer;}
#con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button + button {margin-left: -1px;}
#con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button.active {position: relative; border-color: #2b7f8c; color: #2b7f8c; background: #e8f4f5; font-weight: 700;}
#con #travel-info.travel-catalog .catalog-sidebar .search-area #sido {display: block;}
#con #travel-info.travel-catalog .catalog-sidebar[data-region-step="sido"] .search-area #sigungu {display: none;}
#con #travel-info.travel-catalog .catalog-sidebar[data-region-step="sigungu"] .search-area #sigungu {display: block;}
#con #travel-info.travel-catalog .catalog-sidebar .search-area > select:not(#sido):not(#sigungu) {display: none;}
#con #travel-info.travel-catalog .depth3-list {display: flex; flex-direction: column; align-items: stretch; gap: 5px; margin: 0; overflow: visible;}
#con #travel-info.travel-catalog .depth3-list .item {display: flex; align-items: center; gap: 12px; width: 100%; min-height: 47px; padding: 10px 16px; border: 1px solid #d5d5d5; border-radius: 6px; font-size: 15px; line-height: 1.4; text-align: left; color: #666; background: #fff;}
#con #travel-info.travel-catalog .depth3-list .item::before {content: ''; display: inline-block; position: static; width: 19px; height: 19px; flex-shrink: 0; margin: 0; border-radius: 50%; color: #999; background: currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l2.5 2.5L12 5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;}
#con #travel-info.travel-catalog .depth3-list .item:last-child::before {display: inline-block;}
#con #travel-info.travel-catalog .depth3-list .item.active {border-color: #1B9E50; color: #1B9E50;}
#con #travel-info.travel-catalog .depth3-list .item.active::before {color: #1B9E50;}
#con #travel-info.travel-catalog .depth3-list .item::after {display: none !important;}
#con #travel-info.travel-catalog .catalog-filter-actions {display: grid; grid-template-columns: 52px 1fr; gap: 8px; margin-top: 20px;}
#con #travel-info.travel-catalog .catalog-filter-actions button {height: 52px; border: 1px solid #1B9E50; border-radius: 5px; color: #fff; background: #1B9E50; font-size: 16px; font-weight: 700; opacity: 1; }
#con #travel-info.travel-catalog .catalog-filter-actions button:first-child {background: #fff; color: #1B9E50; font-size: 24px;}
#con #travel-info.travel-catalog .catalog-filter-actions button:first-child i {display: block; width: 18px; height: 18px; margin: 0 auto; background: url('../images/main/2026/ico-filter-reset.png') no-repeat center / contain;}
#con #travel-info.travel-catalog .catalog-filter-actions button:first-child i::before {content: none;}
#con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button,
#con #travel-info.travel-catalog .catalog-sidebar .search-area .temp-select,
#con #travel-info.travel-catalog .catalog-sidebar .input-area .search-btn,
#con #travel-info.travel-catalog .depth3-list .item,
#con #travel-info.travel-catalog .catalog-filter-actions button {transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;}
#con #travel-info.travel-catalog .depth3-list .item::before {transition: color .2s ease;}
#con #travel-info.travel-catalog .catalog-results {min-width: 0;}
#con #travel-info.travel-catalog .board-head {display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 0 40px; min-height: 44px;}
#con #travel-info.travel-catalog .total-page {font-size: 18px; font-weight: 600; color: #555;}
#con #travel-info.travel-catalog .total-page > i {display: none;}
#con #travel-info.travel-catalog .total-page > strong:first-of-type {color: #1B9E50; font-size: 22px; margin: 0 4px; vertical-align: -0.07em;}
#con #travel-info.travel-catalog .catalog-sort {display: flex; gap: 10px;}
#con #travel-info.travel-catalog .catalog-sort select {height: 40px; min-width: 130px; padding: 0 40px 0 16px; border: 1px solid #d5d5d5; border-radius: 7px; color: #777; background: #fff url('../images/sub/select-bg.svg') no-repeat right 14px center; background-size: 18px 18px; opacity: 1; font-size: 14px; -webkit-appearance: none; appearance: none; cursor: pointer;}
#con #travel-info.travel-catalog .info-list {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 26px;}
#con #travel-info.travel-catalog .info-list > .item {display: flex; flex-direction: column; position: relative; min-width: 0; border: 1px solid #d5d5d5; border-radius: 8px; background: #fff;}
#con #travel-info.travel-catalog .info-list > .item + .item {margin-top: 0;}
#con #travel-info.travel-catalog .info-list > .item::after {content: '\ee0f'; font-family: 'remixicon'; position: absolute; top: 14px; right: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #454b48dd; color: #fff; font-size: 23px; pointer-events: none;}

#con #travel-info.travel-catalog .info-list > .item.is-liked::after {content: '\ee0f'; background: #1B9E50;}
#con #travel-info.travel-catalog .info-list .img-area {flex: none; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 7px 7px 0 0; overflow: hidden;}
#con #travel-info.travel-catalog .info-list .img-area::before {background: none;}
#con #travel-info.travel-catalog .info-list .img-area .inner {display: none;}
#con #travel-info.travel-catalog .info-list .api-logo {top: auto; bottom: 10px; left: 10px; right: auto; padding: 5px;}
#con #travel-info.travel-catalog .info-list .info-area {flex: 1; width: 100%; min-height: 170px; padding: 18px 20px 18px; border: 0;}
#con #travel-info.travel-catalog .info-list .info-area > a {display: flex; flex-direction: column;}
#con #travel-info.travel-catalog .info-list .subject {order: 0; margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: #444; -webkit-line-clamp: 1;}
#con #travel-info.travel-catalog .info-list .text {order: 1; min-height: 38px; margin: 14px 0 0; padding: 0; border: 0; color: #666; font-size: 16px; line-height: 1.3; -webkit-line-clamp: 2;}
#con #travel-info.travel-catalog .info-list .place {order: 2; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: 14px; color: #999; font-size: 14px; line-height: 1.35; font-weight: 500;}
#con #travel-info.travel-catalog .info-list .place::before {display: none;}
#con #travel-info.travel-catalog .info-list .program-info {order: 1; margin: 12px 0 0; padding: 0; border: 0;}
#con #travel-info.travel-catalog .info-list .program-info .title {margin: 0; color: #666; font-size: 14px; line-height: 1.4;}
#con #travel-info.travel-catalog .info-list .program-wrap {position: absolute; top: 14px; bottom: 10px; left: 10px; right: 10px; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; pointer-events: none;}
#con #travel-info.travel-catalog .info-list .program-btn {display: inline-flex; flex-shrink: 0; gap: 6px; max-width: calc(100% - 44px); margin: 0; padding: 8px 14px; border: 0; border-radius: 20px; background: #9f7e4c; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2; pointer-events: auto;}
#con #travel-info.travel-catalog .info-list .program-btn i {display: block; flex-shrink: 0; font-size: 16px; line-height: 1;}
#con #travel-info.travel-catalog .info-list .program-btn .ri-chat-3-line::before {content: '\eb51';}
#con #travel-info.travel-catalog .info-list .program-btn:hover,
#con #travel-info.travel-catalog .info-list .program-btn[aria-expanded="true"] {background: #9f7e4c; color: #fff;}
#con #travel-info.travel-catalog .info-list .program-pop {position: relative; flex: 0 1 auto; box-sizing: border-box; top: auto; bottom: auto; left: auto; right: auto; width: 100%; min-height: 0; max-width: none; max-height: none; margin: 0; padding: 14px 38px 14px 14px; overflow: visible; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transform: translateY(-6px); border: 2px solid #9f7e4c; border-radius: 14px; background: #fff; color: #444; box-shadow: 0 6px 18px rgba(62,44,20,.18); pointer-events: none; transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;}
#con #travel-info.travel-catalog .info-list .program-pop.active {visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; transition-delay: 0s;}
#con #travel-info.travel-catalog .info-list .program-pop::before {content: ''; display: block; position: absolute; top: -9px; bottom: auto; left: 24px; right: auto; width: 14px; height: 14px; margin: 0; border: 0; border-top: 2px solid #9f7e4c; border-left: 2px solid #9f7e4c; background: #fff; transform: rotate(45deg);}
#con #travel-info.travel-catalog .info-list .program-pop .close {display: flex; align-items: center; justify-content: center; top: 6px; right: 6px; width: 26px; height: 26px; background: transparent; color: #9f7e4c; font-size: 20px;}
#con #travel-info.travel-catalog .info-list .program-pop .temp-blt {min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; border-radius: 0; background: transparent;}
#con #travel-info.travel-catalog .info-list .program-pop .temp-blt li {position: relative; margin: 0; padding: 0 0 0 12px;}
#con #travel-info.travel-catalog .info-list .program-pop .temp-blt li::before {content: ''; display: block; position: absolute; top: 8.5px; left: 2px; width: 4px; height: 4px; border-radius: 50%; background: #9f7e4c;}
#con #travel-info.travel-catalog .info-list .program-pop .temp-blt li + li {margin-top: 3px; border-top: 0;}
#con #travel-info.travel-catalog .info-list .program-pop .temp-blt a {display: block; padding: 0 4px; color: #514534; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere;}
#con #travel-info.travel-catalog .info-list .program-pop .temp-blt a:hover {border-radius: 6px; background: #f5ede1; color: #725735;}
#con #travel-info.travel-catalog .pagenation {margin-top: 50px; gap: 8px;}
#con #travel-info.travel-catalog .pagenation .num {width: 40px; height: 40px; border-radius: 4px; font-size: 18px;}
#con #travel-info.travel-catalog .pagenation .num.active {background: #1B9E50; color: #fff;}
#con #travel-info.travel-catalog .catalog-more,
#con #travel-info.travel-catalog .catalog-filter-head,
#con #travel-info.travel-catalog .catalog-region-tabs,
#con #travel-info.travel-catalog .catalog-filter-open {display: none;}
#con #travel-info.travel-catalog .info-list > .item > .catalog-like {position: absolute; top: 14px; right: 14px; z-index: 2; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer;}
#con #travel-info.travel-catalog .info-list > .item > .catalog-like:focus-visible {outline: 2px solid #1B9E50; outline-offset: 2px;}

@media screen and (min-width: 701px) {
    #con #travel-info.travel-catalog .catalog-sidebar > .catalog-filter-title:first-of-type {margin-bottom: 30px;}
    #con #travel-info.travel-catalog .catalog-sidebar .search-area {gap: 10px;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button {height: 44px; padding: 0 10px; border-color: #d5d5d5; color: #777; font-size: 16px; font-weight: 600;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button:first-child {border-radius: 6px 0 0 6px;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button:last-child {border-radius: 0 6px 6px 0;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button.active {z-index: 1; border-color: #4399a7; background: #e5f2f4; color: #4399a7;}
    #con #travel-info.travel-catalog .catalog-sidebar .search-area #sido,
    #con #travel-info.travel-catalog .catalog-sidebar .search-area #sigungu {height: 48px; padding: 0 40px 0 20px; border: 1px solid #d5d5d5; border-radius: 7px; color: #666; background-position: right 20px center; font-size: 16px; font-weight: 600;}
    #con #travel-info.travel-catalog .catalog-sidebar .input-area {margin-top: 4px;}
    #con #travel-info.travel-catalog .catalog-sidebar .input-area .search-btn {height: 52px; margin: 0; border-radius: 7px; background: #278795;}
    #con #travel-info.travel-catalog .catalog-sidebar .input-area .search-btn::before {font-size: 18px; font-weight: 700;}
}
@media screen and (max-width: 1440px) {
    #con #travel-info.travel-catalog .catalog-layout {grid-template-columns: 250px minmax(0, 1fr); gap: 30px;}
    #con #travel-info.travel-catalog .catalog-sidebar {padding-right: 30px;}
    #con #travel-info.travel-catalog .info-list {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px;}
}
@media screen and (max-width: 1024px) {
    #con #travel-info.travel-catalog .catalog-layout {grid-template-columns: 210px minmax(0, 1fr); gap: 20px;}
    #con #travel-info.travel-catalog .catalog-sidebar {padding-right: 20px; min-height: 0;}
    #con #travel-info.travel-catalog .info-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
    #con #travel-info.travel-catalog .board-head {flex-wrap: wrap; margin-bottom: 24px;}
}
@media screen and (max-width: 768px) {
    #con #travel-info.travel-catalog .temp-visual {height: 106px; margin-bottom: 28px; padding: 18px 22px; align-content: center; border-radius: 7px; overflow: hidden;}
    #con #travel-info.travel-catalog .temp-visual .title {font-size: 26px; line-height: 1.2;}
    #con #travel-info.travel-catalog .temp-visual .text {margin-top: 10px; font-size: 14px; line-height: 1.3;}
}
@media screen and (max-width: 700px) {
    body.catalog-filter-lock {overflow: hidden;}
    #con #travel-info.travel-catalog .info-list .item.catalog-card-hidden {display: none;}
    #con #travel-info.travel-catalog .catalog-layout {display: block;}
    #con #travel-info.travel-catalog .catalog-results {width: 100%;}
    #con #travel-info.travel-catalog .board-head {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 46px; margin: 0 0 24px;}
    #con #travel-info.travel-catalog .total-page {margin: 0; padding: 0; font-size: 16px; line-height: 1.35; white-space: nowrap;}
    #con #travel-info.travel-catalog .total-page > strong:first-of-type {margin: 0 2px; font-size: 19px;}
    #con #travel-info.travel-catalog .catalog-sort {display: none;}
    #con #travel-info.travel-catalog .catalog-filter-open {display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid #1B9E50; border-radius: 7px; color: #178943; background: #fff; font-size: 14px; font-weight: 700; white-space: nowrap;}
    #con #travel-info.travel-catalog .catalog-filter-open i {font-size: 20px; font-weight: 400;}
    #con #travel-info.travel-catalog .catalog-sidebar {position: fixed; z-index: 3000; inset: 0; display: flex; flex-direction: column; box-sizing: border-box; width: 100%; height: 100dvh; min-height: 0; padding: 0 20px 20px; overflow: hidden; overscroll-behavior: contain; border: 0; background: #fff; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;}
    #con #travel-info.travel-catalog .catalog-sidebar.active {visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s;}
    #con #travel-info.travel-catalog .catalog-sidebar > * {flex-shrink: 0;}
    #con #travel-info.travel-catalog .catalog-sidebar > .catalog-cate {flex: 1 1 auto; min-height: 0; margin: 0; padding-right: 9px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;}
    #con #travel-info.travel-catalog .catalog-filter-head {display: flex; position: sticky; z-index: 3; top: 0; align-items: center; justify-content: space-between; height: 60px; margin: 0 -20px 20px; padding: 0 20px; border-bottom: 1px solid #e5e5e5; background: #fff;}
    #con #travel-info.travel-catalog .catalog-filter-head h5 {margin: 0; color: #222; font-size: 20px; font-weight: 700;}
    #con #travel-info.travel-catalog .catalog-filter-close {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #222; background: transparent; font-size: 30px;}
    #con #travel-info.travel-catalog .catalog-filter-title {margin: 0 0 16px; font-size: 18px;}
    #con #travel-info.travel-catalog .catalog-region-tabs {display: grid; grid-template-columns: 1fr 1fr; gap: 0; width: 100%; margin-bottom: 8px;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button {height: 44px; border: 1px solid #d4d4d4; color: #666; background: #fff; font-size: 15px; font-weight: 700;}
    #con #travel-info.travel-catalog .catalog-region-tabs button:first-child {border-radius: 8px 0 0 8px;}
    #con #travel-info.travel-catalog .catalog-region-tabs button:last-child {margin-left: -1px; border-radius: 0 8px 8px 0;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button.active {z-index: 1; border-color: #53AFBD; color: #008ea0; background: #e6f5f7;}
    #con #travel-info.travel-catalog .search-area {gap: 8px;}
    #con #travel-info.travel-catalog .search-area .temp-select {display: none; height: 44px; padding: 0 40px 0 16px; border-radius: 7px; font-size: 15px;}
    #con #travel-info.travel-catalog .catalog-sidebar[data-region-step="sido"] #sido,
    #con #travel-info.travel-catalog .catalog-sidebar[data-region-step="sigungu"] #sigungu {display: block;}
    #con #travel-info.travel-catalog .search-area #st,
    #con #travel-info.travel-catalog .search-area #st1,
    #con #travel-info.travel-catalog .search-area #st2,
    #con #travel-info.travel-catalog .search-area #st3,
    #con #travel-info.travel-catalog .search-area #st4,
    #con #travel-info.travel-catalog .input-area .search-btn {height: 48px; margin-top: 0; border-radius: 7px; background: #068e9b;}
    #con #travel-info.travel-catalog .input-area .search-btn::before {font-size: 16px;}
    #con #travel-info.travel-catalog .catalog-category-title {display: flex; align-items: center; gap: 10px; margin: 28px 0 16px;}
    #con #travel-info.travel-catalog .depth3-list {display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; max-height: none; min-height: 0; padding-right: 9px; overflow-y: auto; overscroll-behavior: contain;}
    #con #travel-info.travel-catalog .depth3-list .item {flex-shrink: 0; min-height: 48px; padding: 10px 14px; border-radius: 7px; font-size: 15px; font-weight: 600;}
    #con #travel-info.travel-catalog .depth3-list .item::before {width: 20px; height: 20px; background-size: 14px 14px;}
    #con #travel-info.travel-catalog .depth3-list::-webkit-scrollbar {width: 5px;}
    #con #travel-info.travel-catalog .depth3-list::-webkit-scrollbar-button {display: none; width: 0; height: 0;}
    #con #travel-info.travel-catalog .depth3-list::-webkit-scrollbar-track {border-radius: 5px; background: #d5d5d5;}
    #con #travel-info.travel-catalog .depth3-list::-webkit-scrollbar-thumb {border-radius: 5px; background: #1B9E50;}
    @supports not selector(::-webkit-scrollbar) {
        #con #travel-info.travel-catalog .depth3-list {scrollbar-width: thin; scrollbar-color: #1B9E50 #d5d5d5;}
    }
    #con #travel-info.travel-catalog .catalog-filter-actions {position: static; z-index: 2; grid-template-columns: 60px 1fr; gap: 8px; margin: 16px -20px -20px; padding: 12px 20px 16px; background: #fff;}
    #con #travel-info.travel-catalog .catalog-filter-actions button {height: 50px; border-radius: 7px; font-size: 17px; cursor: pointer;}
    #con #travel-info.travel-catalog .info-list {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px;}
    #con #travel-info.travel-catalog .pagenation {display: none;}
    #con #travel-info.travel-catalog .catalog-more {display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: 56px; margin-top: 24px; border: 1px solid #b5b5b5; border-radius: 5px; background: #f8f8f8; color: #444; font-size: 16px; font-weight: 700; text-align: center; cursor: pointer;}
    #con #travel-info.travel-catalog .catalog-more::after {content: ''; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: url('../images/sub/nongchon-week-plus.svg') no-repeat center / contain; mask: url('../images/sub/nongchon-week-plus.svg') no-repeat center / contain;}
    #con #travel-info.travel-catalog .info-list > .item {border-radius: 6px;}
    #con #travel-info.travel-catalog .info-list .img-area {height: auto; aspect-ratio: 1.18 / 1;}
    #con #travel-info.travel-catalog .info-list > .item::after {top: 10px; right: 10px; width: 32px; height: 32px; font-size: 21px;}
    #con #travel-info.travel-catalog .info-list .info-area {min-height: 150px; padding: 14px 13px 18px;}
    #con #travel-info.travel-catalog .info-list .subject {font-size: 17px;}
    #con #travel-info.travel-catalog .info-list .text {min-height: 36px; margin-top: 10px; font-size: 13px; line-height: 1.4;}
    #con #travel-info.travel-catalog .info-list .place {margin-top: 12px; font-size: 12px; line-height: 1.4;}
    #con #travel-info.travel-catalog .info-list .program-wrap {top: 10px; left: 8px; right: 8px;}
    #con #travel-info.travel-catalog .info-list .program-btn {gap: 4px; padding: 8px 10px; font-size: 12px;}
    #con #travel-info.travel-catalog .info-list .program-btn i {font-size: 14px;}
    #con #travel-info.travel-catalog .info-list .program-pop {padding: 12px 36px 10px 8px;}
}
@media screen and (width < 500px) {
    #con #travel-info.travel-catalog .catalog-results .info-list {grid-template-columns: minmax(0, 1fr);}
}
@media (hover: hover) and (pointer: fine) {
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button,
    #con #travel-info.travel-catalog .catalog-sidebar .search-area .temp-select,
    #con #travel-info.travel-catalog .catalog-sidebar .input-area .search-btn,
    #con #travel-info.travel-catalog .catalog-filter-actions button,
    #con #travel-info.travel-catalog .pagenation > a {transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; cursor: pointer;}
    #con #travel-info.travel-catalog .catalog-sidebar .catalog-region-tabs button:not(.active):hover {position: relative; border-color: #4399a7; background: #f0f8f9; color: #278795;}
    #con #travel-info.travel-catalog .catalog-sidebar .search-area .temp-select:hover {border-color: #4399a7; box-shadow: 0 0 0 2px rgba(39,135,149,.1);}
    #con #travel-info.travel-catalog .catalog-sidebar .input-area .search-btn:not(:disabled):hover {background: #1e7380; box-shadow: 0 3px 8px rgba(39,135,149,.18);}
    #con #travel-info.travel-catalog .catalog-filter-actions .catalog-filter-apply:not(:disabled):hover {border-color: #148340; background: #148340; box-shadow: 0 3px 8px rgba(27,158,80,.18);}
    #con #travel-info.travel-catalog .catalog-filter-actions .catalog-filter-reset:not(:disabled):hover {border-color: #148340; background: #edf8f0;}
    #con #travel-info.travel-catalog .pagenation .num:not(.active):hover {border-radius: 4px; background: #eaf6ee; color: #178943;}
    #con #travel-info.travel-catalog .pagenation .arrow:hover {border-radius: 4px; background-color: #dfeee4; box-shadow: 0 0 0 1px #b6d8c0;}
    #con #travel-info.travel-catalog .depth3-list .item:not(.active):hover {border-color: #1B9E50; background: #f4fbf6; color: #178943;}
    #con #travel-info.travel-catalog .depth3-list .item:not(.active):hover::before {color: #1B9E50;}
    #con #travel-info.travel-catalog .info-list > .item::after {transition: background-color .18s ease;}
    #con #travel-info.travel-catalog .info-list > .item:has(> .catalog-like:hover)::after {background: #1B9E50;}	
}

@font-face {
    font-family: 'Gmarket Sans Quick';
    src: url('../font/GmarketSansBold.woff2') format('woff2'),
         url('../font/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
#quick .list > li .btn-quick em {font-family: 'Gmarket Sans Quick', 'Pretendard', sans-serif; font-weight: 700;}
#quick .btn-top > span {font-family: 'Pretendard', sans-serif;}
#quick .btn-top {flex-direction: column; gap: 2px;}
#quick .btn-top > span {color: #fff; font-size: 14px; font-weight: 700;}
@media screen and (min-width: 1501px) {
    #quick {width: 130px;}
    #quick .list {align-items: center; gap: 16px;}
    #quick .list > li {justify-content: center;}
    #quick .list > li .btn-quick {width: 76px; height: 80px; padding-top: 34px; border-radius: 38px 38px 8px 8px; font-size: 76px; background-size: cover;}
    #quick .list > li .btn-quick em {font-size: 15px; font-weight: 700; line-height: 1.15; font-style: normal;}
    #quick .list > li .btn-quick.q2 {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 76px; height: 100px; padding-top: 56px; border-radius: 38px 38px 8px 8px; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);}
    #quick .list > li .btn-quick.q2::before {width: 64px; height: 51px; top: -6px; bottom: auto; right: 0; font-size: 64px;}
    #quick .list > li .btn-quick.q2 em {font-size: 15px; line-height: 1.15;}
    #quick .list > li .btn-quick.q3,
    #quick .list > li .btn-quick.q3.active {display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: 130px; height: 180px; padding-top: 124px; margin: 0; font-size: 130px; border-radius: 0; box-shadow: none;}
    #quick .list > li .btn-quick.q3::before {width: 112px; height: 112px; bottom: auto; top: 0; right: 9px; font-size: 112px;}
    #quick .list > li .btn-quick.q3::after {width: 35px; height: 39px; bottom: auto; top: 72px; left: 76px;}
    #quick .list > li .btn-quick.q3 .chatbot-alt {right: 10px; bottom: 0; height: 30px;}
    #quick .list > li .btn-quick.q3:hover .chatbot-alt,
    #quick .list > li .btn-quick.q3.auto-open .chatbot-alt {width: 278px;}
    #quick .list > li .btn-quick.q3 .chatbot-alt .ani {transition: right .25s ease;}
    #quick .list > li .btn-quick.q3:hover .chatbot-alt .ani,
    #quick .list > li .btn-quick.q3.auto-open .chatbot-alt .ani {right: 10px;}
    #quick .list > li .btn-quick.q3 .chatbot-alt .ani {display: flex; align-items: center; justify-content: center; gap: 5px; height: 30px;}
    #quick .list > li .btn-quick.q3 .chatbot-alt .ani > span:nth-child(n) {position: static; width: 5px; height: 5px; margin: 0;}
    #quick .list > li .btn-quick.q3 .chatbot-alt > span {line-height: 30px;}
    #quick .list > li:nth-child(1) .quick-icon {display: none;}
    #quick .btn-top {width: 70px; height: 70px; box-shadow: 0 3px 6px #0002;}
    #quick .btn-top::before {font-size: 20px;}
    #quick .btn-fold {display: flex; position: absolute; top: 0; right: 18px; width: 22px; height: 22px; border: 1px solid #0085da; border-radius: 50%; color: #0085da; background: #fff; z-index: 2;}
    #quick .btn-fold::before {content: '\eb99'; color: inherit; font-size: 16px;}
    body[data-scrolled="start"] #quick {padding-bottom: 95px;}
}

@media screen and (max-width: 1500px) {
    #quick .list > li .btn-quick.q2::before {width: 76%; height: 63%; top: 18.5%; right: 12%; bottom: auto; background-position: center; background-size: contain;}
    #quick .list > li .btn-quick.q3 em br {display: block;}
    #quick .list > li .btn-quick em {padding: 7px 10px 4px; font-size: 15px; line-height: 1.25; text-align: center;}
    #quick .btn-fold {width: 36px; height: 36px; border-radius: 50%;}
    #quick .btn-fold::before {font-size: 22px;}
}

@media screen and (max-width: 768px) {
    #quick {position: fixed; right: 16px; bottom: 16px;}
    .fixed-contents.stop #quick {bottom: 16px;}
}

#quick.fold {
    --quick-top-space: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    transition: padding-bottom .3s cubic-bezier(.22,.61,.36,1);
}
body[data-scrolled="start"] #quick.fold {padding-bottom: var(--quick-top-space);}
#quick.fold,
.fixed-contents.stop #quick.fold {bottom: calc(32px + env(safe-area-inset-bottom, 0px));}
#quick.fold .list {display: none;}
#quick.fold .btn-fold {position: relative; top: auto; right: auto; width: 48px; height: 48px; margin: 0; border-radius: 50%;}
#quick.fold .btn-fold::before {content: '\ea13'; font-size: 28px; transform: none;}
#quick.fold .btn-top {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px);
    transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
body[data-scrolled="start"] #quick.fold .btn-top {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}
@media screen and (min-width: 1501px) {
    #quick.fold {--quick-top-space: 82px;}
}
@media (prefers-reduced-motion: reduce) {
    #quick.fold,
    #quick.fold .btn-top {transition: none;}
}

/*-------------------------------------------------------------------
	분류이름 : 챗봇 (최신)
	분류그룹 : 레이아웃 > 고정영역
-------------------------------------------------------------------*/
#chatbot {display: flex; position: fixed; bottom: 220px; right: calc(3% + 165px); z-index: 2; width: 496px; height: calc(100dvh - 320px); padding: 0 2px; border-radius: 20px; background-color: #156954; flex-direction: column;}

/* 헤더 */
#chatbot .chat-hd {display: flex; position: relative; padding: 10px 18px; flex-shrink: 0; align-items: center;}
#chatbot .chat-hd::before {content: ""; display: block; width: 46px; height: 45px; margin-right: 5px; background: url(../images/main/2025/chat_mascot.svg) no-repeat center / contain;}
#chatbot .chat-hd::after {content: ""; display: block; width: 75px; height: 100%;}
#chatbot .chat-hd .tit {display: block; font-size: 20px; color: #fff; font-family: 'Ria','Pretendard','Noto Sans KR', sans-serif;}
#chatbot .chat-hd .weather {display: grid; position: relative; margin-left: auto; padding-left: 45px; color: #fff; grid-template-columns: repeat(2, minmax(0, auto)); gap: 3px 5px;}
#chatbot .chat-hd .weather::before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; font-size: 40px; background-repeat: no-repeat; background-size: 1em;}
#chatbot .chat-hd .weather span {display: block; font-weight: 500; font-size: 14px; line-height: 1;}
#chatbot .chat-hd .weather .city {width: 100%; grid-column: span 2;}
#chatbot .chat-hd .weather .temp {font-weight: 900; font-size: 18px;}
#chatbot .chat-hd .utils {display: flex; position: absolute; top: 0; right: 20px; height: 100%; margin-left: 10px; gap: 5px; align-items: center;}
#chatbot .chat-hd .utils .btn-util {display: flex; width: 30px; height: 30px; border-radius: 50%; align-items: center; justify-content: center;}
#chatbot .chat-hd .utils .btn-util::before {content: ""; display: block; font-family: 'remixicon'; font-weight: normal; font-size: 20px;}

/* 대화 탭 */
#chatbot .chat-tab {display: block; position: relative; z-index: 1; flex-shrink: 0;}
#chatbot .chat-tab .tab-hd {display: grid; gap: 10px; padding: 20px; border-bottom: 1px solid #D0D7DE; background-color: #F6F8FC; grid-template-columns: repeat(3, minmax(0, 1fr));}
#chatbot .chat-tab .btn-tab {display: flex; height: 38px; padding: 0 12px; border: 1px solid #D0D7DE; border-radius: 999px; background-color: #fff; font-weight: 500; font-size: 14px; color: #000; align-items: center;}
#chatbot .chat-tab .btn-tab::before {content: ""; display: block; width: 20px; height: 20px; margin-right: 10px; font-size: 20px; background-image: url(../images/main/2025/chat_tab.png); background-repeat: no-repeat; background-size: 3em;}
#chatbot .chat-tab .btn-toggle {display: none; position: absolute; top: calc(100% - 1px); right: 0; width: 60px; height: 28px; border: 1px solid #D0D7DE; border-top: 0; border-radius: 0 0 5px 5px; background-color: #F6F8FC; align-items: center; justify-content: center;}
#chatbot .chat-tab .btn-toggle::before {content: "\F498"; display: block; font-family: 'remixicon'; font-size: 24px; line-height: 1; color: #000;}

/* 대화 영역 */
#chatbot .chat-bd {display: block; overflow-x: hidden; overflow-y: auto; padding: 20px 18px; background-color: #fff; flex-basis: 0; flex-grow: 1; overscroll-behavior: contain; -ms-scroll-chaining: none;}
#chatbot .chat-bd .tab-panel {display: none;}

/* 소개 문구 */
#chatbot .chat-bd .intro {display: flex; padding: 30px; border-radius: 10px; background-color: #F6F8FC; font-weight: 500; flex-direction: column;}
#chatbot .chat-bd .intro::before {content: ""; display: block; width: 1em; margin: 0 auto 20px; background-repeat: no-repeat; background-size: contain; background-position: center;}
#chatbot .chat-bd .intro p {display: block;}
#chatbot .chat-bd .intro em {display: inline-block; color: #1B9E50;}
/* 대화 내용 */
#chatbot .chat-bd .msg-list {display: block;}
#chatbot .chat-bd .msg-list .msg-box {display: block; margin-top: 20px;}
#chatbot .chat-bd .msg-list .msg-box .profile {display: inline-flex; height: 48px; margin-bottom: 20px; padding: 0 20px; border-radius: 999px; background-color: #F6F8FC; font-weight: 600; font-size: 16px; color: #000; align-items: center; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);}
#chatbot .chat-bd .msg-list .msg-box .profile::before {content: ""; width: 33px; height: 31px; margin-right: 20px; background: url(../images/main/2025/chat_mascot.svg) no-repeat center / contain;}
#chatbot .chat-bd .msg-list .msg-box .msg {display: flex; padding: 10px; border-radius: 10px; background-color: #F6F8FC; font-weight: 500; line-height: 1.2; color: #000; flex-direction: column; gap: 20px; align-items: flex-start; box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.1);}
#chatbot .chat-bd .msg-list .msg-box .msg b{font-weight:600;}
#chatbot .chat-bd .msg-list .msg-box .date {display: block; margin-top: 10px; font-weight: 500; font-size: 14px; color: #7E8790;}
/* 대화 내용 - 대화 분류 */
#chatbot .chat-bd .msg-list .badge {display: flex; margin-right: auto; padding: 8px 15px; border-radius: 9999px; background-color: #156954; font-weight: 600; font-size: 15px; color: #fff;}
#chatbot .chat-bd .msg-list .badge::before {content: ""; display: block; width: 20px; height: 20px; margin-right: 10px; font-size: 20px; background-image: url(../images/main/2025/chat_tab.png); background-repeat: no-repeat; background-size: 3em; flex-shrink: 0;}
/* 대화 내용 - 카드 정보 */
#chatbot .chat-bd .msg-list .card {display: block; width: 100%;}
#chatbot .chat-bd .msg-list .card .cover {display: block; overflow: hidden; position: relative; width: 100%; max-height: 40dvh; aspect-ratio: 1 / 0.613636; border-radius: 10px; background-color: white;}
#chatbot .chat-bd .msg-list .card .cover img {display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
#chatbot .chat-bd .msg-list .card .content {display: block;}
#chatbot .chat-bd .msg-list .card .content .tit {display: block; margin-top: 10px; font-weight: 700; font-size: 16px; color: #000;}
#chatbot .chat-bd .msg-list .card .content .sub {display: block; margin-top: 10px; font-weight: 500; font-size: 14px; color: #7E8790;}
#chatbot .chat-bd .msg-list .card .content .actions {display: flex; margin-top: 20px; flex-wrap: wrap; gap: 5px;}
#chatbot .chat-bd .msg-list .card .content .actions .btn {display: flex; min-height: 28px; padding: 0 10px; border: 1px solid #D0D7DE; border-radius: 5px; background-color: #fff; font-weight: 600; font-size: 14px; color: #000; align-items: center;}
#chatbot .chat-bd .msg-list .card .content .actions .btn::before {content: ""; display: block; width: 1em; height: 1em; margin-right: 5px; background-repeat: no-repeat; background-image: url(../images/main/2025/chat_msg_action.png); background-size: 3em; font-size: 16px; flex-shrink: 0;}
#chatbot .chat-bd .msg-list .card .map-pin {display: block; overflow: hidden; position: relative; width: 100%; max-height: 32dvh; aspect-ratio: 1 / 0.4545454; margin-top: 20px; border-radius: 10px; background-color: red;}
#chatbot .chat-bd .msg-list .card .map-pin img {display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
/* 대화 내용 - 답변 응답 */
#chatbot .chat-bd .msg-list .response {display: flex; width: 100%; padding-top: 10px; border-top: 1px dashed #D0D7DE; gap: 5px;}
#chatbot .chat-bd .msg-list .response p {display: flex; min-height: 28px; padding: 0 10px; border: 1px solid #D0D7DE; border-radius: 5px; background-color: #fff; font-weight: 600; font-size: 14px; align-items: center;}
#chatbot .chat-bd .msg-list .response .btn {display: flex; width: 28px; height: 28px; border: 1px solid #D0D7DE; border-radius: 5px; background-color: #fff; align-items: center; justify-content: center;}
#chatbot .chat-bd .msg-list .response .btn::before {content: ""; display: block; width: 1em; height: 1em; font-size: 16px; background-image: url(../images/main/2025/chat_like.png); background-repeat: no-repeat; background-size: 2em;}
/* 대화 내용 - 로딩 */
#chatbot .chat-bd .dots {width: 56px; height: 26.9px;
    background: radial-gradient(circle closest-side, #ff9a47 90%, #0000) 0% 50%,
    radial-gradient(circle closest-side, #ff9a47 90%, #0000) 50% 50%,
    radial-gradient(circle closest-side, #ff9a47 90%, #0000) 100% 50%;
    background-size: calc(100% / 3) 11.4px;
    background-repeat: no-repeat;
}
/* 대화 내용 - 다시 시도*/
#chatbot .chat-bd .msg-list .msg-box .chat-error-msg{color:#7e8790; width:100%;}
#chatbot .chat-bd .msg-list .msg-box .chat-error-msg b{color:#000; font-weight:600;}
#chatbot .chat-bd .msg-list .msg-box .msg .msg-reload{display:flex; align-items:center; border-radius:20px; padding:6px 12px; gap:0px 7px; color:#fff; background:#1b9e50; margin-left:auto; width:fit-content; margin-top:5px;}
#chatbot .chat-bd .msg-list .msg-box .msg .msg-reload::before{content:""; display:block; width:13px; height:17px; background:url("../images/main/2025/msg_reload.png")center center no-repeat; background-size:100%;}
/* 풋 - 검색 */
#chatbot .chat-ft {display: flex; padding: 15px 18px; flex-shrink: 0;}
#chatbot .chat-ft .search-box {display: flex; position: relative; height: 40px; border-radius: 999px; background: #FFF; flex-grow: 1;}
#chatbot .chat-ft .search-box::before {content: ""; display: block; position: absolute; top: 10px; left: 15px; width: 1em; height: 1em; font-size: 20px; background: url(../images/main/2025/chat_search.png) no-repeat 0 0;}
#chatbot .chat-ft .search-box input {display: block; width: 100%; padding: 10px 10px 10px 50px; border: 0; border-radius: 999px; background: #FFF; color: #000; flex-basis: 0; flex-grow: 1;}
#chatbot .chat-ft .search-box .btn-submit {display: flex; width: 40px; height: 100%; border-radius: 999px; background: #1B9E50; align-items: center; justify-content: center;}
#chatbot .chat-ft .search-box .btn-submit::before {content: ""; display: block; width: 1em; height: 1em; font-size: 20px; background: url(../images/main/2025/chat_search.png) no-repeat -1em 0;}

/*-------------------------------------------------------------------
    @variation
-------------------------------------------------------------------*/
#chatbot .chat-hd .weather::before {background-image: url(../images/main/2025/chat_weather.png);}

#chatbot .chat-hd .utils .btn-util.btn-wide {background-color: #fff;}
#chatbot .chat-hd .utils .btn-util.btn-wide::before {content: "\F49E"; color: #000;}
#chatbot.wide .chat-hd .utils .btn-util.btn-wide::before {content: "\F52C";}

#chatbot .chat-hd .utils .btn-util.btn-close {background-color: #1B9E50;}
#chatbot .chat-hd .utils .btn-util.btn-close::before {content: "\EB99"; color: #fff;}
/* 소개문구 - 탭별 */
#chatbot .chat-bd [data-section="home"] .intro::before,
#chatbot .chat-bd [data-section="season"] .intro::before,
#chatbot .chat-bd [data-section="info"] .intro::before,
#chatbot .chat-bd [data-section="chon"] .intro::before,
#chatbot .chat-bd [data-section="story"] .intro::before,
#chatbot .chat-bd [data-section="trail"] .intro::before     {height: 0.78917em; font-size: 135.664px; background-image: url(../images/main/2025/chat_intro_01.svg);}
/* 대화영역 - 유저 */
#chatbot .chat-bd .msg-list .msg-box.user .msg {padding-left: 20px; border-radius: 30px; padding-right: 20px; background-color: #1B9E50; color: #fff;}
#chatbot .chat-bd .msg-list .msg-box.user .date {text-align: right;}
/* 탭 - 카테고리 */
#chatbot .chat-tab .btn-tab[data-section="home"]::before {background-position: 0 0;}
#chatbot .chat-tab .btn-tab[data-section="season"]::before {background-position: -1em 0;}
#chatbot .chat-tab .btn-tab[data-section="info"]::before {background-position: -2em 0;}
#chatbot .chat-tab .btn-tab[data-section="chon"]::before {background-position: 0 -1em;}
#chatbot .chat-tab .btn-tab[data-section="story"]::before {background-position: -1em -1em;}
#chatbot .chat-tab .btn-tab[data-section="trail"]::before {background-position: -2em -1em;}
/* 대화 - 카테고리 */
#chatbot .chat-bd .msg-list .badge.img1::before {background-position: 0 0;}
#chatbot .chat-bd .msg-list .badge.img2::before {background-position: -1em 0;}
#chatbot .chat-bd .msg-list .badge.img3::before {background-position: -2em 0;}
#chatbot .chat-bd .msg-list .badge.img4::before {background-position: 0 -1em;}
#chatbot .chat-bd .msg-list .badge.img5::before {background-position: -1em -1em;}
#chatbot .chat-bd .msg-list .badge.img6::before {background-position: -2em -1em;}
/* 대화 - 버튼 */
#chatbot .chat-bd .msg-list .card .content .actions .btn.address::before    {background-position: 0 0;}
#chatbot .chat-bd .msg-list .card .content .actions .btn.tel::before        {background-position: -1em 0;}
#chatbot .chat-bd .msg-list .card .content .actions .btn.home::before       {background-position: -2em 0;}
#chatbot .chat-bd .msg-list .card .content .actions .btn.map::before        {background-position: 0 -1em;}
#chatbot .chat-bd .msg-list .card .content .actions .btn.info::before       {background-position: -1em -1em;}
#chatbot .chat-bd .msg-list .card .content .actions .btn.source::before     {background-position: -2em -1em;}
/* 대화 - 날씨 */
#chatbot .chat-bd .msg-list .card .content .actions .btn[class*="weather"]::before {background-image: url(../images/main/2025/chat_msg_weather.png); background-size: 1em;}
#chatbot .chat-bd .msg-list .card .content .actions .btn.weather-sunny::before {background-position: 0 0;}
/* 대화 - 좋아요 */
#chatbot .chat-bd .msg-list .response .btn.like::before {background-position: 0 0;}
#chatbot .chat-bd .msg-list .response .btn.dislike::before {background-position: -1em 0;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
#chatbot {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, all 0.3s;}
#chatbot.active {visibility: visible; opacity: 1; transition: visibility 0s 0s, all 0.3s;}
/* 펼치기 */
#chatbot.wide {width: 50%;}
/* scroll */
body[data-top-banner="on"]:not([data-scrolled="start"]) #chatbot {height: calc(100dvh - 120px - 100px);} /* 시작위치 (팝업ON) */
body[data-scrolled="start"].fixed-pop #chatbot {height: calc(100dvh - 120px - 100px);} /* 스크롤시 (팝업ON) */

/* 탭 - 카테고리 */
#chatbot .chat-tab .btn-tab {transition: all 0.3s;}
#chatbot .chat-tab .btn-tab:focus-visible,
#chatbot .chat-tab .btn-tab:hover,
#chatbot .chat-tab .btn-tab.active {border-color: #1B9E50;}
#chatbot .chat-tab .btn-toggle::before {transition: all 0.3s;}
#chatbot .chat-tab .btn-toggle.active::before {transform: rotate(180deg);}
/* 대화영역 */
#chatbot .chat-bd .tab-panel.active {display: block; animation: chat-open 1s;}
/* 대화 - 버튼 */
#chatbot .chat-bd .msg-list .card .content .actions .btn {transition: all 0.3s;}
#chatbot .chat-bd .msg-list .card .content .actions .btn:focus-visible,
#chatbot .chat-bd .msg-list .card .content .actions .btn:hover {border-color: #1B9E50; color: #1B9E50;}
/* 대화 - 좋아요 */
#chatbot .chat-bd .msg-list .response .btn {transition: all 0.3s;}
#chatbot .chat-bd .msg-list .response .btn:focus-visible,
#chatbot .chat-bd .msg-list .response .btn:hover {border-color: #1B9E50;}
#chatbot .chat-bd .msg-list .response .btn.active {border-color: #1B9E50; background-color: #1B9E50;}

/* 로딩 */
#chatbot .chat-bd .dots {animation: chat-dots 1s infinite linear;}
@keyframes chat-dots {
    20% {background-position: 0% 0%, 50% 50%, 100% 50%;}
    40% {background-position: 0% 100%, 50% 0%, 100% 50%;}
    60% {background-position: 0% 50%, 50% 100%, 100% 0%;}
    80% {background-position: 0% 50%, 50% 50%, 100% 100%;}
}
@keyframes chat-open {
    0% {opacity: 0; transform: translateY(20px);}
    100% {opacity: 1; transform: translateY(0);}
}

/*-------------------------------------------------------------------
	@media
-------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    #chatbot {right: 185px;}
}

@media screen and (max-width: 1500px) {
    #chatbot {bottom: 20px;right: 120px;height: calc(100dvh - 120px);}
    #chatbot.wide {width: 70%;}

    body[data-scrolled="start"].fixed-pop #chatbot {height: calc(100dvh - 220px);}
}
@media screen and (max-width: 1024px) {
    #chatbot {height: calc(100dvh - 120px);}
    #chatbot.wide {width: calc(100% - 140px);}

    body[data-scrolled="start"].fixed-pop #chatbot,
    body[data-top-banner="on"]:not([data-scrolled="start"]) #chatbot {height: calc(100dvh - 120px - var(--mobile-banner-height));}
}
@media screen and (max-width: 768px) {
    #chatbot {right: 90px; width: calc(100% - 110px);}
    #chatbot.wide {width: 100%; bottom: 0 !important; left: 0; right: 0; z-index: 999; height: calc(100dvh - 80px);}

    #chatbot .chat-tab .btn-toggle {display: block;}

    body[data-scrolled="start"].fixed-pop #chatbot.wide,
    body[data-top-banner="on"]:not([data-scrolled="start"]) #chatbot.wide {height: calc(100dvh - 80px - var(--mobile-banner-height));}

    /* interaction */
    #chatbot .chat-tab.fold .tab-hd {display: none;}
    #chatbot .chat-tab.fold .btn-toggle {top: 100%;}
}
@media screen and (max-width: 600px) {
    #chatbot {bottom: 0; right: 0; width: 100%; height: calc(100dvh - 80px);}
    #chatbot .chat-hd {flex-wrap: wrap; gap: 5px 0;}
    #chatbot .chat-hd::before {width: 30px; height: 30px;}
    #chatbot .chat-hd::after {display: none;}
    #chatbot .chat-hd .tit {width: calc(100% - 35px); font-size: 18px;}
    #chatbot .chat-hd .tit br {display: none;}
    #chatbot .chat-hd .weather {display: flex; min-height: 30px; margin-left: 0; padding-left: 35px; align-items: center;}
    #chatbot .chat-hd .weather::before {font-size: 30px;}
    #chatbot .chat-hd .utils {height: auto; top: 10px;}
    #chatbot .chat-hd .utils .btn-util.btn-wide {display: none;}

    #chatbot .chat-tab .tab-hd {padding: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;}
    #chatbot .chat-tab .btn-tab {height: 30px; justify-content: center;}

    /* 챗봇 (확대 기본) */
    body[data-scrolled="start"] #chatbot {bottom: 0; height: calc(100dvh - 80px);}
    body[data-scrolled="start"].fixed-pop #chatbot,
    body[data-top-banner="on"]:not([data-scrolled="start"]) #chatbot {height: calc(100dvh - 80px - var(--mobile-banner-height));}

    /* 고정 별도 */
    .fixed-contents.stop #chatbot {position: fixed;}
}




/*-------------------------------------------------------------------
	분류이름 : 챗봇 (과거버전)
	분류그룹 : 레이아웃 > 고정영역
-------------------------------------------------------------------*/
.chatBot_contain {display: block; position: absolute; bottom: 180px; right: calc(3% + 165px); z-index: 2; width: 496px; height: calc(100dvh - 280px); padding: 0 2px; border-radius: 20px; background-color: #fff; box-shadow: rgba(0, 0, 0, 0.1) 6px 9px 9px 3px;}

.chatBot_contain .bot_wrap {display: flex; height: 100%; flex-direction: column;}
.chatBot_contain .bot_wrap .bot_head{display: flex; justify-content: space-between; align-items: center; padding: 0 20px; height: 70px; line-height: 70px; background-color: #fff; border-bottom: 1px solid #E9E9E9; border-radius: 20px 20px 0 0; box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.05); position: relative; z-index: 1;}
.chatBot_contain .bot_wrap .bot_head::before,
.chatBot_contain .bot_wrap .bot_head::after{content: none;}
.chatBot_contain .bot_wrap .bot_head p{position: relative; padding-left: 50px; font-size: 20px; font-weight: 400; line-height: 70px; font-family: 'Ria','Pretendard','Noto Sans KR', sans-serif;}
.chatBot_contain .bot_wrap .bot_head p::before{content: ''; position: absolute; top:50%; left:0; width: 46px; height: 46px; background-image: url(../images/main/chonsik_char.svg); background-repeat: no-repeat; background-size: 46px; transform: translateY(-50%);}
.chatBot_contain .bot_wrap .bot_head .bot_close{position: relative; display: block; width: 24px; height:24px;}
.chatBot_contain .bot_wrap .bot_head .bot_close::before{content: "\f4c8"; position: absolute; top:50%; left:50%; font-size: 28px; font-family: 'remixicon'!important; transform: translate(-50%, -50%);}
.chatBot_contain .bot_wrap .bot_body {overflow: hidden; position: relative; flex-grow: 1; background-color: #fff;}

.chatBot_contain .bot_wrap .bot_body .bot_area{padding: 20px 20px 0 20px; height: 76%; overflow-y: scroll;}
.chatBot_contain .bot_wrap .bot_body .bot_area::-webkit-scrollbar {width: 5px;cursor: pointer;height: 5px;}
.chatBot_contain .bot_wrap .bot_body .bot_area::-webkit-scrollbar-thumb {background-color: #b5bfc6;border-radius: 999px}
.chatBot_contain .bot_wrap .bot_body .bot_area::-webkit-scrollbar-thumb:hover {background-color: #d5d8df;}
.chatBot_contain .bot_wrap .bot_body .bot_area::-webkit-scrollbar-thumb:active {background-color: #bbbec9;}
.chatBot_contain .bot_wrap .bot_body .bot_area::-webkit-scrollbar-track {background-color: #fff;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk{display: flex; margin-bottom: 20px;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk.left {flex-direction: column; flex-wrap: wrap;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk.left p{position: relative; height: 40px; padding: 0 0 0 50px; align-content: center; background:url(../images/main/chonsik_char.svg) no-repeat left center/40px; font-size: 15px;font-weight: 600;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk .talking{position: relative; padding: 10px; margin-top: 18px; width: 400px; border-radius: 10px; background-color: #F3F4F6;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk .talking::before{ content: ''; z-index: 1; position: absolute; overflow: hidden; top:-5px; left: 13px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom:16px solid #F3F4F6; transform: translateY(-50%) rotate(-10deg); }
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk .talking .img{ padding: 15px 0 0 0;text-align: center;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk .talking .bot_txt{margin-top: 10px; font-size: 14px; line-height: 18px; word-wrap:break-word}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk.left .date{display: block; margin-top: 10px; width: 100%; font-size: 12px; font-weight: 400;}

.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk.right{flex-direction: row-reverse; flex-wrap: wrap;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk.right .user_txt{ height: 36px; padding: 0 14px; border-radius: 40px; align-content: center; background-color: #1B9E50; font-size: 14px; color:#fff;}
.chatBot_contain .bot_wrap .bot_body .bot_area .bot_talk.right p.date{width: 100%; margin-top: 10px; text-align: right; font-size: 12px;}

.chatBot_contain .bot_wrap .bot_body .tag{position: absolute; opacity: 1; visibility: visible; bottom: 0; left: 0; padding: 10px 0; background:url(../images/main/wel_opcity.png) no-repeat 280px center; border-top: 1px solid #E9E9E9;}
.chatBot_contain .bot_wrap .bot_body .tag.close{opacity: 0; visibility: hidden;}
.chatBot_contain .bot_wrap .bot_body .tag ul {display: flex; align-items: center; gap:5px 18px; flex-wrap: wrap; padding: 0 20px;}
.chatBot_contain .bot_wrap .bot_body .tag ul::before,
.chatBot_contain .bot_wrap .bot_body .tag ul li a{display: block; padding: 0 14px; line-height: 30px; border-radius: 30px; background-color: #53AFBD; font-size: 14px; color:#fff;}
.chatBot_contain .bot_wrap .bot_bottom{display: flex; align-items: center; height: 70px; padding: 0 20px; line-height: 70px; background-color: #fff; border-radius: 0 0 20px 20px; border-top: 1px solid #E9E9E9;}
.chatBot_contain .bot_wrap .bot_bottom .btn_talk{position: relative; cursor: pointer;  width: 32px; height: 32px; }
.chatBot_contain .bot_wrap .bot_bottom .btn_talk::before{ content: "\eb4d"; position: absolute; top: 50%; left: 50%;color:#1B9E50; font-size: 34px; font-family: 'remixicon'!important; transform: translate(-50%, -50%);}
.chatBot_contain .bot_wrap .bot_bottom .input_send {display: flex; align-items: center; width: 100%;}
.chatBot_contain .bot_wrap .bot_bottom .input_send input{height: 68px; width: 100%; padding: 0 14px; }
.chatBot_contain .bot_wrap .bot_bottom .input_send input:focus{outline: transparent;}
.chatBot_contain .bot_wrap .bot_bottom .input_send button.chat_button{position: relative; width: 24px; height: 24px;}
.chatBot_contain .bot_wrap .bot_bottom .input_send button.chat_button::before{content: "\f0d9"; position: absolute; top: -6px; left: -3px; width: 24px; height: 24px; font-size: 28px; font-family: 'remixicon'!important; }
/*챗본 버튼 클래스 추가*/
.chatBot_contain .bot_wrap .bot_bottom .input_send button.chat_button::before {color:#1B9E50;}

/*-------------------------------------------------------------------
    @interaction
--------------------------------------------------------------------*/
.chatBot_contain {visibility: hidden; opacity: 0; transition: visibility 0s 0.3s, all 0.3s;}
.chatBot_contain.active {visibility: visible; opacity: 1; transition: visibility 0s 0s, all 0.3s;}

/* scroll */
body[data-top-banner="on"]:not([data-scrolled="start"]) .chatBot_contain {height: calc(100dvh - 280px - 100px);} /* 시작위치 (팝업ON) */
body[data-scrolled="start"].fixed-pop .chatBot_contain {height: calc(100dvh - 280px - 100px);} /* 스크롤시 (팝업ON) */

/*-------------------------------------------------------------------
    @media
--------------------------------------------------------------------*/
@media screen and (max-width: 1920px) {
    .chatBot_contain {right: 185px;}
}
@media screen and (max-width: 1500px) {
    .chatBot_contain {right: 120px;}
    body[data-scrolled="start"].fixed-pop .chatBot_contain {height: calc(100dvh - 380px);}
}
@media screen and (max-width: 1024px) {
    .chatBot_contain {bottom: 20px; height: calc(100dvh - 120px);}

    body[data-scrolled="start"].fixed-pop .chatBot_contain,
    body[data-top-banner="on"]:not([data-scrolled="start"]) .chatBot_contain {height: calc(100dvh - 120px - var(--mobile-banner-height));}
}
@media screen and (max-width: 768px) {
    .chatBot_contain {right: 90px; width: calc(100% - 110px);}
}
@media screen and (max-width: 600px) {
    .chatBot_contain {bottom: 0; right: 0; width: 100%; height: calc(100dvh - 80px);}

    #chatbot .chat-bd .intro {padding: 20px 10px; font-size: 14px;}
    #chatbot .chat-bd .msg-list .msg-box .msg {font-size: 14px;}
    #chatbot .chat-bd .msg-list .msg-box.user .msg {width: 90%; margin-left: auto;}
    #chatbot .chat-bd .msg-list .card .content .actions .btn {font-size: 13px;}

    /* 챗봇 (확대 기본) */
    body[data-scrolled="start"] .chatBot_contain {bottom: 0; height: calc(100dvh - 80px);}
    body[data-scrolled="start"].fixed-pop .chatBot_contain,
    body[data-top-banner="on"]:not([data-scrolled="start"]) .chatBot_contain {height: calc(100dvh - 80px - var(--mobile-banner-height));}

    /* 고정 별도 */
    .fixed-contents.stop .chatBot_contain {position: fixed;}
}

#wmap {position: fixed; display: flex; padding-top: 80px; min-height: 640px; border-top: 1px solid #e5e7eb; font-size: 15px; color: #222; overflow: hidden; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; box-sizing: border-box;}
#wmap * {box-sizing: border-box;}
#wmap .wm-side-head,
#wmap .wm-fab,
#wmap .wm-research,
#wmap .wm-dim,
#wmap .wm-sheet-handle,
#wmap .wm-detail {display: none;}
#wmap .wm-side {width: 380px; flex: 0 0 380px; display: flex; flex-direction: column; padding: 28px 30px 26px; background: #fff; z-index: 3; min-height: 0; position: relative; box-shadow: 4px 0 16px rgba(0,0,0,.07);}
#wmap .wm-side .wm-tit {font-size: 20px; font-weight: 700; margin: 0 0 20px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: #454545; line-height: 1.35;}
#wmap .wm-side .wm-tit:first-of-type {margin-bottom: 20px;}
#wmap .wm-side .wm-badge {display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 24px; padding: 0 9px; border-radius: 15px; background: #454545; color: #fff; font-size: 13px; line-height: 1;}
#wmap .wm-side .wm-tabs {display: flex; margin-bottom: 10px; flex-shrink: 0;}
#wmap .wm-side .wm-tabs button {flex: 1; height: 44px; padding: 0 10px; border: 1px solid #d5d5d5; background: #fff; color: #777; font-size: 16px; cursor: pointer; font-weight: 600;}
#wmap .wm-side .wm-tabs button + button {margin-left: -1px;}
#wmap .wm-side .wm-tabs button:first-child {border-radius: 6px 0 0 6px;}
#wmap .wm-side .wm-tabs button:last-child {border-radius: 0 6px 6px 0;}
#wmap .wm-side .wm-tabs button.on {z-index: 1; background: #e5f2f4; color: #4399a7; font-weight: 600; position: relative; border: 1px solid #4399a7;}
#wmap .wm-side .wm-sel {width: 100%; height: 48px; padding: 0 40px 0 20px; margin-bottom: 10px; border: 1px solid #d5d5d5; border-radius: 7px; background: #fff url('../images/sub/select-bg.svg') no-repeat right 16px center / 20px 20px; font-size: 16px; flex-shrink: 0; color: #666; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer;}
#wmap .wm-side .wm-search {width: 100%; height: 52px; border: 0; border-radius: 7px; background: #278795; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; margin-bottom: 30px; flex-shrink: 0;}
#wmap .wm-side .wm-cate {flex: 1; overflow-y: auto; margin: 0 0 20px; padding: 0; list-style: none; min-height: 0; overscroll-behavior: contain;}
#wmap .wm-side .wm-cate li + li {margin-top: 5px;}
#wmap .wm-side .wm-cate label {display: flex; align-items: center; height: auto; padding: 10px 16px 10px 47px; border: 1px solid #d5d5d5; border-radius: 6px; cursor: pointer; color: #666; background: #fff; user-select: none; position: relative; min-height: 47px; font-size: 15px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere;}
#wmap .wm-cate input {position: absolute; opacity: 0; width: 1px; height: 1px;}
#wmap .wm-cate i {font-size: 20px; color: #888;}
#wmap .wm-cate input:focus+label {outline: 2px solid #2b7f8c; outline-offset: -3px;}
#wmap .wm-side .wm-cate label i {position: absolute; top: 50%; left: 16px; width: 19px; height: 19px; margin-top: -9.5px; border-radius: 50%; font-size: 0; background: #999 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l2.5 2.5L12 5' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px 14px;}
#wmap .wm-side .wm-cate label i::before {content: none;}
#wmap .wm-side .wm-cate input:checked + label {border-color: #1B9E50; color: #1B9E50; font-weight: 700;}
#wmap .wm-side .wm-cate input:checked + label i {background-color: #1B9E50;}
#wmap .wm-side .wm-btns {display: flex; gap: 8px; flex-shrink: 0;}
#wmap .wm-side .wm-reset {width: 52px; height: 52px; border: 1px solid #1B9E50; border-radius: 5px; background: #fff; color: #1B9E50; font-size: 24px; cursor: pointer;}
#wmap .wm-side .wm-reset i {display: block; width: 18px; height: 18px; margin: 0 auto; background: url('../images/main/2026/ico-filter-reset.png') no-repeat center / contain;}
#wmap .wm-side .wm-reset i::before {content: none;}
#wmap .wm-side .wm-apply {flex: 1; height: 52px; border: 1px solid #1B9E50; border-radius: 5px; background: #1B9E50; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;}
#wmap .wm-side .wm-tabs button,
#wmap .wm-side .wm-sel,
#wmap .wm-side .wm-search,
#wmap .wm-side .wm-cate label,
#wmap .wm-side .wm-reset,
#wmap .wm-side .wm-apply {transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;}
#wmap .wm-side .wm-cate label i {transition: background-color .2s ease;}
#wmap .wm-list .wm-items .subj {transition: color .2s ease;}
#wmap .wm-list {width: 380px; flex: 0 0 380px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e5e7eb; position: relative; z-index: 2; min-height: 0; margin-left: -380px; visibility: hidden; box-shadow: none; transition: margin-left .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, visibility 0s .35s;}
#wmap.is-list:not(.list-fold) .wm-list {margin-left: 0; visibility: visible; box-shadow: 6px 0 16px rgba(0,0,0,.08); transition: margin-left .35s cubic-bezier(.4,0,.2,1), box-shadow .35s, visibility 0s;}
#wmap .wm-list .wm-list-head {display: flex; align-items: center; justify-content: space-between; padding: 24px 25px 6px 28px; flex-shrink: 0; gap: 14px;}
#wmap .wm-list .wm-list-head h2 {font-size: 18px; font-weight: 700; margin: 0; color: #454545; line-height: 1.4; white-space: nowrap;}
#wmap .wm-list .wm-list-head h2 em {font-style: normal; color: #1B9E50;}
#wmap .wm-list .wm-order {height: 40px; padding: 0 36px 0 16px; border: 1px solid #d5d5d5; border-radius: 7px; font-size: 14px; width: 120px; min-width: 0; background: #fff url('../images/sub/select-bg.svg') no-repeat right 16px center / 14px 14px; color: #666; appearance: none; -webkit-appearance: none; cursor: pointer;}
#wmap .wm-list .wm-note {padding: 8px 28px; font-size: 13px; color: #888; flex-shrink: 0; line-height: 1.5;}
#wmap .wm-list .wm-items {flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 0 25px 0 27px; min-height: 0; overscroll-behavior: contain;}
#wmap .wm-list .wm-items li {border-bottom: 1px solid #dedede;}
#wmap .wm-list .wm-items a {display: flex; gap: 22px; padding: 24px 0; color: inherit; text-decoration: none; align-items: flex-start;}
#wmap .wm-list .wm-items .thumb {flex: 0 0 80px; width: 80px; height: 80px; border-radius: 7px; overflow: hidden; background: #f1f1f1;}
#wmap .wm-items .thumb img {width: 100%; height: 100%; object-fit: cover;}
#wmap .wm-list .wm-items .txt {flex: 1; min-width: 0;}
#wmap .wm-list .wm-items .cate {font-size: 13px; font-weight: 700; margin: 1px 0 8px; line-height: 1.4;}
#wmap .wm-list .wm-items .subj {font-size: 17px; font-weight: 700; line-height: 1.4; margin: 0 0 7px; word-break: keep-all; color: #222; overflow-wrap: anywhere;}
#wmap .wm-list .wm-items .dist {font-size: 14px; color: #999; font-weight: 500; line-height: 1.4;}
#wmap .wm-items li.on a .subj {text-decoration: underline;}
#wmap .wm-empty {padding: 60px 0; text-align: center; color: #999;}
#wmap .wm-list .wm-fold {position: absolute; top: 50%; left: 100%; width: 28px; height: 56px; margin-top: -28px; border: 1px solid #e5e5e5; border-left: 0; background: #fff; font-size: 20px; cursor: pointer; color: #454545; box-shadow: 3px 0 8px rgba(0,0,0,.06);}
#wmap.is-list .wm-list .wm-fold {visibility: visible;}
#wmap .wm-list .wm-fold i {display: inline-block; transition: transform .35s;}
#wmap.list-fold .wm-list .wm-fold i {transform: rotate(180deg);}
#wmap .wm-side .wm-cate::-webkit-scrollbar,
#wmap .wm-list .wm-items::-webkit-scrollbar {width: 5px;}
#wmap .wm-side .wm-cate::-webkit-scrollbar-button,
#wmap .wm-list .wm-items::-webkit-scrollbar-button {display: none; width: 0; height: 0;}
#wmap .wm-side .wm-cate::-webkit-scrollbar-track,
#wmap .wm-list .wm-items::-webkit-scrollbar-track {border-radius: 5px; background: #d5d5d5;}
#wmap .wm-side .wm-cate::-webkit-scrollbar-thumb,
#wmap .wm-list .wm-items::-webkit-scrollbar-thumb {border-radius: 5px; background: #1B9E50;}
@supports not selector(::-webkit-scrollbar) {
    #wmap .wm-side .wm-cate,
    #wmap .wm-list .wm-items {scrollbar-width: thin; scrollbar-color: #1B9E50 #d5d5d5;}
}
#wmap .wm-map {flex: 1; position: relative;}
#wmap #wmapCanvas {width: 100%; height: 100%;}
#wmap .wm-ctrl {position: absolute; right: 20px; bottom: 24px; z-index: 3; display: flex; flex-direction: column; gap: 10px;}
#wmap .wm-ctrl button {display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #fff; color: #444; font-size: 24px; line-height: 1; box-shadow: 0 2px 10px rgba(0,0,0,.16); cursor: pointer;}
#wmap .wm-ctrl button i {font-weight: 400;}
#wmap .wm-ctrl .zoom {display: flex; flex-direction: column; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.16);}
#wmap .wm-ctrl .zoom button {border-radius: 0; box-shadow: none; background: transparent;}
#wmap .wm-ctrl .zoom button:first-child {border-radius: 12px 12px 0 0;}
#wmap .wm-ctrl .zoom button+button {border-top: 1px solid #e5e5e5; border-radius: 0 0 12px 12px;}
#wmap .wm-loading {display: none; position: absolute; left: 50%; top: 20px; transform: translateX(-50%); padding: 8px 16px; border-radius: 20px; background: rgba(0,0,0,.7); color: #fff; font-size: 13px; z-index: 5;}

.wm-bubble {position: relative; cursor: pointer;}
.wm-bubble .num {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 0 0 7px rgba(255,255,255,.55), 0 0 0 9px rgba(0,0,0,.06);}
.wm-bubble.s .num {background: radial-gradient(circle at 50% 35%, #ffa63d, #ee7a10);}
.wm-bubble.m .num {background: radial-gradient(circle at 50% 35%, #36b366, #14853f);}
.wm-bubble.l .num {background: radial-gradient(circle at 50% 35%, #4cb1ea, #1679c8);}
.wm-bubble .pop {display: none; position: absolute; left: 80px; top: 50%; transform: translateY(-50%); width: 260px; background: #fff; border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.18); z-index: 10; padding: 4px 0;}
.wm-bubble.on .pop {display: block;}
.wm-bubble .pop:before {content: ''; position: absolute; left: -16px; top: 0; bottom: 0; width: 16px;}
.wm-bubble .pop strong {display: block; padding: 10px 18px 6px; font-size: 13px; color: #888;}
.wm-bubble .pop a {display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-top: 1px solid #eee; color: #333; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap;}
.wm-bubble .pop a:first-of-type {border-top: 0;}
.wm-bubble .pop a:hover {background: #f6faf7;}
.wm-bubble .pop a:before {content: ''; width: 4px; height: 4px; border-radius: 50%; background: #999; margin-right: 10px;}
.wm-bubble .pop a span {flex: 1;}
.wm-marker {position: relative; cursor: pointer;}
.wm-marker .ico {position: absolute; left: -20px; top: -40px; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 6px rgba(0,0,0,.15);}
.wm-marker .lbl {position: absolute; left: 14px; top: -58px; padding: 7px 16px; border-radius: 18px; color: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.15);}
.wm-marker.on {z-index: 5;}
.wm-marker.on .ico {transform: scale(1.15);}
.wm-pop {position: relative; width: 300px; margin-bottom: 58px; background: #fff; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.22); overflow: hidden; font-size: 14px; color: #333;}
.wm-pop .img {height: 150px; background: #eee;}
.wm-pop .img img {width: 100%; height: 100%; object-fit: cover;}
.wm-pop .bd {padding: 16px 18px 18px;}
.wm-pop .cate {font-size: 12px; font-weight: 700; margin-bottom: 4px;}
.wm-pop .subj {font-size: 17px; font-weight: 700; margin-bottom: 6px;}
.wm-pop .addr,
.wm-pop .tel {color: #666; margin-bottom: 4px;}
.wm-pop .desc {color: #555; line-height: 1.5; max-height: 63px; overflow: hidden; margin: 8px 0 12px;}
.wm-pop .more {display: block; height: 40px; line-height: 40px; text-align: center; border-radius: 4px; background: #2b7f8c; color: #fff; font-weight: 700; text-decoration: none;}
.wm-pop .src {margin-top: 8px; font-size: 11px; color: #999;}
.wm-pop .close {position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; cursor: pointer;}

/*-------------------------------------------------------------------
	26.10.22 지도 모바일(≤1024)
	- 검색 : 플로팅 버튼 → 좌측 슬라이드 패널
	- 목록/상세 : 바텀시트 (내림 / 30% / 90%, 높이·위치는 JS)
-------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
    html.wm-page,
    html.wm-page body {height: 100%; overflow: hidden; overscroll-behavior: none;}

    #wmap {--wm-head: 60px; display: block; min-height: 0; padding-top: 0; border-top: 0;}
    #wmap.side-open {z-index: 3000;}

    /* 지도 : 헤더 아래 전체 */
    #wmap .wm-map {position: absolute; top: var(--wm-head); right: 0; bottom: 0; left: 0;}
    #wmap .wm-ctrl {top: auto; right: 16px; bottom: calc(var(--wm-sheet-vis, 0px) + 20px); transition: bottom var(--wm-sheet-tr, 0s) cubic-bezier(.22,.61,.36,1), opacity .2s, visibility .2s;}
    #wmap .wm-list.sheet-max ~ .wm-map .wm-ctrl {opacity: 0; visibility: hidden;}
    #wmap .wm-loading {top: 16px;}

    /* 필터 버튼 */
    #wmap .wm-list .wm-fab.wm-side-open {display: flex; position: absolute; z-index: 25; bottom: 100%; left: 16px; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 20px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #178943; box-shadow: 0 4px 14px rgba(0,0,0,.18); cursor: pointer; transition: opacity .2s, visibility .2s;}
    #wmap .wm-list .wm-fab.wm-side-open i {font-size: 24px; font-weight: 400; line-height: 1;}
    #wmap .wm-list .wm-fab.wm-side-open:active {transform: scale(.95);}
    #wmap .wm-list.sheet-max .wm-fab.wm-side-open {opacity: 0; visibility: hidden;}

    /* 재검색 버튼 */
    #wmap .wm-list .wm-research {display: flex; position: absolute; z-index: 25; bottom: 100%; left: 50%; align-items: center; justify-content: center; gap: 6px; height: 44px; margin-bottom: 20px; padding: 0 20px; border: 1px solid #1B9E50; border-radius: 22px; background: #fff; color: #333; font-size: 15px; font-weight: 700; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); transform: translateX(-50%); cursor: pointer; transition: opacity .2s, visibility .2s;}
    #wmap .wm-list .wm-research i {display: block; flex-shrink: 0; width: 18px; height: 18px; background: url('../images/main/2026/ico-filter-reset.png') no-repeat center / contain;}
    #wmap .wm-list .wm-research:active {transform: translateX(-50%) scale(.95);}
    #wmap .wm-list.sheet-max .wm-research {opacity: 0; visibility: hidden;}

    /* 배경 어둡게 (검색 패널 열림 시) */
    #wmap .wm-dim {display: block; position: fixed; z-index: 2999; inset: 0; background: rgba(0,0,0,.45); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s;}
    #wmap.side-open .wm-dim {opacity: 1; visibility: visible; transition: opacity .3s;}

    /* 검색 패널 : 좌측에서 슬라이드 */
    #wmap .wm-side {height: 100%;}
    #wmap .wm-side.active {box-shadow: 6px 0 24px rgba(0,0,0,.18);}
    #wmap .wm-side-open {display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px; border: 1px solid #1B9E50; border-radius: 7px; color: #178943; background: #fff; font-size: 14px; font-weight: 700; white-space: nowrap; cursor: pointer;}
    #wmap .wm-side-open i {font-size: 20px; font-weight: 400;}
    #wmap .wm-side {position: fixed; z-index: 3000; inset: 0; display: flex; flex-direction: column; width: 100%; height: 100dvh; min-height: 0; padding: 0 20px 20px; overflow: hidden; overscroll-behavior: contain; border: 0; border-radius: 0; box-shadow: none; background: #fff; visibility: hidden; pointer-events: none; transform: translateX(100%); transition: transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s linear .32s;}
    #wmap .wm-side.active {visibility: visible; pointer-events: auto; transform: translateX(0); transition-delay: 0s;}
    #wmap .wm-side > * {flex-shrink: 0;}
    #wmap .wm-side-head {display: flex; position: sticky; z-index: 3; top: 0; align-items: center; justify-content: space-between; height: 60px; margin: 0 -20px 20px; padding: 0 20px; border-bottom: 1px solid #e5e5e5; background: #fff;}
    #wmap .wm-side-head h2 {margin: 0; color: #222; font-size: 20px; font-weight: 700;}
    #wmap .wm-side-close {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; color: #222; background: transparent; font-size: 30px; cursor: pointer;}
    #wmap .wm-side .wm-tit,
    #wmap .wm-side .wm-tit:first-of-type {margin: 0 0 16px; font-size: 18px;}
    #wmap .wm-side .wm-search + .wm-tit {margin-top: 28px;}
    #wmap .wm-side .wm-badge {min-width: 32px; height: 24px; padding: 0 8px; border-radius: 14px; background: #444; font-size: 13px;}
    #wmap .wm-side .wm-tabs button {height: 44px; border-color: #d4d4d4; color: #666; font-size: 15px; font-weight: 700;}
    #wmap .wm-side .wm-tabs button:first-child {border-radius: 8px 0 0 8px;}
    #wmap .wm-side .wm-tabs button:last-child {border-radius: 0 8px 8px 0;}
    #wmap .wm-side .wm-tabs button.on {border-color: #53AFBD; color: #008ea0; background: #e6f5f7;}
    #wmap .wm-side .wm-sel {height: 44px; padding: 0 40px 0 16px; border-radius: 7px; margin-bottom: 8px; font-size: 15px;}
    #wmap .wm-side .wm-search {height: 48px; margin: 0; border-radius: 7px; background: #068e9b; font-size: 16px;}
    #wmap .wm-side .wm-cate {flex: 1 1 auto; max-height: none; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain;}
    #wmap .wm-side .wm-cate li + li {margin-top: 6px;}
    #wmap .wm-side .wm-cate label {min-height: 48px; padding: 10px 14px 10px 44px; border-radius: 7px; font-size: 15px; font-weight: 600;}
    #wmap .wm-side .wm-cate input:checked + label {font-weight: 600;}
    #wmap .wm-side .wm-cate label i {left: 14px; width: 20px; height: 20px; margin-top: -10px; background-size: 14px 14px;}
    #wmap .wm-side .wm-btns {display: grid; grid-template-columns: 60px 1fr; gap: 8px; margin: 16px -20px -20px; padding: 12px 20px 16px; background: #fff;}
    #wmap .wm-side .wm-reset,
    #wmap .wm-side .wm-apply {width: auto; height: 50px; border-radius: 7px; font-size: 17px;}

    /* 바텀시트 (목록 + 상세) */
    #wmap .wm-list,
    #wmap.is-list:not(.list-fold) .wm-list {position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: 100%; height: 90vh; margin: 0; visibility: visible; border: 0; border-radius: 18px 18px 0 0; background: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,.14); transform: translate3d(0, 60vh, 0); transition: none; will-change: transform;}
    #wmap .wm-list.sheet-max,
    #wmap.is-list:not(.list-fold) .wm-list.sheet-max {border-radius: 0;}
    #wmap .wm-fold {display: none !important;}

    #wmap .wm-sheet-handle {display: flex; flex-shrink: 0; align-items: center; justify-content: center; height: 26px; cursor: grab; touch-action: none;}
    #wmap .wm-sheet-handle span {width: 40px; height: 5px; border-radius: 3px; background: #d0d0d0;}
    #wmap .wm-list .wm-list-head {padding: 2px 20px 14px; touch-action: none;}
    #wmap .wm-list .wm-list-head h2 {font-size: 17px;}
    #wmap .wm-list .wm-order {height: 36px;}
    #wmap .wm-list .wm-note {padding: 0 20px 8px;}
    #wmap .wm-list .wm-items {padding: 0 20px calc(20px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch;}
    #wmap .wm-list .wm-items a {gap: 16px; padding: 16px 0;}
    #wmap .wm-list .wm-items .thumb {flex-basis: 72px; width: 72px; height: 72px;}
    #wmap .wm-list .wm-items .subj {font-size: 16px;}
    /* 90%가 아닐 때는 내부 스크롤 대신 시트를 드래그 */
    #wmap .wm-list:not(.sheet-max) .wm-items,
    #wmap .wm-list:not(.sheet-max) .wm-detail-body {overflow: hidden;}

    /* 상세 모드 */
    #wmap.detail-mode .wm-list-head,
    #wmap.detail-mode .wm-note,
    #wmap.detail-mode .wm-items {display: none !important;}
    #wmap.detail-mode .wm-detail {display: flex; flex: 1; flex-direction: column; min-height: 0;}
    #wmap .wm-detail-head {display: flex; flex-shrink: 0; align-items: center; gap: 4px; padding: 0 8px 12px; border-bottom: 1px solid #eee; touch-action: none;}
    #wmap .wm-detail-head button {display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; background: transparent; color: #222; font-size: 26px; cursor: pointer;}
    #wmap .wm-detail-head .tit {flex: 1; min-width: 0;}
    #wmap .wm-detail-head .cate {font-size: 12px; font-weight: 700; line-height: 1.4;}
    #wmap .wm-detail-head .subj {overflow: hidden; color: #222; font-size: 18px; font-weight: 700; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis;}
    #wmap .wm-detail-body {flex: 1; min-height: 0; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; color: #333; font-size: 15px;}
    #wmap .wm-detail-body .img {height: 200px; margin-bottom: 16px; border-radius: 10px; overflow: hidden; background: #eee;}
    #wmap .wm-detail-body .img img {width: 100%; height: 100%; object-fit: cover;}
    #wmap .wm-detail-body .info {margin: 0; padding: 0; list-style: none;}
    #wmap .wm-detail-body .info li {display: flex; gap: 8px; padding: 4px 0; color: #555; line-height: 1.5;}
    #wmap .wm-detail-body .info li i {flex-shrink: 0; color: #999; font-size: 18px; line-height: 1.3;}
    #wmap .wm-detail-body .info a {color: #1679c8;}
    #wmap .wm-detail-body .desc {margin: 14px 0 0; color: #555; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;}
    #wmap .wm-detail-body .btns {display: flex; gap: 8px; margin-top: 20px;}
    #wmap .wm-detail-body .btns a {display: flex; align-items: center; justify-content: center; gap: 6px; height: 50px; border-radius: 8px; font-size: 16px; font-weight: 700; text-decoration: none;}
    #wmap .wm-detail-body .btns .call {flex: 0 0 96px; border: 1px solid #1B9E50; color: #1B9E50; background: #fff;}
    #wmap .wm-detail-body .btns .more {flex: 1; color: #fff; background: #2b7f8c;}
    #wmap .wm-detail-body .src {margin-top: 10px; color: #999; font-size: 12px;}
    #wmap .wm-detail-msg {padding: 40px 0; color: #999; text-align: center;}
}
@media screen and (max-width: 1024px) and (prefers-reduced-motion: reduce) {
    #wmap .wm-side {transition: none;}
}
@media (hover: hover) and (pointer: fine) {
    #wmap .wm-side .wm-tabs button:not(.on):hover {position: relative; border-color: #4399a7; background: #f0f8f9; color: #278795;}
    #wmap .wm-side .wm-sel:hover {border-color: #4399a7; box-shadow: 0 0 0 2px rgba(39,135,149,.1);}
    #wmap .wm-side .wm-search:hover {background: #1e7380;}
    #wmap .wm-side .wm-cate label:hover {background: #f3faf5;}
    #wmap .wm-side .wm-reset:hover {border-color: #148340; background: #edf8f0;}
    #wmap .wm-side .wm-apply:hover {border-color: #148340; background: #148340; box-shadow: 0 3px 8px rgba(27,158,80,.18);}
    #wmap .wm-list .wm-items a:hover .subj {color: #1B9E50;}
}
@media (prefers-reduced-motion: reduce) {
    #wmap .wm-list,
    #wmap.is-list:not(.list-fold) .wm-list,
    #wmap .wm-list .wm-fold i {transition: none;}
}

.event-page #con .no-visual {padding-top: 0;}

.event-page #con .nongchon-week .nongchon-tab {
    justify-content: flex-start;
    border-radius: 8px;
    background: #f3f3f3;
    box-shadow: none;
    overflow-x: auto;
}
.event-page #con .nongchon-week .nongchon-tab .tab-btn {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: 60px;
    padding: 14px 12px;
    border-radius: 8px;
    font-family: 'Pretendard', sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    color: #454545;
}
.event-page #con .nongchon-week .nongchon-tab .tab-btn.active::before {content: none;}
.event-page #con .nongchon-week .nongchon-tab .tab-btn.wide {flex-grow: 2; flex-direction: column;}
.event-page #con .nongchon-week .nongchon-tab .tab-btn.wide br {display: block;}
@media (hover: hover) {
    .event-page #con .nongchon-week .nongchon-tab .tab-btn:not(.active):hover {background: #e3f2e8; color: #1B9E50;}
}
@media screen and (max-width: 1200px) {
    .event-page #con .nongchon-week .nongchon-tab .tab-btn {font-size: 16px;}
    .event-page #con .nongchon-week.region-tabs .nongchon-tab .tab-btn {flex: 0 0 auto; min-width: 80px;}
}
@media screen and (max-width: 768px) {
    #spot.event-spot {margin-bottom: 0;}
    #spot.event-spot .sub-page-header .depth2-wrap {display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 0 10px;}
    #spot.event-spot .sub-page-header .page-breadcrumb {flex: none; order: 0; min-height: 20px;}
    #spot.event-spot .sub-page-header .depth2-title {grid-column: 1; grid-row: 2; width: 100%; white-space: normal; line-height: 1.3;}
    .event-page #con .nongchon-week .nongchon-tab {margin-bottom: 30px;}
    .event-page #con .nongchon-week .nongchon-tab .tab-btn {flex: 1 0 200px; white-space: normal;}
}

@media screen and (max-width: 1024px) {
    #header {height: 60px;}
    #header .h_area {height: 60px;}
    #header .logo a, #header .logo span {height: 60px;}
    #header #utils .list-wrap > li {height: 60px;}
    #header #utils .list-wrap > li #menuSearch {bottom: 60px;}
    #siteMap_m {top: 59px; height: calc(100% - 59px);}
    body[data-top-banner="on"]:not([data-scrolled="start"]) #siteMap_m {top: calc(59px + var(--mobile-banner-height)); height: calc(100% - 59px - var(--mobile-banner-height));}
    #spot.event-spot {padding-top: calc(60px + 34px);}
}

#con #travel-info.travel-catalog .catalog-sidebar .input-area .temp-input,
#wmap .wm-side .wm-keyword {display: block; position: static; width: 100%; height: 48px; min-height: 48px; padding: 0 16px; border: 1px solid #d5d5d5; border-radius: 7px; background: #fff; color: #333; font-size: 16px; box-sizing: border-box;}
#wmap .wm-side .wm-keyword {margin-bottom: 12px; flex-shrink: 0;}
#header .head_sns li:has(a[href*="youtube.com"]),
#siteMap_m .m_head_sns li:has(a[href*="youtube.com"]) {order: -1;}
#header .head_sns li:has(a[href*="story.kakao.com"]),
#siteMap_m .m_head_sns li:has(a[href*="story.kakao.com"]) {order: 1;}
#header .head_sns a[href*="instagram.com"],
#siteMap_m .m_head_sns a[href*="instagram.com"] {background-image: url('../images/main/i_instar.png');}
#header .head_sns a[href*="blog.naver.com"],
#siteMap_m .m_head_sns a[href*="blog.naver.com"] {background-image: url('../images/main/i_band.png');}
#header .head_sns a[href*="youtube.com"],
#siteMap_m .m_head_sns a[href*="youtube.com"] {background-image: url('../images/main/i_youtube.png');}
#header .head_sns a[href*="story.kakao.com"],
#siteMap_m .m_head_sns a[href*="story.kakao.com"] {background-image: url('../images/main/i_kakaoStory.png');}
#header #utils .list-wrap .body_utils > li a.btn-login {display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 999px; background: #f4f4f4; color: #777; font-size: 16px; font-weight: 600; line-height: 1; transition: background-color .2s ease, color .2s ease;}
#header #utils .list-wrap .body_utils .btn-login .login-icon {display: block; object-fit: contain; flex-shrink: 0;}
#header .sns-toggle, #header .sns-close {display: none;}
@media screen and (min-width: 1221px) {
    #header .left {flex: 1 1 auto; min-width: 0;}
    #header .right {flex: 0 0 auto; margin-left: 20px;}
    #pc-nav {min-width: 0;}
    #pc-nav .depth1 > li > a {white-space: nowrap;}
}
@media screen and (min-width: 1025px) and (max-width: 1762px) {
    #header #utils .list-wrap > li.header-sns {position: relative; display: flex; flex-shrink: 0;}
    #header .sns-toggle {display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 18px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #555; font-size: 16px; font-weight: 600; white-space: nowrap; transition: background-color .25s ease, border-color .25s ease, color .25s ease;}
    #header .sns-toggle::after {content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s ease;}
    #header .sns-open .sns-toggle {background: #444; border-color: #444; color: #fff;}
    #header .sns-open .sns-toggle::after {transform: translateY(2px) rotate(225deg);}
    #header .sns-panel {display: block; opacity: 0; visibility: hidden; pointer-events: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -8px); transition: opacity .25s ease, transform .3s ease, visibility 0s .3s; padding: 15px 28px 15px 20px; border: 1px solid #ddd; border-radius: 999px; background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,.15); z-index: 2;}
    #header .sns-open .sns-panel {opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); transition-delay: 0s;}
    #header #utils .list-wrap .header-sns .head_sns {display: flex; height: auto; gap: 8px;}
    #header .sns-close {display: flex; position: absolute; top: 50%; right: -12px; transform: translateY(-50%); align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #444; color: #fff; font-size: 24px; line-height: 1;}
}
@media screen and (min-width: 1221px) and (max-width: 1599px) {
    #pc-nav .depth1 {gap: 16px;}
    #pc-nav .depth1 > li > a {padding: 0 7px; font-size: 15px;}
    #header .h_area {padding-right: 20px; padding-left: 20px;}
    #header #utils .list-wrap > li .foreigners-btn {padding: 0 10px; font-size: 14px;}
}

@media screen and (min-width: 1221px) and (max-width: 1360px) {
    #header .h_area {padding: 0 12px;}
    #header .right {margin-left: 6px;}
    #pc-nav {flex: 1 1 auto; width: auto;}
    #pc-nav .depth1 > li > a {padding: 0 4px;}
    #header .sns-toggle {gap: 5px; padding: 0 8px;}
    #header #utils .list-wrap .body_utils > li {margin: 0 4px;}
    #header #utils .list-wrap .body_utils > li a.btn-login {gap: 4px; padding: 0 8px;}
    #header #utils .list-wrap > li .foreigners-btn {padding: 0 8px; margin-right: 6px;}
    #header #utils .list-wrap .btn_search {margin-right: 6px;}
}
body.header-login-open {overflow: hidden;}
.header-login.pop_login {display: flex; position: fixed; inset: 0; z-index: 3000; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, .55); opacity: 0; visibility: hidden; transform: none; transition: opacity .2s ease, visibility 0s .2s;}
.header-login.pop_login.on {inset: 0; opacity: 1; visibility: visible; transform: none; transition-delay: 0s;}
.header-login .header-login-box {position: relative; width: 800px; max-width: 100%; max-height: calc(100dvh - 48px); overflow-y: auto; padding: 36px 40px 40px; border-radius: 20px; background: #fff; color: #222; box-sizing: border-box;}
.header-login .header-login-close {position: absolute; top: 32px; right: 32px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: #444; font-size: 30px;}
.header-login h2 {margin: 0 32px 46px 0; font-size: 24px; font-weight: 700; line-height: 1.4; word-break: keep-all;}
.header-login h2 span {color: #1b9e50;}
.header-login .header-login-columns {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px;}
.header-login .header-login-village {position: relative;}
.header-login .header-login-village::before {content: ''; position: absolute; top: 0; bottom: 0; left: -40px; width: 1px; background: #d9d9d9;}
.header-login h3 {margin-bottom: 14px; font-size: 21px; font-weight: 700; line-height: 1.3;}
.header-login section > p {min-height: 20px; margin-bottom: 26px; color: #666; font-size: 14px; line-height: 1.5; word-break: keep-all;}
.header-login .header-login-kakao {display: flex; align-items: center; justify-content: center; gap: 16px; width: 100%; height: 102px; border-radius: 8px; background: #ffca00; color: #191919; font-size: 18px; font-weight: 700; transition: background-color .2s ease;}
.header-login .header-login-kakao i {font-size: 26px;}
.header-login .pop_body {padding: 0;}
.header-login .vill_input {display: grid; grid-template-columns: minmax(0, 1fr) 100px; gap: 10px;}
.header-login .vill_input .input {display: flex; flex-direction: column; gap: 6px; min-width: 0;}
.header-login .vill_input input {width: 100%; height: 48px; padding: 0 14px 0 42px; border: 1px solid #d5d5d5; border-radius: 8px; box-sizing: border-box; font-size: 14px; background: #fff url('../images/main/2026/ico-login.png') no-repeat 18px center / 13px 15px; transition: border-color .2s ease, box-shadow .2s ease;}
.header-login .vill_input input[type="password"] {background-image: url('../images/main/2026/ico-lock.png'); background-size: 14px 16px;}
.header-login .vill_input > button {border-radius: 8px; background: #1b9e50; color: #fff; font-size: 18px; font-weight: 700; transition: background-color .2s ease;}
@media screen and (max-width: 700px) {
    .header-login .header-login-box {padding: 28px 24px;}
    .header-login .header-login-close {top: 20px; right: 16px;}
    .header-login h2 {margin-bottom: 28px; font-size: 20px;}
    .header-login .header-login-columns {grid-template-columns: minmax(0, 1fr); gap: 28px;}
    .header-login .header-login-village {padding: 24px 0 0; border-left: 0; border-top: 1px solid #d9d9d9;}
    .header-login .header-login-village::before {display: none;}
    .header-login section > p {margin-bottom: 18px;}
    .header-login .header-login-kakao {height: 60px;}
    .header-login .vill_input {grid-template-columns: minmax(0, 1fr) 84px;}
}
.header-login .header-login-close i {display: block; transition: transform .3s ease;}
.header-login .vill_input input:focus {outline: none; border-color: #1b9e50; box-shadow: 0 0 0 3px rgba(27, 158, 80, .12);}
.header-login button:focus-visible {outline: 2px solid #1b9e50; outline-offset: 3px;}
#siteMap_m .m_body.mobile-login-panel {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding: 20px;}
#siteMap_m .mobile-login-panel .m_login,
#siteMap_m .mobile-login-panel .m_login + .m_login {display: flex; flex-direction: column; min-width: 0; padding: 0;}
#siteMap_m .mobile-login-panel .m_login + .m_login {position: relative;}
#siteMap_m .mobile-login-panel .m_login + .m_login::before {content: ''; position: absolute; top: 0; bottom: 0; left: -20px; width: 1px; background: #ccc;}
#siteMap_m .mobile-login-panel .m_login strong {font-size: 18px; font-weight: 700; line-height: 1.4; letter-spacing: -.5px;}
#siteMap_m .mobile-login-panel .m_login p {margin: 12px 0 22px; font-size: 13px; line-height: 1.5; color: #777; word-break: keep-all;}
#siteMap_m .mobile-login-panel .m_login .mobile-login-kakao,
#siteMap_m .mobile-login-panel .m_login .mobile-login-village {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 80px; height: auto; margin: auto 0 0; padding: 12px 6px; border-radius: 12px; font-size: 14px; font-weight: 700; line-height: 1.4; box-sizing: border-box; text-align: center;}
#siteMap_m .mobile-login-panel .mobile-login-kakao {background: #ffca00; color: #191919;}
#siteMap_m .mobile-login-panel .m_login .mobile-login-village {background: #00a547; color: #fff;}
#siteMap_m .mobile-login-panel .mobile-login-account {display: block; width: 29px; height: 29px; object-fit: contain; flex-shrink: 0;}
#siteMap_m .mobile-login-panel .m_login i {display: block; font-size: 26px; line-height: 1;}
@media screen and (max-width: 360px) {
    #siteMap_m .m_body.mobile-login-panel {gap: 24px; padding: 16px;}
    #siteMap_m .mobile-login-panel .m_login + .m_login::before {left: -12px;}
    #siteMap_m .mobile-login-panel .m_login strong {font-size: 16px;}
    #siteMap_m .mobile-login-panel .m_login p {font-size: 12px;}
}
#header .sns-toggle:focus-visible,
#header #utils .list-wrap .body_utils > li a.btn-login:focus-visible {outline: 2px solid #1b9e50; outline-offset: 3px;}

@media (hover: hover) and (pointer: fine) {
    .header-login .header-login-close:hover i {transform: rotate(90deg);}
    .header-login .header-login-kakao:hover {background-color: #f2bd00;}
    .header-login .vill_input > button:hover {background-color: #148340;}
    #header .header-sns:not(.sns-open) .sns-toggle:hover {background-color: #f4f4f4; border-color: #888; color: #222;}
    #header #utils .list-wrap .body_utils > li a.btn-login:hover {background-color: #e8e8e8; color: #333;}
}

@media (prefers-reduced-motion: reduce) {
    #header .sns-toggle, #header .sns-toggle::after, #header .sns-panel {transition: none;}
    .header-login.pop_login {transition: none;}
    .header-login .header-login-close i,
    .header-login .header-login-kakao,
    .header-login .vill_input > button,
    .header-login .vill_input input {transition: none;}
    .header-login .header-login-close:hover i {transform: none;}
    #header #utils .list-wrap .body_utils > li a.btn-login {transition: none;}
}