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

/* 마커디자인 — 카카오맵 CustomOverlay (map.js 가 마크업 주입)
   꼬리는 CSS 삼각형(border 트릭) 대신 45도 회전 사각형을 쓴다. 삼각형은 말풍선 테두리와
   선이 이어지지 않아 이음매가 끊겨 보인다(kakao-map 스킬 §B-4). */
.map_marker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* 말풍선 텍스트 박스 */
.map_marker_text {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ffffff;
  border: 2px solid #063486;
  padding: calc(var(--px) * 9) calc(var(--px) * 19);
  border-radius: 50vw;
  font-family: "Suit";
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  color: #063486;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
}

/* 말풍선 꼬리 — 인접 두 변에만 테두리를 준 회전 사각형.
   흰 배경이 말풍선 하단선을 덮어 이음매가 사라지고 테두리선이 그대로 이어진다. */
.map_marker_tail {
  width: calc(var(--px) * 14);
  height: calc(var(--px) * 14);
  margin-top: calc(var(--px) * -9);
  background: #ffffff;
  border-right: 2px solid #063486;
  border-bottom: 2px solid #063486;
  transform: rotate(45deg);
}

/* 전역 section img { width:100% } 가 카카오맵 타일·마커까지 늘린다 → 되돌림 */
#map img {
  width: auto;
  max-width: none;
  pointer-events: auto;
}

/* 퍼블시작 */

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

.map-touch-lock {
  position: absolute;
  /* 지도 컨테이너(#map) 안에 들어가므로 inset:0 이면 항상 정확히 덮는다.
     JS 로 좌표를 계산하지 않는다 — 부모 border/padding 만큼 어긋나기 때문. */
  inset: 0;
  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 — 메인비주얼 ═══════════════════════ */
.main {
  justify-content: flex-start;
  padding-bottom: calc(var(--px) * 7);
  /* 헤더(흰 바 90px)가 fixed 라 첫 섹션이 그 아래에서 시작하도록 보정. 시안 main top = 88 */
  margin-top: calc(var(--px) * 88);
  background-color: #063486;
  /* 시안 실측: 세로선 1px · 가로주기 15px · 선색 #1a4999 (rgb 26,73,151) */
  background-image: repeating-linear-gradient(90deg, #1a4999 0, #1a4999 1px, #063486 1px, #063486 calc(var(--px) * 15));
  /* 시안 첫 선이 x=11 에서 시작 (1905 크롭 기준) */
  background-position: calc(var(--px) * 11) 0;
}

.main_video {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 95.5381%;
  aspect-ratio: 1820 / 812;
  padding-top: 8.6vw;
  background-color: #000000;
  /* 시안 실측: 좌 x42~51 · 우 x1852~1861 · 하 y802~811 = 10px #fdca3a 프레임
     (PSD 파서는 stroke:null 로 읽는다 — 디자인 이미지 우선) */
  border: calc(var(--px) * 10) solid #fdca3a;
  border-radius: 0 0 calc(var(--px) * 60) calc(var(--px) * 60);
}

.main_video_bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  /* 시안 대비 렌더 밝기 실측 반복 보정 (시안=0.22~0.42 · 프레임이 달라 렌더 실측으로 확정) */
  filter: brightness(0.25);
}

.main_eyebrow {
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 30);
  font-weight: 400;
  line-height: 1.6vw;
  color: #ffffff;
  letter-spacing: -0.08vw;
}

.main_title {
  margin-top: 0.9vw;
  font-family: "Ria";
  font-size: calc(var(--px) * 70);
  line-height: 3.7vw;
  color: #ffffff;
  letter-spacing: -0.19vw;
}

.main_title_point {
  color: #feca3a;
}

.main_sub {
  margin-top: 1.4vw;
  font-size: calc(var(--px) * 22);
  font-weight: 300;
  line-height: 1.7vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.06vw;
}

.main_sub strong {
  font-weight: 700;
}

.main_awning {
  display: flex;
  justify-content: center;
  align-items: center;
  /* PNG 양끝 79px 은 배경색이 박힌 여백이라 줄무늬를 덮는다 → 영상 카드 폭(1820)으로 클립 */
  overflow: hidden;
  top: 1px;
  width: 95.5381%;
  aspect-ratio: 1820 / 92;
}

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

.main_truck {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -20.4vw;
  width: calc(var(--px) * 656);
  aspect-ratio: 656 / 437;
}
/* ═══════════════════════ MAIN end ═══════════════════════ */

/* ═══════════════════════ CON01 — 숫자로 증명하는 경쟁력 ═══════════════════════ */
.con01 {
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 3.4vw;
  padding-bottom: 3.6vw;
  background-color: #e5eeff;
}

.con01_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-left: 2.7%;
  width: 46.8766%;
  height: calc(var(--px) * 687);
  padding-top: 6.1vw;
  background-color: #063486;
  border-radius: calc(var(--px) * 50);
}

.con01_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 50);
  line-height: 3.1vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.13vw;
}

.con01_title_point {
  color: #feca3a;
}

.con01_sub {
  margin-top: 1.3vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con01_sub strong {
  font-weight: 700;
}

.con01_best {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  margin-top: 1.6vw;
  width: 67.4132%;
  height: calc(var(--px) * 245);
  padding-top: 1.7vw;
  background-color: #ffffff;
  /* 시안 실측 프레임 10px (PSD 파서 stroke:null 오독) */
  border: calc(var(--px) * 10) solid #feca3a;
  border-radius: calc(var(--px) * 40);
}

.con01_best_label {
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 26);
  font-weight: 700;
  line-height: 1.4vw;
  color: #000000;
  letter-spacing: -0.07vw;
}

.con01_best_num {
  margin-top: 1.4vw;
  font-family: "Ria";
  font-size: calc(var(--px) * 70);
  line-height: 3.7vw;
  white-space: nowrap;
}

.con01_num_lg {
  color: #063486;
  letter-spacing: -0.18vw;
}

.con01_num_sm {
  /* _lg 의 음수 letter-spacing 이 끝 글자에도 걸려 숫자와 붙는다 — 시안 간격 7px 복원 */
  margin-left: calc(var(--px) * 7);
  font-size: calc(var(--px) * 35);
  color: #111111;
  letter-spacing: -0.09vw;
}

.con01_best_note {
  margin-top: 0.4vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1vw;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con01_slide {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  margin-left: 2%;
  margin-top: 5.4vw;
  width: 48.4514%;
  height: calc(var(--px) * 518);
}

.con01_slide_item {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: calc(var(--px) * 414);
}

.con01_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 414);
  height: calc(var(--px) * 244);
  padding-top: 2.9vw;
  background-color: #ffffff;
  border-radius: calc(var(--px) * 30);
}

.con01_card_name {
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  line-height: 1.3vw;
  color: #000000;
  letter-spacing: -0.06vw;
  white-space: nowrap;
}

.con01_card_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.6vw;
  width: calc(var(--px) * 167);
  height: calc(var(--px) * 40);
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  color: #ffffff;
  background-color: #063486;
  border-radius: 50vw;
  letter-spacing: -0.05vw;
  white-space: nowrap;
}

.con01_card_num {
  margin-top: 1.1vw;
  font-family: "Ria";
  font-size: calc(var(--px) * 35);
  line-height: 1.9vw;
  color: #111111;
  letter-spacing: -0.09vw;
  white-space: nowrap;
}
/* ═══════════════════════ CON01 end ═══════════════════════ */

/* ═══════════════════════ CON02 — 투명하게 공개하는 수익 구조 ═══════════════════════ */
.con02 {
  background-color: #fffbe4;
}

.con02_inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  padding-top: 7.1vw;
  padding-bottom: 5.2vw;
  /* 시안/원본 밝기비 실측 0.20 → 검정 80% 오버레이 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/images/con02_bg.jpg");
  background-size: 100% 100%, calc(var(--px) * 1975) calc(var(--px) * 1480);
  background-position: 0 0, calc(var(--px) * -54) calc(var(--px) * -470);
  background-repeat: no-repeat, no-repeat;
  border-radius: 0 0 calc(var(--px) * 100) calc(var(--px) * 100);
}

.con02_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 55);
  line-height: 3.4vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.14vw;
}

.con02_title_point {
  color: #feca3a;
}

.con02_row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3vw;
  margin-top: 2.9vw;
  width: 100%;
}

.con02_visual {
  flex-shrink: 0;
  width: 24.357%;
}

.con02_tag {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 149);
  height: calc(var(--px) * 46);
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  color: #111111;
  background-color: #feca3a;
  border-radius: 50vw;
  letter-spacing: -0.06vw;
  white-space: nowrap;
}

.con02_tag_sm {
  display: block;
  box-sizing: border-box;
  width: calc(var(--px) * 270);
  height: auto;
  padding: calc(var(--px) * 12) calc(var(--px) * 16);
  line-height: 1.4;
  text-align: center;
}

.con02_num {
  margin-top: 0.9vw;
  font-family: "Ria";
  font-size: calc(var(--px) * 51);
  line-height: 2.7vw;
  white-space: nowrap;
}

.con02_num_lg {
  color: #111111;
  letter-spacing: -0.13vw;
}

.con02_num_sm {
  /* _lg 의 음수 letter-spacing 이 끝 글자에도 걸려 숫자와 붙는다 — 시안 간격 4px 복원 */
  margin-left: calc(var(--px) * 4);
  font-size: calc(var(--px) * 26);
  color: #111111;
  letter-spacing: -0.07vw;
}

.con02_num_point .con02_num_lg {
  color: #feca3a;
}

.con02_num_point .con02_num_sm {
  color: #ffffff;
}

.con02_ring {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding-bottom: 0.8vw;
  border: calc(var(--px) * 21) solid #feca3a;
  border-radius: 50%;
}

.con02_ring_img {
  display: flex;
  justify-content: center;
  align-items: center;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 시안/원본 밝기비 실측 0.24~0.48 */
  filter: brightness(0.29);
}

.con02_ring_img img {
  height: 100%;
  object-fit: cover;
}

.con02_ring .con02_num {
  margin-top: 1.4vw;
}

.con02_basis {
  margin-top: calc(var(--px) * 14);
  font-size: calc(var(--px) * 18);
  line-height: 1.4;
  color: #b3b3b3;
  text-align: center;
}

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

.con02_table {
  box-sizing: border-box;
  overflow: hidden;
  width: calc(var(--px) * 451);
  height: calc(var(--px) * 430);
  background-color: #ffffff;
  border-radius: calc(var(--px) * 30);
  table-layout: fixed;
}

.con02_tb_head {
  height: calc(var(--px) * 82);
}

