@charset "UTF-8";

section {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

section {
  font-family: "Pretendard Variable";
  font-weight: 300;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.04vw;
}

section img {
  width: 100%;
}

/* 마커디자인 */
.map_marker {
  position: relative;
  display: inline-block;
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
  background: #711835;
  border: 1px solid #fff;
  padding: 9px 19px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}

/* 말풍선 꼬리 (삼각형 테두리) */
.map_marker_tail {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

/* 말풍선 꼬리 내부 (흰색 채우기) */
.map_marker_tail::after {
  content: "";
  position: absolute;
  top: -9px;
  left: -7px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid #711835;
}

/* 퍼블시작 */

/* ===== 모바일 지도 터치 잠금 오버레이 (md/map_zoom_control.md §3) ===== */
.map-touch-lock-parent {
  position: relative;
}

.map-touch-lock {
  position: absolute;
  z-index: 30;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.58);
  border: 0;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

.map-touch-lock-text {
  display: block;
  padding: 0 calc(var(--px) * 20);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
}

.is-map-touch-unlocked .map-touch-lock {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 599px) {
  .map-touch-lock-text {
    font-size: 4.3vw;
    padding: 0 4vw;
  }
}

/* ═══════════ SECTIONS — 각 섹션은 자기 @@마커 사이에만 작성(병렬 작업) ═══════════ */
/* @@main:start */
.main {
  align-items: flex-start;
  box-sizing: border-box;
  padding: 19vw 0 16.6vw calc(var(--px) * 233);
  background-image: url('/images/main_01.jpg');
}

.main_tt02 {
  align-items: flex-start;
  font-size: calc(var(--px) * 80);
  line-height: 5vw;
  letter-spacing: -0.21vw;
  text-align: left;
}

.main_tt03 {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 24);
  line-height: 1.8vw;
  text-align: left;
}

/* 히어로 등장(main-m01) — 헤드라인·서브는 엔진(data-mo)이 로드 직후 올린다.
   배경 사진은 CSS background 라 따로 움직일 요소가 없다 → 사진 위에 흰 베일(::after)을 얹어 두었다가, 사진이 준비되면
   js/animation.js @@main 이 .main_go 를 붙여 베일을 걷어내 사진이 서서히 나타나게 한다.
   베일은 html.js-mo(모션 준비 중)에서만 존재 → ?nomo=1·스크립트 실패(5초 안전망이 js-mo 를 뗀다)에서는 없다(시안 정지 상태 불변). 글자는 베일 위(z-index 1). */
.main_tt02,
.main_tt03 {
  position: relative;
  z-index: 1;
}

.main::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  pointer-events: none;
}

html.js-mo .main::after {
  opacity: 1;
}

html.js-mo .main.main_go::after {
  animation: main_veil 1.2s ease-out both;
}

@keyframes main_veil {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
/* @@main:end */

/* @@con01:start */
.con01 {
  padding-top: 7.3vw;
  padding-bottom: calc(var(--px) * 124);
  background: linear-gradient(180deg, #fefeff 0%, #fefdff 12.3%, #fdfbff 24.6%, #fcf9ff 36.9%, #fbf7ff 49.1%, #faf6ff 61.4%, #f9f5ff 73.7%, #f9f4ff 86%, #f9f4ff 100%);
}

.con01_tt02_txt {
  margin-top: 1.2vw;
}

.con01_tt03 {
  margin-top: 1vw;
}

.con01_list {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 20);
  margin-top: 2.8vw;
}

.con01_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 440);
  height: calc(var(--px) * 250);
  padding-top: calc(var(--px) * 69);
  border-radius: calc(var(--px) * 30);
  background-color: var(--color-point);
  overflow: hidden;
}

.con01_label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 47);
  padding: 0 calc(var(--px) * 20.5);
  font-size: calc(var(--px) * 35);
  font-weight: 800;
  line-height: 1.9vw;
  letter-spacing: -0.1vw;
  color: var(--color-yellow);
}

/* 신호등(con01-m01) — .con01_on 이 카드를 돌아다닌다. 강조 카드 = 사진 배경 + 노란 라벨(톡 튐). 시안 정지 상태(카드1)와 위치가 같도록 카드는 움직이지 않는다 */
.con01_card_photo {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.con01_label {
  transition: background-color 0.4s, color 0.4s;
}

.con01_on .con01_card_photo {
  opacity: 1;
}

.con01_on .con01_label {
  background-color: var(--color-yellow);
  color: var(--color-point);
  animation: mo_pop 0.55s ease-out;
}

.con01_txt {
  margin-top: 0.4vw;
  font-size: calc(var(--px) * 22);
  line-height: 1.7vw;
  letter-spacing: -0.06vw;
  text-align: center;
}
/* @@con01:end */

/* @@con02:start */
.con02 {
  padding-top: 6.4vw;
  padding-bottom: calc(var(--px) * 88);
}

.con02_bowl {
  display: flex;
  justify-content: center;
  align-items: center;
  left: -9.6%;
  top: calc(var(--px) * 289);
  width: calc(var(--px) * 950);
  aspect-ratio: 950 / 510;
}

.con02_cup {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 1378);
  top: 10.8vw;
  width: calc(var(--px) * 284);
  aspect-ratio: 284 / 452;
}

.con02_sandwich {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 76.9%;
  top: 27.3vw;
  width: calc(var(--px) * 631);
  aspect-ratio: 631 / 433;
}

.con02_tt03 {
  margin-top: 0.5vw;
}

.con02_tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: calc(var(--px) * 77); /* 활성 탭(.con02_tab_on)과 같은 높이로 고정 — 탭이 늘고 줄어도 아래 패널이 안 밀린다 */
  column-gap: calc(var(--px) * 11);
  margin-top: calc(var(--px) * 33);
  margin-bottom: -1px;
}

.con02_tab {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 160);
  height: calc(var(--px) * 62);
  padding-top: calc(var(--px) * 2);
  box-sizing: border-box;
  border-radius: calc(var(--px) * 20) calc(var(--px) * 20) 0 0;
  background-color: var(--color-point);
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  line-height: 1.6vw;
  letter-spacing: -0.06vw;
  transition: height 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
}

.con02_tab_on {
  height: calc(var(--px) * 77);
}

.con02_panel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 1051);
  height: calc(var(--px) * 401);
  padding: calc(var(--px) * 44) 0 0 calc(var(--px) * 50);
  border: 1px solid var(--color-point);
  border-radius: calc(var(--px) * 30);
  background-color: #fefefe;
}

.con02_panel_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 540);
  aspect-ratio: 540 / 310;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
}

.con02_panel_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 82);
  margin-left: calc(var(--px) * 68);
}

.con02_panel_tt {
  font-size: calc(var(--px) * 34);
  font-weight: 800;
  line-height: 2.3vw;
  letter-spacing: -0.09vw;
  color: var(--color-dark);
}

.con02_panel_txt {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 20);
  line-height: 1.6vw;
  letter-spacing: -0.05vw;
  color: var(--color-dark);
}
/* con02 탭 → 패널 전환(js/script.js @@con02 가 .con02_panel_out → .hide 교체 → .con02_panel_in 순서로 건다). 개별 translate 속성이라 등장 모션 transform 과 안 겹친다 */
.con02_panel_out {
  animation: con02_panel_out 0.2s ease-in forwards;
}

.con02_panel_in {
  animation: con02_panel_in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes con02_panel_out {
  to {
    opacity: 0;
    translate: 0 -0.7vw;
  }
}

@keyframes con02_panel_in {
  from {
    opacity: 0;
    translate: 0 1.4vw;
  }
}
/* @@con02:end */

/* @@con0304:start */
/* ── con03 : 아침/점심/저녁 + BREAKFAST (큰틀 con0304 의 1번째 영역) ── */
.con03 {
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-bottom: calc(var(--px) * 182);
  background: linear-gradient(180deg, var(--color-point) 0, var(--color-point) calc(var(--px) * 900), #fff calc(var(--px) * 900));
}

.con03_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 1050);
  height: calc(var(--px) * 505);
  padding-top: calc(var(--px) * 62);
  border-radius: 0 0 calc(var(--px) * 50) calc(var(--px) * 50);
  background-color: #fff;
}

.con03_pills {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con03_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 186);
  height: 1px;
  background-color: var(--color-point);
}

.con03_pill_list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: calc(var(--px) * 23);
}

.con03_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 70);
  height: calc(var(--px) * 70);
  border-radius: 50%;
  background-color: var(--color-light);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.05vw;
  color: #d0bce6;
}

.con03_pill_on {
  background-color: var(--color-point);
  color: #fff;
}

/* 신호등(con03-m01) — 활성 알약이 톡 튀고, 음식은 크로스페이드 */
.con03_pill {
  cursor: pointer;
  transition: background-color 0.4s, color 0.4s;
}

.con03_pill_on {
  animation: mo_pop 0.55s ease-out;
}

