@charset "utf-8";

/* header */
header{width:100%;position:absolute;top:0;left:0;z-index:9999;background:rgba(51,51,51,0.8);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;height:100px; padding: 0 60px;}

/* logo */
.logo {flex:0 0 270px; 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 {position:relative ;z-index:2; overflow:visible; display:flex; flex: 1 1 auto; height:100px; justify-content:center; align-items:center;}
.main_menu {position:relative; z-index:2; display:flex; width:100%; max-width:800px; justify-content:space-between; min-width:0;}

.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:#fff; transition:width .3s ease;}
.main_menu .depth1:hover > a span::after {width:100%;}

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

.main_menu .depth2 {width:100%; height:230px; color:#222; opacity: 0; visibility:hidden; pointer-events:none; padding: 25px 10px; box-sizing:border-box; text-align:center; border-left:1px solid #ddd; 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:#52B5D7; 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;}

/* top cta */
.top_bn {display:inline-flex; justify-content: center; align-items:center; flex: 0 0 270px; gap:8px; padding: 10px; background:#007CC3; color:#fff; font-weight:500; border-radius:10px; z-index:10002; font-size:20px;}
.top_bn i{font-size:22px;line-height:1;font-weight:normal;}

/* mobile toggle */
.menu_toggle{display:none; position:absolute; right:20px; top:25px; width:40px; height:30px; cursor:pointer; z-index:20001;}
.menu_btn{display:block;width:40px;height:3px;background:#003365;border-radius:2px;transition:all .3s ease;}
.menu_toggle.active .menu_btn:nth-child(1){transform:rotate(45deg) translate(9px,6px);}
.menu_toggle.active .menu_btn:nth-child(2){opacity:0;}
.menu_toggle.active .menu_btn:nth-child(3){transform:rotate(-45deg) translate(13px,-10px);}

@media screen and (min-width:1025px){
  header:not(.scrolled):has(.menu:hover){background:#007CC3;}
  header:has(.menu:hover)::before{height:230px; opacity:1;}

  .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; }
}

@media screen and (max-width:1240px){
  html.nav-open, body.nav-open {overflow:hidden;}
  header{position:fixed; width:100%; height:80px;}
  header::before {display:none;}

  .nav-inner{height:80px;padding:0 16px;}

  .menu_toggle {display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end;}
  .menu_btn {background:#fff;}
  .top_bn {padding: 10px; margin-right: 50px; font-size: 18px; border-radius:8px;}

  .menu {position: fixed; top: 0; right: 0; width: 60%; height: 100vh; min-height: 0; 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: 100vh; min-height:0;}
  .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%; 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);}

}

/* ========== Mobile (<=1024px) ========== */
@media screen and (max-width:1024px){

}

@media screen and (max-width: 768px){
  .top_bn {font-size: 16px; flex: 0 0 250px; margin-right: 200px;}

}

@media screen and (max-width: 576px){
  .top_bn {display: none;}
}