@charset "utf-8";

/* header */
header {width:100%; position: absolute; top: 0; left: 0; z-index: 9999; background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px); transition: background .3s ease,border-color .3s ease;}
header.scrolled {background:#fff; border-bottom:1px solid #ddd;}

.nav-inner {display: flex; align-items: center; justify-content: space-between; max-width: 1800px; height:100px; margin: 0 auto;}

/* logo */
.logo {flex:0 0 270px; height:100px; display:flex; align-items:center; margin-bottom: 0;}
header .logo img.default {display:inline;}
header .logo img.scrolled_logo {display:none;}
header.scrolled .logo img.default {display: none;}
header.scrolled .logo img.scrolled_logo {display: inline;}

/* gnb */
.menu {flex: 1; display: flex; justify-content: center;}
.main_menu {display: flex; justify-content: space-between; width: 100%; max-width: 1100px; margin: 0 auto;}

.depth1 {position: relative; flex:1 1 0%; text-align:center;}
.depth1 > a {display: flex; align-items:center; justify-content:center; padding:35px 0 38px; color:#fff; font-weight: 500; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.main_menu .depth1 > a span {position:relative;}
.main_menu .depth1 > a span::after {content:''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 0; height: 2px; background:#0054A7; transition: width .3s ease;}
.main_menu .depth1:hover > a span::after {width:100%;}

/* depth2 */
.main_menu .depth1:last-child .depth2 {border-right:1px solid #eee;}

.main_menu .depth2 {width: 100%; min-height: 235px; color:#222; opacity: 0; visibility: hidden; pointer-events: none; padding: 25px 10px; box-sizing: border-box; text-align: center; border-left: 1px solid #eee; transition: opacity .24s ease, visibility 0s; letter-spacing: -1px; background: transparent; z-index: 2;}
.menu:hover .depth2 {opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 1s, 0s;}

.menu .depth2 li a {display: inline-flex; align-items: center; padding: 5px; font-size: 16px; color:#444; font-weight: 400; line-height: 1.3; transition: .3s ease;}
.menu .depth2 li:hover > a {color:#0054A7; font-weight:700;}

/* full background */
header::before{content:''; position: absolute; top: 100px; left: 0; right: 0; width: 100%; height: 0; background:#fff; opacity: 0; z-index: 1; pointer-events: none; transition: height .3s ease, opacity .18s ease; transition-delay: 0s;}

/* utll */
.util-wrap {display: flex; gap: 15px; align-items: center; z-index: 2000; margin: 0;}
.util-wrap li {color: #fff; vertical-align: middle;}
.util-wrap i {font-size: 20px; font-weight: normal; margin-right: 10px;}

.util-user {display: flex; align-items: center; gap: 12px;}
.user-name {font-size: 16px; color: #fff;}
.logout-btn {border: 0; background: none; font-size: 16px; color: #fff; cursor: pointer;}

/* mobile toggle */
.menu_toggle {display:flex; cursor:pointer; z-index:20001; align-items:center; justify-content:center; margin-left: 20px;}
.menu_toggle i {font-size: 32px; line-height:1; color: #fff; font-weight: 400;}
.menu_toggle .icon-close {display:none;}
.menu_toggle.active .icon-open {display:none;}
.menu_toggle.active .icon-close {display:inline; color: #0054A7;}

/* ========== Desktop only ========== */
@media screen and (min-width:1400px){
  header:not(.scrolled):has(.menu:hover) {background:#fff;}
  header:has(.menu:hover)::before {min-height: 235px; opacity: 1; border-top: 1px solid #eee;}
  header.mega-open .main_menu .depth1 .depth2 {opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition-delay:0s,0s,0s;}
  header:not(.scrolled) .menu:hover .depth1 > a {color:#222;}

  header:not(.scrolled):has(.menu:hover) .util-wrap li,
  header:not(.scrolled):has(.menu:hover) .util-wrap .divider,
  header:not(.scrolled):has(.menu:hover) .util-wrap .user-name,
  header:not(.scrolled):has(.menu:hover) .util-wrap .logout-btn {color:#222;}
  
  header:not(.scrolled):has(.menu:hover) .menu_toggle .icon-open {color: var(--brand-color);}

  header:not(.scrolled):has(.menu:hover) .logo img.default{display:none;}
  header:not(.scrolled):has(.menu:hover) .logo img.scrolled_logo{display:inline;}
  header:not(.scrolled):has(.menu:hover) .logo:hover img.default{display:inline;}
  header:not(.scrolled):has(.menu:hover) .logo:hover img.scrolled_logo{display:none;}

  .main_menu .depth1 .depth2 {position:absolute; top:100%; left:0; right:0; z-index:2; opacity:0; visibility:hidden; pointer-events:none; transition: opacity .4s ease, transform .24s ease, visibility 0s linear .4s; transform: translateY(-6px); transition-delay:0s,0s,0s;}
  .menu:hover .depth1 .depth2 {opacity:1; visibility:visible; pointer-events:auto; transform: translateY(0); transition-delay:.1s,.1s,0s; }

  header.mega-open {background:#fff; border-bottom: 1px solid #ddd;}
  header.mega-open::before {min-height: 230px; opacity: 1; border-top: 1px solid #eee;}
  header.mega-open .depth1 > a {color:#222;}

  header.mega-open .depth2 {opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s,0s;}
  
  header.mega-open .util-wrap .user-login, header.mega-open .util-wrap .user-name, header.mega-open .util-wrap .logout-btn {color: #222;}

  header.scrolled .util-wrap .menu_toggle .icon-open {color: var(--brand-color);}
}

/* ========== Tablet tweak ========== */
@media screen and (max-width:1800px){
  .nav-inner {margin: 0 20px;}
}

/* ========== Mobile (<=1024px) ========== */
@media screen and (max-width:1400px){
  html.nav-open, body.nav-open {overflow:hidden;}
  header {position:fixed; width:100%; height:80px;}
  .nav-inner {height:80px;}

  header.scrolled .util-wrap .user-login {color: #222; opacity: 1;}
  header.scrolled .util-wrap .divider {color: #222; opacity: .6;}

  header.scrolled .util-wrap .menu_toggle .icon-open {color: var(--brand-color); opacity: 1;}
  
  .menu_toggle {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;}

  .menu {position: fixed; top: 0; right: 0; width: 70%; height: 100vh; background: #fff; transform: translateX(110%); transition: transform 0.4s ease; z-index: 1500; padding-top: 80px; display: flex; flex-direction: column;}
  .menu.open {transform: translateX(0); box-shadow:-4px 0 10px rgba(0,0,0,.15);}
  .main_menu {display: flex; flex-direction: column; justify-content: flex-start; width: 100%; height: calc(100dvh - 80px)}
  .main_menu > li{width:100%;}
  .main_menu > li>a, .main_menu > li{font-size:16px; text-align:left;}

  .main_menu .depth1 > a span::after {display:none !important;}
  
  .depth1 {border-bottom:1px solid #eee;margin:0; flex: none;}
  .depth1:first-child {border-top:1px solid #eee;}
  .depth1 > a {position:relative; display:flex; align-items:center; justify-content: flex-start; color:#222; padding: 13px 20px;}

  .depth1.has_sub > a {padding-right:40px;}
  .depth1.has_sub > a::before {content:'';position:absolute; right:20px; top:50%;transform:translateY(-50%) rotate(45deg);width:8px;height:8px;border-bottom:2px solid #666;border-right:2px solid #666;transition:transform .3s ease;}
  .depth1.has_sub.active > a::before {transform:translateY(-50%) rotate(-135deg);}

  .menu .depth2 {position:static; width:100%; min-height: auto; background:#f9f9f9; border-top:1px solid #eee; text-align:left; opacity:1 !important; visibility:visible !important; padding: 10px; margin: 0;}
  .menu .depth2 li a {display:block; padding: 10px 20px; color:#333; text-align:left;}

  #menuToggle {transition: background .3s ease;}
  #menuToggle.scrolled .menu_btn {background: var(--brand-color2);}
  .util-wrap i {margin-right: 0;}

  header::before {display:none;}
  
  /*2026.04.29*/
  header.scrolled .util-wrap .user-name,
	header.scrolled .util-wrap .logout-btn,
	header.nav-open .util-wrap .user-name,
	header.nav-open .util-wrap .logout-btn {color:#222; opacity:1;}
	
	header.scrolled .util-wrap .divider,
	header.nav-open .util-wrap .divider {color:#222; opacity:.6;}
}

@media screen and (max-width: 586px){
  .menu_toggle {margin: 0;}
  .util-wrap {gap: 15px;}
  
  /*2026.04.29*/
  .logo {flex: 200px;}
}

@media screen and (max-width: 480px){
  .logo {flex: 0 0 160px;}
  
  .util-wrap li {gap: 5px; word-break: keep-all;}
  .user-name, .logout-btn {font-size: 14px;}
}