@charset "UTF-8";

/* merge-build.js 산출물 — 납품 시 css/sections/*.css 전량이 이 아래로 합쳐진다. 손으로 쓰지 않는다(CLAUDE.md 원칙 14). */
/* merge-build:ccon01 */
/* ccon01 — 외부사일로 시스템 소개 (모바일: 탭바 가로스크롤 또는 축약, 요약 박스 아이콘 상단 배치 후보) */
.ccon01 {
  background: var(--bg-color);
}

.ccon01__gradient {
  height: auto;
}

.ccon01_iner {
  padding: 0 calc(var(--px)*2) calc(var(--px)*117) 0;
}

.ccon01__head {
  margin-top: calc(var(--px)*70);
}

.ccon01__eyebrow {
  text-transform: uppercase;
}

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

.ccon01__lead {
  margin-top: calc(var(--px)*22);
}

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

.ccon01__desc {
  margin-top: calc(var(--px)*42);
}

.ccon01__note {
  width: calc(var(--px)*1440);
  margin-top: calc(var(--px)*50);
  padding: calc(var(--px)*28) calc(var(--px)*17);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px)*23);
}

.ccon01__note-icon {
  top: 50%;
  left: calc(var(--px)*17);
  translate: 0 -50%; /* transform 은 GSAP scale 이 소유 — 개별 translate 속성으로 분리 */
  padding: calc(var(--px)*15) calc(var(--px)*22.5);
  background: var(--primary);
  border-radius: calc(var(--px)*23);
}

/* IMG:AUTO ccon01 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon01__photo {
    width: calc(var(--px)*1439);
    aspect-ratio: 1439 / 473;
}

.ccon01__note-bulb {
    width: calc(var(--px)*39);
    aspect-ratio: 39 / 54;
}
/* /IMG:AUTO ccon01 END */

/* FONT:AUTO ccon01 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon01 {
    font-family: var(--font-pretendard);
    text-align: center;
}


.ccon01__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.ccon01__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.ccon01__lead,
.ccon01__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}

.ccon01__note-text {
    font-size: var(--headS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.28;
    color: #111111;
}
/* /FONT:AUTO ccon01 END */

/* INK:AUTO ccon01 */
.ccon01__title { margin-top: calc(var(--px) * 32.55); margin-bottom: calc(var(--px) * -6.44); } /* base 40,0 */
.ccon01__desc { margin-top: calc(var(--px) * 38); margin-bottom: calc(var(--px) * -4); } /* base 42,0 */
.ccon01__note-text { margin-top: calc(var(--px) * -3.94); margin-bottom: calc(var(--px) * -3.93); } /* base 0,0 */
.ccon01__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.ccon01__lead { margin-top: calc(var(--px) * 18); margin-bottom: calc(var(--px) * -1); } /* base 22,0 */
/* /INK:AUTO ccon01 END */

@media (max-width:599px) {
  .ccon01_iner {
    padding: 0 4.2667vw 12.8vw;
  }

  .ccon01__head {
    margin-top: 4.2667vw;
  }

  .ccon01__title {
    margin-top: 3.2vw;
  }

  .ccon01__lead {
    margin-top: 3.2vw;
  }

  .ccon01__photo {
    width: 100%;
    margin-top: 6.4vw;
  }

  .ccon01__desc {
    margin-top: 6.4vw;
  }

  .ccon01__note {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 6.4vw;
    padding: 5.3333vw 4.2667vw;
    border-radius: 4.2667vw;
  }

  .ccon01__note-icon {
    position: relative;
    top: auto;
    left: auto;
    margin-bottom: 3.2vw;
    padding: 2.1333vw 3.2vw;
    border-radius: 3.2vw;
  }

  .ccon01__note-bulb {
    width: 6.4vw;
  }
}

/* /merge-build:ccon01 */
/* merge-build:ccon02 */
/* ccon02 — 왜 외부사일로가 필요할까요 (좌 카피 · 우 카드 3장, 가운데 카드 강조가 시안 기본) */
.ccon02_iner {
  padding: calc(var(--px)*144) calc(var(--px)*232) calc(var(--px)*146);
}

.ccon02__title {
  padding-left: calc(var(--px)*2);
  margin-top: calc(var(--px)*-5);
  margin-bottom: calc(var(--px)*37);
}

.ccon02__desc {
  padding-left: calc(var(--px)*4);
  margin-bottom: calc(var(--px)*41);
}

.ccon02__note {
  width: calc(var(--px)*542);
  padding: calc(var(--px)*22) calc(var(--px)*8) calc(var(--px)*24.45) calc(var(--px)*24);
  gap: calc(var(--px)*18);
  border: 1px solid rgba(201, 204, 201, .302);
  border-radius: calc(var(--px)*11);
}

.ccon02__note-text {
  margin-top: calc(var(--px)*3);
}

.ccon02__note-mark {
  flex: none;
  width: calc(var(--px)*23);
  height: calc(var(--px)*23);
  background: #f2ffb8;
  border-radius: 50%;
}

.ccon02__cards {
  flex: none;
  width: calc(var(--px)*679);
  height: calc(var(--px)*634); /* HEIGHT: 활성 카드 1장 기준 실측 — 전환 중 padding 합이 출렁여 섹션이 흔들리지 않게 고정 */
  gap: calc(var(--px)*10);
}

.ccon02__card {
  padding: calc(var(--px)*35) calc(var(--px)*50);
  gap: calc(var(--px)*37);
  background: #fff;
  border: 1px solid #c9ccc9;
  border-radius: calc(var(--px)*23);
  opacity: .66; /* 비활성 카드 = 시안 #ACAFB4, 아이콘·텍스트까지 같이 어두워짐 */
  transition: opacity .4s ease-out, box-shadow .4s ease-out, padding-block .4s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .ccon02__card {
    transition: none;
  }
}

.ccon02__card.is-active {
  padding-block: calc(var(--px)*73.5);
  opacity: 1;
  box-shadow: 0 0 calc(var(--px)*30) rgba(42, 150, 255, .89);
}

.ccon02__icon {
  flex: none;
  width: calc(var(--px)*107);
  height: calc(var(--px)*107);
  background: var(--light-1);
  border: 1px solid #dbeadd;
  border-radius: 50%;
}

.ccon02__card-body {
  padding: calc(var(--px)*4) 0 calc(var(--px)*3.04);
}

.ccon02__card-desc {
  margin-top: calc(var(--px)*16);
}

/* IMG:AUTO ccon02 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon02__icon-img.ccon02__icon-img--cross {
    width: calc(var(--px)*62);
    aspect-ratio: 62 / 63;
}

.ccon02__icon-img.ccon02__icon-img--route {
    width: calc(var(--px)*62);
    aspect-ratio: 62 / 62;
}

.ccon02__icon-img.ccon02__icon-img--shield {
    width: calc(var(--px)*53);
    aspect-ratio: 53 / 62;
}
/* /IMG:AUTO ccon02 END */

/* FONT:AUTO ccon02 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon02 {
    font-family: var(--font-pretendard);
}

.ccon02__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
}

.ccon02__title-lead,
.ccon02__title-tail {
    color: #ffffff;
}

.ccon02__title-em {
    color: var(--primary);
}

.ccon02__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #ffffff;
}

.ccon02__note {
    font-size: var(--bodyS);
    letter-spacing: -0.03em;
    line-height: 1.35;
}

.ccon02__note-mark {
    font-weight: 700;
    color: var(--tertiary);
}

.ccon02__note-text {
    font-weight: 300;
    color: #ffffff;
}

.ccon02__card-title {
    font-size: var(--subheadM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.37;
    color: #111111;
}

.ccon02__card-desc {
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #777777;
}
/* /FONT:AUTO ccon02 END */

