/* ==========================================================
   main.css — 메인(index.jsp) 페이지 전용
   ----------------------------------------------------------
   섹션은 index.jsp의 페이지 흐름과 동일한 순서로 배치:
     1. 메인 배너
     2. 학사알림 (#main_cont01)
     3. 학습상담 (.consult_top / .consult_bottom)
     4. 수강생 후기 (#main_cont02)
     5. 이젠에듀를 선택해야하는 이유 (#main_cont03)
     6. 대상별 학습가이드 (#main_cont04)
     7. 퀵메뉴 (#main_cont05)
     8. 모바일 메인 (.m_*)
     9. 공지·자주하는 질문 (#main_cont06)
    10. 유관기관 인증 (.certify_wrap)

   하단은 Responsive (Tablet ≤1000px, Mobile ≤768px) 통합 블록.
   ========================================================== */

/* ──────────────────────────────────────────────────────────
   1. 메인 배너 (.main-bn-slide)
   ────────────────────────────────────────────────────────── */

.main-bn-slide {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.main-bn-slide #mainBanner {
    position: relative;
    display: flex;
    width: 100%;
    box-sizing: content-box;
    transition-property: transform;
}
.main-bn-slide .slide {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    transition-property: transform;
}

/* 컨트롤러 (PC) */
.main-bn-slide .main_ctrl {
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 100%;
    z-index: 100;
}
.main-bn-slide .main_ctrl > .cont_maxW {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.main-bn-slide .main_ctrl .swiper-button-next,
.main-bn-slide .main_ctrl .swiper-stop,
.main-bn-slide .main_ctrl .swiper-play {
    margin-left: 0.5rem;
}

/* 인디케이터 / 애니메이션 위치 */
.main-bn-slide .banner-indi-pos {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    transform: translateX(-50%);
    z-index: 200;
}
.main-bn-slide .banner_indi_wrap {
    transform: translateX(-100%);
}
.main-bn-slide .banner-anim-pos {
    position: absolute;
    right: 50%;
    top: 0;
    width: 100%;
    transform: translateX(499px);
    z-index: 999;
}

/* 슬라이드 컨트롤러 버튼 공통 (메인 배너 / 후기 / 영상 후기 공용) */
.main_ctrl .swiper-button-prev,
.main_ctrl .swiper-button-next,
.main_ctrl .swiper-stop,
.main_ctrl .swiper-play {
    position: static;
    width: 30px;
    transform: none;
    left: auto;
    right: auto;
    margin-top: 0;
    cursor: pointer;
}
.main_ctrl img {
    display: block;
}

/* 페이지네이션 + 진행 바 */
.main-bn-slide .main-bn-control {
    display: flex;
    position: absolute;
    top: 315px;
    left: 50%;
    z-index: 1;
    width: 1000px;
    transform: translateX(-50%);
    align-items: center;
}
.main-bn-slide .pagination {
    margin-left: 42px;
}
.main-bn-slide .pagination span,
.main-bn-slide .pagination {
    color: #fff;
    transform: skew(-0.03deg);
}
.main-bn-slide .main-bn-progress {
    width: 137px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 22px 0 30px;
}
.main-bn-slide .main-bn-progressbar {
    display: block;
    width: 0;
    height: 100%;
    background: #fff;
    transition: width 0.1s linear;
}
.main-bn-slide .main-bn-progressbar.bar-active {
    width: 100%;
    transition-duration: 3s;
}
.banner_animation {
    position: absolute;
    top: 0;
    right: 0;
}

/* ──────────────────────────────────────────────────────────
   2. 학사알림 (#main_cont01 / .lect_notice)
   ────────────────────────────────────────────────────────── */

.lect_notice {
    background: #3e49e3;
}
.lect_notice .cont_maxW {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
    flex-wrap: wrap;
}
.lect_notice span {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 800;
    color: #fff;
}
.lect_notice span img {
    vertical-align: middle;
    aspect-ratio: 1 / 1;
}
.lect_notice span:first-of-type img {
    width: 1.5em;
    height: 1.5em;
}
.lect_notice span.img100 img {
    width: 1rem;
    height: 1rem;
}
.lect_notice strong {
    color: #fff;
    font-size: 1.2rem;
    margin-left: 0.8rem;
    border-right: 2px solid #fff;
    padding: 0 20px 0 0;
    font-weight: 700;
}
.lect_notice dl {
    display: flex;
    font-size: 1.2rem;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
}
.lect_notice dl dt {
    font-weight: 600;
    padding-left: 10px;
    font-size: 1.2rem;
    color: #fff;
}
.lect_notice dl dd {
    font-size: 1.2rem;
    color: #fff;
}

/* ──────────────────────────────────────────────────────────
   3. 학습상담 (.consult_top / .consult_bottom)
   ────────────────────────────────────────────────────────── */

/* 상단: 4개 카드 (수강·증명·자료실·이벤트 등) */
.consult_top {
    padding: 35px 0;
}
.consult_top ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.consult_top ul li {
    position: relative;
    background: #fff;
    width: 245px;
    height: 155px;
    border-radius: 15px;
    transition: all 0.3s;
}
.consult_top ul li:nth-child(1) {
    background: #ddfaff;
}
.consult_top ul li:nth-child(1) a p:nth-of-type(1) {
    color: #118295;
}
.consult_top ul li:nth-child(2) {
    background: #fff7d2;
}
.consult_top ul li:nth-child(2) a p:nth-of-type(1) {
    color: #958436;
}
.consult_top ul li:nth-child(3) {
    background: #eafdce;
}
.consult_top ul li:nth-child(3) a p:nth-of-type(1) {
    color: #62892a;
}
.consult_top ul li:nth-child(4) {
    background: #ffe8e4;
}
.consult_top ul li:nth-child(4) a p:nth-of-type(1) {
    color: #772d20;
}
.consult_top ul li a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 25px;
}
.consult_top ul li a p:nth-of-type(1) {
    font-weight: 500;
    margin-bottom: 5px;
}
.consult_top ul li a p:nth-of-type(2) {
    font-size: 1.5rem;
    font-weight: 800;
}
.consult_top ul li a span {
    display: block;
    width: 50px;
    aspect-ratio: 1 / 1;
    margin-left: auto;
    margin-top: 10px;
}
.consult_top ul li:hover {
    box-shadow: 3px 6px 8px 2px rgb(0 0 0.2 / 20%);
}

