@charset "utf-8";

/* ============================
   spc — 특별함 페이지
   마크업 : sections/spc/
============================ */

#spc-page {
  --spc-intro-h: 639px;
  --spc-img-w: 541px;
}


/* ============================
   01 intro — 배경 위 텍스트
============================ */

#spc-page .sec-intro {
  background-image: url(../images/spc/01.jpg);
}

#spc-page .sec-intro .con-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--one-space-s);
  min-height: var(--spc-intro-h);
}

#spc-page .intro-txt {
  display: flex;
  flex-direction: column;
  gap: 1.6em;
  font-size: var(--one-body) !important;
}


/* ============================
   02 point — SPECIAL 2열 카드
============================ */

#spc-page .sec-point .con-inner {
  padding: var(--one-space-xl) 0;
}

#spc-page .spc-lst {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--spc-img-w)));
  justify-content: space-between;
  gap: var(--one-space-r) var(--one-space-s);
}

#spc-page .spc-img img {
  display: block;
  max-width: var(--spc-img-w);
}

#spc-page .spc-body {
  display: flex;
  flex-direction: column;
  gap: var(--one-gap-r);
  padding: var(--one-gap-xl) var(--one-gap-sm) 0;
}

#spc-page .spc-desc {
  padding-top: var(--one-gap-r);
  color: var(--one-txt-color);

}


/* ============================
   반응형 — 태블릿 (max-width: 1024px)
============================ */

@media all and (max-width: 1024px) {
  #spc-page {
    --spc-intro-h: 520px;
  }

  #spc-page .spc-body {
    padding: var(--one-gap-xl) 0 0;
  }
}


/* ============================
   반응형 — 모바일 (max-width: 639px)
============================ */

@media all and (max-width: 639px) {
  #spc-page {
    --spc-intro-h: 0px;
  }

  #spc-page .sec-intro .con-inner {
    gap: var(--one-space-s);
  }

  #spc-page .intro-txt {
    gap: 1em;
  }

  #spc-page .spc-lst {
    grid-template-columns: minmax(0, var(--spc-img-w));
    justify-content: center;
    gap: var(--one-space-r);
  }

  #spc-page .spc-body {
    gap: var(--one-gap-sm);
  }

  #spc-page .spc-desc {
    padding-top: var(--one-gap-sm);
  }
}