@charset "UTF-8";
.mr-1 {
  margin-right: 1px;
}

.mt-1 {
  margin-top: 1px;
}

.ml-1 {
  margin-left: 1px;
}

.mb-1 {
  margin-bottom: 1px;
}

.mr-2 {
  margin-right: 2px;
}

.mt-2 {
  margin-top: 2px;
}

.ml-2 {
  margin-left: 2px;
}

.mb-2 {
  margin-bottom: 2px;
}

.mr-3 {
  margin-right: 3px;
}

.mt-3 {
  margin-top: 3px;
}

.ml-3 {
  margin-left: 3px;
}

.mb-3 {
  margin-bottom: 3px;
}

.mr-4 {
  margin-right: 4px;
}

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

.ml-4 {
  margin-left: 4px;
}

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

.mr-5 {
  margin-right: 5px;
}

.mt-5 {
  margin-top: 5px;
}

.ml-5 {
  margin-left: 5px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mr-6 {
  margin-right: 6px;
}

.mt-6 {
  margin-top: 6px;
}

.ml-6 {
  margin-left: 6px;
}

.mb-6 {
  margin-bottom: 6px;
}

.mr-7 {
  margin-right: 7px;
}

.mt-7 {
  margin-top: 7px;
}

.ml-7 {
  margin-left: 7px;
}

.mb-7 {
  margin-bottom: 7px;
}

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

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

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

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

.mr-9 {
  margin-right: 9px;
}

.mt-9 {
  margin-top: 9px;
}

.ml-9 {
  margin-left: 9px;
}

.mb-9 {
  margin-bottom: 9px;
}

.mr-10 {
  margin-right: 10px;
}

.mt-10 {
  margin-top: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mr-11 {
  margin-right: 11px;
}

.mt-11 {
  margin-top: 11px;
}

.ml-11 {
  margin-left: 11px;
}

.mb-11 {
  margin-bottom: 11px;
}

.mr-12 {
  margin-right: 12px;
}

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

.ml-12 {
  margin-left: 12px;
}

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

.mr-13 {
  margin-right: 13px;
}

.mt-13 {
  margin-top: 13px;
}

.ml-13 {
  margin-left: 13px;
}

.mb-13 {
  margin-bottom: 13px;
}

.mr-14 {
  margin-right: 14px;
}

.mt-14 {
  margin-top: 14px;
}

.ml-14 {
  margin-left: 14px;
}

.mb-14 {
  margin-bottom: 14px;
}

.mr-15 {
  margin-right: 15px;
}

.mt-15 {
  margin-top: 15px;
}

.ml-15 {
  margin-left: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

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

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

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

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

.mr-17 {
  margin-right: 17px;
}

.mt-17 {
  margin-top: 17px;
}

.ml-17 {
  margin-left: 17px;
}

.mb-17 {
  margin-bottom: 17px;
}

.mr-18 {
  margin-right: 18px;
}

.mt-18 {
  margin-top: 18px;
}

.ml-18 {
  margin-left: 18px;
}

.mb-18 {
  margin-bottom: 18px;
}

.mr-19 {
  margin-right: 19px;
}

.mt-19 {
  margin-top: 19px;
}

.ml-19 {
  margin-left: 19px;
}

.mb-19 {
  margin-bottom: 19px;
}

.mr-20 {
  margin-right: 20px;
}

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

.ml-20 {
  margin-left: 20px;
}

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

.pdr-0 {
  padding-right: 0px;
}

.pdt-0 {
  padding-top: 0px;
}

.pdl-0 {
  padding-left: 0px;
}

.pdb-0 {
  padding-bottom: 0px;
}

.pdr-1 {
  padding-right: 1px;
}

.pdt-1 {
  padding-top: 1px;
}

.pdl-1 {
  padding-left: 1px;
}

.pdb-1 {
  padding-bottom: 1px;
}

.pdr-2 {
  padding-right: 2px;
}

.pdt-2 {
  padding-top: 2px;
}

.pdl-2 {
  padding-left: 2px;
}

.pdb-2 {
  padding-bottom: 2px;
}

.pdr-3 {
  padding-right: 3px;
}

.pdt-3 {
  padding-top: 3px;
}

.pdl-3 {
  padding-left: 3px;
}

.pdb-3 {
  padding-bottom: 3px;
}

.pdr-4 {
  padding-right: 4px;
}

.pdt-4 {
  padding-top: 4px;
}

.pdl-4 {
  padding-left: 4px;
}

.pdb-4 {
  padding-bottom: 4px;
}

.pdr-5 {
  padding-right: 5px;
}

.pdt-5 {
  padding-top: 5px;
}

.pdl-5 {
  padding-left: 5px;
}

.pdb-5 {
  padding-bottom: 5px;
}

.pdr-6 {
  padding-right: 6px;
}

.pdt-6 {
  padding-top: 6px;
}

.pdl-6 {
  padding-left: 6px;
}

.pdb-6 {
  padding-bottom: 6px;
}

.pdr-7 {
  padding-right: 7px;
}

.pdt-7 {
  padding-top: 7px;
}

.pdl-7 {
  padding-left: 7px;
}

.pdb-7 {
  padding-bottom: 7px;
}

.pdr-8 {
  padding-right: 8px;
}

.pdt-8 {
  padding-top: 8px;
}

.pdl-8 {
  padding-left: 8px;
}

.pdb-8 {
  padding-bottom: 8px;
}

.pdr-9 {
  padding-right: 9px;
}

.pdt-9 {
  padding-top: 9px;
}

.pdl-9 {
  padding-left: 9px;
}

.pdb-9 {
  padding-bottom: 9px;
}

.pdr-10 {
  padding-right: 10px;
}

.pdt-10 {
  padding-top: 10px;
}

.pdl-10 {
  padding-left: 10px;
}

.pdb-10 {
  padding-bottom: 10px;
}

.pdr-11 {
  padding-right: 11px;
}

.pdt-11 {
  padding-top: 11px;
}

.pdl-11 {
  padding-left: 11px;
}

.pdb-11 {
  padding-bottom: 11px;
}

.pdr-12 {
  padding-right: 12px;
}

.pdt-12 {
  padding-top: 12px;
}

.pdl-12 {
  padding-left: 12px;
}

.pdb-12 {
  padding-bottom: 12px;
}

.pdr-13 {
  padding-right: 13px;
}

.pdt-13 {
  padding-top: 13px;
}

.pdl-13 {
  padding-left: 13px;
}

.pdb-13 {
  padding-bottom: 13px;
}

.pdr-14 {
  padding-right: 14px;
}

.pdt-14 {
  padding-top: 14px;
}

.pdl-14 {
  padding-left: 14px;
}

.pdb-14 {
  padding-bottom: 14px;
}

.pdr-15 {
  padding-right: 15px;
}

.pdt-15 {
  padding-top: 15px;
}

.pdl-15 {
  padding-left: 15px;
}

.pdb-15 {
  padding-bottom: 15px;
}

.pdr-16 {
  padding-right: 16px;
}

.pdt-16 {
  padding-top: 16px;
}

.pdl-16 {
  padding-left: 16px;
}

.pdb-16 {
  padding-bottom: 16px;
}

.pdr-17 {
  padding-right: 17px;
}

.pdt-17 {
  padding-top: 17px;
}

.pdl-17 {
  padding-left: 17px;
}

.pdb-17 {
  padding-bottom: 17px;
}

.pdr-18 {
  padding-right: 18px;
}

.pdt-18 {
  padding-top: 18px;
}

.pdl-18 {
  padding-left: 18px;
}

.pdb-18 {
  padding-bottom: 18px;
}

.pdr-19 {
  padding-right: 19px;
}

.pdt-19 {
  padding-top: 19px;
}

.pdl-19 {
  padding-left: 19px;
}

.pdb-19 {
  padding-bottom: 19px;
}

.pdr-20 {
  padding-right: 20px;
}

.pdt-20 {
  padding-top: 20px;
}

.pdl-20 {
  padding-left: 20px;
}

.pdb-20 {
  padding-bottom: 20px;
}

.f-row {
  flex-direction: row !important;
}

.f-column {
  flex-direction: column !important;
}

.f-row-reverse {
  flex-direction: row-reverse !important;
}

.f-column-reverse {
  flex-direction: column-reverse !important;
}

.f-wrap {
  flex-wrap: wrap !important;
}

.f-nowrap {
  flex-wrap: nowrap !important;
}

.f-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.jc-start {
  justify-content: flex-start !important;
}

.jc-end {
  justify-content: flex-end !important;
}

.jc-center {
  justify-content: center !important;
}

.jc-between {
  justify-content: space-between !important;
}

.jc-around {
  justify-content: space-around !important;
}

.ai-start {
  align-items: flex-start !important;
}

.ai-end {
  align-items: flex-end !important;
}

.ai-center {
  align-items: center !important;
}

.ai-baseline {
  align-items: baseline !important;
}

.ai-stretch {
  align-items: stretch !important;
}

.ac-start {
  align-content: flex-start !important;
}

.ac-end {
  align-content: flex-end !important;
}

.ac-center {
  align-content: center !important;
}

.ac-between {
  align-content: space-between !important;
}

.ac-around {
  align-content: space-around !important;
}

.ac-stretch {
  align-content: stretch !important;
}

.as-auto {
  align-self: auto !important;
}

.as-start {
  align-self: flex-start !important;
}

.as-end {
  align-self: flex-end !important;
}

.as-center {
  align-self: center !important;
}

.as-baseline {
  align-self: baseline !important;
}

.as-stretch {
  align-self: stretch !important;
}

.flex-0 {
  flex: 0 !important;
}

.flex-1 {
  flex: 1 !important;
}

.flex-2 {
  flex: 2 !important;
}

.flex-3 {
  flex: 3 !important;
}

.flex-4 {
  flex: 4 !important;
}

.flex-5 {
  flex: 5 !important;
}

.flex-6 {
  flex: 6 !important;
}

.flex-7 {
  flex: 7 !important;
}

.flex-8 {
  flex: 8 !important;
}

.flex-9 {
  flex: 9 !important;
}

.flex-10 {
  flex: 10 !important;
}

.gap-1 {
  gap: 1px;
}

.gap-2 {
  gap: 2px;
}

.gap-3 {
  gap: 3px;
}

.gap-4 {
  gap: 4px;
}

.gap-5 {
  gap: 5px;
}

.gap-6 {
  gap: 6px;
}

.gap-7 {
  gap: 7px;
}

.gap-8 {
  gap: 8px;
}

.gap-9 {
  gap: 9px;
}

.gap-10 {
  gap: 10px;
}

.gap-11 {
  gap: 11px;
}

.gap-12 {
  gap: 12px;
}

.gap-13 {
  gap: 13px;
}

.gap-14 {
  gap: 14px;
}

.gap-15 {
  gap: 15px;
}

.gap-16 {
  gap: 16px;
}

.gap-17 {
  gap: 17px;
}

.gap-18 {
  gap: 18px;
}

.gap-19 {
  gap: 19px;
}

.gap-20 {
  gap: 20px;
}

.gap-21 {
  gap: 21px;
}

.gap-22 {
  gap: 22px;
}

.gap-23 {
  gap: 23px;
}

.gap-24 {
  gap: 24px;
}

.gap-25 {
  gap: 25px;
}

.gap-26 {
  gap: 26px;
}

.gap-27 {
  gap: 27px;
}

.gap-28 {
  gap: 28px;
}

.gap-29 {
  gap: 29px;
}

.gap-30 {
  gap: 30px;
}

.gap-31 {
  gap: 31px;
}

.gap-32 {
  gap: 32px;
}

.gap-33 {
  gap: 33px;
}

.gap-34 {
  gap: 34px;
}

.gap-35 {
  gap: 35px;
}

.gap-36 {
  gap: 36px;
}

.gap-37 {
  gap: 37px;
}

.gap-38 {
  gap: 38px;
}

.gap-39 {
  gap: 39px;
}

.gap-40 {
  gap: 40px;
}

.gap-41 {
  gap: 41px;
}

.gap-42 {
  gap: 42px;
}

.gap-43 {
  gap: 43px;
}

.gap-44 {
  gap: 44px;
}

.gap-45 {
  gap: 45px;
}

.gap-46 {
  gap: 46px;
}

.gap-47 {
  gap: 47px;
}

.gap-48 {
  gap: 48px;
}

.gap-49 {
  gap: 49px;
}

.gap-50 {
  gap: 50px;
}

.gap-51 {
  gap: 51px;
}

.gap-52 {
  gap: 52px;
}

.gap-53 {
  gap: 53px;
}

.gap-54 {
  gap: 54px;
}

.gap-55 {
  gap: 55px;
}

.gap-56 {
  gap: 56px;
}

.gap-57 {
  gap: 57px;
}

.gap-58 {
  gap: 58px;
}

.gap-59 {
  gap: 59px;
}

.gap-60 {
  gap: 60px;
}

.gap-61 {
  gap: 61px;
}

.gap-62 {
  gap: 62px;
}

.gap-63 {
  gap: 63px;
}

.gap-64 {
  gap: 64px;
}

.gap-65 {
  gap: 65px;
}

.gap-66 {
  gap: 66px;
}

.gap-67 {
  gap: 67px;
}

.gap-68 {
  gap: 68px;
}

.gap-69 {
  gap: 69px;
}

.gap-70 {
  gap: 70px;
}

.gap-71 {
  gap: 71px;
}

.gap-72 {
  gap: 72px;
}

.gap-73 {
  gap: 73px;
}

.gap-74 {
  gap: 74px;
}

.gap-75 {
  gap: 75px;
}

.gap-76 {
  gap: 76px;
}

.gap-77 {
  gap: 77px;
}

.gap-78 {
  gap: 78px;
}

.gap-79 {
  gap: 79px;
}

.gap-80 {
  gap: 80px;
}

.gap-81 {
  gap: 81px;
}

.gap-82 {
  gap: 82px;
}

.gap-83 {
  gap: 83px;
}

.gap-84 {
  gap: 84px;
}

.gap-85 {
  gap: 85px;
}

.gap-86 {
  gap: 86px;
}

.gap-87 {
  gap: 87px;
}

.gap-88 {
  gap: 88px;
}

.gap-89 {
  gap: 89px;
}

.gap-90 {
  gap: 90px;
}

.gap-91 {
  gap: 91px;
}

.gap-92 {
  gap: 92px;
}

.gap-93 {
  gap: 93px;
}

.gap-94 {
  gap: 94px;
}

.gap-95 {
  gap: 95px;
}

.gap-96 {
  gap: 96px;
}

.gap-97 {
  gap: 97px;
}

.gap-98 {
  gap: 98px;
}

.gap-99 {
  gap: 99px;
}

.gap-100 {
  gap: 100px;
}

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

@media print {
  .d-print-none {
    display: none !important;
  }
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
}
.align-baseline {
  vertical-align: baseline !important;
}

.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

.text-center {
  text-align: center !important;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

html {
  font-size: 16px;
}

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

li {
  list-style: none;
}

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

button {
  background-color: transparent;
  cursor: pointer;
  border: none;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: transparent;
  color: #222;
}

select {
  background: #fff;
}

input {
  border: none;
}
input:active {
  border: none;
}
input:focus {
  outline: none;
}

textarea {
  width: 100%;
  resize: none;
}
textarea:focus {
  outline: none;
}

table {
  border-collapse: collapse;
}

em {
  font-style: normal;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.header {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, border-color 0.3s ease;
  margin: 0;
  padding: 0;
}
.header.scrolled {
  background-color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 100%;
  height: 80px;
  margin: 0;
  padding: 0 80px;
}
@media screen and (max-width: 1024px) {
  .header-inner {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.header-logo {
  display: flex;
  justify-content: flex-start;
  width: 200px;
  height: 47px;
}
@media screen and (max-width: 430px) {
  .header-logo {
    width: 110px;
    height: 25px;
  }
}
.header-logo a {
  display: block;
}
.header-logo img {
  width: 100%;
  height: auto;
}
.header .mobile-menu-btn {
  display: none;
  width: 24px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/assets/icon/hamburger.svg");
  background-size: contain;
  cursor: pointer;
  flex-shrink: 0;
}
@media screen and (max-width: 1024px) {
  .header .header-nav,
  .header .header-auth {
    display: none;
  }
  .header .mobile-menu-btn {
    display: block;
  }
}
.header-nav .nav-list {
  display: flex;
  gap: 80px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav .nav-list li a {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.48px;
  color: #222;
  text-decoration: none;
}
.header-nav .nav-list li a.active {
  color: #2563eb;
  font-weight: 500;
  text-shadow: 0 0 0 currentColor;
}
.header-auth {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-auth a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
}
.header-auth a.active {
  color: #2563eb;
  font-weight: 500;
  text-shadow: 0 0 0 currentColor;
}
.header-auth a::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 12px;
  background: #fff;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  transition: background 0.3s ease;
}
.header-auth a:last-child::after {
  display: none;
}
.header a {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #222;
  text-decoration: none;
  position: relative;
}
.header a:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: #58637d;
}

.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 998;
}
@media screen and (max-width: 1024px) {
  .mobile-overlay.is-open {
    display: block;
  }
}

.mobile-side-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 100%;
  max-width: 390px;
  height: 100%;
  background: #f5f6f8;
  z-index: 999;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}
@media screen and (max-width: 1024px) {
  .mobile-side-menu {
    display: flex;
  }
}
.mobile-side-menu.is-open {
  transform: translateX(0);
}

.side-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 18px;
  flex-shrink: 0;
  background-color: #fff;
}
@media screen and (max-width: 320px) {
  .side-header {
    gap: 13px;
  }
}

.side-logo {
  position: relative;
  background-image: url("/assets/logo/main-logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 110px;
  height: 25px;
  flex-shrink: 0;
}
.side-logo a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}
@media screen and (max-width: 320px) {
  .logo-wrap {
    gap: 15px;
  }
}

.side-header-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.side-btn {
  padding: 4px 12px;
  border-radius: 100px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  white-space: nowrap;
}
.side-btn.side-btn-primary {
  background: #09328a;
  color: #fff;
}
.side-btn.side-btn-secondary {
  background: #58637d;
  color: #fff;
}

.side-close-btn {
  width: 24px;
  height: 24px;
  margin-left: 20px;
  background: url("/assets/icon/close-black.svg") center/20px no-repeat;
  cursor: pointer;
  flex-shrink: 0;
}
@media screen and (max-width: 320px) {
  .side-close-btn {
    margin-left: 0px;
  }
}

.side-nav {
  flex: 1;
  padding: 0px 20px;
  overflow-y: auto;
}

.side-nav-list li {
  margin: 0;
  padding: 38px 0 21px;
  border-bottom: 1px solid #efefef;
}
.side-nav-list li a {
  display: block;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #222;
}

.side-footer {
  flex-shrink: 0;
  padding-top: 40px;
}

.side-mypage-btn {
  display: block;
  width: 100%;
  padding: 13px 0px;
  background: #2563eb;
  color: #fff;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  border-radius: 6px;
}

@media screen and (max-width: 1024px) {
  .main-page section:not(.main-slide) {
    padding: 0px 20px;
  }
}
@media screen and (max-width: 430px) {
  .main-page .m-none {
    display: none;
  }
}
@media screen and (max-width: 768px) {
  .main-page .t-none {
    display: none;
  }
}
@media screen and (max-width: 1024px) {
  .main-page .w-none {
    display: none;
  }
}
.main-page .main-slide {
  width: 100%;
  height: 500px;
  min-height: 500px;
  position: relative;
  background: #f5f5f5;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .main-page .main-slide {
    min-height: auto;
    height: 600px;
  }
}
.main-page .main-slide .swiper {
  width: 100%;
  height: 100%;
}
.main-page .main-slide .swiper-wrapper {
  width: 100%;
  height: 100%;
}
.main-page .main-slide .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
.main-page .main-slide .swiper-slide .bg-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.main-page .main-slide .swiper-slide .bg-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(130, 222, 255, 0.9) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.main-page .main-slide .swiper-slide .bg-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.main-page .main-slide .swiper-slide .bg-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.75;
  -o-object-position: center;
     object-position: center;
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .swiper-slide .bg-img img {
    -o-object-position: 70% 10%;
       object-position: 70% 10%;
  }
}
@media screen and (max-width: 430px) {
  .main-page .main-slide .swiper-slide .bg-img img {
    -o-object-position: 70% 10%;
       object-position: 70% 10%;
  }
}
.main-page .main-slide .swiper-slide .slide-text-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: calc(50% - 600px + 20px);
  margin: 0;
  z-index: 10;
}
@media screen and (max-width: 1024px) {
  .main-page .main-slide .swiper-slide .slide-text-wrapper {
    left: calc(50% - 600px + 140px);
  }
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .swiper-slide .slide-text-wrapper {
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
    text-align: center;
    width: 100%;
  }
}
.main-page .main-slide .swiper-slide .slide-text-wrapper .slide-text {
  font-size: 46px;
  font-weight: 600;
  letter-spacing: -0.92px;
  color: #111;
  margin: 0 0 33px 0;
  line-height: 1.4;
}
@media screen and (max-width: 1024px) {
  .main-page .main-slide .swiper-slide .slide-text-wrapper .slide-text {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.8px;
  }
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .swiper-slide .slide-text-wrapper .slide-text {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.56px;
    margin: 0 0 16px 0;
  }
}
.main-page .main-slide .swiper-slide .slide-text-wrapper .slide-description {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #222;
  margin: 0;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .swiper-slide .slide-text-wrapper .slide-description {
    display: none;
  }
}
.main-page .main-slide .swiper-slide .logo-img {
  display: inline-block;
  width: 200px;
  height: 47px;
}
.main-page .main-slide .swiper-slide .logo-img > img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 1024px) {
  .main-page .main-slide .swiper-slide .logo-img > img {
    vertical-align: sub;
  }
}
@media screen and (max-width: 1024px) {
  .main-page .main-slide .swiper-slide .logo-img > img {
    vertical-align: middle;
  }
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .swiper-slide .logo-img {
    width: 140px;
    height: 34px;
    margin-bottom: 5px;
  }
}
.main-page .main-slide {
  /* 컨트롤 영역 (페이지네이션 + 화살표 + 프로그레스 바) */
}
.main-page .main-slide .slide-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  position: absolute;
  bottom: 80px;
  left: calc(50% - 600px + 6px);
  z-index: 20;
}
@media screen and (max-width: 1024px) {
  .main-page .main-slide .slide-controls {
    left: calc(50% - 600px + 123px);
  }
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .slide-controls {
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    gap: 12px;
  }
}
.main-page .main-slide {
  /* 왼쪽 컨트롤 (화살표 + 페이지네이션) */
}
.main-page .main-slide .controls-left {
  display: flex;
  justify-content: center;
  align-items: center;
}
.main-page .main-slide .controls-left .swiper-button-prev,
.main-page .main-slide .controls-left .swiper-button-next {
  position: relative;
  margin: 0;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 0;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-page .main-slide .controls-left .swiper-button-prev::after,
.main-page .main-slide .controls-left .swiper-button-next::after {
  font-size: 16px;
  color: #fff;
  margin: 0;
}
.main-page .main-slide .controls-left .swiper-button-prev:hover,
.main-page .main-slide .controls-left .swiper-button-next:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: #fff;
}
.main-page .main-slide .controls-left .swiper-button-prev.swiper-button-disabled,
.main-page .main-slide .controls-left .swiper-button-next.swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.main-page .main-slide {
  /* 페이지네이션 (숫자) */
}
.main-page .main-slide .slide-pagination {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  min-width: 50px;
  text-align: center;
}
.main-page .main-slide {
  /* 프로그레스 바 */
}
.main-page .main-slide .slide-progress {
  width: 300px;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
@media screen and (max-width: 768px) {
  .main-page .main-slide .slide-progress {
    width: 230px;
  }
}
.main-page .main-slide .slide-progress::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: #fff;
  width: var(--progress, 0%);
  transition: width 0.3s ease;
  border-radius: 2px;
}
.main-page .text-gray {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
}
.main-page .section-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  color: #222;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .main-page .section-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
  }
}
.main-page .section-title.mb-10 {
  margin-bottom: 10px;
}
.main-page .section-title.mb-40 {
  margin-bottom: 40px;
}
.main-page .section-title.white {
  color: #fff;
}
.main-page .online-program {
  background-color: #f0f8ff;
}
.main-page .online-program-wrap {
  position: relative;
}
.main-page .online-program-wrap::before {
  content: "";
  position: absolute;
  top: 130px;
  left: -30px;
  width: 69px;
  height: 61px;
  background: url("/assets/images/box1.png") center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
@media screen and (max-width: 430px) {
  .main-page .online-program-wrap::before {
    width: 69px;
    height: 61px;
    top: 108px;
    left: -15px;
  }
}
.main-page .online-program .title-wrapper {
  text-align: center;
  padding: 80px 0 50px;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .title-wrapper {
    padding: 80px 0 40px;
  }
}
.main-page .online-program .title-wrapper p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .title-wrapper p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.main-page .online-program .program-card {
  width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-card {
    min-width: 200px;
    width: 100%;
    min-height: 230px;
  }
}
.main-page .online-program .program-card .program-card-wrapper {
  padding: 20px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-card .program-card-wrapper {
    padding: 14px;
  }
}
.main-page .online-program .program-card .card-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  padding-bottom: 9px;
  border-bottom: 1px solid #2563eb;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-card .card-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
    padding-bottom: 10px;
  }
}
.main-page .online-program .program-card .card-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 0px 0px;
  color: #222;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-card .card-info {
    padding: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.main-page .online-program .program-card .card-info > div:last-child {
  flex-shrink: 0;
}
.main-page .online-program .program-card .card-info p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.4;
}
.main-page .online-program .program-card .card-date {
  font-size: 15px;
  color: #555;
  margin-top: 6px;
}
.main-page .online-program .program-card .card-status {
  margin-bottom: 6px;
  position: relative;
  padding-left: 16px;
}
.main-page .online-program .program-card .card-status::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.main-page .online-program .program-card .card-apply-date {
  color: #343434;
}
.main-page .online-program .program-card .card-join-btn {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  width: 100%;
  height: 50px;
  flex-shrink: 0;
  background: #2563eb;
  color: #fff;
  position: relative;
  cursor: pointer;
  margin-top: auto;
  transition: background 0.2s;
  border-radius: 0 0 10px 10px;
}
.main-page .online-program .program-card .card-join-btn.disabled {
  background-color: #d3d5d8;
  color: #222;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-card .card-join-btn {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
    height: 44px;
  }
}
.main-page .online-program .program-card .card-join-btn .plus-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("/assets/icon/plus.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 6px;
}
.main-page .online-program .program-card .card-join-btn .plus-icon.disabled {
  filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(120%) contrast(85%);
}
.main-page .online-program .program-swiper-container {
  padding: 0px 0 100px 0;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .main-page .online-program .program-swiper-container {
    padding: 0 15px 0px 15px;
  }
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-swiper-container {
    padding: 0 16px 0px;
    overflow: hidden;
  }
}
.main-page .online-program .program-swiper-container .program-swiper {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
@media screen and (max-width: 1024px) {
  .main-page .online-program .program-swiper-container .program-swiper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-swiper-container .program-swiper {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }
}
.main-page .online-program .program-swiper-container .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.main-page .online-program .program-swiper-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: auto;
  width: 280px;
  flex-shrink: 0;
  box-sizing: border-box;
  /* M(430px): 카드 200px + gap 20px */
}
@media screen and (max-width: 430px) {
  .main-page .online-program .program-swiper-container .swiper-slide {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
  }
}
.main-page .online-program .program-swiper-container .swiper-button-prev.program-swiper-prev,
.main-page .online-program .program-swiper-container .swiper-button-next.program-swiper-next {
  position: absolute !important;
  color: #2196f3;
  top: 40% !important;
  width: 36px;
  height: 36px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 10;
  margin: 0;
  border: none;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-swiper-container .swiper-button-prev.program-swiper-prev,
  .main-page .online-program .program-swiper-container .swiper-button-next.program-swiper-next {
    width: 28px;
    height: 28px;
    background-size: 12px 20px;
  }
}
.main-page .online-program .program-swiper-container .swiper-button-prev.program-swiper-prev {
  left: -30px !important;
  background-image: url("/assets/icon/right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 24px;
  transform: scaleX(-1) translateY(-50%);
}
@media screen and (max-width: 1024px) {
  .main-page .online-program .program-swiper-container .swiper-button-prev.program-swiper-prev {
    left: -19px !important;
  }
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-swiper-container .swiper-button-prev.program-swiper-prev {
    left: 0 !important;
  }
}
.main-page .online-program .program-swiper-container .swiper-button-prev.program-swiper-prev::after {
  content: none;
}
.main-page .online-program .program-swiper-container .swiper-button-next.program-swiper-next {
  right: -30px !important;
  background-image: url("/assets/icon/right.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 24px;
  transform: translateY(-50%);
}
@media screen and (max-width: 1024px) {
  .main-page .online-program .program-swiper-container .swiper-button-next.program-swiper-next {
    right: -19px !important;
  }
}
@media screen and (max-width: 768px) {
  .main-page .online-program .program-swiper-container .swiper-button-next.program-swiper-next {
    right: 0 !important;
  }
}
.main-page .online-program .program-swiper-container .swiper-button-next.program-swiper-next::after {
  content: none;
}
.main-page .online-program .program-swiper-container .swiper-button-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.main-page .test {
  background-image: linear-gradient(to bottom, #f0f8ff, #f5f7f8);
}
.main-page .test-wrap {
  padding: 80px 0px 100px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap {
    padding: 80px 0px;
  }
}
.main-page .test-wrap::before {
  content: "";
  position: absolute;
  top: 50px;
  right: 0px;
  width: 162px;
  height: 268px;
  background: url("/assets/images/box2.png") center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap::before {
    top: -18px;
    right: 0px;
    width: 70px;
    height: 116px;
  }
}
.main-page .test-wrap .definition {
  margin-bottom: 80px;
  text-align: center;
}
.main-page .test-wrap .definition dl dt {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  color: #2563eb;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .definition dl dt {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
  }
}
.main-page .test-wrap .definition dl dd {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #8e949f;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .definition dl dd {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.main-page .test-wrap .definition dl:first-of-type dd {
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .definition dl:first-of-type dd {
    margin-bottom: 20px;
  }
}
.main-page .test-wrap .result .note {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #ee0000;
  margin-bottom: 30px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .note {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    margin-bottom: 40px;
  }
}
.main-page .test-wrap .result .result-box {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 30px;
  background: #fff;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-box {
    border: none;
    background: none;
    padding: 0px;
  }
}
.main-page .test-wrap .result .result-item {
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #e6e8ea;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item {
    flex-direction: column;
    align-items: stretch;
    position: relative;
  }
}
.main-page .test-wrap .result .result-item .result-color {
  width: 20px;
  border-radius: 6px 0px 0px 6px;
  flex-shrink: 0;
  height: auto;
  align-self: stretch;
  min-height: 36px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-color {
    width: 100%;
    height: 30px;
    min-height: 30px;
    border-radius: 10px 10px 0 0;
  }
}
.main-page .test-wrap .result .result-item .result-color.green {
  background: #009e21;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-color.green {
    background: #016342;
  }
}
.main-page .test-wrap .result .result-item .result-color.yellow {
  background: #70a800;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-color.yellow {
    background: #149f00;
  }
}
.main-page .test-wrap .result .result-item .result-color.olive {
  background: #a4aa00;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-color.olive {
    background: #e6a100;
  }
}
.main-page .test-wrap .result .result-item .result-color.orange {
  background: #db8605;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-color.orange {
    background: #df6800;
  }
}
.main-page .test-wrap .result .result-item .result-color.red {
  background: #d83636;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-color.red {
    background: #d83636;
  }
}
.main-page .test-wrap .result .result-item .result-title-wrap {
  min-width: 140px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-title-wrap {
    position: absolute;
    top: 6px;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    z-index: 1;
  }
}
.main-page .test-wrap .result .result-item .result-range {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #222;
  white-space: nowrap;
  margin: 0px 6px 0px 10px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-range {
    color: #fff;
    margin: 0;
    white-space: normal;
    text-align: center;
  }
}
.main-page .test-wrap .result .result-item .result-level {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #222;
  white-space: nowrap;
}
.main-page .test-wrap .result .result-item .result-level.green {
  color: #009e21;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-level.green {
    color: #86e5c5;
  }
}
.main-page .test-wrap .result .result-item .result-level.yellow {
  color: #70a800;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-level.yellow {
    color: #cdf6bd;
  }
}
.main-page .test-wrap .result .result-item .result-level.olive {
  color: #a4aa00;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-level.olive {
    color: #f8f5b4;
  }
}
.main-page .test-wrap .result .result-item .result-level.orange {
  color: #db8605;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-level.orange {
    color: #fbdeab;
  }
}
.main-page .test-wrap .result .result-item .result-level.red {
  color: #d83636;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-item .result-level.red {
    color: #ffcfcf;
  }
}
.main-page .test-wrap .result .result-divider {
  width: 1px;
  height: 16px;
  background-color: #e6e8ea;
  margin: 0 20px;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
}
.main-page .test-wrap .result .result-description {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #343434;
  line-height: 1.6;
  flex: 1;
}
@media screen and (max-width: 1024px) {
  .main-page .test-wrap .result .result-description {
    padding: 10px 0;
  }
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .result .result-description {
    border-radius: 10px;
    padding: 10px 12px;
    background: #fff;
  }
}
.main-page .test-wrap .result .green {
  color: #009e21;
}
.main-page .test-wrap .result .yellow {
  color: #70a800;
}
.main-page .test-wrap .result .olive {
  color: #a4aa00;
}
.main-page .test-wrap .result .orange {
  color: #db8605;
}
.main-page .test-wrap .result .red {
  color: #d83636;
}
.main-page .test-wrap .test-start-btn {
  display: block;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #fff;
  background-color: #2563eb;
  border-radius: 10px;
  padding: 20px;
  width: 273px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .main-page .test-wrap .test-start-btn {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
    padding: 16px;
    width: 100%;
  }
}
.main-page .program {
  background-color: #58637d;
  position: relative;
}
.main-page .program::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 0;
  width: 1080px;
  height: 259px;
  background: url("/assets/logo/back-logo.png") center/contain no-repeat;
  pointer-events: none;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .main-page .program::before {
    width: 220px;
    height: 53px;
    top: 45px;
  }
}
.main-page .program-wrap {
  text-align: center;
  padding: 80px 0px 100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .main-page .program-wrap {
    padding: 80px 0px;
  }
}
.main-page .program-wrap > p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #efefef;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .main-page .program-wrap > p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    line-height: 1.5;
    margin-bottom: 40px;
  }
}
.main-page .program .program-part-img {
  display: flex;
  gap: 20px;
  margin: 40px 0px 80px;
  padding-bottom: 80px;
  border-bottom: 1px solid #fff;
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img {
    gap: 16px;
    margin: 24px 0 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
}
.main-page .program .program-part-img .img-wrap {
  width: 590px;
  position: relative;
  border-radius: 13px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img .img-wrap {
    width: 100%;
    min-width: 0;
    height: 280px;
    overflow: hidden;
  }
}
.main-page .program .program-part-img .img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img .img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.main-page .program .program-part-img .img-wrap .img-text {
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: absolute;
  min-width: 340px;
  top: 50%;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img .img-wrap .img-text {
    width: 100%;
    min-width: 0;
    line-height: 1.17;
    padding: 24px 20px;
    gap: 20px;
    z-index: 1;
  }
}
@media screen and (max-width: 320px) {
  .main-page .program .program-part-img .img-wrap .img-text {
    top: 56%;
  }
}
.main-page .program .program-part-img .img-wrap .img-text.left {
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-page .program .program-part-img .img-wrap .img-text.right {
  right: 50%;
  transform: translate(50%, -50%);
}
.main-page .program .program-part-img .img-wrap .img-text h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img .img-wrap .img-text h3 {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
  }
}
@media screen and (max-width: 320px) {
  .main-page .program .program-part-img .img-wrap .img-text h3 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.3px;
  }
}
.main-page .program .program-part-img .img-wrap .img-text p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img .img-wrap .img-text p {
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    line-height: 1.5;
  }
}
.main-page .program .program-part-img .badge {
  border-radius: 10px 0px 0px 0px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #fff;
  padding: 15px 35px;
  z-index: 1;
  left: 0;
}
@media screen and (max-width: 1024px) {
  .main-page .program .program-part-img .badge {
    left: 0px;
    padding: 10px 25px;
  }
}
@media screen and (max-width: 768px) {
  .main-page .program .program-part-img .badge {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
    left: 0px;
    padding: 7px 10px;
    border-radius: 0px;
  }
}
.main-page .program .program-part-img .badge.online {
  background-color: #20daf8;
  position: absolute;
}
.main-page .program .program-part-img .badge.offline {
  background-color: #07c400;
  position: absolute;
}
@media screen and (max-width: 430px) {
  .main-page .program .join {
    margin-top: 0;
  }
}
.main-page .program .join-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}
@media screen and (max-width: 768px) {
  .main-page .program .join-cards {
    gap: 8px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }
}
.main-page .program .join-card {
  width: 284px;
  background: #fff;
  border-radius: 10px;
  padding: 38px 20px;
  position: relative;
}
@media screen and (max-width: 1024px) {
  .main-page .program .join-card {
    padding: 38px 14px;
    min-height: 242px;
  }
}
@media screen and (max-width: 768px) {
  .main-page .program .join-card {
    width: calc((100% - 24px) / 4);
    min-width: 0;
    flex-shrink: 0;
    padding: 10px 9px;
    min-height: 90px;
  }
}
.main-page .program .join-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  background: url("/assets/icon/arrow-white.svg") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .main-page .program .join-card:not(:last-child)::after {
    right: -7px;
    width: 6px;
    height: 10px;
    background-image: url("/assets/icon/arrow-white.svg");
  }
}
.main-page .program .join-card .card-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #2563eb;
}
.main-page .program .join-card .card-number::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #2563eb;
  vertical-align: middle;
  margin-right: 5px;
}
@media screen and (max-width: 768px) {
  .main-page .program .join-card .card-number {
    position: static;
    display: block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.28px;
    margin-bottom: 10px;
  }
  .main-page .program .join-card .card-number::before {
    height: 1px;
  }
}
@media screen and (max-width: 320px) {
  .main-page .program .join-card .card-number {
    position: static;
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.28px;
    margin-bottom: 10px;
  }
  .main-page .program .join-card .card-number::before {
    height: 1px;
  }
}
.main-page .program .join-card .card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.44px;
  color: #222;
  margin: 0 0 20px 0;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .main-page .program .join-card .card-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.28px;
    text-align: center;
    line-height: 1.5;
    margin: 0;
  }
}
@media screen and (max-width: 768px) {
  .main-page .program .join-card .card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.24px;
  }
}
.main-page .program .join-card .card-desc {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #8e949f;
  line-height: 1.5;
  text-align: left;
}
@media screen and (max-width: 768px) {
  .main-page .program .join-card .card-desc {
    display: none;
  }
}
.main-page .add-content {
  overflow: hidden;
  background: linear-gradient(to bottom, #afd6f8 0%, #d0eeea 50%, #e4f5e6 100%);
}
.main-page .add-content-wrap {
  padding: 80px 0 100px;
  position: relative;
}
@media screen and (max-width: 768px) {
  .main-page .add-content-wrap {
    padding: 80px 0px;
  }
}
.main-page .add-content-wrap::before {
  content: "";
  position: absolute;
  top: 140px;
  right: -200px;
  width: 135px;
  height: 121px;
  background: url("/assets/images/box3.png") center/contain no-repeat;
  pointer-events: none;
  z-index: 2;
}
.main-page .add-content-wrap .sub-title {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #666;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .main-page .add-content-wrap .sub-title {
    margin-bottom: 40px;
  }
}
.main-page .add-content .lesson-row {
  display: flex;
  gap: 30px;
  margin-bottom: 40px;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-row {
    gap: 20px;
    flex-direction: column;
    align-items: flex-start;
  }
}
.main-page .add-content .lesson-row:last-child {
  margin-bottom: 0;
}
.main-page .add-content .lesson-info {
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-info-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
}
.main-page .add-content .lesson-info-text .lesson-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.48px;
  color: #00b2cf;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-info-text .lesson-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.44px;
    margin: 0px;
  }
}
.main-page .add-content .lesson-info-text .lesson-title.green {
  color: #05d9ae;
}
.main-page .add-content .lesson-info-text .lesson-title.yellow {
  color: #f8ad00;
}
.main-page .add-content .lesson-info-text .lesson-desc {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #58637d;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-info-text .lesson-desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.main-page .add-content .lesson-info .lesson-label {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.36px;
  color: #222;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  white-space: nowrap;
}
.main-page .add-content .lesson-info .lesson-label::after {
  content: "";
  width: 110px;
  height: 1px;
  background-color: #222;
  margin-left: 11px;
  flex-shrink: 0;
}
.main-page .add-content .lesson-cards {
  display: flex;
  gap: 20px;
}
@media screen and (max-width: 1024px) {
  .main-page .add-content .lesson-cards {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}
.main-page .add-content .lesson-card {
  flex-shrink: 0;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  width: 230px;
  height: 140px;
  box-shadow: 0 3px 6px 0 rgba(93, 127, 175, 0.08);
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card {
    width: 170px;
    height: 104px;
  }
}
.main-page .add-content .lesson-card .card-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 88px;
  height: 54px;
  z-index: 1;
}
.main-page .add-content .lesson-card .card-badge.beginner {
  background: url("/assets/icon/beginner.svg") 0 0/100% 100% no-repeat;
  background-position: -10px -6px;
}
.main-page .add-content .lesson-card .card-badge.intermediate {
  background: url("/assets/icon/intermediate.svg") 0 0/100% 100% no-repeat;
  background-position: -10px -6px;
}
.main-page .add-content .lesson-card .card-badge.advanced {
  background: url("/assets/icon/advanced.svg") 0 0/100% 100% no-repeat;
  background-position: -10px -6px;
}
.main-page .add-content .lesson-card .card-img {
  border-radius: 10px;
  position: relative;
  display: block;
  width: 230px;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card .card-img {
    width: 170px;
  }
}
.main-page .add-content .lesson-card .card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 10px;
}
.main-page .add-content .lesson-card .card-img.gradient-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.8));
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 2;
  width: 100%;
  padding: 0 10px;
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-top {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  margin: 0 0 10px 0;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-top {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
  }
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-main {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  margin: 0 0 22px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-main {
    margin: 0 0 5px 0;
  }
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-main::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("/assets/icon/phone.svg") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-main::before {
    width: 18px;
    height: 18px;
  }
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-main.chat::before {
  background: url("/assets/icon/chatbubble.svg") center/contain no-repeat;
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-bottom {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  margin: 0;
}
.main-page .add-content .lesson-card .card-img.gradient-bg .overlay-text .text-button {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  background-color: #2563eb;
  color: #fff;
  width: 100%;
  padding: 6px 0px;
  border-radius: 6px;
  display: block;
  text-decoration: none;
  margin-top: 2px;
}
.main-page .add-content .lesson-card.call-card {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #f0f8ff;
  padding: 32px 10px;
  width: 230px;
  height: 140px;
  border-radius: 10px;
  border: 1px solid #fff;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card {
    padding: 20px 10px;
    width: 170px;
    height: 104px;
  }
}
.main-page .add-content .lesson-card.call-card .call-icon {
  width: 72px;
  height: 75px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card .call-icon {
    width: 52px;
    height: 55px;
  }
}
.main-page .add-content .lesson-card.call-card .call-icon img {
  width: 100%;
  height: auto;
}
.main-page .add-content .lesson-card.call-card .call-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card .call-info {
    gap: 3px;
  }
}
.main-page .add-content .lesson-card.call-card .call-info .call-badge {
  display: inline-block;
  background-color: #4584f5;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  padding: 5px 11px;
  border-radius: 12px;
  width: -moz-fit-content;
  width: fit-content;
  word-break: keep-all;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card .call-info .call-badge {
    padding: 6px 7px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: -0.18px;
  }
}
.main-page .add-content .lesson-card.call-card .call-info .call-number {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #2563eb;
  margin: 4px 0 0 0;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card .call-info .call-number {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.24px;
  }
}
.main-page .add-content .lesson-card.call-card .call-info .call-time {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #222;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card .call-info .call-time {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
  }
}
.main-page .add-content .lesson-card.call-card.chat {
  flex-direction: column;
  padding: 24px 10px 14px;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card.chat {
    padding: 11px 10px;
  }
}
@media screen and (max-width: 320px) {
  .main-page .add-content .lesson-card.call-card.chat {
    padding: 14px 10px;
  }
}
.main-page .add-content .lesson-card.call-card.chat .chat-top {
  display: flex;
  align-items: center;
  gap: 6px;
}
.main-page .add-content .lesson-card.call-card.chat .call-icon {
  width: 72px;
  height: 63px;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card.chat .call-icon {
    width: 52px;
    height: 46px;
  }
}
.main-page .add-content .lesson-card.call-card.chat .call-info {
  align-items: center;
}
.main-page .add-content .lesson-card.call-card.chat .call-badge {
  background-color: #7f45f5;
}
.main-page .add-content .lesson-card.call-card.chat .call-number {
  color: #7f45f5;
}
.main-page .add-content .lesson-card.call-card.chat .call-time {
  display: none;
}
.main-page .add-content .lesson-card.call-card.chat .chat-link {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.24px;
  background-color: #2b2b2b;
  color: #fff;
  padding: 8px 0;
  border-radius: 6px;
}
@media screen and (max-width: 768px) {
  .main-page .add-content .lesson-card.call-card.chat .chat-link {
    padding: 3px 0;
  }
}
.main-page .add-content .lesson-card.call-card.chat .chat-link:hover {
  background-color: #362427;
}

