@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%;
}

/* 마커디자인 — 말풍선을 핀 위로 올린다.
   js/map.js 의 CustomOverlay yAnchor:1 이 박스 아래변을 좌표(핀 끝)에 붙이므로
   핀 높이 103 + 여백 8 = 111px 만큼 위로 올리면 핀 머리 바로 위에 앉는다.
   마커 이미지가 SDK 고정 px 이라 이 값도 --px 가 아닌 고정 px 이다. */
.map_marker {
  display: inline-block;
  transform: translateY(-111px);
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
  background: var(--color-point);
  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);
}

/* 퍼블시작 */

/* ===== 모바일 지도 터치 잠금 오버레이 (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;
  }
}

/* ═══════════════════════ CON01 : 메인 비주얼 ═══════════════════════
   배경 = images/con01_bg.jpg (단색 + 나무벽 + 한지텍스처 linear burn + 불꽃베이스 + 기와 합성)
   z 층: plates 1 < fire 2 < dish 3 < smoke 4 < head 5 < marquee 6  (PSD 쌓임 순서)
   ★ Swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만들어 마크업 순서로는 못 이긴다
   ═══════════════════════════════════════════════════════════════ */
.con01 {
  position: relative;
  justify-content: flex-start;
  /* fixed 헤더(101px)에 상단이 가려지지 않도록 헤더 높이만큼 내린다 */
  margin-top: 5.3vw;
  height: calc(var(--px) * 1084);
  background-image: url('/images/con01_bg.jpg');
  background-size: cover;
  background-position: center top;
}

.con01_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 5;
  padding-top: 10.2vw;
}

.con01_label {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 357);
  aspect-ratio: 357 / 90;
  /* 시안이 정중앙이 아니다(캔버스중심 대비 -7.5px) — 비대칭 배치를 margin 으로 명시 */
  margin-right: 0.8vw;
  background-image: url('/images/con01_01.png');
  background-size: 100% 100%;
}

/* 라벨 박스가 고정 크기라 좌표로 직접 앉힌다 (시안이 박스 정중앙이 아님) */
.con01_label_txt {
  position: absolute;
  left: 6.4426%;
  top: 0.5vw;
  font-family: var(--font-deco);
  font-size: calc(var(--px) * 42);
  font-weight: 700;
  line-height: 1.55;
  color: #ffffff;
  letter-spacing: -0.25vw;
  white-space: nowrap;
}

.con01_logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  /* 라벨과 같은 사유 — 시안 비대칭(-7px) */
  margin-right: 0.7vw;
}

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

.con01_stamp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 55);
  aspect-ratio: 55 / 86;
  margin-left: -0.3vw;
}

.con01_lead {
  margin-top: 1.2vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 32);
  font-weight: 400;
  line-height: 0.875;
  color: #ffffff;
  letter-spacing: -0.08vw;
  white-space: nowrap;
}

.con01_lead_pt {
  color: #e7d1ab;
}

.con01_desc {
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.04vw;
  text-align: center;
}

/* 접시 슬라이드 — 좌우로 화면 밖까지 흐른다(m03) */
.con01_plates {
  position: absolute;
  left: 0;
  top: 31.3vw;
  z-index: 1;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.con01_plates .swiper-slide {
  width: calc(var(--px) * 460);
}

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

/* 불꽃 — PSD linear dodge. PNG 에 굽지 않고 런타임 블렌드 */
/* 불 영상 1장으로 섹션 가로를 꽉 채운다 (유저 지시 — 기존 좌/우 2장 통합).
   ★ 불꽃이 영상 하단에 있으므로 하단이 잘리면 안 된다 → bottom 을 마퀴(79) 위에 붙이고
     video 에 object-position:bottom 을 줘서 크롭이 나도 아래가 남게 한다. */
.con01_fire {
  position: absolute;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  bottom: calc(var(--px) * 79);
  width: 100%;
  aspect-ratio: 1280 / 720;
  mix-blend-mode: plus-lighter;
  opacity: 0.502;
  pointer-events: none;
}

/* 불 영상 공통 — 하단(불꽃) 보존 */
.con01_fire video,
.con03_fire video,
.con09_fire video {
  object-position: bottom;
}

/* 중앙 큰 접시 — 회전(m01). left/right auto 라 부모 align-items:center 가 가로중앙을 잡는다 */
.con01_dish {
  position: absolute;
  top: 32.5vw;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 746);
  aspect-ratio: 746 / 746;
}

/* .smoke 는 20% 지점에서 opacity 1 → 가장 잘 보이는 순간이 정지위치보다 아래다.
   가시 가중 중심(35% ≈ +92px)만큼 올려 시안 위치에서 피어오르게 한다 */
.con01_smoke {
  position: absolute;
  left: 16.6404%;
  top: 21.7vw;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1045);
  aspect-ratio: 1045 / 1020;
  pointer-events: none;
}

/* 하단 마퀴 띠 — common.css .image_sd_wrap / .image_sd 패턴 */
.con01_marquee {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 79);
  background-color: var(--color-point);
  background-image: var(--marquee-bg);
}

.con01_marquee_track {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 2110);
}

.con01_marquee_copy {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 2110);
  top: 0;
}

.con01_marquee_unit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 422);
}

.con01_marquee_txt {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  line-height: 2.818;
  color: #ffffff;
  letter-spacing: -0.09vw;
  white-space: nowrap;
}

.con01_marquee_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 111);
  aspect-ratio: 111 / 44;
  margin-left: 0.5vw;
}

/* ═══════════════════════ CON02 : 브랜드 소개 ═══════════════════════
   PSD 쌓임: 배경 → 손사진 → 하단바 → 패널 → 원
   ★ 바가 패널 뒤 / 원이 패널 위 — DOM 순서로는 반대가 되므로 z-index 명시
   ═══════════════════════════════════════════════════════════════ */
.con02 {
  position: relative;
  justify-content: flex-start;
  height: calc(var(--px) * 1325);
  background-color: #000000;
  background-image: url('/images/con02_bg.jpg');
  background-size: cover;
  background-position: center top;
}

.con02_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  margin-top: 17.3vw;
  /* 시안 헤드 블록이 캔버스 정중앙이 아니다(중심 947.5 vs 952.5) — 비대칭 배치 */
  margin-right: 0.7vw;
}

.con02_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 1.127;
  color: #ffffff;
  letter-spacing: -0.22vw;
  text-align: center;
}

.con02_title_pt {
  color: #e7d1ab;
}

.con02_desc {
  margin-top: 1.6vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.04vw;
  text-align: center;
}

/* 어화락 원 3개 — 패널 상단에 걸쳐 앉는다 */
.con02_logo {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-top: 2.9vw;
}

.con02_logo_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 108);
  aspect-ratio: 108 / 108;
  background-size: 100% 100%;
}

.con02_logo_item {
  background-image: url('/images/con02_02.png');
}

.con02_logo_item_02 {
  margin-left: -1.0vw;
  background-image: url('/images/con02_03.png');
}

.con02_logo_item_03 {
  margin-left: -0.7vw;
  background-image: url('/images/con02_04.png');
}

.con02_logo_txt {
  font-family: var(--font-logo);
  font-size: calc(var(--px) * 70);
  font-weight: 700;
  line-height: 1.135;
  color: #edebe6;
  letter-spacing: -0.28vw;
}

/* 베이지 패널 — 접시가 좌우·하단에서 잘려야 하므로 고정 높이 + overflow hidden */
.con02_panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  width: 88.2940%;
  height: calc(var(--px) * 653);
  margin-top: -2.7vw;
  padding-top: 5.4vw;
  background-image: url('/images/con02_01.jpg');
  background-size: 100% 100%;
  border-radius: calc(var(--px) * 20);
}

.con02_panel_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  line-height: 1.222;
  color: #231815;
  letter-spacing: -0.18vw;
  text-align: center;
}

.con02_panel_title_pt {
  color: #832127;
}

.con02_panel_desc {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: center;
}

.con02_panel_desc_pt {
  font-weight: 800;
}

.con02_plates {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  margin-top: 3.1vw;
}

.con02_plates .swiper-slide {
  width: calc(var(--px) * 460);
}

.con02_plate_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 430);
  aspect-ratio: 430 / 260;
}

/* 하단 3색 바 — 상단 5px 이 패널 뒤로 깔린다 */
.con02_bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  margin-top: -0.3vw;
}

.con02_bar_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 170);
  height: calc(var(--px) * 26);
  background-color: var(--color-point);
}

.con02_bar_item_02 {
  background-color: #d3b88a;
}

/* ═══ CON0304: 화덕 특허 + 정갈한 한 상 / 정식 구성 (큰틀) ═══ */
.con0304 {
  justify-content: flex-start;
  background-color: #000000;
}

/* ═══ CON03: 특허로 완성한 500℃ 황토 화덕 기술 ═══ */
.con03 {
  position: relative;
  /* con04 가 absol 컨테이너라 positioned 가 된다 → DOM 뒤인 con04 가 con03 을 덮는다.
     마크업 순서로 이길 수 없는 경우라 z-index 를 쓴다 (CLAUDE.md §1) */
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 5.7vw;
}
.con03_grill {
  left: -0.5%;
  top: 9vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1933);
  aspect-ratio: 1933 / 955;
}
.con03_fire {
  left: 9vw;
  top: 14.7vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 83%;
  height: 48%;
  aspect-ratio: 1418 / 794;
  opacity: 0.3;
  mix-blend-mode: color-dodge;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.con03_patent {
  left: 21%;
  top: 18.7vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 309);
  aspect-ratio: 309 / 489;
}
.con03_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  line-height: 1.222;
  color: #ffffff;
  letter-spacing: -0.18vw;
  text-align: center;
}
.con03_title_pt {
  color: #e7d1ab;
}
.con03_desc {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con03_desc_pt {
  font-weight: 800;
}
.con03_panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  flex-shrink: 0;
  width: 88.3465%;
  height: calc(var(--px) * 653);
  margin-top: 34.5vw;
  padding-left: 8.8189%;
  background-image: url('/images/con03_04.jpg');
  background-size: 100% 100%;
  border-radius: calc(var(--px) * 20);
}
.con03_panel_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 11.4vw;
}
.con03_panel_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  line-height: 1.222;
  color: #ffffff;
  letter-spacing: -0.18vw;
}
.con03_panel_title_pt {
  color: #e7d1ab;
}
.con03_panel_desc {
  margin-top: 1.6vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.04vw;
}
.con03_panel_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* PSD set_meal(843,4309 · 1017x836) 원본을 그대로 배치한다.
     패널(118,4405 · 1683x653) 을 넘는 상단 96 · 우측 59 는 패널 overflow:hidden 이 자른다.
     예전엔 이 잘림을 PNG 에 구워(958x653) 써서, 패널이 늘어나는 모바일에서 접시가 잘린 채 보였다. */
  width: calc(var(--px) * 1017);
  aspect-ratio: 1017 / 836;
  margin-top: calc(var(--px) * -96);
  margin-right: calc(var(--px) * -59);
}

/* ═══ CON04: 높은 객단가를 만드는 정식 구성 + 계절은 변해도 ═══ */
.con04 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  /* 큰틀 plan 겹침 표: 4895 − 5058 = -163px — con04 나무결이 con03 붉은패널 뒤로 파고듦 */
  margin-top: -8.6vw;
  padding-top: 15.8vw;
}
.con04_cctv {
  left: -12.2%;
  top: 32vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 2182);
  aspect-ratio: 2182 / 1656;
  opacity: 0.4;
  pointer-events: none;
}
.con04_cctv video {
  display: block;
  width: 100%;
}
.con04_hanji {
  left: 0;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  aspect-ratio: 1905 / 985;
}
/* 구름 데코 — PSD 레이어(`핵심경쟁력 > 화덕 > 벡터 고급 개체 복사 8·9·10`) 추출본.
   _03 은 문 뒤에 깔리는 조각이라 문이 열리면서 드러난다. 좌표는 PSD 원좌표(x−8, y−4895). */
.con04_cloud {
  pointer-events: none;
}

.con04_cloud_01 {
  left: 20.9974%;
  top: 20.9449vw;
  width: 18.0052%;
  aspect-ratio: 343 / 151;
}

.con04_cloud_02 {
  left: 71.0236%;
  top: 25.6168vw;
  width: 7.5591%;
  aspect-ratio: 144 / 64;
}

.con04_cloud_03 {
  left: 12.3360%;
  top: 30.7612vw;
  width: 11.6010%;
  aspect-ratio: 221 / 97;
}

/* 창살문 — PSD 레이어(`핵심경쟁력 > 화덕 > 레이어 1046`)를 추출해 3짝 이어붙여 960px 로 만들었다.
   ★ 래퍼에 섹션 배경을 mask-image 로 걸어 문이 하단 곡선 밖으로 안 나가게 자른다.
   닫힘(문이 화면을 꽉 덮음) → 열림(좌우 바깥으로 밀려남) 모션은 js/animation.js. */