.con03_food {
  justify-content: center;
  opacity: 0;
  scale: 0.92;
  transition: opacity 0.5s ease, scale 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.con03_food_on {
  opacity: 1;
  scale: 1;
}

/* 저녁 보울(617x615 정원형)은 컨테이너 높이(599)에 맞춰 폭을 줄인다 */
.con03_food_img_03 {
  width: 83.8142%;
}

.con03_tt02_txt {
  margin-top: 1.9vw;
}

.con03_tt03 {
  margin-top: 0.6vw;
}

.con03_word {
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 146);
  font-weight: 900;
  line-height: calc(var(--px) * 145);
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
}

.con03_word_line {
  order: 1;
  margin-top: calc(var(--px) * 39);
  color: transparent;
  -webkit-text-stroke: 1px #fff;
}

/* 층: 흰 글씨(solid)는 아침·점심·저녁 모두 음식 아래(-1, .con03 배경 위)로 숨고, 외곽선 글씨(line)는 항상 음식 위(유저 지시).
   z-index 는 flex 아이템이라 position 없이 먹고, GSAP transform 이 걸려도 층이 안 바뀐다 */
.con03_word_solid {
  order: 2;
  z-index: -1;
}

.con03_sandwich {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 21.9vw;
  width: calc(var(--px) * 717);
  aspect-ratio: 717 / 599;
}

/* ── con04 : 샐러픽 메뉴 안내 (큰틀 con0304 의 2번째 영역, 게시판 main_menu) ── */
.con04 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(var(--px) * -116);
  padding-top: 9vw;
  padding-bottom: calc(var(--px) * 100.4);
}

.con04_cats {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1320);
  height: calc(var(--px) * 84);
  margin-top: 2vw;
  border-radius: calc(var(--px) * 20);
  background-color: var(--color-point);
}

.con04_cat_item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.con04_cat_dot {
  width: calc(var(--px) * 6);
  height: calc(var(--px) * 6);
  margin: 0 calc(var(--px) * 49);
  border-radius: 50%;
  background-color: #fff;
}

.con04_cat {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--px) * 21.34);
  font-weight: 700;
  line-height: 1.6vw;
  letter-spacing: -0.06vw;
}

.con04_cat_on {
  color: var(--color-light);
}

.con04_slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 1320);
  margin-top: calc(var(--px) * 39);
}

.con04_panel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.con04_swiper {
  width: 100%;
}

.con04_prev,
.con04_next {
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(var(--px) * 128);
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 55);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
}

.con04_prev {
  left: calc(var(--px) * -81);
}

.con04_next {
  left: calc(var(--px) * 1345);
}

.con04_arrow {
  width: calc(var(--px) * 19);
}

.con04_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.con04_card {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 311);
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con04_card_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 223);
  aspect-ratio: 223 / 221;
  overflow: hidden;
}

.con04_card_name {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 21.34);
  font-weight: 700;
  line-height: 1.6vw;
  letter-spacing: -0.06vw;
  text-align: center;
  color: #000;
}

.con04_empty {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 357);
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 30);
  font-size: calc(var(--px) * 22);
  font-weight: 500;
  line-height: 1.7vw;
  letter-spacing: -0.06vw;
  color: var(--color-dark);
}
/* @@con0304:end */

/* @@con0506:start */
/* ── con05 : SNS 릴스 롤링 + 샐러드볼 (큰틀 con0506 의 1번째 영역) ── */
.con05 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 175.5);
  background: url(/images/con05_01.png) no-repeat 0 calc(var(--px) * 77) / 100% auto, linear-gradient(180deg, var(--color-point) 0, var(--color-point) calc(var(--px) * 900), #fff calc(var(--px) * 900));
}

.con05_bubble {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 35.2%;
  top: 9.2vw;
  width: calc(var(--px) * 131);
  aspect-ratio: 131 / 87;
}

.con05_bubble_txt {
  justify-content: center;
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 28);
  font-weight: 800;
  line-height: 1.5vw;
  letter-spacing: 0;
  color: var(--color-point);
  transform: rotate(-15.7deg);
}

/* 말풍선 까딱(con05-m02) — 루프(mo_wiggle)는 등장(data-mo)을 받는 .con05_bubble 이 아니라 안쪽 래퍼에 건다(GSAP 이 루프의 rotate 를 transform 에 굽는 것을 피함).
   회전축 = 말풍선 꼬리(이미지 하단 55%) */
.con05_bubble_in {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  --mo-origin: 55% 96%;
}

.con05_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: calc(var(--px) * 1679);
}

.con05_reel {
  width: calc(var(--px) * 564);
  margin-top: calc(var(--px) * 115.5);
}

.con05_reel_card {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 272);
  height: calc(var(--px) * 489);
  border-radius: calc(var(--px) * 30);
  background-color: #000;
  overflow: hidden;
}

.con05_center {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 551);
}

.con05_tt03 {
  margin-top: calc(var(--px) * 19);
}

.con05_bowl {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 786);
  aspect-ratio: 786 / 554;
  margin-top: calc(var(--px) * 57.9);
  margin-right: calc(var(--px) * 15);
}

/* ── con06 : 고객 후기 (큰틀 con0506 의 2번째 영역) ── */
.con06 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(var(--px) * -116);
  background: linear-gradient(180deg, #fff 0, #fff 10%, #fefeff 20%, #fdfdff 30%, #fdfbff 40%, #fbf8ff 50%, #faf6ff 60%, #faf5ff 70%, #faf4ff 85%, #faf4ff 100%);
}

.con06_in {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 190);
  padding-bottom: calc(var(--px) * 92.1);
}

.con06_bubble {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 78);
  border-radius: calc(var(--px) * 20);
  background-color: var(--color-point);
}

.con06_bubble::after {
  content: "";
  position: absolute;
  top: calc(var(--px) * 74);
  width: calc(var(--px) * 26);
  height: calc(var(--px) * 20);
  background-color: var(--color-point);
}

.con06_bubble_01 {
  left: 15.4%;
  top: 8vw;
  width: calc(var(--px) * 326);
}

.con06_bubble_01::after {
  left: calc(var(--px) * 174);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.con06_bubble_02 {
  left: 6.1%;
  top: 14.9vw;
  width: calc(var(--px) * 265);
}

.con06_bubble_02::after {
  left: calc(var(--px) * 143);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

.con06_bubble_03 {
  left: 67.7%;
  top: 8.7vw;
  width: calc(var(--px) * 337);
}

.con06_bubble_03::after {
  left: calc(var(--px) * 94);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.con06_bubble_04 {
  left: 77.5%;
  top: 15.2vw;
  width: calc(var(--px) * 356);
}

.con06_bubble_04::after {
  left: calc(var(--px) * 103);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

.con06_bubble_txt {
  font-size: calc(var(--px) * 20.37);
  font-weight: 700;
  line-height: 1.6vw;
  letter-spacing: -0.05vw;
  text-align: center;
}

.con06_emoji {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 67);
}

.con06_emoji_01 {
  left: 5.2%;
  top: 12vw;
  aspect-ratio: 67 / 74;
}

.con06_emoji_02 {
  left: 83.4%;
  top: 6.5vw;
  aspect-ratio: 67 / 66;
}

.con06_tt02_txt {
  font-size: calc(var(--px) * 57);
  line-height: 3.6vw;
  letter-spacing: -0.15vw;
}

.con06_tt03 {
  margin-top: calc(var(--px) * 14);
}

/* 후기 카드는 한 줄로 쭉 흐르고, 보라색 점수 박스(.con06_score)가 그 위 가운데에 absol 로 얹힌다(유저 지시). 좌표 없이 flex 가운데 정렬에 맡긴다 */
.con06_row {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: calc(var(--px) * 47);
}

.con06_belt_l {
  width: 100%;
  margin: 0;
}

.con06_slide {
  width: calc(var(--px) * 280);
  margin-right: calc(var(--px) * 20);
}

.con06_rev {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 280);
  aspect-ratio: 280 / 440;
  outline: 1px solid #dcdcdc;
  outline-offset: -1px;
  border-radius: calc(var(--px) * 30);
  overflow: hidden;
}

.con06_score {
  position: absolute;
  z-index: 2; /* Swiper 가 .swiper 에 z-index:1 을 걸어 슬라이드 컨테이너가 스택 컨텍스트라 마크업 순서로는 못 이긴다 — .btn_arr 와 같은 층(2) */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 423);
  height: calc(var(--px) * 440);
  border-radius: calc(var(--px) * 30);
  background-color: var(--color-point);
  overflow: hidden;
}

.con06_score_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 337);
  height: calc(var(--px) * 52);
  margin-top: calc(var(--px) * 63);
  border-radius: 50vw;
  background-color: #fff;
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.07vw;
  color: var(--color-point);
}

.con06_score_num {
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-shrink: 0;
  margin-top: calc(var(--px) * 24);
  font-family: var(--font-poppins);
  line-height: 1;
  color: #fff;
}

