@charset "utf-8";
@import url('./defaults/reset.css?ver=240126');
@import url('./defaults/utils.css?ver=240126');
@import url('./defaults/board.css?ver=240126');
@import url('./defaults/popup.css?ver=240126');
@import url('./defaults/ckeditor5.css?ver=240126');
@import url('./defaults/scroll-ani-transition.css');

/* Variables */
:root {
  --container-width: 1214px;

  --primary: #105CF2;
  --secondary: #FFC400;
  --sky-blue: #A5C3FF;
  --orange: #FF6F00;
  --dark: #262626;
  --dark-navy: #010239;
  --gray-darker: #6A6A6A;
  --gray-dark: #8A8A8A;
  --gray: #B5B5B5;

  --scrollbar-color: var(--orange);

  --font-primary: "Pretendard", "맑은 고딕", sans-serif;
  --font-secondary: "Poppins", 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 */
* {letter-spacing: 0;}
body {font-family: var(--font-primary); line-height: 1.875; color: var(--dark); word-break: keep-all;}
img {display: block;}
.container {width: min(var(--container-width), calc(100% - 180px)); margin-inline: auto;}

.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--dark {color: var(--dark)!important;}
.fc--dark-navy {color: var(--dark-navy)!important;}
.fc--gray {color: var(--gray)!important;}

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

button {all: unset; cursor: pointer; box-sizing: border-box;}

.round-button {--bg: #fff; --color: #8A8A8A; --hover-bg: var(--orange); --hover-color: #fff; display: inline-flex; align-items: center; justify-content: center; text-align: center; height: 49px; border-radius: 49px; padding: 0 1.2em; background: var(--bg); font-size: 16px; color: var(--color); font-weight: 500; overflow: hidden;}
.round-button.blue {--bg: var(--primary); color: #fff;}

.tab-container {}
.tab-nav {display: flex; flex-wrap: wrap; gap: 45px; margin-bottom: 32px;}
.tab-nav button {--theme: var(--gray); display: flex; align-items: center; gap: 10px; font-size: 25px; color: var(--theme);}
.tab-nav button::before {content: ''; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--theme); flex-shrink: 0;}
.tab-nav button.active {--theme: var(--primary); font-weight: 700;}
.tab-wrapper {border-radius: 12px; overflow: hidden; background: #fff;}
.tab-content {display: none; padding: 50px;}
.tab-content.active {display: block;}

.checkbox-group {display: flex; flex-wrap: wrap; gap: 13px;}
.checkbox-group.vertical {flex-direction: column;}
.plx-checkbox {position: relative; display: flex; align-items: flex-start; gap: .7em; cursor: pointer;}
.plx-checkbox input {position: absolute; top: 6px; left: 4px; margin: 0; width: 0; height: 0; padding: 0;}
.plx-checkbox .chck {flex-shrink: 0; width: 23px; height: 23px; border-radius: 5px; display: flex; align-items: center; justify-content: center; background: #dedede; position: relative; z-index: 1;}
.plx-checkbox .label {color: var(--gray-dark); line-height: 1.4;}
.plx-checkbox input:checked ~ .chck {background: var(--primary);}
.plx-checkbox input:checked ~ .chck::after {content: ''; display: block; width: 8px; height: 8px; background: #fff; border-radius: 50%;}
.plx-checkbox input:checked ~ .label {color: var(--primary); font-weight: 700;}

.plx-inp-tit {display: block; font-size: 20px; font-weight: 700; line-height: 1.4; color: #000;}
.plx-inp-tit.req::after {content: "*"; color: var(--orange); display: inline-block; margin-left: 0.3em;}
.plx-inp-box {display: flex; gap: 15px; align-items: flex-start;}
.plx-inp-box .plx-inp-tit {flex-shrink: 0; height: 50px; display: flex; align-items: center;}
.plx-inp-box .inp-wrap {width: 100%; position: relative;}
.plx-inp-box .inp-wrap .inner {width: 100%; position: relative; overflow: hidden;}
.plx-inp-box .inp {width: 100%; height: 50px; background: #F1F1F1; border-radius: 5px; border: none; font-size: 17px; padding-inline: 20px;}
.plx-inp-box .inp-note:has(span) {}
.plx-inp-box .inp-note span {display: block; line-height: 1.35; margin-top: 0.8em;}
.plx-inp-box .inp-note span:empty {display: none;}
.plx-inp-box .inp-note .error {color: var(--orange);}
.plx-inp-box .inp-wrap .inner .placeholder {display: block; line-height: 1.35; position: absolute; top: 50%; z-index: 10; transform: translate(0, -50%); font-size: 15px; color: var(--gray-dark); pointer-events: none;}
.plx-inp-box .inp-wrap .inner .inp:focus ~ .placeholder {display: none;}

@media (hover: hover) {
  .round-button:hover {background: var(--hover-bg)!important; color: var(--hover-color)!important;}
}

@media screen and (max-width: 1399px) {
  .tab-nav {gap: 20px; margin-bottom: 20px;}
  .tab-nav button {font-size: 18px;}
  .tab-nav button::before {width: 7px; height: 7px;}
  .tab-content {padding: 40px 20px;}

  .plx-checkbox {gap: .5em;}
  .plx-checkbox .chck {width: 20px; height: 20px;}
  .plx-inp-tit {font-size: 16px;}
  .plx-inp-box {gap: 5px;}
  .plx-checkbox .label,
  .plx-inp-box .inp {font-size: 15px;}
}
@media screen and (max-width: 767px) {
  .tab-nav {flex-direction: column; gap: 5px;}
  .tab-nav button {background: #fff; border: 1px solid var(--gray); padding: 5px 15px; border-radius: 5px;}
  .tab-nav button.active {border-color: var(--theme);}
  .tab-content {padding: 40px 15px;}

  .plx-inp-box {display: block;}
  .plx-inp-box .plx-inp-tit {width: 100%!important; height: auto!important; margin-bottom: 0.3em;}
  .plx-inp-box .inp {height: 40px;}
  .plx-inp-box .inp-wrap .inner .placeholder {display: block!important; position: static; transform: none; font-size: 13px; margin-top: 0.5em;}
}


/* Header */
.header {position: fixed; top: 0; left: 0; z-index: 99999; width: 100%; height: 100px; transition: background .5s, transform .5s, height .5s;}
.header-container {width: min(1920px, calc(100% - 100px)); margin-inline: auto; height: 100%; display: flex; align-items: center; justify-content: space-between;}
.header-logo {position: relative; overflow: hidden; display: block;}
.header-logo img {transition: opacity .4s var(--cubic-pop1); opacity: 0;}
.header-logo img.logo-white {position: absolute; top: 0; left: 0;}
.header-nav {display: flex; align-items: center; justify-content: flex-end; gap: 87px;}
.header-nav .nav-lang {--color: #dfdfdf; --active-color: #fff; display: flex; align-items: center; color: var(--color); font-family: var(--font-secondary); font-weight: 500;}
.header-nav .nav-lang a {padding: 10px;}
.header-nav .nav-lang a.active {color: var(--active-color);}
.header-nav .nav-lang i {width: 1px; height: 0.8em; flex-shrink: 0; background: #fff;}
.header-nav .total-menu {position: relative;}
.header-nav .total-menu-opener {width: 55px; height: 48px; padding: 10px 0; display: flex; flex-direction: column; justify-content: space-between;}
.header-nav .total-menu-opener div {background: #fff; height: 4px; width: 100%; transition: transform .4s var(--cubic-pop1);}
.header-nav .total-menu-opener div:nth-child(1),
.header-nav .total-menu-opener div:nth-child(3) {width: 50%;}
.header-nav .total-menu-opener div:nth-child(3) {margin-left: auto;}
.header-nav .total-menu-dropdown-wrap {position: absolute; top: 100%; right: 0; padding-top: 10px; opacity: 0; pointer-events: none; transform: translate(10px, -10px); transition: opacity .5s var(--cubic-pop1), transform .5s var(--cubic-pop1);}
.total-menu-dropdown-wrap.mobile {display: none;}
.header-nav .total-menu-dropdown {background: #fefdfa; border-radius: 12px 12px 12px 12px; white-space: nowrap; padding-block: 25px; box-shadow: 0px 0px 20px rgb(0,0,0,.1);}
.header-nav .total-menu-dropdown > li > a {display: block; padding: 3px 35px 3px 20px; font-family: var(--font-secondary); color: var(--gray-dark);}

.header--scrolled .header-logo img.logo-white {opacity: 0!important;}
.header.theme--white .header-logo img.logo-white,
.header--scrolled .header-logo img.logo-origin,
.header.theme--dark .header-logo img.logo-origin {opacity: 1;}

.header--hide {transform: translate(0, -100%);}
.header--hide .header-nav .total-menu-dropdown-wrap {opacity: 0!important; pointer-events: none!important; transform: translate(10px, -10px)!important;}
.header--scrolled {background: rgb(255,255,255,1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); height: 80px;}
.header--scrolled .nav-lang {--color: var(--dark-navy); --active-color: var(--primary);}
.header--scrolled .nav-lang i {background: var(--gray);}
.header--scrolled .header-nav .total-menu-opener div {background: var(--dark-navy);}


@media (hover: hover) and (min-width: 1400px) {
  .header-nav .total-menu:hover .total-menu-opener div:nth-child(1) {transform: translate(100%);}
  .header-nav .total-menu:hover .total-menu-opener div:nth-child(3) {transform: translate(-100%);}
  .header-nav .total-menu-dropdown > li > a:hover {color: var(--primary);}
  .header-nav .total-menu:hover .total-menu-dropdown-wrap {opacity: 1; transform: translate(0); pointer-events: initial;}
}
@media screen and (max-width: 1399px) {
  .header {height: 60px;}
  .header-container {width: calc(100% - 30px);}
  .header-logo img {width: 120px;}
  .header-nav {gap: 40px;}
  .header-nav .total-menu-opener {width: 40px; height: 34px; padding-block: 8px;}
  .header-nav .total-menu-opener div {height: 2px;}

  .header-nav .total-menu-dropdown-wrap {display: none;}
  .total-menu-dropdown-wrap.mobile {display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99998; background: rgb(0,0,0,.8); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 24px; color: #fff; text-transform: uppercase; pointer-events: none; opacity: 0; transform: translate(0, -50%); transition: opacity .5s var(--cubic-pop1), transform .5s var(--cubic-pop1);}
  .total-menu-dropdown-wrap.mobile .total-menu-dropdown > li {padding-block: 10px;}
  .total-menu-dropdown-wrap.mobile.active {opacity: 1; transform: translate(0); pointer-events: initial;}

  
  body:has(.total-menu-dropdown-wrap.mobile.active) {overflow: hidden;}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header {background: rgb(0,0,0,0)!important;}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header .header-logo img.logo-white {opacity: 1!important;}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header .header-logo img.logo-origin {opacity: 0!important;}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header .nav-lang {--color: #fff!important; --active-color: #fff!important;}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header-nav .total-menu-opener div {background: #fff!important;}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header-nav .total-menu .total-menu-opener div:nth-child(1) {transform: translate(100%);}
  body:has(.total-menu-dropdown-wrap.mobile.active) .header-nav .total-menu .total-menu-opener div:nth-child(3) {transform: translate(-100%);}

}
@media screen and (max-width: 767px) {
  .header-nav {gap: 20px;}
}


/* Footer */
.footer {padding-block: 58px 72px; background: #fff; position: relative; z-index: 100; color: #444;}
.footer .container {display: flex; justify-content: space-between; align-items: flex-end;}
.footer .info {padding-left: 75px;}
.footer .info .logo {display: block; margin-left: -75px;}
.footer .info .logo img {display: block; width: 298px;}
.footer .info address {line-height: 1.8;}
.footer .info address .tit {color: var(--dark-navy); line-height: 1.8;}
.footer .info address .contact {display: flex; gap: 1.5em;}
.footer .etc .to-pluxity-homepage {display: flex; align-items: center; justify-content: center; text-align: center; width: 115px; height: 115px; border-radius: 50%; color: #fff; background: var(--primary); flex-direction: column; gap: 5px; margin: 0 0 30px auto;}
.footer .etc nav {color: var(--gray-dark); display: flex; gap: .7em; justify-content: flex-end;}
.footer .copyright {display: block; margin-top: 30px; color: var(--gray-dark);}
.footer .copyright.mobile {display: none;}
.footer .info-top {display: flex; align-items: center; margin-bottom: 32px; gap: 30px;}
.footer .info-top .dropdown {margin-top: 10px;}
.footer .dropdown {position: relative; height: 2.6em; font-size: 18px; --border-color: #dadada;}
.footer .dropdown-trigger {display: flex; align-items: center; justify-content: space-between; gap: 2em; width: 100%; height: 100%; padding-inline: 1em 1em; border: 1px solid var(--border-color); border-radius: 1.3em; font-weight: 700; white-space: nowrap; color: var(--primary); background: #fff;}
.footer .dropdown-trigger::after {display: block; content: ''; width: 0.5em; height: 0.5em; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); transform: translateY(-25%) rotate(135deg);}
.footer .dropdown-menu {position: absolute; z-index: 100; top: 100%; left: 0; width: 100%; border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 1.3em 1.3em; padding-block: 0.5em; display: none; background: #fff;}
.footer .dropdown-menu-item {display: block; padding: 0.2em 1em; font-weight: 600;}
.footer .dropdown:hover .dropdown-trigger {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.footer .dropdown:hover .dropdown-menu {display: block;}

@media (hover: hover) {
  .footer .etc .to-pluxity-homepage:hover {background: var(--dark-navy);}
  .footer .etc nav .btn:hover {opacity: .7;}

  .footer .dropdown-menu-item:hover {color: var(--primary);}
}
@media screen and (max-width: 1399px) {
  .footer {font-size: 15px;}
  .footer .container {flex-direction: column; align-items: flex-start;}
  .footer .etc {margin-left: auto;}
  .footer .info {padding-left: 58px;}
  .footer .info .logo {margin-left: -58px;}
  .footer .info .logo img {width: 220px;}
  .footer .copyright {font-size: 14px;}

  .footer .info-top {margin-bottom: 24px; gap: 20px; width: 100%;}
  .footer .dropdown {font-size: 16px; margin-top: 0;}
}
@media screen and (max-width: 767px) {
  .footer .info {padding-left: 0; width: 100%; padding-right: 40px;}
  .footer .info .logo {margin-left: 0;}
  .footer .info .logo img {width: 180px;}
  .footer .info address {padding-left: 10px;}
  .footer .info address .tit {margin-bottom: 0.15em;}
  .footer .info address .contact {flex-direction: column; gap: 5px 10px; margin-top: 0.5em;}
  .footer .etc {margin-left: 0; margin-top: 30px; width: 100%; padding-right: 40px;}
  .footer .etc .to-pluxity-homepage {width: 100%; height: auto; border-radius: 5px; flex-direction: row; justify-content: space-between; margin-bottom: 15px; padding: 5px 15px;}
  .footer .etc .to-pluxity-homepage svg {width: 16px; height: auto;}
  .footer .etc nav {font-size: 14px; gap: .4em;}
  .footer .copyright.pc {display: none;}
  .footer .copyright.mobile {display: block;}

  .footer .dropdown {font-size: 15px;}
  .footer .dropdown-trigger {gap: 1em;}

  .footer .info-top {margin-bottom: 18px; flex-direction: column; align-items: flex-start; gap: 10px;}
  .footer .info-top .dropdown {width: 100%;}
}


/* Floating */
.floating-nav {position: fixed; bottom: 42px; right: 42px; z-index: 8888; display: flex; flex-direction: column; gap: 12px;}
.floating-nav .btn {width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; box-shadow: 5px 5px 10px rgb(0,0,0,.15);}
.floating-nav .btn-inq {background: var(--primary);}
.floating-nav .btn-top {}
@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .floating-nav {bottom: 20px; right: 20px;}
}
@media screen and (max-width: 767px) {
  .floating-nav {bottom: 15px; right: 15px; gap: 8px;}
  .floating-nav .btn {width: 38px; height: 38px; padding: 8px;}
}


/* Modal */
.modal {--width: 890px; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 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;}
}


/* 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;}
}



/* Format */
@media (hover: hover) {}
@media screen and (max-width: 1399px) {}
@media screen and (max-width: 767px) {}