.con02_tb_head td {
  padding-top: calc(var(--px) * 12);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con02_tb_linerow {
  height: 1px;
}

.con02_tb_line {
  margin-left: calc(var(--px) * 44);
  width: calc(var(--px) * 356);
  height: 1px;
  background-color: #dddddd;
}

.con02_tb_row {
  height: calc(var(--px) * 50);
}

.con02_tb_row td {
  padding-top: calc(var(--px) * 16);
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  color: #000000;
  letter-spacing: -0.05vw;
}

/* 본문 마지막 행 ~ 순이익 행 사이 시안 간격 18px */
.con02_tb_row_last {
  height: calc(var(--px) * 68);
}

.con02_tb_row_last td {
  padding-bottom: calc(var(--px) * 18);
}

.con02_tb_sum {
  height: calc(var(--px) * 80);
  background-color: #feca3a;
}

.con02_tb_sum td {
  padding-bottom: calc(var(--px) * 8);
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.06vw;
}

.con02_tb_c1 {
  box-sizing: border-box;
  width: calc(var(--px) * 144);
  padding-left: calc(var(--px) * 28);
  text-align: center;
}

.con02_tb_c2 {
  box-sizing: border-box;
  width: calc(var(--px) * 116);
  text-align: center;
}

.con02_tb_c3 {
  box-sizing: border-box;
  width: calc(var(--px) * 191);
  padding-right: calc(var(--px) * 40);
  text-align: right;
}

.con02_note {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 16);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -0.04vw;
}

.con02_apple {
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0;
  top: 0;
  width: calc(var(--px) * 113);
  aspect-ratio: 113 / 119;
}

.con02_lemon {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  bottom: 0;
  width: calc(var(--px) * 112);
  aspect-ratio: 112 / 106;
}
/* ═══════════════════════ CON02 end ═══════════════════════ */

/* ═══════════════════════ CON03 — 좋은 먹거리가 모이는 곳 ═══════════════════════ */
.con03 {
  justify-content: flex-start;
  padding-top: 7.6vw;
  padding-bottom: 4.3vw;
  background-color: #fffdea;
  /* 시안 실측 세로 밴드 주기 100px (밝은 띠 #fffdea 48 / 어두운 띠 #fffbe5 52, 첫 밝은 띠 x31) */
  background-image: repeating-linear-gradient(90deg, #fffdea 0, #fffdea calc(var(--px) * 48), #fffbe5 calc(var(--px) * 48), #fffbe5 calc(var(--px) * 100));
  background-size: calc(var(--px) * 100) 100%;
  background-position: calc(var(--px) * 31) 0;
}

.con03_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 55);
  line-height: 3vw;
  color: #111111;
  letter-spacing: -0.14vw;
}

.con03_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-top: 0.6vw;
  width: 16.5879%;
  height: calc(var(--px) * 104);
  font-family: "Ria";
  font-size: calc(var(--px) * 60);
  line-height: 3.2vw;
  color: #feca3a;
  background-color: #063486;
  /* 시안 실측: 남색 알약 바깥에 노란 6px 테두리 (PSD stroke:null 오독) */
  border: calc(var(--px) * 6) solid #fbca3e;
  border-radius: 50vw;
  letter-spacing: -0.16vw;
}

.con03_sub {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con03_hl {
  font-weight: 700;
  /* 시안 실측 #FFEFB0 = #feca3a 32% over #fffdea (밑줄 모션이 background-size 를 0→100% 로 늘린다) */
  background-image: linear-gradient(rgba(254, 202, 58, 0.32), rgba(254, 202, 58, 0.32));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con03_cat {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  /* 원은 타이틀·본문 좌우 빈 자리에 놓인다 (시안 rel 245, 본문 bottom 478) */
  margin-top: -13vw;
  width: 100%;
}

.con03_cat_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: 10.3412%;
  aspect-ratio: 1 / 1;
  background-color: #000000;
  border: calc(var(--px) * 7) solid #000000;
  border-radius: 50%;
  /* 시안 실측: 검정 7px → 노란 링 2px → 검정 */
  box-shadow: inset 0 0 0 2px #fbc93b;
}

.con03_cat_item01 {
  margin-left: 8.5827%;
}

.con03_cat_item02 {
  margin-left: 1.4173%;
}

.con03_cat_item03 {
  margin-left: 38.7402%;
}

.con03_cat_item04 {
  margin-left: 1.4173%;
}

.con03_cat_txt {
  font-family: "Ria";
  font-size: calc(var(--px) * 30);
  color: #feca3a;
  letter-spacing: -0.08vw;
  white-space: nowrap;
}

.con03_bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 3.8vw;
  width: 100%;
}

/* 슬라이드를 절대배치로 뒤로 빼 원 뒤까지 들어오게 한다 (원은 .rltv 로 위에 얹힌다) */
.con03_rolls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.con03_roll {
  align-items: flex-start;
  flex-shrink: 0;
  margin-top: 3.4vw;
  height: calc(var(--px) * 453);
}

.con03_roll_l {
  width: 50%;
  /* 원 바깥테두리(안쪽 끝에서 290px)부터 원 중심까지 서서히 사라진다 */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--px) * 290), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - var(--px) * 290), transparent 100%);
}

.con03_roll_r {
  width: 50%;
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--px) * 290), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - var(--px) * 290), transparent 100%);
}

.con03_roll_track {
  flex-shrink: 0;
  align-items: flex-start;
}

.con03_roll_set {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

.con03_card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: calc(var(--px) * 27);
  width: calc(var(--px) * 363);
  height: calc(var(--px) * 453);
  border-radius: calc(var(--px) * 30);
}

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

.con03_circle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 30.4462%;
  aspect-ratio: 1 / 1;
  /* 뒤로 슬라이드가 지나가므로 불투명 — 시안 실측 rgb(255,236,178) */
  background-color: #ffecb2;
  border-radius: 50%;
}

/* 퍼지는 모션 (시안 라벨) — 원 바깥으로 연한 노란 파동이 번진다.
   원 안쪽엔 사진이 들어가므로 파동은 「가운데가 빈 링」이어야 한다:
   유사요소를 원보다 10% 크게(inset -5%) 깔면 closest-side 반지름이 원 반지름의 1.1배가 되고,
   91% 부터 색이 들어가므로 띠 안쪽 끝(1.1 × 0.91 = 1.001)이 원 테두리 바로 바깥에 선다.
   --ripple-to 1.09 → 파동이 닿는 최대 반지름 1.1 × 1.09 = 원의 1.2배 (테두리 밖 +20%).
   두 겹을 반주기(1.75s) 엇갈려 돌려 파동이 끊기지 않게 한다. */
.con03_circle::before,
.con03_circle::after {
  content: '';
  position: absolute;
  inset: -5%;
  background-image: radial-gradient(circle closest-side, rgba(254, 202, 58, 0) 91%, rgba(254, 202, 58, 0.4) 100%);
  border-radius: 50%;
  --ripple-to: 1.09;
  animation: rippleOut 3.5s ease-out infinite;
}

.con03_circle::after {
  animation-delay: -1.75s;
}

.con03_circle_in {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 91.7241%;
  aspect-ratio: 1 / 1;
  background-color: #feca3a;
  border-radius: 50%;
}

.con03_circle_img {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  /* 사진이 원 안에서 중앙이 아니다 — 시안 local 794,491 / 원 안쪽 686,538 */
  left: calc(var(--px) * 108);
  top: calc(var(--px) * -47);
  width: calc(var(--px) * 425);
  aspect-ratio: 425 / 718;
}
/* ═══════════════════════ CON03 end ═══════════════════════ */

/* ═══════════════════════ CON04 — 좋은 상품이 좋은 매장을 만듭니다 ═══════════════════════ */
.con04 {
  justify-content: flex-start;
  padding-top: 6.6vw;
  padding-bottom: 6.8vw;
  background-color: #063486;
  /* 시안 실측: 45° 사선 · 가로주기 15px · 밝은 줄 3~4px */
  background-image: repeating-linear-gradient(135deg, #12408e 0, #12408e calc(var(--px) * 2.5), #063486 calc(var(--px) * 2.5), #063486 calc(var(--px) * 10.6));
}

.con04_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.7vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.12vw;
}

.con04_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con04_title_point {
  color: #feca3a;
}

.con04_sub {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con04_sub strong {
  font-weight: 700;
}

.con04_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 69.3963%;
  height: calc(var(--px) * 603);
  border-radius: calc(var(--px) * 50);
}

.con04_card01 {
  margin-top: 1.9vw;
  padding-top: 1.8vw;
  background-color: #ffffff;
}

.con04_card03 {
  margin-top: 1.5vw;
  padding-top: 3.6vw;
  background-color: #e5eeff;
}

.con04_ellipse {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * -87);
  top: calc(var(--px) * 399);
  width: calc(var(--px) * 1497);
  height: calc(var(--px) * 454);
  background-color: #e5eeff;
  border-radius: 50%;
}

.con04_no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 85);
  height: calc(var(--px) * 55);
  font-family: "Ria";
  font-size: calc(var(--px) * 22);
  color: #ffffff;
  background-color: #063486;
  border-radius: 50%;
  letter-spacing: -0.06vw;
}

.con04_ctit {
  margin-top: 0.7vw;
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 32);
  font-weight: 700;
  line-height: 2.2vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.08vw;
}

.con04_ctit span {
  color: #063486;
}

