@charset "utf-8";
:root {
    --body-padding-side: 4.0rem;
    --header-height: 8.8rem;
    --header-padding: 1rem var(--body-padding-side) 0;
    --gnb-height: 4.4rem;
    --gnb-menu-padding-side: 3.4rem;

    --footer-color-background: var(--color-purple-25);
    --footer-padding: 4rem var(--body-padding-side) 4rem;

    --page-content-padding: 8.8rem var(--body-padding-side) 6rem;
    --hero-section-height: 11rem
}
/* body {
	
} */

/* Skip Navigation */
.skip-nav a {display:block; position:absolute; top:-10000px; left:0; z-index:100; width:100%; text-align: center}
.skip-nav a:focus {position:absolute; top:0; z-index:100; padding:10px 0; background: var(--color-secondary-800); font-weight:500; color:var(--color-white);}

/* Header */
.ready .k-header {opacity: 0;}
.k-header {position: fixed; z-index: 90; top: 0; left: 0; right: 0; display:flex; justify-content: space-between; align-items: center; width: 100%; min-height: var(--header-height); padding: var(--header-padding); transition: all 0.2s ease-in-out, background-color .5s ease-in-out; color-scheme: only light;}
.k-header > .header-overlay {z-index: -1; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: var(--header-height); transition: all 0.3s ease-in-out;}
.k-header > .header-overlay .header-overlay-path {fill: var(--header-overlay-background-color); transition: all 0.3s ease-in-out;}
[data-theme="dark"] .k-header > .header-overlay .header-overlay-path {fill: var(--header-overlay-background-color) !important;}
.k-header .logo {transition: all 0.2s ease-in-out;}
.k-header .logo a {display:block; width:19.5rem; height:4.7rem; background: url(/assets/imgs/common/logo.svg) no-repeat 0 -3px / contain; transition: all 0.2s ease-in-out; color: #fff;}
[data-theme="dark"] .k-header .logo a {background-image: url(/assets/imgs/common/logo_dark.svg);}
.k-header .toolbar > .btns {display:flex; align-items: center; flex-wrap: wrap;}

/* GNB */
.gnb a:hover {color: var(--header-accent-color);}
.gnb {position: absolute; left: 50%; top: 0; margin-top: 3rem; transform: translateX(-50%); font-size: 1.9rem; color:var(--gnb-color); text-transform: capitalize; transition: all 0.2s ease-in-out}
/* Sub Menu Container Background */ 
.gnb::before {display:block; content:""; position:absolute; top: 3rem; left:-40px; right:-40px; bottom:0; height: auto; background-color:rgba(255, 255, 255, 0.9); font-size:0; line-height:0; border-radius: 12px; border: 1px solid rgba(231, 231, 233, 0.5); box-shadow: 0px 15px 50px 0px rgba(27, 32, 50, 0.1); backdrop-filter: blur(5px); opacity: 0; transition:all 0.2s ease;}
[data-theme="dark"] .gnb::before {background-color:rgba(21, 30, 48, 0.9); border: 1px solid rgba(231, 231, 233, 0.3);}
.gnb.active::before {top:calc(var(--gnb-height) + 1.7rem); height: calc((100% - var(--gnb-height))); opacity: 1; transition-duration: 0.15s;}
/* Sub Menu */
.gnb > ul {display:flex; align-items:baseline; justify-content: center; padding-left: 30px;}
.gnb > ul > li {position: relative; display: flex; flex-direction: column;}
.gnb > ul > li > a {display:flex; align-items: center; justify-content: center; height:var(--gnb-height); padding: 0 var(--gnb-menu-padding-side); font-weight: 600; white-space: nowrap; transition: color 0.3s ease-in-out;}

/* .gnb > ul > li > ul {display: none; position: absolute; width: 100%; top: calc(var(--gnb-height) + 1.5rem); padding: 20px 0 20px;} */
.gnb > ul > li > ul {display: none; position: relative; padding: 22px 4px;}
.gnb > ul > li > ul > li ~ li {margin-top: .6rem;}
.gnb > ul > li > ul > li > a {display: block; padding: 6px 0; font-size: 16px; text-align: center; line-height: 1.3;}

/* Toolbar */
.toolbar {}
.toolbar > .btns {display: flex; flex-direction: row; -webkit-box-align: center; align-items: center; gap: .7rem;}
/* .toolbar-btn-theme-toggle .svg-icon {width: 1.4rem; height: 1.4rem;} */
/* .k-toolbar > .btns .btn-menu {display:flex; align-items: center; justify-content: center; width: 140px; height: 46px; background-color: #c8935f; border-color: #c8935f; color:#fff; font-size: 19px; font-weight: normal;}
.k-toolbar > .btns .btn-menu .w-icon-search:before {width: 24px; height: 24px; margin-left: 10px;}

.k-toolbar > .btns .list-wrap {display:-webkit-flex; display:flex; align-items: center; position: relative; padding-bottom: 10px;}
.k-toolbar > .btns .list-wrap .ico {display:inline-block; width: 34px; height: 34px; margin-right: 10px; background: url(../../images/common/reshot-icon-globe-1.svg) no-repeat center / contain;}
.k-toolbar > .btns .list-wrap .ico1 {display:none; width: 60px; height: 60px; background: url(../../images/common/reshot-icon-globe-2.svg) no-repeat center / contain;}
.k-toolbar > .btns .list-wrap .text {margin-top: -3px; color:#333; font-size: 20px; font-weight: bold;}
.k-toolbar > .btns .list-wrap .list {display: none; position: absolute; top: 45px; left: 50%; transform: translateX(-50%); width: 100px; border:1px solid #e5e5e5; padding: 10px 0; border-radius: 6px; background-color: rgba(255,255,255,0.85); transition: all 0.5s ease-in-out;}
.k-toolbar > .btns .list-wrap .list a {display: block; padding: 0 15px; line-height: 1.6; font-size: 20px; font-family:"Roboto", sans-serif; font-weight: bold;}
.k-toolbar > .btns .list-wrap .list .triangle {overflow: hidden; position: absolute; top:-8px; left:50%; transform: translateX(-50%); width: 14px; height: 8px;}
.k-toolbar > .btns .list-wrap .list .triangle::before {position: absolute; top:4px; left:2px; display: block; line-height: 0; font-size: 0; content:''; width: 8px; height: 8px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background-color: rgba(255,255,255,.85);} */


/* When scrolling up and down */
body.sc-dir-down {
    --header-height: 5.4rem;
    --header-padding: 0 2.4rem 0;
}
.sc-dir-down .k-header .logo a {height:2.8rem; width: 12.5rem;}
.sc-dir-down .gnb {margin-top: 1rem; font-size: 1.6rem;}
.sc-dir-down .gnb.active::before {top:calc(var(--gnb-height) + 1rem);}
.sc-dir-down .gnb > ul > li > ul {padding: 24px 4px;}
.sc-dir-down .gnb.active > ul > li > ul {margin-top: -1.3rem;}
.sc-dir-down .gnb > ul > li > ul > li > a {padding: 4px 0; font-size: 1.4rem;}

.sc-dir-down .header-overlay {backdrop-filter: blur(10px);}
/* .sc-dir-down .header-overlay.active {} */
.sc-dir-down .header-overlay .header-overlay-path {fill: var(--header-overlay-background-color) !important; opacity: .9;}
[data-theme="dark"] .sc-dir-down .header-overlay .header-overlay-path {fill: var(--header-overlay-background-color) !important; opacity: .8;}

.out-hero-section .header-overlay {border-radius: 0 0 .6rem .6rem; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .22);}
[data-theme="dark"] .out-hero-section .header-overlay {box-shadow: 0 1px 0 0 rgba(231, 231, 233, 0.3);}
.sc-dir-up.out-hero-section .header-overlay {border-radius: 0 0 1.8rem 1.8rem;}

