/* popup */
.pc {
  display: block;
}

.mobile {
  display: none;
}

.popup-space {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  top: 5%;
  left: 5%;
  gap: 10px;
  align-items: start;
  z-index: 100;
  width: 95%;
  z-index: 999;
}

.layer-popup {
  background-color: #fff;
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  height: auto !important;
}

.layer-popup:nth-child(1) {
  left: 0;
}

.layer-popup img {
  width: 100%;
  height: auto !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.layer-popup .show-chk-wrap {
  display: flex;
  padding: 6px 10px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
}

.show-chk-div {
  display: flex;
  align-items: center;
  gap: 12px;
}

.layer-popup .show-chk-wrap a {
  font-size: 16px;
  color: #505050;
  cursor: pointer;
}

.layer-popup .show-chk-wrap a:hover {
  color: #222;
  font-weight: 600;
  transition: 0.3s;
}

.close-popup {
  box-sizing: border-box;
  padding: 4px 12px;
  border: 1px solid #999;
  border-radius: 4px;
}

.close-popup:hover {
  border: 1px solid #505050;
  background-color:#505050;
  color: #fff !important;
  transition: 0.3s;
}

section {
  background-position: center center !important;
  background-size: cover !important;
  background: #080807;
}


/* main */
#hero {
  width: 100%;
  min-height: 100vh;
  height: 900px;
  position: relative;
  padding: 0;
}

.bg-div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero {
  overflow: hidden;
}

#hero .door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgb(17, 17, 17, 0.8);
  z-index: 2;
}

#hero .door {
  --logo-w: clamp(260px, 70vw, 650px);
  background-image: url(../img/footer-logo.png);
  background-repeat: no-repeat;
  background-size: var(--logo-w) auto;
}

#hero .door.left {
  left: 0;
  border-right: 0.15px solid #333;
  background-position: right calc(var(--logo-w) * -0.51) center; /* Katsu */
}

#hero .door.right {
  right: 0;
  border-left: 0.15px solid #777;
  background-position: left calc(var(--logo-w) * -0.49) center; /* Hesed */
}

#hero .hero-txt {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  z-index: 1;
  white-space: nowrap;
}

#hero .hero-txt p {
  font-size: 72px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -1.8px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

#hero .hero-txt .gold-point {
  font-size: 88px;
  line-height: 1.1;
  letter-spacing: -2.2px;
  background: linear-gradient(270deg, #FFF8EB 0%, #DD8F00 30.96%, #FFF8EB 100%);
  background-clip: text;
  -webkit-background-clip: text;
  font-weight: 900;
  -webkit-text-fill-color: transparent;
}

#hero .hero-txt .char {
  display: inline-block;
}


/* reels */
#reels {
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 120px;
  overflow: hidden;
  position: relative;
}

#reels .tit-wrap {
  gap: 50px;
}

#reels .bg-icon {
  width: 110%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  opacity: 0.2;
}

#reels .reels-bubble {
  position: absolute;
}

#reels .reels-bubble.first {
  max-width: 216.938px;
  width: 26%;
  left: 75px;
  top: 130.813px;
}

#reels .reels-bubble.second {
  max-width: 234.813px;
  width: 27%;
  left: 168.188px;
  top: 292.5px;
}

#reels .reels-bubble.third {
  max-width: 251.875px;
  width: 28%;
  right: 54.438px;
  top: 135.688px;
}

#reels .reels-bubble.fourth {
  max-width: 237.25px;
  width: 26%;
  right: 134.875px;
  top: 281.938px;
}

#reels .reels-swiper, #reels .reels-swiper img {
  width: 100%;
}

#reels .reels-swiper .swiper-wrapper {
  transition-timing-function: linear;
}

#reels .reels-swiper .swiper-slide {
  width: 325px;
}


/* map */
#map {
  width: 100%;
  padding: 120px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#map .map-container {
  max-width: 1300px;
  width: 92%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#map .desc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

#map .desc div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: #F9F9F9;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: -0.7px;
  line-height: normal;
}

#map .desc div.big {
  font-size: 40px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: -1px;
}

#map .desc div .w {
  padding: 6px 10px;
  background: #DD8F00;
}

/* 회전 문구 : 현재 문구(is-active)만 흐름에 두고 나머지는 같은 자리에 겹침 */
#map .map-rotate {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

#map .map-rotate span {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  padding: inherit;
  opacity: 0;
}

#map .map-rotate span.is-active {
  position: relative;
  padding: 0;
  opacity: 1;
}

#map .desc div strong {
  font-size: 44px;
  letter-spacing: -1.1px;
  font-weight: 700;
}

#map .flex {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 지도 원본(1014x1358) 기준 좌표 : 서울 지점(342, 259) */
#map .markermap {
  width: 50%;
  max-width: 600px;
  position: relative;
}

#map .markermap-bg {
  width: 100%;
  display: block;
}

#map .markermap-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#map .markermap-lines path {
  fill: none;
  stroke: #FFB23F;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px #FF9A00);
}

#map .markermap-glows circle, #map .markermap-burst {
  fill: url(#markermap-glow);
  mix-blend-mode: screen;
}

/* 마커 끝(하단 중앙)이 서울 지점에 오도록 배치 */
#map .markermap-seoul {
  width: 16%;
  position: absolute;
  left: 25.73%;
  top: 0.89%;
}