.con04_lead {
  margin-top: 0.6vw;
  font-family: "NanumSquareNeo";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.7vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con04_desc {
  margin-top: 0.7vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.5vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
}

/* 카드01 썸네일 5장 — 213 × 5 + 19 × 4 = 1141 (카드03 은 아래 .con04_thumbs_lg 가 폭·간격을 덮어쓴다) */
.con04_thumbs {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  margin-top: 1.8vw;
  gap: calc(var(--px) * 19);
}

.con04_thumb {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  width: calc(var(--px) * 213);
  height: calc(var(--px) * 178);
  border-radius: calc(var(--px) * 30);
}

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

/* 10~12 는 박스를 꽉 채우고 사진은 세로 가운데(.con04_thumb_img 의 flex center) — PC·모바일 공통 */
.con04_thumb_img10,
.con04_thumb_img11,
.con04_thumb_img12 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.con04_thumb_img03 {
  left: calc(var(--px) * -33);
  top: calc(var(--px) * -22);
  width: calc(var(--px) * 342);
  aspect-ratio: 342 / 220;
}

.con04_thumb_img04 {
  left: calc(var(--px) * -33);
  top: calc(var(--px) * -42);
  width: calc(var(--px) * 306);
  aspect-ratio: 306 / 229;
}

.con04_thumb_img07,
.con04_thumb_img08,
.con04_thumb_img09 {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.con04_thumb_img07 img,
.con04_thumb_img08 img,
.con04_thumb_img09 img {
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}

.con04_thumbs_lg {
  margin-top: 2.5vw;
  gap: calc(var(--px) * 17);
}

.con04_thumbs_lg .con04_thumb {
  width: calc(var(--px) * 303);
  height: calc(var(--px) * 203);
}

.con04_search {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 1097);
  top: calc(var(--px) * 250);
  width: calc(var(--px) * 235);
  aspect-ratio: 235 / 237;
}

.con04_card02 {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 1.7vw;
  width: 69.3963%;
}

.con04_c2_txt {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 50%;
  height: calc(var(--px) * 603);
  padding-top: 4.5vw;
  padding-left: calc(var(--px) * 109);
  background-color: #ffffff;
  border-radius: calc(var(--px) * 50) 0 0 calc(var(--px) * 50);
}

.con04_c2_txt .con04_ctit,
.con04_c2_txt .con04_lead,
.con04_c2_txt .con04_desc {
  text-align: left;
}

.con04_c2_txt .con04_lead {
  margin-top: 1vw;
}

.con04_c2_txt .con04_desc {
  margin-top: 0.7vw;
}

.con04_desc_gap {
  margin-top: 1.5vw;
}

.con04_c2_media {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 50%;
  height: calc(var(--px) * 603);
  background-color: #e5eeff;
  border-radius: 0 calc(var(--px) * 50) calc(var(--px) * 50) 0;
}

.con04_video {
  left: 0;
  top: calc(var(--px) * -138);
  width: calc(var(--px) * 668);
  /* 전역 video{height:100%} 가 aspect-ratio 를 눌러 아래 138px 이 비었다 */
  height: auto;
  aspect-ratio: 668 / 903;
  object-fit: cover;
}

.con04_box {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 9.0289%;
  top: 95.5vw;
  width: calc(var(--px) * 289);
  aspect-ratio: 289 / 269;
}
/* ═══════════════════════ CON04 end ═══════════════════════ */

/* ═══════════════════════ CON05 — 비수기 매출 지원 ═══════════════════════ */
.con05 {
  justify-content: flex-start;
  align-items: flex-start;
  background-color: #ffffff;
  /* 시안 실측 15px 격자 · 선 1px #f2f2f2 */
  background-image: linear-gradient(#f2f2f2 1px, transparent 1px), linear-gradient(90deg, #f2f2f2 1px, transparent 1px);
  background-size: calc(var(--px) * 15) calc(var(--px) * 15);
  height: calc(var(--px) * 783);
}

.con05_fresh {
  left: calc(var(--px) * -15);
  top: 4.1vw;
  writing-mode: vertical-rl;
  font-family: "Ria";
  font-size: calc(var(--px) * 100);
  line-height: calc(var(--px) * 100);
  color: #e5eeff;
  letter-spacing: -0.39vw;
}

.con05_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 15.4331%;
  margin-top: 11.2vw;
  width: 32%;
}

.con05_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 55);
  line-height: 3.4vw;
  color: #111111;
  letter-spacing: -0.14vw;
}

.con05_title_point {
  color: #063486;
}

.con05_sub {
  margin-top: 1.7vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con05_sub strong {
  font-weight: 700;
}

.con05_sub_gap {
  margin-top: 1.6vw;
}

.con05_navs {
  margin-top: 1.7vw;
}

.con05_slide {
  /* Swiper 의 .swiper{position:relative} 가 공통 .absol 을 덮으므로 여기서 다시 잡는다 */
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  left: 49.9213%;
  top: 6.4vw;
  width: 50.0787%;
  height: calc(var(--px) * 540);
}

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

.con05_photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--px) * 30);
  background-color: #000000;
}

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

.con05_photo_contain img,
.con05_photo video {
  object-fit: contain;
}

.con05_photo video {
  background-color: #000000;
}
/* ═══════════════════════ CON05 end ═══════════════════════ */

/* ═══════════════════════ CON06 — 직접 비교해보세요 ═══════════════════════ */
.con06 {
  justify-content: flex-start;
  padding-top: 6.2vw;
  padding-bottom: 5.7vw;
  /* 시안 실측 세로 밴드 주기 203px */
  background-image: repeating-linear-gradient(90deg, #e6efff 0, #e6efff calc(var(--px) * 103), #dee9fd calc(var(--px) * 103), #dee9fd calc(var(--px) * 203));
  background-size: calc(var(--px) * 203) 100%;
  background-position: calc(var(--px) * 89) 0;
}

.con06_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.7vw;
  color: #111111;
  text-align: center;
  letter-spacing: -0.12vw;
}

.con06_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con06_title_point {
  color: #063486;
}

.con06_sub {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con06_sub strong {
  font-weight: 700;
}

/* 모바일 전용 3열 비교표 (마크업 = index.html) — PC 는 아래 .con06_row 2단 카드가 담당 */
.con06_mtable_wrap {
  display: none;
}

.con06_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 2.5vw;
  width: 100%;
}

.con06_card_l {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-left: 18.2152%;
  margin-top: 1.6vw;
  width: 31.7585%;
  height: calc(var(--px) * 506);
  padding-top: 2vw;
  background-color: #ffffff;
  /* 시안 실측: 1px 회색 테두리 (상 y=395 · 좌 x=348 · 하 y=896 전 구간 동일색) */
  border: 1px solid #dcdcdc;
  border-radius: calc(var(--px) * 20);
}

.con06_l_tit {
  font-family: "Suit";
  font-size: calc(var(--px) * 24);
  font-weight: 800;
  color: #000000;
  letter-spacing: -0.06vw;
}

.con06_line {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.4vw;
  width: calc(var(--px) * 342);
  height: 1px;
  background-color: #dddddd;
}

.con06_card_r {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
  margin-left: -0.6824%;
  width: 32.1785%;
  height: calc(var(--px) * 566);
  background-color: #ffffff;
  /* 시안 실측: 사방 5px 남색 테두리 (좌 940~944 · 우 1545~1549 · 하 923~927) */
  border: calc(var(--px) * 5) solid #063486;
  border-radius: calc(var(--px) * 20);
}

.con06_r_head {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 100%;
  /* 카드 테두리 5px 만큼 줄여 헤더 아래 경계를 시안(y=479) 그대로 유지 */
  height: calc(var(--px) * 111);
  background-color: #063486;
}

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

.con06_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: 1.4vw;
}

.con06_item {
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 21);
  line-height: 3.6vw;
  letter-spacing: -0.06vw;
  white-space: nowrap;
}

.con06_list_l .con06_item {
  font-weight: 400;
  color: #4d4d4d;
}

.con06_list_r {
  margin-top: 1.9vw;
}

.con06_list_r .con06_item {
  font-weight: 600;
  color: #000000;
}

.con06_pills {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  left: 45.0394%;
  top: 8.2vw;
  gap: 0.5vw;
}

.con06_pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 173);
  height: calc(var(--px) * 59);
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  color: #ffffff;
  background-color: #063486;
  border-radius: 50vw;
  letter-spacing: -0.06vw;
  white-space: nowrap;
}

.con06_cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  left: 76.7979%;
  top: 15.9vw;
  width: calc(var(--px) * 223);
  aspect-ratio: 223 / 221;
  background-color: #063486;
  /* 시안 실측: 원 바깥에 흰 2px 간격 + 남색 6px 링 */
  box-shadow: 0 0 0 calc(var(--px) * 2) #ffffff, 0 0 0 calc(var(--px) * 8) #063486;
  border-radius: 50%;
}

.con06_cta_txt {
  font-family: "Ria";
  font-size: calc(var(--px) * 30);
  line-height: 2.1vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.08vw;
  white-space: nowrap;
}

.con06_cta_point {
  color: #feca3a;
}

.con06_cursor {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 160);
  top: calc(var(--px) * 166);
  width: calc(var(--px) * 58);
  aspect-ratio: 58 / 80;
  filter: drop-shadow(0 0.7874vw 0.4724vw rgba(5, 20, 47, 0.17));
}
/* ═══════════════════════ CON06 end ═══════════════════════ */

/* ═══════════════════════ CON07 — 검증된 운영으로 전국으로 성장 ═══════════════════════ */
.con07 {
  justify-content: flex-start;
  padding-top: 6.9vw;
  padding-bottom: 5.1vw;
  background-color: #05142f;
  background-image: url("/images/con07_map.png");
  background-size: calc(var(--px) * 2021) calc(var(--px) * 1373);
  background-position: calc(var(--px) * -56) calc(var(--px) * -363);
  background-repeat: no-repeat;
}

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

.con07_pin01 {
  left: 23.3596%;
  top: 4.8vw;
}

.con07_pin02 {
  left: 8.1365%;
  top: 14vw;
}

.con07_pin03 {
  left: 76.8504%;
  top: 4.9vw;
}

.con07_pin04 {
  left: 89.1864%;
  top: 12.8vw;
}

.con07_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.7vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.12vw;
}

.con07_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con07_title_point {
  color: #feca3a;
}