/* 1920×1080 – 24.28% (more than in the USA)
1366×768 – 15.29%
1440×900 – 10.45%
1536×864 – 8.89%
1280×720 – 5.68%
768×1024 – 5.52% */
@media screen and (max-width: 1440px) {
    :root {
        --gnb-menu-padding-side: 2.2rem;
    }
}
@media screen and (max-width: 1023px) {
    :root {
        --gnb-menu-padding-side: 1.6rem;
    }

    .gnb {display: none;}

    /*.gnb {display: none;}
    .header-overlay {height: 72px;}
    .sc-dir-up .header-overlay {height: 80px;}
    .sc-dir-up .k-toolbar .logo {margin-top: 34px;}

    .k-toolbar .logo a {width:160px; height:36px;}

    .k-toolbar > .btns {margin-top: 17px;}
    .k-toolbar > .btns .k-btn-menu-burger {display: inline-block; margin-right: 12px; margin-left: 12px;}
    .k-toolbar > .btns .btn-menu {display: none;}
    .gnb-profile .img-avatar {padding:0 10px 0;}
    .gnb-profile .list {top: 34px;}

    .menu-toggle {display: block;}
    .k-toolbar > .btns .list-wrap {margin: 0; padding: 0;}
    .k-toolbar > .btns .list-wrap .ico {width: 36px; height: 36px; margin-right: 0;}
    .k-toolbar > .btns .list-wrap .text {position:absolute; margin:-1px; padding:0; width:1px; height:1px; overflow:hidden; border:0; clip:rect(0 0 0 0);}
    .k-toolbar > .btns .list-wrap .list {left: -16px;}
    .k-toolbar > .btns .list-wrap .list .triangle {left:85%;} */
}

/* @media (max-width: 768px) { */
@media screen and (max-width: 767px) {
    :root {
        --body-padding-side: 1.6rem;
        --header-height: 6.8rem;
        --header-padding: .4rem 1.6rem 0;
        --page-content-padding: 6.8rem var(--body-padding-side) 6rem;
    }
    
    /* .k-btn-nav-login {display: none;}
    .k-btn-nav-signup {display: none;} */
    /* .single .k-header .k-btn-nav-signup {display:inline-block;} */
}
@media screen and (max-width: 480px) {
    /* :root {
        
    } */
    .k-header .logo a {width: 15.5rem; height: 3.8rem;}
    .k-header .toolbar > .btns .icon-left .svg-icon {margin-right: 0;}
    .k-header .toolbar > .btns button > span:not([class]),
    .k-header .toolbar > .btns button > span:not([class]) { position: absolute; font-size: 0; color: transparent; }

    /* .k-header {padding-left: 1.6rem; padding-right: 1.6rem;}
    .post-view-content {padding-left: 1.6rem; padding-right: 1.6rem;} */
}
/* @media screen and (max-width: 414px) {
    .k-btn-nav-signup {display: none;}
    .k-toolbar > .btns .list-wrap .ico {width: 34px; height: 34px;}
} */

/* Content Section */
.page-content {min-height: calc(110vh - 8.8rem); padding: var(--page-content-padding);}

.hero-section {min-height: var(--hero-section-height);}


/* Footer */
.k-footer {display: flex; align-items: center; justify-content: center; position: relative; padding: var(--footer-padding); background-color: var(--footer-color-background);}
.k-footer::before {display:block; content:""; position:absolute; top: 0; left:0; right:0; height: .8rem; background: url(/assets/imgs/common/bg_squiggle.svg) no-repeat 0 0 / contain;}
.k-footer .logo {margin-right: 4rem; transition: all 0.2s ease-in-out;}
.k-footer .logo a {display:block; width:3.4rem; height:3.4rem; background: url(/assets/imgs/common/logo_footer.svg?v=1) no-repeat 0 0 / contain; transition: all 0.2s ease-in-out;}
.k-footer nav > ul {display:flex; align-items:baseline; justify-content: center;}
.k-footer nav > ul > li {position: relative; display: flex; flex-direction: column;}
.k-footer nav > ul > li > a {display:flex; align-items: center; justify-content: center; height: 4rem; padding: 0 2rem; font-weight: 600; white-space: nowrap; transition: color 0.3s ease-in-out;}

