@charset "utf-8";
/* 수강신청 전용 스타일 */
.education{
    position:relative;
    --input-height:36px;
}
.education #tabs {
    margin:10px 0; 
    margin-bottom:20px;
    display:flex;
    max-width:1024px;
    width:100%;
    padding:0;
    position:relative;
}

.education #tabs h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.education #tabs ul {zoom:1; text-align:center;justify-content:normal;}
.education #tabs ul:after {display:block;visibility:hidden;clear:both;content:""}
.education #tabs li.edu-tab-item {
    flex:0 0 auto;
    width:auto;
    min-width: 120px;
    text-align: center;
    padding:0;
    box-sizing: border-box;
}
.education #tabs a {display:block;line-height:40px;padding:0 20px;border-radius:0px;border:1px solid #ddd; background:#fff; text-align:center;}
.education #tabs a:focus, .education .tabs a:hover, .education .tabs a:active {text-decoration:none;background:#d2d6dc; border:1px solid #d2d6dc;}
.education #tabs #bo_cate_on {z-index:2;background:#333;color:#fff;font-weight:500; border:1px solid #333; }
.education #tabs .swiper-button-disabled{
    display:none;
}
.education #tabs .tabs-container{
    width:100%;
    overflow:hidden;
}
.education #tabs .swiper-button-prev, .education #tabs .swiper-container-rtl .swiper-button-prev {
    left: -20px;
    right: auto;
}

.education #tabs .swiper-button-next, .education #tabs .swiper-container-rtl .swiper-button-prev {
    right: -20px;
    left: auto;
}

.education #bo_sch{
    display:flex;
    max-width:800px;
    flex-direction: row;
    margin:0 auto 2rem auto;
}
.education #bo_sch select, .education #bo_sch input[type=text]{
    height:var(--input-height);
    border:1px solid #ddd;
}
.education #bo_sch .btn-submit input{
    background-color:#242424;
    color:#ffffff;
    height:var(--input-height);
    padding:0 20px;
    border:1px solid #242424;
}
.education #bo_sch .btn-submit input:hover{
    background-color:#018d81;
    border:1px solid #018d81;
}


.prg_app_item {
    --gap: 50px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}

.prg_app_item .edu-item-box{
    height:initial;
    aspect-ratio:1/1.25;
}

.prg_app_item .card_wrap {
    display: flex;
    background-color: #fafbff;    
    border: 1px solid #d6dee3;
    border-radius: 11px;
    width: 100%;
    transition: all 0.3s;
    overflow: hidden;
}

.prg_app_item .card_wrap.stat_no_box {
    border: 1px solid #f8f8f8;
    background-color: #f8f8f8;
}

.prg_app_item .card_wrap.stat_no_box .prg_picbox {
    background-color: #f2f2f2;
}

.prg_app_item .card_wrap.stat_no_box .heading:before {
    display: none;
}

.prg_app_item .card_wrap.stat_no_box .data > .stat_info {
    background-color: #f8f8f8 !important;
}

.prg_app_item .card_wrap:last-child {
    margin-right: -20px;
}

.prg_app_item .card_wrap:not(.stat_no_box):hover {
    border-color: #82b6e7;
    box-shadow: 0 0 10px rgba(85, 146, 214, 0.67);
    transition: all 0.3s;
}

.prg_app_item .card_wrap .card_box {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
    overflow: hidden;
    padding: 2em 1.5em 0 1.5em;
}

.prg_app_item .card_wrap .card_box > a {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: 1.5em;
    width: 100%;
}

.prg_app_item .card_wrap .card_box > a:hover > span:last-child {
    text-decoration: underline;
}

.prg_app_item .card_wrap .card_box > .data {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: 1.5em;
    position: relative;
    width: 100%;
    justify-content: space-between;
    padding: 0 1.5em 1.5em 1.5em;
}

.prg_app_item .card_wrap .card_box > .data:before {
    content: '';
    height: 1px;
    background-color: #dfdfdf;
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    top: -1.5em;
}

.prg_app_item .card_wrap .card_box > .data > div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    font-size: 0.93em;
    font-weight: 400;
}

.prg_app_item .card_wrap .prg_picbox {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    background-color: #dedede;
    border-bottom: 1px solid #ddd;
}

.prg_app_item .card_wrap .prg_picbox img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    transition: all 0.5s;
    display: block;
    opacity: 0.85;
}

.prg_app_item .card_wrap:hover .prg_picbox img {
    width: 120%;
    transition: all 0.5s;
    opacity: 1;
}

.prg_app_item .card_wrap .card_box > a > .data {
    padding: 35px 0 0 0;
}

.prg_app_item .card_wrap .card_box .stat_d_day {
    background-color: #2e62b0;
    display: inline-block;
    color: #fff;
    padding: 0 1em;
    font-size: 1.18em;
    border-radius: 0.75em;
}

.prg_app_item .card_wrap .card_box > a > span.heading {
    margin-bottom: 0.75em;
    font-weight: 500;
    font-size: 1.5em;
    line-height: 1.3;
    text-overflow: ellipsis;
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    letter-spacing: -0.05em;
    height:58px;
}

.prg_app_item .card_wrap .card_box > a > span.heading:before {
    content: '#';
}

.prg_app_item .card_wrap .card_box > a > span {
    display: block;
    font-size: 1.18em;
    font-weight: 400;
}

.prg_app_item .card_wrap .card_box > .data > .stat_info {
    display: block;
    width: 52px;
    height: 52px;
    background-color: #2a92a4;
    border-radius: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    flex: 0 0 52px;
}

.prg_app_item .card_wrap.stat_end_box .card_box > .data > .stat_info {
    background-color: #9d9d9d;
}

.prg_app_item .card_wrap .card_box .category {
    font-size: 1.18em;
    color: #5392f2;
    font-weight: 500;
}

.prg_app_item .card_wrap .card_box > .data > .stat_info .material-symbols-outlined {
    font-size: 2.25em;
}

#edu_detail_content * {
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
#edu_detail_content div{width:initial !important; float:none !important;}
.cnt_box table{table-layout:auto !important; width:100% !important; float:none !important;}

@media (max-width:700px){
    .education #bo_sch{
        flex-direction: column;
    }
    .education #bo_sch form{
        display:flex;
        flex-direction: column;
        gap:4px;
    }
    .education #bo_sch select, .education #bo_sch input[type=text] ,  .education #bo_sch .btn-submit > input{
        width:100%;
        max-width:initial;
    }
    .education #tabs li.edu-tab-item {
        flex:0 0 auto;
        width:auto;
        min-width:initial;
        text-align: center;
        box-sizing: border-box;
    }
}

@media (max-width:580px){
    .prg_app_item .edu-item-box{
        aspect-ratio:2/1;
    }
}