/* ==========================================
   #hero
========================================== */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 860px;
  background-color: #001754;
  overflow: hidden;
}
#hero .logo-10th {
  position: absolute;
  max-width: 75px;

  width: 10%;
  top: 90;
  right: 20px;
  aspect-ratio: 3/4;
}

#hero .hero-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  opacity: 0.3;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

#hero .hero-bg-item {
  position: relative;
  overflow: hidden;
}

#hero .hero-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  transform: translate(-50%, -50%) scale(1.16);
  transform-origin: center center;
}
#hero .hero-bg video:nth-child(1) {
  height: 120%;
}
#hero .hero-bg video:nth-child(2) {
  height: 120%;
}
#hero .hero-bg video:nth-child(3) {
  width: 120%;
}
#hero .hero-bg video:nth-child(4) {
  width: 120%;
}

#hero .hero-inner {
  gap: 70px;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 70px;
}

#hero .hero-content {
  max-width: 910px;
  width: 85%;
  position: relative;
  display: flex;
  padding: 90px 110px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

#hero .hero-circle-bg {
  object-fit: contain;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

#hero .hero-content > *:not(.hero-circle-bg) {
  position: relative;
  z-index: 1;
  white-space: nowrap;
}

#hero .hero-sub-txt.mo {
  display: none;
}
#hero .hero-sub-txt {
  color: #fff;
  font-size: 38px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  line-height: 1.3;
}

#hero .hero-sub-txt strong {
  font-weight: 800;
}

#hero .hero-profit-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

#hero .profit-label {
  color: #fff;
  font-family: Pretendard;
  font-size: 64px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 83.2px */
  letter-spacing: -1.6px;
}

#hero .profit-num {
  color: #f92c2c;
  font-size: 140px;
  font-weight: 500;

  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #000;
  font-family: 'Gmarket Sans';
  font-style: normal;
  line-height: 130%; /* 182px */
  letter-spacing: -3.5px;
}

#hero .hero-brand-mark {
  max-width: 230px;
  width: 30%;
  margin-top: 4px;
}
#hero .hero-brand-mark svg {
  width: 100%;
  height: auto;
}

#hero .hero-scroll-guide {
  /* position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%); */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

#hero .hero-scroll-guide p {
  color: #fff;
  font-size: 24px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

#hero .scroll-arrow {
  display: block;
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}

/* ==========================================
   #stats
========================================== */
#stats {
  position: relative;
  padding: 120px 0;
  background: radial-gradient(
    ellipse 97.03% 78.71% at 50% 2.97%,
    #285ee4 12%,
    #020049 100%
  );
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;

  min-height: 100vh;
  justify-content: center;
}

/* 장식 이미지 */
#stats .stats-deco {
  position: absolute;
  pointer-events: none;
}

#stats .stats-deco--left {
  max-width: 205px;
  width: 20%;
  left: 55px;
  top: 107px;
}

#stats .stats-deco--right {
  width: 20%;
  max-width: 317px;
  right: 20px;
  top: 100px;
}

#stats .stats-deco--icon {
  width: 15%;
  max-width: 85px;
  left: 274px;
  top: 30px;
  opacity: 0.5;
}

/* 떠다니는 애니메이션 */
@keyframes stats-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

#stats .stats-deco--left {
  animation: stats-float 5s ease-in-out infinite;
}

#stats .stats-deco--right {
  animation: stats-float 6.5s ease-in-out infinite;
  animation-delay: -2s;
}

#stats .stats-deco--icon {
  animation: stats-float 4s ease-in-out infinite;
  animation-delay: -1s;
}

/* 제목 */
#stats .tit-wrap {
  position: relative;
  z-index: 1;
}

#stats .stats-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* 브랜드 마크 (흰색+빨강) */
#stats .stats-brand-mark {
  position: relative;
  display: inline-block;
  max-width: 196px;
  width: 30%;
  flex-shrink: 0;
}

#stats .stats-brand-mark svg {
  width: 100%;
  height: auto;
}

#stats .st-tit {
  color: #fff;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

#stats .stats-keyword {
  display: inline;
  padding: 0 5px;
  background: #f92c2c;
  color: #fff;
  font-style: normal;
}

/* 카드 리스트 */
#stats .stats-list {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  max-width: 1300px;
  box-sizing: border-box;
  padding: 0 20px;
}

#stats .stats-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  /* 비활성: solid #555 border (두께 통일 2px로 레이아웃 흔들림 방지) */
  
}

#stats .stats-item-box {
  min-width: 0;
  min-height: 300px;
  padding: 40px 20px;
  box-sizing: border-box;
  border-radius: 24px;
  backdrop-filter: blur(8px);
  width: 100%;
  height: 100%;
  border: 2px solid rgba(153, 153, 153, 0.5);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.65) 100%
  );
  transition: background 0.5s ease, box-shadow 0.5s ease, border-color 0.5s ease,
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* 강조 카드 — border-box 그라디언트 트릭 */
#stats .stats-item--active .stats-item-box {
  border: 2px solid transparent;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8))
      padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, #f92c2c 100%)
      border-box;
  box-shadow: 0 -30px 40px 0 rgba(255, 0, 0, 0.5) inset,
    0 8px 24px 0 rgba(0, 0, 0, 0.25);
}

/* 숫자 */
#stats .stats-num {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 68px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  line-height: 1;
  color: #999;
  transition: color 0.5s ease;
}

#stats .stats-item--active .stats-num {
  color: #f92c2c;
}

/* 54.51 - 소수점 크기 차이 */
#stats .stats-num--decimal b {
  font-size: 68px;
  font-weight: 800;
  font-style: normal;
}

#stats .stats-num--decimal span {
  font-size: 48px;
  font-weight: 800;
}

/* 카드 텍스트 */
#stats .stats-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}

#stats .stats-label {
  color: #999;
  font-size: 26px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  transition: color 0.5s ease;
}

#stats .stats-item--active .stats-label {
  color: #fff;
}

#stats .stats-note {
  color: #999;
  font-size: 14px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

#stats .stats-item--active .stats-note {
  color: rgb(242, 57, 57);
}

/* 마지막 강조 효과 */
#stats .stats-item--last-active {
  transform: scale(1.05);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 0 4px rgba(249, 44, 44, 0.4),
    0 12px 40px rgba(249, 44, 44, 0.25);
}

/* ==========================================
   #concerns
========================================== */
#concerns {
  top: -1px;
  position: relative;
  padding: 120px 0 80px;
  background: linear-gradient(180deg, #020049 0%, #285ee4 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* 장식 이미지 */
#concerns .concerns-deco {
  position: absolute;
  pointer-events: none;
}

#concerns .concerns-deco--tr {
  max-width: 187px;
  width: 15%;
  right: 40px;
  top: 50px;
  opacity: 0.5;
  animation: stats-float 5.5s ease-in-out infinite;
  animation-delay: -1.5s;
}
#concerns .concerns-deco--tl {
  max-width: 482px;
  left: 40px;
  width: 40%;
  top: 10px;
  opacity: 0.5;
  animation: stats-float 7s ease-in-out infinite;
  animation-delay: -3s;
}
#concerns .concerns-deco--ml {
  max-width: 182px;
  width: 15%;
  left: 20px;
  top: 424px;
  opacity: 0.7;
  animation: stats-float 4.5s ease-in-out infinite;
  animation-delay: -0.5s;
}
#concerns .concerns-deco--mr {
  max-width: 207px;
  width: 40%;
  right: 20px;
  top: 416px;
  opacity: 0.7;
  animation: stats-float 6s ease-in-out infinite;
  animation-delay: -2s;
}

/* 제목 */
#concerns .tit-wrap {
  text-align: center;
  position: relative;
  z-index: 1;
}

#concerns .st-tit {
  color: #fff;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

#concerns .st-tit strong {
  font-weight: 700;
}

#concerns .concerns-keyword {
  padding: 0 5px;
  background: #f92c2c;
  color: #fff;
  font-style: normal;
  font-weight: 700;
}