/* INK:AUTO ccon02 */
.ccon02__title-lead { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -6.55); } /* base 0,0 */
.ccon02__title-em { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -5.55); } /* base 0,0 */
.ccon02__title-tail { margin-top: calc(var(--px) * -6.45); margin-bottom: calc(var(--px) * -6.55); } /* base 0,0 */
.ccon02__card-title { margin-top: calc(var(--px) * -4.94); margin-bottom: calc(var(--px) * -4.93); } /* base 0,0 */
.ccon02__note-text { margin-top: calc(var(--px) * -1.14); margin-bottom: calc(var(--px) * -3.11); } /* base 3,0 */
.ccon02__card-desc { margin-top: calc(var(--px) * 12.95); margin-bottom: calc(var(--px) * -3.04); } /* base 16,0 */
.ccon02__desc { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * 40); } /* base 0,41 */
/* /INK:AUTO ccon02 END */

@media (max-width:599px) {
  .ccon02_iner {
    flex-direction: column;
    padding: 17.0667vw 5.3333vw;
    gap: 10.6667vw;
  }

  .ccon02__intro {
    width: 100%;
  }

  .ccon02__title {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 4.2667vw;
  }

  .ccon02__desc {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 6.4vw;
  }

  .ccon02__note {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 3.2vw;
    padding: 5.3333vw;
    border-radius: 2.1333vw;
  }

  .ccon02__note-mark {
    width: 5.3333vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .ccon02__note-text {
    margin-top: 0;
  }

  .ccon02__cards {
    width: 100%;
    height: auto;
    gap: 3.2vw;
  }

  .ccon02__card {
    flex-direction: column;
    align-items: center;
    padding: 6.4vw 5.3333vw;
    gap: 4.2667vw;
    border-radius: 4.2667vw;
  }

  .ccon02__card.is-active {
    padding-block: 8.5333vw;
    box-shadow: 0 0 4.8vw rgba(42, 150, 255, .89);
  }

  .ccon02__icon {
    width: 17.0667vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .ccon02__icon-img.ccon02__icon-img--cross,
  .ccon02__icon-img.ccon02__icon-img--route {
    width: 9.8667vw;
  }

  .ccon02__icon-img.ccon02__icon-img--shield {
    width: 8.4vw;
  }

  .ccon02__card-body {
    padding: 0;
  }

  .ccon02__card-desc {
    margin-top: 2.1333vw;
  }
}

/* /merge-build:ccon02 */
/* merge-build:ccon03 */
/* ccon03 — 외부사일로 핵심 장점 카드. 모바일: 4열→2열→1열 후보, 카드 내부 column 유지 */
.ccon03 {
  background-color: var(--bg-color);
}

.ccon03_iner {
  padding-top: calc(var(--px) * 125);
  padding-bottom: calc(var(--px) * 117);
}

.ccon03__head {
  gap: calc(var(--px) * 29);
  padding-bottom: calc(var(--px) * 4);
}

.ccon03__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--px) * 10);
  width: calc(var(--px) * 1439);
  margin-top: calc(var(--px) * 51);
}

.ccon03__card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--px) * 19);
  height: 100%;
  padding: calc(var(--px) * 44) 0 calc(var(--px) * 56) calc(var(--px) * 44);
  border-radius: calc(var(--px) * 23);
  background-color: var(--tertiary);
  transition: background-color 0.3s ease-out, color 0.3s ease-out;
}

.ccon03__card::before {
  content: "";
  width: calc(var(--px) * 4);
  padding-top: calc(var(--px) * 12);
  margin-left: calc(var(--px) * 2);
  background-color: var(--primary);
  transition: background-color 0.3s ease-out;
}

.ccon03__card-desc,
.ccon03__card-desc--04 {
  opacity: 0.65;
  transition: opacity 0.3s ease-out;
}

.ccon03__card-desc {
  margin-top: calc(var(--px) * 3);
}

.ccon03__card-desc--04 {
  margin-top: calc(var(--px) * 3);
}

@media (hover: hover) {
  .ccon03__card:hover {
    background-color: var(--primary);
    color: #111111;
  }

  .ccon03__card:hover::before {
    background-color: var(--tertiary);
  }

  .ccon03__card:hover .ccon03__card-desc,
  .ccon03__card:hover .ccon03__card-desc--04 {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ccon03__card,
  .ccon03__card::before,
  .ccon03__card-desc,
  .ccon03__card-desc--04 {
    transition: none;
  }
}

/* FONT:AUTO ccon03 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon03 {
    font-family: var(--font-pretendard);
}

.ccon03__head {
    text-align: center;
}

.ccon03__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.0362em; /* OVR */
    line-height: 1.22;
    color: #111111;
}

.ccon03__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}

.ccon03__card-title {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: 0.004em; /* OVR */
    line-height: 1.25;
}

.ccon03__card-desc,
.ccon03__card-desc--04 {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.055em; /* OVR */
    line-height: 1.33;
}

.ccon03__card {
    color: #ffffff;
}
/* /FONT:AUTO ccon03 END */

