@charset "UTF-8";
@import "/assets/home/css/swiper-bundle.css";
@import "/assets/home/css/bootstrap.css";
/*
http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@import "https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css";
@import "https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.3.7/static/pretendard.css";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: "Pretendard", "Noto Sans", "apple sd gothic neo", sans-serif;
  vertical-align: baseline;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

html {
  scroll-behavior: unset !important;
}

body {
  line-height: 1.4;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  display: block;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: 0;
  outline: 0;
  font-family: "Pretendard", "Noto Sans", "apple sd gothic neo", sans-serif;
}

select {
  background-color: initial;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=checkbox] {
  cursor: pointer;
}

h1 {
  font-size: 80px;
  font-weight: 700;
  font-family: "SUITE", sans-serif;
}
h1 * {
  font-family: inherit;
}

h2 {
  font-size: 64px;
  font-weight: 700;
  font-family: "SUITE", sans-serif;
}
h2 * {
  font-family: inherit;
}

h3 {
  font-size: 46px;
  font-weight: 700;
  font-family: "SUITE", sans-serif;
}
h3 * {
  font-family: inherit;
}

h4 {
  font-size: 32px;
  font-weight: 700;
  font-family: "SUITE", sans-serif;
}
h4 * {
  font-family: inherit;
}

h5 {
  font-size: 24px;
  font-weight: 700;
  font-family: "SUITE", sans-serif;
}
h5 * {
  font-family: inherit;
}

h6 * {
  font-family: inherit;
}

.suite {
  font-family: "SUITE", sans-serif;
}

.pretendard {
  font-family: "Pretendard", sans-serif;
}

.meta-red {
  color: #fa3158 !important;
}

.meta-blue {
  color: #1e85ff !important;
}

.text-line {
  text-decoration: line-through;
}

.meta-black-1 {
  color: #333 !important;
}

.meta-black-2 {
  color: #666 !important;
}

.meta-black-3 {
  color: #999 !important;
}

.meta-black-4 {
  color: #ccc !important;
}

.meta-black-5 {
  color: #ddd !important;
}

html {
  color: #333;
}

body {
  min-width: 1008px;
}

* {
  color: inherit;
  word-break: keep-all;
}

.modal-backdrop {
  width: 100%;
  height: 100%;
}

.m-container {
  max-width: 1220px;
  padding: 0 20px;
  width: 100%;
  height: 100%;
  margin: auto;
}

header {
  width: 100%;
}
header .header-wrap {
  position: fixed;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
}
header .header-wrap.scrolled {
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}
header nav {
  gap: 44px;
  display: flex;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
header .right-menu {
  display: flex;
  gap: 24px;
  align-items: center;
}
header .login {
  display: flex;
}
header .login a {
  color: #999;
}
header .login a:first-child::after {
  content: "";
  width: 1px;
  height: 16px;
  margin: 0 12px;
  background-color: #999;
}
header .logo {
  width: 132px;
  height: 28px;
  background-size: 128px;
  background-image: url(/assets/home/images/common/logo.svg);
  background-repeat: no-repeat;
}
header.header-2 .header-wrap.scrolled {
  background: rgba(0, 0, 0, 0.3);
}
header.header-2 nav {
  color: #fff;
}
header.header-2 .login a {
  color: #fff;
  opacity: 0.7;
}
header.header-2 .logo {
  background-image: url(/assets/home/images/common/logo-2.svg);
}
header.main .header-wrap {
  background: rgba(255, 255, 255, 0.5);
}
header.detail .header-wrap {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #fff;
}
.top-banner {
  position: sticky;
  background-color: #222;
  font-size: 18px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
  min-height: 52px;
  display: none;
  z-index: 100;
}
.top-banner.active {
  display: flex;
}
.top-banner span {
  color: #c9c9c9;
}
.top-banner p {
  color: #fff;
}
.top-banner a {
  display: flex;
  padding: 4px 12px 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 2px;
  border-radius: 40px;
  border: 1px solid #fa3158;
  background: #fa3158;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.top-banner button {
  background-color: initial;
  position: absolute;
  right: 20px;
  padding: 12px;
  top: 50%;
  translate: 0 -50%;
  color: #fff;
  opacity: 0.5;
  font-size: 20px;
}
.top-banner.notchrome {
  top: 40px;
}

.browser-alert {
  position: sticky;
  top: 0px;
  height: 40px;
  background-color: #ffea38;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.browser-alert a {
  font-size: 14px;
  font-weight: 500;
  text-decoration: underline;
  color: #a83708;
}
.browser-alert a:hover {
  color: #2d2d2d;
}
.browser-alert a i {
  margin-right: 6px;
  color: #2d2d2d;
}
.browser-alert button {
  background-color: initial;
  position: absolute;
  right: 20px;
  padding: 12px;
  top: 50%;
  translate: 0 -50%;
  color: #2d2d2d;
  font-size: 20px;
}

#wrap {
  min-height: calc(100vh - 354px);
  padding-top: 72px;
  overflow-x: hidden;
}

footer {
  background-color: #333;
  padding: 60px 0 150px;
  width: 100%;
}
footer * {
  color: #fff;
}
footer .m-container {
  gap: 24px;
  display: flex;
  justify-content: space-between;
}
footer .footer-left {
  min-width: 186px;
}
footer .footer-left .logo {
  filter: grayscale(1) brightness(100);
  width: 186px;
  display: block;
}
footer .footer-left p {
  color: #fff;
  opacity: 0.5;
  font-family: "SUITE", sans-serif;
  margin: 12px 0 40px;
}
footer .sns-list {
  display: flex;
  margin-bottom: auto;
}
footer .sns-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  font-size: 16px;
}
footer .sns-list a:last-child {
  font-family: "SUITE", sans-serif;
}
footer .link-list {
  display: flex;
  align-items: center;
  gap: 32px;
}
footer .link-list a {
  font-family: "SUITE", sans-serif;
  font-weight: 700;
}
footer .link-list a:hover {
  text-decoration: underline;
}
footer .address {
  margin-top: 32px;
}
footer .address p {
  font-size: 14px;
  opacity: 0.7;
  display: flex;
  align-items: center;
  font-weight: 400;
  line-height: 1.6;
}
footer .address span:last-child::after {
  display: none;
}
footer .address span::after {
  content: "";
  margin: 0 8px;
  display: inline-block;
  width: 1px;
  background-color: #fff;
  height: 12px;
}

.meta-banner {
  background: url("/assets/home/images/common/banner-background.png") no-repeat;
  background-position: center;
  background-size: cover;
  height: 304px;
  padding: 0 32px;
}
.meta-banner .m-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meta-banner h4 {
  color: #fff;
  font-family: "SUITE", sans-serif;
  font-weight: 800;
  line-height: 1.5;
}
.meta-banner--02 {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%), #358aef;
  background-blend-mode: soft-light, normal;
}
.meta-banner--02 .text-area h4 {
  font-size: 36px;
}
.meta-banner--02 .text-area p {
  font-size: 16px;
  color: #fff;
  opacity: 0.8;
  margin-top: 8px;
}
.meta-banner--02 .text-area address {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  opacity: 0.6;
}
.meta-banner--02 .text-area address p i {
  margin-right: 4px;
}
.meta-banner--02 .btn-basic {
  position: relative;
}
.meta-banner--02 .btn-basic::before, .meta-banner--02 .btn-basic::after {
  opacity: 0;
  visibility: hidden;
}
.meta-banner--02 .btn-basic::before {
  background-color: #fff;
  rotate: 45deg;
  content: "";
  position: absolute;
  bottom: -24px;
  width: 16px;
  height: 16px;
  border-radius: 2px;
}
.meta-banner--02 .btn-basic:after {
  position: absolute;
  width: fit-content;
  padding: 0 12px;
  content: "본사로 연락 후 버튼을 눌러주세요.";
  bottom: -44px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-size: 12px;
  color: #333;
  font-weight: 400;
  background-color: #fff;
  border-radius: 8px;
}
@keyframes moveBannerToolTip {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 15px;
  }
}
.meta-banner--02 .btn-basic:hover:after, .meta-banner--02 .btn-basic:hover::before {
  opacity: 1;
  visibility: visible;
  transition: all 0.2s ease-out;
  animation-name: moveBannerToolTip;
  animation-duration: 1.2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}
.meta-banner--03 {
  height: 214px;
  background: linear-gradient(315deg, #1e85ff 0%, #57a4ff 100%);
}
.meta-banner--03 .m-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.meta-banner--03 h4 {
  color: #fff;
  font-size: 36px;
  font-weight: 800;
  font-family: "SUITE", sans-serif;
}
.meta-banner--03 .right-area {
  display: flex;
  gap: 16px;
}
.meta-banner--03 .right-area img {
  width: auto;
}

.btn-basic {
  height: 58px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  padding: 0 36px;
  font-weight: 800;
  font-family: "Pretendard", sans-serif;
}
.btn-basic.fill.white {
  background-color: #fff;
}
.btn-basic.fill.white p {
  background: linear-gradient(to right, #1e85ff, #57a4ff);
  color: transparent;
  -webkit-background-clip: text;
}
.btn-basic.fill.red {
  background-color: #fa3158;
}
.btn-basic.fill.red p {
  color: #fff;
}
.btn-basic.fill.blue {
  background-color: #1e85ff;
}
.btn-basic.fill.blue p {
  color: #fff;
  font-weight: 700;
}
.btn-basic.small {
  height: 40px;
  font-size: 14px;
  padding: 0 16px;
  border-radius: 4px;
}
.btn-basic.medium {
  height: 52px;
  font-size: 16px;
}

.pagination {
  margin-top: 80px;
  margin-bottom: 160px;
}
.pagination__wrap {
  display: flex;
  margin: auto;
  gap: 2px;
}
.pagination__wrap div {
  width: 32px;
  height: 32px;
  display: flex;
  margin-top: -4px;
  align-items: flex-end;
  justify-content: center;
}
.pagination a {
  width: 32px;
  height: 32px;
  font-size: 14px;
  font-weight: 400;
  display: flex;
  color: #333;
  align-items: center;
  justify-content: center;
}
.pagination a.active {
  color: #1e85ff;
  border-radius: 4px;
  background: var(--light-mode-neutral-0, #fff);
  box-shadow: 0px 1px 4px 0px rgba(26, 26, 67, 0.1);
}
.pagination a i {
  color: #666;
}

.search-input {
  position: relative;
}
.search-input input {
  height: 48px;
  padding-left: 40px;
  padding-right: 16px;
  min-width: 295px;
  width: 100%;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  color: #333;
  outline: 0;
}
.search-input input::placeholder {
  color: #ccc;
}
.search-input input:focus {
  border: 1px solid #1e85ff;
}
.search-input input::-webkit-search-decoration, .search-input input::-webkit-search-cancel-button, .search-input input::-webkit-search-results-button, .search-input input::-webkit-search-results-decoration {
  appearance: none;
  width: 10px;
  height: 10px;
  background: url(/assets/home/images/common/close-alert-icon.svg) center center no-repeat;
  cursor: pointer;
}
.search-input .fa-magnifying-glass {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  font-size: 14px;
}
.search-input button {
  font-size: 14px;
  background: initial;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  position: absolute;
}
.search-input button i {
  color: #999;
}

.hash {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 26px;
}
.hash__list {
  display: flex;
  gap: 8px;
}
.hash__item {
  height: 44px;
  border-radius: 44px;
  background-color: #f8f8f8;
  color: #999;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  cursor: pointer;
  font-weight: 500;
}
.hash__item.active {
  background-color: #fa3158;
  color: #fff;
}
.hash--ract .hash__list {
  gap: 8px;
}
.hash--ract .hash__item {
  background-color: initial;
  border-radius: 4px;
  height: 40px;
  border: 1px solid #eaeaea;
  padding: 0 16px;
  color: #333;
  font-weight: 700;
}
.hash--ract .hash__item.active {
  border: 1px solid #fa3158;
  color: #fa3158;
}

.batch-box {
  opacity: 0;
}

.history--promotion {
  position: relative;
}
.history--promotion .year {
  font-size: 40px;
  font-weight: 800;
  color: #ddd;
}
.history--promotion .line {
  position: relative;
  margin: 40px 0;
}
.history--promotion .line:after {
  content: "";
  display: block;
  width: 100%;
  background-color: #eaeaea;
  height: 1px;
}
.history--promotion .line .circle {
  width: 10px;
  height: 10px;
  background-color: #000;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.history--promotion ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history--promotion ul li {
  font-size: 16px;
  display: flex;
  gap: 16px;
}
.history--promotion .number {
  min-width: 20px;
  font-weight: 800;
  color: #000;
}
.history--promotion .history__area {
  transition: all 0.2s ease-out;
}
.history--promotion .history__area.active .year {
  color: #000;
}
.history--promotion .history__cover {
  width: calc((100vw - 1116px) / 2);
  height: 100%;
  right: 100%;
  position: absolute;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) 6.59%, #ffffff 65%);
  top: 0;
  z-index: 10;
}
.history .historySwiper {
  overflow: initial;
}
.history .historySwiper .swiper-slide {
  cursor: pointer;
  padding-bottom: 160px;
}
.history .historySwiper .swiper-slide-active .year {
  color: #000;
}

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.ractangle-check {
  display: flex;
  width: 100%;
  gap: 8px;
}
.ractangle-check__item {
  flex: 1;
  position: relative;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
}
.ractangle-check__item label {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  display: flex;
  padding-left: 48px;
  align-items: center;
  border: 1px solid #eaeaea;
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
}
.ractangle-check__item input[type=checkbox] {
  position: relative;
  z-index: 1;
  width: 0;
  height: 0;
}
.ractangle-check__item input[type=checkbox]::before {
  content: "";
  display: block;
  background-image: url("/assets/home/images/common/checkbox-empty.svg");
  background-size: 20px;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
}
.ractangle-check__item input[type=checkbox]:checked::before {
  background-image: url("/assets/home/images/common/checkbox.svg");
}
.ractangle-check__item input[type=checkbox]:checked + label {
  background-color: #f6f6f9;
  z-index: 0;
  color: #1e85ff;
}

 .ractangle-check__item.check-red input[type=checkbox]:checked::before {
    background-image: url("/assets/home/images/common/check-red.svg");
 }
 .ractangle-check__item.check-red input[type=checkbox]:checked + label {
  background-color: #f6f6f9;
  z-index: 0;
  color: #fa3158;
}


.check-set > label {
  font-size: 12px;
  color: #333;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
}
.check-set > label .essential {
  color: #fa3158;
  margin-top: 1px;
  margin-left: 1px;
  align-self: flex-start;
  text-transform: uppercase;
}
.check-set .check-set__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.check-basic {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.check-basic input[type=checkbox] {
  appearance: none;
}
.check-basic input[type=checkbox]::before {
  content: "\f00c";
  display: block;
  font-family: "Font Awesome 6 Sharp";
  width: 20px;
  height: 20px;
}
.check-basic input[type=checkbox]:checked::before {
  color: #fa3158;
}
.check-basic input[type=checkbox]:checked + label {
  z-index: 0;
}
.check-basic label {
  font-size: 14px;
  color: #333;
  font-weight: 500;
  justify-content: space-between;
}
.check-basic label a {
  text-decoration: underline;
}

.radio-set > label {
  font-size: 12px;
  color: #333;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  height: 20px;
  width: 100%;
  display: flex;
  align-items: center;
}
.radio-set > label .essential {
  color: #fa3158;
  margin-top: 1px;
  margin-left: 1px;
  align-self: flex-start;
  text-transform: uppercase;
}
.radio-set__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-set__item {
  border-radius: 4px;
  border: 1px solid #dcdce4;
  padding: 24px;
  position: relative;
  color: #333;
}
.radio-set__item h6 {
  font-size: 14px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
  margin-bottom: 4px;
}
.radio-set__item p {
  font-size: 12px;
  font-weight: 400;
}
.radio-set__item input[type=radio] {
  position: relative;
  z-index: 1;
  width: 20px;
  height: 20px;
  appearance: none;
  border-radius: 50%;
  border: 1px solid #c0c0cf;
}
.radio-set__item input[type=radio]:checked {
  accent-color: #1e85ff;
  background-color: rgba(30, 133, 255, 0.1);
  border: 1px solid #1e85ff;
}
.radio-set__item input[type=radio]:checked::after {
  content: "";
  background-color: #1e85ff;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
}
.radio-set__item input[type=radio]:checked + label {
  background-color: #f6f6f9;
}
.radio-set__item label {
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  padding-left: 60px;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
}

.selectbox__list {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.selectbox__item {
  flex: 1;
}
.selectbox__item {
  position: relative;
}

.select-set label {
  font-size: 12px;
  color: #333;
  font-weight: 700;
  margin-bottom: 8px;
  height: 20px;
  display: flex;
  align-items: center;
}
.select-set label .essential {
  color: #fa3158;
  margin-top: 1px;
  margin-left: 1px;
  align-self: flex-start;
  text-transform: uppercase;
}

.select-basic {
  position: relative;
}
.select-basic select {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  color: #666;
  width: 100%;
  appearance: none;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  position: relative;
  z-index: 1;
}
.select-basic::after {
  content: "";
  z-index: 0;
  background-image: url("/assets/home/images/common/select.svg");
  background-size: 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
}

.input-set {
  width: 100%;
}
.input-set label {
  font-size: 12px;
  color: #333;
  font-weight: 700;
  margin-bottom: 8px;
  display: block;
  height: 20px;
  display: flex;
  align-items: center;
}
.input-set label .essential {
  color: #fa3158;
  margin-top: 1px;
  margin-left: 1px;
  align-self: flex-start;
  text-transform: uppercase;
}

.textarea-basic {
  padding: 16px 16px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  width: 100%;
  min-height: 200px;
  font-size: 14px;
  color: #666;
  appearance: none;
}

.textarea-basic.h-mini {
  min-height: 80px;
}

.input-basic {
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  appearance: none;
}
.input-basic::placeholder {
  color: #999;
}
.input-basic.xs {
  width: 56px;
}
.input-basic.sm {
  width: 125px;
  text-align: center;
}

button {
  background: transparent;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}

.division {
  width: 100%;
  height: 1px;
  background-color: #eaeaea;
}

.agreement-check {
  border-radius: 4px;
}
.agreement-check .top-area {
  padding: 12px 0;
}
.agreement-check .bottom-area {
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid #eaeaea;
}
.agreement-check--type02 {
  border-radius: 0;
  border: 0;
}
.agreement-check--type02 .top-area,
.agreement-check--type02 .bottom-area {
  padding-left: 0;
  padding-right: 0;
}
.agreement-check--type02 label .underline {
  text-decoration: underline;
}
.agreement-check--type02 .top-area label {
  font-size: 16px;
  font-weight: 600;
}
.agreement-check--type02 .bottom-area label {
  font-size: 14px;
  color: #666;
  font-weight: 400;
}

.invalid-alert {
  display: none;
  padding: 16px 0;
  margin-bottom: 16px;
  font-weight: 600;
}
.invalid-alert.active {
  display: block;
}

.invalid-input {
  color: #d02b20;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  display: none;
}

.invalid-active input,
.invalid-active select,
.invalid-active textarea {
  border-color: #d02b20;
}
.invalid-active .invalid-input {
  display: block;
}

.input__list {
  display: flex;
  gap: 8px;
}
.input__item {
  flex: 1;
}

.basic-alert .modal-content {
  border-radius: 8px;
}
.basic-alert .modal-dialog {
  width: 328px;
}
.basic-alert .modal-body {
  padding: 24px;
}
.basic-alert h5 {
  font-size: 20px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
  text-align: center;
  margin-bottom: 16px;
}
.basic-alert p {
  font-size: 14px;
  color: #666;
  text-align: center;
}
.basic-alert .button-set {
  margin-top: 24px;
  display: flex;
  gap: 8px;
}
.basic-alert .button-set button {
  border: 1px solid #868e96;
  color: #868e96;
  border-radius: 6px;
  background-color: initial;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
}
.basic-alert .button-set button.red {
  border-color: #fa3158;
  background-color: #fa3158;
  color: #fff;
}

.basic-modal .modal-dialog {
  max-width: 640px;
  border-radius: 8px;
  overflow: hidden;
}
.basic-modal .modal-header {
  border-radius: 0;
  margin-top: 8px;
  padding: 0 24px;
  height: 56px;
  position: relative;
  border-bottom: 0;
}
.basic-modal .modal-header .modal-title {
  font-size: 20px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
}
.basic-modal .modal-header button {
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  padding: 8px;
  background-color: initial;
  font-size: 20px;
}
.basic-modal .modal-body {
  padding: 16px 24px;
  background-color: #fff;
}
.basic-modal .summary {
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
}
.basic-modal .summary h6 {
  font-weight: 600;
}
.basic-modal .summary p {
  font-weight: 400;
}

aside {
  position: fixed;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  background-color: #fff;
  border-radius: 16px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid #eaeaea;
  background-color: #fff;
  z-index: 1000;
}
aside ul li {
  border-bottom: 1px solid #eaeaea;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 96px;
}
aside ul li:last-child {
  border-bottom: 0;
}
aside ul li .fa-sharp {
  font-size: 24px;
  color: #1e85ff;
  display: block;
  margin-bottom: 8px;
}
aside ul li a {
  padding: 20px 0;
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
aside ul li.top a {
  padding: 12px 0;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #1e85ff;
}

.text-set {
  color: #333;
  font-family: Pretendard;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
}
.text-set.large {
  font-size: 32px;
  line-height: 140%;
}
.text-set.semiTitle {
  color: #181826;
  text-align: center;
  font-family: SUITE;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 24px */
  letter-spacing: -0.96px;
}
.text-set.medium {
  font-size: 20px;
}
.text-set.small {
  font-size: 16px;
  font-weight: 600;
}
.text-set.small-2 {
  font-size: 14px;
}
.text-set.xsmall {
  font-size: 12px;
}
.text-set.gray {
  color: #666;
}
.text-set.lightgray {
  color: var(--bwbw-6, #97979d);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.text-set.red {
  color: #fa3158;
}
.text-set.t-400 {
  font-weight: 400;
}
.text-set.center {
  text-align: center;
}
.text-set.sub {
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 13.2px */
  letter-spacing: -0.22px;
}
.text-set.link {
  color: var(--bwbw-6, #97979d);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  letter-spacing: -0.28px;
  text-decoration-line: underline;
}

.help-info {
  position: fixed;
  color: #97979d;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
  margin-top: 12px;
  text-align: center;
}

.border-line {
  width: 100%;
  height: 1px;
  background-color: var(--gray-gray-3, #dee2e6);
  margin: 16px 0;
}
.border-line.black {
  background-color: #000000;
}
.border-line.medium {
  margin: 12px 0 !important;
}
.border-line.medium {
  margin: 16px 0;
}
.border-line.large {
  margin: 24px 0 !important;
}

.btn-set {
  display: flex;
  width: 100%;
  height: 56px;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid #333;
  background-color: #ffffff;
}
.btn-set.gray {
  background-color: #eaeaef;
  border: none;
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}
.btn-set.basic {
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #adb5bd);
  background: #fff;
  color: var(--gray-gray-6, #868e96);
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}
.btn-set .active {
  border-radius: 4px;
  background: #fa3158;
}
.btn-set.sub {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  align-items: flex-start;
  gap: 16px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #fff;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}

.popup-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  top: 50%;
  overflow-y: auto;
  translate: 0 -50%;
  z-index: 1000;
  padding: 1.75rem;
}
.popup-modal-background {
  display: none;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.popup-modal-content {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  z-index: 100;
  border-radius: 8px;
  background: var(--white, #fff);
  box-shadow: 0px 8px 36px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.swiper__next--circle,
.swiper__prev--circle {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  background-size: 48px;
  background-repeat: no-repeat;
  z-index: 10;
}

.swiper__next--circle {
  right: 32px;
  background-image: url(/assets/home/images/common/swiper_next_circle.svg);
}

.swiper__prev--circle {
  left: 32px;
  background-image: url(/assets/home/images/common/swiper_prev_circle.svg);
}

.flex-row {
  flex-direction: row;
}

.error-text {
  display: none;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
}
.error-text.large {
  font-size: 16px !important;
}

.flex-col {
  flex-direction: column;
}

.w-half {
  width: 50% !important;
}

.w-full {
  width: 100% !important;
}

.w-70 {
  width: 70% !important;
}

.w-60 {
  width: 60% !important;
}

.w-40 {
  width: 40% !important;
}

.w-30 {
  width: 30% !important;
}

.flex {
  display: flex;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.gap-xs {
  gap: 4px;
}

.gap-sm {
  gap: 6px;
}

.gap-md {
  gap: 8px;
}

.gap-base {
  gap: 12px;
}

.gap-lg {
  gap: 16px;
}

.gap-xl {
  gap: 24px;
}

.gap-2xl {
  gap: 32px;
}

.border-b {
  border-bottom: 1px solid #eaeaef;
}

.border-t {
  border-top: 1px solid #eaeaef;
}
.border-t.black {
  border-top: 1px solid #000;
}

.py-md {
  padding: 16px 0;
}

.py-lg {
  padding: 24px 0;
}

.py-sm {
  padding: 8px 0;
}

.pt-lg {
  padding-top: 24px;
}

.pt-md {
  padding-top: 16px;
}

.pt-sm {
  padding-top: 12px;
}

.checkbox-red {
  appearance: none;
}
.checkbox-red::before {
  content: "\f00c";
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Font Awesome 6 Sharp";
  width: 20px;
  height: 20px;
}
.checkbox-red:checked::before {
  color: #fa3158;
}

.checkbox-red-square {
  appearance: none;
}
.checkbox-red-square::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Sharp";
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkbox-red-square:checked::before {
  color: #fa3158;
}

.input-label {
  display: inline;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.32px;
  position: relative; /* 추가 */
}
.input-label::after {
  display: none;
  position: absolute; /* 변경 */
  font-family: "Pretendard";
  content: "*";
  color: #fa3158;
  font-size: 12px;
  top: -1px;
  right: -8px;
}
.input-label.sup::after {
  display: inline;
}

.text-start {
  text-align: start;
}

.twice-modal .modal-body {
  padding: 0;
}
.twice-modal .twice-alert {
  color: #fa3158;
  font-family: Pretendard;
  font-size: 14px;
  margin-bottom: 16px;
  font-weight: 500;
}
.twice-modal .modal-dialog {
  max-width: 800px;
}
.twice-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.twice-modal-footer p {
  font-size: 16px;
  font-weight: 600;
}
.twice-modal-footer .btn-basic.fill.white {
  color: #666;
}

.marsonry-question {
  background-color: #f1f1f1;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
}
.marsonry-question__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 8px 16px;
  border-bottom: 1px solid #dcdcdc;
}
.marsonry-question__header .left-area,
.marsonry-question__header .right-area {
  display: flex;
  align-items: center;
  gap: 4px;
}
.marsonry-question__header p {
  font-size: 14px;
  color: #181826;
  font-weight: 700;
}
.marsonry-question__header span {
  font-size: 14px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  height: 20px;
  padding: 0 8px;
}
.marsonry-question__header span.blue {
  color: #1e85ff;
  background-color: #e9f3ff;
}
.marsonry-question__header span.yellow {
  color: #e67700;
  background-color: #fff9db;
}
.marsonry-question-list {
  gap: 24px;
  padding: 16px 8px;
  background-color: #f6f6f9;
}
.marsonry-question-item {
  display: inline-block;
  width: 100%;
  margin-bottom: 24px;
}
.marsonry-question-wrap {
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  padding-bottom: 0;
  border: 1px solid #dcdcde;
}
.marsonry-question-title {
  font-size: 14px;
}
.marsonry-question-title .type {
  color: #999;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-weight: 600;
}
.marsonry-question-title .type::before {
  content: "\e109";
  font-size: 16px;
  font-weight: 700;
  margin-right: 4px;
  color: #fa3158;
  font-family: "Font Awesome 6 Sharp";
}
.marsonry-question-title p {
  color: #333;
  font-weight: 600;
}
.marsonry-question-body {
  margin: 16px 0;
}
.marsonry-question-body table,
.marsonry-question-body th,
.marsonry-question-body td{
  padding:0;
  border:none
}
.marsonry-question-badge {
  display: flex;
  gap: 4px;
}
.marsonry-question-badge span {
  font-size: 14px;
  height: 24px;
  padding: 0 12px;
  border-radius: 6px;
  display: flex;
  place-items: center;
  background-color: #f1f1f2;
}
.marsonry-question-badge span.red {
  color: #fa3158;
  background-color: #ffeaee;
}
.marsonry-question-badge span.green {
  color: #16a34a;
  background-color: #f0fdf4;
}
.marsonry-question__footer {
  display: flex;
  gap: 8px;
  flex-direction: column;
  margin-top: 16px;
}
.marsonry-question__footer .btn-basic {
  font-weight: 600;
}

.dashboardcode-bsmultiselect {
  position: relative;
  width: 194px;
  height: 36px;
  cursor: pointer;
}
.dashboardcode-bsmultiselect .dropdown-menu {
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  transform: translate3d(0, 36px, 0) !important;
}
.dashboardcode-bsmultiselect ul.form-control {
  width: 100%;
  flex-wrap: nowrap !important;
  overflow: hidden;
  min-height: 36px !important;
  height: 36px !important;
  padding: 3px;
  border-radius: 4px !important;
  gap: 2px;
  position: relative;
}
.dashboardcode-bsmultiselect ul.form-control input {
  height: 28px;
  line-height: 28px;
  padding: 0 8px !important;
  width: 74px !important;
  font-size: 12px;
}
.dashboardcode-bsmultiselect ul.form-control .badge {
  position: relative;
  padding: 6px 26px 6px 12px !important;
  height: auto;
  flex-shrink: 0;
  background-color: #e9f3ff;
  color: #1e85ff !important;
  border: 1px solid #a3cdff !important;
  border-radius: 2px;
  margin-bottom: 0;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.dashboardcode-bsmultiselect ul.form-control .badge span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}
.dashboardcode-bsmultiselect ul.form-control .badge span::after {
  display: block;
  position: relative;
  content: "";
  width: 1px;
  height: 10px;
  background-color: #a3cdff;
}
.dashboardcode-bsmultiselect ul.form-control .badge .btn-close {
  position: absolute;
  padding: 0;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231e85ff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-position: center;
  background-size: 30%;
}
.dashboardcode-bsmultiselect ul.form-control:after {
  width: 40px;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  content: "";
  background-image: url(/assets/home/images/common/select.svg);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
}

.choices.is-open .choices__inner {
  border-color: #1e85ff;
  border-radius: 4px;
}
.choices__inner {
  border-radius: 4px;
  padding: 3px;
  display: flex;
  width: 300px;
  height: 36px;
  min-height: auto;
  background-color: #fff;
}
.choices__input {
  margin: 0;
  width: auto !important;
  background-color: #fff;
}
.choices__list--multiple {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
}
.choices__list--multiple .choices__item {
  flex-shrink: 0;
}
.choices__list--multiple .choices__item.is-highlighted {
  background-color: #fff;
  border: 1px solid #a3cdff;
}
.choices__list--multiple .choices__item .choices__button {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMWU4NWZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  margin-top: 1px;
}

.choices__list--multiple:not(:empty) + .choices__input {
  display: none;
}

.choices__list--multiple:not(:empty) + .choices__input::placeholder {
  opacity: 0;
  visibility: hidden;
  display: none !important;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: rgba(30, 133, 255, 0.1);
}

.filter-area {
  display: flex;
  align-items: center;
}
.filter-area label.title {
  display: flex;
  min-width: 96px;
  max-width: 96px;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}
.filter-area .d-flex {
  align-items: center;
  width: 100%;
}
.filter-area select {
  font-size: 12px;
  height: 36px;
}
.filter-radio {
  display: flex;
}
.filter-radio input {
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.filter-radio input:checked + label {
  border-color: #1e85ff;
  background-color: #e9f3ff;
  border-right: 1px solid #1e85ff;
  color: #1e85ff;
}
.filter-radio input:checked + label + input + label {
  border-left: 0;
}
.filter-radio label {
  border: 1px solid #dcdcde;
  border-right: 0;
  height: 36px;
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #fff;
  color: #696972;
  cursor: pointer;
  transition: background-color 0.2s ease-out, border-color 0.1s ease-out, color 0.2s ease-out;
}
.filter-radio label:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.filter-radio label:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid #dcdcdc;
}
.filter-ox {
  display: flex;
}
.filter-ox input {
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.filter-ox input:checked + label {
  border-color: #1e85ff;
  background-color: #e9f3ff;
  border-right-color: #1e85ff;
  color: #1e85ff;
}
.filter-ox input:checked + label.checkCorrect {
  border-color: #1e85ff;
  background-color: #e9f3ff;
  border-right-color: #1e85ff;
  color: #1e85ff;
}
.filter-ox input:checked + label.checkIncorrect {
  border-color: #fa3158;
  background-color: #ffeaee;
  border-right-color: #fa3158;
  color: #fa3158;
}
.filter-ox input:checked + label.checkNotInclude {
  border-color: #dcdcde;
  background-color: #f1f1f2;
  border-right-color: #dcdcde;
  color: #696972;
}
.filter-ox input:checked + label + input + label {
  border-left-color: transparent;
}
.filter-ox label {
  width: 50px;
  border: 1px solid #dcdcde;
  border-right-color: transparent;
  height: 36px;
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #fff;
  color: #696972;
  cursor: pointer;
  transition: background-color 0.2s ease-out, border-color 0.1s ease-out, color 0.2s ease-out;
}
.filter-ox label:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.filter-ox label:last-of-type {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid #dcdcdc;
}
.filter-ox label i {
  font-size: 14px;
}
.filter-check {
  display: flex;
  gap: 4px;
}
.filter-check input {
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.filter-check input:checked + label {
  border-color: #1e85ff;
  background-color: #e9f3ff;
  border-right: 1px solid #1e85ff;
  color: #1e85ff;
}
.filter-check label {
  border: 1px solid #dcdcde;
  height: 36px;
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #fff;
  color: #696972;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease-out, border-color 0.1s ease-out, color 0.2s ease-out;
}
.filter-answer {
  display: flex;
  gap: 4px;
}
.filter-answer input {
  width: 0;
  height: 0;
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.filter-answer input:checked + label {
  border-color: #1e85ff;
  background-color: #e9f3ff;
  border-right: 1px solid #1e85ff;
  color: #1e85ff;
}
.filter-answer label {
  border: 1px solid #dcdcde;
  width: 20%;
  height: 36px;
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  background-color: #fff;
  color: #696972;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease-out, border-color 0.1s ease-out, color 0.2s ease-out;
}
.filter-answer label.correct-check {
  position: relative;
}
.filter-answer label.correct-check::after {
  border-radius: 4px;
  content: "\f00c";
  font-family: "Font Awesome 6 Sharp";
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fa3158;
  font-weight: 400;
  font-size: 16px;
  width: 100%;
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #fff;
}
.filter-number {
  display: flex;
  align-items: center;
}
.filter-number input {
  text-align: center;
  width: 80px;
  font-size: 12px;
  border: 1px solid #dcdcde;
  height: 36px;
  border-right: 0;
  border-left: 0;
}
.filter-number [class*=btn] {
  width: 24px;
  height: 36px;
  border: 1px solid #dcdcde;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #565661;
}
.filter-number .plus-btn {
  border-radius: 4px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.filter-number .minus-btn {
  border-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.new-button {
  background-color: #1e85ff;
  color: #fff;
  min-width: 80px;
  height: 36px;
  display: flex;
  padding: 0 16px;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.2s ease-out, border-color 0.1s ease-out, color 0.2s ease-out;
}

.comentary {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 16px;
}
.comentary-check {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.comentary-check:checked + label::before {
  background-image: url("/assets/home/images/promotion/live_help.svg");
}
.comentary-check:checked + label + .comentary-text {
  display: block;
}
.comentary-answer {
  font-size: 14px;
  color: #343440;
  border-top: 1px solid #dcdcde;
  position: relative;
  left: -16px;
  width: calc(100% + 32px);
  height: 40px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.comentary-answer::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-right: 6px;
  background-image: url("/assets/home/images/promotion/task_alt.svg");
  background-size: 20px;
}
.comentary-text {
  display: none;
  position: relative;
  left: -16px;
  width: calc(100% + 32px);
  padding: 16px;
  background-color: #f6f6f9;
  color: #343440;
}
.comentary-text h6 {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}
.comentary-text p {
  font-size: 14px;
  font-weight: 600;
}

.mt-0 {
  margin-top: 0px !important;
}

.mt-0 {
  margin-top: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pt-0 {
  padding-top: 0px !important;
}

.pb-0 {
  padding-bottom: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.pl-0 {
  padding-left: 0px !important;
}

.pr-0 {
  padding-right: 0px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mt-4 {
  margin-top: 4px !important;
}

.mb-4 {
  margin-bottom: 4px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pt-4 {
  padding-top: 4px !important;
}

.pb-4 {
  padding-bottom: 4px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.pl-4 {
  padding-left: 4px !important;
}

.pr-4 {
  padding-right: 4px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.pl-8 {
  padding-left: 8px !important;
}

.pr-8 {
  padding-right: 8px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.ml-24 {
  margin-left: 24px !important;
}

.mr-24 {
  margin-right: 24px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.pl-24 {
  padding-left: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.pl-12 {
  padding-left: 12px !important;
}

.pr-12 {
  padding-right: 12px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.ml-32 {
  margin-left: 32px !important;
}

.mr-32 {
  margin-right: 32px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pl-32 {
  padding-left: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.pl-16 {
  padding-left: 16px !important;
}

.pr-16 {
  padding-right: 16px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.ml-40 {
  margin-left: 40px !important;
}

.mr-40 {
  margin-right: 40px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.pl-20 {
  padding-left: 20px !important;
}

.pr-20 {
  padding-right: 20px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.ml-48 {
  margin-left: 48px !important;
}

.mr-48 {
  margin-right: 48px !important;
}

.pt-48 {
  padding-top: 48px !important;
}

.pb-48 {
  padding-bottom: 48px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.pl-48 {
  padding-left: 48px !important;
}

.pr-48 {
  padding-right: 48px !important;
}

.pl-24 {
  padding-left: 24px !important;
}

.pr-24 {
  padding-right: 24px !important;
}

.mt-56 {
  margin-top: 56px !important;
}

.mt-28 {
  margin-top: 28px !important;
}

.mb-28 {
  margin-bottom: 28px !important;
}

.mb-56 {
  margin-bottom: 56px !important;
}

.ml-56 {
  margin-left: 56px !important;
}

.mr-56 {
  margin-right: 56px !important;
}

.pt-56 {
  padding-top: 56px !important;
}

.pb-56 {
  padding-bottom: 56px !important;
}

.pt-28 {
  padding-top: 28px !important;
}

.pb-28 {
  padding-bottom: 28px !important;
}

.pl-56 {
  padding-left: 56px !important;
}

.pr-56 {
  padding-right: 56px !important;
}

.pl-28 {
  padding-left: 28px !important;
}

.pr-28 {
  padding-right: 28px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.ml-64 {
  margin-left: 64px !important;
}

.mr-64 {
  margin-right: 64px !important;
}

.pt-64 {
  padding-top: 64px !important;
}

.pb-64 {
  padding-bottom: 64px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pl-64 {
  padding-left: 64px !important;
}

.pr-64 {
  padding-right: 64px !important;
}

.pl-32 {
  padding-left: 32px !important;
}

.pr-32 {
  padding-right: 32px !important;
}

.mt-72 {
  margin-top: 72px !important;
}

.mt-36 {
  margin-top: 36px !important;
}

.mb-36 {
  margin-bottom: 36px !important;
}

.mb-72 {
  margin-bottom: 72px !important;
}

.ml-72 {
  margin-left: 72px !important;
}

.mr-72 {
  margin-right: 72px !important;
}

.pt-72 {
  padding-top: 72px !important;
}

.pb-72 {
  padding-bottom: 72px !important;
}

.pt-36 {
  padding-top: 36px !important;
}

.pb-36 {
  padding-bottom: 36px !important;
}

.pl-72 {
  padding-left: 72px !important;
}

.pr-72 {
  padding-right: 72px !important;
}

.pl-36 {
  padding-left: 36px !important;
}

.pr-36 {
  padding-right: 36px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.ml-80 {
  margin-left: 80px !important;
}

.mr-80 {
  margin-right: 80px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pl-80 {
  padding-left: 80px !important;
}

.pr-80 {
  padding-right: 80px !important;
}

.pl-40 {
  padding-left: 40px !important;
}

.pr-40 {
  padding-right: 40px !important;
}

.mt-88 {
  margin-top: 88px !important;
}

.mt-44 {
  margin-top: 44px !important;
}

.mb-44 {
  margin-bottom: 44px !important;
}

.mb-88 {
  margin-bottom: 88px !important;
}

.ml-88 {
  margin-left: 88px !important;
}

.mr-88 {
  margin-right: 88px !important;
}

.pt-88 {
  padding-top: 88px !important;
}

.pb-88 {
  padding-bottom: 88px !important;
}

.pt-44 {
  padding-top: 44px !important;
}

.pb-44 {
  padding-bottom: 44px !important;
}

.pl-88 {
  padding-left: 88px !important;
}

.pr-88 {
  padding-right: 88px !important;
}

.pl-44 {
  padding-left: 44px !important;
}

.pr-44 {
  padding-right: 44px !important;
}

.mt-96 {
  margin-top: 96px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.mb-96 {
  margin-bottom: 96px !important;
}

.ml-96 {
  margin-left: 96px !important;
}

.mr-96 {
  margin-right: 96px !important;
}

.pt-96 {
  padding-top: 96px !important;
}

.pb-96 {
  padding-bottom: 96px !important;
}

.pt-48 {
  padding-top: 48px !important;
}

.pb-48 {
  padding-bottom: 48px !important;
}

.pl-96 {
  padding-left: 96px !important;
}

.pr-96 {
  padding-right: 96px !important;
}

.pl-48 {
  padding-left: 48px !important;
}

.pr-48 {
  padding-right: 48px !important;
}

.mt-104 {
  margin-top: 104px !important;
}

.mt-52 {
  margin-top: 52px !important;
}

.mb-52 {
  margin-bottom: 52px !important;
}

.mb-104 {
  margin-bottom: 104px !important;
}

.ml-104 {
  margin-left: 104px !important;
}

.mr-104 {
  margin-right: 104px !important;
}

.pt-104 {
  padding-top: 104px !important;
}

.pb-104 {
  padding-bottom: 104px !important;
}

.pt-52 {
  padding-top: 52px !important;
}

.pb-52 {
  padding-bottom: 52px !important;
}

.pl-104 {
  padding-left: 104px !important;
}

.pr-104 {
  padding-right: 104px !important;
}

.pl-52 {
  padding-left: 52px !important;
}

.pr-52 {
  padding-right: 52px !important;
}

.mt-112 {
  margin-top: 112px !important;
}

.mt-56 {
  margin-top: 56px !important;
}

.mb-56 {
  margin-bottom: 56px !important;
}

.mb-112 {
  margin-bottom: 112px !important;
}

.ml-112 {
  margin-left: 112px !important;
}

.mr-112 {
  margin-right: 112px !important;
}

.pt-112 {
  padding-top: 112px !important;
}

.pb-112 {
  padding-bottom: 112px !important;
}

.pt-56 {
  padding-top: 56px !important;
}

.pb-56 {
  padding-bottom: 56px !important;
}

.pl-112 {
  padding-left: 112px !important;
}

.pr-112 {
  padding-right: 112px !important;
}

.pl-56 {
  padding-left: 56px !important;
}

.pr-56 {
  padding-right: 56px !important;
}

.mt-120 {
  margin-top: 120px !important;
}

.mt-60 {
  margin-top: 60px !important;
}

.mb-60 {
  margin-bottom: 60px !important;
}

.mb-120 {
  margin-bottom: 120px !important;
}

.ml-120 {
  margin-left: 120px !important;
}

.mr-120 {
  margin-right: 120px !important;
}

.pt-120 {
  padding-top: 120px !important;
}

.pb-120 {
  padding-bottom: 120px !important;
}

.pt-60 {
  padding-top: 60px !important;
}

.pb-60 {
  padding-bottom: 60px !important;
}

.pl-120 {
  padding-left: 120px !important;
}

.pr-120 {
  padding-right: 120px !important;
}

.pl-60 {
  padding-left: 60px !important;
}

.pr-60 {
  padding-right: 60px !important;
}

.mt-128 {
  margin-top: 128px !important;
}

.mt-64 {
  margin-top: 64px !important;
}

.mb-64 {
  margin-bottom: 64px !important;
}

.mb-128 {
  margin-bottom: 128px !important;
}

.ml-128 {
  margin-left: 128px !important;
}

.mr-128 {
  margin-right: 128px !important;
}

.pt-128 {
  padding-top: 128px !important;
}

.pb-128 {
  padding-bottom: 128px !important;
}

.pt-64 {
  padding-top: 64px !important;
}

.pb-64 {
  padding-bottom: 64px !important;
}

.pl-128 {
  padding-left: 128px !important;
}

.pr-128 {
  padding-right: 128px !important;
}

.pl-64 {
  padding-left: 64px !important;
}

.pr-64 {
  padding-right: 64px !important;
}

.mt-136 {
  margin-top: 136px !important;
}

.mt-68 {
  margin-top: 68px !important;
}

.mb-68 {
  margin-bottom: 68px !important;
}

.mb-136 {
  margin-bottom: 136px !important;
}

.ml-136 {
  margin-left: 136px !important;
}

.mr-136 {
  margin-right: 136px !important;
}

.pt-136 {
  padding-top: 136px !important;
}

.pb-136 {
  padding-bottom: 136px !important;
}

.pt-68 {
  padding-top: 68px !important;
}

.pb-68 {
  padding-bottom: 68px !important;
}

.pl-136 {
  padding-left: 136px !important;
}

.pr-136 {
  padding-right: 136px !important;
}

.pl-68 {
  padding-left: 68px !important;
}

.pr-68 {
  padding-right: 68px !important;
}

.mt-144 {
  margin-top: 144px !important;
}

.mt-72 {
  margin-top: 72px !important;
}

.mb-72 {
  margin-bottom: 72px !important;
}

.mb-144 {
  margin-bottom: 144px !important;
}

.ml-144 {
  margin-left: 144px !important;
}

.mr-144 {
  margin-right: 144px !important;
}

.pt-144 {
  padding-top: 144px !important;
}

.pb-144 {
  padding-bottom: 144px !important;
}

.pt-72 {
  padding-top: 72px !important;
}

.pb-72 {
  padding-bottom: 72px !important;
}

.pl-144 {
  padding-left: 144px !important;
}

.pr-144 {
  padding-right: 144px !important;
}

.pl-72 {
  padding-left: 72px !important;
}

.pr-72 {
  padding-right: 72px !important;
}

.mt-152 {
  margin-top: 152px !important;
}

.mt-76 {
  margin-top: 76px !important;
}

.mb-76 {
  margin-bottom: 76px !important;
}

.mb-152 {
  margin-bottom: 152px !important;
}

.ml-152 {
  margin-left: 152px !important;
}

.mr-152 {
  margin-right: 152px !important;
}

.pt-152 {
  padding-top: 152px !important;
}

.pb-152 {
  padding-bottom: 152px !important;
}

.pt-76 {
  padding-top: 76px !important;
}

.pb-76 {
  padding-bottom: 76px !important;
}

.pl-152 {
  padding-left: 152px !important;
}

.pr-152 {
  padding-right: 152px !important;
}

.pl-76 {
  padding-left: 76px !important;
}

.pr-76 {
  padding-right: 76px !important;
}

.mt-160 {
  margin-top: 160px !important;
}

.mt-80 {
  margin-top: 80px !important;
}

.mb-80 {
  margin-bottom: 80px !important;
}

.mb-160 {
  margin-bottom: 160px !important;
}

.ml-160 {
  margin-left: 160px !important;
}

.mr-160 {
  margin-right: 160px !important;
}

.pt-160 {
  padding-top: 160px !important;
}

.pb-160 {
  padding-bottom: 160px !important;
}

.pt-80 {
  padding-top: 80px !important;
}

.pb-80 {
  padding-bottom: 80px !important;
}

.pl-160 {
  padding-left: 160px !important;
}

.pr-160 {
  padding-right: 160px !important;
}

.pl-80 {
  padding-left: 80px !important;
}

.pr-80 {
  padding-right: 80px !important;
}

.promotion-main--01 {
  position: relative;
  text-align: center;
  overflow: hidden;
  height: 100vh;
  min-height: 960px;
  margin-top: -124px;
  background: url(/assets/home/images/promotion/main/main_10_00.png) no-repeat;
  background-size: cover;
}
.promotion-main--01 h1 {
  margin-bottom: 16px;
  margin-top: 80px;
}
.promotion-main--01 .m-container {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  padding-top: 124px;
}
.promotion-main--01 .main-swiper {
  max-width: 800px;
  width: 100%;
  position: absolute;
  bottom: 128px;
}
.promotion-main--01 .main-swiper .swiper-slide {
  border-radius: 24px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.promotion-main--01 .main-swiper .swiper-slide:not(.swiper-slide-active) {
  opacity: 0.3;
  translate: 0 4%;
}
.promotion-main--01 .main-swiper img {
  box-shadow: 30px 30px 30px 0px rgba(0, 0, 0, 0.1);
}
.promotion-main--01 h5 {
  margin-bottom: 28px;
  line-height: 1.5;
  font-weight: 500;
}
.promotion-main--01 .main-nav {
  position: absolute;
  z-index: 10;
  bottom: 0;
  background: linear-gradient(315deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #1e85ff;
  left: 50%;
  transform: translateX(-50%);
  background-blend-mode: overlay;
  height: 148px;
  width: 100%;
}
.promotion-main--01 .main-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1180px;
  height: 100%;
  margin: auto;
}
.promotion-main--01 .main-nav-wrap a {
  width: 25%;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
}
.promotion-main--01 .main-nav-wrap a img {
  margin: auto;
  margin-bottom: 16px;
  width: 46px;
}
.promotion-main--01 .text-box {
  height: fit-content;
}
.promotion-main--02 {
  overflow: hidden;
  padding: 200px 0;
  background-color: #fff;
}
.promotion-main--02 h5 {
  margin-bottom: 32px;
}
.promotion-main--03 {
  padding: 150px 0;
  height: 100vh;
  background-color: #ff728d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-main--03 .m-container {
  height: auto;
  padding-top: 72px;
}
.promotion-main--03 .text-flow {
  margin: 104px 0;
  margin-left: -16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.promotion-main--03 .text-flow h2 {
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
}
.promotion-main--03 .text-flow h2 span {
  display: inline-block;
  height: 98px;
  padding: 0 16px;
  border: 8px solid rgba(255, 255, 255, 0);
}
.promotion-main--03 h3 {
  line-height: 1.4;
}
.promotion-main--04 {
  background-color: #f8f8f8;
  padding: 150px 0;
  overflow: hidden;
}
.promotion-main--04 .m-container {
  max-width: 1280px;
}
.promotion-main--04 .title-area {
  text-align: center;
}
.promotion-main--04 .title-area h1 {
  margin-bottom: 48px;
}
.promotion-main--04 .title-area p {
  font-size: 24px;
  line-height: 1.5;
}
.promotion-main--04 .box-list {
  padding-top: 96px;
  display: grid;
  grid-template-areas: "a b" "a c";
  gap: 40px;
}
.promotion-main--04 .box-list__item {
  padding: 48px;
  border-radius: 16px;
  background-color: #fff;
  position: relative;
}
.promotion-main--04 .box-list__item .icon {
  width: 128px;
  margin-bottom: 48px;
  margin-top: -104px;
}
.promotion-main--04 .box-list__item .image-box {
  position: absolute;
  width: auto;
  box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.2);
}
.promotion-main--04 .box-list__item h3 {
  margin-bottom: 16px;
}
.promotion-main--04 .box-list__item p {
  font-size: 20px;
  line-height: 1.5;
}
.promotion-main--04 .box-list__item img {
  width: 100%;
}
.promotion-main--04 .box-list__item:nth-child(1) {
  grid-area: a;
}
.promotion-main--04 .box-list__item:nth-child(1) .image-box {
  border-radius: 16px;
  width: 480px;
  right: initial;
  left: -12%;
  bottom: 19%;
}
.promotion-main--04 .box-list__item:nth-child(2) h3 {
  font-size: 36px;
}
.promotion-main--04 .box-list__item:nth-child(2) .image-box {
  width: 220px;
  right: -10%;
  border-radius: 24px;
  top: -30%;
}
.promotion-main--04 .box-list__item:nth-child(3) h3 {
  font-size: 36px;
}
.promotion-main--04 .box-list__item:nth-child(3) .image-box {
  width: 220px;
  right: -10%;
  border-radius: 24px;
  top: -30%;
}
.promotion-main--05 {
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 150px 0;
}
.promotion-main--05 .m-container {
  max-width: 1280px;
}
.promotion-main--05 .title-area {
  text-align: center;
}
.promotion-main--05 .title-area h1 {
  margin-bottom: 48px;
}
.promotion-main--05 .title-area p {
  font-size: 24px;
  line-height: 1.5;
}
.promotion-main--05 .box-list {
  padding-top: 96px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
.promotion-main--05 .box-list__item {
  padding: 48px;
  border-radius: 16px;
  background-color: #fff;
  position: relative;
  aspect-ratio: 620/755;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.promotion-main--05 .box-list__item .icon {
  width: 128px;
  margin-bottom: 48px;
  margin-top: -104px;
}
.promotion-main--05 .box-list__item .image-box {
  position: absolute;
  width: auto;
  filter: drop-shadow(25px 25px 50px rgba(0, 0, 0, 0.2));
  border-radius: 24px;
}
.promotion-main--05 .box-list__item .image-box-2 {
  position: relative;
  width: 300px;
  margin-top: 40px;
}
.promotion-main--05 .box-list__item h3 {
  margin-bottom: 16px;
}
.promotion-main--05 .box-list__item p {
  font-size: 20px;
  line-height: 1.5;
}
.promotion-main--05 .box-list__item:nth-child(1) {
  z-index: 1;
}
.promotion-main--05 .box-list__item:nth-child(1) .image-box {
  width: 380px;
  right: -2%;
  bottom: -5%;
}
.promotion-main--05 .box-list__item:nth-child(2) .image-box {
  width: 380px;
  right: -5%;
  bottom: -5%;
}
.promotion-main--06 {
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 150px 0;
}
.promotion-main--06 .m-container {
  max-width: 1280px;
}
.promotion-main--06 h2 {
  font-size: 64px !important;
  margin-bottom: 48px;
}
.promotion-main--06 p {
  font-size: 24px;
  line-height: 1.5;
}
.promotion-main--06 .image-box {
  margin-top: -80px;
  filter: drop-shadow(25px 25px 50px rgba(0, 0, 0, 0.2));
}
.promotion-main--06 .image-box b img {
  width: 95%;
}
.promotion-main--07 {
  overflow: hidden;
  background-color: #f8f8f8;
  padding: 150px 0;
}
.promotion-main--07 .m-container {
  max-width: 1280px;
}
.promotion-main--07 h2 {
  font-size: 64px !important;
  margin-bottom: 48px;
}
.promotion-main--07 p {
  font-size: 24px;
  line-height: 1.5;
}
.promotion-main--07 .image-box {
  position: relative;
  left: -12%;
  top: -20%;
}
.promotion-main--07 .image-box img {
  width: 110%;
}
.promotion-main--08 {
  overflow: hidden;
  padding: 150px 0;
  text-align: center;
  z-index: 0;
}
.promotion-main--08 h1 {
  margin-bottom: 96px;
}
.promotion-main--08 p {
  color: #999;
}
.promotion-main--08 .box-list__item {
  padding: 64px;
  padding-bottom: 0;
  border-radius: 20px;
  height: 100%;
  background-color: #f8f8f8;
  overflow: hidden;
}
.promotion-main--08 .box-list__item h3 {
  margin-bottom: 16px;
}
.promotion-main--08 .box-list__item .image-box {
  margin-top: 64px;
  position: relative;
  left: 50%;
  translate: -50%;
}
.promotion-main--08 .box-list__item--1 {
  aspect-ratio: 574/500;
}
.promotion-main--08 .box-list__item--2 {
  aspect-ratio: 372/550;
  text-align: left;
  padding: 56px 36px;
  padding-bottom: 0;
}
.promotion-main--08 .box-list__item h4 {
  font-size: 40px;
  margin-bottom: 16px;
  font-weight: 500;
}
.promotion-main--09 {
  overflow: hidden;
  padding: 150px 0;
  z-index: 0;
}
.promotion-main--09 h1 {
  text-align: center;
  margin-bottom: 96px;
}
.promotion-main--09 .row {
  border-bottom: 1px solid #eaeaea;
  padding-top: 60px;
  padding-bottom: 60px;
}
.promotion-main--09 .row:nth-of-type(1) {
  border-top: 1px solid #eaeaea;
}
.promotion-main--09 img {
  width: 126px;
}
.promotion-main--09 .left-area {
  display: flex;
  align-items: center;
  gap: 32px;
}
.promotion-main--09 h4 {
  font-size: 40px;
}
.promotion-main--09 p {
  font-size: 24px;
  color: #666;
}
.promotion-main--09 .right-area p {
  font-size: 20px;
  color: #333;
  line-height: 1.6;
}
.promotion-main--10 {
  overflow: hidden;
  padding: 150px 0;
  text-align: center;
  z-index: 0;
}
.promotion-main--10 h1 {
  margin-bottom: 48px;
}
.promotion-main--10 p {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin-bottom: 96px;
  line-height: 1.5;
}
.promotion-main--11 {
  padding: 150px 0;
  background-color: #fff;
  text-align: center;
  overflow: hidden;
}
.promotion-main--11 h1 {
  margin-bottom: 48px;
}
.promotion-main--11 p {
  font-size: 24px;
  font-weight: 500;
  color: #333;
  margin-bottom: 96px;
  line-height: 1.5;
}
.promotion-main--fixed {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(/assets/home/images/promotion/main/main_10_00.png) no-repeat;
  background-size: cover;
  background-position: 50% 0%;
}
.promotion-main h2 {
  font-size: 72px;
  line-height: 1.2;
  letter-spacing: -2.4px;
}
.promotion-main__review {
  padding-left: 40px;
}
.promotion-main__review__item {
  display: flex;
  gap: 24px;
  padding: 36px 0;
  border-bottom: 1px solid #eaeaea;
}
.promotion-main__review__item:last-child {
  border-bottom: 0;
}
.promotion-main__review__item .left-area {
  min-width: 100px;
}
.promotion-main__review__item .top-content {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.promotion-main__review__item .badge {
  display: inline-flex;
  padding: 6px 12px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 160%; /* 22.4px */
}
.promotion-main__review__item .badge.red {
  background-color: #fa3158;
}
.promotion-main__review__item .badge.blue {
  background-color: #1e85ff;
}
.promotion-main__review__item .name {
  font-size: 20px;
  color: #1a191e;
  font-weight: 500;
  margin-left: 12px;
}
.promotion-main__review__item .school {
  font-size: 14px;
  color: #666;
  margin-left: 8px;
}
.promotion-main__review__item p {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
}
.promotion-tab {
  background-color: #f8f8f8;
  height: 82px;
  position: sticky;
  z-index: 110;
  top: 0;
}
.promotion-tab .m-container {
  display: flex;
  gap: 40px;
}
.promotion-tab a {
  color: #666;
  font-size: 18px;
  font-weight: 700;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.promotion-tab a.selected {
  color: #000;
}
.promotion-tab a.selected:after {
  position: absolute;
  bottom: 0;
  background-color: #000;
  content: "";
  width: 100%;
  height: 3px;
}
.promotion-tab--white {
  background-color: #fff;
}
.promotion-tab.notchrome {
  top: 40px;
}
.promotion-hero {
  height: 498px;
  margin-top: -72px;
  background-size: cover;
  background-position: center;
}
.promotion-hero.detail {
  background-color: #f8f8f8;
  padding: 180px 0 120px 0;
  height: auto;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.promotion-hero.detail .text-area .bread-crumbs * {
  color: #222;
}
.promotion-hero.detail .text-area .bread-crumbs a {
  font-weight: 600;
}
.promotion-hero.detail .text-area p {
  color: #999;
}
.promotion-hero.detail .text-area h1 {
  font-size: 33px;/* 2025-0708 수정 */
  line-height: 1.3;
  color: #333;
  margin-bottom: 32px;
  word-break: break-all;
}
.promotion-detail img {
  width:auto;
  max-width: 1180px;
}

.promotion-hero.customer {
  background-image: url(/assets/home/images/promotion/customer-background.png);
}
.promotion-hero.company {
  background-image: url(/assets/home/images/promotion/company_background.png);
}
.promotion-hero.community {
  background-image: url(/assets/home/images/promotion/community_background.png);
}
.promotion-hero.service {
  height: 352px;
}
.promotion-hero.service .m-container {
  align-items: flex-end;
  margin-bottom: 16px;
}
.promotion-hero.service .text-area h1 {
  color: #000;
  margin-bottom: 24px;
}
.promotion-hero.service .text-area .bread-crumbs a,
.promotion-hero.service .text-area .bread-crumbs i {
  color: #333;
  opacity: 1;
  font-size: 18px;
}
.promotion-hero.service .text-area .bread-crumbs a {
  font-weight: 600;
}
.promotion-hero.service .text-area p {
  font-size: 24px;
  color: #666;
}
.promotion-hero.rate .text-area h1 {
  color: #000;
  margin-bottom: 24px;
}
.promotion-hero.rate .text-area .bread-crumbs a,
.promotion-hero.rate .text-area .bread-crumbs i {
  color: #333;
  opacity: 1;
  font-size: 18px;
}
.promotion-hero.rate .text-area .bread-crumbs a {
  font-weight: 600;
}
.promotion-hero.rate .text-area p {
  font-size: 24px;
  color: #666;
}
.promotion-hero.terms {
  margin-bottom: 0;
  height: 432px;
}
.promotion-hero.terms .text-area h1 {
  color: #000;
}
.promotion-hero.terms .text-area .bread-crumbs {
  opacity: 1;
}
.promotion-hero.terms .text-area .bread-crumbs a,
.promotion-hero.terms .text-area .bread-crumbs i {
  color: #333;
}
.promotion-hero.terms .text-area .bread-crumbs a {
  font-weight: 600;
}
.promotion-hero.event {
  height: 768px;
  background-image: url(/assets/home/images/promotion/event-background.png);
}
.promotion-hero.event h1 {
  font-family: "SUITE", sans-serif;
  line-height: 1.1;
  font-weight: 500;
  margin-bottom: 16px;
}
.promotion-hero.event p {
  color: #fff;
  line-height: 1.8;
}
.promotion-hero .m-container {
  height: 100%;
  display: flex;
  align-items: center;
}
.promotion-hero .text-area .bread-crumbs {
  display: flex;
  margin-bottom: 32px;
  align-items: center;
  gap: 16px;
  opacity: 0.7;
}
.promotion-hero .text-area .bread-crumbs * {
  color: #fff;
}
.promotion-hero .text-area h1 {
  color: #fff;
}
.promotion-board__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 120px 0 60px;
}
.promotion-board__title.center {
  flex-direction: column;
  gap: 16px;
  margin-bottom: 60px;
}
.promotion-board__title.center p {
  font-size: 18px;
}
.promotion-board__item {
  position: relative;
  padding: 32px 0;
  border-bottom: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.promotion-board__item:first-child {
  border-top: 2px solid #000;
}
.promotion-board__item h5 {
  margin-bottom: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* 라인수 */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}
.promotion-board__item .date {
  font-size: 16px;
  color: #ccc;
}
.promotion-board__item .link {
  font-size: 16px;
  color: #ccc;
}
.promotion-board__item .link i {
  color: #ccc;
}
.promotion-board__item .bottom {
  display: flex;
  gap: 16px;
}
.promotion-board--image .promotion-board__item .image {
  min-width: 120px;
  width: 120px;
  height: 120px;
  overflow: hidden;
}
.promotion-board--image .promotion-board__item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promotion-board--image__h .promotion-board__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 56px;
  row-gap: 56px;
  column-gap: 32px;
  border-top: 2px solid #000;
}
.promotion-board--image__h .promotion-board__item {
  display: flex;
  flex-direction: column-reverse;
  padding: 0;
  padding-bottom: 56px;
  gap: 16px;
}
.promotion-board--image__h .promotion-board__item .text {
  width: 100%;
}
.promotion-board--image__h .promotion-board__item .image {
  width: 100%;
  aspect-ratio: 3.7/2.6;
  overflow: hidden;
}
.promotion-board--image__h .promotion-board__item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promotion-board--image__h .promotion-board__item h5 {
  -webkit-line-clamp: 2;
  height: 2.8em;
  font-family: "Pretendard", sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 24px;
  line-height: 1.4em;
}
.promotion-board--image__h .promotion-board__item:first-child {
  border-top: 0;
}
.promotion-board--image__h .event-footer button {
  margin: 60px auto 150px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  padding: 0 40px;
  height: 56px;
  transition: all 0.3s;
}
.promotion-board--image__h .event-footer button:hover {
  border: 1px solid #333;
}
.promotion-board--accordion .promotion-board__content {
  border-top: 2px solid #000;
}
.promotion-board--accordion .promotion-board__content.no-type .type {
  display: none;
}
.promotion-board--accordion .promotion-board__content.no-type .accordion-body {
  padding-left: 16px;
}
.promotion-board--accordion .accordion-item {
  border: 0;
  border-bottom: 1px solid #eaeaea;
  border-radius: 0;
}
.promotion-board--accordion .accordion-button.collapsed {
  height: 80px;
  padding: 0 16px;
  outline: 0;
  box-shadow: none;
  border: 0;
}
.promotion-board--accordion .accordion-button {
  height: 80px;
  padding: 0 16px;
  outline: 0;
  box-shadow: none;
  background-color: initial;
  border: 0;
  gap: 24px;
  display: flex;
  color: #666;
}
.promotion-board--accordion .accordion-button::after {
  content: "+";
  font-size: 18px;
  font-weight: 700;
  font-family: "Font Awesome 6 Sharp";
  background: none;
  width: 18px;
  height: 18px;
  transform-origin: center;
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-board--accordion .accordion-button .type {
  min-width: 120px;
  font-weight: 700;
  color: #000;
  font-size: 18px;
}
.promotion-board--accordion .accordion-button .text {
  width: 100%;
  font-weight: 500;
  font-size: 18px;
  font-family: "Pretendard", sans-serif;
}
.promotion-board--accordion .accordion-button:not(.collapsed) {
  color: #000;
}
.promotion-board--accordion .accordion-button:not(.collapsed) p {
  font-weight: 700;
}
.promotion-board--accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
}
.promotion-board--accordion .accordion-body {
  padding-left: 162px;
  padding-right: 40px;
  padding-top: 8px;
  padding-bottom: 40px;
}
.promotion-board--accordion .accordion-body .text {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
}
.promotion-board--accordion .accordion-body span {
  font-weight: 700;
}
.promotion-board .board-tab {
  display: flex;
  border-bottom: 2px solid #eaeaea;
}
.promotion-board .board-tab__item {
  height: 54px;
  padding: 0 16px;
  font-size: 24px;
  color: #999;
  font-weight: 700;
  display: flex;
  gap: 8px;
  cursor: pointer;
  align-items: center;
}
.promotion-board .board-tab__item .count {
  display: flex;
  font-size: 11px;
  height: 24px;
  padding: 0px 4px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  color: #666;
  background: var(--light-mode-neutral-150, #eaeaef);
}
.promotion-board .board-tab__item.active {
  color: #fa3158;
  position: relative;
}
.promotion-board .board-tab__item.active .count {
  color: #fa3158;
  border-radius: 4px;
  background: rgba(250, 49, 88, 0.1);
}
.promotion-board .board-tab__item.active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #fa3158;
  bottom: -2px;
  left: 0;
  position: absolute;
}
.promotion-board--2 .promotion-board__content {
  grid-template-columns: repeat(2, 1fr);
}
.promotion-detail {
  padding: 120px 0 150px;
}
.promotion-detail picture {
  display: block;
  margin: 24px 0;
}
.promotion-detail picture:last-child {
  margin-bottom: 0;
}
.promotion-detail h5 {
  margin-bottom: 24px;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
}
.promotion-detail p {
  color: #666;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.promotion-detail p:last-child {
  margin-bottom: 0;
}
.promotion-detail .body-content {
  padding-bottom: 48px;
}
.promotion-detail .footer-content {
  padding-top: 48px;
  border-top: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.promotion-detail .footer-content button {
  border-radius: 4px;
  border: 1px solid #eaeaea;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #333;
  padding: 0 40px;
  height: 56px;
  transition: all 0.3s;
}
.promotion-detail .footer-content button:hover {
  border: 1px solid #333;
}
.promotion-detail .footer-content .left-area {
  display: flex;
  align-items: center;
  gap: 8px;
}
.promotion-rate {
  background-color: #f8f8f8;
  padding: 100px 0 150px;
}
.promotion-rate__header {
  display: flex;
  align-items: center;
  gap: 65px;
  height: 64px;
  background-color: #fff;
  margin-bottom: 48px;
  position: relative;
  border-radius: 8px;
  border: 1px solid #eaeaea;
}
.promotion-rate__header::after {
  content: "";
  background-color: #d9d9d9;
  left: 50%;
  position: absolute;
  height: 28px;
  width: 1px;
}
.promotion-rate__header .left-area,
.promotion-rate__header .right-area {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
}
.promotion-rate__header .left-area {
  justify-content: flex-end;
}
.promotion-rate__header .right-area {
  justify-content: flex-start;
}
.promotion-rate__header .adjust-value {
  display: flex;
  border: 1px solid #eaeaea;
  border-radius: 4px;
}
.promotion-rate__header .adjust-value button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-rate__header .input-count {
  border-left: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 18px;
  height: 40px;
}
.promotion-rate__header .input-count input {
  border: 0;
  width: 44px;
  font-size: 18px;
  font-weight: 700;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.promotion-rate__header .input-count input:focus {
  outline: none;
}
.promotion-rate__header p {
  font-size: 16px;
  font-weight: 500;
}
.promotion-rate__header h6 {
  font-size: 26px;
  font-weight: 800;
  font-family: "SUITE", sans-serif;
}
.promotion-rate__header h6 span {
  font-size: 14px;
  font-weight: 600;
  color: #999;
}
.promotion-rate__list {
  gap: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.promotion-rate__item {
  background-color: #fff;
  border-radius: 8px;
  padding: 40px 24px;
  border: 1px solid #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.06);
  transition: all 0.15s ease-in-out;
}
.promotion-rate__item .item-header {
  margin-bottom: 24px;
}
.promotion-rate__item .item-header .type {
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 8px;
  color: #333;
  font-family: "SUITE", sans-serif;
}
.promotion-rate__item .item-header .price {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  font-family: "SUITE", sans-serif;
}
.promotion-rate__item .item-header .price span {
  font-weight: 600;
  font-size: 14px;
  color: #999;
}
.promotion-rate__item .item-content {
  border-top: 1px solid #000;
  padding-top: 16px;
}
.promotion-rate__item .item-content li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  border-bottom: 1px solid #eaeaea;
}
.promotion-rate__item .item-content li .left-area {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}
.promotion-rate__item .item-content li .right-area {
  font-size: 16px;
  display: flex;
  gap: 4px;
  font-weight: 500;
}
.promotion-rate__item .item-content li .line-through {
  font-size: 11px;
  align-self: flex-start;
  text-decoration: line-through;
  color: #999;
}
.promotion-rate__item .item-content li:first-child .right-area .meta-red {
  font-weight: 700;
}
.promotion-rate__item .item-content li:nth-child(4) .right-area {
  color: #999;
}
.promotion-rate__item .item-content li.null {
  border-bottom: 0;
}
.promotion-rate__item .item-bottom {
  margin-top: 24px;
}
.promotion-rate__item .item-bottom button {
  display: flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: #fff;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px; /* 125% */
  transition: all 0.15s ease-in-out;
}
.promotion-rate__item .item-bottom ul {
  margin-top: 16px;
}
.promotion-rate__item .item-bottom ul li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
/* .promotion-rate__item .item-bottom ul li:before {
  content: "";
  background-image: url(/assets/home/images/common/check.svg);
  width: 20px;
  height: 20px;
  display: inline-block;
} */
.promotion-rate__item .item-bottom ul li:last-child {
  margin-bottom: 0;
}
.promotion-rate__item:hover {
  border: 1px solid #fa3158;
}
.promotion-rate__item:hover .item-bottom button {
  background-color: #fa3158;
  color: #fff;
  border-color: #fa3158;
}
.promotion-rate__banner {
  margin-top: 48px;
  display: flex;
  gap: 12px;
}
.promotion-rate__banner__item {
  flex: 1;
  border-radius: 16px;
  overflow: hidden;
  padding: 40px;
  background-size: cover;
}
.promotion-rate__banner__item h5 {
  margin-bottom: 24px;
  line-height: 1.5;
  color: #fff;
}
.promotion-rate__banner__item button {
  height: 44px;
  padding: 0 24px;
  background-color: initial;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
  transition: all 0.2s ease-in-out;
}
.promotion-rate__banner__item button:hover {
  background-color: #fff;
  color: #1e85ff;
}
.promotion-rate__banner__item:nth-child(1) {
  background-image: url(../images/promotion/rate/rate_banner_01.png);
}
.promotion-rate__banner__item:nth-child(2) {
  background-image: url(../images/promotion/rate/rate_banner_02.png);
}
.promotion-create--01 {
  padding: 150px 0;
  background-color: #f9f3ed;
}
.promotion-create--01 h2 {
  font-size: 56px;
  margin-bottom: 24px;
  font-weight: 800;
  letter-spacing: -2.24px;
}
.promotion-create--01 p {
  font-size: 18px;
  color: #666;
  margin-bottom: 80px;
}
.promotion-create--01 img {
  margin-bottom: 32px;
}
.promotion-create--01 img:last-child {
  margin-bottom: 0;
}
.promotion-upload--01 {
  background-color: #f9f3ed;
  height: 818px;
}
.promotion-upload--01 .m-container {
  display: flex;
  align-items: center;
}
.promotion-upload--01 h2 {
  font-size: 56px;
  margin-bottom: 32px;
  font-family: "SUITE", sans-serif;
}
.promotion-upload--01 p {
  margin-bottom: 24px;
  font-size: 18px;
  letter-spacing: -0.4px;
  font-weight: 400;
  color: #666;
}
.promotion-upload--01 p span {
  font-weight: 700;
}
.promotion-upload--01 .col-6 {
  display: flex;
  align-items: center;
}
.promotion-upload--01 img {
  translate: 0 10%;
}
.promotion-upload--01 ul li {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 500;
}
.promotion-upload--01 ul li i {
  color: #fa3158;
  margin-right: 12px;
}
.promotion-upload--02 {
  padding: 150px 0;
}
.promotion-upload--02 h2 {
  font-size: 56px;
  font-family: "SUITE", sans-serif;
  margin-bottom: 64px;
}
.promotion-upload--02 h5 {
  margin-bottom: 8px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
}
.promotion-upload--02 p {
  color: #666;
}
.promotion-upload--02 img {
  margin-top: 32px;
  border-radius: 18px;
}
.promotion-upload--02 .smy {
  color: #999;
  font-size: 14px;
  font-weight: 500;
}
.promotion-upload--02 .swiper-slide {
  padding-top: 24px;
  padding-bottom: 32px;
  position: relative;
  background-color: #fff;
}
.promotion-upload--02 .swiper-pagination-progressbar {
  background-color: #eaeaea;
}
.promotion-upload--02 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
  background-color: #fa3158;
}
.promotion-upload--02 [class*=swiper--] {
  top: calc(50% + 82px);
}
.promotion-kmt--01 {
  background: url("/assets/home/images/promotion/service/kmt_01.png") center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  height: 750px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promotion-kmt--01 .m-container {
  height: auto;
}
.promotion-kmt--01 .badge {
  font-family: "SUITE", sans-serif;
  font-weight: 800;
  color: #fa3158;
  padding: 16px 48px;
  border-radius: 100px;
  background-color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  font-size: 64px;
}
.promotion-kmt--01 p {
  font-size: 24px;
  color: #fff;
  opacity: 0.6;
  line-height: 1.5;
}
.promotion-kmt--01 p + p {
  margin-top: 16px;
}
.promotion-kmt--01 h2 {
  font-size: 64px;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 40px;
}
.promotion-kmt--02 {
  padding: 80px 0 160px 0;
}
.promotion-kmt--03 {
  padding: 150px 0;
  background-color: #f5f5f7;
}
.promotion-kmt--03 h3 {
  letter-spacing: -1.92px;
}
.promotion-kmt--03 .mySwiper {
  margin: 60px 0;
}
.promotion-kmt--03 .mySwiper img {
  width: 40px;
  height: 40px;
}
.promotion-kmt--03 .mySwiper .swiper-slide {
  cursor: pointer;
}
.promotion-kmt--03 .mySwiper .swiper-slide picture {
  width: 40px;
  display: block;
  height: 40px;
  position: relative;
  margin-bottom: 24px;
}
.promotion-kmt--03 .mySwiper .swiper-slide picture img {
  position: absolute;
  opacity: 1;
  transition: all 0.2s ease-in-out;
}
.promotion-kmt--03 .mySwiper .swiper-slide picture img:last-child {
  opacity: 0;
}
.promotion-kmt--03 .mySwiper .swiper-slide span {
  color: #999;
  font-size: 20px;
  font-weight: 700;
  transition: all 0.3s ease-in-out;
  margin-bottom: 8px;
  display: block;
  line-height: 1.6;
}
.promotion-kmt--03 .mySwiper .swiper-slide p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
}
.promotion-kmt--03 .mySwiper .swiper-slide.swiper-slide-thumb-active img {
  opacity: 0;
}
.promotion-kmt--03 .mySwiper .swiper-slide.swiper-slide-thumb-active img:last-child {
  opacity: 1;
}
.promotion-kmt--03 .mySwiper .swiper-slide.swiper-slide-thumb-active span {
  color: #fa3158;
}
.promotion-kmt--04 {
  padding: 80px 0;
}
.promotion-kmt--04 .report-gallery a {
  display: block;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.promotion-kmt--04 .report-gallery a:hover {
  border: 1px solid #fa3158;
}
.promotion-kmt h3 {
  font-size: 48px;
  font-weight: 700;
}
.promotion-kmt h4 {
  font-size: 40px;
  font-weight: 700;
}
.promotion-kmt__list p {
  font-size: 24px;
  color: #666;
  line-height: 1.7;
  font-weight: 500;
  margin-bottom: 32px;
}
.promotion-kmt__list ul li {
  font-size: 24px;
  color: #666;
  font-weight: 500;
  line-height: 1.7;
  display: flex;
  align-items: flex-start;
  margin-bottom: 24px;
}
.promotion-kmt__list ul .left-area {
  min-width: 64px;
  font-size: 20px;
  font-weight: 800;
  color: #fa3158;
}
.promotion-kmt__list ol li {
  font-size: 18px;
  color: #666;
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
}
.promotion-kmt__list ol li.block {
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #eaeaea;
}
.promotion-kmt__list ol li.block .left-area,
.promotion-kmt__list ol li.block .right-area {
  width: 100%;
}
.promotion-kmt__list ol li.block .left-area {
  display: flex;
  align-items: center;
  gap: 40px;
  margin-bottom: 24px;
}
.promotion-kmt__list ol li.block .left-area span {
  font-size: 18px;
  font-weight: 500;
  color: #666;
}
.promotion-kmt__list ol .left-area {
  min-width: 110px;
  font-size: 20px;
  font-weight: 800;
  color: #333;
}
.promotion-kmt__list ol .right-area {
  padding-top: 1px;
}
.promotion-kmt__item {
  padding: 80px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
}
.promotion-kmt__item:last-child {
  border-bottom: 0;
}
.promotion-kmt__item .smy {
  font-size: 16px;
  color: #999;
  margin-top: 16px;
}
.promotion-kmt__box {
  background-color: #e2e8f0;
  padding: 56px;
  border-radius: 24px;
  position: relative;
}
.promotion-kmt__box .swiper {
  position: static;
}
.promotion-kmt__box .swiper-slide {
  transition: opacity 0.3s 0.1s ease-in-out;
  opacity: 1;
  aspect-ratio: 1180/540;
}
.promotion-kmt__box .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.promotion-kmt__box .swiper-slide-next {
  opacity: 0.5;
}
.promotion-matching h2 {
  font-size: 56px;
  line-height: 1.4;
  letter-spacing: -2.24px;
  font-weight: 800;
}
.promotion-matching--01 {
  height: 807px;
  background-color: #f7f7f7;
}
.promotion-matching--01 img {
  width: 110px;
  position: absolute;
  translate: -50% -50%;
  background: #fff;
  box-shadow: 0px 4px 16px 0px rgba(153, 153, 153, 0.08);
  border-radius: 8px;
  z-index: 1;
}
.promotion-matching--01 .image-parallax-wrap {
  height: 100%;
}
.promotion-matching--01 .image-parallax-set {
  position: relative;
  height: 100%;
  width: 100%;
}
.promotion-matching--02 {
  height: 712px;
  background: url(/assets/home/images/promotion/service/matching_02.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.promotion-matching--02 h2 {
  color: #fff;
}
.promotion-matching--02 p {
  margin-top: 32px;
  color: #fff;
  opacity: 0.8;
  font-size: 32px;
  font-weight: 500;
}
.promotion-matching--03 {
  padding: 150px 0;
  background: url(/assets/home/images/promotion/service/matching_03_00.png);
  background-size: cover;
}
.promotion-matching--03 .d-grid {
  grid-template-columns: repeat(2, 1fr);
  background-color: #fff;
  border-radius: 16px;
  gap: 32px;
  overflow: hidden;
}
.promotion-matching--03 .row {
  position: relative;
}
.promotion-matching--03 .glass {
  width: 240px;
  position: absolute;
  left: 50%;
  top: 20%;
  translate: -40%;
}
.promotion-matching__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 24px;
  row-gap: 56px;
}
.promotion-matching__item img {
  border: 1px solid #eaeaea;
  border-radius: 4px;
  margin-bottom: 16px;
}
.promotion-matching__item h6 {
  font-size: 20px;
  color: #333;
  font-weight: 500;
  margin-bottom: 4px;
}
.promotion-matching__item p {
  font-size: 16px;
  color: #999;
}
.promotion-contents h2 {
  line-height: 1.4;
  letter-spacing: -2.56px;
  text-align: center;
  font-weight: 400;
  margin-bottom: 32px;
}
.promotion-contents h2 span {
  font-weight: 800;
}
.promotion-contents h2 span.point {
  color: #fa3158;
}
.promotion-contents p {
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  letter-spacing: -0.8px;
}
.promotion-contents .text-left {
  text-align: left;
}
.promotion-contents .box__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.promotion-contents .box__list .box__item {
  border-radius: 16px;
  background-color: #fff;
  color: #333;
  padding: 48px 0;
  text-align: center;
}
.promotion-contents .box__list .box__item h5 {
  font-size: 22px;
  margin-bottom: 8px;
  font-weight: 700;
  font-family: "Pretendard", sans-serif;
}
.promotion-contents .box__list .box__item p {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  line-height: 1.6;
  margin-bottom: 0;
}
.promotion-contents .box__list .box__item img {
  height: 64px;
  margin-bottom: 24px;
}
.promotion-contents--01 {
  padding: 180px 0;
  background: url(/assets/home/images/promotion/service/contents_01_00.png);
  color: #fff;
}
.promotion-contents--01 .box__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 60px;
}
.promotion-contents--01 h3 {
  font-size: 64px;
}
.promotion-contents--01 h2 {
  margin-bottom: 24px;
  font-weight: 800;
  text-align: center;
}
.promotion-contents--01 p {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  margin-bottom: 32px;
  line-height: 1.6;
}
.promotion-contents--01 .check-ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}
.promotion-contents--01 .check-ul li {
  display: flex;
  color: #fff !important;
}
.promotion-contents--01 .check-ul li i {
  color: #facc15 !important;
}
.promotion-contents--02 {
  text-align: center;
  padding: 150px 0;
  overflow: hidden;
  background-color: #f9f3ed;
}
.promotion-contents--02 h3 {
  font-size: 64px;
}
.promotion-contents--02 .image-box {
  position: relative;
  height: 100%;
}
.promotion-contents--02 .image-01 {
  position: absolute;
  left: -10%;
  top: -20%;
  z-index: 1;
}
.promotion-contents--02 .image-02 {
  position: absolute;
  left: 10%;
  top: 0%;
  z-index: 0;
}
.promotion-contents--02 .btn-basic {
  padding: 20px 35px;
  height: auto;
  font-weight: 700;
  transition: all 0.3s;
}
.promotion-contents--02 .btn-basic:hover {
  box-shadow: 0px 50px 100px 0px rgba(250, 49, 88, 0.2);
}
.promotion-contents--03 {
  padding: 190px 0;
  background-image: url(/assets/home/images/promotion/service/contents_03_00.png);
  background-size: cover;
  color: #fff;
  text-align: center;
}
.promotion-contents--03 h2 {
  font-size: 56px;
  margin-bottom: 16px;
}
.promotion-contents--03 h3 {
  font-size: 56px;
}
.promotion-contents--03 .image-box {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.promotion-contents--03 .col-6 {
  padding: 0 40px;
}
.promotion-contents--03 ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.promotion-contents--03 ul h5 {
  font-size: 22px;
}
.promotion-contents--03 ul li {
  border-radius: 16px;
  /* shadow_main */
  box-shadow: 50px 50px 100px 0px rgba(0, 0, 0, 0.2);
}
.promotion-contents--04 {
  text-align: center;
  background-color: #f7f7f7;
  padding: 136px 0;
}
.promotion-contents--04 .icon-set {
  position: relative;
}
.promotion-contents--04 .icon-set img {
  position: absolute;
  bottom: -70px;
  left: -32px;
  width: 280px;
}
.promotion-contents--04 .image-box {
  /* 그림자 */
  border-radius: 40px;
  box-shadow: 50px 50px 100px 0px rgba(0, 0, 0, 0.2);
}
.promotion-contents--04 h3 {
  text-align: center;
  position: relative;
  width: fit-content;
  margin: auto;
}
.promotion-contents--04 h3 img {
  width: 278px;
  position: absolute;
  right: -24px;
  top: -58px;
}
.promotion-contents--04 h3 {
  font-size: 64px;
}
.promotion-contents--04 ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.promotion-contents--04 ul h5 {
  font-size: 22px;
}
.promotion-contents--04 ul li {
  background-color: #fff;
  border-radius: 16px;
  /* shadow_main */
  box-shadow: 50px 50px 100px 0px rgba(0, 0, 0, 0.2);
}
.promotion-contents--05 {
  padding: 180px 0;
  background-image: url(/assets/home/images/promotion/service/contents_05_00.png);
  background-size: cover;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.promotion-contents--05 h3 {
  font-size: 64px;
}
.promotion-contents--05 .check-ul li {
  justify-content: center;
  font-size: 20px !important;
}
.promotion-contents--05 [class*=image-0] {
  position: absolute;
  width: 809px;
  top: 50%;
  filter: drop-shadow(25px 25px 50px rgba(0, 0, 0, 0.2));
}
.promotion-contents--05 .image-01 {
  right: calc(50% + 280px);
  top: calc(50% - 100px);
}
.promotion-contents--05 .image-02 {
  left: calc(50% + 280px);
  top: calc(50% - 140px);
}
.promotion-contents--06 {
  background-image: url(/assets/home/images/promotion/service/contents_06_00.png);
  background-size: cover;
  padding: 180px 0;
  color: #fff;
  text-align: center;
}
.promotion-contents--06 h3 {
  font-size: 56px;
}
.promotion-contents--06 h2 {
  margin-bottom: 24px;
}
.promotion-contents--06 h2 span {
  font-weight: 400;
}
.promotion-contents--07 {
  min-height: 100vh;
  text-align: center;
  position: relative;
  z-index: -1;
}
.promotion-contents--07 .inner-wrap--01 {
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
  margin: auto;
  transform-origin: bottom;
}
.promotion-contents--07 .inner-wrap--01 video {
  transform-origin: bottom;
  filter: brightness(0.4);
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promotion-contents--07 .inner-wrap--02 {
  padding: 150px 0;
  position: relative;
  overflow: hidden;
}
.promotion-contents--07 .inner-wrap--02 .m-container {
  top: -100%;
}
.promotion-contents--07 h3 {
  font-size: 64px;
}
.promotion-contents--07 .check-ul {
  display: inline-flex;
  gap: 32px;
  margin: auto;
  margin-bottom: 64px;
}
.promotion-contents--07 .m-container {
  height: auto;
  z-index: 2;
  position: relative;
}
.promotion-contents--07 p {
  margin-top: 16px;
}
.promotion-contents--07 .video-box {
  z-index: 1;
  width: 100%;
  margin: auto;
}
.promotion-contents--07 .video-box .frame {
  width: 1180px;
  margin: auto;
  overflow: hidden;
  position: relative;
  transform-origin: center;
  filter: brighttness(0.4);
}
.promotion-contents--07 .video-box .frame img {
  position: relative;
  width: 1180px;
  left: 50%;
  translate: -50%;
}
.promotion-contents--07 .video-box .frame video {
  position: absolute;
  width: 944px;
  height: 85%;
  left: 50%;
  top: 4%;
  translate: -50% 0;
  object-fit: cover;
  border-radius: 24px;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  filter: brightness(0.4);
}
.promotion-contents--08 {
  background-color: #f9f3ed;
  overflow: hidden;
  padding: 150px 0 280px;
}
.promotion-contents--08 .m-container {
  position: relative;
  z-index: 1;
}
.promotion-contents--08 .m-container::before {
  position: absolute;
  content: "";
  width: 1422px;
  height: 851px;
  background-image: url(/assets/home/images/promotion/service/contents_08_01.png);
  background-size: contain;
  top: 150px;
  right: -360px;
  z-index: 0;
}
.promotion-contents--08 p {
  margin-bottom: 48px;
  color: #666;
}
.promotion-contents--09 {
  background-image: url(/assets/home/images/promotion/service/contents_09_00.png);
  background-size: cover;
  padding: 180px 0;
  color: #fff;
}
.promotion-contents--09 h2 {
  margin-bottom: 24px;
}
.promotion-contents--09 p {
  margin-bottom: 96px;
}
.promotion-contents--09 .slide-box {
  display: flex;
  align-items: center;
}
.promotion-contents--09 .slide-box .mySwiper {
  width: 272px;
  height: 354px;
}
.promotion-contents--09 .slide-box .mySwiper2 {
  width: calc(100% - 272px);
}
.promotion-contents--09 .slide-box .mySwiper .swiper-slide {
  display: flex;
  border-radius: 10px;
  cursor: pointer;
  align-items: center;
  font-size: 18px;
  padding-left: 32px;
  height: 118px !important;
  box-sizing: border-box;
  transition: background 0.3s ease-in-out;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0);
}
.promotion-contents--09 .slide-box .mySwiper .swiper-slide:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.promotion-contents--09 .slide-box .mySwiper .swiper-slide.swiper-slide-thumb-active {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-right: 1px solid rgba(0, 0, 0, 0);
}
.promotion-contents .check-ul {
  margin-top: 32px;
  margin-bottom: 32px;
}
.promotion-contents .check-ul li {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  font-size: 24px;
  letter-spacing: -0.8px;
  font-weight: 500;
  color: #333;
}
.promotion-contents .check-ul li i {
  color: #fa3158;
  margin-right: 12px;
}

.company-title-set h6 {
  font-size: 20px;
  font-family: "SUITE", sans-serif;
  color: #fa3158;
  display: block;
  margin-bottom: 24px;
  text-transform: uppercase;
  font-weight: 700;
}
.company-title-set h4 {
  line-height: 1.5;
  letter-spacing: -2px;
}
.company-title-set h3 {
  font-size: 40px;
  line-height: 1.5;
}

.partners--list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.partners--item {
  border-radius: 10px;
  border: 1px solid #eaeaea;
}

.map-summary .row {
  --bs-gutter-x: 0;
}
.map-summary [class*=col-] {
  height: 100px;
  display: flex;
  align-items: center;
  gap: 40px;
  font-size: 20px;
}
.map-summary .col-6 {
  border-bottom: 1px solid #eaeaea;
}
.map-summary .name {
  min-width: 80px;
  font-weight: 700;
}
.map-summary .text {
  color: #666;
}

.presentation article {
  padding-top: 152px;
  padding-bottom: 152px;
}
.presentation h2 {
  text-align: center;
}
.presentation-2 h2 {
  text-align: left;
}
.presentation-2 .presentation-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  line-height: 140%; /* 44.8px */
  letter-spacing: -0.64px;
}
.presentation-2 .presentation-box .presentation-box__item {
  padding: 40px;
  aspect-ratio: 547/310;
  position: relative;
  background-color: #f5f5f7;
  border-radius: 24px;
}
.presentation-2 .presentation-box .presentation-box__item h4 {
  line-height: 140%; /* 44.8px */
  letter-spacing: -0.64px;
}
.presentation-2 .presentation-box img {
  position: absolute;
  right: 40px;
  bottom: 40px;
  height: 68px;
  width: auto;
}
.presentation-3 {
  background: url(/assets/home/images/promotion/presentation/presentation-3-background.png);
  background-size: cover;
}
.presentation-4 .presentation-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.presentation-4 .presentation-box__item {
  border-radius: 24px;
}
.presentation-5 {
  background: url(/assets/home/images/promotion/presentation/presentation-5-background.png);
  background-size: cover;
}
.presentation-5 .presentation-graph {
  gap: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.presentation-5 .presentation-graph__item {
  background-color: #fff;
  border-radius: 24px;
  padding: 40px;
  position: relative;
}
.presentation-5 .presentation-graph .type {
  display: inline-flex;
  padding: 4px 16px;
  align-items: flex-start;
  gap: 10px;
  border-radius: 6px;
  background: #ebfbee;
  color: #2b8a3e;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 160%; /* 28.8px */
  letter-spacing: -0.36px;
  margin-bottom: 24px;
}
.presentation-5 .presentation-graph h5 {
  margin-bottom: 16px;
  line-height: 1.5;
  font-family: "Pretendard", sans-serif;
}
.presentation-5 .presentation-graph .graph {
  height: 340px;
  width: 100%;
  position: relative;
  display: flex;
  padding-right: 20px;
  align-items: flex-end;
}
.presentation-5 .presentation-graph .graph-1 {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  justify-content: flex-end;
  gap: 4px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.presentation-5 .presentation-graph .graph-1 .graph-line {
  min-width: 64px;
  height: 32px;
  background: linear-gradient(0deg, #fa3158 0%, #f631fa 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  padding: 0 16px;
  width: 100px;
  height: 24px;
}
.presentation-5 .presentation-graph .graph-1 .graph-line span {
  color: #fff;
  font-size: 12px;
  min-width: 40px;
  display: block;
  font-size: 12px;
  text-align: center;
  margin-bottom: 4px;
}
.presentation-5 .presentation-graph .graph-1 .graph-value {
  position: relative;
  z-index: 1;
  color: #fa3158;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
}
.presentation-5 .presentation-graph .graph-1::before {
  width: 100px;
  position: absolute;
  bottom: 0;
  height: calc(100% - 16px);
  background-color: #f6f6f9;
  content: "";
  left: 50%;
  translate: -50%;
}
.presentation-5 .presentation-graph .arrow-parabola {
  position: absolute;
  width: 120px;
  z-index: 10;
  left: calc(50% - 10px);
  translate: -50%;
  bottom: 66px;
}
.presentation-5 .presentation-graph .graph-2 {
  display: inline-flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  position: relative;
  z-index: 1;
}
.presentation-5 .presentation-graph .graph-2 .graph-line {
  min-width: 64px;
  height: 32px;
  background: linear-gradient(0deg, #fa3158 0%, #f631fa 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
  width: 100px;
  height: 24px;
  padding: 0 16px;
}
.presentation-5 .presentation-graph .graph-2 .graph-line span {
  color: #fff;
  min-width: 40px;
  display: block;
  text-align: center;
  margin-bottom: 4px;
  font-size: 12px;
}
.presentation-5 .presentation-graph .graph-2 .graph-value {
  position: relative;
  z-index: 1;
  color: #fa3158;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
}
.presentation-5 .presentation-graph .graph-2::before {
  width: 100px;
  position: absolute;
  bottom: 0;
  height: calc(100% - 16px);
  background-color: #f6f6f9;
  content: "";
  left: 50%;
  translate: -50%;
}
.presentation-5 .presentation-graph__background {
  position: absolute;
  right: 0;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 12px;
  z-index: 0;
}
.presentation-5 .presentation-graph__background div {
  position: relative;
  color: #999;
  text-align: right;
  min-width: 24px;
}
.presentation-5 .presentation-graph__background div::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  border: 1px dotted #f1f1f2;
}
.presentation-5 .presentation-graph__background div:last-child::before {
  border: 1px solid #dcdcde;
}
.presentation-6 {
  overflow: hidden;
  background-color: #f8f8f8;
}
.presentation-6 h2 {
  margin-bottom: 60px;
  font-size: 56px;
}
.presentation-6 .btn-cta {
  display: flex;
  width: 300px;
  padding: 24px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: #1e85ff;
  color: #fff;
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 83.333% */
  margin: 0 auto;
  margin-top: 60px;
}
.presentation-input {
  display: flex;
  justify-content: center;
}
.presentation-input__box {
  max-width: 1042px;
  width: 100%;
  padding: 56px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0px 2.9437198639px 5.525135994px 0px rgba(0, 0, 0, 0.03), 0px 8.139008522px 15.2762937546px 0px rgba(0, 0, 0, 0.04), 0px 19.5955982208px 36.7794303894px 0px rgba(0, 0, 0, 0.05), 0px 65px 122px 0px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.presentation-input__box .left-area {
  min-width: 270px;
}
.presentation-input__box .left-area h5 {
  margin-bottom: 4px;
  font-family: "Pretendard", sans-serif;
}
.presentation-input__box .left-area p {
  font-size: 12px;
  color: #999;
}
.presentation-input__box .right-area {
  width: 100%;
}
.presentation-input__item {
  display: flex;
  width: 100%;
  padding: 32px 0;
  border-top: 1px solid #eaeaea;
}
.presentation-input__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.marquee {
  margin-bottom: 24px;
  display: flex;
  gap: 24px;
}
.marquee__list {
  position: relative;
  display: inline-flex;
  gap: 24px;
  width: max-content;
}
.marquee__item {
  width: 490px;
  background-color: #fff;
  padding: 40px;
  border-radius: 6px;
  border: 1px solid #eaeaea;
}
.marquee__item .top-content {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid #eaeaea;
}
.marquee__item .top-content p {
  font-size: 16px;
  font-weight: 400;
  height: 128px;
  line-height: 1.8;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4; /* 라인수 */
  -webkit-box-orient: vertical;
  word-wrap: break-word;
}
.marquee__item .bottom-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.marquee__item .bottom-content h6 {
  font-size: 16px;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}
.marquee__item .bottom-content p {
  font-size: 14px;
  color: #999;
}
.marquee__item .bottom-content .image-area {
  width: 56px;
}

/*marquee*/
.marquee {
  --gap: 14px;
  position: relative;
  overflow: hidden;
  width: 100%;
  mask: var(--mask);
  -webkit-mask: var(--mask);
}
.marquee__list {
  display: flex;
  flex-flow: row nowrap;
  gap: var(--gap);
  position: relative;
  width: max-content;
}
.marquee__list {
  animation: move-infinite-scroll var(--data-speed) linear infinite forwards;
}
[data-direction="right"] .marquee__list {
  animation: move-infinite-scroll var(--data-speed) linear infinite backwards reverse;
}
.marquee__list:hover {
  animation-play-state: paused;
}
@keyframes move-infinite-scroll {
  to {
    transform: translateX(calc(-50% - (var(--gap) / 2)));
  }
}


.terms {
  margin-bottom: 150px;
}
.terms--content h6 {
  margin: 24px 0;
  color: #333;
  margin-bottom: 24px;
}
.terms--content p {
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
}
.terms--content p + p {
  margin-top: -8px;
}
.terms--content ul {
  margin-bottom: 24px;
}
.terms--content ul li {
  list-style: none;
  color: #666;
  line-height: 1.6;
  margin-bottom: 4px;
}
.terms--content ul li:last-child {
  margin-bottom: 0;
}
.terms--content ul ul {
  margin: 8px 0 12px 0;
}
.terms--content ul.dash {
  padding-left: 18px;
}
.terms--content ul.dash > li {
  list-style: none;
  position: relative;
}
.terms--content ul.dash > li::before {
  content: "- ";
  position: absolute;
  left: -18px;
  top: 12px;
  transform: translateY(-50%);
  display: inline-block;
  line-height: 1.6;
}
.terms--content ul.number {
  padding-left: 20px;
}
.terms--content ul.number > li {
  list-style: decimal;
}
.terms--content ul.circle-number {
  counter-reset: list-number;
}
.terms--content ul.circle-number > li {
  position: relative;
  padding-left: 24px;
  counter-increment: list-number;
}
.terms--content ul.circle-number > li:first-child::before {
  left: 7px;
}
.terms--content ul.circle-number > li:nth-child(n+10)::before {
  left: 4px;
}
.terms--content ul.circle-number > li::before {
  content: counter(list-number);
  counter-increment: circle 1;
  position: absolute;
  left: 6px;
  text-align: center;
  top: 4px;
  font-size: 12px;
  font-weight: 500;
}
.terms--content ul.circle-number > li::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  border: 1px solid #333;
  border-radius: 50%;
  width: 19px;
  height: 19px;
}
.terms--content ul.number-bracket {
  list-style-type: none;
  counter-reset: number-bracket;
  padding-left: 26px;
}
.terms--content ul.number-bracket > li {
  counter-increment: number-bracket;
  color: #666;
  position: relative;
  line-height: 1.6;
}
.terms--content ul.number-bracket > li:before {
  content: "" "(" counter(number-bracket) ") ";
  position: absolute;
  left: -26px;
  top: -1px;
}
.terms--content ul.number-bracket > li:nth-child(n+10)::before {
  left: -32px;
}
.terms--content ul.number-bracket-right {
  list-style-type: none;
  counter-reset: number-bracket-right;
  padding-left: 20px;
}
.terms--content ul.number-bracket-right > li {
  counter-increment: number-bracket-right;
  position: relative;
  color: #666;
  line-height: 1.6;
}
.terms--content ul.number-bracket-right > li:before {
  content: "" counter(number-bracket-right) ") ";
  position: absolute;
  left: -20px;
  top: -1px;
}
.terms--content ul.number-bracket-right > li:nth-child(n+10)::before {
  left: -27px;
}
.terms--content ul.hangul > li {
  list-style: hangul;
}
.terms--area {
  margin-bottom: 40px;
}

table {
  width: 100%;
  border: 1px solid #000;
  border-collapse: collapse;
  margin: 20px 0;
}
table th,
table td {
  border: 1px solid #000;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
}
table th {
  background-color: #f5f5f5;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-align: center;
  border: 1px solid #333;
}
table.table-fixed {
  table-layout: fixed;
  width: 100%;
}
table.table-fixed td {
  width: 25%;
}

/*상세페이지 가로 스크롤*/
.promotion-detail .body-content table{
  border-collapse:collapse;
  table-layout:fixed;
  border:none;
  overflow-x: auto;
  display: block;
  width: 100%;
  overflow-x:auto;
}
.promotion-detail .body-content, 
.promotion-detail .body-content p,
.promotion-detail .body-content span{
  word-break: break-all;
}

.tab-content.radio {
  display: none;
}
.tab-content.radio.active {
  display: block;
}

@media all and (max-height: 1180px) {
  .promotion-main--01 .m-container {
    padding-top: 120px;
  }
  .promotion-main--01 .main-swiper {
    max-width: 640px;
    bottom: 95px;
  }
  .promotion-main--01 .main-nav {
    height: 96px;
  }
  .promotion-main--01 .main-nav-wrap a {
    font-size: 16px;
  }
  .promotion-main--01 .main-nav-wrap a img {
    width: 32px;
    margin-bottom: 12px;
  }
  .promotion-main--03 {
    padding: 80px 0;
  }
  .promotion-main--03 .text-flow {
    margin: 48px 0;
    gap: 8px;
  }
  .promotion-main--03 .text-flow h2 {
    font-size: 64px;
  }
  .promotion-main--03 h3 {
    font-size: 36px;
  }
  .promotion-main--03 h4 {
    font-size: 24px;
  }
}
@media all and (max-height: 1020px) {

  .promotion-main--01 .m-container {
    padding-top: 100px;
  }
  .promotion-main--01 .main-swiper {
    max-width: 540px;
  }
  .promotion-main--01 .main-swiper .swiper-slide {
    border-radius: 12px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .promotion-main--01 .main-nav {
    height: 96px;
  }
  .promotion-main--01 .main-nav-wrap a {
    font-size: 16px;
  }
  .promotion-main--01 .main-nav-wrap a img {
    width: 32px;
    margin-bottom: 12px;
  }
  .promotion-main--03 {
    padding: 40px 0;
  }
  .promotion-main--03 .text-flow h2 {
    font-size: 48px;
  }
  .promotion-main--03 .text-flow h2 span {
    height: 72px;
    padding: 0 12px;
  }
  .promotion-main--03 h3 {
    font-size: 28px;
  }
  .promotion-main--03 h4 {
    font-size: 24px;
  }
}
[class*=swiper--] {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 24px;
  z-index: 10;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[class*=swiper--] i {
  color: #fff;
}

.swiper--prev {
  left: 32px;
}

.swiper--next {
  right: 32px;
}

.find-main-id {
  width: 460px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.find-main-id h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -1.28px;
}
.find-main-id .Phone-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 72px 0;
}
.find-main-id .Phone-text h3 {
  color: #000;
  text-align: center;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 24px */
  text-transform: uppercase;
  margin-bottom: 16px;
}
.find-main-id .Phone-text p {
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
}
.find-main-id .btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.find-main-id .btn-wrap button:nth-child(3),
.find-main-id .btn-wrap button:nth-child(4) {
  display: none;
}
.find-main-id .btn-wrap.active button:nth-child(3),
.find-main-id .btn-wrap.active button:nth-child(4) {
  display: block;
}
.find-main-id .btn-wrap.active button:nth-child(1),
.find-main-id .btn-wrap.active button:nth-child(2) {
  display: none;
}

.find-main-password {
  width: 460px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.find-main-password h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -1.28px;
}
.find-main-password .email-form label {
  display: flex;
  flex-direction: column;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.32px;
  margin-bottom: 16px;
}
.find-main-password .email-form label input {
  display: flex;
  padding: 16px 24px;
  height: 56px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #adb5bd);
  background: #fff;
  margin-top: 16px;
}
.find-main-password .email-form label .Invalidate-message {
  display: none;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  margin: 2px;
}
.find-main-password .email-form p {
  color: #666;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
}
.find-main-password .Btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.find-main-password .Btn-wrap > button {
  border-radius: 4px;
  background: #eaeaef;
}
.find-main-password .Btn-wrap button {
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  padding: 16px 32px;
  border-radius: 4px;
}
.find-main-password .Btn-wrap button.active {
  background-color: #fa3158;
  color: #fff;
}

.reset-password {
  width: 460px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.reset-password > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reset-password > div:first-child h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 32px */
  letter-spacing: -1.28px;
}
.reset-password > div:first-child span {
  display: block;
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 22.4px */
  letter-spacing: -0.32px;
  text-align: center;
}
.reset-password .Password-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reset-password .Password-form h3 {
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.32px;
}
.reset-password .Password-form label {
  display: flex;
  flex-direction: column;
}
.reset-password .Password-form label.active i {
  display: block !important;
}
.reset-password .Password-form label .input-wrap {
  position: relative;
}
.reset-password .Password-form label .input-wrap i {
  color: #059b65;
  font-size: 16px;
  display: none;
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}
.reset-password .Password-form label .Invalidate-message {
  display: none;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  margin: 2px;
}
.reset-password .Password-form label .Invalidate-confirm-message {
  display: none;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  margin: 2px;
}
.reset-password .Password-form label input {
  display: flex;
  padding: 16px 24px;
  align-items: flex-start;
  height: 56px;
  gap: 16px;
  align-self: stretch;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #adb5bd);
  background: #fff;
}
.reset-password .Password-form label input::placeholder {
  color: #999;
}
.reset-password .Password-form .Password-error input {
  border: 1px solid #d02b20;
  border-radius: 4px;
}
.reset-password .Password-form .Password-error div {
  display: block;
}
.reset-password .Btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.SignUp-basic {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  align-items: center;
}
.SignUp-basic section {
  width: 460px;
  padding: 196px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}
.SignUp-basic section h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 32px */
  letter-spacing: -1.28px;
}
.SignUp-basic section .SignUp-taps-wrap {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.SignUp-basic section .SignUp-taps-wrap div {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4px;
  border-top: 4px solid #ced4da;
  color: #999;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}
.SignUp-basic section .SignUp-taps-wrap .current-tap {
  border-top: 4px solid #fa3158;
  color: #333;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.SignUp-basic section form {
  display: flex;
  flex-direction: column;
}
.SignUp-basic section form h3 {
  color: var(--bwbw-12, #181826);
  text-align: center;
  font-family: SUITE;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 24px */
  letter-spacing: -0.96px;
  margin-bottom: 32px;
}
.SignUp-basic section form .post-btn {
  display: flex;
  width: 126px;
  padding: 16px 24px;
  height: 56px;
  align-items: flex-start;
  gap: 16px;
  border-radius: 4px;
  border: 1px solid var(--bwbw-12, #181826);
  justify-content: center;
  color: #181826;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
  white-space: nowrap;
}
.SignUp-basic section form-school, .SignUp-basic section form-phone, .SignUp-basic section form-location, .SignUp-basic section form-address, .SignUp-basic section form-name, .SignUp-basic section form-email {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.SignUp-basic section form-school div:first-child, .SignUp-basic section form-phone div:first-child, .SignUp-basic section form-location div:first-child, .SignUp-basic section form-address div:first-child, .SignUp-basic section form-name div:first-child, .SignUp-basic section form-email div:first-child {
  display: flex;
  margin-bottom: 16px;
  color: var(--bwbw-12, #181826);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
}
.SignUp-basic section form-school div:first-child span, .SignUp-basic section form-phone div:first-child span, .SignUp-basic section form-location div:first-child span, .SignUp-basic section form-address div:first-child span, .SignUp-basic section form-name div:first-child span, .SignUp-basic section form-email div:first-child span {
  color: #fa3158;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
}
.SignUp-basic section form-school > input, .SignUp-basic section form-phone > input, .SignUp-basic section form-location > input, .SignUp-basic section form-address > input, .SignUp-basic section form-name > input, .SignUp-basic section form-email > input {
  display: flex;
  padding: 16px 24px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid #adb5bd;
  background: #fff;
  margin-bottom: 8px;
}
.SignUp-basic section form-school .input-select, .SignUp-basic section form-phone .input-select, .SignUp-basic section form-location .input-select, .SignUp-basic section form-address .input-select, .SignUp-basic section form-name .input-select, .SignUp-basic section form-email .input-select {
  border-radius: 4px !important;
  border: 1px solid var(--bwbw-4, #dcdcde) !important;
  background: var(--bwbw-3, #f1f1f2) !important;
}
.SignUp-basic section form-school div:last-child, .SignUp-basic section form-phone div:last-child, .SignUp-basic section form-location div:last-child, .SignUp-basic section form-address div:last-child, .SignUp-basic section form-name div:last-child, .SignUp-basic section form-email div:last-child {
  display: none;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
}
.SignUp-basic section form-location {
  margin-bottom: 32px;
}
.SignUp-basic section form-location div:nth-child(2) {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 4px;
}
.SignUp-basic section form-location div:nth-child(2) .Payment-select {
  width: 100%;
  display: flex;
  height: 56px;
  align-items: center;
  padding-left: 24px;
  gap: 16px;
  position: relative;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #adb5bd);
  background: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  background: url("/assets/images/icons/chevron-down.png") no-repeat 95% 50%/15px auto;
}
.SignUp-basic section .Btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.SignUp-basic section .Btn-wrap > a {
  border-radius: 4px;
  background: #eaeaef;
}
.SignUp-basic section .Btn-wrap a {
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  padding: 16px 32px;
  border-radius: 4px;
}
.SignUp-basic section .Btn-wrap .Validate-btn {
  background-color: rgb(250, 49, 88);
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}

.btn-status > *:nth-child(1) {
  display: flex;
  color: #565661;
  background-color: #f1f1f2;
  border: 0;
}
.btn-status > *:nth-child(2) {
  display: none;
  color: #fff;
  background-color: #fa3158;
  border: 0;
}
.btn-status.active > *:nth-child(1) {
  display: none;
}
.btn-status.active > *:nth-child(2) {
  display: flex;
}

.SignUpPayment {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  position: relative;
  align-items: center;
}
.SignUpPayment section {
  width: 460px;
  padding: 196px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
}
.SignUpPayment section h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 32px */
  letter-spacing: -1.28px;
}
.SignUpPayment section .SignUp-taps-wrap {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.SignUpPayment section .SignUp-taps-wrap div {
  display: flex;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
  padding-top: 4px;
  border-top: 4px solid #ced4da;
  color: #999;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
}
.SignUpPayment section .SignUp-taps-wrap .current-tap {
  border-top: 4px solid #fa3158;
  color: #333;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}
.SignUpPayment section .Payment-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.SignUpPayment section .Payment-form-payment > div:first-child {
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.32px;
  margin-bottom: 16px;
}
.SignUpPayment section .Payment-form-payment > div:nth-child(2) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}
.SignUpPayment section .Payment-form-payment > div:nth-child(2) input {
  padding-left: 24px;
  width: 276px;
  display: flex;
  height: 56px;
  align-items: flex-start;
  border-radius: 4px;
  border: 1px solid #adb5bd;
  background: #fff;
}
.SignUpPayment section .Payment-form-payment > div:nth-child(2) button {
  border-radius: 4px;
  border: 1px solid #333;
  background: #fff;
  display: flex;
  width: 180px;
  justify-content: center;
  align-items: center;
  height: 56px;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
}
.SignUpPayment section .Payment-form-payment > div:nth-child(2) button i {
  margin-left: 8px;
}
.SignUpPayment section .Payment-form-payment > span {
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
}
.SignUpPayment section .Payment-form .Payment-description {
  display: flex;
  width: 460px;
  padding: 40px 24px;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 0 0;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.06);
}
.SignUpPayment section .Payment-form .Payment-description > div:not(:first-of-type) {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eaeaef;
  width: 100%;
  height: 47px;
}
.SignUpPayment section .Payment-form .Payment-description>div.h-auto{
  padding: 16px 0;
  justify-content: flex-start;
  align-items: flex-start;
  height: inherit;
}
.SignUpPayment section .Payment-form .Payment-description>div.h-auto .label-title,
.SignUpPayment section .Payment-form .Payment-description>div.h-auto .text-set{
  font-size: 14px;
}
.SignUpPayment section .Payment-form .Payment-description > div:not(:first-of-type) > span {
  color: #555;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.28px;
}
.SignUpPayment section .Payment-form .Payment-description > div:not(:first-of-type) > span:last-child {
  font-size: 16px;
}
.SignUpPayment section .Payment-form .Payment-description > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  border-bottom: 1px solid #000;
  padding-bottom: 24px;
  margin-bottom: 12px;
}
.SignUpPayment section .Payment-form .Payment-description > div:first-child > div:first-child {
  color: #222;
  font-family: SUITE;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 120%; /* 24px */
  letter-spacing: -0.4px;
}
.SignUpPayment section .Payment-form .Payment-description > div:first-child > div:last-child {
  color: #222;
  font-family: SUITE;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 24px */
  letter-spacing: -0.48px;
}
.SignUpPayment section .Payment-form .Payment-description > div:first-child > div:last-child span {
  color: #999;
  font-family: SUITE;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(2) > span:last-child {
  color: #fa3158;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.32px;
}
.SignUpPayment section .Payment-form .Payment-description>div:nth-child(2)>span.unset {
  color: #555;
  font-weight: 600;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(3) div {
  display: flex;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(3) div span:first-child {
  display: block;
  color: #999;
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%; /* 13.2px */
  letter-spacing: -0.22px;
  text-decoration: line-through;
  margin-right: 4px;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(3) div span:last-child {
  color: #fa3158;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%; /* 19.2px */
  letter-spacing: -0.32px;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(4) > span:last-child {
  color: #555;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.32px;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(5) > div {
  display: flex;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(5) > div span:first-child {
  display: block;
  color: #999;
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.22px;
  text-decoration: line-through;
  margin-right: 4px;
}
.SignUpPayment section .Payment-form .Payment-description > div:nth-child(5) > div span:last-child {
  color: #939393;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.32px;
}
.SignUpPayment section .Payment-form .sale{
  display: flex;
}
.SignUpPayment section .Payment-form .sale span:first-child {
  display: block;
  color: #999;
  font-family: Pretendard;
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.22px;
  text-decoration: line-through;
  margin-right: 4px;
}
.SignUpPayment section .Payment-form .sale span:last-child {
  color: #fa3158 !important;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.32px;
}
.SignUpPayment section .Payment-form .invalidate-error {
  border-radius: 4px;
  border: 1px solid #d02b20;
  background: #fff;
}
.SignUpPayment section .Payment-form .error-message {
  visibility: visible !important;
}
.SignUpPayment section .form-terms {
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.SignUpPayment section .form-terms h3 {
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -0.32px;
}
.SignUpPayment section .form-terms-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.SignUpPayment section .form-terms-item > div:first-child {
  display: flex;
  align-items: center;
}
.SignUpPayment section .form-terms-item i {
  color: #666;
  font-weight: 400;
  margin-right: 8px;
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  justify-content: center;
}
.SignUpPayment section .form-terms-item p {
  color: #666;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: -0.28px;
}
.SignUpPayment section .form-terms-item a {
  color: #666;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 19.6px */
  letter-spacing: -0.28px;
  text-decoration-line: underline;
}
.SignUpPayment section .form-terms-item.check i {
  color: #fa3158;
}
.SignUpPayment section .Btn-wrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}
.SignUpPayment section .Btn-wrap > button {
  border-radius: 4px;
  background: #eaeaef;
}
.SignUpPayment section .Btn-wrap button {
  width: 100%;
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  padding: 16px 32px;
  border-radius: 4px;
}
.SignUpPayment section .Btn-wrap .Validate-btn {
  background-color: rgb(250, 49, 88);
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}
.SignUpPayment .file-cover {
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.main-wrap {
  padding: 152px 0 80px;
  height: 100%;
  min-height: calc(100vh - 354px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
}

.tabs-wrap {
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.tabs-wrap .current-tap {
  border-bottom: 4px solid #333;
}
.tabs-wrap div {
  width: 50%;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid #e5e5e5;
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%; /* 18px */
  text-transform: uppercase;
}
.tabs-wrap div a {
  padding: 24px 32px;
}

.form-input-basic {
  width: 100%;
}
.form-input-basic input[type=text],
.form-input-basic input[type=tel],
.form-input-basic input[type=password],
.form-input-basic input[type=number],
.form-input-basic input[type=email] {
  display: flex;
  width: 100%;
  height: 56px;
  align-items: flex-start;
  gap: 16px;
  padding: 0 24px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #dcdcde);
  background: #fff;
  color: var(--bwbw-12, #181826);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}
.form-input-basic input::placeholder {
  color: #999;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}
.form-input-basic input:disabled {
  background-color: #f1f1f2 !important;
}
.form-input-basic > p {
  display: none;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.28px;
  margin-top: 4px;
}
.form-input-basic.error p {
  display: block !important;
}
.form-input-basic.error input[type=text],
.form-input-basic.error input[type=password],
.form-input-basic.error input[type=email],
.form-input-basic.error input[type=number],
.form-input-basic.error input[type=tel],
/* .form-input-basic.error canvas, */
.form-input-basic.error select {
  border-radius: 4px !important;
  border: 1px solid #d02b20 !important;
}
.form-input-basic.select > input {
  border-radius: 4px !important;
  border: 1px solid var(--bwbw-4, #dcdcde) !important;
  background: var(--bwbw-3, #f1f1f2) !important;
}
.form-input-basic.active i {
  display: block;
}

.input-basic-2 {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #dcdcde);
  background: #fff;
}
.input-basic-2::placeholder {
  color: #999;
}
.input-basic-2.sm {
  width: 124.8px;
}
.input-basic-2.xs {
  width: 56px;
  padding: 0 12px;
}

.label-title {
  position: relative;
  display: flex;
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
  align-items: center;
}
.label-title sup {
  color: #fa3158;
  margin-top: 1px;
  margin-left: 1px;
  text-transform: uppercase;
  font-size: 12px;
}
.label-title.required {
  position: relative;
  display: inline-block;
}
.label-title.required::after {
  position: absolute;
  content: "*";
  right: -6px;
  top: -1px;
  color: #fa3158;
  font-size: 12px;
  line-height: 1em;
  font-weight: 600;
}

.btn-ready {
  width: 100%;
  height: 56px;
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  background-color: #ffffff;
  border-radius: 4px;
  border: 1px solid var(--bwbw-10, #343440);
  color: var(--bwbw-10, #343440);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.btn-success {
  display: flex;
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  background: #eaeaef;
  color: #666;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 150% */
  letter-spacing: -0.32px;
}

.btn-primary {
  width: 100%;
  height: 56px;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  background-color: #fa3158;
}

.error-message input[type=text],
.error-message input[type=password],
.error-message select {
  border-radius: 4px !important;
  border: 1px solid #d02b20 !important;
  background: #fff !important;
}
.error-message p {
  display: flex !important;
}

.identification {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.identification > div:first-child {
  display: flex;
  margin-bottom: 16px;
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.32px;
}
.identification > div:first-child span {
  color: #fa3158;
  font-feature-settings: "sups" on;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 80%; /* 16px */
}

.help-infomation {
  position: fixed;
  z-index: 100;
  bottom: 40px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: space-between;
  width: 720px;
  padding: 16px;
  align-items: center;
  border-radius: 6px;
  border: 1px solid var(--colors-warning-w-300, #d9822f);
  background: var(--colors-warning-w-50, #fbf3ea);
  box-shadow: 50px 50px 100px 0px rgba(0, 0, 0, 0.2);
  opacity: 0;
  animation: fade-in-out 4s;
  transition: opacity 2s ease-in-out;
}
.help-infomation i {
  margin-right: 4px;
  color: #d9822f;
}
.help-infomation span {
  color: var(--colors-warning-w-300, #d9822f);
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.56px;
}

.btn-blue {
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border: 1px solid var(--button-secondary-normal, #1e85ff);
  background-color: #1e85ff;
}
.btn-blue span {
  color: var(--bwbw-1, #fff);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.login-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}
.login-modal-background {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.login-modal-content {
  z-index: 100;
  position: absolute;
  width: 328px;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 8px;
  background: var(--white, #fff);
  box-shadow: 0px 8px 36px 0px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
.login-modal-content-text {
  padding: 24px;
}
.login-modal-content-text h2 {
  width: 100%;
  color: var(--high-emphasis, #000);
  text-align: center;
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  margin-bottom: 24px;
}
.login-modal-content-text p {
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}
.login-modal-content-btns {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 1px;
}
.login-modal-content-btns .modal-btn-blue {
  width: 100%;
  display: flex;
  padding: 16px;
  height: 56px;
  justify-content: center;
  align-items: center;
  border: 1px solid #fa3158;
  background-color: #fa3158;
  color: var(--bwbw-1, #fff);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}
.login-modal-content-btns .modal-btn-basic {
  width: 100%;
  display: flex;
  height: 56px;
  padding: 16px;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--bwbw-4, #dcdcde);
  background: #fff;
  color: #343440;
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
}

.radio-btn {
  display: flex;
  width: 100%;
  height: 68px;
  padding: 24px;
  align-items: center;
  gap: 16px;
  border-radius: 4px;
  border: 1px solid #dcdce4;
  background: var(--bwbw-1, #fff);
  cursor: pointer;
}
.radio-btn.big {
  height: 88px;
}
.radio-btn h3 {
  margin-bottom: 0 !important;
}
.radio-btn input {
  accent-color: #fa3158;
  transform: scale(1.5);
  margin-right: 4px;
}
.radio-btn h3 {
  color: #333;
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 16px;
}
.radio-btn span {
  color: var(--bwbw-10, #343440);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px; /* 133.333% */
}
.radio-btn.select {
  border-radius: 4px;
  border: 1px solid #dcdcde;
  background-color: #f6f6f9;
}

.input-success {
  background-color: #f1f1f2 !important;
}

.payment-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 36px;
}
.payment-title h2 {
  color: var(--high-emphasis, #000);
  font-family: Pretendard;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px; /* 120% */
}
.payment-title i {
  align-self: center;
  font-size: 20px;
}

.input-checkbox {
  accent-color: #fa3158;
  transform: scale(1.5);
  margin-right: 8px;
  border: 1px solid #dcdcde;
  border-radius: 0px;
}
.input-checkbox.rounded {
  border-radius: 4px;
}
.input-checkbox.small {
  transform: scale(1.2);
}

.Payment-select {
  width: 100%;
  display: flex;
  height: 56px;
  align-items: center;
  padding-left: 24px;
  gap: 16px;
  position: relative;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-5, #dcdcde);
  background: #fff;
  color: #333;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 30px;
  z-index: 1;
  position: relative;
}
.Payment-select option[disabled] {
  color: #97979d !important;
}
.Payment-select option[value=""][disabled] {
  display: none;
}
.Payment-select > option:first-child {
  color: red !important;
}
.Payment-select option:not(:first-of-type) {
  color: #333 !important;
}
.payment-select-box {
  position: relative;
  width: 100%;
}
.payment-select-box::after {
  content: "";
  background-image: url(/assets/home/images/common/select.svg);
  background-size: 20px;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 16px;
  top: 50%;
  translate: 0 -50%;
  z-index: 0;
}
.payment-select-box .Payment-select {
  background-color: initial;
  z-index: 1;
  position: relative;
}

@keyframes fade-in-out {
  0% {
    opacity: 0;
  }
  20%, 80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.btn-wrap > button:disabled {
  display: none;
}
.btn-wrap.success > button:disabled, .btn-wrap.success > a {
  display: flex;
}
.btn-wrap.success > button:not(:disabled) {
  display: none;
}

.alert-ul {
  color: #fa3158;
  font-size: 14px;
  line-height: 24px;
}
.alert-ul li::before {
  content: "·";
  padding-right: 5px;
}

.signup {
  width: 460px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.signup > a {
  color: #97979d;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
  margin-top: 12px;
  text-align: center;
}
.signup form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 64px;
}
.signup h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 32px */
  letter-spacing: -1.28px;
  margin-bottom: 48px;
}
.signup input {
  display: flex;
  padding: 16px 24px;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid #adb5bd;
  background: #fff;
}
.signup .Btn-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.signup .Btn-wrap > button:nth-child(2) {
  display: none;
}
.signup .Btn-wrap.active > button:nth-child(1) {
  display: none;
}
.signup .Btn-wrap.active > button:nth-child(2) {
  display: block;
}
.signup .Btn-wrap > a {
  border-radius: 4px;
  background: #eaeaef;
}
.signup .Btn-wrap a {
  color: #666;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  padding: 16px 32px;
  border-radius: 4px;
}
.signup .Btn-wrap .Validate-btn {
  background-color: rgb(250, 49, 88);
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
}
.signup .Btn-wrap span {
  color: var(--bwbw-6, #97979d);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  text-align: center;
  font-weight: 500;
  line-height: 100%; /* 16px */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
}

.payment-main {
  width: 640px;
  background-color: #fff;
  padding: 24px;
}
.payment-main-name {
  color: var(--gray-gray-8, #343a40);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}
.payment-main-subscribe {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 16px;
}
.payment-main-subscribe-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.payment-main-subscribe-info > div {
  width: 100%;
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--gray-gray-3, #dee2e6);
  background: #fff;
}
.payment-main-subscribe-info > div > div:first-child {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}
.payment-main-subscribe-info > div > div:first-child > div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: var(--gray-gray-8, #343a40);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}
.payment-main-subscribe-info > div > div:first-child > div div:last-child {
  font-family: "SUITE", sans-serif;
}
.payment-main-subscribe-info > div > div:last-child {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
}
.payment-main-subscribe-info > div > div:last-child p {
  color: var(--gray-gray-6, #868e96);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}
.payment-main-subscribe-info > div > div:last-child > div:last-child {
  margin-top: 16px;
  display: flex;
  width: 100%;
  gap: 12px;
}
.payment-main-subscribe-info h3 {
  color: var(--high-emphasis, #000);
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  margin-bottom: 4px;
}

.payment-card {
  display: none;
  width: 640px;
  height: 100%;
  background-color: #fff;
  padding: 24px;
}
.payment-card-btn {
  display: flex;
  width: 126px;
  height: 32px;
  padding: 0px;
  font-size: 14px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.payment-card form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-card form span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 16px;
  margin: 0 12px;
}

.payment-bank {
  display: none;
  width: 640px;
  height: 100%;
  background-color: #fff;
  padding: 24px;
}
.payment-bank #corporate-acount-form {
  display: none;
}
.payment-bank-btn {
  display: flex;
  width: 126px;
  height: 32px;
  padding: 0px;
  font-size: 14px;
  border-radius: 99px;
  margin-bottom: 16px;
}
.payment-bank-tab {
  display: flex;
  padding: 16px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 52px;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid #dcdcde;
  background: #ffffff;
  color: #696972;
  text-align: center;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.56px;
}
.payment-bank-tab:nth-child(1) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.payment-bank-tab:nth-child(2) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.payment-bank-tab.active {
  color: #fa3158;
  font-weight: 600;
  border: 1px solid #fa3158;
  background-color: #ffeaee;
}
.payment-bank form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.payment-bank form span {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 16px;
  margin: 0 12px;
}
.payment-bank .sign-box {
  position: relative;
  display: flex;
  height: 200px;
  align-items: flex-start;
  align-self: stretch;
  border-radius: 4px;
  border: 1px solid var(--bwbw-4, #dcdcde);
  background: #fff;
}
.payment-bank .sign-box canvas {
  cursor: crosshair;
  position: relative;
  z-index: 0;
}
.payment-bank .sign-box > div {
  display: flex;
  position: absolute;
  bottom: 12px;
  right: 12px;
  gap: 4px;
  z-index: 100;
}
.payment-bank .sign-box > div > button {
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  border: 1px solid var(--bwbw-4, #dcdcde);
  background: #fff;
  color: var(--bwbw-10, #343440);
  font-feature-settings: "clig" off, "liga" off;
  font-family: Pretendard;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px; /* 200% */
}
.payment-bank span {
  color: var(--bwbw-6, #97979d);
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.signup-complete {
  padding: 152px 0 80px;
  height: 100%;
  min-height: calc(100vh - 354px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-direction: column;
  gap: 48px;
}
.signup-complete .text-red {
  color: #fa3158;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 120%;
  letter-spacing: -0.32px;
}
.signup-complete-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.signup-complete form {
  display: flex;
  gap: 16px;
  width: 460px;
  padding: 40px 24px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 8px;
  border: 1px solid #000;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.06);
}
.signup-complete form span {
  color: #666;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 16.8px */
  letter-spacing: -0.28px;
}
.signup-complete form span.password-type {
  font-size: 11px;
}
.signup-complete form ul {
  margin-bottom: 28px;
}
.signup-complete form li {
  color: #666;
  font-family: Pretendard;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 16.8px */
}
.signup-complete form li::before {
  content: "•";
  margin-right: 8px;
}
.signup-complete .title{
  width: 100%;
  width: 460px;
  font-size: 32px;
  display: flex;
  justify-content: center;
}

.Login {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 72px;
}
.Login section {
  width: 1180px;
  height: 830px;
  background-color: #ffffff;
  border-radius: 20px;
  display: flex;
  overflow: hidden;
  box-shadow: 50px 50px 100px 0px rgba(0, 0, 0, 0.2);
}
.Login section .swiper {
  width: 50%;
  height: 100%;
  position: relative;
}
.Login section .swiper .swiper-slide {
  height: 100%;
  background-color: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
}
.Login section .swiper .swiper-button-prev,
.Login section .swiper .swiper-button-next {
  width: 30px;
  height: 30px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  top: 50px;
  z-index: 1;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Login section .swiper .swiper-button-prev {
  left: 120px;
}
.Login section .swiper .swiper-button-next {
  right: 120px;
}
.Login section .swiper .swiper-pagination {
  position: absolute;
  display: flex;
  gap: 8px;
  width: 100px;
  height: 100px;
  bottom: 175px;
  left: 50%;
  translate: -50%;
  z-index: 100;
  color: white;
}
.Login section .swiper .swiper-pagination .swiper-pagination-bullet {
  display: block;
  width: 8px;
  height: 8px;
  background: #ffffff; /* or any color you prefer */
  opacity: 0.4; /* Inactive bullet state */
  border-radius: 100%;
}
.Login section .swiper .swiper-pagination .swiper-pagination-bullet-active {
  display: #ffffff;
  opacity: 1; /* Active bullet state */
}
.Login section .Benner {
  position: relative;
  background: url("/assets/home/images/login/login-benner.svg"), linear-gradient(315deg, #1e85ff 0%, #57a4ff 100%);
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Login section .Benner .Profile {
  width: 240px;
  height: 240px;
  background-color: #fff;
  border-radius: 100%;
  margin-bottom: 48px;
  border-radius: 50%;
  overflow: hidden;
}
.Login section .Benner .Profile img {
  width: 100%;
}
.Login section .Benner .Text-wrap {
  display: flex;
  text-align: center;
  flex-direction: column;
  margin-bottom: 94px;
}
.Login section .Benner .Text-wrap > span:first-child {
  color: #fff;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.48px;
  margin-bottom: 8px;
}
.Login section .Benner .Text-wrap > span:last-child {
  color: #fff;
  font-family: SUITE;
  font-size: 48px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 48px */
  letter-spacing: -1.92px;
  margin-bottom: 24px;
}
.Login section .Benner img {
  width: 40px;
  margin-bottom: 64px;
}
.Login section .Benner .Button-wrap {
  display: flex;
  gap: 12px;
}
.Login section .Benner .Button-wrap > button {
  display: flex;
  width: 180px;
  padding: 10px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background-color: transparent;
  border: 1px solid #fff;
  border-radius: 99px;
  color: #fff;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
  letter-spacing: -0.32px;
}
.Login section .Form {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: 50%;
  padding: 0 68px;
  padding-top: 148px;
}
.Login section .Form h2 {
  color: #333;
  text-align: center;
  font-family: SUITE;
  font-size: 32px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%; /* 32px */
  letter-spacing: -1.28px;
  margin-bottom: 48px;
}
.Login section .Form .Input-wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.Login section .Form .Input-wrap input {
  display: flex;
  width: 100%;
  padding: 16px 24px;
  align-items: center;
  margin-bottom: 4px;
}
.Login section .Form .Input-wrap span {
  visibility: hidden;
  color: #d02b20;
  font-family: Pretendard;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
  letter-spacing: -0.28px;
  margin-bottom: 24px;
}
.Login section .Form .Input-invalidate input {
  border: 1px solid #d02b20;
}
.Login section .Form .Input-invalidate span {
  visibility: visible;
}
.Login section .Form .Checkbox-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 48px;
}
.Login section .Form .Checkbox-wrap > div:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.Login section .Form .Checkbox-wrap > div:first-child label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.Login section .Form .Checkbox-wrap > div:last-child {
  color: #333;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 125% */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
}
.Login section .Form .btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
}
.Login section .Form .Links-wrap {
  display: flex;
  justify-content: space-between;
  width: 100%;
  position: absolute;
  bottom: 64px;
  left: 50%;
  translate: -50%;
  padding: 0 68px;
}
.Login section .Form .Links-wrap a {
  color: #333;
  text-align: center;
  font-family: Pretendard;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 150%; /* 24px */
  letter-spacing: -0.32px;
  text-decoration-line: underline;
}

@media all and (max-height: 1000px) {
  .Login {
    min-height: 800px;
  }
  .Login section {
    width: 1000px;
    height: 640px;
  }
  .Login section .Form {
    padding: 0 48px;
    padding-top: 60px;
  }
  .Login section .Form .Links-wrap {
    bottom: 40px;
  }
  .Login section .Benner .Profile {
    width: 160px;
    height: 160px;
  }
  .Login section .swiper .swiper-pagination {
    bottom: 105px;
  }
}

.intro{
  display: flex;
  justify-content: center;
  align-items: center;
  gap:60px;
  margin: 0 auto;
  background-color: #F7F7F7;
  width: 100%;
  height: 100vh;
}
.intro section{
  width: 100%;
  max-width: 420px;
  height: 560px;
  border-radius: 16px;  
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  text-align: center;
  gap:24px;
  border: 1px solid #Fff;
  -webkit-transition: all 350ms cubic-bezier(0.215,0.61,0.355,1);
  transition: all 350ms cubic-bezier(0.215,0.61,0.355,1);
}
.intro section:hover {
  -webkit-box-shadow: 0 10px 12px -6px rgba(0,0,0,0.5);
  box-shadow: 0 10px 12px -6px rgba(0,0,0,0.5);
  -webkit-transform: translateY(-4px);
  -ms-transform: translateY(-4px);
  transform: translateY(-4px);
}
.intro h2{
  font-size:32px;
}
.intro__btn-group{
  padding: 0 50px;
  width: 100%;
}
.intro .btn-intro{
  color: #fff;
  width:100%;
  height: 64px;
  border-radius: 99px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.intro .btn-intro-class{
  background-color: #FA3158;
}
.intro .btn-intro-student{
  background-color: #1669DC;
}
.intro__class:hover{
  border:1px solid #FA3158;
}
.intro__student:hover{
  border:1px solid #1669DC;
}

/* search right button */
.search-input input {
  padding-left: 16px;
  padding-right: 50px;
}
.search-input .fa-magnifying-glass {
  left: inherit;
  right: 16px;
  font-size: 20px;
  cursor: pointer;
}

/* payment */
.pay-swiper{
  position: relative;
}
.pay-swiper .swiper--prev{
  left:-50px;
}
.pay-swiper .swiper--next {
  right: -50px;
}
.pay-swiper [class*=swiper--]{
  background:none;
}
.pay-swiper [class*=swiper--] i{  
  color: #000000;
}
.Payment-form-bage span{
  cursor: pointer;
}

.alert-warning {
  background-color: #fbf3ea;
  border-color: #d9822f;
  padding: 8px 24px;
  padding-right: 32px;
  display: flex;
  gap: 4px;
  height: 50px;
  align-items: center;
  color: #d9822f;
  margin-bottom: 8px;
  margin-top: 24px;
}
.alert-blue {
  display: flex;
  align-items: center;
  color: #fff;
  background-color: #1e85ff;
  border-color: #1e85ff;
}
.alert-blue .btn-set {
  display: flex;
}
.alert-blue .button__line--white:last-child {
  background-color: transparent;
  border-color: #fff;
  color: #fff !important;
}
.alert .material-symbols-sharp {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.alert .msg {
  font-weight: 500;
  padding-right: 40px;
  font-size: 14px;
}
.alert .btn-close {
  width: 36px;
  height: 36px;
  padding: 0;
  top: 4px;
  right: 8px;
  box-sizing: border-box;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9822f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 1;
}
.alert .btn-close.white {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  filter: invert(1) grayscale(100%) brightness(200%);
}
.alert a {
  text-decoration: underline;
}
.alert-fixed {
  position: fixed;
  bottom: 24px;
  left: 50%;
  padding: 16px;
  height: auto;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  min-width: 720px;
  width: auto;
  z-index: 5;
}
.alert-fixed .btn-close {
  top: 50%;
  transform: translateY(-50%);
}
.alert-fixed .material-symbols-sharp {
  align-self: flex-start;
  position: relative;
}

.toast {
  position: relative;
  background-color: #fbf3ea;
  border-color: #d9822f;
  max-width: 800px;
  width: 100%;
}
.toast-container {
  position: fixed;
}
.toast-body {
  color: #d9822f;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  gap: 4px;
  padding-right: 40px;
}
.toast-body .material-symbols-sharp {
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.toast .btn-close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 12px;
  right: 0px;
  box-sizing: border-box;
  background-size: 12px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d9822f'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  opacity: 1;
}
.toast .btn-close.white {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  filter: invert(1) grayscale(100%) brightness(200%);
}

.edite-contents {
  max-width: 772px;
  width: 100%;
  margin: auto;
}
.edite-contents .paper-box img {
  width: 100%;
}

.select__small {
  position: relative;
  width: fit-content;
  background-color: #fff;
}

.select__small select {
  padding: 0 34px 0 12px;
  height: 32px;
  border: 1px solid #dcdcde;
  font-size: 12px;
  border-radius: 4px;
  appearance: none;
  color: #3b3b47;
  position: relative;
  z-index: 1;
  width: 100%;
}

.select__small select:disabled {
  background-color: #eaeaea;
}

.select__small::after {
  content: "";
  position: absolute;
  background-image: url(/assets/center/images/common/select_btn.svg);
  width: 8px;
  height: 5px;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  right: 12px;
  top: 50%;
  translate: 0 -40%;
}

.select__medium {
  position: relative;
  width: fit-content;
  background-color: #fff;
}

.select__medium select {
  width: 100%;
  padding: 0 38px 0 16px;
  color: #3b3b47;
  height: 36px;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  appearance: none;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.select__medium select:disabled {
  background-color: #eaeaea;
}

.select__medium::after {
  content: "";
  position: absolute;
  background-image: url(/assets/center/images/common/select_btn.svg);
  width: 8px;
  height: 5px;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  right: 12px;
  top: 50%;
  translate: 0 -40%;
}

.select__large {
  position: relative;
  width: fit-content;
  background-color: #fff;
}

.select__large select {
  width: 100%;
  padding: 0 38px 0 16px;
  color: #3b3b47;
  height: 56px;
  border: 1px solid #dcdcde;
  border-radius: 4px;
  appearance: none;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.select__large select:disabled {
  background-color: #eaeaea;
}

.select__large::after {
  content: "";
  position: absolute;
  background-image: url(/assets/center/images/common/select_btn.svg);
  width: 8px;
  height: 5px;
  background-size: 100%;
  background-repeat: no-repeat;
  z-index: 1;
  right: 12px;
  top: 50%;
  translate: 0 -40%;
}

/* height */
.h-auto{
  height: inherit;
}
.h-8{
  height: 8px !important;
}
.h-16{
  height: 16px !important;
}
.h-24{
  height: 24px !important;
}
.h-32{
  height: 32px !important;
}
.h-40{
  height: 40px !important;
}
.h-48{
  height: 32px !important;
}
.h-56{
  height: 56px !important;
}
.h-60{
  height: 60px !important;
}

/* font size */
.f-12 {
  font-size: 12px;
}
.f-14 {
  font-size: 14px;
}
.f-16 {
  font-size: 16px;
}
.f-18{
  font-size: 18px;
}
.f-20 {
  font-size: 20px;
}
.f-24 {
  font-size: 24px;
}

/*terms*/
.terms .promotion-board__title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 40px 0 40px;
  font-size: 32px;
  font-weight: bold;
}

.terms {
  margin-bottom: 150px;
}

.terms--content h5 {
  font-size: 24px;
}

.terms--content h6 {
  margin: 24px 0;
  color: #333;
  margin-bottom: 24px;
  font-size: 18px;
}

.terms--content p {
  color: #666;
  margin-bottom: 24px;
  line-height: 1.5;
  font-size: 14px;
}

.terms--content p+p {
  margin-top: -8px;
}

.terms--content ul {
  margin-bottom: 24px;
}

.terms--content ul li {
  list-style: none;
  color: #666;
  line-height: 1.6;
  margin-bottom: 4px;
  font-size: 14px;
}

.terms--content ul li:last-child {
  margin-bottom: 0;
}

.terms--content ul ul {
  margin: 8px 0 12px 0;
}

.terms--content ul.dash {
  padding-left: 18px;
}

.terms--content ul.dash>li {
  list-style: none;
  position: relative;
}

.terms--content ul.dash>li::before {
  content: "- ";
  position: absolute;
  left: -18px;
  top: 12px;
  transform: translateY(-50%);
  display: inline-block;
  line-height: 1.6;
}

.terms--content ul.number {
  padding-left: 20px;
}

.terms--content ul.number>li {
  list-style: decimal;
}

.terms--content ul.circle-number {
  counter-reset: list-number;
}

.terms--content ul.circle-number>li {
  position: relative;
  padding-left: 24px;
  counter-increment: list-number;
}

.terms--content ul.circle-number>li:first-child::before {
  left: 7px;
}

.terms--content ul.circle-number>li:nth-child(n+10)::before {
  left: 4px;
}

.terms--content ul.circle-number>li::before {
  content: counter(list-number);
  counter-increment: circle 1;
  position: absolute;
  left: 6px;
  text-align: center;
  top: 4px;
  font-size: 12px;
  font-weight: 500;
}

.terms--content ul.circle-number>li::after {
  content: "";
  position: absolute;
  top: 13px;
  left: 0;
  transform: translateY(-50%);
  display: inline-block;
  border: 1px solid #333;
  border-radius: 50%;
  width: 19px;
  height: 19px;
}

.terms--content ul.number-bracket {
  list-style-type: none;
  counter-reset: number-bracket;
  padding-left: 26px;
}

.terms--content ul.number-bracket>li {
  counter-increment: number-bracket;
  color: #666;
  position: relative;
  line-height: 1.6;
}

.terms--content ul.number-bracket>li:before {
  content: "" "(" counter(number-bracket) ") ";
  position: absolute;
  left: -26px;
  top: -1px;
}

.terms--content ul.number-bracket>li:nth-child(n+10)::before {
  left: -32px;
}

.terms--content ul.number-bracket-right {
  list-style-type: none;
  counter-reset: number-bracket-right;
  padding-left: 20px;
}

.terms--content ul.number-bracket-right>li {
  counter-increment: number-bracket-right;
  position: relative;
  color: #666;
  line-height: 1.6;
}

.terms--content ul.number-bracket-right>li:before {
  content: "" counter(number-bracket-right) ") ";
  position: absolute;
  left: -20px;
  top: -1px;
}

.terms--content ul.number-bracket-right>li:nth-child(n+10)::before {
  left: -27px;
}

.terms--content ul.hangul>li {
  list-style: hangul;
}

.terms--area {
  margin-bottom: 40px;
}

.list-tab {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #dcdcde;
}

.list-tab .nav-link {
  height: 48px;
  padding: 0 16px;
  display: flex;
  place-items: center;
  color: #696972;
  font-weight: 700;
  font-size: 14px;
  position: relative;
  transition: none;
}

.list-tab .nav-link::after {
  transition: all 0.1s ease-in-out;
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2px;
  left: 0;
  border-bottom: 2px solid #1e85ff;
  opacity: 0;
}

.list-tab .nav-link.active {
  color: #1e85ff;
}

.list-tab .nav-link.active::after {
  opacity: 1;
  translate: 0%;
}

.list-tab--2 {
  padding: 4px;
  border: 0;
  border-radius: 6px;
  background-color: #efeff0;
}

.list-tab--2 .nav-item {
  width: 50%;
}

.list-tab--2 .nav-link {
  width: 100%;
  color: #a2a3a7;
  height: 24px;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}

.list-tab--2 .nav-link.active {
  color: #000;
  background-color: #fff;
  border-radius: 4px;
}

.list-tab--2 .nav-link::after {
  display: none;
}

.modal-dialog {
  max-width: 832px;
}

/* loadging bar */
.ajaxloading{
  position: fixed;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999;
  background-color: #ffffff90;
}
.ajaxloading img{
  width:60px;
}

.autoResize{
  width: 100%;
  outline: none;
  overflow: hidden; 
  resize: none;
  border:none;
}

.modal-header .material-symbols-sharp {
  display: none;
}

.signup-complete form.border-0{
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0);
  margin-top: -40px;
}

/* problem.css */
/* em,
.neq_edit {
  font-family: inherit;
}
img {
  width: auto;
} */

a.promotion-board__item{
  cursor: pointer;
}

/* autoEmail */
.autoEmail-container {
  position: relative;
}

.autoEmail-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 1000;
}

.autoEmail-suggestion {
  padding: 8px;
  cursor: pointer;
}

.autoEmail-suggestion.active,
.autoEmail-suggestion:hover {
  background-color: #f0f0f0;
}

.autoEmail-a:after{
  content:'@';
  display:inline-block;
  line-height: 1;
}
.email-suggestions{
  border-radius: 4px;
  border: 1px solid #eaeaea;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.16);
  transition: all 0.15s ease-in-out;  
  display: none;
}
.autoEmail-container .input-basic{
  line-height: 40px;
  background-color: #fff;
  cursor:text;
}


/* 요금안내 > 첫번째 요금안내 삭제 */
#promotion-rate__list {
    grid-template-columns: repeat(3, 1fr);
}
/* 2025-0703 수정 */
#promotion-rate__list .promotion-rate__item:nth-child(4){
    display:none;
}
/* 2025-0702 추가 */
.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

/***************** 2026-0116 학교홈 *****************/
/* #wrap{
    overflow: initial; 
  } 2026-0130 삭제*/
.promotion-school {
width: 100%;
padding: 80px 0;
background-color: #ffeef0;
background-image: url(/assets/home/images/promotion/main/bg_school_main.png);
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
}
.promotion-school__container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 1220px;
}
.promotion-school__content {
flex: 1;
}
.promotion-school__title {
font-size: 60px;
font-weight: 800;
color: #333;
margin-bottom: 20px;
}
.promotion-school__title--highlight {
color: #fa345b;
}

.promotion-school__subtitle {
  font-size: 24px;
  color: #666;
  margin-bottom: 40px;
}
.promotion-school__actions {
display: flex;
gap: 15px;
}
.promotion-school__button {
display: inline-block;
padding: 15px 30px;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.promotion-school__button--primary {
background-color: #fa345b;
color: #fff;
border: 1px solid #fa345b;
}

.promotion-school__button--secondary {
background-color: #fff;
color: #fa345b;
border: 1px solid #fa345b;
}

.promotion-school__visual {
/* flex: 1; */
text-align: right;
}

.promotion-school__image {
max-width: 100%;
height: auto;
filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.promotion-mathClass__wrap{
  width: 100%;
  background-color: #fff;
}
.promotion-mathClass {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 24px;
  font-family: Pretendard, sans-serif;
  color: #111;
}

.promotion-mathClass__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}

.promotion-mathClass__title {
  font-size: 28px !important;
  font-weight: 700;
}

.promotion-mathClass__title--highlight {
  color: #ff3b5c;
}

.promotion-mathClass__arrow {
  width: 240px;
  height: 20px;
  background: url(/assets/home/images/promotion/main/img_school_arrow.png) no-repeat right;
}

.promotion-mathClass__actions {
  display: flex;
  gap: 12px;
}

.promotion-mathClass__btn {
  width: 240px;
  height: 60px;
  padding: 10px 18px;
  font-size: 20px;
  border-radius: 8px;
  cursor: pointer;
}

.promotion-mathClass__btn--primary {
  background: #555;
  color: #fff;
  border: none;
}

.promotion-mathClass__btn--outline {
  background: #fff;
  border: 1px solid #555;
  color: #333;
}

.promotion-mathClass__stats {
  display: flex;
  align-items: center;
  background: #f7f7f7;
  border-radius: 10px;
  padding: 32px 24px;
  margin-bottom: 24px;
}

.promotion-mathClass__stat {
  flex: 1;
  text-align: center;
}

.promotion-mathClass__divider {
  width: 1px;
  height: 80px;
  background: #ddd;
}

.promotion-mathClass__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #e0e0e0;
}

.promotion-mathClass__icon--users { 
  background: url(/assets/home/images/promotion/main/img_school_01.png); 
  background-size: 48px;
}
.promotion-mathClass__icon--files { 
  background: url(/assets/home/images/promotion/main/img_school_02.png); 
  background-size: 48px;
}
.promotion-mathClass__icon--db { 
  background: url(/assets/home/images/promotion/main/img_school_03.png); 
  background-size: 48px;
}

.promotion-mathClass__label {
  font-size: 20px;
  color: #666;
}

.promotion-mathClass__value {
  margin-top: 6px;
  font-size: 35px;
  font-weight: 600;
}

.promotion-mathClass__value strong {
  color: #ff3b5c;
}

.promotion-mathClass__footer {
  background: #fafafa;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  font-size: 25px;
  font-weight: 600;
}

/* 학교홈 절차 */
.promotion-processor {
  padding: 80px 0px;
  background: #fff3ee;
  text-align: center;
  font-family: Pretendard, sans-serif;
}
.promotion-processor__title {
  font-size: 28px !important;
  font-weight: 700;
  margin-bottom: 40px;
}
.promotion-processor__flow {
  position: relative;
  width: 100%;
  margin: 0 auto 48px;
}
.promotion-processor__flow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #8c8c8c;
  transform: translateY(-50%);
}
.promotion-processor__flow-inner {
  position: relative;
  z-index: 2;
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.promotion-processor__dot {
  width: 25%;
  position: relative;
}
.promotion-processor__dot:after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #8c8c8c;
  flex-shrink: 0;
  position: absolute;
  left:50%;
  top:-5px;
}
.promotion-processor__arrow {
  position: relative;
  flex: 1;
  height: 1px;
}
.promotion-processor__arrow::after {
  content: "";
  position: absolute;
  right: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #8c8c8c;
  border-right: 2px solid #8c8c8c;
  transform: translate(50%, -50%) rotate(45deg);
}
.promotion-processor__steps {
  display: flex;
  gap: 24px;
  justify-content: center;
  max-width: 1220px;
  margin: 0 auto;
}
.promotion-processor__step {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  width: 100%;
}
.promotion-processor__step--active
.promotion-processor__step-header {
  background: #ff3b5c;
}
.promotion-processor__step-header {
  padding: 16px;
  font-weight: 700;
  color: #fff;
  background: #555;
  font-size: 25px;
}
.promotion-processor__step-header--dark {
  background: #555;
}
.promotion-processor__step-number {
  margin-right: 6px;
}
.promotion-processor__step-body {
  padding: 24px 16px 28px;
}
.promotion-processor__icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 16px;
  border-radius: 12px;
  background: #eee;
}
.promotion-processor__icon--estimate { 
  background: url(/assets/home/images/promotion/main/img_school_p01.png); 
  background-size: 120px;
 }
.promotion-processor__icon--purchase { 
  background: url(/assets/home/images/promotion/main/img_school_p02.png); 
  background-size: 120px;
 }
.promotion-processor__icon--start { 
  background: url(/assets/home/images/promotion/main/img_school_p03.png); 
  background-size: 120px;
 }
.promotion-processor__icon--training { 
  background: url(/assets/home/images/promotion/main/img_school_p04.png); 
  background-size: 120px;
 }

.promotion-processor__desc {
  font-size: 20px;
  color: #555;
  line-height: 1.6;
}


.promotion-quote {
  max-width: 1200px;
  margin: 80px auto;
  padding: 48px 40px;
  background: #fafafa;
  border-radius: 16px;
}

.promotion-quote__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.promotion-quote__title {
  font-size: 35px;
  font-weight: 700;
}

.promotion-quote__desc {
  margin-top: 8px;
  font-size: 20px;
  color: #666;
}

.promotion-quote__divider {
  margin: 48px 0;
  border: none;
  height: 1px;
  background: #000;
}

.promotion-quote__trial {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.promotion-quote__trial-title {
  font-size: 35px;
  font-weight: 700;
  margin-bottom: 20px;
}

.promotion-quote__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}

.promotion-quote__item {
  position: relative;
  padding-left: 20px;
  font-size: 20px;
  color: #444;
}

.promotion-quote__item::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #666;
}

.promotion-quote__btn {
  min-width: 240px;
  height: 60px;
  padding: 14px 20px;
  border-radius: 10px;
  font-size: 20px;
  font-weight: 600;
  cursor: pointer;
}

.promotion-quote__btn--dark {
  background: #555;
  color: #fff;
  border: none;
}

.promotion-quote__btn--primary {
  background: #ff3b5c;
  color: #fff;
  border: none;
}


/***************** 학교홈 모바일 *******************/
/* --- Desktop & Common Fixes --- */
@media (max-width: 1024px) {
    .promotion-processor {
        padding: 60px 20px;
    }
    .promotion-processor__steps {
        max-width: 100%;
    }
    .promotion-quote {
        margin: 60px 20px;
        padding: 40px 30px;
    }
    .promotion-quote__title,
    .promotion-quote__trial-title {
        font-size: 28px;
    }
}

/* --- Tablet & Large Mobile (999px) --- */
@media (max-width: 999px) {
    #wrap {
        padding: 0;
    }
    .promotion-school {
        padding: 60px 20px;
    }
    .promotion-school__title {
        font-size: 48px;
    }
    .promotion-school__subtitle {
        font-size: 20px;
    }
    .promotion-school__actions {
        display: flex;
        flex-direction: column;
        gap: 15px;
        max-width: 250px;
    }
    /* Processor & MathClass */
    .promotion-processor__step-header {
        font-size: 20px;
    }
    .promotion-processor__desc {
        font-size: 16px;
    }
    .promotion-mathClass__header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .promotion-mathClass__arrow {
        display: none;
    }
}

/* --- Mobile Landscape / Tablet Portrait (768px) --- */
@media (max-width: 768px) {
    /* School Section */
    .promotion-school__container {
        flex-direction: column;
        text-align: center;
    }
    .promotion-school__content {
        margin-bottom: 40px;
    }
    .promotion-school__title {
        font-size: 36px;
        word-break: keep-all;
    }
    .promotion-school__subtitle {
        font-size: 18px;
        margin-bottom: 30px;
    }
    .promotion-school__actions {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        max-width: initial;
    }
    .promotion-school__button {
        width: 100%;
        max-width: 300px;
        padding: 12px 20px;
        font-size: 16px;
    }
    .promotion-school__visual {
        text-align: center;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .promotion-school__image {
        max-width: 80%;
    }

    /* MathClass Section */
    .promotion-mathClass {
        padding: 40px 20px;
    }
    .promotion-mathClass__title {
        font-size: 24px !important;
    }
    .promotion-mathClass__actions {
        width: 100%;
        flex-direction: column;
        align-items: center;
    }
    .promotion-mathClass__btn {
        width: 100%;
        max-width: 320px;
        height: 54px;
        font-size: 18px;
    }
    .promotion-mathClass__stats {
        flex-direction: column;
        padding: 40px 20px;
        gap: 30px;
    }
    .promotion-mathClass__divider {
        width: 100%;
        height: 1px;
    }
    .promotion-mathClass__label {
        font-size: 18px;
    }
    .promotion-mathClass__value {
        font-size: 28px;
    }
    .promotion-mathClass__footer {
        font-size: 20px;
        padding: 15px;
        word-break: keep-all;
    }

    /* Processor Section (Vertical Flow) */
    .promotion-processor__flow {
        display: none;
    }
    .promotion-processor__steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        position: relative;
        max-width: 600px;
        margin: 0 auto;
    }
    .promotion-processor__steps::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: #8c8c8c;
        z-index: 0;
    }
    .promotion-processor__step {
        position: relative;
        width: 100%;
        text-align: left;
    }
    .promotion-processor__step::before {
        content: "";
        position: absolute;
        left: -35px;
        top: 18px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        border: 2px solid #8c8c8c;
        z-index: 3;
    }
    .promotion-processor__step--active::before {
        border-color: #ff3b5c;
        background: #ff3b5c;
    }
    .promotion-processor__step:not(:last-child)::after {
        content: "";
        position: absolute;
        left: -32px;
        bottom: -30px;
        width: 8px;
        height: 8px;
        border-bottom: 2px solid #8c8c8c;
        border-right: 2px solid #8c8c8c;
        transform: rotate(45deg);
        z-index: 2;
    }
    .promotion-processor__step-header {
        font-size: 20px;
        text-align: left;
        padding: 12px 20px;
    }
    .promotion-processor__step-body {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 20px;
    }
    .promotion-processor__icon {
        width: 70px;
        height: 70px;
        background-size: 70px;
        margin: 0;
        flex-shrink: 0;
    }
    .promotion-processor__desc {
        font-size: 16px;
        text-align: left;
    }
    .promotion-processor__title {
        font-size: 24px !important;
    }

  /* Quote Section */
    .promotion-quote {
        padding: 30px 20px;
    }
    .promotion-quote__header {
        flex-direction: column;
        text-align: center;
        gap: 24px;
    }
    .promotion-quote__desc {
        font-size: 18px;
    }
    .promotion-quote__divider {
        margin: 32px 0;
    }
    .promotion-quote__trial {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
    }
    .promotion-quote__list {
        grid-template-columns: 1fr;
        text-align: left;
        display: inline-block;
    }
    .promotion-quote__item {
        font-size: 17px;
        margin-bottom: 8px;
    }
    .promotion-quote__btn {
        width: 100%;
        max-width: 320px;
        height: 54px;
        font-size: 18px;
    }
}

/* --- Small Mobile (480px) --- */
@media (max-width: 480px) {
    .promotion-school__title {
        font-size: 28px;
    }
    .promotion-mathClass__title {
        font-size: 22px !important;
    }
    .promotion-mathClass__value {
        font-size: 24px;
    }
    .promotion-processor__step-body {
        flex-direction: column;
    }
    .promotion-quote__title,
    .promotion-quote__trial-title {
        font-size: 24px;
    }
    .promotion-quote__item {
        font-size: 15px;
    }
}

@media screen and (max-width: 999px) {
    aside-banner2 {
        display: none;
    }
}