.con04_doors {
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1905 / 985;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: url('/images/con04_01.webp');
          mask-image: url('/images/con04_01.webp');
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* 문 1짝 = 960px, 세로는 섹션(985)보다 큰 1094 라 위아래로 살짝 넘긴다(마스크가 정리) */
.con04_door {
  top: -1.7273%;
  width: 50.3937%;
  aspect-ratio: 960 / 1094;
}

/* 열린 상태 = 시안 위치. 좌측 문은 오른쪽 끝이 422, 우측 문은 왼쪽 끝이 1482 에 오도록 바깥으로 나가 있다 */
.con04_door_l {
  left: -28.2415%;
}

.con04_door_r {
  left: 77.7953%;
}

.con04_bar {
  left: 22.1%;
  top: 16.5vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 24);
  aspect-ratio: 24 / 500;
}
.con04_bar_r {
  left: 76.6%;
}
.con04_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 1.127;
  color: #231815;
  letter-spacing: -0.22vw;
  text-align: center;
}
.con04_title_pt {
  color: #832127;
}
.con04_desc {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con04_desc_pt {
  font-weight: 800;
}
.con04_dish {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 918);
  aspect-ratio: 918 / 685;
  margin-top: 1.2vw;
  margin-right: 1.3%;
}
.con04_season {
  right: 15.1%;
  top: 66.3vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  text-align: right;
}
.con04_season_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  line-height: 1.222;
  color: #ffffff;
  letter-spacing: -0.18vw;
}
.con04_season_title_pt {
  color: #e7d1ab;
}
.con04_season_desc {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.04vw;
}
.con04_season_note {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 20);
  font-weight: 800;
  line-height: 1.4;
  color: #ffffff;
  letter-spacing: -0.04vw;
}
.con04_marquee {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  height: calc(var(--px) * 80);
  margin-top: 24.7vw;
  background-color: var(--color-point);
  background-image: var(--marquee-bg);
}
.con04_marquee_track {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 2110);
}
.con04_marquee_copy {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 2110);
  top: 0;
}
.con04_marquee_unit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 422);
}
.con04_marquee_txt {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  line-height: 2.818;
  color: #ffffff;
  letter-spacing: -0.09vw;
  white-space: nowrap;
}
.con04_marquee_logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 111);
  aspect-ratio: 111 / 44;
  margin-left: 0.5vw;
}

/* ═══ CON050607: 계단식 매출 성장 + 월매출 실적 + 수익 구조 (큰틀) ═══ */
.con050607 {
  justify-content: flex-start;
  background-color: #fdf5e6;
  background-image: url('/images/con050607_bg.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

/* ═══ CON05: 오픈 후 5개월, 계단식 매출 성장 흐름 ═══ */
.con05 {
  /* absol 3종(.con05_roof / .con05_chart / .con05_arrow)의 컨테이닝 블록 */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  /* STEP 9 보정: 타이틀 잉크가 시안보다 2px 위 → +0.1vw. padding-bottom 도 같이 +0.1vw 로 높이 922 유지 */
  padding-top: 13vw;
  padding-bottom: 25.5vw;
}
.con05_roof {
  left: -5.3%;
  /* STEP 9 보정: 렌더가 시안보다 2px 아래 (지붕 상단 알파가 22행에 걸쳐 페이드인해
     파서 bounds 의 첫 행을 가시 시작점으로 볼 수 없음) → -2px = -0.1vw */
  top: -0.1vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 2322);
  aspect-ratio: 2322 / 153;
}
.con05_title {
  /* CSS 는 마지막 글자 뒤에도 letter-spacing 을 넣어 text-align:center 가 우측으로 밀린다.
     shrink-to-fit 박스라 padding-right 는 텍스트를 그 절반만큼 왼쪽으로 옮긴다 (실측 보정) */
  padding-right: calc(var(--px) * 14);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 1.127;
  color: #231815;
  letter-spacing: -0.22vw;
  text-align: center;
}
.con05_title_pt {
  color: var(--color-point);
}
.con05_desc {
  /* 잉크 중심 실측 보정 — 시안이 캔버스 중심보다 우측이라 padding-left 로 민다 */
  padding-left: calc(var(--px) * 3);
  /* STEP 9 보정: 타이틀이 2px 내려간 만큼 + 본문 자체 1px → 0.7vw(13.3px) − 3.8px = 0.5vw */
  margin-top: 0.5vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con05_desc_pt {
  font-weight: 800;
}
/* 5열 금액 잉크상단이 서브카피 잉크하단보다 위라 세로 흐름으로 표현 불가 → 좌표 배치.
   left 는 부모 flex center 의 static position 에 맡긴다 (중앙값과 1.5px 차) */
.con05_chart {
  position: absolute;
  bottom: -2.3vw;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  /* 콘텐츠 스팬은 1160px 이지만 중앙배치 결과가 시안 좌측끝 371 과 1.5px 어긋난다.
     1163 이면 (1905−1163)/2 = 371.0 으로 정확히 일치 — 늘어난 3px 은 flex-start 라 우측 여유로만 남는다 */
  width: 61.0499%;
}
.con05_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 137);
}
/* 열 피치가 260/255/254/254 로 불균일 → space-between 대신 열별 margin-left */
.con05_item_02 {
  margin-left: 10.6%;
}
.con05_item_03 {
  margin-left: 10.2%;
}
.con05_item_04 {
  margin-left: 10.1%;
}
.con05_item_05 {
  margin-left: 10.1%;
}
/* 186px 이라 li(137px)를 좌우 24.5px 씩 오버플로한다 — overflow 를 걸지 말 것 */
.con05_badge {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 186);
  /* plan 은 aspect-ratio 186/77 이지만 직계 자식이 img 가 아니라 .absol_cover 래퍼라
     aspect-ratio 훅에 걸린다. width 가 고정 px 이라 height 77 과 수치가 동일하다 */
  height: calc(var(--px) * 77);
}
.con05_badge_txt {
  margin-top: 0.9vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 26);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.10vw;
  white-space: nowrap;
}
.con05_amount {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 36);
  font-weight: 400;
  line-height: 1;
  color: #231815;
  /* PSD 0em — 글로벌 section{letter-spacing:-0.04vw} 상쇄 */
  letter-spacing: 0;
  white-space: nowrap;
}
.con05_amount_01 {
  margin-top: 0.3vw;
}
.con05_amount_05 {
  color: var(--color-point);
}
.con05_month {
  margin-top: 0.3vw;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1;
  color: #231815;
  letter-spacing: -0.04vw;
  white-space: nowrap;
}
.con05_month_05 {
  color: #000000;
}
.con05_bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: calc(var(--px) * 30) calc(var(--px) * 30) 0 0;
}
.con05_bar_01 {
  margin-top: 0.6vw;
  height: calc(var(--px) * 231);
  background-color: #d3b88a;
}
.con05_bar_02 {
  margin-top: 0.8vw;
  height: calc(var(--px) * 310);
  background-color: #e2ceac;
}
.con05_bar_03 {
  margin-top: 0.8vw;
  height: calc(var(--px) * 353);
  background-color: #e2ceac;
}
.con05_bar_04 {
  margin-top: 0.8vw;
  height: calc(var(--px) * 420);
  background-color: #e2ceac;
}
.con05_bar_05 {
  margin-top: 0.9vw;
  height: calc(var(--px) * 456);
  background-color: #231815;
}
.con05_arrow {
  left: 25.4%;
  top: 29.8vw;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 925);
  aspect-ratio: 925 / 330;
}

/* ═══ CON06: 맛있는 브랜드를 넘어, 안정적인 수익을 만드는 브랜드 (월매출 실적) ═══ */
/* absol 7종(.con06_frame / .con06_side ×2 / .con06_cloud ×2 / .con06_border)의 컨테이닝 블록.
   position:relative 여야 DOM 뒤인 con06 이 con05 막대 하단 43.5px 위로 페인트된다 */
.con06 {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  /* 보이는 것이 전부 absol(프레임·카드·접시·세로바·구름·보더)이라 흐름 콘텐츠는 타이틀+서브뿐이다.
     예전엔 padding-bottom 28.4vw(=543px)가 사실상 스페이서 역할을 했는데, 타이틀이 리플로우되면
     영역 높이가 통째로 흔들린다 → 시안 영역 높이를 직접 박는다 (유저 승인) */
  /* 전역 리셋이 box-sizing: unset(content-box) 이라 padding-top 이 height 에 더해진다 */
  box-sizing: border-box;
  height: calc(var(--px) * 830);
  /* STEP 9 보정: 타이틀 잉크가 시안보다 2px 위 → +0.1vw */
  padding-top: 6.6vw;
}
/* 높이는 height/aspect-ratio 가 아니라 top:0 + bottom:0 스트레치로 잡는다.
   left 는 부모 flex center 의 static position 에 맡긴다 (중앙값과 1.5px 차) */
/* z-index:0 = 스택 컨텍스트 생성. Swiper 가 `.swiper{z-index:1}` 을 걸기 때문에
   그냥 두면 카드행이 프레임 밖 형제(보더·구름)까지 뚫고 올라온다 (CLAUDE.md §1) */
/* ★ left 명시 = CLAUDE.md §1 「중앙 ±2px 이면 좌표 삭제」의 예외 (유저 지시).
   시안 프레임은 98~1804 라 중심이 951 이고 캔버스 중심 952.5 와 1.5px 어긋나 있다.
   좌표를 지우면 프레임 콘텐츠(한지·산문양·카드·접시) 전체가 +1.5px 밀린다. 98/1905 = 5.1444% */
.con06_frame {
  z-index: 0;
  left: 5.1444%;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1706);
}
/* Swiper 컨테이너. 폭 = 프레임 폭이고 Swiper 자체 overflow:hidden 이 프레임 경계에서 잘라낸다.
   centeredSlides + initialSlide:2 로 5장(1825)이 프레임(1706)을 좌우로 넘쳐 시안과 같은 잘림이 나온다 */
.con06_cards {
  position: absolute;
  top: 18vw;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
/* 열 간격 33/33/32/32 → Swiper spaceBetween(32.5) 오차 최대 1.0px 이라 열별 margin 불필요 */
.con06_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 339);
  height: calc(var(--px) * 204);
  border-radius: calc(var(--px) * 20);
  background-color: #231815;
}
.con06_card_top {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 69);
  border-radius: calc(var(--px) * 20) calc(var(--px) * 20) 0 0;
  background-color: var(--color-point);
}
.con06_card_month {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  line-height: 1;
  color: #edebe6;
  letter-spacing: -0.09vw;
}
/* PSD -0.05em — 이 섹션의 다른 텍스트(-0.075em) 와 다르다 */
.con06_card_amount {
  margin-top: 1.3vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 52);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.14vw;
}
.con06_card_store {
  margin-top: 0.3vw;
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1;
  color: #edebe6;
  letter-spacing: -0.04vw;
}
/* 프레임 내 DOM 마지막 = 카드 위로 페인트. 사진 하단이 프레임 하단에 일치 */
.con06_dish {
  /* Swiper 가 카드행에 건 z-index:1 을 이겨야 접시가 카드 위로 온다 (CLAUDE.md §1) */
  z-index: 2;
  /* STEP 9 보정: 렌더가 시안보다 2px 우측 → (584−99.5)/1706 = 28.4055 */
  left: 28.4%;
  bottom: 1%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 757);
  aspect-ratio: 757 / 433;
}
.con06_title {
  /* CSS 는 마지막 글자 뒤에도 letter-spacing 을 넣어 text-align:center 가 우측으로 밀린다.
     shrink-to-fit 박스라 padding-right 는 텍스트를 그 절반만큼 왼쪽으로 옮긴다 → 실측 +4px 보정 */
  padding-right: calc(var(--px) * 8);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 1.127;
  color: #231815;
  letter-spacing: -0.22vw;
  text-align: center;
}
.con06_title_pt {
  color: var(--color-point);
}
.con06_desc {
  /* 위와 같은 사유 — 실측 +1.5px 보정 */
  padding-right: calc(var(--px) * 3);
  margin-top: 0.6vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #000000;
  letter-spacing: -0.04vw;
  text-align: center;
}
/* 3단 스택(자식 합 166+165+167 = 498). plan 의 top:8.7vw(165.7) 는 영역 세로 정중앙
   (830-498)/2 = 166 과 0.3px 차라 center-check 에 걸린다 → 좌표를 지우고
   top:0/bottom:0 스트레치 + justify-content:center 로 부모 높이에 맡긴다
   (.con06_frame 과 같은 방식 — height/aspect-ratio 미사용) */