/* revisit */
#revisit {
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  background: url(../img/help-bg.png);
  overflow: hidden;
}

#revisit .st-sub-tit {
  color: #D70000;
}

#revisit .st-tit {
  font-size: 44.688px;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: -1.1px;
}

#revisit .revisit-badge {
  max-width: 173px;
  width: 27%;
  position: absolute;
  left: -24%;
  top: -2%;
}

#revisit .revisit-container {
  max-width: 1300px;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

#revisit .revisit-tab-wrap {
  width: 100%;
  display: flex;
  align-items: center;
}

#revisit .revisit-tab {
  display: flex;
  padding: 19.5px 0;
  justify-content: center;
  align-items: center;
  flex: 1 0 0;
  border-radius: 6.5px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: normal;
  cursor: pointer;
  position: relative;
  transition: 0.1s;
}

#revisit .revisit-tab.active, #revisit .revisit-tab:hover {
  background: #DD8F00;
  color: #FFF;
}

#revisit .revisit-tab::after {
  content: '';
  width: 26px;
  aspect-ratio: 26 / 23;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -22px;
  background: url(../img/revisit-tab-icon.png);
  background-size: cover !important;
  opacity: 0;
  transition: 0.05s;
}

#revisit .revisit-tab.active::after, #revisit .revisit-tab:hover::after {
  opacity: 1;
}

#revisit .revisit-review-wrap {
  width: 100%;
  padding: 20px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.20);
  position: relative;
}

#revisit .revisit-ready {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #F9F9F9;
  font-size: 24px;
  opacity: 0;
  visibility: hidden;
}

#revisit .revisit-swiper {
  width: 100%;
  overflow: hidden;
}

#revisit .revisit-swiper .swiper-slide {
  width: 260px;
  border-radius: 8px;
  overflow: hidden;
}

#revisit .revisit-swiper img {
  width: 100%;
}

.br-1350 {
  display: none;
}


/* upward */
#upward {
  width: 100%;
  background: #080807;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 240px;
  overflow: hidden;
}

#upward .tit-div small {
  color: #666;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 100%; /* 16.25px */
  margin-left: auto;
}

#upward .upward-container {
  max-width: 1300px;
  width: 92%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

#upward .upward-arrow {
  width: 90%;
  position: absolute;
  right: 0;
  top: -47%;
}

#upward .upward-box {
  width: 100%;
  border-radius: 9.75px;
  background: #20201F;
  position: relative;
  padding: 26px 0;
}

#upward .upward-year {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#upward .upward-graph {
  width: 100%;
}

#upward .million {
  max-width: 164px;
  width: 13%;
  position: absolute;
  right: 6.5%;
  top: 11%;
  z-index: 2;
}

#upward .upward-circle {
  max-width: 800px;
  width: 42%;
  position: absolute;
  left: -60.875px;
  top: -90.562px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#upward .upward-circle-img {
  width: 100%;
}

#upward .upward-circle-txt {
  width: 100%;
  animation: rotate360 8s linear infinite;
}

#upward .upward-circle p {
  color: #FFF;
  font-size: 32px;
  letter-spacing: -0.8px;
  line-height: 120%;
  text-align: center;
}

@keyframes rotate360 {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* waiting */
#waiting {
  width: 100%;
  background: #3D352A;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
  position: relative;
}

.cloud, .line-cloud {
  position: absolute;
}

.cloud {
  max-width: 583px;
  width: 30%;
  left: -10%;
  top: 177px;
  opacity: 0.3;
}

.line-cloud {
  max-width: 590px;
  width: 35%;
  right: -5%;
  bottom: 84px;
  opacity: 0.3;
}

/* 구름 좌우 두둥실 (구름과 선 구름은 반대 방향·다른 속도) */
.cloud {
  animation: cloud-float 4s ease-in-out infinite alternate;
}

.line-cloud {
  animation: cloud-float 5s ease-in-out infinite alternate-reverse;
}

@keyframes cloud-float {
  from { transform: translateX(-20px); }
  to { transform: translateX(20px); }
}

#waiting .st-tit .primary {
  padding: 10px;
  background: #F9F9F9;
}

#waiting .waiting-container {
  width: 92%;
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 5;
}

#waiting .waiting-main {
  flex: 0 0 77%;
  aspect-ratio: 669 / 410;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

#waiting .waiting-main img, #waiting .waiting-main video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#waiting .waiting-swiper {
  flex: 1;
  min-width: 0;
  margin-left: 24px;
  overflow: hidden;
  contain: size; /* 슬라이드 높이가 영역을 늘리지 않고 큰 이미지 높이를 따름 */
}

#waiting .waiting-swiper .swiper-slide {
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}

#waiting .waiting-swiper .swiper-slide-active {
  opacity: 1;
}

#waiting .waiting-swiper img, #waiting .waiting-swiper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* sale */
#sale {
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  overflow: hidden;
}

/* 매장별 배경 : 매장 사진을 어둡게 깔고, 슬라이드에 맞춰 교체 */
#sale .sale-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#sale .sale-bg::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(17, 17, 17, 0.5) 0%, rgba(17, 17, 17, 0.5) 100%);
}

#sale .sale-bg img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s;
}

#sale .sale-bg img.active {
  opacity: 0.15;
}

#sale .st-tit {
  font-weight: 700;
  flex-direction: column;
  gap: 20px;
}

#sale .st-tit .primary {
  font-weight: 600;
}

