@charset "UTF-8";
/*
 * pub-chrome.css
 * Home(freewebclub port) header / GNB dropdown / mobile nav / footer for Korean subpages.
 * Rules are extracted from /assets/pub/css/common.min.css and scoped to the chrome
 * (.header, .nav-mobile, .nav-mobile__bg, .footer) so subpage body content is not affected.
 * Publisher rem values are expressed via --pub-rem, which mirrors the publisher's
 * responsive html font-size (13/14/15/16px) without changing the subpage root font size.
 * Applied by scripts/apply_pub_chrome.py together with /assets/js/pub-chrome.js.
 */

:root { --pub-rem: 13px; }
@media (min-width: 576.02px) { :root { --pub-rem: 14px; } }
@media (min-width: 768.02px) { :root { --pub-rem: 15px; } }
@media (min-width: 1024.02px) { :root { --pub-rem: 16px; } }

/* ---- XEIcon (only the glyphs used by the chrome) ---- */
@font-face {
  font-family: xeicon;
  src: url(/assets/pub/fonts/icons/xeicon/xeicon.eot?3ka2yj);
  src: url(/assets/pub/fonts/icons/xeicon/xeicon.eot?3ka2yj#iefix) format("embedded-opentype"),
       url(/assets/pub/fonts/icons/xeicon/xeicon.woff2?3ka2yj) format("woff2"),
       url(/assets/pub/fonts/icons/xeicon/xeicon.ttf?3ka2yj) format("truetype"),
       url(/assets/pub/fonts/icons/xeicon/xeicon.woff?3ka2yj) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
.header [class^="xi-"], .header [class*=" xi-"],
.nav-mobile [class^="xi-"], .nav-mobile [class*=" xi-"] {
  font-family: xeicon !important;
  display: inline-block;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.header .xi-bars:before, .nav-mobile .xi-bars:before { content: "\e91c"; }
.header .xi-close:before, .nav-mobile .xi-close:before { content: "\e921"; }

/* ---- Scoped base (publisher reset/typography, chrome only) ----
   :where() keeps these at element-level specificity so the extracted publisher rules
   below always win, while still overriding style.css element rules (loaded earlier). */
.header, .nav-mobile, .footer {
  font-family: "Pretendard", "SUIT", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: var(--pub-rem);
  line-height: 1.5;
  color: #111;
  word-break: keep-all;
  -webkit-text-size-adjust: 100%;
  text-align: start;
}
:where(.header, .nav-mobile, .footer) *,
:where(.header, .nav-mobile, .footer) *::before,
:where(.header, .nav-mobile, .footer) *::after {
  box-sizing: border-box;
}
:where(.header, .nav-mobile, .nav-mobile__bg, .footer),
:where(.header, .nav-mobile, .footer) * {
  margin: 0;
  padding: 0;
}
:where(.header, .nav-mobile, .footer) :where(ul, ol, li) {
  list-style: none;
}
:where(.header, .nav-mobile, .footer) a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
:where(.header, .footer) b { font-weight: bolder; }
:where(.header, .nav-mobile, .footer) img {
  border: 0;
  max-width: 100%;
  vertical-align: top;
}
:where(.header, .nav-mobile) button {
  font-size: var(--pub-rem);
  font-family: inherit;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  overflow: visible;
  text-transform: none;
  background: transparent;
  border: none;
  cursor: pointer;
  vertical-align: middle;
  -webkit-appearance: none;
}
:where(.header, .nav-mobile) :where(nav, aside) { display: block; }
.header .d-none, .nav-mobile .d-none { display: none !important; }
.footer .container {
  width: 100%;
  padding-right: 20px;
  padding-left: 20px;
  margin-right: auto;
  margin-left: auto;
  max-width: 1720px;
}

/* ---- extracted from /assets/pub/css/common.min.css (header / nav / mobile nav / footer); rem -> var(--pub-rem) ---- */
.header {
  width:100%;
  z-index:500;
  background-color:transparent;
  border-bottom:0;
  max-width:1800px;
  position:absolute;
  top:20px;
  left:50%;
  transform:translateX(-50%);
}
@media (max-width:1024px) {
  .header {
    top:0;
    left:0;
    transform:none;
  }
}
.header.is-scrolled {
  box-shadow:0 10px 30px rgba(0,0,0,0.12);
}
.header .header-wrap {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:1800px;
  width:100%;
  height:78px;
  margin:0 auto;
  padding:calc(0.875 * var(--pub-rem)) calc(0.875 * var(--pub-rem)) calc(0.875 * var(--pub-rem)) calc(1.25 * var(--pub-rem));
  overflow:visible;
  background-color:#fff;
  border-radius:calc(0.5 * var(--pub-rem));
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow 0.5s ease,border-radius 0.4s ease;
}
@media (max-width:1024px) {
  .header .header-wrap {
    width:100%;
    max-width:none;
    height:60px;
    padding:0 calc(1 * var(--pub-rem));
    border-radius:0;
  }
}
.header .header-wrap .logo {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  width:calc(13.75 * var(--pub-rem));
}
@media (max-width:1024px) {
  .header .header-wrap .logo {
    width:auto;
  }
}
.header .header-lang {
  display:flex;
  align-items:center;
  gap:calc(0.25 * var(--pub-rem));
  height:calc(3.125 * var(--pub-rem));
  padding:0 calc(0.875 * var(--pub-rem));
  border:0;
  background:transparent;
  color:#111;
  font-size:calc(0.6875 * var(--pub-rem));
  font-weight:500;
}
.header .header-lang img {
  display:block;
  width:calc(1.125 * var(--pub-rem));
  height:calc(1.125 * var(--pub-rem));
}
.footer {
  padding:calc(2.5 * var(--pub-rem)) 0;
  background:#222;
}
@media (max-width:1024px) {
  .footer {
    padding:calc(2 * var(--pub-rem)) 0;
  }
}
.footer .container {
  display:flex;
  flex-direction:column;
  gap:calc(1.875 * var(--pub-rem));
}
@media (max-width:1024px) {
  .footer .container {
    gap:20px;
  }
}
.footer .top {
  display:flex;
  align-items:center;
  gap:calc(2.5 * var(--pub-rem));
}
@media (max-width:1024px) {
  .footer .top {
    flex-wrap:wrap;
    gap:16px 24px;
  }
}
.footer .logo {
  flex-shrink:0;
}
.footer .logo img {
  display:block;
  width:calc(11.6875 * var(--pub-rem));
  height:calc(2.25 * var(--pub-rem));
}
.footer .link {
  display:flex;
  align-items:center;
  gap:calc(1.875 * var(--pub-rem));
}
@media (max-width:1024px) {
  .footer .link {
    gap:16px;
  }
}
.footer .link a {
  color:#fff;
  font-size:calc(0.875 * var(--pub-rem));
  font-weight:600;
  letter-spacing:-0.02em;
}
.footer .link a:hover {
  color:#fff;
}
.footer .link li:last-child a {
  font-weight:700;
}
.footer .info {
  display:flex;
  flex-direction:column;
  gap:calc(0.625 * var(--pub-rem));
  padding:0 calc(0.625 * var(--pub-rem));
}
@media (max-width:1024px) {
  .footer .info {
    padding:0;
  }
}
.footer .txt {
  display:flex;
  align-items:center;
  gap:calc(1.25 * var(--pub-rem));
  color:rgba(255,255,255,0.9);
  font-size:calc(0.875 * var(--pub-rem));
  letter-spacing:-0.02em;
}
@media (max-width:1024px) {
  .footer .txt {
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
}
.footer .txt span {
  display:flex;
  align-items:center;
  gap:calc(0.25 * var(--pub-rem));
}
.footer .txt b {
  width:calc(0.875 * var(--pub-rem));
  font-weight:700;
}
.footer .copy {
  color:rgba(255,255,255,0.5);
  font-size:calc(0.875 * var(--pub-rem));
  line-height:1.2;
  letter-spacing:-0.02em;
}
@media (max-width:1024px) {
  .footer .copy {
    line-height:1.5;
  }
}
.footer .created-masstige {
  color:inherit;
}
.footer .created-masstige:hover {
  color:#7d67ff;
}
.header .nav {
  flex:1;
}
@media (max-width:1024px) {
  .header .nav {
    display:none;
  }
}
.header .nav .nav-list--depth1 {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:calc(0.625 * var(--pub-rem));
}
.header .nav .nav-list--depth2 {
  position:absolute;
  left:0;
  top:calc(100% + 24px);
  z-index:10;
  display:none;
  width:100%;
  max-width:calc(12.5 * var(--pub-rem));
  padding:calc(1.25 * var(--pub-rem));
  background-color:#fff;
  border-radius:calc(0.25 * var(--pub-rem));
  backdrop-filter:blur(20px);
}
.header .nav .nav-list--depth3 {
  display:none;
}
.header .nav .depth-1.is-lang {
  flex:0 0 auto;
  max-width:none;
  width:auto;
}
.header .nav .depth-1.is-lang>.link {
  justify-content:flex-start;
  gap:calc(0.25 * var(--pub-rem));
  width:auto;
  padding:0 calc(0.875 * var(--pub-rem));
  font-size:calc(0.6875 * var(--pub-rem));
  font-weight:500;
  letter-spacing:-0.04em;
}
.header .nav .depth-1.is-lang>.link:after {
  display:none;
}
.header .nav .depth-1.is-lang .nav-list--depth2 {
  width:auto;
  max-width:none;
  padding:calc(1.25 * var(--pub-rem));
  text-align:center;
}
.header .nav .depth-1.is-lang .depth-2 {
  margin-top:0;
}
.header .nav .depth-1.is-lang .depth-2+.depth-2 {
  margin-top:calc(0.875 * var(--pub-rem));
}
.header .nav .depth-1.is-lang .depth-2>.link {
  font-size:calc(0.6875 * var(--pub-rem));
  font-weight:500;
  letter-spacing:-0.44px;
  text-align:center;
  white-space:nowrap;
}
.header .nav .depth-1 {
  position:relative;
  max-width:calc(12.5 * var(--pub-rem));
  width:100%;
}
.header .nav .depth-1:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:100%;
  height:calc(1.5 * var(--pub-rem));
}
.header .nav .depth-1.hover>.link {
  color:#002165;
  background-color:#f4f5f7;
}
.header .nav .depth-1.hover>.link:after {
  background-color:#002165;
  transform:scale(1.8);
}
.header .nav .depth-1>.link {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:calc(3.125 * var(--pub-rem));
  padding:0 calc(1.25 * var(--pub-rem));
  border-radius:calc(0.25 * var(--pub-rem));
  color:#111;
  font-size:calc(1.125 * var(--pub-rem));
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.04em;
  text-align:left;
  white-space:nowrap;
}
.header .nav .depth-1>.link:after {
  content:"";
  display:block;
  flex-shrink:0;
  width:calc(0.25 * var(--pub-rem));
  height:calc(0.25 * var(--pub-rem));
  border-radius:50%;
  background-color:#111;
  transition:transform 0.4s ease;
}
.header .nav .depth-1.is-contact>.link {
  background-color:#002165;
  color:rgba(255,255,255,0.9);
}
.header .nav .depth-1.is-contact>.link:after {
  background-color:#fff;
}
.header .nav .depth-1.is-contact>.link.on,
.header .nav .depth-1.is-contact>.link:hover {
  color:rgba(255,255,255,0.9);
}
.header .nav .depth-2 {
  line-height:1.4;
  margin-top:0;
}
.header .nav .depth-2+.depth-2 {
  margin-top:calc(1.125 * var(--pub-rem));
}
.header .nav .depth-2>.link {
  display:block;
  padding:0;
  color:#666;
  font-size:calc(1.125 * var(--pub-rem));
  font-weight:500;
  line-height:1.4;
  letter-spacing:-0.04em;
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1),color 0.4s ease;
}
.header .nav .depth-2>.link.on,
.header .nav .depth-2>.link:hover {
  color:#002165;
  transform:translateX(6px);
}
.header .nav__bg {
  display:none;
}
.header .nav.gnb-drop--each .nav-list--depth2 {
  width:100%;
  max-width:calc(12.5 * var(--pub-rem));
  padding:calc(1.25 * var(--pub-rem));
  background-color:#fff;
  border-radius:calc(0.25 * var(--pub-rem));
}
.header .nav.gnb-drop--line .nav-list--depth2 {
  justify-content:center;
  width:100%;
  padding:calc(0.9375 * var(--pub-rem)) 0;
}
.header .nav.gnb-drop--line .depth-2 {
  display:inline-block;
  margin-top:0;
  margin:0 calc(1 * var(--pub-rem));
}
.nav-mobile {
  z-index:700;
  background-color:#fff;
  max-width:600px;
  width:100%;
  height:100%;
  transition:500ms all;
  text-align:left;
  position:fixed;
  top:0;
  right:-100%;
}
@media (max-width:1024px) {
  .nav-mobile {
    display:block;
  }
}
.nav-mobile.active {
  right:0;
}
.nav-mobile__btn {
  right:0;
  top:0;
  position:absolute;
  text-align:center;
  height:60px;
  width:60px;
  color:#222;
  font-size:calc(2 * var(--pub-rem));
  display:none;
}
@media (max-width:1024px) {
  .nav-mobile__btn {
    display:block;
  }
}
.nav-mobile__bg {
  display:none;
  position:fixed;
  top:0;
  width:100%;
  left:0;
  right:0;
  min-height:100%;
  background:rgba(0,0,0,0.5);
  z-index:600;
}
.nav-mobile__head {
  height:60px;
  position:relative;
  border-bottom:1px solid #ddd;
}
.nav-mobile__head .logo {
  padding:0 calc(1.25 * var(--pub-rem));
}
.nav-mobile__head .logo-bx {
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
}
.nav-mobile__body {
  padding-bottom:50px;
  height:100%;
  position:relative;
  overflow-y:auto;
  height:calc(100vh - 60px);
}
.nav-mobile .is-lang {
  display:none;
}
.nav-mobile .depth-1>.link {
  text-align:left;
  color:#000;
  border-bottom:1px solid #ddd;
  display:block;
  padding:calc(1 * var(--pub-rem)) calc(1 * var(--pub-rem));
  font-size:calc(1.2 * var(--pub-rem));
  position:relative;
}
.nav-mobile .depth-1>.link.active {
  background-color:#002165;
  color:#fff;
}
.nav-mobile .depth-2>.link {
  display:block;
  padding:calc(0.7 * var(--pub-rem)) calc(1 * var(--pub-rem));
  padding-left:calc(1.6 * var(--pub-rem));
  background-color:rgb(244.8,244.8,244.8);
  color:#555;
  font-size:calc(1 * var(--pub-rem));
}
.nav-mobile .depth-2>.link.active {
  color:#002165;
}
.nav-mobile .depth-2:first-child>.link {
  padding-top:calc(1 * var(--pub-rem));
}
.nav-mobile .depth-2:last-child>.link {
  padding-bottom:calc(1 * var(--pub-rem));
}
.nav-mobile .depth-3>.link {
  display:block;
  padding:calc(0.8 * var(--pub-rem)) calc(1 * var(--pub-rem));
  padding-left:calc(2.4 * var(--pub-rem));
  background-color:rgb(234.6,234.6,234.6);
  color:#555;
  font-size:calc(0.8 * var(--pub-rem));
}
.nav-mobile .depth-1>.link,
.nav-mobile .depth-2>.link {
  display:block;
  position:relative;
}
.nav-mobile .depth-1._down>.link:before,
.nav-mobile .depth-2._down>.link:before {
  font-family:xeicon!important;
  display:inline-block;
  speak:none;
  font-style:normal;
  font-weight:400;
  font-variant:normal;
  text-transform:none;
  line-height:1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  content:"\e941";
}
.nav-mobile .depth-1._down>.link.active:before,
.nav-mobile .depth-2._down>.link.active:before {
  content:"\e944";
}
.nav-mobile .depth-1._down>.link:before,
.nav-mobile .depth-2._down>.link:before {
  position:absolute;
  top:50%;
  font-size:calc(1 * var(--pub-rem));
  margin-top:calc(-0.5 * var(--pub-rem));
  right:calc(1 * var(--pub-rem));
}
.nav-mobile .nav-list--depth2,
.nav-mobile .nav-list--depth3 {
  display:none;
}

/* ---- Subpage integration overrides ---- */

/* style.css styles #main-header as the old fixed GNB bar and every .logo / .logo img
   with !important. The new markup keeps id="main-header" on the logo link (site-cms.js hook),
   so neutralise those legacy rules here with higher specificity. */
.header .header-wrap a.logo#main-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex: 0 0 auto !important;
  width: calc(13.75 * var(--pub-rem)) !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 1024px) {
  .header .header-wrap a.logo#main-header { width: auto !important; }
}
.header .logo, .nav-mobile .logo, .footer .logo {
  gap: normal;
  font-size: var(--pub-rem);
  font-weight: inherit;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
}
.nav-mobile .nav-mobile__head .logo,
.footer .top .logo {
  display: block !important;
  align-items: normal !important;
}
.nav-mobile .nav-mobile__head .logo {
  margin: 0 !important;
  padding: 0 calc(1.25 * var(--pub-rem)) !important;
}
.header .logo img, .nav-mobile .logo img {
  height: auto !important;
  width: auto !important;
  object-fit: initial;
}
.nav-mobile .logo img { display: inline; }
.footer .logo img {
  width: calc(11.6875 * var(--pub-rem)) !important;
  height: calc(2.25 * var(--pub-rem)) !important;
}
/* legacy footer hook-class rules (style.css / inline page styles) */
.footer .site-footer-legal { opacity: 1; margin-top: 0; }
.footer .site-footer-copy {
  width: auto;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.footer {
  border-top: 0;
}
.footer p { color: inherit; }

/* Old fixed-header spacer -> reserve the floating header area
   (top 20px + 78px pill + 20px gap on desktop, 60px bar on <=1024px). */
.site-header-spacer {
  height: 118px !important;
}
@media (max-width: 1024px) {
  .site-header-spacer { height: 60px !important; }
}

/* The new header scrolls away (position:absolute, as on the home page), so sticky
   in-page bars that were offset for the old 72px fixed GNB now stick to the top. */
.history-era-tabs-sticky,
.pr-subnav {
  top: 0;
}