#education-wrap { background:url('/images/education-bg.png') no-repeat center / cover ; padding:120px 20px; }
#education-wrap .education-cover { max-width:1400px; width:100%; margin:0 auto; }

.edu-info { display: flex; justify-content: space-between; align-items: center; }
.edu-info .total .count { color:#0057E7; font-weight:700; }
.edu-info .box-cover { display: flex; align-items: center; gap: 16px; }
.edu-info .edu-table-box { padding: 10px; border-radius: 8px; border: 1px solid #0057E7; font-size: 15px; line-height: 1.3; color: #0057E7; font-weight: 400; cursor:pointer; }
/* 커스텀 셀렉트 컨테이너 */
.edu-info .custom-select-box { min-width:120px; max-width:120px; position: relative; width: 100%; cursor: pointer; background: #fff; border-radius: 8px; font-size: 16px; text-align: left; }
/* 선택된 값이 보여지는 영역 */
.edu-info .selected-value { padding: 8px 12px; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
.edu-info .selected-value:hover { border-color: #94a3b8; }
.edu-info .selected-value img { width:14px; height:14px; transition:all .3s; }
.edu-info .custom-select-box.active .selected-value img { transform:rotate(180deg); }
/* 옵션 리스트 (기본 숨김) */
.edu-info .options-list { position: absolute; top: calc(100% + 5px); left: 0; width: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); z-index: 50; display: none; max-height: 300px; overflow-y: auto; }
/* 개별 옵션 */
.edu-info .option-item { padding: 10px 12px; transition: background 0.2s; }
.edu-info .option-item:hover { background: #f1f5f9; color: #0057E7; /* Argon 테마 포인트 컬러 */ }
.edu-info .option-item.selected { color: #0057E7; /* Argon 테마 포인트 컬러 */ }

.edu-body { margin:24px 0 0; }
.edu-body > ul { gap:40px 24px; }
.edu-body > ul .education-card { border-radius:10px; border:1px solid #D5D5D5; overflow:hidden; }
.edu-body > ul .education-card .info-wrap { padding:30px 25px; border-top:1px solid #D5D5D5; background-color:#fff; }
.edu-body > ul .education-card .info-wrap .title-wrap { gap:0 8px; }
.edu-body > ul:has(.empty-education) { display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height:350px;
}
.edu-body > ul:has(.empty-education) span { display:block; font-size:20px; font-weight:500; }
.edu-body > ul:has(.empty-education) a {
    display: inline-block;
    background: #3480fe;
    color: #fff;
    margin:50px 0 0;
    padding: 15px 20px;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 6px rgb(71 90 230 / 20%);
    transition: transform 0.1s, background 0.4s; }
.edu-body > ul:has(.empty-education) + .dataTable-bottom { display: none; }

/* 비디오 컨테이너 16:9 비율 고정 */
.video-container {
    padding-top: 56.25%; /* 16:9 ratio (9 / 16 * 100) */
    position: relative;
    width: 100%;
}

/* 이미지 느낌의 썸네일 대신 영상을 바로 보여줄 때 */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.thumb-container { position:relative; }
.thumb-container img { width:100%; height:auto; }
.thumb-container .ico-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }

/* 스크린샷 무드 재현: 교수명 스타일 */
.professor { width:100%; display: flex; align-items: center; justify-content: space-between; }
.professor-wrap {
    display: flex;
    align-items:center;
    gap:0 6px;
    font-size: 14px;
    letter-spacing: -0.02em;
    flex:1;
}
.view-wrap .view-count { font-size:14px; color:#606060; font-weight:500; }

/* 스크린샷 무드 재현: 강의 제목 */
.video-title {
    font-size: 15px;
    line-height: 1.4;
    word-break: keep-all; /* 한글 단어 끊김 방지 */
}

/* 카드 간격 및 호버 애니메이션 */
.education-card {
    transition: transform 0.2s ease-in-out;
}

.education-card:hover {
    transform: translateY(-10px);
}

/* 카테고리 태그 (스크린샷의 '이론' 등) */
.category {
    background: #001865;
    color: #fff;
    font-size: 14px;
    width: 100%;
    max-width: 70px;
    padding: 2px 5px;
    text-align: center;
    border-radius:2px;
}
.category[data-cate^="사례분석"] { background: #006559; }

.dataTable-bottom { margin:150px 0 0; }
.dataTable-pagination-list { display:flex; align-items:center; justify-content: center; }
.dataTable-pagination a {
    color: #4a5568 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    margin: 0 3px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s;
    display: block;
    min-width: 36px; /* 화살표 버튼들이 찌그러지지 않게 최소 너비 고정 */
    text-align: center;
}

.dataTable-pagination li:not(.active) a:hover {
    background: #edf2f7 !important;
}
/* 기존 CSS에 추가 */
.dataTable-pagination-list {
    list-style: none; /* 불필요한 점 제거 */
    padding: 0;
}

.dataTable-pagination li a {
    text-decoration: none; /* 링크 밑줄 제거 */
}

/* 현재 페이지 강조 유지 */
.dataTable-pagination li.active a {
    background: #0057E7 !important;
    color: #ffffff !important;
    border-color: #0057E7 !important;
}

/* 모달 팝업 */
#video-popup { display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:99; }
.video-cover { width:90%; max-width:1000px; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:10; }
.video-cover .video-header .close { display: flex; justify-content: flex-end; gap: 0 8px; }
#video-popup.on { display:block; }

/* #total-video-table */
#total-video-table { opacity:0; visibility: hidden; pointer-events: none; position: fixed;top: 55%;left: 50%;transform: translate(-50%, -50%);max-width: 1400px;width: 100%;max-height: 650px;height: 100%;background-color: #fff;padding: 60px; border:1px solid #D5D5D5; border-radius:5px; transition:all .3s; z-index:90; box-shadow:8px 8px 8px 0px rgba(0,0,0,.1); }
.edu-table-cover { max-height: 530px;overflow-y: scroll; overflow-x:hidden; text-align: center; padding-right:20px; }
.edu-table-cover .thead { display:flex; border-top:1px solid #d5d5d5; border-bottom:1px solid #d5d5d5; }
.edu-table-cover .thead .tr { justify-content: center; padding:20px 0; font-size:15px; font-weight:600; background-color:#F9F9F9; }
.edu-table-cover .thead .tr.className { text-align:center; }
.education-series .series-title { background-color:#F9F9F9; border-bottom:1px solid #d5d5d5; }
.education-series .series-title span { display:block; padding:20px 0; text-align:center; font-weight:600; font-size:16px; }
.lecture-group [class^='lecture-row'] { display:flex; width:100%; border-bottom:1px solid #d5d5d5; padding:20px 0; cursor:pointer; }
.lecture-group [class^='lecture-row'].active .arrow-down img { transform:rotate(180deg); }
.lecture-group [class^='lecture-items'] { display:none; }
.lecture-group [class^='lecture'] .video-row { display:flex; width:100%; border-bottom:1px solid #d5d5d5; padding:20px 0; }
.edu-table-cover .className { width:100%; max-width:225px; text-align:center; }
.edu-table-cover .subjectName { width:500px; max-width:500px; }
.edu-table-cover .professor { width:200px; max-width:200px; justify-content:center; }
.edu-table-cover .video { display: flex; justify-content: center; align-items: center; width:200px; max-width:200px; }
.edu-table-cover .video img { width:25px; cursor:pointer; }
.edu-table-cover .view-count{ display:flex; justify-content:center; align-items:center; width:100%; max-width:150px; }
.edu-table-cover .arrow-down { display:flex; justify-content:center; align-items:center; width:100%; max-width:75px; }
.edu-table-cover .arrow-down img { width:15px; cursor:pointer; transition:all 0.3s; }
#total-video-table .close-btn { position:absolute; top:20px; right:20px; cursor:pointer; }
#total-video-table.active { opacity:1; visibility: visible; pointer-events: auto; top:50%; }

.lecture-group [class^='lecture-row'] .professor.pc { display:block; }
.lecture-group [class^='lecture-row'] .professor.mo { display:none; }

/* --- 교육/강의 목록 반응형 대응 --- */
/* 1400px 이하: 전체적인 여백 조정 */
@media screen and (max-width: 1440px) {
    #total-video-table { width:90%; padding:40px; }
    .education-series .series-title span { padding:20px 0; }
    .edu-table-cover { max-height:570px; }
    #total-video-table .close-btn { top:10px; right:10px; }
}

/* 1024px 이하 (태블릿): 3열 또는 2열 배치로 전환 */
@media screen and (max-width: 1024px) {
    #education-wrap { padding:70px 20px; }
    .edu-title { margin: 40px 0 0; }
    .edu-info .box-cover { gap:8px; }
    .edu-body > ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 2열 배치 */
        gap: 30px 20px;
    }

    .video-cover {
        width: 95%; /* 모달 팝업 가로 확장 */
    }
    .edu-body > ul:has(.empty-education) span,
    .edu-body > ul:has(.empty-education) a { font-size:16px; }


    /* video-table */
    #total-video-table { width:calc(100% - 40px); padding:40px 0; max-height:70dvh; }
    .edu-table-cover { max-height:100%; padding:0; }
    .edu-table-cover .thead { display:none; }
    .education-series .series-title { background-color:#f9f9f9; }
    .education-series:nth-child(1) .series-title { border-top:1px solid #d5d5d5; background-color:#f9f9f9; }
    .education-series .series-title span { text-align: center; width: 100%; max-width: 100%; padding: 10px 0; }
    .lecture-group { border-bottom:1px solid #d5d5d5; }
    .lecture-group [class^='lecture-row'],
    .lecture-group [class^='lecture'] .video-row { position:relative; padding:20px 10px; gap:5px; border-bottom:0; }
    .edu-table-cover .className { width:auto; max-width:100%; min-width:80px; }
    .edu-table-cover .subjectName { width:auto; max-width:100%; text-align:left; }
    .edu-table-cover .professor { width:auto; max-width:100%; min-width:100px; }
    .edu-table-cover .video { width:auto; max-width:100%; display:none; }
    .edu-table-cover .view-count { width:auto; max-width:100%; margin-left:auto; display:none; }
    .edu-table-cover .arrow-down { max-width:25px; margin-left:auto; }
    .lecture-group [class^='lecture'] .video-row .subjectName { color:#3a416f; }
    .lecture-group [class^='lecture-row'] { }
    .lecture-group [class^='lecture-row'] .professor.pc { display:none; }
    .lecture-group [class^='lecture-row'] .professor.mo { display:inline-block; }
    .lecture-group [class^='lecture-row'] .professor { color:#0057E7; }
    .lecture-group [class^='lecture-items'] .className { color:#3a416f; }
    .lecture-group [class^='lecture-items'] .video { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:calc(100% - 20px); height:calc(100% - 40px); cursor:pointer; display:flex; }
    .lecture-group [class^='lecture-items'] .video img { position:absolute; top:50%; right:0; transform:translateY(-50%); }
    .lecture-group [class^='lecture-items'] .professor,
    .lecture-group [class^='lecture-items'] .view-count,
    .lecture-group [class^='lecture-items'] .arrow-down { display:none; }
}

/* 768px 이하 (모바일): 1열 배치 및 폰트 조정 */
@media screen and (max-width: 768px) {
    .edu-title h2 { font-size: 24px; }

    .edu-body > ul {
        grid-template-columns: repeat(1, 1fr); /* 1열 배치 */
        gap: 24px;
    }

    .edu-body > ul .education-card .info-wrap {
        padding: 20px 15px; /* 내부 여백 축소 */
    }

    .video-title {
        font-size: 14px;
    }

    /* 페이지네이션 모바일 최적화 */
    .dataTable-pagination a {
        padding: 6px 10px !important;
        margin: 0 2px !important;
        font-size: 12px !important;
        min-width: 32px;
    }

    .dataTable-bottom {
        margin: 80px 0 0;
    }

    /* 비디오 팝업 닫기 버튼 크기 조정 */
    .video-cover .video-header .close svg {
        width: 30px;
        height: 30px;
    }

    /* video-table */
    .lecture-group [class^='lecture-row'] { padding:8px 10px; }
    .lecture-group [class^='lecture'] .video-row { padding:8px 40px 8px 10px; }
    .lecture-group [class^='lecture-items'] .video { height:calc(100% - 16px); }
    .edu-table-cover .className,
    .edu-table-cover .professor { min-width:auto; white-space: nowrap; }
}

/* 480px 이하 (작은 모바일) */
@media screen and (max-width: 480px) {
    .edu-title { text-align: center; }
    .edu-info { flex-direction: column; align-items: flex-start; }
    .edu-info .box-cover { width:100%; margin:20px 0 0; justify-content: space-between; }

    /* 페이지네이션 숫자 너무 많을 경우 대비 */
    .dataTable-pagination-list {
        flex-wrap: wrap;
        gap: 5px 0;
    }
}