@charset "utf-8";

header {position: absolute; top: 0; left: 0; width: 100%; background: transparent; z-index: 1000; transition: background-color 0.3s ease, box-shadow 0.3s ease;}
header .menu {width: 100%; height: 100px; display: flex; justify-content: end;}

header .logo img.scrolled { display: none; }

header.scroll-active .logo img.default,
header.menu-open .logo img.default { display: none; }
header.scroll-active .logo img.scrolled,
header.menu-open .logo img.scrolled { display: inline;}

header.scroll-active {background-color: #fff; box-shadow: 0 1px 0 #ddd;}
header.scroll-active .menu .depth1 > li > .submenu-toggle {color: #333;}
header.scroll-active .menu_btn {background: #006FBC;}

header .menu .depth1 {display: flex; align-items: center; cursor: pointer;}
header .menu .depth1 > li {position: relative; margin: 0 50px; padding: 10px 0;}
header .menu .depth1 > li > .submenu-toggle {display: block; font-weight: 500; font-size: 20px; color: #fff; padding: 0; font-family: inherit; line-height: inherit; letter-spacing: inherit; text-align: left;}

header .menu .depth2 {width: 150px; border-radius: 20px; position: absolute; top: 100%; left: -40px; background: #fff; display: none; z-index: 100; overflow: hidden;}
header .menu .depth2 li a {font-size: 18px; display: block; padding: 8px 20px; white-space: nowrap; color: #666; transition: background-color 0.1s ease, color 0.1s ease;}

header .menu .depth2 li a:hover {background-color: #006FBC; color: #fff;}

/*mobile*/
header .menu_toggle {display: none; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 30px; height: 30px; background: none; cursor: pointer; z-index: 2000;}
header .menu_btn {position: relative; display: block; width: 40px; height: 3px; background: #fff; border-radius: 2px; transition: all .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);}



@media screen and (min-width: 1025px) {
  header .menu .has_sub:hover .depth2 {display: block;}
}

@media screen and (max-width: 1024px) {
  header {position: fixed;}
  header .inner {align-items: center; justify-content: space-between; height: 100px;}
  header .logo {padding-left: 10px;}
  header h1.logo {position: relative; z-index: 1000;}

  header .menu_toggle {display: flex;}
  header .menu_toggle.active .menu_btn {background: #006FBC;}

  header .has_sub > .submenu-toggle {position: relative; display: flex; align-items: center; justify-content: space-between;}
  header .has_sub > .submenu-toggle::after {position: absolute; right: 30px; content: ""; display: inline-block; width: 8px; height: 8px; border-bottom: 2px solid #ccc; border-right: 2px solid #ccc; transform: rotate(45deg); transition: transform 0.3s ease; margin-top: 5px;}
  header .has_sub.active > .submenu-toggle::after {transform: rotate(-135deg);}

  header .menu {position: fixed; padding-top: 100px; justify-content:start; flex-direction: column; top: 0; right: 0; width: 60%; height: 100vh; overflow-y: auto; background: #fff; transform: translateX(110%); transition: transform 0.5s ease; z-index: 999;}
  header .menu.open {padding-top: 100px; margin: 0; transform: translateX(0); z-index: 1999;}

  header .menu .depth1 {flex-direction: column; width: 100%;}
  header .menu .depth1 > li {width: 100%; margin: 0; padding: 0; border-bottom: 1px solid #eee;}
  header .menu .depth1 > li > .submenu-toggle {display: block; width: 100%; padding: 14px 20px; color: #000; font-size: 18px; position: relative;}

  header .menu .depth2 {width: 100%; position: static; display: none; flex-direction: column; border-radius: 0; background: #f9f9f9; overflow: visible;}
  header .menu .depth2 li a {padding-left: 30px; color: #333; font-size: 18px;}

}