.con06_side {
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 26);
}
/* 좌우 비대칭(74.6 vs 79.4)은 디자인 실측 그대로 */
.con06_side_l {
  left: 3.9%;
}
.con06_side_r {
  right: 4.2%;
}
.con06_side_bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.con06_side_bar_01 {
  height: calc(var(--px) * 166);
  background-color: var(--color-point);
}
.con06_side_bar_02 {
  height: calc(var(--px) * 165);
  background-color: #d3b88a;
}
.con06_side_bar_03 {
  height: calc(var(--px) * 167);
  background-color: var(--color-point);
}
.con06_cloud {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 161);
  aspect-ratio: 161 / 72;
}
.con06_cloud_01 {
  left: 23.1%;
  top: 31.5vw;
}
.con06_cloud_02 {
  left: 70.8%;
  top: 12.1vw;
}
/* DOM 최후 = 프레임·카드·사진·세로바·구름 전부 위 (z-index 선언 0건).
   left 는 부모 flex center 의 static position 에 맡긴다 (중앙값과 1.5px 차) */
/* DOM 최상단으로 올린 대신 z-index 로 최상위 유지 — 프레임(0)·세로바·구름(auto) 위.
   pointer-events:none = 유저 명시 요청 — 프레임 전체를 덮는 오버레이라 아래 요소의
   클릭·호버·개발자도구 선택을 가로막는다 (Swiper 드래그 포함) */
/* left 는 .con06_frame 과 동일 (같은 사유) */
.con06_border {
  z-index: 1;
  pointer-events: none;
  left: 5.1444%;
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1706);
  aspect-ratio: 1706 / 830;
}

/* ═══ CON07: 숫자로 증명하는 안정적인 수익 구조 ═══ */
/* absol 0개 — 좌(실적) · 중(도넛) · 우(손익계산서) 3단 전부 흐름(flex) 배치다 */
.con07 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 4.9vw;
  padding-bottom: 5.1vw;
}
.con07_title {
  /* 위와 같은 사유 (실측 보정) */
  padding-right: calc(var(--px) * 6);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 1.127;
  color: #231815;
  letter-spacing: -0.22vw;
  text-align: center;
}
.con07_title_pt {
  color: var(--color-point);
}
.con07_desc {
  /* 잉크 중심 실측 보정 */
  padding-right: calc(var(--px) * 3);
  /* STEP 9 보정: 렌더 잉크가 시안보다 3px 위 → +0.2vw */
  margin-top: 1.1vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.4;
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: center;
}
/* 좌우 여백 비대칭(219/172)은 시안 그대로 — 3단 전체의 중심이 캔버스 중앙(952.5)이 아니라 976.5 다.
   단 간격 30/30 은 트랙 여유 60 을 space-between 이 반씩 나눈 결과.
   box-sizing:border-box = 전역 리셋이 content-box 라 width:100% + padding 이면 폭이 넘친다 */
.con07_body {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  /* STEP 9 보정: 서브카피를 3px 내린 만큼 상쇄해 아래 3단 위치·전체 높이 유지 */
  margin-top: 0.9vw;
  padding-left: calc(var(--px) * 219);
  padding-right: calc(var(--px) * 172);
}
.con07_stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 347);
  margin-top: 8.6vw;
}
.con07_stat_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}
/* border-top = 구분선(사각형 988). 값 1 → raw 1px (CLAUDE.md §1) */
.con07_stat_item_02 {
  margin-top: 1.9vw;
  padding-top: 1.8vw;
  border-top: 1px solid #231815;
}
.con07_stat_label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 339);
  height: calc(var(--px) * 54);
  border-radius: 50vw;
  background: #231815;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 26);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.10vw;
}
.con07_stat_value {
  margin-top: 0.7vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 1;
  color: var(--color-point);
  /* PSD 0em — 글로벌 section{letter-spacing:-0.04vw} 상쇄 */
  letter-spacing: 0;
}
.con07_stat_unit {
  font-size: calc(var(--px) * 38);
  color: #000000;
}
/* 링 3겹(12/22/24)은 이미 PNG 픽셀에 구워져 있다 — border/box-shadow/filter 중복 금지 */
.con07_chart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 567);
  aspect-ratio: 1 / 1;
  margin-top: 2.4vw;
}
/* 원형차트는 SVG 로 그린다 — conic-gradient 는 방사 경계 안티에일리어싱이 없어 계단이 심하다.
   링·내부원·연기 아이콘 PNG 까지 <image> 로 SVG 안에 넣어 absol 없이 겹친다 */
.con07_chart_svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.con07_chart_lb {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  letter-spacing: 0;
}
.con07_chart_lb_pct {
  font-size: calc(var(--px) * 26);
}
.con07_report_area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 540);
}
/* 캡션 우측끝(1733)은 표 박스 우측끝과 같은 선 — width:100% + text-align:right 대신
   intrinsic width + align-self 로 붙인다 (leaf 텍스트 width 고정 금지) */
.con07_report_cap {
  align-self: flex-end;
  font-size: calc(var(--px) * 16);
  font-weight: 500;
  line-height: 1;
  color: #282828;
}
/* box-sizing:border-box = 1px 보더를 폭 540 에 포함시킨다 (안쪽 트랙 538) */
.con07_report {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 540);
  margin-top: 0.8vw;
  border: 1px solid #231815;
  background-color: #ffffff;
}
/* 문구 잉크 cy 345.5 는 띠 중앙보다 2px 아래 → padding-top 2 로 보정 */
.con07_report_head {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 58);
  padding: calc(var(--px) * 2) calc(var(--px) * 19) 0;
  background-color: #231815;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 19);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.05vw;
}
/* 폭 500 을 부모(538) flex center 로 두어 구분선이 좌우 19px 인셋된다 */
.con07_report_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 500);
}
/* 행 높이 54 가 곧 구분선 격자. 값 1 → raw 1px */
.con07_report_row {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 54);
  border-bottom: 1px solid rgba(35, 24, 21, 0.1);
  font-size: calc(var(--px) * 19);
  font-weight: 400;
  line-height: 1;
  color: #1c1f1d;
  letter-spacing: -0.04vw;
}
/* 8행(기타) — 시안 구분선은 7개뿐 */
.con07_report_row_end {
  height: calc(var(--px) * 51);
  border-bottom: 0;
}
/* 문구 잉크 cy 833 은 띠 중앙보다 3px 위 → padding-bottom 8 로 보정 */
.con07_report_foot {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 69);
  padding: 0 calc(var(--px) * 19) calc(var(--px) * 8);
  background-color: var(--color-point);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 19);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  letter-spacing: -0.05vw;
}
/* 3열 합 478 < 트랙 500 → 우측 22px 은 여유로 남긴다 (시안 열 중심이 균등분할이 아님) */
.con07_report_c1 {
  width: calc(var(--px) * 165);
  text-align: center;
}
.con07_report_c2 {
  width: calc(var(--px) * 177);
  text-align: center;
}
.con07_report_c3 {
  width: calc(var(--px) * 136);
  text-align: center;
}
/* 2행 들여쓰기는 공백문자가 아니라 행잉 인덴트 (padding-left 11 + text-indent -11) */
.con07_report_note {
  width: 100%;
  margin-top: 0.6vw;
  padding-left: calc(var(--px) * 11);
  text-indent: calc(var(--px) * -11);
  font-size: calc(var(--px) * 15);
  font-weight: 500;
  line-height: 1.4;
  color: #282828;
  text-align: left;
}

.con08 {
  position: relative;
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 7.4vw;
  /* STEP 9 1차: 제목 흐름을 4px 올린 만큼 하단 여백을 복원해 565px 높이 계약 유지 */
  padding-bottom: 7vw;
  background-image: url('/images/con08_bg.jpg');
}
.con08_food01 {
  left: 6.614173%;
  top: -6.71916vw;
  width: calc(var(--px) * 595);
  aspect-ratio: 595 / 357;
}
.con08_food02 {
  left: 76.167979%;
  top: -10.603675vw;
  width: calc(var(--px) * 653);
  aspect-ratio: 653 / 457;
}
.con08_food03 {
  left: -6.456693%;
  top: 16.272966vw;
  width: calc(var(--px) * 669);
  aspect-ratio: 669 / 395;
}
.con08_food04 {
  left: 61.574803%;
  top: 15.800525vw;
  width: calc(var(--px) * 648);
  aspect-ratio: 648 / 394;
}
.con08_motif {
  width: calc(var(--px) * 194);
  aspect-ratio: 194 / 53;
}
.con08_title {
  /* STEP 9 1차: SAD 측정에서 제목·본문이 각각 4~5px 아래 → 흐름 시작을 4px 위로 보정 */
  margin-top: 1.4vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 3.4vw;
  color: #fff;
  letter-spacing: -0.2vw;
  text-align: center;
}
.con08_title_accent {
  color: #e7c790;
}
.con08_desc {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.5vw;
  color: #fff;
  /* STEP 9 1차: -0.1vw 렌더폭 375.5px, 시안 bbox 388px → PSD tracking 실측값으로 복원 */
  letter-spacing: -0.04vw;
  text-align: center;
}

.con09101112 {
  width: 100%;
  overflow: hidden;
  justify-content: flex-start;
  background-color: #000;
  background-image: url('/images/con09101112_bg.png');
  background-size: 100.7874% auto;
  background-position: center -19.6vw;
}
.con09101112_oven_photo img,
.con09_fire img,
.con09_card_fish img,
.con09_card_overlay img,
.con09_card_paper img,
.con09_badge_motif img,
.con09_badge_texture img {
  width: 100%;
}
.con09101112_oven_photo {
  left: -39.5%;
  top: 53.2vw;
  width: calc(var(--px) * 2682);
  aspect-ratio: 2682 / 1543;
  z-index: 1;
}
.con09 {
  width: 100%;
  overflow: hidden;
  padding-top: 7vw;
  padding-bottom: 3.3vw;
  justify-content: flex-start;
  z-index: 3;
}
.con09_tabs {
  box-sizing: border-box;
  top: 0;
  width: calc(var(--px) * 501);
  height: calc(var(--px) * 26);
  justify-content: flex-start;
  border-top: 1px solid #000;
  z-index: 5;
}
.con09_tabs i {
  display: block;
  width: calc(100% / 3);
  height: calc(var(--px) * 26);
  flex: 0 0 auto;
}
.con09_tabs i + i {
  margin-left: calc(var(--px) * -4);
}
.con09_tab01,
.con09_tab03 {
  background-color: #832127;
}
.con09_tab02 {
  background-color: #d3b88a;
}
.con09_fire {
  left: auto;
  top: 0;
  width: 87%;
  aspect-ratio: unset;
  opacity: 0.8;
  mix-blend-mode: plus-lighter;
  z-index: 0;
  height: 51%;
  overflow: hidden;
  flex-direction: column;
  /* 좌우 끝을 투명으로 흘려 가장자리 잘린 티를 없앤다 (가운데 70% 는 원본 그대로) */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%);
}

.con09_fire > video {
  width: 151%;
}
.con09_header {
  width: 100%;
  justify-content: flex-start;
  z-index: 2;
}
.con09_eyebrow {
  font-family: var(--font-deco);
  font-size: calc(var(--px) * 40);
  font-weight: 400;
  line-height: 3.3vw;
  color: #fff;
  letter-spacing: -0.2vw;
  text-align: center;
}
.con09_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  font-weight: 400;
  line-height: 3.3vw;
  color: #fff;
  letter-spacing: -0.2vw;
  text-align: center;
}
.con09_title_accent {
  color: #e7c790;
}
.con09_intro {
  gap: 1.1vw;
  margin-top: 1.7vw;
  justify-content: flex-start;
  z-index: 2;
}
.con09_intro p {
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.5vw;
  color: #fff;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con09_card {
  box-sizing: border-box;
  width: calc(var(--px) * 1682);
  height: calc(var(--px) * 654);
  margin-top: 3.5vw;
  padding-top: 4.2vw;
  overflow: hidden;
  justify-content: flex-start;
  border-radius: calc(var(--px) * 20);
  background-color: #edebe6;
  z-index: 3;
}
.con09_card_fish {
  left: calc(var(--px) * -19);
  top: calc(var(--px) * -31);
  width: calc(var(--px) * 1707);
  aspect-ratio: 1707 / 921;
  z-index: 0;
}
.con09_card_overlay {
  left: calc(var(--px) * -119);
  top: calc(var(--px) * -1379);
  width: 100.8vw;
  aspect-ratio: 480 / 521;
  z-index: 1;
}
.con09_card_paper {
  left: calc(var(--px) * -122);
  top: calc(var(--px) * -739);
  width: calc(var(--px) * 1937);
  aspect-ratio: 1937 / 1375;
  mix-blend-mode: multiply;
  z-index: 2;
}
.con09_badge {
  height: calc(var(--px) * 76);
  z-index: 3;
}
.con09_badge_motif {
  position: relative;
  width: calc(var(--px) * 73);
  aspect-ratio: 73 / 73;
  z-index: 2;
}
.con09_badge_disc {
  width: calc(var(--px) * 76);
  height: calc(var(--px) * 76);
  margin-left: calc(var(--px) * -15);
  overflow: hidden;
  border-radius: 50%;
  background-color: #832127;
  z-index: 1;
}
.con09_badge_texture {
  left: calc(var(--px) * -3);
  top: calc(var(--px) * 2);
  width: calc(var(--px) * 77);
  aspect-ratio: 77 / 74;
  z-index: 0;
}
.con09_badge_num {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 30);
  font-weight: 400;
  line-height: 2.9vw;
  color: #edebe6;
  letter-spacing: -0.1vw;
  z-index: 1;
}
.con09_card_title {
  margin-top: 1.4vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  line-height: 2.9vw;
  color: #000;
  letter-spacing: -0.2vw;
  text-align: center;
  z-index: 3;
}
.con09_card_desc {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.5vw;
  color: #000;
  letter-spacing: -0.04vw;
  text-align: center;
  z-index: 3;
}
.con09_card_desc_strong {
  font-weight: 800;
}

