/* ==============================================
    BASE
    ============================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.conDiv {
    width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
    overflow: hidden;
}

* {
    font-family: Pretendard, 'Noto Sans KR', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif !important;
}

#top_btn2 {
    display: none;
}

/* ==============================================
    배너 섹션 - 양쪽 어두운 영역 포함
============================================== */
.banner-section {
    width: 100%;
    background: #fff;
    /* 좌우 peek 배경 */
    padding: 8px 0 0 0;
    overflow-x: clip;
    /* 가로 스크롤 방지, banner-controls는 클리핑 안 됨 */
}

/* ==============================================
    Swiper 컨테이너
    ============================================== */
.banner-swiper {
    overflow: visible !important;
    /* 양옆 슬라이드가 보이도록 (Swiper 기본값 오버라이드) */
    padding: 10px 0;
}

/* centeredSlides + slidesPerView:auto 조합 */
.banner-swiper .swiper-wrapper {
    align-items: stretch;
    padding: 10px 0;
}

/* ==============================================
    슬라이드 크기 (좌우 peek 구조)
    ============================================== */
.swiper-slide.banner-slide {
    /* 전체 너비에서 양쪽 각 140px peek = -280px */
    width: 1140px;
    max-width: 1140px;
    min-width: 1140px;
    height: 286px;
    border-radius: 24px;
    font-size: 15px;
    color: #000;
    text-align: center;
    line-height: 286px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    padding-left: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-slide .text-area {
    width: 520px;
    text-align: left;
}

.banner-slide .text-area ._tit {
    color: #1C2423;
    font-size: 28px;
    font-weight: 700;
    line-height: 40px;
    /* 142.857% */
    letter-spacing: -0.56px;
}

.banner-slide .text-area ._txt {
    color: #000;
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    /* 156.25% */
    letter-spacing: -0.32px;
}

.banner-slide .img-area {
    width: 497px;
    height: 266px;
}

.banner-swiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.banner-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px 0 48px;
    position: absolute;
    /* _poAb 적용 */
    bottom: 20px;
    left: calc(50% - 570px);
    width: 1140px;
    max-width: 1140px;
    min-width: 1140px;
    z-index: 10;
}

.banner-controls-box {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 38px;
    background: rgba(255, 255, 255, 0.60);
    padding: 6px 10px;
}