/* 버블 영역 */
#concerns .concerns-bubbles {
  position: relative;
  max-width: 773px;
  width: 80%;
  /* height: 390px; */
  height: auto;
}

#concerns .concerns-bubble {
  /* position: relative; */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
#concerns .bubble-wrap {
  width: 100%;
  display: flex;
}
#concerns .bubble-wrap.bubble-wrap--top {
  justify-content: center;
}
#concerns .bubble-wrap.bubble-wrap--mid {
  justify-content: start;
}
#concerns .bubble-wrap.bubble-wrap--btm {
  justify-content: end;
}

#concerns .concerns-bubble--top {
  /* margin-left: 193px; */
  /* top: 0; */
  max-width: 360px;
  width: 45%;
}
#concerns .concerns-bubble--mid {
  margin-left: 0;
  /* margin-top: 170px; */
  max-width: 425px;
  width: 55%;
  margin-top: 10px;
}
#concerns .concerns-bubble--btm {
  margin-right: 0;
  /* bottom: 0; */
  max-width: 380px;
  width: 50%;
  align-items: flex-end;
}

/* 버블 꼬리 탭 */
#concerns .bubble-tab {
  width: 37px;
  height: 36px;
  /* background: #fff; */
  margin-left: 34px;
  flex-shrink: 0;
}

#concerns .concerns-bubble--mid .bubble-tab {
  margin-left: 10px;
}

#concerns .bubble-tab--end {
  margin-left: 0;
  margin-right: 30px;
}

/* 버블 카드 */
#concerns .bubble-card {
  padding: 20px 40px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 24px;
  outline: 2px solid #fff;
  outline-offset: -2px;
  box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.12);
  color: #2048b0;
  font-size: 32px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

/* 답변 박스 */
#concerns .concerns-answer {
  padding: 30px 40px;
  background: #020049;
  box-shadow: 0 0 24px #2048b0 inset;
  border-radius: 16px;
  outline: 3px solid #fff;
  outline-offset: -3px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}

#concerns .concerns-answer-txt {
  color: #fff;
  font-size: 64px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* OXPC 로고 블록 (흰색 + 빨강) */
#concerns .concerns-logo {
  position: relative;
  display: inline-block;
  max-width: 215px;
  width: 35%;
  flex-shrink: 0;
}

/* ==========================================
   #system
========================================== */
#system {
  position: relative;
  padding: 0 0 120px;
  background: #285ee4;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  top: -2px;
}

/* 장식 띠 */
#system .system-deco-band {
  position: absolute;
  width: 80%;
  max-width: 1400px;
  height: 438px;
  left: 50%;
  top: 50%;
  pointer-events: none;
  z-index: 0;
}

/* 제목 */
#system .tit-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

#system .system-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#system .system-brand-mark {
  max-width: 104px;
  /* height: 65px; */
  width: 90%;
  flex-shrink: 0;
}

#system .st-tit {
  color: #fff;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  line-height: 1.2;
}

#system .st-tit strong {
  font-weight: 700;
}

/* 카드 영역 */
#system .system-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 34px;
  width: 90%;
  max-width: 1270px;
  max-width: 1400px;
  box-sizing: border-box;
}

/* 카드 공통 */
#system .system-card {
  flex: 1;
  max-width: 420px;
  width: 33%;
  padding: 40px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, #fff 100%);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.16);
  border-radius: 24px;
  outline: 3px solid #fff;
  outline-offset: -3px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#system .system-card--m {
  margin-top: 155px;
}

/* 카드 헤더 */
#system .system-card-head {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

#system .system-card-tit {
  font-size: 44px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  line-height: 1.2;
  color: #000;
}

#system .system-card-tit em {
  color: #2048b0;
  font-weight: 700;
  font-style: normal;
}

/* 카드 리스트 */
#system .system-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#system .system-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 24px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  color: #333;
  line-height: 1.2;
}

#system .system-card-list li::before {
  content: '';
  flex-shrink: 0;
  width: 25px;
  height: 25px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M12.1337 17.1337C11.89 17.3775 11.57 17.5 11.25 17.5C10.93 17.5 10.61 17.3775 10.3663 17.1337L5.36625 12.1337C4.8775 11.645 4.8775 10.855 5.36625 10.3663C5.855 9.8775 6.645 9.8775 7.13375 10.3663L11.25 14.4825L21.6875 4.045C19.4038 1.56375 16.1388 0 12.5 0C5.59625 0 0 5.59625 0 12.5C0 19.4037 5.59625 25 12.5 25C19.4037 25 25 19.4037 25 12.5C25 10.1438 24.3363 7.9475 23.2025 6.065L12.1337 17.1337Z' fill='%232048B0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 2px;
}

#system .system-card-list li > span {
  flex: 1;
  min-width: 0;
  word-break: keep-all;
}

#system .system-card-list li strong {
  font-weight: 700;
}

/* ==========================================
   #guarantee
========================================== */
#guarantee {
  background: #285ee4;
  padding: 40px;
  box-sizing: border-box;
  position: relative;
  margin-top: -3px;
}

#guarantee .st-tit {
  position: relative;
}

#guarantee .st-tit span {
  position: relative;
  z-index: 3;
}

#guarantee .st-tit img {
  width: 47%;
  position: absolute;
  right: -4%;
}

#guarantee .guarantee-inner {
  padding: 100px 60px;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%),
    url('../img/guarantee-bg.png') center / cover no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* 제목 */
#guarantee .tit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

#guarantee .st-tit {
  color: #285ee4;
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

#guarantee .guarantee-sub-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

#guarantee .guarantee-sub-row > p:last-child {
  flex-basis: 100%;
}

@media (min-width: 768px) {
  #guarantee .guarantee-sub-row {
    flex-wrap: nowrap;
    text-align: left;
  }
  #guarantee .guarantee-sub-row > p:last-child {
    flex-basis: auto;
  }
}

#guarantee .guarantee-brand-block {
  display: block;
  width: 65px;
  height: 40px;
  background: #285ee4;
  flex-shrink: 0;
}

#guarantee .st-sub-tit {
  font-size: 40px !important;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  color: #111;
  line-height: 1.2;
}

#guarantee .st-sub-tit strong {
  font-weight: 700;
}

/* 장식 점 */
#guarantee .guarantee-keyword-wrap {
  position: relative;
  display: inline-block;
}

#guarantee .guarantee-dots {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 28px;
  white-space: nowrap;
}

#guarantee .guarantee-dots span {
  width: 7px;
  height: 7px;
  background: #f92c2c;
  border-radius: 50%;
  flex-shrink: 0;
  animation: guarantee-dot-wave 1.2s ease-in-out infinite;
}

@keyframes guarantee-dot-wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-7px); }
}

#guarantee .guarantee-dots span:nth-child(1) { animation-delay: 0s; }
#guarantee .guarantee-dots span:nth-child(2) { animation-delay: 0.15s; }
#guarantee .guarantee-dots span:nth-child(3) { animation-delay: 0.3s; }
#guarantee .guarantee-dots span:nth-child(4) { animation-delay: 0.45s; }

/* 카드 */
#guarantee .guarantee-card-outter {
  border-radius: 28px;
  border: 2px solid #f92c2c;
  background: #fff;
  padding: 10px;

  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 950px;
}

#guarantee .guarantee-card {
  width: 100%;
  padding: 40px 50px;
  display: flex;
  align-items: start;
  gap: 24px;
  border-radius: 24px;
  border: 10px solid transparent;
  background: linear-gradient(#fff5f5, #fff5f5) padding-box,
    linear-gradient(to bottom, #ff8888, #f92c2c) border-box;
  box-shadow: 0 16px 24px 0 rgba(154, 0, 0, 0.2);
}

/* 약정서 문서 */
#guarantee .guarantee-doc {
  flex-shrink: 0;
  max-width: 200px;
  display: flex;
  align-items: start;
}

#guarantee .guarantee-doc img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* 내용 */
#guarantee .guarantee-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: space-between;
}

#guarantee .guarantee-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#guarantee .guarantee-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#guarantee .guarantee-txt {
  font-size: 52px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  color: #111;
  line-height: 1.3;
  word-break: keep-all;
}

