/* BASIC css start */
03 main · CSS
복사

/* ============================================================
   THE LAB CHEMICAL — 메인페이지 CSS  (main.css)
============================================================ */

/* ── 래퍼 ── */
#contentWrapper { padding: 24px 20px 60px; }
.sec_inner { max-width: 1200px; margin: 0 auto; width: 100%; }

section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 20px;
  overflow: hidden;
}
section:last-child { margin-bottom: 0; }

/* ── sec1 메인 비주얼 ── */
#sec1 { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
#sec1 .swiper-slide img { width: 100%; height: 460px; object-fit: cover; display: block; }
#sec1 .swiper-pagination-bullet { background: rgba(255,255,255,.55); }
#sec1 .swiper-pagination-bullet-active { background: #fff; }

/* ── sec2 브랜드 ── */
#sec2 { padding: 48px 0; }
#sec2 h2 { font-size: 1.55rem; font-weight: 700; text-align: center; margin-bottom: 30px; letter-spacing: -.3px; }
#sec2 .brand-swiper { width: 100%; overflow: hidden; }
#sec2 .swiper-wrapper { align-items: center; }
#sec2 .brand-swiper .swiper-slide { width: auto; padding: 0 22px; opacity: .65; transition: opacity var(--ease); }
#sec2 .brand-swiper .swiper-slide:hover { opacity: 1; }
#sec2 .brand-swiper img { max-height: 60px; width: auto; margin: 0 auto; filter: grayscale(30%); transition: filter var(--ease); }
#sec2 .brand-swiper .swiper-slide:hover img { filter: none; }

/* ── about ── */
#about { padding: 72px 40px; }
#about .about_inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 60px; }
#about .about_text { flex: 0 1 460px; }
#about .about_image { flex: 0 1 420px; }
#about .about_image img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
#about .about_title { font-size: 1.95rem; font-weight: 700; margin-bottom: 16px; line-height: 1.35; letter-spacing: -.4px; }
#about .about_title span { color: var(--navy); }
#about .about_desc { font-size: 15px; color: var(--text-sub); line-height: 1.8; margin-bottom: 18px; }
#about .about_highlight {
  font-size: 14.5px; font-weight: 700; margin-bottom: 28px;
  padding: 14px 18px; background: var(--navy-lt);
  border-left: 3px solid var(--navy); border-radius: 0 var(--radius) var(--radius) 0;
}
#about .about_contact { display: flex; gap: 12px; flex-wrap: wrap; }
#about .about_contact a {
  display: inline-flex; align-items: center; height: 44px;
  padding: 0 22px; font-size: 14px; font-weight: 700;
  border-radius: var(--pill); transition: all var(--ease);
}
#about .btn-primary  { background: var(--navy); color: #fff; border: 1.5px solid var(--navy); }
#about .btn-primary:hover  { background: var(--navy-dk); }
#about .btn-secondary { background: var(--bg); color: var(--navy); border: 1.5px solid var(--navy); }
#about .btn-secondary:hover { background: var(--navy-lt); }

/* ── sec3 FAQ ── */
#sec3 { padding: 64px 40px; }
#sec3 .faq_box { max-width: 760px; margin: 0 auto; }
#sec3 .faq-title { font-size: 1.65rem; font-weight: 700; margin-bottom: 30px; text-align: center; letter-spacing: -.3px; }
#sec3 .faq-list li { border-bottom: 1px solid var(--border); }
#sec3 .faq-list li:first-child { border-top: 1px solid var(--border); }
#sec3 .question {
  cursor: pointer; font-weight: 600; font-size: 15px;
  position: relative; padding: 18px 40px 18px 4px;
  user-select: none; color: var(--text); transition: color var(--ease);
}
#sec3 .question::after {
  content: '+'; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%); font-size: 22px; font-weight: 300;
  color: var(--text-muted); transition: transform .3s, color .2s; line-height: 1;
}
#sec3 .question.active { color: var(--navy); }
#sec3 .question.active::after { transform: translateY(-50%) rotate(45deg); color: var(--navy); }
#sec3 .answer {
  max-height: 0; overflow: hidden; transition: max-height .4s ease;
  font-size: 14px; color: var(--text-sub); line-height: 1.75;
  padding: 0 4px;
}
#sec3 .answer.active { padding-bottom: 18px; }
#sec3 .answer a { color: var(--navy); font-weight: 600; }

/* ── sec6 유튜브 ── */
#sec6 { padding: 0; border-radius: var(--radius-lg); overflow: hidden; }
#sec6 .review-video { position: relative; padding-bottom: 40%; height: 0; overflow: hidden; background: #000; }
#sec6 .review-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }

/* ── sec8 배너 3열 ── */
#sec8 { padding: 48px 40px; }
#sec8 .sec_inner ul { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
#sec8 .sec_inner li a { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s, box-shadow .3s; }
#sec8 .sec_inner li a:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
#sec8 .sec_inner li a img { width: 100%; height: 200px; object-fit: cover; transition: transform .4s; }
#sec8 .sec_inner li a:hover img { transform: scale(1.04); }

/* ── Responsive ── */
@media (max-width: 1023px) {
  #contentWrapper { padding: 14px 12px 40px; }
  #sec1 .swiper-slide img { height: 280px; }
  #about { padding: 48px 24px; }
  #about .about_inner { gap: 32px; }
  #sec3 { padding: 48px 22px; }
  #sec8 { padding: 36px 22px; }
  #sec8 .sec_inner ul { grid-template-columns: repeat(2,1fr); gap: 14px; }
}
@media (max-width: 640px) {
  #sec1 .swiper-slide img { height: 200px; }
  #sec2 { padding: 32px 0; }
  #about .about_contact { flex-direction: column; }
  #about .about_contact a { width: 100%; justify-content: center; }
  #sec8 .sec_inner ul { grid-template-columns: 1fr; }
  #sec6 .review-video { padding-bottom: 56.25%; }
}
/* BASIC css end */