.con10_badge_motif img,
.con10_badge_texture img,
.con11_photo img,
.con11_badge_motif img,
.con11_badge_texture img {
  width: 100%;
}
.con10 {
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  margin-top: -22.9vw;
  padding-top: 31vw;
  padding-bottom: 21.9vw;
  align-items: flex-start;
  justify-content: flex-start;
  background-image: url('/images/con09101112_bg.png');
  background-repeat: no-repeat;
  background-position: center -63.6vw;
  background-size: 100.7874% auto;
  z-index: 2;
}
.con10_content {
  width: calc(var(--px) * 391);
  margin-left: 18.4%;
  align-items: flex-start;
  justify-content: flex-start;
}
.con10_badge {
  height: calc(var(--px) * 76);
  justify-content: flex-start;
  z-index: 2;
}
.con10_badge_motif {
  width: calc(var(--px) * 73);
  margin-left: calc(var(--px) * 1);
  aspect-ratio: 73 / 73;
  z-index: 2;
}
.con10_badge_disc {
  width: calc(var(--px) * 76);
  height: calc(var(--px) * 76);
  margin-left: calc(var(--px) * -15);
  overflow: hidden;
  border-radius: 50%;
  background-color: #832127;
  z-index: 1;
}
.con10_badge_texture {
  left: calc(var(--px) * -3);
  top: calc(var(--px) * 2);
  width: calc(var(--px) * 77);
  aspect-ratio: 77 / 74;
  z-index: 0;
}
.con10_badge_num {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 30);
  font-weight: 400;
  line-height: 2.9vw;
  color: #edebe6;
  letter-spacing: -0.1vw;
  z-index: 1;
}
.con10_title {
  width: 100%;
  margin-top: 0.7vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45.02);
  font-weight: 400;
  line-height: 2.9vw;
  color: #edebe6;
  letter-spacing: -0.2vw;
}
.con10_title_accent {
  color: #e7d1ab;
}
.con10_body {
  width: 100%;
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: 1.4;
  color: #edebe6;
  letter-spacing: -0.04vw;
}
.con11 {
  width: 100%;
  overflow: hidden;
  margin-top: -9.5vw;
  justify-content: flex-start;
  background-color: #000;
  z-index: 3;
}
.con11_card {
  box-sizing: border-box;
  width: calc(var(--px) * 1682);
  height: calc(var(--px) * 654);
  padding-top: 12vw;
  overflow: hidden;
  justify-content: flex-start;
  border-radius: calc(var(--px) * 20);
  background-color: #000;
  transform: translateY(calc(var(--px) * 1));
}
.con11_photo {
  left: calc(var(--px) * -181);
  top: calc(var(--px) * -603);
  width: calc(var(--px) * 2326);
  aspect-ratio: 2326 / 1278;
  z-index: 0;
}
.con11_badge {
  height: calc(var(--px) * 76);
  z-index: 1;
}
.con11_badge_motif {
  width: calc(var(--px) * 73);
  aspect-ratio: 73 / 73;
  z-index: 2;
}
.con11_badge_disc {
  width: calc(var(--px) * 76);
  height: calc(var(--px) * 76);
  margin-left: calc(var(--px) * -15);
  overflow: hidden;
  border-radius: 50%;
  background-color: #832127;
  z-index: 1;
}
.con11_badge_texture {
  left: calc(var(--px) * -3);
  top: calc(var(--px) * 2);
  width: calc(var(--px) * 77);
  aspect-ratio: 77 / 74;
  z-index: 0;
}
.con11_badge_num {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 30);
  font-weight: 400;
  line-height: 2.9vw;
  color: #edebe6;
  letter-spacing: -0.1vw;
  z-index: 1;
}
.con11_card_title {
  margin-top: 1.4vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  line-height: 2.9vw;
  color: #fff;
  letter-spacing: -0.2vw;
  text-align: center;
  z-index: 1;
}
.con11_card_title_accent {
  color: #e7d1ab;
}
.con11_card_desc {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  line-height: 1.5vw;
  color: #fff;
  letter-spacing: -0.04vw;
  text-align: center;
  z-index: 1;
}
.con12_badge_motif img,
.con12_badge_texture img,
.con12_card_photo_img img {
  width: 100%;
}
.con12 {
  box-sizing: border-box;
  width: 100%;
  padding-top: 6.5vw;
  padding-bottom: 7vw;
  overflow: hidden;
  justify-content: flex-start;
  background-color: #000;
  z-index: 4;
}
.con12_header {
  width: 100%;
  justify-content: flex-start;
}
.con12_badge {
  height: calc(var(--px) * 76);
  z-index: 2;
}
.con12_badge_motif {
  width: calc(var(--px) * 73);
  margin-left: calc(var(--px) * 1);
  aspect-ratio: 73 / 73;
  transform: translateY(calc(var(--px) * -2));
  z-index: 2;
}
.con12_badge_disc {
  width: calc(var(--px) * 76);
  height: calc(var(--px) * 76);
  margin-left: calc(var(--px) * -15);
  overflow: hidden;
  border-radius: 50%;
  background-color: #832127;
  z-index: 1;
}
.con12_badge_texture {
  left: calc(var(--px) * -3);
  top: calc(var(--px) * 2);
  width: calc(var(--px) * 77);
  aspect-ratio: 77 / 74;
  z-index: 0;
}
.con12_badge_num {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 30);
  font-weight: 400;
  line-height: 2.9vw;
  color: #edebe6;
  letter-spacing: -0.1vw;
  z-index: 1;
}
.con12_title {
  margin-top: 1.4vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 45.02);
  font-weight: 400;
  line-height: 2.9vw;
  color: #edebe6;
  letter-spacing: calc(var(--px) * -3.38);
  text-align: center;
  transform: translate(calc(var(--px) * -2), calc(var(--px) * -6));
}
.con12_title_accent {
  color: #e7d1ab;
}
.con12_desc {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: 1.4;
  color: #edebe6;
  letter-spacing: -0.04vw;
  text-align: center;
  transform: translateY(calc(var(--px) * -7));
}
.con12_cards {
  width: 100%;
  margin-top: 2.9vw;
  gap: calc(var(--px) * 24);
  justify-content: center;
  align-items: flex-start;
  transform: translateX(calc(var(--px) * -1));
  z-index: 1;
}
.con12_card {
  box-sizing: border-box;
  height: calc(var(--px) * 445);
  overflow: hidden;
  flex: 0 0 auto;
  justify-content: flex-start;
  border: 1px solid #241a1b;
  border-radius: calc(var(--px) * 20);
  background-color: #f5efe1;
}
.con12_card01,
.con12_card03 {
  width: calc(var(--px) * 504);
}
.con12_card02 {
  width: calc(var(--px) * 505);
}
.con12_card_photo {
  box-sizing: border-box;
  width: calc(100% + calc(var(--px) * 2));
  height: calc(var(--px) * 290);
  margin-top: calc(var(--px) * -1);
  overflow: hidden;
  flex: 0 0 auto;
  justify-content: center;
  border: 1px solid #241a1b;
  border-radius: calc(var(--px) * 19) calc(var(--px) * 19) 0 0;
}
.con12_card_photo_img {
  justify-content: center;
}
.con12_card01 .con12_card_photo_img {
  left: calc(var(--px) * -132);
  top: calc(var(--px) * -38);
  width: calc(var(--px) * 678);
  aspect-ratio: 678 / 367;
}
.con12_card02 .con12_card_photo_img {
  left: calc(var(--px) * -20);
  top: calc(var(--px) * -4);
  width: calc(var(--px) * 532);
  aspect-ratio: 532 / 294;
}
.con12_card03 .con12_card_photo_img {
  left: calc(var(--px) * -21);
  top: calc(var(--px) * -16);
  width: calc(var(--px) * 595);
  aspect-ratio: 595 / 327;
}
.con12_step_pill {
  box-sizing: border-box;
  width: calc(var(--px) * 101);
  height: calc(var(--px) * 53);
  margin-top: calc(var(--px) * -29);
  flex: 0 0 auto;
  border: 2px solid #fff;
  border-radius: calc(var(--px) * 27);
  background-color: #241a1b;
  box-shadow: 0 0 0 7px #241a1b;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 20.01);
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.1vw;
  text-transform: uppercase;
  z-index: 2;
}
.con12_card_title {
  margin-top: 0.9vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 33.01);
  font-weight: 400;
  line-height: 2.2vw;
  color: #241a1b;
  letter-spacing: -0.1vw;
  text-align: center;
}
.con12_card_desc {
  margin-top: 0.2vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: 1.4;
  color: #241a1b;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con12_arrow {
  top: 31.6vw;
  width: calc(var(--px) * 93);
  height: calc(var(--px) * 93);
  overflow: hidden;
  border: 1px solid #241a1b;
  border-radius: 50%;
  background-color: #832127;
  background-repeat: no-repeat;
  background-position: calc(var(--px) * -5) calc(var(--px) * 2);
  background-size: calc(var(--px) * 96) calc(var(--px) * 92);
  z-index: 3;
}
.con12_arrow01 {
  left: 33.7%;
  background-image: url('/images/con12_arrow01_texture.png');
}
.con12_arrow02 {
  left: 61.4%;
  background-image: url('/images/con12_arrow02_texture.png');
}
.con12_arrow_text {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 65.2);
  font-weight: 400;
  line-height: 1;
  color: #edebe6;
  letter-spacing: -0.2vw;
  transform: translate(calc(var(--px) * -3), calc(var(--px) * 1));
  z-index: 1;
}

