@charset "UTF-8";

/*-------------------------------------------------------------------
    적용영역 : 전체영역
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
    최종변경일 : 2025.11.21
-------------------------------------------------------------------*/
:root {
    --mobile-banner-height: 0px;
}

/* html,body {height:100%;} */
body {height:100%;}
html.open-modal,
html.open-modal body,
html.open-sitemap,
html.open-sitemap body,
html.open-mobile,
html.open-mobile 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 {color: #fff;}
.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 {color: #000;}
.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 {color: #454545;}
.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 {color: #fff;}
.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; z-index: 10; 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 > .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 {display: flex; align-items: center; width: 100%;}
#header .right {display: flex; align-items: center; flex-shrink: 0;}
#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:1640px){
    #header .h_area {padding: 0 20px;}
}
@media screen and (max-width: 1540px){
    .logo a,
    .logo span {width: 120px; background-size: 130px;}
}
@media screen and (max-width:620px){
    #header.on {background-color: #F5F7F9;}
}




/*-------------------------------------------------------------------
	분류이름 : GNB
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#pc-nav {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; overflow: hidden; height: 80px; position: relative;}
#pc-nav .depth1 > li {display: block; position: relative;}
#pc-nav .depth1 > li > a {position:relative; min-width: 160px; padding: 0 20px; font-size:20px; 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 {display: block;}
#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;}
#pc-nav .item .depth2 > li .jodal_height {height: 47px;}

/*-------------------------------------------------------------------
    @interaction
-------------------------------------------------------------------*/
#pc-nav .gnb {visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0s 0.3s;}
#pc-nav.open .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
-------------------------------------------------------------------*/
@media screen and (max-width: 1540px){
    #pc-nav .bg .txt-box::before {display: none;}
    #pc-nav .depth1 > li > a {min-width: 130px; font-size: 18px;}
    #pc-nav .item .depth2 > li a {padding: 12px 6px; font-size: 15px;}
}
@media screen and (max-width: 1220px){
    #pc-nav .depth1 {display: none;}
}




/*-------------------------------------------------------------------
	분류이름 : Utils
	분류그룹 : 레이아웃 > Header
-------------------------------------------------------------------*/
#header #utils {display: block;}
#header #utils .list-wrap{display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center;}
#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.m_btn_search{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:10px;}
#header #utils .list-wrap .head_sns li{width: 30px; height: 30px; background-color: #F4F6F9; line-height: 30px; border-radius: 50%; background-repeat: no-repeat; background-position: center;}
#header #utils .list-wrap .head_sns li a{display: block; width: 100%; height: 100%;}
#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;}
#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: transparent; 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: transparent; 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 .head_sns li:nth-child(1){background-image:url(../images/main/instar_icon.png)}
#header #utils .list-wrap .head_sns li:nth-child(2){background-image:url(../images/main/blog_icon.png)}
#header #utils .list-wrap .head_sns li:nth-child(3){background-image:url(../images/main/you_icon.png)}
#header #utils .list-wrap .head_sns li:nth-child(4){background-image:url(../images/main/kstory_icon.png)}

#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: -16px; 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-user {transition: background-color 0.3s, background-image 0.3s;}
#header #utils .list-wrap > li .btn-user:focus,
#header #utils .list-wrap > li .btn-user:hover {background-image: url(../images/common/i_user_hover.svg); background-repeat: no-repeat; }
#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 (max-width: 1540px){
    #header #utils .list-wrap .head_sns li{display: none;}
    #header #utils .list-wrap > li.top-banner-toggle .toggle-btn {gap: 5px; font-size: 14px; padding: 0 15px; height: 35px;}
    #header #utils .list-wrap > li .foreigners-btn {height: 35px; line-height:35px; padding:0 15px; font-size: 14px;}

}
@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: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{display: none;}
    #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{display: block;}
    #header #utils .list-wrap > li .type_mobile .ri-close-large-line.on{display: block;}
    #header #utils .list-wrap > li.top-banner-toggle {display: none;}
    #header #utils .list-wrap > li .foreigners-btn {display: none;}
}
@media screen and (max-width:830px){
    #header #utils .list-wrap .head_sns li{display: none;}
    #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: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
-------------------------------------------------------------------*/
#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
-------------------------------------------------------------------*/
#header #utils .list-wrap > li #menuSearch .search-wrap .search-box .in-search::placeholder {color: #636A75; opacity: 1;}
#header #utils .list-wrap > li #menuSearch .search-wrap .search-box .in-search:-ms-input-placeholder {color: #636A75;}

/*-------------------------------------------------------------------
	@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}

#header #utils .list-warp > li #menuSearch .btn-search-close {bottom: 0; opacity: 0; transition: bottom 0.3s, opacity 0.3s;}
#header #utils .list-warp > li #menuSearch.on .btn-search-close {bottom: -32px; opacity: 1; transition: bottom 0.3s 0.2s, opacity 0.3s 0.2s;}

#header #utils .list-wrap > li #menuSearch .btn-search-close::before,
#header #utils .list-wrap > li #menuSearch .btn-search-close::after {transition: background 0.3s, transform 0.3s;}
#header #utils .list-wrap > li #menuSearch .btn-search-close:focus::before,
#header #utils .list-wrap > li #menuSearch .btn-search-close:hover::before {background-color: #eee; transform: translateY(-50%) rotate(30deg);}
#header #utils .list-wrap > li #menuSearch .btn-search-close:focus::after,
#header #utils .list-wrap > li #menuSearch .btn-search-close:hover::after {background-color: #eee; transform: translateY(-50%) rotate(-30deg);}

/*-------------------------------------------------------------------
	@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; margin-top: 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 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_body .list ul .item{ height: 40px; line-height: 40px;}
.pop_contents .pop_body .list ul .item button{ padding: 0 14px; color:#6C6F78; background:#F5F7F9; border-radius: 10px; height: 40px; line-height: 40px;}
.pop_contents .pop_body .list ul li button.click{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{font-size: 14px;}

    .pop_contents .pop_head ul > li{font-size: 14px;}
    .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: 10% 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 {background-color: #F5F7F9;}
#siteMap_m .m_head .m_head_sns{display: flex; padding-top: 20px; justify-content: center; align-items: center; gap:10px;}
#siteMap_m .m_head .m_head_sns li{width: 30px; height: 30px; background-color: #fff; border-radius: 50%; background-repeat: no-repeat; background-position: center;}
#siteMap_m .m_head .m_head_sns li a{display: block;width: 30px; height: 30px;}

#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{display: block; height: 40px; margin-top: 10px; line-height: 40px; background-color: #1B9E50; color:#fff; font-size: 14px; font-weight: 700; 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_head .m_head_sns li:nth-child(1){background-image:url(../images/main/instar_icon.png)}
#siteMap_m .m_head .m_head_sns li:nth-child(2){background-image:url(../images/main/blog_icon.png)}
#siteMap_m .m_head .m_head_sns li:nth-child(3){background-image:url(../images/main/you_icon.png)}
#siteMap_m .m_head .m_head_sns li:nth-child(4){background-image:url(../images/main/kstory_icon.png)}

#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: 20px; background: #000000;}
#footer .foo_body .wrap{ display: flex; align-items: center; justify-content: space-between;width: 1700px; margin:0 auto}
#footer .foo_body .left {display: flex; align-items: center;}
#footer .foo_body .right {display: flex;}
/* 로고 */
#footer .foo_logo {margin-right: 80px;}
#footer .foo_logo span{display: block; width: 112px; height: 86px; background:url(../images/main/footer_logo.png) no-repeat 0 0 / 100% auto; text-indent: -9999px;}
/* 정보 */
#footer .foo_info {margin: 10px 0;text-align: center;}
#footer .foo_info .info ul{display: flex; align-items: center; padding-bottom:5px; gap: 5px 20px;}
#footer .foo_info .info ul li a {display: block; color:#fff; font-size: 16px;}
#footer .foo_info address {display: flex; align-items: center; color: rgba(255,255,255,0.7); gap: 0 25px;}
#footer .foo_info address > div {margin: 1px 0; line-height: 1.5; font-size: 14px;}
#footer .foo_info address > .foo__flex {display: flex; align-items: center;}
#footer .foo_info address > .foo__flex > div {display: flex; align-items: center;}
#footer .foo_info address > .foo__flex > div:nth-child(1) {margin-right: 20px;}
/* 대표전화 */
#footer .foo_call {margin-right: 40px;}
#footer .foo_call ul {display: block;}
#footer .foo_call ul li {font-size: 14px; font-weight: 400; color: rgba(255,255,255,0.7);}

/* sns 아이콘 */
#footer .foo_sns ul{display: flex; gap: 20px; justify-content: space-between;}
#footer .foo_sns ul li {width:40px; height:40px; background-size: 40px;}
#footer .foo_sns ul li a{display: inline-block; width: 40px; height:40px;}
/* 패밀리 사이트 */
#footer .f_site {margin-top: 20px;}
#footer .f_site > ul {display: flex;}
#footer .f_site > ul > li {position: relative;}
#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: 50px; position: relative; padding-right: 120px; padding-left:14px; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; line-height: 50px; background-color: rgba(0,0,0,0.2);}
#footer .f_site > ul > li > a::before {content: ''; position: absolute; top: 18px; 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: 50px; 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: 20px;font-size: 13px;letter-spacing: 1.2px;line-height: 1.6;color: #B3B3B3;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) {color: #8FC31F; font-size: 40px; font-family: 'Outfit'; 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;}

/*-------------------------------------------------------------------
	@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 .wrap{width:1440px;margin: 0 auto}
}
@media screen and (max-width:1500px){
    #footer .foo_body .wrap {display: block; width: 100%;}
    #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-top: 0; margin-left: 30px;}

    #footer .foo_sns_site {display: flex; 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 {justify-content:center}
    #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%;}
    #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;}
}



/*-------------------------------------------------------------------
	분류이름 : 정보수정요청, 탑버튼 (미사용)
	분류그룹 : 레이아웃 > 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-weight: normal; font-size: 16px; text-align: center; color: #fff; font-family: 'Ria','Pretendard','Noto Sans KR', sans-serif;}

#quick .btn-top {display: flex; position: absolute; bottom: 0; left: 50%; width: 80px; height: 80px; border-radius: 50%; background-color: #8FC31F; align-items: center; justify-content: center; transform: translate(-50%, 0);z-index:-1}
#quick .btn-top::before {content: "\EA76"; font-family: 'remixicon'; font-size: 24px; line-height: 1; color: #fff;}

#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/2025/quick_ico_03.svg); -webkit-animation: jump 3.5s ease infinite; animation: jump 3.5s ease infinite;}
#quick .list > li .btn-quick.q3::after {bottom:calc(100% - 93px); left:0.19em; aspect-ratio: 1 / 1.108048; font-size: 35px; background-image: url(../images/main/2025/quick_ico_04.svg);}
#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: 10px; 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: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/2025/quick_ico_03_bg.svg);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:250px;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}

@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 .list > li .btn-quick.q3:focus-visible::before,
    #quick .list > li .btn-quick.q3:hover::before {animation: quick03 0.8s 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: #69c31f; 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 {bottom: calc(50% - (0.25em * 1.108048)); right: calc(50% - 0.25em);}
    #quick .list > li .btn-quick em {position: absolute; top: 42%; right: 100%; width: auto; margin-right: 15px; padding: 5px 10px; border-radius: 5px; background-color: #156954; transform: translateY(-50%);}
    #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:100px;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{bottom:38px}
    #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 .btn-fold::before {transition: all 0.3s;}
    #quick.fold .btn-fold::before {transform: rotate(180deg);}
    #quick.fold .list {display: none;}
}
@media all and (max-width: 768px) {
    #quick {width: 40px;}
    #quick .list > li .btn-quick {font-size: 40px;}
    #quick .list > li .btn-quick::before {width: 0.35em;}
    #quick .list > li .btn-quick.q1::before {bottom: calc(50% - (0.175em * 0.71287));}
    #quick .list > li .btn-quick.q2::before {bottom: calc(50% - (0.175em * 0.8));}
    #quick .list > li .btn-quick.q3::before {bottom: calc(50% - (0.175em * 1.108048)); right: calc(50% - 0.175em);}
    
    #quick .list > li .btn-quick.q3::before{font-size: 130px; bottom: 40px;}
    
    #quick .btn-top {margin-top: 10px; width: 40px; height: 40px;}
    
    /* .stop #quick {top: 20px; bottom: auto;} */
    #quick .list > li .btn-quick.active {margin-left: -10px; font-size: 50px;}

    body[data-scrolled="start"] #quick {padding-bottom: 60px;}
}
@media all and (max-width: 600px) {
    #quick {right: 3%;}
    body[data-scrolled="start"] #quick {padding-bottom: 50px;}
}




/*-------------------------------------------------------------------
	분류이름 : 챗봇 (최신)
	분류그룹 : 레이아웃 > 고정영역
-------------------------------------------------------------------*/
#chatbot {display: flex; position: absolute; bottom: 20px; right: calc(3% + 165px); z-index: 2; width: 496px; height: calc(100dvh - 120px); 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::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;}
#chatbot .chat-bd::-webkit-scrollbar-thumb {border-radius: 8px; background: #8E8E8E;}
#chatbot .chat-bd::-webkit-scrollbar-track {padding: 0 8px; border-radius: 10px; background: #E4E4E4;} */
#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 .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: red;}
#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-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      {height: 0.78917em; font-size: 135.664px; background-image: url(../images/main/2025/chat_intro_01.svg);}
#chatbot .chat-bd [data-section="season"] .intro::before    {height: 0.78917em; font-size: 135.664px; background-image: url(../images/main/2025/chat_intro_01.svg);}
#chatbot .chat-bd [data-section="info"] .intro::before      {height: 0.78917em; font-size: 135.664px; background-image: url(../images/main/2025/chat_intro_01.svg);}
#chatbot .chat-bd [data-section="chon"] .intro::before      {height: 0.78917em; font-size: 135.664px; background-image: url(../images/main/2025/chat_intro_01.svg);}
#chatbot .chat-bd [data-section="story"] .intro::before     {height: 0.78917em; font-size: 135.664px; background-image: url(../images/main/2025/chat_intro_01.svg);}
#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 {right: 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;}

    #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 {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: 20px; right: calc(3% + 165px); z-index: 2; width: 496px; height: calc(100dvh - 120px); 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 {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: 300px; 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-color:#fff; 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::after{content: none;} */
.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; color: #A6B5D2; 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 - 120px - 100px);} /* 시작위치 (팝업ON) */
body[data-scrolled="start"].fixed-pop .chatBot_contain {height: calc(100dvh - 120px - 100px);} /* 스크롤시 (팝업ON) */

/*-------------------------------------------------------------------
    @media
--------------------------------------------------------------------*/
/* @media screen and (max-width: 1220px){
	 #chatBox {position: fixed; top: auto; bottom:150px; right: 20px; z-index: 100;}
}
@media screen and (max-width: 768px){
	#chatBox {position: fixed; top: auto; bottom:100px; right: 11px;}
	#chatBox .chat_bot .gapyeong_font{display: none;}
	#chatBox .chat_btn {width: 35px; height: 35px;}
	#chatBox .chat_btn.close::after{top: -1px; left: -1px; width: 37px; height: 37px; font-size: 22px; line-height: 37px;}
	.chatBot_contain {right: 60px; top: auto; bottom: 10%;}
}
@media screen and (max-width: 480px){
	.chatBot_contain{top: auto; bottom: 10%;}
	.chatBot_contain.open{width: 80%}
	.chatBot_contain .bot_wrap{width: 100%;}
	.chatBot_contain .bot_wrap .bot_body{height: 320px;}
	.chatBot_contain .bot_wrap .bot_body .tag{overflow-y: scroll; height: 76px; background-color:#fff;}
}
@media screen and (max-width: 380px){
	.chatBot_contain .bot_wrap .bot_head p{font-size: 16px;}
} */
@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 - 220px);}
}
@media screen and (max-width: 1024px) {
    .chatBot_contain {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;}
}