/* .gnb::before {display:block; content:""; position:absolute; top: 3rem; left:-40px; right:-40px; bottom:0; height: auto; background-color:rgba(255, 255, 255, 0.9); font-size:0; line-height:0; border-radius: 12px; border: 1px solid rgba(231, 231, 233, 0.5); box-shadow: 0px 15px 50px 0px rgba(27, 32, 50, 0.1); backdrop-filter: blur(5px); opacity: 0; transition:all 0.2s ease;} */
/* .k-footer {position: relative; z-index: 70; background: #f7f6ff; padding: 72px 72px 72px; font-family: Poppins, 'Nunito Sans', 'Noto Sans KR', Malgun Gothic, sans-serif; line-height: 1.6; text-transform:capitalize}
.k-footer > .info-box {display: flex; align-items: flex-start;}
.k-footer .info-list {width: 210px; display: flex; align-items: flex-start; flex-direction: column; font-size: 16px;  color: #0d0c22;}
.k-footer .info-list > p {font-weight: bold;}
.k-footer .info-list > .info-nav {margin-top: 20px; font-size: 14px;}
.k-footer .info-list > .info-nav > ul > li {padding: 3px 0; font-weight: normal;}
.k-footer .info-list > .info-nav > ul > li > a {position: relative}
.k-footer .info-list > .info-nav > ul > li > a .ico {transition:all 0.2s linear; position: absolute; left: -14px; top: 50%; transform: translate(0, -50%); width: 10px; font-size: 15px;}
.k-footer .info-list > .info-nav > ul > li > ul {overflow: hidden; height: 0; opacity: 0; transition:all 0.2s linear; margin: 0 0 10px; color: #6a6d8c;}
.k-footer .info-list > .info-nav > ul > li.active {}
.k-footer .info-list > .info-nav > ul > li.open > ul {height: auto; opacity: 1;}
.k-footer .info-list > .info-nav > ul > li.open > a .ico {transform: translate(0, -50%) rotate(90deg);}

.k-footer .logo {display: flex; align-self: flex-end; width:180px; height:40px; margin-left: auto; background: url(../../images/common/logo_purple.svg) no-repeat bottom 0 right 0 / contain; } */

@media screen and (max-width: 480px) {
    .k-footer .logo {margin-right: 0;}
    .k-footer nav > ul > li > a {padding: 0 1rem;}
}

[data-theme="dark"] {
    --footer-color-background: #09203a;
}


































/* .k-toolbar > .btns .btn-menu {display:flex; align-items: center; justify-content: center; width: 140px; height: 46px; background-color: #c8935f; border-color: #c8935f; color:#fff; font-size: 19px; font-weight: normal;}
.k-toolbar > .btns .btn-menu .w-icon-search:before {width: 24px; height: 24px; margin-left: 10px;}

.k-toolbar > .btns .list-wrap {display:-webkit-flex; display:flex; align-items: center; position: relative; padding-bottom: 10px;}
.k-toolbar > .btns .list-wrap .ico {display:inline-block; width: 34px; height: 34px; margin-right: 10px; background: url(../../images/common/reshot-icon-globe-1.svg) no-repeat center / contain;}
.k-toolbar > .btns .list-wrap .ico1 {display:none; width: 60px; height: 60px; background: url(../../images/common/reshot-icon-globe-2.svg) no-repeat center / contain;}
.k-toolbar > .btns .list-wrap .text {margin-top: -3px; color:#333; font-size: 20px; font-weight: bold;}
.k-toolbar > .btns .list-wrap .list {display: none; position: absolute; top: 45px; left: 50%; transform: translateX(-50%); width: 100px; border:1px solid #e5e5e5; padding: 10px 0; border-radius: 6px; background-color: rgba(255,255,255,0.85); transition: all 0.5s ease-in-out;}
.k-toolbar > .btns .list-wrap .list a {display: block; padding: 0 15px; line-height: 1.6; font-size: 20px; font-family:"Roboto", sans-serif; font-weight: bold;}
.k-toolbar > .btns .list-wrap .list .triangle {overflow: hidden; position: absolute; top:-8px; left:50%; transform: translateX(-50%); width: 14px; height: 8px;}
.k-toolbar > .btns .list-wrap .list .triangle::before {position: absolute; top:4px; left:2px; display: block; line-height: 0; font-size: 0; content:''; width: 8px; height: 8px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background-color: rgba(255,255,255,.85);}

.k-toolbar > .btns .list-wrap:hover .list,
.k-toolbar > .btns .list-wrap:focus .list {display: block;}
.k-toolbar > .btns .k-btn-sm ~ .k-btn-sm {margin-left: 10px;} */



