/* =========================================================
   1. HERO  (height 697)
   ========================================================= */
.hero {
  position: relative;
  padding: 264px 0 154px;
  color: #fff;
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background: url("https://cdn.imweb.me/thumbnail/20241226/7f32526fe22ae.jpg") 50% 50% / cover no-repeat;
}
.hero-content { position: relative; }
.hero-title { padding: 0 32px; font-size: 48px; line-height: 57.6px; }
.hero-title .t1 { color: #ececec; font-weight: 400; }
.hero-title .t2 { color: #fff; font-weight: 700; }
.hero-desc { margin-top: 27px; }
.hero-btn  { margin-top: 34px; }

/* =========================================================
   2. 수강신청 + 아이콘  (height 261)
   ========================================================= */
.quick-info { padding: 24px 0; }
.qi-grid { display: grid; grid-template-columns: 1fr 2fr; }
.qi-text h4 {
  font-size: 34.288px;
  line-height: 41.1456px;
  font-weight: 700;
}
.qi-icons {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  align-items: start;
  padding: 47px 0 43px;
}
.qi-icons a { display: block; text-align: center; }
.qi-icons img { width: 95px; height: auto; aspect-ratio: 209 / 265; display: inline-block; }

/* =========================================================
   3. 파란 띠  (height 48)
   ========================================================= */
.blue-band { height: 48px; background: var(--blue); }

/* =========================================================
   4. 다파TV  (height 917)
   ========================================================= */
.tv { background: #fafbf8; padding: 100px 0; }
.tv-head { text-align: center; }
.tv-head h3 {
  margin: 20px 0 10px;
  font-size: 41.136px;
  line-height: 41.136px;
  font-weight: 700;
}
.tv-head h3 img { width: 55px; height: 39px; margin: 5px 0; }
.tv-head p { line-height: 16px; margin-bottom: 58px; }

.gallery { display: flex; margin: 0 -5px; }
.g-item { width: 33.3333%; padding: 5px; }
.g-container { position: relative; }
.g-img {
  height: 315px;
  border: 1px solid #eee;
  background: center / cover no-repeat;
  cursor: pointer;
}
.play-btn {
  position: absolute; z-index: 1;
  top: 0; right: 0;
  width: 23px; height: 23px;
  margin: 16px;
  background: url("https://vendor-cdn.imweb.me/images/common/play_icon.png") no-repeat center / contain;
  pointer-events: none;
}
.g-text { height: 20px; }

.tv-cols { display: flex; }
.tv-col { width: 33.3333%; }
.tv-col h4 { font-size: 34.288px; font-weight: 700; margin: 10px 0; }
.tv-col h4 span { font-size: 24px; line-height: 28.8px; }
.tv-col.c1 h4, .tv-col.c3 h4 { line-height: 41.1456px; }
.tv-col.c2 h4 { line-height: 34.288px; }
.tv-col.c1, .tv-col.c3 { padding-bottom: 40px; }
.tv-col.c2 { padding-bottom: 67px; }
.tv-col .tv-desc { margin-bottom: 5px; }
.tv-btn { text-align: center; }

/* =========================================================
   5. 강의 카테고리  (height 156 + 749)
   ========================================================= */
.cat-head { padding-top: 68px; display: flow-root; }
.cat-inside { max-width: 1160px; }
.cat-label { font-size: 16px; }
.cat-head h4 { font-size: 34.288px; line-height: 41.1456px; font-weight: 700; margin: 10px 0; }
.cat-head h4 span { font-size: 30px; line-height: 36px; }
.cat-head h4 em { font-style: italic; }

.cat-cards {
  display: flex;
  margin: 100px -3px 0;        /* 상단 여백 100 */
  height: 538px;
  padding-bottom: 0;
}
.cat-col { width: 25%; padding: 0 3px; }
.cat-col.c2, .cat-col.c4 { padding-top: 115px; }
.cat-card {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
}
.card1 { height: 406px; border: 1px solid #872bff; }
.card2 { height: 397px; }
.card3 { height: 396px; }
.card4 { height: 423px; }
.cat-bg {
  position: absolute; inset: 0;
  border-radius: 15px;
  background: no-repeat center / cover;
}
.cat-text { position: relative; padding: 40px; }
.cat-text p { line-height: 27.2px; }
.cat-text p.ln { line-height: 24px; color: #dedede; }
.card1 .cat-more { line-height: 27.2px; }
.cat-tit { font-size: 22px; line-height: 26.4px; color: #5aff32; }
.cat-tit em { font-style: italic; }
.cat-more {
  position: absolute; left: 40px; bottom: 40px;
  line-height: 24px;
  color: #bebebe;
}

/* 카테고리 섹션 하단 여백 (10 + 101) */
.cat { padding-bottom: 111px; }

/* =========================================================
   6. MAJOR INFORMATION 배너  (height 376)
   ========================================================= */
.banner { position: relative; height: 376px; color: #fff; overflow: hidden; }
.banner-bg {
  position: absolute; inset: 0;
  background: url("https://cdn.imweb.me/thumbnail/20250107/08424c8fbb2fc.jpg") 50% 50% / cover no-repeat;
}
.banner-inside { position: relative; max-width: 1160px; padding-top: 64px; }
.b-label { margin-bottom: 22px; }
.b-text > div { display: flow-root; }
.b-text h5 { font-size: 27.424px; line-height: 32.9088px; margin: 10px 0; }
.b-text p  { line-height: 24px; }
.b-text h5 span, .b-text p span { color: #fff; }
.b-btn { margin-top: 32px; }

/* =========================================================
   7. 수강생 후기  (height 698)
   ========================================================= */
.review { background: #f9f9f9; padding: 75px 0 81px; }
.rv-label { text-align: center; }
.rv-label .fs18 { font-size: 18px; line-height: 21.6px; }
.rv-title {
  text-align: center;
  font-size: 34.288px; line-height: 41.1456px;
  margin: 10px 0 73px;
}
.rv-title span { font-size: 30px; line-height: 36px; }

.rv-list { display: flex; margin: -10px -10px 0; }
.rv-item { width: 25%; padding: 10px; display: flex; }
.card {
  display: flex; flex-direction: column;
  width: 100%;
  background: #fff;
  color: #363636;
  border-radius: 10px;
  overflow: hidden;
  z-index: 5;
}
.card-img { height: 230px; background: no-repeat center / cover; }
.card-body { min-height: 95px; padding: 24px; background: #fff; color: #212121; }
.card-body .title { color: #000; line-height: 20.8px; }
.card-body .text { margin-top: 5px; font-size: 14px; line-height: 19.6px; color: #777; }
.card-summary { padding: 0 24px 24px; background: #fff; }
.avatar { display: flex; align-items: center; font-size: 13px; line-height: 22.1px; color: #5d5d5d; }
.avatar img { width: 32px; height: 32px; border-radius: 50%; margin-right: 10px; }
.writer { font-size: 12px; line-height: 14.4px; color: #777; }

/* =========================================================
   8. FAQ  (height 709)
   ========================================================= */
.faq-wrap {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 550px 550px;
  column-gap: 60px;
}
.faq-left { padding: 83px 0 109px; }
.faq-left > h4 { font-size: 34.288px; line-height: 41.1456px; font-weight: 700; margin: 10px 0 35px; }
.acd-row { border-bottom: 1px solid #363636; }
.acd-row:first-child { border-top: 1px solid #363636; }
.acd-head { padding: 16px 10px; cursor: pointer; }
.acd-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 19.2px; }
.acd-title a { display: block; padding-right: 30px; }
.acd-collapse { height: 0; overflow: hidden; transition: height .3s ease; }
.acd-body { padding: 0 10px 16px; font-size: 14px; line-height: 1.7; color: #363636; }
.acd-body p { margin: 0; }
.li-footer { margin-top: 15px; text-align: right; }
.li-footer .btn { padding: 6px 35px; line-height: 18px; }
.faq-right { padding-top: 136px; padding-bottom: 156px; }
.faq-right img { display: block; width: 550px; height: 336px; border-radius: 7px; }

/* ---------- 반응형 (메인) ---------- */
@media (max-width: 1280px) {
  .cat-inside, .banner-inside, .faq-wrap { padding-left: 20px; padding-right: 20px; }
  .faq-wrap { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .faq-right img { width: 100%; height: auto; }
}
@media (max-width: 1024px) {
  .hero-title { font-size: 34px; line-height: 42px; }
  .qi-grid { grid-template-columns: 1fr; }
  .qi-icons { grid-template-columns: repeat(4, 1fr); row-gap: 10px; padding-top: 20px; }
  .gallery, .tv-cols, .cat-cards, .rv-list { flex-wrap: wrap; }
  .g-item, .tv-col { width: 100%; }
  .cat-col, .rv-item { width: 50%; }
  .cat-cards { height: auto; }
  .cat-col.c2, .cat-col.c4 { padding-top: 0; }
  .cat-col { margin-bottom: 6px; }
  .faq-wrap { grid-template-columns: 1fr; }
  .faq-right { padding: 0 0 40px; }
}