.con13 {
  box-sizing: border-box;
  width: 100%;
  padding-top: 13vw;
  padding-bottom: 10.4vw;
  overflow: hidden;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #000;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.4980392), rgba(0, 0, 0, 0.4980392)),
    url('/images/con13_bg.png');
  background-repeat: no-repeat, no-repeat;
  background-position:
    0 0,
    calc(var(--px) * -156) calc(var(--px) * -1753);
  background-size:
    100% 100%,
    calc(var(--px) * 2184) calc(var(--px) * 2657);
}
.con13_table {
  left: 24.357%;
  top: calc(var(--px) * 2);
  width: calc(var(--px) * 1047);
  aspect-ratio: 1047 / 937;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con13_table img {
  width: 100%;
}
.con13_copy {
  margin-left: 7.3%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.con13_title {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 90.04);
  font-weight: 400;
  line-height: calc(var(--px) * 100.04);
  color: #fff;
  letter-spacing: -0.4vw;
  text-align: left;
}
.con13_title_line {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con13_title_accent {
  color: #e7d1ab;
}
.con13_oven_icon {
  width: calc(var(--px) * 35);
  margin-top: calc(var(--px) * 32);
  margin-left: calc(var(--px) * 11);
  aspect-ratio: 35 / 55;
  flex: 0 0 auto;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con13_oven_icon img {
  width: 100%;
}
.con13_desc {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  letter-spacing: -0.04vw;
  text-align: left;
}
.con13_right_title {
  top: 25.8vw;
  right: 7.5%;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 90.04);
  font-weight: 400;
  line-height: calc(var(--px) * 100.04);
  color: #fff;
  letter-spacing: -0.4vw;
  text-align: right;
}

.con141516 {
  overflow: hidden;
  background-color: #f6f1ed;
}
.con14 {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  padding-top: 5.4vw;
  padding-bottom: calc(var(--px) * 2.9);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con14_top_markers {
  top: calc(var(--px) * -1);
  z-index: 1;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con14_top_marker {
  width: calc(var(--px) * 170);
  padding-top: calc(var(--px) * 26);
  flex-shrink: 0;
}
.con14_top_marker + .con14_top_marker {
  margin-left: calc(var(--px) * -4);
}
.con14_top_marker_01,
.con14_top_marker_03 {
  background-color: #832127;
}
.con14_top_marker_02 {
  background-color: #d3b88a;
}
.con14_top_marker_03 {
  width: calc(var(--px) * 169);
}
.con14_motif {
  width: calc(var(--px) * 194);
  aspect-ratio: 194 / 53;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con14_motif img {
  width: 100%;
}
.con14_food_img img {
  width: 100%;
}
.con14_eyebrow {
  margin-top: 1.5vw;
  font-family: var(--font-deco);
  font-size: calc(var(--px) * 50.02);
  font-weight: 700;
  line-height: calc(var(--px) * 39);
  color: #231815;
  letter-spacing: -0.18vw;
  text-align: center;
}
.con14_title {
  margin-top: 0.9vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  font-weight: 400;
  line-height: calc(var(--px) * 54);
  color: #231815;
  letter-spacing: -0.2vw;
  text-align: center;
}
.con14_title_accent {
  color: var(--color-point);
}
.con14_desc {
  margin-top: calc(var(--px) * 30.4);
  z-index: 1;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: calc(var(--px) * 28);
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con14_desc_line {
  display: block;
}
.con14_desc_strong {
  display: block;
  font-weight: 800;
}
.con14_bg_word {
  top: 18.4vw;
  z-index: 0;
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 308.62);
  font-weight: 400;
  line-height: calc(var(--px) * 243);
  color: #e9e3d8;
  letter-spacing: -1.2vw;
  text-align: center;
}
.con14_slider {
  width: 100%;
  padding-top: calc(var(--px) * 61);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con14_slider .swiper-wrapper {
  transition-timing-function: linear !important;
}
.con14_slide {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: auto !important;
  flex-shrink: 0;
}
.con14_food_img {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con14_food_img_02 {
  width: calc(var(--px) * 375);
  margin-top: 0.5vw;
  aspect-ratio: 375 / 372;
}
.con14_food_img_03 {
  width: calc(var(--px) * 379);
  margin-top: 0;
  aspect-ratio: 379 / 378;
}
.con14_food_img_04 {
  width: calc(var(--px) * 367);
  margin-top: 0.7vw;
  aspect-ratio: 367 / 363;
}
.con14_food_img_05 {
  width: calc(var(--px) * 368);
  margin-top: 0.2vw;
  aspect-ratio: 368 / 368;
}
.con14_food_img_06 {
  width: calc(var(--px) * 417);
  margin-top: 0.2vw;
  aspect-ratio: 417 / 375;
}
.con14_food_img_07 {
  width: calc(var(--px) * 392);
  margin-top: -1.5vw;
  aspect-ratio: 392 / 394;
}

.con15 {
  box-sizing: border-box;
  /* 큰틀 경계는 .con141516이 자르고, 프레임은 con16 쪽으로 이어져야 한다. */
  overflow: visible;
  z-index: 2;
  width: 100%;
  margin-top: -8.1vw;
  padding-top: 12.9vw;
  padding-bottom: calc(var(--px) * 233.3);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.con15_slider {
  position: absolute;
  left: 39.6325%;
  top: calc(var(--px) * 140);
  z-index: 1;
  width: 53.8058%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con15_slide {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: auto !important;
  flex-shrink: 0;
}
.con15_photo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con15_photo img {
  width: 100%;
}
.con15_photo_01 {
  width: calc(var(--px) * 678);
  overflow: hidden;
  border-radius: calc(var(--px) * 20);
  box-shadow: inset 0 0 0 1px #241a1b;
  aspect-ratio: 678 / 521;
  align-items: flex-start;
}
.con15_photo_01 img {
  margin-top: calc(var(--px) * -1);
}
.con15_photo_02,
.con15_photo_03,
.con15_photo_04 {
  width: calc(var(--px) * 676);
  aspect-ratio: 676 / 518;
}
.con15_copy {
  z-index: 1;
  margin-left: 12.1%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.con15_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  font-weight: 400;
  line-height: calc(var(--px) * 62);
  color: #231815;
  letter-spacing: -0.2vw;
  text-align: left;
}
.con15_title_line {
  display: block;
}
.con15_title_accent {
  color: #832127;
}
.con15_desc {
  margin-top: 1.8vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: calc(var(--px) * 28);
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: left;
}
.con15_desc_line {
  display: block;
}
.con15_desc_strong {
  display: block;
  font-weight: 800;
}
.con15_frame {
  left: 5%;
  top: 0.5vw;
  z-index: 0;
  width: calc(var(--px) * 1709);
  aspect-ratio: 1709 / 750;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con15_frame img {
  width: 100%;
}
.con15_markers {
  left: calc(var(--px) * 119);
  top: calc(var(--px) * 131);
  z-index: 1;
  width: calc(var(--px) * 26);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.con15_marker {
  width: 100%;
  padding-top: calc(var(--px) * 170);
  flex-shrink: 0;
}
.con15_marker + .con15_marker {
  margin-top: calc(var(--px) * -4);
}
.con15_marker_01,
.con15_marker_03 {
  background-color: #832127;
}
.con15_marker_02 {
  background-color: #d3b88a;
}

.con16 {
  box-sizing: border-box;
  overflow: hidden;
  z-index: 1;
  width: 100%;
  margin-top: -4.8vw;
  padding-top: 10.4vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.con16_art {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con16_art img {
  width: 100%;
}
.con16_mountain {
  left: -0.4%;
  top: 22.2vw;
  width: 100.8%;
  aspect-ratio: 640 / 140.3333;
}
.con16_pine_l {
  left: -13.8%;
  top: 11.6vw;
  width: calc(var(--px) * 699);
  aspect-ratio: 699 / 484;
}
.con16_pine_r {
  left: 83.8%;
  top: 22.2vw;
  width: calc(var(--px) * 417);
  aspect-ratio: 417 / 289;
}
.con16_cloud_l {
  left: -5%;
  top: 2.6vw;
  width: calc(var(--px) * 269);
  aspect-ratio: 269 / 119;
}
.con16_cloud_r {
  left: 94.4%;
  top: 13.9vw;
  width: calc(var(--px) * 269);
  aspect-ratio: 269 / 119;
}
.con16_pot {
  left: 14.5%;
  top: 2vw;
  width: calc(var(--px) * 712);
  aspect-ratio: 712 / 712;
}
.con16_copy {
  margin-left: 66.8%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
}
.con16_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  font-weight: 400;
  line-height: calc(var(--px) * 62);
  color: #231815;
  letter-spacing: -0.2vw;
  text-align: right;
}
.con16_title_line {
  display: block;
}
.con16_title_accent {
  color: #832127;
}
.con16_desc {
  margin-top: 2.3vw;
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: calc(var(--px) * 28);
  color: #231815;
  letter-spacing: -0.04vw;
  text-align: right;
}
.con16_desc_line {
  display: block;
}
.con16_ticker {
  box-sizing: border-box;
  width: 100%;
  margin-top: 11.5vw;
  padding: calc(var(--px) * 21) 0 calc(var(--px) * 17.1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: var(--color-point);
  /* 1층 = 장식 이미지, 2층 = 마퀴 그라디언트. 레이어가 2개라 repeat/position/size 도 콤마로 각각 지정한다
     (단일값으로 두면 그라디언트까지 이미지 좌표·크기를 따라가 배경이 어긋난다) */
  background-image: url('/images/con16_08.png'), var(--marquee-bg);
  background-repeat: no-repeat, no-repeat;
  background-position: 9.6% -21vw, 0 0;
  background-size: calc(var(--px) * 1510) calc(var(--px) * 930), 100% 100%;
}
.con16_ticker .swiper-wrapper {
  transition-timing-function: linear !important;
}
.con16_ticker_item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: auto !important;
  flex-shrink: 0;
}
.con16_ticker_text {
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22.01);
  font-weight: 400;
  line-height: calc(var(--px) * 44);
  color: #fff;
  letter-spacing: -0.08vw;
  text-align: left;
}
.con16_ticker_logo {
  width: calc(var(--px) * 111);
  margin-left: 0.5vw;
  aspect-ratio: 111 / 44;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con16_ticker_logo img {
  width: 100%;
}

/* CON17 — 어화락 차림표 */
.con17 {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: calc(var(--px) * 987);
  padding-top: calc(var(--px) * 176);
  padding-bottom: calc(var(--px) * 39);
  justify-content: flex-start;
  background-color: #f3e7d4;
  background-image:
    url('/images/con17_03.png'),
    url('/images/con17_11.png'),
    url('/images/con17_02.png'),
    url('/images/con17_01.png');
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position:
    calc(var(--px) * 97) calc(var(--px) * 64),
    calc(var(--px) * 1887) calc(var(--px) * 243),
    calc(var(--px) * 1296) calc(var(--px) * 101),
    center top;
  background-size:
    calc(var(--px) * 1709) calc(var(--px) * 864),
    calc(var(--px) * 18) calc(var(--px) * 502),
    calc(var(--px) * 619) calc(var(--px) * 1002),
    calc(var(--px) * 1905) calc(var(--px) * 987);
}
.con17_head {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con17_title_row {
  width: calc(var(--px) * 613);
  height: calc(var(--px) * 52);
  column-gap: calc(var(--px) * 31);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con17_title_motif {
  width: calc(var(--px) * 118);
  aspect-ratio: 118 / 32;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.con17_title {
  display: flex;
  column-gap: calc(var(--px) * 14);
  margin-right: calc(var(--px) * 5);
  margin-left: calc(var(--px) * -5);
  justify-content: center;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  font-family: var(--font-deco);
  font-size: calc(var(--px) * 65.03);
  font-weight: 700;
  line-height: calc(var(--px) * 62.03);
  color: #231815;
  letter-spacing: -0.3vw;
}
.con17_title_accent {
  color: #832127;
}
.con17_divider_img {
  width: calc(var(--px) * 981);
  margin-top: calc(var(--px) * 28);
  aspect-ratio: 981 / 18;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con17_menu {
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con17_tablist {
  margin-top: calc(var(--px) * 28);
  margin-left: calc(var(--px) * -7);
  column-gap: calc(var(--px) * 74);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con17_tab {
  padding: calc(var(--px) * 17.495) 0;
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22.01);
  font-weight: 400;
  line-height: calc(var(--px) * 28.01);
  color: #1c1f1d;
  letter-spacing: -0.1vw;
}
.con17_tab:focus-visible {
  outline: calc(var(--px) * 2) solid #832127;
  outline-offset: calc(var(--px) * 3);
}
.con17_tab.is-active {
  margin-right: calc(var(--px) * -42);
  margin-left: calc(var(--px) * -26);
  padding-right: calc(var(--px) * 42);
  padding-left: calc(var(--px) * 26);
  background-image: url('/images/con17_05.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}
.con17_panels {
  width: 100%;
  margin-top: calc(var(--px) * 39);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.con17_panel {
  width: 100%;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.con17_panel[hidden] {
  display: none;
}
.con17_slider {
  overflow: hidden;
  width: 100%;
  clip-path: inset(0 calc(var(--px) * 237) 0 calc(var(--px) * 226));
}
.con17_slider .swiper-wrapper {
  align-items: stretch;
}
.con17_slide {
  width: calc(var(--px) * 350) !important;
  flex-shrink: 0;
}
.con17_card {
  --con17-card-radius: 0;
  --con17-desc-gap: 0;
  --con17-desc-height: 0;
  --con17-title-top: 119;
  --con17-image-gap: 52;
  box-sizing: border-box;
  overflow: hidden;
  width: calc(var(--px) * 350);
  height: calc(var(--px) * 411);
  border: 1px solid #241a1b;
  border-radius: calc(var(--px) * var(--con17-card-radius));
  background-color: #f8f6f1;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con17_card_title {
  margin-top: calc(var(--px) * var(--con17-title-top));
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 28.01);
  font-weight: 400;
  line-height: calc(var(--px) * 28.01);
  color: #1c1f1d;
  letter-spacing: -0.1vw;
  text-align: center;
}
.con17_card_desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: calc(var(--px) * var(--con17-desc-height));
  margin-top: calc(var(--px) * var(--con17-desc-gap));
  opacity: 0;
  flex-shrink: 0;
  font-family: "Pretendard Variable", "Pretendard", sans-serif;
  font-size: calc(var(--px) * 16.01);
  font-weight: 500;
  line-height: calc(var(--px) * 23.01);
  color: #fff;
  letter-spacing: -0.04vw;
  text-align: center;
}
.con17_card_img {
  width: calc(var(--px) * var(--con17-image-width));
  margin-top: calc(var(--px) * var(--con17-image-gap));
  aspect-ratio: var(--con17-image-width) / var(--con17-image-height);
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
.con17_card_img img {
  width: 100%;
  height: 100%;
}
.con17_card_empty .con17_card_title {
  margin-top: calc(var(--px) * 178);
}
.con17_nav {
  margin-top: calc(var(--px) * 28);
  column-gap: calc(var(--px) * 8);
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.con17_nav_button {
  display: flex;
  width: calc(var(--px) * 105);
  height: calc(var(--px) * 105);
  border-radius: 50%;
  background-color: #64131a;
  background-image: radial-gradient(circle, #64131a 0%, #64131a 45%, #6a141c 64%, #731920 75%, #801f26 100%);
  justify-content: center;
  align-items: center;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 73.31);
  font-weight: 400;
  line-height: 1;
  color: #edebe6;
}
.con17_nav_button:focus-visible {
  outline: calc(var(--px) * 2) solid #231815;
  outline-offset: calc(var(--px) * 3);
}
.con17_nav.is-disabled {
  visibility: hidden;
}

/* CON18 — 고객 리뷰 */
.con18 {
  box-sizing: border-box;
  overflow: hidden;
  padding-top: calc(var(--px) * 158);
  padding-bottom: calc(var(--px) * 181);
  padding-left: calc(var(--px) * 211);
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #000;
  /* 구름 2장(con18_03 · con18_04)은 둥둥 모션 대상이라 .con18_cloud 요소로 분리했다 */
  background-image:
    url('/images/con18_02.png'),
    url('/images/con18_01.png');
  background-repeat: no-repeat, no-repeat;
  background-position:
    calc(var(--px) * -13) calc(var(--px) * 379),
    calc(var(--px) * -8) calc(var(--px) * 573);
  background-size:
    calc(var(--px) * 976) calc(var(--px) * 915),
    100.7874vw calc(var(--px) * 421);
}

.con18_cloud_01 {
  left: calc(var(--px) * -88);
  top: calc(var(--px) * 394);
}

.con18_cloud_02 {
  left: calc(var(--px) * 1740);
  top: calc(var(--px) * 636);
}
.con18_layout {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}
.con18_copy {
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  margin-top: calc(var(--px) * -3);
}
.con18_title {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  white-space: nowrap;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  font-weight: 400;
  line-height: calc(var(--px) * 62.0265);
  color: #fff;
  margin-left: calc(var(--px) * -2);
  letter-spacing: -0.2vw;
}
.con18_title_accent {
  color: #e7d1ab;
}
.con18_desc {
  margin-top: calc(var(--px) * 35);
  margin-left: calc(var(--px) * -1);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: calc(var(--px) * 28.012);
  color: #fff;
  letter-spacing: -0.04vw;
}
.con18_desc_line {
  display: block;
  white-space: nowrap;
}
.con18_slider {
  width: auto;
  margin-top: calc(var(--px) * 10);
  margin-left: calc(var(--px) * 181);
  flex-grow: 1;
  flex-shrink: 1;
}
.con18_list {
  align-items: stretch;
}
.con18_slide {
  width: calc(var(--px) * 364) !important;
  flex-shrink: 0;
}
.con18_card_img {
  width: calc(var(--px) * 364);
  aspect-ratio: 364 / 508;
  flex-shrink: 0;
}
.con18_card_img img {
  width: 100%;
}
.con18_badges {
  display: flex;
  width: calc(var(--px) * 77);
  left: 39.9%;
  top: 15vw;
  z-index: 2;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con18_badge {
  flex-shrink: 0;
}
.con18_badge_02 {
  margin-top: calc(var(--px) * -11);
}
.con18_badge_03 {
  margin-top: calc(var(--px) * -13);
}
.con18_badge_04 {
  margin-top: calc(var(--px) * -12);
}
.con18_badge_img {
  width: calc(var(--px) * 77);
  aspect-ratio: 77 / 78;
}
.con18_badge_img img {
  width: 100%;
}

/* CON19 — 인테리어 */
.con19 {
  box-sizing: border-box;
  overflow: hidden;
  justify-content: flex-start;
  align-items: center;
  padding-top: calc(var(--px) * 350);
  padding-bottom: calc(var(--px) * 196.9521);
  background-color: #000;
  background-image: url('/images/con19_bg.png');
}
.con19_content {
  justify-content: flex-start;
  align-items: center;
}
.con19_label {
  box-sizing: border-box;
  width: calc(var(--px) * 223);
  padding-block: calc(var(--px) * 15.1795);
  background-image: url('/images/con19_01.png');
  background-size: 100% 100%;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 24.08);
  font-weight: 400;
  line-height: calc(var(--px) * 30.6409);
  letter-spacing: -0.1vw;
  color: #000;
  white-space: nowrap;
}
/* 마크업의 "어화락 " 끝 공백은 부모가 flex 라 flex item 사이에서 사라진다 → margin 으로 띄운다 */
.con19_label_main {
  margin-right: calc(var(--px) * 7);
}
.con19_label_accent {
  font-weight: inherit;
  color: #792722;
}
.con19_title {
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 27);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  font-weight: 400;
  line-height: calc(var(--px) * 62.0265);
  letter-spacing: -0.2vw;
  color: #fff;
  white-space: nowrap;
}
.con19_title_line {
  display: block;
}
.con19_title_accent {
  font-weight: inherit;
  color: #e7d1ab;
}
.con19_slogan {
  box-sizing: border-box;
  width: calc(var(--px) * 697);
  margin-top: calc(var(--px) * 10.9469);
  padding-block: calc(var(--px) * 3.4867);
  padding-inline: calc(var(--px) * 24);
  border: 1px solid #241a1b;
  border-radius: 50vw;
  background: var(--color-point);
  font-family: var(--font-deco);
  font-size: calc(var(--px) * 38.02);
  font-weight: 700;
  line-height: calc(var(--px) * 62.0265);
  letter-spacing: -0.15vw;
  color: #fff;
  white-space: nowrap;
}
.con19_desc {
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 22);
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: calc(var(--px) * 28.012);
  letter-spacing: -0.04vw;
  color: #fff;
  white-space: nowrap;
}
.con19_desc_detail {
  margin-top: calc(var(--px) * 28.012);
}
.con19_desc_line {
  display: block;
}
.con19_desc_em {
  font-weight: 800;
}
.con19_slider {
  position: absolute;
  z-index: 0;
}
.con19_slider_left {
  width: calc(var(--px) * 523);
  height: calc(var(--px) * 739);
  left: -1.9423%;
  top: 9.6588vw;
}
.con19_slider_right {
  width: calc(var(--px) * 521);
  height: calc(var(--px) * 738);
  right: -1.0499%;
  top: 8.8189vw;
}
.con19_track {
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
/* 사진 크기를 521×361 로 통일한 뒤에도 슬라이드별 margin-top 이 16/22/5/16 으로 제각각이라
   간격이 튀었다. loop 복제 구간(마지막↔첫 장)까지 균일하려면 margin-top(첫 장은 0)이 아니라
   전 슬라이드 공통 margin-bottom 이어야 한다. */
.con19_slide {
  width: auto;
  height: auto !important;
  flex-shrink: 0;
  margin-bottom: calc(var(--px) * 16);
}
/* 8장 전부 디자인 노출 크기(521×361)로 통일.
   원본은 521×361 6장 · 523×361 1장 · 523×362 1장이라 1~2px 씩 어긋나 있었다.
   비율이 다른 2장은 마크업의 .obj 유틸(common.css .obj > img = height:100% + object-fit:cover)로 채운다. */
.con19_photo {
  width: calc(var(--px) * 521);
  aspect-ratio: 521 / 361;
}
.con19_photo img {
  display: block;
}
/* 좌 상승 · 우 하강 무한 흐름 — 등속이어야 이어붙은 티가 안 난다 */
.con19_slider .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* CON20 — 프라이빗 룸 */
.con20 {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 3.3vw;
  padding-bottom: 3.1vw;
  padding-left: 8.9vw;
  background-image: url('/images/con20_bg.png');
}
.con20_content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 4.3vw;
}
.con20_title {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  line-height: calc(var(--px) * 62.0265);
  letter-spacing: -0.2vw;
  color: #231815;
  white-space: nowrap;
}
.con20_title_accent {
  font-weight: inherit;
  color: #792722;
}
.con20_desc {
  margin-top: 1.8vw;
  margin-left: 1.6%;
  font-size: calc(var(--px) * 20.01);
  line-height: calc(var(--px) * 28.012);
  letter-spacing: -0.04vw;
  color: #231815;
}
.con20_desc_line {
  font-weight: 500;
}
.con20_desc_emphasis {
  font-weight: 800;
}
.con20_slider {
  display: block;
  width: calc(var(--px) * 1144);
  margin-left: 5.4vw;
  flex-shrink: 0;
}
.con20_slide {
  width: auto !important;
  flex-shrink: 0;
}
.con20_slide_img {
  width: calc(var(--px) * 521);
  aspect-ratio: 521 / 361;
}

/* CON21 — 지속 가능한 상생 시스템 */
.con21 {
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 8.2vw;
  padding-bottom: 3.9vw;
  background-color: #fff;
  /* 상단 3중선은 line_wave 모션으로 대체 (.con21_wave) — 배경 gradient 제거 */
  /* 구름 3장은 둥둥 모션 대상이라 배경 레이어에서 빼내 .con21_cloud 요소로 분리했다 */
  background-image:
    url('/images/con21_10.png'),
    url('/images/con21_11.png');
  background-position:
    calc(var(--px) * 1168) calc(var(--px) * 10),
    calc(var(--px) * 1586) calc(var(--px) * -5);
  background-size:
    calc(var(--px) * 455) calc(var(--px) * 480),
    calc(var(--px) * 353) calc(var(--px) * 509);
  background-repeat: no-repeat;
}

/* 구름 데코 — 배경에서 분리한 좌표 그대로. 모션은 js/animation.js */
.con21_cloud,
.con18_cloud {
  width: calc(var(--px) * 269);
  aspect-ratio: 269 / 119;
  pointer-events: none;
}

.con21_cloud_01 {
  left: calc(var(--px) * 196);
  top: calc(var(--px) * 200);
}

.con21_cloud_02 {
  left: calc(var(--px) * 1772);
  top: calc(var(--px) * 604);
}

.con21_cloud_03 {
  left: calc(var(--px) * 1374);
  top: calc(var(--px) * 921);
}
.con21_tree {
  width: calc(var(--px) * 699);
  aspect-ratio: 699 / 484;
}
.con21_tree_left {
  left: calc(var(--px) * -232);
  top: calc(var(--px) * 270);
  transform: scaleX(-1);
}
.con21_tree_right {
  left: calc(var(--px) * 1425);
  top: calc(var(--px) * 825);
}
.con21_title {
  transform: translate(calc(var(--px) * -5), calc(var(--px) * -2));
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  line-height: calc(var(--px) * 62.0265);
  letter-spacing: -0.2vw;
  color: #231815;
  white-space: nowrap;
}
.con21_title_accent {
  color: #792722;
}
.con21_signal {
  gap: calc(var(--px) * 18);
  margin-top: 0.9vw;
}
.con21_signal_img {
  width: calc(var(--px) * 53);
  aspect-ratio: 53 / 53;
}
.con21_desc {
  margin-top: 1.7vw;
  transform: translate(calc(var(--px) * -3.5), calc(var(--px) * -4));
  font-size: calc(var(--px) * 20.01);
  line-height: calc(var(--px) * 28.012);
  letter-spacing: -0.04vw;
  color: #231815;
  white-space: nowrap;
}
.con21_desc_line {
  font-weight: 500;
}
.con21_desc_emphasis {
  font-weight: 800;
}
.con21_cards_stage {
  box-sizing: border-box;
  justify-content: flex-start;
  width: 100%;
  margin-top: 1.8vw;
  padding-left: 8.8vw;
}
.con21_cards {
  justify-content: flex-start;
  align-items: stretch;
  gap: calc(var(--px) * 23.5);
}
.con21_card {
  box-sizing: border-box;
  justify-content: flex-start;
  width: calc(var(--px) * 505);
  height: calc(var(--px) * 429);
  flex-shrink: 0;
  border: 1px solid #241a1b;
  border-radius: calc(var(--px) * 20);
  background-color: #f8f6f1;
}
.con21_card.is-active {
  border-color: transparent;
  background-color: var(--color-point);
}
.con21_card_icon {
  flex-shrink: 0;
}
.con21_card_icon_support {
  width: calc(var(--px) * 73);
  aspect-ratio: 73 / 73;
  margin-top: calc(var(--px) * 90);
}
.con21_card_icon_system {
  width: calc(var(--px) * 80);
  aspect-ratio: 80 / 78;
  margin-top: calc(var(--px) * 85);
}
.con21_card_icon_partnership {
  width: calc(var(--px) * 88);
  aspect-ratio: 88 / 73;
  margin-top: calc(var(--px) * 90);
}
.con21_card_title {
  transform: translate(calc(var(--px) * -1), calc(var(--px) * -2));
  font-family: var(--font-main);
  font-size: calc(var(--px) * 30.01);
  line-height: calc(var(--px) * 35.015);
  letter-spacing: -0.1vw;
  color: #231815;
  white-space: nowrap;
}
.con21_card_support .con21_card_title,
.con21_card_system .con21_card_title {
  margin-top: calc(var(--px) * 25);
}
.con21_card_partnership .con21_card_title {
  margin-top: calc(var(--px) * 26);
}
.con21_card_title_accent {
  color: #792722;
}
.con21_card_desc {
  transform: translateY(calc(var(--px) * -5));
  font-size: calc(var(--px) * 20.01);
  font-weight: 500;
  line-height: calc(var(--px) * 28.012);
  letter-spacing: -0.04vw;
  color: #231815;
  white-space: nowrap;
}
.con21_card_support .con21_card_desc {
  margin-top: calc(var(--px) * 14);
}
.con21_card_system .con21_card_desc,
.con21_card_partnership .con21_card_desc {
  margin-top: calc(var(--px) * 15);
}
.con21_card.is-active .con21_card_title,
.con21_card.is-active .con21_card_desc {
  color: #fff;
}
.con21_card.is-active .con21_card_title_accent {
  color: #e7d1ab;
}
.con21_bottom {
  margin-top: 2.6vw;
  transform: translate(calc(var(--px) * -4.5), calc(var(--px) * -3));
  font-size: calc(var(--px) * 24.01);
  line-height: calc(var(--px) * 31.0133);
  letter-spacing: -0.04vw;
  color: #231815;
  white-space: nowrap;
}
.con21_bottom_emphasis {
  font-weight: 800;
}
.con21_bottom_tail,
.con21_bottom_line {
  font-weight: 400;
}
.con21 img {
  display: block;
}

.con22 {
  box-sizing: border-box;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: calc(var(--px) * 147) calc(var(--px) * 210) calc(var(--px) * 140) calc(var(--px) * 207);
  background-color: #490504;
  background-image: url('/images/con22_01.png');
}
.con22_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 553);
  margin-top: calc(var(--px) * 78);
}
.con22_eyebrow {
  margin-left: calc(var(--px) * 1);
  font-size: calc(var(--px) * 22.01);
  line-height: calc(var(--px) * 30.0128);
  letter-spacing: -0.04vw;
  font-weight: 400;
  color: #fff;
}
.con22_eyebrow_em {
  font-weight: 800;
}
.con22_title {
  margin-top: calc(var(--px) * 8.9872);
  margin-left: calc(var(--px) * 2);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55.02);
  line-height: calc(var(--px) * 62.0265);
  letter-spacing: -0.2vw;
  font-weight: 400;
  color: #fff;
}
.con22_title_line {
  display: block;
}
.con22_title_accent {
  color: #e7d1ab;
}
.con22_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 553);
  margin-top: calc(var(--px) * 28.9469);
  gap: calc(var(--px) * 4);
}
.con22_card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  border: 1px solid #b0adad;
  border-radius: calc(var(--px) * 20);
}
.con22_card_01 {
  width: calc(var(--px) * 184);
  padding: calc(var(--px) * 40) 0 calc(var(--px) * 59.5464);
  background: #f8f6f1;
}
.con22_card_02 {
  width: calc(var(--px) * 185);
  padding: calc(var(--px) * 40) 0 calc(var(--px) * 46.0928);
  background: #fff;
}
.con22_card_03 {
  width: calc(var(--px) * 184);
  padding: calc(var(--px) * 36) 0 calc(var(--px) * 47.0928);
  background: #fff;
}
.con22_card_icon_youtube {
  width: calc(var(--px) * 43);
  aspect-ratio: 43 / 30;
}
.con22_card_icon_baemin {
  width: calc(var(--px) * 39);
  aspect-ratio: 39 / 38;
}
.con22_card_text {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 20.01);
  line-height: calc(var(--px) * 24.4536);
  letter-spacing: -0.1vw;
  font-weight: 400;
  color: #000;
  text-align: center;
}
.con22_card_01 .con22_card_text {
  margin-top: calc(var(--px) * 28);
}
.con22_card_02 .con22_card_text {
  margin-top: calc(var(--px) * 17);
}
.con22_card_03 .con22_card_text {
  margin-top: calc(var(--px) * 12);
}
.con22_desc {
  margin-top: calc(var(--px) * 43);
  margin-left: calc(var(--px) * 1);
  font-size: calc(var(--px) * 20.01);
  line-height: calc(var(--px) * 28.012);
  letter-spacing: -0.04vw;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
.con22_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 841);
  margin-left: calc(var(--px) * 94);
}
.con22_youtube_logo {
  align-self: flex-end;
  width: calc(var(--px) * 168);
  margin-right: calc(var(--px) * 4);
  aspect-ratio: 168 / 38;
}
.con22_video_img {
  width: calc(var(--px) * 841);
  margin-top: calc(var(--px) * 18);
  aspect-ratio: 841 / 489;
}
.con22_video_icon {
  top: calc(var(--px) * 214.5);
  left: calc(var(--px) * 377.5);
  width: calc(var(--px) * 86);
  aspect-ratio: 43 / 30;
  pointer-events: none;
}
.con22_caption {
  align-self: flex-end;
  margin-top: calc(var(--px) * 13);
  margin-right: calc(var(--px) * 2);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 19.01);
  line-height: calc(var(--px) * 19.01);
  font-weight: 400;
  color: #fff;
}

.con23 {
  justify-content: flex-start;
  box-sizing: border-box;
  height: calc(var(--px) * 532);
  padding-top: calc(var(--px) * 97);
  background-image: url('/images/con23_bg.png');
}
.con23_mark {
  width: calc(var(--px) * 874);
  aspect-ratio: 874 / 343;
}
.con23_photo {
  top: calc(var(--px) * -158);
  left: calc(var(--px) * 322);
  width: calc(var(--px) * 1217);
  aspect-ratio: 1217 / 894;
}

.con24 {
  display: flex;
  justify-content: flex-start;
  box-sizing: border-box;
  height: calc(var(--px) * 919);
  /* 상단 3중선은 line_wave 모션으로 대체 (.con24_wave) */
  background-color: #fff;
}
.con24_table {
  margin-top: calc(var(--px) * 126);
  width: calc(var(--px) * 1004);
  aspect-ratio: 1004 / 743;
}
.con24_medallion {
  top: calc(var(--px) * 189);
  left: calc(var(--px) * 647);
  justify-content: flex-start;
  width: calc(var(--px) * 605);
  padding-top: calc(var(--px) * 136);
  padding-bottom: calc(var(--px) * 142.4);
  box-sizing: border-box;
}
.con24_medallion_bg {
  width: 100%;
  aspect-ratio: 605 / 605;
}
.con24_emblem {
  width: calc(var(--px) * 194);
  aspect-ratio: 194 / 53;
}
.con24_title {
  margin-top: calc(var(--px) * 18);
  font-family: "Miwon", serif;
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.1vw;
  line-height: 3.1vw;
  color: #fff;
}
.con24_title_accent {
  color: #e7d1ab;
}
.con24_desc {
  margin-top: calc(var(--px) * 29.9);
  font-size: calc(var(--px) * 22);
  line-height: 1.5vw;
  color: #fff;
  text-align: center;
}
.con24_phone {
  margin-top: calc(var(--px) * 21.9);
  font-family: "Miwon", serif;
  font-size: calc(var(--px) * 87);
  line-height: 4.6vw;
  color: #fff;
}
.con24_phone_dot {
  color: #ffefc3;
}

/* ═══════════════════════ CON25 : 창업절차 안내 ═══════════════════════
   DOM 순서 = PSD 쌓임: 패널 → 탭 → 마퀴띠 → 요리사진 → (rltv) 제목 → 카드
   ★ z-index 없음 — absol 4종이 앞서고 그 위 static 은 .rltv 로 올린다
   ═══════════════════════════════════════════════════════════════════ */
.con25 {
  justify-content: flex-start;
  box-sizing: border-box;
  height: calc(var(--px) * 879);
  padding-top: calc(var(--px) * 188);
  padding-bottom: calc(var(--px) * 222);
  background-image: url('/images/con25_bg.png');
}
.con25_panel {
  top: calc(var(--px) * 74);
  width: calc(var(--px) * 1709);
  aspect-ratio: 1709 / 747;
}
.con25_tab {
  top: 0;
  width: calc(var(--px) * 501);
}
.con25_tab_seg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 167);
  height: calc(var(--px) * 26);
}
.con25_tab_seg_01,
.con25_tab_seg_03 {
  background-color: var(--color-point);
}
.con25_tab_seg_02 {
  background-color: #d3b88a;
}
.con25_marquee {
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 83);
  background-color: var(--color-point);
  background-image: var(--marquee-bg);
}
.con25_marquee_track {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 2110);
}
.con25_marquee_copy {
  top: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 2110);
}
.con25_marquee_unit {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 422);
}
.con25_marquee_txt {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.1vw;
  line-height: 3.3vw;
  color: #ffffff;
  white-space: nowrap;
}
.con25_marquee_logo {
  flex-shrink: 0;
  width: calc(var(--px) * 111);
  aspect-ratio: 111 / 44;
  margin-left: 0.5vw;
}
.con25_dish {
  top: calc(var(--px) * 501);
  width: calc(var(--px) * 940);
  aspect-ratio: 940 / 379;
}
.con25_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.0vw;
  margin-right: calc(var(--px) * 9);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.1444vw;
  line-height: 3.1vw;
  color: #000000;
}
.con25_title_deco {
  flex-shrink: 0;
  width: calc(var(--px) * 43);
  aspect-ratio: 43 / 43;
}
.con25_list {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: calc(var(--px) * 1486);
  margin-top: calc(var(--px) * 50);
  margin-right: calc(var(--px) * 3);
  row-gap: calc(var(--px) * 24);
}
.con25_step {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}
.con25_card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: calc(var(--px) * 291);
  aspect-ratio: 291 / 168;
  padding-left: calc(var(--px) * 55);
  padding-right: calc(var(--px) * 24);
}
.con25_num {
  left: 0;
  top: 0;
  width: calc(var(--px) * 55);
  height: calc(var(--px) * 59);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  line-height: 1.5vw;
  color: #ffffff;
}
.con25_txt {
  font-family: var(--font-main);
  font-size: calc(var(--px) * 24);
  letter-spacing: -0.063vw;
  line-height: 1.5vw;
  color: #000000;
  text-align: center;
}
.con25_arrow {
  flex-shrink: 0;
  width: calc(var(--px) * 79);
  aspect-ratio: 79 / 79;
  margin-top: calc(var(--px) * 48);
  margin-left: calc(var(--px) * 17);
  margin-right: calc(var(--px) * 11);
}

/* ══════════ CON2627 : 가맹점 지도 + 대표이사 인사말 (큰틀) ══════════ */
.con2627 {
  /* 상단 3중선은 line_wave 모션으로 대체 (.con2627_wave) */
  position: relative;
  background-image: url('/images/con2627_bg.jpg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── 상단 line_wave 래퍼 3종 — 선 색만 섹션별로 다르다 ── */
.con21_wave,
.con24_wave,
.con2627_wave {
  left: 0;
  top: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.con21_wave {
  --wave-color: #792722;
}

.con24_wave {
  --wave-color: #231815;
}

.con2627_wave {
  --wave-color: #832127;
}

/* ══════════ CON26 : 가맹점 (카카오맵 + 매장 리스트) ══════════ */
.con26 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 7.9vw;
  padding-bottom: 1px;
}
.con26_flower {
  width: calc(var(--px) * 43);
  aspect-ratio: 43 / 43;
  top: 8.7vw;
}
.con26_flower_l {
  left: 38.2%;
}
.con26_flower_r {
  left: 58.8%;
}
.con26_title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.3vw;
  /* 시안 타이틀 행이 캔버스 중앙보다 5.5px 왼쪽 — 잉크 실측 시안 791~1101(center 946) vs 렌더 795~1108(center 951.5) */
  margin-right: calc(var(--px) * 11);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.1vw;
  line-height: 3.1vw;
  color: #231815;
}
.con26_title_logo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 163);
  aspect-ratio: 163 / 64;
}
.con26_sub {
  margin-top: 0.8vw;
  font-weight: 400;
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.04vw;
  line-height: 1.6vw;
  color: #231815;
}
.con26_body {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  z-index: 0;
  width: 75.5906%;
  margin-top: 3.4vw;
  border: 1px solid #241a1b;
}
.con26_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 20.9318%;
  height: calc(var(--px) * 631);
  overflow-y: auto;
  border-right: 1px solid #241a1b;
}
.con26_store_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}
.con26_store {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(var(--px) * 158);
  padding: calc(var(--px) * 18) calc(var(--px) * 20) 0 calc(var(--px) * 21);
  border-bottom: 1px solid #241a1b;
  background-color: #ffffff;
}
.con26_store:last-child {
  min-height: calc(var(--px) * 157);
  border-bottom: 0;
}
.con26_store_top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.con26_store_name {
  margin-left: 2.7%;
  font-weight: 700;
  font-size: calc(var(--px) * 16);
  line-height: 1.4;
  color: #444444;
}
.con26_store_plus {
  width: calc(var(--px) * 38);
  height: calc(var(--px) * 38);
  border-radius: 50%;
  background-color: var(--color-point);
}
/* ＋ 기호 = 흰 바 2겹(배경 그라데이션). 시안 실측 12x12 · 획 2px */
.con26_store_plus_ico {
  display: block;
  width: calc(var(--px) * 12);
  height: calc(var(--px) * 12);
  background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff);
  background-size: 100% calc(var(--px) * 2), calc(var(--px) * 2) 100%;
  background-position: center center, center center;
  background-repeat: no-repeat;
}
.con26_store_info {
  margin-left: 2.7%;
  font-weight: 500;
  font-size: calc(var(--px) * 14);
  margin-top: calc(var(--px) * 10);
  line-height: 1.4;
  color: #5c5c5c;
}
.con26_store_naver {
  width: calc(var(--px) * 106);
  height: calc(var(--px) * 32);
  margin-top: 0.6vw;
  gap: 0.2vw;
  border-radius: 50vw;
  background-color: #03cd5c;
}
.con26_store_naver_n {
  font-weight: 900;
  font-size: calc(var(--px) * 13);
  line-height: 1.0vw;
  color: #ffffff;
}
.con26_store_naver_txt {
  font-weight: 400;
  font-size: calc(var(--px) * 12);
  line-height: 1.0vw;
  color: #ffffff;
}
.noshop {
  display: none;
}
/* ── 매장 상세 팝업 (시안 없음 — 육전국밥 con15 패턴을 어화락 톤으로) ──
   .con26_body(1438 content) 안에 absolute inset 0. z-index 40 = 카카오맵 컨트롤·map-touch-lock(30) 위 */