#sale .st-tit span {
  display: inline-block;
}

#sale .month-sale {
  padding: 10px;
  color: #FFF;
  background: #DD8F00;
  font-weight: 900;
  line-height: 100%;
}

#sale .tit-wrap small {
  color: #666;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%; 
  letter-spacing: -0.4px;
  margin-top: -22px;
}

/* 매장별 슬라이드 : [매장 정보] [메뉴 이미지 + 순익] [매출표] */
#sale .sale-slider {
  max-width: 1300px;
  width: 92%;
  position: relative;
  z-index: 2;
}

#sale .sale-store-swiper {
  width: 100%;
  overflow: hidden;
}

#sale .sale-store {
  display: grid;
  grid-template-columns: 29% 32% 29%;
  justify-content: space-between;
  align-items: center;
}

#sale .sale-info {
  display: flex;
  flex-direction: column;
  gap: 100px;
}

#sale .sale-brand, #sale .sale-total {
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: #F9F9F9;
  font-size: 24px;
  font-weight: 400;
  line-height: 120%;
  letter-spacing: -0.6px;
}

#sale .sale-brand strong {
  color: #DD8F00;
  font-size: clamp(30px, 3.3vw, 46px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 120%;
}

#sale .sale-total strong {
  color: #DD8F00;
  font-size: clamp(32px, 3.6vw, 50px); /* 가장 긴 금액도 칸 너비 안에 들어오도록 화면 비례 */
  font-weight: 900;
  line-height: 120%;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

#sale .sale-total small {
  color: rgba(221, 143, 0, 0.50);
  font-size: 20px;
  letter-spacing: -0.5px;
}

#sale .sale-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* 메뉴 이미지 : 아래쪽 메뉴명 글자는 잘라내고 음식만 노출 */
#sale .sale-menu {
  width: 100%;
  aspect-ratio: 111 / 113;
  position: relative;
  overflow: hidden;
}

#sale .sale-menu img {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* 메뉴명 글자가 없는 이미지는 잘라내지 않고 전체를 가운데에 표시 */
#sale .sale-menu img.full {
  height: 100%;
  object-fit: contain;
}

#sale .sale-profit {
  width: 48%;
  aspect-ratio: 1 / 1;
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgba(221, 143, 0, 0.90);
  color: #080807;
  font-size: clamp(24px, 3.4vw, 56px); /* "40.7%"처럼 소수점이 있어도 원 안에 여유 있게 */
  font-weight: 800;
  line-height: 100%;
  letter-spacing: -0.02em;
}

#sale .sale-nav {
  display: flex;
  gap: 12px;
}

#sale .sale-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #555;
  border-radius: 50%;
  background: #111;
  color: #FFF;
  cursor: pointer;
  transition: 0.15s;
}

#sale .sale-btn:hover {
  border-color: #FFF;
  background: #FFF;
  color: #111;
}

#sale .sale-btn svg {
  width: 20px;
  transition: 0.15s;
}

#sale .sale-table {
  width: 100%;
  display: block;
}


/* piechart */
#piechart {
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  overflow: hidden;
  margin-top: -2px;
}

#piechart .cloud, #piechart .line-cloud {
  opacity: 1;
  max-width: 326px;
}

#piechart .cloud {
  left: -4%;
}

#piechart .line-cloud {
  right: -2%;
}

#piechart .st-sub-tit {
  color: #DD8F00;
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -1.1px;
  padding: 8px 16px;
  background: #F9F9F9;
}

#piechart .piechart-container {
  max-width: 1300px;
  width: 92%;
  display: flex;
  align-items: center;
  z-index: 5;
  gap: 40px;
}

#piechart .piechart-table-wrap {
  max-width: 780px;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

#piechart .piechart-table-wrap small {
  color: #DADADA;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: normal;
}

#piechart .piechart-table {
  width: 100%;
  border-collapse: collapse;
}

#piechart .piechart-table th {
  height: 56px;
  padding: 8px;
  color: #FFF;
  font-size: 22px;
  text-align: center;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.55px;
  border-bottom: 2px solid #DADADA;
}

#piechart .piechart-table td {
  height: 48px;
  padding: 8px;
  border-right: 0.5px solid #DADADA;
  color: #FFF;
  font-size: 20px;
  text-align: center;
  font-weight: 400;
  letter-spacing: -0.5px;
  line-height: normal;
}

#piechart .piechart-table td:last-child {
  border-right: none;
}

#piechart .piechart-table tfoot td {
  height: 56px;
  background: #DD8F00;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.65px;
}

#piechart .piechart-table tfoot td:nth-child(2) {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.9px;
  text-shadow: 0 0 8px #FFCE73;
}

#piechart .piechart {
  flex: 1 0 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: #F9F9F9;
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.9px;
  line-height: 100%; /* 36.563px */
  position: relative; 
}

#piechart .piechart .o {
  color: #DD8F00;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -1.6px;
  line-height: 100%; /* 65px */
}

#piechart .piechart-img {
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* --pie(0~360) 각도만큼 12시 방향부터 시계방향으로 노출 */
  -webkit-mask-image: conic-gradient(#000 calc(var(--pie, 360) * 1deg), transparent 0);
  mask-image: conic-gradient(#000 calc(var(--pie, 360) * 1deg), transparent 0);
}


/* fried */
#fried {
  width: 100%;
  background: #3D352A;
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

#fried .cloud {
  opacity: 1;
  max-width: 258px;
  left: -24.625px;
  top: 432.25px;
}

