/* PC — 4칸×2줄 바둑판(온라인 클래스 PC 배치와 같은 간격 32px). 넘김이 없어 오른쪽 흐린 카드도 없다 */
.mConFree .fc_main_grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}
.mConFree .fc_main_cell {
  display: flex;
  min-width: 0;
}
.mConFree .fc_main_cell > .class_con {
  width: 100%;
}
/* 그룹 수업 카드 — 제목을 3줄까지 보여 주고 강사명은 넣지 않는다(사용자 지정 2026-10-16).
   ⚠️ 공용 .tit 은 **2줄 + 높이 고정**이라(content.css) 줄 수만 늘리면 셋째 줄이 잘린다 — 높이도 함께 준다.
      높이 = 「원래 제목 ＋ 강사명 ＋ 그 아래 여백」. 강사명 자리를 제목이 그대로 쓰므로
      **카드 전체 높이가 다른 카드와 같아진다.**
   ⭐ 공용 규칙이 950px 을 기준으로 단위가 바뀌므로(위는 px · 아래는 rem) 여기서도 같은 기준·같은 단위를 쓴다.
      아래를 px 로 주면 글자 크기가 화면 폭에 따라 커지는 모바일에서 높이만 고정돼 카드가 어긋난다. */
.mConFree .fc_main_cell.is-group .infor .tit {
  -webkit-line-clamp: 3;
  /* 951px 이상 — 제목 55 ＋ 강사명 21 ＋ 여백 20 (3줄 81 이 들어간다) */
  height: 96px;
}
@media all and (max-width: 950px) {
.mConFree .fc_main_cell.is-group .infor .tit {
    /* 950px 이하 — 제목 8.4rem ＋ 강사명 3.6rem ＋ 여백 1rem (3줄 5.85rem 이 들어간다) */
    height: 13rem;
}
}
/* 모바일 — 한 장에 2칸×2줄. 넘김 틀은 오른쪽으로 넘쳐 보이게 두어 다음 묶음이 화면 끝까지 이어진다 */
.mConFree .mSlideFree {
  overflow: visible;
}
.mConFree .fc_main_page {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  -moz-column-gap: 10px;
       column-gap: 10px;
  row-gap: 4rem;
}
@media all and (max-width: 1400px) and (min-width: 951px) {
.mConFree .fc_main_grid {
    gap: 24px;
}
}


/* 첫 화면 문구(왕초보에서 … 단계별 솔루션)를 조금 올리고 문구 아래 여백도 줄여 아래 내용이 함께 올라오게 — 사용자 지정 2026-10-14.
   PC: 위 495 → 375px(435 → 415 → 395 → 375 · 2026-10-14 사용자 지정으로 단계적으로 올림) · 문구 아래 155 → 105px / 모바일(950 이하): 위 33 → 28rem · 아래 16 → 11rem · 글씨 5.2 → 4.8rem(2px 작게). */
.main .mCon1 .popul_con {
  padding-top: 375px;
}
.main .mCon1 .popul_con .vi_txt {
  margin-bottom: 105px;
}
/* PC 배경 영상을 80px 위로(20 → 40 → 60 → 80px · 사용자 지정 2026-10-14) — 그라데이션도 같은 칸 안에 있어 함께 올라가 아래 검정 이어짐은 그대로다 */
@media all and (min-width: 951px) {
.main .mCon1 .visual_bg {
    top: -80px;
}
  /* 인기 클래스 카드 아래 검정 배경 여백 150 → 110px · 추천 클래스 제목 위 배경 여백 30 → 70px (PC 만 · 사용자 지정 2026-10-14 · 20px 씩 두 번) */
.main .mCon1 {
    padding-bottom: 110px;
}
.main .mCon2 {
    padding-top: 70px;
}
}
@media all and (max-width: 950px) {
.main .mCon1 .popul_con {
    padding-top: 28rem;
}
.main .mCon1 .popul_con .vi_txt {
    margin-bottom: 11rem;
    font-size: 4.8rem;
}
  /* 모바일은 배경 영상 높이가 50rem 으로 줄어드는데, 아래를 검정으로 이어 주는 그라데이션은 배경 칸(화면 높이 기준)에 맞춰져
     영상이 끝나는 자리에서 아직 덜 어두워 뚝 잘려 보였다(사용자 지적 2026-10-14). 그라데이션이 완전한 검정이 되는 지점(75.52%)을
     영상 아래 끝(50rem)에 맞춘다 — 50 ÷ 0.7552 ≒ 66.2rem. 화면 높이와 무관하게 늘 영상 끝에서 검정과 이어진다. */
.main .mCon1 .visual_bg .line_g2::before,
  .main .mCon1 .visual_bg .line_g2::after {
    height: 66.2rem;
}
  /* 영상 위 색조 막(초록빛 · 원래 디자인)도 영상 높이까지만 — 배경 칸 높이로 남아 있으면 영상 아래에 초록빛 띠가 드러나
     아래 검정 배경과 색이 맞지 않는다(사용자 지적 2026-10-14). */
.main .mCon1 .visual_bg .line_g1::before,
  .main .mCon1 .visual_bg .line_g1::after {
    height: 50rem;
}
}

/* 메인 클래스 구역(추천 · 무료 · 온라인 · 오프라인) 사이 간격 — 사용자 지정 2026-10-14.
   PC 는 구역 사이를 20px 줄이고(카드 끝 → 다음 제목 160 → 140px), 모바일(640 이하)은 넓힌다(40 → 80px · 2026-10-14 한 번 더 넓힘).
   무료 구역은 오프라인과 같은 .mCon4 모양을 빌려 쓰므로, 아래 여백만 바로 아래 온라인(.mCon3)과 같게 맞춘다.
   공용 content.css 는 건드리지 않고 메인에만 적용한다. */
@media all and (min-width: 1401px) {
.main .mCon2,
  .main .mCon3 {
    margin-bottom: 80px;
}
.main .mCon4.mConFree {
    margin-bottom: 80px !important;
}
}
@media all and (min-width: 951px) and (max-width: 1400px) {
.main .mCon2,
  .main .mCon3 {
    margin-bottom: calc(8rem - 20px);
}
.main .mCon4.mConFree {
    margin-bottom: calc(8rem - 20px) !important;
}
}
@media all and (max-width: 950px) {
.main .mCon4.mConFree {
    margin-bottom: 8rem !important;
}
}
@media all and (max-width: 640px) {
.main .mCon4.mConFree {
    margin-bottom: 0 !important;
    padding-bottom: 0;
}
.main .mConFree,
  .main .mCon3,
  .main .mCon4 {
    padding-top: 16rem;
}
}