@charset "utf-8";
/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Common *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.icon_pack {position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: hidden; opacity: 0; visibility: hidden;}
.flex_wrap {display: flex;}
.anchor {position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Section *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.section {padding: 100px 0; box-sizing: border-box;}
.section.pb-0 {padding-bottom: 0;}
.section.pt-0 {padding-top: 0;}
.section.last {padding-bottom: 150px;}
.section.bg{background-color: #f7f7f7;}

[class|="row"] + [class|="row"] {margin-top: 60px;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * Title *
    
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* head */
.head.mb {margin-bottom: 60px;}
.head.flex_wrap {gap: 20px; align-items: center;}
.head.flex_wrap .main_tit {margin-right: auto;}
/* main tit */
.main_tit.mb {margin-bottom: 60px;}
.main_tit.center{text-align: center;}
.main_tit h3 {font-weight: 700; font-size: 48px; line-height: 1.2em;}
/* sub tit */
.sub_tit h3 {}
/* row tit */
.row_tit.mb {margin-bottom: 40px;}
.row_tit {border-bottom: 1px solid #444; padding-bottom: 10px; box-sizing: border-box;}
.row_tit h5 {font-weight: 600; font-size: 28px; line-height: 1.35em;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * box_wrap *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.box_wrap.type01 {display: flex; flex-wrap: wrap; --gap:30px; gap: var(--gap);}
.box_wrap.type01 a {
    display: block;
    height: 100%;
}
.box_wrap.type01 .box {--i: 4; width: calc(100% / var(--i) - var(--gap) * (var(--i) - 1) / var(--i)); background-color: #f7f7f7; border-radius: 20px; padding: 30px; box-sizing: border-box; transition: 0.25s; transition-property: background-color;  box-sizing: border-box;}
/* info */
.box_wrap.type01 .box .info {display: flex; flex-wrap: wrap; font-size: 16px; line-height: 1.625em; color: #999; margin-bottom: 25px;}
.box_wrap.type01 .box .info span + span {--p: 20px; padding-left: var(--p); position: relative;}
.box_wrap.type01 .box .info span + span::before {content: ''; position: absolute; top: 50%; left: calc(var(--p) / 2); transform: translate(-50%, -50%); width: 1px; height: 10px; background-color: #ccc;}
/* txt */
.box_wrap.type01 .box .txt_box .tit {display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 22px; line-height: 1.45em;}
.box_wrap.type01 .box .txt_box p {font-size: 18px; line-height: 1.55em; color: #444; margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* rate */
.box_wrap.type01 .box .rate {display: flex; justify-content: flex-end; margin-top: 35px;}
.box_wrap.type01 .box .rate i {display: block; width: 16px; height: 15px; background: url(/img/star.png) no-repeat center center / contain; filter: brightness(0) saturate(100%) invert(92%) sepia(0%) saturate(230%) hue-rotate(170deg) brightness(91%) contrast(88%);}
/* rate color */
.box_wrap.type01 .box .rate i.full {filter: brightness(0) saturate(100%) invert(63%) sepia(63%) saturate(2905%) hue-rotate(143deg) brightness(96%) contrast(101%);}
/* box (hover) */
.box_wrap.type01.hover .box:hover {background-color: var(--main-color); color: #fff;}
.box_wrap.type01.hover .box:hover .info {color: #fff;}
.box_wrap.type01.hover .box:hover .info span + span::before {background-color: #5b7fb1;}
.box_wrap.type01.hover .box:hover .txt_box p {color: #fff;}
.box_wrap.type01.hover .box:hover .rate i {filter: brightness(0) saturate(100%) invert(48%) sepia(17%) saturate(1111%) hue-rotate(175deg) brightness(96%) contrast(90%);}
.box_wrap.type01.hover .box:hover .rate i.full {filter: invert(1);}

@media all and (max-width: 1200px) {
    .box_wrap.type01 .box {--i: 3;}
}

@media all and (max-width: 1024px) {
    .box_wrap.type01 .box {--i: 2;}
}

@media all and (max-width: 767px) {
    .box_wrap.type01 .box {--i: 1;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * btn *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* plus btn */
.plus_btn {display: flex; align-items: center; gap: 10px;}
.plus_btn span {font-weight: 600; font-size: 18px; line-height: 1.55em; color: #444;}
.plus_btn i {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: var(--main-color);}
.plus_btn i svg {width: 14px; height: 14px; fill: #fff; stroke: #fff;}
/* basic */
.btn.basic {display: inline-block; padding: 0.72em 1.66em; border-radius: 100px;}
/* color */
.btn.point-color {background-color: var(--point-color) !important; color: #fff !important;}
.btn.main-color {background-color: var(--main-color) !important; color: #fff !important;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * tab_btns *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* type01 */
.tab_btns.type01.mb {margin-bottom: 60px;}
.tab_btns.type01 {display: flex; align-items: center; gap: 10px;}
.tab_btns.type01 .btn {flex-shrink: 0; font-size: 18px; line-height: 1.55em; color: #444; border: 1px solid #e1e1e1; padding: 0.85em 1.66em; box-sizing: border-box; border-radius: 120px; transition: 0.25s;}
/* type01 (on, hover) */
.tab_btns.type01 .btn.on,
.tab_btns.type01 .btn:hover {background-color: #215170; color: #fff;}
/* type02 */
.tab_btns.type02 {display: flex; border-bottom: 1px solid #e1e1e1;}
.tab_btns.type02 .btn {--i: 3; width: calc(100% / var(--i)); font-weight: 600; font-size: 18px; line-height: 1.55em; color: #666; text-align: center; padding: 20px 0; box-sizing: border-box; position: relative;}
.tab_btns.type02 .btn::before {content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background-color: var(--main-color); transition: 0.25s;}
/* type02 (on, hover) */
.tab_btns.type02 .btn.on::before,
.tab_btns.type02 .btn:hover::before {width: 100%;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * swiper btn *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
/* type01 */
.swiper_btns.type01 {display: flex; align-items: center; --gap: 20px; gap: var(--gap);}
.swiper_btns.type01 .btn {width: 13px; height: 19px; cursor: pointer;}
.swiper_btns.type01 .btn + .btn {position: relative;}
.swiper_btns.type01 .btn + .btn::before {content: ''; position: absolute; top: 50%; left: calc(var(--gap) / -2); transform: translate(-50%, -50%); width: 1px; height: 14px; background-color: #888;}
.swiper_btns.type01 .btn svg {width: 100%; height: 100%; stroke: #888; transition: 0.25s;}
/* type01 hover */
.swiper_btns.type01 .btn svg:hover {stroke: var(--main-color);}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * lecture_wrap *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
.lecture_wrap {--gap: 30px; gap: var(--gap);}
.lecture_wrap .lecture {--i: 3; width: calc(100% / var(--i) - var(--gap) * (var(--i) - 1) / var(--i)); max-width: 450px; cursor: pointer;}
/* img */
.lecture_wrap .lecture .img_box {aspect-ratio: 1/0.55; border-radius: 20px; overflow: hidden; background-color: #eee;}
.lecture_wrap .lecture .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
/* txt */
.lecture_wrap .lecture .txt_box {margin-top: 20px;}
.lecture_wrap .lecture .txt_box .name {font-size: 18px; line-height: 1.55em; color: var(--point-color);}
.lecture_wrap .lecture .txt_box .name.orange {color: #ed6214;}
.lecture_wrap .lecture .txt_box .name.blue {color: #215170;}
.lecture_wrap .lecture .txt_box .tit {font-weight: 600; font-size: 20px; line-height: 1.7em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* swiper */
.swiper-initialized .lecture_wrap {gap: 0;}

@media all and (max-width: 1024px) {
    .lecture_wrap .lecture {--i: 2;}
}

@media all and (max-width: 767px) {
    .lecture_wrap .lecture {--i: 1;}
}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * table *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
table.type01 {width: 100%;}
table.type01 thead {background-color: #f7f7f7;}
table.type01 thead tr th {font-weight: 600; font-size: 18px; line-height: 1.55em; color: #444; height: 60px;}
table.type01 tbody tr {border-top: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;}
table.type01 tbody tr > * {padding: 40px 10px; box-sizing: border-box;}
table.type01 tbody tr > *:first-child {padding-left: 0;}
table.type01 tbody tr > *:last-child {padding-right: 0;}
table.type01 .full {width: 100%;}
table.type01 .tit {width: 100%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; font-size: 20px; line-height: 1.6em;}
table.type01 .date {font-size: 16px; line-height: 1.625em; color: #999; font-feature-settings: "tnum";}


/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * input *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
input.type01 {height: 60px; border-radius: 8px; outline: none; border: none; padding: 0 30px; box-sizing: border-box; font-size: 18px; line-height: 1.8em;}
input.type01::placeholder {color: #999;}

/*ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

 * list *

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ*/
ul.bar {list-style: '- '; padding-left: 0.75em; box-sizing: border-box;}