@charset "UTF-8";

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

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

section img {
  width: 100%;
}

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

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

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

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

/* 퍼블시작 */

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

/* ===== MAIN: 메인비주얼 ===== */
/* 헤더(.header)는 position:fixed · 투명 · 높이 162px 로 히어로 위에 얹힌다.
   시안 header_visual 에서 매장사진·파란 프레임이 헤더 밑으로 이어지므로 .main 이 시안 y0~996 전체를 덮고,
   padding-top 으로 헤더 높이(162/1905*100 = 8.5039)를 비운다. 콘텐츠(시안 main 밴드 834px)는 .main_frame 이 담는다. */
/* 하단 1px 선 = 시안 섹션 경계선. section overflow:hidden 이 자식을 padding box 로 자르므로 원·음식이 선을 덮지 않는다 */
.main {
  padding-top: 8.5vw;
  background-image: url('/images/main_01.png');
  border-bottom: 1px solid #000000;
}

.main_frame {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 3.1vw;
  padding-bottom: 7.1vw;
}

/* 붉은 원 — DOM 1번째라 음식컷 아래. 가로는 부모 flex center (left 좌표 없음) */
/* 래스터 이미지 좌표 calc(--px) — vw 반올림 소수점 좌표의 보간 블러 방지 (STEP 9: 6.73% → 1.69%) */
/* 테두리 = PSD strokeEffect inside 1px #000 (시안 실측 파랑 → 흑 1px → 빨강). outline 은 자식 img 위에 그려지고 박스 크기를 안 바꾼다 */
.main_circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1343);
  aspect-ratio: 1343 / 1344;
  top: calc(var(--px) * 404);
  border-radius: 50%;
  outline: 1px solid #000000;
  outline-offset: -1px;
}

/* 음식 슬라이드 (main-m01 · js/slide.js)
   position: absolute 재선언 사유 — css/lib/swiper-bundle.min.css 가 common.css 뒤에 로드돼
   .swiper { position: relative; display: block } 이 .absol 을 이긴다. style.css 는 그보다 뒤라 여기서 되돌린다. */
.main_food {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: absolute;
  width: 100%;
  top: calc(var(--px) * 304);
  overflow: visible;
}

/* main-m04: 음식 폭을 따라 낮고 넓게 퍼지는 수증기 */
.main_steam {
  width: 78%;
  aspect-ratio: 3 / 2;
  top: -16%;
  opacity: 0;
}

.con10_steam {
  width: 70%;
  aspect-ratio: 3 / 2;
  top: 8%;
  opacity: 0;
}

.con13_steam,
.con17_steam {
  width: 78%;
  aspect-ratio: 3 / 2;
  top: -16%;
  opacity: 0;
}

@keyframes main-steam-rise {
  0% {
    opacity: 0;
    transform: translate3d(-2%, 8%, 0) scale(0.94);
  }
  25% {
    opacity: 0.24;
  }
  60% {
    opacity: 0.18;
  }
  100% {
    opacity: 0;
    transform: translate3d(2%, -12%, 0) scale(1.06);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .food_steam_running > .con10_steam,
  .food_steam_running > .con13_steam,
  .food_steam_running > .con17_steam {
    animation: main-steam-rise 3.6s ease-in-out 1.2s infinite;
  }

  .main_steam_running .swiper-slide-active .main_steam {
    animation: main-steam-rise 3.6s ease-in-out 0.2s infinite;
  }
}

/* common.css 의 div.swiper-slide (특이도 0-1-1, center) 를 top 정렬로 덮어쓴다.
   단일 클래스(0-1-0)로는 져서 요소 선택자를 붙인다. 슬라이드가 최고 높이로 stretch 되므로 center 면 컷마다 위로 뜬다. */
div.main_food_slide {
  justify-content: flex-start;
}

.main_food_01 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1025);
  aspect-ratio: 1025 / 592;
  margin-top: calc(var(--px) * 45);
}

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

.main_food_03 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1102);
  aspect-ratio: 1102 / 603;
  margin-top: 4.9vw;
}

.main_food_04 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1021);
  aspect-ratio: 1021 / 563;
  margin-top: 4.6vw;
}

/* z-index: 2 사유 — css/lib/swiper-bundle.min.css 의 .swiper { z-index: 1 } 이 common.css 뒤에 로드돼 이긴다.
   마크업 순서로는 .main_food(z1) 위로 못 올라가므로 공통 .btn_arr 과 같은 층(2)으로 올린다. */
.main_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  z-index: 2;
}

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

.main_title {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 807);
  aspect-ratio: 807 / 167;
  margin-top: -0.7vw;
}

.main_sub {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 28);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: 1.5vw;
  color: #ffffff;
}

.main_sub_em {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 30);
}

/* 마퀴 띠 (main-m02 · common.css .flow_sd + marqueeX 20s) */
.main_marquee {
  width: 88.2415%;
  height: calc(var(--px) * 68);
  margin-top: 15.5vw;
  background-color: #ffffff;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  border-bottom-left-radius: calc(var(--px) * 30);
  border-bottom-right-radius: calc(var(--px) * 30);
}

/* flex-shrink: 0 사유 — 트랙 1벌 1764px > 띠 1681px. flex 기본 shrink:1 이면 타일이 588 → 약 560px 로 압축된다
   (common.css .flow_sd_move / _item / _img 에 flex-shrink 없음) */
.main_marquee_move {
  flex-shrink: 0;
}

.main_marquee_item {
  flex-shrink: 0;
}

.main_marquee_img {
  width: calc(var(--px) * 588);
  aspect-ratio: 588 / 43;
  flex-shrink: 0;
}

/* ===== CON01: 점주님이 찾던 창업 브랜드 (4지표) ===== */
/* .rltv 필수 — 전역 section 에 position: relative 가 없다. absol 3개(line·stripe·photo)의 기준 박스.
   배경 한지는 .back_img(cover · top center) + background-image */
/* 하단 1px 선 = 시안 섹션 경계선 (시안 y2037 실측). overflow:hidden 이 자식을 padding box 로 잘라 스트라이프·사진이 선을 덮지 않는다 */
.con01 {
  padding-top: 5.4vw;
  padding-bottom: 7.7vw;
  background-image: url('/images/con01_bg.jpg');
  border-bottom: 1px solid #000000;
}

.con01_logo {
  width: calc(var(--px) * 200);
  aspect-ratio: 200 / 131;
}

.con01_title {
  width: calc(var(--px) * 649);
  aspect-ratio: 649 / 65;
  margin-top: 1.9vw;
}

.con01_sub {
  margin-top: 1.5vw;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 35);
  letter-spacing: -0.1vw;
  line-height: 1.8vw;
  color: #000000;
}

.con01_desc {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: 1.0vw;
  color: #000000;
}

/* PSD Pretendard-ExtraBold — common.css 의 b 700 을 800 으로 덮어쓴다 */
.con01_desc b {
  font-weight: 800;
}

/* 1px 구분선 (hr 금지). 가로는 부모 flex center 라 left 없음. 냄비 사진 뒤로 깔린다
   background-color 는 plan 미기재 — spec 사각형 1121 fill #000000 + 시안 y703 픽셀 실측으로 확정 */
.con01_line {
  width: 88.1890%;
  height: 1px;
  top: 36.9vw;
  background-color: #000000;
}

/* 하단 빨간 스트라이프 — 캔버스보다 넓은 블리드, 좌우는 section overflow: hidden 이 자른다 */
/* 래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지 (STEP 9: 9.74% → 3.51%)
   .con01_photo left 명시: 1905(홀수)−834(짝수) 라 flex center 가 535.5 에 떨어져 블러 — 중앙값과 0.5px 차이지만 좌표 유지
   (top 만 정수화 8.06% FAIL / left 포함 3.51% PASS 실측) */
/* 하단 고정 — PNG 마지막 행이 투명이라 bottom:-1px 로 그 행을 섹션 밖(overflow)으로 빼야 빨간 띠가 하단 선에 붙는다 */
.con01_stripe {
  width: calc(var(--px) * 2109);
  aspect-ratio: 2109 / 68;
  left: calc(var(--px) * -9);
  bottom: -1px;
}

/* 돌솥 사진 — 가로는 부모 flex center 라 left 없음. 하단은 section overflow: hidden 이 자른다
   con01-m02 「빙글빙글 모션」 대상 (장식형 · Animation Pass 에서 구현) */
.con01_photo {
  width: calc(var(--px) * 834);
  aspect-ratio: 834 / 680;
  top: calc(var(--px) * 504);
  left: calc(var(--px) * 535);
}

.con01_list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 3.7vw;
  row-gap: 3.4vw;
}

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

/* pill 이중 테두리 = 안쪽부터 1px 흑 / 4px 백 / 3px 흑. 높이는 라벨 이미지 + 상하 padding
   background-color 는 plan 미기재 — spec 사각형 1122 fill #ffffff + 시안 pill 내부 픽셀 실측으로 확정 */
.con01_label {
  width: calc(var(--px) * 327);
  padding: calc(var(--px) * 11) 0;
  border-radius: 50vw;
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #000, 0 0 0 5px #fefefe, 0 0 0 8px #000;
}

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

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

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

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

/* 숫자↔배지 간격 — 숫자 letter-spacing(-0.2vw)이 마지막 글자 뒤에도 붙어 0 이면 배지가 숫자에 겹친다.
   시안 ink 간격 item01 3px · item03 2px · item04 7px → 렌더 역산 4 / 10 (「4」는 글리프가 advance 밖으로 2px 나온다) */
.con01_num {
  margin-top: 1.0vw;
  column-gap: calc(var(--px) * 4);
}

.con01_num_04 {
  column-gap: calc(var(--px) * 10);
}

/* con01-m01 「숫자전체 CT모션」 대상 (장식형 · Animation Pass 에서 구현) — 카운트업 중 폭이 변해도 한 줄 유지 */
.con01_num_val {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 75);
  letter-spacing: -0.2vw;
  line-height: 3.6vw;
  color: #000000;
  white-space: nowrap;
}

/* 원형 단위 배지. plan 은 aspect-ratio: 1 / 1 이지만 이미지 직계 부모가 아니라 css-check 가 차단한다
   → 같은 결과(49×49 정원)인 height 로 대체. 사유는 plan ## 메모 (정원이 아니면 타원이 된다) */
.con01_unit {
  width: calc(var(--px) * 49);
  height: calc(var(--px) * 49);
  border-radius: 50%;
  background-color: #184795;
  box-shadow: inset 0 0 0 1px #000000;
}

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

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

.con01_cap {
  margin-top: 0.3vw;
  font-size: calc(var(--px) * 20);
  font-weight: 500;
  letter-spacing: -0.1vw;
  line-height: 0.9vw;
  color: #000000;
}

/* ===== con02 ===== */
/* WHY 왜, 진미막창 일까요? (좌측고정 + 우측 카드 3장)
   .rltv 필수 — 전역 section 에 position: relative 가 없다. absol .con02_line 의 기준 박스.
   좌우 2단 — 전역 section 의 flex-direction: column 을 row 로 덮는다.
   con02-m01 「왼쪽고정 오른쪽 스크롤」 = GSAP pin (js/animation.js). position: sticky 는 basic_css.php 의 body·#content_wrap overflow:hidden 때문에 불가 */
.con02 {
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: 5.7vw;
  padding-bottom: 3.3vw;
  background-color: #fbfbfb;
  /* 접시는 다음 파란 섹션 위로 걸치고, 좌우 블리드만 자른다. */
  overflow: visible;
  overflow-x: clip;
  z-index: 1;
}

/* 띠 경계 y809 의 1px 검정선 — 시안에 보이는 카드 우측 여백(x1852~1904) 폭만. 전폭이면 pin 으로 사진이 내려갈 때 좌측에 선이 드러난다 */
.con02_line {
  width: 2.7822%;
  height: 1px;
  right: 0;
  top: 42.5vw;
  background-color: #000000;
}

.con02_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 46.4042%;
}

/* con02-m01 pin 대상 — overflow: hidden 금지 (사진이 좌측 밖·카드 아래로 넘쳐야 한다 · con02-m02) */
.con02_left_in {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

/* 사진(absol)과 겹쳐 HTML 에 .rltv (페인트 순서) */
.con02_head {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 19.9%;
}

/* 빨간 구슬 3개 = CSS background, 글자는 live text */
.con02_logo {
  width: calc(var(--px) * 150);
  aspect-ratio: 150 / 55;
  background-image: url('/images/con02_01.png');
}

/* 원문 대문자 WHY (PSD fontCaps 2). padding-left = 트레일링 letter-spacing(1vw) 보정 */
.con02_logo_txt {
  padding-left: calc(var(--px) * 18);
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 29);
  letter-spacing: 1vw;
  color: #ffffff;
}

/* margin-left calc — % 기준이 .con02_head 의 auto 폭이라 불확정 */
.con02_title {
  width: calc(var(--px) * 518);
  aspect-ratio: 518 / 166;
  margin-top: 0.8vw;
  margin-left: calc(var(--px) * -6);
}

/* Pretendard Regular — 전역 section 이 300 이라 400 명시 */
.con02_lead {
  margin-top: 1.6vw;
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  line-height: 1.4vw;
  color: #1d1a19;
}

.con02_lead2 {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  line-height: 1.4vw;
  color: #1d1a19;
}

/* 좌측 대형 사진 — 화면 왼쪽 밖으로 블리드. 오른쪽 끝은 .con02_list(.rltv · DOM 뒤)가 덮는다
   래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지(STEP 9 실측). 중앙 아님(가로 Δ21 · 세로 Δ399.5) → 좌표 유지 */
.con02_photo {
  width: calc(var(--px) * 1320);
  aspect-ratio: 1320 / 427;
  left: calc(var(--px) * -239);
  top: calc(var(--px) * 468);
}

@media (min-width: 600px) and (prefers-reduced-motion: reduce) {
  .con02_left_in {
    position: static;
  }

  .con02_photo {
    top: auto;
    bottom: calc(var(--px) * -64);
  }
}

/* 카드 3장 — 우측 바깥 여백 53px(2.7822%)은 .con02 justify-content: flex-start 로 남는다. 마지막 경계선 = border-bottom */
.con02_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 50.8136%;
  margin-top: 0.3vw;
  border-bottom: 1px solid #000000;
}

/* height 사유: 시안 경계선(114/624/1133/1644)이 카드마다 1px 씩 달라 카드별로 박는다(509/508/510). 아래 보더는 다음 카드 top 이 대신 */
.con02_card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  height: calc(var(--px) * 509);
  border-top: 1px solid #000000;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  flex-shrink: 0;
}

.con02_card_02 {
  height: calc(var(--px) * 508);
}

.con02_card_03 {
  height: calc(var(--px) * 510);
}

/* 세로 번호띠 — 띠(82+1) + 본문(883) = 966 을 정확히 채우므로 반올림 시 띠가 줄지 않게 flex-shrink: 0 */
.con02_bar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 82);
  flex-shrink: 0;
  border-right: 1px solid #000000;
  background-color: #184795;
}

/* 번호 배지 82×86 — height 사유: 숫자 1줄 콘텐츠로는 86 이 안 나온다. 번호는 PSD point text 원점 기준 좌측정렬 */
.con02_no {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 86);
  border-bottom: 1px solid #000000;
  background-color: var(--color-point);
}

.con02_no_txt {
  margin-left: 26.6%;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 35);
  letter-spacing: -0.1vw;
  color: #fbfbfb;
}

/* overflow: hidden — 사진이 카드 상·우·하로 블리드 (PSD 클리핑 마스크) */
.con02_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 883);
  overflow: hidden;
}

/* 한지 텍스처 (PSD linear burn over #ffffff = 텍스처 원본) */
.con02_body_01 {
  background-image: url('/images/con02_bg.jpg');
}

.con02_body_02 {
  background-color: #040504;
}

.con02_body_03 {
  background-color: #fff8e1;
}

/* 사진(absol)과 같은 카드 안이라 HTML 에 .rltv (페인트 순서). 제목·본문 색은 자식이 상속 */
.con02_cont {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 4.5vw;
  margin-left: 7.6%;
  color: #1d1a19;
}

.con02_cont_02 {
  color: #ffffff;
}

.con02_cont_03 {
  color: #000000;
}

.con02_card_tt {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 35);
  letter-spacing: -0.1vw;
  line-height: 2.2vw;
}

/* Pretendard Light(300) = 전역 section 상속이라 font-weight 미선언 */
.con02_card_txt {
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.1vw;
  line-height: 1.3vw;
}

/* 카드03 만 PSD tracking −0.025em(≈ 광역 −0.04vw) — 값 재선언 대신 inherit 로 .con02_card_txt 의 −0.1vw 를 끊는다 */
.con02_card_txt_03 {
  letter-spacing: inherit;
}

.con02_txt01 {
  margin-top: 7.9vw;
}

.con02_txt02 {
  margin-top: 6.2vw;
}

.con02_txt03 {
  margin-top: 7.4vw;
}

.con02_txt_gap {
  margin-top: 1.3vw;
}

/* PSD Pretendard-ExtraBold — common.css 의 b 700 을 800 으로 덮어쓴다 */
.con02_bold {
  font-weight: 800;
}

.con02_pt {
  color: var(--color-point);
}

