@charset "utf-8";

/* header layout */
.header {width:100%; background:transparent; z-index:9999;}
.nav-inner {max-width:1800px; margin:0 auto;}
.header.scroll-active {background-color:#fff; border-bottom:1px solid #ddd; transition:background-color .3s ease, border-color .3s ease;}
.header.scroll-active .menu_btn {background:#003365;}

/* logo */
.header .logo {position:absolute; top:20px; left:60px; z-index:10001;}
.header .logo img.default {display:inline;}

/* gnb */
#gnb {position:relative; z-index:5; overflow:visible;}
#gnb:hover {background:transparent;}
#gnb:after {content:''; position:absolute; left:50%; transform:translateX(-50%); top:0; width:100vw; height:100%; background:#fff; border-bottom:0; z-index:0; pointer-events:none; transition:.3s ease;}
#gnb:before {content:''; position:absolute; left:50%; transform:translateX(-50%); top:100%; width:100vw; height:0; background:#fff; opacity:0; z-index:0; pointer-events:none; transition:height .18s ease, opacity .18s ease; border-top:1px solid #ccc;}
#gnb:hover:before {height:230px; opacity:1; transition-delay:0s;}

/* depth1 */
.menu{position:relative;z-index:2;display:flex;height:100px;justify-content:center;align-items:center;width:100%;padding:0 160px;}
.main_menu{position:relative;z-index:2;display:flex;width:100%;max-width:clamp(600px,60vw,850px);justify-content:space-between;min-width:0;}

.depth1 {position:relative;display:block;flex:1 1 0%;min-width:0;box-sizing:border-box;}
.depth1 > a{display:flex;align-items:center;padding:35px 0 38px;justify-content:center;color:#444;font-weight:700;font-size:18px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

#gnb:hover .depth1 {font-weight:700;}
.main_menu .depth1, .main_menu .depth1 > a {position:relative;}
.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:#F4AA2E; transition:width .3s ease;}
.main_menu .depth1 > a:hover span::after {width:100%;}

/* depth2 */
.main_menu .depth2 {width:100%; height:230px; color:#222; display:none; padding:25px 10px; box-sizing:border-box; text-align:center; border-left:1px solid #ddd; opacity:0; transition:opacity .7s ease; letter-spacing:-1px; background:transparent;}
.main_menu .depth1:last-child .depth2 {border-right:1px solid #ddd;}
#gnb:hover .depth2 {display:block; opacity:1;}
.menu .depth2 li a {position:relative; 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;}
.menu .depth2 li:hover > a::before {position:absolute; content:''; width:4px; height:4px; left:-5px; background:#52B5D7; border-radius:50%;}

/* 로그인 버튼: 우측 고정 */
.login-btn {position:absolute; right:60px; top: 35px; z-index:100001; width: 90px; height: 35px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid #ccc; border-radius: 5px;}
.login-btn a:hover{background:#f8f8f8; border-color:#ccc;}

.login-modal {width: 500px; max-width: 90%; margin: 0 auto; border-radius: 20px; overflow: hidden;}
.login-modal .close {transition: .3s ease;}
.login-modal .modal-header {padding: 30px 30px 0;}
.login-modal .modal-body {padding: 20px 30px 30px;}

/* desktop only */
@media screen and (min-width:1025px){
  .depth1 {max-width:none; flex:1; font-size:16px;}
  .main_menu .depth1 .depth2 {position:absolute; top:100%; left:0; right:0; z-index:2; display:none; opacity:0;}
  #gnb:hover .depth1 .depth2 {display:block; opacity:1;}
}

/* tablet */
@media screen and (max-width:1240px){

}

/* mobile */
@media screen and (max-width:1024px){
  html.nav-open,body.nav-open {overflow:hidden;}

  .header {top:0; left:0; width:100%; height: 80px; background: #fff;}
  .header:before {display:none;}
  .header .logo {left: 10px;}
  .logo img {max-height:45px;}

  .login-btn {top: 25px; right: 80px;}
  
  #gnb:before, #gnb:after {content: none;}

  #gnb{position:fixed; top:0; right:0; width:60%; max-width:420px; height:100vh; background:#fff; transform:translateX(100%); transition:transform .4s ease; z-index:1501; will-change:transform; z-index:10002}
  #gnb.open{transform:translateX(0); background: #fff;}

  nav.menu{display: block; padding:80px 0 0 !important;}

  .main_menu{display:block; flex-direction:column; width:100%; overflow:auto;}
  .main_menu>li {width:100%;}
  .main_menu>li>a, .main_menu>li {font-size:16px;text-align:left;}

  .main_menu .depth1 > a span::after, .main_menu > li:hover > a::after {display:none !important;}

  .depth1 {border-bottom: 1px solid #eee;}
  .depth1:first-child {border-top:1px solid #eee;}
  .depth1 > a {position:relative; display:flex; align-items:center; justify-content:space-between;}
  .depth1::after {display:none;}

  .depth1.has_sub > a {padding:13px 20px; margin:0; font-size:16px; vertical-align:middle;}
  .depth1.has_sub > a::before {content:''; position:absolute; right:20px; top:20px; transform:translateY(0) rotate(45deg); width:8px; height:8px; border-bottom:2px solid #003365; border-right:2px solid #003365; transition:transform .3s ease;}
  .depth1.has_sub.active > a::before {transform:translateY(0) rotate(-135deg);}

  .menu .depth2 {width:100%; height:auto; background:#f9f9f9; padding: 5px 0; margin:0; opacity:1; display:none; text-align:left; border-left: none; }
  .menu .depth2 li a {padding:8px 25px; color:#333;}

  .menu_toggle {display:flex; position:absolute; top: 28px; right: 10px; flex-direction:column; justify-content:space-between; align-items:flex-end; width:40px; height:30px; background:none; cursor:pointer; z-index:20001; border:0;}
  .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);}
  .menu_toggle.active .menu_btn {background:#003365;}
}