.con07_sub {
  margin-top: 0.6vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con07_sub strong {
  font-weight: 700;
}

.con07_stats {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 4vw;
  width: 69.2913%;
}

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

.con07_stat_label {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  height: calc(var(--px) * 54);
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  color: #05142f;
  background-color: #ffffff;
  border-radius: 50vw;
  letter-spacing: -0.06vw;
  white-space: nowrap;
}

.con07_stat01 .con07_stat_label {
  width: calc(var(--px) * 146);
}

.con07_stat02 .con07_stat_label {
  width: calc(var(--px) * 145);
}

.con07_stat03 .con07_stat_label {
  width: calc(var(--px) * 183);
}

.con07_stat04 .con07_stat_label {
  width: calc(var(--px) * 248);
}

.con07_stat_numbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  margin-top: 1.1vw;
  width: 100%;
  height: calc(var(--px) * 119);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.con07_stat:last-child .con07_stat_numbox {
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.con07_stat_num {
  /* Ria 글리프가 line-box 안에서 9px 위로 앉는다 → 마진 18의 절반만큼 내려 중앙을 맞춘다 */
  margin-top: calc(var(--px) * 18);
  font-family: "Ria";
  line-height: 3.8vw;
  white-space: nowrap;
}

.con07_num_lg {
  font-size: calc(var(--px) * 80);
  color: #ffffff;
  letter-spacing: -0.21vw;
  /* con07-count : 점등이 뚝뚝 끊기지 않게 — 꺼지는 숫자와 켜지는 숫자가 겹쳐 크로스페이드된다 */
  transition: color 0.5s ease-in-out;
}

.con07_num_sm {
  /* _lg 의 음수 letter-spacing 이 끝 글자에도 걸려 숫자와 붙는다 — 시안 간격 7px 복원 */
  margin-left: calc(var(--px) * 7);
  font-size: calc(var(--px) * 40);
  color: #ffffff;
  letter-spacing: -0.1vw;
}

/* con07-count : 신호등 점등 상태. 4개 숫자 중 .on 하나만 포인트 컬러 (JS 가 1초 간격 순환) */
.con07_num_lg.on {
  color: #feca3a;
}

.con07_stat_note {
  margin-top: 0.1vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -0.05vw;
}

.con07_roll {
  align-items: flex-start;
  margin-top: 4.9vw;
  height: calc(var(--px) * 283);
}

.con07_roll_track {
  flex-shrink: 0;
  align-items: flex-start;
}

.con07_roll_set {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

.con07_card {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-right: calc(var(--px) * 19);
  width: calc(var(--px) * 428);
  height: calc(var(--px) * 283);
  border-radius: calc(var(--px) * 30);
}

.con07_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* ═══════════════════════ CON07 end ═══════════════════════ */

/* ═══════════════════════ CON08 — 본사를 활용할 수 있는 프랜차이즈 ═══════════════════════ */
.con08 {
  justify-content: flex-start;
  padding-top: 6.8vw;
  padding-bottom: 3.3vw;
  background-color: #ffffff;
}

.con08_topbg {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  width: 100%;
  /* 커브 이미지의 아치 양끝(rel 698)까지 배경을 깔아야 경계가 아치 모양으로 잡힌다
     (636 이면 아치 밖 구간이 평평한 직선으로 남는다) */
  height: calc(var(--px) * 698);
  /* 시안 세로 그라데이션 실측 (rel 0 흰색 → 620 #fff2e9) */
  background-image: linear-gradient(#ffffff, #fff2e9 calc(var(--px) * 620));
}

.con08_title,
.con08_title2 {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.7vw;
  color: #111111;
  text-align: center;
  letter-spacing: -0.12vw;
}

.con08_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con08_point {
  color: #e9741e;
}

.con08_roll {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-top: 2.1vw;
  /* 원 230 + 아치 최대 하강 108 (화면 밖으로 빠지기 직전 슬라이드) */
  height: calc(var(--px) * 338);
  /* 가운데 슬라이드 주황 링(10)이 swiper overflow:hidden 에 잘리지 않게 */
  padding-top: calc(var(--px) * 10);
  /* Swiper 기본 ease 는 멈출 때 뚝 끊긴다 — 감속을 길게 빼서 부드럽게 */
  --swiper-wrapper-transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

/* flex 3종은 common.css div.swiper-slide(center·column) 가 담당.
   여기서는 세로 정렬만 위로 되돌린다 — 슬라이드 아래쪽을 아치 하강분으로 비워두기 위함 */
div.con08_roll_item {
  justify-content: flex-start;
  width: calc(var(--px) * 230);
}

.con08_circle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  width: calc(var(--px) * 230);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  /* 시안 타원 1007 = 원 230 + 링 10×2. --ring(0~1) 은 js/slide.js 가 매 프레임 갱신 —
     가운데에 가까울수록 진해져서 전환 중에 링이 툭 옮겨붙지 않는다 */
  box-shadow: 0 0 0 calc(var(--px) * 10) rgba(233, 116, 30, var(--ring, 0));
}

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

.con08_curve {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 커브 PNG 가 캔버스보다 넓다 — left 를 주면 오른쪽으로만 삐져나가 아치가 비대칭이 된다.
     좌표를 비워 부모 flex 의 중앙(static position)에 맡긴다 */
  top: 31.9vw;
  width: 100.7874%;
  aspect-ratio: 960 / 83;
}

.con08_line {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 34.6vw;
  width: 1px;
  height: calc(var(--px) * 129);
  background-color: #e9741e;
}

.con08_title2 {
  margin-top: 8.4vw;
}

.con08_sub {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con08_hl {
  font-weight: 700;
  /* 시안 실측 #FEEFC4 = #feca3a 30% over #ffffff (밑줄 모션이 background-size 를 0→100% 로 늘린다) */
  background-image: linear-gradient(rgba(254, 202, 58, 0.3), rgba(254, 202, 58, 0.3));
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.con08_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  margin-top: 2vw;
  width: 82.0472%;
  padding-top: 3.4vw;
  padding-bottom: 3.5vw;
  background-color: #fff1e7;
  /* 시안 실측: 1px 주황 테두리 (상 y=1087 · 좌 x=172 · 우 x=1732 · 하 y=1855) */
  border: 1px solid #e9741e;
  border-radius: calc(var(--px) * 50);
}

.con08_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
  column-gap: calc(var(--px) * 26);
  row-gap: 2.9vw;
  padding-left: calc(var(--px) * 134);
  box-sizing: border-box;
}

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

.con08_card_img {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: calc(var(--px) * 301);
  height: calc(var(--px) * 218);
  border-radius: calc(var(--px) * 20);
}

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

.con08_card_photo01 {
  left: calc(var(--px) * -61);
  top: calc(var(--px) * -4);
  width: calc(var(--px) * 416);
  aspect-ratio: 416 / 234;
}

.con08_card_photo02 {
  left: calc(var(--px) * -57);
  top: calc(var(--px) * -24);
  width: calc(var(--px) * 375);
  aspect-ratio: 375 / 250;
}

.con08_card_photo03 {
  left: calc(var(--px) * -1);
  top: calc(var(--px) * -74);
  width: calc(var(--px) * 304);
  aspect-ratio: 304 / 345;
}

.con08_card_photo04 {
  left: calc(var(--px) * -7);
  top: calc(var(--px) * -56);
  width: calc(var(--px) * 324);
  aspect-ratio: 324 / 362;
}

.con08_card_photo05 {
  left: calc(var(--px) * -48);
  top: calc(var(--px) * -36);
  width: calc(var(--px) * 383);
  aspect-ratio: 383 / 288;
}

.con08_card_photo06 {
  left: calc(var(--px) * -3);
  top: calc(var(--px) * -77);
  width: calc(var(--px) * 320);
  aspect-ratio: 320 / 361;
}

.con08_card_photo07 {
  left: calc(var(--px) * -62);
  top: calc(var(--px) * -56);
  width: calc(var(--px) * 416);
  aspect-ratio: 416 / 312;
}

.con08_card_photo08 {
  left: calc(var(--px) * -10);
  top: calc(var(--px) * -116);
  width: calc(var(--px) * 314);
  aspect-ratio: 314 / 420;
}

.con08_card_tit {
  margin-top: 0.7vw;
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 26);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.07vw;
  white-space: nowrap;
}

.con08_card_desc {
  margin-top: 0.5vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  color: #000000;
  letter-spacing: -0.05vw;
  white-space: nowrap;
}

.con08_cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 1.9vw;
  width: calc(var(--px) * 334);
  height: calc(var(--px) * 92);
  font-family: "Ria";
  font-size: calc(var(--px) * 30);
  color: #ffffff;
  background-color: #e9741e;
  border-radius: 50vw;
  letter-spacing: -0.08vw;
  /* con08-cta : 스포트라이트 중심 좌표. js 가 커서 위치로 갱신하고, 미실행이면 정중앙 */
  --mx: 50%;
  --my: 50%;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, letter-spacing 0.4s ease;
}

/* con08-cta : 커서를 따라다니는 온기 스포트라이트. transform 없이 opacity 만 켜고 끈다 */
.con08_cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle calc(var(--px) * 190) at var(--mx) var(--my), rgba(255, 222, 150, 0.95) 0%, rgba(255, 200, 110, 0.45) 35%, rgba(255, 190, 90, 0) 72%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}

.con08_cta:hover {
  background-color: #f07f22;
  box-shadow: 0 calc(var(--px) * 10) calc(var(--px) * 26) rgba(233, 116, 30, 0.42);
  letter-spacing: 0.06vw;
}

.con08_cta:hover::before {
  opacity: 1;
}

/* 터치기기 = hover 가 탭 후 눌어붙는다 → 기본 버튼 상태 유지 */
@media (hover: none) {
  .con08_cta:hover {
    background-color: #e9741e;
    box-shadow: none;
    letter-spacing: -0.08vw;
  }
  .con08_cta:hover::before {
    opacity: 0;
  }
}
/* ═══════════════════════ CON08 end ═══════════════════════ */

/* ═══════════════════════ CON09 — 광고보다 좋은 상품이 + 고객 만족이 증명합니다 ═══════════════════════ */
.con09 {
  justify-content: flex-start;
  background-color: #e5eeff;
}

.con09_top {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: calc(var(--px) * 887);
  padding-top: 10.2vw;
  background-color: #000000;
}

.con09_video {
  left: -0.4199%;
  top: calc(var(--px) * -23);
  width: 100.7874%;
  aspect-ratio: 160 / 94;
  object-fit: cover;
  /* 디자이너 코멘트 "CCTV 영상 블러처리" */
  filter: blur(calc(var(--px) * 3)) brightness(0.32);
}

.con09_awning {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * -8);
  top: 0;
  width: calc(var(--px) * 1981);
  aspect-ratio: 1981 / 92;
}

.con09_glow {
  display: flex;
  justify-content: center;
  align-items: center;
  top: 25.1vw;
  width: calc(var(--px) * 863);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

/* 퍼지는 모션 — 후광이 옅어지면서 커진다.
   그라데이션(시안 실측: 중심 투명 · 반지름 77% 부터 시작 · 테두리 alpha 0.46)을
   유사요소 2겹으로 옮기고 반주기(1.75s) 엇갈려 돌린다 — 한 겹만 쓰면 반복 이음매에서 툭 끊긴다 */
.con09_glow::before,
.con09_glow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle closest-side, rgba(254, 202, 58, 0) 77%, rgba(254, 202, 58, 0.46) 100%);
  border-radius: 50%;
  animation: rippleOut 3.5s ease-out infinite;
}

.con09_glow::after {
  animation-delay: -1.75s;
}

.con09_title,
.con09_title2 {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.7vw;
  text-align: center;
  letter-spacing: -0.12vw;
}

.con09_title {
  color: #ffffff;
}

.con09_title2 {
  margin-top: 20.3vw;
  color: #111111;
}

.con09_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con09_point {
  color: #feca3a;
}

.con09_point2 {
  color: #063486;
}

.con09_sub,
.con09_sub2 {
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con09_sub {
  margin-top: 1.1vw;
  color: #ffffff;
}

.con09_sub2 {
  margin-top: 0.5vw;
  color: #000000;
}

.con09_sub strong,
.con09_sub2 strong {
  font-weight: 700;
}

.con09_cart {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 34.9606%;
  top: 29.5vw;
  width: calc(var(--px) * 537);
  aspect-ratio: 537 / 504;
}

.con09_badge {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 173);
  aspect-ratio: 1 / 1;
  background-color: #ffffff;
  border-radius: 50%;
  transition: background-color 0.5s ease-in-out;
}

.con09_badge01 {
  top: 23.6vw;
}

.con09_badge02 {
  left: 29.0814%;
  top: 32.1vw;
}

.con09_badge03 {
  left: 61.5748%;
  top: 32.1vw;
}

.con09_badge_txt {
  font-family: "Ria";
  font-size: calc(var(--px) * 30);
  line-height: 1.7vw;
  /* 시안 실측: 비활성 #cacaca — 점등된 배지만 검정 */
  color: #cacaca;
  text-align: center;
  letter-spacing: -0.08vw;
  transition: color 0.5s ease-in-out;
}