/* 카드 사진 — 래스터 이미지 좌표 calc(--px) (STEP 9 실측). 전부 중앙 아님 → 좌표 유지. 블리드는 .con02_body overflow: hidden 이 자른다 */
.con02_img01 {
  width: calc(var(--px) * 538);
  aspect-ratio: 538 / 396;
  left: calc(var(--px) * 680);
  top: calc(var(--px) * -79);
}

.con02_img02 {
  width: calc(var(--px) * 388);
  aspect-ratio: 388 / 423;
  left: calc(var(--px) * 298);
  top: calc(var(--px) * -137);
}

.con02_img03 {
  width: calc(var(--px) * 407);
  aspect-ratio: 407 / 337;
  left: calc(var(--px) * 465);
  top: calc(var(--px) * 290);
}

.con02_img04 {
  width: calc(var(--px) * 411);
  aspect-ratio: 411 / 308;
  left: calc(var(--px) * 470);
  top: calc(var(--px) * 109);
}

.con02_img05 {
  width: calc(var(--px) * 300);
  aspect-ratio: 300 / 269;
  left: calc(var(--px) * 499);
  top: calc(var(--px) * 375);
}

.con02_img06 {
  width: calc(var(--px) * 300);
  aspect-ratio: 300 / 269;
  left: calc(var(--px) * 736);
  top: calc(var(--px) * 249);
}

.con02_img07 {
  width: calc(var(--px) * 371);
  aspect-ratio: 371 / 509;
  left: calc(var(--px) * 528);
  top: calc(var(--px) * 15);
}

/* ===== con03 ===== */
/* 경쟁은 적고, 가능성은 큽니다 (업종 수 비교 + 막대그래프)
   .rltv 필수 — 전역 section 에 position: relative 가 없다. absol 배지 기둥 2개(.con03_badge_l/_r)의 기준 박스.
   배경 줄무늬 텍스처는 .back_img(cover · top center) + background-image. con03_bg.jpg 1905×1070 — 섹션 1068.56 보다 커서 cover 배율 1.0 (넘친 행은 하단에서 잘림) */
.con03 {
  padding-top: 8.7vw;
  padding-bottom: 6.4vw;
  background-image: url('/images/con03_bg.jpg');
}

.con03_title {
  width: calc(var(--px) * 689);
  aspect-ratio: 689 / 79;
}

/* Pretendard Regular — 전역 section 이 300 이라 400 명시. letter-spacing 은 전역 -0.04vw 상속 (PSD -0.058vw 는 소수 1자리 규칙과 충돌 — 생략이 시안 폭에 가장 가깝다) */
.con03_sub {
  margin-top: 0.9vw;
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  line-height: 1.5vw;
  color: #ffffff;
}

/* PSD Pretendard-ExtraBold — common.css 의 b 700 을 800 으로 덮어쓴다 */
.con03_sub b {
  font-weight: 800;
}

/* 좌 검정 카드 411 + 우 흰 카드 1000. margin-right calc 3 — 1905-1440=465 홀수라 flex center 면 x 232.5 → 사진이 233 에 그려진다.
   1.5px 왼쪽으로 옮겨 카드·사진 x 를 정수 231 에 둔다 (시안 비대칭 반영 · 가운데 흉내 아님). % 는 0.2% 가 230.6 이라 calc */
.con03_cards {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 75.5906%;
  margin-top: 2.5vw;
  margin-right: calc(var(--px) * 3);
}

/* 검정 카드 — height 사유: 좌우 카드가 같은 높이(580)의 고정 패널이고, 본문 아래 311px 가 사진(absol)뿐이라 콘텐츠로 안 잡힌다.
   box-sizing 사유: 전역 content-box 라 padding-top 이 높이에 더해진다 (629.52 → 섹션 +50).
   overflow: hidden — 음식 사진을 라운드 모서리로 자른다 (자기 box-shadow 는 안 잘린다). 외곽 3중 링 = 1px 흑 / 4px 백 / 3px 흑 */
.con03_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 28.5417%;
  height: calc(var(--px) * 580);
  box-sizing: border-box;
  padding-top: 2.6vw;
  border-radius: calc(var(--px) * 20);
  background-color: #000000;
  overflow: hidden;
  box-shadow: 0 0 0 1px #000000, 0 0 0 5px #fefefe, 0 0 0 8px #000000;
}

/* 음식 사진 — 카드 하단 밀착 + 위로 17.3% 와 겹쳐 흐름 대체 불가 (absol). 부모 꽉 채움 (left 0 · 폭 100%) 이라 중앙 규칙 제외 */
.con03_food {
  width: 100%;
  aspect-ratio: 411 / 396;
  left: 0;
  bottom: 0;
}

/* 빨강 pill — height 사유: pill 고정 높이 (반원 캡 전제). 사진(absol)과 같은 카드 안이라 HTML 에 .rltv (페인트 순서) */
.con03_pill {
  width: 75.1825%;
  height: calc(var(--px) * 60);
  border-radius: 50vw;
  background-color: #d71718;
}

/* 외곽선·그림자는 PNG 에 구웠다 — CSS filter·shadow 중복 금지 */
.con03_pill_txt {
  width: calc(var(--px) * 258);
  aspect-ratio: 258 / 36;
}

/* Pretendard Light(300) = 전역 상속이라 font-weight 미선언 */
.con03_cardsub {
  margin-top: 1.4vw;
  font-size: calc(var(--px) * 22);
  letter-spacing: -0.1vw;
  line-height: 1.0vw;
  color: #ffffff;
}

/* PSD Pretendard-ExtraBold */
.con03_cardsub b {
  font-weight: 800;
}

/* SfHambakneun live text — PSD outside 1px stroke + 4px 아래 그림자를 CSS 로.
   -webkit-text-stroke 는 center 라 paint-order 로 fill 이 먹히지 않게 한다 */
.con03_rate {
  margin-top: 1.2vw;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 110);
  letter-spacing: -0.3vw;
  line-height: 4.6vw;
  color: #d71718;
  -webkit-text-stroke: 1px #000000;
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--px) * 4) 0 #000000;
}

.con03_rate_unit {
  font-size: calc(var(--px) * 65);
  color: #ffffff;
}

/* 흰 카드 — height·box-sizing 사유는 .con03_card 와 같다 (content-box 면 612.38).
   padding-top calc 31 — 1.6vw 는 눈금선 6개 중 4개·막대 하단이 1px 위에 그려진다 (2차 평가 렌더) */
.con03_graph {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 69.4444%;
  height: calc(var(--px) * 580);
  box-sizing: border-box;
  padding-top: calc(var(--px) * 31);
  border-radius: calc(var(--px) * 20);
  background-color: #ffffff;
  box-shadow: 0 0 0 1px #000000, 0 0 0 5px #fefefe, 0 0 0 8px #000000;
}

.con03_chart {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 93.6%;
}

.con03_legend {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  column-gap: 0.7vw;
}

.con03_legend_item {
  column-gap: 0.4vw;
}

/* CSS 정원 dot — 비율을 안 박으면 타원이 된다 */
.con03_legend_dot {
  width: calc(var(--px) * 18);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

.con03_legend_dot_gray {
  background-color: #b5b5b5;
}

.con03_legend_dot_red {
  background-color: #d71718;
}

.con03_legend_txt {
  font-size: calc(var(--px) * 18);
  line-height: 0.9vw;
  color: #000000;
}

/* 막대 트랙(.con03_bars absol)의 기준 박스 — HTML 에 .rltv. 높이는 .con03_grid 가 소유 */
.con03_plot {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: 0.7vw;
}

/* 0~100 값 축 — height 사유: 스케일 자체라 콘텐츠로 대체 불가 (막대 %·눈금 간격 기준). 1px 행 6개 space-between → 간격 78.8 */
.con03_grid {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  height: calc(var(--px) * 395);
}

/* 눈금 1줄 — height 1px (hr 금지 대체). 축 숫자는 align-items: center 로 선 중앙에 붙는다 */
.con03_grid_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 1px;
  column-gap: 0.7vw;
}

/* 축 라벨 셀 — width 사유: 카피 wrapper 가 아니라 차트 축 라벨 셀. PSD center 정렬(중심 x 717)이라 자연폭이면 100·80 중심이 4.5px 어긋난다 */
.con03_grid_num {
  width: calc(var(--px) * 29);
  font-size: calc(var(--px) * 20);
  line-height: 1.0vw;
  color: #000000;
}

/* 점선 — PSD #b5b5b5 × 그룹 opacity 0.502 를 흰 카드 위로 평탄화한 #dadada */
.con03_grid_line {
  width: 95.5128%;
  border-top: 1px dashed #dadada;
}

/* 0 눈금 = 실선 축 */
.con03_grid_line_axis {
  border-top: 1px solid #000000;
}

/* 막대 트랙 — 눈금 그리드와 같은 좌표계에 겹친다 (absol). bottom 1px = 축 실선 바로 위.
   align-items: stretch — li 높이 394 가 확정(definite)돼야 막대 height % 가 풀린다 (flex-end 면 auto 로 풀림) */
.con03_bars {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  left: 9.0%;
  right: 4.5%;
  top: 0;
  bottom: 1px;
}

.con03_bar_group {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 18.8272%;
}

/* con03-m01 「그래프 올라가는 모션」 대상 (구조형 · js/animation.js) — height 0 → 아래 목표 %.
   padding 금지 — content-box 라 높이에 더해지고 height 0 에서도 남는다 → 수치 여백은 자식 margin.
   overflow: hidden — 자라는 동안 막대 안 수치가 밖으로 튀지 않게 */
.con03_bar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 47.2131%;
  border-radius: calc(var(--px) * 10) calc(var(--px) * 10) 0 0;
  overflow: hidden;
}

.con03_bar_gray {
  background-color: #b5b5b5;
}

.con03_bar_red {
  background-color: #d71718;
}

/* 막대 높이 = li.con03_bar_group(394) 기준 %. 시안 실측 픽셀이 정본 (값 라벨과 정확히 비례하지 않는다) */
.con03_bar_gray_01 {
  height: 85.3%;
}

.con03_bar_gray_02 {
  height: 83.5%;
}

.con03_bar_gray_03 {
  height: 84.3%;
}

.con03_bar_gray_04 {
  height: 83.5%;
}

.con03_bar_red_01 {
  height: 16.2%;
}

.con03_bar_red_02 {
  height: 17.3%;
}

.con03_bar_red_03 {
  height: 16.5%;
}

.con03_bar_red_04 {
  height: 17.3%;
}

/* 회색 막대 수치 — Pretendard ExtraBold live text (빨강 막대 수치는 SDMokdan 이라 이미지) */
.con03_bar_val {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 20);
  font-weight: 800;
  line-height: 0.9vw;
  color: #000000;
}

.con03_bar_pct {
  margin-top: 0.4vw;
}

.con03_bar_pct_01 {
  width: calc(var(--px) * 45);
  aspect-ratio: 45 / 21;
}

.con03_bar_pct_02 {
  width: calc(var(--px) * 46);
  aspect-ratio: 46 / 21;
}

.con03_bar_pct_03 {
  width: calc(var(--px) * 44);
  aspect-ratio: 44 / 21;
}

.con03_bar_pct_04 {
  width: calc(var(--px) * 45);
  aspect-ratio: 45 / 21;
}

/* 지역 pill 행 — 2차 평가 피팅값 (시안 pill left 796/1015/1232/1453 최소오차). 막대 트랙(810)과 폭이 다르다 */
.con03_regions {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 86.4117%;
  margin-top: 0.3vw;
  margin-left: 8.9%;
}

.con03_region {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 18.8551%;
}

/* 검정 pill — height 사유: pill 고정 높이 (반원 캡 전제) */
.con03_region_box {
  width: 87.8689%;
  height: calc(var(--px) * 36);
  border-radius: 50vw;
  background-color: #000000;
}

.con03_region_txt_01 {
  width: calc(var(--px) * 54);
  aspect-ratio: 54 / 20;
}

.con03_region_txt_02 {
  width: calc(var(--px) * 54);
  aspect-ratio: 54 / 20;
}

.con03_region_txt_03 {
  width: calc(var(--px) * 90);
  aspect-ratio: 90 / 20;
}

.con03_region_txt_04 {
  width: calc(var(--px) * 90);
  aspect-ratio: 90 / 20;
}

.con03_source {
  margin-top: 1.4vw;
  font-size: calc(var(--px) * 17);
  line-height: 0.9vw;
  color: #000000;
}

/* 좌우 타원 배지 기둥 — 캔버스 가장자리 데코 (absol)
   래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지 (STEP 9 실측). 중앙 아님 (가로 Δ883·Δ881 · 세로 Δ4.22) → 좌표 유지 */
.con03_badge_l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  left: calc(var(--px) * 20);
  top: calc(var(--px) * 412);
  row-gap: calc(var(--px) * 2);
}

.con03_badge_r {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  right: calc(var(--px) * 22);
  top: calc(var(--px) * 412);
  row-gap: calc(var(--px) * 2);
}

/* 외곽선·그림자는 PNG 에 구웠다 */
.con03_badge {
  width: calc(var(--px) * 99);
  aspect-ratio: 99 / 83;
}

/* ===== con04 ===== */
/* 막창의 새로운 기준을 만들다 (시그니처 쫀득감자막창)
   .rltv 필수 — 전역 section 에 position: relative 가 없다. absol 5개(숯·사진·스티커 2·하단 띠)의 기준 박스.
   좌우 여백은 section padding 금지 — reset.css box-sizing unset(content-box)이라 가로 스크롤이 난다 → .con04_inner 폭 레일.
   배경은 단색 검정이라 .back_img 없음 */
.con04 {
  justify-content: flex-start;
  padding-top: 10.6vw;
  padding-bottom: 9.6vw;
  background-color: #000000;
}

/* 래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지(STEP 9 실측) */
/* 숯 받침 — 사진 뒤. 섹션 하단 밖까지 나가고 section overflow: hidden 이 자른다 */
.con04_charcoal {
  width: calc(var(--px) * 797);
  aspect-ratio: 797 / 715;
  left: calc(var(--px) * 549);
  top: calc(var(--px) * 495);
}

/* 감자막창 사진 — 하단은 .con04_stripe 가 덮는다 */
.con04_food {
  width: calc(var(--px) * 574);
  aspect-ratio: 574 / 787;
  left: calc(var(--px) * 714);
  top: calc(var(--px) * 112);
}

/* con04-m01 「스티커 모션」 대상 (장식형 · Animation Pass 에서 구현)
   외곽선·그림자는 PNG 에 구웠다 — 같은 효과를 CSS 로 다시 넣지 말 것 */
.con04_sticker_01 {
  width: calc(var(--px) * 249);
  aspect-ratio: 1 / 1;
  left: calc(var(--px) * 897);
  top: calc(var(--px) * 102);
}

.con04_sticker_02 {
  width: calc(var(--px) * 249);
  aspect-ratio: 1 / 1;
  left: calc(var(--px) * 680);
  top: calc(var(--px) * 603);
}

/* 좌우 정렬 레일 — 전역 align-items: center 로 가운데 놓인다. 우측그룹이 숯과 겹쳐 HTML 에 .rltv (페인트 순서) */
.con04_inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 76.4829%;
}

/* con04-m02 「텍스트 양쪽에서 등장」 좌→ 대상 (장식형 · Animation Pass 에서 구현) */
.con04_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con04_badge {
  width: calc(var(--px) * 289);
  aspect-ratio: 289 / 82;
}

.con04_title {
  width: calc(var(--px) * 413);
  aspect-ratio: 413 / 163;
  margin-top: 1.9vw;
}

/* con04-m02 「텍스트 양쪽에서 등장」 우→ 대상 (장식형 · Animation Pass 에서 구현). align-self 로 레일 우측 끝에 붙인다 */
.con04_right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  align-self: flex-end;
  margin-top: 1.0vw;
}

.con04_sig {
  width: calc(var(--px) * 230);
  aspect-ratio: 230 / 63;
}

.con04_name {
  width: calc(var(--px) * 515);
  aspect-ratio: 515 / 96;
  margin-top: 0.6vw;
}

/* Pretendard Regular — 전역 section 이 300 이라 400 명시. 2줄째 강조는 common.css 의 exbold(800) */
.con04_desc {
  margin-top: 1.4vw;
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  line-height: 1.4vw;
  color: #ffffff;
  text-align: right;
}

/* 하단 빨강·흰 5단 띠 (20 / 6 / 6 / 5 / 5) — DOM 마지막이라 사진·숯 하단을 덮는다
   height 사유: 자식 없는 단색 띠라 콘텐츠로 높이를 만들 수 없다. 빈 div 5개 대신 gradient 1개 */
