@charset "utf-8";

/* Variables */
:root {
  --primary: #006eff;
  --primary-dark: #2e61e6;
  --secondary: #00f7ff;
  --secondary-dark: #00c5ff;
  --sky-blue: #B9BED0;
  --dark-navy: #111833;
  --gray-darker: #585858;
  --gray-dark: #767676;
  --gray: #aaa;
  --gray-light: #ddd;
  --gray-lighter: #ebebeb;
  --font-primary: "Noto Sans KR", "맑은 고딕", sans-serif;
  --font-secondary: "Roboto", var(--font-primary), "맑은 고딕", sans-serif;
  --cubic-pop1: cubic-bezier(.85,.14,.29,.99);
  --cubic-pop2: cubic-bezier(.71,.45,.36,1.31);
  --cubic-pop3: cubic-bezier(.85,.14,.29,.99);
}


/* Default */
body {font-family: var(--font-secondary); line-height: 1.875; color: var(--gray-darker); word-break: keep-all;}

* {letter-spacing: -0.04em;}
.container {width: min(1580px, calc(100% - 30px));}

.fc--white {color: white!important;}
.fc--black {color: #000!important;}
.fc--primary {color: var(--primary)!important;}
.fc--secondary {color: var(--secondary)!important;}
.fc--sky-blue {color: var(--sky-blue)!important;}
.fc--gray {color: var(--gray)!important;}

.bg--primary {background-color: var(--primary)!important;}
.bg--dark-navy {background-color: var(--dark-navy)!important;}
.bg--real-black {background-color: #000!important;}
.bg--gray {background-color: var(--gray)!important;}
.bg--gray-light {background-color: var(--gray-light)!important;}
.bg--gray-lighter {background-color: var(--gray-lighter)!important;}
.bg--white {background-color: #fff!important;}

button {all: unset; cursor: pointer;}

/* Locomotive scroll */
body:has(#locoScrollContainer) {height: 100vh;}
.has-scroll-smooth body {display: block;}
.has-scroll-smooth.mobile body {position: fixed; top: 0; left: 0; width: 100%; height: calc(var(--vh, 1vh) * 100); min-height: 0;}

/* Keyframes */
@keyframes rotate {
  to {transform: rotate(360deg);}
}
@keyframes rotate-reverse {
  to {transform: rotate(-360deg);}
}


/* Elements */
.round-button {--theme: var(--primary); display: inline-flex; align-items: center; gap: 0.7em; height: 60px; border-radius: 60px; border: 1px solid #BDBDBD; padding-inline: 30px; font-weight: 500; position: relative; overflow: hidden; transition: color .3s, border .3s;}
.round-button:not(.no-hover)::before {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; display: block; border-radius: 60px; transform: translate(-100%); background: var(--theme); transition: transform .3s var(--cubic-pop1); z-index: -1;}
.round-button::after {width: 8px; height: 8px; border-top: 2px solid var(--gray-darker); border-right: 2px solid var(--gray-darker); content: ''; display: block; flex-shrink: 0; transform: rotate(45deg); transition: border .3s;}
.round-button:has(span) span {z-index: 1;}
.round-button:has(span)::before {z-index: 0!important;}
.round-button:has(span)::after {z-index: 1;}
.round-button.blue {border-color: var(--primary); color: var(--primary);}
.round-button.blue::after {border-color: var(--primary);}
.round-button.blue-fill {border-color: var(--primary); color: #fff; background: var(--primary);}
.round-button.blue-fill::after {border-color: #fff;}

@media (hover: hover) {
  .round-button:not(.no-hover):hover {color: #fff; border-color: var(--primary);}
  .round-button:not(.no-hover):hover::before {transform: translate(0);}
  .round-button:not(.no-hover):hover::after {border-color: #fff;}
  .round-button.blue-fill:not(.no-hover):hover {border-color: var(--primary-dark); background: var(--primary-dark);}
}
@media screen and (max-width: 1399px) {
  .round-button {height: 50px; font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .round-button {height: 44px; font-size: 14px;}
}


/* Modal */
.modal {--width: 890px; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; align-items: center; justify-content: center; padding: 50px 15px; display: none; opacity: 0;  background: rgb(0,0,0,.7); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}
.modal-small {--width: 652px;}
.modal .dim {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.modal .container {--padding: 70px 60px; width: var(--width)!important; max-width: 100%; position: relative; z-index: 1; background: #fff; overflow: hidden auto; max-height: 100%; border-radius: 10px;}
.modal .container .head {position: sticky; top: 0; left: 0; width: 100%; padding: var(--padding); padding-bottom: 30px; background: #fff; z-index: 10;}
.modal .container .btn--close {position: absolute; top: 20px; right: 20px;}
.modal .container .btn--close .ico--times::before {background: #000;}
.modal .container .btn--close .ico--times::after {background: #000;}
.modal .container .content {padding: var(--padding); padding-top: 0;}

.modal.overflow {overflow: hidden auto; align-items: flex-start;}
.modal.overflow .dim {background: none; backdrop-filter: none;}
.modal.overflow .container {overflow: visible; max-height: none;}
.modal.overflow .container .head {top: -50px; border-radius: 10px 10px 0 0; padding-block: 50px 20px; padding-right: 60px; border-bottom: 1px solid var(--gray-lighter);}
.modal.overflow .container .content {padding-top: 20px;}

.modal-brand-notice {--width: 500px;}
.modal-brand-notice.active {opacity: 1; display: flex;}
.modal-brand-notice .container .head {padding-block: 50px 20px;}
.modal-brand-notice .container .content .title {margin-bottom: 0.6em;}

@media screen and (max-width: 1399px) {
  .modal .container {--padding: 70px 30px;}
  .modal.overflow .container .head {padding-block: 20px;}
}
@media screen and (max-width: 767px) {
  .modal .container {--padding: 70px 15px;}
}




/* Header */
.header {--logo-w: 200px; --gnb-w: 200px; --gnb-padding-inline: 10px; --color: #888; position: fixed; top: 0; left: 0; width: 100%; height: 88px; z-index: 9999; background: #fff; border-bottom: 1px solid #EAEAEA; transition: transform .5s;}
.header__wrap {position: relative; z-index: 1; background: #fff; height: 100%; width: 100%;}
.header__container {display: flex; align-items: center; justify-content: space-between; height: 100%; width: 100%; height: 100%; width: 100%;}
.header__logo {width: var(--logo-w);}
.header__logo a {display: block; width: 100%; height: 100%;}
.header__logo svg {width: 100%; height: auto; display: block;}

.gnb {font-family: var(--font-primary); display: flex; height: 100%; font-size: 16px; margin-right: auto; margin-left: 0;}
.gnb__depth1 {}
.gnb__depth1 > a {position: relative; display: flex; justify-content: center; align-items: center; width: var(--gnb-w); height: 100%; padding-inline: var(--gnb-padding-inline); color: var(--color);}
.gnb__depth1:not(:last-child) > a::after {position: absolute; top: 50%; right: 0; width: 1px; height: .9em; content: ''; display: block; transform: translate(0, -45%); background: var(--color);}

.submenu {--padding-block: 30px; position: absolute; z-index: 0; top: 100%; left: 0; width: 100%; background: #F4F4F4; transform: translate(0, -100%); opacity: 0; transition: transform .5s var(--cubic-pop1), opacity .5s; pointer-events: none;}
.header:has(.gnb:hover, .submenu:hover) .submenu {transform: translate(0); opacity: 1; pointer-events: initial;}
.submenu .container {display: flex; padding-left: var(--logo-w); width: 100%; gap: 50px;}
.submenu .container > ul {display: flex;}
.submenu .group {position: relative; width: var(--gnb-w); padding-inline: var(--gnb-padding-inline); text-align: center; color: var(--gray); line-height: 1.3125; border-right: 1px solid rgb(222, 222, 222, .5); padding: var(--padding-block) 0;}
.submenu .group > ul {}
.submenu .group > ul > li {}
.submenu .group > ul > li > a {display: block; padding-block: 9px;}
.submenu .group > ul > li > a:hover {color: var(--primary); font-weight: 500;}
.brand-links {display: flex; flex-direction: column; gap: 5px; padding: var(--padding-block) 0; }
.brand-links a {display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 9px; padding: 20px; min-height: 100px; width: 300px; border: 1px solid #D9D9D9; border-radius: 10px; background: #EBEBEB;}
.brand-links a:hover {opacity: .5;}
.brand-links a:nth-child(1) img {width: 122px;}
.brand-links a:nth-child(2) img {width: 92px;}
.brand-links a span {font-weight: 500; color: #767676; line-height: 1.5;}

.header .gnb__depth1:hover > a,
.header:has(.submenu .group:nth-child(1):hover) .gnb__depth1:nth-child(1) > a,
.header:has(.submenu .group:nth-child(2):hover) .gnb__depth1:nth-child(2) > a,
.header:has(.submenu .group:nth-child(3):hover) .gnb__depth1:nth-child(3) > a,
.header:has(.submenu .group:nth-child(4):hover) .gnb__depth1:nth-child(4) > a,
.header:has(.submenu .group:nth-child(5):hover) .gnb__depth1:nth-child(5) > a,
.header:has(.submenu .group:nth-child(6):hover) .gnb__depth1:nth-child(6) > a {color: var(--primary); font-weight: 700;}
.header .gnb__depth1:hover > a::before,
.header:has(.submenu .group:nth-child(1):hover) .gnb__depth1:nth-child(1) > a::before,
.header:has(.submenu .group:nth-child(2):hover) .gnb__depth1:nth-child(2) > a::before,
.header:has(.submenu .group:nth-child(3):hover) .gnb__depth1:nth-child(3) > a::before,
.header:has(.submenu .group:nth-child(4):hover) .gnb__depth1:nth-child(4) > a::before,
.header:has(.submenu .group:nth-child(5):hover) .gnb__depth1:nth-child(5) > a::before,
.header:has(.submenu .group:nth-child(6):hover) .gnb__depth1:nth-child(6) > a::before {display: block; content: ''; position: absolute; bottom: 0; left: 50%; width: 35px; height: 3px; background: var(--primary); transform: translate(-50%, 50%); z-index: 1;}

.header__etc {display: flex; align-items: center;}
.header__lang {display: flex; align-items: center;}
.header__lang a {text-transform: uppercase; color: var(--color); padding-inline: 14px; position: relative;}
.header__lang a:not(.active):hover {color: var(--primary);}
.header__lang a.active {color: var(--primary); font-weight: 700; pointer-events: none;}
.header__lang a:not(:last-child)::after {position: absolute; top: 50%; right: 0; width: 1px; height: .9em; content: ''; display: block; transform: translate(0, -45%); background: var(--color);}

@media screen and (max-width: 1819px) {
  .brand-links {flex-direction: row;}
  .submenu .container {flex-direction: column; gap: 20px;}
  .brand-links {padding-top: 0;}
  .brand-links a {height: auto;}
}
@media screen and (max-width: 1619px) {
  .header {--logo-w: 150px; --gnb-w: 180px;}
}
@media screen and (max-width: 1399px) {
  .header {height: 60px;}
  .header__logo {height: auto; width: 150px;}
  .header__container {width: 100%!important;}
  .gnb {display: none;}
  .submenu {display: none!important;}
  .header__lang {display: none;}
}



/* Sitemap */
.btn--sitemap-toggle {display: none;}
.sitemap {display: none;}
@media screen and (max-width: 1399px) {
  .btn--sitemap-toggle {display: flex; flex-direction: column; justify-content: center; gap: 5px; border: none; outline: none; box-shadow: none; appearance: none; width: 40px; height: 40px; border-radius: 4px; padding: 6px 10px; cursor: pointer; position: relative; overflow: hidden;}
  .btn--sitemap-toggle .bar {width: 100%; height: 2px; background: var(--gray); transition: .4s; border-radius: 2px; transform-origin: left;}

  .sitemap--open .header .btn--sitemap-toggle .bar {background: var(--primary-dark);}
  .sitemap--open .btn--sitemap-toggle .bar:nth-of-type(2) {transform: scaleX(.7);}

  .sitemap {display: block; position: fixed; top: 0; left: 0; z-index: 9998; width: 100%; height: 100%; pointer-events: none;}
  .sitemap__dim {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.6); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); opacity: 0; transition: opacity .5s;}
  .sitemap__container {position: absolute; z-index: 10; top: 60px; right: 0; width: 100%; max-width: 520px; height: calc(100% - 60px); background: #fff; overflow: hidden auto; --padding-inline: 30px; transform: translate(100%); opacity: 0; transition: opacity .5s, transform .5s; display: flex; flex-direction: column;}
  .sitemap__container :where(.body, .foot) {padding-block: 20px;}
  .sitemap__container :where(.body, .foot) .block {padding-inline: var(--padding-inline); padding-block: 10px;}
  .sitemap__container :where(.body, .foot) .block-title {font-size: 20px; margin-bottom: 0.8em; color: var(--gray);}

  body.sitemap--open .sitemap {pointer-events: initial!important;}
  body.sitemap--open .sitemap__dim {opacity: 1;}
  body.sitemap--open .sitemap__container {opacity: 1; transform: translate(0);}

  .sitemap_gnb {}
  .sitemap_gnb__item {padding-block: .7em;}
  .sitemap_gnb__item:not(:last-child) {border-bottom: 1px solid var(--gray-lighter);}
  .sitemap_gnb__item .trigger {display: flex; align-items: center; justify-content: space-between; font-size: 20px; text-transform: uppercase;}
  .sitemap_gnb__item .trigger .ico--plus {width: 1em; height: auto; aspect-ratio: 1 / 1;}
  .sitemap_gnb__item .trigger .ico--plus::before,
  .sitemap_gnb__item .trigger .ico--plus::after {background: var(--gray-light); border-radius: 2px;}
  .sitemap_gnb__item .trigger .ico--plus::before {width: 2px;}
  .sitemap_gnb__item .trigger .ico--plus::after {height: 2px;}
  .sitemap_gnb__item.active .trigger {color: var(--primary-dark); font-weight: 700;}
  .sitemap_gnb__item.active .trigger .ico--plus::before {display: none;}
  .sitemap_gnb__item.active .trigger .ico--plus::before,
  .sitemap_gnb__item.active .trigger .ico--plus::after {background: var(--primary-dark);}

  .sitemap_submenu {display: none; margin-block: 10px; padding: 0 0 40px 15px;}
  .sitemap_gnb__item.active .sitemap_submenu {display: block;}
  .sitemap_submenu__ls {font-size: 20px;}
  .sitemap_submenu__ls > .item {}
  .sitemap_submenu__ls > .item > a {display: block; padding-block: 5px; font-weight: 300;}
  .sitemap_submenu__ls > .item.active > a {font-weight: 500;}

  .sitemap__lang {display: flex; font-size: 18px;}
  .sitemap__lang a {display: flex; align-items: center; color: var(--gray); text-transform: uppercase;}
  .sitemap__lang a.active {color: var(--primary-dark); font-weight: 600;}
  .sitemap__lang a:not(:last-child)::after {width: 1px; height: .7em; content: ''; background: var(--gray); margin: 0 .6em;}

  .sitemap .brand-links a {width: 100%; background: #fff;}
  .sitemap .foot {margin-top: auto;}
}
@media screen and (max-width: 767px) {
  .btn--sitemap-close .ico--times {width: 40px;}

  .sitemap__lang {font-size: 15px;}
  .sitemap__container :where(.body, .foot) .block {padding-bottom: 0;}
  .sitemap__container {--padding-inline: 20px;}

  .sitemap_gnb__item {padding-block: 0.5em;}
  .sitemap_gnb__item .trigger {font-size: 16px;}
  .sitemap_submenu {margin-block: 8px 0; padding: 0 0 25px 10px;}
  .sitemap_submenu__ls {font-size: 16px;}
  .sitemap_submenu__ls > .item > a {padding-block: 2px;}

  .sitemap .brand-links {}
  .sitemap .brand-links a {padding: 15px 15px; min-height: 0;}
  .sitemap .brand-links a img {width: auto; height: 20px; margin-bottom: 5px;}
  .sitemap .brand-links a span {font-size: 14px; line-height: 1;}
  .brand-links a:nth-child(2) img {height: 25px;}
}



/* Footer */
.footer {background: var(--dark-navy); color: #868A97; font-family: var(--font-secondary); overflow: hidden;}
.footer .container {padding-block: 50px; display: flex; align-items: center;}
.footer .f-info {width: 46%; padding-right: 75px; padding-block: 65px; border-right: 1px solid rgb(112, 112, 112, .3);}
.footer .f-info .logo {display: block; width: 308px;}
.footer .f-info .copyright {color: #fff; opacity: .3; display: block; margin-top: 0.5em;}
.footer .f-info address {padding-top: 57px;}
.footer .f-info address .addr {}
.footer .f-info address .cnt {}
.footer .f-info .links {display: flex; gap: 40px; padding-top: 27px;}
.footer .f-info .links a:hover {color: #fff;}
.footer .f-etc {width: 54%; padding-left: 75px;}
.footer .f-etc .inq {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 34px;}
.footer .f-etc .inq .tit {font-size: 35px; color: #fff; line-height: 1.4;}
.footer .f-etc .inq .round-button {height: 52px; border-color: var(--primary);}
.footer .f-etc .inq .round-button {color: var(--primary);}
.footer .f-etc .inq .round-button::after {border-color: var(--primary);}
.footer .f-etc .sns {display: flex; align-items: center; background: rgb(27, 35, 70, .3); padding: 30px 86px; border-radius: 30px; border: 1px solid rgb(56, 64, 97, .3);}
.footer .f-etc .sns .divider {margin: 0 85px; width: 1px; height: 70px; background: #707070; opacity: .4; flex-shrink: 0;}
.footer .f-etc .sns .gr {}
.footer .f-etc .sns .gr .tit {display: block; opacity: .3; font-family: var(--font-secondary); margin-bottom: 0.4em;}
.footer .f-etc .sns .gr .wrap {display: flex; gap: 43px; align-items: center;}
.footer .f-etc .sns .gr .wrap a:hover {opacity: .5;}
.footer .f-etc .sns .gr.f-sns .wrap {gap: 38px;}

@media screen and (max-width: 1399px) {
  .footer .container {padding-block: 70px; flex-direction: column;}
  .footer .f-info {order: 1; width: 100%; padding: 50px 0 0 0; border-right: none;}
  .footer .f-etc {order: 0; width: 100%; padding: 0 0 50px 0; border-bottom: 1px solid rgb(112, 112, 112, .3);}
  .footer .f-info address {padding-top: 20px;}
  .footer .f-etc .inq .tit {font-size: 24px;}
  .footer .f-etc .inq {align-items: center;}
  .footer .f-etc .sns {border-radius: 20px;}
  .footer .f-info .logo {width: 250px; margin-bottom: 20px;}
}
@media screen and (max-width: 767px) {
  .footer {font-size: 13px;}
  .footer .container {padding-block: 50px 25px;}
  .footer .f-etc {padding-bottom: 30px;}
  .footer .f-etc .inq {gap: 20px;}
  .footer .f-etc .inq .tit {font-size: 18px;}
  .footer .f-etc .inq .round-button {padding-inline: 15px; height: 42px; gap: 0.5em; flex-shrink: 0;}
  .footer .f-etc .sns {padding: 20px; flex-direction: column; align-items: flex-start;}
  .footer .f-etc .sns .divider {width: 100%; height: 1px; margin: 20px 0;}
  .footer .f-etc .sns .gr {display: flex; gap: 15px;}
  .footer .f-etc .sns .gr .tit {width: 80px; flex-shrink: 0; margin-bottom: 0;}
  .footer .f-etc .sns .gr .wrap {gap: 20px!important;}
  .footer .f-etc .sns .gr .wrap img {display: block; height: 24px;}
  .footer .f-info {padding-right: 60px; padding-top: 30px;}
  .footer .f-info .logo {width: 130px; margin-bottom: 20px;}
  .footer .f-info .links {flex-wrap: wrap; gap: 10px;}
  .footer .f-info .copyright {line-height: 1.5;}
}



/* Floating menu */
.floating-menu {--btn-size: 70px; --expanded-size: 220px; position: fixed; bottom: 40px; right: 40px; z-index: 8888; display: flex; flex-direction: column; align-items: flex-end; gap: 5px;}
.floating-menu .btn {--bg: #fff; width: var(--btn-size); height: var(--btn-size); border-radius: var(--btn-size); overflow: hidden; background: var(--bg); display: flex; align-items: center; justify-content: flex-start; gap: 5px; transition: width .5s var(--cubic-pop1); box-shadow: 10px 10px 20px rgb(0,0,0,.15);}
.floating-menu .btn .icon {width: var(--btn-size); height: var(--btn-size); flex-shrink: 0;}
.floating-menu .btn .icon svg {display: block; width: 100%; height: 100%;}
.floating-menu .btn .txt {font-size: 20px; font-weight: 600; color: #fff; white-space: nowrap; flex-shrink: 0;}
.floating-menu .btn:not(.has-hover):hover {opacity: .9;}
.floating-menu .btn.has-hover:hover {width: var(--expanded-size);}
.floating-menu .btn--inq {--bg: var(--secondary-dark);}
.floating-menu .btn--ns {--bg: var(--primary);}
.floating-menu .btn--top {border: 1px solid var(--gray); margin-top: 10px;}

@media screen and (max-width: 1399px) {
  .floating-menu {bottom: 25px; right: 25px; --btn-size: 60px; --expanded-size: 200px;}
  .floating-menu .btn .txt {font-size: 18px;}
}
@media screen and (max-width: 767px) {
  .floating-menu {bottom: 15px; right: 10px; --btn-size: 40px; --expanded-size: 40px;}
  .floating-menu .btn .txt {font-size: 15px;}
}



/* Policy */
.policy-doc {padding: 30px; border-radius: 10px; background: #FCFCFC; border: 1px solid #E8E8E8; font-size: 16px;}
.policy-doc dl {word-break: break-all;}
.en .policy-doc dl {word-break: normal;}
.policy-doc dt {display: block; font-weight: 700; color: var(--dark-navy); margin-bottom: 0.3em;}
.policy-doc dd {margin-bottom: 1.5em;}
.policy-doc dd :where(h1, h2, h3, h4, h5, h6) {color: var(--dark-navy); margin-bottom: 0.3em;}
.policy-doc dd .indent {padding-left: 1em;}
.policy-doc dd p {margin-bottom: 0.5em;}
.policy-doc dd table {width: 100%; font-size: 13px;}
.policy-doc dd table :where(th, td) {border: 1px solid var(--gray-lighter); padding: .3em .5em; line-height: 1.5;}
.policy-doc dd table thead th {background: var(--gray-light);}
.policy-doc .bullet > li::before {background: var(--primary);}
.policy-doc ol {margin-block: 1em;}
.policy-doc ol > li:not(:last-child) {margin-bottom: 0.7em;}

@media screen and (max-width: 1399px) {
  .policy-doc {padding: 30px 20px; font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .policy-doc {padding: 25px 15px; font-size: 14px;}
  .policy-doc dd .indent {padding-left: 0em;}
}