@charset "utf-8";

/* Header */
header { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: auto; transition: .3s ease-out; }
header .header-inner { display: flex; flex-direction: column; position: relative; width: 96%; max-width: 1600px; padding-top: 32px; padding-bottom: 26px; margin-inline: auto; transition: all .3s ease-in-out; }
header.scroll { background-color: rgba(0, 0, 0, 0.95); }

/* Header top */
header .header-top { display: flex; align-items: center; justify-content: space-between; height: 52px; }
header .logo { display: block; flex-shrink: 0; width: 219px; height: 6rem; margin: 0; }
header .logo a { display: block; width: 100%; height: 100%; }
header .logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
header .header-utils { display: flex; align-items: center; flex-shrink: 0; gap: 12px; }
header .header-auth { display: flex; align-items: center; gap: 1.8rem; margin-right: 1.6rem; }
header .btn-auth { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font-family: var(--font-family-suit); font-size: 1.4rem; font-weight: 300; line-height: 1; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; transition: opacity .3s ease-out, background-color .3s ease-out, color .3s ease-out; }
header .btn-auth:hover { opacity: 0.75; }
header .btn-auth-icon { display: block; flex-shrink: 0; width: 18px; height: 18px; object-fit: contain; }
header .btn-srch { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .3s ease-out; }
header .btn-srch:hover { opacity: 0.7; }
header .btn-srch img { display: block; width: 100%; height: 100%; }