.con26_popup_wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 40;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.con26_popup_dim {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(35, 24, 21, 0.55);
}
.con26_popup {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 50.0696%;
  padding: calc(var(--px) * 24);
  border: 1px solid #241a1b;
  border-radius: calc(var(--px) * 20);
  background-color: #ffffff;
  box-shadow: 0 3px 14px rgba(35, 24, 21, 0.28);
}
.con26_popup_photo {
  overflow: hidden;
  width: 55.0595%;
  aspect-ratio: 370 / 292;
  border-radius: calc(var(--px) * 16);
  background-color: #f6f2ea;
}
/* 매장 사진은 게시판 업로드라 비율이 제각각 → 공통 `.obj` 유틸(height:100% + object-fit:cover)로
   고정 프레임에 맞춘다. 비율 왜곡이 아니라 크롭이고, 섹션 전용 규칙을 새로 쓰지 않는다(§9) */
/* 사진 미등록 매장 — 사진 영역이 빠진 만큼 본문이 팝업 폭을 다 쓴다 (js/map.js 가 토글) */
.popup_nophoto .con26_popup_body {
  width: 100%;
  margin-left: 0;
}
.con26_popup_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 40.4762%;
  margin-left: 4.4643%;
}
.con26_popup_name {
  font-weight: 700;
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.04vw;
  line-height: 1.4vw;
  color: #231815;
}
.con26_popup_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 1px;
  margin-top: 0.7vw;
  background-color: #241a1b;
}
.con26_popup_rows {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  row-gap: 0.5vw;
  width: 100%;
  margin-top: 0.9vw;
}
.con26_popup_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  column-gap: 0.5vw;
  width: 100%;
}
/* 라벨 3개(주소/전화/시간)가 같은 폭이라 nowrap + shrink 차단만으로 값이 정렬된다 */
.con26_popup_label {
  flex-shrink: 0;
  white-space: nowrap;
  font-weight: 700;
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.04vw;
  line-height: 1.3vw;
  color: #231815;
}
.con26_popup_val {
  font-weight: 500;
  font-size: calc(var(--px) * 16);
  letter-spacing: -0.04vw;
  line-height: 1.3vw;
  color: #5c5c5c;
}
.con26_popup_naver_wrap {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: 1.3vw;
}
.con26_popup_naver {
  width: calc(var(--px) * 140);
  height: calc(var(--px) * 36);
  gap: 0.2vw;
  border-radius: 50vw;
  background-color: #03cd5c;
}
.con26_popup_close {
  position: absolute;
  top: 1.0vw;
  right: 3.3333%;
  width: calc(var(--px) * 22);
  height: calc(var(--px) * 22);
}
/* ✕ = ＋ 아이콘을 45도 회전 (지도 조상이 아니라 말풍선 좌표에 영향 없음) */
.con26_popup_close_ico {
  display: block;
  width: calc(var(--px) * 16);
  height: calc(var(--px) * 16);
  background-image: linear-gradient(#231815, #231815), linear-gradient(#231815, #231815);
  background-size: 100% calc(var(--px) * 2), calc(var(--px) * 2) 100%;
  background-position: center center, center center;
  background-repeat: no-repeat;
  transform: rotate(45deg);
}
.con26_map {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 79.0682%;
  height: calc(var(--px) * 631);
}
.con26_search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 2;
  width: 29.2913%;
  height: calc(var(--px) * 63);
  top: 15.3vw;
  padding: 0 calc(var(--px) * 24) 0 calc(var(--px) * 34);
  border: 1px solid #241a1b;
  border-radius: 50vw;
  background-color: #ffffff;
}
.con26_search_input {
  width: calc(var(--px) * 474);
  font-weight: 500;
  font-size: calc(var(--px) * 15);
  line-height: 1.7vw;
  color: #444444;
}
.con26_search_input::placeholder {
  color: #444444;
}
.con26_search_btn {
  width: calc(var(--px) * 24);
  aspect-ratio: 24 / 26;
}