/* INK:AUTO ccon03 */
.ccon03__title { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -6.44); } /* base 0,0 */
.ccon03__desc { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
.ccon03__card-title { margin-top: calc(var(--px) * -3.62); margin-bottom: calc(var(--px) * -3.62); } /* base 0,0 */
.ccon03__card-desc { margin-top: calc(var(--px) * -0.97); margin-bottom: calc(var(--px) * -2.95); } /* base 3,0 */
.ccon03__card-desc--04 { margin-top: calc(var(--px) * 0.03); margin-bottom: calc(var(--px) * -2.95); } /* base 3,0 */
/* /INK:AUTO ccon03 END */

@media (max-width: 599px) {
  .ccon03_iner {
    padding: 21.3333vw 5.3333vw 17.0667vw;
  }

  .ccon03__head {
    gap: 4.2667vw;
    padding-bottom: 0;
  }

  .ccon03__list {
    grid-template-columns: 1fr;
    gap: 3.2vw;
    width: 100%;
    margin-top: 8.5333vw;
  }

  .ccon03__card {
    gap: 3.2vw;
    padding: 6.4vw 6.4vw 8.5333vw 6.4vw;
    border-radius: 4.2667vw;
  }

  .ccon03__card::before {
    width: 1.0667vw;
    padding-top: 2.1333vw;
    margin-left: 0;
  }

  .ccon03__card-desc,
  .ccon03__card-desc--04 {
    margin-top: 0.5333vw;
  }
}

/* /merge-build:ccon03 */
/* merge-build:ccon04 */
/* ccon04 — 외부사일로 시스템 구성 슬라이드. 모바일: 카드 1장 노출, 좌우 부분노출 유지, 화살표는 하단 후보 */
.ccon04 {
  background-color: var(--bg-color);
}

.ccon04_box {
  width: calc(var(--px) * 1805);
  margin-top: calc(var(--px) * -3);
  padding-top: calc(var(--px) * 99);
  padding-bottom: calc(var(--px) * 107);
  border-radius: calc(var(--px) * 80);
  background-color: var(--light-1);
}

.ccon04__head {
  gap: calc(var(--px) * 30);
  padding-bottom: calc(var(--px) * 4);
}

.ccon04__carousel {
  width: calc(var(--px) * 1905);
  margin-top: calc(var(--px) * 35);
}

.ccon04__swiper {
  width: 100%;
  padding-block: calc(var(--px) * 24) calc(var(--px) * 44); /* 호버 상승·그림자가 swiper overflow 에 잘리지 않게 위아래 여유 */
  margin-block: calc(var(--px) * -24) calc(var(--px) * -44);
}

.ccon04__swiper .ccon04__slide { /* swiper-bundle.css 가 body 에서 뒤에 로드돼 .swiper-slide 를 덮으므로 한 단계 올림 */
  width: calc(var(--px) * 448);
  transition: translate 0.5s;
  translate: calc(var(--px) * -86) 0; /* 활성 카드 좌우에 화살표 자리를 비우려 이웃을 밀어냄 */
}

.ccon04__swiper .ccon04__slide.swiper-slide-active {
  translate: none;
}

.ccon04__swiper .ccon04__slide.swiper-slide-active ~ .ccon04__slide {
  translate: calc(var(--px) * 86) 0;
}

.ccon04__swiper .ccon04__slide.swiper-slide-active + .ccon04__slide {
  translate: calc(var(--px) * 84) 0;
}

.ccon04__swiper .ccon04__slide.swiper-slide-active + .ccon04__slide + .ccon04__slide {
  translate: calc(var(--px) * 87) 0;
}

.ccon04__card {
  align-self: stretch; /* 슬라이드가 column+center 라 내용폭으로 줄어듦 — 448 을 채워 사진 좌우 여백 확보 */
  padding: calc(var(--px) * 12) 0 calc(var(--px) * 28);
  border: 1px solid #c9ccc9;
  border-radius: calc(var(--px) * 23);
  background-color: var(--bg-color);
  transition: transform .3s ease-out, border-color .3s ease-out, box-shadow .3s ease-out;
}

@media (hover: hover) {
  .ccon04__card:hover {
    transform: translateY(-1.5%);
    border-color: var(--primary);
    box-shadow: 0 calc(var(--px) * 12) calc(var(--px) * 28) color-mix(in srgb, var(--primary) 14%, transparent);
  }
}

.ccon04__swiper .swiper-slide-active .ccon04__num {
  animation: ccon04-pop .45s ease-out;
}

@keyframes ccon04-pop {
  0% { transform: scale(.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.ccon04__num {
  position: absolute;
  bottom: calc(var(--px) * 123);
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--px) * 54);
  padding-block: calc(var(--px) * 5);
  border: 1px solid var(--primary);
  border-radius: 50vw;
  background-color: #c7f208;
}

.ccon04__card-title {
  margin-top: calc(var(--px) * 33);
}

.ccon04__card-desc {
  margin-top: calc(var(--px) * 18);
}

.ccon04__arrow {
  top: calc(var(--px) * 176);
  width: calc(var(--px) * 51);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--tertiary);
  z-index: 2; /* swiper 가 .swiper{z-index:1} 로 스택 컨텍스트를 만듦 */
  transition: background-color .3s ease-out, scale .15s ease-out;
}

.ccon04__arrow-icon {
  transition: translate .3s ease-out;
}

@media (hover: hover) {
  .ccon04__arrow:hover {
    background-color: color-mix(in srgb, var(--tertiary) 65%, var(--primary));
  }

  .ccon04__arrow:hover .ccon04__arrow-icon--prev {
    translate: -12% 0;
  }

  .ccon04__arrow:hover .ccon04__arrow-icon--next {
    translate: 12% 0;
  }
}

.ccon04__arrow:focus-visible {
  background-color: color-mix(in srgb, var(--tertiary) 65%, var(--primary));
}

.ccon04__arrow:active {
  scale: .94;
  transition-duration: .15s;
}

.ccon04__arrow--prev {
  left: calc(var(--px) * 653);
}

.ccon04__arrow--next {
  right: calc(var(--px) * 654);
}


/* IMG:AUTO ccon04 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon04__photo {
    width: calc(var(--px)*420);
    aspect-ratio: 420 / 256;
}

.ccon04__arrow-icon.ccon04__arrow-icon--prev {
    width: calc(var(--px)*27);
    aspect-ratio: 27 / 25;
}

.ccon04__arrow-icon.ccon04__arrow-icon--next {
    width: calc(var(--px)*27);
    aspect-ratio: 27 / 24;
}
/* /IMG:AUTO ccon04 END */


/* FONT:AUTO ccon04 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon04 {
    font-family: var(--font-pretendard);
    text-align: center;
}

.ccon04__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.ccon04__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}

.ccon04__num {
    font-size: var(--bodyXS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #000000;
}

.ccon04__card-title {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.25;
    color: #111111;
}

.ccon04__card-desc {
    font-size: var(--bodyS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.33;
    color: #767676;
}

.ccon04__arrow-icon.ccon04__arrow-icon--prev {
    font-size: var(--titleS);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1; /* OVR */
    color: #ffffff;
}

.ccon04__arrow-icon.ccon04__arrow-icon--next {
    font-size: var(--titleXS);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1; /* OVR */
    color: var(--primary);
}
/* /FONT:AUTO ccon04 END */