#fried .fried-inner {
  width: 100%;
  border: 3px solid #DD8F00;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  gap: 80px;
  align-items: center;
  position: relative;
}

#fried .fried-corner {
  width: 179px;
  position: absolute;
  pointer-events: none;
}

#fried .fried-corner.top-left {
  top: -3px;
  left: -3px;
}

#fried .fried-corner.top-right {
  top: -3px;
  right: -3px;
  transform: scaleX(-1);
}

#fried .fried-corner.bottom-left {
  bottom: -3px;
  left: -3px;
  transform: scaleY(-1);
}

#fried .fried-corner.bottom-right {
  bottom: -3px;
  right: -3px;
  transform: scale(-1);
}

#fried .st-sub-tit {
  line-height: 130%;
}

#fried .fried-sub-tit {
  color: #F9F9F9;
  font-size: 40px;
  font-weight: 400;
  line-height: 100%; 
  letter-spacing: -1px;
}

/* 기존 문구와 변경 문구를 같은 자리에 겹침 (긴 문구 기준으로 자리 확보) */
#fried .fried-swap {
  display: grid;
  justify-items: center;
}

#fried .fried-swap > * {
  grid-area: 1 / 1;
}

#fried .fried-swap > :last-child {
  opacity: 0;
  visibility: hidden;
}

#fried .fried-container {
  max-width: 1340px;
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 4;
}

/* 카츠 이미지 기준으로 말풍선 위치(%) 배치 */
#fried .fried-visual {
  max-width: 742px;
  width: 65%;
  margin: 0;
  position: relative;
}

#fried .fried-katsu {
  width: 100%;
  display: block;
  position: relative;
  z-index: 3;
}

#fried .fried-bubble {
  position: absolute;
}

#fried .fried-bubble.reorder {
  width: 30.9%;
  left: -2.6%;
  top: 2.6%;
}

#fried .fried-bubble.soldout {
  width: 36.4%;
  left: 72.6%;
  top: 3.1%;
}

#fried .fried-bubble.healthy {
  width: 37.2%;
  left: -27.5%;
  top: 53.9%;
}

#fried .fried-bubble.dinner {
  width: 26.3%;
  left: 91.6%;
  top: 39.1%;
}

#fried .fried-container div {
  color: #DD8F00;
  /* 테두리를 글자 뒤에 그려 획이 가늘어지지 않게 (바깥쪽 절반만 보임 → 글자 크기 비례 두께) */
  -webkit-text-stroke-width: 0.18em;
  -webkit-text-stroke-color: #F9F9F9;
  paint-order: stroke fill;
  font-size: 48px;
  font-weight: 900;
  line-height: 100%; /* 52.813px */
  letter-spacing: -1.2px;
  position: relative;
}

#fried .first-badge {
  max-width: 198px;
  width: 50%;
  position: absolute;
  left: -145px;
  bottom: -0px;
}

#fried .st-tit.primary {
  padding: 12px 24px;
  background: #F9F9F9;
}

#fried .certificate {
  max-width: 581px;
  width: 55%;
  position: absolute;
  right: 0;
  bottom: 44.575px;
}


/* up */
#up {
  width: 100%;
  padding: 120px 0 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  overflow: hidden;
}

#up .st-sub-tit {
  padding: 16px 40px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 185, 54, 0.00) 0%, #FFB936 50%, rgba(255, 185, 54, 0.00) 100%);
}

.gold-point.big {
  font-size: 112px;
  line-height: 100%;
  letter-spacing: -3px;
}

#up .gold-point.big {
  margin-top: -3%;
}

/* 리뷰 슬라이드 + 말풍선 묶음 (말풍선 위치 기준) */
#up .up-review {
  width: 100%;
  position: relative;
  z-index: 4;
}

#up .review-swiper {
  /* max-width: 1300px; */
  width: 100%;
  overflow: hidden;
  z-index: 4;
}

#up .review-swiper .swiper-slide {
  width: 276px;
}

#up .review-swiper img {
  width: 100%;
  border-radius: 6.5px;
}

#up .up-bg-img.r {
  max-width: 370px;
  width: 30%;
  position: absolute;
  right: -134.062px;
  top: 91px;
}

#up .up-bg-img.l {
  max-width: 424px;
  width: 30%;
  position: absolute;
  left: -139.75px;
  bottom: 40.437px;
}

/* 말풍선 : 슬라이드 위/아래 여백에 배치 */
#up .up-bubble {
  max-width: 297px;
  width: 32%;
  position: absolute;
  z-index: 5;
}

#up .up-bubble.first {
  left: 4.2%;
  bottom: calc(100% + 20px);
}

#up .up-bubble.second {
  left: 13.2%;
  top: calc(100% + 38px);
}

#up .up-bubble.third {
  right: 19.4%;
  top: calc(100% + 65px);
}

#up .up-bubble.fourth {
  right: 4.2%;
  top: calc(100% + 171px);
}


/* direct */
#direct {
  width: 100%;
  padding: 120px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  position: relative;
  overflow: hidden;
  background: #20201F;
}

#direct .direct-wrap {
  max-width: 1300px;
  width: 92%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

#direct .direct-img {
  width: calc(33.3% - 40px);
  border-radius: 12px;
}

#direct .direct-swiper {
  width: 100%;
  display: none;
}