.btn-menu-burger {margin-top: 22px; margin-right: 28px; z-index: 96; position: relative; cursor: pointer; background-color: transparent; width: 36px; height: 36px;}
.btn-menu-burger .menu-icon-burger {position: relative; display: flex; flex-direction: row; align-items: center; justify-content: center;}
.btn-menu-burger .menu-icon-burger .top-bun, 
.btn-menu-burger .menu-icon-burger .patty, 
.btn-menu-burger .menu-icon-burger .bottom-bun {position: absolute; display: block; left: 10px; right:10px; width: auto; height: 2px; background-color: #6F6F6F; transition: all 250ms cubic-bezier(.2,.6,.3,1);}
.btn-menu-burger .menu-icon-burger .top-bun {transform: translateY(-6px);}
.btn-menu-burger .menu-icon-burger .patty {transition-duration: 300ms;}
.btn-menu-burger .menu-icon-burger .bottom-bun {transform: translateY(6px);}

.btn-menu-burger.active .menu-icon-burger .top-bun, 
.btn-menu-burger.active .menu-icon-burger .patty, 
.btn-menu-burger.active .menu-icon-burger .bottom-bun { background-color: #242424;}
.btn-menu-burger.active .menu-icon-burger .top-bun { transform:translateX(-2px) rotate(-135deg); width: 20px;}
.btn-menu-burger.active .menu-icon-burger .patty {transform:scaleX(0); opacity: 0;}
.btn-menu-burger.active .menu-icon-burger .bottom-bun { transform:translateX(-2px) rotate(135deg); width: 20px;}




.nf-header-btns {display:flex; align-items: center; margin: 24px 0 0 auto; transition: margin 0.3s ease-in-out}
.btn-header-profile {position: relative; margin-right: 20px; line-height: 1; color: #2B2A29;}
.btn-header-profile .user-name {font-size: 18px; font-weight: 600; margin-right: 5px;}

.btn-header-logout {position: relative; padding: 9px 0 8px; line-height: 1; color: #50B587; font-weight: 600;}
.btn-header-logout::after {display: block; content: ''; position: absolute; left: 0; right: 24px; bottom: 7px; height: 1px; background: #50B587; line-height: 0; font-size: 0; transition: background-color 150ms;}
.btn-header-logout .svg-icon {width: 17px; height: 16px; margin-left: 4px; vertical-align: -2px;}

.nf-header-close {display: flex; align-items: center; position:absolute; z-index:10; top:18px; right:30px; width:42px; height:42px; transition: all 0.3s;}
.nf-header-close::before,
.nf-header-close::after {content:""; display:block; position:absolute; top:auto; left:13px; height:2px; width: 18px; background-color:#242424; font-size:0; line-height:0; transform: rotate(0); transition: all 0.5s;}
.nf-header-close::before {transform: rotate(45deg);}
.nf-header-close::after {transform: rotate(-45deg);}
.nf-header .nf-header-close:hover::before,
.nf-header .nf-header-close:hover::after {background-color:#1a1a1a;}


/* main header */
.main-header {position: fixed; z-index: 90; top: 0; left: 0; right: 0; width: 100%; min-height: var(--header-height); background: transparent; transition: top 0.2s ease-in-out, background-color .5s ease-in-out;}

.main-toolbar {display:flex; padding: var(--header-padding);}
.main-toolbar .logo {display:flex; margin-right: auto; margin-top: 26px; transition: margin 0.3s ease-in-out;}
.main-toolbar .logo a {display:block; width:180px; height:28px; background: url(../images/common/logo.svg) no-repeat 0 0 / contain;}

.main-header-btns {display:flex; align-items: center; margin: 24px 0 0 auto; transition: margin 0.3s ease-in-out}














.gnb-profile {position: relative; display: inline-block;}
.gnb-profile .img-avatar {padding:0 10px 10px; display: flex; align-items: center; font-size: 14px; letter-spacing: -1px; font-weight: 500;}
.gnb-profile .img-avatar > img:first-child {width: 34px; height: 34px; overflow: hidden; border-radius: 50%; margin-right: 8px;}
.gnb-profile .text {margin-top: -3px; color:#333; font-size: 20px; font-weight: bold;}
.gnb-profile .list {display: none; position: absolute; top: 44px; left: 100%; transform: translateX(-100%); width: 200px; /*border:1px solid #e5e5e5;*/ padding: 10px 0; border-radius: 6px; background-color: rgba(255,255,255,1); transition: all 0.5s ease-in-out; box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 2px 6px 16px 0 rgba(0,0,0,0.1);}
.gnb-profile .list nav {margin-top: 10px;}
.gnb-profile .list a {display: block; padding: 5px 25px; line-height: 1.6; font-size: 14px; font-weight: 500;}
.gnb-profile .list .triangle {overflow: hidden; position: absolute; top:-8px; left:80%; transform: translateX(-50%); width: 14px; height: 8px;}
.gnb-profile .list .triangle::before {position: absolute; top:4px; left:2px; display: block; line-height: 0; font-size: 0; content:''; width: 8px; height: 8px; transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; background-color: rgba(255,255,255,.85);}
.gnb-profile .list a.k-btn-nav-signout {padding-top: 15px; margin-top: 15px; border-top: 1px solid #e8e8e8;}
.gnb-profile .list a.k-btn-nav-signout .svg-icon {width: 16px; }
.gnb-profile .list a.k-btn-nav-signout .svg-icon path {fill: #694be7;}
.gnb-profile .list a .svg-icon {vertical-align: middle; margin-top: -5px;}
.gnb-profile .list a .svg-icon-setting {width: 16px;}
.gnb-profile .list a .svg-icon-setting path:last-child {fill: #7b7b7b;}

.gnb-profile:hover .list,
.gnb-profile .img-avatar:focus ~ .list {display: block;}






/* ### menu-toggle */
.menu-toggle {display: none; margin-top: 16px; margin-right: 10px; width: 40px; height: 38px; background-color:transparent;}
.menu-toggle .icon-menu {display:inline-block; vertical-align:top; width:40px; height:34px; padding:0 6px;}
.menu-toggle .icon-menu .bar1, .menu-toggle .icon-menu .bar2, .menu-toggle .icon-menu .bar3 {display:block; height:2px; background-color:#222; margin:7px 0; font-size:0; line-height:0;-webkit-transition:all 0.2s; transition:all 0.2s;}

.menu-toggle:hover .icon-menu .bar1, .menu-toggle:hover .icon-menu .bar2, .menu-toggle:hover .icon-menu .bar3 {background-color:#ff7ccd;}
.menu-toggle:hover .icon-menu .bar1 {margin-left:7px;}
.menu-toggle:hover .icon-menu .bar3 {margin-left:4px;}
.menu-toggle:hover .icon-menu .bar2 {margin-left:0;}

.k-btn-menu-burger {position: relative; display: none; cursor: pointer; background-color: transparent; border: none;}
.k-btn-menu-burger .menu-icon-burger {position: relative; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px;}
.k-btn-menu-burger .menu-icon-burger .top-bun, 
.k-btn-menu-burger .menu-icon-burger .patty, 
.k-btn-menu-burger .menu-icon-burger .bottom-bun {position: absolute; display: block; top: 0; left: 0; bottom: 0; margin: auto; width: 100%; height: 2px; background-color: #000; opacity: 0.9; transition: transform 250ms cubic-bezier(.2,.6,.3,1),width 250ms cubic-bezier(.2,.6,.3,1); will-change: transform,width;}

.k-btn-menu-burger .menu-icon-burger.type-double .top-bun { transform: translateY(-5px);}
.k-btn-menu-burger .menu-icon-burger.type-double .patty { transform: scale(0);}
.k-btn-menu-burger .menu-icon-burger.type-double .bottom-bun { transform: translateY(5px);}

.k-btn-menu-burger.active .menu-icon-burger .top-bun, 
.k-btn-menu-burger.active .menu-icon-burger .patty, 
.k-btn-menu-burger.active .menu-icon-burger .bottom-bun { background-color: #000; opacity: 1;}

.k-btn-menu-burger.active .menu-icon-burger .top-bun { transform: translateX(3.5px) rotate(-135deg); width: 28px;}
.k-btn-menu-burger.active .menu-icon-burger.navLeft .patty, 
.k-btn-menu-burger.active .menu-icon-burger.navRight .patty, 
.k-btn-menu-burger.active .menu-icon-burger .patty { transform: scale(0);}
.k-btn-menu-burger.active .menu-icon-burger .bottom-bun { transform: translateX(3.5px) rotate(135deg); width: 28px;}







/* -------------------------------------------------------------------
 * ## snb
 * ------------------------------------------------------------------- */
.snb {display:none; z-index:200; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%;}
.snb.active {display:block;}
.snb > .backdrop {left:0; top:0; bottom:0; position:absolute; width:100%; height:100%; background-color:#000; opacity:0.6; -webkit-animation-name:snb_backdrop_fadein; animation-name:snb_backdrop_fadein; -webkit-animation-duration:0.35s; animation-duration:0.35s;}
.snb > .snb-content {z-index:5; position:absolute; top:0; bottom:0; left:0; right:0; -webkit-animation-duration:0.35s; animation-duration:0.35s;}
.snb.active > .snb-content {-webkit-animation-name:snb_slideLeft; animation-name:snb_slideLeft;}
/* inactive */
.snb.active.inactive > .snb-content {-webkit-transform:translateY(100%); transform:translateY(100%); -webkit-animation-name:snb_slideRight; animation-name:snb_slideRight;}
.snb.active.inactive > .backdrop {opacity:0; -webkit-animation-name:snb_backdrop_fadeout; animation-name:snb_backdrop_fadeout;}
@-webkit-keyframes snb_slideLeft {
	from {-webkit-transform:translate(100%, 0%);} 
	to {-webkit-transform:translate(0%, 0%);}
}
@keyframes snb_slideLeft {
	from {transform:translate(100%, 0%);}
	to {transform:translate(0%, 0%);}
}
@-webkit-keyframes snb_slideRight {
	from {-webkit-transform:translate(0%, 0%);} 
	to {-webkit-transform:translate(100%, 0%);}
}
@keyframes snb_slideRight {
	from {transform:translate(0%, 0%);}
	to {transform:translate(100%, 0%);}
}
@media all and (min-width:375px) {
	.snb > .snb-content {left:auto; width:360px;}
}
/* backdrop Animation */
@-webkit-keyframes snb_backdrop_fadein {
	from {opacity:0} 
	to {opacity:.6}
}
@keyframes snb_backdrop_fadein {
	from {opacity:0}
	to {opacity:.6}
}
@-webkit-keyframes snb_backdrop_fadeout {
	from {opacity:.6}
	to {opacity:0}
}
@keyframes snb_backdrop_fadeout {
	from {opacity:.6}
	to {opacity:0}
}
.snb .snb-close {position:absolute; z-index:10; top:10px; right:10px; width:28px; height:40px;}
.snb .snb-close::before,
.snb .snb-close::after {display:inline-block; content:""; display:block; position:absolute; top:11px; left:0; height:2px; width: 100%; background-color:#fff; font-size:0; line-height:0; transform: rotate(0); transition:all 0.5s 2s ease-out;}
.snb .snb-close::after {top:17px;}
.snb.active .snb-close::before {top:19px; transform: rotate(45deg);}
.snb.active .snb-close::after {top:19px; transform: rotate(-45deg);}

/* #### snb-body */
.snb-body {position:absolute; top:0; left:0; right:0; bottom:0; background-color:#000; overflow-x:hidden; overflow-y:scroll; will-change:scroll-position; -webkit-overflow-scrolling:auto;}

/* ### allnavbar */
#allnav {position:relative; height:100%; color:#0e0e19; font-size:19px; line-height:1.3; font-weight: 400; letter-spacing:-0.48px;}

#allnav .nav {position:relative; height:100%; padding-top:60px;}
#allnav .nav::before {display:block; content:""; position:absolute; top:0; bottom:0; left:0; width:170px; background-color:rgba(255, 255, 255, 0.12);}
#allnav .nav>li ~ li {margin-top: 10px;}
#allnav .nav>li a {transition:all 0.3s; -webkit-transition:all 0.3s;}
#allnav .nav>li>:first-child,
#allnav .nav>li>a {position:relative; z-index:1; display:block; width:170px; padding:14px 20px 13px; color:#fff;}
#allnav .nav>li:first-child > a {}
#allnav .nav>li.on>a {width:173px; background:#fff; color:#111; font-weight:bold;}

#allnav .nav>li>ul {display:none; position:absolute; top:60px; left:200px; right:0;}
/* #allnav .nav>li>ul::after {display:block; content:""; position:absolute; top:0; bottom:0; left:-160px; width:120px; background-color:#f7f7f7;} */
#allnav .nav>li:nth-child(2)>ul {top:122px;}
#allnav .nav>li.on>ul {display:block;}

#allnav .nav>li>ul>li {}
#allnav .nav>li>ul>li>a {position:relative; display:block; padding:14px 20px 13px 0; font-size: 17px; color:#fff; border-bottom:1px solid #ebebeb;}
#allnav .nav>li>ul>li>a.on,
#allnav .nav>li>ul>li>a.on:focus {color:#fff; font-weight:500;}
#allnav .nav>li>ul>li>a::before {visibility:hidden; display:inline-block; content:""; position:absolute; bottom:-1px; left:0; width:100%; height:1px; line-height:0; font-size:0; background: #f7f7f7;; width:0; -webkit-transition:all 0.3s; transition:all 0.3s;}
#allnav .nav>li>ul>li>a.on::before, #allnav .nav>li>ul>li>a.on:focus::before {visibility:visible; width:100%;}

#allnav .nav>li>ul>li.toggle>a.on,
#allnav .nav>li>ul>li.toggle>a.on:focus {color:#0e0e19; font-weight:normal;}
#allnav .nav>li>ul>li.toggle>a::before {display:block; content:""; position:absolute; left:0; right:0; top:auto; bottom:-1px; width:100%; height:1px; background:#ebebeb;}
#allnav .nav>li>ul>li.toggle>a::after {display:inline-block; content:""; position:absolute; top:50%; right:18px; width:16px; height:16px; margin:-8px 0 0 -8px; /*background:url() 50% 50% no-repeat;*/ background-size:26px auto; transition:all 0.2s ease-in-out; opacity:.6;}
#allnav .nav>li>ul>li.toggle>a.on::before {background:#bcbccc;}
#allnav .nav>li>ul>li.toggle>a.on::after {-webkit-transform:rotate(180deg); transform:rotate(180deg); opacity:1;}

#allnav .nav>li>ul>li>ul {display:none; padding:15px 0 15px 0;}
/* #allnav .nav>li>ul>li>a.on + ul {display:block;} */

#allnav .nav>li>ul>li>ul li>a {position:relative; display:block; padding:10px 10px; font-size:14px;}
#allnav .nav>li>ul>li>ul li>a::before {display:inline-block; content:""; position:absolute; left:0; top:19px; width:2px; height:2px; background:#0e0e19; opacity:.4;}
#allnav .nav>li>ul>li>ul li>a.on, #allnav .nav>li>ul>li>ul li>a:focus {color:#1f7af7;}
#allnav .nav>li>ul>li>ul li>a.on::before, #allnav .nav>li>ul>li>ul li>a:focus::before {background:#1f7af7;}

#allnav .nav>li>ul>li>ul ul {padding:5px 0 5px 10px;}





/* -------------------------------------------------------------------
 * ## k-snb
 * ------------------------------------------------------------------- */
 .snb-open .t-toolbar .logo a {background-image: url(../../images/temp/restaurant/common/logo.svg);}
 .k-snb {display:none; z-index:85; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%;}
 .k-snb.active {display:block;}
  @media screen and (min-width: 1024px) {.k-snb.active {display:none;}}
  /* .k-snb > .backdrop {left:0; top:0; bottom:0; position:absolute; width:100%; height:100%; background-color:#fff; opacity:1; animation-name:t_snb_backdrop_fadein; animation-duration:0.6s;} */
 .k-snb > .k-snb-content-back {left:0; top:0; bottom:0; position:absolute; width:100%; height:100%; background-color:#fff;}
 .k-snb > .k-snb-content {z-index:5; position:absolute; top:0; bottom:0; left:0; right:0;}
 .k-snb.active > .k-snb-content-back {animation:t_snb_backdrop_fadein 0.3s ease-in-out;} /* Duration must be same as duration of javascript */
 .k-snb.active > .k-snb-content {animation:t_snb_slideUp 0.3s ease-in-out;}
 /* inactive */
 /* .k-snb.active.inactive > .backdrop {opacity:0; animation-name:t_snb_backdrop_fadeout;} */
 .k-snb.active.inactive > .k-snb-content-back {animation:t_snb_backdrop_fadeout 0.3s ease-in-out;} /* second animation */
 .k-snb.active.inactive > .k-snb-content {animation:t_snb_slideDown 0.3s ease-in-out;}
  @keyframes t_snb_slideUp {
      from {transform:translate(0%, 5%);opacity:0}
      to {transform:translate(0%, 0%);opacity:1}
  }
  @keyframes t_snb_slideDown {
      from {transform:translate(0%, 0%);opacity:1}
      to {transform:translate(0%, 5%);opacity:0}
  }
  /* backdrop Animation */
  @keyframes t_snb_backdrop_fadein {
      from {opacity:0}
      to {opacity:1}
  }
  @keyframes t_snb_backdrop_fadeout {
      from {opacity:1}
      to {opacity:0}
  }
 .k-snb .k-snb-close {position:absolute; z-index:10; top:10px; right:10px; width:28px; height:40px;}
 .k-snb .k-snb-close::before,
 .k-snb .k-snb-close::after {display:inline-block; content:""; display:block; position:absolute; top:11px; left:0; height:2px; width: 100%; background-color:#fff; font-size:0; line-height:0; transform: rotate(0); transition:all 0.5s 2s ease-out;}
 .k-snb .k-snb-close::after {top:17px;}
 .k-snb.active .k-snb-close::before {top:19px; transform: rotate(45deg);}
 .k-snb.active .k-snb-close::after {top:19px; transform: rotate(-45deg);}
 
 .k-snb.active.inactive .all-nav .nav>li>a {color: #fff;}
 
 /* #### k-snb-body */
 .k-snb-body {position:absolute; top:var(--gnb-height); left:0; right:0; bottom:0; background-color:transparent; overflow-x:hidden; overflow-y:auto; will-change:scroll-position; -webkit-overflow-scrolling:auto;}
 /* @media all and (min-width:375px) {
 
 } */
 /* ### allnavbar */
 .all-nav {overflow: hidden; display: flex; flex-direction:column; justify-content: flex-start; position:relative; height:100%; color:#0e0e19; font-size:44px; line-height:1.3; font-weight: 400; letter-spacing:-0.48px; text-transform: capitalize; overflow-x:hidden; overflow-y:auto; will-change:scroll-position; -webkit-overflow-scrolling:auto;}
 .all-nav .nav {display:flex; align-items:center; justify-content: center; flex-direction: column; flex-grow: 1; flex-shrink: 0; position:relative; width: 100%; padding:var(--t-gnb-height) var(--t-all-nav-padding-side) 0;}
 /* .all-nav .nav::before {display:block; content:""; position:absolute; top:0; bottom:0; left:0; width:170px; background-color:rgba(255, 255, 255, 0.12);} */
 .all-nav .nav>li {}
 .all-nav .nav>li ~ li {margin-top: 10px;}
 .all-nav .nav>li a {transition:all 0.3s; -webkit-transition:all 0.3s; text-align: center;}
 .all-nav .nav>li a strong {font-weight: bold;}
 .all-nav .nav>li>:first-child,
 .all-nav .nav>li>a {position:relative; z-index:1; display:block; width:100%; padding:14px 20px 13px; color:#000; text-align: center;}
 .all-nav .nav>li:first-child > a {}
 .all-nav .nav>li.on>a {width:100%; color:#ea4c4c; /*font-weight:bold;*/}
 .all-nav .nav>.toggle-line>a>span:first-child {position: relative; display: inline-block; /*background-color: #fff;*/ padding: 0 5px 0 10px;}
 .all-nav .nav>.toggle-line.on>a>span:first-child {display: inline-block; /*background-color: #fff;*/ padding: 0 10px;}

 .all-nav .nav>li.toggle-line>a::before { content: ''; height: 1px; width: 0; background: currentColor; z-index: -1; position: absolute; top: 50%; left: 50%; transform: translateX(-50%); transition: width 0.5s; transform-origin: 0% 50%;}
 .all-nav .nav>li.toggle-line.on>a::before {width: 88vw;}
 /* .all-nav .nav>li.on>a::before { transform: scaleX(0); transform-origin: 100% 50%;} */
 .all-nav .nav>.toggle-line>a>span:first-child::before { content: ''; height: 3px; background: #fff; z-index: -1; position: absolute; top: 50%; left: 0; right: -30px; transform: translateY(-50%);  }


 
 .all-nav .nav>li>ul {display:none; position:relative; top:0; left:0; right:0;}
 /* .all-nav .nav>li>ul::after {display:block; content:""; position:absolute; top:0; bottom:0; left:-160px; width:120px; background-color:#f7f7f7;} */
 .all-nav .nav>li:nth-child(2)>ul {top:0;}
 /* .all-nav .nav>li.on>ul {display:block;} */ /* used slideUp and slideDown */
 
 .all-nav .nav>li>ul>li {}
 .all-nav .nav>li>ul>li>a {position:relative; display:block; padding:7px 0 6px 0; margin: 2px 0; font-size: 20px; color:#0e0e19; /*border-bottom:1px solid #ebebeb;*/}
 .all-nav .nav>li>ul>li>a.open,
 .all-nav .nav>li>ul>li>a.open:focus {color:#0e0e19; font-weight:500;}
 .all-nav .nav>li>ul>li>a.on,
 .all-nav .nav>li>ul>li>a.on:focus {color:#ea4c4c; background: #faeeee; border-radius: 6px;}
 .all-nav .nav>li>ul>li>a::before {visibility:hidden; display:inline-block; content:""; position:absolute; bottom:-1px; left:0; width:100%; height:1px; line-height:0; font-size:0; background: #f7f7f7;; width:0; -webkit-transition:all 0.3s; transition:all 0.3s;}
 .all-nav .nav>li>ul>li>a.open::before, .all-nav .nav>li>ul>li>a.open:focus::before {visibility:visible; width:100%;}
 
 .all-nav .nav>li>ul>li.toggle>a.open,
 .all-nav .nav>li>ul>li.toggle>a.open:focus {color:#0e0e19; font-weight:normal;}
 .all-nav .nav>li>ul>li.toggle>a::before {display:block; content:""; position:absolute; left:0; right:0; top:auto; bottom:-1px; width:100%; height:1px; background:#ebebeb;}
 .all-nav .nav>li>ul>li.toggle>a::after {display:inline-block; content:""; position:absolute; top:50%; right:18px; width:16px; height:16px; margin:-8px 0 0 -8px; /*background:url() 50% 50% no-repeat;*/ background-size:26px auto; transition:all 0.2s ease-in-out; opacity:.6;}
 .all-nav .nav>li>ul>li.toggle>a.open::before {background:#bcbccc;}
 .all-nav .nav>li>ul>li.toggle>a.open::after {-webkit-transform:rotate(180deg); transform:rotate(180deg); opacity:1;}
 
 .all-nav .nav>li>ul>li>ul {display:none; padding:15px 0 15px 0;}
 /* .all-nav .nav>li>ul>li>a.open + ul {display:block;} */
 
 .all-nav .nav>li>ul>li>ul li>a {position:relative; display:block; padding:10px 10px; font-size:14px;}
 .all-nav .nav>li>ul>li>ul li>a::before {display:inline-block; content:""; position:absolute; left:0; top:19px; width:2px; height:2px; background:#0e0e19; opacity:.4;}
 .all-nav .nav>li>ul>li>ul li>a.open, .all-nav .nav>li>ul>li>ul li>a:focus {color:#ea4c4c;}
 .all-nav .nav>li>ul>li>ul li>a.open::before, .all-nav .nav>li>ul>li>ul li>a:focus::before {background:#ea4c4c;}
 
 .all-nav .nav>li>ul>li>ul ul {padding:5px 0 5px 10px;}
 .all-nav .all-nav-btn {min-height: 20%; display:flex; align-items:center; justify-content: center; font-size: 14px; opacity: 0;}
 .k-snb.active > .k-snb-content .all-nav .all-nav-btn {animation:all-nav-btn-ani 0.3s 0.2s ease-in-out forwards;}
 .k-snb.active.inactive > .k-snb-content .all-nav .all-nav-btn .t-btn {color: #000; background-color: rgba(255,255,255, 0.5);}
 @keyframes all-nav-btn-ani {
     from {transform:translate(0%, 100%);opacity:0}
     to {transform:translate(0%, 0%);opacity:1}
 }
 
 @media screen and (max-width: 767px) {
     .all-nav {font-size:32px;}
     .all-nav .nav>li ~ li {margin-top: 5px;}
 }

.all-nav .nav>li>a .toggle-icon {/*background-color: #fff;*/ width:22px; /*border-right: 10px solid #fff;*/ right:0; /*position: static; vertical-align: -14px; margin-left: 8px;*/}
/* .all-nav .nav>li.open>a {} */
.all-nav .nav>li.on>a .toggle-icon::before {background-color: #7e2dc5;}
.all-nav .nav>li.on>a .toggle-icon::after {background-color: #3e884f;}
.all-nav .nav>li.open>a .toggle-icon::before {background-color: #ea4c4c; transform: translateX(-31%) rotate(-48deg);}
.all-nav .nav>li.open>a .toggle-icon::after {background-color: #ea4c4c; transform: translateX(31%) rotate(48deg);}


/* 아바타 버튼 */
.toolbar-user-avatar {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-color: #eee;
    border-radius: 50%;
}
.toolbar-user-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #d0bcff;
    /* box-shadow: inset 0 0.1rem 1rem 0 rgba(0, 0, 0, 0.03); */
}
/* .toolbar-user-avatar > img {} */

/* 범용 최상위 부모 컨테이너 */
.overlaylayer {
    position: relative;
    display: flex;
}

/* 유저 아바타뿐만 아니라 일반 버튼, 텍스트 등 모든 유발체(.menu) */
.overlaylayer .menu {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

/* 팝오버 기본 형태 (Y축 셰이드 + 오파시티 융합) */
.overlaylayer .list {
    display: none; 
    --overlaylayer-width: 200px;
    z-index: 100;
    min-width: var(--overlaylayer-width);
    left: 50%;
    position: absolute;
    top: 100%; /* 호출 버튼 바로 아래 배치되도록 100%로 범용화 */
    margin-top: 8px; /* 디테일 유격 유지 */
    background: #fff;
    border-radius: 10px;
    border: 1px solid rgba(231, 231, 233, 0.5);
    box-shadow: 0px 15px 50px 0px rgba(27, 32, 50, 0.1);
    /* box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); */
    
    /* 애니메이션 초기화 */
    opacity: 0;
    transform: translateX(-50%) scaleY(0.7);
    transform-origin: top center; 
    transition: 
        opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1), 
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 트랜지션 액션 클래스 */
.overlaylayer .list.show {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
}

/* 말풍선 삼각형 */
.overlaylayer .list .triangle {
    position: absolute;
    top: -6px;
    left: 50%;
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid rgba(231, 231, 233, 0.5); /* 레이어 테두리와 두께/색상 일치 */
    border-top: 1px solid rgba(231, 231, 233, 0.5);
    transform: translateX(-50%) rotate(45deg);
    transition: background 0.15s ease; 
}
 /* 첫 번째 항목 호버 시 적용되는 회색 배경색과 동일하게 맞춰주세요 */
/* .overlaylayer .list nav a:first-child:hover ~ .triangle,
.overlaylayer .list nav button:first-child:hover ~ .triangle {
    background: #f4f4f5;
} */
/* nav의 첫 번째 자식(button이든 a든)에 호버가 감지되면, 그 안의 .triangle을 바꿔라 */
.overlaylayer .list nav:has(*:first-child:hover) .triangle {
    background: #f4f4f5;
}

/* 하위 메뉴 내부 버튼 기본 스타일 제한 */
.overlaylayer .list nav button,
.overlaylayer .list nav a {
    display: block;
    width: 100%;
    padding: 11px 16px;
    text-align: left;
    background: none;
    border: none;
    font-size: 14px;
    color: #3f3f46;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: background-color 0.1s ease;
}

.overlaylayer .list nav button:first-of-type,
.overlaylayer .list nav a:first-of-type {
    border-radius: 9px 9px 0 0;
}
.overlaylayer .list nav button:last-of-type,
.overlaylayer .list nav a:last-of-type {
    border-radius: 0 0 9px 9px;
}
.overlaylayer .list nav button:hover,
.overlaylayer .list nav a:hover {
    background-color: #f4f4f5;
    color: #18181b;
}