@charset "UTF-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css');

/* main banner [ 23.03.29 ] */
.slides_container {position: relative;}

.bn-slider {position: relative;width: 100%;height: 360px;background: var(--primary01);overflow: hidden;transition: .3s ease;z-index: 0;}
.bn-slider-wrap .slide_cont {width: 100%;height: 100%;}
.bn-slider-wrap .slide_cont a {display: block;position: relative;;width: 1170px;height: 360px;margin: 0 auto;}
.bn-slider-wrap figure {display: block;position: absolute;right: 0;top: 0;margin: 0;max-width: 704px;height: 360px;transform: scale(1);transition: ease .3s;}

.bn-slider-wrap img {display: block;width: 100%;height: 100%;object-fit: cover;}
.bn-slider-wrap .bn_slide_left {display: flex;flex-direction: column;justify-content: flex-start;max-width: 800px;height: 100%;margin: 0;padding: 50px 0;text-align: left;line-height: 1.4;z-index: 10;}
.bn-slider-wrap .bn_slide_left .bn_slide_flex_top {margin-bottom: 44px;}
.bn-slider-wrap .bn_slide_left .bn_state {margin-bottom: 6px;font-size: 15px;font-weight: 600;opacity: 0;animation: bn-text-fadeOut 2s 250ms both;}