/* INK:AUTO ccon04 */
.ccon04__title { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -6.44); } /* base 0,0 */
.ccon04__desc { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
.ccon04__card-title { margin-top: calc(var(--px) * 29.38); margin-bottom: calc(var(--px) * -3.62); } /* base 33,0 */
.ccon04__card-desc { margin-top: calc(var(--px) * 14.03); margin-bottom: calc(var(--px) * -2.96); } /* base 18,0 */
/* /INK:AUTO ccon04 END */

@media (max-width:599px) {
  .ccon04 {
    word-break: keep-all;
  }

  .ccon04_box {
    width: 92vw;
    margin-top: -0.5333vw;
    padding-top: 10.6667vw;
    padding-bottom: 10.6667vw;
    border-radius: 6.4vw;
  }

  .ccon04__head {
    gap: 4.2667vw;
    padding-inline: 5.3333vw;
    padding-bottom: 0;
  }

  .ccon04__carousel {
    width: 100vw;
    margin-top: 6.4vw;
    padding-bottom: 14.9333vw;
  }

  .ccon04__swiper .ccon04__slide {
    width: 70vw;
    translate: none;
  }

  .ccon04__swiper .ccon04__slide.swiper-slide-active {
    translate: none;
  }

  .ccon04__swiper .ccon04__slide.swiper-slide-active ~ .ccon04__slide {
    translate: none;
  }

  .ccon04__swiper .ccon04__slide.swiper-slide-active + .ccon04__slide {
    translate: none;
  }

  .ccon04__swiper .ccon04__slide.swiper-slide-active + .ccon04__slide + .ccon04__slide {
    translate: none;
  }

  .ccon04__card {
    height: 100%;
    padding: 2.1333vw 2.1333vw 4.2667vw;
    border-radius: 4.2667vw;
  }

  .ccon04__photo {
    width: 65.7333vw;
  }

  .ccon04__num {
    top: 38.7733vw;
    bottom: auto;
    width: 14.4vw;
    padding-block: 1.0667vw;
  }

  .ccon04__card-title {
    margin-top: 6.4vw;
  }

  .ccon04__card-desc {
    margin-top: 3.2vw;
  }

  .ccon04__arrow {
    top: auto;
    bottom: 0;
    width: 10.6667vw;
  }

  .ccon04__arrow--prev {
    left: 37.2vw;
  }

  .ccon04__arrow--next {
    right: 37.2vw;
  }

  .ccon04__arrow-icon.ccon04__arrow-icon--prev,
  .ccon04__arrow-icon.ccon04__arrow-icon--next {
    width: 5.3333vw;
  }
}

/* /merge-build:ccon04 */
/* merge-build:ccon05 */
/* ccon05 — 외부사일로 통합형 사료공급 플로우. 모바일: 6카드 flow 를 2열 wrap, 화살표 숨김 */
.ccon05_iner {
  padding-top: calc(var(--px) * 118);
  padding-bottom: calc(var(--px) * 161);
}

.ccon05__head {
  gap: calc(var(--px) * 35);
}

.ccon05__eyebrow {
  text-transform: uppercase;
}

.ccon05__title {
  margin-top: calc(var(--px) * 3);
}

.ccon05__lead {
  margin-top: calc(var(--px) * 1);
  padding-block: calc(var(--px) * 1.6);
  padding-inline: calc(var(--px) * 12);
  background: #f2ffb8;
}

.ccon05__flow {
  margin-top: calc(var(--px) * 78);
  gap: calc(var(--px) * 13.5);
}

.ccon05__card {
  width: calc(var(--px) * 171);
  min-height: calc(var(--px) * 245);
  padding-top: calc(var(--px) * 41);
  border: 1px solid #c9ccc9;
  border-radius: calc(var(--px) * 85);
  background: #fff;
  animation: ccon05-pick 12s ease-in-out infinite backwards;
}

.ccon05__card:nth-child(3) { animation-delay: 2s; }
.ccon05__card:nth-child(5) { animation-delay: 4s; }
.ccon05__card:nth-child(7) { animation-delay: 6s; }
.ccon05__card:nth-child(9) { animation-delay: 8s; }
.ccon05__card:nth-child(11) { animation-delay: 10s; }

.ccon05__card.is-active {
  margin-top: calc(var(--px) * -40);
  border-color: #c7f208;
}

@keyframes ccon05-pick {
  0% { margin-top: 0; border-color: #c9ccc9; }
  2%, 14.67% { margin-top: calc(var(--px) * -40); border-color: #c7f208; }
  16.67%, 100% { margin-top: 0; border-color: #c9ccc9; }
}

@media (prefers-reduced-motion: reduce) {
  .ccon05__card { animation: none; }
}

.ccon05__card-bar {
  width: calc(var(--px) * 4);
  min-height: calc(var(--px) * 12);
  background: var(--primary);
}

.ccon05__card-visual {
  margin-top: calc(var(--px) * 25);
  min-height: calc(var(--px) * 62);
}

.ccon05__card-title {
  margin-top: calc(var(--px) * 16);
}

.ccon05__arrow {
  align-self: center;
}

.ccon05__icon--feeding {
  margin-left: calc(var(--px) * 8);
}

.ccon05__desc {
  margin-top: calc(var(--px) * 41);
}

/* IMG:AUTO ccon05 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon05__icon.ccon05__icon--silo {
    width: calc(var(--px)*48);
    aspect-ratio: 48 / 55;
}

.ccon05__arrow {
    width: calc(var(--px)*36);
    aspect-ratio: 36 / 35;
}

.ccon05__icon.ccon05__icon--storage {
    width: calc(var(--px)*41);
    aspect-ratio: 41 / 52;
}

.ccon05__icon.ccon05__icon--transfer {
    width: calc(var(--px)*63);
    aspect-ratio: 63 / 43;
}

.ccon05__icon.ccon05__icon--distribution {
    width: calc(var(--px)*63);
    aspect-ratio: 63 / 53;
}

.ccon05__icon.ccon05__icon--feeding {
    width: calc(var(--px)*65);
    aspect-ratio: 65 / 55;
}

.ccon05__icon.ccon05__icon--maintenance {
    width: calc(var(--px)*62);
    aspect-ratio: 62 / 57;
}
/* /IMG:AUTO ccon05 END */

/* FONT:AUTO ccon05 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon05 {
    font-family: var(--font-pretendard);
    text-align: center;
}

.ccon05__head {
    font-weight: 700;
}

.ccon05__eyebrow {
    font-size: var(--bodyL);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.ccon05__title {
    font-size: var(--titleM);
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR */
    color: #111111;
}

.ccon05__lead {
    font-size: var(--headS);
    letter-spacing: -0.03em;
    line-height: 1.17;
    color: #222222;
}

.ccon05__flow {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.57;
    color: #111111;
}

.ccon05__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}
/* /FONT:AUTO ccon05 END */

/* INK:AUTO ccon05 */
.ccon05__card-title { margin-top: calc(var(--px) * 9.02); margin-bottom: calc(var(--px) * -6.98); } /* base 16,0 */
.ccon05__title { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -6); } /* base 3,0 */
.ccon05__desc { margin-top: calc(var(--px) * 37); margin-bottom: calc(var(--px) * -4); } /* base 41,0 */
.ccon05__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
/* /INK:AUTO ccon05 END */

@media (max-width:599px) {
  .ccon05_iner { padding-top: 17.0667vw; padding-bottom: 21.3333vw; padding-inline: 5.3333vw; }
  .ccon05__head { gap: 5.3333vw; }
  .ccon05__eyebrow, .ccon05__title { margin-block: 0; }
  .ccon05__lead { margin-top: 0; padding-block: 1.0667vw; padding-inline: 3.2vw; }
  .ccon05__flow { flex-wrap: wrap; justify-content: center; margin-top: 10.6667vw; gap: 2.1333vw; }
  .ccon05__card { width: 28.2667vw; min-height: 38vw; padding-top: 6.4vw; border-radius: 50vw; animation-name: ccon05-pick-mo; }
  .ccon05__card.is-active { margin-top: 0; }
  .ccon05__card-bar { width: 1.0667vw; min-height: 2.1333vw; }
  .ccon05__card-visual { margin-top: 4.2667vw; min-height: 10.6667vw; }
  .ccon05__card-title { margin-top: 2.1333vw; margin-bottom: 0; }
  .ccon05__icon.ccon05__icon--silo { width: 7.68vw; }
  .ccon05__icon.ccon05__icon--storage { width: 6.56vw; }
  .ccon05__icon.ccon05__icon--transfer { width: 10.08vw; }
  .ccon05__icon.ccon05__icon--distribution { width: 10.08vw; }
  .ccon05__icon.ccon05__icon--feeding { width: 10.4vw; }
  .ccon05__icon.ccon05__icon--maintenance { width: 9.92vw; }
  .ccon05__desc { margin-top: 6.4vw; margin-bottom: 0; }
  @keyframes ccon05-pick-mo {
    0% { border-color: #c9ccc9; }
    2%, 14.67% { border-color: #c7f208; }
    16.67%, 100% { border-color: #c9ccc9; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ccon05__card { animation: none; }
  }
}

/* /merge-build:ccon05 */
/* merge-build:ccon06 */
/* ccon06 — 외부사일로 설계 전 체크 카드. 모바일: 카드 4열→1열 가로 행, 패널 좌우 패딩 축소, 라벨은 패널 상단 유지 */
.ccon06 {
  background-color: var(--light-1);
}

.ccon06_iner {
  padding-top: calc(var(--px) * 134);
}

.ccon06__head {
  gap: calc(var(--px) * 34);
}

.ccon06__lead {
  display: inline-block;
  margin-bottom: calc(var(--px) * 15);
  padding: calc(var(--px) * 4) calc(var(--px) * 12);
  background-color: #f2ffb8;
}

.ccon06__panel {
  width: calc(var(--px) * 1439);
  margin-top: calc(var(--px) * 64);
  padding: calc(var(--px) * 54) 0 calc(var(--px) * 53);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px) * 26);
}

.ccon06__label {
  top: calc(var(--px) * -27);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--px) * 11) calc(var(--px) * 29);
  border: 1px solid var(--primary);
  border-radius: calc(var(--px) * 26);
  background-color: #c7f208;
}

