.header-container { position: fixed; top: 0; left: 0; width: 100%; z-index: 10; transition: background .25s; }
.header-container.fixed { border-bottom: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); }
.header-container.h-100pct { height: 100%; }
.header-container .header-wrap { position: relative; display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px;}

/* logo */
.logo-area { position: relative; cursor: pointer; }
.logo-area img.logo-img { display: inline-block; width: 220px; height: auto; }
.logo-area .lang-label { color: #fff; background: var(--theme-color); font-size: 1rem; padding: 1px 5px; border-radius: 3px; font-weight: 600; margin-left: 5px;}

/* user, search input */
.user-area { padding-top: 25px; }
.user-area .user-tool { display: flex; align-items: center; gap: 30px; justify-content: flex-end; }
.user-area .user-tool .guide-area { display: flex; gap: 20px; }
.user-area .user-tool .guide-area .item { display: flex; align-items: center; gap: 5px; position: relative; font-size: 1.3rem; font-weight: 500; cursor: pointer; }
.user-area .user-tool .guide-area .item:not(:last-child):after { content: ''; display: block; width: 1px; height: 13px; background: #ccc; position: absolute; top: 5px; right: -10px;}
.user-area .user-tool .mypf-area { display: flex; gap: 15px; }
.user-area .user-tool .mypf-area .item { display: flex; gap: 5px; font-size: 1.3rem; font-weight: 500; cursor: pointer;}
.user-area .user-tool .mypf-area .item .mypf-icon { width: 17px; height: auto; }
.user-area .user-tool .login-area { display: inline-block; }
.user-area .user-tool .login-area .btn-wrap { margin-top: 0;}
.user-area .user-tool .login-area .btn-wrap button { font-weight: 500; }
.user-area .user-tool .login-area .btn-wrap button.default { border: 0; background: transparent; color: #000; }

.user-area .search-area { display: flex; align-items: center; gap: 20px; justify-content: flex-end; margin-top: 20px; }
.user-area .search-area .lang-set { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.user-area .search-area .lang-set .lang-label { color: #fff; background: #000; font-size: 1rem; padding: 1px 5px; border-radius: 3px; font-weight: 600; margin-left: 5px;}
.user-area .search-area .lang-set .lang-txt { font-weight: 500; }
.user-area .search-area .lang-set img { width: 8px; height: auto; }
.user-area .search-area .search-box { position: relative; }
.user-area .search-area .search-box input[type=text] { width: 270px; border-radius: 5px; background: #fff; border: 1px solid var(--line-color); padding: 10px 30px 10px 20px;}
.user-area .search-area .search-box .search-icon { position: absolute; top: 13px; right: 20px; cursor: pointer; width: 14px; height: auto; opacity: .4; }
.user-area .search-area .search-box .search-icon:hover { opacity: .7;}

/* mobile hamburger */
.mo-hamburger { display: none; width: 20px; }
.mo-hamburger span { width:100%; height: 2px; margin-bottom: 5px; background:#000; display: block; transform: rotate(0); transition: transform .25s; }
.mo-hamburger span:nth-child(3) { margin-bottom: 0; }
.mo-hamburger.active span { display: block; top: 28px; }
.mo-hamburger.active span:nth-child(1) { transform: rotate(-45deg); margin-bottom: -2px; }
.mo-hamburger.active span:nth-child(2) { display: none; }
.mo-hamburger.active span:nth-child(3) { transform: rotate(45deg); }

/* mobile navigation */
.mo-nav { display: none; position: fixed; top: 78px; left: 0; width: 100%; height: calc(100% - 78px); background: #fff; z-index: 19; padding: 30px; border-top: 1px solid var(--line-color); overflow: hidden; touch-action: none;}
.mo-nav.open { display: block; }
.mo-nav ul { padding: 10px 0; }
.mo-nav ul:not(:last-child) { border-bottom: 1px dashed var(--line-color);}
.mo-nav ul li a { display: flex; gap: 5px; align-items: center; width: 100%; padding: 10px 0; font-size: 1.6rem; font-weight: 400;}
.mo-nav ul li a .mypf-icon { width: 17px; }
.mo-nav ul.login { display: flex; margin-bottom: 10px; border-bottom: 0; }
.mo-nav ul.login li { flex-grow: 1; text-align: center; border: 1px solid #000; }
.mo-nav ul.login li a { font-size: 1.3rem; font-weight: 600; padding: 10px 0; justify-content: center; }
.mo-nav ul.login li.join a { background: #000; color: #fff; }
.mo-nav ul.logout li a { color: #999; }
.mo-nav ul.mo-global-nav li a .title { display: flex; align-items: center; gap: 10px; }
.mo-nav ul.mo-global-nav li a .title .icon { width: 20px; height: auto; }
.mo-nav ul.mo-global-nav li a .title .tit { font-size: 1.4rem; font-family: 'nixgonfonts'; font-weight: 600; }
.mo-nav ul.mo-global-nav li.nav-tit { font-size: 1.2rem; font-weight: 600; padding: 7px 0 3px; color: #a0a4b1; }


/* global navi */
.global-nav-wrap { position: relative; }
.global-nav-wrap .nav-icon { padding: 7px 10px; border-radius: 5px; cursor: pointer; }
.global-nav-wrap .nav-icon img { width: 16px; height: auto; }
.global-nav-wrap .nav-icon:hover { background: rgba(0,0,0,0.05); }
.global-nav-wrap .global-list { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; position: absolute; top: calc(100% + 10px); right: 0; background: #fff; z-index: 1; padding: 20px; border-radius: 15px; border: 5px solid #D9E0EA; width: 330px; }
.global-nav-wrap .global-list ul { display: flex; flex-wrap: wrap; gap: 20px; flex-grow: 1; }
.global-nav-wrap .global-list ul li:hover a .title .tit { text-decoration: underline; }
.global-nav-wrap .global-list ul li { flex-basis: calc(33% - 13px); }
.global-nav-wrap .global-list ul li a { display: block; word-break: keep-all; }
.global-nav-wrap .global-list ul li a .title { text-align: center; }
.global-nav-wrap .global-list ul li a .title .icon { width: 35px; height: auto; margin-bottom: 10px; }
.global-nav-wrap .global-list ul li a .title .tit { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
.global-nav-wrap .global-list ul li a .title .tit.en { font-family: "nixgonfonts"; }
.global-nav-wrap .global-list ul li a .text { display: block; width: 100%; padding: 5px 0 0; }
.global-nav-wrap .global-list ul li a .text .txt { font-size: 1.2rem; color: rgba(0, 0, 0, 0.4); }
.global-nav-wrap.on .global-list { opacity: 1; visibility: visible; }


@media (max-width: 1200px) {
  /* logo */
  .logo-area img.logo-img { width: 180px; }
  
  /* user, search input */
  .user-area .user-tool { gap: 10px; }
  .user-area .user-tool .guide-area .item { font-size: 1.2rem; }
  .user-area .user-tool .login-area .btn-wrap button { height: 27px; padding: 0 15px; border-radius: 3px;}

  .user-area .search-area { margin-top: 15px;}
  .user-area .search-area .lang-set { font-size: 1.4rem; }
  .user-area .search-area .lang-set .lang-label { padding: 0 5px 1px; }
  .user-area .search-area .search-box input[type=text] { padding: 5px 25px 5px 10px; width: 200px; font-size: 1.2rem; }
  .user-area .search-area .search-box .search-icon { top: 8px; right: 15px; width: 12px; }
}

@media (max-width: 880px) {
  .header-container .header-wrap { padding: 30px 20px; }

  /* user, search input */
  .user-area { padding-top: 0; display: flex; align-items: center; gap: 20px; }
  .user-area .user-tool { display: none; }
  .user-area .search-area { margin-top: 0; }
  .user-area .search-area .search-box { display: flex; align-items: center; }
  .user-area .search-area .search-box input[type=text] { display: none;}
  .user-area .search-area .search-box .search-icon { position: static; opacity: 1; width: 20px; }

  /* mobile hamburger */
  .mo-hamburger { display: block; }
}

@media (max-width: 475px) {
  .header-container .header-wrap { padding: 30px 15px; }

  /* logo */
  .logo-area { display: flex; align-items: center;}
  .logo-area .lang-label { display: none; }
  .logo-area img.logo-img { width: 170px; }

  /* user, search input */
  .user-area .search-area { gap: 20px;}
  .user-area .search-area .lang-set { gap: 5px; }
  .user-area .search-area .lang-set .lang-label { padding: 0 5px; }
  .user-area .search-area .lang-set img { display: none; }
}