#guarantee .guarantee-highlight-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

@keyframes badge-color-blink {
  0%,
  49% {
    color: #fff;
  }
  50%,
  100% {
    color: #f92c2c;
  }
}

#guarantee .guarantee-badge {
  display: inline-flex;
  align-items: center;
  padding: 0 5px;
  background: #111;
  word-break: keep-all;
  color: #f92c2c;
  font-family: Pretendard;
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 67.6px */
  letter-spacing: -1.3px;
  animation: badge-color-blink 0.8s step-end infinite;
}

#guarantee .guarantee-desc {
  font-size: 32px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  color: #111;
  line-height: 1.3;
  word-break: keep-all;
}

#guarantee .guarantee-note {
  font-size: 16px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  color: #767676;
  line-height: 1.3;
}

/* ==========================================
   #complex
========================================== */

#complex {
  --complex-circle-size: min(27vw, 400px);
  --complex-overlap: 40px;
  padding: 120px 0;
  background: #285ee4;
  overflow: hidden;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 60px;
}

#complex .tit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

#complex .st-tit {
  color: white;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

#complex .complex-tit-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#complex .complex-brand-mark {
  display: inline-block;
  /* width: 98px; */
  width: auto;
  height: 60px;
  /* background: white; */
}

#complex .complex-stage {
  position: relative;
  width: 100%;
  height: var(--complex-circle-size);
  overflow: visible;
  padding: 20px 0;
  margin: -20px 0;
}

/* Swiper 컨테이너 */
#complex .complex-swiper {
  position: absolute;
  inset: 0;
  overflow: visible;
  height: 100%;
  z-index: 1;
}

/* Swiper 래퍼 (= complex-card-list) */
#complex .complex-card-list {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 공통 크기 – 원 */
#complex .complex-card,
#complex .complex-center {
  width: var(--complex-circle-size);
  height: var(--complex-circle-size);
  border-radius: 50%;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* 흰색 원 – 카드들과 함께 회전 (GSAP이 위치 제어) */
#complex .complex-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, white 100%);
  box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.2);
  border: 10px solid white;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  z-index: 10;
  pointer-events: none; /* 스와이퍼 드래그 이벤트 통과 */
  will-change: auto; /* 슬라이드 transform에 영향 받지 않도록 */
  isolation: isolate;
}

/* complex-card--center 클래스 = 흰 원 스타일 (JS가 센터 카드에 동적으로 추가) */
#complex .complex-card--center {
  background-image: none !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7) 0%,
    #fff 100%
  ) !important;
  border: 10px solid #fff;
  box-shadow: 0 16px 40px 0 rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  z-index: 5;
}
#complex .complex-card--center::before {
  display: none !important;
}

/* 흰 원 위의 텍스트: complex-center-sub/tit와 동일 */
#complex .complex-card--center .complex-center-sub,
#complex .complex-card--center .complex-card-sub {
  color: #111;
  -webkit-text-fill-color: #111;
}
#complex .complex-card--center .complex-center-tit,
#complex .complex-card--center .complex-card-tit {
  background: linear-gradient(90deg, #2048b0 0%, #2d69ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 슬라이드 카드 원 */
#complex .complex-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--complex-circle-size) !important;
  height: var(--complex-circle-size) !important;
  transform: translate(-50%, -50%);
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 15px;
  z-index: 1;
  opacity: 0.75;
  cursor: pointer;
  transition: opacity 0.45s ease, box-shadow 0.45s ease;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

/* 활성 카드 위로 (호버 / is-center) */
#complex .complex-card:hover,
#complex .complex-card.is-center {
  z-index: 5;
  opacity: 1 !important;
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

/* 파란 오버레이 – 기본 on, 호버 시 어둡게 */
#complex .complex-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(40, 94, 228, 0.75);
  transition: background 0.4s ease, opacity 0.4s ease;
  z-index: 0;
}

#complex .complex-card:hover,
#complex .complex-card.is-center {
  opacity: 1;
  box-shadow: 0 8px 40px 0 rgba(0, 0, 0, 0.16);
}

#complex .complex-card:hover::before,
#complex .complex-card.is-center::before {
  opacity: 1;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

#complex .complex-card.is-hidden-loop {
  opacity: 0;
  pointer-events: none;
}

/* data-card로 배경 지정 (Swiper 복제본에도 적용됨) */
#complex [data-card='1'] {
  background-image: url(../img/complex-box-1.png);
}
#complex [data-card='2'] {
  background-image: url(../img/complex-box-2.png);
}
#complex [data-card='3'] {
  background-image: url(../img/complex-box-3.png);
}
#complex [data-card='4'] {
  background-image: url(../img/complex-box-3.png);
}
#complex [data-card='5'] {
  background-image: url(../img/complex-box-4.png);
}

#complex .complex-center-sub {
  color: #111;
  -webkit-text-fill-color: #111;
  text-align: center;
  font-family: Pretendard;
  /* font-size: 40px; */
  font-size: 30px;

  font-style: normal;
  font-weight: 600;
  line-height: 120%; /* 48px */
  letter-spacing: -1px;
}

#complex .complex-center-tit {
  font-family: Pretendard;
  /* font-size: 56px; */
  font-size: 46px;
  font-style: normal;
  font-weight: 800;
  line-height: 130%; /* 72.8px */
  letter-spacing: -1.4px;
  text-align: center;

  background: linear-gradient(90deg, #2048b0 0%, #2d69ff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 텍스트 오버레이 위로 */
#complex .complex-card-sub,
#complex .complex-card-tit {
  position: relative;
  z-index: 1;
  word-break: keep-all;
}

#complex .complex-card-sub {
  color: white;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

#complex .complex-card-tit {
  color: white;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

#complex .complex-card:hover .complex-card-sub,
#complex .complex-card.is-center .complex-card-sub {
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.6px;
}
#complex .complex-card:hover .complex-card-tit,
#complex .complex-card.is-center .complex-card-tit {
  font-size: 48px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: -1.2px;
}

#complex .complex-desc-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#complex .complex-desc {
  color: white;
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  letter-spacing: -1px;
  margin-top: 40px;
}

#complex .complex-badge {
  display: inline-block;
  padding: 0 5px;
  background: #f92c2c;
  color: white;
  font-weight: 700;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

#complex .complex-inner {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 60px;
  justify-content: center;
  /* max-width: 1480px; */
}

@media (max-width: 768px) {
  #complex {
    --complex-circle-size: 200px;
  }

  #complex .complex-stage {
    height: var(--complex-circle-size);
  }

  #complex .complex-inner {
    gap: 40px;
  }
}

/* ==========================================
   #food-sales
========================================== */
#food-sales {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(180deg, #111111 0%, rgba(17, 17, 17, 0.6) 100%),
    url('../img/food-sales-bg.png') center center / cover no-repeat;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

#food-sales .tit-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

#food-sales .st-tit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 1.2;
}

#food-sales .st-tit strong {
  color: #f92c2c;
  font-size: 80px;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 53, 53, 0.45), 0 0 12px rgba(255, 53, 53, 0.3),
    0 0 20px rgba(255, 53, 53, 0.2);
  animation: foodSalesNeonGlow 1.8s ease-in-out infinite;
}

@keyframes foodSalesNeonGlow {
  0%,
  100% {
    text-shadow: 0 0 6px rgba(255, 53, 53, 0.35),
      0 0 12px rgba(255, 53, 53, 0.2), 0 0 20px rgba(255, 53, 53, 0.12);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 53, 53, 0.8),
      0 0 22px rgba(255, 53, 53, 0.55), 0 0 34px rgba(255, 53, 53, 0.35);
  }
}

#food-sales .food-sales-title-img {
  position: absolute;
  left: -27px;
  top: 50%;
  width: 280px;
  height: auto;
  transform: translateY(-50%);
  z-index: -1;
}

#food-sales .food-sales-box {
  width: 90%;
  overflow: hidden;
  padding: 40px 30px;
  background: linear-gradient(
    180deg,
    rgba(249, 44, 44, 0.7) 0%,
    rgba(249, 44, 44, 0.5) 100%
  );
  border-radius: 24px;
  outline: 3px solid #fff;
  outline-offset: -3px;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#food-sales .food-sales-list {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