.ccon06__list {
  display: grid;
  grid-template-columns: repeat(4, calc(var(--px) * 312));
  gap: calc(var(--px) * 11) calc(var(--px) * 13);
}

.ccon06__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: calc(var(--px) * 172);
  padding: calc(var(--px) * 28) calc(var(--px) * 34) calc(var(--px) * 32) calc(var(--px) * 47);
  border-radius: calc(var(--px) * 23);
  background-color: var(--bg-color);
}

.ccon06__check {
  align-self: flex-end;
  width: calc(var(--px) * 44);
  height: calc(var(--px) * 44);
  border-radius: 50%;
  background-color: #f2f6f3;
  transition: background-color .3s ease-out;
}

.ccon06__card.is-active .ccon06__check {
  background-color: var(--tertiary);
}

.ccon06__check-icon {
  margin-bottom: calc(var(--px) * 2);
}

/* IMG:AUTO ccon06 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon06__check-icon {
    width: calc(var(--px)*26);
    aspect-ratio: 26 / 25;
}
/* /IMG:AUTO ccon06 END */

/* FONT:AUTO ccon06 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon06 {
    font-family: var(--font-pretendard);
}

.ccon06__head {
    text-align: center;
}

.ccon06__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2; /* OVR */
    color: #111111;
}

.ccon06__desc {
    color: #222222;
}

.ccon06__lead {
    font-size: var(--headS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.17;
}

.ccon06__body {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.45; /* OVR */
}

.ccon06__tail {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.45; /* OVR */
}

.ccon06__panel {
    font-size: var(--headS);
    letter-spacing: -0.03em;
}

.ccon06__label-em {
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    color: #000000;
}

.ccon06__list {
    font-weight: 700;
    line-height: 1.2; /* OVR */
    color: #111111;
}
/* /FONT:AUTO ccon06 END */

/* INK:AUTO ccon06 */
.ccon06__title { margin-top: calc(var(--px) * -7); margin-bottom: calc(var(--px) * -6); } /* base 0,0 */
.ccon06__body { margin-top: calc(var(--px) * -5.5); margin-bottom: calc(var(--px) * 2.5); } /* base 0,0 */
.ccon06__card-title { margin-top: calc(var(--px) * -3.1); margin-bottom: calc(var(--px) * -3.08); } /* base 0,0 */
.ccon06__tail { margin-top: calc(var(--px) * -5.5); margin-bottom: calc(var(--px) * -0.5); } /* base 0,0 */
/* /INK:AUTO ccon06 END */

@media (max-width: 599px) {
  .ccon06_iner {
    padding-top: 17.0667vw;
  }

  .ccon06__head {
    gap: 5.3333vw;
    padding: 0 4.2667vw;
  }

  .ccon06__lead {
    margin-bottom: 2.1333vw;
    padding: 1.0667vw 2.1333vw;
  }

  .ccon06__panel {
    width: 91.4667vw;
    margin-top: 10.6667vw;
    padding: 8.5333vw 4.2667vw 6.4vw;
    border-radius: 5.3333vw;
  }

  .ccon06__label {
    top: -4.5333vw;
    padding: 2.1333vw 4.2667vw;
    border-radius: 4.2667vw;
  }

  .ccon06__list {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 2.1333vw;
  }

  .ccon06__card {
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: center;
    min-height: 0;
    padding: 3.2vw 4.2667vw 3.2vw 5.3333vw;
    border-radius: 4.2667vw;
  }

  .ccon06__check {
    align-self: auto;
    width: 8.5333vw;
    height: 8.5333vw; /* HEIGHT: PC 원형 체크 고정 height(44) 의 모바일 대응 — 정원 유지 */
  }

  .ccon06__check-icon {
    width: 5.3333vw;
    margin-bottom: 0.5333vw;
  }
}


/* /merge-build:ccon06 */
/* merge-build:ccon07 */
/* ccon07 — 외부사일로 필요 농장. 모바일: intro/panel 2단→column, 번호 탭 열은 유지 후보 */
.ccon07 {
  background-color: var(--light-1);
}

.ccon07_iner {
  padding-top: calc(var(--px) * 100);
}

.ccon07_box {
  overflow: hidden;
  background-color: var(--primary);
}

.ccon07__intro {
  flex: 0 0 calc(var(--px) * 952);
  padding-top: calc(var(--px) * 244);
  padding-left: calc(var(--px) * 234);
  overflow: hidden;
  z-index: 1; /* 패널이 좌→우 슬라이드(GSAP transform)로 사진 위를 지나가므로 사진 쪽을 위로 */
}

.ccon07__head {
  gap: calc(var(--px) * 38);
  padding-bottom: calc(var(--px) * 4);
}

.ccon07__panel {
  flex: 1 1 0;
  padding: calc(var(--px) * 61) 0;
  margin: calc(var(--px) * 57) calc(var(--px) * 51) calc(var(--px) * 58) 0;
  border-radius: 0 calc(var(--px) * 80) calc(var(--px) * 80) 0;
  background-color: #ffffff;
}

.ccon07__list {
  padding: calc(var(--px) * 42) 0 calc(var(--px) * 43);
}

.ccon07__list::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--px) * 102);
  border-radius: 0 calc(var(--px) * 30) calc(var(--px) * 30) 0;
  background-color: var(--light-1);
}

.ccon07__item {
  min-height: calc(var(--px) * 60);
  gap: calc(var(--px) * 45);
  transition: color .4s ease-out;
}

/* 강조(--point)가 JS 순환으로 줄을 옮겨 다니므로 크기·굵기·들여쓰기를 보간 */
.ccon07__text {
  transition: font-size .4s ease-out, font-weight .4s ease-out;
}

/* 강조바는 모든 번호에 깔아두고 scale 만 바꾼다 — 바가 생겼다 사라지며 숫자가 좌우로 흔들리던 것 방지 */
.ccon07__num {
  flex: 0 0 calc(var(--px) * 102);
  padding-left: calc(var(--px) * 30);
  transform-origin: calc(var(--px) * 61) 50%;
  transition: scale .4s ease-out;
}

.ccon07__num::before {
  content: "";
  width: calc(var(--px) * 12);
  height: 4px;
  margin-right: calc(var(--px) * 19);
  background-color: var(--primary);
  scale: 0 1;
  transform-origin: 100% 50%;
  transition: scale .4s ease-out;
}

.ccon07__num--point {
  scale: 1.3;
}

.ccon07__num--point::before {
  scale: 1;
}

/* IMG:AUTO ccon07 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon07__photo {
    width: calc(var(--px)*952);
    aspect-ratio: 952 / 803;
}
/* /IMG:AUTO ccon07 END */

