@charset "UTF-8";

.header-site {position: fixed; left: 0; top: 0; z-index: 101; right: 0; height: 80px; opacity: 0;}
.header-site::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 100%; background-color: #fff; z-index: -1;}
.header-site li {position: relative;}
.header-site__inner {position: relative; display: flex; align-items: center; max-width: 1280px; height: 100%; padding-top: 20px; padding-bottom: 20px; margin: 0 auto; box-sizing: border-box;}
.header-site__inner .logo-site {position: relative; flex: none; z-index: 11;}
.header-site__inner .logo-site .logo {display: block; position: relative; width: 100px; height: 18px; text-indent: -1000px; overflow: hidden;}
.header-site__inner .logo-site .logo::after {content: ''; -webkit-mask: url(../images/mask/logo.svg) no-repeat 50%; -webkit-mask-size: contain; mask: url(../images/mask/logo.svg) no-repeat 50%; mask-size: contain; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #222222; transition: all 0.4s;}
.header-site__inner .logo-site [class^=icon-logo] {width: 100px; height: 26px;}
.header-site__inner .home {display: inline-flex; align-items: center; gap: 6px;}
.header-site__inner .logo-link {display: none;}
.page-things .header-site__inner .logo-link.things,
.page-product .header-site__inner .logo-link.things {display: block;}
.page-works .header-site__inner .logo-link.works,
.heat-wrap .header-site__inner .logo-link.works {display: block;}

.navigation-global {display: flex; align-items: center; justify-content: space-between; width: 100%; margin-left: 60px; transition: right 0.4s;}
.navigation-global .nav-title {position: relative; font-weight: 600; font-size: 15px; color: #222222; line-height: 1.2; cursor: pointer;}
.navigation-global .nav-title sup {display: inline-block; margin-left: 4px; padding: 3px 4px; font-weight: 600; font-size: 8px; color: #ffffff; line-height: 1.2; background: var(--color-things-primary); border-radius: 2px; vertical-align: middle;}
.navigation-global .btn-menu.on::after {transform: rotate(180deg) translateY(50%);}
.navigation-global .nav-menu {display: none; flex-direction: column; gap: 8px; position: absolute; top: 49px; left: 50%; width: 200px; padding: 14px 5px; background: rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 8px rgba(100, 107, 142, 0.15); backdrop-filter: blur(5px); border-radius: 4px; transform-origin: top; animation: gnbMenu 0.3s forwards linear;}
.navigation-global .nav-menu.active {display: flex;}
.navigation-global .nav-menu .menu-item {padding: 10px 32px; font-weight: 600; font-size: 15px; color: #222222; line-height: 1.2;}
.navigation-global .nav-menu .menu-item:hover {background: #F4F5F9;}
.navigation-global [class^=nav-box] {display: flex; flex-direction: row; align-items: center;}
.navigation-global .nav-box__left {gap: 60px;}
.navigation-global .btn-lang {position: relative; padding-right: 29px;}
.navigation-global .btn-lang::before {content: ''; display: block; position: absolute; right: 0; top: 50%; width: 24px; height: 24px; -webkit-mask: url(../images/mask/icon-language.svg) no-repeat 50%; -webkit-mask-size: contain; mask: url(../images/mask/icon-language.svg) no-repeat center center / 100% auto; mask-size: contain; transform: translateY(-50%); background: linear-gradient(318.24deg, #E3E3E3 15.64%, #757575 66.43%, #E3E3E3 85.6%);}
.navigation-global .btn-lang::after {content: none;}
.navigation-global .nav-box__right .gnb-login:not(:only-child) {position: relative; margin-left: 20px; padding-left: 20px;}
.navigation-global .nav-box__right .gnb-login:not(:only-child)::before {content: ''; display: block; position: absolute; left: 0; top: 50%; width: 2px; height: 16px; background: rgba(0, 0, 0, 0.12); margin-top: -8px;}
.btn-gnb {display: none; position: relative; position: fixed; z-index: 11; width: 40px; height: 40px; text-indent: -1000px; overflow: hidden;}
.btn-gnb span {display: block; position: absolute; top: 10px; left: 5px; right: 5px; height: 3px; background-color: #222222; transition: all 0.4s;}
.btn-gnb span:nth-child(2) {top: 19px;}
.btn-gnb span:nth-child(3) {top: 27px;}

/* PC */
@media all and (min-width: 1024px){
  .header-site__inner .logo-site {width: 206px;}
}
/* TABLET */
@media all and (min-width:1024px) and (max-width:1320px){
  .header-site__inner {max-width: calc(100vw - 40px);}
  .navigation-global .nav-box__left {gap: 24px;}
}
/* MOBILE */
@media screen and (max-width: 1023px) {
  .header-site__inner {padding: 20px;}
  .header-site__inner .logo-site {margin: 26px 0;}
  .header-site__inner .logo-site .logo {width: 126px; height: 24px; margin: 26px 0;}
  .header-site__inner .logo-site [class^=icon-logo] {width: 129px; height: 34px;}
  .header-site__inner .logo-site .home {gap: 8px;}
  .navigation-global {flex-direction: column; align-items: flex-start; position: fixed; right: -100%; top: 0; z-index: 10; width: 100%; height: 100%; padding-top: 160px; overflow: auto; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px);}
  .navigation-global .nav-title {font-weight: 500; font-size: 20px; color: #fff; line-height: 1.4;}
  .navigation-global .nav-title sup {display: none;}
  .navigation-global [class^=nav-box] {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; gap: 24px; padding: 0 20px;}
  .navigation-global .nav-box__right {display: none;}
  .btn-gnb {display: block; top: 20px; right: 20px;}
  .navigation-global .nav-menu {display: none !important;}

  /* .header-site.active */
  .header-site.active .header-site__inner .logo-site .logo::after {background: #ffffff;}
  .header-site.active .navigation-global {right: 0;}
  .header-site.active .btn-gnb span {background: #ffffff;}
  .header-site.active .btn-gnb span:nth-child(2) {left: 15px;  }
  .header-site.scroll.active {transform: none; transition: none;}
}

/* ========================================
   BASIC
======================================== */
.header-site.basic::before {background-color: unset;}

/* ========================================
   WHITE
======================================== */
.header-site.white::before {background-color: unset;}
.header-site.white .logo-site .logo::after {background-color: #fff;}
.header-site.white .navigation-global .nav-title  {color: #fff;}
.header-site.white .navigation-global .btn-menu::after {background-color: #fff;}
.header-site.white .navigation-global .btn-login {background: rgba(255, 255, 255, 0.1);}
.header-site.white .btn-gnb span {background-color: #ffffff;}

/* ========================================
   DARK
======================================== */
.dark .header-site::before {background: rgba(0, 0, 0, 0.9);}
.dark .header-site.white .navigation-global .nav-box__right .nav-title {color: #d9d9d9d9;}
.dark .navigation-global .nav-menu {background: rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 20px rgba(6, 6, 6, 0.3); backdrop-filter: blur(10px);}
.dark .navigation-global .nav-menu .menu-item {color: #fff;}
.dark .navigation-global .nav-menu .menu-item:hover {background: #222222; color: #ffffff;}
.dark .header-site .logo-site .logo::after {background-color: #fff;}
.dark .header-site .navigation-global .nav-title  {color: #fff;}
.dark .header-site .navigation-global .btn-menu::after {background-color: #fff;}
.dark .header-site .btn-gnb span {background-color: #ffffff;}

@keyframes gnbMenu {
  from {opacity: 0; transform: translateX(-50%) scaleY(0);}
  to {opacity: 1; transform: translateX(-50%) scaleY(1); transform-origin: top;}
}