.con04_stripe {
  width: 100%;
  height: calc(var(--px) * 42);
  left: 0;
  bottom: 0;
  background-image: linear-gradient(#d71718 0 calc(var(--px) * 20), #f3f1ec 0 calc(var(--px) * 26), #d71718 0 calc(var(--px) * 32), #f3f1ec 0 calc(var(--px) * 37), #d71718 0 100%);
}

/* ===== con05 ===== */
/* 매출로 증명하는 진미막창의 경쟁력
   .rltv 필수 — 전역 section 에 position: relative 가 없다. absol 1개(.con05_photo)의 기준 박스.
   배경 한지는 .back_img(cover · top center) + background-image */
.con05 {
  padding-top: 5.5vw;
  padding-bottom: 5.8vw;
  background-image: url('/images/con05_bg.jpg');
}

.con05_title_top {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.2vw;
  line-height: 2.7vw;
  color: #000000;
  margin-left: calc(var(--px) * 10);
}

/* align-items: flex-start — 로고·배지 top 을 PSD 대로 따로 잡는다 (center 면 로고 top −2.2px) */
.con05_title_main {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 0.4vw;
  column-gap: calc(var(--px) * 3);
  margin-left: calc(var(--px) * 7);
}

.con05_title_logo {
  width: calc(var(--px) * 360);
  aspect-ratio: 360 / 82;
  margin-top: 0.5vw;
}

.con05_title_badge {
  width: calc(var(--px) * 229);
  aspect-ratio: 229 / 96;
}

/* Pretendard Regular — 전역 section 이 300 이라 400 명시 */
.con05_sub {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  line-height: 0.9vw;
  color: #000000;
  margin-left: calc(var(--px) * 12);
}

/* 라탄 받침 음식 사진 — 하단은 section overflow: hidden 이 자른다
   래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지(STEP 9 실측). 중앙 아님(가로 Δ14.5 · 세로 Δ409.5) → 좌표 유지 */
.con05_photo {
  width: calc(var(--px) * 816);
  aspect-ratio: 816 / 819;
  left: calc(var(--px) * 559);
  top: calc(var(--px) * 424);
}

/* 금액 행 — 사진과 겹쳐 HTML 에 .rltv (페인트 순서). 행 높이는 .con05_digit 타일(113)이 소유
   box-sizing 사유 — reset.css box-sizing unset(content-box)이라 width 100% + padding 이면 가로 스크롤 */
.con05_amount {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1.5vw;
  padding-left: 16.6%;
}

.con05_amount_label {
  margin-top: 1.4vw;
}

.con05_amount_label_top {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 29);
  letter-spacing: -0.1vw;
  line-height: 1.4vw;
  color: #000000;
}

/* 1px 구분선 (hr 금지) */
.con05_amount_line {
  width: calc(var(--px) * 135);
  height: 1px;
  margin-top: 0.5vw;
  background-color: #000000;
}

.con05_amount_label_btm {
  margin-top: 0.5vw;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 29);
  letter-spacing: -0.1vw;
  line-height: 1.4vw;
  color: #000000;
}

/* 가로 마진 calc — 부모 .con05_amount 의 content 폭이 자기 padding 에 의존해 % 기준이 캔버스와 달라진다 */
.con05_num {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: calc(var(--px) * 20);
  column-gap: calc(var(--px) * 6);
}

/* 자릿수 고정 타일 90×113 — height 사유: 1글자 콘텐츠로는 글리프마다 크기가 달라 9칸이 어긋난다. 금액 행 높이의 소유자 */
.con05_digit {
  width: calc(var(--px) * 90);
  height: calc(var(--px) * 113);
  border-radius: calc(var(--px) * 10);
  background-color: #000000;
}

/* letter-spacing 0 — 1글자라 광역 -0.04vw 의 우측 여백이 flex center 를 반 픽셀 민다 */
.con05_digit_txt {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 100);
  letter-spacing: 0;
  line-height: 4.0vw;
  color: #ffffff;
}

/* 천단위 그룹 간격 스페이서 — 고정폭 29 가 그룹 간격(42·39)을 만든다. 세로는 baseline 기준 margin-top */
.con05_comma {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 29);
  margin-top: 3.7vw;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 70);
  letter-spacing: 0;
  line-height: 1.1vw;
  color: #000000;
}

.con05_won {
  margin-top: 2.3vw;
  margin-left: calc(var(--px) * 9);
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 70);
  letter-spacing: 0;
  line-height: 3.3vw;
  color: #000000;
}

/* 하단 지표 2 — 행 박스(폭 100%)가 사진 박스와 겹쳐 HTML 에 .rltv. box-sizing 사유는 .con05_amount 와 같다 */
.con05_bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8.1vw;
  padding-left: 8.9%;
  padding-right: 8.3%;
}

/* 고정폭 컬럼 345 — SfHambakneun 숫자가 비례폭이라 카운트업 중 텍스트 폭(321.6~344.8)을 pill 이 따라가지 않게 */
.con05_stat {
  width: calc(var(--px) * 345);
}

/* pill — height 사유: 라벨 이미지(40)보다 큰 55 고정 + 반원 캡. 이중 테두리 = 1px 흑 / 4px 백 / 3px 흑
   align-items: flex-start — 라벨 PNG 효과 캔버스가 상 1 · 하 5px 비대칭이라 center 면 위로 뜬다 → 래퍼 margin-top */
.con05_stat_pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 327);
  height: calc(var(--px) * 55);
  border-radius: 50vw;
  background-color: #d71718;
  box-shadow: 0 0 0 1px #000000, 0 0 0 5px #fefefe, 0 0 0 8px #000000;
}

/* 외곽선·그림자는 PNG 에 구웠다 — 같은 효과를 CSS 로 다시 넣지 말 것 */
.con05_stat_txt_01 {
  width: calc(var(--px) * 153);
  aspect-ratio: 153 / 40;
  margin-top: calc(var(--px) * 10);
}

.con05_stat_txt_02 {
  width: calc(var(--px) * 152);
  aspect-ratio: 152 / 39;
  margin-top: calc(var(--px) * 10);
}

/* nowrap — 컬럼 폭 여유 0.20px 가드. 넘쳐도 공백에서 2줄로 꺾여 섹션이 늘어나지 않게 */
.con05_stat_num {
  margin-top: 1.3vw;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 75);
  letter-spacing: -0.2vw;
  line-height: 3.7vw;
  color: #000000;
  white-space: nowrap;
}

/* STEP 9 보정 — 좌 하단 금액 PSD 비대칭 +4px (가운데 기준 margin-left 8) */
.con05_stat_num_01 {
  margin-left: calc(var(--px) * 8);
}

/* line-height 2.9vw — 상속 LH(70.485)면 55px 인라인 박스가 strut 아래로 삐져나와 line box 가 커진다 */
.con05_stat_unit {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.1vw;
  line-height: 2.9vw;
}

/* ===== con06 ===== */
/* 손익율 — 많이 파는 것보다, ‘얼마나 남는지’가 중요합니다
   .rltv 필수 — 전역 section 에 position: relative 가 없다. absol 1개(.con06_photo)의 기준 박스.
   배경(청색 + 상단 한지 찢김)은 .back_img(cover · top center) + background-image
   padding-bottom 없음 — 카드 margin-bottom 음수가 섹션 bottom 을 만든다 */
.con06 {
  padding-top: 9.5vw;
  background-image: url('/images/con06_bg.jpg');
}

/* con05 라탄 받침 사진 하단부 — con05 가 overflow: hidden 으로 자른 구간을 이어 그린다
   래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지(STEP 9 실측). 중앙 아님(가로 Δ14.5) → 좌표 유지
   top −425 = 424 − con05 실렌더 높이 848.766 → 이음새 중복 행 제거(STEP 4 처방). 되돌리지 말 것 */
.con06_photo {
  width: calc(var(--px) * 816);
  aspect-ratio: 816 / 819;
  left: calc(var(--px) * 559);
  top: calc(var(--px) * -425);
}

/* 한지 카드 — 사진과 겹쳐 HTML 에 .rltv (페인트 순서). 한지 1680×899 는 .back_img 로 패딩박스에 1:1
   margin-right 1px — border-box 1682 짝수라 flex center 가 111.5 에 떨어져 흑테가 2행으로 번진다. margin-box 1683 → left 111 정수
   margin-bottom 음수 — 카드 하단 5px(흑테 포함)은 섹션 밖(con07 크롭 y0~4) → section overflow: hidden 이 자른다 */
.con06_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 88.189%;
  border: 1px solid #000000;
  border-radius: calc(var(--px) * 20);
  background-image: url('/images/con06_card_bg.jpg');
  margin-right: 1px;
  padding-bottom: calc(var(--px) * 47);
  margin-bottom: calc(var(--px) * -5);
}

.con06_band {
  width: calc(var(--px) * 1680);
  aspect-ratio: 1680 / 72;
}

/* 세로 체인 calc(--px) — 래스터(밴드·제목·파이·라벨·표 헤더/푸터)가 x.5 에 떨어지지 않게. 래스터를 안 움직이는 텍스트 여백만 vw/% */
.con06_title {
  margin-top: calc(var(--px) * 63);
}

.con06_title_top {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: 3.2vw;
  color: #000000;
}

/* 제목 2행 이미지 — 좌 3px 투명 여백 포함이라 flex center left 600 정수 */
.con06_title_main {
  width: calc(var(--px) * 704);
  aspect-ratio: 704 / 60;
  margin-top: calc(var(--px) * 2);
}

.con06_body {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 92.8571%;
  margin-top: calc(var(--px) * 44);
}

/* flex-shrink 0 — 자식 폭 합 1560.0004 > 1560 압축 방지 */
.con06_left {
  width: 31.9231%;
  flex-shrink: 0;
}

/* pill — height 사유: 라벨 이미지(41/43)보다 큰 55 고정 + 반원 캡. 이중 테두리 = 1px 흑 / 4px 백 / 3px 흑 */
.con06_pill {
  width: calc(var(--px) * 256);
  height: calc(var(--px) * 55);
  background: #d71718;
  border-radius: 50vw;
  box-shadow: 0 0 0 1px #000000, 0 0 0 5px #fefefe, 0 0 0 8px #000000;
  margin-top: calc(var(--px) * 43);
}

.con06_pill_02 {
  margin-top: calc(var(--px) * 49);
}

/* 외곽선·그림자는 PNG 에 구웠다 — 같은 효과를 CSS 로 다시 넣지 말 것. 투명 캔버스로 flex center 가 정수에 떨어진다 */
.con06_pill_txt_01 {
  width: calc(var(--px) * 90);
  aspect-ratio: 90 / 41;
}

.con06_pill_txt_02 {
  width: calc(var(--px) * 212);
  aspect-ratio: 212 / 43;
}

/* margin-right 1.4% — 시안 비대칭(숫자 중심이 pill 중심보다 3.3px 왼쪽) */
.con06_stat_num {
  margin-top: calc(var(--px) * 24);
  margin-right: 1.4%;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 75);
  letter-spacing: -0.2vw;
  line-height: 3.1vw;
  color: #000000;
}

.con06_stat_num_02 {
  margin-top: 1.4vw;
}

/* line-height 2.3vw — 상속 LH(59.055)면 55px 인라인 박스가 strut 아래로 삐져나와 line box 가 커진다 */
.con06_stat_unit {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.1vw;
  line-height: 2.3vw;
}

/* 1px 구분선 (hr 금지) — 파이 밑 x1134 까지 이어져 부모 폭(498)을 넘는다 → calc. 좌끝 x172 교차축 예외 배치 */
.con06_line {
  width: calc(var(--px) * 963);
  height: 1px;
  background: #000000;
  margin-top: calc(var(--px) * 63);
  align-self: flex-start;
}

/* Pretendard Regular — 전역 section 이 300 이라 400 명시 */
.con06_note {
  margin-top: 3.9vw;
  font-size: calc(var(--px) * 17);
  font-weight: 400;
  line-height: 1.0vw;
  color: #000000;
  align-self: flex-start;
}

/* 파이 — 흐름 배치 + HTML .rltv: 표가 margin-left 음수로 밑에 들어가고 positioned 파이가 static 표 위에 그려진다(z-index 0건) */
.con06_pie {
  width: calc(var(--px) * 550);
  aspect-ratio: 550 / 549;
  margin-left: calc(var(--px) * 7);
  flex-shrink: 0;
}

.con06_pie_profit {
  width: calc(100% * 135 / 550);
  aspect-ratio: 135 / 90;
  left: calc(100% * 379 / 550);
  top: calc(100% * 146 / 549);
}

@keyframes con06-profit-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: no-preference) {
  .con06_profit_ready .con06_profit_blink {
    animation: con06-profit-blink 1.4s ease-in-out infinite;
  }
}

/* 표 — 열 폭 191/181/166 은 헤더 이미지 래퍼가 소유(width 538 = 합)
   외곽선 box-shadow 사유: reset 의 border-collapse: collapse 에서 1px border 가 인접 칸과 반픽셀 분배돼 행 높이·열 폭이 흔들린다 */
.con06_table {
  width: calc(var(--px) * 538);
  margin-left: calc(var(--px) * -33);
  margin-top: calc(var(--px) * 22);
  box-shadow: 0 0 0 1px #231815;
  background: #ffffff;
  flex-shrink: 0;
  font-size: calc(var(--px) * 20);
  line-height: 1.2vw;
  color: #000000;
  text-align: center;
}

.con06_th {
  background: #000000;
}

/* 헤더 칸 통캔버스 — 래퍼 폭 = 열 폭, 높이 58 = 헤더 행 높이 */
.con06_th_01 {
  width: calc(var(--px) * 191);
  aspect-ratio: 191 / 58;
}

.con06_th_02 {
  width: calc(var(--px) * 181);
  aspect-ratio: 181 / 58;
}

.con06_th_03 {
  width: calc(var(--px) * 166);
  aspect-ratio: 166 / 58;
}

/* 행 — height 사유: 시안 행 피치(텍스트 ink 중심 54 간격)는 텍스트 line box(22.86)로 안 잡힌다
   하단 1px 구분선 = 배경 그라데이션(좌 18 · 우 20 inset) — DOM 추가 없음
   ★ 같은 특이도 — 선언 순서 .con06_tr → .con06_tr_first → .con06_tr_last 유지 */
.con06_tr {
  height: calc(var(--px) * 54);
  background: linear-gradient(#e6e6e6, #e6e6e6) no-repeat calc(var(--px) * 18) bottom / calc(var(--px) * 500) 1px;
}

.con06_tr td {
  padding-bottom: calc(var(--px) * 2);
}

.con06_tr_first {
  height: calc(var(--px) * 57);
}

.con06_tr_first td {
  padding-bottom: 0;
}

/* 마지막 행 아래 구분선 없음 (시안) */
.con06_tr_last {
  height: calc(var(--px) * 50);
  background: none;
}

.con06_tr_last td {
  padding-top: 1px;
  padding-bottom: 0;
}

.con06_td_name {
  color: #1c1f1d;
  font-weight: 400;
}

.con06_td_bold {
  font-weight: 700;
}

/* 가로 — PSD 단락 중심 tx 에 맞춘 비대칭 padding (열1 없음) */
.con06_td_amount {
  padding-right: calc(var(--px) * 17);
}

.con06_td_rate {
  padding-right: calc(var(--px) * 7);
}

/* 푸터 — 윗선·좌선은 배경 그라데이션(레이아웃 불변). border 를 안 쓰는 사유는 .con06_table 과 같다 */
.con06_tf {
  background: linear-gradient(#231815, #231815) no-repeat top / 100% 1px, #22519f;
}

.con06_tf_rate {
  background: linear-gradient(#231815, #231815) no-repeat top / 100% 1px, linear-gradient(#231815, #231815) no-repeat left / 1px 100%, #d71718;
}

/* 푸터 칸 통캔버스 — 높이 70 = 푸터 행 높이 */
.con06_tf_01 {
  width: calc(var(--px) * 191);
  aspect-ratio: 191 / 70;
}

.con06_tf_02 {
  width: calc(var(--px) * 181);
  aspect-ratio: 181 / 70;
}

.con06_tf_03 {
  width: calc(var(--px) * 166);
  aspect-ratio: 166 / 70;
}

/* ===== con07 ===== */
/* 하단 사진·종이는 con08 위로 103px 블리드. clip-path 쌓임 맥락을 con08 위에 유지한다. */
.con07 {
  background-image: url("/images/con07_bg.jpg");
  overflow: visible;
  overflow-x: clip;
  clip-path: inset(0 0 calc(var(--px) * -103) 0);
  z-index: 1;
  padding-top: calc(var(--px) * 249);
  padding-bottom: calc(var(--px) * 205);
}

.con07_title_top {
  margin-left: calc(var(--px) * 41);
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 45);
  color: #ffffff;
}

.con07_title_main {
  width: calc(var(--px) * 597);
  aspect-ratio: 597 / 74;
  margin-top: calc(var(--px) * 13);
}

.con07_desc {
  margin-top: calc(var(--px) * 30);
  margin-left: 2.1%;
  font-size: calc(var(--px) * 22);
  line-height: calc(var(--px) * 29);
  color: #ffffff;
}

.con07_slider {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-top: calc(var(--px) * 32);
  overflow: visible;
}

.con07_slide {
  width: calc(var(--px) * 609);
  --on: 0;
}

div.con07_slide.swiper-slide-active {
  --on: 1;
}

.con07_off {
  opacity: calc(1 - var(--on));
}

.con07_on {
  opacity: var(--on);
}

/* 종이 609×468 고정 프레임이 카드·슬라이더 높이를 소유한다. */
.con07_card {
  opacity: var(--on);
  width: 100%;
  height: calc(var(--px) * 468);
  box-sizing: border-box;
  padding-top: calc(var(--px) * 84);
  justify-content: flex-start;
}

.con07_num {
  width: calc(var(--px) * 61);
  aspect-ratio: 61 / 55;
  margin-right: calc(var(--px) * 2);
}

.con07_num_txt {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 29);
  letter-spacing: 0;
  line-height: 1.5vw;
  color: #ffffff;
}

.con07_name {
  margin-top: calc(var(--px) * 24);
  margin-right: calc(var(--px) * 2);
}

.con07_name_01 {
  width: calc(var(--px) * 225);
  aspect-ratio: 225 / 38;
}

.con07_name_02 {
  width: calc(var(--px) * 169);
  aspect-ratio: 169 / 38;
}

.con07_name_03 {
  width: calc(var(--px) * 67);
  aspect-ratio: 67 / 38;
}

.con07_sub {
  margin-top: calc(var(--px) * 12);
  column-gap: calc(var(--px) * 11);
  margin-right: calc(var(--px) * 2);
}

.con07_stripe {
  width: calc(var(--px) * 28);
  aspect-ratio: 28 / 26;
}

.con07_sub_txt {
  white-space: nowrap;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 26);
  color: #1d1a19;
}