/* ══════════ CON27 : 대표이사 인사말 (액자 패널) ══════════ */
.con27 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: calc(var(--px) * 263);
  padding-bottom: calc(var(--px) * 193);
}
.con27_bar {
  width: calc(var(--px) * 26);
  top: calc(var(--px) * 276);
}
.con27_bar_l {
  left: calc(var(--px) * 75);
}
.con27_bar_r {
  right: calc(var(--px) * 78);
}
.con27_bar_seg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.con27_bar_seg_01 {
  height: calc(var(--px) * 166);
  background-color: var(--color-point);
}
.con27_bar_seg_02 {
  height: calc(var(--px) * 166);
  background-color: #d3b88a;
}
.con27_bar_seg_03 {
  height: calc(var(--px) * 167);
  background-color: var(--color-point);
}
.con27_panel {
  width: calc(var(--px) * 1706);
  aspect-ratio: 1706 / 830;
  top: calc(var(--px) * 111);
}
.con27_col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding-left: calc(var(--px) * 281);
}
.con27_head {
  font-family: var(--font-deco);
  font-weight: 700;
  font-size: calc(var(--px) * 44);
  letter-spacing: -0.1732vw;
  line-height: calc(var(--px) * 45);
  color: #ffffff;
}
.con27_head_accent {
  color: #e7d1ab;
}
.con27_logo {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: calc(var(--px) * 8);
  margin-left: calc(var(--px) * 2);
}
.con27_logo_img {
  width: calc(var(--px) * 269);
  aspect-ratio: 269 / 105;
}
.con27_stamp {
  width: calc(var(--px) * 35);
  aspect-ratio: 35 / 55;
  margin-left: calc(var(--px) * -2);
}
.con27_desc {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 32);
}
.con27_txt {
  font-weight: 400;
  font-size: calc(var(--px) * 18);
  letter-spacing: -0.04vw;
  line-height: calc(var(--px) * 30);
  color: #ffffff;
}
.con27_txt + .con27_txt {
  margin-top: calc(var(--px) * 30);
}
.con27_em {
  font-weight: 800;
  color: #e7d1ab;
}
.con27_st {
  font-weight: 800;
  color: #ffffff;
}