.con06_score_big {
  font-size: calc(var(--px) * 100.5);
  font-weight: 800;
  letter-spacing: -0.26vw;
}

.con06_score_small {
  margin-left: calc(var(--px) * 18);
  font-size: calc(var(--px) * 37.7);
  font-weight: 500;
  letter-spacing: -0.1vw;
}

.con06_score_img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 340);
  aspect-ratio: 340 / 337;
  margin-top: calc(var(--px) * 10.5);
  margin-right: calc(var(--px) * 6);
}
/* con06 후기 마퀴 — Swiper 대신 CSS 무한 이동(슬라이드 경계마다 멈칫하던 것 제거). 카드 세트를 js/slide.js 가 한 번 복제해 한 세트 폭(-50%)만큼 흘리면 이음매 없이 이어진다. 속도 = 카드 1장 8초(예전 Swiper 와 같음) */
.con06_belt .swiper-wrapper {
  width: max-content;
  animation: con06_belt_run 96s linear infinite; /* 카드 12장 한 세트 = 3600px → 초당 약 37px(예전 Swiper 와 같은 속도) */
}

.con06_belt_l .swiper-wrapper {
  margin-left: -8.24vw;
}

@keyframes con06_belt_run {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* con06 말풍선 둥둥(.ddm 은 등장 뒤 엔진이 붙인다) — 말풍선마다 위상을 달리해 한꺼번에 오르내리지 않게 */
.con06_bubble_02.ddm {
  animation-delay: -0.8s;
}

.con06_bubble_03.ddm {
  animation-delay: -1.6s;
}

.con06_bubble_04.ddm {
  animation-delay: -2.4s;
}
/* @@con0506:end */

/* @@con07:start */
.con07 {
  padding-top: calc(var(--px) * 141.5);
  padding-bottom: calc(var(--px) * 214);
  background-image: url(/images/con07_01.png);
}

.con07_watermark {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 38.5vw;
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 195.3);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--color-point);
  mix-blend-mode: screen;
  opacity: 0.63;
}

.con07_tt03 {
  margin-top: 0.6vw;
}

.con07_cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 41);
  margin-top: calc(var(--px) * 58.5);
}

.con07_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 386);
}

.con07_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 386);
  height: calc(var(--px) * 37);
  border: 5px solid var(--color-yellow);
  border-radius: 50vw;
  background-color: var(--color-point);
  box-shadow: inset 0 6px 2px rgba(0, 0, 0, 0.35);
}

.con07_sheet {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 347);
  height: calc(var(--px) * 248);
  margin-top: calc(var(--px) * -20);
  padding-top: calc(var(--px) * 52);
}

.con07_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 39);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-size: calc(var(--px) * 23.06);
  font-weight: 700;
  line-height: 1.7vw;
  letter-spacing: -0.08vw;
}

.con07_pill_01 {
  width: calc(var(--px) * 141);
}

.con07_pill_02 {
  width: calc(var(--px) * 162);
}

.con07_pill_03 {
  width: calc(var(--px) * 198);
}

.con07_sub {
  margin-top: calc(var(--px) * 20);
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 18.05);
  font-weight: 400;
  line-height: 1.1vw;
  letter-spacing: -0.07vw;
  color: #000;
}

.con07_num {
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin-top: calc(var(--px) * 10);
  font-weight: 800;
  line-height: 1;
  color: var(--color-dark);
}

.con07_num_val {
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.12vw;
  position: relative;
  text-align: right;
}

/* 숫자 CT(con07-m01) — 카운트 중 숫자 폭이 변해도 단위(원)·카드 가운데 정렬이 흔들리지 않게 칸 크기를 완성 숫자(data-final)의 투명 유령이 잡고,
   실제 숫자(.con07_num_txt)는 칸 오른쪽 끝에 붙여 띄운다. 완성 상태에서는 유령과 숫자가 같은 폭이라 레이아웃·픽셀이 이전과 같다 */
.con07_num_val::after {
  content: attr(data-final);
  display: block;
  visibility: hidden;
}

.con07_num_txt {
  position: absolute;
  top: 0;
  right: 0;
  white-space: nowrap;
}

.con07_num_unit {
  font-size: calc(var(--px) * 30);
  letter-spacing: -0.08vw;
}
/* con07-m03 영수증 출력 — 용지가 프린터 입구(.con07_bar) 아래로 밀려 나온다. 선숨김은 엔진과 같은 html.js-mo 규칙(5초 안전망으로 풀림), 등장 시작 때 .mo-in */
html.js-mo .con07_sheet:not(.mo-in) {
  clip-path: inset(100% 0 0 0);
}
/* @@con07:end */

/* @@con08:start */
.con08 {
  padding-top: 7.1vw;
  padding-bottom: 3.4vw;
}

.con08_tt03 {
  margin-top: 0.4vw;
}

.con08_top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 30);
  width: 100%;
  margin-top: 2.8vw;
}

/* 퍼플 카드 — 사진 2장이 카드를 파고들다 우·하단에서 잘린다 */
.con08_sales {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 835);
  height: calc(var(--px) * 565);
  padding-top: 5.2vw;
  padding-left: calc(var(--px) * 82);
  box-sizing: border-box;
  border-radius: calc(var(--px) * 30);
  background-color: var(--color-point);
  overflow: hidden;
}

.con08_sales_img01 {
  width: calc(var(--px) * 319);
  aspect-ratio: 319 / 223;
  left: 50.6587%;
  top: 0.5vw;
}

.con08_sales_img02 {
  width: calc(var(--px) * 682);
  aspect-ratio: 682 / 367;
  left: 38.9222%;
  top: 12.7vw;
}

.con08_sales_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con08_sales_item02 {
  margin-top: 3.4vw;
}

.con08_sales_badge {
  width: calc(var(--px) * 176);
  height: calc(var(--px) * 50);
  margin-left: calc(var(--px) * 2);
  border-radius: 50vw;
  background-color: #fff;
  color: var(--color-point);
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  letter-spacing: -0.06vw;
}

.con08_sales_badge02 {
  width: calc(var(--px) * 209);
  height: calc(var(--px) * 49);
}

.con08_sales_num {
  margin-top: 1.6vw;
  font-size: calc(var(--px) * 75);
  font-weight: 700;
  line-height: 3.5vw;
  letter-spacing: -0.2vw;
  color: #fff;
}

/* 수익 표 카드 */
.con08_table {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 574);
  height: calc(var(--px) * 565);
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con08_tbl_cap {
  width: calc(var(--px) * 489);
  margin-top: 1.5vw;
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 14);
  font-weight: 400;
  line-height: 1.1vw;
  letter-spacing: -0.03vw;
  text-align: right;
  color: #000;
}

.con08_tbl {
  width: calc(var(--px) * 492);
  margin-top: 0.4vw;
  table-layout: fixed;
  color: #000;
  font-size: calc(var(--px) * 19);
  text-align: center;
  vertical-align: middle;
}

.con08_col01 {
  width: calc(var(--px) * 197);
}

.con08_col02 {
  width: calc(var(--px) * 130);
}

.con08_col03 {
  width: calc(var(--px) * 165);
}

.con08_tbl th {
  height: calc(var(--px) * 52);
  background-color: #ececec;
  font-weight: 700;
}

.con08_tbl td {
  height: calc(var(--px) * 48);
  border-bottom: 1px solid #efefef;
  font-weight: 300;
}

.con08_tbl_sum {
  font-size: calc(var(--px) * 26);
}

.con08_tbl_sum td {
  height: calc(var(--px) * 80);
  border-bottom: 0;
  background-color: var(--color-point);
  font-weight: 700;
  color: #fff;
}

.con08_tbl_sum_tt {
  font-size: calc(var(--px) * 24);
}

.con08_tbl_note {
  width: calc(var(--px) * 489);
  margin-top: 0.5vw;
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 14);
  font-weight: 400;
  line-height: 1.1vw;
  text-align: left;
  color: #000;
}

/* 연보라 박스 — 좌 타이틀 / 우 ONE~FIVE 목록 */
.con08_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--px) * 1451);
  height: calc(var(--px) * 731);
  margin-top: 2vw;
  padding-left: calc(var(--px) * 147);
  padding-right: calc(var(--px) * 76);
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 50);
  background-color: #f9f4ff;
}

.con08_bottom_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 0.4vw;
}

.con08_bt_h3 {
  text-align: left;
}

.con08_bt_desc {
  margin-top: 0.7vw;
  text-align: left;
}

.con08_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 0.3vw;
  width: calc(var(--px) * 739);
}

.con08_item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 101);
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

.con08_on {
  border-color: var(--color-point);
  background-color: var(--color-point);
}

.con08_item_no {
  width: calc(var(--px) * 102);
  height: calc(var(--px) * 54);
  margin-left: calc(var(--px) * 33);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  color: #fff;
}

.con08_on .con08_item_no {
  background-color: #fff;
  color: var(--color-point);
}