.con07_card_desc {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  line-height: 1.3vw;
  color: #1d1a19;
}

/* 래스터 이미지 좌표 calc(--px) — 소수점 좌표 보간 블러 방지. */
.con07_on_01 {
  width: calc(var(--px) * 889);
  aspect-ratio: 889 / 538;
  left: calc(var(--px) * -127);
  top: calc(var(--px) * 284);
}

.con07_on_02 {
  width: calc(var(--px) * 838);
  aspect-ratio: 838 / 473;
  left: calc(var(--px) * -138);
  top: calc(var(--px) * 320);
}

.con07_on_03 {
  width: calc(var(--px) * 919);
  aspect-ratio: 919 / 511;
  left: calc(var(--px) * -142);
  top: calc(var(--px) * 298);
}

.con07_off_01 {
  width: calc(var(--px) * 757);
  aspect-ratio: 757 / 458;
  left: calc(var(--px) * -97);
  top: calc(var(--px) * -6);
}

.con07_off_02 {
  width: calc(var(--px) * 708);
  aspect-ratio: 708 / 400;
  left: calc(var(--px) * -73);
  top: calc(var(--px) * -9);
}

.con07_off_03 {
  width: calc(var(--px) * 790);
  aspect-ratio: 790 / 439;
  left: calc(var(--px) * -114);
  top: calc(var(--px) * 36);
}

.con07_arr {
  width: calc(var(--px) * 103);
  aspect-ratio: 103 / 92;
}

.con07_prev {
  left: calc(var(--px) * 595);
  top: calc(var(--px) * 735);
  transform: scaleX(-1);
}

.con07_next {
  left: calc(var(--px) * 1214);
  top: calc(var(--px) * 734);
}

.con07_arr_txt {
  padding-top: calc(var(--px) * 4);
  font-family: "Miwon";
  font-size: calc(var(--px) * 70);
  letter-spacing: 0;
  line-height: 3.7vw;
  color: #ffffff;
}

/* Swiper z-index:1 위의 고정 스티커·찢어진 종이는 공통 버튼과 같은 2층. */
.con07_badge {
  width: calc(var(--px) * 339);
  aspect-ratio: 339 / 242;
  left: calc(var(--px) * 1146);
  top: calc(var(--px) * 874);
  z-index: 2;
}

.con07_badge_txt {
  left: calc(var(--px) * 105);
  top: calc(var(--px) * 63);
  transform: rotate(9deg);
  white-space: nowrap;
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 31);
  letter-spacing: -0.1vw;
  line-height: 1.8vw;
  color: #ffffff;
  -webkit-text-stroke: 1px #000000;
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--px) * 4) 0 #000000;
}

.con07_tear {
  width: calc(var(--px) * 1905);
  aspect-ratio: 1905 / 188;
  bottom: calc(var(--px) * -103);
  z-index: 2;
}

/* ===== con08 ===== */
.con08 {
  background-image: url("/images/con08_bg.jpg");
  justify-content: flex-start;
  padding-top: calc(var(--px) * 117);
  padding-bottom: 5.1vw;
  z-index: 10;
}

.con08_stamp {
  width: calc(var(--px) * 219);
  aspect-ratio: 219 / 120;
  margin-right: calc(var(--px) * 6);
}

@keyframes con08-stamp-blink {
  0%, 100% { opacity: 1; }
  80% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .con08_stamp_ready {
    animation: con08-stamp-blink 1.4s steps(1, end) infinite;
  }
}

.con08_stamp_txt {
  transform: rotate(-8.3deg);
  white-space: nowrap;
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: 2.4vw;
  color: #ffffff;
  font-family: "SfHambakneun";
}

.con08_title {
  width: calc(var(--px) * 699);
  aspect-ratio: 699 / 69;
  margin-top: calc(var(--px) * 19);
}

.con08_box {
  margin-top: calc(var(--px) * 57);
  margin-right: calc(var(--px) * 4);
  border: 1px solid #000000;
  background-color: #000000;
  column-gap: 1px;
}

.con08_photo {
  width: calc(var(--px) * 838);
  aspect-ratio: 838 / 581;
}

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

.con08_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(var(--px) * 193);
  box-sizing: border-box;
  background-color: #ffffff;
  color: #000000;
  --on: 0;
  transition: background-color var(--transition-ui), color var(--transition-ui);
}

.con08_item_on {
  background-color: #d71718;
  color: #ffffff;
  --on: 1;
}

.con08_item_01 {
  padding-top: calc(var(--px) * 65);
  padding-left: calc(var(--px) * 82);
}

.con08_item_02 {
  padding-top: calc(var(--px) * 59);
  padding-left: calc(var(--px) * 83);
}

.con08_item_03 {
  padding-top: calc(var(--px) * 57);
  padding-left: calc(var(--px) * 83);
}

.con08_food {
  width: calc(var(--px) * 178);
  aspect-ratio: 178 / 243;
  left: calc(var(--px) * 602);
  top: calc(var(--px) * -50);
  opacity: var(--on);
  transition: opacity var(--transition-ui);
}

.con08_stripe {
  width: calc(var(--px) * 34);
  aspect-ratio: 34 / 193;
  right: calc(var(--px) * 2);
  top: 0;
  opacity: var(--on);
  transition: opacity var(--transition-ui);
}

.con08_label_01 {
  width: calc(var(--px) * 138);
  aspect-ratio: 138 / 44;
}

.con08_label_02 {
  width: calc(var(--px) * 160);
  aspect-ratio: 160 / 44;
}

.con08_label_03 {
  width: calc(var(--px) * 103);
  aspect-ratio: 103 / 44;
}

.con08_label_on {
  opacity: var(--on);
  transition: opacity var(--transition-ui);
}

.con08_label_off {
  opacity: calc(1 - var(--on));
  transition: opacity var(--transition-ui);
}

.con08_item_txt {
  margin-top: 0.3vw;
  font-size: calc(var(--px) * 20);
  line-height: 1.3vw;
}

.con08_desc {
  margin-top: 3.0vw;
  font-size: calc(var(--px) * 22);
  line-height: 1.5vw;
}

/* ===== con09 ===== */
.con09 {
  justify-content: flex-start;
  height: var(--con09-frame-height, auto);
  background-color: #d71718;
  background-image: linear-gradient(to bottom, transparent calc(var(--px) * 1190), #d71718 calc(var(--px) * 1190)), url('/images/con09_bg.jpg');
  background-size: 100% auto;
  padding-top: calc(var(--px) * 35);
  padding-bottom: calc(var(--px) * 149);
}

.con09 > * {
  flex-shrink: 0;
}

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

.con09_badge {
  width: calc(var(--px) * 298);
  aspect-ratio: 298 / 82;
}

.con09_title {
  width: calc(var(--px) * 399);
  aspect-ratio: 399 / 159;
  margin-top: calc(var(--px) * 45);
}

.con09_desc {
  margin-top: calc(var(--px) * 29);
  font-size: calc(var(--px) * 22);
  line-height: calc(var(--px) * 29);
  color: #ffffff;
}

.con09_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: calc(var(--px) * 61);
  margin-right: 1px;
}

.con09_card_02 {
  margin-top: calc(var(--px) * 50);
}

.con09_card_03 {
  margin-top: calc(var(--px) * 47);
}

.con09_card_04 {
  margin-top: calc(var(--px) * 50);
}

.con09_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 838);
  border: 1px solid #000000;
  background-color: #ffffff;
}

.con09_stripe {
  width: calc(var(--px) * 48);
  aspect-ratio: 48 / 581;
}

.con09_cont {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 134);
  padding-left: calc(var(--px) * 69);
}

.con09_num {
  width: calc(var(--px) * 61);
  aspect-ratio: 61 / 55;
  margin-left: calc(var(--px) * 10);
}

.con09_num_txt {
  font-size: calc(var(--px) * 29);
  letter-spacing: 0;
  line-height: 1.5vw;
  color: #ffffff;
  font-family: "SfHambakneun";
}

.con09_card_tt {
  width: calc(var(--px) * 280);
  aspect-ratio: 280 / 86;
  margin-top: calc(var(--px) * 22);
}

.con09_card_sub {
  margin-top: 0.7vw;
  margin-left: calc(var(--px) * 2);
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.1vw;
  line-height: 1.4vw;
  color: #1d1a19;
  font-family: "SfHambakneun";
}

.con09_card_txt {
  margin-top: 1.4vw;
  margin-left: calc(var(--px) * 2);
  font-size: calc(var(--px) * 20);
  line-height: 1.3vw;
  color: #1d1a19;
}

.con09_media {
  width: calc(var(--px) * 838);
  aspect-ratio: 838 / 581;
  border: 1px solid #000000;
  overflow: hidden;
  background-color: #000000;
}

.con09_video {
  width: 100%;
  height: auto;
  flex-shrink: 0;
}

.con09_circle {
  width: calc(var(--px) * 448);
  aspect-ratio: 448 / 445;
}

.con09_tags {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  left: calc(var(--px) * 1429);
}

.con09_tags_01 {
  top: calc(var(--px) * 37);
}

.con09_tags_02 {
  top: calc(var(--px) * 43);
}

.con09_tags_03 {
  top: calc(var(--px) * 45);
}

.con09_tags_04 {
  top: calc(var(--px) * 40);
}

.con09_tag {
  width: calc(var(--px) * 274);
  aspect-ratio: 274 / 55;
  background-color: #ffffff;
  border-radius: 50vw;
  box-shadow: 0 0 0 1px #000000, 0 0 0 5px #fefefe, 0 0 0 8px #000000;
}

.con09_tag_01 {
  margin-left: calc(var(--px) * 42);
}

.con09_tag_02 {
  margin-top: calc(var(--px) * 32);
}

.con09_tag_03 {
  margin-top: calc(var(--px) * 31);
  margin-left: calc(var(--px) * 42);
}

/* ===== con10 ===== */
.con10 {
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: calc(var(--px) * 156);
  padding-bottom: calc(var(--px) * 112);
  background-color: #000000;
}

.con10_food {
  width: calc(var(--px) * 1238);
  aspect-ratio: 1238 / 943;
  left: calc(var(--px) * -118);
  top: calc(var(--px) * 123);
}

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

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

.con10_title_top {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 45);
  color: #ffffff;
}

.con10_title_main {
  width: calc(var(--px) * 328);
  aspect-ratio: 328 / 159;
  margin-top: calc(var(--px) * 12);
}

.con10_desc {
  margin-top: calc(var(--px) * 37);
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 28);
  color: #ffffff;
}

.con10_nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: calc(var(--px) * 28);
  column-gap: calc(var(--px) * 22);
}

.con10_prev {
  width: calc(var(--px) * 103);
  aspect-ratio: 103 / 92;
}

.con10_next {
  width: calc(var(--px) * 95);
  aspect-ratio: 95 / 98;
}

.con10_arr_txt {
  font-family: "Miwon";
  font-size: calc(var(--px) * 70);
  letter-spacing: 0;
  line-height: 3.7vw;
  color: #ffffff;
}

.con10_arr_txt_prev {
  padding-top: calc(var(--px) * 4);
  transform: scaleX(-1);
}

.con10_arr_txt_next {
  padding-top: calc(var(--px) * 8);
}

/* Swiper의 display:block과 좌우 auto margin을 덮어써 x735 시작점을 유지한다. */
.con10_slider {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1170);
  margin-left: 0;
  margin-right: 0;
  flex-shrink: 0;
}

div.con10_slide {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 536);
  height: calc(var(--px) * 645);
  box-sizing: border-box;
  border: 1px solid #000000;
  background-color: #ffffff;
}

.con10_top {
  width: 100%;
  aspect-ratio: 534 / 333;
  border-bottom: 1px solid #000000;
}

.con10_top_01 {
  background-color: #22519f;
}

.con10_glow {
  width: 100%;
  aspect-ratio: 534 / 501;
  top: 0;
}

.con10_cert {
  width: calc(var(--px) * 258);
  aspect-ratio: 258 / 365;
  left: calc(var(--px) * 139);
  top: calc(var(--px) * 26);
}

.con10_mark {
  width: calc(var(--px) * 149);
  aspect-ratio: 149 / 149;
  left: calc(var(--px) * 365);
  top: calc(var(--px) * 48);
}

.con10_body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 39);
  padding-left: calc(var(--px) * 58);
}

.con10_num {
  width: calc(var(--px) * 61);
  aspect-ratio: 61 / 55;
  margin-left: calc(var(--px) * 4);
}

.con10_num_txt {
  padding-top: calc(var(--px) * 2);
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 29);
  letter-spacing: 0;
  line-height: 1.5vw;
  color: #ffffff;
}

.con10_name_01 {
  width: calc(var(--px) * 286);
  aspect-ratio: 286 / 32;
  margin-top: calc(var(--px) * 15);
}

.con10_name_02 {
  width: calc(var(--px) * 204);
  aspect-ratio: 204 / 33;
  margin-top: calc(var(--px) * 14);
  margin-left: 1px;
}

.con10_name_03 {
  width: calc(var(--px) * 201);
  aspect-ratio: 201 / 32;
  margin-top: calc(var(--px) * 15);
  margin-left: 1px;
}

.con10_card_desc {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.1vw;
  line-height: 1.4vw;
  color: #1d1a19;
}

/* ===== con11 ===== */
.con11 {
  padding-bottom: calc(var(--px) * 3);
  background-image: url('/images/con11_bg.png');
  background-size: 100% 100%;
}

.con11_marquee {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(var(--px) * 71);
  box-sizing: border-box;
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  background-color: #ffffff;
}

.con11_marquee_track {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 5880);
  flex-shrink: 0;
  margin-top: calc(var(--px) * 14);
  transform: translateX(calc(var(--px) * -59));
  animation: none;
}

.con11_marquee_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 588);
  aspect-ratio: 588 / 43;
  flex-shrink: 0;
}

.con11_eyebrow {
  margin-top: calc(var(--px) * 114);
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 50);
  color: #000000;
}

.con11_title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 407);
  margin-top: calc(var(--px) * 9);
}

.con11_title_image {
  width: calc(var(--px) * 406);
}

.con11_desc {
  margin-top: calc(var(--px) * 30);
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 29);
  color: #000000;
}

.con11_desc_bold {
  font-weight: 800;
}

.con11_rolling {
  background: url('/images/con11_11.png') left top / calc(var(--px) * 564) calc(var(--px) * 101) no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: calc(var(--px) * 565);
  height: calc(var(--px) * 242);
  margin-top: calc(var(--px) * 28);
  overflow: hidden;
}

.con11_rolling_track {
  align-items: flex-start;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.con11_rolling_slide {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: calc(var(--px) * 564);
  height: calc(var(--px) * 77);
  padding-top: calc(var(--px) * 31);
  box-sizing: border-box;
  opacity: 1;
}

.con11_rolling_label {
  display: grid;
  justify-items: center;
  align-items: start;
  transform: translateY(calc(var(--px) * 22));
  opacity: 1;
  transition: transform var(--transition-motion), opacity var(--transition-motion);
}

.con11_rolling_slide.swiper-slide-prev .con11_rolling_label {
  opacity: 0;
}

.con11_rolling_slide.swiper-slide-active .con11_rolling_label {
  transform: translateY(0);
}

.con11_rolling_label img {
  grid-area: 1 / 1;
  transition: opacity var(--transition-motion);
}

.con11_active_image {
  width: calc(var(--px) * var(--con11-active-width));
  opacity: 0;
}

.con11_next_image {
  width: calc(var(--px) * var(--con11-next-width));
  opacity: 0.3019607843;
}

.con11_rolling_slide.swiper-slide-active .con11_active_image { opacity: 1; }
.con11_rolling_slide.swiper-slide-active .con11_next_image { opacity: 0; }
.con11_rolling_slide_1 { --con11-active-width: 266; --con11-next-width: 264; }
.con11_rolling_slide_2 { --con11-active-width: 332; --con11-next-width: 330; }
.con11_rolling_slide_3 { --con11-active-width: 419; --con11-next-width: 417; }

.con11_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  width: calc(var(--px) * 1561);
  height: calc(var(--px) * 285);
  margin-top: calc(var(--px) * 64);
  box-sizing: border-box;
  border: 1px solid #000000;
}

.con11_card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 33.3547%;
  padding-top: calc(var(--px) * 120);
  box-sizing: border-box;
  flex-shrink: 0;
  background-color: #ffffff;
}

.con11_card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('/images/con11_12.png');
  background-position: calc(var(--px) * -1) calc(var(--px) * -2);
  background-size: calc(var(--px) * 524) calc(var(--px) * 289);
  opacity: 0;
  transition: opacity var(--transition-ui);
}

.con11_card_on::before {
  opacity: 1;
}

