@charset "utf-8";


/* main popup 메인 팝업존 */
.main_popup {position: fixed; top: 0; left: 0; width: 100%; height: 100%;  z-index: 9999;}
.main_popup .main_popup_wrap {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1200px; z-index: 1; margin: 0 auto;}
.main_popup .main_popup_bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(34, 33, 39, .8); backdrop-filter: blur(4px);}
.main_popup .main_popup_top {display: flex; justify-content: space-between; align-items: center; padding: 20px 0;}
.main_popup .main_popup_top > h3 {font-size: 24px; font-weight: 600; color: #fff; font-family:var(--tit_font);}
.main_popup_wrap .ctrl_box {display: inline-block;}
.main_popup_wrap .ctrl_box .ctrl {display: inline-block; width: 40px; height: 40px; background: transparent no-repeat 50% 50%; background-color: #fff; background-size: auto 14px; border: 1px solid #eee; border-radius: 50%; margin-left: 5px;}
.main_popup_wrap .ctrl_box .ctrl.ctrl_prev {left: -60px; background-image: url('/images/common/icon_prev.png');}
.main_popup_wrap .ctrl_box .ctrl.ctrl_next {right: -60px; background-image: url('/images/common/icon_next.png');}
.main_popup_wrap .ctrl_box .ctrl.swiper-button-disabled {opacity: .5;}
.main_popup_slide {overflow: hidden; opacity: 0; transition: opacity 0.3s ease-in-out;}
.main_popup_slide.visible {opacity: 1;}
.main_popup_slide .swiper-slide {position: relative; display: block;}
.main_popup_slide .swiper-slide a {position: relative; display: block; height: 0; border-radius: 8px; padding-bottom: 130%; overflow: hidden;}
.main_popup_slide .swiper-slide a > img {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;}
.main_popup_bottom {display: flex; justify-content: space-between; align-items: flex-start; margin-top: 20px;}
.main_popup_bottom .checkbox span {color: #fff;}
.main_popup_bottom .modal_btn {display: block;}
.main_popup_bottom .modal_btn button {position: relative; width: 60px; height: 60px; background-color: #fff; border-radius: 50%;}
.main_popup_bottom .modal_btn button:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #fff; opacity: .2; transform: scale(1.3); animation: ping 1.3s ease-in-out infinite both; z-index: -1;}
.main_popup_bottom .modal_btn button > i {font-size: 30px; vertical-align: middle;}

@keyframes ping {
     0% {
          -webkit-transform: scale(1);
          transform: scale(1);
          opacity: 0.6;
     }

     100% {
          -webkit-transform: scale(1.5);
          transform: scale(1.5);
          opacity: 0;
     }
}

/* section common */
.section {position: relative; padding: 80px 0;}
.section .inner:after {content: ''; clear: both; display: block;}

/* .section .inner {display: flex; flex-direction: column; justify-content: center;} */
.section_title {position: relative; display: flex; flex-wrap: wrap; margin-bottom: 60px; font-family: var(--tit_font);}
.section_title strong {display: inline-block; width: 130px; font-size: 18px; font-weight: 700; color: var(--main-color);}
.section_title h1 {font-size: 46px; font-weight: 700; line-height: 1.3; width: calc(100% - 130px); color:#111;}
.section_title h2 {font-size: 36px; font-weight: 700; color:#111;}

/* more button */
.more_btn span {position: relative; display: inline-block; font-size: 18px; font-weight: 600; color: #111; vertical-align: middle; padding-right: 33px;}
.more_btn span:before,
.more_btn span:after {content: ''; position: absolute; top: 7px; right: 0; width: 13px; height: 13px; background: no-repeat 50% 50%; background-image: url('/images/common/icon_more.svg'); background-size: auto 13px; transition: all .2s;}
.more_btn span:after {top: 15px; opacity: 0;}
.more_btn:hover span:before {top: 0; opacity: 0;}
.more_btn:hover span:after {top: 7px; opacity: 1;}
.more_btn:hover span {color: var(--main-color);}

.arw_btn {text-align: center; font-size: 1rem; font-weight: 700;}
.arw_btn .arw {width: 40px; height: 40px; border: 1px solid var(--gray-200); border-radius: 50%; background: no-repeat 50% 50%; background-image: url('/images/common/icon_arw.svg'); background-size: auto 12px; background-color: #fff; margin: 0 auto;}
.arw_btn span {display: inline-block; margin-top: 20px;}

/* slide common */
.slide_ctrl {position: relative; display: inline-block; vertical-align: middle;}
.slide_ctrl button {position: static; top: auto; left: auto; display: inline-block; width: 40px; height: 40px; border: 1px solid var(--gray-200); border-radius: 50%; background: #fff no-repeat 50% 50%; background-size: auto 14px; margin-left: 10px; margin-top: 0; transition: all .2s;}
.slide_ctrl button.swiper-button-next:after,
.slide_ctrl button.swiper-button-prev:after {content: none;}
.slide_ctrl button.swiper-button-prev {background-image: url('/images/common/icon_prev.png');}
.slide_ctrl button.swiper-button-next {background-image: url('/images/common/icon_next.png');}

/* 게시글 없을 때 */
.nodata {text-align: center; border: 1px solid var(--gray-200); padding: 40px 20px; border-radius: 20px;}
.nodata > i {font-size: 60px; color: #999;}
.nodata > p {font-size: 1rem; color: var(--gray-300); font-weight: 400; margin-top: 10px;}

/* course section1 */
.course:before {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 1400px; height: 1px; background-color: var(--gray-200);}
.course .tab {position: relative; display: flex; gap: 10px 10px; flex-wrap: wrap; font-size: 0; overflow: hidden; margin-bottom: 60px;}
.course .tab .tab_item {position: relative; display: inline-block; font-size: 17px; font-weight: 400; padding: 12px 20px; border: 1px solid var(--gray-200); border-radius: 25px;}
.course .tab .tab_item span {position: relative; color: var(--gray-300); transition: color 250ms ease-in-out; z-index: 10;}
.course .tab .tab_item span:before {content: ''; display: inline-block; width: 18px; height: 18px; background: no-repeat 50% 50%; background-size: auto 18px; margin-right: 10px; vertical-align: middle;}
.course .tab .tab_item[data-tab="tab1"] span:before {background-image: url('/images/page/main/tab_icon01.png');}
.course .tab .tab_item[data-tab="tab2"] span:before {background-image: url('/images/page/main/tab_icon02.png');}
.course .tab .tab_item[data-tab="tab3"] span:before {background-image: url('/images/page/main/tab_icon03.png');}
.course .tab .tab_item[data-tab="tab4"] span:before {background-image: url('/images/page/main/tab_icon04.png');}
.course .tab .tab_item[data-tab="tab5"] span:before {background-image: url('/images/page/main/tab_icon05.png');}
.course .tab .tab_item.active {background-color: var(--main-color); border-color: var(--main-color);}
.course .tab .tab_item.active span {color: #fff; font-weight: 700;}
.course .tab .tab_item.active[data-tab="tab1"] span:before {background-image: url('/images/page/main/tab_icon01_on.png');}
.course .tab .tab_item.active[data-tab="tab2"] span:before {background-image: url('/images/page/main/tab_icon02_on.png');}
.course .tab .tab_item.active[data-tab="tab3"] span:before {background-image: url('/images/page/main/tab_icon03_on.png');}
.course .tab .tab_item.active[data-tab="tab4"] span:before {background-image: url('/images/page/main/tab_icon04_on.png');}
.course .tab .tab_item.active[data-tab="tab5"] span:before {background-image: url('/images/page/main/tab_icon05_on.png');}

.course .tab_content {position: relative;}
.course .more_btn {position: absolute; bottom: 0; right: 0;}

.course .course_list {overflow: hidden !important;}
.course .course_list .swiper-slide a {position: relative; display: block; border-radius: 16px; background-color: #F5F7FB; padding: 60px 30px; transition: all .25s;}
.course .course_list .swiper-slide a:after {content: ''; position: absolute; top: -50px; right: -10px; width: 212px; height: 210px; background: url('/images/page/main/logo_bg.png') no-repeat 50% 50%; opacity: 0; visibility: hidden;}
.course .course_list .swiper-slide .cate {color: var(--sub-color); font-size: 1rem; font-weight: 700;}
.course .course_list .swiper-slide .tit {font-size: 22px; font-weight: 700; color: #000; margin-top: 23px;}
.course .course_list .swiper-slide .txt {font-size: 1rem; font-weight: 400; color: var(--gray-300); line-height: 1.5; margin-top: 23px; height: 2.8em;}
.course .course_list .swiper-slide .info {margin-top: 30px;}
.course .course_list .swiper-slide .info dl + dl {margin-top: 10px;}
.course .course_list .swiper-slide .info dl {font-size: 0;}
.course .course_list .swiper-slide .info dl * {display: inline-block; font-size: 1rem; vertical-align: middle; line-height: 1;}
.course .course_list .swiper-slide .info dl dt {width: 36px; color: var(--gray-300);}
.course .course_list .swiper-slide .info dl dt > i {font-size: 18px;}
.course .course_list .swiper-slide .info dl dd {width: calc(100% - 36px);}
.course .course_list .swiper-slide .tag {position: absolute; right: 0; bottom: 0; background-color: #fff; border-radius: 30px 0 0 0; padding: 10px 0 0 10px;}
.course .course_list .swiper-slide .tag:before,
.course .course_list .swiper-slide .tag:after {content: ''; position: absolute; width: 16px; height: 16px; background: no-repeat 50% 50%; background-image: url('/images/common/icon_mask.svg'); background-size: 16px 16px;}
.course .course_list .swiper-slide .tag:before {bottom: 0; left: -16px; transform: rotate(-90deg);}
.course .course_list .swiper-slide .tag:after {right: 0; top: -16px; transform: rotate(-90deg);}
.course .course_list .swiper-slide .tag .state {display: inline-block; font-size: 1rem; color: #fff; font-weight: 500; padding: 8px 24px; border-radius: 20px; height: 40px;}
.course .course_list .swiper-slide .tag .state.state1 {background-color: var(--main-color);}
.course .course_list .swiper-slide .tag .state.state2 {background-color: var(--sub-color);}
.course .course_list .swiper-slide .tag .state.state3 {background-color: var(--gray-300);}
.course .course_list .slide_ctrl {float: right; margin-top: 60px;}

.course .course_list .swiper-slide:hover a {background-color: var(--main-color);}
.course .course_list .swiper-slide:hover a:after {opacity: .1; visibility: visible;}
.course .course_list .swiper-slide:hover .cate,
.course .course_list .swiper-slide:hover .tit {color: #fff;}
.course .course_list .swiper-slide:hover .txt {color: rgba(255, 255, 255, .6);}
.course .course_list .swiper-slide:hover .info dl dt > i {color: rgba(255, 255, 255, .6);}
.course .course_list .swiper-slide:hover .info dl dd {color: #fff;}

/* program section2 */
.program .section_title .more_btn {position: absolute; right: 0; bottom: 0;}
.program .program_list {overflow: hidden !important;}
.program .program_list .swiper-slide {position: relative; display: block;}
.program .program_list .swiper-slide .thumb {position: relative; height: 0; border-radius: 16px; border: 1px solid var(--gray-200); padding-bottom: 126%; overflow: hidden;}
.program .program_list .swiper-slide .thumb > img {position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; max-height: none; min-width: 100%; object-fit: cover;}
.program .program_list .swiper-slide .thumb .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(var(--main-color-rgb), .9); backdrop-filter: blur(5px); transition: all .25s; opacity: 0; visibility: hidden;}
.program .program_list .swiper-slide .thumb .bg .arw_btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.program .program_list .swiper-slide:hover .thumb .bg {opacity: 1; visibility: visible;}
.program .program_list .swiper-slide:hover .thumb .bg .arw_btn {color: #fff;}
.program .program_list .swiper-slide:hover .thumb .bg .arw_btn .arw {border-color: #fff; background-color: rgba(255, 255, 255, .2); background-image: url('/images/common/icon_arw_wh.svg');}
.program .program_list .swiper-slide .badge{margin-top: 23px;}
.program .program_list .swiper-slide .tit {font-size: 22px; font-weight: 700; color: #000; margin-top:5px;}
.program .program_list .swiper-slide .date {margin-top: 23px;}
.program .program_list .swiper-slide .date i {width: 36px; color: var(--gray-300); font-size: 18px; vertical-align: middle;}
.program .program_list .swiper-slide .date span {width: calc(100% - 36px); font-size: 1rem; color: var(--gray-300); vertical-align: middle;}
.program .program_list .slide_ctrl {float: right; margin-top: 60px;}


/* board section3 */
.board {background-color: var(--gray-100); padding-bottom: 160px;}
.board .inner {display: flex; justify-content: space-between; gap: 0 80px; flex-wrap: wrap;}
.board .box {width: calc(50% - 40px);}
.board .section_title {margin-bottom: 30px;}
.board .section_title .more_btn {position: absolute; right: 0; bottom: 0;}
.board .board_list li + li {margin-top: 20px;}
.board .board_list li a {position: relative; display: block; background-color: #fff; border-radius: 16px; padding: 24px 60px 24px 24px; height: 110px; transition: all .25s;}
.board .board_list li .info {margin-left: -10px;}
.board .board_list li .info span {position: relative; display: inline-block; font-size: 1rem; vertical-align: middle; color: var(--gray-300); padding: 0 10px;}
.board .board_list li .info span:after {content: ''; position: absolute; top: 50%; right: 0; margin-top: -6px; width: 1px; height: 12px; background-color: var(--gray-200);}
.board .board_list li .info span:last-child:after {content: none;}
.board .board_list li .info .cate {font-weight: 700;}
.board .board_list li .info .cate.cate1 {color: var(--main-color);}
.board .board_list li .info .cate.cate2 {color: var(--sub-color);}
.board .board_list li .tit {font-size: 18px; font-weight: 700; color: #111; margin-top: 10px;}
.board .board_list li .tag {position: absolute; right: 0; bottom: 0; background-color: var(--gray-100); border-radius: 30px 0 0 0; padding: 10px 0 0 10px;}
.board .board_list li .tag:before,
.board .board_list li .tag:after {content: ''; position: absolute; width: 16px; height: 16px; background: no-repeat 50% 50%; background-image: url('/images/common/icon_mask_gray.svg'); background-size: 16px 16px;}
.board .board_list li .tag:before {bottom: 0; left: -16px; transform: rotate(-90deg);}
.board .board_list li .tag:after {right: 0; top: -16px; transform: rotate(-90deg);}

.board .board_list li:hover a {background-color: var(--main-color);}
.board .box.news .board_list li:hover a {background-color: var(--sub-color);}
.board .board_list li:hover .info span {color: rgba(255, 255, 255, .6);}
.board .board_list li:hover .info span:after {background-color: rgba(255, 255, 255, .4);}
.board .board_list li:hover .info .cate {color: #fff;}
.board .board_list li:hover .tit {color: #fff;}
.board .board_list li:hover .tag .arw_btn .arw {background-image: url('/images/common/icon_arw_wh.svg'); background-color: var(--main-color); border-color: var(--main-color);}
.board .box.news .board_list li:hover .tag .arw_btn .arw {background-color: var(--sub-color); border-color: var(--sub-color);}


/* drag cursor */
.cursor {position: fixed; top: 0; left: 0; z-index: 10; pointer-events: none; mix-blend-mode: hard-light;}
.cursor .cont {display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: rgba(1, 79, 223, .8); width: 50px; height: 50px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: all .2s;}
.cursor .cont .arw {display: block; margin-bottom: 5px;}
.cursor .cont .arw i {display: inline-block; width: 10px; height: 10px; vertical-align: middle; background: no-repeat 50% 50%; background-size: auto 10px;}
.cursor .cont .arw i.prev {background-image: url('/images/common/icon_prev_wh.png');}
.cursor .cont .arw i.next {background-image: url('/images/common/icon_next_wh.png');}
.cursor .cont span {display: block; color: #fff; font-size:16px; font-weight:700; letter-spacing:-0.02em; line-height:1;}
.cursor.on .cont {width: 100px; height: 100px; opacity: 1;}



/* **************************************** *
 * 1600px
 * **************************************** */
@media (max-width: 1600px) {

}


/* **************************************** *
 * 1440px
 * **************************************** */
@media (max-width: 1440px) {
     /* section common */
     .section_title h1 {font-size: 42px;}
     .section_title h2 {font-size: 32px;}
}

/* **************************************** *
 * 1280px
 * **************************************** */
@media (max-width: 1280px) {
     /* main popup 메인 팝업존 */
     .main_popup .main_popup_wrap {width: 100%; padding: 0 4%;}

     /* section common */
     .section_title h1 {font-size: 38px;}
     .section_title h2 {font-size: 28px;}

     /* course section1 */
     .course:before {width: 100%;}
     .course .course_list .swiper-slide .tit {font-size: 18px;}

     /* program section2 */
     .program .program_list .swiper-slide .tit {font-size: 18px;}

     /* board section3 */
     .board .inner {gap: 0 40px;}
     .board .box {width: calc(50% - 20px);}

}

/* **************************************** *
 * 1024px
 * **************************************** */
@media (max-width: 1024px) {
     /* section common */
     .section_title {margin-bottom: 40px;}
     .section_title strong {font-size: 16px;}
     .section_title h1 {font-size: 34px;}
     .section_title h2 {font-size: 24px;}

     /* more button */
     .more_btn span {font-size: 16px; padding-right: 23px;}

     /* course section1 */
     .course .tab {margin-bottom: 40px;}
     .course .tab .tab_item {font-size: 1rem; max-width: calc((100% - 10px)/2);}
     .course .tab .tab_item span{display:block; width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
     .course .tab .tab_item span:before{margin-right:5px;}

     .course .course_list .swiper-slide a {padding: 40px 24px;}
}

/* **************************************** *
 * 768px
 * **************************************** */
@media (max-width: 768px) {
     /* main popup 메인 팝업존 */
     .main_popup_bottom .modal_btn button {width: 50px; height: 50px;}

     /* section common */
     .section {padding: 60px 0;}
     .section_title h1 {font-size: 30px;}

     /* course section1 */
     .course .course_list {clear: both;}
     .course .course_list .slide_ctrl {margin-top: 30px;}

     /* program section2 */
     .program .program_list .slide_ctrl {margin-top: 30px;}

     /* board section3 */
     .board {padding-bottom: 120px;}
     .board .box {width: 100%;}
     .board .box.news {margin-top: 60px;}


}

/* **************************************** *
 * 640px
 * **************************************** */
@media (max-width: 640px) {

}

/* **************************************** *
 * 576px
 * **************************************** */
@media (max-width: 576px) {
     /* section common */
     .section_title {display: block;}
     .section_title strong {width: 100%; margin-bottom: 10px;}
     .section_title h1 {width: 100%;}

     /* course section1 */
     .course .tab {margin-bottom: 20px;}
     .course .tab .tab_item {padding: 10px 15px;}

}

/* **************************************** *
 * 420px
 * **************************************** */
@media (max-width: 425px) {
     /* section common */
     .section_title h1 {font-size: 26px;}
     .section_title h2 {font-size: 20px;}
}

/* **************************************** *
 * 1280px
 * **************************************** */
@media (max-width: 360px) {

}