/* ═══ CON28 창업문의 ═══ */
.con28 {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(var(--px) * 836);
  background-image: url("/images/con28_bg.jpg");
  border-bottom: 1px solid #000000;
}

.con28_roof {
  width: 100%;
  aspect-ratio: 1905 / 141;
  left: 0;
  top: 0;
}

.con28_fish01 {
  width: calc(var(--px) * 647);
  aspect-ratio: 647 / 383;
  left: 40.5774%;
  top: 3.7vw;
}

.con28_fish02 {
  width: calc(var(--px) * 611);
  aspect-ratio: 611 / 373;
  left: 32.4409%;
  top: 27.7vw;
}

.con28_fish03 {
  width: calc(var(--px) * 620);
  aspect-ratio: 620 / 373;
  left: 78.2152%;
  top: 15.9vw;
}

.con28_left {
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: 42.3622%;
  margin-left: 14.0682%;
  padding-top: 14.2vw;
}

.con28_badge {
  position: relative;
  width: calc(var(--px) * 223);
  aspect-ratio: 223 / 61;
  margin-left: 1.6109%;
}

.con28_badge_txt {
  margin-right: 4.9327%;
  margin-bottom: 0.4vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 24);
  letter-spacing: -0.09vw;
  line-height: 1.272;
  color: #ffffff;
}

.con28_badge_pt {
  color: #e7d1ab;
}

.con28_title {
  margin-left: 0.8674%;
  margin-top: 1.5vw;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.22vw;
  line-height: 1.091;
  color: #ffffff;
}

.con28_title_pt {
  color: #e7d1ab;
}

.con28_desc {
  margin-left: 0.8674%;
  margin-top: 1vw;
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.04vw;
  line-height: 1.455;
  color: #ffffff;
}

.con28_call {
  justify-content: flex-start;
  margin-top: 2.7vw;
}

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

.con28_call_ico img {
  width: calc(var(--px) * 49);
}

.con28_call_num {
  margin-left: calc(var(--px) * 11);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 67);
  letter-spacing: 0.04vw;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.con28_call_dot {
  color: #e7d1ab;
}

.con28_panel {
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  width: 32.4934%;
  background-color: #ffffff;
}

.con28_form {
  justify-content: flex-start;
  width: 75.6058%;
  margin-top: 13vw;
}

.con28_hp {
  position: absolute;
  left: -100vw;
  top: -100vw;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.con28_field {
  box-sizing: border-box;
  justify-content: flex-start;
  width: 100%;
  height: 3.2vw;
  border-bottom: 1px solid #606060;
}

.con28_label {
  flex-shrink: 0;
  width: 23.9316%;
  margin-left: 1.2821%;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.06vw;
  line-height: 1;
  color: #231815;
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
}

.con28_input {
  width: 70.7265%;
  margin-left: 4.2735%;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.04vw;
  line-height: 1;
  color: #231815;
}

.con28_radio {
  justify-content: flex-start;
  margin-left: 7.265%;
}

.con28_radio_item {
  flex-shrink: 0;
  width: calc(var(--px) * 147);
  height: 2.2vw;
  background-color: #e6e6e6;
  font-family: var(--font-main);
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.05vw;
  line-height: 1;
  color: #231815;
  cursor: pointer;
}

.con28_radio_item:has(.con28_radio_in:checked) {
  background-color: var(--color-point);
  color: #ffffff;
}

.con28_radio_in {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.con28_agree {
  justify-content: space-between;
  width: 100%;
  margin-top: 0.9vw;
}

.con28_agree_chk {
  justify-content: flex-start;
  margin-left: 1.2821%;
  cursor: pointer;
}

.con28_check {
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 11);
  border: 1px solid #231815;
  cursor: pointer;
}

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

.con28_agree_txt {
  margin-left: calc(var(--px) * 5);
  font-size: calc(var(--px) * 16.6);
  font-weight: 500;
  letter-spacing: -0.04vw;
  line-height: 1.318;
  color: #231815;
}

.con28_more {
  margin-right: 1.0684%;
  border-bottom: 1px solid #231815;
  font-size: calc(var(--px) * 16);
  font-weight: 800;
  letter-spacing: -0.04vw;
  line-height: 1.368;
  color: #231815;
  cursor: pointer;
}

.con28_submit {
  width: 100%;
  height: 4.1vw;
  margin-top: 1.1vw;
  background-color: var(--color-point);
  font-family: var(--font-main);
  font-size: calc(var(--px) * 32);
  letter-spacing: -0.08vw;
  line-height: 1;
  color: #ffffff;
}

.con28_strip {
  justify-content: flex-start;
  margin-top: 6.4vw;
}

.con28_strip_seg {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 166);
  height: calc(var(--px) * 26);
}

.con28_strip_seg_01,
.con28_strip_seg_03 {
  background-color: var(--color-point);
}

.con28_strip_seg_02 {
  background-color: #d3b88a;
}