/* FONT:AUTO ccon07 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon07 {
    font-family: var(--font-pretendard);
}

.ccon07__head {
    color: #ffffff;
}

.ccon07__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
}

.ccon07__title-point {
    color: var(--primary);
}

.ccon07__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
}

.ccon07__item.ccon07__item--point {
    color: #111111;
}

.ccon07__num.ccon07__num--point {
    font-size: var(--bodyXS);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.4286;  /* OVR psd:4.28 */
}

.ccon07__text.ccon07__text--point {
    font-size: var(--subheadL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.4;  /* OVR psd:2.15 */
}

.ccon07__item {
    font-weight: 500;
    color: #c9ccc9;
}

.ccon07__num.ccon07__num--ink10,
.ccon07__num.ccon07__num--ink11 {
    font-size: var(--bodyXS);
    letter-spacing: -0.03em;
    line-height: 1.4286;  /* OVR psd:4.28 */
}

.ccon07__text {
    font-size: var(--headS);
    letter-spacing: 0.005em;  /* OVR psd:-0.03em */
    line-height: 1.4;  /* OVR psd:2.73 */
}
/* /FONT:AUTO ccon07 END */

/* INK:AUTO ccon07 */
.ccon07__title { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -6.43); } /* base 0,0 */
.ccon07__text.ccon07__text--point { margin-top: calc(var(--px) * -6.6); margin-bottom: calc(var(--px) * -6.59); } /* base 0,0 */
.ccon07__title-point { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -5.55); } /* base 0,0 */
.ccon07__text { margin-top: calc(var(--px) * -5.2); margin-bottom: calc(var(--px) * -5.19); } /* base 0,0 */
.ccon07__num.ccon07__num--point { margin-top: calc(var(--px) * -5); margin-bottom: calc(var(--px) * -5); } /* base 0,0 */
.ccon07__num.ccon07__num--ink10 { margin-top: calc(var(--px) * -5); margin-bottom: calc(var(--px) * -5); } /* base 0,0 */
.ccon07__num.ccon07__num--ink11 { margin-top: calc(var(--px) * -5); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
.ccon07__desc { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -4); } /* base 0,0 */
/* /INK:AUTO ccon07 END */


@media (max-width: 599px) {
  .ccon07_box_iner {
    flex-direction: column;
  }

  .ccon07__intro {
    flex: none;
    justify-content: center;
    min-height: 84.3487vw;
    padding: 17.0667vw 6.4vw;
  }

  .ccon07__photo {
    width: 100%;
  }

  .ccon07__panel {
    flex: none;
    margin: 8.5333vw 5.3333vw;
    padding: 4.2667vw 0;
    border-radius: 6.4vw;
  }

  .ccon07__list {
    padding: 6.4vw 0;
    word-break: keep-all;
  }

  .ccon07__list::before {
    width: 10.6667vw;
    border-radius: 0 4.2667vw 4.2667vw 0;
  }

  .ccon07__item {
    gap: 3.2vw;
    min-height: 10.6667vw;
    padding: 2.1333vw 4.2667vw 2.1333vw 0;
  }

  .ccon07__num {
    flex: 0 0 10.6667vw;
    justify-content: center;
    padding-left: 0;
    text-align: center;
    transform-origin: 50% 50%;
  }

  .ccon07__num::before {
    width: 3.2vw;
    margin-right: 1.6vw;
  }
}

/* /merge-build:ccon07 */
/* merge-build:ccon08 */
/* ccon08 — 외부사일로 FAQ 아코디언(게시판 silo_faq 연동 예정). 모바일: 행 padding·마커 슬롯 축소, 본문 들여쓰기 제거 후보 */
.ccon08 {
  background-color: var(--bg-color);
}

.ccon08_iner {
  padding-top: calc(var(--px) * 164);
  padding-bottom: calc(var(--px) * 130);
}

.ccon08__head {
  gap: calc(var(--px) * 27);
}

.ccon08__eyebrow {
  margin-bottom: calc(var(--px) * 12);
}

.ccon08__list {
  gap: calc(var(--px) * 7);
  width: calc(var(--px) * 1437);
  margin-top: calc(var(--px) * 66);
}

.ccon08__item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tertiary) 20%, white);
  border-radius: calc(var(--px) * 13);
  background-color: var(--bg-color);
}

.ccon08__item.is-extra {
  display: none;
}

.ccon08__toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: calc(var(--px) * 21) calc(var(--px) * 70) calc(var(--px) * 21) calc(var(--px) * 72);
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background-color .3s ease-out;
}

.ccon08__toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

@media (hover: hover) {
  .ccon08__item:not(.is-open) .ccon08__toggle:hover {
    background-color: color-mix(in srgb, var(--tertiary) 30%, transparent);
  }
}

.ccon08__toggle::before {
  content: "";
  flex-shrink: 0;
  width: calc(var(--px) * 12);
  height: 4px;
  margin-right: calc(var(--px) * 15);
  transition: background-color .3s ease-out;
}

.ccon08__item.is-open .ccon08__toggle {
  background-color: var(--tertiary);
}

.ccon08__item.is-open .ccon08__toggle::before,
.ccon08__item.is-open .ccon08__answer::before {
  background-color: var(--primary);
}

.ccon08__q {
  flex-shrink: 0;
  width: calc(var(--px) * 56);
}

.ccon08__subject {
  flex: 1;
  transition: color .3s ease-out;
}

.ccon08__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: calc(var(--px) * 32);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--tertiary) 20%, white);
  border-radius: 50%;
  background-color: var(--bg-color);
  transform: rotate(180deg);
  transition: transform .3s ease-out, background-color .3s ease-out, border-color .3s ease-out;
}

.ccon08__item.is-open .ccon08__arrow {
  border-color: color-mix(in srgb, var(--bg-color) 30%, var(--tertiary));
  background-color: var(--tertiary);
  transform: none;
}

.ccon08__answer {
  display: none;
  padding: calc(var(--px) * 32) calc(var(--px) * 70) calc(var(--px) * 37) calc(var(--px) * 72);
}

.ccon08__item.is-open .ccon08__answer {
  display: flex;
}

.ccon08__answer::before {
  content: "";
  flex-shrink: 0;
  width: calc(var(--px) * 12);
  height: 4px;
  margin-top: calc(var(--px) * 11);
  margin-right: calc(var(--px) * 71);
}

.ccon08__content {
  flex: 1;
}

.ccon08__more-btn {
  gap: calc(var(--px) * 13);
  margin-top: calc(var(--px) * 53);
  padding: calc(var(--px) * 11) calc(var(--px) * 28) calc(var(--px) * 12) calc(var(--px) * 17);
  border: 1px solid var(--primary);
  border-radius: 50vw;
  background-color: #c7f208;
  cursor: pointer;
  transition: background-color .25s ease-out;
}

.ccon08__more-text {
  transition: color .25s ease-out;
}

@media (hover: hover) {
  .ccon08__more-btn:hover {
    background-color: var(--tertiary);
  }
  .ccon08__more-btn:hover .ccon08__more-text {
    color: #fff;
  }
}

.ccon08__more-btn:focus-visible {
  background-color: var(--tertiary);
}
.ccon08__more-btn:focus-visible .ccon08__more-text {
  color: #fff;
}

