@charset "utf-8";
/*공통*/
header {width: 100%; z-index: 1000; background: #fff;}
header .inner {justify-content: space-between;}
#gnb, .main_menu, .main_menu li, .main_menu li > a, .depth1, .depth1 > a {pointer-events: auto;}

/*top menu*/
.top_nav_pc {background: #F4F4F4; width: 100%; height: 40px;}
.top_nav_pc .inner {display: flex; justify-content: space-between; height: 100%;}

.top_sns, .top_utils {display: flex; justify-content: space-around;}
.top_sns {gap: 10px;} .top_sns a {display: block; width: 26px; height: 26px;}

.top_youtube, .top_instagram, .top_facebook {width: 26px; height: 26px; border-radius: 5px; overflow: hidden;}
.top_youtube {background: url(../../images/thema/common/youtube.png) center center/cover no-repeat;}
.top_instagram {background: url(../../images/thema/common/instagram.png) center center/cover no-repeat;}
.top_facebook {background: url(../../images/thema/common/facebook.png) center center/cover no-repeat;}

.top_utils {font-size: 15px; color: #444;} .utils_bar {width: 1px; height: 14px; background: #444; margin: 0 20px;}
.all_menu {width: 14px; height: 10px; background: url(../../images/thema/common/all_menu.png) center/cover no-repeat; margin-right: 8px;}
.top_nav_mobile {display: none;}

/*menu*/
#gnb {height: 90px; z-index: 9999;}
.menu {display: flex; justify-content: space-between; align-items: center; height: 100%;}
.main_menu {display: flex; background: #fff;}
.main_menu a {text-align: center;}
.main_menu li:last-child {margin-right: 0;}

.main_menu > li > a {position: relative; padding: 10px 5px; display: inline-block;}
.main_menu > li > a::after {content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 0; height: 3px; background: #FFA73E; transition: width 0.3s ease;}

.depth1 {position: relative; margin: 0 40px;}
.depth1 > a {position: relative; font-size: 20px;}
.depth1::after {content: ''; position: absolute; left: 0; top: 100%; width: 100%; height: 20px;}

.main_menu > li:hover > a::after {width: 100%;}

.menu .depth2 {flex-direction: column; z-index: 9999; background: #fff; padding: 10px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.16); border-radius: 10px; font-size: 16px;}
.menu .depth1.active > .depth2 {display: block;}

.depth2 a {padding: 5px 10px; border-radius: 8px; transition: background 0.2s;}
.depth2 li:hover > a {background: #FFF1E3; font-weight: 600;}

@media screen and (min-width: 1025px) {
  .menu .depth2 {position: absolute; width: 200px; top: 70px; left: -60px; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;}
  .menu .depth1:hover > .depth2 {display: flex; opacity: 1; visibility: visible;}
}

@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%; background: #fff; z-index: 1000;}
  header .inner {height: 90px;}
  
  #gnb {height: 100vh;}
  
  .menu {position: fixed; top: 0; right: 0; width: 60%; background: #fff; transform: translateX(110%); transition: transform 0.4s ease; z-index: 1500; padding-top: 90px; display: flex; flex-direction: column;}
  .menu.open {transform: translateX(0);}
  .main_menu {display: flex; flex-direction: column; width: 100%; height: 100vh;}
  .main_menu > li > a {display: block; padding: 10px 20px; text-align: left; font-size: 18px;}
  .main_menu > li > a::after, .main_menu > li:hover > a::after {display: none !important;}
  
  .depth1::after {display: none;}
  .depth1 {width: 100%; border-bottom: 1px solid #eee; margin: 0;}
  nav .depth1 > a {position: relative; display: flex; align-items: center; justify-content: space-between;}
  .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 0.3s ease;}
  .depth1.has_sub.active > a::before {transform: translateY(-50%) rotate(-135deg);}
  
  .menu .depth2 {position: static; width: 100%; background: #f9f9f9; border-radius: 0; box-shadow: none; padding: 0; margin: 0;}
  .menu .depth2 a {display: block; padding: 10px 30px; font-size: 14px; color: #333; text-align: left;}
  
  header .menu_toggle {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; width: 40px; height: 30px; background: none; cursor: pointer; z-index: 20000;}
  header .menu_btn {display: block; width: 40px; height: 3px; background: #333; 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: #006FBC;}
  
  .top_nav_pc {display: none;}
  .top_nav_mobile {display: none; z-index: 2000; pointer-events: auto;}
  nav.menu.open + .top_nav_mobile, .menu.open .top_nav_mobile, nav#gnb.open .top_nav_mobile {display: flex !important; width: 100%; padding: 10px 20px; background: #f4f4f4; border-bottom: 1px solid #ddd; flex-wrap: wrap; justify-content: center;}
  .top_nav_mobile a {display: block; position: relative; z-index: 2000; pointer-events: auto;}
  .top_sns, .top_utils {width: 100%; margin: 10px 0;}
  .top_sns {gap: 20px; justify-content: center;}
  .top_sns a {display: block;}
  
  .top_utils {justify-content: space-between; font-weight: 500;}
  .top_utils .utils_login, .top_utils .utils_join {width: 48%; text-align: center; border-radius: 10px;}
  .top_utils .utils_login a, .top_utils .utils_join a {display: block; padding: 8px 0;}
  .top_utils .utils_login {background: #FFA73E; color: #fff;}
  .top_utils .utils_join {background: #ccc;}
  .logo img {max-height: 40px; display: block;}
}