.con11_card_image {
  position: relative;
  filter: brightness(0) invert(0);
  transition: filter var(--transition-ui);
}

.con11_card_on .con11_card_image {
  filter: brightness(0) invert(1);
}

.con11_card_1 .con11_card_image {
  filter: invert(1);
}

.con11_card_1.con11_card_on .con11_card_image {
  filter: invert(0);
}

.con11_card_2 {
  width: 33.2906%;
  border-left: 1px solid #000000;
}

.con11_card_3 {
  border-left: 1px solid #000000;
}

.con11_card_1 img {
  width: calc(var(--px) * 227);
}

.con11_card_2 img {
  width: calc(var(--px) * 290);
}

.con11_card_3 img {
  width: calc(var(--px) * 295);
}

.con11_food_1 {
  width: calc(var(--px) * 996);
  aspect-ratio: 996 / 605;
  left: calc(var(--px) * -401);
  top: calc(var(--px) * 257);
}

.con11_food_2 {
  width: calc(var(--px) * 859);
  aspect-ratio: 859 / 553;
  left: calc(var(--px) * 1336);
  top: calc(var(--px) * 191);
}

/* ===== con12 ===== */
.con12 {
  align-items: flex-start;
  overflow: hidden;
  background: #000;
  padding-bottom: calc(var(--px) * 154);
}

.con12_strip {
  width: 100%;
  aspect-ratio: 1905 / 105;
}

.con12_photos {
  left: 0;
  top: 0;
  width: 100%;
  height: calc(var(--px) * 1161);
}

.con12_photo {
  overflow: hidden;
}

.con12_photo_1 {
  left: calc(var(--px) * -10);
  top: calc(var(--px) * 105);
  width: calc(var(--px) * 483);
  aspect-ratio: 483 / 354;
}

.con12_photo_2 {
  left: calc(var(--px) * 469);
  top: calc(var(--px) * 105);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 354;
}

.con12_photo_3 {
  left: calc(var(--px) * 949);
  top: calc(var(--px) * 105);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 354;
}

.con12_photo_4 {
  left: calc(var(--px) * 1429);
  top: calc(var(--px) * 105);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 354;
}

.con12_photo_5 {
  left: calc(var(--px) * -10);
  top: calc(var(--px) * 457);
  width: calc(var(--px) * 483);
  aspect-ratio: 483 / 353;
}

.con12_photo_6 {
  left: calc(var(--px) * 469);
  top: calc(var(--px) * 457);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 353;
}

.con12_photo_7 {
  left: calc(var(--px) * 949);
  top: calc(var(--px) * 457);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 353;
}

.con12_photo_8 {
  left: calc(var(--px) * 1429);
  top: calc(var(--px) * 457);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 353;
}

.con12_photo_9 {
  left: calc(var(--px) * -10);
  top: calc(var(--px) * 807);
  width: calc(var(--px) * 483);
  aspect-ratio: 483 / 354;
}

.con12_photo_10 {
  left: calc(var(--px) * 469);
  top: calc(var(--px) * 807);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 354;
}

.con12_photo_11 {
  left: calc(var(--px) * 949);
  top: calc(var(--px) * 807);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 354;
}

.con12_photo_12 {
  left: calc(var(--px) * 1429);
  top: calc(var(--px) * 807);
  width: calc(var(--px) * 484);
  aspect-ratio: 484 / 354;
}

/* 모바일 전용 사진 갤러리(con12-s02) — PC 는 .con12_photos 좌표 배치를 쓴다 */
.con12_gallery {
  display: none;
}

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

.con12_eyebrow {
  margin-top: calc(var(--px) * -2);
  margin-left: 1px;
  font-family: 'SfHambakneun';
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 46);
  color: #fff;
  text-shadow: 0 calc(var(--px) * 4) #000;
  -webkit-text-stroke: 1px #000;
  paint-order: stroke fill;
}

.con12_title {
  width: calc(var(--px) * 466);
  aspect-ratio: 466 / 76;
  margin-top: calc(var(--px) * 11);
}

.con12_desc {
  font-size: calc(var(--px) * 21);
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 28);
  color: #fff;
  margin-top: calc(var(--px) * 29);
  white-space: nowrap;
}

.con12_reviews {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 1397);
  margin-top: calc(var(--px) * 59);
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
}

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

.con12_review {
  width: calc(var(--px) * 383);
  aspect-ratio: 383 / 520;
  flex-shrink: 0;
  justify-content: flex-start;
}

.con12_review_17,.con12_review_19 {
  width: calc(var(--px) * 384);
  aspect-ratio: 384 / 520;
}

.con12_review_18 {
  width: calc(var(--px) * 382);
  aspect-ratio: 382 / 520;
}

.con12_review img {
  width: calc(var(--px) * 383);
  flex-shrink: 0;
}

.con12_phone {
  left: calc(var(--px) * 1337);
  top: calc(var(--px) * 229);
  width: calc(var(--px) * 662);
  aspect-ratio: 662 / 1126;
  /* Swiper wrapper의 z-index: 1 위에 놓는 전경입니다. */
  z-index: 2;
}

.con12_naver {
  left: calc(var(--px) * 1374);
  top: calc(var(--px) * 232);
  width: calc(var(--px) * 101);
  aspect-ratio: 101 / 102;
  /* Swiper wrapper의 z-index: 1 위에 놓는 전경입니다. */
  z-index: 2;
}

.con12_instagram {
  left: calc(var(--px) * 1299);
  top: calc(var(--px) * 402);
  width: calc(var(--px) * 101);
  aspect-ratio: 101 / 101;
  /* Swiper wrapper의 z-index: 1 위에 놓는 전경입니다. */
  z-index: 2;
}

.con12_youtube {
  left: calc(var(--px) * 1755);
  top: calc(var(--px) * 252);
  width: calc(var(--px) * 108);
  aspect-ratio: 108 / 84;
  /* Swiper wrapper의 z-index: 1 위에 놓는 전경입니다. */
  z-index: 2;
}

.con12_badge {
  left: calc(var(--px) * 1282);
  top: calc(var(--px) * 821);
  width: calc(var(--px) * 295);
  height: calc(var(--px) * 295);
  flex-direction: column;
  justify-content: flex-start;
  /* Swiper wrapper의 z-index: 1 위에 놓는 전경입니다. */
  z-index: 2;
}

.con12_badge_bg {
  width: calc(var(--px) * 295);
  aspect-ratio: 295 / 295;
}

.con12_badge_label {
  margin-top: calc(var(--px) * 92);
  margin-left: calc(var(--px) * 8);
  font-size: calc(var(--px) * 26);
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 34);
  color: #fff;
}

.con12_badge_value {
  width: calc(var(--px) * 233);
  aspect-ratio: 233 / 66;
  margin-top: calc(var(--px) * 9);
  margin-left: calc(var(--px) * 4);
}

.con12_tail {
  left: 0;
  top: calc(var(--px) * 1152);
  width: 100%;
  aspect-ratio: 1905 / 66;
  background: #000000;
  overflow: hidden;
  /* Swiper wrapper의 z-index: 1 위에 놓는 전경입니다. */
  z-index: 2;
}

.con12_paper {
  left: calc(var(--px) * 802);
  top: calc(var(--px) * -73);
  width: calc(var(--px) * 1110);
  aspect-ratio: 1110 / 1334;
}

/* ===== con13 ===== */
.con13 {
  background: #000000;
  box-sizing: border-box;
  padding-top: calc(var(--px) * 83);
  padding-bottom: calc(var(--px) * 110);
}

.con13_chef {
  left: calc(var(--px) * -229);
  top: calc(var(--px) * 77);
  width: calc(var(--px) * 1264);
  aspect-ratio: 1264 / 842;
}

.con13_food {
  left: calc(var(--px) * -44);
  top: calc(var(--px) * 374);
  width: calc(var(--px) * 950);
  aspect-ratio: 950 / 558;
}

.con13_paper {
  left: calc(var(--px) * 802);
  top: calc(var(--px) * -139);
  width: calc(var(--px) * 1110);
  aspect-ratio: 1110 / 1334;
}

.con13_logo {
  left: calc(var(--px) * 270);
  top: calc(var(--px) * 161);
  width: calc(var(--px) * 321);
  aspect-ratio: 321 / 177;
}

.con13_content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: calc(var(--px) * 800);
  margin-left: calc(var(--px) * 933);
}

.con13_eyebrow {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 54);
  text-transform: uppercase;
  margin-right: 1.9%;
  color: #000000;
}

.con13_title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  gap: calc(var(--px) * 17);
  margin-top: calc(var(--px) * 12);
  margin-right: calc(var(--px) * 15);
}

.con13_title_words {
  width: calc(var(--px) * 443);
  aspect-ratio: 443 / 70;
  margin-top: calc(var(--px) * 7);
}

.con13_title_brand {
  width: calc(var(--px) * 300);
  aspect-ratio: 300 / 82;
}

.con13_desc {
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 29);
  color: #000000;
  margin-top: calc(var(--px) * 28);
  margin-right: 2.3%;
  white-space: nowrap;
}

.con13_media {
  width: 100%;
  aspect-ratio: 800 / 477;
  margin-top: calc(var(--px) * 40);
  overflow: hidden;
}

/* ===== con14 ===== */
.con14 {
  background: url('/images/con14_bg.png') top center / 100% calc(100% + 1px) no-repeat;
  box-sizing: border-box;
  padding-bottom: calc(var(--px) * 72);
  justify-content: flex-start;
}

.con14_band {
  width: 100%;
  height: calc(var(--px) * 75);
}

.con14_band_img {
  width: calc(var(--px) * 1945);
  aspect-ratio: 1945 / 74;
  left: calc(var(--px) * -17);
  top: 1px;
}

.con14_badge {
  width: calc(var(--px) * 208);
  height: calc(var(--px) * 70);
  margin-top: calc(var(--px) * 2);
  margin-right: 1px;
  border: 1px solid #fff;
  outline: 1px solid #000;
  background: var(--color-point);
}

.con14_badge_cell {
  width: calc(100% / 3);
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #fff;
}

.con14_badge_cell:last-child {
  border: 0;
}

.con14_letter1 {
  width: calc(var(--px) * 40);
  aspect-ratio: 40 / 50;
  left: calc(var(--px) * 15);
  top: calc(var(--px) * 11);
}

.con14_letter2 {
  width: calc(var(--px) * 41);
  aspect-ratio: 41 / 48;
  left: calc(var(--px) * 83);
  top: calc(var(--px) * 13);
}

.con14_letter3 {
  width: calc(var(--px) * 47);
  aspect-ratio: 47 / 51;
  left: calc(var(--px) * 149);
  top: calc(var(--px) * 11);
}

.con14_eyebrow {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 54);
  color: #000;
  margin-top: calc(var(--px) * 100);
  margin-right: 2.2%;
}

.con14_title {
  margin-top: calc(var(--px) * 9);
  margin-right: calc(var(--px) * 42);
}

.con14_title_img {
  width: calc(var(--px) * 717);
  aspect-ratio: 717 / 70;
}

.con14_desc {
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 29);
  color: #000;
  margin-top: 1.8vw;
  white-space: nowrap;
}

.con14_gallery {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-top: calc(var(--px) * 47);
}

.con14_swiper {
  width: 100%;
  overflow: visible;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.con14_track {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.con14_slide {
  opacity: 1;
  width: calc(var(--px) * 800);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
}

.con14_media {
  width: 100%;
  height: calc(var(--px) * 476);
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: calc(var(--px) * 20);
  background: #fff;
}

.con14_owner {
  transition: background-color var(--transition-motion), box-shadow var(--transition-motion);
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 28);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 34);
  color: #fff;
  background: #000;
  border-radius: calc(var(--px) * 40);
  width: calc(var(--px) * 212);
  height: calc(var(--px) * 56);
  margin-top: calc(var(--px) * -32);
  box-sizing: border-box;
}

.swiper-slide-active .con14_owner {
  background: var(--color-point);
  border: 1px solid #000;
  box-shadow: 0 0 0 5px #fefefe, 0 0 0 8px #000;
}

/* 화살표 랫퍼 — PC 에선 자식이 둘 다 absol 이라 0×0 이라 열 흐름에 영향이 없다.
   모바일에서만 실제 한 줄로 쓰인다 (css/mobile_style.css) */
.con14_nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

/* 공통 .btn_arr의 z-index: 2로 Swiper wrapper의 z-index: 1 위에 표시합니다. */
.con14_prev,
.con14_next {
  width: calc(var(--px) * 103);
  height: calc(var(--px) * 92);
}

.con14_prev {
  left: calc(var(--px) * 469);
  top: calc(var(--px) * 190);
}

.con14_next {
  right: calc(var(--px) * 476);
  top: calc(var(--px) * 189);
}

.con14_arrow_bg {
  width: calc(var(--px) * 103);
  aspect-ratio: 103 / 92;
}

.con14_arrow {
  font-family: "Miwon";
  font-size: calc(var(--px) * 70);
  font-weight: 400;
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 70);
  color: #fff;
  padding-bottom: 0.2vw;
}

.con14_prev .con14_arrow {
  transform: scaleX(-1);
}

/* ===== con15 ===== */
.con15 {
  justify-content: flex-start;
  padding-top: calc(var(--px) * 134);
  background: url('/images/con15_bg.png') top center / 100% auto no-repeat;
}

.con15_img {
  flex-shrink: 0;
}

.con15_img > img {
  height: auto;
  display: block;
}

.con15_paper {
  left: calc(var(--px) * -7);
  top: calc(var(--px) * -1171);
  width: calc(var(--px) * 1930);
}

.con15_paper > .con15_img {
  width: 100%;
  aspect-ratio: 1930 / 1280;
}

.con15_eyebrow {
  font-family: "SfHambakneun";
  font-size: calc(var(--px) * 45);
  font-weight: 400;
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 54);
  color: #fff;
  white-space: pre;
  margin-right: 0.7%;
}

.con15_title {
  height: calc(var(--px) * 100);
  align-self: stretch;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.con15_desc {
  font-size: calc(var(--px) * 22);
  font-weight: 400;
  letter-spacing: -0.1vw;
  line-height: calc(var(--px) * 29);
  color: #fff;
  white-space: nowrap;
  text-align: center;
  margin-top: 0.6vw;
  margin-right: 0.5%;
}

.con15_scene {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 59 - 0.6vw);
  margin-bottom: calc(var(--px) * -13);
}

/* Swiper와 wrapper의 z-index: 1 위에 아치·매장·말풍선을 표시합니다. */
.con15_arch {
  width: calc(var(--px) * 722);
  aspect-ratio: 722 / 598;
  margin-right: 1px;
  z-index: 2;
}

.con15_shop {
  width: calc(var(--px) * 789);
  aspect-ratio: 789 / 393;
  top: calc(var(--px) * 197);
  z-index: 2;
}

.con15_band {
  width: calc(var(--px) * 2147);
  aspect-ratio: 2147 / 74;
  left: calc(var(--px) * -9);
  top: calc(var(--px) * 508);
}

/* 뒤에 로드되는 Swiper의 relative와 auto margin을 원본 겹침 배치로 복원합니다. */
.con15_swiper {
  position: absolute;
  margin: 0;
  width: calc(var(--px) * 744);
  top: calc(var(--px) * -47);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
}

.con15_left {
  left: calc(var(--px) * -65);
}

.con15_right {
  left: calc(var(--px) * 1227);
  width: calc(var(--px) * 745);
}