#food-sales .food-sales-item {
  /* overflow: hidden; */
  position: relative;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#food-sales .food-sales-device-head {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 45px;
}

#food-sales .food-sales-device-head img {
  display: block;
  width: 100%;
  height: 45px;
}

#food-sales .food-sales-device-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  max-width: 368px;
  width: 90%;
  height: 10px;
  background: #111111;
  border-radius: 4px;
}

#food-sales .food-sales-item .device-front {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 9;
}
#food-sales .food-sales-card-media {
  top: -15px;
  width: 100%;
  max-width: 395px;
  aspect-ratio: 360 / 541;
  margin: -35px auto 0;
  overflow: hidden;
  position: relative;
  z-index: 4;
  clip-path: inset(22px 0 0 0);
  will-change: clip-path, transform, opacity;
}

#food-sales .food-sales-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#food-sales .food-sales-note {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  display: flex;
  gap: 4px;
}

#food-sales .food-sales-note .es,
#profit-receipt .profit-receipt-note .es {
  display: flex;
}

#food-sales .food-sales-note .es span,
#profit-receipt .profit-receipt-note .es span {
  display: none;
}

/* ==========================================
   #special-seat
========================================== */
/* #special-seat {
  padding-top: 120px;
  padding-bottom: 120px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
} */

#special-seat {
  position: relative;
  padding-top: 120px;
  padding-bottom: 120px;
  background: url('../img/special-seat-bg.png') center center / cover no-repeat;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  overflow: hidden;
}

#special-seat::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(6px);
  z-index: 0;
}

#special-seat .sub-txt-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

#special-seat .sub-txt-div p {
  color: #FFF;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  line-height: 120%; /* 38.4px */
  letter-spacing: -0.8px;
  display: flex;
  box-sizing: border-box;
  padding: 5px 10px;
  justify-content: center;
  align-items: center;
  background: #D01522;
}

#special-seat .tit-wrap,
#special-seat .special-seat-compare {
  position: relative;
  z-index: 1;
}

#special-seat .tit-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
}

#special-seat .st-tit {
  color: #111111;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

#special-seat .special-seat-keyword {
  display: inline-block;
  padding: 0 5px;
  background: #2d69ff;
  color: #ffffff;
  font-weight: 700;
}

#special-seat .special-seat-compare {
  width: 90%;
  max-width: 1060px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
}

#special-seat .special-seat-card {
  /* max-width: 500px; */
  width: 50%;
  position: relative;
  padding: 40px 50px;
  background: rgba(17, 17, 17, 0.8);
  border-radius: 24px;
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#special-seat .special-seat-chip {
  padding: 10px 30px;
  background: #ffffff;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#special-seat .special-seat-chip p {
  color: #111111;
  font-size: 32px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

#special-seat .special-seat-chart {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 50px 40px; */
}

#special-seat .special-seat-chart-img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  display: block;
  height: auto;
}

#special-seat .special-seat-badge {
  position: absolute;
  max-width: 98px;
  height: auto;
  aspect-ratio: 1 /1;
  width: 25%;
  right: -30px;
  top: -50px;
  object-fit: contain;
  animation: special-seat-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes special-seat-badge-pulse {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* ==========================================
   #profit-receipt
========================================== */
#profit-receipt {
  position: relative;
  padding: 120px 0;
  background: #285ee4;

  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

#profit-receipt .tit-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

#profit-receipt .deco-real {
  position: absolute;
  top: 60px;
  right: 0%;
  max-width: 564px;
  width: 40%;
  aspect-ratio: 94/29;
}
#profit-receipt .st-tit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -1.6px;
}

#profit-receipt .st-sub-tit {
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%; /* 48px */
  letter-spacing: -1px;

  color: #fff;

  text-align: center;
  font-family: Pretendard;
  font-size: 40px;
}
#profit-receipt .st-tit span {
  position: relative;
}
#profit-receipt .st-tit span .star {
  position: absolute;
  top: -37px;
  left: -36px;
}
#profit-receipt .st-tit span .star .star1 {
  width: 40%;
}
#profit-receipt .st-tit span .star .star2 {
  width: 20%;
  position: relative;
  top: -20px;
  left: -12px;
}

#profit-receipt .st-tit span .line {
  width: 104%;
  position: absolute;
  bottom: 0;
  left: -52%;

  transform: translateX(50%);
}

#profit-receipt .st-tit strong {
  color: #f92c2c;
  font-size: 80px;
  font-weight: 900;
  text-shadow: 0 0 6px rgba(255, 53, 53, 0.45), 0 0 12px rgba(255, 53, 53, 0.3),
    0 0 20px rgba(255, 53, 53, 0.2);
  animation: foodSalesNeonGlow 1.8s ease-in-out infinite;
}

@keyframes foodSalesNeonGlow {
  0%,
  100% {
    text-shadow: 0 0 6px rgba(255, 53, 53, 0.35),
      0 0 12px rgba(255, 53, 53, 0.2), 0 0 20px rgba(255, 53, 53, 0.12);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 53, 53, 0.8),
      0 0 22px rgba(255, 53, 53, 0.55), 0 0 34px rgba(255, 53, 53, 0.35);
  }
}

#profit-receipt .profit-receipt-box {
  width: 90%;
  overflow: hidden;
  max-width: 1240px;
  display: flex;
  padding: 40px 30px;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  border-radius: 24px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
}

#profit-receipt .profit-receipt-list {
  list-style: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

#profit-receipt .profit-receipt-item {
  /* overflow: hidden; */
  position: relative;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

#profit-receipt .profit-receipt-device-head {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 45px;
}

#profit-receipt .profit-receipt-device-head img {
  display: block;
  width: 100%;
  height: 45px;
}

#profit-receipt .profit-receipt-device-bar {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 15px;
  max-width: 368px;
  width: 90%;
  height: 10px;
  background: #111111;
  border-radius: 4px;
}

#profit-receipt .profit-receipt-item .device-front {
  position: absolute;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 9;
}
#profit-receipt .profit-receipt-card-media {
  top: -15px;
  width: 100%;
  max-width: 360px;
  /* aspect-ratio: 360 / 541; */
  margin: -35px auto 0;
  overflow: hidden;
  position: relative;
  z-index: 4;
  clip-path: inset(22px 0 0 0);
  will-change: clip-path, transform, opacity;
}

#profit-receipt .profit-receipt-card-media img {
  display: block;
  width: 100%;
  object-fit: contain;
}

#profit-receipt .profit-receipt-note {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  display: flex;
  gap: 4px;
}


/* supervising */
#supervising .st-tit {
  animation: neon-pulse 2.5s ease-in-out infinite;
}

@keyframes neon-pulse {
  0% {
    text-shadow:
      0 0 4px   rgba(255, 255, 255, 1),
      0 0 9px  rgba(255, 255, 255, 0.85),
      0 0 17px  rgba(120, 170, 255, 0.7),
      0 0 35px  rgba(64,  120, 255, 0.45),
      0 0 60px rgba(32,   72, 176, 0.25);
  }
  50% {
    text-shadow:
      0 0 2px   rgba(255, 255, 255, 0.6),
      0 0 5px  rgba(255, 255, 255, 0.4),
      0 0 9px  rgba(120, 170, 255, 0.3),
      0 0 17px  rgba(64,  120, 255, 0.15),
      0 0 30px  rgba(32,   72, 176, 0.08);
  }
  100% {
    text-shadow:
      0 0 5px  rgba(255, 255, 255, 1),
      0 0 12px  rgba(255, 255, 255, 0.95),
      0 0 20px  rgba(120, 170, 255, 0.85),
      0 0 40px rgba(64,  120, 255, 0.6),
      0 0 60px rgba(32,   72, 176, 0.35);
  }
}

#supervising {
  width: 100%;
  display: flex;
  padding: 120px 0;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  background: linear-gradient(180deg, #285EE4 0%, #01019C 100%), #FFF;
}