.con08_item_tt {
  width: calc(var(--px) * 136);
  margin-left: calc(var(--px) * 31);
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  letter-spacing: -0.07vw;
  color: var(--color-dark);
}

.con08_item_desc {
  font-size: calc(var(--px) * 22);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.06vw;
  color: var(--color-dark);
}

.con08_on .con08_item_tt,
.con08_on .con08_item_desc {
  color: #fff;
}

/* 신호등(con08-m04) — .con08_on 이 ONE→FIVE 로 옮겨 다닌다. 색만 바뀌고 행은 움직이지 않는다(시안 정지 상태 = ONE 활성). 활성 알약은 톡 튄다 */
.con08_item {
  transition: background-color 0.45s, border-color 0.45s;
}

.con08_item_no {
  transition: background-color 0.45s, color 0.45s;
}

.con08_item_tt,
.con08_item_desc {
  transition: color 0.45s;
}

.con08_on .con08_item_no {
  animation: mo_pop 0.55s ease-out;
}
/* 월 예상 수익 값(9,200,000원)이 칸(130)보다 넓어 두 줄로 꺾이던 것 — 한 줄 유지, 넘치는 폭은 양옆으로 고르게 */
.con08_tbl_blink {
  display: flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
}
/* @@con08:end */

/* @@con09:start */
.con09 {
  padding-top: 3.4vw;
  padding-bottom: 2.4vw;
}

/* 좌·우 퍼플 띠 — 사진 뒤 가장자리에 붙은 장식 */
.con09_bar {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 4.6vw;
  height: calc(var(--px) * 453);
  background-color: var(--color-point);
}

.con09_bar01 {
  left: 0;
  width: calc(var(--px) * 89);
}

.con09_bar02 {
  right: 0;
  width: calc(var(--px) * 90);
}

.con09_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-left: calc(var(--px) * 52);
  padding-right: calc(var(--px) * 53);
  box-sizing: border-box;
}

.con09_sd_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 500);
}

.con09_sd {
  width: 100%;
}

.con09_sd_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 500);
  aspect-ratio: 500 / 500;
}

.con09_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start;
  margin-top: 6.4vw;
}

.con09_h2 {
  margin-top: 1.1vw;
}

.con09_tt03 {
  margin-top: 1.1vw;
}

.con09_tt04 {
  margin-top: 1.6vw;
}

.con09_prev {
  left: 27.5%;
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 55);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
}

.con09_next {
  left: 69.5%;
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 55);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
}

.con09_arr_img {
  width: calc(var(--px) * 19);
  aspect-ratio: 19 / 17;
}
/* @@con09:end */

/* @@con10:start */
.con10 {
  padding-top: 7.9vw;
  padding-bottom: 6.5vw;
}

/* 좌·우 가장자리로 블리드하는 샐러드 볼 사진 — 카드(흰 배경)가 하단을 덮는다 */
.con10_img01 {
  left: -0.7%;
  top: 1.4vw;
  width: calc(var(--px) * 557);
  aspect-ratio: 557 / 602;
}

.con10_img02 {
  right: -0.4%;
  top: 5vw;
  width: calc(var(--px) * 565);
  aspect-ratio: 565 / 668;
}

.con10_tt03 {
  margin-top: 0.6vw;
}

.con10_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 4.9vw;
  padding-left: calc(var(--px) * 230);
  box-sizing: border-box;
}

.con10_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 467);
  height: calc(var(--px) * 309);
  padding-top: 2.8vw;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con10_card02 {
  margin-left: calc(var(--px) * 22);
}

.con10_card03 {
  margin-left: calc(var(--px) * 18);
}

/* 카드 상단 테두리에 걸친 라벨 pill — left 좌표 없이 카드 flex center */
.con10_badge {
  top: -1.4vw;
  height: calc(var(--px) * 53);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.con10_badge01 {
  width: calc(var(--px) * 212);
}

.con10_badge02 {
  width: calc(var(--px) * 240);
}

.con10_badge03 {
  width: calc(var(--px) * 276);
}

.con10_ico {
  width: calc(var(--px) * 80);
  height: calc(var(--px) * 80);
  border-radius: 50%;
  background-color: var(--color-light);
}

.con10_ico_img01 {
  width: calc(var(--px) * 37);
  aspect-ratio: 37 / 32;
}

.con10_ico_img02 {
  width: calc(var(--px) * 29);
  aspect-ratio: 29 / 34;
}

.con10_ico_img03 {
  width: calc(var(--px) * 32);
  aspect-ratio: 32 / 33;
}

.con10_card_tt {
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 30);
  font-weight: 700;
  line-height: 1.8vw;
  letter-spacing: -0.08vw;
  color: var(--color-dark);
}

.con10_card_desc {
  margin-top: 0.6vw;
}
/* @@con10:end */

/* @@con11:start */
.con11 {
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  height: calc(var(--px) * 920);
}

.con11_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 50%;
  padding-top: 16.8vw;
  padding-right: calc(var(--px) * 8);
  box-sizing: border-box;
  background-color: #000;
}

.con11_left_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con11_h2 {
  margin-top: 0.8vw;
}

.con11_tt03 {
  margin-top: 0.8vw;
}

.con11_sd {
  width: 50%;
  background-color: var(--color-point);
}

.con11_slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 7.6vw;
  padding-left: calc(var(--px) * 6);
  box-sizing: border-box;
}

.con11_pn_label {
  margin-right: calc(var(--px) * 10);
  margin-bottom: 1vw;
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 40);
  font-weight: 700;
  line-height: 2.1vw;
  letter-spacing: 0;
  color: var(--color-light);
}

.con11_pn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 637);
}

.con11_pn_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 637);
  aspect-ratio: 637 / 284;
}

.con11_pn_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 253);
  margin-top: 0.7vw;
  padding-top: 3.9vw;
  box-sizing: border-box;
  border-radius: calc(var(--px) * 20);
  background-color: #fff;
}

.con11_pn_tt {
  font-size: calc(var(--px) * 32);
  font-weight: 700;
  line-height: 1.9vw;
  letter-spacing: -0.08vw;
  color: var(--color-point);
}

.con11_hl {
  display: inline-block;
  padding: 0 calc(var(--px) * 9) calc(var(--px) * 2);
  background: linear-gradient(var(--color-light), var(--color-light)) left bottom / 100% calc(var(--px) * 15) no-repeat;
}

.con11_pn_desc {
  margin-top: 0.6vw;
}

.con11_pin {
  top: 13vw;
  width: calc(var(--px) * 19);
  aspect-ratio: 19 / 90;
}

.con11_pin01 {
  left: 11.9%;
}

.con11_pin02 {
  left: 85.6%;
}

/* 번호 01~05 — 좌우 열 경계(가로 중앙)에 걸친다. Swiper(z-index 1) 위로 올리려고 공통 .btn_arr 와 같은 층 */
.con11_nums {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: calc(var(--px) * 62);
  top: 11vw;
  z-index: 2;
}

.con11_num {
  width: calc(var(--px) * 57);
  height: calc(var(--px) * 57);
  border-radius: 50%;
  background-color: #fff;
  font-family: var(--font-allim);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-point);
  transition: 0.3s;
  box-sizing: border-box;
  border: 0.2vw solid #fff;
}

/* 활성 번호 — 퍼플 원 + 흰 숫자(유저 지시), 흰 테두리 링 없음(유저 지시) */
.con11_num_on {
  background-color: var(--color-point);
  color: #fff;
}
/* @@con11:end */

/* @@con12:start */
.con12 {
  padding-top: 6.7vw;
  padding-bottom: 5.2vw;
}

/* 좌·우 컷아웃 — 카드 뒤로 깔리고 프레임 밖으로 블리드 */
.con12_img01 {
  left: -9.5%;
  top: 23.1vw;
  width: calc(var(--px) * 806);
  aspect-ratio: 806 / 557;
}

.con12_img02 {
  right: -9.5%;
  top: -5vw;
  width: calc(var(--px) * 653);
  aspect-ratio: 653 / 529;
}

/* shakeTwices 흔들림의 기준점 = 오른쪽 위(유저 지시) — 공통 .shakeTwices(center)보다 구체적 */
.con12_img02 img {
  transform-origin: right top;
}

.con12_h2 {
  margin-right: calc(var(--px) * 8);
}

.con12_tt03 {
  margin-top: 0.9vw;
  margin-right: calc(var(--px) * 8);
}

.con12_cards {
  width: calc(var(--px) * 1201);
  margin-top: 2.3vw;
}

.con12_card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--px) * 1201);
  height: calc(var(--px) * 421);
  box-sizing: border-box;
  border: 1px solid var(--color-point);
  border-radius: calc(var(--px) * 30);
  background-color: #f9f4ff;
}

/* 카드 02·03 은 카드 01 과 같은 박스에 겹쳐 쌓인다 */
.con12_card02,
.con12_card03 {
  top: 0;
  left: 0;
}

.con12_no {
  left: -2.8%;
  width: calc(var(--px) * 67);
  height: calc(var(--px) * 67);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
}