/* 하단: 상담 안내 영역 */
.consult_bottom {
    padding: 0 0 35px;
    display: flex;
    justify-content: left;
    gap: 60px;
    align-items: center;
}
.consult_bottom .consult_tit {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    flex-wrap: wrap;
}
.consult_bottom .consult_tit strong {
    display: inline-block;
    line-height: 1;
    font-size: 32px;
    font-weight: 700;
}
.consult_bottom .consult_tit::after {
    position: absolute;
    content: "";
    display: block;
    background: #333;
    width: 1px;
    height: 80%;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}
.consult_tit img {
    width: 36px;
    height: 36px;
    vertical-align: middle;
}
.consult_info ul {
    position: relative;
    display: flex;
    gap: 20px;
    margin: 5px 0;
}
.consult_info ul::after {
    position: absolute;
    content: "";
    display: block;
    background: #333;
    width: 1px;
    height: 80%;
    transform: translate(152px, 2px);
}
.consult_info p {
    font-size: 0.9rem;
}

/* ──────────────────────────────────────────────────────────
   4. 수강생 후기 (#main_cont02 / .best_review / .video_review)
   ────────────────────────────────────────────────────────── */

#main_cont02 {
    padding: 60px 0 50px;
}
#main_cont02 .cont_maxW {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    min-height: auto;
}

/* 컨트롤 영역 공통 */
.best_review .main_ctrl > div,
.video_review .main_ctrl > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.best_review .main_ctrl > div {
    gap: 10px;
}
.video_review .ctrl_wrap {
    justify-content: flex-end;
    height: 40px;
}
.video_review .main_ctrl > div {
    margin-bottom: 10px;
}

/* Best Review (좌측 슬라이더) */
.best_review {
    position: relative;
    z-index: 1;
    flex: 3 1 0;
    min-width: 0;
}
.best_review > .review_trophy {
    position: absolute;
    left: -30px;
    bottom: -30px;
    width: 130px;
    z-index: 2;
    pointer-events: none;
}
.best_review_title {
    display: inline-block;
    line-height: 1;
    font-size: 32px;
    font-weight: 700;
    height: 40px;
}
.best_review .swiper-container {
    position: relative;
    z-index: 1;
    border-radius: 16px;
    border: 2px solid #eee;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    padding: 40px 0;
}
.best_review .swiper-slide {
    height: auto;
    min-height: 280px;
    text-align: center;
    padding: 0 20px;
}
.best_review .ctrl_wrap {
    padding: 0 20px;
}
.best_review .swiper-slide span {
    font-size: 1.4rem;
    font-weight: 700;
}
.best_review .swiper-slide p {
    margin: 10px 0 60px;
    color: #777;
}