/* con09-badge : 신호등 점등 상태. 배지와 짝이 되는 아래 카드가 같은 .on 으로 함께 바뀐다 */
.con09_badge.on {
  background-color: #feca3a;
}

.con09_badge.on .con09_badge_txt {
  color: #000000;
}

.con09_cards {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  top: 43.9vw;
  width: calc(var(--px) * 1692);
}

.con09_card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 564);
  height: calc(var(--px) * 334);
  padding-top: 2.4vw;
  background-color: #ffffff;
  /* con09-badge : 신호등 전환이 뚝뚝 끊기지 않게 — 꺼지는 카드와 켜지는 카드가 겹쳐 넘어간다 */
  transition: background-color 0.5s ease-in-out;
}

.con09_card.on {
  background-color: #063486;
}

.con09_card_no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 77);
  height: calc(var(--px) * 43);
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #000000;
  background-color: #feca3a;
  border-radius: 50vw;
  letter-spacing: -0.05vw;
}

.con09_card_tit {
  margin-top: 1.6vw;
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 28);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.07vw;
  white-space: nowrap;
  transition: color 0.5s ease-in-out;
}

.con09_card_txt {
  margin-top: 1vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.4vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
  transition: color 0.5s ease-in-out;
}

.con09_card_txt strong {
  font-weight: 700;
}

.con09_card.on .con09_card_tit,
.con09_card.on .con09_card_txt {
  color: #ffffff;
}

.con09_card .con09_point {
  color: #063486;
  transition: color 0.5s ease-in-out;
}

.con09_card.on .con09_point {
  color: #feca3a;
}

.con09_melon {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 1.3123%;
  top: 45.2vw;
  width: calc(var(--px) * 133);
  aspect-ratio: 133 / 142;
}

.con09_orange {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 90.6562%;
  top: 51vw;
  width: calc(var(--px) * 154);
  aspect-ratio: 154 / 164;
}

.con09_reviews {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 423);
  margin-top: 2.4vw;
}

/* 시안 노란라벨 "리뷰 슬라이드 > / <" — 중앙 원을 경계로 좌우가 반대 방향으로 흐른다 (con03_rolls 와 동일 패턴) */
.con09_rolls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.con09_roll {
  align-items: flex-start;
  flex-shrink: 0;
  height: calc(var(--px) * 423);
}

/* 좌우 이음매(캔버스 중앙)는 중앙 원 411 이 덮는다 */
.con09_roll_l {
  width: 50%;
}

.con09_roll_r {
  width: 50%;
}

.con09_roll_track {
  flex-shrink: 0;
  align-items: flex-start;
  /* 리뷰 24장: 기존 6장 / 20초와 같은 이동 속도를 유지한다. */
  animation-duration: 80s;
}

.con09_roll_set {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

.con09_rcard {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  margin-right: calc(var(--px) * 17);
  width: calc(var(--px) * 323);
  height: calc(var(--px) * 423);
  border: 1px solid #dcdde2;
  background-color: #ffffff;
}

.con09_rcard img {
  width: 100%;
}

.con09_rcard_full img {
  height: 100%;
  object-fit: contain;
}

.con09_rate {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 411);
  aspect-ratio: 1 / 1;
  background-color: #022462;
  border-radius: 50%;
}

.con09_rate_in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 88.3212%;
  aspect-ratio: 1 / 1;
  background-color: #063486;
  background-image: repeating-linear-gradient(135deg, #1a4999 0, #1a4999 calc(var(--px) * 1.5), #063486 calc(var(--px) * 1.5), #063486 calc(var(--px) * 10.6066));
  border-radius: 50%;
}

.con09_rate_pill {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 144);
  height: calc(var(--px) * 52);
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 24);
  font-weight: 700;
  color: #063486;
  background-color: #ffffff;
  border-radius: 50vw;
  letter-spacing: -0.06vw;
}

.con09_rate_num {
  margin-top: 1.4vw;
  font-family: "Ria";
  line-height: 4.7vw;
  white-space: nowrap;
}

.con09_rate_lg {
  font-size: calc(var(--px) * 94);
  color: #feca3a;
  letter-spacing: -0.25vw;
}

.con09_rate_sm {
  font-size: calc(var(--px) * 47);
  color: #ffffff;
  letter-spacing: -0.12vw;
}

.con09_band {
  align-items: center;
  margin-top: 5.9vw;
  height: calc(var(--px) * 83);
  background-color: #063486;
}

.con09_band_track {
  flex-shrink: 0;
  align-items: center;
}

.con09_band_set {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  gap: calc(var(--px) * 62);
  padding-right: calc(var(--px) * 62);
}

.con09_band_txt {
  font-family: "Ria";
  font-size: calc(var(--px) * 23);
  color: #ffffff;
  letter-spacing: -0.06vw;
  white-space: nowrap;
}

.con09_band_point {
  color: #feca3a;
}
/* ═══════════════════════ CON09 end ═══════════════════════ */

/* ═══════════════════════ CON10 — 점주가 직접 말하는 맛KET ═══════════════════════ */
.con10 {
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(var(--px) * 808);
  background-color: #ffffff;
}

.con10_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 15.4331%;
  margin-top: 13.3vw;
}

.con10_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 55);
  line-height: 3.4vw;
  color: #111111;
  letter-spacing: -0.14vw;
}

.con10_title_point {
  color: #063486;
}

.con10_sub {
  margin-top: 1.7vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con10_navs {
  margin-top: 1.5vw;
}

.con10_slide {
  /* Swiper 의 .swiper{position:relative} 가 공통 .absol 을 덮으므로 다시 잡는다 */
  position: absolute;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  /* 활성 카드의 10px 링(box-shadow)이 .swiper{overflow:hidden} 에 잘리지 않도록
     상·하·좌 10px 만큼 박스를 키우고 같은 값의 padding 으로 되돌린다.
     우측은 뷰포트 끝까지 흘리는 자리라 padding 없음 → 슬라이드 content 폭이 유지돼
     slide.js 의 spaceBetween(3.2422% = 32px) 도 그대로 산다. */
  left: calc(48.189% - var(--px) * 10);
  top: calc(6.2vw - var(--px) * 10);
  width: calc(51.811% + var(--px) * 10);
  height: calc(var(--px) * 593);
  padding: calc(var(--px) * 10) 0 calc(var(--px) * 10) calc(var(--px) * 10);
}

.con10_vcard {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  width: calc(var(--px) * 323);
  height: calc(var(--px) * 573);
  background-color: #272727;
  border-radius: calc(var(--px) * 20);
  /* 링이 툭 붙지 않고 슬라이드 이동에 맞춰 번지도록 */
  transition: box-shadow 0.5s ease-in-out;
}

/* 활성(= 가장 왼쪽에 온) 카드만 파란 링. Swiper 가 붙이는 상태 클래스라 loop 복제와 무관하게 따라간다 (§7-1) */
.con10_vcard.swiper-slide-active {
  box-shadow: 0 0 0 calc(var(--px) * 10) #063486;
}

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

.con10_cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 2;
  left: 37.6903%;
  top: 23.9vw;
  width: calc(var(--px) * 222);
  aspect-ratio: 1 / 1;
  background-color: #063486;
  /* 시안 실측: 원 바깥에 흰 2px 간격 + 남색 6px 링 (.con06_cta 와 동일) */
  box-shadow: 0 0 0 calc(var(--px) * 2) #ffffff, 0 0 0 calc(var(--px) * 8) #063486;
  border-radius: 50%;
}

.con10_cta_txt {
  font-family: "Ria";
  font-size: calc(var(--px) * 30);
  line-height: 2.1vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.08vw;
  white-space: nowrap;
}

.con10_cta_point {
  color: #feca3a;
}

.con10_cursor {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 161);
  top: calc(var(--px) * 164);
  width: calc(var(--px) * 58);
  aspect-ratio: 58 / 80;
  filter: drop-shadow(0 0.7874vw 0.4724vw rgba(5, 20, 47, 0.17));
}
/* ═══════════════════════ CON10 end ═══════════════════════ */

/* ═══════════════════════ CON11 — 부담은 낮추고 성공은 더 가깝게 + 개설절차 안내 ═══════════════════════ */
.con11 {
  justify-content: flex-start;
  padding-top: 5.8vw;
  padding-bottom: 5.5vw;
  background-color: #063486;
  background-image: repeating-linear-gradient(90deg, #1a4999 0, #1a4999 1px, #063486 1px, #063486 calc(var(--px) * 15));
  background-position: calc(var(--px) * 12) 0;
}

.con11_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 88.2940%;
  padding-top: 5.9vw;
  padding-bottom: 5.5vw;
  background-color: #ffffff;
  border-radius: calc(var(--px) * 50);
}

.con11_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 50);
  line-height: 3.1vw;
  color: #111111;
  text-align: center;
  letter-spacing: -0.13vw;
}

.con11_title_point {
  color: #063486;
}

.con11_title2 {
  margin-top: 5.9vw;
}

.con11_sub {
  margin-top: 1.6vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con11_sub strong {
  font-weight: 700;
}

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

.con11_std {
  align-self: flex-end;
  font-size: calc(var(--px) * 16);
  font-weight: 300;
  color: #000000;
  letter-spacing: -0.04vw;
}

.con11_table {
  margin-top: 0.4vw;
  width: 100%;
  table-layout: fixed;
}

.con11_c1 {
  width: calc(var(--px) * 410);
  text-align: center;
  border-right: 1px solid #dddddd;
}

.con11_c2 {
  width: calc(var(--px) * 399);
  text-align: center;
  border-right: 1px solid #dddddd;
}

.con11_c3 {
  width: calc(var(--px) * 514);
  text-align: center;
}

.con11_head {
  height: calc(var(--px) * 62);
  background-color: #e5eeff;
}

.con11_head td {
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con11_row {
  height: calc(var(--px) * 47.5);
}

.con11_row td {
  padding: calc(var(--px) * 10) calc(var(--px) * 12);
  line-height: 1.5;
  font-size: calc(var(--px) * 19);
  font-weight: 300;
  color: #000000;
  letter-spacing: -0.05vw;
  border-bottom: 1px solid #dddddd;
}

.con11_row .con11_c1 {
  font-weight: 700;
}

/* 도장 타원 뱃지 = 시안 이미지 그대로 배치.
   CSS(border-radius:50% + inset box-shadow)로 그리면 흰 링이 타원 어깨에서 얇아진다
   (inset spread 는 rx/ry 를 각각 줄이는 거라 등간격 오프셋이 아니다) → 이미지로 대체. */
.con11_badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}

.con11_badge_sm {
  /* 시안은 "500만 원" 이 셀 정중앙이고 뱃지는 그 오른쪽으로 흘러나간다.
     음수 margin-right 로 뱃지의 인라인 advance(6+101)를 상쇄해 텍스트만 가운데 잡히게 한다. */
  margin-left: calc(var(--px) * 6);
  margin-right: calc(var(--px) * -107);
  width: calc(var(--px) * 101);
  aspect-ratio: 101 / 55;
}

.con11_badge_lg {
  width: calc(var(--px) * 227);
  aspect-ratio: 227 / 55;
}

.con11_del {
  text-decoration: line-through;
}

.con11_total {
  height: calc(var(--px) * 62);
  background-color: #063486;
}

.con11_total td {
  font-family: "Ria";
  font-size: calc(var(--px) * 25);
  color: #ffffff;
  letter-spacing: -0.07vw;
  border-right: 0;
}

.con11_total_point {
  color: #feca3a;
}

.con11_note {
  margin-top: 1.2vw;
  font-size: calc(var(--px) * 15);
  font-weight: 300;
  line-height: 1.2vw;
  color: #000000;
  letter-spacing: -0.04vw;
}

.con11_line {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4.2vw;
  width: 100%;
  height: 1px;
  background-color: #cdcdcd;
}

.con11_steps {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 3.1vw;
  width: calc(var(--px) * 1175);
  row-gap: 1.5vw;
}

.con11_step {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: calc(var(--px) * 334);
  height: calc(var(--px) * 234);
  padding-top: 1.8vw;
  background-color: #eff5ff;
  border: 1px solid #063486;
  border-radius: calc(var(--px) * 30);
  /* con11-step : 신호등 점등이 뚝뚝 끊기지 않게 — 꺼지는 카드와 켜지는 카드가 겹쳐 넘어간다 */
  transition: background-color 0.5s ease-in-out;
}

.con11_step_on {
  background-color: #063486;
}

.con11_step_no {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 72);
  height: calc(var(--px) * 51);
  font-family: "Ria";
  font-size: calc(var(--px) * 18);
  color: #ffffff;
  background-color: #063486;
  border-radius: 50%;
  letter-spacing: -0.05vw;
  transition: color 0.5s ease-in-out, background-color 0.5s ease-in-out;
}