.con12_txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: calc(var(--px) * 4);
  padding-left: calc(var(--px) * 119);
  box-sizing: border-box;
}

.con12_card_tt {
  font-size: calc(var(--px) * 32);
  font-weight: 700;
  line-height: 1.9vw;
  letter-spacing: -0.08vw;
  color: var(--color-dark);
}

.con12_card_desc {
  margin-top: 0.8vw;
  text-align: left;
}

.con12_card_note {
  margin-top: 1.4vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.5vw;
  color: var(--color-dark);
}

/* 우측 검정 반쪽 */
.con12_half {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 600);
  height: 100%;
  box-sizing: border-box;
  border-left: 1px solid var(--color-point);
  border-radius: 0 calc(var(--px) * 29) calc(var(--px) * 29) 0;
  background-color: #000;
  overflow: hidden;
}

.con12_half03 {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con12_half_lb {
  margin-top: 3.7vw;
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.06vw;
  color: #fff;
}

.con12_half_lb02 {
  margin-top: 3.6vw;
}

.con12_aw {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  margin-top: 1.4vw;
}

.con12_aw01 {
  padding-left: calc(var(--px) * 8);
}

.con12_aw_medal {
  width: calc(var(--px) * 247);
  aspect-ratio: 247 / 280;
  margin: calc(var(--px) * -38);
}

.con12_aw_cert {
  width: calc(var(--px) * 156);
  aspect-ratio: 156 / 221;
  margin-left: calc(var(--px) * 27);
}

.con12_aw_img01 {
  width: calc(var(--px) * 156);
  aspect-ratio: 156 / 220;
}

.con12_aw_img02 {
  width: calc(var(--px) * 150);
  aspect-ratio: 150 / 221;
  margin-left: calc(var(--px) * 13);
}

.con12_aw_img03 {
  width: calc(var(--px) * 156);
  aspect-ratio: 156 / 221;
  margin-left: calc(var(--px) * 13);
}

/* 특허 이미지 슬라이드 */
.con12_pat_sd {
  width: 100%;
}

.con12_pat_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 252);
  aspect-ratio: 252 / 342;
}

.con12_pat_prev {
  left: 16.2%;
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 55);
  border-radius: calc(var(--px) * 10);
  background-color: #fff;
}

.con12_pat_next {
  right: 16.2%;
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 55);
  border-radius: calc(var(--px) * 10);
  background-color: #fff;
}

.con12_arr_img {
  width: calc(var(--px) * 19);
  aspect-ratio: 19 / 17;
}

/* 겹침 모션(PC) 초기 상태 — js/animation.js con12-m01 의 시작값과 같다. 모션을 줄이는 환경에서는 세로로 나열한다 */
@media (min-width: 600px) and (prefers-reduced-motion: no-preference) {
  .con12_card02,
  .con12_card03 {
    transform: translateY(130%);
  }
}

@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  .con12_card02,
  .con12_card03 {
    position: relative;
    top: auto;
    left: auto;
    margin-top: 2vw;
  }
}
/* con12-m03 메달·인증서·상장 등장 — 핀 영역(data-mo-off)이라 엔진 대신 js/animation.js @@con12 가 직접 건다. 선숨김은 html.js-mo, 시작 때 .mo-in */
html.js-mo .con12_aw_medal:not(.mo-in),
html.js-mo .con12_aw_cert:not(.mo-in),
html.js-mo .con12_aw_img:not(.mo-in) {
  opacity: 0;
}
/* @@con12:end */

/* @@con13:start */
.con13 {
  padding-top: 7vw;
  padding-bottom: 4.7vw;
  background-color: var(--color-point);
}

.con13_h2 {
  margin-top: 1vw;
}

.con13_tt03 {
  margin-top: 1.1vw;
}

.con13_cards {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: calc(var(--px) * 21);
  width: 100%;
  margin-top: 2.9vw;
}

.con13_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 410);
  height: calc(var(--px) * 230);
  padding-top: 1.4vw;
  margin-top: calc(var(--px) * 20);
  box-sizing: border-box;
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

/* 활성 카드 — 시안 정지 상태는 카드 01 이 20px 올라간 모습. margin 이 아니라 translate 라 레이아웃이 안 흔들린다.
   transform 이 아니라 개별 속성 translate 를 쓴다 — 등장 모션(GSAP transform)·호버와 겹치지 않고, 올라올 때 바운스 이징(con13-m01)을 CSS transition 으로 건다 */
.con13_on {
  translate: 0 calc(var(--px) * -20);
}

.con13_card {
  transition: translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.con13_on .con13_no {
  animation: mo_pop 0.55s ease-out;
}

.con13_no {
  width: calc(var(--px) * 65);
  height: calc(var(--px) * 42);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}

.con13_card_tt {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 32);
  font-weight: 700;
  line-height: 1.6vw;
  letter-spacing: -0.08vw;
  text-align: center;
  color: var(--color-dark);
}

/* 형광띠 — 하단 20px */
.con13_hl {
  display: inline-block;
  padding-bottom: calc(var(--px) * 7);
  background: linear-gradient(var(--color-light), var(--color-light)) left bottom / 100% calc(var(--px) * 20) no-repeat;
}

.con13_hl01 {
  width: calc(var(--px) * 208);
}

.con13_hl02 {
  width: calc(var(--px) * 160);
}

.con13_hl03 {
  width: calc(var(--px) * 127);
}

.con13_card_desc {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 21);
  font-weight: 300;
  line-height: 1.6vw;
  letter-spacing: -0.05vw;
  text-align: center;
  color: var(--color-dark);
}

/* 카드 위로 겹치는 토마토 — 카드 뒤 DOM 이라 카드 위에 그려진다 */
.con13_tom01 {
  left: 8.2%;
  top: 23vw;
  width: calc(var(--px) * 211);
  aspect-ratio: 211 / 218;
}

.con13_tom02 {
  left: 78.6%;
  top: 13vw;
  width: calc(var(--px) * 202);
  aspect-ratio: 202 / 250;
}
/* @@con13:end */

/* @@con14:start */
.con14 {
  padding-top: 8.9vw;
  padding-bottom: 8.1vw;
}

.con14_row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-left: calc(var(--px) * 231);
  padding-right: calc(var(--px) * 231);
  box-sizing: border-box;
}

.con14_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con14_h2 {
  text-align: left;
}

.con14_tt03 {
  margin-top: 1.6vw;
  text-align: left;
}

.con14_cta {
  width: calc(var(--px) * 244);
  height: calc(var(--px) * 70);
  margin-top: 2.2vw;
  box-sizing: border-box;
  border: 1px solid #dcdcdc;
  border-radius: 50vw;
  background-color: #fff;
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06vw;
  color: var(--color-point);
}

.con14_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con14_circles {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 원 3개가 서로 겹친다 — DOM 후순이 위 */
.con14_circle {
  width: calc(var(--px) * 340);
  height: calc(var(--px) * 340);
  box-sizing: border-box;
  border: 1px solid var(--color-point);
  border-radius: 50%;
  background-color: #f9f4ff;
  font-size: calc(var(--px) * 32);
  font-weight: 700;
  line-height: 2.3vw;
  letter-spacing: -0.08vw;
  text-align: center;
  color: var(--color-point);
}

.con14_circle + .con14_circle {
  margin-left: calc(var(--px) * -77);
}

/* 활성 원 — 정지 상태는 첫 원이 퍼플로 채워진 모습 */
.con14_on {
  background-color: var(--color-point);
  color: #fff;
}

.con14_note {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.06vw;
  text-align: center;
  color: var(--color-dark);
}

/* 신호등(con14-m01) — .con14_on 이 원 3개를 돌아다닌다(퍼플 채움). 색만 바뀌고 원은 움직이지 않는다(시안 정지 상태 = 첫 원 채움). 활성 원의 글자는 톡 튄다 */
.con14_circle {
  transition: background-color 0.5s, color 0.5s;
}

.con14_on p {
  animation: mo_pop 0.55s ease-out;
}

/* CTA 호버(con14-m02) — 보라색이 왼쪽에서 차오르고 글자는 흰색으로. 클릭 시 #con20(창업문의)으로 이동(링크 그대로).
   모바일(터치)은 hover 가 없어 누르는 동안(:active)만 같은 채움 */
.con14_cta {
  background-image: linear-gradient(var(--color-point), var(--color-point));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.5s cubic-bezier(0.22, 0.8, 0.3, 1), color 0.3s ease 0.08s, border-color 0.3s ease;
}

.con14_cta:active,
.con14_cta:focus-visible {
  border-color: var(--color-point);
  background-size: 100% 100%;
  color: #fff;
}

@media (hover: hover) {
  .con14_cta:hover {
    border-color: var(--color-point);
    background-size: 100% 100%;
    color: #fff;
  }
}
/* @@con14:end */

/* @@con15:start */
.con15 {
  box-sizing: border-box;
  padding-top: 7.8vw;
  padding-right: calc(var(--px) * 5);
  padding-bottom: 5.4vw;
  background-color: #280b48;
}

.con15_deco01 {
  width: calc(var(--px) * 344);
  aspect-ratio: 344 / 254;
  left: 8.6614%;
  top: 6.1vw;
}

.con15_deco02 {
  width: calc(var(--px) * 300);
  aspect-ratio: 300 / 291;
  left: 77.0079%;
  top: 6.6vw;
}

.con15_tt02 {
  color: #fff;
}

.con15_tt03 {
  margin-top: 1vw;
  color: #fff;
}

.con15_benefit {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: 0.9vw;
  margin-top: 1.8vw;
}

.con15_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 328);
  height: calc(var(--px) * 222);
  padding-top: calc(var(--px) * 31.5);
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con15_card_en {
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 22);
  font-weight: 800;
  line-height: 2.1vw;
  letter-spacing: 0.058vw;
  color: var(--color-point);
}