.ccon08__more-icon {
  flex-shrink: 0;
  width: calc(var(--px) * 25);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: var(--bg-color);
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .ccon08__toggle,
  .ccon08__toggle::before,
  .ccon08__subject,
  .ccon08__arrow,
  .ccon08__more-btn {
    transition: none;
  }
}

/* INK:AUTO ccon08 */
.ccon08__title { margin-top: calc(var(--px) * -7.45); margin-bottom: calc(var(--px) * -7.44); } /* base 0,0 */
.ccon08__content { margin-top: calc(var(--px) * -5.01); margin-bottom: calc(var(--px) * -3.97); } /* base 0,0 */
.ccon08__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * 8.71); } /* base 0,12 */
.ccon08__subject { margin-top: calc(var(--px) * -3); margin-bottom: calc(var(--px) * -3); } /* base 0,0 */
.ccon08__desc { margin-top: calc(var(--px) * -4); margin-bottom: calc(var(--px) * -1); } /* base 0,0 */
/* /INK:AUTO ccon08 END */

/* FONT:AUTO ccon08 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon08 {
    font-family: var(--font-pretendard);
}

.ccon08__head {
    text-align: center;
}

.ccon08__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.ccon08__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    color: #111111;
}

.ccon08__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: #222222;
}

.ccon08__toggle {
    font-weight: 600;
}

.ccon08__q {
    font-size: var(--bodyXL);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--primary);
}

.ccon08__subject.ccon08__subject--light {
    font-size: var(--bodyXL);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #ffffff;
}

.ccon08__arrow {
    font-size: var(--subheadM);
    letter-spacing: -0.01em;
    line-height: 1; /* OVR */
    text-align: center;
    color: var(--primary);
}

.ccon08__content {
    font-size: var(--bodyM);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.53;
    color: #000000;
}

.ccon08__subject {
    font-size: var(--bodyXL);
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: #000000;
}

.ccon08__more-btn {
    color: #111111;
}

.ccon08__more-icon {
    font-size: var(--bodyL);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1; /* OVR */
    text-align: center;
}

