@charset "utf-8";
/* 메인 비주얼 */
.main-visual{position:relative;width:100%;overflow:hidden; margin-bottom:20px;}
.main-visual .swiper-wrapper .swiper-slide{overflow:hidden;position:relative; /*height:189px;*/ aspect-ratio:820/190;}
.main-visual .swiper-slide .image{position:absolute;top:0;left:50%;width:100%;max-width:1920px;height:100%;background:var(--color-white,#fff) no-repeat center/cover;transform:translateX(-50%); border-radius:12px;}
.main-visual .swiper-slide a{display:block;width:100%;height:100%;line-height:0;position:absolute;top:0;left:0}
.main-visual .swiper-slide .pic{position:relative;width:100vw;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);-moz-transform:scale(1.05);-o-transform:scale(1.05);transform:scale(1.05);-webkit-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);-moz-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);-ms-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);-o-transition:all 1.5s cubic-bezier(.58,.36,.84,.87);transition:all 1.5s cubic-bezier(.58,.36,.84,.87)}
.main-visual .swiper-slide img{position:relative;top:0;left:50%;display:block;width:100%;max-width:120%;-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);-ms-transform:translate(-50%,0);-o-transform:translate(-50%,0);transform:translate(-50%,0)}
.main-visual .swiper-slide-active .pic{-webkit-transform:scale(1.0);-ms-transform:scale(1.0);-moz-transform:scale(1.0);-o-transform:scale(1.0);transform:scale(1.0)}
.main-visual :is(.swiper-button-next,.swiper-button-prev){margin-top:-49px;width:58px;height:98px;width:140px;height:140px;text-align:center}
.main-visual .swiper-button-prev{right:auto;left:50%;margin-left:-780px}
.main-visual .swiper-button-next{left:50%;margin-left:640px}
.main-visual :is(.swiper-button-next:after,.swiper-button-prev:after){content:'';border:3px solid #c8c8c8;width:55px;height:55px;transform:rotate(-45deg)}
.main-visual .swiper-button-prev:after{border-right:none;border-bottom:none;margin-left:39px}
.main-visual .swiper-button-next:after{border-left:none;border-top:none;margin-right:39px}
.main-visual :is(.swiper-button-next:hover:after,.swiper-button-prev:hover:after){border-color:var(--color-black,#000)}
.visual-text-box{position:absolute;top:0;left:50%;width:100%;max-width:1180px;transform:translateX(-50%);height:100%;display:flex;flex-direction:column;justify-content:center}
.visual-text-box .text-box{font-size:40px;font-weight:700;color:var(--color-dark-gray,#333);letter-spacing:-.05em;line-height:1.7em}
.visual-text-box .text-box span{color:#2e49eb}
.main-visual .swiper-pagination{bottom:40px;font-size:0}
.main-visual .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:12px; right:20px; left:auto; width:auto;}
.main-visual .swiper-pagination .swiper-pagination-bullet{width:6px;height:6px;background:#ccc;border-radius:3px; background:#000;}
.main-visual .swiper-pagination .swiper-pagination-bullet-active{width:20px; background:#111}
.main-visual .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 3px}
@media only screen and (max-width:1500px) {
    .main-visual .swiper-slide .pic{width:100%}
    .main-visual .swiper-slide img{width:165%;max-width:200%}
    .main-visual .swiper-button-prev{left:0;margin-left:0}
    .main-visual .swiper-button-next{left:auto;right:0;margin-left:0}
    .main-visual .swiper-button-next,.main-visual .swiper-button-prev{width:70px;height:70px}
    .main-visual .swiper-button-next:after,.main-visual .swiper-button-prev:after{width:35px}
    .main-visual .swiper-button-next:after{margin-right:0}
    .main-visual .swiper-button-prev:after{margin-left:0}
    .visual-text-box .text-box{margin-left:3.7vw}
}
@media only screen and (max-width:1200px) {
    .visual-text-box .text-box{font-size:3.3vw;margin-left:5vw;letter-spacing:-.07em}
    .main-visual :is(.swiper-button-prev,.swiper-button-next):after{font-size:35px}
}
@media only screen and (max-width:768px) {
    .main-visual .swiper-wrapper .swiper-slide {aspect-ratio:320/220;}
    .visual-text-box{justify-content:flex-start;align-items:center}
    .visual-text-box .text-box{font-size:6.25vw;margin-top:11vw;margin-left:0;line-height:1.5em;letter-spacing:-.05em;text-align:center}
    .main-visual :is(.swiper-button-prev,.swiper-button-next){width:24px;display:none}
    .main-visual .swiper-button-prev{left:20px}
    .main-visual .swiper-button-next{right:20px}
    .main-visual .swiper-button-prev:after,.main-visual .swiper-button-next:after{background-size:100% auto}
}
.thumb{position:relative;/*width:33%;*/height:272px}
.thumb img{position:absolute;top:0;left:0;transform:translate(50,50);width:100%;height:100%;object-fit:cover;margin:auto}


/* -------- 공지사항 -------- */
.main-board .main-notice{display:inline-block;width:380px;vertical-align:top}
@media only screen and (max-width:768px) {
    .main-board .main-notice{width:100%}
}
/* -------- 수강후기 -------- */
.main-board .main-review{display:inline-block;margin-left:20px;width:calc(100% - 400px);vertical-align:top}
.main-board .main-review-list{overflow:hidden;position:relative;border-radius:8px;border:1px solid var(--color-border,#eee)}
.main-board .main-review-list .main-review-box{padding:34px 30px}
.main-board .main-review-list .main-review-box .subject{overflow:hidden;display:block;margin-bottom:14px;font-weight:500;font-size:20px;line-height:1;color:var(--color-dark-gray,#333);white-space:nowrap;text-overflow:ellipsis}
.main-board .main-review-list .main-review-box .conts{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;margin-bottom:20px;width:100%;height:72px;font-weight:300;font-size:16px;line-height:24px;color:var(--color-dark-gray,#333)}
.main-board .main-review-list .main-review-box .name{display:block;font-size:16px;color:#999;text-align:right}
.main-board .main-review-list .swiper-pagination{position:absolute;bottom:34px;left:30px;width:auto;font-weight:400;font-size:16px;color:var(--color-dark-gray,#333);text-align:left}
.main-board .main-review-list .swiper-pagination .swiper-pagination-current{color:var(--color-primary,#0148d4)}
@media only screen and (max-width:768px) {
    .main-board .main-review{margin-top:40px;margin-left:0;width:100%}
    .main-board .main-review-list .main-review-box{padding:22px 20px}
    .main-board .main-review-list .swiper-pagination{bottom:22px;left:20px}
}
@media only screen and (max-width:640px) {
    .main-board .main-review{margin-top:30px}
    .main-board .main-review-list .main-review-box .subject{margin-bottom:10px;font-size:16px}
    .main-board .main-review-list .main-review-box .conts{margin-bottom:15px;height:54px;font-size:14px;line-height:18px}
    .main-board .main-review-list .main-review-box .name{font-size:13px}
    .main-board .main-review-list .swiper-pagination{font-size:13px}
}
/*Popup*/
.main-popup-wrap.dim{position:fixed;top:0;left:0;bottom:0;right:0;z-index:110;width:100%;height:100%;background:rgba(0,0,0,.8)}
.main-popup{position:absolute;z-index:120;background-color:var(--color-white,#fff);line-height:20px}
.main-popup .popup-bottom{padding:3px 6px;background-color:var(--color-black,#000)}
.main-popup .popup-bottom .popup-bottom-inner{display:flex;justify-content:space-between}
.main-popup .popup-bottom label{color:var(--color-white,#fff);font-weight:700}
.main-popup .popup-bottom input[type="checkbox"]{margin:0}
.main-popup .popup-bottom .btn-close{color:var(--color-gray,#aaa)}
.main-popup.center{position:fixed;top:50%!important;left:50%!important;transform:translate(-50%,-50%)}
.main-popup .ck-content .image{margin:0}
.top-popup{position:relative;overflow-y:hidden}
.top-popup .popup-control{position:absolute;top:20%;right:10px;display:flex;align-items:center}
.top-popup .popup-control label{color:var(--color-dark-gray,#333)}
.top-popup .popup-control .close{position:relative;display:block;width:20px;height:20px;margin-left:7px;font-size:0}
.top-popup .popup-control .close:before,.top-popup .popup-control .close:after{content:'';position:absolute;top:50%;left:0;z-index:1;width:100%;height:1px;border-radius:5px;background:var(--color-dark-gray,#333)}
.top-popup .popup-control .close:before{transform:rotate(45deg)}
.top-popup .popup-control .close:after{transform:rotate(-45deg)}
@media only screen and (max-width:767px) {
    .top-popup .popup-control label{display:none}
    .top-popup .popup-control .close{width:30px;height:30px}
    .top-popup .popup-control .close:before,.top-popup .popup-control .close:after{height:2px}
}
.main-popup-wrap.dim {z-index:10000;}

.main-wrap {position:relative; display:flex; justify-content:center; gap:20px; padding:20px 30px 40px; background:#F7F7FB;}
.main-area {width:66.129%; max-width:820px;}
.side-area {width:32.258%; max-width:400px;}
/*메인 블로그 인기글*/
.main-blog-list {display:grid; grid-template-columns:repeat(auto-fill,minmax(222px,1fr)); gap:32px 8px;}
.main-blog-list .blog-post .image-box {display:block; aspect-ratio:21/11; border-radius:8px; background:#111; overflow:hidden;}
.main-blog-list .blog-post .image-box img {width:100%; height:100%; vertical-align:top; object-fit:cover;}
.main-blog-list .blog-post .info {display:flex; flex-wrap:wrap; gap:4px; padding-top:8px;}
.main-blog-list .blog-post .subject {width:100%; font-size:15px; color:#111; word-break:break-all;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:44px;line-height:1.4667em}
.main-blog-list .blog-post span{line-height:18px; font-size:13px;color:#767676;}
.main-blog-list .blog-post .date {margin-left:auto;}
@media only screen and (max-width:1024px) {
    .main-wrap {flex-direction:column; padding-left:20px; padding-right:20px; gap:0;}
    .main-area {width:100%; max-width:100%;}
    .side-area {width:100%; max-width:100%;}
}
@media only screen and (max-width:767px) {
    .main-wrap {padding-left:20px; padding-right:20px; padding-bottom:calc(200px + 42.5vw)}
    .main-wrap .main-board.latest {margin-top:0;}
    /*메인 블로그 인기글*/
    .main-blog {position:absolute; bottom:40px; left:0; width:calc(100% - 40px); margin:0 20px;}
    .main-blog-list {gap:0;}
    .main-blog-list .blog-post {padding-right:8px;}
    .main-blog-list .blog-post .image-box {aspect-ratio:226/153;}
    .main-blog-list .blog-post .info {padding-top:4px; gap:0;}
    .main-blog-list .slick-slide {width:65vw;}
}