.con15_line {
  top: 4.6vw;
  width: 64.6341%;
  height: 1px;
  background-color: rgba(96, 38, 158, 0.2);
}

.con15_card_name {
  margin-top: 1.8vw;
  font-size: calc(var(--px) * 26);
  font-weight: 800;
  line-height: 1.9vw;
  letter-spacing: -0.068vw;
  color: var(--color-dark);
}

.con15_card_val {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0.3vw;
  font-size: calc(var(--px) * 30);
  font-weight: 800;
  line-height: 1.9vw;
  letter-spacing: -0.079vw;
  color: var(--color-point);
}

.con15_hl {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: calc(var(--px) * 6);
  margin-bottom: calc(var(--px) * -6);
  background-image: linear-gradient(var(--color-light), var(--color-light));
  background-repeat: no-repeat;
  background-position: 0 calc(var(--px) * 19.5);
  background-size: 100% calc(var(--px) * 22);
}

.con15_hl_01 {
  width: calc(var(--px) * 250);
}

.con15_hl_02 {
  width: calc(var(--px) * 190);
}

.con15_hl_03 {
  width: calc(var(--px) * 189);
}

.con15_hl_04 {
  width: calc(var(--px) * 181);
}

.con15_hl_05 {
  width: calc(var(--px) * 438);
  padding-bottom: calc(var(--px) * 10);
  margin-bottom: calc(var(--px) * -10);
  background-position: 0 calc(var(--px) * 24.5);
  background-size: 100% calc(var(--px) * 35);
}

.con15_panels {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: 0.9vw;
  margin-top: 1.1vw;
}

.con15_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 673);
  height: calc(var(--px) * 285);
  padding-top: calc(var(--px) * 39.5);
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con15_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 56);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-size: calc(var(--px) * 26);
  font-weight: 700;
  line-height: 1.9vw;
  letter-spacing: -0.068vw;
  color: #fff;
}

.con15_pill_01 {
  width: calc(var(--px) * 241);
}

.con15_pill_02 {
  width: calc(var(--px) * 138);
}

.con15_panel_txt {
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  line-height: 2vw;
  letter-spacing: -0.073vw;
  text-align: center;
  color: var(--color-dark);
}

.con15_panel_note {
  margin-top: 1vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.6vw;
  letter-spacing: -0.047vw;
  text-align: center;
  color: var(--color-dark);
}

.con15_price {
  margin-top: 1.3vw;
  margin-right: calc(var(--px) * 7);
}

.con15_price_old {
  font-size: calc(var(--px) * 25);
  font-weight: 700;
  line-height: 2.4vw;
  letter-spacing: -0.066vw;
  text-decoration: line-through;
  color: var(--color-dark);
}

.con15_arrow {
  width: calc(var(--px) * 16);
  aspect-ratio: 16 / 14;
  margin-left: calc(var(--px) * 14);
  margin-right: calc(var(--px) * 8);
}

.con15_price_new {
  font-size: calc(var(--px) * 55);
  font-weight: 800;
  line-height: 2.6vw;
  letter-spacing: -0.145vw;
  color: var(--color-point);
}

.con15_panel_sum {
  margin-top: 1.7vw;
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  line-height: 1.7vw;
  letter-spacing: -0.074vw;
  color: var(--color-dark);
}

.con15_coin01 {
  width: calc(var(--px) * 116);
  aspect-ratio: 116 / 97;
  left: -8.0238%;
  top: 2.1vw;
}

.con15_coin02 {
  width: calc(var(--px) * 105);
  aspect-ratio: 105 / 84;
  left: 95.0966%;
  top: 7.7vw;
}

.con15_cta {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 245);
  height: calc(var(--px) * 70);
  margin-top: 3.2vw;
  margin-left: calc(var(--px) * 5);
  border-radius: 50vw;
  background-color: #fff;
  font-size: calc(var(--px) * 26);
  font-weight: 700;
  line-height: 2.2vw;
  letter-spacing: -0.068vw;
  color: var(--color-point);
  background-image: linear-gradient(var(--color-yellow), var(--color-yellow));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  transition: background-size 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 호버(con15-m04) — 흰 알약 안에 노란색이 왼쪽에서 오른쪽으로 차오른다. 평상시 size 0% 라 시안 정지 상태(흰 알약)와 같다.
   터치 기기는 sticky hover 가 남지 않게 (hover: hover) 에서만 호버, 누르는 동안은 :active 로 채운다 */
@media (hover: hover) {
  .con15_cta:hover {
    background-size: 100% 100%;
  }
}

.con15_cta:active,
.con15_cta:focus-visible {
  background-size: 100% 100%;
}
/* @@con15:end */

/* @@con16:start */
.con16 {
  padding-top: 7.8vw;
  padding-bottom: 2.5vw;
}

.con16_tt02 {
  box-sizing: border-box;
  padding-right: calc(var(--px) * 5);
}

.con16_wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1108);
}

.con16_unit {
  width: 100%;
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 17);
  font-weight: 300;
  line-height: 1.2vw;
  text-align: right;
  color: var(--color-dark);
}

.con16_tbl {
  width: 100%;
  margin-top: 0.5vw;
}

.con16_table {
  width: 100%;
  table-layout: fixed;
}

.con16_th {
  box-sizing: border-box;
  height: calc(var(--px) * 59);
  background-color: #e9e9e9;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 2.4vw;
  letter-spacing: -0.052vw;
  text-align: center;
  vertical-align: middle;
  color: var(--color-dark);
}

.con16_th_01 {
  width: 23.8267%;
  padding-left: calc(var(--px) * 47);
}

.con16_th_02 {
  width: 24.7292%;
}

.con16_th_03 {
  width: 51.444%;
  padding-left: calc(var(--px) * 265);
  text-align: left;
}

.con16_row td {
  height: calc(var(--px) * 46);
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 2.4vw;
  letter-spacing: -0.052vw;
  vertical-align: middle;
  color: var(--color-dark);
}

.con16_row_first td {
  padding-top: calc(var(--px) * 22);
}

.con16_row_last td {
  padding-bottom: calc(var(--px) * 25);
}

.con16_td_name {
  padding-left: calc(var(--px) * 47);
  text-align: center;
}

.con16_td_amt,
.con16_td_price {
  text-align: center;
}

.con16_td_remark {
  padding-left: calc(var(--px) * 22);
  text-align: left;
}

.con16_amt {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: calc(var(--px) * 4);
}

.con16_old {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 91);
}

.con16_old_txt {
  width: calc(var(--px) * 77);
  margin-left: calc(var(--px) * 3);
  text-align: center;
  white-space: nowrap;
}

.con16_slash {
  top: 0.7vw;
  width: calc(var(--px) * 91);
  aspect-ratio: 91 / 12;
}

.con16_new {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 71);
  margin-left: calc(var(--px) * 8);
  font-weight: 700;
  white-space: nowrap;
}

.con16_remark {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.con16_remark_b {
  font-weight: 700;
}

.con16_tag {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: calc(var(--px) * 4);
}

.con16_tail {
  width: calc(var(--px) * 24);
  height: calc(var(--px) * 10);
  margin-right: calc(var(--px) * -9);
  background-color: var(--color-point);
  clip-path: polygon(8.3% 50%, 100% 0, 100% 100%);
}

.con16_label {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--px) * 37);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
  font-size: calc(var(--px) * 18);
  font-weight: 800;
  line-height: 1.2vw;
  letter-spacing: -0.047vw;
  color: #fff;
}

.con16_label_01,
.con16_label_03 {
  width: calc(var(--px) * 90);
}

.con16_label_02 {
  width: calc(var(--px) * 129);
}

.con16_td_total {
  height: calc(var(--px) * 59);
  background-color: var(--color-point);
  vertical-align: middle;
}

.con16_total {
  padding-left: calc(var(--px) * 6);
}

.con16_total_name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 74);
  height: calc(var(--px) * 34);
  border-radius: calc(var(--px) * 13);
  background-color: var(--color-yellow);
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  line-height: 2.9vw;
  letter-spacing: -0.058vw;
  color: var(--color-point);
}