.con11_step_on .con11_step_no {
  color: #063486;
  background-color: #ffffff;
}

.con11_step_tit {
  margin-top: 1vw;
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 25);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.07vw;
  white-space: nowrap;
  transition: color 0.5s ease-in-out;
}

.con11_step_desc {
  margin-top: 0.5vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.5vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
  transition: color 0.5s ease-in-out;
}

.con11_step_on .con11_step_tit,
.con11_step_on .con11_step_desc {
  color: #ffffff;
}

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

.con11_basket {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 78.8976%;
  top: 88vw;
  width: calc(var(--px) * 379);
  aspect-ratio: 379 / 366;
}

.con11_banana {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 84.2520%;
  top: 81.8vw;
  width: calc(var(--px) * 152);
  aspect-ratio: 152 / 177;
}

.con11_apple {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 80.2625%;
  top: 91.4vw;
  width: calc(var(--px) * 119);
  aspect-ratio: 119 / 134;
}
/* ═══════════════════════ CON11 end ═══════════════════════ */

/* ═══════════════════════ CON12 — 10년의 경험이 만든 신뢰 (대표인사말) ═══════════════════════ */
.con12 {
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(var(--px) * 985);
  background-color: #fffdea;
  background-image: linear-gradient(90deg, #fffdea 0, #fffdea 48%, #fffce1 48%, #fffce1 100%);
  background-size: calc(var(--px) * 150) 100%;
  background-position: calc(var(--px) * 128) 0;
}

.con12_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-left: 12.2835%;
  margin-top: 8.9vw;
}

.con12_eyebrow {
  font-family: "Ria";
  font-size: calc(var(--px) * 35);
  color: #111111;
  letter-spacing: -0.09vw;
}

.con12_title {
  margin-top: 0.5vw;
  font-family: "Ria";
  font-size: calc(var(--px) * 50);
  line-height: 3.1vw;
  color: #111111;
  letter-spacing: -0.13vw;
}

.con12_title_point {
  color: #e9741e;
}

.con12_body {
  margin-top: 2.3vw;
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.5vw;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con12_body_gap {
  margin-top: 1.4vw;
}

.con12_body_bold {
  font-weight: 700;
}

.con12_rolls {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  left: 56.3255%;
  top: 0;
  width: calc(var(--px) * 586);
  height: 100%;
  gap: calc(var(--px) * 16);
}

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

.con12_roll_track {
  flex-shrink: 0;
  /* common 의 flow_sd_y_move 10s 는 이 트랙 높이(1860)에서 186px/s 라 페이지에서 제일 빠르다.
     다른 마퀴가 102~179px/s 라 이것만 분주해 보인다 → 12s(155px/s)로 같은 대역에 맞춘다 */
  animation-duration: 12s;
}

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

.con12_photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-bottom: calc(var(--px) * 16);
  width: calc(var(--px) * 285);
  height: calc(var(--px) * 356);
  border-radius: calc(var(--px) * 20);
}

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

.con12_matket {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 92.8084%;
  top: 3.8vw;
  width: calc(var(--px) * 151);
  aspect-ratio: 151 / 839;
}


.con12_cta {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  z-index: 2;
  left: 51.0761%;
  top: 34vw;
  width: calc(var(--px) * 222);
  aspect-ratio: 1 / 1;
  background-color: #e9741e;
  /* 시안 실측: 원 바깥에 흰 2px 간격 + 주황 6px 링 (좌 966~971 / 흰 972~973 / 우 1193~1194 · 1195~1200) */
  box-shadow: 0 0 0 calc(var(--px) * 2) #ffffff, 0 0 0 calc(var(--px) * 8) #e9741e;
  border-radius: 50%;
}

.con12_cta_txt {
  font-family: "Ria";
  font-size: calc(var(--px) * 30);
  line-height: 2.1vw;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.08vw;
  white-space: nowrap;
}

.con12_cta_point {
  color: #fff69e;
}
/* ═══════════════════════ CON12 end ═══════════════════════ */

/* ═══════════════════════ CON13 — 신뢰를 쌓아온 시간 (연혁) ═══════════════════════ */
.con13 {
  justify-content: flex-start;
  padding-top: 7.8vw;
  padding-bottom: 6.5vw;
  background-color: #ffffff;
  background-image: url("/images/con13_bg.png");
  background-size: 100.7874% calc(var(--px) * 577);
  background-position: -0.4199% 23.6vw;
  background-repeat: no-repeat;
}

.con13_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.7vw;
  color: #111111;
  text-align: center;
  letter-spacing: -0.12vw;
}

.con13_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con13_title_point {
  color: #063486;
}

.con13_sub {
  margin-top: 0.8vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.6vw;
  color: #000000;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con13_sub strong {
  font-weight: 700;
}

.con13_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 2.6vw;
  width: 100%;
}

.con13_photo {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  overflow: hidden;
  margin-left: 12.126%;
  width: calc(var(--px) * 703);
  height: calc(var(--px) * 461);
  background-color: #e6e6e6;
  border-radius: calc(var(--px) * 30);
}

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

/* 교차 전환용 이전 컷 — 아래 컷을 새 연도로 바꾼 뒤 이 레이어만 걷어낸다 (빈 프레임 없음) */
.con13_photo_prev {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: opacity;
}

.con13_timeline {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 3.0446%;
  width: calc(var(--px) * 682);
  height: calc(var(--px) * 461);
}

.con13_timeline::-webkit-scrollbar {
  width: calc(var(--px) * 6);
}

.con13_timeline::-webkit-scrollbar-track {
  background-color: #e6e6e6;
  border-radius: 50vw;
}

.con13_timeline::-webkit-scrollbar-thumb {
  background-color: #063486;
  border-radius: 50vw;
}

/* Firefox 전용 — 크롬(121+)에서 scrollbar-width/color 를 쓰면 위 ::-webkit-scrollbar 가 통째로 무시돼 라운드가 날아간다 */
@supports (-moz-appearance: none) {
  .con13_timeline {
    scrollbar-width: thin;
    scrollbar-color: #063486 #e6e6e6;
  }
}

/* 연혁 세로 축선 — .con13_dot 중심(1905 × 62.4147% = 1189)을 관통한다.
   ★ 마크업에서 .con13_timeline 안에 두면 안 된다: 등장 모션이 프레임에 남기는 transform 이
     절대배치 기준을 프레임(682px)으로 바꿔버려 좌표가 통째로 어긋난다 → .con13_row 직계 */
.con13_axis {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 62.4147%;
  top: 22.9vw;
  width: 1px;
  height: calc(var(--px) * 461);
  background-color: #e6e6e6;
}

.con13_items {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  row-gap: 4.0vw;
}

.con13_item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
}

.con13_year {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 188.5);
  height: calc(var(--px) * 33);
  font-family: "Ria";
  font-size: calc(var(--px) * 35);
  color: #cecece;
  letter-spacing: -0.09vw;
  transition: color 0.35s ease;
}

.con13_dot {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 18);
  height: calc(var(--px) * 18);
  background-color: #cecece;
  border-radius: 50%;
  transition: background-color 0.35s ease;
}

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

.con13_ytit {
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 22);
  font-weight: 700;
  /* 라인박스가 글리프 높이(26)보다 작으면 글자 윗부분이 항목 밖으로 나가
     프레임(오버플로우) 상단에서 잘린다. 1.1vw = 잉크가 항목 top 보다 1.5px 아래 */
  line-height: 1.1vw;
  color: #cecece;
  letter-spacing: -0.06vw;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.con13_ul {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 0.6vw;
}

.con13_li {
  font-size: calc(var(--px) * 18);
  font-weight: 300;
  line-height: 1.8vw;
  color: #cecece;
  letter-spacing: -0.05vw;
  white-space: nowrap;
  /* color 만 전환한다 — font-weight 를 전환하면 30개 행이 매 프레임 재조판돼 스크롤이 끊긴다 */
  transition: color 0.35s ease;
}

.con13_item_on .con13_year {
  color: #063486;
}

.con13_item_on .con13_dot {
  background-color: #063486;
}

.con13_item_on .con13_ytit {
  color: #000000;
}

.con13_item_on .con13_li {
  font-weight: 700;
  color: #000000;
}
/* ═══════════════════════ CON13 end ═══════════════════════ */

/* ═══════════════════════ CON14 — 자주 묻는 질문 (Q&A) ═══════════════════════ */
.con14 {
  justify-content: flex-start;
  padding-top: 3.6vw;
  padding-bottom: 3.3vw;
  background-color: #063486;
}

.con14_panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 94.5932%;
  padding-top: 5.6vw;
  padding-bottom: 6.4vw;
  background-color: #ffffff;
  border-radius: calc(var(--px) * 50);
}

.con14_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: calc(var(--px) * 101);
  height: calc(var(--px) * 55);
  font-family: "Ria";
  font-size: calc(var(--px) * 20);
  color: #ffffff;
  background-color: #063486;
  border-radius: 50%;
  letter-spacing: -0.05vw;
}