/* .bn-slider-wrap .bn_slide_left .bn_state {margin-bottom: .6rem;font-size: 1.5rem;font-weight: 600;opacity: 0;animation: bn-text-fadeDown 2s 250ms both;} */
.bn-slider-wrap .bn_slide_left h4 {margin-bottom: 26px;font-size: 40px;font-weight: 800;color: #fff;line-height: 1.3;height: 104px;opacity: 0;animation: bn-text-fadeOut 2s 250ms both;}
.bn-slider-wrap .bn_slide_left .bn_sub {font-size: 17px;color: #fff;font-weight: 300;word-break: keep-all;opacity: 0;animation: bn-text-fadeOut 2s 250ms both;}
.bn-slider .bn_slide_flex_bottom {position: absolute;left: 50%;bottom: 50px;width: 1170px !important;height: initial;margin-left: -590px;display: flex;justify-content: flex-start;align-items: center;}
.bn-slider .slider-count {background: rgba(255, 255, 255, .25);width: 66px !important;height: inherit;margin: 0 12px 0 0;padding: 6px 0;border-radius: 5px;text-align: center;}
.bn-slider .slider-count p {font-size: 14px;color: #fff;}
.bn-slider .bn_controller {background: rgba(255, 255, 255, .25);width: auto !important;height: inherit !important;padding: 6px 12px;border-radius: 5px;margin-left: 10px;margin: 0;}
.bn-slider .bn_controller button {background: transparent;font-size: 13px;padding: 3.5px 4px;}
.bn-slider .bn_controller button i {color: #fff;}

.bn-slider .bn-slider-wrap .slide_cont.slick-active figure {animation: bn-img-scale 9s 600ms both;}
.bn-slider .bn-slider-wrap .slide_cont.slick-active .bn_slide_left span.bn_state {animation: bn-text-fadeIn 2s 250ms both;opacity: 1;}
.bn-slider .bn-slider-wrap .slide_cont.slick-active .bn_slide_left h4 {animation: bn-text-fadeIn 2s 250ms both;opacity: 1;}
.bn-slider .bn-slider-wrap .slide_cont.slick-active .bn_slide_left p.bn_sub {animation: bn-text-fadeIn 2s 250ms both;opacity: 1;}


/* main */
.k_box_wrap {display: flex;margin-top: 48px;}

/* custom - K 디지털 기초역량 훈련 */
.horizontal_list_custom {display: flex;margin-right: 48px;}
.horizontal_list_custom .first_custom {position: relative;}
.horizontal_list_custom .first_custom {width: 275px;margin-right: 20px;background: #f6f6f6;border-radius: 5px;overflow: hidden;}
.horizontal_list_custom .first_custom:last-child {margin-right: 0;}
.horizontal_list_custom .img_box {position: relative;border: 1px solid #e0e1e4;}
.horizontal_list_custom .img_box a {display: block;position: relative;}
.horizontal_list_custom .img_box a img {display: block;width: 100%;height: auto;}

.horizontal_list_custom p.list_subject {font-size: 18px;text-align: left;padding: 10px 25px 0;margin: 0;font-weight: bold;color: #000;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;}
.horizontal_list_custom p.list_period {font-size: 16px;text-align: left;padding: 0 25px;margin: 10px 0;font-weight: bold;color: #555;}
.horizontal_list_custom p.list_price {font-size: 16px;color: #f00;text-align: left;font-weight: bold;padding: 0 25px;margin: 10px 0;}

.horizontal_list_custom .first_custom .deadline_mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, .8);}
.horizontal_list_custom .first_custom .deadline_mask p {position: absolute;top:40%;left: 50%;width: 160px;margin-left: -80px;padding: 18px 0;border-radius: .5rem;color: #fff;text-align: center;font-size: 16px;border: 1px solid #aaa;}
.horizontal_list_custom .first_custom .deadline_mask p span {color: #fff;font-weight: bold;}
.horizontal_list_custom .first_custom .deadline_mask i {font-size: 20px;margin-bottom: 8px;color: #fff;}

.k_info_cont {flex: 2;}
.k_info_cont .tag_cont {display: flex;margin-bottom: 4px;}
.k_info_cont .tag_cont span.tag_label {padding: 4px 12px;font-size: 12px;color: #fff;margin-right: 4px;border-radius: 3px;}
.k_info_cont .tag_cont span.progress_label {background: #f90;}
.k_info_cont .tag_cont span.sub_label {background: #0080ff;}
.k_info_cont h4 {font-size: 32px;font-weight: bold;color: #000;line-height: 1.2;margin-bottom: 24px;}

.k_info_cont .info_box {margin-bottom: 8px;}
.k_info_cont .info_box  div {display: flex;align-items: center;padding: 12px 16px;background: #f6f6f6;border-radius: 5px;margin-bottom: 8px;}
.k_info_cont .info_box  div:last-child {margin-bottom: 0;}
.k_info_cont .info_box  div p {width: 100px;color: #000;font-size: 14px;font-weight: bold;}
.k_info_cont .info_box  div span {color: #000;font-size: 14px;}
.k_info_cont .info_box  div span b {color: #0080ff;font-weight: bold;}

.k_info_cont .k_link {display: block;color: #fff;background: #0080ff;width: 100%;padding: 12px 0;border-radius: 5px;text-align: center;font-weight: 600;font-size: 16px;}
.k_info_cont .k_link:hover {background: #086acb;}


/* Modal */
.modal_box {display : none;width: 100%;height: 100%;flex-direction: column;justify-content: center;align-items: center;position: fixed;top: 0;left: 0;z-index: 9999;}
.modal_box a {display: flex;justify-content: center;align-items: center;width: 100%;max-width: 500px;height: auto;background: #000;cursor: auto;}
.modal_box img {max-width: 610px;}
.modal_box.notice_modal_02 img {max-width: inherit;}
.modal_box .modal_close {display: flex;justify-content: space-between;align-items: stretch;width: 100%;max-width: 610px;height: 42px;}
.modal_box .modal_close button {width: 50%;background: #fff;color: #000;font-size: 16px;font-weight: bold;border: 1px solid #aaa;}
.modal_box .modal_close button.modal_week_hide {border-right: none;}

.modal_box.notice_modal_03 .modal_bg_wrap {background: #fff;max-width: 450px;width: 100%;border-radius: 20px;overflow: hidden;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);;}
.modal_box.notice_modal_03 figure {margin: 0;padding: 0;width:100%;height: 120px;}
.modal_box.notice_modal_03 figure img {display: block;width: 100%;height: 100%;object-fit: cover;}
.modal_box.notice_modal_03 .modal_txt {padding: 44px 20px;line-height: 1.2;color: #000;text-align: center;}
.modal_box.notice_modal_03 .modal_txt h4 {font-size: 28px;font-weight: 800;margin-bottom: 24px;}

.modal_box.notice_modal_03 .modal_txt p {font-size: 17px;font-weight: 400;word-break: keep-all;max-width: 334px;width: 100%;margin: 0 auto;line-height: 1.4;}
.modal_box.notice_modal_03 .modal_txt p b {color: #000;font-weight: 700;text-decoration: underline;text-underline-offset: 4px;}

.modal_box.notice_modal_03 .chk_wrap {border-radius: 5px;background: #fafafa;border: 1px solid #d5d5d5;max-width: 320px;width: 100%;margin: 32px auto 0;padding: 12px;}
.modal_box.notice_modal_03 .chk_wrap span {display: block;font-size: 15px;}

.modal_box.notice_modal_03 .modal_close {display: flex;flex-direction: column;align-items: center;width: 100%;height: auto;padding: 0 30px 14px;}
.modal_box.notice_modal_03 .modal_close button {display: block;width: 100%;font-size: 16px;font-weight: 700;color: #000;border-radius: 5px;border: none;padding: 16px 0;font-family: 'pretendard';}
.modal_box.notice_modal_03 .modal_close button:first-child {margin-bottom: 6px;background: #0053e9;color: #fff;}

.modal_dim {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(17, 17, 17, .6);backdrop-filter: blur(5px);z-index: 999;}




/* custom - cloud_wrap */
.cloud_cont {width: 100%;padding: 60px 0;}
.cloud_cont .cloud_inner {position: relative;width: 1170px;margin: 0 auto;}

.cloud_cont h3 {font-size: 35px;color: #000;text-align: center;line-height: 1.4;font-weight: 700;margin-bottom: 15px;}
.cloud_cont .cloud_inner > p {font-size: 16px;text-align: center;}

.cloud_course_wrap {overflow: hidden;margin-top: 48px;}
.cloud_cont ul.course_gallery_custom {margin-bottom: 48px;}
.cloud_cont ul.course_gallery_custom li {width: 240px;height: auto;background: #f6f6f6;border-radius: 5px;transition: all .3s;transform: translateY(0);overflow: hidden;box-shadow: 0px 25px 15px -15px rgb(0 0 0 / 20%);}
.cloud_cont ul.course_gallery_custom li:hover {transition: all .3s;box-shadow: 0 14px 5px -10px rgb(0 0 0 / 20%);}
.cloud_cont ul.course_gallery_custom li .cimg {position: relative;width: 100%;border: none;}
.cloud_cont ul.course_gallery_custom li .cimg img {display: block;width: 100%;}
.cloud_cont ul.course_gallery_custom li .cimg .card_ceiling {position: absolute;top: 10px;left: 10px;padding: 6px 8px;background: #ec3131;color: #fff;font-size: 13px;line-height: 1.2;font-weight: 600;border-radius: 3px;box-shadow: 0px 5px 3px -3px rgb(0 0 0 / 60%);}
.cloud_cont ul.course_gallery_custom li .ccont {padding: 0;background: #fafafa;}
.cloud_cont ul.course_gallery_custom li .ccont .clabel {display: block;padding: 14px 12px 0;}
.cloud_cont ul.course_gallery_custom li .ccont .clabel .label {margin-left: 0;font-size: 12px;padding: 0 6px;border-radius: 3px;letter-spacing: 0;background: #165071;color: #fff;}
.cloud_cont ul.course_gallery_custom li .ccont .clabel .label.blue {background: #428bca;}
.cloud_cont ul.course_gallery_custom li .ccont .ctitle {padding: 0 12px 24px;}
.cloud_cont ul.course_gallery_custom li .ccont .ctitle p {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height: 48px;font-size: 18px;color: #000;line-height: 1.4;font-weight: 400;}
.cloud_cont ul.course_gallery_custom li .ccont .cprice {font-size: 18px;text-align: left;padding: 14px 12px;border-top: 1px dashed #aaa;margin: 0;line-height: 1.2;}

.cloud_cont .swiper-button-prev {left: -22px;width: 44px;height: 44px;border-radius: 50px;background: #fff;box-shadow: 1px 1px 4px 0px rgb(0 0 0 / 40%);}
.cloud_cont .swiper-button-next {right: -22px;width: 44px;height: 44px;border-radius: 50px;background: #fff;box-shadow: 1px 1px 4px 0px rgb(0 0 0 / 40%);}
.cloud_cont .swiper-button-prev:after,
.cloud_cont .swiper-button-next:after {display: none;}
.cloud_cont .swiper-button-prev i,
.cloud_cont .swiper-button-next i {font-size: 16px;color: #888;}
.cloud_cont .swiper-button-prev:hover i,
.cloud_cont .swiper-button-next:hover i {color: #000;}

.cloud_cont a.more_btn {display: block;width: 250px;margin: 0 auto;padding: 1.2rem 2.4rem;background: #f1f1f1;color: #888;border-radius: .5rem;font-size: 14px;font-weight: 600;text-align: center;}
.cloud_cont a.more_btn:hover {color: #000;}
.cloud_cont a.more_btn i {margin-left: 8px;}

/* quick */
.quick {position: fixed;right: 20px;top: 20%;background: #0080ff;border-radius: 5px;z-index: 999;font-family: 'Pretendard', '돋음', sans-serif;width: 86px;}
.quick .quick_header {padding: 10px 0;text-align: center;}
.quick .quick_header i,
.quick .quick_header h4 {font-size: 13px;color: #fff;font-weight: 700;}
.quick .quick_header i {font-size: 18px;margin-bottom: 2px;}
.quick ul {background: #fff;box-shadow: 2px 2px 6px rgba(0, 0, 0, .25);border-radius: 5px;}
.quick ul li {position: relative;text-align: center;}
.quick ul li:before {content: '';position: absolute;left: 50%;bottom: 0;width: 50px;height: 1px;background: #d5d5d5;margin-left: -25px;}
.quick ul li.quick_kakao:before {display: none;}
.quick ul li a {display: block;height: 100%;padding: 20px 0;}
.quick ul li a i {display: block;color: #768492;font-size: 26px;margin-bottom: 4px;}
.quick ul li a img {display: block;width: 32px;margin: 0 auto 4px;}
.quick ul li a span {color: #455362;font-size: 14px;font-weight: 500;}
.quick ul li a:hover i,
.quick ul li a:hover span {color: #0080ff;}
.quick ul li:last-child {background: #f1f1f1;padding: 26px 0;color: #000;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;}
.quick ul li:last-child h5 {font-size: 14px;font-weight: 500;margin-bottom: 8px;}
.quick ul li:last-child p {font-size: 17px;font-weight: 900;}

@media screen and (max-width: 1170px) {
    .cloud_cont .swiper-button-prev {left: 0;}
    .cloud_cont .swiper-button-next {right: 0;}
}



/*=====  Animation  =====*/
@keyframes bn-img-scale {
    0% {transform: scale(1);}
    100% {transform: scale(1.1);}
}

@keyframes bn-text-fadeup {
    0% {opacity: 0;transform: translateY(30px);}
    100% {opacity: 1;transform: translateY(0px);}
}

@keyframes bn-text-fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes bn-text-fadeOut {
    0% {opacity: 1;}
    100% {opacity: 0;}
}

@keyframes course {
    0% {transform: translateY(0px);}
    100% {transform: translateY(-10px);}
}