@charset "utf-8";
@import url('font.css');
*{
    box-sizing: border-box;
}
/* ncs_tab */
.ncs_tab{max-width: 100%; width: 100%; margin: 0 auto 60px; display: none; table-layout: fixed}
.ncs_tab li{background: #fff; border: 1px solid #D3D3D3; border-left: 0; display: table-cell; vertical-align: middle; position: relative; text-align: center}
.ncs_tab li:first-child{border-left: 1px solid #d3d3d3}
.ncs_tab li a, .ncs_tab li span{word-break:keep-all; padding: 10px 5px; display: block; color: #4c4c4c; font-size: 17px; letter-spacing: -1px}
.ncs_tab li a.on{border-color: #66b1f1; background: #4c4c4c}
.ncs_tab li a.on:after{content: ''; position: absolute; left: 50%; bottom: -10px; border-top: 5px solid #4c4c4c; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; transform: translate(-50%, 0)}
.ncs_tab li.on a, .ncs_tab li.on span{color: #ffffff;}
.ncs_tab li.on{border-color: #4c4c4c; background: #4c4c4c}
.ncs_tab li.on:after{content: ''; position: absolute; left: 50%; bottom: -10px; border-top: 5px solid #4c4c4c; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid transparent; transform: translate(-50%, 0)}
.ncs_tab li a.on, .ncs_tab li a.on span{color: #ffffff}
.ncs_tab .on { background: rgb(168, 168, 168);}
button {
    overflow: visible;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-family: 'Noto Sans KR';
}

@media screen and (max-width:1299px){
    .ncs_tab{display:table;}
}

@media screen and (max-width:768px){
	.ncs_tab{display: flex; flex-flow: wrap}
	.ncs_tab li{width: 50%; border-top: 0; display: block}
	.ncs_tab li:nth-child(1).on,
	.ncs_tab li:nth-child(2).on{border-color: #4c4c4c}
	.ncs_tab li:nth-child(odd){border-left: 1px solid #d3d3d3}
	.ncs_tab li.on:after{display: none}
}

@media screen and (max-width:1410px){
    .ncs_tab li a, .ncs_tab li span{font-size:15px; word-break: break-all; }
}
@media screen and (max-width:1310px){
    .ncs_tab li a, .ncs_tab li span{font-size:14px; word-break: break-all; }
}
@media screen and (max-width:1200px){
    .ncs_tab li a, .ncs_tab li span{font-size:13px; word-break: break-all; }
}

.tab_wrap ul.tab_container{width: 100%; overflow: hidden;}
.tab_wrap ul.tab_container > li{overflow:hidden; display: none;}
.tab_wrap ul.tab_container > li.on{display: block;}

/* ncs_tab */
/* 강좌 리스트 공통 */
.lecture_wrap .lecture_list {height: auto; display:flex; flex-wrap: wrap; justify-content:space-between; align-items: center; border-bottom:1px solid #e0e0e0; margin-top: 20px;}
.lecture_wrap .lecture_list .pic { width:300px; margin-right:20px;margin-left:20px;position: relative;border: 1px solid #9d9d9d; border-radius: 16px;}
.lecture_wrap .lecture_list .pic .pic_div {border-radius: 14px; overflow: hidden;}
.lecture_wrap .lecture_list .pic .pic_div img { width:100%;}
.lecture_wrap .lecture_list .pic_end .pic_div {position: relative;}
.lecture_wrap .lecture_list .pic_end .pic_div span{position: absolute;left: 50%; top: 50%; transform: translate(-50%, -50%);z-index: 1;
font-size: 34px;font-weight: 900;color: #ddd;font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';text-shadow: 2px 2px 6px rgba(0,0,0,0.6);}
.lecture_wrap .lecture_list .pic_end .pic_div img{filter: grayscale(100%) brightness(50%);}

/* 프리미엄 */
.lecture_wrap .lecture_list .pic .pic_cateP {
    position: absolute;
    left: 5px;
    top: -40px;
    width: 85px;
    animation: upDown 1s infinite ease-in-out;
}

.lecture_wrap .lecture_list .info {width: 300px; flex-grow:3; margin:auto 0; padding: 7px 10px;}

.lecture_wrap .lecture_list .info .cate01 p { display: inline-block;background-color: #fff;border: 1px solid #E73B2E;color: #E73B2E;padding: 0 5px;margin-bottom: 5px;font-size: 13px; }
.lecture_wrap .lecture_list .info .cate02 p { display: inline-block;background-color: #fff;border: 1px solid #1ABEFF;color: #1ABEFF;padding: 0 5px;margin-bottom: 5px;font-size: 13px;}
.lecture_wrap .lecture_list .info .cate03 p { display: inline-block;background-color: #fff;border: 1px solid #50D093;color: #50D093;padding: 0 5px;margin-bottom: 5px;font-size: 13px;}
.lecture_wrap .lecture_list .info .cate04 p { display: inline-block;background-color: #fff;border: 1px solid #9664CE;color: #9664CE;padding: 0 5px;margin-bottom: 5px;font-size: 13px;}
.lecture_wrap .lecture_list .info .cate05 p { display: inline-block;background-color: #fff;border: 1px solid #2455E0;color: #2455E0;padding: 0 5px;margin-bottom: 5px;font-size: 13px;}
.lecture_wrap .lecture_list .info .cate06 p { display: inline-block;background-color: #fff;border: 1px solid #F77700;color: #F77700;padding: 0 5px;margin-bottom: 5px;font-size: 13px;}
.lecture_wrap .lecture_list .info .cate_end p { display: inline-block;background-color: #fff;border: 1px solid #dbdbdb;color: #777;padding: 0 5px;margin-bottom: 5px;font-size: 13px;}

.lecture_wrap .lecture_list .info .tit { font-size: 1.5em;font-weight: 700;color: #000;line-height: 1.5em;overflow: hidden;width: auto;text-overflow: ellipsis;}
.lecture_wrap .lecture_list .info .price { font-size:1.1em; color:#000;}
.lecture_wrap .lecture_list .info .price strong { font-weight:500; color:#000; font-size: 1.2em;}
.lecture_wrap .lecture_list .info .sort { margin-top:5px; overflow:hidden;color: #000;font-size: 1em;}
.lecture_wrap .lecture_list .info .sort ul li { margin:3px 0; }
.lecture_wrap .lecture_list .info .sort ul li span {
    min-width: 60px;
    display: inline-block;
    background: #fff;
    padding: 2px 5px;
    margin-right: 8px;
    color: #4f4f4f;
    text-align: center;
    border: 1px solid #777777;
    border-radius: 5px;
}
.lecture_wrap .lecture_list .info .sort ul li p {display:inline-block; background-color: #fff; border: 1px solid #a261b7; color: #a261b7; margin-left: 5px; padding: 0 5px; font-size: 0.9em;}
.lecture_wrap .lecture_list .btn { margin:auto 0; margin-right: 30px;font-size: 1.3em;min-width: 250px;}
.lecture_wrap .lecture_list .btn a.order {transition: all 0.3s ease-in-out; display:block; background:#a261b7; padding:7%;color:#fff; text-align:center;border-radius: 15px;}
.lecture_wrap .lecture_list .btn a.end {transition: all 0.3s ease-in-out; display:block; background:#999494; padding:7%; color:#fff; text-align:center;border-radius: 15px;}
.lecture_wrap .lecture_list .btn a.preview {transition: all 0.3s ease-in-out; display:block; background:#fff; border:1px solid #e0e0e0; padding:7%; margin:10px 0; text-align:center;}
.lecture_wrap .lecture_list .btn a.order:hover { background:#c7aad0; color:#fff; }
.lecture_wrap .lecture_list .btn a.preview:hover { border:1px solid #ee3f3f; color:#ee3f3f; }

.paginate{ width:100%; text-align:center; margin-top:2em;}
.paginate a { margin-left:0px; display:inline-block; width:23px; color:#686868; font-size:0.9em; line-height:23px; background:#ffffff; border:1px #c5c5c5 solid; }
.paginate a:hover { border:1px solid #ee3f3f; color:#ee3f3f; }
.paginate a.on{ margin-left:0px; display:inline-block;  width:25px; color:#fff; font-size:0.9em; line-height:25px;  background:#484848; border:0;  }
.paginate a.on:hover { background:#4c61b5; color:#fff; }

/* 공문 */
.official_btn {
    text-align: center;
    cursor: pointer;
    display: block;
    font-size: 1.2rem;
    width: 93%;
    background: #777;
    border: solid 1px #e0e0e0;
    padding: 10px 0;
    margin: 10px 0 0 0;
    color: #fff !important;
}

/* 상단타이틀영역 */
    .titleArea { width:100%; overflow:hidden; display: flex; justify-content: space-between;align-items: flex-start; margin-bottom: 30px;}
    .titleArea > #subtitle {font-size:1.4em; color:#777777; font-weight: 500; letter-spacing:-1.2px;font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum'; display: flex; align-items: center;}
    .titleArea > #subtitle >span { font-weight:700; color:#222;margin-bottom: 1px;}
    .titleArea > #subtitle .arrow { margin-top: 2px; padding: 0 10px;}
    .titleArea .search_box {
        width: 450px;
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 12px;       /* 둥근 모서리 */
        background: #fff;
        padding: 7px 15px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }

        /* 드롭다운 */
        .titleArea .search_box select {
        border: none;
        background: transparent;
        padding: 8px 24px 8px 8px;
        font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';
        font-size: 14px;
        color: #3b3b3b;
        cursor: pointer;
        /* font-weight: 700; */

        /* 화살표 커스텀 */
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;

        background-image: url("../img/sub/class/search_arrow.png");
        background-repeat: no-repeat;
        background-position: right 6px center;
        background-size: 10px;
        }

        /* 드롭다운 옵션 */
        .titleArea .search_box select option {
        padding: 8px;
        font-size: 14px;
        color: #3b3b3b;
        }

        /* 네이티브 select */
        .titleArea .search_box select:focus,
        .titleArea .search_box select:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        }
        /* 파이어폭스/레거시 보정 */
        .titleArea .search_box select::-moz-focus-inner { border: 0; }
        .titleArea .search_box select:-moz-focusring { outline: none; }

        /* 커스텀 셀렉트 트리거를 쓰는 경우 */
        .c-select__trigger:focus,
        .c-select__trigger:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        }

        /* 검색 입력창 */
        .titleArea .search_box input {
        flex-grow: 1;
        border: none;
        outline: none;
        padding-left: 10px;
        font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';
        font-size: 14px;
        color: #333;
        background: transparent;
        /* font-weight: 700; */
        }

        /* placeholder 색상 */
        .titleArea .search_box input::placeholder {
        color: #ed4428;            /* 빨간색 톤 */
        }

        /* 돋보기 버튼 */
        .titleArea .search_box button {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        }

        .titleArea .search_box button img {
            width: 30px;
        }

@keyframes upDown {
   0% {
            transform: translateX(-50%) translateY(0%);
        }
        50% {
            transform: translateX(-50%) translateY(-5%);
        }
        100% {
            transform: translateX(-50%) translateY(0%);
        }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* 좌측 컨텐츠 카테고리바 */
    .ncs-side-menu{width: 100%; height: 100%;}
    .ncs-side-menu .banner{width: 100%; height: 90px; overflow: hidden; background: #bdbdbd; margin-bottom: 10px; text-align: center; position: relative;}
    .ncs-side-menu .lec-link-wrap{padding: 15px 25px; background-color: #e7e7e7; border-radius: 20px;}
    .ncs-side-menu .lec-link-wrap h3.title{font-size: 20px; font-weight: 500; letter-spacing: -1.1px; text-align: center; color: #212121; border-bottom: 1px solid #404040 ; padding-bottom: 20px;}
    .ncs-side-menu .lec-link li{white-space: nowrap; text-overflow: ellipsis; margin-right: 8px;display: flex;align-items: center;justify-content: flex-start;}
    .ncs-side-menu .lec-link li:last-child{margin-right: 0;}
    .ncs-side-menu .lec-link li a{ width:100%; font-size: 15px; color: #212121;}
    .ncs-side-menu .lec-link li a:hover,
    .ncs-side-menu .lec-link li a:active{color: #464646;}

/* 메뉴구성 드롭다운 */
    .nav-links{ height: 100%; overflow: auto;}
    .nav-links .on{ display: block;}
    .nav-links .off{ display: none;}
    .nav-links::-webkit-scrollbar{ display: none;}
    .nav-links li{ position: relative; list-style: none; transition: all 0.1s ease;}
    .nav-links li i{  height: 25px;  min-width: 51px;  text-align: center;  line-height: 25px;  color: #787878;  font-size: 19px;  cursor: pointer;  transition: all 0.1s ease;}
    .nav-links li.showMenu i.arrow{  transform: rotate(-180deg);}
    .nav-links li a{ display: flex; align-items: center; text-decoration: none;}
    .nav-links li a .link_name{ font-size: 15px; font-weight: 700; width: 100%; padding: 11px 0 11px 14px; color:#838383;}
    .nav-links li a .link_name:hover{ color: #ff6868; font-weight: 900;}
    .nav-links li.showMenu .sub-menu{max-width: 100%; display: flex; flex-wrap: nowrap; transition: all 0.1s ease; padding-top: 5px;overflow-x: auto;overflow-y: hidden;}
    .nav-links li.showMenu .sub-menu::-webkit-scrollbar {height: 7px;}
    .nav-links li.showMenu .sub-menu::-webkit-scrollbar-thumb {background-color: #aaa; border-radius: 5px;}
    .nav-links li.showMenu .sub-menu::-webkit-scrollbar-track {background-color: #f0f0f0;}

    .nav-links .showMenu .link_name{ display: block; transition: all 0.1s ease; font-weight: 500; font-size: 1.4em; color: #3b3b3b;margin-right: 12px;}
    .nav-links li .sub-menu{ display: none;}
    .nav-links li .sub-menu a{ color: #3b3b3b;background-color: #fcfcfc; border: 1px solid #c6c6c6; white-space: nowrap; padding: 6px 25px; transition: all 0.1s ease; border-radius: 9px; font-size: 1.1em;margin-bottom: 5px;}
    .nav-links li .sub-menu a:hover{  color: #fff;border: 1px solid #c6c6c6; background-color: #777777;}
    .nav-links li .sub-menu .on{ color: #fff;border: 1px solid #c6c6c6; background-color: #777777;}
    .nav-links li .sub-menu .link_name{ display: none;}
    .nav-links li .sub-menu.blank{ pointer-events: auto; padding: 3px 20px 6px 16px; pointer-events: none;}
    .nav-links li:hover .sub-menu.blank{ top: 50%; transform: translateY(-50%);}

/* 책 배경 */
.subtop_zoom .book_bg {
    display: none;
}
.subtop_zoom01 .book_bg, 
.subtop_zoom02 .book_bg, 
.subtop_zoom03 .book_bg, 
.subtop_zoom04 .book_bg, 
.subtop_zoom05 .book_bg, 
.subtop_zoom06 .book_bg {
    display: block;
}
.book_bg{
    position: relative;
    width: 100%;
    height: 300px;
}
.book_bg .book_bg_img{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    overflow: hidden;
    opacity: 0.15;
}
.book_bg .book_bg_img_box{
    display: flex;
}
.book_bg .book_bg_roll_1{
    animation: scrolling 30s linear infinite;
}
@keyframes scrolling {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
    }
@keyframes scrolling2 {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

@media (min-width:1300px){
    #container{ width:1300px; margin:30px auto 50px;}
    #container:after{display:block;clear:both;content:''}

    /* 상단 배너 */
    .subtop_zoom{
        position: relative;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-color: #161c2f;
        background-image: url(../img/subtop_zoom.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
        z-index: 7;
    }
    .subtop_zoom01, 
    .subtop_zoom02, 
    .subtop_zoom03, 
    .subtop_zoom04, 
    .subtop_zoom05, 
    .subtop_zoom06 {
        background-color: #202945;
        background-image: none;
    }
    .subtop_txt{
        display: none; 
    }
    .subtop_txt01{
        display: block;
        position: absolute;
        top: 1px;
        left: 0;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-image: url(../img/subtop_txt01.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
        z-index: 7;
    }
    .subtop_txt02,
    .subtop_txt03,
    .subtop_txt04,
    .subtop_txt05{
        display: block;
        position: absolute;
        top: 1px;
        left: 0;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-image: url(../img/subtop_txt02.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
        z-index: 7;
    }
    .subtop_txt06{
        display: block;
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: 300px;
        overflow: hidden;
        background-image: url(../img/subtop_txt06.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto;
        z-index: 7;
    }

    .subtoptext {display: none; position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:1000px; margin:0 auto; z-index:7;}
    .subtoptext .txt { font-size:1.0em; color:#8c93a0; line-height:1.4em; }
    .subtoptext strong { font-size:1.8em; font-weight:800; color:#333; line-height:1.5em; }

    /* 서브메뉴 */
    .snb_container{border-top:0px solid #e0e0e0; border-bottom:1px solid #e0e0e0; height:55px;}
    .snb { width:1000px; margin:0 auto; z-index:8;}
    .snb .home{display:block; float:left; width:55px; height:55px;}
    .snb .wrapper{position:relative; float:left; width:220px; height:100%;}
    .snb .wrapper .tit{ position: relative; display:block; height:55px; line-height:55px; vertical-align:middle; padding-left:25px; font-size:16px; font-weight:500; color:#2d2d2d;}
    .snb .wrapper .tit:hover { color:#4c61b5;}
    .snb .wrapper .tit::before{content: "";position: absolute;left:0; top:50%; transform: translateY(-50%); height:16px; border-left:0px solid #e8e8e8;}
    .snb .wrapper .tit::after{content: "";position: absolute;right:18px;top:26px;width:0; height:0;border-style:solid; border-width:7px;border-color:transparent transparent transparent #4d4d4d;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .snb .wrapper .tit.on::after{top:18px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
    .snb .wrapper .snb_menu{position:absolute; left:0; top:54px; width:100%; z-index:8;}
    .snb .wrapper .snb_menu li{display:none;margin-top:10px;}
    .snb .wrapper .snb_menu li:first-child{margin-top:0;}
    .snb .wrapper .snb_menu.open {/*overflow-y:auto;max-height:188px;*/ background:#fff; border:1px solid #e0e0e0; border-top:0; width:168px; padding:25px;}
    .snb .wrapper .snb_menu.open a { font-size:; font-weight:400; color:#676767; }
    .snb .wrapper .snb_menu.open a:hover { color:#4c61b5;}
    .snb .wrapper .snb_menu.open li{display:block;}
    .snb .wrapper .snb_menu.open li a{display:block;width:100%;}
    .snb .depth3_wrap .snb_menu.open{border:none;}
    .snb .depth2_wrap,.snb .depth3_wrap{display: none;}
    .snb .depth2_wrap.active,
    .snb .depth3_wrap.active{display: block;}
    .snb .depth2_wrap a { color:#fff;}
    .snb .wrapper.last{background:#4c61b5;}
    .snb .wrapper.last .snb_menu{ background:#4c61b5; top:54px; width:168px; border:1px solid #4c61b5; border-top:none; } /* 2차 메뉴*/
    .snb .wrapper.last .snb_menu a{ color:#fff;} 
    .snb .wrapper.last .snb_menu a:hover{ color:#ffe746;}
    .snb .wrapper.last > .tit{color:#fff}
    .snb .wrapper.last > .tit::before{display:none;}
    .snb .wrapper.last .tit::after{border-color:transparent transparent transparent #fff;}
    .snb::after{content:"";clear: both;display: block;}

    /* fixed */
    .snb[data-fixed="fixed"]{position: fixed;/*left:0;*/top:82px;width:100%;}


    /* 컨텐츠영역 */
    #content{ position:relative; float:left; width:100% }
    #content .wrapper { clear:both; margin:60px 0; overflow:hidden; }
    #content .wrapper h1, #content .wrapper2 h1 {font-size:1.7em; font-weight:500; color:#333; line-height:1.5em; letter-spacing:-1.0px; }
    #content .wrapper h1 strong { color:#ff6000; }
}

/* 신청현황 바(리스트용, 공통) */
.zoom-bar {display: inline-block; position:relative; top: 3px; width: 55%; background:#d6d6d6; height:16px;}
.zoom-bar__current { height:100%; background:#a261b7; width:0; }
.zoom-bar__current_end { height:100%; background:#bbb; width:0; }
.zoom-bar__text { 
    position: absolute;
    inset: 0;
    right: -30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    font-size: 0.9em;
    color: #4f4f4f;
}
.zoom-bar__labels { width:260px; position:relative; margin-top:4px; height:18px; font-size:12px; color:#333; }
.zoom-bar__labels .min { position:absolute; transform:translateX(-50%); left:0; }
.zoom-bar__labels .max { position:absolute; right:0; }
.sort ul { list-style:none; padding:0; margin:0; }
.sort li { margin:2px 0; }

/* 키워드 */
.tags {
    margin-top: 10px;
    margin-left: 70px;
  }
.tag_box > span {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 30px;
    color: #8b41bb;
    background-color: #fff;
    margin-right: 3px;
    font-weight: 300;
    font-size: 1em;
    border: 2px solid #8b41bb;
    
  }
.tag_end > span {
    color: #444;
    background-color: #eee;
    border: 1px solid #444;
  }

@media (min-width:768px) and (max-width:1299px){
    #container{ width:90%; margin:40px auto;}
    #container:after{display:block;clear:both;content:''}

    /* 상단 배너 */
    .subtop_zoom{
        position: relative;
        width: 100%;
        height: 20vh;
        overflow: hidden;
        background-color: #161c2f;
        background-image: url(../img/subtop_zoom.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .subtop_zoom01, 
    .subtop_zoom02, 
    .subtop_zoom03, 
    .subtop_zoom04, 
    .subtop_zoom05, 
    .subtop_zoom06 {
        background-color: #202945;
        background-image: none;
    }
    .subtop_txt{
        display: none; 
    }
    .subtop_txt01{
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
        width: 100%;
        height: 20vh;
        overflow: hidden;
        background-image: url(../img/subtop_txt01.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .subtop_txt02,
    .subtop_txt03,
    .subtop_txt04,
    .subtop_txt05{
        display: block;
        position: absolute;
        top: 3px;
        left: 0;
        width: 100%;
        height: 20vh;
        overflow: hidden;
        background-image: url(../img/subtop_txt02.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .subtop_txt06{
        display: block;
        position: absolute;
        top: 5px;
        left: 0;
        width: 100%;
        height: 20vh;
        overflow: hidden;
        background-image: url(../img/subtop_txt06.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .book_bg{
        height: 20vh;
    }
    .book_bg .book_bg_roll_1{
        width: 180%;
    }

    .subtoptext {display: none; position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:90%; margin:0 auto; z-index:7;}
    .subtoptext .txt { font-size:0.8em; color:#8c93a0; line-height:1.4em; }
    .subtoptext strong { font-size:1.5em; font-weight:800; color:#333; line-height:1.5em; }

    /* 서브메뉴 */
    .snb_container{border-top:0px solid #e0e0e0; border-bottom:1px solid #e0e0e0; height:55px;}
    .snb{ width:90%; margin:0 auto; z-index:8;}
    .snb .home{display:block; float:left; width:55px; height:55px;}
    .snb .wrapper{position:relative; float:left; width:220px; height:100%;}
    .snb .wrapper .tit{ position: relative; display:block; height:55px; line-height:55px; vertical-align:middle; padding-left:25px; font-size:16px; font-weight:500; color:#2d2d2d;}
    .snb .wrapper .tit:hover { color:#4c61b5;}
    .snb .wrapper .tit::before{content: "";position: absolute;left:0; top:50%; transform: translateY(-50%); height:16px; border-left:0px solid #e8e8e8;}
    .snb .wrapper .tit::after{content: "";position: absolute;right:18px;top:26px;width:0; height:0;border-style:solid; border-width:7px;border-color:transparent transparent transparent #4d4d4d;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .snb .wrapper .tit.on::after{top:18px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
    .snb .wrapper .snb_menu{position:absolute; left:0; top:54px; width:100%; z-index:8;}
    .snb .wrapper .snb_menu li{display:none;margin-top:10px;}
    .snb .wrapper .snb_menu li:first-child{margin-top:0;}
    .snb .wrapper .snb_menu.open {/*overflow-y:auto;max-height:188px;*/ background:#fff; border:1px solid #e0e0e0; border-top:0; width:168px; padding:25px;}
    .snb .wrapper .snb_menu.open a { font-size:; font-weight:400; color:#676767; }
    .snb .wrapper .snb_menu.open a:hover { color:#4c61b5;}
    .snb .wrapper .snb_menu.open li{display:block;}
    .snb .wrapper .snb_menu.open li a{display:block;width:100%;}
    .snb .depth3_wrap .snb_menu.open{border:none;}
    .snb .depth2_wrap,.snb .depth3_wrap{display: none;}
    .snb .depth2_wrap.active,
    .snb .depth3_wrap.active{display: block;}
    .snb .depth2_wrap a { color:#fff;}
    .snb .wrapper.last{background:#4c61b5;}
    .snb .wrapper.last .snb_menu{ background:#4c61b5; top:54px; width:168px; border:1px solid #4c61b5; border-top:none; } /* 2차 메뉴*/
    .snb .wrapper.last .snb_menu a{ color:#fff;} 
    .snb .wrapper.last .snb_menu a:hover{ color:#ffe746;}
    .snb .wrapper.last > .tit{color:#fff}
    .snb .wrapper.last > .tit::before{display:none;}
    .snb .wrapper.last .tit::after{border-color:transparent transparent transparent #fff;}
    .snb::after{content:"";clear: both;display: block;}

    /* fixed */
    .snb[data-fixed="fixed"]{position: fixed;/*left:0;*/top:82px;width:100%;}

    /* 컨텐츠영역 */
    #content{ position:relative; float:left; width:100%; }
    #content .wrapper { clear:both; margin:50px 0; overflow:hidden; }
    #content .wrapper h1{font-size:1.7em; font-weight:500; color:#333; line-height:1.5em; letter-spacing:-1.0px; }
    #content .wrapper h1 strong { color:#ff6000; }

    .official_btn {width: 100%;}

    .titleArea > #subtitle {font-size: 1.3em;}
    .titleArea > #subtitle .home_icon{width: 40px;}

    .titleArea .search_box {
        width: 400px;
        padding: 5px 10px;
    }
    .titleArea .search_box button img { width: 2vw;}
    .ncs-side-menu .lec-link-wrap {padding: 12px 22px;}
    .nav-links .showMenu .link_name {font-size: 1.2em;}
    .lecture_wrap .lecture_list .info .tit{font-size: 1.4em;}
    .lecture_wrap .lecture_list .info .price strong{font-size: 1.1em;}
    .lecture_wrap .lecture_list .btn{min-width: 200px;}
    .tags { margin-left: 0;}
}

@media (max-width:1000px){
    .lecture_wrap .lecture_list {display: flex; justify-content: flex-end;}
    .lecture_wrap .lecture_list .info {width: 300px;}
    .lecture_wrap .lecture_list .btn{min-width: 180px; margin: 10px 5px;}
}
@media (max-width:768px){

    #container{width:90%; margin:30px auto; font-size:14px; line-height:1.5em;}
    #container:after{display:block;clear:both;content:''}

    /* 상단이미지 */
    .subtop_zoom{ 
        position: relative;
        width: 100%;
        height: 35vh;
        overflow: hidden;
        background-color: #161c2f;
        background-image: url(../img/subtop_mzoom.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .subtop_zoom01, 
    .subtop_zoom02, 
    .subtop_zoom03, 
    .subtop_zoom04, 
    .subtop_zoom05, 
    .subtop_zoom06 {
        position: relative;
        width: 100%;
        height: 35vh;
        overflow: hidden;
        background-color: #202945;
        background-image: url(../img/subtop_mtxtbg.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    .subtop_txt{
        display: none; 
    }
    .subtop_txt01{
        display: block;
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 33vh;
        overflow: hidden;
        background-image: url(../img/subtop_mtxt01.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .subtop_txt02,
    .subtop_txt03,
    .subtop_txt04,
    .subtop_txt05{
        display: block;
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 30vh;
        overflow: hidden;
        background-image: url(../img/subtop_mtxt02.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .subtop_txt06{
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 20vh;
        overflow: hidden;
        background-image: url(../img/subtop_mtxt06.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 7;
    }
    .book_bg{
        display: none !important;
    }

    .subtoptext {display: none; position:absolute; left:50%; top:50%; transform:translate(-50%) translateY(-50%); width:85%; margin:0 auto; text-align:center; z-index:7;}
    .subtoptext .txt { font-size:1em; color:#ffffff; line-height:1.4em;}
    .subtoptext strong { font-size:1.3em; font-weight:800; color:#ffffff; line-height:1.5em; }

    /* 서브메뉴 */
    .snb_container{border-top:0px solid #e0e0e0; border-bottom:1px solid #e0e0e0; height:45px;}
    .snb{ width:; margin:0 auto; z-index:8;}
    .snb .home{display:none; float:left; width:45px; height:45px;}
    .snb .wrapper{position:relative; float:left; width:50%; height:100%;}
    .snb .wrapper .tit{ position: relative; display:block; height:45px; line-height:45px; vertical-align:middle; padding-left:15px; font-size:14px; font-weight:500; color:#2d2d2d;}
    .snb .wrapper .tit:hover { color:#4c61b5;}
    .snb .wrapper .tit::before{content: "";position: absolute;left:0; top:50%; transform: translateY(-50%); height:16px; border-left:0px solid #e8e8e8;}
    .snb .wrapper .tit::after{content: "";position: absolute;right:10px; top:20px;width:0; height:0;border-style:solid; border-width:7px;border-color:transparent transparent transparent #4d4d4d;transform: rotate(90deg);-webkit-transform: rotate(90deg);}
    .snb .wrapper .tit.on::after{top:13px; transform: rotate(-90deg); -webkit-transform: rotate(-90deg);}
    .snb .wrapper .snb_menu{position:absolute; left:0; top:44px; width:100%; z-index:8;}
    .snb .wrapper .snb_menu li{display:none;margin-top:10px;}
    .snb .wrapper .snb_menu li:first-child{margin-top:0;}
    .snb .wrapper .snb_menu.open {/*overflow-y:auto;max-height:188px;*/ background:#fff; border:1px solid #e0e0e0; border-top:0; width:; padding:15px 0;}
    .snb .wrapper .snb_menu.open a {  font-size:; font-weight:400; color:#2d2d2d; line-height:1.7em;}
    .snb .wrapper .snb_menu.open a:hover { color:#4c61b5; }
    .snb .wrapper .snb_menu.open li{display:block; padding-left:15px; }
    .snb .wrapper .snb_menu.open li a{display:block;width:100%; font-size:14px; }
    .snb .depth3_wrap .snb_menu.open{border:none;}
    .snb .depth2_wrap,.snb .depth3_wrap{display: none;}
    .snb .depth2_wrap.active,
    .snb .depth3_wrap.active{display: block;}
    .snb .depth2_wrap a { color:#fff;text-decoration:none;}
    .snb .wrapper.last{background:#4c61b5;}
    .snb .wrapper.last .snb_menu{ background:#4c61b5; top:44px; width:; border:0px solid #4c61b5; border-top:none; } /* 2차 메뉴*/
    .snb .wrapper.last .snb_menu a{ font-weight:400; color:#fff; line-height:1.7em;} 
    .snb .wrapper.last .snb_menu a:hover{ color:#ffe746;}
    .snb .wrapper.last > .tit{ font-weight:400; color:#fff}
    .snb .wrapper.last > .tit::before{display:none;}
    .snb .wrapper.last .tit::after{border-color:transparent transparent transparent #fff;}
    .snb::after{content:"";clear: both;display: block;}

    /* fixed */
    .snb[data-fixed="fixed"]{position: fixed;/*left:0;*/top:82px;width:100%;}

    /* 컨텐츠영역 */
    #content{ position:relative; float:left; width:100%; }
    #content .wrapper { clear:both; margin:40px 0; overflow:hidden; }
    #content .wrapper h1, #content .wrapper2 h1 {font-size:1.3em; font-weight:500; color:#333; line-height:1.5em; letter-spacing:-1.0px; }
    #content .wrapper h1 strong { color:#ff6000; }

    /* .titleArea */
    .titleArea {margin-bottom: 20px;}
    .titleArea > #subtitle {font-size: 1.2em;}
    .titleArea > #subtitle .home_icon{width: 40px;}
    .titleArea > #subtitle .arrow {padding: 0 5px;}
    .titleArea {display: block;}
    .titleArea > #subtitle {margin-bottom: 10px;}
    .titleArea .search_box {width: 100%;padding: 5px 10px;}
    .titleArea .search_box button img {width: 5vw;}

    .ncs-side-menu .lec-link-wrap {padding: 10px 15px; border-radius: 12px;}
    .nav-links .showMenu .link_name {font-size: 1.1em;}
    .ncs-side-menu .lec-link li {margin-right: 5px;}
    .nav-links li.showMenu .sub-menu::-webkit-scrollbar {height: 5px;}
    .nav-links li .sub-menu a {padding: 3px 10px; font-size: 1em;}

    /* 강좌 리스트 */
    .lecture_wrap { margin:20px 0; }
    .lecture_wrap .lecture_list {height: auto; display:flex; flex-wrap: wrap; justify-content:space-between; align-items: center; border-bottom:1px solid #e0e0e0; margin-bottom:10px;}
    .lecture_wrap .lecture_list .pic { flex-grow:1; margin-bottom: 10px;}
    .lecture_wrap .lecture_list .pic .pic_div {border-radius: 14px; overflow: hidden;}
    .lecture_wrap .lecture_list .pic .pic_div img { width:100%;}
    .lecture_wrap .lecture_list .info { flex-grow:3; margin:auto 0; font-size: 1.1em;}
    .lecture_wrap .lecture_list .info .tit {font-size: 1.2em;}
    .lecture_wrap .lecture_list .info .price {font-size: 1em;}
    .lecture_wrap .lecture_list .info .price strong{font-size: 1em;}
    .lecture_wrap .lecture_list .info .sort ul li span {min-width: 55px;}
    .lecture_wrap .lecture_list .btn {min-width: 100%;}
    .lecture_wrap .lecture_list .btn a.order {padding: 5%;}
    .lecture_wrap .lecture_list .btn a.end {padding: 5%;}
    .zoom-bar {width: 65%;}
    .tags { margin-left: 0;}
    .tag_box > span {font-size: 0.9em}

    .official_btn {width: 100%;}

    /* 프리미엄 */
    .lecture_wrap .lecture_list .pic .pic_cateP {
       position: absolute;
        left: 2%;
        top: -15%;
        width: 22vw;
        width: 85px;
    }
}


/* 서브페이지 서브카테고리 디자인 */
.sub_navi{border-top: 0px solid #e0e0e0;border-bottom: 1px solid #e0e0e0;height: 55px;display: none !important;}
.sub_navi:after{content: ''; display: block; clear: both}
.sub_navi>ul{max-width: 1250px; margin: 0 auto}
.sub_navi>ul>li{width: 260px; height: 56px; line-height: 55px; float: left; position: relative; z-index: 10;  font-size: 17px; font-weight: 500; word-break: break-word}
.sub_navi>ul>li.home{display: block; float: left; width: 55px; height: 55px;}
.sub_navi>ul>li>span{padding-left: 15px; border-right: 1px solid #d1d1d1; display: block; background: url(../img/comm/icon_arrow.png) no-repeat; background-position-x: calc(100% - 15px); background-position-y: center; cursor: pointer}
.sub_navi>ul>li>ul{width: calc(100% + 1px); border: 1px solid #D9D9D9; border-top: 0; display: none; position: absolute; top: 55px; left: -1px; background: #ffffff}
.sub_navi>ul>li>ul>li>a{padding: 0 15px; display: block; font-weight: 400;}
.sub_navi>ul>li>ul>li>a:hover{background: #D9D9D9}
.sub_navi>ul>li.on>ul{display: block}
.sub_navi>ul>li:hover >ul,
.sub_navi>ul>li:focus >ul{display: block}

@media screen and (max-width:768px){
	.sub_navi>ul{width: 100%; display: table; table-layout: fixed}
	.sub_navi>ul>li{width: 50%; height: auto; border-right: 1px solid #e0e0e0; display: table-cell; vertical-align: middle; float: none; line-height: 1.49em}
	.sub_navi>ul>li:last-child{border-right: 0}
	.sub_navi>ul>li.home{display: none}
	.sub_navi>ul>li>span{height: 100%; padding: 15px; padding-right: 40px; border-right: 0}
	.sub_navi>ul>li>ul>li>a{padding: 15px 40px 15px 15px}
}

.responsive-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
  }

.responsive-table-wrapper table {
    min-width: 600px; /* 테이블의 최소 너비 설정 (필요에 따라 조절) */
}

.ncs_badge {
    display: flex;
    column-gap: 5px;
    padding-bottom: 5px;
}
.ncs_badge span {
    padding: 0 6px;
    font-size: 12px;
    line-height: 21px;
}
.ncs_badge .ncs {
    background-color: #fbf4d6;
    color: #ff7a43;
}
.ncs_badge .saup {
    background-color: #f5f8fc;
    color: #4067b1;
}
.ncs_badge .ncs_best {
    background-color: #fff1f0;
    color: #ee3f3f;
}
.ncs_badge .ncs_chuchun {
    background-color: #f6f6f6;
    color: #3030f5;
}
.package {
    background-color: #fff7b7;
    color: #818702;
}
.me {
    background-color: #fff1f0;
    color: #ee3f3f;
}
.ck {
    background-color: #f6f6f6;
    color: #3030f5;
}
.ncs {
    background-color: #fbf4d6;
    color: #ff7a43;
}
.saup {
    background-color: #f5f8fc;
    color: #4067b1;
}
.si {
    background-color: #b8ffd7;
    color: #6e6e6d;
}
.kdgt {
    background-color: #3f73e0;
    color: #eaf0fc;
    padding: 0px 2px 0px 2px;
}
.voucher {
    background-color: #00a8ae;
    color: #ffffff;
    padding: 0px 2px 0px 2px;
}
.sanup {
    background-color: rgb(247, 218, 19);
    color: rgb(0, 0, 0);
    padding: 0px 2px;
}
.secret_y{
    background-color: #273450;
    color: #f0f0f0;
}
.secret_y2{
    background-color: #273450;
    color: #f0f0f0;
}
.mosa {
    background-color: #ffc9c5;
    color: #ff0000;
}
.ncs_best {
    background-color: #fff1f0;
    color: #ee3f3f;
}
.ncs_chuchun {
    background-color: #f6f6f6;
    color: #3030f5;
}
/* 수강신청 상세페이지 */
.left_text{
    margin: 10px 0 10px;
    max-height: 200px;
    padding: 20px 20px;
    border-radius: 4px;
    background-color: #fafafa;
}

.left_text li{
    padding: 0px 0px 10px 0px;
    font-weight: 400;
    font-size: 13px;
    color: #000000;
    line-height: 20px;
    position: relative;
}

#sub_content {
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s;
    max-width: 1100px;
    margin: 60px auto;
}
/* 상세 */
.sub_content {
  margin-bottom: 80px;
}

.sub_content .title-wrap{
    overflow: hidden;
    border-bottom: 2px solid #212121;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 0;
}

.sub_content .vw-header {
  position: relative;
  border-bottom: 2px #20222d solid;
  padding-bottom: 12px;
}
.sub_content .vw-header>h1 {
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: -0.8px;
}
.sub_content .vw-header>h1 i {
  margin-right: -3px;
}
.sub_content .vw-header>h1>strong {
  margin-left: 5px;
}
.sub_content .vw-header>h1>i>img {
  vertical-align: middle;
  margin-right: -2px;
}
.sub_content .vw-header .ico_aside {
  position: absolute;
  right: 0;
  top: 2px;
}
.sub_content .vw-header .ico_aside>i {
  margin-left: -3px;
}
.sub_content .sub_box {
    padding-top: 30px;
    background: none;
}
.sub_content .sub_box:after {
  content: '';
  display: block;
  clear: both;
}

.sub_content .sub_box>.left {
    float: left;
    width: 30%;
    padding-top: 0;
}
.sub_content .sub_box>.left>.img_box {
    width: 360px;
}
.sub_content .sub_box>.left>.img_box>p {
  position: relative;
}
.sub_content .sub_box>.left>.img_box>.view {
  margin: -3px 0 0 0;
}
.sub_content .sub_box>.left .btns {
  position: relative;
  top: -1px;
}
.sub_content .sub_box>.left .btns .btn {
  margin-right: -5px;
  margin-right: -7px;
  border: 0;
}
.sub_content .sub_box>.left .btns .btn .icon {
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.sub_content .sub_box>.left .btn-preview {
  width: 102px;
  border-radius: 0px;
  background: #3b4655;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-top: 1px #505a67 solid;
  border-right: 1px #2f3844 solid;
  font-family: 'Noto Sans KR', dotum;
  letter-spacing: -1px;
}
.sub_content .sub_box>.left .btn-preview:hover {
  background-color: #626b77;
}
.sub_content .sub_box>.left .btn-mobile {
  width: 102px;
  border-radius: 0px;
  background: #606976;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  border-top: 1px #808791 solid;
  border-left: 1px #808791 solid;
  font-family: 'Noto Sans KR', dotum;
  letter-spacing: -1px;
}
.sub_content .sub_box>.left .btn-mobile:hover {
  background-color: #808791;
}

@-moz-document url-prefix(){
  .sub_content .sub_box>.left .btn-mobile {
    width: 101px;
  }
  .sub_content .sub_box>.left .btns {
    position: relative;
    top: -3px;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0){
  .sub_content .sub_box>.left .btn-mobile {
    width: 101px;
  }

  ::i-block-chrome,
  .sub_content .sub_box>.left .btn-mobile {
    width: 102px;
  }
}

.sub_content .sub_box>.left .summary {
  *margin-bottom: -10px;
  font-size: 12px;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  letter-spacing: -1px;
  *padding-bottom: 15px;
  border-bottom: 2px #dddfe2 solid;
}
.sub_content .sub_box>.left .summary>.header {
  position: relative;
  margin-top: 15px;
}
.sub_content .sub_box>.left .summary>.header a {
  position: absolute;
  right: 0;
  top: 0;
}
.sub_content .sub_box>.left .summary p {
  max-height: 130px;
  color: #7a7a7a;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  line-height: 160%;
  margin: 10px 0 17px;
  -webkit-box-orient: vertical;
  width: 240px;
}
.sub_content .sub_box>.left .grade {
  position: relative;
  background: #dddfe2;
  padding: 15px 12px 10px 12px;
  margin-top: 5px;
}
.sub_content .sub_box>.left .grade>i {
  position: absolute;
  right: -2px;
  top: -2px;
}
.sub_content .sub_box>.left .grade ul {
  *margin-top: -25px;
}
.sub_content .sub_box>.left .grade li {
  font-size: 11px;
  font-family: 'Noto Sans KR', dotum;
  color: #575757;
  margin-bottom: 6px;
  *margin-bottom: 2px;
}

.sub_content .sub_box>.left>.share {
  margin-top: 12px;
  font-size: 11px;
  color: #767676;
  font-family: 'Noto Sans KR', dotum;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
/* /20150401 margin-bottom 추가 */
.sub_content .sub_box>.left>.share img {
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.sub_content .sub_box>.left>.share strong {
  margin-right: 4px;
}

.sub_content .sub_box>.left .training-download {
  display: block;
  width: 100%;
  padding: 9px 0;
  border: solid 1px #ebebeb;
  font-size: 14px;
  text-align: center;
  color: #20222d;
  letter-spacing: -0.2px;
}

.sub_content .sub_box>.center {
  float: left;
  width: 69%;
  margin-left: 10px;
  padding-top: 10px;
}
.sub_content .sub_box>.right {
  float: right;
  width: 190px;
  padding: 18px 15px;
  background: #f4f4f4;
  margin-top: 0;
}
.sub_content .sub_box>.right .best {
  border-bottom: 2px #bfbfbf solid;
  padding: 0 0 15px;
}
.sub_content .sub_box>.right h3 {
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  font-style: normal;
  font-weight: 600;
  color: #575757;
  font-size: 15px;
  letter-spacing: -1px;
}
.sub_content .sub_box>.right .best>.cont {
  color: #7a7a7a;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-height: 150%;
  margin: 10px 0 0;
  -webkit-box-orient: vertical;
  width: 190px;
  letter-spacing: -1px;
  font-size: 12px;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
}
.sub_content .sub_box>.right .best>.rating {
  margin: 6px 0;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  font-style: normal;
  color: #575757;
  letter-spacing: -1px;
  font-size: 13px;
}
.sub_content .sub_box>.right .best>.rating>.star>.star-state-big {
  position: relative;
  top: -2px;
  margin: 0 2px 0 4px;
}
.sub_content .sub_box>.right .best>.rating strong {
  font-size: 20px;
  color: #da2128;
  font-family: 'Noto Sans KR', '나눔고딕', 'nanum gothic', '맑은 고딕', 'malgun gothic',
    'Nanum Gothic';
  font-style: normal;
  font-weight: 600;
}
.sub_content .sub_box>.right .recobel-course {
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #f4f4f4;
  position: relative;
}
.sub_content .sub_box>.right .recobel-course div {
  background: #f4f4f4;
}
.sub_content .sub_box>.right .recobel-course .img_boxb {
  display: block;
  width: 166px;
  margin: 0 auto;
  padding: 15px 0 5px;
}
.sub_content .sub_box>.right .recobel-course .img_boxb img {
  width: 100%;
  height: 91px;
}
.sub_content .sub_box>.right .recobel-course a {
    font-size: 12px;
    color: #444;
    outline: none;
}
.sub_content .sub_box>.right .recobel-course a .title {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub_content .sub_box>.right .bx-controls {
    height: 30px;
}
.sub_content .sub_box>.right .bx-controls .bx-controls-direction {
    position: absolute;
    bottom: 17px;
    *bottom: 30px;
    right: 12px;
    width: 30px;
    float: right;
}

.sub_content .sub_box>.right .bx-controls .bx-controls-direction .bx-next {
    background-position: -14px 0;
}
.sub_content .sub_box>.right .recobel-course .bx-paging {
    font-size: 12px;
    position: absolute;
    bottom: 16px;
    right: 48px;
}

.sub_content .sub_box>.left>.img_box>a {
    display: block;
    position: relative;
    overflow: hidden;
}

.sub_content .sub_box>.left>.img_box>a::after {
    position: absolute;
    right: 5px;
    bottom: 14px;
    width: 42px;
    height: 42px;
    background: url(../img/ncs/play.png) no-repeat 0;
    content: '';
}
.sub_content .sub_box>.left>.img_box img {
  width: 100%;
  height: auto;
  vertical-align: top;
  border-radius: 5px;
}

.sub_content .sub_box>.center .lecture_box {
  padding: 20px 20px;
  border: 1px solid #ebebeb;
}
.sub_content .sub_box>.center .lecture_detail th,
.sub_content .sub_box>.center .lecture_detail td {
  padding: 13.7px 3px;
  border-bottom: 0;
  font-size: 14px;
}
.sub_content .sub_box>.center .lecture_detail th {
    text-align: left;
    font-weight: 400;
    color: #737378;
}
.sub_content .sub_box>.center .lecture_detail td {
  color: #20222d;
}

.sub_content .sub_box>.center .lecture_detail .price th,
.sub_content .sub_box>.center .lecture_detail .price td {
  color: #ee3f3f;
}
.sub_content .sub_box>.center .lecture_detail .price td {
  font-size: 14px;
  letter-spacing: -0.9px;
}
.sub_content .sub_box>.center .lecture_detail .place {
  line-height: 1.6;
}
.sub_content .sub_box>.center .line { display: inline-block; width: 1px; height: 14px; background-color: #dfdfdf; vertical-align: middle;}

/* 버튼 */
.btn-enroll{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px; width:100%; background: #ee3f3f; border: solid 1px #e0e0e0; color: #fff; padding: 15px 0;  width: calc(100% / 2 - 2px); margin: 10px 0 0 0; display: inline-block;font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
.btn-cart{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px; width:100%; background: #fff; color: #464646; border: solid 1px #e0e0e0;  padding: 15px 0; width: calc(100% / 2 - 2px); margin: 10px 0 0 0; display: inline-block;font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
.btn-naeil_enroll{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px;width:100%; background: #ee3f3f; border: solid 1px #e0e0e0; color: #fff; padding: 15px 0;  margin: 10px 0 0 0; display: inline-block;font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}
.btn-cart_enroll{font-weight: 600; cursor: pointer; transition: all 0.3s ease-in-out; display:block; font-size: 16px;width:100%; background: #fff; border: solid 1px #e0e0e0; color: #464646; padding: 15px 0;  margin: 10px 0 0 0; display: inline-block;font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';}

.btn-enroll:hover { background:#4c61b5; color:#fff; }
.btn-cart:hover { border:1px solid #ee3f3f; color:#ee3f3f; }
.btn-naeil_enroll:hover { background:#4c61b5; color:#fff; }
.btn-cart_enroll:hover { border:1px solid #ee3f3f; color:#ee3f3f; }

/* 상세페이지 학습기간 */
#class_id{border: 1px solid #bdbdbd;background-color: #fff; color: #9e9e9e; width: 100%; height: 38px;padding: 5px; margin-right: 4px; display: block; float: left;font-size: 17px;  border-radius: 4px;padding: 0 15px;}
#course_type {font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum'; width: 280px; height: 32px; padding: 0 24px 0 10px; border: 1px solid #dfdfdf; border-radius: 4px; background: url(../img//icon_select.png) no-repeat right 10px center; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.lecture_select{
    font-family: 'NotoSansKR', 'NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';
    width: 280px;
    height: 32px;
    padding: 0 24px 0 10px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    background: url(../img//icon_select.png) no-repeat right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 상세페이지 하단 */
/* tbl */
.tbl thead th {font-size: 17px; color:#222;padding: 1.1em 0.5em;border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;background: #f7f7f7;font-weight:bold;line-height: 1.3;}
.tbl tbody th,.tbl tfoot th,.tbl td {padding: 1em;font-size:0.95em;border-right: 1px solid #e1e1e1;border-bottom: 1px solid #e1e1e1;text-align:center;background:#fff;}
.tbl caption {font-size: 20px; font-weight: bold; line-height: 1.6; text-align: left; color: #212121; margin-bottom: 10px;}
.tbl tr td:last-child {border-right: none; max-width: 100px; overflow: auto;}
.tbl tr td .txt_right {  padding: 0.5em; }
.tbl tr td .txt_right {  padding: 0.5em; text-align: left; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
.tbl tbody th{color:#222;background: #f7f7f7; }
.tbl tfoot th, .tbl  tfoot td {background-color: #626776;color: #fff;border-bottom: 1px solid #626776;border-right: 1px solid #525764;}
.tbl tfoot td {background-color: #787c89}
.tbl thead th:last-child,.tbl tfoot th:last-child,.tbl tbody th:last-child{border-right:none;}
.tbl tbody.tL td,.tbl td ul {text-align:left;}
.tbl th.line,.tbl td.line{border-right:1px solid #e1e1e1 !important;}
.tbl.tbl_sm {border: 1px solid  #e1e1e1; border-bottom: none; font-size: .852em}
.tbl.tbl_sm th{padding: .7em 0;}
.tbl.tbl_sm td{padding: .4em 0}
.tbl thead th .txt_sm{ color:#222; font-weight: 400;}

@media only screen and (max-width:768px){
    .ttl03 + .text_indent { padding-left:15px;}
    .tbl_white{ margin-bottom: 15px;}	
    .tbl thead th, .tbl th, .tbl td,
    .tbl_white thead th, .tbl_white th, .tbl_white td,
    .tbl_left thead th, .tbl_left th, .tbl_left td{ padding:0.65em 0.5em;}
    .sub_content .sub_box>.center .lecture_box { padding: 10px 10px;}
    .tab_con .th {    white-space: normal;word-break: break-word;}
}

@media only screen and (max-width:300px){
    .tbl tbody th, .tbl tfoot th, .tbl td{ padding:0em;}
    .tbl thead th, .tbl th, .tbl td,
    .tbl_white thead th, .tbl_white th, .tbl_white td,
    .tbl_left thead th, .tbl_left th, .tbl_left td{ padding:0em;}
}
@media (max-width:1200px){
    .sub_content .sub_box>.left>.img_box { width: 100%; height: 100%;}
    .sub_content{ width: 90%; margin: 20px auto;}
    .sub_content .sub_box>.left { float: left; width: 100%; padding-top: 0;}
    .sub_content .sub_box>.center{ float: left; width: 100%; margin-left: 0px; padding-top: ;}
}

.tab_bottom{ text-align: center;}
.tab_bottom > a{ min-width: 100px; height: 40px; padding: 7px 20px; border: 0; vertical-align: top; color: #ffffff; font-size: 17px; text-align: center; background: #333333; cursor: pointer; border-radius: 4px;}
.tab_bottom > a:hover { background:#4c61b5; color:#fff; }

.datebox{font-family: 'Freesentation','NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum'; width: 280px; height: 32px; padding: 0 24px 0 10px; border: 1px solid #dfdfdf; border-radius: 4px; appearance: none; font-size: 15px;}
.start_box input{
    background: url(../img/ncs/calendar.png) no-repeat right 10px center;
}
@media (max-width:500px){
    #course_type {width: 100%;}
    .datebox {width: 100%;}
    .lecture_select{width: 100%;}
}

/* lecture css */
.picker_img{ top: 10px; position: relative;  }
.line{ display: inline-block; width: 1px; height: 14px;vertical-align: middle;}
.dday{ color: #ee3f3f; letter-spacing: 0; font-weight: 700;}
.desc01 { /* 강조 */ background: url(../adm/images/dot_blue.gif) no-repeat left -1px; background-position: left; font-size: 11px; color: #999999; padding-left: 7px; margin-left: 5px; letter-spacing: -1px;}
.tab_menu{width: 100%; margin: 44px auto 0px; display: table; table-layout: fixed}
.tab_menu.fixed{position: fixed; top: 100px; left: 0}
.tab_menu.fixed + #tab_con1{margin-top: 200px}
.tab_menu li{height: 40px; line-height: 40px; border: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; border-left: 0; display: table-cell; position: relative; color: #777777; font-size: 14px; text-align: center; background-color: #f4f4f4; cursor: pointer}
.tab_menu li:first-child{border-left: 1px solid #d3d3d3;}
.tab_menu li:hover{background-color: #d3d3d3}
.tab_menu li.on{border-color: #e9e9e9; color: #1b2a4c; background-color: #ffffff}
.tab_menu li.on:before{content: ''; height: calc(100% + 1px); border-left: 1px solid #e9e9e9; position: absolute; left: -1px}
.tab_menu li a{color: #777777; display: block}
.tab_menu li a:hover,
.tab_menu li a:focus,
.tab_menu li a:visited{font-weight: 400}
.tab_menu li.on a{color: #1b2a4c}
.tab_con .tL{text-align: left;}
.tab_con .tL span{font-family: 'Pretendard', 'NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum' !important;font-size: 0.95em !important;}
.box{padding-bottom: 5px;}
.box_span{ line-height: 26px; padding: 0px 5px; margin-right: 5px; border-radius: 14px;border: 1px solid rgb(189, 189, 189) !important; background-color: rgb(255, 255, 255); font-size: 12px; color: rgb(117, 117, 117); margin-left: 3px;  cursor: pointer;}
.box_span_pk{ font-weight: 700; padding: 0px 8px !important; vertical-align: bottom; border-radius: 14px; border: 1px solid rgb(189, 189, 189) !important; background-color: rgb(255, 255, 255) !important; font-size: 10px !important; color: rgb(117, 117, 117) !important; margin-left: 8px; cursor: pointer;}
.arrow_box {display: none;  position: absolute; z-index: 9999; line-height: 20px; padding: 10px; border-radius: 8px;  box-shadow: 0 3px 9px rgba(0, 0, 0, .5);  background: #fff; }
.box:hover + p.arrow_box {display: block;}
/*  */
.me_search{background-color:#edf3ff}
.me_search .me_text{color: rgb(33, 33, 33); padding: 130px 0px; font-size: 20px; font-weight: 700; text-align: center;}
.me_class{}
.me_class .me_text{color: rgb(33, 33, 33); padding: 60px 100px 100px 100px; font-size: 20px; font-weight: 700; text-align: center; border-bottom: 1px solid #d3d3d3;}
.me_order_list .me_text{color: rgb(33, 33, 33); padding: 100px 0px; font-size: 20px; font-weight: 700; text-align: center;}
.book_txt {
    width: 150px;
    text-align: center;
    padding-top: 5px;
    font-size: 0.95em;
}

[type="radio"] {
    margin: 0px;
    vertical-align: sub;
    appearance: none;
    border: max(2px, 0.1em) solid gray;
    border-radius: 50%;
    width: 1.25em;
    height: 1.25em;
    transition: border 0.1s ease-in-out;
}

[type="radio"]:checked {
    border: 0.4em solid #ee3f3f;
}

[type="radio"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) dotted #ee3f3f;
}

[type="radio"]:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
    cursor: pointer;
}

[type="radio"]:disabled {
    background-color: lightgray;
    box-shadow: none;
    opacity: 0.7;
    cursor: not-allowed;
}

[type="radio"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}

/* 25-03-29 이후 css*/
.coupon_tab {
    cursor:pointer;
    border: 2px solid #0a6540;
    padding: 1px 8px;
    color:black;
}

.image-container {
  display: grid;
  gap: 16px; 
  justify-content: center; 
  width: 80%;
  margin: 0 auto; 
}

.image-container img {
  width: 100%;
  height: auto;
}

.con_course{
    border: 1px solid lightgray;
}

.con_course img{
    border-bottom: 1px solid lightgray;
}
.con_course div{
    padding: 8% 0%;
    text-align: center;
    width: 220px;         
    white-space: nowrap;  
    overflow: hidden;     
    text-overflow: ellipsis; 
}

.con_course a{
    color: blue;
}
.group_pay {
    width: 50%;
    cursor: pointer;
}

.group_input {
    font-family: 'NotoSansKR', 'NanumBarunGothic', '나눔바른고딕', 'Open Sans', 'dotum';
    width: 280px;
    height: 32px;
    padding: 0 24px 0 10px;
    border: 1px solid #dfdfdf;
    border-radius: 4px;
    appearance: none;
    font-size: 15px;
}

.group_tab{text-align: right;}
.group_tab > a{ 
    min-width: 100px;
    padding: 6px 14px;
    border: 0;
    vertical-align: top;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    background: #5e5e5e;
    cursor: pointer;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 5px;
}

.group_submit{ 
    min-width: 100px;
    height: 34px;
    padding: 6px 14px;
    border: 0;
    vertical-align: top;
    color: #ffffff;
    font-size: 15px;
    text-align: center;
    background: #5e5e5e;
    cursor: pointer;
    border-radius: 4px;
}


.group_file{
    width: 40%;
    transition: width 1s;
    border: 1px solid #dbdbdb;
}
/* ================================
   Clean Theme Overrides (append)
   구조/마크업 변경 없음, 시각 스타일만 개선
   ================================ */
/* 전역 톤 */
#container{ background: transparent; }

/* 공통 카드 느낌 */
.lecture_wrap .lecture_list{
  background: #ffffff;
  border: 1px solid #d3d3d3;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(17,24,39,.06);
  padding: 10px 8px;
}
.lecture_wrap .lecture_list .info .tit_end{
  color: #6b7280;
}
.lecture_wrap .lecture_list .info .price_end strong{ color: #6b7280; }

.kdgt{ background: #3b82f6 !important; color:#fff !important; }
.voucher{ background: #10b981 !important; color:#fff !important; }
.sanup{ background: #f59e0b !important; color:#111 !important; }
.me,.ncs_best{ background:#fee2e2 !important; color: #ef4444 !important; }

/* 컨텐츠 래퍼/타이틀 */
#content .wrapper h1,
#content .wrapper2 h1{ color: #111827; }
.sub_content .vw-header{ border-color: #111827; }
.sub_content .sub_box>.center .lecture_box{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(17,24,39,.06);
}

/* 테이블 */
.tbl{ border-collapse: separate; border-spacing: 0; }
.tbl caption{ color: #111827; }
.tbl thead th{
  background:#f3f4f6;
  color: #111827;
  border-color: #e5e7eb;
}
.tbl tbody th, .tbl td{
  background: #ffffff;
  border-color: #e5e7eb;
  color: #111827;
}
.tbl tfoot th, .tbl tfoot td{
  background: #1e40af;
  color:#fff;
  border-right-color: #1e40af;
  border-bottom-color: #1e40af;
}
/* 상세 좌측/우측 박스 */
.left_text{
  background:#f9fafb;
  border:1px solid #e5e7eb;
  border-radius: 10px;
}
.sub_content .sub_box>.right{
  background:#f9fafb;
  border-radius: 10px;
}

/* 탭(상세 하단) */
.tab_menu li{
  background:#f3f4f6;
  color: #6b7280;
  border:1px solid #e5e7eb;
  transition: all .2s ease;
}
.tab_menu li a{ color: inherit; }

/* 링크 & 텍스트 컬러 정리 */
a{ color: #1d4ed8; }
a:hover{ color: #1e40af; }

/* 쿠폰/그룹 버튼 */
.coupon_tab{
  border-color: #1d4ed8;
  color: #111827;
  border-radius: 6px;
}
.group_tab > a,
.group_submit{
  background:#4b5563;
  border-radius: 8px;
}
.group_tab > a:hover,
.group_submit:hover{
  background:#374151;
}

/* 이미지 그리드/코스 박스 */
.image-container{ gap: 20px; }
.con_course{ border:1px solid #e5e7eb; border-radius: 10px; overflow:hidden; background:#fff; box-shadow: 0 2px 8px rgba(17,24,39,.06); }
.con_course img{ border-bottom:1px solid #e5e7eb; }
.con_course div{ padding: 10% 6%; }
.con_course a{ color: #1d4ed8; }
.con_course a:hover{ color: #1e40af; }

/* rightMenu */
.rightMenu .cal_btn img {
    width: 90px;
}
@media (min-width: 1600px){
    .rightMenu {
        position: absolute;
        left: 50%;
        margin-left: 680px;
        top: 570px;
    }
    .rightMenu.fixed {
        position: fixed;
        top: 20px;
    }
}
@media (max-width: 1599px){
    .rightMenu {
        position: fixed;
        right: 2%;
        bottom: 2%;
    }
    .rightMenu .cal_btn {
        border-radius: 999px;
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.7);
    }
}
@media (max-width: 768px){
    .rightMenu .cal_btn img {
        width: 14vw;
        border-radius: 999px;
        box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.7);
    }
}

@media (max-width: 768px){
  .lecture_wrap .lecture_list{ padding: 20px 10px;}
  .sub_content .sub_box>.center .lecture_box{ padding: 14px; }
}

/* ===== Zoom Calendar Modal ===== */
.zoomcal-modal {position: fixed; inset: 0; display: none; z-index: 9999;}
.zoomcal-modal.show {display: block;}
.zoomcal-backdrop {position: absolute; inset: 0; background: rgba(0,0,0,.6);}

.zoomcal-dialog{
  position:absolute; inset:0; margin:auto; width:900px; height:550px;
  background:#121214; color:#eaeaea; border:1px solid #2a2a2a; border-radius:16px;
  box-shadow:0 10px 40px rgba(0,0,0,.5); padding:0; overflow:hidden; font-family:inherit;
}

.zoomcal-close{
  position:absolute; top:8px; right:8px; width:35px; height:35px; color:#ddd;
  font-size:22px; line-height:34px; cursor:pointer;
}

/* 레이아웃 기본: 좌우 2열 */
.zoomcal{
  display:grid;
  grid-template-columns: 400px 1fr;
  height:100%;
  min-height: 0; /* 내부 스크롤 안정화 */
}

.zoomcal-left{
  border-right:1px solid #25252a; padding:22px;
}

.zoomcal-right{
  padding:22px;

  /* 우측 영역 내부 스크롤 안정화(데스크톱/모바일 공통) */
  display:flex;
  flex-direction:column;
  min-height:0;
}

.zoomcal-right-title{
  font-size:18px; margin-bottom:10px; color:#f2f2f2;
  display:flex; align-items:center; gap:8px;
  flex:0 0 auto; /* 제목 높이 고정 */
}

/* 우측 일정 리스트(스크롤 전용 영역) */
.zoomcal-list{
  list-style:none; margin:0; padding:0;

  /* flex로 남은 공간을 차지하고 스크롤 생성 */
  flex:1 1 auto;
  min-height:0;

  overflow:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

/* WebKit 스크롤바 */
.zoomcal-list::-webkit-scrollbar{ width:8px; }
.zoomcal-list::-webkit-scrollbar-thumb{
  background:#3a3a3f; border-radius:8px;
  border:2px solid transparent; background-clip:content-box;
}
.zoomcal-list::-webkit-scrollbar-thumb:hover{
  background:#4a4a50; background-clip:content-box;
}
.zoomcal-list::-webkit-scrollbar-track{ background:transparent; }

/* Firefox 스크롤바 */
.zoomcal-list{ scrollbar-width:thin; scrollbar-color:#3a3a3f transparent; }

/* 캘린더(좌측) */
.zoomcal-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.zoomcal-header h2{font-size:22px; font-weight:700;}
.zoomcal-header .ym{letter-spacing:.5px;}
.zoomcal-nav{width:36px; height:36px; border-radius:10px; border:1px solid #2a2a2a; background:#1b1b1f; color:#ddd; cursor:pointer;}

.zoomcal-grid{user-select:none;}
.zoomcal-grid .w{
  display:inline-grid; place-items:center;
  width:calc((100% - 0px)/7); color:#999; font-size:14px; margin-bottom:6px;
}
.zoomcal-grid .dates{
  display:grid; grid-template-columns: repeat(7,1fr); grid-auto-rows:52px; gap:6px;
}

.zoomcal-day{
  position:relative; border:1px solid #2a2a2a; border-radius:12px; background:#16161a;
  display:grid; grid-template-rows:auto 1fr; padding:8px; cursor:pointer; transition:transform .06s ease;
}
.zoomcal-day.selected {background-color:#575757;}
.zoomcal-day:hover{transform: translateY(-1px); background-color:#575757;}
.zoomcal-day.muted{opacity:.45;}
.zoomcal-day .num{font-size:14px; color:#e6e6e6;}
.zoomcal-day.today .num{display: inline-block; background:#e53b5c; color:#fff; border-radius:999px; padding:2px 5px;}

.zoomcal-dot{position:absolute; right:8px; bottom:8px; width:6px; height:6px; border-radius:999px; background:#e53b5c;}
.zoomcal-badge{position:absolute; right:6px; top:6px; font-size:11px; color:#f08fb3;}

/* 우측 항목 카드 */
.zoomcal-item{
  position: relative;border:1px solid #2a2a2a; background:#16161a; border-radius:10px; padding:15px; margin-bottom:10px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; cursor:pointer;margin-right: 5px;
}
.zoomcal-item .title{font-weight:700; font-size:15px; margin-bottom:15px;}
.zoomcal-item .meta{font-size:14px; color:#bdbdbd;margin-left: 20px;margin-right: 5px;}
.zoomcal-item .time{font-size:14px; color:#bdbdbd;margin-left: 18px;}

.zoomcal-item.past{ cursor:auto; color:#999; text-decoration:line-through;}
.zoomcal-item.past .meta{ color:#999; }

.zoomcal-item svg {
    position: absolute;
    bottom: 15px;
    width: 15px;
    display: inline-block;
    margin-right: 3px;
}

/* 비어있을 때 */
.zoomcal-empty{
  color:#9a9a9a; border:1px dashed #2a2a2a; border-radius:14px; padding:24px; text-align:center;
}

/* ===== Responsive: 900px 이하에서 좌우 → 위아래 ===== */
@media (max-width: 920px){
  .zoomcal-dialog{
    width: 80%;
    height: 60vh;
    overflow: hidden;
    border-radius:12px;
  }

  .zoomcal{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height:100%;
    min-height:0;
  }

  .zoomcal-left{
    border-right:0;
    border-bottom:1px solid #25252a;
    padding:16px;
  }

  .zoomcal-right{
    padding:16px;
    display:flex;
    flex-direction:column;
    min-height:0;                  /* 리스트가 스크롤 되도록 */
  }

  .zoomcal-right-title{ font-size:18px; margin-bottom:10px; flex:0 0 auto; }

  .zoomcal-list{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 헤더/버튼, 타일 크기 살짝 축소 */
  .zoomcal-header {display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
  .zoomcal-header h2{ font-size:18px; }
  .zoomcal-nav{ width:32px; height:32px;margin: 0px 50px;}
  .zoomcal-grid .dates{ grid-auto-rows:44px; gap:4px; }
  .zoomcal-grid .w{ width:calc((100% - 0px)/7); font-size:13px; }
  .zoomcal-day{ padding:6px; border-radius:10px;}
  .zoomcal-day.today .num{display: inline-block; width: auto; background:none; color:#e53b5c; border-radius: 0; padding: 0;font-weight: bold;}
  .zoomcal-close{ top:6px; right:6px; }
}

/* 아주 작은 화면(선택) */
@media (max-width: 480px){
  .zoomcal-dialog{width: 95%; height: 80vh; }
  .zoomcal-left {width: 100%;}
  .zoomcal-right {width: 100%;}
  .zoomcal-header h2{ font-size:17px; }
  .zoomcal-grid .dates{ grid-auto-rows:40px; }
  .zoomcal-day .num {font-size: 12px;}
  .zoomcal-item .title{width: 200px;font-size:14px;}
  .zoomcal-item .time {font-size: 13px;}
  .zoomcal-item .meta{font-size:13px;}
  .zoomcal-item .teacher{font-size:13px;}
  .zoomcal-item svg {
        position: absolute;
        bottom: 18px;
    }
}