.con16_total_old {
  margin-left: calc(var(--px) * 11);
  font-size: calc(var(--px) * 22);
  font-weight: 300;
  line-height: 2.9vw;
  letter-spacing: -0.058vw;
  text-decoration: line-through;
  color: #fff;
}

.con16_total_new {
  margin-left: calc(var(--px) * 6);
  font-size: calc(var(--px) * 36.5);
  font-weight: 700;
  line-height: 2.9vw;
  letter-spacing: -0.096vw;
  color: var(--color-yellow);
}

.con16_line {
  top: 4.7vw;
  width: 1px;
  height: calc(var(--px) * 336);
  background-color: #dcdcdc;
}

.con16_line_01 {
  left: 23.8267%;
}

.con16_line_02 {
  left: 48.556%;
}

.con16_note {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 16);
  font-weight: 300;
  line-height: 1.3vw;
  color: var(--color-dark);
}

/* 등장(con16-m01) — 비고 말풍선은 꼬리가 달린 왼쪽 끝에서 톡 튀어나온다(pop 의 scale 기준점만 지정, 최종 모양은 그대로) */
.con16_tag {
  transform-origin: 8% 50%;
}
/* @@con16:end */

/* @@con17:start */
.con17 {
  padding-top: 2.8vw;
  padding-bottom: 6.3vw;
}

/* 워터마크 — 공통 flow_sd 마퀴(왼쪽으로 흐름). 컨테이너는 섹션 폭, 글자는 아래 _txt */
.con17_wm {
  left: 0;
  top: 55.8vw;
}

.con17_wm_move {
  margin-left: calc(var(--px) * -360); /* 시안 시작 위치(-18.9%) — 마퀴라 흐르는 중엔 티가 안 난다 */
  animation-duration: 36s;
}

.con17_wm_txt {
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 200);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.525vw;
  white-space: nowrap;
  color: #f6f4f9;
}

.con17_img {
  left: 20.7349%;
  top: 27.8vw;
  width: calc(var(--px) * 1152);
  aspect-ratio: 1152 / 890;
}

.con17_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 1680);
  padding: 4.1vw 0 3.9vw;
  border-radius: calc(var(--px) * 50);
  background-color: #f9f4ff;
}

.con17_tt02,
.con17_tt03 {
  box-sizing: border-box;
  padding-right: calc(var(--px) * 4);
}

.con17_tt03 {
  margin-top: 0.9vw;
}

.con17_steps {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1.7vw;
  margin-top: 2.2vw;
}

.con17_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.con17_step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 344);
  height: calc(var(--px) * 181);
  padding: calc(var(--px) * 43) calc(var(--px) * 29) 0 calc(var(--px) * 38);
  border: 1px solid #dedbe0;
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.con17_step_head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.con17_step_tt {
  font-size: calc(var(--px) * 23);
  font-weight: 800;
  line-height: 1.2vw;
  letter-spacing: -0.06vw;
  color: var(--color-dark);
}

.con17_step_num {
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 22);
  font-weight: 900;
  line-height: 1.2vw;
  letter-spacing: -0.058vw;
  color: var(--color-point);
}

.con17_step_txt {
  margin-top: 1vw;
  font-size: calc(var(--px) * 19);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.05vw;
  color: var(--color-dark);
}

.con17_arrow {
  width: calc(var(--px) * 60);
}

.con17_arrow_box {
  width: calc(var(--px) * 35);
  height: calc(var(--px) * 35);
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
}

.con17_arrow_box img {
  width: calc(var(--px) * 16);
}

.con17_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: calc(var(--px) * 1679);
  margin-top: 37.3vw;
  margin-right: calc(var(--px) * 4);
}

.con17_boxes {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  row-gap: 1.3vw;
}

.con17_box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 401);
  height: calc(var(--px) * 134);
  border: 1px solid var(--color-point);
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
  color: var(--color-point);
}

.con17_on {
  background-color: var(--color-point);
  color: #fff;
}

.con17_box_txt {
  font-size: calc(var(--px) * 26);
  font-weight: 700;
  line-height: 1.9vw;
  letter-spacing: -0.068vw;
  text-align: center;
  color: inherit;
}

.con17_msg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: calc(var(--px) * 31);
}

.con17_tt05 {
  margin-top: 0.7vw;
}

/* 신호등(con17-m01) — .con17_on(보라 채움)이 지원 박스 4개를 순서대로 옮겨 다닌다. 박스 크기·위치는 그대로, 색만 부드럽게 바뀌고 글자가 톡 튄다 */
.con17_box {
  transition: background-color 0.45s ease, color 0.45s ease;
}

.con17_on .con17_box_txt {
  animation: mo_pop 0.55s ease-out;
}
/* @@con17:end */

/* @@con18:start */
.con18 {
  box-sizing: border-box;
  padding-top: calc(var(--px) * 106);
  padding-right: calc(var(--px) * 1);
  padding-bottom: calc(var(--px) * 100);
  background-color: var(--color-point);
}

.con18_wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  column-gap: 1.9vw;
  width: calc(var(--px) * 1620);
}

.con18_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 654);
  height: calc(var(--px) * 712);
  padding: calc(var(--px) * 61) 0 0 calc(var(--px) * 63);
  border-radius: calc(var(--px) * 50);
  background-color: #fff;
}

.con18_sd {
  margin-left: 0;
  margin-right: 0;
  width: calc(var(--px) * 528);
  border-radius: calc(var(--px) * 30);
}

.con18_slide_img {
  width: calc(var(--px) * 528);
  aspect-ratio: 528 / 518;
}

.con18_logo {
  left: 35.2%;
  top: 25.9vw;
  z-index: 2;
  width: calc(var(--px) * 344);
  aspect-ratio: 344 / 199;
}

.con18_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 930);
  height: calc(var(--px) * 710);
  padding: 6.4vw 0 0 calc(var(--px) * 148);
  border-radius: calc(var(--px) * 45);
  background-color: #fff;
  background-image: linear-gradient(to right, #f7f7f7 1px, transparent 1px), linear-gradient(to bottom, #f7f7f7 1px, transparent 1px);
  background-size: calc(var(--px) * 20) calc(var(--px) * 20);
  background-position: calc(var(--px) * 13) calc(var(--px) * 22);
}

.con18_txt {
  margin-top: calc(var(--px) * 31);
  font-size: calc(var(--px) * 21);
  font-weight: 300;
  line-height: calc(var(--px) * 31);
  letter-spacing: -0.055vw;
  color: var(--color-dark);
}

.con18_txt_first {
  margin-top: 0;
}

.con18_sign {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-self: flex-end;
  margin-top: -0.7vw;
  margin-right: calc(var(--px) * 60);
}

.con18_name {
  font-size: calc(var(--px) * 21);
  font-weight: 300;
  line-height: calc(var(--px) * 31);
  letter-spacing: -0.055vw;
  color: var(--color-dark);
}

.con18_sign_img {
  width: calc(var(--px) * 133);
  aspect-ratio: 133 / 73;
  margin-left: calc(var(--px) * 14);
}

.con18_ring {
  left: 37.1605%;
  width: calc(var(--px) * 137);
  aspect-ratio: 137 / 32;
}

.con18_ring_01 {
  top: 6.7vw;
}

.con18_ring_02 {
  top: 29.5vw;
}
/* con18-m02 로고 스티커 붙기 — 테이프 모션 가이드(md/테이프 모션.md)의 peel: 같은 이미지 2장을 접힘선(--fold) 기준으로 겹쳐 오른쪽 끝이 들렸다 붙는다.
   --peel 0=붙음(기본, JS 가 안 돌아도 멀쩡히 보임) ~ 1=떼짐 — js/animation.js @@con18 이 제어. 흔들기(shakeTwices)는 바깥 .con18_logo_in 이 맡아 peel 의 transform 과 안 겹친다 */
.con18_logo_in {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 344 / 199;
}

.con18_logo_peel {
  --peel: 0;
  --fold: calc((1 - var(--peel)) * 100%);
  --tilt: -10deg;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 344 / 199;
  transform: rotate(calc(var(--peel) * var(--tilt)));
  transform-origin: 6% 50%;
}

.con18_logo_peel .peel-main,
.con18_logo_peel .peel-flap {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.con18_logo_peel .peel-main {
  clip-path: inset(0 calc(100% - var(--fold)) 0 0);
}

.con18_logo_peel .peel-flap {
  clip-path: inset(0 0 0 var(--fold));
  transform: scaleX(-1);
  left: calc(2 * var(--fold) - 100%);
}

.con18_logo_peel .peel-flap img {
  filter: grayscale(1) brightness(1.3) contrast(0.82);
}
/* @@con18:end */

/* @@con19:start */
.con19 {
  padding-top: 6.3vw;
  padding-bottom: 4.6vw;
}

.con19_tt02 {
  box-sizing: border-box;
  padding-right: calc(var(--px) * 5);
}

.con19_wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 1561);
  margin-top: 4.1vw;
  margin-right: calc(var(--px) * 2);
}

