.main_img_box1 {position: relative;overflow: hidden;}
    .main_img1 {width: 100%;height: 350px;filter: brightness(60%);object-fit: cover;object-position: center 69%; /* 비율 유지하며 채움, 아래쪽 표시 */transition: transform 0.4s ease; /* 부드러운 전환 */will-change: transform;}
    .main_img_box1:hover .main_img1 {transform: scale(1.1); /* 1.1~1.2 정도가 자연스러움 */}
    .main_img_text1 {position: absolute;color: #fff;top: 50%;left: 50%;transform: translate(-50%, -50%);}
    .main_img_text1 h5 {font-size:40px;text-align: center;margin-bottom: 20px;}
    .main_img_text1 span {font-size:18px;text-align: center;display:block;line-height:1.5}

    .main_container {margin: 0 auto;width: 100%;max-width: 1300px;}
    .cont_box {display:flex;gap:10px;margin: 120px auto;justify-content: center;}
    .content_btn {font-size:20px;color:#fff;background:#7800FF;padding: 14px 38px;border-radius: 10px;display: flex;align-items: center;cursor: pointer;}
    #cont_search {height: 100%;width: 480px;border: 1px solid #7D7D7D;border-radius: 10px;padding: 14px 20px;font-size: 20px;font-weight: 550;
    letter-spacing: -1px;}
    .cont_search_box {position: relative;display: flex;align-items: center;}
    .cont_search_box input::placeholder {color: #D1D1D1;}
    .cont_search_box input::-webkit-input-placeholder{color: #D1D1D1;}
    .cont_search_box input:-ms-input-placeholder{color: #D1D1D1;}
    .search_icon {position: absolute;right: 3%;width: 22px;height: 22px;cursor: pointer;border: none;display: flex;background: none;}

    .join_menu { display: grid; grid-template-columns: repeat(var(--grid-count, 10), 1fr); gap: 30px; }
    .join_menu::-webkit-scrollbar { display: none; }
    .join_menu.dragging{cursor: grabbing;user-select: none;}
    .blurArea{position: relative;}

    /* .blurArea::after{content: ""; position: absolute; right: 0; top: 0; width: 20px; height: 100%; pointer-events: none; background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%);} */

    /* no-blur 클래스가 붙으면 효과 제거 */
    .blurArea.no-blur::after {
    /* content: none !important; */
    }


    .join_menu_box {padding:20px 30px;background:#F6F6F6;border-radius: 10px;cursor: pointer;width: 100%;aspect-ratio: 1/1;display: flex;align-items: center;justify-content: center;border: solid 1px #762CC7;}
    .join_menu_sub_box {cursor: pointer;}
    /* 변경: transform 사용 (레이아웃 안건드림) */
    .join_menu_sub_box:hover .join_menu_icon {animation: updown-transform 0.4s ease-in-out;will-change: transform;}
    .join_menu_sub_box:hover .join_menu_text {color:#7800FF;}
    /* 드래그 중에는 hover 애니메이션/포인터 이벤트 비활성화 */
    .join_menu.dragging .join_menu_sub_box { pointer-events: none; }
    .join_menu.dragging .join_menu_sub_box:hover .join_menu_icon { animation: none !important; }
    @keyframes updown-transform {
        0%   { transform: translateY(0); }
        50%  { transform: translateY(-20px); }
        100% { transform: translateY(0); }
    }
    .join_menu_text {font-size:20px;text-align: center;margin-top: 20px;font-weight: 700;}
    .join_menu.grid-many .join_menu_box { padding: 12px 18px; }
    .join_menu.grid-extra-many .join_menu_box { padding: 8px 12px; }
    .join_menu.grid-many .join_menu_text { font-size: 16px; margin-top: 12px; }
    .join_menu.grid-extra-many .join_menu_text { font-size: 14px; }
    .join_menu_icon {object-fit: contain; width:100%;}
    
    .reco_cont_head {display:flex;justify-content: space-between;margin-bottom: 44px;}
    .reco_cont_head_2 {display:flex;justify-content: space-between;margin-bottom: 44px;margin-top: 180px;}
    .reco_cont_box {display:flex;align-items: center;gap:10px;}
    .reco_cont_text {font-size:32px;font-weight: 700;}
    .reco_cont_text2 {font-size:19px;font-weight: 500;margin-left: 30px;line-height: 50px;height: 38px;}
    .next_site_box {border: 1px solid #000;border-radius: 30px;display: flex;align-items: center;padding: 14px 29px;cursor: pointer;}
    .next_site_box-span {font-size:18px;font-weight: 600;margin-right: 10px;}
    .next_site_icon_box {width: 18.5px;height: 18.5px;border-radius: 50%;background: #000;display: flex;align-items: center;justify-content: center;}

    .mission_list_box {display: flex;flex-wrap: wrap;gap:20px;}
    .mission_list_box2 {
        display: flex;
        width: calc(330px * 20); /* (카드너비+간격) * 20 */
        /* 자바스크립트에서 애니메이션을 제어합니다. */
    }

    .mission_list_box2.is-animating {
        animation: top10-scroll 60s linear infinite;
    }
    /* 기존 CSS에서 이 부분을 찾아서 !important를 추가해주세요 */
    .mission_list_box2:hover {
        animation-play-state: paused !important;
    }
    .mission_list_box2.is-dragging { cursor: grabbing; user-select: none; }


    .mission_card {width: 325px;height: 210px;display: flex;}
    .card_image {position: relative;overflow: hidden;}
    .card_img {width: 175px;height: 210px; object-fit: inherit; /* 비율 유지하며 채움 */transition: transform 0.4s ease; /* 부드러운 전환 */will-change: transform;}
    .card_img2 {border-radius: 20px;}

    .cate_best {display:flex;margin-top:20px;gap:20px;}
    .cate_best_box {background:#E9DFF8;width: 372px;height: 907px;padding: 40px;position: relative;border-radius: 10px;overflow: hidden;}
    /*.cate_best_box::after {content: "";position: absolute;bottom: 0px;left: 50%;transform: translateX(-50%);width: 100%;height: 320px;background-color: #e2d4ff;border-radius: 80% 40% 0% 0%;z-index: 1;}*/
    .cate_best_list_box_new {width: 100%;}
    .cate_best_list {display: flex;flex-wrap: wrap;gap:2.6%;}
    .cate_best_box h3 {font-size: 32px;margin-bottom:22px;}
    .gr_card_img::after{content:"";position:absolute;inset:0;pointer-events:none;background: linear-gradient(180deg, #00000000, #00000001, #000000B5);}
    .best_card_img {width:100%;height: 330px; object-fit: cover; /* 비율 유지하며 채움 */transition: transform 0.4s ease; /* 부드러운 전환 */will-change: transform;}
    .best_card {width:23%;cursor: pointer;}
    .best_tag {position: absolute;top: 15px;left: 10px;}
    .best_wish_box {position: absolute;top: 9px;right: 10px;background: #79797973; border-radius: 50px;width: 25px;height: 25px;}
    .best_wish_box .wish_btn {position: absolute;top: 17%;right: 3px;width: 19px;opacity: 0.8;}
    .best_card_info {position: absolute;width: 100%;display: flex;justify-content: center;gap: 25px;bottom: 10px;color:#fff; font-size:14px;}
    .best_card_content_main h3 {font-size:22px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .best_card_cotent {padding: 8px 0px 0px 0px;}
    .best_card_sub_text {font-size: 16px;margin-top:5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;min-height: 24px; line-height: 24px; }
    .best_card_cotent .price {font-size: 20px;font-weight: 700;margin-top: 19px;display: flex;gap: 15px;align-items: center;}
    .best_card_cotent .price .discount {color:#7800FF;}
    .best_card_cotent .price .original {color:#666;text-decoration: line-through;font-size:16px;font-weight: 600;}

    .mi_video {position: relative;background:#643FCE;height:600px;margin-top: 330px;}
    .mi_video_box {display:flex;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin: 0 auto;width: 100%;max-width: 1300px;gap: 30px;justify-content: space-between;align-items: center;}
    .video_box {width: 650px;overflow: hidden;}
    .video_img {object-fit: cover;width: 100%;}
    .video_text {color:#fff;padding: 30px 0px;width: 50%;}
    .video_text h4 {font-size:38px;font-weight: 500;margin-bottom:18px;}
    .video_text-h5 {font-size:46px;margin-bottom:52px;}
    .video_text-p {font-size:20px;font-weight: 300;line-height: 29px;}

    .exper_box {margin: 0 auto;width: 100%;max-width: 1300px;margin-top: 220px;font-size:50px;}
    .exper_slide {margin-top:50px; overflow: hidden;width: 100%;}
    .slide-track-reverse {animation-direction: reverse !important;}
    .slide-track {display: flex;width: calc(300px * 12); /* 이미지 개수 × 이미지 너비 */animation: scroll 40s linear infinite; /* 40초 동안 천천히 */}
    .slide-track img {margin-right: 16px;flex-shrink: 0; /* 이미지가 줄어들지 않게 */}
    .exper_slide2 {margin-top:40px;}


    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-300px * 6)); /* 첫 번째 세트 길이만큼 이동 */
        }
    }

    /*.slider:hover .slide-track {
        animation-play-state: paused;
    }*/
    .exper_box_text {margin-top: 60px;margin-bottom: 60px;padding-top: 60px;padding-bottom: 60px;width: 100%;text-align: center;background-color: rgb(250, 251, 252);}
    .exper_box_text-h5 {font-size:50px;line-height: 68px;font-weight: 700;}
    .exper_box_text-p {font-size:20px;line-height: 30px;margin-top: 36px;}
    /* --- 영상 플레이어 섹션 --- */
    .interactive-video-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .video-player-wrapper {
        width: 1066px;
        height: 650px;
        border-radius: 30px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    }
    .video-player-wrapper video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .video-playlist {
        display: flex;
        gap: 20px;
        justify-content: center;
    }
    .playlist-item {
        width: 339px;
        height: 146px;
        border-radius: 25px;
        background-color: rgb(255, 255, 255);
        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
        cursor: pointer;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .playlist-item:hover {
        transform: translateY(-5px);
        box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.1);
    }
    .playlist-item.active {
        box-shadow: 0px 8px 15px 0px rgba(120, 0, 255, 0.2);
    }
    .progress-bar-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background-color: transparent; /* 기본적으로 투명하게 변경 */
    }
    .playlist-item.active .progress-bar-container {
        background-color: #e9ecef; /* 활성 탭에만 배경색 표시 */
    }
    .progress-bar {
        width: 0;
        height: 100%;
        background-color: transparent; /* 기본적으로 투명 */
        transition: width 0.3s ease-out; /* 부드러운 전환 */
    }
    .playlist-item.active .progress-bar {
        background-color: rgb(120, 0, 255); /* 활성 탭에서만 색상 표시 */
    }

    .item-info {
        text-align: left;
        /* flex 레이아웃으로 변경하여 내부 요소 정렬 */
        display: flex;
        flex-direction: column; /* 세로 방향 정렬 */
        align-items: flex-start; /* 왼쪽 정렬 */
        gap: 10px; /* 요소 간 간격 */

    }
    .item-info-div {
        display: flex;
        flex-direction: row; 
        margin-right: 8px;
    }
    .item-icon {
        width: 39px;
        height: 25px;
        margin-right: 8px;
        object-fit: contain;
    }
    .item-title {
        font-size: 20px;
        font-weight: 700;
        color: #000;
    }
    .item-description {
        font-size: 16px!important;
        color: #666!important;
        line-height: 1.5!important;
        margin-top: 20px!important;
    }
    .playlist-item:not(.active) {
        background-color: #f9f9f9;
    }
    .playlist-item:not(.active) .item-title {
        color: #a3a3a3;
    }
    .playlist-item:not(.active) .item-description {
        color: #a3a3a3;
    }


    .cate_search_box {margin: 0 auto;width: 100%;max-width: 1300px;margin-top: 120px;}
    .cate_search_main_txt {font-size: 32px;font-weight: 700;display:flex;gap:16px;align-items: center;margin-bottom: 34px;}
    .cate_sel_box {display:flex;justify-content: space-between;align-items: center;}
    .cate_sel {display: flex;gap: 10px;}
    .cate_list {font-size:18px;border-radius: 24px;padding:14px 28px;cursor: pointer;background:#F4F2FF;color:#303030; text-decoration: none;}
    .cate_on {background:#7800FF !important;color:#fff !important;font-weight: 700;}
    .cate_card {width: 300px;height: 100%;cursor: pointer;}
    .cate_card:nth-child(n+5) {margin-top:92px;}

    .review_main {margin: 258px auto 56px auto;width: 100%;max-width: 1300px;font-size: 32px;font-weight: 700;display:flex;gap:16px;align-items: center;}

    .review_list_box{margin-top:50px;overflow:hidden;width:100%;}

    .review_slide-track {display: flex;gap:16px;width: calc(200px * 10); /* 이미지 개수 × 이미지 너비 */animation: scroll 40s linear infinite; /* 40초 동안 천천히 */}
    .review_slide-track img {height: auto;flex-shrink: 0; /* 이미지가 줄어들지 않게 */}
    .review_slide-track div {display: flex;flex-direction: column;align-items: center;}
    /* 트랙 멈춤 클래스는 기존 그대로 */
    .review_slide-track.is-paused { animation-play-state: paused; }

    .review_img_box { position: relative; }

    /* 이미지 영역 래퍼: 둥근 모서리 + 잘림 */
    .review_thumb{position: relative;border-radius: 26px;overflow: hidden;}

    /* 오버레이: 이미지 영역만 덮음 */
    .review_overlay{position:absolute; inset:0;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:flex-end;padding:60px 40px;opacity:0; transition:opacity .2s ease;pointer-events:none; z-index:1;}
    .review_text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:11;overflow:hidden;text-overflow:ellipsis;line-height:1.5;font-size:16px;max-width:100%;}

    /* (선택) 최신 스펙 브라우저 보조 */
    @supports (line-clamp: 11) {
        .review_text{line-clamp:11;block-overflow:ellipsis;}
    }

    /* 호버/활성 시에만 보이기 */
    .review_img_box:hover .review_overlay,
    .review_img_box.is-active .review_overlay{opacity: 1;}
    .review_img_box:nth-child(1) .review_thumb { margin-top: 50px; }
    .review_img_box:nth-child(2) .review_thumb { margin-top: 130px; }
    .review_img_box:nth-child(3) .review_thumb { margin-top: 30px; }
    .review_img_box:nth-child(4) .review_thumb { margin-top: 100px; }
    .review_img_box:nth-child(5) .review_thumb { margin-top: 20px; }
    .review_img_box:nth-child(6) .review_thumb { margin-top: 130px; }
    .review_img_box:nth-child(7) .review_thumb { margin-top: 20px; }
    .review_img_box:nth-child(8) .review_thumb { margin-top: 130px; }
    .review_img_box:nth-child(9) .review_thumb { margin-top: 30px; }
    .review_img_box:nth-child(10) .review_thumb { margin-top: 50px; }
    .review_img {max-height: 400px;}
    .review_txt {font-size:18px;margin-top:30px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: center;}

    @keyframes scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-200px * 5)); /* 첫 번째 세트 길이만큼 이동 */
        }
    }

    .point_text {width: 100%;max-width: 1300px;text-align: center;}
    .point_text-h5 {font-size:40px;line-height: 60px;font-weight: 700;}
    .point_text-p {font-size:35px;margin-top:24px;font-weight: 700;margin-bottom:22px;}
    .point_text-span {font-size:35px;font-weight: 500;}
    .point_box {display:flex;width: 100%;max-width: 1300px;margin: 0 auto 130px auto;justify-content: space-between;}

    .point_text_2 {margin: 50px auto 35px auto;width: 100%;max-width: 1300px;text-align: center;display: flex;justify-content: center;gap: 15px;align-items: baseline;}
    .point_text_2 span {font-size:21px;font-weight: 500;}
    .point_text_2 p {font-size:18px;font-weight: 500;}



    .infoContainer{width: 100%; margin-top: 120px; margin-bottom: 120px;text-align: center;text-align: -webkit-center;}
    .infoBox{width: 100%; height: 365px; 
        border-radius: 50px;
        background-image: url('/theme/realworld/img/join_class/tail_bg.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        display: flex; flex-direction: column; align-items: center;justify-content: center; position: relative; max-width: 1300px;}
    .infoBox-h1{font-size: 35px; font-weight: 700; color: #fff;}
    .infoBox-span{font-size: 18px; font-weight: 400; color: #fff; margin-top: 20px;}
    .infoMenu{width: 100%; display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px;}

    .info_icon {display: flex;align-items: center;gap: 5px;z-index: 2;}
    .info_icon img {width: 15px;}



    .card_image:hover .card_img {transition: all 0.3s ease-in;}


    .mi_video_div {margin: 0 auto;width: 100%;max-width: 1300px;height: 100%;overflow: hidden;}
    /* --- 스와이퍼 컨테이너: 양옆 슬라이드 보이기 --- */
    .mi_video_div .swiper {width: 100%;height: 100%;overflow: visible; /* 중요 */padding: 0px 20px;}
    /* --- 슬라이드 기본 상태: 축소+반투명 --- */
    .mi_video_div .swiper-slide {display: flex;align-items: center;justify-content: center;transition: transform .3s ease, opacity .3s ease, box-shadow .3s ease;transform: scale(.9);}
    .mi_video_div .swiper-slide-prev .thumb-wrap,
    .mi_video_div .swiper-slide-next .thumb-wrap {filter: brightness(.82) contrast(1.05);}

    /* --- 활성(가운데) 슬라이드: 원본 크기+진하게 --- */
    .mi_video_div .swiper-slide-active {opacity: 1;transform: scale(1);z-index: 2;}

    /* --- 카드 스타일: 흰 배경+그림자+모서리 라운드 --- */
    .mi_video_div .video-card {width: 100%;height: auto;border-radius: 16px;background: #fff;box-shadow: 0 10px 30px rgba(0,0,0,.18);overflow: hidden;}

    /* --- 영상 박스: 위쪽 16:9 유지 --- */
    .mi_video_div .thumb-wrap {position: relative;width: 100%;aspect-ratio: 16/9;background:#000;overflow:hidden;}

    /* --- 썸네일/재생 버튼 유지 --- */
    .mi_video_div .thumb { width:100%; height:100%; object-fit:cover; display:block; }
    .mi_video_div .play-btn {position:absolute; margin:auto; top:50%; left:50%;transform:translate(-50%, -50%);width:80px; height:80px; border-radius:50%;background:rgba(0,0,0,.5); display:grid; place-items:center; cursor:pointer;transition: transform .15s ease;}
    .mi_video_div .play-btn:hover { transform: translate(-50%, -50%) scale(1.05); }
    .mi_video_div .play-btn:after {content:""; display:block; width:0; height:0;border-left:28px solid #fff; border-top:18px solid transparent; border-bottom:18px solid transparent; margin-left:6px;}

    /* 활성 슬라이드에서만 보이기 */
    .mi_video_div .swiper-slide-active .yt-caption {display: flex;}

    /* --- 하단 캡션(제목/태그/버튼) --- */
    .mi_video_div .yt-caption {padding: 24px 30px;display: none;align-items: center;justify-content: space-between;gap: 16px;}
    .mi_video_div .yt-caption .meta { min-width: 0; }
    .mi_video_div .yt-caption .title {font-size: 22px; font-weight: 700; margin-bottom: 6px;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .mi_video_div .yt-caption .tags {font-size:14px; color:#666;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
    .mi_video_div .yt-caption .cta {flex-shrink:0;background:#C0392B; color:#fff; border:0; border-radius:8px;padding:12px 18px; font-weight:700; cursor:pointer;font-size:16px;}

    /* --- 네비게이션 화살표 위치/색 --- */
    .mi_video_div .swiper-button-prev, .mi_video_div .swiper-button-next {color:#fff;--swiper-navigation-size: 26px;top: 50%;}
    .mi_video_div .swiper-button-prev { left: -6px; }   /* 필요하면 -10~-2px로 조절 */
    .mi_video_div .swiper-button-next { right: -6px; }

    /* --- 페이지네이션 점 스타일 --- */
    .swiper-pagination {display: flex;justify-content: center;gap: 10px;bottom: 4.5%;}
    .swiper-pagination-bullet {cursor: pointer;width: 10px;height: 10px;}
    .mi_video_div .swiper-pagination-bullets .swiper-pagination-bullet { background:#fff; opacity:.35; }
    .mi_video_div .swiper-pagination-bullet-active {background:#fff !important; opacity:1; }

    .mi_video .mi_video_div .swiper-slide-active .video-card {width: 660px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}

    /* 교육현장 성공사례 스타일 */
    .upContainer{width: 100%; position: relative;}
    .upBackground{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; display: none;}
    .upBackground>img{width: 100%; height: 100%; object-fit: contain;}
    .upWrap{width: 100%; max-width: 1300px; margin: 0 auto; padding-top: 120px; position: relative;}
    .upWrap-h1{font-size: 46px; font-weight: 700; color: #000; text-align: center;}
    .upWrap-p{font-size: 22px; font-weight: 400; color: #000; margin-top: 24px; text-align: center;}
    .upGrid{width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 55px; gap: 25px; height: auto; position: relative; z-index: 6;}
    .upBox{grid-column: span 1 / span 1; grid-row: span 1 / span 1; width: 100%; height: 100%; border-radius: 20px; border: 1px solid #C8C8C8; cursor: pointer; position: relative;display:block;}
    .hoverBox{content: ""; display: none; position: absolute; left: 0; width: 100%; overflow: hidden; height: calc(200% + 27px); border-radius: 20px; z-index: 10; transition: all 0.3s ease;}
    .hoverBackground{width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
    .hoverBackground>img{width: 100%; height: 100%; object-fit: cover;}
    .hoverInner{padding: 40px 20px; width: 100%; height: 100%; background-image: linear-gradient(180deg, #762CC7, #762CC700);}
    .hoverInner>h1{font-size: 22px; font-weight: 600; color: #fff;}
    .hoverInner>span{font-size: 18px; font-weight: 400; color: #fff; margin-top: 8px; display: block;}
    .hoverInner>.highlight{display: inline-flex; align-items: center; justify-content: center; height: 34px; border-radius: 20px; padding: 0 18px; background: #fff; color: #762CC7; font-size: 16px; font-weight: 600; margin-top: 20px;}
    .hoverInner>p{font-size: 18px; font-weight: 400; color: #fff; margin-top: 26px; line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
    .upBox:nth-child(-n+4) .hoverBox{top: 0;}
    .upBox:nth-child(n+5):nth-child(-n+8) .hoverBox{bottom: 0;}
    .upBox:hover>.hoverBox{display: block;}
    .upImage{width: 100%; height: 190px; overflow: hidden; border-radius: 20px 20px 0 0;}
    .upImage>img{width: 100%; height: 100%; object-fit: cover;}
    .upInfo{width: 100%; padding: 24px 20px; background: #fff; border-radius: 0 0 20px 20px;}
    .upInfo>p{font-size: 22px; font-weight: 600; color: #000; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
    .upInfo>span{display: block; font-size: 18px; font-weight: 400; color: #000; margin-top: 8px;}
    .upInfo>.highlight{height: 34px; border-radius: 20px; background: #762CC7; color: #fff; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; margin-top: 20px;}
    .upWrap-a{display: flex; align-items: center; justify-content: center; gap: 10px; width: 232px; height: 48px; border-radius: 24px; background: #fff; border: 1px solid #000; font-size: 18px; font-weight: 600; color: #000; cursor: pointer; margin: 0 auto; margin-top: 30px; z-index: 5; position: relative;}
    .upWrap-a span{width: 18.5px; height: 18.5px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center;}


    /* 자주찾는 서비스 스타일 */
    .serviceContainer{width: 100%; max-width: 1300px; margin: 0 auto; margin-top: 120px;}
    .serviceContainer-h1{display: flex; align-items: center; gap: 10px; font-size: 32px; font-weight: 700; color: #000;}
    .serviceGrid{width: 100%; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 23px; margin-top: 24px; min-height: 550px;}
    .smallBox{width: 100%; height: 100%; grid-column: span 2 / span 2; background: #F4F2FF; border-radius: 30px; padding: 45px 0 0 34px; position: relative; overflow: hidden;}
    .smallBox>p{font-size: 20px; font-weight: 400; color: #000; line-height: 26px;}
    .smallBox>p span{font-weight: 700;}
    .smallBox:hover>a{background: #fff; color: #000;}
    .serviceBox>p{font-size: 20px; font-weight: 400; color: #fff; line-height: 26px;}
    .serviceBox.blackTxt>p{font-size: 20px; font-weight: 400; color: #000; line-height: 26px;}
    .serviceBox>p span{font-weight: 700;}
    .smallBox>a, .serviceBox>a{display: inline-flex; margin-top: 16px; align-items: center; justify-content: center; height: 34px; border-radius: 17px; padding: 0 16px; background: #000; color: #fff; font-size: 16px; font-weight: 500; cursor: pointer; position: relative; z-index: 1; transition: all 0.3s ease-in-out;}
    .serviceBox{width: 100%; height: 100%; grid-column: span 3 / span 3; border-radius: 30px; padding: 45px 0 0 34px; position: relative; overflow: hidden;}
    .serviceBox:nth-child(2){background-image: linear-gradient(156deg, #6B4CEB, #6B4CEBA1);}
    .serviceBox:nth-child(3){background-image: linear-gradient(169deg, #873FCE, #873FCEA8);}
    .serviceBox:nth-child(4){background-image: linear-gradient(160deg, #873FCE, #873FCEA8);}
    .serviceBox:nth-child(5){background-image: linear-gradient(180deg, #F2B100, #FFE195);}
    .serviceBox:hover>a{background: #fff; color: #000;}
    .smallImage{position: absolute; bottom: 20px; right: 20px;}
    .serviceImage{position: absolute; bottom: 0; right: 30px;}
    .smallImage>img, .serviceImage>img{transition: all 0.3s ease;}
    .smallBox:hover>.smallImage img{transform: scale(1.1);}
    .serviceBox:hover>.serviceImage img{transform: scale(1.1);}
    .serviceBox.blackTxt .serviceImage{position: absolute; bottom: 20px; right: 30px;}

    .rw-list{column-count: 5; column-gap: 8px; margin: 0 auto; margin-top: 40px; max-height: 2000px;}
    .rw-tile{break-inside: avoid; position: relative; margin-bottom: 8px; border-radius: 15px; overflow: hidden; display: block; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; border: 1px solid rgba(255, 255, 255, 0.13);border-radius: 15px;width: 240px;height: 240px; position: relative;}
    .rw-tile>img{width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.05);}
    .tile-cover{position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); z-index: 1; top: 0; left: 0; display: flex; align-items: center; justify-content: space-between;; flex-direction: column; padding: 20px 0 20px 0; opacity: 0; transition: 0.4s ease;}
    /* 1. 전체 박스 위치 잡기: 아래쪽 정렬로 변경 */
    .bottom-tap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end; /* 중앙(center) 대신 아래쪽(flex-end)으로 정렬 */
        position: relative;
        z-index: 3;
        width: 100%;
        height: 100%;
        padding-bottom: 0px; /* 바닥에서 30px 정도 띄움 (원하시는 만큼 조절 가능) */
    }
    .bottom-tap2 {
        padding-bottom: 20px;
    }

    /* 2. 제목 텍스트 스타일: 2줄 말줄임표 + 간격 조정 */
    .bottom-tap > p {
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        width: 100%;
        padding: 0 20px;          /* 좌우 여백을 넉넉히 주어 글자가 카드 끝에 붙지 않게 함 */
        text-align: center;       /* 텍스트 가운데 정렬 */
        word-break: keep-all;     /* 단어 끊김 방지 */
        line-height: 1.4;         
        
        /* 2줄 이상 넘어가면 ... 처리 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        
        margin-bottom: 30px;      /* 버튼과의 간격을 margin-top 대신 여기서 밈 */
    }

    /* 3. PLAY 버튼 스타일: 위쪽 여백(margin-top) 제거 */
    .bottom-tap > a {
        width: 115px; 
        height: 44px; 
        border-radius: 22px; 
        background: rgba(101, 63, 208, 0.5); 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        color: #fff; 
        font-size: 19px; 
        font-weight: 400; 
        border: 1px solid #fff; 
        cursor: pointer;
        /* margin-top은 제거하고 위 p태그의 margin-bottom으로 간격 조절 */
    }
    .tile-info{display: flex; gap: 20px; align-items: center; margin-top: 24px;}
    .tile-info>p{display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 400; color: #fff;}
    .rw-tile:hover>.tile-cover{opacity: 1;}
    


    .rw-tile .tile-cover {
        background: rgba(0,0,0,0.4);
        z-index: 2;
    }
    
    .rw-tile_2{break-inside: avoid; position: relative; margin-bottom: 8px; border-radius: 15px; overflow: hidden; display: block; -webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; border: 1px solid rgba(255, 255, 255, 0.13);border-radius: 15px;width: 180px;height: 210px; position: relative;left: -25px;}
    .rw-tile_2>img{width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transform: scale(1.05);}
    .rw-tile_2:hover>.tile-cover{opacity: 1;}
    .rw-tile_2 .tile-cover {
        background: rgba(0,0,0,0.4);
        z-index: 2;
    }

    .content-type-badge {
        position: absolute;
        top: 12px;
        left: 12px;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 600;
        color: #fff;
        z-index: 3;
    }

    .content-type-badge.visiting {
        background: #FF6B35;
    }

    .content-type-badge.coming {
        background: #7B68EE;
    }

    .favorite-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.9);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 3;
    }

    .favorite-btn:hover {
        background: #fff;
        transform: scale(1.1);
    }

    .favorite-btn svg {
        width: 18px;
        height: 18px;
        transition: all 0.3s ease;
    }

    .favorite-btn .heart-svg {
        fill: none;
        stroke: #7a04ff;
        stroke-width: 2;
    }

    .favorite-btn.active .heart-svg {
        fill: #7a04ff;
        stroke: #7a04ff;
    }

    .rw-tiny{width: 100%; max-width: 1300px; margin: 0 auto; margin-top: 120px;}
    .tiny-box{width: 100%; height: 460px; border-radius: 15px; overflow: hidden; position: relative; padding: 32px 0; display: flex; align-items: center; overflow: hidden; background: rgba(255, 255, 255, 0.13);}
    .tiny-box>img{width: 100%; height: 100%; object-fit: cover; position: absolute; z-index: -1; top: 0; left: 0;}
    .tiny-left{width: 360px; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 360px;}
    .tiny-left>p{font-size: 19px; font-weight: 500; color: #000; line-height: 36px; text-align: center; margin-top: 26px;}
    .tiny-left>a{width: 170px; height: 48px; border-radius: 24px; background: rgba(255, 255, 255, 0.1); color: #000; border: 1px solid #000; display: flex; align-items: center; justify-content: center;font-size: 19px; font-weight: 400; margin-top: 24px; cursor: pointer; transition: 0.3s ease;}
    .tiny-left>a:hover{background: #fff; color: #000;}

    .tiny-track{width: 100%; overflow: hidden;}
    .tiny-right{width: max-content; display: flex; align-items: center; gap: 16px; overflow: auto;height: 400px;}
    .tiny-right::-webkit-scrollbar{display: none;}
    .tiny-image{width: 280px; height: 100%; border-radius: 15px; overflow: hidden; flex: 0 0 280px;}
    .tiny-image-img{width: 100%; height: 100%; object-fit: cover;transform: scale(1.01);}
    .tiny-box-a{position: absolute; right: 10px; z-index: 10;cursor: pointer;}

    
    .Nav{width: 86px; height: 38px; border-radius: 8px; border: 1px solid #BEBEBE; background: #fff; display: flex; align-items: center;}
    .Nav-a{display: flex; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .Nav-a:first-child{border-right: 1px solid #bebebe;}
    
    .slideBanner{width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; justify-content: center;}
    .slideBanner_img1 {margin-bottom: 20px;}
    .slideBanner>h1{font-size: 35px; font-weight: 700; color: #000; text-align: center;}
    .slideBanner>h1>span{font-size: 35px; font-weight: 700; color: #7800FF; text-align: center;}
    .slideBanner>p{font-size: 17px; font-weight: 500; color: #000; margin-top: 20px;text-align: center;line-height: 32px;}
    .slideBanner_div1 {margin-top: 20px;display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;}
    .slideBanner_div1 > div:nth-of-type(1) {
        width: 220px;
    }
    .slideBanner_div1 > div:nth-of-type(2) {
        width: 175px;
    }
    .slideBanner_div1 > div:nth-of-type(3) {
        width: 190px;
    }
    .slideBanner_div2 {
        border-style: solid;
        border-width: 1px;
        border-color: rgb(157, 157, 157);
        background-color: rgb(255, 255, 255);
        height: 30px;
        border-radius: 30px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .slideBanner_div3 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
        gap: 40px;
    }
    .slideBanner_div4 {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 8px;
    }
    .slideBanner_div4 img {
        width: 15px;
    }
    .slideBanner_div4 span {
        font-size: 15px; font-weight: 500;
    }

    .bottomBtn{display: flex; align-items: center; gap: 20px; margin-top: 46px;}
    .bottomBtn>a{display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; border-radius: 11px;cursor: pointer; gap: 17px;}
    .pracBtn{width: 230px;height: 60px;background: #7800FF; color: #fff; }
    .createEdu{width: 230px;height: 60px;border: 2px solid #7800FF; color: #7800FF;background-color: rgb(255, 255, 255);}
    .createEdu span{display: flex; align-items: center; justify-content: center; background: #7800FF; border-radius: 50%;}
    .infoMenu-a{display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600; border-radius: 11px;cursor: pointer; gap: 9px;}
    .chat_bnt{width: 230px;height: 60px;background: transparent;border: 1px solid #fff; color: #fff; }
    .free_bnt{width: 230px;height: 60px;border: 2px solid #7800FF; color: #7800FF;background-color: rgb(255, 255, 255);}

    .rw-count{width: 100%; max-width: 1300px; margin: 0 auto;}
    .dash-box{width: 100%;display: flex;gap: 30px;margin-top: 48px;justify-content: center;}
    .dash-line{width: 245px; height: 240px; border-radius: 35px; background: rgba(255, 255, 255, 0.13); display: flex; align-items: center; justify-content: center; flex-direction: column;border: 1px solid #ffffff13;box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.19);}
    .dash-line>p{font-size: 45px; font-weight: 700; color: #000; margin-top: 28px;}
    .dash-line>span{border-style: solid;border-width: 1px;border-color: rgb(179, 179, 179);display: block; color: #000; font-size: 19px; font-weight: 400; margin-top: 14px;width: 155px;height: 38px;text-align: center;line-height: 35px;border-radius: 25px;}

    .rw-count2{width: 100%; max-width: 1300px; margin: 0 auto;}
    .dash-box2{width: 100%;display: flex;gap: 30px;margin-top: 48px;justify-content: center;}
    .dash-line2{width: 215px; height: 210px; border-radius: 35px; background: rgba(255, 255, 255, 0.13); display: flex; align-items: center; justify-content: center; flex-direction: column;border: 1px solid #ffffff13;box-shadow: 0px 7px 13px 0px rgba(0, 0, 0, 0.19);}
    .dash-line2-p{font-size: 25px; font-weight: 700; color: #000; margin-top: 20px;}
    .dash-line2-span{display: block; color: #000; font-size: 18px; font-weight: 400;width: 155px;height: 38px;text-align: center;line-height: 35px;}

    .plan-container{width: 100%; margin-top:150px; padding-top: 150px; background-color: rgb(248,245,254);}
    .plan-heading{font-size: 36px; font-weight: 800; color: #000; text-align: center; line-height: 50px;}
    .plan-subtitle{margin-top: 40px; font-size: 22px; font-weight: 500; color: #000; text-align: center;}
    .plan-tab{width: 214px; height: 62px; border-radius: 31px; border: 1px solid #8B8B8B; background: #fff; display: flex; position: relative; align-items: center; padding: 8px; margin: 0 auto; margin-top: 58px;}
    .plan-tab-item{width: 50%; height: 100%; background: none; color: #000; font-size: 18px; font-weight: 500; display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .plan-tab-item.on-tab{color: #fff; background: #643FCE; border-radius: 40px;}
    .plan-tab-image{position: absolute; right: -120px;}
    .plan-discount-badge{position: absolute; right: -120px; background: #F0D3D7; color: #643FCE; padding: 8px 16px; border-radius: 20px; font-size: 16px; font-weight: 600; white-space: nowrap;}
    .plan-price-container{width: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 60px;}
    .plan-box{width: 430px; min-height: 770px; border-radius: 40px; border: none; background: #fff; position: relative; display: flex; flex-direction: column; transition: all 0.3s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.08); padding: 40px 30px; justify-content: space-between;}
    .plan-box-content{display: flex; flex-direction: column; align-items: center; text-align: center;}
    .plan-box.featured{border: 2px solid #643FCE; box-shadow: 0 20px 60px rgba(100, 63, 206, 0.15);}
    .plan-badge{position: absolute; top: -20px; background: #643FCE; color: #fff; padding: 6px 20px; border-radius: 20px; font-size: 14px; font-weight: 600;}
    .message-box {display: inline-block; background: transparent; font-weight: 600; font-size: 16px; padding: 6px 12px; border-radius: 15px; color: #404040; transition: all 0.3s ease;}
    .plan-title{font-size: 30px; font-weight: 800; color: #404040; margin-top: 10px; transition: all 0.3s ease;}
    .plan-featured-title{color: #643FCE;}
    .plan-subtitle{font-size: 20px; font-weight: 500; color: #000; margin-top: 18px;}
    .plan-heading-price{font-size: 20px; margin-top: 30px; font-weight: 500; color: #000;}
    .plan-heading-price span{font-size: 30px; font-weight: 700;}
    .plan-featured-price span{color: #643FCE;}
    .plan-button{width: 306px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 33px; background: #404040; color: #fff; font-size: 24px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; margin-top: 60px; align-self: center;}
    .plan-button:hover{background: #303030;}
    .plan-box.featured .plan-button{background: #643FCE; width: 340px;}
    .plan-box.featured .plan-button:hover{background: #762CC7;}
    .plan-list{display: flex; flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 60px;}
    .plan-list-item{display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 600; color: #3F3F3F;}
    .plan-list-item img{width: 24px; height: auto;}
    .plan-list-item:has(img[src*="check-black"]) {color: #3F3F3F;}
    .plan-list-item:has(img[src*="x-gray"]) {color: #B5B5B5;}
    .plan-list-item:has(img[src*="check-purple"]) {color: #000;}
    .plan-bottom{width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 106px; padding-bottom: 113px;}
    .plan-bottom-text{font-size: 20px; font-weight: 400; color: #808080; line-height: 30px; text-align: center; margin-top: 16px;}
    .plan-box.featured .message-box{color: #643fce;}

    .consultation-button{width: 200px; height: 48px; border-radius: 8px; background: rgb(248, 245, 254); color: #643FCE; font-size: 16px; font-weight: 600; border: 1px solid #643FCE; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; transition: all 0.3s ease;}
    .consultation-button:hover{
        background: #643FCE; 
        color: #fff;
        /* transform: translateY(-2px); */
    }

    /* Competency Chip Styles */
    .best-competency {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .competency-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
    }

    /* 1, 4, 7, 10... (파랑) */
    .competency-chip:nth-child(3n+1) {
        background-color: #e3f2fd;
        color: #1565c0;
        border: 1px solid #90caf9;
    }

    /* 2, 5, 8, 11... (초록) */
    .competency-chip:nth-child(3n+2) {
        background-color: #e8f5e9;
        color: #2e7d32;
        border: 1px solid #a5d6a7;
    }

    /* 3, 6, 9, 12... (빨강) */
    .competency-chip:nth-child(3n) {
        background-color: #ffebee;
        color: #c62828;
        border: 1px solid #ef9a9a;
    }