.con14_badge::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: calc(var(--px) * 91);
  height: calc(var(--px) * 45);
  border: 1px solid #ffffff;
  border-radius: 50%;
}

.con14_badge_point {
  color: #feca3a;
}

.con14_title {
  margin-top: 0.83vw;
  font-family: "Ria";
  font-size: calc(var(--px) * 55);
  color: #111111;
  letter-spacing: -0.14vw;
}

.con14_title_point {
  color: #063486;
}

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

.con14_item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  border-top: 1px solid #000000;
}

.con14_item:last-child {
  border-bottom: 1px solid #000000;
}

.con14_q {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: calc(var(--px) * 64);
}

.con14_mark {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: calc(var(--px) * 13);
  width: calc(var(--px) * 36);
  height: calc(var(--px) * 36);
  font-family: "Ria";
  font-size: calc(var(--px) * 14);
  color: #ffffff;
  background-color: #063486;
  border-radius: 50%;
  letter-spacing: -0.04vw;
}

.con14_qtxt {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-left: calc(var(--px) * 14);
  font-size: calc(var(--px) * 18);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.05vw;
}

.con14_arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: calc(var(--px) * 29);
  width: calc(var(--px) * 11);
  height: calc(var(--px) * 11);
  border-right: 2px solid #111111;
  border-bottom: 2px solid #111111;
  transform: translateY(calc(var(--px) * -2)) rotate(45deg);
  transition: transform 0.4s ease;
}

.con14_item_on .con14_arrow {
  transform: translateY(calc(var(--px) * 2)) rotate(225deg);
}

.con14_a {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: height 0.4s ease;
}

.con14_a_in {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 0.95vw;
  padding-bottom: 1.17vw;
  border-top: 1px solid #dddddd;
  box-sizing: border-box;
}

.con14_atxt {
  margin-left: calc(var(--px) * 14);
  font-size: calc(var(--px) * 16);
  font-weight: 300;
  line-height: 1.3vw;
  color: #000000;
  letter-spacing: -0.04vw;
}
/* ═══════════════════════ CON14 end ═══════════════════════ */

/* ═══════════════════════ CON15 — 맛KET 매장안내 ═══════════════════════ */
.con15 {
  justify-content: flex-start;
  padding-top: 6.9vw;
  background-color: #dee9fd;
  background-image: repeating-linear-gradient(90deg, #eff5ff 0, #eff5ff calc(var(--px) * 103), #dee9fd calc(var(--px) * 103), #dee9fd calc(var(--px) * 203));
  background-size: calc(var(--px) * 203) 100%;
  background-position: calc(var(--px) * 93) 0;
}

.con15_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 55);
  color: #111111;
  letter-spacing: -0.14vw;
}

.con15_title_point {
  color: #063486;
}

.con15_body {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
  z-index: 0;
  margin-top: 3.7vw;
  width: 81.9948%;
  height: calc(var(--px) * 654);
  border: 1px solid #063486;
  border-radius: calc(var(--px) * 50);
}

.con15_map {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: calc(var(--px) * 1160);
  height: 100%;
  overflow: hidden;
}

.con15_list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-shrink: 0;
  width: calc(var(--px) * 400);
  background-color: #ffffff;
  border-right: 1px solid #063486;
}

.con15_stores {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.con15_stores::-webkit-scrollbar {
  display: none;
}

.con15_noshop {
  display: none;
  margin-top: 6vw;
  width: 100%;
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  color: #888888;
  text-align: center;
  letter-spacing: -0.05vw;
}

.con15_store {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  flex-shrink: 0;
  cursor: pointer;
  padding-top: calc(var(--px) * 41);
  padding-bottom: calc(var(--px) * 41);
  padding-left: calc(var(--px) * 56);
  border-bottom: 1px solid #dcdcdc;
}

.con15_store:last-child {
  border-bottom: 0;
}

.con15_store_txt {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding-right: calc(var(--px) * 76);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.con15_store_name {
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.26vw;
  color: #131313;
  letter-spacing: -0.05vw;
}

.con15_store_addr {
  margin-top: 0.5vw;
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.16vw;
  color: #131313;
  letter-spacing: -0.05vw;
}

.con15_store_tel {
  margin-top: 0.2vw;
  font-family: "Suit";
  font-size: calc(var(--px) * 16);
  font-weight: 400;
  line-height: 1.05vw;
  color: #131313;
  letter-spacing: -0.04vw;
}

.con15_plus {
  display: flex;
  justify-content: center;
  align-items: center;
  right: calc(var(--px) * 20);
  top: auto;
  bottom: calc(var(--px) * 20);
  width: calc(var(--px) * 38);
  height: calc(var(--px) * 38);
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #ffffff;
  background-color: #000000;
  border-radius: 50%;
}

.con15_band_link,
.con15_kakao_link {
  display: inline-flex;
  position: static;
  justify-content: center;
  align-items: center;
  align-self: flex-start;
  margin-top: calc(var(--px) * 16);
  padding: calc(var(--px) * 12) calc(var(--px) * 20);
  border: 1px solid #168f46;
  border-radius: 50vw;
  background-color: #e7f5ec;
  color: #126a37;
  font-family: "Suit";
  font-size: calc(var(--px) * 16);
  font-weight: 700;
  line-height: 1.4;
}

.con15_band_link:hover,
.con15_band_link:focus-visible {
  background-color: #126a37;
  color: #ffffff;
}

.con15_kakao_link {
  border-color: #e5cc00;
  background-color: #fee500;
  color: #191919;
}

.con15_kakao_link:hover,
.con15_kakao_link:focus-visible {
  border-color: #d6c100;
  background-color: #f2da00;
  color: #191919;
}

.con15_thumb {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 390);
  top: calc(var(--px) * 56);
  width: calc(var(--px) * 5);
  height: calc(var(--px) * 233);
  background-color: #063486;
  border-radius: 50vw;
}

.con15_search {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  top: 13vw;
  width: calc(var(--px) * 804);
  height: calc(var(--px) * 74);
  padding-left: calc(var(--px) * 45);
  background-color: #ffffff;
  border: 1px solid #063486;
  border-radius: calc(var(--px) * 35);
}

.con15_input {
  width: calc(var(--px) * 660);
  font-family: "Suit";
  font-size: calc(var(--px) * 20);
  font-weight: 400;
  color: #131313;
  letter-spacing: -0.05vw;
}

.con15_sbtn {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: calc(var(--px) * 9);
  width: calc(var(--px) * 56);
  height: calc(var(--px) * 56);
  background-color: #063486;
  border-radius: 50%;
}

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

.con15_shop {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 77.5328%;
  top: 34.75vw;
  width: calc(var(--px) * 488);
  aspect-ratio: 488 / 347;
  /* .swiper 가 붙으면서 띠가 positioned 가 돼 DOM 뒤순서로 이 일러스트를 덮는다 — 마크업 순서로는 못 이김 */
  z-index: 2;
}

/* con15 OPEN 띠 — Swiper 마퀴. 매장 1개 = 슬라이드 1장이라 매장이 늘어도 흐름 속도가 변하지 않는다 */
.con15_band {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-top: 3.6vw;
  width: 100%;
  height: calc(var(--px) * 81);
  background-color: #063486;
}

.con15_band_track {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  /* Swiper 기본 ease 는 슬라이드마다 가속·감속이 붙어 마퀴가 휘청거린다 */
  transition-timing-function: linear !important;
}

/* 정렬은 common.css 의 div.swiper-slide 가 잡는다 — 여기선 폭·높이만 */
.con15_band_set {
  display: flex;
  justify-content: center;
  align-items: center;
  /* slidesPerView:'auto' 짝 — Swiper 기본 width:100% 를 매장명 길이만큼으로 되돌린다 */
  width: auto !important;
  height: 100%;
}

.con15_band_item {
  margin-right: calc(var(--px) * 49);
  font-family: "Paperlogy";
  font-size: calc(var(--px) * 25);
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  letter-spacing: -0.07vw;
}

.con15_band_open {
  color: #feca3a;
}
/* con15 매장 상세 팝업 — .map_plus(+ 버튼) 트리거. 시안에 없는 신규 UI (맵 레이아웃 md 계약) */
.fixed_popup {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(6, 52, 134, 0.45);
  /* 헤더(9999)·퀵바(.contact_service 1111) 위, 개인정보 모달(.modal 9999999999) 아래 */
  z-index: 10000;
}

.popup {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff;
  border-radius: calc(var(--px) * 36);
  box-shadow: 0 calc(var(--px) * 24) calc(var(--px) * 64) rgba(6, 52, 134, 0.3);
}

.popup_left {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-shrink: 0;
  width: calc(var(--px) * 400);
  overflow: hidden;
  background-color: #eff5ff;
}

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

.popup_right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(var(--px) * 540);
  padding: calc(var(--px) * 62) calc(var(--px) * 58);
}

.popup_close {
  position: absolute;
  top: calc(var(--px) * 26);
  right: calc(var(--px) * 28);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: calc(var(--px) * 18);
}

.popup_close::before,
.popup_close::after {
  content: "";
  position: absolute;
  width: calc(var(--px) * 26);
  height: calc(var(--px) * 2);
  background-color: #063486;
  border-radius: 50vw;
}

.popup_close::before {
  transform: rotate(45deg);
}

.popup_close::after {
  transform: rotate(-45deg);
}

.popup_right_2nd {
  font-family: "Suit";
  font-size: calc(var(--px) * 34);
  font-weight: 700;
  line-height: 2.3vw;
  color: #131313;
  letter-spacing: -0.09vw;
}

.popup_line {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1vw;
  width: calc(var(--px) * 40);
  height: calc(var(--px) * 3);
  background-color: #063486;
  border-radius: 50vw;
}

.popup_right_3rd,
.popup_right_4th {
  font-family: "Suit";
  font-size: calc(var(--px) * 18);
  font-weight: 400;
  line-height: 1.6vw;
  color: #131313;
  letter-spacing: -0.05vw;
}

.popup_right_3rd {
  margin-top: 1.2vw;
}

.popup_right_4th {
  margin-top: 0.3vw;
}

.popup_right_3rd_left,
.popup_right_4th_left {
  margin-right: calc(var(--px) * 14);
  font-weight: 700;
  color: #063486;
}

.popup_links {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 12);
  margin-top: 1.9vw;
  width: 100%;
}

.popup_right_6th_left {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: calc(var(--px) * 18) calc(var(--px) * 36);
  font-family: "Suit";
  font-size: calc(var(--px) * 17);
  font-weight: 600;
  line-height: 1;
  color: #ffffff;
  background-color: #063486;
  border-radius: 50vw;
}

.popup_band_link {
  background-color: #168f46;
}

.popup_kakao_link {
  background-color: #fee500;
  color: #191919;
}

.popup_kakao_link:hover,
.popup_kakao_link:focus-visible {
  background-color: #f2da00;
}

/* ═══════════════════════ CON15 end ═══════════════════════ */