/* Video Review (우측 영상 그리드 슬라이더) */
.video_review {
    flex: 6 1 0;
    min-width: 0;
}
.video_review .swiper-slide {
    height: auto;
}
.video_review .swiper-slide ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
    height: 390px;
    align-content: space-between;
}
.video_review .swiper-slide ul li {
    width: auto;
}
.video_review .swiper-slide a {
    display: block;
    width: 100%;
    aspect-ratio: 16/9;
    height: auto;
    line-height: 0;
    background: #ccc;
}
.video_slide_wrap .indi_wrap {
    padding: 15px 0;
}

/* ──────────────────────────────────────────────────────────
   5. 이젠에듀를 선택해야하는 이유 (#main_cont03)
   ────────────────────────────────────────────────────────── */

#main_cont03 {
    padding: 80px 0 60px;
    background: #f7f7f7;
}
#main_cont03 h1 {
    font-size: 1.8rem;
    text-align: center;
}
#main_cont03 .swiper-wrapper {
    height: auto;
}
.choice_reason {
    display: flex;
    gap: 20px;
    text-align: center;
    margin-top: 60px;
}
.choice_reason li {
    flex: 1;
}
.img_box {
    background: #ccc;
    border-radius: 10px 10px 0 0;
}
.txt_box {
    padding: 40px 20px;
    background: #fff;
    border-radius: 0 0 10px 10px;
}
.txt_box h2 {
    font-size: 1.3rem;
}
.txt_box p {
    color: #777;
    margin-top: 15px;
    word-break: keep-all;
}

/* ──────────────────────────────────────────────────────────
   6. 대상별 학습가이드 (#main_cont04 / .guide_list)
   ────────────────────────────────────────────────────────── */

#main_cont04 {
    background: #3e49e3;
}
#main_cont04 .cont_maxW {
    display: flex;
    gap: 40px;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
}
#main_cont04 h3 {
    font-size: 1.8rem;
    color: #fff;
}
.guide_list {
    display: flex;
    gap: 20px;
    color: #fff;
}
.guide_list li {
    flex: 1;
    text-align: center;
}
.guide_list li a {
    display: block;
    width: 160px;
    height: 70px;
    border: 1px solid #fff;
    border-radius: 40px;
    line-height: 70px;
    color: #fff;
}

/* ──────────────────────────────────────────────────────────
   7. 퀵메뉴 (#main_cont05 / .quick_menu)
   ────────────────────────────────────────────────────────── */

.quick_menu {
    display: flex;
    gap: 10px;
    padding: 60px 0;
    border-bottom: 1px solid #eee;
}
.quick_menu li {
    flex: 1;
    text-align: center;
}
.quick_menu li a {
    display: inline-block;
    padding: 10px;
}
.quick_menu li a img {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* ──────────────────────────────────────────────────────────
   8. 모바일 메인 (.m_main_cont01 / .m_course / .m_special_info / .m_ad_banner / .m_choice / .m_review_wrap)
   ────────────────────────────────────────────────────────── */

.m_main_cont01 {
    background: #f9f9f9;
}

.m_main_cont02.hidden {
    transform: translateY(100%);
}

/* 인기 과정 그리드 */
.m_course ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    justify-content: center;
}
.m_course li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    padding: 10px;
}
.m_course li a:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.12);
}
.m_course li a img {
    width: 45px;
    object-fit: contain;
    margin-bottom: 8px;
}
.m_course li a span {
    display: block;
    line-height: 1.2;
    word-break: keep-all;
    font-weight: bold;
}

/* 이젠에듀만의 특별한 혜택 */
.m_special_info h1 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.2;
}
.m_spacial_info_top {
    margin-bottom: 40px;
}
.m_spacial_info_bottom {
    padding-top: 20px;
    border-top: 1px solid #dadada;
}