/* Header search overlay */
.header-search-wrap { visibility: hidden; opacity: 0; position: fixed; inset: 0; z-index: 300; background-color: var(--main-black); transition: opacity .3s ease, visibility .3s ease; }
.header-search-wrap.is-open { visibility: visible; opacity: 1; }
.header-search-panel { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; padding: 2.4rem; box-sizing: border-box; }
.header-search-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 3.2rem; right: 3.2rem; width: 4rem; height: 4rem; padding: 0; border: 0; background: transparent; cursor: pointer; }
.header-search-close span { position: absolute; width: 2.4rem; height: 0.1rem; background-color: #fff; transition: opacity .2s ease; }
.header-search-close span:nth-child(1) { transform: rotate(45deg); }
.header-search-close span:nth-child(2) { transform: rotate(-45deg); }
.header-search-close:hover span { opacity: 0.7; }
.header-search-form { display: flex; align-items: flex-end; gap: 1.2rem; width: 100%; max-width: 80rem; padding: 0 2rem; box-sizing: border-box; }
.header-search-input { flex: 1; min-width: 0; height: 7.2rem; padding: 0 0 0.4rem; border: 0; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.35); background: transparent; font-size: var(--fs-24); font-weight: 400; line-height: 1; color: #fff; }
.header-search-input::placeholder { color: rgba(255, 255, 255, 0.55); }
.header-search-input:focus { outline: none; }
.header-search-submit { flex-shrink: 0; height: 7.2rem; padding: 0 2.4rem; border: 0; background: var(--key-color); font-size: var(--fs-20); font-weight: 500; line-height: 1; color: #fff; white-space: nowrap; cursor: pointer; transition: opacity .2s ease; }
.header-search-submit:hover { opacity: 0.85; }

@media screen and (max-width:768px){
	header .header-inner { padding: 1.6rem 2.4rem; }
	header .header-top { height: auto; min-height: 4rem; }
	header .logo { width: 16rem; }
	header .header-utils { gap: 0.8rem; }
	header .header-auth { gap: 1.2rem; margin-right: 1rem; }
	header .btn-auth { font-size: 1.3rem; font-weight: 300; gap: 0.4rem; }
	header .btn-auth-icon { width: 1.6rem; height: 1.6rem; }
	header .btn-srch,
	header .header-utils .ham-btn { width: 3.2rem; height: 3.2rem; }
	header .header-utils .ham-btn p { width: 2.4rem; height: 1.6rem; }
	.header-search-close { top: 2.4rem; right: 2.4rem; width: 3.2rem; height: 3.2rem; }
	.header-search-close span { width: 2rem; }
	.header-search-form { flex-direction: column; align-items: stretch; gap: 1.2rem; max-width: 100%; padding: 0; }
	.header-search-input { height: 5.6rem; padding: 0 0 1.2rem; font-size: var(--fs-20); }
	.header-search-submit { height: 5.6rem; }
}

@media screen and (max-width:500px){
	header .header-inner { padding: 1.6rem 1.6rem; }
	header .logo { width: 14rem; }
	.header-search-panel { padding: 1.6rem; }
	.header-search-close { top: 1.6rem; right: 1.6rem; }
	.header-search-input { font-size: var(--fs-18); }
	.header-search-submit { font-size: var(--fs-18); }
}

/* Ham button */
header .header-utils .ham-btn { display: flex; align-items: center; justify-content: center; position: relative; top: auto; right: auto; width: 40px; height: 40px; border-radius: 0; transition: all .3s ease-in-out; cursor: pointer; }
header .header-utils .ham-btn:hover { background-color: transparent; opacity: 0.7; }
header .header-utils .ham-btn p { position: relative; width: 32px; height: 22px; }
header .header-utils .ham-btn span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #fff; transition: .3s ease-out; }
header .header-utils .ham-btn span:nth-child(1) { top: 0; }
header .header-utils .ham-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); background-color: #e8b460; }
header .header-utils .ham-btn span:nth-child(3) { bottom: 0; }
header .header-utils .ham-btn span:nth-child(4) { display: none; }

/* Header nav */
header .header-nav-area { overflow: visible; position: relative; padding-top: 26px; transition: padding-bottom .4s cubic-bezier(0.22, 1, 0.36, 1); }
header .header-nav-area::before { display: block; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.5); content: ''; }
header .header-nav { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 20px; }
header:has(#gnb-wrap .gnb > ul > li:hover .menu-two-depth-wrap) .header-nav-area,
header:has(#gnb-wrap .gnb > ul > li:focus-within .menu-two-depth-wrap) .header-nav-area { padding-bottom: 70px; }

/* GNB */
#gnb-wrap { flex: 1; min-width: 0; color: #fff; }
#container:has(#contents.main) .header-nav-area { display: none; }
#container:has(#contents.sub) .header-nav-area { display: block; }
#gnb-wrap a { color: #fff; }
#gnb-wrap .gnb > ul { display: flex; align-items: center; flex-wrap: wrap; column-gap: 56px; row-gap: 0; counter-reset: gnb-num; }
#gnb-wrap .gnb > ul > li { position: relative; color: #fff; }
#gnb-wrap .gnb > ul > li > a { display: inline-flex; align-items: center; gap: 2px; position: relative; font-family: var(--font-family-ridi); font-size: 1.8rem; font-weight: 400; line-height: 1; color: #fff; white-space: nowrap; transition: color .3s ease-out; }
#gnb-wrap .gnb > ul > li > a::before { counter-increment: gnb-num; content: counter(gnb-num, decimal-leading-zero) "."; color: inherit; }
#gnb-wrap .gnb > ul > li:has(.menu-two-depth-wrap):hover::before,
#gnb-wrap .gnb > ul > li:has(.menu-two-depth-wrap):focus-within::before { content: ''; position: absolute; top: 100%; left: 0; z-index: 1; width: max(100%, 240px); height: 28px; }
#gnb-wrap .gnb > ul > li:has(.menu-two-depth-wrap)::after { content: ''; opacity: 0; position: absolute; top: calc(100% + 12px); left: 50%; z-index: 2; width: 4px; height: 4px; background: pink; border-radius: 50%; transform: translateX(-50%); pointer-events: none; transition: opacity .35s ease; }
#gnb-wrap .gnb > ul > li:has(.menu-two-depth-wrap):hover::after,
#gnb-wrap .gnb > ul > li:has(.menu-two-depth-wrap):focus-within::after { opacity: 1; }
#gnb-wrap .gnb > ul > li:hover > a,
#gnb-wrap .gnb > ul > li:focus-within > a,
#gnb-wrap .gnb > ul > li.active > a { color: #e8b460; }
#gnb-wrap .menu-img-wrap,
#gnb-wrap .menu-text-wrap { display: none; }
#gnb-wrap .menu-two-depth-wrap { display: flex; align-items: center; overflow: hidden; opacity: 0; position: absolute; top: calc(100% + 28px); left: 0; z-index: 3; width: max-content; max-width: calc(100vw - 64px); max-height: 0; padding: 0 20px; background: rgba(255, 255, 255, 0.12); pointer-events: none; transition: max-height .45s cubic-bezier(0.22, 1, 0.36, 1), opacity .35s ease, padding .45s cubic-bezier(0.22, 1, 0.36, 1); }
#gnb-wrap .menu-two-depth-wrap::before { content: ''; position: absolute; top: -28px; left: 0; width: 100%; height: 28px; }
#gnb-wrap .gnb > ul > li:hover .menu-two-depth-wrap,
#gnb-wrap .gnb > ul > li:focus-within .menu-two-depth-wrap { max-height: 80px; padding: 12px 20px 13px; opacity: 1; pointer-events: auto; }
#gnb-wrap .menu-two-depth { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
#gnb-wrap .menu-two-depth > li { display: flex; align-items: center; gap: 20px; }
#gnb-wrap .menu-two-depth > li:not(:last-child)::after { content: ""; flex-shrink: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--key-color); }
#gnb-wrap .menu-two-depth > li > a { padding: 0; font-family: var(--font-family-suit); font-size: 1.6rem; font-weight: 400; line-height: 1; color: rgba(255, 255, 255, 0.8); white-space: nowrap; opacity: 1; transition: color .3s ease-out, font-weight .3s ease-out; }
#gnb-wrap .menu-two-depth > li:hover > a { font-weight: 500; color: #fff; }

/* GNB quick links (5~7번 메뉴) */
#gnb-wrap .gnb > ul > li:nth-child(5) { margin-left: auto; }
#gnb-wrap .gnb > ul > li:nth-child(n+5) { flex-shrink: 0; }
#gnb-wrap .gnb > ul > li:nth-child(n+5)::before,
#gnb-wrap .gnb > ul > li:nth-child(n+5)::after { display: none; }
#gnb-wrap .gnb > ul > li:nth-child(n+5) .menu-two-depth-wrap { display: none !important; }
#gnb-wrap .gnb > ul > li:nth-child(n+5) > a { gap: 8px; font-family: 'Georgia', 'Noto Serif KR', serif; font-size: 1.7rem; font-weight: 400; }
#gnb-wrap .gnb > ul > li:nth-child(n+5) > a::before { counter-increment: none; content: ''; flex-shrink: 0; width: 17px; height: 17px; background-repeat: no-repeat; background-position: center; background-size: contain; }
#gnb-wrap .gnb > ul > li:nth-child(5) > a::before { background-image: url("/resources/img/common/gnb_quick_ico1.svg"); }
#gnb-wrap .gnb > ul > li:nth-child(6) > a::before { background-image: url("/resources/img/common/gnb_quick_ico2.svg"); }
#gnb-wrap .gnb > ul > li:nth-child(7) > a::before { background-image: url("/resources/img/common/gnb_quick_ico3.svg"); }
#gnb-wrap .gnb > ul > li:nth-child(n+5):hover > a,
#gnb-wrap .gnb > ul > li:nth-child(n+5):focus-within > a { color: #e8b460; }

@media screen and (max-width:1440px){
	#gnb-wrap .gnb > ul { column-gap: 4rem; }
	#gnb-wrap .gnb > ul > li:nth-child(n+5) > a { font-size: var(--fs-16); }
}

@media screen and (max-width:1280px){
	#gnb-wrap .gnb > ul { column-gap: 3.2rem; }
	header .header-inner { width: 96%; padding-top: 2rem; padding-bottom: 2rem; }
	header .logo { width: 18rem; height: auto; aspect-ratio: 219 / 52; }
	header .header-nav-area { display: none; }
}

/* Mobile menu common */
.mobile-menu-wrap { visibility: hidden; opacity: 0; position: fixed; z-index: 100; inset: 0; background: transparent; transition: .3s ease; }
.mobile-menu-wrap::after { visibility: hidden; content: ''; position: absolute; z-index: -1; inset: 0; background-color: rgba(0, 0, 0, 0.6); transition: opacity 0.7s linear; pointer-events: none; }
.mobile-menu-wrap .mobile-menu { transition: .3s ease-out; }
.mobile-menu-wrap .mobile-top-box { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1280px; min-height: 14rem; height: auto; margin-inline: auto; padding: 6.4rem 0 2.4rem; }
.mobile-menu-wrap .mobile-top-box .ham-btn { display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; top: 0; right: -1.2rem; width: 50px; aspect-ratio: 1/1; border-radius: 8px; cursor: pointer; }
.mobile-menu-wrap .mobile-top-box .ham-btn p { position: relative; width: 52%; aspect-ratio: 1/1; }
.mobile-menu-wrap .mobile-top-box .ham-btn span { position: absolute; width: 100%; height: 2px; background-color: white; transition: .3s ease-out; }
.mobile-menu-wrap .mobile-top-box .ham-btn span:nth-child(1) { top: 50%; right: 50%; transform: translate(50%, -50%) rotate(45deg); }
.mobile-menu-wrap .mobile-top-box .ham-btn span:nth-child(2) { top: 50%; right: 50%; transform: translate(50%, -50%) rotate(-45deg); background-color: white; }
.mobile-menu-wrap .mobile-top-box .ham-btn span:nth-child(3) { display: none; }
.mobile-menu-wrap .mobile-top-box .mobile-logo { height: 6rem; }
.mobile-menu-wrap .mobile-top-box .mobile-logo img { height: 100%; object-fit: contain; }
.mobile-menu-wrap .mobile-img-box { display: none; }
#mobile-gnb-wrap { padding: 4rem; }
#mobile-gnb-wrap .menu-img-wrap { display: none; }
#mobile-gnb-wrap .menu-two-depth { display: none; padding: 1rem 0; }
#mobile-gnb-wrap .menu-two-depth li { margin-top: .5rem; }

/* Mobile menu open */
.mobile-menu-wrap.mobileOn { visibility: visible; opacity: 1; }
.mobile-menu-wrap.mobileOn::after { visibility: visible; opacity: 1; }
.mobile-menu-wrap.mobileOn.mob-half .mobile-menu { transform: translateX(0); }

/* Mobile menu half */
.mobile-menu-wrap.mob-half .mobile-menu { position: absolute; top: 0; left: unset; right: 0; width: 80%; max-width: 600px; height: 100%; background-color: var(--key-color); color: white; transform: translateX(100%); }
.mobile-menu-wrap.mob-half .mobile-menu a { color: white; }
.mobile-menu-wrap.mob-half #mobile-gnb-wrap { height: calc(100vh - 16rem); }
.mobile-menu-wrap.mob-half .gnb { height: 100%; overflow-y: auto; }
.mobile-menu-wrap.mob-half .gnb > ul > li { padding: 3rem 0; opacity: 0.7; transition: .3s ease-out; }
.mobile-menu-wrap.mob-half .gnb > ul > li:hover { opacity: 1; }
.mobile-menu-wrap.mob-half .gnb > ul > li > a { display: block; font-size: var(--fs-28); font-weight: 700; }
.mobile-menu-wrap.mob-half .gnb > ul ul a { display: block; padding: 1rem 2rem; font-size: var(--fs-20); border-radius: 4px; transition: .3s ease-out; }
.mobile-menu-wrap.mob-half .gnb > ul ul a:hover { background: rgba(255, 255, 255, 0.2); }

@media screen and (max-width:768px){
	.mobile-menu-wrap.mob-half .mobile-menu { width: 100%; }
}

/* Mobile menu wide */
.mobile-menu-wrap.mob-wide .mobile-menu { display: flex; flex-direction: column; position: relative; width: 100%; height: 100%; background-color: var(--main-black); color: white; }
.mobile-menu-wrap.mob-wide .mobile-menu a { color: white; }
.mobile-menu-wrap.mob-wide #mobile-gnb-wrap { flex: 1 1 auto; overflow: hidden; width: 100%; max-width: 1280px; min-height: 0; height: auto; margin-inline: auto; padding: 6rem 0 6.4rem; }
.mobile-menu-wrap.mob-wide #mobile-gnb-wrap .menu-two-depth { display: block; }
.mobile-menu-wrap.mob-wide .gnb { height: 100%; overflow-y: auto; }
.mobile-menu-wrap.mob-wide .gnb > ul { display: flex; flex-wrap: wrap; gap: 3.2rem; height: 100%; counter-reset: gnb-num; }
.mobile-menu-wrap.mob-wide .gnb > ul::before { content: ''; order: 2; flex: 0 0 100%; width: 100%; height: 0; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) { order: 1; flex: 0 0 calc((100% - 9.6rem) / 4); padding: 1rem 0; box-sizing: border-box; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) > a { display: flex; align-items: center; gap: 4px; width: 100%; padding: 1rem 0 2rem; border-bottom: 1px solid var(--key-color); font-family: var(--font-family-kopub); font-size: var(--fs-26); font-weight: 700; word-break: keep-all; transition: .3s ease; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) > a::before { flex-shrink: 0; counter-increment: gnb-num; content: counter(gnb-num, decimal-leading-zero) "."; color: inherit; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) { order: 3; flex: 0 0 auto; width: auto; margin-top: 4rem; padding: 0; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) .menu-two-depth-wrap,
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) .menu-two-depth { display: none !important; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) > a { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0; border-bottom: 0; font-family: 'Georgia', 'Noto Serif KR', serif; font-size: var(--fs-22); font-weight: 400; line-height: 1; white-space: nowrap; transition: color .3s ease-out; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) > a::before { counter-increment: none; content: ''; flex-shrink: 0; width: 17px; height: 17px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(5) > a::before { background-image: url("/resources/img/common/gnb_quick_ico1.svg"); }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(6) > a::before { background-image: url("/resources/img/common/gnb_quick_ico2.svg"); }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(7) > a::before { background-image: url("/resources/img/common/gnb_quick_ico3.svg"); }
.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5):hover > a { color: #e8b460; }
.mobile-menu-wrap.mob-wide .gnb > ul ul a { display: block; padding: .6rem 1.2rem; font-size: var(--fs-20); line-height: 1.4; border-radius: 4px; transition: .3s ease-out; }
.mobile-menu-wrap.mob-wide .gnb > ul ul a:hover { background: rgba(255, 255, 255, 0.2); }

@media screen and (max-width:1400px){
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) { flex: 0 0 calc((100% - 6.4rem) / 3); }
}

@media screen and (max-width:1024px){
	.mobile-menu-wrap .mobile-top-box { min-height: 12rem; padding: 4.8rem 3.2rem 2rem; }
	.mobile-menu-wrap.mob-wide #mobile-gnb-wrap { padding: 4rem 3.2rem 4.8rem; }
	.mobile-menu-wrap.mob-wide .gnb > ul { gap: 2.4rem; }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) { flex: 0 0 calc((100% - 2.4rem) / 2); }
}