#supervising .supervising-wrap {
  display: flex;
  max-width: 1300px;
  width: 90%;
  justify-content: center;
  align-items: flex-start;
  align-content: flex-start;
  gap: 50px;
  flex-wrap: wrap;
}

#supervising .supervising-box {
  width: calc(50% - 25px);
  aspect-ratio: 1 / 0.6;
  display: flex;
  box-sizing: border-box;
  padding: 30px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 16px;
  background-size: cover !important;
  background-position: center center !important;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

#supervising .supervising-box::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(45, 105, 255, 0.65);
  transition: 0.1s;
  opacity: 0;
}

#supervising .supervising-box:hover::after {
  opacity: 1;
}

#supervising .supervising-box .supervising-box-tit {
  color: #FFF;
  font-size: 40px;
  font-weight: 700;
  line-height: 120%; /* 48px */
  letter-spacing: -1px;
  z-index: 2;
}

#supervising .supervising-box .supervising-box-content {
  color: #FFF;
  font-size: 24px;
  font-weight: 400;
  line-height: 150%; /* 36px */
  letter-spacing: -0.6px;
  word-break: keep-all;
  z-index: 2;
}

#supervising .supervising-box:first-child {
  background: url(../img/supervising-box1.png);
}

#supervising .supervising-box:nth-child(2) {
  background: url(../img/supervising-box2.png);
}

#supervising .supervising-box:nth-child(3) {
  background: url(../img/supervising-box3.png);
}

#supervising .supervising-box:last-child {
  background: url(../img/supervising-box4.png);
}

/* ==========================================
   RESPONSIVE
========================================== */
@media (max-width: 1480px) {
  #complex .complex-center-sub {
    font-size: 27px;
  }
  #complex .complex-card-tit {
    font-size: 28px;
  }
  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 40px;
  }
  #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 20px;
  }
}

/* --- 1280px --- */
@media (max-width: 1280px) {
  /* #hero */
  #hero {
    min-height: 720px;
  }
  #hero .hero-frame {
    top: 110px;
  }
  #hero .hero-sub-txt {
    font-size: 30px;
  }
  #hero .profit-label {
    font-size: 50px;
  }
  #hero .profit-num {
    font-size: 110px;
  }
  #hero .hero-scroll-guide p {
    font-size: 20px;
  }

  /* #stats */
  #stats {
    padding: 100px 0;
    gap: 50px;
  }
  /* #stats .st-tit {
    font-size: 52px;
  } */
  #stats .sbm-white-l {
    width: 80px;
    height: 49px;
    top: 2px;
  }
  #stats .sbm-red {
    left: 86px;
    top: 2px;
    width: 73px;
    height: 49px;
  }
  #stats .sbm-white-r {
    left: 84px;
    top: 0;
    width: 76px;
    height: 52px;
  }
  #stats .stats-item {
    width: 210px;
  }
  #stats .stats-item-box {
    min-height: 270px;
    padding: 32px 16px;
  }
  #stats .stats-num {
    font-size: 48px;
  }
  #stats .stats-num--decimal b {
    font-size: 56px;
  }
  #stats .stats-num--decimal span {
    font-size: 40px;
  }
  #stats .stats-label {
    font-size: 21px;
  }
  #stats .stats-deco--left {
    width: 160px;
  }
  #stats .stats-deco--right {
    width: 240px;
  }

  /* #concerns */
  #concerns {
    padding: 100px 0 60px;
    gap: 50px;
  }
  #concerns .st-tit {
    /* font-size: 52px; */
  }
  #concerns .bubble-card {
    font-size: 26px;
    padding: 16px 32px;
  }
  #concerns .concerns-answer-txt {
    font-size: 52px;
  }
  #concerns .concerns-logo {
    width: auto;
    height: 32px;
  }
  #concerns .cl-w-l {
    width: 87px;
    height: 53px;
    top: 2px;
  }
  #concerns .cl-r {
    left: 93px;
    top: 2px;
    width: 80px;
    height: 53px;
  }
  #concerns .cl-w-r {
    left: 91px;
    top: 0;
    width: 83px;
    height: 57px;
  }

  /* #system */
  #system {
    padding: 0 0 100px;
    gap: 50px;
  }
  #system .st-tit {
    /* font-size: 52px; */
  }
  #system .system-brand-mark {
    width: 84px;
    height: 52px;
  }
  #system .system-cards {
    gap: 24px;
  }
  #system .system-card {
    padding: 30px;
  }
  #system .system-card--m {
    margin-top: 120px;
  }
  #system .system-card-tit {
    font-size: 36px;
  }
  #system .system-card-list li {
    font-size: 20px;
  }

  #guarantee .st-sub-tit {
    font-size: 35px !important;
  }
  #guarantee .guarantee-dots {
    gap: 25px;
  }

  #guarantee .guarantee-sub-row svg {
    height: 33px;
    width: auto;
  }
  #guarantee .guarantee-badge,
  #guarantee .guarantee-txt {
    font-size: 43px;
  }

  #guarantee .guarantee-desc {
    font-size: 28px;
  }

  #guarantee .guarantee-card {
    padding: 30px 35px;
  }

  #complex {
    --complex-circle-size: min(30vw, 360px);
  }

  #complex .complex-card-tit {
    font-size: 24px;
  }
  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 36px;
  }
  #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 18px;
  }
  #complex .complex-desc {
    font-size: 32px;
    letter-spacing: -0.8px;
  }

  #complex .complex-center-sub {
    /* font-size: 30px; */
    font-size: 23px;
  }
  #complex .complex-center-tit {
    /* font-size: 42px; */
    font-size: 34px;
  }

  #food-sales .food-sales-title-img {
    width: 55%;
  }
  #special-seat .sub-txt-div p {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #supervising {
    padding: 100px 0;
  }
  #supervising .supervising-wrap {
    gap: 30px;
  }
  #supervising .supervising-box {
    width: calc(50% - 15px);
  }
  #supervising .supervising-box .supervising-box-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #supervising .supervising-box .supervising-box-content {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
}

/* --- 1200px --- */
@media (max-width: 1200px) {
  /* #stats */
  #stats .stats-note {
    word-break: keep-all;
  }
  #stats .stats-note br {
    display: none;
  }
}

/* --- 1024px --- */
@media (max-width: 1024px) {
  #complex .complex-desc {
    font-size: 26px;
    letter-spacing: -0.65px;
  }

  #complex .complex-brand-mark {
    height: 48px;
  }
  #complex .complex-center-sub {
    /* font-size: 20px; */
    font-size: 17px;
    word-break: keep-all;
  }
  #complex .complex-center-tit {
    /* font-size: 32px; */
    font-size: 24px;
    word-break: keep-all;
  }

  #complex .complex-card-tit {
    font-size: 21px;
  }

  #complex .complex-card-sub {
    color: white;
    font-size: 16px;
    word-break: keep-all;
  }

  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 27px;
    word-break: keep-all;
  }
  #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 18px;
    word-break: keep-all;
  }

  /* #stats */
  #stats .stats-list {
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 20px;
  }
  #stats .stats-item {
    flex: 0 0 calc(33.33% - 8px);
  }

  #system .system-card-list li {
    font-size: 16px;
  }
  #system .system-card-list li::before {
    width: 20px;
    height: 20px;
  }

  #system .system-card-tit {
    font-size: 32px;
  }

  #system .system-deco-band {
    width: 95%;
  }

  #guarantee .st-sub-tit {
    font-size: 30px !important;
  }
  #guarantee .guarantee-badge,
  #guarantee .guarantee-txt {
    font-size: 35px;
  }
  #guarantee .guarantee-dots {
    gap: 19px;
  }
  #guarantee .guarantee-dots span {
    width: 6px;
    height: 6px;
  }
  #guarantee .guarantee-desc {
    font-size: 22px;
    word-break: keep-all;
  }
  #guarantee .guarantee-note {
    word-break: keep-all;
    font-size: 14px;
  }
  #food-sales .st-tit strong {
    font-size: 64px;
  }

  #food-sales .food-sales-box {
    padding: 30px 20px;
  }

  #food-sales .food-sales-note {
    font-size: 17px;
  }

  #special-seat .special-seat-chip p {
    font-size: 24px;
  }

  #special-seat .special-seat-card {
    padding: 30px 40px;
  }

  #special-seat .special-seat-compare {
    gap: 40px;
  }
  #special-seat .special-seat-badge {
    width: 22%;
    right: -22px;
  }

  #profit-receipt .st-tit span .star .star2 {
    width: 20%;
    position: relative;
    top: -14px;
    left: -3px;
  }

  #food-sales .food-sales-note,
  #profit-receipt .profit-receipt-note {
    font-size: 17px;
  }
  #supervising .supervising-wrap {
    gap: 20px;
  }
  #supervising .supervising-box {
    width: calc(50% - 10px);
    padding: 20px;
    gap: 8px;
  }
  #supervising .supervising-box .supervising-box-tit {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #supervising .supervising-box .supervising-box-content {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
}