/* 모바일 광고 배너 */
.m_ad_banner li {
    margin-top: 12px;
}
.m_ad_banner li:first-child {
    margin-top: 0;
}
.m_ad_banner li a {
    display: block;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.m_ad_banner li img {
    object-fit: cover;
    display: block;
}

/* 선택 지표 (4개 아이콘 그리드) */
.m_choice {
    display: flex;
    justify-content: space-between;
    text-align: center;
}
.m_choice li {
    width: 25%;
    padding: 10px 5px;
}
.m_choice li span {
    display: block;
    font-size: 1.3rem;
    color: #777;
    margin-bottom: 4px;
    line-height: 1.2;
}
.m_choice li p {
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}
.m_choice li img {
    width: 7rem;
    height: auto;
    display: block;
    margin: 20px auto 0;
}

/* 수강생 합격후기 */
.m_review_wrap {
    height: fit-content;
}
.m_review_wrap h1 {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    text-align: center;
    margin-bottom: 30px;
    line-height: 1.2;
}
.m_review_bottom h2 {
    font-weight: 600;
    line-height: 20px;
    padding-top: 10px;
}

/* ──────────────────────────────────────────────────────────
   9. 공지사항·자주하는 질문 (#main_cont06 / .summary_board)
   ────────────────────────────────────────────────────────── */

.summary_board {
    display: flex;
    gap: 50px;
    padding: 40px 0 70px;
    flex-wrap: wrap;
}
.summary_board .board {
    flex: 1 1 47%;
}
.summary_board a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top h4 {
    font-size: 1.8rem;
    padding: 0.5em 0;
}

/* ──────────────────────────────────────────────────────────
   10. 유관기관 인증 (.certify_wrap)
   ────────────────────────────────────────────────────────── */

.certify_wrap {
    overflow: hidden;
    position: relative;
    width: 100%;
}
.certify_wrap h2 {
    padding: 45px 0;
    font-size: 25px;
    font-weight: 600;
    text-align: center;
}
.certify_wrap h2 span {
    color: #cf151a;
    font-size: 25px;
    font-weight: 800;
}
.mySwiper {
    overflow: hidden;
}
.certify_wrap .swiper-wrapper {
    display: flex;
    transition: transform 0.4s ease;
    height: auto;
    align-items: center;
}
.certify_wrap .swiper-slide {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 180px;
    min-width: 180px;
}
.certify_wrap .swiper-slide img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* 슬라이더 행 */
.certify-slider-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.certify-slider-row .mySwiper {
    flex: 1;
    min-width: 0;
}
.certify-prev,
.certify-next {
    flex-shrink: 0;
    z-index: 10;
    font-size: 2rem;
    color: #333;
    border: none;
    cursor: pointer;
    background: #fff;
}

/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */

/* ── Tablet: max-width: 1000px ────────────────────────────── */

@media (max-width: 1000px) {
    /* 1. 메인 배너 */
    .main-bn-slide .main-bn-control {
        top: 28vw;
        width: 100%;
    }

    /* 2. 학사알림 */
    .lect_notice dl {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }

    /* 6. 학습가이드 */
    .guide_list {
        width: 100%;
        flex-wrap: wrap;
    }
    .guide_list li a {
        display: block;
        padding-bottom: 3vw;
    }

    /* 10. 유관기관 인증 */
    .certify_wrap .inner {
        position: relative;
    }
    .certify_wrap > div > h2 {
        padding: 5vw 0;
    }
    .certify_wrap > div > h2,
    .certify_wrap > div > h2 span {
        font-size: 3.5vw;
    }
}

/* ── Mobile: max-width: 768px ─────────────────────────────── */

@media (max-width: 768px) {
    /* 1. 메인 배너 */
    .main-bn-slide .main-bn-control {
        top: 82vw;
    }

    /* 8. 모바일 메인 - 합격후기 */
    .m_choice li span {
        display: block;
        font-size: 0.8rem;
        color: #777;
        margin-bottom: 4px;
        line-height: 1.2;
    }
    .m_choice li p {
        font-size: 1rem;
        font-weight: 600;
        color: #333;
        margin: 0;
        padding: 0;
        line-height: 1.2;
    }
    .m_choice li img {
        width: 4rem;
        height: auto;
        display: block;
        margin: 20px auto 0;
    }

    /* 10. 유관기관 인증 — 좌우 버튼 모바일에서 숨김 */
    .certify_wrap .swiper-slide {
        width: 140px;
        min-width: 140px;
    }
    .certify-slider-row .certify-prev,
    .certify-slider-row .certify-next {
        display: none;
    }
}