@media screen and (max-width:768px){
	.mobile-menu-wrap .mobile-top-box { min-height: 10rem; padding: 3.2rem 2.4rem 1.6rem; }
	.mobile-menu-wrap.mob-wide #mobile-gnb-wrap { width: 100%; padding: 2.4rem 2.4rem 4rem; }
	.mobile-menu-wrap.mob-wide .mobile-menu { width: 100%; }
	.mobile-menu-wrap.mob-wide .gnb > ul { gap: 2rem; }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) { flex: 0 0 100%; }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) > a { padding: 0.8rem 0 1.6rem; font-size: var(--fs-24); }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) { gap: 2rem; margin-top: 3.2rem; }
}

@media screen and (max-width:500px){
	.mobile-menu-wrap .mobile-top-box { min-height: 9rem; padding: 2.4rem 1.6rem 1.2rem; }
	.mobile-menu-wrap.mob-wide #mobile-gnb-wrap { padding: 2rem 1.6rem 3.2rem; }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(-n+4) > a { font-size: var(--fs-22); }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) { flex: 0 0 100%; margin-top: 2rem; }
	.mobile-menu-wrap.mob-wide .gnb > ul > li:nth-child(n+5) > a { font-size: var(--fs-22); }
}

/* Mobile menu modal */
.mobile-menu-wrap.mob-modal .mobile-menu { position: absolute; top: 50%; left: 50%; width: 96%; max-width: 1280px; background-color: #fff; border-radius: 30px; overflow: hidden; transform: translate(-50%, -50%); }
.mobile-menu-wrap.mob-modal #mobile-gnb-wrap { height: 60vh; padding: 0; }
.mobile-menu-wrap.mob-modal #mobile-gnb-wrap .menu-two-depth { display: block; }
.mobile-menu-wrap.mob-modal .mobile-top-box { background-color: var(--main-black); }
.mobile-menu-wrap.mob-modal .gnb { height: 100%; }
.mobile-menu-wrap.mob-modal .gnb > ul { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 100%; height: 100%; }
.mobile-menu-wrap.mob-modal .gnb > ul > li { display: block; width: calc(100% / 4); padding: 6rem 0; text-align: center; transition: .3s ease-out; }
.mobile-menu-wrap.mob-modal .gnb > ul > li:hover { background: #F5F5F5; }
.mobile-menu-wrap.mob-modal .gnb > ul > li > a { display: block; font-size: var(--fs-26); font-weight: 600; transition: .3s ease; }
.mobile-menu-wrap.mob-modal .gnb > ul ul { margin-top: 2rem; }
.mobile-menu-wrap.mob-modal .gnb > ul ul a { display: block; padding: 10px; font-size: 18px; }
.mobile-menu-wrap.mob-modal .gnb > ul ul a:hover { text-decoration: underline; }

@media screen and (max-width:768px){
	.mobile-menu-wrap.mob-modal .mobile-menu { position: absolute; top: 0; left: 50%; width: 100%; height: 100%; border-radius: 0; transform: translate(-50%, 0); }
	.mobile-menu-wrap.mob-modal .gnb { height: calc(100vh - 67px); max-height: none; background-size: 50%; }
	.mobile-menu-wrap.mob-modal .gnb > ul { flex-direction: column; }
	.mobile-menu-wrap.mob-modal .gnb > ul > li { display: block; float: unset; width: 100%; margin: 0; text-align: left; }
	.mobile-menu-wrap.mob-modal .gnb > ul > li > a { position: relative; height: auto; padding: 25px 30px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); line-height: 1.2; box-sizing: border-box; }
	.mobile-menu-wrap.mob-modal .gnb > ul > li > a.open { font-weight: 700; }
	.mobile-menu-wrap.mob-modal .gnb > ul > li > a::before { content: ''; display: inline-block; position: absolute; top: 50%; right: 20px; width: 0; height: 0; border-top: 10px solid #ddd; border-right: 7px solid transparent; border-left: 7px solid transparent; transform: translate3d(0, -50%, 0); }
	.mobile-menu-wrap.mob-modal .gnb > ul > li > a.open::before { border-top: 0; border-bottom: 10px solid #4a0553; }
	.mobile-menu-wrap.mob-modal .gnb > ul ul { margin: 0; padding: 10px 0; background: #f9f9f9; }
	.mobile-menu-wrap.mob-modal .gnb > ul ul > li { margin: 0; border-bottom: 1px dashed #e2e2e2; }
	.mobile-menu-wrap.mob-modal .gnb > ul ul > li > a { padding: 18px 30px; font-size: 16px; text-align: left; box-sizing: border-box; }
	.mobile-menu-wrap.mob-modal .gnb > ul ul > li:last-child { border-bottom: 0; }
}

/* Mobile menu image */
.mobile-menu-wrap.mob-img #mobile-gnb-wrap { padding: 0; }
.mobile-menu-wrap.mob-img .gnb { position: absolute; inset: 0; width: 60%; padding: 10% 10% 0; background: #6f6353 url("/resources/img/example/vert_bg00.jpg") center top/cover no-repeat fixed; transition: background-image .5s ease-in-out; }
.mobile-menu-wrap.mob-img .gnb#linum_1 { background-image: url("/resources/img/example/vert_bg01.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_2 { background-image: url("/resources/img/example/vert_bg02.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_3 { background-image: url("/resources/img/example/vert_bg03.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_4 { background-image: url("/resources/img/example/vert_bg04.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_5 { background-image: url("/resources/img/example/vert_bg05.jpg"); }
.mobile-menu-wrap.mob-img .gnb#linum_6 { background-image: url("/resources/img/example/vert_bg06.jpg"); }
.mobile-menu-wrap.mob-img .gnb > ul { width: 100%; text-align: left; }
.mobile-menu-wrap.mob-img .gnb > ul > li { width: 100%; margin: 5px 0 35px; box-sizing: border-box; vertical-align: top; }
.mobile-menu-wrap.mob-img .gnb > ul > li > a { display: inline-block; position: relative; width: 100%; font-size: 32px; font-weight: 600; line-height: 140%; color: #fff; word-break: keep-all; transition: all .3s ease; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul { margin-top: 20px; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul li { display: inline-block; margin-right: 2%; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul li:last-child { margin-right: 0; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul a { display: inline-block; position: relative; padding-left: 5px; font-size: 18px; font-weight: 100; line-height: 140%; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0); word-break: keep-all; transition: all .3s ease-in-out; }
.mobile-menu-wrap.mob-img .gnb > ul > li ul a:hover { border-bottom: 1px solid #fff; }
.mobile-menu-wrap.mob-img .mobile-img-box { display: block; position: absolute; top: 0; right: 0; width: 40%; height: 100%; padding: 10% 5% 5%; background: var(--main-black); color: white; }
.mobile-menu-wrap.mob-img .mobile-img-box a { color: white; }
.mobile-menu-wrap.mob-img .mobile-img-box dl { width: 100%; text-align: right; }
.mobile-menu-wrap.mob-img .mobile-img-box dl dt { font-size: var(--fs-32); }
.mobile-menu-wrap.mob-img .mobile-img-box dl dd { margin-top: 2rem; line-height: 1.6; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle { display: flex; align-items: center; justify-content: center; position: relative; float: right; width: 15.2rem; margin-top: 5rem; aspect-ratio: 1/1; cursor: pointer; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle::before { content: ""; position: absolute; inset: 0; background: url("/resources/img/example/vert_circle.png") no-repeat center/contain; animation: rotate 7s linear infinite; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle span { display: inline-block; font-size: var(--fs-32); transition: all .3s ease-in-out; }
.mobile-menu-wrap.mob-img .mobile-img-box .circle:hover span { transform: translateX(10px); }
@keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } }
.mobile-menu-wrap.mob-img .mobile-img-sns { display: flex; align-items: center; position: absolute; right: 0; bottom: 2rem; width: 100%; padding: 0 2rem; gap: 2rem; }
.mobile-menu-wrap.mob-img .mobile-img-sns::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.5); }
.mobile-menu-wrap.mob-img .mobile-img-buttons { display: flex; gap: 1.2rem; }
.mobile-menu-wrap.mob-img .mobile-img-buttons > a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; opacity: 0.7; filter: saturate(0) brightness(500); transition: all .3s ease-in-out; }
.mobile-menu-wrap.mob-img .mobile-img-buttons > a:hover { opacity: 1; }

@media screen and (max-width:1024px){
	.mobile-menu-wrap.mob-img .mobile-img-box { display: none; }
	.mobile-menu-wrap.mob-img .gnb { width: 100%; padding: 10%; }
	.mobile-menu-wrap.mob-img .gnb::after { content: ''; position: absolute; z-index: -1; inset: 0; background-color: rgba(0, 0, 0, 0.3); }
	.mobile-menu-wrap.mob-img .gnb#linum_1,
	.mobile-menu-wrap.mob-img .gnb#linum_2,
	.mobile-menu-wrap.mob-img .gnb#linum_3,
	.mobile-menu-wrap.mob-img .gnb#linum_4,
	.mobile-menu-wrap.mob-img .gnb#linum_5,
	.mobile-menu-wrap.mob-img .gnb#linum_6 { background-image: url("/resources/img/example/vert_bg01.jpg"); }
}