/* --- 900px --- */
@media (max-width: 900px) {
  /* #hero */
  #hero {
    min-height: 600px;
  }
  #hero .logo-10th {
    top: 80px;
  }
  #hero .hero-frame {
    left: 8%;
    top: 100px;
    width: 84%;
    opacity: 0.5;
  }
  #hero .hero-sub-txt {
    font-size: 24px;
  }
  #hero .profit-label {
    font-size: 40px;
  }
  #hero .profit-num {
    font-size: 86px;
  }
  #hero .brand-mark-white-l {
    width: 90px;
    height: 54px;
    top: 2px;
  }
  #hero .brand-mark-blue {
    left: 96px;
    top: 2px;
    width: 82px;
    height: 54px;
  }
  #hero .brand-mark-white-r {
    left: 93px;
    top: 0;
    width: 86px;
    height: 58px;
  }
  #hero .hero-scroll-guide p {
    font-size: 18px;
  }

  /* #stats */
  #stats {
    padding: 80px 0px;
    gap: 40px;
  }
  #stats .stats-deco {
    display: none;
  }
  #stats .st-tit {
    /* font-size: 40px; */
  }
  #stats .sbm-white-l {
    width: 65px;
    height: 39px;
    top: 2px;
  }
  #stats .sbm-red {
    left: 70px;
    top: 2px;
    width: 60px;
    height: 39px;
  }
  #stats .sbm-white-r {
    left: 68px;
    top: 0;
    width: 62px;
    height: 42px;
  }
  #stats .stats-list {
    /* flex-wrap: wrap; */
    padding: 0 16px;
  }
  #stats .stats-item {
    width: calc(33.33% - 8px);
    min-width: 160px;
  }
  #stats .stats-item-box {
    min-height: 240px;
    padding: 28px 12px;
  }
  #stats .stats-num {
    font-size: 46px;
  }
  #stats .stats-num--decimal b {
    font-size: 46px;
  }
  #stats .stats-num--decimal span {
    font-size: 32px;
  }
  #stats .stats-label {
    font-size: 18px;
  }

  /* #concerns */
  #concerns {
    padding: 80px 20px 60px;
    gap: 40px;
  }
  #concerns .st-tit {
    /* font-size: 40px; */
  }
  #concerns .bubble-card {
    font-size: 22px;
    white-space: normal;
  }
  #concerns .concerns-answer {
    /* flex-direction: column; */
    gap: 8px;
  }
  #concerns .concerns-answer-txt {
    font-size: 36px;
    white-space: normal;
    text-align: center;
  }

  /* #system */
  #system {
    padding: 0 0 80px;
    gap: 40px;
  }
  #system .st-tit {
    /* font-size: 40px; */
  }
  #system .system-brand-mark {
    width: 68px;
    height: 42px;
  }
  #system .system-cards {
    /* flex-direction: column; */
    /* align-items: center;
    gap: 16px;
    padding: 0; */
  }
  #system .system-card {
    width: 100%;
    max-width: 520px;
  }
  #system .system-card--m {
    /* margin-top: 0; */
  }

  #system .system-card-list li {
    font-size: 15px;
  }

  #system .system-card-tit {
    font-size: 26px;
  }
  #system .system-card-list li {
    font-size: 18px;
  }
  #system .system-card-list li::before {
    width: 15px;
    height: 15px;
  }
  #system .system-card {
    padding: 20px;
  }

  #complex .complex-center {
    border-width: 7.5px;
  }
  #special-seat .sub-txt-div p {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #supervising {
    padding: 80px 0;
    gap: 40px;
  }
  #supervising .supervising-wrap {
    gap: 10px;
  }
  #supervising .supervising-box {
    width: calc(50% - 5px);
    aspect-ratio: 1 / 0.75;
  }
  #supervising .supervising-box .supervising-box-tit {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #supervising .supervising-box .supervising-box-content {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
}