#direct .direct-swiper img {
  width: 100%;
  border-radius: 12px;
}


@media(min-width: 1600px) {
  #reels .reels-bubble.first {
    max-width: 267px;
  }
  #reels .reels-bubble.second {
    max-width: 289px;
  }
  #reels .reels-bubble.third {
    max-width: 310px;
  }
  #reels .reels-bubble.fourth {
    max-width: 292px;
  }
}

@media(max-width: 1500px) {
  #reels {
    gap: 100px;
  }
  #reels .reels-bubble.first {
    top: 60px;
    left: 12px;
  }
  #reels .reels-bubble.second {
    top: 300px;
    left: 26px;
  }
  #reels .reels-bubble.third {
    top: 55px;
    right: 16px;
  }
  #reels .reels-bubble.fourth {
    top: 290px;
    right: 9px;
  }
  #upward .upward-circle {
    left: 6px;
    top: -120px;
  }
  #fried {
    padding: 40px;
  }
}

@media(max-width: 1350px) {
  .br-1350 {
    display: block;
  }
  .none-1350 {
    display: none;
  }
}

@media (max-width: 1280px) {
  #hero .hero-txt p {
    font-size: 64px;
    letter-spacing: -1.6px;
  }
  #hero .hero-txt .gold-point {
    font-size: 80px;
    letter-spacing: -2px;
  }
  #reels .tit-wrap {
    gap: 32px;
  }
  #map {
    padding: 100px 0;
  }
  #map .desc div {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #map .desc div.big {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #map .desc div strong {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #revisit {
    gap: 60px;
    padding: 100px 0;
  }
  #revisit .st-tit {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #revisit .revisit-tab-wrap {
    flex-wrap: wrap;
    gap: 30px 0;
    justify-content: center;
  }
  #revisit .revisit-tab {
    flex: unset;
    width: 25%;
    font-size: 18px;
    letter-spacing: -0.45px;
    padding: 15px 0;
  }
  #upward, #waiting {
    padding: 100px 0;
  }
  #waiting {
    gap: 60px;
  }
  #sale {
    padding: 100px 0;
    gap: 60px;
  }
  #sale .sale-container {
    gap: 20px;
  }
  #sale .sale-info {
    gap: 60px;
  }
  #piechart {
    padding: 100px 0;
    gap: 60px;
  }
  #piechart .st-sub-tit {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #piechart .piechart-container {
    gap: 20px;
  }
  #piechart .piechart {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #piechart .piechart .o {
    font-size: 56px;
    letter-spacing: -1.4px;
  }
  #piechart .piechart-table-wrap small {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #fried {
    padding: 20px;
  }
  #fried .fried-corner {
    width: 120px;
  }
  #fried .fried-inner {
    padding: 100px 0;
    gap: 60px;
  }
  #fried .fried-sub-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #fried .fried-container div {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #up {
    padding: 100px 0 300px;
    gap: 70px;
  }
  .gold-point.big {
    font-size: 104px;
    letter-spacing: -2.6px;
  }
  #direct {
    padding: 100px 0;
    gap: 60px;
  }
  #direct .direct-wrap {
    gap: 20px;
  }
  #direct .direct-img {
    width: calc(33.3% - 13.3px);
  }
}

@media(max-width: 1024px) {
  #map .desc {
    gap: 32px;
  }
  #map .desc div {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #map .desc div.big {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #map .desc div strong {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #upward {
    gap: 200px;
  }
  #upward .upward-circle p {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #sale .sale-store {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 40px;
  }
  #sale .sale-info {
    gap: 32px;
    align-items: center;
    text-align: center;
  }
  #sale .sale-brand, #sale .sale-total {
    align-items: center;
    gap: 8px;
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #sale .sale-brand strong {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #sale .sale-total strong {
    font-size: 48px;
    letter-spacing: -1.2px;
  }
  #sale .sale-total small {
    font-size: 14px;
  }
  #sale .sale-center {
    max-width: 380px;
    width: 80%;
  }
  #sale .sale-profit {
    font-size: clamp(24px, 6vw, 40px);
  }
  #sale .sale-table {
    max-width: 460px;
  }
}

