.header{position:absolute;left: 0;top: 0;z-index: 999;width:100%;transition: transform 0.3s ease;transform: translateY(-100px);}
.header.show{transform: none;}
.header .inner-lg{display: flex;align-items: center;}
.header .logo a{display: block;width: 94px;height: 21px;background: url(../../images/common/logo.svg) no-repeat center;text-indent: -9999px;}
.header .gnb-wrap {margin-left: 5.625rem;}
.header .gnb-wrap .nav-bar{display: flex;gap: .625rem;position: relative;}
.header .gnb-wrap .nav-bar > li > a{display: block;color: var(--gray-400, #999);font-family: "Albert Sans";font-size: 0.8125rem;font-weight: 400;line-height: 150%;letter-spacing: -0.01625rem;text-transform: uppercase;padding: 1.875rem 1.25rem;position: relative;transition: color 0.4s ease, text-shadow 0.4s ease;}
.header .gnb-wrap .nav-bar > li.active > a{color: #fff;text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);}
/* 언더라인 */
.header .gnb-wrap{position: relative;}
.nav-line { position: absolute;bottom: 0;left:0;height: 2px;background: #fff;width: 0;transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);pointer-events: none;box-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 5px rgba(255, 255, 255, 0.5);}
.header .gnb-wrap .nav-bar > li > a:hover {color: #fff;text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);}

/* 패밀리 사이트 */
.header .header-extra{display: flex;gap: 1.875rem;align-items: center;margin-left: auto;}

.header .header-extra .f-site{display: flex;gap: .625rem;}
.header .header-extra .f-site > li > a{display: block;color: var(--gray-400, #999);font-family: "Albert Sans";font-size: 0.8125rem;font-weight: 400;line-height: 150%;letter-spacing: -0.01625rem;text-transform: uppercase;padding: 1.875rem 1.25rem;transition: color 0.3s, transform 0.3s ease;;overflow: hidden;position: relative;}
.header .header-extra .f-site > li > a::after {content: "";position: absolute;bottom: 0; left: 0;width: 100%; height: 0%;background: linear-gradient(to top, rgba(255,255,255,0.08), rgba(255,255,255,0.03));transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);;z-index: -1;backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(10px);}
.header .header-extra .f-site > li > a:hover {color: #fff;transform: translateY(-1px);text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);box-shadow: 0 -5px 15px rgba(255, 255, 255, 0.1);}
.header .header-extra .f-site > li > a:hover::after {height: 100%;border-top: 1px solid rgba(255, 255, 255, 0.4);}


.header .header-extra .btn-contact{background: #FFF;padding: .125rem .5rem;color: #121212;font-size: 0.6875rem;font-weight: 500;line-height: 150%;letter-spacing: -0.01375rem;text-transform: uppercase;overflow: hidden;transition: all 0.3s}
.header .header-extra .btn-contact:hover {transform: translateY(-4px);box-shadow: 0 10px 25px rgba(255, 255, 255, 0.2),  0 0 15px rgba(100, 150, 255, 0.2); }



/* header 스크롤시 */
.header.is-active {backdrop-filter: blur(2px);position: fixed;transform: none}
.header.is-active .logo a{background: url(../../images/common/white_logo.svg) no-repeat center;}



/* 모바일 */
.m-header-btn,
.m-header-menu{display: none;}

@media screen and (max-width:1024px) {
  .header {backdrop-filter: blur(2px);position: fixed !important;transform: none;padding: 20px 0;}
  .header .logo{position: relative;z-index: 999;}
  .header .inner-lg{justify-content: space-between;}

  .header .gnb-wrap,
  .header .header-extra{display: none;}
  .m-header-btn{display: flex;flex-direction: column;gap: .2188rem;position: relative;align-items: flex-end;z-index: 999;height: 16px;width:20px}
  .m-header-btn span{height: 2.5px;background: #fff;transition: all 0.3s;transition:all .4s cubic-bezier(.77,0,.18,1);width: 20px;position:absolute;}
  .m-header-btn span:nth-child(1){width: 20px;top: 0;}
  .m-header-btn span:nth-child(2){width: 15px;top: 7px;}
  .m-header-btn span:nth-child(3){width: 9px;bottom: 0;}
  .video-bottom.is-fixed{display: none;}

  /* 활성화 (X 버튼) */
  .m-header-btn.active span{width:20px;}
  .m-header-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .m-header-btn.active span:nth-child(2){opacity:0;}
  .m-header-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .m-header-menu{transition: opacity 0.5s ease, transform 0.5s ease;display: block;visibility: hidden;transition: all 0.6s ease;pointer-events: none;position: fixed;right: 0;top: -100vh;width:100%;height: 100vh;padding-top: 60px;background: #000;opacity: 0;}
  .m-header-menu.show{top: 0;right: 0;z-index: 99;visibility: visible;pointer-events: auto;right: 0;opacity: 1;}
  .m-header-menu .m-header-nav{display: flex;flex-direction: column;}
  .m-header-menu .m-nav-bar{display: flex;flex-direction: column;}
  .m-header-menu .m-nav-bar li a{color: #FFF;font-family: "Albert Sans";font-size: 3.75rem;font-weight: 900;line-height: 100%;letter-spacing: -0.075rem;text-transform: uppercase;transition: all 0.3s;}
  .m-header-menu .m-nav-bar li a:hover,
  .m-header-menu .m-nav-bar li a:focus,
  .m-header-menu .m-nav-bar li a:active{color: var(--primary);}

  .m-header-extra{display: flex;flex-direction: column;}
  .m-header-extra li{padding-top: .875rem;margin-top: .875rem;border-top:1px solid var(--gray-800, #333);}
  .m-header-extra li a{color: var(--gray-600, #666);font-family: "Albert Sans";font-size: 2.5rem;font-weight: 900;line-height: 100%; letter-spacing: -0.05rem;text-transform: uppercase;display: block;transition: all 0.3s}
  .m-header-extra li a:hover,
  .m-header-extra li a:active,
  .m-header-extra li a:focus{color: #eee;}

  .m-header-menu .m-nav-bar li,
.m-header-menu .m-header-extra li{
  opacity:0;
  transform:translateY(30px);
}
  



}