@charset "utf-8";
@import url("https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css");

html {
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}

body,
button,
p,
span {
  position: relative;
  font-family: "Spoqa Han Sans Neo", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕", dotum, "돋움", helvetica, "Apple SD Gothic Neo", sans-serif;
  letter-spacing: -0.05em;
  font-weight: 400;
}

button span {
  color: #ffffff;
}

body {
  direction: ltr;
  -webkit-text-size-adjust: none;
  word-break: keep-all;
  word-wrap: break-word;
  background-color: #e8e8e8;
}

body,
ul,
li,
button {
  margin: 0;
  padding: 0;
}

main,
section,
div,
ul,
p {
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

img {
  border: 0;
}

p {
  margin: 0;
}

button {
  position: relative;
  border: 0 none;
  background-color: transparent;
  cursor: pointer;
}
button {
  color: #222;
}

button span {
  z-index: 10;
}

.hover {
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  top: 0;
  left: 0;
}

button:hover {
  opacity: 0.85;
}

[data-aos="fade-down"] {
  transform: translateY(-15px);
  opacity: 0;
  transition-property: transform, opacity;
}

[data-aos="fade-down"].aos-animate {
  transform: translateY(0);
  opacity: 1;
}

main {
  background: linear-gradient(135deg, #f3f3f3 0%, #e5e5e5 100%);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.main-container {
  width: 360px;
  margin: 0 auto;
  height: 622px;
  position: relative;
}

.main-title {
  position: absolute;
  left: 77px;
  top: 131px;
  width: 207px;
  height: 83px;
  z-index: 10;
}

.main-title img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.subtitle {
  position: absolute;
  left: 81px;
  top: 222px;
  width: 199px;
  height: 19px;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.46;
  letter-spacing: -3.85%;
  color: #000000;
  z-index: 10;
}

.scene {
  position: absolute;
  left: 30%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 138.5px;
  height: 220px;
  perspective: 600px;
  perspective-origin: 50% 50%;
  z-index: 5;
}

.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: flip 1.2s forwards;
  animation-timing-function: cubic-bezier(0.8, 0, 0.2, 1);
}

@keyframes flip {
  0% {
    transform: rotateY(0deg) scale(1.2);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 8px 0px 12px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  backface-visibility: hidden;
  overflow: hidden;
}

.card-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.card-members-front {
  transform: rotateZ(5deg) rotateY(0deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-members-back {
  transform: rotateZ(-5deg) rotateY(180deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.card-lasvegas {
  transform: rotateZ(0deg) rotateY(0deg);
  opacity: 0;
  transition: opacity 0.1s ease-in, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: -10;
}

.card-edu {
  transform: rotateZ(0deg) rotateY(0deg);
  opacity: 0;
  transition: opacity 0.1s ease-in, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: -20;
}

.spread-cards .card-members-front {
  /* transform: rotateZ(-10deg) translateX(-25px) translateY(0); */
  transition-delay: 0.05s;
}
.spread-cards .card-members-front {
  transform: rotateZ(-10deg) translateX(-25px) translateY(0);
}
.spread-cards.card-align-single .card-members-front {
  transform: rotateZ(0deg) translateX(4px) translateY(0);
}

.spread-cards .card-members-back {
  transform: rotateZ(-20deg) translateX(-50px) translateY(5px) rotateY(180deg);
  transition-delay: 0.1s;
}

.spread-cards .card-lasvegas {
  opacity: 1;
  transform: rotateZ(5deg) translateX(25px) translateY(5px);
  transition-delay: 0.15s;
}

.spread-cards .card-edu {
  opacity: 1;
  transform: rotateZ(15deg) translateX(50px) translateY(5px);
  transition-delay: 0.2s;
}

.fixed-button-wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 15px;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  z-index: 15;
}

.logo {
  width: 34.46px;
  height: 8px;
  object-fit: contain;
}

.fixed-button {
  width: 100%;
  height: 56px;
  background-color: #00dedc;
  border: none;
  border-radius: 0;
  padding: 17px 16px 17px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.fixed-button:hover {
  background-color: #00c4c2;
}

.fixed-button:active {
  transform: scale(0.98);
}

.button-text {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: #111111;
  flex: 1;
  text-align: left;
}

.icon-arrow {
  width: 20px;
  height: 20px;
  background-color: #222222;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.33px;
}

.icon-arrow img {
  width: 10px;
  height: 10px;
  object-fit: contain;
}

.icon-down {
  position: absolute;
  left: 165px;
  top: 589px;
  width: 30px;
  height: 14px;
  z-index: 10;
  animation: bounce 2s infinite;
}

.icon-down img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.deco-particle {
  position: absolute;
  left: 24px;
  top: 275px;
  width: 328px;
  height: 315px;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.3);
  animation: particleBurst 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s forwards;
}

.deco-particle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.deco-left {
  position: absolute;
  left: 50%;
  transform: translateX(-198px);
  top: 357px;
  width: 84px;
  height: 84px;
  z-index: 1;
  pointer-events: none;
}

.deco-left img {
  width: 84px;
  height: 84px;
  object-fit: contain;
}

.deco-right-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(90px);
  top: 498px;
  width: 130px;
  height: 124px;
  z-index: 1;
  pointer-events: none;
}

.deco-right-bottom img {
  width: 130px;
  height: 124px;
  object-fit: contain;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes cardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes particleBurst {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.main-title img {
  animation: fadeInUp 0.8s ease-out;
}

.subtitle {
  animation: fadeInUp 0.8s ease-out 0.2s both;
  color: #535353;
}

.scene {
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.participation-section {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  padding: 34px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.sec-title-icon {
  width: 31px;
  height: 36px;
  background-color: #007a83;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.sec-title-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.section-title h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -2%;
  color: #007a83;
  text-align: center;
  margin: 0;
}

.content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.content-label img {
  height: 13px;
  object-fit: contain;
}

.content-main {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.533;
  letter-spacing: -5%;
  color: #000000;
  margin: 0;
}

.content-main-sm {
  font-size: 13px;
  font-weight: 500;
}

.content-notes {
  width: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0.6;
}

.note {
  font-size: 11px;
  line-height: 1.636;
  letter-spacing: -5%;
  color: #000000;
  margin: 0;
}

.event-guide-section {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background-color: #e8e8e8;
  padding: 34px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.event-guide-section .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.event-guide-section .sec-title-icon {
  width: 31px;
  height: 36px;
  background-color: #007a83;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.event-guide-section .sec-title-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.event-guide-section .section-title h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -2%;
  color: #007a83;
  text-align: center;
  margin: 0;
}

.event-guide-section .content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-header {
  position: relative;
  display: flex;
  align-items: center;
}

.step-label {
  height: 13px;
  object-fit: contain;
}

.accent-line {
  position: absolute;
  left: 44px;
  top: 28px;
  width: 53px;
  height: 8px;
  z-index: 0;
  background-color: #00dedc;
}

.step-title {
  position: relative;
  z-index: 1;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.467;
  letter-spacing: -3%;
  color: #000000;
  margin: 0;
}

.step-info {
  display: flex;
  align-items: center;
  gap: 6px;
}

.usage-period {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
  padding: 3px;
  font-size: 12px;
  line-height: 1.333;
  letter-spacing: -3%;
  color: #000000;
  opacity: 0.88;
}

.step-date {
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #000000;
  margin: 0;
}

.button-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apply-button {
  width: 100%;
  background-color: #00dedc;
  border: none;
  border-radius: 0;
  padding: 17px 30px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  color: #111111;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.apply-button:hover {
  background-color: #00c4c2;
}

.apply-button:active {
  transform: scale(0.98);
}

.button-wrap .note {
  opacity: 0.6;
}

.target-cards-section {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background-color: #e8e8e8;
  padding: 34px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.target-cards-section .section-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.target-cards-section .sec-title-icon {
  width: 31px;
  height: 36px;
  background-color: #007a83;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
}

.target-cards-section .sec-title-icon img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.target-cards-section .section-title h2 {
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -2%;
  color: #007a83;
  text-align: center;
  margin: 0;
}

.cards-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px;
  width: 360px;
}

.card-wrap {
  background: #f8f7f7;
  padding: 24px 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 160px;
}

.card-thumb-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.card-thumb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  height: 140px;
  justify-content: space-between;
}

.card-name {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.333;
  letter-spacing: -2%;
  color: #333333;
  margin: 0;
  text-align: center;
}

.card-image-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.card-image {
  border-radius: 4px;
}

.card-wrap.horizontal .card-image {
  width: 107.96px;
  height: 68px;
  object-fit: cover;
  box-shadow: inset 0.32px 0.32px 0.32px 0px rgba(255, 255, 255, 0.87), inset -0.32px -0.32px 0.32px 0px rgba(62, 52, 52, 0.5);
}

.card-wrap.vertical .card-image {
  width: 68px;
  height: 107.96px;
  object-fit: cover;
}

.card-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.cards-content > .card-wrap:nth-child(1) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(2) .card-txt-wrap {
  height: 100px;
}
.cards-content > .card-wrap:nth-child(5) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(6) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(9) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(10) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(11) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(12) .card-txt-wrap {
  height: 68px;
}
.cards-content > .card-wrap:nth-child(7) .card-txt-wrap,
.cards-content > .card-wrap:nth-child(8) .card-txt-wrap {
  height: 30px;
}

.card-benefit {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}

.benefit-dot {
  width: 2px;
  height: 2px;
  background-color: #333333;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.benefit-text {
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: -2%;
  color: #333333;
  margin: 0;
  flex: 1;
}

.card-special {
  background-color: #ffffff;
  padding: 8px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.special-tag {
  background-color: #b0857b;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.273;
  letter-spacing: -2%;
  padding: 2px 4px 1px;
  border-radius: 2px;
  align-self: flex-start;
}

.special-text {
  font-size: 10px;
  line-height: 1.25;
  letter-spacing: -3%;
  color: #444444;
  margin: 0;
}

.divider {
  width: 128px;
  height: 1px;
  background-color: #d0cdc8;
}

.card-info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.fee-info {
  display: flex;
  gap: 5px;
  width: 100%;
}

.fee-label {
  font-size: 11px;
  line-height: 1.636;
  letter-spacing: -5%;
  color: #333333;
}

.fee-amount {
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: -3%;
  color: #333333;
  text-align: right;
  flex: 1;
}

.detail-button {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #d0cdc8;
  font-weight: 700;
  font-size: 12px;
  line-height: 36px;
  height: 36px;
  letter-spacing: -2%;
  color: #111111;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.detail-button:hover {
  background-color: #f5f5f5;
}

.detail-button:active {
  transform: scale(0.98);
}

.card-notes {
  display: flex;
  flex-direction: column;
  width: 100%;
  opacity: 0.64;
}

.note-item {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  padding-top: 5px;
}

.note-dot {
  width: 2px;
  height: 2px;
  background-color: #282828;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.note-text {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: -5%;
  color: #0d0c0c;
  margin: 0;
  flex: 1;
  opacity: 0.88;
}

.target-cards-section .section-note {
  font-size: 11px;
  line-height: 1.636;
  letter-spacing: -5%;
  color: #444444;
  margin: 0;
  width: 100%;
}

.footer-wrap {
  width: 100%;
  background-color: #575757;
  padding: 26px 24px 36px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.footer-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  width: 100%;
}

.alert-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-icon img {
  width: 16.38px;
  height: 16.38px;
  object-fit: contain;
}

.footer-title h3 {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.286;
  letter-spacing: -3.57%;
  color: #ffffff;
  margin: 0;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-left: 24px;
}

.footer-main-text {
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

.footer-legal-text {
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

.footer-interest-section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer-interest-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  margin: 0 0 4px 0;
  width: 100%;
}

.footer-interest-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.footer-list-item {
  display: flex;
  gap: 6px;
  width: 100%;
  align-items: flex-start;
}

.footer-list-bullet {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  flex-shrink: 0;
}

.footer-list-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  flex: 1;
}

.footer-warning-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  margin: 4px 0 0 0;
  width: 100%;
}

.footer-regulatory {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-left: -14px;
}

.footer-reg-item {
  display: flex;
  gap: 4px;
  width: 100%;
  align-items: flex-start;
}

.footer-reg-bullet {
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  flex-shrink: 0;
}

.footer-reg-text {
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  flex: 1;
}

.footer-address {
  font-size: 13px;
  line-height: 1.462;
  letter-spacing: -3.85%;
  color: #ffffff;
  margin: 0;
  width: 100%;
  margin-left: -14px;
}

.mintitle {
  font-size: 10px;
  display: block;
  font-weight: 500;
}
.txt_accent {
  position: relative;
}
.accent-txt {
  z-index: 5;
  font-weight: bold;
}
.txt_accent > .accent-line {
  z-index: 1;
  top: initial;
  width: 114px;
  bottom: 0;
  left: 0;
  right: 0;
}
.txt_accent.short > .accent-line {
  width: 134px;
}

.caption-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}