.ccon08__more-text {
    font-size: var(--subheadS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.67;
}
/* /FONT:AUTO ccon08 END */

@media (max-width: 599px) {
  .ccon08_iner {
    padding: 21.3333vw 4.2667vw 17.0667vw;
  }

  .ccon08__head {
    gap: 4.2667vw;
  }

  .ccon08__list {
    align-self: stretch;
    gap: 2.1333vw;
    width: auto;
    margin-top: 10.6667vw;
  }

  .ccon08__item {
    border-radius: 3.2vw;
  }

  .ccon08__toggle {
    padding: 4.2667vw;
  }

  .ccon08__toggle::before {
    width: 2.1333vw;
    margin-right: 2.1333vw;
  }

  .ccon08__q {
    width: 6.4vw;
  }

  .ccon08__arrow {
    width: 6.4vw;
    margin-left: 3.2vw;
  }

  .ccon08__answer {
    padding: 4.2667vw 4.2667vw 5.3333vw 4.2667vw;
  }

  .ccon08__answer::before {
    width: 2.1333vw;
    margin-top: 2.1333vw;
    margin-right: 8.5333vw;
  }

  .ccon08__more-btn {
    gap: 2.1333vw;
    margin-top: 8.5333vw;
    padding: 2.1333vw 4.2667vw 2.1333vw 3.2vw;
  }

  .ccon08__more-icon {
    width: 6.4vw;
  }
}

/* /merge-build:ccon08 */
/* merge-build:ccon09 */
/* ccon09 — 외부사일로 상담 CTA. 모바일: 세로 스택 유지, 카피 줄바꿈은 br 제거 후 자연 줄바꿈 */
.ccon09 {
  background-color: var(--tertiary);
}

.ccon09_iner {
  padding-top: calc(var(--px) * 133);
  padding-bottom: calc(var(--px) * 156);
}

.ccon09__title {
  margin-top: calc(var(--px) * 38);
}

.ccon09__desc {
  margin-top: calc(var(--px) * 35);
}

.ccon09__btn {
  gap: calc(var(--px) * 12);
  width: calc(var(--px) * 160);
  min-height: calc(var(--px) * 48);
  margin-top: calc(var(--px) * 57);
  padding-left: calc(var(--px) * 15);
  border-radius: 50vw;
  background-color: var(--primary);
  transition: background-color .25s ease-out;
}

@media (hover: hover) {
  .ccon09__btn:hover {
    background-color: #fff;
  }
}

.ccon09__btn:focus-visible {
  background-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .ccon09__btn {
    transition: none;
  }
}

/* IMG:AUTO ccon09 */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon09__icon {
    width: calc(var(--px)*73);
    aspect-ratio: 73 / 73;
}

.ccon09__btn-arrow {
    width: calc(var(--px)*28);
    aspect-ratio: 28 / 28;
}
/* /IMG:AUTO ccon09 END */

/* FONT:AUTO ccon09 */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.ccon09 {
    font-family: var(--font-pretendard);
}

.ccon09__title {
    font-size: var(--titleM);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.22;
    text-align: center;
    color: #ffffff;
}

.ccon09__desc {
    font-size: var(--bodyXL);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.3;
    text-align: center;
    color: #ffffff;
}

.ccon09__btn-label {
    font-size: var(--subheadS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.67;
    color: #111111;
}
/* /FONT:AUTO ccon09 END */

/* INK:AUTO ccon09 */
.ccon09__title { margin-top: calc(var(--px) * 30.55); margin-bottom: calc(var(--px) * -6.44); } /* base 38,0 */
.ccon09__desc { margin-top: calc(var(--px) * 31); margin-bottom: calc(var(--px) * -4); } /* base 35,0 */
/* /INK:AUTO ccon09 END */

@media (max-width:599px) {
  .ccon09_iner {
    padding-top: 21.3333vw;
    padding-bottom: 21.3333vw;
    padding-inline: 5.3333vw;
  }

  .ccon09__icon {
    width: 12.8vw;
  }

  .ccon09__title {
    margin-top: 6.4vw;
    margin-bottom: 0;
  }

  .ccon09__desc {
    margin-top: 5.3333vw;
    margin-bottom: 0;
  }

  .ccon09__btn {
    gap: 2.1333vw;
    width: auto;
    min-height: 12.8vw;
    margin-top: 8.5333vw;
    padding-left: 4.2667vw;
    padding-right: 5.3333vw;
  }

  .ccon09__btn-arrow {
    width: 5.3333vw;
    flex-shrink: 0;
  }

  .ccon09__btn-label {
    white-space: nowrap;
  }
}

/* /merge-build:ccon09 */
/* merge-build:sub-hero */
/* sub-hero — 서브페이지 공통 상단 */
.sub-hero {
  background-color: #fff;
  border-bottom: 1px solid #f2f6f3;
}

.sub-hero_iner {
  width: calc(var(--px) * 1440);
  padding-top: calc(var(--px) * 208);
  padding-bottom: calc(var(--px) * 121);
}

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

.sub-hero__desc {
  margin-top: calc(var(--px) * 26);
}

.sub-hero__breadcrumb {
  padding-bottom: calc(var(--px) * 1);
}

.sub-hero__trail {
  gap: calc(var(--px) * 19);
}

.sub-hero__home {
  display: block;
  transition: opacity .25s ease-out;
}

@media (hover: hover) {
  .sub-hero__home:hover {
    opacity: .7;
  }
}

.sub-hero__crumb--sep {
  position: relative;
  width: calc(var(--px) * 8);
  height: calc(var(--px) * 15);
}

.sub-hero__chevron::before {
  content: "";
  position: absolute;
  top: calc(var(--px) * 2.2);
  left: calc(var(--px) * -5.3);
  width: calc(var(--px) * 10.6);
  height: calc(var(--px) * 10.6);
  border-top: 1px solid #c9ccc9;
  border-right: 1px solid #c9ccc9;
  transform: rotate(45deg);
}

/* IMG:AUTO sub-hero */
/* 섹션 HTML 파생 (tools/img-size-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.sub-hero__home {
    width: calc(var(--px)*24);
    aspect-ratio: 24 / 22;
}
/* /IMG:AUTO sub-hero END */

/* FONT:AUTO sub-hero */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.sub-hero {
    font-family: var(--font-pretendard);
}

.sub-hero__eyebrow {
    font-size: var(--bodyL);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR */
    color: var(--primary);
}

.sub-hero__title {
    font-size: var(--displayS);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR psd:1 */
    color: #111111;
}

.sub-hero__desc {
    font-size: var(--headS);
    font-weight: 400;
    letter-spacing: -0.03em;
    line-height: 1.2;  /* OVR psd:1.33 */
    color: #111111;
}

.sub-hero__crumb.sub-hero__crumb--current {
    font-size: var(--bodyM);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.3;  /* OVR psd:1.65 */
    color: #c9ccc9;
}
/* /FONT:AUTO sub-hero END */

/* INK:AUTO sub-hero */
.sub-hero__title { margin-top: calc(var(--px) * 21.84); margin-bottom: calc(var(--px) * -10.15); } /* base 32,0 */
.sub-hero__eyebrow { margin-top: calc(var(--px) * -4.3); margin-bottom: calc(var(--px) * -3.29); } /* base 0,0 */
.sub-hero__crumb.sub-hero__crumb--current { margin-top: calc(var(--px) * -3.05); margin-bottom: calc(var(--px) * -3.04); } /* base 0,0 */
.sub-hero__desc { margin-top: calc(var(--px) * 22.9); margin-bottom: calc(var(--px) * -1.09); } /* base 26,0 */
/* /INK:AUTO sub-hero END */

@media (max-width:599px) {
  .sub-hero_iner {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-inline: 5.3333vw;
    padding-top: calc(var(--hd-h) + 10.6667vw);
    padding-bottom: 10.6667vw;
  }

  .sub-hero__title {
    font-size: var(--titleXL);
    margin-top: 3.2vw;
  }

  .sub-hero__desc {
    margin-top: 3.2vw;
  }

  .sub-hero__breadcrumb {
    margin-top: 6.4vw;
    padding-bottom: 0;
  }

  .sub-hero__trail {
    gap: 3.2vw;
  }

  .sub-hero__home {
    width: 5.3333vw;
  }

  .sub-hero__crumb--sep {
    width: 1.6vw;
    height: auto;
  }

  .sub-hero__chevron::before {
    top: -1.0667vw;
    left: -1.0667vw;
    width: 2.1333vw;
    height: auto;
    aspect-ratio: 1 / 1;
  }
}

/* /merge-build:sub-hero */
/* merge-build:tab-nav */
/* tab-nav — 서브페이지 공통 탭 내비 (PC 전용) */
/* 탭바는 헤더 아래 --tn-gap 만큼 띄워 고정 · 헤더가 숨으면(.insert) 화면 위로 따라 올라간다 */
.tab-nav {
  --tn-gap: calc(var(--px) * 20);
  --tn-pad-top: calc(var(--px) * 41);
  position: sticky;
  top: calc(var(--hd-h) + var(--tn-gap) - var(--tn-pad-top));
  overflow: visible; /* 전역 section{overflow:hidden} 이 about 띠(아래 여백 0)에서 바 그림자 아래를 자름 */
  z-index: 100; /* 뒤 섹션이 position:relative 라 DOM 순서로 탭바를 덮음 — 헤더(9999)보다는 아래 */
  background-color: var(--light-1);
  transition: top 0.3s, background-color 0.2s;
}

body:has(.header.insert) .tab-nav {
  top: calc(var(--tn-gap) - var(--tn-pad-top));
}

/* 고정 중엔 회색 띠를 걷어 바만 띄운다 — 투명해진 띠가 아래 콘텐츠 클릭을 막지 않게 */
.tab-nav.is-stuck {
  background-color: transparent;
  pointer-events: none;
}

.tab-nav_iner {
  padding-top: var(--tn-pad-top);
  padding-bottom: calc(var(--px) * 40);
}

/* about — 띠는 투명, acon01 면이 탭바 높이(88)만큼 뒤로 올라와 배경을 소유한다 */
.tab-nav[data-page="about"] {
  --tn-pad-top: calc(var(--px) * 19);
  margin-bottom: calc(var(--px) * -88);
  background-color: transparent;
}

.tab-nav[data-page="about"] .tab-nav_iner {
  padding-bottom: 0;
}

.tab-nav__bar {
  width: calc(var(--px) * 1563);
  background-color: #fff;
  border-radius: calc(var(--px) * 15);
  box-shadow: 0 0 calc(var(--px) * 12) rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.tab-nav.is-stuck .tab-nav__bar {
  pointer-events: auto;
  box-shadow: 0 calc(var(--px) * 4) calc(var(--px) * 20) rgba(0, 0, 0, 0.1);
}

.tab-nav__list {
  gap: calc(var(--px) * 90);
}

.tab-nav__tab {
  padding-block: calc(var(--px) * 20);
  border-bottom: calc(var(--px) * 3) solid transparent;
  transition: color .25s ease-out, border-bottom-color .3s ease-out;
}

.tab-nav__tab.is-active {
  border-bottom-color: var(--primary);
}

@media (hover: hover) {
  .tab-nav__tab:hover {
    border-bottom-color: color-mix(in srgb, var(--primary) 35%, transparent);
  }
  .tab-nav__tab.is-active:hover {
    border-bottom-color: var(--primary);
  }
}

.tab-nav__tab:focus-visible {
  border-bottom-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.tab-nav__tab.is-active:focus-visible {
  border-bottom-color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .tab-nav__tab { transition: none; }
}

/* FONT:AUTO tab-nav */
/* spec.json 파생 (tools/spec-font-to-css.js · unit=--px) — 재생성 대상, 직접 수정 금지 */
/* 예외: line-height · letter-spacing 는 값을 고치고 뒤에 OVR 주석을 붙이면 재생성이 보존한다 */
.tab-nav {
    font-family: var(--font-pretendard);
    font-size: var(--bodyS);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.57;
    text-align: center;
    color: #111112;
}
/* /FONT:AUTO tab-nav END */

@media (max-width:599px) {
  .tab-nav { --tn-gap: 2.1333vw; --tn-pad-top: 6.4vw; }
  .tab-nav[data-page="about"] { --tn-pad-top: 3.2vw; }
  .tab-nav_iner { padding: var(--tn-pad-top) 4.2667vw 6.4vw; }
  .tab-nav__bar { width: 100%; border-radius: 3.2vw; box-shadow: 0 0 2.1333vw rgba(0, 0, 0, 0.05); }
  .tab-nav__list { gap: 1.0667vw; }
  .tab-nav__item { flex: 1; justify-content: center; }
  .tab-nav__tab { padding-block: 3.2vw; border-bottom-width: 2px; }
}

/* /merge-build:tab-nav */