@media(max-width: 900px) {
  .pc {
    display: none !important;
  }
  .mobile {
    display: block;
  }
  .layer-popup .show-chk-wrap {
    margin-top: 0;
  }
  .layer-popup .show-chk-wrap a {
    font-size: 14px;
    line-height: 20px; /* 142.857% */
    letter-spacing: -0.35px;
  }
  .layer-popup .show-chk-wrap .x-btn {
    padding: 0 15px;
  }
  #hero .hero-txt p {
    font-size: 56px;
    letter-spacing: -1.4px;
  }
  #hero .hero-txt .gold-point {
    font-size: 72px;
    letter-spacing: -1.8px;
  }
  #reels .reels-swiper .swiper-slide {
    width: 270px;
  }
  #reels .bg-icon {
    width: 200%;
    min-width: 900px;
  }
  #map .map-container {
    flex-direction: column-reverse;
    gap: 50px;
  }
  #map .markermap {
    max-width: 550px;
    width: 100%;
  }
  #revisit .st-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #revisit .revisit-tab-wrap {
    gap: 25px 0;
  }
  #revisit .revisit-tab {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #revisit .revisit-tab::after {
    width: 22px;
    bottom: -18px;
  }
  #revisit .revisit-review-wrap {
    padding: 16px;
  }
  #revisit .revisit-swiper .swiper-slide {
    width: 220px;
  }
  #revisit .revisit-ready {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #upward {
    gap: 160px;
  }
  #upward .tit-div small {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #upward .upward-box {
    padding: 12px;
  }
  #upward .upward-year {
    width: 95%;
  }
  #upward .million {
    width: 18%;
    right: 0.5%;
    top: 14%;
  }
  #upward .upward-circle {
    gap: 4px;
    top: -140px;
  }
  #upward .upward-circle p {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #waiting .tit-wrap {
    gap: 24px;
  }
  #waiting .waiting-container {
    flex-direction: column;
  }
  #waiting .waiting-main {
    flex: none;
    width: 100%;
  }
  #waiting .waiting-swiper {
    width: 100%;
    margin: 12px 0 0;
    contain: none;
  }
  #waiting .waiting-swiper img, #waiting .waiting-swiper video {
    height: auto;
    aspect-ratio: 2742 / 1680;
  }
  #sale .sale-arrow {
    width: 50px;
  }
  #sale .tit-wrap small {
    font-size: 14px;
    letter-spacing: -0.35px;
    margin-top: -16px;
  }
  #sale .st-tit {
    gap: 16px;
  }
  #sale .sale-label {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #sale .sale-amount {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #piechart .st-sub-tit {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #piechart .piechart-container {
    flex-direction: column;
    gap: 50px;
  }
  #piechart .piechart-table-wrap {
    width: 100%;
    align-items: flex-start;
  }
  #piechart .piechart {
    max-width: 600px;
    width: 100%;
  }
  #piechart .piechart-table-wrap small {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #fried .fried-sub-tit {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #fried .fried-container div {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #fried .first-badge {
    left: -40%;
  }
  #up .st-sub-tit {
    width: 100%;
    padding: 12px 20px;
  }
  .gold-point.big {
    font-size: 88px;
    letter-spacing: -2.2px;
  }
  #up .review-swiper .swiper-slide {
    width: 240px;
  }
  #up .up-bg-img.r {
    width: 40%;
    right: -80px;
    top: 250px;
  }
  #up .up-bg-img.l {
    width: 40%;
    left: -60px;
    bottom: -40px;
  }
  #direct .direct-wrap {
    display: none;
  }
  #direct .direct-swiper {
    display: block;
  }
}

@media (max-width: 768px) {
  .layer-popup {
    max-height: 95vh !important;
    position: fixed;
    top: 2% !important;
    left: 5% !important;
    width: 80% !important;
    overflow: scroll;
  }
  #reels {
    gap: 80px;
    padding: 100px 0;
  }
  #reels .tit-wrap {
    gap: 24px;
  }
  #reels .reels-bubble.first {
    top: 38px;
    left: 12px;
  }
  #reels .reels-bubble.second {
    top: 280px;
  }
  #reels .reels-bubble.fourth {
    top: 290px;
  }
  #map {
    padding: 70px 16px;
  }
  #map .map-container {
    width: 100%;
  }
  #revisit {
    padding: 70px 16px;
    gap: 50px;
  }
  #revisit .revisit-container {
    width: 100%;
  }
  #upward {
    gap: 0;
    padding: 70px 16px;
  }
  #upward .st-tit {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #upward .upward-container {
    width: 100%;
    margin-top: 30%;
  }
  #upward .upward-circle p {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #upward .upward-arrow {
    right: 5%;
  }
  #waiting {
    padding: 70px 16px;
    gap: 50px;
  }
  #waiting .tit-wrap {
    gap: 12px;
  }
  #waiting .waiting-container {
    width: 100%;
  }
  .cloud {
    top: 120px;
  }
  .line-cloud {
    bottom: 44px;
  }
  #sale {
    padding: 70px 0;
    gap: 50px;
  }
  #sale .tit-wrap {
    gap: 16px;
  }
  #sale .tit-wrap small {
    margin-top: -4px;
  }
  #sale .st-tit {
    gap: 12px;
  }
  #sale .sale-store {
    gap: 32px;
  }
  #sale .sale-info {
    gap: 24px;
  }
  #piechart {
    padding: 70px 16px;
    gap: 50px;
  }
  #piechart .piechart-container {
    width: 100%;
  }
  #fried {
    padding: 40px 16px;
  }
  #fried .fried-corner {
    width: 80px;
  }
  #fried .fried-inner {
    padding: 70px 0;
    gap: 32px;
  }
  #fried .fried-container {
    gap: 8px;
  }
  #fried .fried-visual {
    margin-bottom: 24px;
  }
  #fried .certificate {
    bottom: -5px;
  }
  #up {
    padding: 70px 0 250px;
  }
  #direct {
    padding: 70px 0;
    gap: 40px;
  }
  #direct .direct-swiper img {
    border-radius: 6px;
  }
}

