@charset 'utf-8';

.header {position: relative; z-index: 99; display: flex; justify-content: center; align-items: center; background: #fff; height: 40px; width: 100%; padding: 0 3vw; box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px; }
.header-inner {height: 100%; max-width: 1280px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
/*.navBlank {height: 40px;}*/

.home {display: flex; align-items: center; justify-content: center; width: 60px; margin: 0 2rem;}
.home-img {width: 100%; height: 100%; object-fit: cover;}

.nav-depth0 {display: flex; align-items: center; height: 100%;}
.nav-depth0-item {height: 100%; position: relative; padding: 0.5rem 1.25rem; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.nav-depth0-link {display: flex; align-items: center; justify-content: center; gap: 0.25rem;}
.nav-depth0-link-txt {font-size: 0.875rem; color: #000;}
.nav-depth0-link-ico {width: 0.875rem; height: 0.875rem; transition: all 0.3s ease-in-out; }
.nav-depth0-link-ico svg {width: 100%; height: 100%;}

.nav-depth1 {background: #fff; display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;}
.nav-depth1-item {position: relative;}
.nav-depth1-link {display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0.5rem 1rem; gap: 0.25rem;}
.nav-depth1-link-txt {font-size: 0.875rem; color: #000;}
.nav-depth1-link-ico {width: 0.875rem; height: 0.875rem; padding: 0.125rem;}
.nav-depth1-link-ico svg {width: 100%; height: 100%;}

.nav-depth2 {background: #fff; display: none; position: absolute; top: 0; left: 100%; box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;}
.nav-depth2-item {}
.nav-depth2-link {display: flex; align-items: center; justify-content: center; white-space: nowrap; padding: 0.5rem 1rem;}
.nav-depth2-link-txt {font-size: 0.875rem; color: #000;}

.nav-depth0-item:hover .nav-depth0-link-ico {transform: rotateX(180deg);}
.nav-depth0-item:hover .nav-depth1 {display: flex; flex-direction: column; }
.nav-depth1-item:hover .nav-depth2 {display: flex; flex-direction: column;}
.nav-depth1-item:hover {background: #ffcf06;}
.nav-depth1-item:hover .nav-depth1-link-txt {}
.nav-depth1-item:hover .nav-depth1-link-ico {}
.nav-depth2-item:hover {background: #ffcf06;}
.nav-depth2-item:hover .nav-depth2-link-txt {}

.nav-ellipsis {}
.nav-ellipsis-ico {cursor: pointer; width: 1.5rem; height: 1.5rem; border-radius: 10rem; display: flex; align-items: center; justify-content: center;}
.nav-ellipsis-ico svg {width: 100%; height: 100%;}

.header-actions {padding: 0 2rem; border-left: 1px solid #ddd; display: flex; align-items: center; gap: 1rem;}
.cafe-link {display: flex; align-items: center; justify-content: center; background: #ffcf06; color: #000; font-size: 0.875rem; font-weight: 600; padding: 0.25rem 1rem; border-radius: 10rem;}
.menu-toggle {display: none; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;}
.menu-toggle svg {width: 100%; height: 100%;}


/* 모바일 메뉴 */
.mobile-nav {position: fixed; inset: 0; z-index: 999; background: #fff; margin: 0; padding: 0; display: none; flex-direction: column; }
.mobile-nav.on {display: flex;}
.mobile-nav-top {z-index: 1; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 3vw; border-bottom: 1px solid #ddd;}
.mobile-nav-img {width: 60px;}
.mobile-nav-img img {width: 100%;}
.mobile-nav-close {display: flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem;}
.mobile-nav-close svg {width: 100%; height: 100%;}

.mobile-nav-scroll {flex: 1; overflow: auto;}
.mobile-nav-depth0 {display: flex; flex-direction: column; align-items: center; background: #fff; border-bottom: 1px solid #eee; }
.mobile-nav-depth0-item {height: 100%; width: 100%; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; border-bottom: 1px solid #eee;}
.mobile-nav-depth0-trigger {width: 100%; padding: 0.5rem 1.25rem; display: flex; justify-content: space-between; align-items: center;}
.mobile-nav-depth0-item.on .mobile-nav-depth0-trigger {background: #f5f5f5;}
.mobile-nav-depth0-item:hover .mobile-nav-depth0-trigger {background: #f5f5f5;}
.mobile-nav-depth0-link {display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; font-size: 0.875rem; color: #1C1C1A; font-weight: 600;}
.mobile-nav-depth0-ico {width: 0.875rem; height: 0.875rem; transition: all 0.3s ease-in-out; }
.mobile-nav-depth0-ico svg {width: 100%; height: 100%; fill: #1C1C1A;}
.mobile-nav-depth0-item.on .mobile-nav-depth0-ico {transform: rotateX(180deg);}

.mobile-nav-depth1 {position: relative; display: flex; flex-direction: column; align-items: start; width: 100%; height: 0; overflow: hidden; background: #fff;}
.mobile-nav-depth1.on {height: 100%;}
.mobile-nav-depth1-item {width: 100%; height: 100%; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: start; justify-content: center;}
.mobile-nav-depth1-item.on {background: #FBF3E6;}
.mobile-nav-depth1-trigger {position: relative; width: 100%; box-sizing: border-box; padding: 0.5rem 1.25rem; display: flex; justify-content: space-between; align-items: center; }
.mobile-nav-depth1-item.on .mobile-nav-depth1-trigger {background: #FBF3E6}
.mobile-nav-depth1-item.on .mobile-nav-depth1-trigger::before {content: ''; position: absolute; left:0; top: 0; bottom: 0; width: 2px; background:#8A5A12;}
.mobile-nav-depth1-item.on .mobile-nav-depth1-link {color: #8A5A12;}
.mobile-nav-depth1-item:hover .mobile-nav-depth1-trigger {background: #FBF3E6}
.mobile-nav-depth1-item:hover .mobile-nav-depth1-trigger::before {content: ''; position: absolute; left:0; top: 0; bottom: 0; width: 2px; background:#8A5A12;}
.mobile-nav-depth1-item:hover .mobile-nav-depth1-link {color: #8A5A12;}
.mobile-nav-depth1-link {display: flex; align-items: center; gap: 0.25rem; font-size: 0.875rem; color: #5A5B56; font-weight: 500;}
.mobile-nav-depth1-link-ico {width: 0.875rem; height: 0.875rem; transition: all 0.3s ease-in-out; }
.mobile-nav-depth1-link-ico svg {width: 100%; height: 100%; fill: #5A5B56;}
.mobile-nav-depth1-item.on .mobile-nav-depth1-link-ico {transform: rotateX(180deg);}

.mobile-nav-depth2 {display: flex; flex-wrap: wrap; align-items: center; height: 0; overflow: hidden; padding: 0; gap: 0.5rem; }
.mobile-nav-depth2.on {height: 100%; padding: 0.5rem 1.25rem;}
.mobile-nav-depth2-item {height: 100%; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.mobile-nav-depth2-trigger {padding: 0.25rem 1rem; border-radius: 10rem; background: #fff; border: 1px solid #E6E5E0;}
.mobile-nav-depth2-trigger:hover {background: #ccc;}
.mobile-nav-depth2-link {display: flex; align-items: center; justify-content: center; gap: 0.25rem; font-size: 0.875rem; color: #5A5B56; font-weight: 400;}
/*.mobile-nav-depth2-link-ico {width: 0.875rem; height: 0.875rem; transition: all 0.3s ease-in-out; }*/
/*.mobile-nav-depth2-link-ico svg {width: 100%; height: 100%;}*/


.w-100 {width: 100%;}

/* 미디어 쿼리 */
@media (max-width: 1280px) {
	.menu-toggle {display: flex;}
	.header {padding: 0 3vw;}
	.home {margin: 0;}
	.nav-depth0 {display: none;}
	.header-actions {border: none; padding: 0;}
}