.con19_box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 651);
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 50);
  background-color: #fff;
  overflow: hidden;
}

.con19_list {
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 400);
  height: 100%;
  padding: 0 calc(var(--px) * 30) 0 calc(var(--px) * 41);
  border-right: 1px solid #dcdcdc;
  overflow-y: auto;
}

.con19_list::-webkit-scrollbar {
  width: calc(var(--px) * 5);
}

.con19_list::-webkit-scrollbar-track {
  background-color: transparent;
}

.con19_list::-webkit-scrollbar-thumb {
  border-radius: calc(var(--px) * 3);
  background-color: var(--color-point);
}

.con19_item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  height: calc(var(--px) * 163);
  padding: calc(var(--px) * 41) calc(var(--px) * 25) 0 calc(var(--px) * 16);
  border-bottom: 1px solid #dbdbdb;
  cursor: pointer;
}

.con19_item_first {
  height: calc(var(--px) * 159);
  padding-top: calc(var(--px) * 37);
}

.con19_item_last {
  border-bottom: 0;
}

.con19_item_info {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con19_item_name {
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.073vw;
  color: var(--color-dark);
}

.con19_item_addr {
  margin-top: 0.3vw;
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.3vw;
  letter-spacing: -0.066vw;
  color: var(--color-dark);
}

.con19_item_tel {
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 16);
  font-weight: 100;
  line-height: 1.2vw;
  letter-spacing: -0.059vw;
  color: var(--color-dark);
}

.con19_plus {
  flex-shrink: 0;
  width: calc(var(--px) * 35);
  height: calc(var(--px) * 35);
  margin-top: 2.2vw;
  border-radius: 50%;
  background-color: var(--color-dark);
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}

.con19_noshop {
  display: none;
  padding: 3vw 0;
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 18);
  line-height: 1.5vw;
  text-align: center;
  color: var(--color-dark);
}

.con19_map {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  isolation: isolate;
  width: calc(var(--px) * 1159);
  height: 100%;
}

.con19_map img {
  max-width: none;
}

#map {
  flex-grow: 1;
  width: 100%;
}

.con19_search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  top: -1.9vw;
  width: calc(var(--px) * 800);
  height: calc(var(--px) * 71);
  padding: 0 calc(var(--px) * 9) 0 calc(var(--px) * 42);
  border: 1px solid #dcdcdc;
  border-radius: 50vw;
  background-color: #fff;
}

.con19_input {
  width: 100%;
  font-family: var(--font-suit);
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  line-height: 1.5vw;
  letter-spacing: -0.052vw;
  color: var(--color-dark);
}

.con19_input::placeholder {
  opacity: 1;
  color: #8a8a8a;
}

.con19_sbtn {
  flex-shrink: 0;
  width: calc(var(--px) * 53);
  height: calc(var(--px) * 53);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con19_sbtn img {
  width: calc(var(--px) * 28);
}

.con19_bubble {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.con19_bubble_text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 9) calc(var(--px) * 20);
  border-radius: 50vw;
  background-color: var(--color-point);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  white-space: nowrap;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.con19_bubble_tail {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--color-point);
}

.fixed_popup {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.fixed_popup_con {
  background-color: rgba(17, 17, 17, 0.6);
}

.popup {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 860);
  padding: calc(var(--px) * 30);
  border-radius: calc(var(--px) * 30);
  background-color: #fff;
}

.popup_left {
  flex-shrink: 0;
  width: calc(var(--px) * 360);
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
}

.popup_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: calc(var(--px) * 30);
}

.popup_right_2nd {
  font-size: calc(var(--px) * 28);
  font-weight: 800;
  line-height: 2vw;
  color: var(--color-dark);
}

.popup_right_3rd,
.popup_right_4th {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 1vw;
}

.popup_right_label {
  flex-shrink: 0;
  width: calc(var(--px) * 80);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.5vw;
  color: var(--color-point);
}

.popup_right_3rd_right,
.popup_right_4th_right {
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.5vw;
  color: var(--color-dark);
}

.popup_right_6th_left {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 160);
  height: calc(var(--px) * 44);
  margin-top: 2vw;
  border-radius: 50vw;
  background-color: var(--color-point);
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  color: #fff;
}

.popup_close {
  top: 1vw;
  right: 1vw;
  width: calc(var(--px) * 40);
  height: calc(var(--px) * 40);
  border-radius: 50%;
  background-color: var(--color-dark);
  font-size: calc(var(--px) * 24);
  line-height: 1;
  color: #fff;
}
/* @@con19:end */

/* @@con20:start */
.con20 {
  padding: calc(var(--px) * 123) 0 calc(var(--px) * 125);
  background-image: url('/images/con20_01.jpg');
}

.con20_card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  width: calc(var(--px) * 1440);
  height: calc(var(--px) * 580);
  padding: 0 calc(var(--px) * 141) 0 calc(var(--px) * 182);
  border-radius: calc(var(--px) * 50);
  background-color: #fff;
  box-shadow: 0 0 calc(var(--px) * 16) rgba(42, 29, 14, 0.05);
}

.con20_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 435);
  margin-top: 5.5vw;
}

.con20_tt02 {
  align-items: flex-start;
  text-align: left;
}

.con20_tt03 {
  margin-top: 0.9vw;
  text-align: left;
}

.con20_tel {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1.9vw;
}

.con20_tel_ic {
  width: calc(var(--px) * 56);
  height: calc(var(--px) * 56);
  border-radius: 50%;
  background-color: var(--color-point);
}

.con20_tel_ic img {
  width: calc(var(--px) * 27);
}

.con20_tel_num {
  margin-left: calc(var(--px) * 15);
  font-family: var(--font-poppins);
  font-size: calc(var(--px) * 55);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.144vw;
  text-shadow: 0 calc(var(--px) * 20) calc(var(--px) * 25) rgba(96, 38, 158, 0.16);
  color: var(--color-dark);
}

.con20_form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 506);
  margin-top: 2.4vw;
}

.con20_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid #d9d9d9;
}

.con20_row_01 {
  height: calc(var(--px) * 62);
}

.con20_row_02 {
  height: calc(var(--px) * 60);
}

.con20_row_03,
.con20_row_04,
.con20_row_05 {
  height: calc(var(--px) * 59);
}

.con20_row_06 {
  height: calc(var(--px) * 62);
}

.con20_label {
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 157);
  padding-left: calc(var(--px) * 18);
  font-size: calc(var(--px) * 19);
  font-weight: 700;
  line-height: 1.5vw;
  letter-spacing: -0.05vw;
  color: #000;
}

.con20_input {
  flex-grow: 1;
  min-width: 0;
  font-size: calc(var(--px) * 19);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.05vw;
  color: var(--color-dark);
}

.con20_input::placeholder {
  opacity: 1;
  color: #818181;
}

.con20_textarea {
  height: calc(var(--px) * 40);
  resize: none;
}

.con20_radios {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  column-gap: 1.5vw;
}

.con20_radio {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

.con20_radio input {
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 21);
  height: calc(var(--px) * 21);
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
}

.con20_radio input:checked {
  background-color: #000;
  box-shadow: inset 0 0 0 calc(var(--px) * 3) #fff;
}

.con20_radio_txt {
  margin-left: calc(var(--px) * 9);
  font-size: calc(var(--px) * 19);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.07vw;
  color: #000;
}

.con20_sel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
}

.con20_select {
  flex-grow: 1;
  min-width: 0;
  font-size: calc(var(--px) * 19);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.05vw;
  color: #818181;
  cursor: pointer;
}

.con20_filled {
  color: var(--color-dark);
}

.con20_sel_arrow {
  flex-shrink: 0;
  width: calc(var(--px) * 15);
  height: calc(var(--px) * 10);
  margin-right: calc(var(--px) * 4);
  background-color: #000;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.con20_agree {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: calc(var(--px) * 515);
  height: calc(var(--px) * 43);
}

.con20_agree_ck {
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 23);
  height: calc(var(--px) * 23);
  border: 1px solid #000;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
}

.con20_agree_ck:checked {
  background-color: #000;
  box-shadow: inset 0 0 0 calc(var(--px) * 4) #fff;
}

.con20_agree_txt {
  margin-left: calc(var(--px) * 9);
  font-size: calc(var(--px) * 17);
  font-weight: 300;
  line-height: 1.5vw;
  letter-spacing: -0.045vw;
  color: #000;
}

.con20_submit {
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  width: calc(var(--px) * 302);
  height: calc(var(--px) * 64);
  margin-top: 1.7vw;
  border-radius: calc(var(--px) * 10);
  background-color: var(--color-point);
  font-size: calc(var(--px) * 30);
  font-weight: 800;
  line-height: 1.7vw;
  letter-spacing: -0.079vw;
  color: #fff;
}
/* @@con20:end */