/* FX */
.f-x{
  font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: 14px;
  font-weight: 300;   /* Bold */
  line-height: 20px;
  letter-spacing: 0;
}
/* =========================================================
   1) TITLE SECTION (1280 x 410)
========================================================= */
.sub-title-section{
  width: 100%;
  background: #fff;
}

.sub-title-section__inner{
  position: relative;

  width: 100%;
  max-width: 1280px;
  height: 410px;

  margin: 0 auto;
  box-sizing: border-box;

  /* ✅ 위/아래 패딩 140 */
  padding: 140px 0;

  /* ✅ 패딩 제외한 가운데 영역에서 중앙정렬 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sub-title-box{
  position: relative;

  height: 96px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}

/* point (page_point.svg) */
.page-point{
  position: absolute;
  width: 15px;
  height: 15px;

  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 40%);

  display: block;
  pointer-events: none;
}

/* =========================================================
   2) CARTON CONTENT SECTION (1280 x 828)
========================================================= */
.sub-carton-section {
  width: 100%;
  background: var(--c-f);
}

.sub-carton-section__inner {
  width: 100%;
  max-width: 1280px;
  height: 828px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 140px;

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

/* 상단 텍스트 박스 (1280 x 288) */
.carton-top {
  width: 100%;
  max-width: 1280px;
  height: 288px;
  box-sizing: border-box;
  padding: 140px 0 68px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.carton-br-mobile { display: none; }

@media (min-width: 800px) and (max-width: 1279px) {
  .sub-carton-section__inner {
    height: 1238px;
    padding: 0 60px 140px;
  }
}

@media (max-width: 799px) {
  .sub-carton-section__inner {
    height: 2094px;
    padding: 0 40px 140px;
  }
  .carton-top {
    height: 324px;
  }
  .carton-br-mobile { display: inline; }
}

/* =========================================================
   3) CARTON GRID (1280 x 400, 4x1)
========================================================= */
.carton-grid {
  width: 100%;
  max-width: 1280px;
  height: 400px;
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.carton-card {
  background: var(--c-white);
  border: 1px solid var(--c-g0);
  border-radius: 50px 0 50px 50px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 아이콘 영역: 56 x 196 (padding-top 100 + SVG 56 + padding-bottom 40) */
.carton-card__icon {
  width: 56px;
  height: 196px;
  padding: 100px 0 40px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.carton-card__icon img {
  width: 56px;
  height: 56px;
  display: block;
}

/* 아이콘 영역 2,3번: padding 100/60, height 216 → img 56x56 */
.carton-card__icon--2,
.carton-card__icon--3 {
  height: 216px;
  padding: 100px 0 60px;
}

/* 아이콘 영역 4번: padding 100/60, height 211 → img 56x51 */
.carton-card__icon--4 {
  height: 211px;
  padding: 100px 0 60px;
}

.carton-card__icon--4 img {
  width: 56px;
  height: 51px;
}

/* 텍스트 영역: 1fr x 159, 1x2 그리드 */
.carton-card__info {
  width: 100%;
  height: 159px;
  box-sizing: border-box;

  display: grid;
  grid-template-rows: 0.5fr 1fr;
  gap: 10px;
}

.carton-card__title {
  margin: 0;
  text-align: center;
  align-self: center;
}

.carton-card__desc {
  margin: 0;
  padding: 0 40px;
  box-sizing: border-box;
  text-align: center;
  align-self: center;
}

.carton-card__desc--narrow {
  padding: 0 35px;
}

/* 태블릿: 2x2, height 810, gap 18 */
@media (min-width: 800px) and (max-width: 1279px) {
  .carton-grid {
    height: 810px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 18px;
  }
}

/* 모바일: 1x4, height 1630, gap 10x14 */
@media (max-width: 799px) {
  .carton-grid {
    height: 1630px;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
    column-gap: 10px;
    row-gap: 14px;
  }
}

/* =========================================================
   4) MACHINERY TITLE SECTION (1280 x 245)
========================================================= */
.sub-machinery-section {
  width: 100%;
  background: var(--c-white);
}

.sub-machinery-section__inner {
  width: 100%;
  max-width: 1280px;
  height: 245px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 140px 0 20px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;

  border-bottom: 1px solid var(--c-dk-a);
}

.machinery-title-row {
  width: 100%;
  height: 53px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.machinery-shortcut {
  height: 24px;
  padding: 1px 0;
  box-sizing: border-box;
  align-self: flex-end;

  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.machinery-shortcut img {
  width: 14.55px;
  height: 22px;
  display: block;
}

/* 태블릿: machinery */
@media (min-width: 800px) and (max-width: 1279px) {
  .sub-machinery-section {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .sub-machinery-section__inner {
    height: 216px;
    padding: 60px 0;
  }
  .machinery-title-row {
    height: 48px;
  }
  .machinery-shortcut {
    align-self: center;
  }
}

.machinery-br-mobile { display: none; }

/* 모바일: machinery */
@media (max-width: 799px) {
  .machinery-br-mobile { display: inline; }
  .sub-machinery-section {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .sub-machinery-section__inner {
    height: 306px;
    padding: 68px 0;
  }
  .machinery-title-row {
    height: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    box-sizing: border-box;
    gap: 0;
  }
  .machinery-title-row p {
    height: 74px;
  }
  .machinery-shortcut {
    align-self: flex-start;
    margin-top: 40px;
  }
}

/* =========================================================
   5) EQUIPMENT DETAIL SECTION (1280 x 1744)
========================================================= */
.sub-equip-section {
  width: 100%;
  background: var(--c-white);
}

.sub-equip-section__inner {
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 0 auto;
  box-sizing: border-box;
  padding-bottom: 140px;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 설비 네비 (1280 x 350) */
.equip-nav {
  width: 100%;
  max-width: 1280px;
  height: 350px;
  box-sizing: border-box;
  padding: 140px 0;

  display: flex;
  align-items: center;

  position: sticky;
  top: -20px; /* 네비 바 여기 값 조절 */ 
  z-index: 10;
  
}

.equip-nav__grid {
  width: 100%;
  height: 70px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  background: var(--c-white);
}

.equip-nav__btn {
  height: 70px;
  border: none;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.85);
  color: var(--c-g2);
  transition: none;

  /* 기본: f-m1 */
  font-family: "Pretendard", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;

  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);
}

/* 왼쪽 끝: 좌상단/좌하단 50 라운드 */
.equip-nav__btn:first-child {
  border-radius: 50px 0 0 50px;
}

/* 오른쪽 끝: 우상단/우하단 50 라운드 */
.equip-nav__btn:last-child {
  border-radius: 0 50px 50px 0;
}

/* 선택 상태: f-sb2, white, 그라데이션 */
.equip-nav__btn.is-on {
  background: linear-gradient(to bottom, #061B4B 0%, #000000 100%);
  color: var(--c-white);
  font-size: 20px;
  font-weight: 600;
  line-height: normal;

  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* 태블릿: 800 고정 */
@media (min-width: 800px) and (max-width: 1279px) {
  .equip-nav__grid {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (max-width: 799px) {
  .equip-nav {
    top: 50px; /* 모바일 네비 바 여기 값 조절 */
    height: 176px;
    padding: 60px 0 20px;
    background: var(--c-dk-f);
  }

  .equip-nav__grid {
    max-width: 375px;
    height: 96px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 48px 48px;
    border-radius: 30px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--c-white);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  .equip-nav__btn {
    height: 36px;
    margin: 5px;
    background: #fff;
    color: var(--c-g2);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-radius: 50px;

    /* 모바일: sb2 → m1 오버라이드 */
    font-size: 14px;
    font-weight: 500;
  }

  .equip-nav__btn.is-on {
    background: var(--c-dk-b);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }

  .equip-nav__btn:first-child,
  .equip-nav__btn:last-child,
  .equip-nav__btn:nth-child(2),
  .equip-nav__btn:nth-child(3) {
    border-radius: 50px;
  }
}

/* =========================================================
   6) EQUIPMENT LIST (1280 x 1254)
========================================================= */
.equip-list {
  width: 100%;
  max-width: 1280px;
  height: auto;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 140px;

  position: relative;
  isolation: isolate;
}

.equip-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: var(--c-f);
  z-index: -1;
}

/* 설비 카드 (1280 x 557) */
.equip-card {
  width: 100%;
  box-sizing: border-box;
  padding-top: 60px;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 340px 157px;
  gap: 20px;
}

/* 1행: 좌우 80 간격 2열 */
.equip-card__row1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  height: 340px;
}

.equip-card__img {
  width: 600px;
  height: 340px;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 50px 0 50px 50px;
}

.equip-card__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.equip-card__info {
  width: 600px;
  height: 340px;
  box-sizing: border-box;
  padding: 60px 0;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.equip-card__title {
  height: 77px;
}

.equip-card__row2 {
  height: 157px;
  box-sizing: border-box;
  padding: 20px 0;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 117px;
  align-items: center;
  justify-items: start;

  border-bottom: 1px solid var(--c-g1);
}

.equip-card__spec {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 설비 그룹 표시/숨김 */
.equip-group { display: none; }
.equip-group.is-visible { display: flex; }

/* 태블릿: 설비 상세 섹션 */
@media (min-width: 800px) and (max-width: 1279px) {
  .sub-equip-section__inner {
    max-width: 800px;
    height: auto;
    margin: 0 auto;
    padding: 0 40px 140px;
  }

  .equip-nav {
    height: auto;
    padding: 140px 0;
  }

  .equip-list {
    max-width: 800px;
    height: auto;
    padding: 0;
    gap: 140px;
  }

  .equip-list::before {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-dk-f);
  }

  .equip-card {
    grid-template-rows: auto auto;
    gap: 20px;
  }

  .equip-card__row1 {
    grid-template-columns: 388.57px 291.43px;
    gap: 40px;
    height: auto;
  }

  .equip-card__img {
    width: 388.57px;
    height: auto;
    aspect-ratio: 600 / 340;
  }

  .equip-card__info {
    width: 291.43px;
    height: auto;
    padding: 40px 0;
  }

  .equip-card__title {
    height: 116px;
  }

  .equip-card__row2 {
    height: auto;
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 모바일: 설비 상세 섹션 */
@media (max-width: 799px) {
  .sub-equip-section {
    background: var(--c-dk-f);
  }

  .sub-equip-section__inner {
    max-width: 375px;
    height: auto;
    margin: 0 auto;
    padding: 0 20px 140px;
  }

  .equip-list {
    max-width: 375px;
    height: auto;
    padding: 0;
    gap: 140px;
  }

  .equip-list::before {
    width: 375px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--c-dk-f);
  }

  .equip-card {
    height: 868px;
    grid-template-rows: auto auto;
    gap: 20px;
  }

  .equip-card__row1 {
    grid-template-columns: 1fr;
    grid-template-rows: 147px 322px;
    gap: 20px;
    height: auto;
  }

  .equip-card__info {
    width: 100%;
    height: 147px;
    padding: 0;
    order: -1;
    gap: 10px;
  }

  .equip-card__title {
    height: 111px;
  }

  .equip-card__img {
    width: 335px;
    height: 322px;
    order: 1;
  }

  .equip-card__row2 {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 93px);
  }

  .equip-card__spec {
    width: 335px;
  }

  /* 모바일 전용 폰트 오버라이드 */
  .equip-card__title p:first-child {
    font-size: 32px;
    font-weight: 600;
    line-height: 40px;
    letter-spacing: -0.03em;
  }

  .equip-card__title p:last-child {
    font-size: 28px;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0em;
  }

  .equip-card__info > p {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    letter-spacing: 0.03em;
  }
}

.summary-br-mobile { display: none; }
.equip-br-mobile { display: none; }

/* =========================================================
   7) SUMMARY TITLE SECTION (1280 x 225)
========================================================= */
.sub-summary-section {
  width: 100%;
  background: var(--c-white);
}

.sub-summary-section__inner {
  width: 100%;
  max-width: 1280px;
  height: 225px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 140px 0 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* 태블릿: 설비 요약 타이틀 */
@media (min-width: 800px) and (max-width: 1279px) {
  .sub-summary-section__inner {
    height: 217px;
    padding: 140px 20px 0;
  }
}

/* 모바일: 설비 요약 타이틀 */
@media (max-width: 799px) {
  .summary-br-mobile { display: inline; }
  .equip-br-mobile { display: inline; }
  .sub-summary-section__inner {
    height: 259px;
    padding: 140px 20px 20px;
    align-items: flex-start;
  }
}

/* =========================================================
   8) SUMMARY CONTENT SECTION (1280 x 1381.68)
========================================================= */
.sub-summary-content-section {
  width: 100%;
  background: var(--c-white);
}

.sub-summary-content-section__inner {
  width: 100%;
  max-width: 1280px;
  height: 1381.68px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 140px 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 84px;
}

/* 요약 행 */
.summary-row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.summary-row__title {
  height: 79px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.summary-row__grid {
  width: 960px;
  height: 180px;

  display: grid;
  grid-template-columns: 1fr 1fr 0.25fr;
  grid-template-rows: 1fr;
}

.summary-row__col {
  display: grid;
  grid-template-rows: 49.09px 65.45px 65.45px;
}

.summary-row__head {
  background: var(--c-g3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.summary-row__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  border-bottom: 1px solid var(--c-g0);
}

.summary-row__cell:last-child {
  border-bottom: 1px solid var(--c-g0);
}

.summary-row__col:first-child .summary-row__cell {
  background: var(--c-dk-f);
}

/* 1x4 그리드 (헤더 + 데이터 3행) */
.summary-row__grid--4 {
  height: 242.67px;
}

.summary-row__col--4 {
  grid-template-rows: 48px 64px 64px 66.67px;
}

/* 1x5 그리드 (헤더 + 데이터 4행) */
.summary-row__grid--5 {
  height: 307.03px;
}

.summary-row__col--5 {
  grid-template-rows: 47.37px 63.16px 63.16px 66.67px 66.67px;
}

/* 1x2 그리드 (헤더 + 데이터 1행) */
.summary-row__grid--2 {
  height: 120px;
}

.summary-row__col--2 {
  grid-template-rows: 51.43px 68.57px;
}

/* 태블릿: 설비 요약 컨텐츠 */
@media (min-width: 800px) and (max-width: 1279px) {
  .sub-summary-content-section__inner {
    max-width: 800px;
    height: auto;
    padding: 140px 20px;
    gap: 64px;
  }

  .summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }

  .summary-row__title {
    flex-direction: column-reverse;
  }

  .summary-row__grid,
  .summary-row__grid--2,
  .summary-row__grid--4,
  .summary-row__grid--5 {
    width: 760px;
  }
}

/* 모바일: 설비 요약 컨텐츠 */
@media (max-width: 799px) {
  .sub-summary-content-section__inner {
    max-width: 100%;
    height: auto;
    padding: 140px 20px;
    gap: 84px;
  }

  .summary-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    width: 100%;
    overflow-x: auto;
  }

  .summary-row__title {
    flex-direction: column-reverse;
  }

  .summary-row__grid,
  .summary-row__grid--2,
  .summary-row__grid--4,
  .summary-row__grid--5 {
    width: 560px;
    flex-shrink: 0;
  }
}

/* CARTON BOX PRODUCTION LINE (padding 하단 라인에 붙이기) */
.sub-title-sub{
  position: absolute;
  left: 50%;
  bottom: 140px;
  transform: translateX(-50%);

  width: fit-content;

  height: 29px;
  line-height: 29px;

  white-space: nowrap;
  text-align: center;

  text-transform: uppercase;
  letter-spacing: 0.12em;
}