/* ═══════════════════════ CON16 — 성공 창업, 지금부터 맛KET과 시작하세요 ═══════════════════════ */
.con16 {
  justify-content: flex-start;
  padding-top: 2.5vw;
  padding-bottom: 2.7vw;
  background-color: #ffffff;
}

.con16_card {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  box-sizing: border-box;
  overflow: hidden;
  width: 95.6693%;
  height: calc(var(--px) * 810);
  background-color: #000000;
  border: calc(var(--px) * 10) solid #063486;
  border-radius: calc(var(--px) * 50);
}

.con16_awning {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * -89.5);
  top: calc(var(--px) * -11);
  width: calc(var(--px) * 1981);
  aspect-ratio: 1981 / 92;
}

.con16_left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 11vw;
  margin-left: calc(var(--px) * 236.5);
}

.con16_title {
  font-family: "Ria";
  font-size: calc(var(--px) * 45);
  line-height: 3.5vw;
  color: #ffffff;
  letter-spacing: -0.12vw;
}

.con16_title_lg {
  font-size: calc(var(--px) * 55);
  letter-spacing: -0.14vw;
}

.con16_title_point {
  color: #feca3a;
}

.con16_sub {
  margin-top: 1vw;
  font-size: calc(var(--px) * 20);
  font-weight: 300;
  line-height: 1.63vw;
  color: #ffffff;
  letter-spacing: -0.05vw;
}

.con16_sub_bold {
  font-weight: 700;
}

.con16_form {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  left: calc(var(--px) * 914.5);
  top: calc(var(--px) * 120);
  width: calc(var(--px) * 646);
}

.con16_field {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: calc(var(--px) * 68);
  padding-left: calc(var(--px) * 32);
  background-color: #ffffff;
  border-radius: calc(var(--px) * 10);
}

.con16_field + .con16_field {
  margin-top: 0.4vw;
}

.con16_req {
  flex-shrink: 0;
  margin-right: calc(var(--px) * 11);
  width: calc(var(--px) * 9);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #feca3a;
  letter-spacing: -0.05vw;
}

/* 고정 라벨 — placeholder 는 입력하면 사라져서 무슨 칸인지 알 수 없다.
   라벨을 입력 왼쪽 span 으로 분리해 항상 남기고, 값만 뒤에 붙는다 (필드는 row 유지) */
.con16_lb {
  flex-shrink: 0;
  /* 라벨 컬럼 고정폭 — 글자수(성함 2자 vs 연락처 3자)에 따라 값 시작점이
     달라지는 걸 막는다. 49 = 가장 넓은 라벨(연락처·이메일) 실측폭 */
  width: calc(var(--px) * 49);
  /* 라벨↔값 간격은 전부 이 margin 이 잡는다 (구분자 " - " 제거함) */
  margin-right: calc(var(--px) * 24);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  /* 텍스트 줄상자를 .con16_textarea(1.3vw)와 같게 — 내용칸은 align-items:flex-start 라
     줄상자 높이가 다르면 라벨과 첫 줄이 어긋난다 */
  line-height: 1.3vw;
  color: #000000;
  letter-spacing: -0.05vw;
  white-space: nowrap;
}

.con16_input {
  flex: 1 1 0;
  min-width: 0;
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: var(--color-point);
  letter-spacing: -0.05vw;
}

/* 힌트 텍스트 — 입력값(포인트색 700)과 구분되게 회색 + 굵기 낮춤 */
.con16_input::placeholder,
.con16_textarea::placeholder {
  color: #bbbbbb;
  font-weight: 400;
}

/* ── 커스텀 드롭다운 (네이티브 select 미사용 — OS 기본 옵션 리스트가 시안과 따로 논다) ──
   필드 자체가 트리거. 선택값은 같은 필드 안 hidden input 에 담아 폼메일로 나간다. */
.con16_sel {
  cursor: pointer;
  outline: none;
}

/* 열린 필드만 위로 — 뒤 형제 필드도 positioned(.rltv) 라 DOM 순서상 리스트를 덮는다.
   마크업 순서로는 못 푸는 자리(리스트는 자기 필드 안에 있어야 좌표가 맞음) */
.con16_sel_open {
  z-index: 5;
}

.con16_sel_val {
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  color: #000000;
  letter-spacing: -0.05vw;
}

/* 선택값 — 라벨은 그대로 두고 그 뒤에 붙는다 (라벨을 값으로 덮어쓰지 않는다).
   간격은 .con16_lb 와 같은 24 — 비어있을 땐 폭만 늘고 보이지 않는다 */
.con16_sel_pick {
  margin-left: calc(var(--px) * 24);
  color: var(--color-point);
}

.con16_caret {
  right: calc(var(--px) * 25);
  top: calc(var(--px) * 32);
  width: 0;
  height: 0;
  border-left: calc(var(--px) * 7.5) solid transparent;
  border-right: calc(var(--px) * 7.5) solid transparent;
  border-top: calc(var(--px) * 10) solid #000000;
  transition: transform 0.25s ease;
}

/* width/height 는 0 이지만 보더가 만든 border-box(15x10)가 변형 기준이라 중심 회전이 맞는다 */
.con16_sel_open .con16_caret {
  transform: rotate(180deg);
}

.con16_sel_list {
  position: absolute;
  left: 0;
  top: calc(100% + var(--px) * 6);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
  overflow-y: auto;
  width: 100%;
  padding: calc(var(--px) * 8);
  background-color: #ffffff;
  border-radius: calc(var(--px) * 10);
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 30) rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(calc(var(--px) * -8));
  transition: opacity 0.22s, visibility 0.22s, transform 0.22s cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* 지역 17개는 세로로 쌓으면 스크롤이 생긴다 → 4열 wrap 으로 한 화면에 다 보이게 */
.con16_sel_list_lg {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}

.con16_sel_open .con16_sel_list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.con16_sel_opt {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-shrink: 0;
  box-sizing: border-box;
  height: calc(var(--px) * 46);
  padding-left: calc(var(--px) * 21);
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  color: #333333;
  border-radius: calc(var(--px) * 8);
  letter-spacing: -0.05vw;
  transition: background-color 0.15s, color 0.15s;
}

.con16_sel_opt:hover {
  background-color: #eff5ff;
  color: var(--color-point);
}

.con16_sel_opt_on {
  background-color: var(--color-point);
  color: #ffffff;
}

.con16_sel_opt_col {
  justify-content: center;
  width: 25%;
  padding-left: 0;
}

.con16_area {
  align-items: flex-start;
  height: calc(var(--px) * 121);
  padding-top: 1.05vw;
  padding-left: calc(var(--px) * 52);
}

.con16_textarea {
  flex: 1 1 0;
  min-width: 0;
  height: calc(var(--px) * 80);
  font-size: calc(var(--px) * 20);
  font-weight: 700;
  line-height: 1.3vw;
  color: var(--color-point);
  letter-spacing: -0.05vw;
  resize: none;
}

.con16_agree {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  margin-top: 0.4vw;
  width: 100%;
}

.con16_agree_check {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* 미체크 = 흰 링(빈 원). 체크 = 흰색으로 채워지고 안에 네이비 체크(✓) */
.con16_agree_box {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  flex-shrink: 0;
  width: calc(var(--px) * 27);
  height: calc(var(--px) * 27);
  background-color: transparent;
  border: 2px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.con16_agree_box:hover {
  transform: scale(1.1);
}

.con16_agree_check:checked + .con16_agree_box {
  background-color: #ffffff;
}

/* 체크 표시 = 좌·하 보더만 남긴 사각형을 -45deg 회전 → ✓ */
.con16_agree_dot {
  display: flex;
  box-sizing: border-box;
  width: calc(var(--px) * 13);
  height: calc(var(--px) * 7);
  margin-top: calc(var(--px) * -3);
  background-color: transparent;
  border-left: 2px solid var(--color-point);
  border-bottom: 2px solid var(--color-point);
  border-radius: 0;
  transform: rotate(-45deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
}

.con16_agree_check:checked + .con16_agree_box .con16_agree_dot {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.con16_agree_txt {
  margin-left: calc(var(--px) * 7);
  margin-right: calc(var(--px) * 3);
  font-size: calc(var(--px) * 16);
  font-weight: 300;
  color: #ffffff;
  cursor: pointer;
  letter-spacing: -0.04vw;
}

/* ── 문의하기 CTA + 샤인 스윕 호버 ──
   overflow:hidden + border-radius = 광택 줄기를 버튼 모양으로 클립 */
.con16_submit {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin-top: 1.4vw;
  width: calc(var(--px) * 305);
  height: calc(var(--px) * 66);
  font-family: "Ria";
  font-size: calc(var(--px) * 26);
  color: #111111;
  background-color: #feca3a;
  border-radius: calc(var(--px) * 10);
  letter-spacing: -0.07vw;
  cursor: pointer;
  transition: filter 0.3s, box-shadow 0.3s;
}

/* 평상시 off-left(클립되어 안 보임) → 호버 시 좌→우 1회 스윕.
   base 는 transition:0s 라 언호버 되돌림이 안 보인다 (한 방향 1회) */
.con16_submit::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10%;
  z-index: 2;
  width: 45%;
  height: 120%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-220%) skewX(-18deg);
  transition: transform 0s;
  pointer-events: none;
}

.con16_submit:hover {
  filter: brightness(1.06);
  box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 26) rgba(0, 0, 0, 0.3);
}

/* ease = 글라이드가 보인다. 급격한 ease-out 은 초반에 확 지나가 스윕이 안 보임 */
.con16_submit:hover::before {
  transform: translateX(320%) skewX(-18deg);
  transition: transform 0.7s ease;
}

.con16_submit:active {
  transform: scale(0.985);
  transition: transform 0.1s ease;
}

/* 터치기기 = hover 없음 → 4s 주기 자동 샤인 + 탭 눌림. 호버 리프트 잔상은 끈다 */
@media (hover: none) {
  .con16_submit::before {
    animation: fs_shine_auto 4s ease-in-out infinite;
  }
  .con16_submit:hover {
    filter: none;
    box-shadow: none;
  }
  .con16_submit:active {
    transform: scale(0.96);
    transition: transform 0.12s ease;
  }
}

.con16_strawberry {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 80.5);
  top: calc(var(--px) * 132);
  width: calc(var(--px) * 107);
  aspect-ratio: 107 / 110;
}

.con16_apple {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(var(--px) * 1549.5);
  top: calc(var(--px) * 45);
  width: calc(var(--px) * 163);
  aspect-ratio: 163 / 154;
}

.con16_basket {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 30.4462%;
  top: 26.6vw;
  width: calc(var(--px) * 406);
  aspect-ratio: 406 / 365;
}

.con16_kiwi {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 36.378%;
  top: 24.8vw;
  width: calc(var(--px) * 136);
  aspect-ratio: 136 / 135;
}
/* ═══════════════════════ CON16 end ═══════════════════════ */