/* --- 768px --- */
@media (max-width: 768px) {
  /* #hero */
  #hero {
    min-height: 520px;
  }
  #hero .hero-content {
    width: 90%;
    padding: 40px 70px;
  }
  #hero .hero-frame {
    display: none;
  }
  #hero .hero-sub-txt {
    margin-top: 10px;
    font-size: 18px;
  }
  #hero .profit-label {
    font-size: 32px;
  }
  #hero .profit-num {
    font-size: 56px;
  }
  #hero .hero-scroll-guide {
    bottom: 50px;
  }
  #hero .hero-scroll-guide p {
    font-size: 16px;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.4px;
  }
  #hero .hero-inner {
    gap: 15px;
  }
  #hero .hero-sub-txt.mo {
    display: block;

    font-size: 18px;
    line-height: 130%; /* 23.4px */
    letter-spacing: -0.933px;
  }
  #hero .hero-sub-txt.mo br {
    display: none;
  }
  #hero .hero-scroll-guide {
    bottom: 50px;
    position: absolute;
  }
  #hero .hero-sub-txt {
    display: none;
  }

  #complex {
    padding: 100px 0;
  }

  #complex .complex-desc {
    margin-top: 20px;
    font-size: 20px;
    text-align: left;
    letter-spacing: -0.5px;
  }

  #complex .complex-badge {
    font-size: 35px;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    letter-spacing: -0.8px;
  }

  #complex .complex-center,
  #complex .complex-card {
    /* min-width: 200px;
    min-height: 200px; */
  }

  #complex .complex-card-sub {
    font-size: 13px;
  }
  #complex .complex-card-tit {
    font-size: 20px;
  }

  #complex .complex-center-sub {
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 24px */
    letter-spacing: -0.5px;
  }

  #complex .complex-center-tit {
    font-size: 28px;
    font-style: normal;
    font-weight: 800;
    line-height: 130%; /* 36.4px */
    letter-spacing: -0.7px;
  }
  #complex .complex-brand-mark {
    height: 40px;
  }

  #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 14px;
  }
  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 23px;
  }

  /* #stats */
  #stats .stats-title-row {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
  }
  #stats .stats-title-row > p:last-child {
    flex-basis: 100%;
  }
  #stats .st-tit {
    /* font-size: 34px; */
  }
  #stats .stats-item {
    flex: 0 0 calc(50% - 6px);
  }

  /* #concerns */
  #concerns .bubble-card {
    font-size: 18px;
    padding: 14px 24px;
  }
  #concerns .concerns-answer-txt {
    font-size: 28px;
  }
  #concerns .concerns-logo {
    /* width: 140px; */
    width: auto;
    height: 28px;
  }
  #concerns .cl-w-l {
    width: 70px;
    height: 43px;
    top: 2px;
  }
  #concerns .cl-r {
    left: 75px;
    top: 2px;
    width: 64px;
    height: 43px;
  }
  #concerns .cl-w-r {
    left: 73px;
    top: 0;
    width: 67px;
    height: 46px;
  }

  /* #guarantee */
  #guarantee {
    padding: 24px;
  }
  #guarantee .guarantee-inner {
    padding: 80px 30px;
    gap: 40px;
  }

  #guarantee .st-sub-tit {
    font-size: 32px;
  }
  #guarantee .guarantee-brand-block {
    width: 52px;
    height: 32px;
  }
  #guarantee .guarantee-badge,
  #guarantee .guarantee-txt {
    font-size: 33px;
  }

  #guarantee .guarantee-doc {
    /* max-width: none; */
    /* width: 100%; */
    width: 25%;
  }
  #guarantee .guarantee-card {
    align-items: start;
    /* flex-direction: column; */
    padding: 30px 25px;
  }
  #guarantee .guarantee-doc img {
    object-fit: contain;
  }

  #guarantee .guarantee-content {
    gap: 20px;
  }
  #guarantee .guarantee-desc {
    font-size: 20px;
  }
  #guarantee .guarantee-dots {
    bottom: calc(100% + 1px);
  }
  #guarantee .guarantee-sub-row {
    gap: 18px 10px;
  }

  #guarantee .guarantee-card-outter {
    border-radius: 14px;
    border: 1px solid #f92c2c;
    padding: 2px;
  }
  #guarantee .guarantee-card {
    border-radius: 12px;
    border: 3px solid transparent;
    background: linear-gradient(#fff5f5, #fff5f5) padding-box,
      linear-gradient(to bottom, #ff8888, #f92c2c) border-box;
    box-shadow: 0 8px 12px 0 rgba(154, 0, 0, 0.2);
    gap: 16px;
  }
  /* #system */
  #system .st-tit {
    /* font-size: 30px; */
  }
  #system .system-brand-mark {
    width: 65px;
    height: auto;
  }
  #system .system-card {
    padding: 24px;
  }
  #system .system-card-tit {
    font-size: 28px;
    line-height: 120%; /* 33.6px */
    letter-spacing: -0.7px;
  }
  #system .system-card-list li {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 21.6px */
    letter-spacing: -0.45px;
  }

  #food-sales .st-tit strong {
    font-size: 55px;
  }
  #food-sales .food-sales-list,
  #profit-receipt .profit-receipt-list {
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
  }

  #food-sales .food-sales-item,
  #profit-receipt .profit-receipt-item {
    max-width: none;
    width: 49%;
    overflow: hidden;
  }
  #food-sales .food-sales-device-head img,
  #profit-receipt .profit-receipt-device-head img {
    height: 35px;
  }

  #food-sales .food-sales-item .device-front,
  #profit-receipt .profit-receipt-item .device-front {
    object-fit: cover;
    height: 11px;
    border-radius: 5px;
  }
  #food-sales .food-sales-device-bar,
  #profit-receipt .profit-receipt-device-bar {
    top: 11px;
  }
  #food-sales .food-sales-note,
  #profit-receipt .profit-receipt-note {
    font-size: 14px;
    word-break: keep-all;
    display: flex;
    flex-direction: column;
  }
  #food-sales .food-sales-note .sl,
  #profit-receipt .profit-receipt-note .sl {
    display: none;
  }
  #food-sales .food-sales-note .es span,
  #profit-receipt .profit-receipt-note .es span {
    display: block;
  }

  #food-sales,
  #profit-receipt {
    padding: 100px 0;
  }

  #special-seat .special-seat-card {
    border-radius: 16.8px;
    backdrop-filter: blur(4.199999809265137px);
    padding: 20px 30px;
    width: 100%;
    max-width: none;
  }
  #special-seat .special-seat-chip p {
    font-size: 22.4px;
    line-height: 120%; /* 26.88px */
    letter-spacing: -0.56px;
  }
  #special-seat .special-seat-chip {
    padding: 7px 21px;
    gap: 7px;
    border-radius: 35px;
  }

  #special-seat .special-seat-compare {
    gap: 28px;
    flex-direction: column;
  }

  #special-seat .special-seat-badge {
    width: 22%;
    right: -10px;
    top: -45px;
  }
  #supervising .supervising-box .supervising-box-content br {
    display: none;
  }
}

/* --- 650px --- */
@media (max-width: 650px) {
  /* #hero */
  #hero .logo-10th {
    top: 70px;
  }
  /* #concerns */
  #concerns .concerns-bubble--top {
    width: 60%;
  }
  #concerns .concerns-bubble--mid {
    width: 72%;
  }
  #concerns .concerns-bubble--btm {
    width: 66%;
  }

  #system .system-cards {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  #system .system-card-tit br {
    display: none;
  }
  #system .system-card {
    width: 100%;

    max-width: none;
  }

  #system .system-card--m {
    margin-top: 0;
  }
  #system .system-card-list li br {
    display: none;
  }

  #system .system-deco-band {
    top: 10%;
  }
  #system .tit-wrap {
    margin-top: 80px;
  }

  #concerns .tit-wrap {
    gap: 10px;
  }
  #special-seat .sub-txt-div {
    gap: 7.5px;
  }
  #special-seat .sub-txt-div p {
    font-size: 20px;
    letter-spacing: -0.5px;
    padding: 3.75px 7.5px;
  }
  #supervising .supervising-wrap {
    flex-direction: column;
  }
  #supervising .supervising-box {
    width: 100%;
    border-radius: 8px;
    aspect-ratio: 1 / 0.55;
  }
  #supervising .supervising-box .supervising-box-content br:not(.xxs-br) {
    display: block;
  }
}

/* --- 580px --- */
@media (max-width: 580px) {
  /* #concerns */
  #concerns .concerns-answer {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  #concerns .concerns-logo {
    flex-shrink: 0;
  }
  #concerns .concerns-answer-txt:last-child {
    flex-basis: 100%;
    text-align: center;
  }

  /* #guarantee */
  /* #guarantee .st-tit {
  }
  #guarantee .st-sub-tit {
    font-size: 20px;
  }
  #guarantee .guarantee-brand-block {
    width: 40px;
    height: 24px;
  } */

  #complex .complex-center-tit {
    font-size: 22px;
  }
  #complex .complex-center-sub {
    font-size: 15px;
  }

  #complex .complex-card--center {
    border: 5px solid #fff;
  }
  #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 12px;
  }
  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 20px;
  }
  
}