.con15_track {
  transition-timing-function: linear !important;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

.con15_slide {
  opacity: 1;
  width: calc(var(--px) * 363);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.con15_slide > .con15_img {
  width: 100%;
  aspect-ratio: 363 / 473;
}

.con15_bubble {
  width: calc(var(--px) * 348);
  z-index: 2;
}

.con15_bubble1 {
  left: calc(var(--px) * 642);
  top: calc(var(--px) * 84);
  height: calc(var(--px) * 77);
}

.con15_bubble2 {
  left: calc(var(--px) * 897);
  top: 0;
  height: calc(var(--px) * 75);
}

.con15_bubble_bg {
  width: calc(var(--px) * 348);
  top: 0;
  left: 0;
}

.con15_bubble1 .con15_bubble_bg {
  aspect-ratio: 348 / 77;
}

.con15_bubble2 .con15_bubble_bg {
  aspect-ratio: 348 / 75;
}

.con15_bubble1 .con15_bubble_text {
  width: calc(var(--px) * 194);
  aspect-ratio: 194 / 30;
  top: calc(var(--px) * 25);
}

.con15_bubble2 .con15_bubble_text {
  width: calc(var(--px) * 226);
  aspect-ratio: 226 / 30;
  top: calc(var(--px) * 24);
}

.con15_t7 {
  width: calc(var(--px) * 337);
  aspect-ratio: 337 / 86;
  left: calc(var(--px) * 634);
  top: 0;
}

.con15_t8 {
  width: calc(var(--px) * 109);
  aspect-ratio: 109 / 97;
  left: calc(var(--px) * 968);
  top: 0;
}

.con15_t9 {
  width: calc(var(--px) * 109);
  aspect-ratio: 109 / 97;
  left: calc(var(--px) * 1025);
  top: calc(var(--px) * 3);
}

.con15_t11 {
  width: calc(var(--px) * 144);
  aspect-ratio: 144 / 89;
  left: calc(var(--px) * 979);
  top: calc(var(--px) * 4);
}

.con15_t10 {
  width: calc(var(--px) * 141);
  aspect-ratio: 141 / 84;
  left: calc(var(--px) * 1119);
  top: 0;
}

/* ===== con16 ===== */
.con16 {
  justify-content: flex-start;
  background: #d71718 url('/images/con16_bg.png') calc(var(--px) * -531) calc(var(--px) * -67) / calc(var(--px) * 3056) auto no-repeat;
  padding-bottom: calc(var(--px) * 121);
  color: #000;
}
.con16_img { flex-shrink: 0; }
.con16_img > img { height: auto; display: block; }
.con16_marquee {
  width: 100%;
  height: calc(var(--px) * 64);
  background: #fff;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.con16_track {
  width: calc(var(--px) * 2352);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: calc(var(--px) * -58);
}
.con16_unit {
  width: calc(var(--px) * 588);
  flex-shrink: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.con16_clone {
  left: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.con16_mtext {
  width: calc(var(--px) * 280);
  aspect-ratio: 280 / 21;
  margin-top: calc(var(--px) * 22);
}
.con16_seal {
  width: calc(var(--px) * 65);
  aspect-ratio: 65 / 43;
  margin-left: calc(var(--px) * 12);
  margin-top: calc(var(--px) * 11);
}
.con16_logo {
  width: calc(var(--px) * 133);
  aspect-ratio: 133 / 32;
  margin-left: calc(var(--px) * 6);
  margin-top: calc(var(--px) * 17);
}
.con16_band { width: 100%; }
.con16_stripe {
  width: calc(var(--px) * 1944);
  aspect-ratio: 1944 / 74;
  left: calc(var(--px) * -16);
  top: 0;
}
.con16_label { width: calc(var(--px) * 213); aspect-ratio: 213 / 74; }
.con16_eyebrow {
  font-family: 'SfHambakneun';
  font-size: calc(var(--px) * 45);
  letter-spacing: -.2vw;
  line-height: calc(var(--px) * 45);
  margin-top: 5.1vw;
  margin-right: .2%;
  white-space: nowrap;
}
.con16_title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--px) * 117 - 5.1vw);
  margin-right: calc(var(--px) * 57);
}
.con16_brand {
  width: calc(var(--px) * 300);
  aspect-ratio: 300 / 82;
  margin-left: calc(var(--px) * 24);
}
.con16_menu {
  width: calc(var(--px) * 245);
  aspect-ratio: 245 / 69;
  margin-left: calc(var(--px) * 10);
}
.con16_mark { width: calc(var(--px) * 47); aspect-ratio: 47 / 45; }
.con16_mark:last-child { margin-left: calc(var(--px) * 27); }
.con16_tabs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: calc(var(--px) * 43);
  margin-right: calc(var(--px) * 14);
}
.con16_tab {
  transition: color var(--transition-ui), background-color var(--transition-ui), box-shadow var(--transition-ui);
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 220);
  height: calc(var(--px) * 71);
  border-radius: calc(var(--px) * 36);
  background: #000;
  color: #fff;
  font-family: 'SfHambakneun';
  font-size: calc(var(--px) * 26);
  font-weight: 400;
  letter-spacing: -.1vw;
  line-height: calc(var(--px) * 28);
  margin-left: calc(var(--px) * 10);
}
.con16_tab:first-child { margin-left: 0; margin-right: calc(var(--px) * 10); }
.con16_tab:nth-child(3) { margin-left: calc(var(--px) * 11); }
.con16_tab.is-active {
  color: #000;
  background: #fff;
  box-shadow: 0 0 0 1px #000, 0 0 0 5px #fff, 0 0 0 8px #000;
}
.con16_panel {
  width: 100%;
  min-height: calc(var(--px) * 956);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con16_panel[hidden] { display: none; }
/* 메뉴 슬라이드 — PC 2행 그리드, 모바일 1행 (js/slide.js)
   화살표는 absol 이고 top/bottom 을 안 준다 → 정적위치가 이 flex 의
   align-items: center 를 따라 세로 중앙에 오게 둔다 (좌표로 가운데 흉내기 금지) */
.con16_slider {
  width: calc(var(--px) * 1445);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: calc(var(--px) * 112);
  margin-right: calc(var(--px) * 6);
}
/* 높이 = 카드 411 × 2행 + 행간격 13. Swiper Grid 가 이 높이를 나눠 카드 높이를 정한다 */
.con16_list {
  width: 100%;
  height: calc(var(--px) * 835);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
/* 부모(.con16_list)가 flex 라 wrapper 가 flex item 이 된다 — 기본 shrink:1 이면
   Swiper 가 계산해 넣은 폭(1459)이 컨테이너 폭(1445)으로 줌어들어
   한 줄에 3개가 안 들어가고 그리드가 2열로 무너진다. */
.con16_slides {
  flex-shrink: 0;
}
/* 카드 폭·높이는 Swiper 가 인라인으로 준다 (1445 − 13×2) / 3 = 473 */
.con16_card {
  box-sizing: border-box;
  border: 1px solid #222;
  border-radius: calc(var(--px) * 20);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con16_photo {
  align-self: stretch;
  height: calc(var(--px) * 316);
  padding-bottom: calc(var(--px) * 7);
  flex-shrink: 0;
  border-bottom: 1px solid #222;
  border-radius: calc(var(--px) * 19);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: height var(--transition-motion), padding-bottom var(--transition-motion);
}
/* 게시판(g5_write_*)에서 오는 이미지라 원본 비율이 제각각이다.
   .con16_photo 박스를 꽉 채우고 넘치는 부분은 잘라내 어떤 이미지가 들어와도 카드가 안 깨지게 한다 */
.con16_food {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.con16_food > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.con16_caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.con16_name {
  transition: margin-top var(--transition-motion);
  font-family: 'SfHambakneun';
  font-weight: 400;
  font-size: calc(var(--px) * 28);
  letter-spacing: -.1vw;
  line-height: calc(var(--px) * 28);
  margin-top: 1.4vw;
  white-space: nowrap;
}
.con16_description {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-ui), visibility var(--transition-ui);
  font-weight: 400;
  font-size: calc(var(--px) * 18);
  line-height: calc(var(--px) * 23);
  letter-spacing: -.1vw;
  white-space: nowrap;
  text-align: center;
  margin-top: .8vw;
}
.con16_card.is-open .con16_photo { height: calc(var(--px) * 268); padding-bottom: 0; }
.con16_card.is-open .con16_name { margin-top: 1.2vw; }
.con16_card.is-open .con16_description { opacity: 1; visibility: visible; }
/* 화살표 — con14 와 동일 규격. con16 은 배경이 빨간색이라
   붓터치 원본(빨강)을 filter 로 검게 바꿔 대비를 살린다 (새 이미지 추가 없음) */
.con16_prev,
.con16_next {
  width: calc(var(--px) * 103);
  height: calc(var(--px) * 92);
}
.con16_prev { left: calc(var(--px) * -140); }
.con16_next { right: calc(var(--px) * -140); }
.con16_arrow_bg {
  width: calc(var(--px) * 103);
  aspect-ratio: 103 / 92;
  filter: brightness(0);
}
.con16_arrow {
  font-family: "Miwon";
  font-size: calc(var(--px) * 70);
  font-weight: 400;
  letter-spacing: -0.2vw;
  line-height: calc(var(--px) * 70);
  color: #fff;
  padding-bottom: 0.2vw;
}
.con16_prev .con16_arrow { transform: scaleX(-1); }
.con16_prev.swiper-button-disabled,
.con16_next.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}
.con16_empty {
  padding: 5.2vw 0;
  color: #fff;
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: normal;
}
/* ===== con17 ===== */
.con17 {
  padding-bottom: calc(var(--px) * 91);
  justify-content: flex-start;
  background: #000;
  overflow: visible;
  overflow-x: clip;
  clip-path: inset(0 0 calc(var(--px) * -44) 0);
  z-index: 1;
}
.con17_row {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: calc(var(--px) * 85);
}
.con17_intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: calc(var(--px) * 170);
  margin-top: calc(var(--px) * 80);
  color: #fff;
}
.con17_seal {
  margin-left: 1px;
  margin-bottom: calc(var(--px) * 34);
  width: calc(var(--px) * 102);
  aspect-ratio: 102/69;
}
.con17_eyebrow {
  font-family: SfHambakneun;
  font-size: calc(var(--px) * 45);
  letter-spacing: -0.2vw;
  line-height: 1.2;
  white-space: nowrap;
}
.con17_title {
  margin-left: calc(var(--px) * 3);
  margin-top: calc(var(--px) * 7);
}
.con17_desc01,
.con17_desc02 {
  font-size: calc(var(--px) * 22);
  letter-spacing: 0vw;
  line-height: 1.3;
  white-space: nowrap;
}
.con17_desc01 {
  margin-top: 1.8vw;
}
.con17_desc02 {
  margin-top: 1.5vw;
}
.con17_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: calc(var(--px) * 5) calc(var(--px) * 7);
  width: calc(var(--px) * 867);
  flex-shrink: 0;
  margin-left: calc(var(--px) * 171);
}
.con17_card {
  width: calc(var(--px) * 430);
}
.con17_photo {
  margin-bottom: calc(var(--px) * -5);
  width: calc(var(--px) * 430);
  aspect-ratio: 430/217;
}
.con17_caption {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: calc(var(--px) * 220);
}
.con17_panel {
  left: 0;
  top: 0;
  width: calc(var(--px) * 430);
  aspect-ratio: 430/220;
}
.con17_card_title {
  margin-top: calc(var(--px) * 53);
}
.con17_card_01 .con17_card_title,
.con17_card_03 .con17_card_title {
  margin-left: 1px;
}
.con17_card_04 .con17_card_title {
  margin-left: calc(var(--px) * 2);
}
.con17_card_desc {
  font-size: calc(var(--px) * 20);
  letter-spacing: -0.1vw;
  line-height: 1.2;
  text-align: center;
  color: #000;
  margin-top: 1.0vw;
  white-space: nowrap;
}
.con17_badge {
  left: 0;
  top: 0;
  width: calc(var(--px) * 60);
  height: calc(var(--px) * 59);
}
.con17_card_01 .con17_badge,
.con17_card_03 .con17_badge {
  left: 1px;
  width: calc(var(--px) * 58);
}
.con17_card_03 .con17_badge,
.con17_card_04 .con17_badge {
  top: 1px;
  height: calc(var(--px) * 58);
}
.con17_number {
  font-family: SfHambakneun;
  font-size: calc(var(--px) * 29);
  letter-spacing: 0.1vw;
  line-height: 1;
  color: #fff;
  margin-top: 0.1vw;
}
.con17_shade {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
  opacity: 1;
  transition: opacity var(--transition-ui);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.con17_card_on .con17_shade {
  opacity: 0;
}
.con17_food {
  left: 0;
  top: calc(var(--px) * 479);
  width: calc(var(--px) * 1084);
  aspect-ratio: 1084/610;
}
.con17_marquee {
  top: calc(var(--px) * 1018);
  left: 0;
  width: 100%;
  height: calc(var(--px) * 67);
  box-sizing: border-box;
  border-bottom: 1px solid #000;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con17_marquee_train {
  left: calc(var(--px) * -58);
  top: 0;
  width: calc(var(--px) * 4704);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con17_marquee_track {
  width: calc(var(--px) * 2352);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con17_marquee_item {
  width: calc(var(--px) * 588);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}
.con17_marquee_text {
  margin-top: calc(var(--px) * 21);
  width: calc(var(--px) * 280);
  aspect-ratio: 280/21;
}
.con17_marquee_seal {
  margin-left: calc(var(--px) * 13);
  margin-top: calc(var(--px) * 9);
  width: calc(var(--px) * 65);
  aspect-ratio: 65/43;
}
.con17_marquee_logo {
  margin-left: calc(var(--px) * 6);
  margin-top: calc(var(--px) * 15);
  width: calc(var(--px) * 133);
  aspect-ratio: 133/32;
}
.con17_marquee_logo_asset {
  filter: brightness(0);
}
.con17_title_img {
  width: calc(var(--px) * 582);
  aspect-ratio: 582/69;
}
.con17_badge_img_01 {
  width: calc(var(--px) * 58);
  aspect-ratio: 58/59;
}
.con17_card_title_img_01 {
  width: calc(var(--px) * 191);
  aspect-ratio: 191/35;
}
.con17_badge_img_02 {
  width: calc(var(--px) * 60);
  aspect-ratio: 60/59;
}
.con17_card_title_img_02 {
  width: calc(var(--px) * 282);
  aspect-ratio: 282/35;
}
.con17_badge_img_03 {
  width: calc(var(--px) * 58);
  aspect-ratio: 58/58;
}
.con17_card_title_img_03 {
  width: calc(var(--px) * 273);
  aspect-ratio: 273/35;
}
.con17_badge_img_04 {
  width: calc(var(--px) * 60);
  aspect-ratio: 60/58;
}
.con17_card_title_img_04 {
  width: calc(var(--px) * 226);
  aspect-ratio: 226/35;
}

/* ===== con18 ===== */
.con18 {
  padding-top:calc(var(--px)*164);
  padding-bottom:calc(var(--px)*104);
  align-items:center;
  justify-content:flex-start;
  background:#fff
}
.con18_title {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  margin-left:calc(var(--px)*-2)
}
.con18_mark {
  width:calc(var(--px)*44);
  height:calc(var(--px)*42);
  margin-top:calc(var(--px)*19);
  background:linear-gradient(to bottom,#d71718 0 calc(var(--px)*9),transparent calc(var(--px)*9) calc(var(--px)*17),#d71718 calc(var(--px)*17) calc(var(--px)*26),transparent calc(var(--px)*26) calc(var(--px)*33),#d71718 calc(var(--px)*33) 100%)
}
.con18_brand {
  margin-left:calc(var(--px)*27)
}
.con18_heading {
  margin-left:calc(var(--px)*8);
  margin-top:calc(var(--px)*8);
  margin-right:calc(var(--px)*27)
}
.con18_desc {
  font-size:calc(var(--px)*22);
  font-weight:300;
  letter-spacing:0vw;
  line-height:1.5vw;
  margin-top:1.3vw;
  margin-bottom:-1.3vw;
  white-space:nowrap
}
.con18_stage {
  width:calc(var(--px)*1224);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center;
  margin-left:calc(var(--px)*-1);
  margin-top:calc(var(--px)*81 - 1.5vw)
}
.con18_cost {
  left:0;
  top:calc(var(--px)*20)
}
.con18_card {
  width:calc(var(--px)*552);
  height:calc(var(--px)*607);
  margin-left:calc(var(--px)*2);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center
}
.con18_card_bg {
  left:calc(var(--px)*-8);
  top:calc(var(--px)*-8)
}
.con18_content {
  width:calc(var(--px)*550);
  height:calc(var(--px)*603);
  margin-top:calc(var(--px)*2);
  border-radius:calc(var(--px)*30);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center
}
.con18_logo {
  margin-top:calc(var(--px)*46)
}
.con18_copy {
  font-size:calc(var(--px)*22);
  font-weight:300;
  letter-spacing:-0.1vw;
  line-height:1.6vw;
  color:#fff;
  text-align:center;
  white-space:nowrap;
  margin-top:1.3vw;
  margin-bottom:-1.3vw
}
.con18_copy_bold {
  font-weight:600
}
.con18_call {
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  margin-top:calc(var(--px)*99 - 3.2vw);
  margin-left:calc(var(--px)*-14)
}
.con18_number {
  margin-left:calc(var(--px)*12);
  margin-top:calc(var(--px)*10)
}
.con18_food {
  left:calc(var(--px)*53);
  top:calc(var(--px)*349)
}
.con18_side {
  top:calc(var(--px)*39);
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.con18_side_left {
  left:0;
  width:calc(var(--px)*34);
  background:linear-gradient(to right,#d71718 0 calc(var(--px)*11),transparent calc(var(--px)*11) calc(var(--px)*17),#d71718 calc(var(--px)*17) calc(var(--px)*23),transparent calc(var(--px)*23) calc(var(--px)*28),#d71718 calc(var(--px)*28) 100%)
}
.con18_side_right {
  right:0;
  width:calc(var(--px)*37);
  background:linear-gradient(to right,#d71718 0 calc(var(--px)*6),transparent calc(var(--px)*6) calc(var(--px)*11),#d71718 calc(var(--px)*11) calc(var(--px)*17),transparent calc(var(--px)*17) calc(var(--px)*23),#d71718 calc(var(--px)*23) 100%)
}
.con18_brand {
  width:calc(var(--px)*300);
  aspect-ratio:300/82
}
.con18_heading {
  width:calc(var(--px)*247);
  aspect-ratio:247/68
}
.con18_cost {
  width:calc(var(--px)*1224);
  aspect-ratio:1224/551
}
.con18_card_bg {
  width:calc(var(--px)*568);
  aspect-ratio:568/623
}
.con18_logo {
  width:calc(var(--px)*180);
  aspect-ratio:180/118
}
.con18_circle {
  width:calc(var(--px)*87);
  aspect-ratio:87/89
}
.con18_icon {
  width:calc(var(--px)*49);
  aspect-ratio:49/49
}
.con18_number {
  width:calc(var(--px)*341);
  aspect-ratio:341/63
}
.con18_food {
  width:calc(var(--px)*467);
  aspect-ratio:467/427
}

@media (prefers-reduced-motion: no-preference) {
  .con18_food_asset {
    animation:spin 10s linear infinite;
  }
}

/* ===== con19 ===== */
.con19 {
  padding-top:calc(var(--px)*96);
  padding-bottom:calc(var(--px)*98);
  justify-content:flex-start;
  background-image:url('/images/con19_bg.png');
  background-size:100% 100%
}
.con19_wave {
  left:0;
  bottom:1px
}
.con19_title {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  margin-top:calc(var(--px)*23);
  margin-left:calc(var(--px)*-2)
}
.con19_mark {
  width:calc(var(--px)*44);
  height:calc(var(--px)*42);
  margin-top:calc(var(--px)*20);
  background:linear-gradient(to bottom,#d71718 0 calc(var(--px)*9),transparent calc(var(--px)*9) calc(var(--px)*17),#d71718 calc(var(--px)*17) calc(var(--px)*26),transparent calc(var(--px)*26) calc(var(--px)*33),#d71718 calc(var(--px)*33) 100%)
}
.con19_brand {
  margin-left:calc(var(--px)*27)
}
.con19_heading {
  margin-left:calc(var(--px)*8);
  margin-top:calc(var(--px)*8);
  margin-right:calc(var(--px)*25)
}
.con19_steps {
  width:calc(var(--px)*1441);
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:stretch;
  flex-wrap:wrap;
  column-gap:calc(var(--px)*55);
  row-gap:calc(var(--px)*20);
  margin-top:calc(var(--px)*39);
  margin-left:calc(var(--px)*-4)
}
.con19_step {
  width:calc(var(--px)*444);
  box-sizing:border-box;
  border:1px solid #000;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start;
  padding-top:calc(var(--px)*42);
  padding-left:calc(var(--px)*49);
  padding-bottom:calc(var(--px)*104 - 3.7vw);
}
.con19_step_2,.con19_step_5,.con19_step_8 {
  margin-right:calc(var(--px)*-1)
}
.con19_step_7,.con19_step_8,.con19_step_9 {
  margin-top:calc(var(--px)*4)
}
.con19_step_1 {
  padding-bottom:calc(var(--px)*104 - 2.3vw)
}
.con19_step_8 {
  background:#184795;
  color:#fff
}
.con19_badge {
  width:calc(var(--px)*61);
  height:calc(var(--px)*55);
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center
}
.con19_number {
  font-family:'SfHambakneun';
  font-size:calc(var(--px)*29);
  letter-spacing:0;
  line-height:1.5vw;
  color:#fff
}
.con19_step_title {
  margin-top:calc(var(--px)*15)
}
.con19_copy {
  font-size:calc(var(--px)*20);
  font-weight:300;
  letter-spacing:0vw;
  line-height:1.4vw;
  white-space:nowrap;
  margin-top:0.9vw
}
.con19_stripe {
  right:0;
  top:calc(var(--px)*-1);
  background:linear-gradient(to right,#000 0 calc(var(--px)*8),#fff calc(var(--px)*8) 100%)
}
.con19_step_8 .con19_stripe {
  background:linear-gradient(to right,#fff 0 calc(var(--px)*8),#184795 calc(var(--px)*8) 100%)
}
.con19_arrow {
  z-index:1;
  width:calc(var(--px)*56);
  height:calc(var(--px)*50);
  left:calc(var(--px)*456);
  top:calc(var(--px)*102)
}
.con19_arrow_text {
  font-family:'Miwon';
  font-size:calc(var(--px)*38);
  line-height:2vw;
  letter-spacing:-0.1vw;
  color:#fff
}
.con19_step_2 .con19_arrow,.con19_step_5 .con19_arrow,.con19_step_8 .con19_arrow {
  left:calc(var(--px)*456)
}
.con19_step_4 .con19_arrow,.con19_step_5 .con19_arrow {
  top:calc(var(--px)*101)
}
.con19_step_7 .con19_arrow,.con19_step_8 .con19_arrow {
  top:calc(var(--px)*97)
}
.con19_step_1 .con19_title_img {
  margin-left:calc(var(--px)*0);
  margin-top:calc(var(--px)*0);
  margin-bottom:calc(var(--px)*0)
}
.con19_step_2 .con19_title_img {
  margin-left:calc(var(--px)*-1);
  margin-top:calc(var(--px)*0);
  margin-bottom:calc(var(--px)*0)
}
.con19_step_3 .con19_title_img {
  margin-left:calc(var(--px)*0);
  margin-top:calc(var(--px)*0);
  margin-bottom:calc(var(--px)*0)
}
.con19_step_4 .con19_title_img {
  margin-left:calc(var(--px)*-1);
  margin-top:calc(var(--px)*-1);
  margin-bottom:calc(var(--px)*0)
}
.con19_step_5 .con19_title_img {
  margin-left:1px;
  margin-top:calc(var(--px)*0);
  margin-bottom:calc(var(--px)*0)
}
.con19_step_6 .con19_title_img {
  margin-left:1px;
  margin-top:calc(var(--px)*2);
  margin-bottom:calc(var(--px)*-2)
}
.con19_step_7 .con19_title_img {
  margin-left:calc(var(--px)*0);
  margin-top:calc(var(--px)*0);
  margin-bottom:1px
}
.con19_step_8 .con19_title_img {
  margin-left:1px;
  margin-top:calc(var(--px)*0);
  margin-bottom:calc(var(--px)*0)
}
.con19_step_9 .con19_title_img {
  margin-left:calc(var(--px)*0);
  margin-top:calc(var(--px)*2);
  margin-bottom:calc(var(--px)*-2)
}
.con19_wave {
  width:calc(var(--px)*1905);
  aspect-ratio:1905/99
}
.con19_logo {
  width:calc(var(--px)*91);
  aspect-ratio:91/59
}
.con19_brand {
  width:calc(var(--px)*300);
  aspect-ratio:300/82
}
.con19_heading {
  width:calc(var(--px)*249);
  aspect-ratio:249/68
}
.con19_stripe {
  width:calc(var(--px)*34);
  aspect-ratio:34/250
}
.con19_badge_img {
  width:calc(var(--px)*61);
  aspect-ratio:61/55
}
.con19_title_img_01 {
  width:calc(var(--px)*208);
  aspect-ratio:208/32
}
.con19_arrow_img {
  width:calc(var(--px)*56);
  aspect-ratio:56/50
}
.con19_title_img_02 {
  width:calc(var(--px)*114);
  aspect-ratio:114/32
}
.con19_title_img_03 {
  width:calc(var(--px)*240);
  aspect-ratio:240/32
}
.con19_title_img_04 {
  width:calc(var(--px)*292);
  aspect-ratio:292/33
}
.con19_title_img_05 {
  width:calc(var(--px)*230);
  aspect-ratio:230/32
}
.con19_title_img_06 {
  width:calc(var(--px)*267);
  aspect-ratio:267/32
}
.con19_title_img_07 {
  width:calc(var(--px)*296);
  aspect-ratio:296/31
}
.con19_title_img_08 {
  width:calc(var(--px)*173);
  aspect-ratio:173/32
}
.con19_title_img_09 {
  width:calc(var(--px)*202);
  aspect-ratio:202/32
}

/* ===== con20 ===== */
.con20 {
  padding-top:calc(var(--px)*83);
  justify-content:flex-start;
  background-image:url('/images/con20_bg.png');
  background-size:100% 100%
}
.con20_title {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  margin-top:calc(var(--px)*28);
  margin-left:calc(var(--px)*-2)
}
.con20_mark {
  width:calc(var(--px)*44);
  height:calc(var(--px)*42);
  margin-top:calc(var(--px)*18);
  background:linear-gradient(to bottom,#d71718 0 calc(var(--px)*9),transparent calc(var(--px)*9) calc(var(--px)*17),#d71718 calc(var(--px)*17) calc(var(--px)*26),transparent calc(var(--px)*26) calc(var(--px)*33),#d71718 calc(var(--px)*33) 100%)
}
.con20_brand {
  margin-left:calc(var(--px)*27)
}
.con20_heading {
  margin-left:calc(var(--px)*10);
  margin-top:calc(var(--px)*8);
  margin-right:calc(var(--px)*27)
}
.con20_stage {
  width:calc(var(--px)*1440);
  box-sizing:border-box;
  border:1px solid #241a1b;
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:stretch;
  margin-top:calc(var(--px)*71);
  margin-left:calc(var(--px)*-1)
}
.con20_stores {
  flex-shrink:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:#b8b8b8 transparent;
  scrollbar-gutter:stable;
  width:calc(var(--px)*301);
  height:calc(var(--px)*631);
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  background:#fff;
  border-right:1px solid #241a1b
}
.con20_stores::-webkit-scrollbar {
  width:calc(var(--px)*6)
}
.con20_stores::-webkit-scrollbar-track {
  background:transparent
}
.con20_stores::-webkit-scrollbar-thumb {
  background:#b8b8b8;
  border-radius:50vw
}
.con20_stores::-webkit-scrollbar-button {
  display:none;
  width:0;
  height:0
}
@supports selector(::-webkit-scrollbar) {
  .con20_stores {
    scrollbar-width:auto;
    scrollbar-color:auto
  }
}
.con20_stores .store {
  flex-shrink:0;
  box-sizing:border-box;
  padding:calc(var(--px)*22) calc(var(--px)*22);
  border-bottom:1px solid #241a1b;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start
}
.con20_stores .store.is-last {
  border-bottom:0
}
.con20_store_head {
  box-sizing:border-box;
  padding:calc(var(--px)*6) calc(var(--px)*48) calc(var(--px)*6) 0;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  width:100%
}
.con20_store_name {
  font-size:calc(var(--px)*16);
  font-weight:700;
  letter-spacing:0;
  line-height:calc(var(--px)*24);
  color:#444;
  margin-top:0
}
.con20 .map_plus {
  position:absolute;
  top:calc(var(--px)*18);
  right:calc(var(--px)*18);
  width:calc(var(--px)*36);
  height:calc(var(--px)*36);
  border:0;
  border-radius:50%;
  background:#d61518;
  color:#fff;
  font-size:calc(var(--px)*27);
  font-weight:100;
  line-height:1.9vw;
  cursor:pointer;
  flex-shrink:0
}
.con20_store_address,.con20_store_tel {
  font-size:calc(var(--px)*14);
  font-weight:500;
  letter-spacing:0;
  line-height:calc(var(--px)*20);
  color:#5c5c5c
}
.con20_store_address {
  margin-top:calc(var(--px)*6)
}
.con20_store_tel {
  margin:0
}
.con20 .map_link {
  display:flex;
  justify-content:center;
  align-items:center;
  background:#00cf5d;
  color:#fff;
  border-radius:50vw;
  width:auto;
  padding:calc(var(--px)*6) calc(var(--px)*14);
  font-size:calc(var(--px)*12);
  font-weight:700;
  line-height:calc(var(--px)*16);
  letter-spacing:0vw;
  margin-top:calc(var(--px)*18);
  margin-left:0
}
.con20_map {
  width:calc(var(--px)*1137);
  height:calc(var(--px)*631);
  flex-grow:1;
  background:#e8edf1;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:center
}
.con20_map img {
  pointer-events:auto
}
.con20 .con20_search {
  z-index:31;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  width:calc(var(--px)*558);
  height:calc(var(--px)*63);
  box-sizing:border-box;
  border:1px solid #241a1b;
  border-radius:50vw;
  background:#fff;
  top:calc(var(--px)*-34);
  padding:0.6vw calc(var(--px)*26) 0.6vw calc(var(--px)*33)
}
.con20_input {
  min-width:0;
  flex-grow:1;
  width:0;
  background:transparent;
  border:0;
  outline:none;
  font-size:calc(var(--px)*15);
  font-weight:500;
  line-height:1.7vw;
  letter-spacing:0;
  color:#444
}
.con20_search_btn {
  background:transparent;
  border:0;
  width:calc(var(--px)*23);
  height:calc(var(--px)*25);
  cursor:pointer
}
.con20_search_icon {
  width:calc(var(--px)*13);
  height:calc(var(--px)*13);
  border:3px solid #d61518;
  border-radius:50%;
  position:relative
}
.con20_search_icon:after {
  content:'';
  position:absolute;
  width:calc(var(--px)*11);
  height:calc(var(--px)*3);
  background:#d61518;
  right:calc(var(--px)*-8);
  bottom:calc(var(--px)*-5);
  transform:rotate(48deg)
}
.con20_band {
  margin-top:calc(var(--px)*100)
}
.con20 .noshop {
  font-size:calc(var(--px)*16);
  line-height:1.5vw;
  padding:1.5vw;
  color:#444
}
.con20 .fixed_popup {
  position:fixed;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.55);
  z-index:999999;
  opacity:1;
  transition:opacity var(--transition-ui);
  transition:opacity var(--transition-ui), display var(--transition-ui) allow-discrete;
}
.con20 .fixed_popup.hide {
  opacity:0;
}
@starting-style {
  .con20 .fixed_popup:not(.hide) { opacity:0; }
}
.con20 .popup {
  width:calc(var(--px)*640);
  max-width:90vw;
  box-sizing:border-box;
  padding:calc(var(--px)*32);
  border-radius:calc(var(--px)*24);
  box-shadow:0 calc(var(--px)*24) calc(var(--px)*80) rgba(0,0,0,.18);
  max-height:90vh;
  overflow-y:auto;
  background:#fff;
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:calc(var(--px)*24)
}
.con20_popup_topbar {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center
}
.con20_popup_eyebrow {
  font-size:calc(var(--px)*14);
  line-height:calc(var(--px)*20);
  font-weight:700;
  color:#d61518
}
.con20 .popup_close {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
  width:calc(var(--px)*40);
  height:calc(var(--px)*40);
  background:#f4f4f2;
  color:#241a1b;
  border-radius:50%;
  border:0;
  font-size:calc(var(--px)*28);
  line-height:1;
  cursor:pointer
}
.con20 .popup_right_2nd {
  margin:0;
  font-size:calc(var(--px)*32);
  font-weight:800;
  line-height:calc(var(--px)*42);
  color:#241a1b
}
.con20_popup_details {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  padding:calc(var(--px)*24);
  gap:calc(var(--px)*18);
  background:#f7f7f5;
  border-radius:calc(var(--px)*16)
}
.con20 .popup_detail_row {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  gap:calc(var(--px)*6);
  font-size:calc(var(--px)*17);
  line-height:calc(var(--px)*26);
  color:#241a1b
}
.con20_popup_label {
  font-size:calc(var(--px)*13);
  line-height:calc(var(--px)*20);
  color:#777;
  font-weight:600
}
.con20 .popup_right_6th_left {
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  align-self:stretch;
  gap:calc(var(--px)*10);
  font-size:calc(var(--px)*17);
  line-height:calc(var(--px)*24);
  font-weight:700;
  background:#03c75a;
  color:#fff;
  padding:calc(var(--px)*16);
  border-radius:calc(var(--px)*12)
}
.con20_logo {
  width:calc(var(--px)*91);
  aspect-ratio:91/59
}
.con20_brand {
  width:calc(var(--px)*300);
  aspect-ratio:300/82
}
.con20_heading {
  width:calc(var(--px)*245);
  aspect-ratio:245/68
}
.con20_band {
  width:calc(var(--px)*1905);
  aspect-ratio:1905/47
}

@media (max-width:599px) {
  .con20_stage {
    width:90vw;
    margin-top:7.5vw;
    margin-left:0;
    flex-direction:column
  }
  .con20 .con20_search {
    position:relative;
    top:auto;
    right:auto;
    bottom:auto;
    left:auto;
    transform:none;
    order:-1;
    width:100%;
    height:13vw;
    padding:0 6vw;
    margin:0
  }
  .con20_input {
    font-size:3.7vw;
    line-height:4.6vw
  }
  .con20_search_btn {
    width:5.4vw;
    height:5.4vw
  }
  .con20_search_icon {
    width:3.3vw;
    height:3.3vw
  }
  .con20_search_icon::after {
    width:2.8vw;
    height:0.8vw;
    right:-2.1vw;
    bottom:-1.3vw
  }
  .con20_stores {
    width:100%;
    height:auto;
    max-height:118.2vw;
    overflow-y:auto
  }
  .con20_stores::-webkit-scrollbar {
    width:1.2vw
  }
  .con20_stores .store {
    padding:4.6vw 6vw
  }
  .con20_store_name {
    font-size:4.2vw;
    line-height:6vw;
    margin:0
  }
  .con20_store_head {
    padding:1.6vw 12.2vw 1.6vw 0
  }
  .con20_store_address {
    margin-top:1.5vw;
    font-size:3.3vw;
    line-height:4.6vw
  }
  .con20_store_tel {
    font-size:3.3vw;
    line-height:4.6vw
  }
  .con20 .map_plus {
    top:4.6vw;
    right:6vw;
    width:9.2vw;
    height:9.2vw;
    font-size:6vw;
    line-height:9.2vw
  }
  .con20 .map_link {
    width:auto;
    padding:2vw 3vw;
    font-size:3.3vw;
    line-height:4.6vw;
    margin-top:3vw;
    margin-left:0
  }
  .con20 .noshop {
    font-size:3.3vw;
    line-height:4.6vw;
    padding:4.6vw 6vw
  }
  .con20_map {
    width:100%;
    height:calc((90vw - 1px - 1px)*631/1137)
  }
  .con20 .popup {
    width:90vw;
    padding:6vw;
    border-radius:5vw;
    gap:5vw
  }
  .con20_popup_eyebrow {
    font-size:3.3vw;
    line-height:5vw
  }
  .con20 .popup_close {
    width:10vw;
    height:10vw;
    font-size:7vw
  }
  .con20 .popup_right_2nd {
    font-size:6.2vw;
    line-height:8vw
  }
  .con20_popup_details {
    padding:5vw;
    border-radius:3.3vw;
    gap:4vw
  }
  .con20 .popup_detail_row {
    gap:1.5vw;
    font-size:3.8vw;
    line-height:5.8vw
  }
  .con20_popup_label {
    font-size:3.3vw;
    line-height:4.8vw
  }
  .con20 .popup_right_6th_left {
    font-size:4vw;
    line-height:6vw;
    padding:4vw;
    border-radius:3vw;
    gap:2.5vw
  }
}

/* ===== con21 ===== */
.con21{
  padding-top:calc(var(--px)*76);
  padding-bottom:calc(var(--px)*9);
  justify-content:flex-start;
  background-image:url('/images/con21_bg.png');
  background-size:100% 100%
}
.con21_topline{
  left:0;
  top:0;
  background:linear-gradient(to bottom,#fff calc(100% * 4 / 21),transparent 0)
}
.con21_bottomline{
  left:0;
  bottom:calc(var(--px)*-1)
}
.con21_watermark_1{
  left:calc(var(--px)*1632);
  top:calc(var(--px)*29)
}
.con21_watermark_2{
  left:calc(var(--px)*1594);
  top:calc(var(--px)*485)
}
.con21_row{
  width:calc(var(--px)*1421);
  margin-left:calc(var(--px)*6);
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start
}
.con21_intro{
  margin-top:calc(var(--px)*130);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start
}
.con21_title_row{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start
}
.con21_brand{
  margin-left:calc(var(--px)*2)
}
.con21_together{
  margin-left:calc(var(--px)*8);
  margin-top:calc(var(--px)*4)
}
.con21_start{
  margin-top:calc(var(--px)*-2)
}
.con21_desc{
  font-size:calc(var(--px)*22);
  font-weight:400;
  letter-spacing:-0.1vw;
  line-height:1.5vw;
  color:#fff;
  white-space:nowrap;
  margin-top:1.2vw;
  margin-left:0.2vw;
  margin-bottom:-1.2vw
}
.con21_desc_bold{
  font-weight:800
}
.con21_call{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start;
  margin-top:calc(var(--px)*109 - 3vw)
}
.con21_phone_number{
  margin-left:calc(var(--px)*14);
  margin-top:calc(var(--px)*9)
}
.con21_phone_icon{
  left:calc(var(--px)*20);
  top:calc(var(--px)*20)
}
.con21_paper_area{
  width:calc(var(--px)*615);
  margin-left:calc(var(--px)*362);
  padding-top:calc(var(--px)*110);
  padding-bottom:calc(var(--px)*124);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:flex-start
}
.con21_paper{
  left:0;
  top:0
}
.con21_form{
  width:calc(var(--px)*465);
  margin-left:calc(var(--px)*84)
}
.con21_fields{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch
}
.con21_field{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  margin-bottom:calc(var(--px)*26)
}
.con21_label{
  margin-bottom:calc(var(--px)*10);
  font-family:'SfHambakneun';
  font-size:calc(var(--px)*24);
  letter-spacing:-0.1vw;
  line-height:1.5vw;
  display:flex;
  justify-content:flex-start
}
.con21_input,.con21_combo{
  width:100%;
  height:calc(var(--px)*58);
  box-sizing:border-box;
  border:1px solid #000;
  background:#fff;
  font-size:calc(var(--px)*20);
  line-height:1.4vw;
  letter-spacing:0vw;
  transition:border-color var(--transition-ui)
}
.con21_input{
  padding:0 calc(var(--px)*18)
}
.con21_input:focus,.con21_combo.is-open{
  border-color:var(--color-point)
}
.con21_form ::placeholder{
  color:#bbb;
  opacity:1
}
.con21_region{
  width:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:flex-start
}
.con21_region .con21_combo{
  width:48.3871%
}
.con21_combo{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center
}
.con21_combo.is-open{
  z-index:3
}
.con21_combo.is-open .con21_toggle{
  transform:rotate(180deg)
}
.con21_combo_input{
  width:100%;
  height:100%;
  box-sizing:border-box;
  padding:0 calc(var(--px)*36) 0 calc(var(--px)*18);
  border:0;
  font-size:calc(var(--px)*20);
  letter-spacing:0vw;
  line-height:1.4vw;
  min-width:0;
  cursor:pointer
}
.con21_combo_input:disabled,.con21_toggle:disabled{
  cursor:default
}
.con21_toggle{
  right:calc(var(--px)*16);
  width:0;
  height:0;
  border-left:calc(var(--px)*8) solid transparent;
  border-right:calc(var(--px)*8) solid transparent;
  border-top:calc(var(--px)*9) solid #d61518
}
.con21_popup{
  left:0;
  top:calc(var(--px)*56);
  width:100%;
  box-sizing:border-box;
  border:1px solid #e0e0e0;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
  background:#fff;
  z-index:2;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  align-items:stretch;
  max-height:calc(var(--px)*200);
  overflow:auto;
  overscroll-behavior:contain;
  opacity:1;
  transition:opacity var(--transition-ui);
  transition:opacity var(--transition-ui), display var(--transition-ui) allow-discrete;
}
.con21_popup[hidden]{
  display:none;
  opacity:0;
}
@starting-style {
  .con21_popup:not([hidden]) { opacity:0; }
}
.con21_option{
  flex-shrink:0;
  transition:background-color var(--transition-ui);
  padding:calc(var(--px)*8) calc(var(--px)*10);
  font-size:calc(var(--px)*18);
  line-height:1.3vw;
  text-align:left
}
.con21_option:hover{
  background:#f7f7f7
}
.con21_option[aria-selected=true],.con21_option.is-active{
  background:#e8eef9
}
.con21_policy{
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center
}
.con21_agree{
  display:flex;
  align-items:center;
  font-size:calc(var(--px)*17);
  letter-spacing:0vw;
  line-height:1.2vw;
  font-weight:500;
  white-space:nowrap;
  /* margin-left:calc(var(--px)*4) */
}
/* 네이티브 체크박스는 브라우저 기본색(파랑)이라 직접 그린다 — 퀵바 .quickAgree_checkbox 와 같은 방식.
   미체크 = 흰 바탕 + 먹색 테두리, 체크 = 브랜드 빨강 + 먹색 테두리(아래 상담신청 버튼과 같은 조합) */
.con21_checkbox{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-shrink:0;
  box-sizing:border-box;
  width:calc(var(--px)*18);
  height:calc(var(--px)*18);
  margin-right:calc(var(--px)*8);
  border:1px solid var(--color-ink);
  background-color:#fff;
  -webkit-appearance:none;
  appearance:none;
  cursor:pointer;
  transition:background-color var(--transition-ui)
}
.con21_checkbox:checked{
  background-color:var(--color-point)
}
/* 체크 표시 — border 2변을 -45도 돌린 흰 체크. 좌표 없이 부모 flex center 에 둔다.
   % 는 퀵바에서 역산한 값 그대로 — 체크박스 크기가 바뀌어도 같은 비율로 따라간다 */
.con21_checkbox::after{
  position:absolute;
  content:"";
  width:58.2107%;
  height:30.2%;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:translateY(-20.7%) rotate(-45deg);
  opacity:0;
  transition:opacity var(--transition-ui)
}
.con21_checkbox:checked::after{
  opacity:1
}
.con21_details{
  font-size:calc(var(--px)*16);
  line-height:1.2vw;
  letter-spacing:0vw;
  font-weight:800;
  text-decoration:underline;
  white-space:nowrap
}
.con21_submit{
  width:100%;
  height:calc(var(--px)*75);
  box-sizing:border-box;
  border:1px solid #000;
  background:#d61518;
  margin-top:calc(var(--px)*28 - 1.2vw)
}
.con21_submit_img{
  margin-top:calc(var(--px)*-1)
}
.con21_badges{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:flex-start
}
.con21_badge{
  width:calc(var(--px)*113);
  height:calc(var(--px)*91);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center
}
.con21_badge_bg{
  left:calc(var(--px)*-1);
  top:calc(var(--px)*-1)
}
.con21_badge_1,.con21_badge_2,.con21_badge_3{
  left:calc(var(--px)*-52)
}
.con21_badge_4,.con21_badge_5,.con21_badge_6{
  left:calc(var(--px)*569)
}
.con21_badge_1,.con21_badge_4{
  top:calc(var(--px)*227)
}
.con21_badge_2,.con21_badge_5{
  top:calc(var(--px)*312)
}
.con21_badge_3,.con21_badge_6{
  top:calc(var(--px)*397)
}
.con21_watermark_1{
  width:calc(var(--px)*364);
  aspect-ratio:364/388
}
.con21_watermark_2{
  width:calc(var(--px)*440);
  aspect-ratio:440/393
}
.con21_paper{
  width:100%;
  height:100%
}
.con21_paper_asset{
  width:100%;
  height:100%
}
.con21_topline{
  width:calc(var(--px)*1905);
  aspect-ratio:1905/21
}
.con21_bottomline{
  width:calc(var(--px)*1905);
  aspect-ratio:1905/45
}
.con21_brand{
  width:calc(var(--px)*245);
  aspect-ratio:245/67
}
.con21_together{
  width:calc(var(--px)*176);
  aspect-ratio:176/71
}
.con21_start{
  width:calc(var(--px)*382);
  aspect-ratio:382/62
}
.con21_phone_number{
  width:calc(var(--px)*343);
  aspect-ratio:343/69
}
.con21_phone_circle{
  width:calc(var(--px)*87);
  aspect-ratio:87/92
}
.con21_phone_icon{
  width:calc(var(--px)*49);
  aspect-ratio:49/49
}
.con21_submit_img{
  width:calc(var(--px)*178);
  aspect-ratio:178/38
}
.con21_badge_1 .con21_badge_bg{
  width:calc(var(--px)*115);
  aspect-ratio:115/97
}
.con21_badge_1 .con21_badge_text{
  width:calc(var(--px)*69);
  aspect-ratio:69/36;
  margin-left:calc(var(--px)*0);
  margin-top:calc(var(--px)*-1)
}
.con21_badge_2 .con21_badge_bg{
  width:calc(var(--px)*115);
  aspect-ratio:115/97
}
.con21_badge_2 .con21_badge_text{
  width:calc(var(--px)*66);
  aspect-ratio:66/36;
  margin-left:1px;
  margin-top:calc(var(--px)*-3)
}
.con21_badge_3 .con21_badge_bg{
  width:calc(var(--px)*115);
  aspect-ratio:115/97
}
.con21_badge_3 .con21_badge_text{
  width:calc(var(--px)*73);
  aspect-ratio:73/36;
  margin-left:calc(var(--px)*0);
  margin-top:calc(var(--px)*-1)
}
.con21_badge_4 .con21_badge_bg{
  width:calc(var(--px)*115);
  aspect-ratio:115/97
}
.con21_badge_4 .con21_badge_text{
  width:calc(var(--px)*67);
  aspect-ratio:67/37;
  margin-left:calc(var(--px)*-4);
  margin-top:calc(var(--px)*-2)
}
.con21_badge_5 .con21_badge_bg{
  width:calc(var(--px)*115);
  aspect-ratio:115/97
}
.con21_badge_5 .con21_badge_text{
  width:calc(var(--px)*70);
  aspect-ratio:70/37;
  margin-left:calc(var(--px)*3);
  margin-top:calc(var(--px)*-2)
}
.con21_badge_6 .con21_badge_bg{
  width:calc(var(--px)*115);
  aspect-ratio:115/97
}
.con21_badge_6 .con21_badge_text{
  width:calc(var(--px)*73);
  aspect-ratio:73/36;
  margin-left:calc(var(--px)*4);
  margin-top:calc(var(--px)*-1)
}
@media(max-width:599px){
  .con21{
    background:#231815;
    padding:15vw 0 8vw
  }
  .con21_topline{
    width:100%;
    aspect-ratio:1905/21;
    display: none;
  }
  .con21_bottomline{
    width:100%;
    display: none;
  }
  .con21_watermark{
    display:none
  }
  .con21_row{
    width:100%;
    margin:0;
    flex-direction:column;
    align-items:center
  }
  .con21_intro{
    margin:0;
    align-items:center;
    max-width:90vw
  }
  .con21_title{
    display:flex;
    flex-direction:column;
    align-items:center
  }
  .con21_title_row{
    justify-content:center
  }
  .con21_brand{
    width:42vw;
    margin-left:0
  }
  .con21_together{
    width:30.2vw;
    margin-left:1.4vw;
    margin-top:0.7vw
  }
  .con21_start{
    width:65.5vw;
    margin-top:0
  }
  .con21_desc{
    font-size:3.5vw;
    line-height:5.1vw;
    letter-spacing:-0.1vw;
    text-align:center;
    margin:4vw 0 0;
    white-space:normal
  }
  .con21_call{
    margin-top:6vw
  }
  .con21_phone_circle{
    width:13vw
  }
  .con21_phone_icon{
    width:7.3vw;
    left:3vw;
    top:3vw
  }
  .con21_phone_number{
    width:51.3vw;
    margin-left:2.1vw;
    margin-top:1.3vw
  }
  .con21_paper_area{
    width:95%;
    margin:14vw 0 0;
    padding:7vw 0;
    align-items:center;
    background:#fafafa;
    border-radius: 4vw;
  }
  .con21_paper{
    display:none
  }
  .con21_badges{
    position:relative;
    width:90vw;
    justify-content:space-between;
    margin-bottom:6vw;
    margin-top:-12vw
  }
  .con21_badge{
    position:relative;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    width:13.5vw;
    height:10.9vw;
    transform:none
  }
  .con21_badge .con21_badge_bg{
    width:13.7vw;
    left:-0.1vw;
    top:-0.1vw
  }
  .con21_badge .con21_badge_text{
    width:8.7vw;
    margin:0
  }
  .con21_form{
    width:85vw;
    margin:0
  }
  .con21_field{
    flex-direction:column;
    border-bottom:0;
    padding:0;
    margin-bottom:4.6vw
  }
  .con21_label{
    font-family:inherit;
    width:auto;
    margin:0 0 2vw;
    font-size:3.4vw;
    font-weight:600;
    line-height:4.6vw;
    letter-spacing:0vw;
    display:flex;
    align-items:center
  }
  .con21_input,.con21_combo,.con21_region .con21_combo{
    width:100%;
    height:13vw;
    padding:0 6vw;
    flex:0 0 auto;
    font-size:3.7vw;
    line-height:4.6vw;
    letter-spacing:0vw
  }
  .con21_combo,.con21_region .con21_combo{
    padding:0
  }
  .con21_combo_input{
    font-size:3.7vw;
    line-height:4.6vw;
    padding:0 11vw 0 6vw
  }
  .con21_toggle{
    right:5vw;
    border-left-width:1.6vw;
    border-right-width:1.6vw;
    border-top-width:1.8vw
  }
  .con21_region{
    width:100%;
    flex-direction:column;
    gap:3vw
  }
  .con21_popup{
    top:calc(13vw - 2px);
    max-height:50vw
  }
  .con21_option{
    font-size:3.7vw;
    line-height:4.6vw;
    padding:3vw 5vw
  }
  .con21_policy{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    margin:0;
    gap:2vw
  }
  .con21_agree{
    font-size:3.3vw;
    line-height:4.6vw;
    letter-spacing:0vw;
    white-space:nowrap;
    margin:0;
    align-items:center
  }
  /* align-items:center 로 박스끼리는 가운데지만 Pretendard 한글 잉크가 줄 상자 중심보다 약 1px 위에 뜬다.
     체크박스 테두리 중심 ↔ 글자 잉크 중심 픽셀 스캔 결과: 보정 전 −1.13px(390) → 0.25vw 후 −0.13px */
  .con21_agree_text{
    transform:translateY(0.25vw)
  }
  .con21_checkbox{
    width:5.4vw;
    height:5.4vw;
    margin-right:2vw
  }
  .con21_details{
    font-size:3.3vw;
    line-height:4.6vw
  }
  .con21_submit{
    height:15vw;
    margin-top:5vw;
    flex:0 0 auto;
    border-radius: 3vw;
  }
  .con21_submit_img{
    width:35vw;
    margin:0
  }
}

@media (max-width: 599px) {
  .con16_photo { height: calc(var(--px) * 268); padding-bottom: 0; }
  .con16_name { margin-top: 1.2vw; }
  .con16_description { opacity: 1; visibility: visible; }
}

/* con04 / con07: 테이프의 오른쪽 끝을 접었다 붙이는 두 면 */
.peel {
  --peel: 0;
  --fold: calc((1 - var(--peel)) * 100%);
  --tilt: -10deg;
  transform: rotate(calc(var(--peel) * var(--tilt)));
  transform-origin: 6% 50%;
}

.peel-face {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

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

.peel-flap {
  clip-path: inset(0 0 0 var(--fold));
  transform: scaleX(-1);
  left: calc(2 * var(--fold) - 100%);
  filter: grayscale(1) brightness(1.3) contrast(0.82);
}