@media (max-width: 650px) {
  #hero .hero-txt p {
    font-size: 48px;
    letter-spacing: -1.2px;
  }
  #hero .hero-txt .gold-point {
    font-size: 64px;
    letter-spacing: -1.6px;
  }
  #reels .reels-swiper .swiper-slide {
    width: 240px;
  }
  #revisit .st-tit {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #revisit .revisit-badge {
    left: -15%;
  }
  #revisit .revisit-container {
    gap: 16px;
  }
  #revisit .revisit-tab-wrap {
    gap: 4px 0;
  }
  #revisit .revisit-tab {
    width: 33.3%;
    padding: 12px 0;
  }
  #revisit .revisit-tab::after {
    display: none;
  }
  #revisit .revisit-review-wrap {
    padding: 12px;
    border-radius: 8px;
  }
  #revisit .revisit-swiper .swiper-slide {
    width: 180px;
    border-radius: 4px;
  }
  #revisit .revisit-ready {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #upward .st-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #upward .tit-div small {
    font-size: 12px;
    letter-spacing: -0.35px;
  }
  #upward .upward-circle {
    top: -90px;
  }
  #upward .upward-circle p {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #waiting .waiting-main {
    border-radius: 8px;
  }
  #waiting .waiting-swiper .swiper-slide {
    border-radius: 8px;
  }
  #waiting .st-tit {
    flex-direction: column;
    gap: 6px;
  }
  #waiting .st-tit .primary {
    padding: 6px;
  }
  #sale .sale-container {
    gap: 0;
  }
  #sale .sale-arrow {
    width: 50px;
  }
  #sale .tit-wrap small {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
  #sale .sale-brand, #sale .sale-total {
    gap: 6px;
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #sale .sale-brand strong {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #sale .sale-total strong {
    font-size: 40px;
    letter-spacing: -1px;
  }
  #sale .sale-total small {
    font-size: 12px;
  }
  #piechart .st-sub-tit {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #piechart .piechart-table th {
    height: auto;
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #piechart .piechart-table td {
    height: auto;
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #piechart .piechart-table tfoot td {
    font-size: 22px;
    letter-spacing: -0.55px;
  }
  #piechart .piechart-table tfoot td:nth-child(2) {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #fried .fried-inner {
    border-width: 2px;
  }
  #fried .fried-corner.top-left {
    top: -2px;
    left: -2px;
  }
  #fried .fried-corner.top-right {
    top: -2px;
    right: -2px;
  }
  #fried .fried-corner.bottom-left {
    bottom: -2px;
    left: -2px;
  }
  #fried .fried-corner.bottom-right {
    bottom: -2px;
    right: -2px;
  }
  #fried .fried-sub-tit {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #fried .fried-container div {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #fried .st-tit.primary {
    padding: 4.736px 9.471px;
  }
  #fried .st-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  .gold-point.big {
    font-size: 80px;
    letter-spacing: -2px;
  }
  #up .up-bubble {
    width: 38%;
  }
  #up .up-bubble.first {
    left: 8.7%;
    bottom: auto;
    top: calc(100% + 16px);
  }
  #up .up-bubble.second {
    left: 14.5%;
    top: calc(100% + 135px);
  }
  #up .up-bubble.third {
    left: 13.3%;
    right: auto;
    top: auto;
    bottom: calc(100% + 20px);
  }
  #up .up-bubble.fourth {
    right: 4.5%;
    top: calc(100% + 63px);
  }
}

@media(max-width: 550px) {
  #hero .hero-txt p {
    font-size: 40px;
    line-height: 1.5;
    letter-spacing: -1px;
  }
  #hero .hero-txt .gold-point {
    font-size: 56px;
    letter-spacing: -1.4px;
  }
  #up .st-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
}

@media (max-width: 480px) {
  #reels .st-tit .gold-point {
    font-size: 36px;
    letter-spacing: -0.9px;
  }
  #reels .reels-bubble.first {
    width: 33%;
  }
  #reels .reels-bubble.second {
    width: 34%;
    top: 255px;
  }
  #reels .reels-bubble.third {
    width: 34.2%;
  }
  #reels .reels-bubble.fourth {
    width: 34.5%;
    top: 270px;
  }
  #reels .reels-swiper .swiper-slide {
    width: 200px;
  }
  #map .flex {
    gap: 8px;
  }
  #map .desc {
    width: 100%;
  }
  #map .desc div {
    gap: 8px;
  }
  #map .desc div.big {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #map .desc div strong {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #map .desc div .w {
    padding: 4px 8px;
  }
  #revisit .st-tit {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #revisit .st-sub-tit {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #revisit .revisit-tab {
    font-size: 14px;
    letter-spacing: -0.4px;
  }
  #revisit .revisit-swiper .swiper-slide {
    width: 150px;
  }
  #revisit .revisit-ready {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #revisit .revisit-tab {
    width: 50%;
  }
  #upward .st-tit {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #upward .st-sub-tit {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #upward .st-tit .gold-point {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #upward .upward-circle p {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #sale .sale-arrow {
    width: 40px;
  }
  #sale .tit-wrap small {
    font-size: 10px;
    letter-spacing: -0.25px;
  }
  #sale .sale-label {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #sale .sale-amount {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #piechart .st-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #piechart .st-sub-tit {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #piechart .piechart-table th {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #piechart .piechart-table td {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #piechart .piechart-table tfoot td {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #piechart .piechart-table tfoot td:nth-child(2) {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #piechart .piechart-table-wrap small {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #piechart .piechart {
    font-size: 28px;
    letter-spacing: -0.7px;
    gap: 6.65px;
  }
  #piechart .piechart .o {
    font-size: 48px;
    letter-spacing: -1.2px;
  }
  #fried .st-sub-tit {
    line-height: 135%;
  }
  #fried .fried-sub-tit {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #fried .fried-container div {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #fried .st-sub-tit .primary {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #fried .fried-visual {
    width: 90%;
  }
  #fried .fried-bubble.reorder {
    width: 25.9%;
    left: 4.4%;
  }
  #fried .fried-bubble.soldout {
    width: 30.4%;
    left: 68.6%;
  }
  #fried .fried-bubble.healthy {
    width: 30.2%;
    left: -8.5%;
    top: 69.9%;
  }
  #fried .fried-bubble.dinner {
    width: 23.3%;
    left: 82.6%;
    top: 73.1%;
  }
  #fried .fried-corner {
    width: 50px;
  }
  #fried .first-badge {
    width: 40%;
    left: -30%;
  }
  #up {
    padding: 70px 0 210px;
  }
  #up .st-sub-tit {
    padding: 8px 10px;
  }
  #up .st-tit {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  .gold-point.big {
    font-size: 68px;
    letter-spacing: -1.7px;
  }
  #up .up-bubble {
    width: 43%;
  }
  #up .up-bg-img.r {
    width: 53%;
    right: -31px;
    top: 220px;
  }
  #up .up-bg-img.l {
    width: 55%;
    left: -44px;
    bottom: -37.901px;
  }
  #up .review-swiper .swiper-slide {
    width: 200px;
  }
  #up .up-bubble.second {
    top: calc(100% + 115px);
  }
  #direct .st-tit {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #direct .st-sub-tit {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
}