.event-popup-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}
.event-popup-wrap .event-popup {
  pointer-events: auto;
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  margin-top: -100px;
  margin-left: 500px;
}
.event-popup-wrap .event-popup-body {
  display: block;
}
.event-popup-wrap .event-popup-link {
  display: block;
  line-height: 0;
}
.event-popup-wrap .event-popup-link img {
  width: 100%;
  height: auto;
  vertical-align: top;
}
.event-popup-wrap .event-popup-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #eee;
  gap: 12px;
}
.event-popup-wrap .event-popup-check {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.event-popup-wrap .event-popup-check input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.event-popup-wrap .event-popup-close {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #333;
  background: transparent;
  border: 1px solid #ddd;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.footer {
  background: #27272a;
  color: #fff;
  padding: 64px 0px 80px;
}
@media screen and (max-width: 768px) {
  .footer {
    padding: 40px 0px;
  }
}
.footer-container {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 80px;
}
@media screen and (max-width: 1024px) {
  .footer-container {
    padding: 0px 20px;
  }
}
@media screen and (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .footer-left {
    order: 1;
  }
}
@media screen and (max-width: 768px) {
  .footer-center {
    display: contents;
  }
}
@media screen and (max-width: 768px) {
  .footer-inquiry {
    order: 2;
  }
}
@media screen and (max-width: 768px) {
  .footer-hours {
    order: 3;
  }
}
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media screen and (max-width: 768px) {
  .footer-right {
    order: 4;
    gap: 20px;
  }
}
@media screen and (max-width: 768px) {
  .footer-address {
    order: 5;
  }
}
@media screen and (max-width: 768px) {
  .footer-copyright {
    order: 6;
    border-top: 1px solid #dddddd;
    padding-top: 20px;
    margin-top: 0;
  }
}
.footer-logo {
  max-width: 180px;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .footer-logo {
    margin-bottom: 0px;
  }
}
.footer-title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.38px;
  margin-bottom: 17px;
}
@media screen and (max-width: 768px) {
  .footer-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
    margin-bottom: 10px;
  }
}
.footer-contact {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: #888;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-contact .footer-contact-divider {
  display: none;
}
@media screen and (max-width: 768px) {
  .footer-contact {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .footer-contact .footer-contact-divider {
    display: inline;
  }
}
.footer-inquiry + .footer-hours {
  margin-top: 10px;
}
.footer-hours .footer-title {
  display: none;
}
@media screen and (max-width: 768px) {
  .footer-hours .footer-title {
    display: block;
  }
}
.footer-hours-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: #888;
  margin: 0;
  line-height: 1.5;
}
.footer-address {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  margin: 12px 0;
  font-style: normal;
  line-height: 1.19;
  color: #888;
}
@media screen and (max-width: 768px) {
  .footer-address {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
    line-height: 1.5;
    margin: 0;
  }
}
.footer-copyright {
  color: #888;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 768px) {
  .footer-copyright {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.footer-link {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.38px;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .footer-link {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.32px;
  }
}
.footer .icon-right {
  display: inline-block;
  width: 11px;
  height: 18px;
  margin-left: 4px;
  background: url("/assets/icon/arrow-gray.svg") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .footer .icon-right {
    width: 8px;
    height: 12px;
  }
}

.complete-modal .complete-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10001;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}
.complete-modal .complete-modal-overlay.active {
  display: flex;
}
.complete-modal .complete-modal-box {
  width: 100%;
  max-width: 480px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.complete-modal .complete-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.complete-modal .complete-modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #1a1a1a;
}
.complete-modal .complete-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: url(../assets/icon/close-black.svg) center/contain no-repeat;
  cursor: pointer;
}
.complete-modal .complete-modal-content {
  padding: 24px 20px;
  background-color: #fff;
}
.complete-modal .complete-modal-content p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #1a1a1a;
  line-height: 1.6;
}
.complete-modal .complete-modal-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px 24px;
}
.complete-modal .complete-modal-btn-wrap .complete-modal-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  padding: 20px;
  width: 150px;
  background-color: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.mypage-page {
  background-color: #f5f7f8;
  padding-top: 80px;
}
.mypage-page .mypage-content {
  padding: 100px 0px;
}
@media screen and (max-width: 1024px) {
  .mypage-page .mypage-content {
    padding: 100px 20px;
  }
}
.mypage-page .mypage-content .page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  color: #222;
  text-align: center;
  margin-bottom: 40px;
  letter-spacing: -1.92px;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    margin-bottom: 40px;
  }
}
.mypage-page .mypage-content .title2 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  color: #222;
  text-align: center;
  letter-spacing: -1.92px;
  margin: 80px 0px 20px;
}
.mypage-page .mypage-content .desc {
  color: #343434;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  margin-bottom: 40px;
}
.mypage-page .mypage-content .mypage-box {
  background: #ffffff;
  border-radius: 10px;
  padding: 80px;
  border: 1px solid #d3d5d8;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .mypage-box {
    padding: 20px;
  }
}
.mypage-page .mypage-content .mypage-box .mypage-box-title {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.44px;
  margin-bottom: 20px;
}
.mypage-page .mypage-content .mypage-box .mypage-box-desc {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.48px;
}
.mypage-page .mypage-content .mypage-box .user-info-table {
  width: 100%;
  border-collapse: collapse;
}
.mypage-page .mypage-content .mypage-box .user-info-table th,
.mypage-page .mypage-content .mypage-box .user-info-table td {
  text-align: left;
  padding: 10px 0;
}
.mypage-page .mypage-content .mypage-box .user-info-table th {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #8e949f;
}
.mypage-page .mypage-content .mypage-box .user-info-table td {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .mypage-box .user-info-table {
    display: block;
  }
  .mypage-page .mypage-content .mypage-box .user-info-table colgroup {
    display: none;
  }
  .mypage-page .mypage-content .mypage-box .user-info-table tbody,
  .mypage-page .mypage-content .mypage-box .user-info-table tr {
    display: block;
    width: 100%;
  }
  .mypage-page .mypage-content .mypage-box .user-info-table tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: none;
  }
  .mypage-page .mypage-content .mypage-box .user-info-table th,
  .mypage-page .mypage-content .mypage-box .user-info-table td {
    display: flex;
    align-items: center;
    width: 50% !important;
    padding: 12px 0;
    background-color: transparent !important;
    /* 모바일에서도 밑줄이 끊기지 않도록 th, td 하단에 직접 선 부여 */
    border-bottom: 1px solid #d3d5d8 !important;
  }
  .mypage-page .mypage-content .mypage-box .user-info-table {
    /* 제목과 내용 사이의 간격이나 추가 정렬이 필요하면 여기서 조절 */
  }
  .mypage-page .mypage-content .mypage-box .user-info-table th {
    font-weight: 400;
  }
}
.mypage-page .mypage-content .mypage-box .btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.mypage-page .mypage-content .mypage-box .btn {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  padding: 8px 18px;
  min-width: -moz-max-content;
  min-width: max-content;
  color: #fff;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .mypage-box .btn {
    padding: 8px 10px;
  }
}
.mypage-page .mypage-content .mypage-box .btn.btn-finish, .mypage-page .mypage-content .mypage-box .btn.btn-view {
  background-color: #58637d;
}
.mypage-page .mypage-content .mypage-box .btn.btn-upload, .mypage-page .mypage-content .mypage-box .btn.btn-submit, .mypage-page .mypage-content .mypage-box .btn.btn-survey {
  background-color: #2563eb;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .mypage-box .btn.btn-survey, .mypage-page .mypage-content .mypage-box .btn.btn-view {
    margin-bottom: 20px;
  }
}
.mypage-page .mypage-content .mypage-box .refresh-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #d3d5d8;
  text-align: center;
  margin-bottom: 40px;
}
.mypage-page .mypage-content .mypage-box .refresh-table th,
.mypage-page .mypage-content .mypage-box .refresh-table td {
  padding: 8px 0px;
  box-sizing: border-box;
}
.mypage-page .mypage-content .mypage-box .refresh-table thead th {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  background-color: #8e949f;
  color: #fff;
  border-right: 1px solid #58637d;
  border-top: 1px solid #58637d;
}
.mypage-page .mypage-content .mypage-box .refresh-table thead th:last-child {
  border-right: none;
}
.mypage-page .mypage-content .mypage-box .refresh-table tbody td {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
  border-right: 1px solid #d3d5d8;
  border-bottom: 1px solid #d3d5d8;
}
.mypage-page .mypage-content .mypage-box .refresh-table tbody td:last-child {
  border-right: none;
}
.mypage-page .mypage-content .mypage-box .refresh-table .finish-text {
  color: #2563eb;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .mypage-box .refresh-table .finish-text {
    display: inline-block;
    padding: 20px 0px;
  }
}
@media (max-width: 768px) {
  .mypage-page .mypage-content .mypage-box .refresh-table {
    display: block;
    border: none;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table th,
  .mypage-page .mypage-content .mypage-box .refresh-table td {
    padding: 0px;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table thead {
    display: none;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table tbody {
    display: block;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d3d5d8;
    border-bottom: none;
    margin-bottom: 20px;
    width: 100%;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table tbody td {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50% !important;
    border-right: 1px solid #d3d5d8;
    border-bottom: 1px solid #d3d5d8;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table tbody td:nth-child(2), .mypage-page .mypage-content .mypage-box .refresh-table tbody td:nth-child(4) {
    border-right: none;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table tbody td:last-child {
    width: 100% !important;
    border-right: none;
  }
  .mypage-page .mypage-content .mypage-box .refresh-table tbody td::before {
    content: attr(data-label);
    display: block;
    align-self: stretch;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
    color: #fff;
    background-color: #8e949f;
    padding: 10px 12px;
    margin-bottom: 10px;
  }
}
.mypage-page .mypage-content .mypage-box .mypage-info {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #58637d;
  line-height: 1.5;
}
.mypage-page .mypage-content .mypage-box .mypage-info span {
  color: #222;
}
.mypage-page .mypage-content .mypage-box .mypage-info.two {
  margin-top: 30px;
}
.mypage-page .mypage-content .modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .modal-overlay {
    padding: 16px;
  }
}
.mypage-page .mypage-content .modal .modal-overlay.active {
  display: flex;
}
.mypage-page .mypage-content .modal .modal-container {
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .modal-container {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    max-width: calc(100vw - 32px);
    min-height: 0;
    overflow: hidden;
  }
}
.mypage-page .mypage-content .modal .modal-header {
  padding: 20px 40px 0px;
}
.mypage-page .mypage-content .modal .modal-header-wrap {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 2px solid #d3d5d8;
}
.mypage-page .mypage-content .modal .btn-modal-close {
  position: relative;
  width: 28px;
  height: 28px;
  border: none;
  background: url("/assets/icon/close-black.svg") center/contain no-repeat;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: #222;
}
.mypage-page .mypage-content .modal .btn-modal-close span {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}
.mypage-page .mypage-content .modal .btn-modal-close span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mypage-page .mypage-content .modal .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .modal-body {
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
  }
}
.mypage-page .mypage-content .modal .test-modal-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .test-modal-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
  }
}
.mypage-page .mypage-content .modal .survey-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 40px;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .survey-content-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding: 20px 16px 24px;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: break-word;
    word-break: keep-all;
  }
}
.mypage-page .mypage-content .modal .survey-content-wrap .survey-content {
  display: flex;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .survey-content-wrap .survey-content {
    flex-direction: column;
    width: 100%;
  }
}
.mypage-page .mypage-content .modal .survey-content-wrap .survey-content .logo-text {
  text-align: left;
  width: 120px;
  height: 28px;
  background: url("../assets/logo/main-logo.png") center/contain no-repeat;
  margin-bottom: 20px;
}
.mypage-page .mypage-content .modal .survey-content-wrap .survey-content .intro-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  color: #343434;
  margin-bottom: 40px;
}
.mypage-page .mypage-content .modal .survey-content-wrap .survey-content .intro-text .highlight-blue {
  color: #2563eb;
  font-weight: 500;
}
.mypage-page .mypage-content .modal .content-left {
  flex: 1;
  border-right: 1px solid #d3d5d8;
  padding: 0px 40px 0 0;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .content-left {
    border-right: none;
    padding: 0px;
    min-width: 0;
  }
}
.mypage-page .mypage-content .modal .content-right {
  flex: 1;
  padding: 0px 0 0 40px;
}
@media screen and (max-width: 768px) {
  .mypage-page .mypage-content .modal .content-right {
    padding: 0px;
    min-width: 0;
  }
}
.mypage-page .mypage-content .modal .survey-item {
  margin-bottom: 40px;
}
.mypage-page .mypage-content .modal .survey-item .notice {
  color: #ff0000;
}
.mypage-page .mypage-content .modal .survey-section-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
  margin-bottom: 20px;
}
.mypage-page .mypage-content .modal .survey-section-subtitle {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #579aff;
  margin-bottom: 10px;
}
.mypage-page .mypage-content .modal .q-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
  margin-bottom: 11px;
  line-height: 1.5;
}
.mypage-page .mypage-content .modal .input-line {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  outline: none;
  padding-bottom: 10px;
}
.mypage-page .mypage-content .modal .input-line::-moz-placeholder {
  color: #d3d5d8;
}
.mypage-page .mypage-content .modal .input-line::placeholder {
  color: #d3d5d8;
}
.mypage-page .mypage-content .modal .option-two {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.mypage-page .mypage-content .modal .options-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 11px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
@media screen and (max-width: 430px) {
  .mypage-page .mypage-content .modal .options-row {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
}
.mypage-page .mypage-content .modal .option-five {
  display: flex;
  flex-direction: row;
  gap: 40px;
}
@media screen and (max-width: 430px) {
  .mypage-page .mypage-content .modal .option-five {
    flex-direction: column;
    gap: 11px;
  }
}
.mypage-page .mypage-content .modal .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.mypage-page .mypage-content .modal .checkbox-label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.mypage-page .mypage-content .modal .checkbox-label input[type=checkbox]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.mypage-page .mypage-content .modal .checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.mypage-page .mypage-content .modal .checkbox-label .checkbox-icon {
  display: none;
}
.mypage-page .mypage-content .modal .checkbox-label .checkbox-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.mypage-page .mypage-content .modal .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.mypage-page .mypage-content .modal .radio-label input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  border-radius: 50%;
  position: relative;
  background: #fff;
  cursor: pointer;
  margin: 0;
}
.mypage-page .mypage-content .modal .radio-label input[type=radio]:checked {
  border-color: #2563eb;
  background: #2563eb;
}
.mypage-page .mypage-content .modal .radio-label input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
.mypage-page .mypage-content .modal .etc-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 230px;
  padding-bottom: 10px;
}
.mypage-page .mypage-content .modal .etc-input::-moz-placeholder {
  color: #d3d5d8;
}
.mypage-page .mypage-content .modal .etc-input::placeholder {
  color: #d3d5d8;
}
.mypage-page .mypage-content .modal .survey-item .agreement-container {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}
.mypage-page .mypage-content .modal .survey-item .agreement-container .agreement-section {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.mypage-page .mypage-content .modal .survey-item .agreement-container .agreement-section:not(:last-child) {
  margin-bottom: 15px;
}
.mypage-page .mypage-content .modal .survey-item .agreement-container .agreement-section .agreement-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.mypage-page .mypage-content .modal .survey-item .agreement-container .agreement-section .notice-text {
  padding-left: 80px;
}
.mypage-page .mypage-content .modal .survey-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 80px 0px 0px;
}
.mypage-page .mypage-content .modal .survey-btn-wrap .survey-btn {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  width: 273px;
  padding: 20px 0px;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}