/* --- 480px --- */
@media (max-width: 480px) {
  /* #complex */

  #complex {
    /* 3개 카드(slot2·3·4)가 화면에 딱 맞도록 */
    --complex-circle-size: calc((100vw - 40px) / 3);
    --complex-overlap: 0px;
    min-height: unset;
    padding: 80px 0;
    gap: 20px;
    overflow: hidden; /* slot1·5 수평 클리핑 */
  }

  #complex .complex-stage {
    /* GSAP이 top:50% 는 건드리지 않고 transform 만 덮어쓰므로
       카드 상단이 stage 50% 지점에 위치함 → stage/swiper overflow:visible 로 수직 클리핑 제거 */
    height: var(--complex-circle-size);
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  #complex .complex-swiper {
    overflow: visible;
  }

  #complex .st-tit {
    font-size: 32px;
  }

  #complex .complex-tit-row {
    gap: 5px;
  }

  #complex .complex-brand-mark {
    height: 30px;
  }

  #complex .complex-card-sub {
    font-size: 10px;
  }

  #complex .complex-card-tit {
    font-size: 18px;
  }

  /* #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 12px;
  }

  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 24px;
  } */

  #complex .complex-center-tit {
    font-size: 15px;
  }
  #complex .complex-center-sub {
    font-size: 11px;
  }
  #complex .complex-card:hover .complex-card-sub,
  #complex .complex-card.is-center .complex-card-sub {
    font-size: 10px;
  }
  #complex .complex-card:hover .complex-card-tit,
  #complex .complex-card.is-center .complex-card-tit {
    font-size: 15px;
  }
  #complex .complex-card-sub {
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%; /* 12px */
    letter-spacing: -0.25px;
  }

  #complex .complex-card-tit {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%; /* 23.4px */
    letter-spacing: -0.45px;
  }

  #complex .complex-center {
    border-width: 5px;
  }

  /* #complex .complex-center-sub {
    font-size: 20px;
  } */

  /* #complex .complex-center-tit {
    font-size: 28px;
  } */

  #complex .complex-desc {
    font-size: 18px;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    font-style: normal;
    font-weight: 400;
    line-height: 22px; /* 122.222% */
    letter-spacing: -0.45px;
  }

  #complex .complex-badge {
    font-size: 32px;
  }

  #complex {
    padding: 80px 0;
  }

  /* #hero */
  #hero {
    min-height: 460px;
  }
  #hero .hero-profit-wrap {
    gap: 8px;
  }
  #hero .hero-brand-mark {
    max-width: 85px;
    width: 100%;
  }
  #hero .hero-sub-txt {
    font-size: 16px;
  }
  #hero .profit-label {
    font-size: 24px;
    line-height: 130%; /* 31.052px */
    letter-spacing: -0.597px;
  }
  #hero .profit-num {
    font-size: 52px;
    line-height: 108%;
  }
  #hero .brand-mark-white-l {
    width: 77px;
    height: 46px;
    top: 2px;
  }

  #hero .logo-10th {
    width: 10%;
    /* right: 62px;
    aspect-ratio: 19/25; */
  }
  #hero .brand-mark-blue {
    left: 82px;
    top: 2px;
    width: 70px;
    height: 46px;
  }
  #hero .brand-mark-white-r {
    left: 79px;
    top: 0;
    width: 75px;
    height: 50px;
  }

  #hero .hero-scroll-guide p {
  }
  #hero .scroll-arrow {
    width: 32px;
    height: 32px;
  }
  #hero .scroll-arrow svg {
    width: 100%;
  }

  /* #stats */
  #stats {
    /* padding: 60px 16px; */
    gap: 32px;
  }
  #stats .stats-title-row {
    /* flex-direction: column; */
    gap: 6px;
  }
  #stats .stats-mo-br {
    display: block;
  }
  #stats .st-tit {
    /* font-size: 26px; */
    text-align: center;
  }
  #stats .sbm-white-l {
    width: 52px;
    height: 31px;
    top: 2px;
  }
  #stats .sbm-red {
    left: 56px;
    top: 2px;
    width: 48px;
    height: 31px;
  }
  #stats .sbm-white-r {
    left: 54px;
    top: 0;
    width: 50px;
    height: 34px;
  }
  #stats .stats-item {
    width: calc(50% - 4px);
    gap: 12px;
    min-width: auto;
  }
  #stats .stats-item-box {
    min-height: 200px;
    padding: 24px 10px;
    gap: 14px;
  }
  #stats .stats-num {
    font-size: 40px;
    font-style: normal;
    line-height: 100%; /* 40px */
    letter-spacing: -1px;
  }
  #stats .stats-num--decimal b {
    font-size: 36px;
  }
  #stats .stats-num--decimal span {
    font-size: 26px;
  }
  #stats .stats-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 120%; /* 19.2px */
    letter-spacing: -0.4px;
  }
  #stats .stats-note {
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; /* 13px */
    letter-spacing: -0.25px;
  }

  /* #concerns */
  #concerns {
    padding: 80px 16px 50px;
    gap: 32px;
  }
  #concerns .st-tit {
    /* font-size: 22px; */
  }
  #concerns .bubble-card {
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 130%; /* 23.4px */
    letter-spacing: -0.45px;

    padding: 11px 22.5px;
    border-radius: 13px;
  }
  #concerns .bubble-tab {
    width: 20px;
    height: 20px;
    margin-left: 20px;
  }
  #concerns .concerns-answer {
    padding: 20px 24px;
    border-radius: 12px;
    outline-width: 2px;
  }

  #concerns .concerns-deco--mr {
    top: 200px;
  }
  #concerns .concerns-deco--ml {
    width: 35%;
    top: 350px;
  }

  #concerns .bubble-wrap.bubble-wrap--top {
    justify-content: start;
  }
  #concerns .bubble-wrap.bubble-wrap--mid {
    margin-left: 10%;
    margin-top: 15px;
    margin-bottom: 15px;
  }

  #concerns .concerns-answer-txt {
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 38.4px */
    letter-spacing: -0.8px;
  }
  #concerns .concerns-logo {
    width: 107px;
    height: auto;
  }
  #concerns .cl-w-l {
    width: 54px;
    height: 33px;
    top: 1px;
  }
  #concerns .cl-r {
    left: 58px;
    top: 1px;
    width: 50px;
    height: 33px;
  }
  #concerns .cl-w-r {
    left: 56px;
    top: 0;
    width: 52px;
    height: 35px;
  }

  #concerns .concerns-bubble--btm,
  #concerns .concerns-bubble--mid,
  #concerns .concerns-bubble--top {
    max-width: none;
    width: 80%;
  }
  #concerns .concerns-bubbles {
    width: 90%;
  }

  /* #system */
  #system {
    padding: 0 0 80px;
    gap: 32px;
  }

  #system .system-brand-mark {
    width: 60px;
    height: auto;
  }
  #system .system-card-list li::before {
    width: 22px;
    height: 22px;
  }

  #guarantee .guarantee-inner {
    padding: 70px 16px;
  }
  #guarantee {
    padding: 16px;
  }
  #guarantee .st-sub-tit {
    font-size: 24px !important;
  }
  #guarantee .guarantee-sub-row svg {
    height: 24px;
  }

  #guarantee .guarantee-badge,
  #guarantee .guarantee-txt {
    font-size: 26px;
    line-height: 130%; /* 33.8px */
    letter-spacing: -0.65px;
  }
  #guarantee .guarantee-desc {
    font-size: 16px;
    line-height: 130%; /* 20.8px */
    letter-spacing: -0.4px;
  }
  #guarantee .guarantee-card {
    padding: 20px;
    justify-content: center;
  }
  #guarantee .guarantee-note {
    font-size: 9px;

    line-height: 130%; /* 11.7px */
    letter-spacing: -0.225px;
  }
  #guarantee .guarantee-dots span {
    width: 4px;
    height: 4px;
  }
  #guarantee .guarantee-dots {
    gap: 16px;
  }
  #guarantee .guarantee-doc {
    width: 35%;
  }

  #food-sales .st-tit strong {
    font-size: 40px;
  }
  #food-sales .st-tit span:nth-child(1) {
    width: 100%;
  }
  #food-sales .st-tit {
    flex-wrap: wrap;
  }

  #food-sales {
    padding: 80px 0;
    gap: 40px;
  }
  #profit-receipt {
    padding: 85px 0;
    gap: 40px;
  }

  #food-sales .food-sales-title-img,
  #profit-receipt .profit-receipt-title-img {
    left: -21px;
  }

  #food-sales .food-sales-item,
  #profit-receipt .profit-receipt-item {
    width: 100%;
  }

  #food-sales .food-sales-note,
  #profit-receipt .profit-receipt-note {
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; /* 14.4px */
    letter-spacing: -0.3px;
  }
  #food-sales .food-sales-box,
  #profit-receipt .profit-receipt-box {
    border-radius: 12px;
  }

  #special-seat {
    gap: 40px;
    padding-top: 80px;
    padding-bottom: 80px;
  }

  #special-seat .special-seat-badge {
    width: 24%;
    right: -10px;
    top: -34px;
  }

  #profit-receipt .deco-real {
    height: auto;
    top: 34px;
    left: 0%;
    right: auto;
    width: 62%;
  }
  #supervising .supervising-box {
    aspect-ratio: 1 / 0.7;
  }
}

@media (max-width: 400px) {
  #hero .hero-profit-wrap {
    flex-wrap: wrap;
    justify-content: center;
  }
  #supervising .supervising-box .supervising-box-content .xxs-br {
    display: block !important;
  }
}
@media (max-width: 350px) {
  #special-seat .st-tit {
    flex-wrap: wrap;
  }

  #complex .complex-desc {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #complex .complex-badge {
    font-size: 30px;
  }
  #supervising .supervising-box {
    padding: 12px;
  }
  #supervising .supervising-box .supervising-box-tit {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #supervising .supervising-box .supervising-box-content {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
}
@media (max-width: 330px) {
  #stats .stats-list {
    flex-direction: column;
  }
  #stats .stats-item {
    width: 100%;
  }
}