@media(max-width: 400px) {
  #reels .st-tit .gold-point {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #map .desc div.big {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #map .desc div strong {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #revisit .st-tit {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #upward .tit-div small {
    font-size: 10px;
    letter-spacing: -0.3px;
  }
  #revisit .st-sub-tit {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #revisit .revisit-swiper .swiper-slide {
    width: 120px;
  }
  #upward .st-tit {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #upward .st-sub-tit {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #upward .st-tit .gold-point {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #upward .upward-circle {
    top: -70px;
  }
  #upward .upward-circle p {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
  #sale .sale-arrow {
    width: 30px;
  }
  #sale .sale-label {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #sale .sale-amount {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #piechart .piechart-table th {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #piechart .piechart-table td {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #piechart .piechart-table tfoot td {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #piechart .piechart-table tfoot td:nth-child(2) {
    font-size: 22px;
    letter-spacing: -0.55px;
  }
  #piechart .piechart-table-wrap small {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
  #piechart .piechart {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #piechart .piechart .o {
    font-size: 45px;
    letter-spacing: -1.15px;
  }
  #fried .st-sub-tit, #fried .fried-sub-tit {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
  #fried .st-sub-tit .primary {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #fried .st-tit {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #fried .fried-container div {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #up .st-tit {
    font-size: 22px;
    letter-spacing: -0.55px;
  }
  .gold-point.big {
    font-size: 60px;
    letter-spacing: -1.5px;
  }
  #up .up-bubble {
    width: 47%;
  }
  #up .up-bg-img.r, #up .up-bg-img.l {
    width: 200px;
  }
  #direct .st-sub-tit {
    font-size: 14px;
    letter-spacing: -0.35px;
  }
}

@media(max-width: 370px) {
  #hero .hero-txt p {
    font-size: 32px;
    line-height: 1.6;
    letter-spacing: -0.8px;
  }
  #hero .hero-txt .gold-point {
    font-size: 48px;
    letter-spacing: -1.2px;
  }
  #reels .reels-bubble.first {
    width: 35%;
  }
  #reels .reels-bubble.second {
    width: 36%;
    top: 275px;
  }
  #reels .reels-bubble.third {
    width: 36.2%;
  }
  #reels .reels-bubble.fourth {
    width: 36.5%;
    top: 285px;
  }
  #map .desc div, #map .desc div.big {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #map .desc div strong {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  #revisit .revisit-badge {
    width: 40%;
    left: -27%;
    top: 5%;
  }
  #upward .st-tit {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #upward .st-tit .gold-point {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #upward .upward-circle p {
    font-size: 10px;
    letter-spacing: -0.25px;
  }
  #sale .sale-brand, #sale .sale-total {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #sale .sale-brand strong {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #sale .sale-total strong {
    font-size: 32px;
    letter-spacing: -0.8px;
  }
  #piechart .piechart-table tfoot td {
    font-size: 16px;
    letter-spacing: -0.4px;
  }
  #piechart .piechart-table-wrap small {
    font-size: 10px;
    letter-spacing: -0.25px;
  }
  #fried .st-tit {
    font-size: 24px;
    letter-spacing: -0.6px;
  }
  #fried .fried-container div {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  #up .st-tit {
    font-size: 20px;
    letter-spacing: -0.5px;
  }
  .gold-point.big {
    font-size: 56px;
    letter-spacing: -1.4px;
  }
}

@media(max-width: 330px) {
  #revisit .revisit-tab {
    font-size: 12px;
    letter-spacing: -0.3px;
  }
  #upward .st-tit.flex {
    flex-direction: column;
    gap: 6px;
  }
  #direct .st-tit {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
}

@media(max-width: 300px) {
  #reels .st-tit .gold-point {
    font-size: 28px;
    letter-spacing: -0.7px;
  }
  #up .st-tit {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
  .gold-point.big {
    font-size: 50px;
    letter-spacing: -1.225px;
  }
  #sale .sale-label {
    font-size: 10px;
    letter-spacing: -0.25px;
  }
  #sale .sale-amount {
    font-size: 18px;
    letter-spacing: -0.45px;
  }
}