.mypage-page .mypage-content .modal .feedback-input-wrap {
  width: 100%;
}
.mypage-page .mypage-content .modal .feedback-input-wrap .feedback-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 100%;
  padding-bottom: 10px;
}
.mypage-page .mypage-content .modal .feedback-input-wrap .feedback-input::-moz-placeholder {
  color: #d3d5d8;
}
.mypage-page .mypage-content .modal .feedback-input-wrap .feedback-input::placeholder {
  color: #d3d5d8;
}
.mypage-page .mypage-content .modal .survey-item .red {
  color: #ff0000;
}
.mypage-page .mypage-content .before-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}
.mypage-page .mypage-content .before-modal.is-open {
  display: flex;
}
.mypage-page .mypage-content .before-modal .before-modal-box {
  width: 100%;
  max-width: 480px;
  height: 25vh;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.mypage-page .mypage-content .before-modal .before-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.mypage-page .mypage-content .before-modal .before-modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #1a1a1a;
}
.mypage-page .mypage-content .before-modal .before-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: url(../assets/icon/close-black.svg) center/contain no-repeat;
}
.mypage-page .mypage-content .before-modal .before-modal-content {
  padding: 24px 20px;
  background-color: #fff;
  flex: 1;
  text-align: center;
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage-page .mypage-content .before-modal .before-modal-content p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
.mypage-page .mypage-content .before-modal .before-modal-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px 24px;
}
.mypage-page .mypage-content .before-modal .before-modal-btn-wrap .before-modal-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  padding: 10px;
  width: 150px;
  background-color: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.login-page {
  background-color: #f5f7f8;
  padding-top: 80px;
}
.login-page .login-content {
  padding: 100px 0px;
}
@media screen and (max-width: 1024px) {
  .login-page .login-content {
    padding: 80px 20px;
  }
}
.login-page .login-content .page-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: #222;
  text-align: center;
  margin-bottom: 80px;
  letter-spacing: -1.92px;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    margin-bottom: 40px;
  }
}
.login-page .login-content .sns-login {
  background: #ffffff;
  border-radius: 10px;
  padding: 80px;
  border: 1px solid #d3d5d8;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-login {
    padding: 20px;
  }
}
.login-page .login-content .sns-login .sns-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  color: #222;
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-login .sns-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.36px;
    margin-bottom: 20px;
  }
}
.login-page .login-content .sns-login .sns-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.login-page .login-content .sns-login .sns-notice .notice-icon {
  width: 16px;
  height: 16px;
  background: url("/assets/icon/alert.svg") center/contain no-repeat;
}
.login-page .login-content .sns-login .sns-notice .notice-text {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-login .sns-notice .notice-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.login-page .login-content .sns-login .notice-list {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #58637d;
  line-height: 1.5;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-login .notice-list {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.login-page .login-content .sns-login .notice-list li::before {
  content: "*";
}
.login-page .login-content .sns-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-buttons {
    flex-direction: column;
  }
}
.login-page .login-content .sns-btn {
  width: 340px;
  height: 200px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-btn {
    flex-direction: row;
    gap: 6px;
    width: 100%;
    height: 46px;
    border-radius: 6px;
  }
}
.login-page .login-content .sns-btn .sns-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-btn .sns-icon {
    width: 16px;
    height: 16px;
  }
}
.login-page .login-content .sns-btn .sns-label {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-btn .sns-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.login-page .login-content .sns-btn.naver {
  background-color: #03c75a;
}
.login-page .login-content .sns-btn.naver .sns-icon {
  background-image: url(/assets/icon/naver.svg);
}
.login-page .login-content .sns-btn.naver .sns-label {
  color: #fff;
}
.login-page .login-content .sns-btn.kakao {
  background-color: #fee500;
}
.login-page .login-content .sns-btn.kakao .sns-icon {
  width: 60px;
  height: 56px;
  background-image: url(/assets/icon/kakao.png);
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-btn.kakao .sns-icon {
    width: 17px;
    height: 16px;
  }
}
.login-page .login-content .sns-btn.kakao .sns-label {
  color: #1e1e1e;
}
.login-page .login-content .sns-btn.mobile {
  background-color: #f5f7f8;
}
.login-page .login-content .sns-btn.mobile .sns-icon {
  background-image: url(/assets/icon/pass.png);
}
@media screen and (max-width: 768px) {
  .login-page .login-content .sns-btn.mobile .sns-icon {
    width: 17px;
    height: 17px;
  }
}
.login-page .login-content .sns-btn.mobile .sns-label {
  color: #222222;
}

.join-page {
  background-color: #f5f7f8;
  padding-top: 80px;
}
.join-page .join-steps {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 60px;
}
@media screen and (max-width: 768px) {
  .join-page .join-steps {
    margin-bottom: 40px;
  }
}
@media screen and (max-width: 320px) {
  .join-page .join-steps {
    gap: 28px;
  }
}
.join-page .join-steps .step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  position: relative;
}
.join-page .join-steps .step .step-icon {
  width: 80px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .join-page .join-steps .step .step-icon {
    width: 40px;
    height: 40px;
  }
}
.join-page .join-steps .step .step-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #8e949f;
}
@media screen and (max-width: 768px) {
  .join-page .join-steps .step .step-text {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .join-steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 40px;
  width: 40px;
  height: 1px;
  background-color: #d3d5d8;
}
@media screen and (max-width: 768px) {
  .join-page .join-steps .step:not(:last-child)::after {
    right: -44px;
    top: 20px;
    width: 50px;
    height: 2px;
    z-index: -1;
  }
}
.join-page .join-steps .step:nth-child(1) .step-icon {
  background-image: url("/assets/icon/step-1-gray.svg");
}
.join-page .join-steps .step:nth-child(2) .step-icon {
  background-image: url("/assets/icon/step-2-gray.svg");
}
.join-page .join-steps .step:nth-child(3) .step-icon {
  background-image: url("/assets/icon/step-3-gray.svg");
}
.join-page .join-steps .step:nth-child(4) .step-icon {
  background-image: url("/assets/icon/step-4-gray.svg");
}
.join-page .join-steps .step.active:nth-child(1) .step-icon {
  background-image: url("/assets/icon/step-1-blue.svg");
}
.join-page .join-steps .step.active:nth-child(2) .step-icon {
  background-image: url("/assets/icon/step-2-blue.svg");
}
.join-page .join-steps .step.active:nth-child(3) .step-icon {
  background-image: url("/assets/icon/step-3-blue.svg");
}
.join-page .join-steps .step.active:nth-child(4) .step-icon {
  background-image: url("/assets/icon/step-4-blue.svg");
}
.join-page .join-steps .step.active .step-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .join-page .join-steps .step.active .step-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .box {
  background: #ffffff;
  border-radius: 10px;
  padding: 80px;
  border: 1px solid #d3d5d8;
}
@media screen and (max-width: 768px) {
  .join-page .box {
    padding: 20px;
  }
}
.join-page .join-content {
  padding: 100px 0px;
}
@media screen and (max-width: 1024px) {
  .join-page .join-content {
    padding: 80px 20px;
  }
}
.join-page .join-content .page-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: #222;
  text-align: center;
  margin-bottom: 80px;
  letter-spacing: -1.92px;
}
@media screen and (max-width: 768px) {
  .join-page .join-content .page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
    margin-bottom: 40px;
  }
}
.join-page .step-header {
  text-align: left;
  margin-bottom: 21px;
}
.join-page .step-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: #222;
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .join-page .step-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
  }
}
.join-page .bt-btn {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 80px;
}
@media screen and (max-width: 768px) {
  .join-page .bt-btn {
    flex-direction: column;
    margin-top: 40px;
  }
}
.join-page .bt-btn a, .join-page .bt-btn button {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  min-width: 273px;
  height: 60px;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
@media screen and (max-width: 768px) {
  .join-page .bt-btn a, .join-page .bt-btn button {
    height: 46px;
    border-radius: 6px;
  }
}
.join-page .bt-btn a {
  background: #8e949f;
}
.join-page .bt-btn a.confirm-btn {
  background: #2563eb;
}
.join-page .bt-btn button {
  background: #2563eb;
}
.join-page .step1 .sns-title {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: #222;
  margin-bottom: 40px;
  letter-spacing: -1.92px;
}
@media screen and (max-width: 768px) {
  .join-page .step1 .sns-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.36px;
    margin-bottom: 20px;
  }
}
.join-page .step1 .sns-notice {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.join-page .step1 .sns-notice .notice-icon {
  width: 16px;
  height: 16px;
  background: url("/assets/icon/alert.svg") center/contain no-repeat;
}
.join-page .step1 .sns-notice .notice-text {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
}
@media screen and (max-width: 768px) {
  .join-page .step1 .sns-notice .notice-text {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .step1 .notice-list {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #58637d;
  line-height: 1.5;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .join-page .step1 .notice-list {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step1 .notice-list li::before {
  content: "*";
}
.join-page .sns-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  .join-page .sns-buttons {
    flex-direction: column;
  }
}
.join-page .sns-btn {
  width: 350px;
  height: 200px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 768px) {
  .join-page .sns-btn {
    flex-direction: row;
    gap: 6px;
    width: 100%;
    height: 46px;
    border-radius: 6px;
  }
}
.join-page .sns-btn .sns-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media screen and (max-width: 768px) {
  .join-page .sns-btn .sns-icon {
    width: 16px;
    height: 16px;
  }
}
.join-page .sns-btn .sns-label {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
}
@media screen and (max-width: 768px) {
  .join-page .sns-btn .sns-label {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .sns-btn.naver {
  background-color: #03c75a;
}
.join-page .sns-btn.naver .sns-icon {
  background-image: url(/assets/icon/naver.svg);
}
.join-page .sns-btn.naver .sns-label {
  color: #fff;
}
.join-page .sns-btn.kakao {
  background-color: #fee500;
}
.join-page .sns-btn.kakao .sns-icon {
  width: 60px;
  height: 56px;
  background-image: url(/assets/icon/kakao.png);
}
@media screen and (max-width: 768px) {
  .join-page .sns-btn.kakao .sns-icon {
    width: 17px;
    height: 16px;
  }
}
.join-page .sns-btn.kakao .sns-label {
  color: #1e1e1e;
}
.join-page .sns-btn.mobile {
  background-color: #f5f7f8;
}
.join-page .sns-btn.mobile .sns-icon {
  background-image: url(/assets/icon/pass.png);
}
@media screen and (max-width: 768px) {
  .join-page .sns-btn.mobile .sns-icon {
    width: 17px;
    height: 17px;
  }
}
.join-page .sns-btn.mobile .sns-label {
  color: #222222;
}
.join-page .step2 .step2-desc {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .step2-desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step2 .sns-select {
  border: none;
  padding: 0;
  margin: 0 0 40px 0;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .sns-select {
    margin: 0 0 20px 0;
  }
}
.join-page .step2 .sns-select .radio-group {
  display: flex;
  gap: 30px;
  padding-bottom: 20px;
  border-bottom: solid 1px #d3d5d8;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .sns-select .radio-group {
    flex-direction: column;
    gap: 16px;
  }
}
.join-page .step2 .sns-select .radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.join-page .step2 .sns-select .radio-item input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  margin: 0;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
}
.join-page .step2 .sns-select .radio-item input[type=radio]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.join-page .step2 .sns-select .radio-item input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
}
.join-page .step2 .sns-select .radio-item .radio-icon {
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.join-page .step2 .sns-select .radio-item .radio-icon.naver {
  background-image: url(/assets/icon/naver-s.svg);
}
.join-page .step2 .sns-select .radio-item .radio-icon.kakao {
  background-image: url(/assets/icon/kakao-s.png);
}
.join-page .step2 .sns-select .radio-item .radio-label {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .sns-select .radio-item .radio-label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step2 .terms-section .terms-notice {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-notice {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .step2 .terms-section .terms-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0 0 20px 0;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list {
    gap: 10px;
  }
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list .terms-item .checkbox-label {
    gap: 6px;
  }
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label input[type=checkbox]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-icon {
  display: none;
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-text {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-text .mark.required {
  color: #ff0000;
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-text .mark.optional {
  color: #343434;
}
.join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-text a {
  color: #343434;
  text-decoration: none;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list .terms-item .checkbox-label .checkbox-text a {
    display: none;
  }
}
.join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc li {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #58637d;
  line-height: 1.6;
  position: relative;
  padding-left: 12px;
  left: 26px;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc li {
    display: none;
  }
}
.join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc li::before {
  content: "•";
  position: absolute;
  left: 0;
}
.join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc.three-lines {
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc.three-lines {
    margin-top: 10px;
    border-bottom: solid 1px #d3d5d8;
    padding-bottom: 10px;
  }
}
.join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc.three-lines li {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222222;
  left: 0px;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-list .terms-item .terms-sub-desc.three-lines li {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .step2 .terms-section .terms-info {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-info {
    margin: 20px 0px;
    padding-top: 20px;
    border-top: 1px solid #d3d5d8;
  }
}
.join-page .step2 .terms-section .terms-info li {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.join-page .step2 .terms-section .terms-info li::before {
  content: "※";
}
.join-page .step2 .terms-section .terms-all-agree {
  padding-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .join-page .step2 .terms-section .terms-all-agree {
    padding-bottom: 20px;
  }
}
.join-page .step2 .terms-section .terms-all-agree .checkbox-label.all-agree {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.join-page .step2 .terms-section .terms-all-agree .checkbox-label.all-agree input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid #2563eb;
  border-radius: 2px;
  margin: 0;
  cursor: pointer;
  position: relative;
  background-color: #fff;
}
.join-page .step2 .terms-section .terms-all-agree .checkbox-label.all-agree input[type=checkbox]:checked {
  background-color: #2563eb;
}
.join-page .step2 .terms-section .terms-all-agree .checkbox-label.all-agree input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.join-page .step2 .terms-section .terms-all-agree .checkbox-label.all-agree .checkbox-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #2563eb;
}
.join-page .step2-footer {
  padding-top: 42px;
  border-top: 1px solid #d3d5d8;
}
@media screen and (max-width: 768px) {
  .join-page .step2-footer {
    padding-top: 20px;
  }
}
.join-page .step2-footer .login-link {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #222;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .join-page .step2-footer .login-link {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .step2-footer .login-link .btn-login {
  display: inline-block;
  margin-left: 10px;
  padding: 8px 13px;
  background-color: #58637d;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 768px) {
  .join-page .step2-footer .login-link .btn-login {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .step2-footer .contact-link {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #222;
}
@media screen and (max-width: 768px) {
  .join-page .step2-footer .contact-link {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.join-page .step2-footer .contact-link a {
  color: #0c4fff;
  margin-left: 8px;
}
.join-page .step2-2 .member-info {
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .member-info {
    margin-bottom: 40px;
  }
}
.join-page .step2-2 .member-info .info-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  color: #222;
  margin: 40px 0 20px;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .member-info .info-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
    margin: 20px 0;
  }
}
.join-page .step2-2 .member-info .info-list {
  display: flex;
  flex-direction: column;
}
.join-page .step2-2 .member-info .info-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #d3d5d8;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .member-info .info-row {
    padding: 10px 0;
  }
}
.join-page .step2-2 .member-info .info-row:last-child {
  border-bottom: none;
}
.join-page .step2-2 .member-info .info-row dt {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #8e949f;
  width: 80px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .member-info .info-row dt {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step2-2 .member-info .info-row dd {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .member-info .info-row dd {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step2-2 .personal-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .personal-form {
    gap: 10px;
  }
}
.join-page .step2-2 .personal-form .form-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  color: #222;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .personal-form .form-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
  }
}
.join-page .step2-2 .personal-form .form-group:last-child {
  margin-top: 10px;
}
.join-page .step2-2 .personal-form .form-group {
  display: flex;
  align-items: center;
}
.join-page .step2-2 .personal-form .form-label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #8e949f;
  width: 80px;
}
.join-page .step2-2 .personal-form .input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .personal-form .input-wrap {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}
.join-page .step2-2 .personal-form .form-input {
  width: 260px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #d3d5d8;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  color: #343434;
  outline: none;
  transition: border-color 0.2s;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .personal-form .form-input {
    width: 100%;
  }
}
.join-page .step2-2 .personal-form .btn-action {
  padding: 10px 20px;
  background-color: #58637d;
  color: #fff;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  cursor: pointer;
}
@media screen and (max-width: 768px) {
  .join-page .step2-2 .personal-form .btn-action {
    padding: 5px 18px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.join-page .step2-2 .personal-form .sms-consent {
  display: flex;
}
.join-page .step2-2 .personal-form .radio-wrap {
  display: flex;
  gap: 20px;
}
.join-page .step2-2 .personal-form .radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
.join-page .step2-2 .personal-form .radio-item input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  margin: 0;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
}
.join-page .step2-2 .personal-form .radio-item input[type=radio]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.join-page .step2-2 .personal-form .radio-item input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background-color: #ffffff;
  border-radius: 50%;
}
.join-page .step2-2 .personal-form .radio-item .radio-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.join-page .step3 .step3-header {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .step3-header {
    margin-bottom: 20px;
  }
}
.join-page .step3 .terms-heading {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.32px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .terms-heading {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.32px;
  }
}
.join-page .step3 .terms-content {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #222;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .terms-content {
    height: 350px;
    overflow-y: scroll;
  }
}
.join-page .step3 .terms-content .terms-section {
  margin-bottom: 20px;
}
.join-page .step3 .terms-content .terms-section .terms-title {
  margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .terms-content .terms-section .terms-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
    margin-bottom: 11px;
  }
}
.join-page .step3 .terms-content .terms-section .terms-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #343434;
  line-height: 1.7;
}
.join-page .step3 .terms-content .terms-section .terms-list {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.28px;
  color: #343434;
  line-height: 1.7;
}
.join-page .step3 .terms-content .terms-section .terms-list li strong {
  color: #222;
  font-weight: 600;
}
.join-page .step3 .terms-content .terms-section .terms-table-wrap {
  overflow-x: auto;
  margin: 16px 0 20px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .terms-content .terms-section .terms-table-wrap {
    margin: 12px 0 16px;
  }
}
.join-page .step3 .terms-content .terms-section .terms-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .terms-content .terms-section .terms-table {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.24px;
  }
}
.join-page .step3 .terms-content .terms-section .terms-table th,
.join-page .step3 .terms-content .terms-section .terms-table td {
  padding: 12px 10px;
  border: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: top;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .join-page .step3 .terms-content .terms-section .terms-table th,
  .join-page .step3 .terms-content .terms-section .terms-table td {
    padding: 10px 8px;
  }
}
.join-page .step3 .terms-content .terms-section .terms-table th {
  background: #f8fafc;
  color: #222;
  font-weight: 600;
}
.join-page .step4 .finish-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.64px;
  color: #222222;
}
@media screen and (max-width: 768px) {
  .join-page .step4 .finish-wrap {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.36px;
  }
}
.join-page .step4 .finish-wrap .icon-check {
  margin-bottom: 40px;
  width: 58px;
  height: 58px;
  background: url("/assets/icon/check.svg") center/contain no-repeat;
}
@media screen and (max-width: 768px) {
  .join-page .step4 .finish-wrap .icon-check {
    margin-bottom: 20px;
  }
}
.join-page .step4 .finish-wrap span {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
@media screen and (max-width: 768px) {
  .join-page .step4 .finish-wrap span {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}

@media screen and (max-width: 768px) {
  .refresh-page .t-none {
    display: none;
  }
}
.refresh-page .title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .refresh-page .title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
  }
}
.refresh-page .desc {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  text-align: center;
  color: #343434;
  margin: 20px 0px 40px;
}
@media screen and (max-width: 768px) {
  .refresh-page .desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.refresh-page .desc span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 768px) {
  .refresh-page .desc span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.refresh-page .refresh-content {
  padding-top: 80px;
}
.refresh-page .refresh-content .participation {
  background-color: #f5f7f8;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .participation {
    padding: 0px 20px;
  }
}
.refresh-page .refresh-content .participation-wrap {
  padding: 80px 0px 100px;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .participation-wrap {
    padding: 80px 0px;
  }
}
.refresh-page .refresh-content .participation-wrap .program-info-list {
  display: flex;
  gap: 30px;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .participation-wrap .program-info-list {
    flex-direction: column;
    gap: 10px;
  }
}
.refresh-page .refresh-content .participation-wrap .program-info-list .info-box {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 380px;
  padding: 12px 0px;
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .participation-wrap .program-info-list .info-box {
    padding: 10px 0px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
  }
}
.refresh-page .refresh-content .participation-wrap .join-cards {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .participation-wrap .join-cards {
    overflow-x: auto;
  }
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .participation-wrap .join-cards {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
}
.refresh-page .refresh-content .participation-wrap .join-card {
  width: 187px;
  height: 164px;
  min-width: 187px;
  background: #fff;
  border-radius: 10px;
  padding: 76px 0 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
@media screen and (max-width: 430px) {
  .refresh-page .refresh-content .participation-wrap .join-card {
    width: 80px;
    min-width: 0px;
    height: 90px;
    padding: 0;
  }
}
.refresh-page .refresh-content .participation-wrap .join-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  background: url("/assets/icon/arrow-blue.svg") center/contain no-repeat;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .participation-wrap .join-card:not(:last-child)::after {
    right: -11px;
  }
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .participation-wrap .join-card:not(:last-child)::after {
    right: -9px;
    width: 6px;
    height: 10px;
  }
}
.refresh-page .refresh-content .participation-wrap .join-card .card-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #2563eb;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .participation-wrap .join-card .card-number {
    top: 12px;
    right: 12px;
  }
}
.refresh-page .refresh-content .participation-wrap .join-card .card-number::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: #2563eb;
  vertical-align: baseline;
  margin-right: 4px;
}
.refresh-page .refresh-content .participation-wrap .join-card .card-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.44px;
  color: #222;
  text-align: center;
}
@media screen and (max-width: 430px) {
  .refresh-page .refresh-content .participation-wrap .join-card .card-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.28px;
  }
}
.refresh-page .refresh-content .participation-wrap .join-card .card-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #8e949f;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .program-overview {
    padding: 0px 20px;
  }
}
.refresh-page .refresh-content .program-overview-wrap {
  padding: 80px 0px 100px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container {
  display: flex;
  justify-content: space-between;
  margin: 0px auto;
  background-color: #fff;
  border-radius: 12px;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container {
    gap: 10px;
  }
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  width: 280px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell {
  padding: 13px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.head {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 9px 0px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.body {
  line-height: 1.5;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.body.highlight {
  font-weight: 500;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell {
  flex: 1;
  flex-direction: column;
  min-height: 138px;
  border-bottom: none;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell {
    flex-direction: row;
    gap: 10px;
    min-height: auto;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-img {
  width: 120px;
  height: 76px;
  margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-img {
    width: 50px;
    height: 32px;
    margin-bottom: 0px;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-img img {
  width: 100%;
  border-radius: 8px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text.green {
  color: #00821b;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text.yellow {
  color: #7f8400;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text.red {
  color: #b81515;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .category-header {
  min-width: 280px;
  border: 1px solid #d3d5d8;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .category-header {
    width: 100%;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .category-header div:nth-child(4) {
  padding: 25px 0px;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .category-header div:nth-child(4) {
    padding: 13px 0px;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .category-header .cell.head {
  background-color: #8e949f;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .category-header .cell.body {
  background-color: #fff;
  text-align: center;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-green {
  width: 305px;
  background-color: #f0f7ec;
  border: 1px solid #009e21;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .level-green {
    width: 100%;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-green .cell {
  border-bottom: 1px solid #009e21;
  color: #00821b;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-green .cell.head {
  background-color: #009e21;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-green .cell.body {
  background-color: #f0f7ec;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-yellow {
  width: 305px;
  background-color: #fff9e5;
  border: 1px solid #ffd800;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .level-yellow {
    width: 100%;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-yellow .cell {
  border-bottom: 1px solid #ffd800;
  color: #7f8400;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-yellow .cell.head {
  background-color: #ffd800;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-red {
  width: 280px;
  background-color: #fff2f2;
  border: 1px solid #dc2626;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .level-red {
    width: 100%;
  }
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-red .cell {
  border-bottom: 1px solid #d83636;
  color: #b81515;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.refresh-page .refresh-content .program-overview-wrap .program-table-container .level-red .cell.head {
  background-color: #dc2626;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col {
    border-radius: 10px;
  }
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.body {
    display: none;
  }
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col.is-open .cell.body {
    display: flex;
  }
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.head {
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    position: relative;
  }
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col .cell.head::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.2s;
  }
  .refresh-page .refresh-content .program-overview-wrap .program-table-container .comparison-col.is-open .cell.head::after {
    transform: translateY(-50%) rotate(180deg);
  }
}
.refresh-page .refresh-content .apply-info {
  background-color: #f5f7f8;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .apply-info {
    padding: 0px 20px;
  }
}
.refresh-page .refresh-content .apply-info-wrap {
  padding: 80px 0px 100px;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .apply-info-wrap {
    padding: 80px 0px;
  }
}
.refresh-page .refresh-content .apply-info-wrap .result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item {
  display: flex;
  border-radius: 10px;
  border: 1px solid #e6e8ea;
  background-color: #fff;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-color {
  width: 20px;
  height: 244px;
  border-radius: 6px 0 0 6px;
  flex-shrink: 0;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .result-color {
    width: 100%;
    height: 10px;
    border-radius: 10px 10px 0 0;
  }
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-color.green {
  background: #009e21;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-color.olive {
  background: #a4aa00;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-color.red {
  background: #d83636;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item-wrap {
  display: flex;
  align-items: center;
  padding: 19px 0;
  flex: 1;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  padding: 0 24px;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .title-desc {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  padding: 20px 0 0;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .title-desc.green {
  color: #009e21;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .title-desc.olive {
  color: #a4aa00;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .title-desc.red {
  color: #d83636;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .green {
  color: #00821b;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .olive {
  color: #7f8400;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .red {
  color: #b81515;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .result-divider {
  width: 1px;
  height: 204px;
  background-color: #e6e8ea;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide {
  line-height: 1.5;
  color: #222;
  padding-left: 40px;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide ol li {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #579aff;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .apply-info-wrap .result .result-item {
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item-wrap {
    flex-direction: column;
    align-items: stretch;
    padding: 24px;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 0 0 16px;
    margin-bottom: 4px;
    border-bottom: 1px solid #eee;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .result-title .title-desc {
    padding-top: 4px;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .result-divider {
    display: none;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide {
    padding-left: 0;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide h3 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.28px;
    color: #222;
    margin: 16px 0 10px;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide ol {
    margin: 0 0 4px;
    list-style: decimal;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide ol li {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
  .refresh-page .refresh-content .apply-info-wrap .result .result-item .apply-guide a {
    color: #2563eb;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.refresh-page .refresh-content .apply-info-wrap .result .result-box {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 30px;
  background: #fff;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .apply {
    padding: 0px 20px;
  }
}
.refresh-page .refresh-content .apply-wrap {
  padding: 80px 0px 100px;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .apply-wrap {
    padding: 80px 0px;
  }
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap {
  display: flex;
  align-items: stretch;
  margin: 40px 0px;
  justify-content: space-between;
}
@media screen and (max-width: 1024px) {
  .refresh-page .refresh-content .apply-wrap .apply-card-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    gap: 10px;
    justify-content: space-between;
  }
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card {
  width: 394px;
  min-width: 394px;
  flex-shrink: 0;
  border-radius: 10px;
  border: solid 1px #d3d5d8;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .apply-wrap .apply-card-wrap .card {
    min-width: 216px;
    width: 216px;
  }
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .apply-btn {
  width: 100%;
  padding: 15px 0px;
  border-radius: 0 0 10px 10px;
  background-color: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .apply-btn span {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../assets/icon/plus.svg") center/contain no-repeat;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .apply-btn span.disabled {
  filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(120%) contrast(85%);
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .apply-btn.disabled {
  background-color: #d3d5d8;
  color: #999;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap {
  padding: 20px;
  flex: 1;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap .card-info {
  padding-bottom: 20px;
  border-bottom: 1px solid #2563eb;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap .card-info h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #222;
  margin-bottom: 10px;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap .card-info .card-date {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #343434;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap dl {
  padding-top: 20px;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap dl dt {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #222;
  margin-bottom: 10px;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap dl dd {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #343434;
}
.refresh-page .refresh-content .apply-wrap .apply-card-wrap .card .card-wrap .card-content {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #58637d;
  margin-top: 20px;
  line-height: 1.5;
  min-height: 170px;
}
.refresh-page .refresh-content .apply-wrap .apply-note {
  background-color: #f5f7f8;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  padding: 40px;
  border-radius: 10px;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .apply-wrap .apply-note {
    padding: 40px 20px;
  }
}
.refresh-page .refresh-content .apply-wrap .apply-note .note-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .apply-wrap .apply-note .note-title {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.refresh-page .refresh-content .apply-wrap .apply-note .note-title:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("/assets/icon/blue-note.svg") center/contain no-repeat;
  margin-right: 6px;
}
.refresh-page .refresh-content .apply-wrap .apply-note p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .refresh-page .refresh-content .apply-wrap .apply-note p {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.refresh-page .modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .modal-overlay {
    padding: 16px;
  }
}
.refresh-page .modal .modal-overlay.active {
  display: flex;
}
.refresh-page .modal .modal-container {
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .modal-container {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    max-width: calc(100vw - 32px);
    min-height: 0;
    overflow: hidden;
  }
}
.refresh-page .modal .modal-header {
  padding: 20px 40px 0px;
}
.refresh-page .modal .modal-header-wrap {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 2px solid #d3d5d8;
}
.refresh-page .modal .btn-modal-close {
  position: relative;
  width: 28px;
  height: 28px;
  border: none;
  background: url("/assets/icon/close-black.svg") center/contain no-repeat;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: #222;
}
.refresh-page .modal .btn-modal-close span {
  font-size: 24px;
  line-height: 1;
  font-weight: 300;
}
.refresh-page .modal .btn-modal-close span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.refresh-page .modal .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .modal-body {
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
  }
}
.refresh-page .modal .test-modal-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .test-modal-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
  }
}
.refresh-page .modal .survey-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 40px 40px;
  height: 100%;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .survey-content-wrap {
    flex: 1;
    min-height: 0;
    min-width: 0;
    padding: 20px 16px 24px;
    -webkit-overflow-scrolling: touch;
    overflow-wrap: break-word;
    word-break: keep-all;
  }
}
.refresh-page .modal .survey-content-wrap .survey-content {
  display: flex;
  min-width: 0;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .survey-content-wrap .survey-content {
    flex-direction: column;
    width: 100%;
  }
}
.refresh-page .modal .survey-content-wrap .survey-content .logo-text {
  text-align: left;
  width: 120px;
  height: 28px;
  background: url("../assets/logo/main-logo.png") center/contain no-repeat;
  margin-bottom: 20px;
}
.refresh-page .modal .survey-content-wrap .survey-content .intro-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  color: #343434;
  margin-bottom: 40px;
}
.refresh-page .modal .survey-content-wrap .survey-content .intro-text .highlight-blue {
  color: #2563eb;
  font-weight: 500;
}
.refresh-page .modal .content-left {
  flex: 1;
  border-right: 1px solid #d3d5d8;
  padding: 0px 40px 0 0;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .content-left {
    border-right: none;
    padding: 0px;
    min-width: 0;
  }
}
.refresh-page .modal .content-right {
  flex: 1;
  padding: 0px 0 0 40px;
}
@media screen and (max-width: 768px) {
  .refresh-page .modal .content-right {
    padding: 0px;
    min-width: 0;
  }
}
.refresh-page .modal .survey-item {
  margin-bottom: 40px;
}
.refresh-page .modal .survey-item .notice {
  color: #ff0000;
}
.refresh-page .modal .survey-section-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
  margin-bottom: 20px;
}
.refresh-page .modal .survey-section-subtitle {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #579aff;
  margin-bottom: 10px;
}
.refresh-page .modal .q-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
  margin-bottom: 11px;
  line-height: 1.5;
}
.refresh-page .modal .input-line {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  outline: none;
  padding-bottom: 10px;
}
.refresh-page .modal .input-line::-moz-placeholder {
  color: #d3d5d8;
}
.refresh-page .modal .input-line::placeholder {
  color: #d3d5d8;
}
.refresh-page .modal .option-two {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.refresh-page .modal .options-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 11px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
@media screen and (max-width: 430px) {
  .refresh-page .modal .options-row {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
}
.refresh-page .modal .option-five {
  display: flex;
  flex-direction: row;
  gap: 40px;
}
@media screen and (max-width: 430px) {
  .refresh-page .modal .option-five {
    flex-direction: column;
    gap: 11px;
  }
}
.refresh-page .modal .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.refresh-page .modal .checkbox-label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.refresh-page .modal .checkbox-label input[type=checkbox]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.refresh-page .modal .checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.refresh-page .modal .checkbox-label .checkbox-icon {
  display: none;
}
.refresh-page .modal .checkbox-label .checkbox-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.refresh-page .modal .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.refresh-page .modal .radio-label input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  border-radius: 50%;
  position: relative;
  background: #fff;
  cursor: pointer;
  margin: 0;
}
.refresh-page .modal .radio-label input[type=radio]:checked {
  border-color: #2563eb;
  background: #2563eb;
}
.refresh-page .modal .radio-label input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
.refresh-page .modal .etc-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 230px;
  padding-bottom: 10px;
}
.refresh-page .modal .etc-input::-moz-placeholder {
  color: #d3d5d8;
}
.refresh-page .modal .etc-input::placeholder {
  color: #d3d5d8;
}
.refresh-page .modal .survey-item .agreement-container {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}
.refresh-page .modal .survey-item .agreement-container .agreement-section {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.refresh-page .modal .survey-item .agreement-container .agreement-section:not(:last-child) {
  margin-bottom: 15px;
}
.refresh-page .modal .survey-item .agreement-container .agreement-section .agreement-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.refresh-page .modal .survey-item .agreement-container .agreement-section .notice-text {
  padding-left: 80px;
}
.refresh-page .modal .survey-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 80px 0px 0px;
}
.refresh-page .modal .survey-btn-wrap .survey-btn {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  width: 273px;
  padding: 20px 0px;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}
.refresh-page .modal .feedback-input-wrap {
  width: 100%;
}
.refresh-page .modal .feedback-input-wrap .feedback-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 100%;
  padding-bottom: 10px;
}
.refresh-page .modal .feedback-input-wrap .feedback-input::-moz-placeholder {
  color: #d3d5d8;
}
.refresh-page .modal .feedback-input-wrap .feedback-input::placeholder {
  color: #d3d5d8;
}
.refresh-page .modal .content-left .impression-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
}
.refresh-page .modal .content-left .impression-modal.is-open {
  display: flex;
}
.refresh-page .impression-modal-box {
  width: 100%;
  max-width: 480px;
  background: #fff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.refresh-page .impression-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
}
.refresh-page .impression-modal-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.32px;
  color: #1a1a1a;
}
.refresh-page .impression-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: url(../assets/icon/close-black.svg) center/contain no-repeat;
  cursor: pointer;
}
.refresh-page .impression-modal-content {
  padding: 24px 20px;
  background-color: #fff;
}
.refresh-page .impression-modal-content p {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #1a1a1a;
  line-height: 1.6;
}
.refresh-page .impression-modal-content span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #eb4325;
}
.refresh-page .impression-modal-content .impression-modal-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #343434;
  margin-top: 10px;
}
.refresh-page .impression-modal-content .green {
  color: #009e21;
}
.refresh-page .impression-modal-content .yellow {
  color: #ffd800;
}
.refresh-page .impression-modal-content .red {
  color: #dc2626;
}
.refresh-page .impression-modal-btn-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px 24px;
}
.refresh-page .impression-modal-btn-wrap .impression-modal-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  padding: 20px;
  width: 150px;
  background-color: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.healingday-page .title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .healingday-page .title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
  }
}
.healingday-page .desc {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  text-align: center;
  color: #343434;
  margin: 20px 0px 40px;
}
@media screen and (max-width: 768px) {
  .healingday-page .desc {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
.healingday-page .desc span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
@media screen and (max-width: 768px) {
  .healingday-page .desc span {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.28px;
  }
}
.healingday-page .healingday-content {
  padding-top: 80px;
}
.healingday-page .healingday-content .participation {
  background-color: #f5f7f8;
}
@media screen and (max-width: 1024px) {
  .healingday-page .healingday-content .participation {
    padding: 0px 20px;
  }
}
.healingday-page .healingday-content .participation-wrap {
  padding: 80px 0px 100px;
}
@media screen and (max-width: 768px) {
  .healingday-page .healingday-content .participation-wrap {
    padding: 80px 0px;
  }
}
.healingday-page .healingday-content .participation-wrap .program-info-list {
  display: flex;
  gap: 30px;
  margin-bottom: 80px;
}
@media screen and (max-width: 768px) {
  .healingday-page .healingday-content .participation-wrap .program-info-list {
    flex-direction: column;
    gap: 10px;
  }
}
.healingday-page .healingday-content .participation-wrap .program-info-list .info-box {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 380px;
  padding: 12px 0px;
  background-color: #1caa2f;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .healingday-page .healingday-content .participation-wrap .program-info-list .info-box {
    padding: 10px 0px;
    width: 100%;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.36px;
  }
}
.healingday-page .healingday-content .participation-wrap .join-cards {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
@media screen and (max-width: 1024px) {
  .healingday-page .healingday-content .participation-wrap .join-cards {
    overflow-x: auto;
  }
}
@media screen and (max-width: 768px) {
  .healingday-page .healingday-content .participation-wrap .join-cards {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
}
.healingday-page .healingday-content .participation-wrap .join-card {
  width: 187px;
  height: 164px;
  background: #fff;
  border-radius: 10px;
  padding: 76px 0 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  flex-shrink: 0;
}
@media screen and (max-width: 430px) {
  .healingday-page .healingday-content .participation-wrap .join-card {
    width: 90px;
    min-width: 0px;
    height: 100px;
    padding: 0;
  }
}
.healingday-page .healingday-content .participation-wrap .join-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  background: url("/assets/icon/arrow-blue.svg") center/contain no-repeat;
}
@media screen and (max-width: 1024px) {
  .healingday-page .healingday-content .participation-wrap .join-card:not(:last-child)::after {
    right: -9px;
    width: 8px;
    height: 14px;
  }
}
@media screen and (max-width: 768px) {
  .healingday-page .healingday-content .participation-wrap .join-card:not(:last-child)::after {
    right: -9px;
    width: 6px;
    height: 10px;
  }
}
.healingday-page .healingday-content .participation-wrap .join-card .card-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #2563eb;
}
@media screen and (max-width: 768px) {
  .healingday-page .healingday-content .participation-wrap .join-card .card-number {
    top: 12px;
    right: 12px;
  }
}
.healingday-page .healingday-content .participation-wrap .join-card .card-number::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: #2563eb;
  vertical-align: baseline;
  margin-right: 4px;
}
.healingday-page .healingday-content .participation-wrap .join-card .card-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  color: #222;
  text-align: center;
}
@media screen and (max-width: 430px) {
  .healingday-page .healingday-content .participation-wrap .join-card .card-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.28px;
  }
}
.healingday-page .healingday-content .participation-wrap .join-card .card-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #8e949f;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
.healingday-page .healingday-content .apply-wrap {
  padding: 80px 0 100px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap {
  position: relative;
  display: block;
  margin: 40px 0;
  padding: 0 15px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .apply-swiper {
  width: 100%;
  overflow: hidden;
  min-width: 0;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-wrapper {
  display: flex;
  align-items: stretch;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-slide {
  height: auto;
  display: flex;
  box-sizing: border-box;
  padding: 0 5px;
  min-width: 0;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-slide .card {
  max-width: 100%;
  min-width: 0;
  flex-shrink: 0;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-prev.apply-swiper-prev, .healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-prev.apply-swiper-next,
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-next.apply-swiper-prev,
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-next.apply-swiper-next {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 24px;
  z-index: 10;
  cursor: pointer;
  background: url("/assets/icon/right.svg") center/contain no-repeat;
  margin: 0;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-prev.apply-swiper-prev::after, .healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-prev.apply-swiper-next::after,
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-next.apply-swiper-prev::after,
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-next.apply-swiper-next::after {
  content: none;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-prev.apply-swiper-prev.swiper-button-disabled, .healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-prev.apply-swiper-next.swiper-button-disabled,
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-next.apply-swiper-prev.swiper-button-disabled,
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .swiper-button-next.apply-swiper-next.swiper-button-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .apply-swiper-prev {
  left: -4px;
  transform: scaleX(-1) translateY(-50%);
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .apply-swiper-next {
  right: -4px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card {
  width: 394px;
  border-radius: 10px;
  border: solid 1px #d3d5d8;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap {
  padding: 20px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .card-info {
  flex-shrink: 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #2563eb;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .card-info h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #222;
  margin-bottom: 10px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .card-info p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #343434;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .info-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 0px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .info-list dl dt {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #222;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .info-list dl dd {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #343434;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .card-wrap .card-content {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #58637d;
  line-height: 1.5;
  overflow-y: auto;
  padding-bottom: 10px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .apply-btn {
  flex-shrink: 0;
  width: 100%;
  padding: 15px 0;
  border-radius: 0 0 10px 10px;
  background-color: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .apply-btn span {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../assets/icon/plus.svg") center/contain no-repeat;
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .apply-btn span.disabled {
  filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(120%) contrast(85%);
}
.healingday-page .healingday-content .apply-wrap .apply-swiper-wrap .card .apply-btn.disabled {
  background-color: #d3d5d8;
  color: #999;
}
.healingday-page .healingday-content .apply-wrap .apply-note {
  background-color: #f5f7f8;
  padding: 40px;
  border-radius: 10px;
}
.healingday-page .healingday-content .apply-wrap .apply-note .note-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.healingday-page .healingday-content .apply-wrap .apply-note .note-title:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("/assets/icon/blue-note.svg") center/contain no-repeat;
  margin-right: 6px;
}
.healingday-page .healingday-content .apply-wrap .apply-note p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
  line-height: 1.5;
}
.healingday-page .modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.healingday-page .modal .modal-overlay.active {
  display: flex;
}
.healingday-page .modal .modal-container {
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.healingday-page .modal .modal-header {
  padding: 20px 40px 0px;
}
.healingday-page .modal .modal-header-wrap {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 2px solid #d3d5d8;
}
.healingday-page .modal .btn-modal-close {
  width: 20px;
  height: 20px;
  background: url("../assets/icon/close-black.svg") center/contain no-repeat;
  cursor: pointer;
  display: inline-block;
}
.healingday-page .modal .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.healingday-page .modal .test-modal-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
  margin-top: 40px;
}
.healingday-page .modal .survey-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 40px;
  height: 100%;
}
.healingday-page .modal .survey-content-wrap .survey-content {
  display: flex;
}
.healingday-page .modal .survey-content-wrap .survey-content .logo-text {
  text-align: left;
  width: 120px;
  height: 28px;
  background: url("../assets/logo/main-logo.png") center/contain no-repeat;
  margin-bottom: 20px;
}
.healingday-page .modal .survey-content-wrap .survey-content .intro-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  color: #343434;
  margin-bottom: 40px;
}
.healingday-page .modal .survey-content-wrap .survey-content .intro-text .highlight-blue {
  color: #2563eb;
  font-weight: 500;
}
.healingday-page .modal .content-left {
  flex: 1;
  border-right: 1px solid #d3d5d8;
  padding: 0px 40px 0 0;
}
.healingday-page .modal .content-right {
  flex: 1;
  padding: 0px 0 0 40px;
}
.healingday-page .modal .survey-item {
  margin-bottom: 40px;
}
.healingday-page .modal .survey-item .notice {
  color: #ff0000;
}
.healingday-page .modal .q-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
  margin-bottom: 11px;
  line-height: 1.5;
}
.healingday-page .modal {
  /* 인풋 */
}
.healingday-page .modal .input-line {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  outline: none;
  padding-bottom: 10px;
}
.healingday-page .modal .input-line::-moz-placeholder {
  color: #d3d5d8;
}
.healingday-page .modal .input-line::placeholder {
  color: #d3d5d8;
}
.healingday-page .modal .option-two {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.healingday-page .modal .options-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 11px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.healingday-page .modal .option-five {
  display: flex;
  flex-direction: row;
  gap: 40px;
}
.healingday-page .modal .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.healingday-page .modal .checkbox-label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.healingday-page .modal .checkbox-label input[type=checkbox]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.healingday-page .modal .checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.healingday-page .modal .checkbox-label .checkbox-icon {
  display: none;
}
.healingday-page .modal .checkbox-label .checkbox-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.healingday-page .modal {
  /* 라디오 버튼  */
}
.healingday-page .modal .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.healingday-page .modal .radio-label input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  border-radius: 50%;
  position: relative;
  background: #fff;
  cursor: pointer;
  margin: 0;
}
.healingday-page .modal .radio-label input[type=radio]:checked {
  border-color: #2563eb;
  background: #2563eb;
}
.healingday-page .modal .radio-label input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
.healingday-page .modal .etc-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 230px;
  padding-bottom: 10px;
}
.healingday-page .modal .etc-input::-moz-placeholder {
  color: #d3d5d8;
}
.healingday-page .modal .etc-input::placeholder {
  color: #d3d5d8;
}
.healingday-page .modal .survey-item .agreement-container {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}
.healingday-page .modal .survey-item .agreement-container .agreement-section {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.healingday-page .modal .survey-item .agreement-container .agreement-section:not(:last-child) {
  margin-bottom: 15px;
}
.healingday-page .modal .survey-item .agreement-container .agreement-section .agreement-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.healingday-page .modal .survey-item .agreement-container .agreement-section .notice-text {
  padding-left: 80px;
}
.healingday-page .modal .survey-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 80px 0px 0px;
}
.healingday-page .modal .survey-btn-wrap .survey-btn {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  width: 273px;
  padding: 20px 0px;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.campaign-page .title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
}
.campaign-page .campaign-content {
  padding-top: 80px;
}
.campaign-page .modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.campaign-page .modal .modal-overlay.active {
  display: flex;
}
.campaign-page .modal .modal-container {
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.campaign-page .modal .modal-header {
  padding: 20px 40px 0px;
}
.campaign-page .modal .modal-header-wrap {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 2px solid #d3d5d8;
}
.campaign-page .modal .btn-modal-close {
  width: 20px;
  height: 20px;
  background: url("../assets/icon/close-black.svg") center/contain no-repeat;
  cursor: pointer;
  display: inline-block;
}
.campaign-page .modal .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.campaign-page .modal .test-modal-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
  margin-top: 40px;
}
.campaign-page .modal .survey-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 40px;
  height: 100%;
}
.campaign-page .modal .survey-content-wrap .survey-content {
  display: flex;
}
.campaign-page .modal .survey-content-wrap .survey-content .logo-text {
  text-align: left;
  width: 120px;
  height: 28px;
  background: url("../assets/logo/main-logo.png") center/contain no-repeat;
  margin-bottom: 20px;
}
.campaign-page .modal .survey-content-wrap .survey-content .intro-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  color: #343434;
  margin-bottom: 40px;
}
.campaign-page .modal .survey-content-wrap .survey-content .intro-text .highlight-blue {
  color: #2563eb;
  font-weight: 500;
}
.campaign-page .modal .content-left {
  flex: 1;
  border-right: 1px solid #d3d5d8;
  padding: 0px 40px 0 0;
}
.campaign-page .modal .content-right {
  flex: 1;
  padding: 0px 0 0 40px;
}
.campaign-page .modal .survey-item {
  margin-bottom: 40px;
}
.campaign-page .modal .survey-item .notice {
  color: #ff0000;
}
.campaign-page .modal .q-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
  margin-bottom: 11px;
  line-height: 1.5;
}
.campaign-page .modal {
  /* 인풋 */
}
.campaign-page .modal .input-line {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  outline: none;
  padding-bottom: 10px;
}
.campaign-page .modal .input-line::-moz-placeholder {
  color: #d3d5d8;
}
.campaign-page .modal .input-line::placeholder {
  color: #d3d5d8;
}
.campaign-page .modal .option-two {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.campaign-page .modal .options-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 11px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.campaign-page .modal .option-five {
  display: flex;
  flex-direction: row;
  gap: 40px;
}
.campaign-page .modal .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.campaign-page .modal .checkbox-label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.campaign-page .modal .checkbox-label input[type=checkbox]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.campaign-page .modal .checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.campaign-page .modal .checkbox-label .checkbox-icon {
  display: none;
}
.campaign-page .modal .checkbox-label .checkbox-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.campaign-page .modal {
  /* 라디오 버튼  */
}
.campaign-page .modal .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.campaign-page .modal .radio-label input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  border-radius: 50%;
  position: relative;
  background: #fff;
  cursor: pointer;
  margin: 0;
}
.campaign-page .modal .radio-label input[type=radio]:checked {
  border-color: #2563eb;
  background: #2563eb;
}
.campaign-page .modal .radio-label input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
.campaign-page .modal .etc-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 230px;
  padding-bottom: 10px;
}
.campaign-page .modal .etc-input::-moz-placeholder {
  color: #d3d5d8;
}
.campaign-page .modal .etc-input::placeholder {
  color: #d3d5d8;
}
.campaign-page .modal .survey-item .agreement-container {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}
.campaign-page .modal .survey-item .agreement-container .agreement-section {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.campaign-page .modal .survey-item .agreement-container .agreement-section:not(:last-child) {
  margin-bottom: 15px;
}
.campaign-page .modal .survey-item .agreement-container .agreement-section .agreement-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.campaign-page .modal .survey-item .agreement-container .agreement-section .notice-text {
  padding-left: 80px;
}
.campaign-page .modal .survey-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 80px 0px 0px;
}
.campaign-page .modal .survey-btn-wrap .survey-btn {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  width: 273px;
  padding: 20px 0px;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

.qa-page .title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
}
.qa-page .desc {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  text-align: center;
  color: #343434;
  margin: 20px 0px 40px;
}
.qa-page .desc span {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
.qa-page .qa-content {
  padding-top: 80px;
}
.qa-page .qa-content .healingday-img-wrap {
  width: 100%;
  background-color: #fff;
}
.qa-page .qa-content .healingday-img {
  margin: 50px auto;
  width: 100%;
  max-width: 300px;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}
.qa-page .qa-content .healingday-img img {
  width: 100%;
}
.qa-page .qa-content .participation {
  background-color: #f5f7f8;
}
.qa-page .qa-content .participation-wrap {
  padding: 80px 0px 100px;
}
.qa-page .qa-content .participation-wrap .program-info-list {
  display: flex;
  gap: 30px;
  margin-bottom: 80px;
}
.qa-page .qa-content .participation-wrap .program-info-list .info-box {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 380px;
  padding: 12px 0px;
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 10px;
  text-align: center;
}
.qa-page .qa-content .participation-wrap .join-cards {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.qa-page .qa-content .participation-wrap .join-card {
  width: 187px;
  height: 164px;
  background: #fff;
  border-radius: 10px;
  padding: 76px 0 62px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.qa-page .qa-content .participation-wrap .join-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 16px;
  background: url("/assets/icon/arrow-blue.svg") center/contain no-repeat;
}
.qa-page .qa-content .participation-wrap .join-card .card-number {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #2563eb;
}
.qa-page .qa-content .participation-wrap .join-card .card-number::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background-color: #2563eb;
  vertical-align: baseline;
  margin-right: 4px;
}
.qa-page .qa-content .participation-wrap .join-card .card-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.44px;
  color: #222;
  text-align: center;
}
.qa-page .qa-content .participation-wrap .join-card .card-desc {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #8e949f;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
.qa-page .qa-content .program-overview {
  padding: 80px 0px 100px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container {
  display: flex;
  justify-content: space-between;
  margin: 0px auto;
  background-color: #fff;
  border-radius: 12px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  width: 280px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell {
  padding: 13px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.head {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 9px 0px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.body {
  line-height: 1.5;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.body.highlight {
  font-weight: 500;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell {
  flex: 1;
  flex-direction: column;
  min-height: 138px;
  border-bottom: none;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-img {
  width: 120px;
  height: 76px;
  margin-bottom: 10px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-img img {
  width: 100%;
  border-radius: 8px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text.green {
  color: #00821b;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text.yellow {
  color: #7f8400;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .comparison-col .cell.footer-cell .benefit-text.red {
  color: #b81515;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .category-header {
  min-width: 280px;
  border: 1px solid #d3d5d8;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .category-header div:nth-child(4) {
  padding: 25px 0px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .category-header .cell.head {
  background-color: #8e949f;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .category-header .cell.body {
  background-color: #fff;
  text-align: center;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-green {
  width: 305px;
  background-color: #f0f7ec;
  border: 1px solid #009e21;
  z-index: 1;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-green .cell {
  border-bottom: 1px solid #009e21;
  color: #00821b;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-green .cell.head {
  background-color: #009e21;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-green .cell.body {
  background-color: #f0f7ec;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-yellow {
  width: 305px;
  background-color: #fff9e5;
  border: 1px solid #ca8a04;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-yellow .cell {
  border-bottom: 1px solid #a4aa00;
  color: #7f8400;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-yellow .cell.head {
  background-color: #a4aa00;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-red {
  width: 280px;
  background-color: #fff2f2;
  border: 1px solid #dc2626;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-red .cell {
  border-bottom: 1px solid #d83636;
  color: #b81515;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.qa-page .qa-content .program-overview-wrap .program-table-container .level-red .cell.head {
  background-color: #dc2626;
}
.qa-page .qa-content .apply-info {
  background-color: #f5f7f8;
}
.qa-page .qa-content .apply-info-wrap {
  padding: 80px 0px 100px;
}
.qa-page .qa-content .apply-info-wrap .result {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-page .qa-content .apply-info-wrap .result-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  padding: 0px 24px;
}
.qa-page .qa-content .apply-info-wrap .result-title .title-desc {
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  padding: 20px 0px 0 0;
}
.qa-page .qa-content .apply-info-wrap .result-title .title-desc.green {
  color: #009e21;
}
.qa-page .qa-content .apply-info-wrap .result-title .title-desc.olive {
  color: #a4aa00;
}
.qa-page .qa-content .apply-info-wrap .result-title .title-desc.red {
  color: #d83636;
}
.qa-page .qa-content .apply-info-wrap .result-title.green {
  color: #00821b;
}
.qa-page .qa-content .apply-info-wrap .result .apply-guide {
  line-height: 1.5;
  color: #222;
  padding-left: 40px;
}
.qa-page .qa-content .apply-info-wrap .result .apply-guide h3 {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
}
.qa-page .qa-content .apply-info-wrap .result .apply-guide ol li {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.qa-page .qa-content .apply-info-wrap .result .apply-guide a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #579aff;
}
.qa-page .qa-content .apply-info-wrap .result .result-box {
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 30px;
  background: #fff;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qa-page .qa-content .apply-info-wrap .result .result-item {
  display: flex;
  border-radius: 10px;
  border: 1px solid #e6e8ea;
  background-color: #fff;
}
.qa-page .qa-content .apply-info-wrap .result .result-item .result-color {
  width: 20px;
  height: 244px;
  border-radius: 6px 0px 0px 6px;
  flex-shrink: 0;
}
.qa-page .qa-content .apply-info-wrap .result .result-item .result-color.green {
  background: #009e21;
}
.qa-page .qa-content .apply-info-wrap .result .result-item .result-color.olive {
  background: #a4aa00;
}
.qa-page .qa-content .apply-info-wrap .result .result-item .result-color.red {
  background: #d83636;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap {
  display: flex;
  align-items: center;
  padding: 19px 0px;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-range {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #222;
  white-space: nowrap;
  margin: 0px 6px 0px 10px;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-level {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  color: #222;
  white-space: nowrap;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-level.green {
  color: #009e21;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-level.olive {
  color: #a4aa00;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-level.red {
  color: #d83636;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-divider {
  width: 1px;
  height: 204px;
  background-color: #e6e8ea;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .result-description {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  color: #343434;
  line-height: 1.6;
  flex: 1;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .green {
  color: #009e21;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .olive {
  color: #a4aa00;
}
.qa-page .qa-content .apply-info-wrap .result .result-item-wrap .red {
  color: #d83636;
}
.qa-page .qa-content .apply-wrap {
  padding: 80px 0px 100px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 40px 0px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card {
  width: 394px;
  border-radius: 10px;
  border: solid 1px #d3d5d8;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .apply-btn {
  width: 100%;
  padding: 15px 0px;
  border-radius: 0 0 10px 10px;
  background-color: #2563eb;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .apply-btn span {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: url("../assets/icon/plus.svg") center/contain no-repeat;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .apply-btn span.disabled {
  filter: invert(67%) sepia(0%) saturate(0%) hue-rotate(186deg) brightness(120%) contrast(85%);
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .apply-btn.disabled {
  background-color: #d3d5d8;
  color: #999;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap {
  padding: 20px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap .card-info {
  padding-bottom: 20px;
  border-bottom: 1px solid #2563eb;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap .card-info h4 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #222;
  margin-bottom: 10px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap .card-info p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #343434;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap dl {
  padding-top: 20px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap dl dt {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.36px;
  color: #222;
  margin-bottom: 10px;
}
.qa-page .qa-content .apply-wrap .apply-card-wrap .card .card-wrap dl dd {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.36px;
  color: #343434;
}
.qa-page .qa-content .apply-wrap .apply-note {
  background-color: #f5f7f8;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.28px;
  padding: 40px;
  border-radius: 10px;
}
.qa-page .qa-content .apply-wrap .apply-note .note-title {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  color: #2563eb;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.qa-page .qa-content .apply-wrap .apply-note .note-title:before {
  content: "";
  width: 16px;
  height: 16px;
  background: url("/assets/icon/blue-note.svg") center/contain no-repeat;
  margin-right: 6px;
}
.qa-page .qa-content .apply-wrap .apply-note p {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
  line-height: 1.5;
}
.qa-page .modal .modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}
.qa-page .modal .modal-overlay.active {
  display: flex;
}
.qa-page .modal .modal-container {
  width: 100%;
  max-width: 1400px;
  height: 90vh;
  background: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.qa-page .modal .modal-header {
  padding: 20px 40px 0px;
}
.qa-page .modal .modal-header-wrap {
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-end;
  border-bottom: 2px solid #d3d5d8;
}
.qa-page .modal .btn-modal-close {
  width: 20px;
  height: 20px;
  background: url("../assets/icon/close-black.svg") center/contain no-repeat;
  cursor: pointer;
  display: inline-block;
}
.qa-page .modal .modal-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qa-page .modal .test-modal-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  text-align: center;
  margin-top: 40px;
}
.qa-page .modal .survey-content-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  padding: 40px 40px;
  height: 100%;
}
.qa-page .modal .survey-content-wrap .survey-content {
  display: flex;
}
.qa-page .modal .survey-content-wrap .survey-content .logo-text {
  text-align: left;
  width: 120px;
  height: 28px;
  background: url("../assets/logo/main-logo.png") center/contain no-repeat;
  margin-bottom: 20px;
}
.qa-page .modal .survey-content-wrap .survey-content .intro-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  line-height: 1.5;
  color: #343434;
  margin-bottom: 40px;
}
.qa-page .modal .survey-content-wrap .survey-content .intro-text .highlight-blue {
  color: #2563eb;
  font-weight: 500;
}
.qa-page .modal .content-left {
  flex: 1;
  border-right: 1px solid #d3d5d8;
  padding: 0px 40px 0 0;
}
.qa-page .modal .content-right {
  flex: 1;
  padding: 0px 0 0 40px;
}
.qa-page .modal .survey-item {
  margin-bottom: 40px;
}
.qa-page .modal .survey-item .notice {
  color: #ff0000;
}
.qa-page .modal .q-title {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.32px;
  color: #222;
  margin-bottom: 11px;
  line-height: 1.5;
}
.qa-page .modal {
  /* 인풋 */
}
.qa-page .modal .input-line {
  width: 100%;
  border: none;
  border-bottom: 1px solid #d3d5d8;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  outline: none;
  padding-bottom: 10px;
}
.qa-page .modal .input-line::-moz-placeholder {
  color: #d3d5d8;
}
.qa-page .modal .input-line::placeholder {
  color: #d3d5d8;
}
.qa-page .modal .option-two {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.qa-page .modal .options-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 11px;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.qa-page .modal .option-five {
  display: flex;
  flex-direction: row;
  gap: 40px;
}
.qa-page .modal .checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}
.qa-page .modal .checkbox-label input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid #707070;
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  margin-top: 2px;
}
.qa-page .modal .checkbox-label input[type=checkbox]:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}
.qa-page .modal .checkbox-label input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}
.qa-page .modal .checkbox-label .checkbox-icon {
  display: none;
}
.qa-page .modal .checkbox-label .checkbox-text {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.qa-page .modal {
  /* 라디오 버튼  */
}
.qa-page .modal .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.qa-page .modal .radio-label input[type=radio] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #666666;
  border-radius: 50%;
  position: relative;
  background: #fff;
  cursor: pointer;
  margin: 0;
}
.qa-page .modal .radio-label input[type=radio]:checked {
  border-color: #2563eb;
  background: #2563eb;
}
.qa-page .modal .radio-label input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #fff;
  border-radius: 50%;
}
.qa-page .modal .etc-input {
  border-bottom: 1px solid #d3d5d8;
  outline: none;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  width: 230px;
  padding-bottom: 10px;
}
.qa-page .modal .etc-input::-moz-placeholder {
  color: #d3d5d8;
}
.qa-page .modal .etc-input::placeholder {
  color: #d3d5d8;
}
.qa-page .modal .survey-item .agreement-container {
  background: #f8f8f8;
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 16px;
  font-size: 15px;
  color: #222;
  line-height: 1.6;
}
.qa-page .modal .survey-item .agreement-container .agreement-section {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #343434;
}
.qa-page .modal .survey-item .agreement-container .agreement-section:not(:last-child) {
  margin-bottom: 15px;
}
.qa-page .modal .survey-item .agreement-container .agreement-section .agreement-title {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
}
.qa-page .modal .survey-item .agreement-container .agreement-section .notice-text {
  padding-left: 80px;
}
.qa-page .modal .survey-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 80px 0px 0px;
}
.qa-page .modal .survey-btn-wrap .survey-btn {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.36px;
  width: 273px;
  padding: 20px 0px;
  background: #2563eb;
  color: #fff;
  border-radius: 10px;
  cursor: pointer;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Cantarell, "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.banner {
  position: relative;
}
.banner .banner-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1920px;
  aspect-ratio: 1920/300;
  max-height: 300px;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
@media screen and (max-width: 768px) {
  .banner .banner-wrap {
    max-height: none;
    aspect-ratio: 24/10;
  }
}
@media screen and (max-width: 430px) {
  .banner .banner-wrap {
    max-height: none;
    aspect-ratio: 390/246;
  }
}
.banner .banner-wrap.refresh {
  background-image: url("../assets/images/banner-refresh.jpg");
}
.banner .banner-wrap.healingday {
  background-image: url("../assets/images/banner-healingday.jpg");
}
.banner .banner-wrap.healingday {
  background-image: url("../assets/images/banner-healingday.jpg");
}
.banner .banner-wrap.campaign {
  background-image: url("../assets/images/banner-cam.jpg");
}
.banner .banner-wrap.qa {
  background-image: url("../assets/images/banner-qa.jpg");
}
.banner .banner-wrap::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 108, 146, 0) 65%);
}
.banner-text {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.64px;
  font-size: 40px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  text-align: center;
}
@media screen and (max-width: 768px) {
  .banner-text {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.48px;
  }
}
.banner-text > span {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.32px;
  color: #efefef;
  line-height: 1.5;
}
@media screen and (max-width: 768px) {
  .banner-text > span {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.28px;
  }
}
/*# sourceMappingURL=index.css.map */