.banner-counter {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

.banner-current {
    color: #000;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 100%;
    /* 12px */
    letter-spacing: -0.24px;
}

.banner-total {
    color: #000;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    /* 12px */
    letter-spacing: -0.24px;
    opacity: 0.5;
}

.banner-progress-wrap {
    width: 88%;
    height: 2px;
    background: rgba(0, 0, 0, 0.40);
    overflow: hidden;
    opacity: 40%;

}

.banner-progress-bar {
    height: 100%;
    width: 0%;
    background: #fff;
    border-radius: 2px;
    transition: width linear;
}

.banner-btn {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    line-height: 1;
    position: relative;
    padding-top: 2px;
}

/* .banner-btn.banner-prev::after {
    content: '';
    width: 1px;
    height: 11px;
    background-color: #000;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 2.3px;
    left: 17px;
} */

.live-section {
    margin-top: 46px;
    padding-bottom: 74px;
}

.section_tit {
    color: var(--Color-GY-BK, #040404);
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 23px;
    /* 22px */
    letter-spacing: -0.44px;
    margin-bottom: 16px;
}

.ft_red {
    color: var(--Red-600, #E83534);
}

.box_wrap {
    gap: 20px;
}

.box_info {
    width: 252px !important;
}

.box_info ._thmn {
    width: 252px;
    /* height: 157px; */
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.box_info ._thmn img {
    transition: filter 0.3s ease;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}

.box_info ._thmn .thmn-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    line-height: 160%;
    /* 20.8px */
    letter-spacing: -0.13px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: rgba(0, 0, 0, 0.2);
    /* 반투명 어둠 효과 (선택) */
}

/* hover 시 이미지 블러 + 텍스트 표시 */
.box_info ._thmn:hover img {
    filter: blur(3px);
}

.box_info ._thmn:hover .thmn-hover-overlay {
    opacity: 1;
}

.box_info .__txt {
    color: #999;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 12px;
    letter-spacing: -0.24px;
    margin-bottom: 6px;
}

.box_info .__tit {
    color: var(--Color-GY-BK, #040404);
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    /* 24px */
    letter-spacing: -0.3px;
    margin-bottom: 4px;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 48px;
}

.box_info .__btn {
    width: 100%;
    height: 34px;
    line-height: 32px;
    border-radius: 8px;
    border: 1px solid var(--Color-GY-200, #CED2DA);
    text-align: center;
    color: var(--Color-GY-800, #454C59);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.24px;
}

.alram_btn {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
}

.alram_icon {
    width: 9px;
    height: 11px;
}

.time-section {
    padding: 74px 0 46px 0;
    /* background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 84.96%, #FFF 100%), url('/assets/img/main/time_bg.png') lightgray 0% 0% / 10.000000149011612px 10.000000149011612px repeat; */
    background: url('/assets/img/main/time_bg.png') no-repeat center center;
}

.time-section .conDiv {
    text-align: center;
}

.time-section ._tit {
    color: var(--Color-GY-BK, #040404);
    font-size: 32px;
    font-weight: 700;
    line-height: 150%;
    /* 48px */
    letter-spacing: -0.64px;
    margin-bottom: 6px;
    text-align: center;
}

.time-section ._txt {
    text-align: center;
    color: #1C1C1C;
    text-align: center;
    font-size: 15px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 22.5px */
    letter-spacing: -0.3px;
    margin-bottom: 18px;
}

.time-gallery-btn {
    padding: 0 28px;
    height: 40px;
    border-radius: 28px;
    background: linear-gradient(90deg, #074DFF 0%, #2A7FFF 100%);
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 160%;
    /* 22.4px */
    letter-spacing: -0.28px;
    display: block;
    margin: 0 auto;
    margin-bottom: 37px;
}

.time-gallery-swiper-wrap,
.review-swiper-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.time-gallery-swiper .swiper-slide {
    position: relative;
    width: auto;
    height: 220px;
}

.review-marquee {
    display: flex;
    gap: 44px;
    width: max-content;
    -webkit-animation: review-marquee-scroll 30s linear infinite;
    animation: review-marquee-scroll 30s linear infinite;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.review-marquee img {
    height: 128px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

@-webkit-keyframes review-marquee-scroll {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    100% {
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}

@keyframes review-marquee-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.review_text {
    color: var(--Color-GY-400, #99A2B2);
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.2px;
    margin-top: 45px;
    text-align: center;
}

.time-gallery-swiper .swiper-slide picture {
    display: contents;
}

.time-gallery-swiper .swiper-slide img {
    cursor: pointer;
    height: 220px;
    width: auto;
    object-fit: cover;
    display: block;
    border-radius: 6px;
}

.recommend-section {
    padding: 40px 0 100px 0;
}


.recommend-swiper-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.recommend-swiper .swiper-slide,
.part-lec-wrap .lec-list {
    width: 252px;
}

.recommend-swiper .swiper-slide ._thmn,
.part-lec-wrap .lec-list ._thmn {
    width: 100%;
    /* height: 157px; */
    border-radius: 8px;
    border: 1px solid #EBEBEB;
    margin-bottom: 8px;
    cursor: pointer;
    aspect-ratio: 16 / 9;
}

.recommend-swiper .swiper-slide ._thmn img,
.part-lec-wrap .lec-list ._thmn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 7px;
}


.recommend-swiper .swiper-slide ._tit,
.part-lec-wrap .lec-list ._tit {
    word-break: keep-all;
    color: var(--Color-GY-950, #1D2025);
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    /* 24px */
    letter-spacing: -0.3px;
    margin-bottom: 8px;
    height: 48px;
    cursor: pointer;
}

.recommend-swiper .swiper-slide .detail_box,
.part-lec-wrap .lec-list .detail_box {
    gap: 8px;
    margin-bottom: 4px;
}

.recommend-swiper .swiper-slide .detail_box .lec_review,
.part-lec-wrap .lec-list .lec_review {
    padding-left: 15px;
    background: url('/assets/img/main/star_icon.png') no-repeat left center;
    color: #737373;
    font-size: 11px;
    font-weight: 400;
    line-height: 15px;
}

.recommend-swiper .swiper-slide .detail_box .lec_viewer,
.part-lec-wrap .lec-list .lec_viewer {
    padding-left: 12px;
    background: url('/assets/img/main/person_icon.png') no-repeat left center;
    color: #737373;
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px;
}

/* 2026-08-31 유호경 추가 */
.time-gallery-swiper .swiper-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    border-radius: 15px;
}

.time-gallery-swiper .swiper-slide:hover::after {
    opacity: 0.7;
}

/* hover 텍스트 */
.time-gallery-swiper .img-hover-text {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border-radius: 15px;
    overflow: hidden;

    z-index: 2;

    color: #fff;
    font-size: 18px;
    font-weight: 600;

    opacity: 0;
    transition: opacity 0.2s ease;

    pointer-events: auto;
    cursor: pointer;
}

.time-gallery-swiper .img-hover-text--action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.24px;
}

.time-gallery-swiper .img-hover-text--action img {
    display: block;
    width: 34px;
    height: 34px;
    border-radius: 0;
}

.time-gallery-swiper .swiper-slide:hover .img-hover-text {
    opacity: 1;
}


/* 2026-08-31 유호경 추가: 중간 배너 유튜브 영상 팝업 */
.time-gallery-video-popup {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.time-gallery-video-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
}
.time-gallery-video-content {
    position: relative;
    z-index: 1;
    width: min(640px, calc(100vw - 40px));
    aspect-ratio: 8 / 5;
    /* overflow: hidden; 제거 */
}

.time-gallery-video-content iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 20px;
    background: #000;
}
.time-gallery-video-close {
    position: absolute;
    top: -22px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.time-gallery-video-close img {
    display: block;
    width: 14px;
    height: 14px;
}

.part-lec-wrap {
    gap: 20px;
    height: 260px;
}

.part-lec-wrap .lec-list ._lec_type {
    color: var(--Color-GY-700, #545D6D);
    font-size: 12px;
    font-weight: 500;
    line-height: 100%;
    /* 12px */
}

.recommend-swiper .swiper-slide ._lbl {
    padding: 2px 4px;
    color: var(--secodary-2800, #126A0C);
    font-size: 12px;
    font-weight: 600;
    line-height: 140%;
    /* 16.8px */
    letter-spacing: -0.24px;
    border-radius: 3px;
    background: rgba(34, 197, 22, 0.10);
}

.recommend-swiper .swiper-slide ._lbl2 {
    background: rgba(32, 148, 238, 0.10);
    color: var(--secodary-1700, #0E71BE);
}

.swiper-btn-wrap {
    top: 0;
    right: 16px;
    font-size: 0;
}

.swiper-btn-prev,
.swiper-btn-next {
    background: rgba(0, 0, 0, 0.08);
    color: #000;
    border: none;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.swiper-btn-prev {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.swiper-btn-next {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.swiper-btn-prev::after {
    content: '';
    width: 1px;
    height: 11px;
    background-color: #000;
    opacity: 0.4;
    display: block;
    position: absolute;
    top: 7.5px;
    left: 26px;
}

.senior-talk-section {
    padding-bottom: 60px;
}

.senior-talk-section .conDiv {
    overflow: visible;
}

.talk_con {
    gap: 24px;
    max-width: 1100px;
    margin: 10px auto 50px auto;
    align-items: flex-start;
}

/* 이미지 영역 스타일 */
.talk-image-section {
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    width: 317px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#main-image {
    width: 100%;
    height: auto;
    display: block;
    /* transition 시간을 0.1s~0.2s로 짧게 잡으면 즉각적이면서도 부드럽습니다. */
    transition: opacity 0.1s ease;
    object-fit: cover;
    /* 이미지 비율 유지 */
    cursor: pointer;
}

.talk_list {
    flex: 1.5;
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 430px;
    /* 이미지 영역과 동일 높이로 고정 — 레이아웃 높이만 고정 */
    overflow: visible;
    /* box-shadow·::before 보더 클리핑 방지 */
}

.card {
    position: relative;
    width: 759px;
    background: #f8f9fa;
    /* 기본 배경색 (연한 회색) */
    border-radius: 15px;
    padding: 20px 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

/* 활성화(클릭) 되었을 때 스타일 */
.card.active {
    position: relative;
    /* 가상 요소의 기준점이 됨 */
    background: #fff;
    border-radius: 20px;
    /* 피그마에 설정된 곡률 */
    z-index: 1;
    /* 테두리보다 위에 오도록 설정 */
    border: none;
    /* 기존 테두리는 제거 */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    /* 부드러운 그림자 */
    padding: 30px;
    transition: transform 0.3s ease;
}

/* 둥근 그라데이션 테두리를 만드는 핵심 가상 요소 */
.card.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    /* 카드와 동일한 곡률 */
    padding: 2px;
    /* ★ 이 값이 실제 테두리 두께가 됩니다 ★ */

    /* 피그마에서 추출한 그라데이션 색상 */
    background: linear-gradient(to right, #8DBEFE, #E8EAEE);

    /* 내부를 깎아내서 테두리만 남기는 마법의 속성 */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    pointer-events: none;
    /* 클릭 방해 금지 */
    z-index: -1;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card .title {
    color: var(--Color-GY-900, #333842);
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    /* 24px */
    letter-spacing: -0.32px;
}

.card.active .title {
    color: var(--Primary-600, #163FC5);
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 24px */
    letter-spacing: -0.32px;
}

.icon {
    font-size: 24px;
    color: #cbd5e1;
    transition: transform 0.3s ease;
}

.card.active .icon {
    transform: rotate(45deg);
    /* +가 x로 변하는 효과 */
    color: #3b82f6;
}

.card-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-top: 0;
    line-height: 1.6;
    color: #4b5563;
}

.card.active .card-content {
    max-height: 200px;
    /* 충분한 높이값 */
    opacity: 1;
    margin-top: 9px;
    color: var(--Color-GY-800, #454C59);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 160%;
    /* 22.4px */
    letter-spacing: -0.28px;
}

.review-img-section {
    padding-bottom: 80px;
}

.info-section {
    padding: 100px 0;
    background: #0F0F0F;
}

.weekly-section {
    padding-bottom: 100px;
}

.weekly-section .sub_tit {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 25.2px */
    letter-spacing: -0.36px;
    margin-bottom: 0;
}

.weekly-section ._tit {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.48px;
}

.info-section .con_wrp {
    margin-top: 22px;
    gap: 30px;
}

.report_card {
    width: 346px;
    height: 400px;
    border-radius: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.05%, rgba(0, 0, 0, 0.80) 92.89%), var(--img-pc) lightgray 50% / cover no-repeat;
    cursor: pointer;
}

@media (max-width: 768px) {
    .report_card {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.05%, rgba(0, 0, 0, 0.80) 92.89%), var(--img-mo) lightgray 50% / cover no-repeat;
    }
}

.report_info_box {
    bottom: 26px;
    left: 26px;
    right: 26px;
}

.report_info_box .__tit {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 25.2px */
    letter-spacing: -0.36px;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    overflow-wrap: break-word;
    white-space: pre-line;
}

.report_info_box .tag_lbl_wrap {
    gap: 6px;
}

.report_info_box .tag_lbl_wrap ._tag {
    padding: 5px 6px;
    border: 1px solid rgba(4, 4, 4, 0.20);
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: blur(4.5px);
    color: var(--Color-GY-400, #99A2B2);
    font-size: 13px;
    font-weight: 400;
    line-height: 100%;
    /* 13px */
    letter-spacing: -0.26px;
}

.lec-guide-section {
    padding: 20px 0 20px 0;
    /* height: 677px; */
}

.lec-guide-section img {
    margin-bottom: 20px;
}

.lec-guide-wrap {
    gap: 100px;
}



.dashboard {
    display: flex;
    gap: 100px;
    padding: 0 30px;
    max-width: 1100px;
    margin: 0 auto;
}

/* 사이드바 스타일 */
nav.sidebar {
    width: 348px;
    border-bottom: 0;
}

.main-menu {
    color: var(--Color-GY-900, #333842);
    font-family: Pretendard;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%;
    /* 44.8px */
    letter-spacing: -0.64px;
    cursor: pointer;
    transition: color 0.3s;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 활성화된 메인 메뉴: 그라데이션 언더라인 */
.main-menu.active {
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    /* 44.8px */
    letter-spacing: -0.64px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    background: linear-gradient(90deg, #80F1FA 0%, #2562FF 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.badge {
    background: #00c853;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-text-fill-color: white;
    /* 텍스트 그라데이션 방지 */
}

/* 서브 메뉴 컨테이너: 슬라이드 효과를 위한 설정 */
.sub-menu-container {
    display: grid;
    grid-template-rows: 0fr;
    /* 처음에 높이를 0으로 설정 */
    transition: grid-template-rows 0.4s ease-in-out;
    /* 부드러운 슬라이드 시간 */
    overflow: hidden;
}

.menu-group {
    padding: 18px 0;
    border-top: 1px solid #1D2025;
}

/* 활성화되었을 때 높이를 내부 콘텐츠 크기만큼 확장 */
.menu-group.active .sub-menu-container {
    grid-template-rows: 1fr;
}

.sub-menu {
    min-height: 0;
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.sub-menu li {
    padding-top: 16px;
    color: #999;
    cursor: pointer;
    font-size: 18px;
    opacity: 0;
    /* 닫혀있을 때 투명하게 */
    transform: translateY(-10px);
    /* 위에서 아래로 내려오는 효과 */
    transition: all 0.3s ease;
    font-weight: 500;
    line-height: 18px;
    /* 25.2px */
    letter-spacing: -0.36px;
}

/* 메뉴가 열릴 때 내부 글자 애니메이션 */
.menu-group.active .sub-menu li {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
    /* 살짝 늦게 나타나게 해서 더 고급스럽게 */
}

.sub-menu.active {
    display: block;
}

.sub-menu li.active {
    color: #fff;
    font-weight: 600;
}

.menu-group.active .sub-menu-container {
    grid-template-rows: 1fr;
}

.sub-menu-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease-in-out;
    overflow: hidden;
}

/* 우측 컨텐츠 박스 */
.content-area {
    flex: 1;
}

.content-card {
    width: 582px;
    background: #fff;
    border-radius: 25px;
    min-height: 500px;
}

.content-card.content-lec {
    padding: 20px;
}

.course-list {
    margin-bottom: 12.5px;
    gap: 20px;
}

.course-list:last-child {
    margin-bottom: 0;
}

.course-list ._thmn {
    width: 180px;
    height: 108px;
    border-radius: 8px;
    border: 1px solid #EBEBEB;
}

.course-list .content-box {
    width: 382px;
}

.content-box .__tit {
    color: #141414;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
    /* 25.6px */
    letter-spacing: -0.32px;
    margin-bottom: 4px;
    word-break: keep-all;
}

.content-box .detail_box {
    gap: 8px;
    margin-bottom: 8px;
}

.content-box .detail_box .lec_review {
    padding-left: 15px;
    background: url('/assets/img/main/star_icon.svg') no-repeat left center;
    color: #737373;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

.content-box .detail_box .lec_viewer {
    padding-left: 12px;
    background: url('/assets/img/main/person_icon.svg') no-repeat left center;
    color: #737373;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 17px;
}

.part-lec-section {
    padding: 60px 0 74px 0;
}

.part-tab-wrap {
    margin-bottom: 18px;
    gap: 10px;
}

.part-tab-wrap .part_btn {
    padding: 5px 12px;
    border-radius: 6px;
    border: 1px solid #EFF2F6;
    background: #EFF2F6;
    text-align: center;
    color: var(--BlueGY-800, #2F3642);
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 19.5px */
    letter-spacing: -0.26px;
}

.part-tab-wrap .part_btn:hover,
.part-tab-wrap .part_btn.active {
    border-radius: 8px;
    background: var(--BlueGY-900, #191E24);
    border-color: var(--BlueGY-900, #191E24);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.37);
    color: #FFF;
    font-weight: 700;
    outline: none;
}

.book-section {
    padding-bottom: 110px;
}

.book-wrap {
    gap: 40px;
    align-items: flex-start
}

.book-wrap .book_bnr_info {
    padding: 34px 30px;
}

.book-wrap .book_bnr_info ._tit {
    font-size: 20px;
    font-weight: 700;
    line-height: 150%;
    letter-spacing: -0.4px;
    margin-bottom: 8px;
}

.book-wrap .book_bnr_info ._txt {
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.02px;
    margin-bottom: 14px;
    word-break: keep-all;
}

.book-wrap .book_bnr_info .tag-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.book-wrap .book_bnr_info .tag-group span {
    display: block;
    color: #1082DA;
    font-size: 12px;
    font-weight: 600;
}

.book_bnr {
    width: 378px;
    height: 604px;
    border-radius: 20px;
    background: #E5F7FE;
    background-repeat: no-repeat;
    background-size: contain;
    cursor: pointer;
    flex-shrink: 0;
}

.book_list {
    width: 682px;
    gap: 21px;
    flex-wrap: wrap;
}

.book_list .book_info_box {
    width: 196px;
    /* height: 285px; */
}

.book_list .book_info_box ._thmn {
    width: 100%;
    height: 190px;
    margin-bottom: 9px;
}

.book_list .book_info_box ._thmn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.book_list .book_info_box ._tit {
    color: var(--Color-GY-950, #1D2025);
    font-size: 14px;
    font-weight: 600;
    line-height: 140%;
    /* 19.6px */
    letter-spacing: -0.28px;
    margin-bottom: 6px;
}

.book_list .book_info_box ._txt {
    color: var(--Color-GY-800, #454C59);
    font-size: 13px;
    font-weight: 500;
    line-height: 150%;
    /* 19.5px */
    letter-spacing: -0.26px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.youtube-section {
    padding: 90px 0 110px 0;
    background: #141414;
    text-align: center;
}

.youtube-section ._txt {
    color: var(--Color-GY-10, #F0F2F4);
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    line-height: 170%;
    /* 25.5px */
    letter-spacing: -0.3px;
    margin: 18px 0 8px 0;
}

.youtube-section ._tit {
    color: #FFF;
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 24px */
    letter-spacing: -0.48px;
    margin-bottom: 36px;
}

.youtube-section ._tit span {
    color: #6BFEAA;
    font-size: 24px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.48px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.youtube_wrap {
    gap: 24px;
    height: 200px;
    align-items: flex-start;
}

.youtube_wrap .youtube_box {
    width: 257px;
    height: 144px;
    border-radius: 8px;
    background: #E5F7FE;
}

.youtube_wrap .youtube_box .view_count {
    padding: 4px 6px;
    border-radius: 8px;
    /* background: rgba(0, 0, 0, 0.60); */
    background: rgb(71 71 71 / 60%);
    backdrop-filter: blur(3px);
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 140%;
    /* 15.4px */
    letter-spacing: -0.22px;
    /* bottom: 11px;
    left: 10px; */
    bottom: -33px;
    left: 0px;
}

.banner-bottom-section {
    padding: 60px 0;
}

.banner-bottom-section .conDiv {
    padding: 0;
}

.banner-wrap {
    gap: 20px;
    flex-wrap: wrap;
}

.banner-wrap .banner_type1 {
    width: 540px;
    height: 190px;
}

.banner-wrap .banner_type2 {
    width: 1100px;
}

.banner-wrap .banner_type1 img,
.banner-wrap .banner_type2 img {
    width: 100%;
    object-fit: cover;
}

._mo {
    display: none !important;
}

/* 모바일 전용 스크롤바 숨기기 */
.tab-nav-wrapper,
.filter-nav-wrapper {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-nav-wrapper::-webkit-scrollbar,
.filter-nav-wrapper::-webkit-scrollbar {
    display: none;
}

.banner-slide {
    background-image: var(--bg-pc);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.book-section-tit {
    justify-content: space-between;
    align-items: center;
    align-content: center;
    margin-bottom: 16px;
}

.book-section-tit .section_tit {
    margin-bottom: 0;
}


/* a.book_href {
    color: var(--Color-GY-800, #454C59);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: -0.24px;
} */
a.book_href {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    height: 34px;
    background: #FFFFFF;
    border: 1px solid #8898AF;
    border-radius: 8px;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.5em;
    letter-spacing: -0.02em;
    color: #040404;
    cursor: pointer;
    transition: all 0.2s ease;
}

a.book_href:hover {
    background: #f5f5f5;
}


@media screen and (max-width: 768px) {
    ._pc {
        display: none !important;
    }

    ._mo {
        display: block !important;
    }

    .conDiv {
        width: auto;
        margin: 0;
        padding: 0 18px;
    }

    .section_tit {
        font-size: 20px;
        letter-spacing: -0.4px;
    }

    .swiper-slide.banner-slide {
        width: 310px;
        max-width: 310px;
        min-width: 310px;
        height: auto;
        min-height: 299px;
        padding: 20px;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
    }

    .banner-slide .text-area {
        width: auto;
    }

    .banner-slide .text-area ._tit {
        color: #FFF;
        text-align: center;
        font-size: 21px;
        font-weight: 700;
        line-height: 32px;
        /* 145.455% */
        letter-spacing: -0.74px;
        word-break: keep-all;
    }

    .banner-slide .text-area ._txt {
        color: #FFF;
        text-align: center;
        font-size: 13px;
        font-weight: 400;
        line-height: 22px;
        /* 169.231% */
        letter-spacing: -0.26px;
        margin-top: 6px;
    }

    .banner-slide .img-area {
        width: 280px;
        height: 136px;
    }

    .banner-slide .img-area img {
        width: 100%;
    }

    .banner-controls {
        width: 310px;
        max-width: 310px;
        min-width: 310px;
        bottom: 10px;
        padding: 0px 15px;
        display: block;
        left: calc(50% - 156px);
    }

    .banner-progress-wrap {
        background: rgba(0, 0, 0, 0.20);
        width: 100%;
    }

    .banner-progress-bar {
        background-color: #000;
    }

    .banner-controls-wrap {
        position: absolute;
        left: 11px;
        top: -31px;
    }

    .banner-controls-box {
        border-radius: 90px;
        background: rgba(0, 0, 0, 0.38);
        padding: 3px 10px;
    }

    .banner-counter {
        font-size: 10px;
    }

    .banner-btn {
        font-size: 10px;
        line-height: 10px;
        padding-top: 0px;
        color: #fff;
    }

    .banner-btn.banner-prev::after {
        top: 0.3px;
        height: 9px;
    }

    .banner-current,
    .banner-total {
        color: #fff;
    }

    .banner-slide {
        background-size: cover;
    }

    .live-section {
        margin-top: 50px;
        padding-bottom: 50px;
    }

    .live-section .conDiv,
    .info-section .conDiv,
    .youtube-section .conDiv {
        padding: 0;
    }

    .live-section .section_tit,
    .live-section .live-swiper-wrap,
    .info-section .weekly-section .con_wrp,
    .info-section .weekly-section .sub_tit,
    .info-section .weekly-section ._tit,
    .youtube-section .youtube_wrap {
        padding-left: 18px;
    }

    .live-swiper .swiper-slide {
        width: 154px !important;
    }

    .box_wrap {
        gap: 12px;
    }

    .box_info {
        width: 154px;
    }

    .box_info ._thmn {
        width: 154px;
        /* height: 92px; */
        margin-bottom: 8px;
    }

    .box_info .__btn {}

    .box_info .__tit {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: keep-all;
        color: #404040;
        font-size: 13px;
        font-weight: 600;
        line-height: 160%;
        /* 20.8px */
        letter-spacing: -0.26px;
        height: 45px;
    }

    .box_info .__txt {
        font-size: 10px;
        font-weight: 500;
        line-height: 100%;
        /* 10px */
        letter-spacing: -0.2px;
    }

    .time-section {
        padding: 60px 0 46px 0;
    }

    .time-section ._tit {
        font-size: 24px;
        font-weight: 700;
        line-height: 150%;
        /* 36px */
        letter-spacing: -0.48px;
        margin-bottom: 6px;
    }

    .time-section ._txt {
        font-size: 13px;
        font-weight: 500;
        line-height: 180%;
        /* 23.4px */
        letter-spacing: -0.26px;
        margin-bottom: 12px;
    }

    .time-gallery-swiper .swiper-slide,
    .time-gallery-swiper .swiper-slide > picture > img {
        width: 284px;
        height: 150px;
    }

    .time-gallery-swiper .img-hover-text--action img {
        width: 34px;
        height: 34px;
    }

    .time-gallery-btn {
        padding: 0 48px;
        height: 40px;
        border-radius: 90px;
        font-size: 13px;
        font-weight: 600;
        line-height: 160%;
        /* 22.4px */
        letter-spacing: -0.28px;
        display: block;
        margin: 0 auto;
        margin-bottom: 32px;
    }

    .recommend-section {
        padding: 36px 0 70px 0;
    }

    .recommend-swiper .swiper-slide,
    .part-lec-wrap .lec-list {
        width: calc(50% - 10px);
    }

    .recommend-section .recommend-swiper {
        justify-content: space-around;
    }

    .recommend-swiper {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
    }

    .recommend-swiper .swiper-slide ._thmn,
    .part-lec-wrap .lec-list ._thmn {
        /* height: 101px; */
        margin-bottom: 7px;
    }

    .recommend-swiper .swiper-slide ._tit,
    .part-lec-wrap .lec-list ._tit {
        font-size: 13px;
        font-weight: 600;
        line-height: 160%;
        /* 20.8px */
        letter-spacing: -0.26px;
        margin-bottom: 7px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 40px;
    }

    .recommend-swiper .swiper-slide .detail_box .lec_viewer,
    .part-lec-wrap .lec-list .lec_viewer {
        font-size: 10px;
    }

    .recommend-swiper .swiper-slide ._lbl {
        font-size: 11px;
        font-weight: 600;
        line-height: 140%;
        /* 15.4px */
        letter-spacing: -0.22px;
        padding: 2px 4px;
    }

    .part-lec-wrap {
        height: auto;
        flex-wrap: wrap;
    }

    /* 아코디언 컨테이너: 높이 고정 + 잘림 없음 (4항목 기준 — 항목 수 변경 시 조정) */
    .mobile-accordion {
        /* height: 670px;    3개 닫힘(~72px×3) + 1개 열림(~340px) + 여유 */
        height: auto;
        overflow: visible;
        /* 레이아웃 높이는 고정, 콘텐츠는 클리핑하지 않음 */
    }

    /* 아코디언 기본 설정 */
    .accordion-item {
        margin-bottom: 12px;
        background: #F8F9FA;
        border-radius: 28px;
        overflow: hidden;
        cursor: pointer;
        transition: background 0.35s ease, padding 0.35s ease;
    }

    /* 닫힌 상태의 제목 줄 */
    .header-bar {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        font-size: 15px;
    }

    /* 활성화 상태 (Active) */
    .accordion-item.active {
        background: #000;
        padding: 20px;
    }

    /* 활성화 시 제목 줄 숨기기 */
    .accordion-item.active .header-bar {
        display: none;
    }

    /* 콘텐츠 영역: height는 JS가 제어, transition만 CSS에서 정의 */
    .content-area {
        height: 0;
        opacity: 0;
        overflow: hidden;
        transition: height 0.35s ease, opacity 0.3s ease;
    }

    .accordion-item.active .content-area {
        opacity: 1;
    }

    .content-area .card-box-content-open {
        margin-top: 13px;
    }

    .content-area .card-box-content-open .card-tit {
        color: #FFF;
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 150%;
        /* 25.5px */
        letter-spacing: -0.34px;
        margin-bottom: 9px;
    }

    /* 내부 흰색 카드 */
    .white-quote-card {
        position: relative;
        background: #fff;
        border-radius: 20px;
        /* width: 299px;
        height: 310px; */
        overflow: hidden;
    }

    .review-swiper-wrap .swiper-slide {
        margin-right: 16px !important;
    }

    .review-img-section {
        padding-bottom: 40px;
    }

    .review-marquee {
        gap: 20px;
        -webkit-animation-duration: 20s;
        animation-duration: 20s;
    }

    .review-marquee img {
        height: 90px;
    }

    .quote-box {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .card-tit {
        color: var(--Color-GY-BK, #040404);
        font-size: 17px;
        font-weight: 700;
        line-height: 150%;
        /* 25.5px */
        letter-spacing: -0.34px;
        width: 202px;
        word-break: keep-all;
    }

    .person-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .desc-text {
        color: var(--Color-GY-10, #F0F2F4);
        font-size: 13px;
        font-weight: 400;
        line-height: 160%;
        /* 20.8px */
        letter-spacing: -0.26px;
    }

    .info-section {
        padding: 50px 0 60px 0;
    }

    .weekly-section {
        padding-bottom: 50px;
    }

    .weekly-section .sub_tit {
        font-size: 14px;
        font-weight: 500;
        line-height: 140%;
        /* 19.6px */
        letter-spacing: -0.28px;
    }

    .weekly-section ._tit {
        font-size: 20px;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: -0.4px;
    }

    .info-section .con_wrp {
        margin-top: 14px;
        gap: 18px;
        overflow-x: auto;
        white-space: nowrap;
        /* 가로 스크롤 시 부드럽게 멈추는 효과 (모바일 필수) */
        -webkit-overflow-scrolling: touch;

        /* 1. 크롬, 사파리, 최신 엣지에서 스크롤바 숨기기 */
        &::-webkit-scrollbar {
            display: none;
        }

        /* 2. 파이어폭스 및 구형 IE/엣지에서 숨기기 */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    .report_card {
        width: 268px;
        height: 356px;
        flex-shrink: 0;
    }

    .report_info_box .__tit {
        font-size: 15px;
        font-weight: 600;
        line-height: 1.4;
        letter-spacing: -0.3px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: keep-all;
        overflow-wrap: break-word;
        white-space: pre-line;
    }

    .report_info_box .tag_lbl_wrap ._tag {
        font-size: 12px;
        letter-spacing: -0.24px;
    }

    /* 전체 배경 */
    .mobile-dashboard {
        color: #fff;
    }

    .tab-nav-wrapper {
        border-bottom: 1px solid #222;
    }

    /* 스크롤바 숨기기 공통 */
    .tab-nav-wrapper,
    .filter-nav-wrapper {
        overflow-x: auto;
        -ms-overflow-style: none;
        /* IE/Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .tab-nav-wrapper::-webkit-scrollbar,
    .filter-nav-wrapper::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    /* 상단 탭 스타일 */
    .company-tabs {
        gap: 20px;
        /* border-bottom: 1px solid #222;  */
        padding: 0 15px;
    }

    .tab-item {
        background: none;
        border: none;
        color: var(--Color-GY-700, #545D6D);
        padding: 12px 0;
        font-size: 15px;
        font-weight: bold;
        white-space: nowrap;
        position: relative;
        font-size: 15px;
        font-weight: 700;
        line-height: 100%;
        /* 15px */
        letter-spacing: -0.3px;
    }

    .tab-item.active {
        background: linear-gradient(90deg, #80F1FA 0%, #2562FF 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .tab-item.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #51a3fe;
        background: linear-gradient(to right, #79E3FC, #1971FE);
    }

    /* 필터 버튼 스타일 */
    .filter-group {
        display: none;
        gap: 8px;
        padding: 20px 18px;
    }

    .filter-group.active {
        display: flex;
    }

    .filter-item {
        border-radius: 8px;
        background: var(--Color-GY-950, #1D2025);
        border: none;
        padding: 6px 8px;
        white-space: nowrap;
        color: var(--Color-GY-500, #7D879B);
        font-size: 12px;
        font-weight: 500;
        line-height: 140%;
        /* 16.8px */
        letter-spacing: -0.24px;
    }

    .filter-item.active {
        background: var(--Color-GY-200, #CED2DA);
        color: #0F0F0F;
        font-weight: 700;
    }

    /* 리스트 스타일 */
    .mobile-content-area {
        padding: 0 15px;
    }

    .course-list {
        gap: 15px;
        margin-bottom: 20px;
    }

    .course-list ._thmn {
        width: 140px;
        height: 84px;
        background: #333;
        border-radius: 8px;
        border: 1px solid #EBEBEB;
        flex-shrink: 0;
    }

    .content-box .__tit {
        color: var(--Color-GY-5, #F9F9FA);
        font-size: 13px;
        font-weight: 600;
        line-height: 160%;
        /* 20.8px */
        letter-spacing: -0.26px;
        word-break: keep-all;
    }

    .mo-banner-section {
        padding-top: 30px;
    }

    .mo-banner-section img {
        width: 100%;
    }

    .part-lec-section {
        padding: 50px 0 0 0;
    }

    .part-tab-wrap {
        gap: 8px;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .part-tab-wrap::-webkit-scrollbar {
        display: none;
    }

    .part-tab-wrap .part_btn {
        padding: 5px 10px;
        text-align: center;
        font-size: 12px;
        font-weight: 400;
        line-height: 150%;
        /* 18px */
        letter-spacing: -0.24px;
        flex-shrink: 0;
        white-space: nowrap;
    }

    .book-section {
        padding: 60px 0;

    }

    .book-info-container {
        width: 100%;
        box-sizing: border-box;
        background-color: #fff;
    }

    /* 상세 정보 카드 */
    .info-card {
        width: auto;
        height: 204px;
        background: #fff;
        border-radius: 16px;
        padding: 20px 18px;
        box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.07), 0 3px 12px 0 rgba(0, 0, 0, 0.16);
        margin-bottom: 18px;
        display: block;
    }

    .card-inner {
        gap: 14px;
    }

    .book-main-img {
        width: 50%;
        height: 164px;
        object-fit: cover;
    }

    .book-main-img img {
        width: 120px;
        height: 164px;
        object-fit: cover;
    }

    .book-details {
        /* width: 180px; */
    }

    .book-details #book-desc {
        height: 66px;
        color: var(--Color-GY-800, #454C59);
        font-size: 12px;
        font-weight: 500;
        line-height: 150%;
        /* 18px */
        letter-spacing: -0.24px;
        margin-bottom: 8px;
    }

    #book-title {
        color: var(--Color-GY-950, #1D2025);
        font-size: 15px;
        font-weight: 600;
        line-height: 140%;
        /* 21px */
        letter-spacing: -0.3px;
        margin-bottom: 8px;
        word-break: auto-phrase;
    }

    .tag-group span {
        display: inline-block;
        color: var(--secodary-1600, #1082DA);
        font-size: 10px;
        font-weight: 500;
        line-height: 150%;
        /* 15px */
        letter-spacing: -0.2px;
    }

    /* 하단 썸네일 스크롤 영역 */
    .thumbnail-wrapper {
        overflow-x: auto;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE, Edge */
    }

    .thumbnail-wrapper::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari */
    }

    .thumbnail-list {
        gap: 12px;
        justify-content: flex-start;
    }

    .thumb-item {
        flex: 0 0 46px;
        /* 고정 크기 */
        height: 46px;
        border-radius: 16px;
        background: var(--Color-GY-50, #E8EAEE);
        overflow: hidden;
        border: 1px solid transparent;
        transition: 0.3s;
        cursor: pointer;
    }

    .thumb-item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    /* 선택된 상태 스타일 */
    .thumb-item.active {
        border-color: #333;
        background: #fff;
        box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.25);
    }

    .youtube-section {
        padding: 70px 0 70px 0;
    }

    .youtube-section ._txt {
        text-align: center;
        font-size: 13px;
        font-weight: 500;
        line-height: 170%;
        /* 22.1px */
        letter-spacing: -0.26px;
    }

    .youtube-section ._tit,
    .youtube-section ._tit span {
        font-size: 19px;
        font-weight: 700;
        line-height: 100%;
        /* 20px */
        letter-spacing: -0.8px;
    }

    .youtube_wrap {
        overflow-x: auto;
        white-space: nowrap;
        /* 가로 스크롤 시 부드럽게 멈추는 효과 (모바일 필수) */
        -webkit-overflow-scrolling: touch;

        /* 1. 크롬, 사파리, 최신 엣지에서 스크롤바 숨기기 */
        &::-webkit-scrollbar {
            display: none;
        }

        /* 2. 파이어폭스 및 구형 IE/엣지에서 숨기기 */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
    }

    .youtube_wrap .youtube_box {
        flex-shrink: 0;
        width: 295px;
        height: 166px;
    }

    .banner-slide {
        background-image: var(--bg-mo);
    }

    .banner-wrap .banner_type1,
    .banner-wrap .banner_type2 {
        height: auto;
    }

    /*배너*/
    .fancybox-wrap {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
    }

    .fancybox-skin {
        max-width: calc(100vw - 20px) !important;
    }

    .fancybox-inner {
        width: auto !important;
        max-width: calc(100vw - 20px) !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
        overflow: hidden !important;
    }

    .fancybox-inner .lpop_window.lpop_fancy {
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 80px) !important;
    }

    .lpop_fancy>.lpop_box>.lpop_foot {
        width: 100% !important;
    }

    .lpop_box .lpop_body {
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .lpop_body img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    .lec-guide-section {
        padding-bottom: 0;
    }

    #letuin-chatbot-root {
        display: none;
    }

    .banner-bottom-section {
        padding: 18px;
    }

    .banner-bottom-section .conDiv {
        padding: 0;
    }

    .time-section .swiper-wrapper {
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .time-section .swiper-slide {
        flex: 0 0 auto;
    }
    a.book_href {
        color: var(--Color-GY-800, #454C59);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: -0.24px;
        border: 0px;
        padding: 0px;
    }
    /* a.book_href {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        padding: 10px 14px;
        height: 34px;
        background: #FFFFFF;
        border: 1px solid #8898AF;
        border-radius: 8px;
        font-weight: 400;
        font-size: 13px;
        line-height: 1.5em;
        letter-spacing: -0.02em;
        color: #040404;
        cursor: pointer;
        transition: all 0.2s ease;
    } */

    a.book_href:hover {
        background: none;
    }

    .time-gallery-video-content {
        width: min(320px, calc(100vw - 40px));
    }
    .time-gallery-video-close {
        top: -20px;
    }

}