@charset "utf-8";

/*공통*/
header {width: 100%; z-index: 1000; background: transparent; position: fixed; z-index: 9999;}
header .inner {justify-content: space-between;}
header.scroll-active {background-color: #fff; border-bottom: 1px solid #ddd; transition: background-color 0.3s ease, border-color 0.3s ease;}
header.scroll-active .menu_btn {background: #003365;}

/*menu*/
header .logo {position: absolute; top:25px; left: 60px; z-index: 2000;}

/*스크롤 전 (기본 상태) */
header .logo img.default {display: inline;}
header .logo img.scrolled_logo {display: none;}

/*스크롤 후 (scroll-active or scrolled 클래스 붙은 상태) */
header.scroll-active .logo img.default,
header.scrolled .logo img.default {display: none;}
header.scroll-active .logo img.scrolled_logo,
header.scrolled .logo img.scrolled_logo {display: inline;}

.menu {display: flex; height:100px; justify-content: center; align-items: center; height: 100%; width:100%;}
.main_menu {display: flex; width:100%; max-width: 1000px;}

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

.depth1 {position: relative; display:block; width:100%; color: #fff; font-size: 18px; cursor:default;}
.depth1 > a {display:flex; align-items:center; padding-top:35px; margin-bottom:38px; justify-content:center;}

/* PC: 2뎁스 메뉴 공통 영역 */
.main_menu .depth2 {width: 100%; height:255px; color: #363636; display: none; padding: 30px 5px; box-sizing: border-box; text-align:center; border-left: 1px solid #eee; opacity: 0; transition: opacity .3s ease; letter-spacing: -1px;}
.main_menu .depth1:nth-child(3) .depth2, .main_menu .depth1:last-child .depth2 {border-right: 1px solid #eee;}
#gnb:hover .depth2 {display: block; opacity: 1;}
.main_menu .depth2:nth-child(3) {border-right: none;}

#gnb:before {position:absolute; top:100px; width:100%; background-color:#fff; opacity: 0; content:""; pointer-events: none; transition: opacity .3s;}
#gnb:hover:before{height:255px; opacity: 1;}

.menu .depth2 li a {display: block; padding: 5px; font-size: 16px; color: #363636; line-height: 1.2;}
.menu .depth2 li:hover > a {color: #003365; font-weight: 600;}

.lang_btn {position: absolute; top:30px; right: 60px; display: flex; gap: 15px; align-items: center; z-index: 2000;}
.lang_btn li {position: relative; font-size: 18px;}
.lang_btn li.active::after {content: ''; position: absolute; bottom: -3px; left: 80%; transform: translateX(-50%); width: 25px; height: 1px; background: #fff;}
.lang_btn li.active a .ri-global-line {font-family: "remixicon"; padding-right: 10px; font-size: 20px; font-weight: 300;}


@media screen and (min-width: 1025px) {
  #gnb {width: 100%; z-index: 9999; transition: background .3s ease;}
  #gnb:hover {background: #003365;}

  header.scrolled {display: none;transform: translateY(-100%); transition: transform 0.3s ease;}
  header.scrolled #gnb:hover {background: transparent !important;}

  .lang_btn li a {color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; transition: ease .3s;}
  .lang_btn li a:hover {color: #fff;}
  .lang_btn li.active a {color: #fff;}

}

@media screen and (max-width: 1240px) {
  .depth1 {margin: 0 20px;}
}

@media screen and (max-width: 1024px) {
  header {position: fixed; top: 0; left: 0; width: 100%; height: 80px;}
  header:before {display: none;}
  header:hover:before{display:none;}
  header .logo {top: 15px; left: 20px;}

  #gnb {width: 60%; height: 100vh; justify-content: flex-start;}

  .logo {left: 20px;}
  .logo img {max-height: 50px; display: block;}

  .menu {position: fixed; top: 0; right: 0; transform: translateX(110%); padding-top: 100px; background: #fff; transition: transform 0.3s ease; z-index: 1500; display: flex; flex-direction: column;}
  .menu.open {transform: translateX(0);}

  .main_menu {display: flex; flex-direction: column; width: 100%;}
  .main_menu > li > a, .main_menu > li {padding: 5px; font-size: 16px; text-align: left;}
  .main_menu .depth1 > a span::after, .main_menu > li:hover > a::after {display: none !important;}
  
  .depth1 {color: #363636; border-bottom: 1px solid #eee; margin: 0;}
  .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 0.3s ease;}
  .depth1.has_sub.active > a::before {transform: translateY(0) rotate(-135deg);}
  .depth1 > a.no_sub {padding: 13px 20px; margin: 0; font-size: 16px; vertical-align: middle;}

  .menu .depth2 {width: 100%; height: auto; background: #f9f9f9; border-radius: 0; box-shadow: none; padding: 0; margin: 0; opacity: 1;}
  .menu .depth2 li a {padding: 8px 30px; font-size: 14px; color: #363636; text-align: left;}

  header .menu_toggle {display: flex; position: absolute; top: 25px; right: 20px; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 40px; height: 30px; background: none; cursor: pointer; z-index: 2000;}
  header .menu_btn {display: block; width: 40px; height: 3px; background: #fff; border-radius: 2px; transition: all 0.3s ease;}
  header .menu_toggle.active .menu_btn:nth-child(1) {transform: rotate(45deg) translate(9px, 6px);}
  header .menu_toggle.active .menu_btn:nth-child(2) {opacity: 0;}
  header .menu_toggle.active .menu_btn:nth-child(3) {transform: rotate(-45deg) translate(13px, -10px);}
  header .menu_toggle.active .menu_btn {background: #003365;}

  .lang_btn {width: 100%; display: flex; position: static; color: #363636; padding: 20px; left: 0; z-index: 2000;}
  .lang_btn li a {color: #363636; font-size: 16px; }
  .ri-global-line, .lang_btn li.active a {color: #003365;}
  .lang_btn li.active::after {background: #003365;}
}