/* sub02 공통 */
.sub02 .sub_sec2:has(.board_area) {
    background-image: url(../img/sub02/sub02_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.sub02 .board_area {
    padding: 90px 0 150px;
}
.sub02 .tabs {
    display: flex;
    gap: 0 1px;
}
.sub02 .tabs .tab {
    background-color: var(--gray_border);
}
.sub02 .tabs .tab.active a[data-type="PG01"] {
    background-color: var(--blue);
}
.sub02 .tabs .tab.active a[data-type="PG02"]  {
    background-color: var(--yellow);
}
.sub02 .tabs .tab.active a[data-type="PG03"]  {
    background-color: var(--sky_blue);
}
.sub02 .tabs .tab.active a[data-type="PG04"]   {
    background-color: var(--green);
}
.sub02 .tab .category {
    width: min(6.77vw, 130px);
    font-size: 2.2rem;
    text-align: center;
    color: var(--white);
    padding: 12px 0;
}
.sub02 .boards {
    display: flex;
    flex-direction: column;
    gap: 30px 0;
    margin: 50px auto 100px;
}
.sub02 .board {
    background-color: var(--white);
}
.sub02 .board .category {
    height: 262px;
    display: flex;
    border: 1px solid var(--gray_border);
}
.sub02 .board .category .thumb_nail {
    width: min(20.41vw, 392px);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}
.sub02 .board .category .thumb_nail img {
    max-height: 100%;
    object-fit: fill;
}
.sub02 .board .category .program_area {
    width: calc(100% - 20.41vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3.33vw 0 2.60vw;
    background-color: var(--white);
    transition: all 300ms ease-in-out;
}
.sub02 .sub_sec2 .board_wrap .category[data-type="PG01"]:hover .program_area {
    opacity: 1;
    background-color: var(--blue)
}
.sub02 .sub_sec2 .board_wrap .category[data-type="PG02"]:hover .program_area {
    opacity: 1;
    background-color: var(--yellow);
}
.sub02 .sub_sec2 .board_wrap .category[data-type="PG03"]:hover .program_area {
    opacity: 1;
    background-color: var(--sky_blue);
}
.sub02 .sub_sec2 .board_wrap .category[data-type="PG04"]:hover .program_area {
    opacity: 1;
    background-color: var(--green);
}
.sub02 .board_wrap .category:hover .program_area,
.sub02 .board_wrap .category:hover .program_area .desc,
.sub02 .board_wrap .category:hover .program_area .detail:first-child {
    color: var(--white);
}
.sub02 .board .category .program_area .program_wrap {
    width: calc(100% - 179px);
}
.sub02 .board_wrap .category:hover .arrow.right {    
    background-image: url(../img/arrow_right_hover.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.sub02 .board .category .program_area .title {
    font-size: 3rem;
    font-weight: var(--bold);
    word-break: keep-all;
}
.sub02 .board .category .program_area .desc_wrap {
    display: flex;
    flex-direction: column;
    gap: 10px 0;
    margin-top: 40px;
}
.sub02 .board .category .program_area .desc {
    display: flex;
    gap: 0 20px;
    color: var(--dark_gray);
}
.sub02 .board .category .program_area .detail {
    font-size: 2rem;
}
.sub02 .board .category .program_area .detail:first-child {
    color: #666;
}
.sub02 .board .category .program_area .detail:last-child {
    width: calc(100% - 90px);
}
.sub02 .board .category .program_area .icon_wrap {
    min-width: 67px;
    display: flex;
    flex-direction: column;
    gap: 10px 0;
    align-items: center;
}
.sub02 .board .category .program_area .icon_wrap .text {
    font-size: 1.8rem;
    font-weight: var(--medi);
}

/* 하위 페이지 공통(~edu.php) */
.sub02.education .sub_sec2 {
    background-image: none;
}
.sub02.education .sub_section {
    padding-bottom: 7.81vw;
}
.sub02.education .board {
    display: flex;
    gap: 0 50px;
    margin-bottom: 50px;
}

.sub02.education .thumb_nail_wrap {
    position: relative;
    width: min(30.62vw, 588px);
    height: 100%;
    overflow: hidden;
}
.sub02.education .thumb_nails {
    width: 10000vw;
    display: flex;
    gap: 0 1px;
}
.sub02.education .thumb_nail {
    width: min(30.62vw, 588px);
    aspect-ratio: 196/131;
}
.sub02.education .thumb_nail>img {
    height: 100%;
    object-fit: fill;
}
.sub02.education .thumb_nail_wrap .btn_wrap {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--white);
    border-radius: 10px 0 0 0;
}
.sub02.education .board_area {
    padding: 90px 0;
}
.sub02.education .board .program_wrap {
    width: calc(100% - 30.62vw - 50px);
}
.sub02.education .board .program_wrap .desc_wrap {
    height: calc(100% - 230px);
}
.sub02.education .board .category {
    width: max(6.77vw, 130px);
    height: auto;
    justify-content: center;
    padding: 12px 0;
    font-size: 2.2rem;
    text-align: center;
    color: var(--white);
    border: 0;
}
.sub02.education .board .category[data-type="PG01"] {
    background-color: var(--blue);
}
.sub02.education .board .category[data-type="PG02"]  {
    background-color: var(--yellow);
}
.sub02.education .board .category[data-type="PG03"] {
    background-color: var(--sky_blue);
}
.sub02.education .board .category[data-type="PG04"] {
    background-color: var(--green);
}
.sub02.education .board .program_wrap .title_wrap {
    display: flex;
    justify-content: flex-start;
    gap: 0 10px;
    margin: 30px 0 60px;
}
.sub02.education .board .program_wrap .title {
    font-size: 3rem;
    font-weight: var(--bold);
}
.sub02.education .board .program_wrap .cmnt {
    font-size: 1.8rem;
    font-weight: var(--bold);
}
.sub02.education .board:has(.category[data-type="PG01"]) .program_wrap .cmnt {
    color: var(--blue);
}
.sub02.education .board:has(.category[data-type="PG02"]) .program_wrap .cmnt {
    color: var(--yellow);
}
.sub02.education .board:has(.category[data-type="PG03"]) .program_wrap .cmnt {
    color: var(--sky_blue);
}
.sub02.education .board:has(.category[data-type="PG04"]) .program_wrap .cmnt {
    color: var(--green);
}
.sub02.education .desc_wrap {
    min-height: 5.57vw;
}
.sub02.education .desc_wrap .desc {
    position: relative;
    display: flex;
    gap: 0 20px;
    margin-left: 18px;
    margin-bottom: 20px;
}
.sub02.education .desc_wrap .desc:last-child {
    margin-bottom: 0;
}
.sub02.education .desc_wrap .desc:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 6px;
    left: -18px;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}
.sub02.education:has(.category[data-type="PG01"]) .desc_wrap .desc:before {
    border-left: 8px solid var(--blue);
}
.sub02.education:has(.category[data-type="PG02"]) .desc_wrap .desc:before {
    border-left: 8px solid var(--yellow);
}
.sub02.education:has(.category[data-type="PG03"]) .desc_wrap .desc:before {
    border-left: 8px solid var(--sky_blue);
}
.sub02.education:has(.category[data-type="PG04"]) .desc_wrap .desc:before {
    border-left: 8px solid var(--green);
}
.sub02.education .desc_wrap .detail {    
    font-size: 2rem;
}
.sub02.education .program_wrap .btn {
    margin-top: 0;
    float: right;
}
.sub02.education .detail_board .details {
    display: flex;
    background-color: var(--gray);
}
.sub02.education .detail_board .detail {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px 0;
    padding: 30px;
    border: 1px solid var(--white);
}
.sub02.education .detail_board .detail .text_wrap {
    display: flex;
    align-items: center;
    gap: 0 20px;
}
.sub02.education .detail_board .detail .text_wrap .text {
    font-size: 2.4rem;
    font-weight: var(--bold);
}
.sub02.education .detail_board .detail .desc {
    font-size: 2rem;
    text-align: center;
    color: var(--dark_gray);
}
.sub02.education .inner_content {
    padding: 2.60vw 0;
    border-top: 1px solid #999;
}
.sub02.education .inner_content p {
    font-size: 2rem;
}
.sub02.education .inner_content p img {
    height: 100% !important;
}

@media screen and (max-width: 1490px) {
    .sub02.education .program_wrap .btn {
        margin-top: 30px;
    }    
}

@media screen and (max-width: 1240px) {
    .sub02 .tab .category,
    .sub02.education.talented .board .category {
        min-width: 100px;
    }
    .sub02 .board .category .thumb_nail {
        width: 40%;
    }
}

@media screen and (max-width: 768px) {
    /* Font-size 모음 */
    .sub02.education .board .program_wrap .title,
    .sub02 .board .category .program_area .title {
        font-size: 24px;
    }

    .sub02 .sub_sec2:has(.board_area) {
        background-image: url(../img/sub02/mo_sub02_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sub02 .board_area {
        padding: 0 0 19.23vw 0;
    }
    .sub02 .tab_wrap {
        width: 100vw;
        transform: translateX(-20px);
    }
    .sub02 .tabs .tab {
        flex: 1 1 25%;
    }
    .sub02 .tab .category {
        width: 100%;
        min-width: unset;
        padding: 19px 0;
    }
    .sub02 .board .category {
        flex-direction: column;
    }
    .sub02 .board .category {
        height: min(787px, 100.89vw);
    }
    .sub02.education .thumb_nail_wrap {
        width: min(700px, calc(100vw - 40px));
        height: 470px;
    }
    .sub02.education .thumb_nails {
        height: 100%;
    }
    .sub02 .board .category .thumb_nail{
        width: min(700px, calc(100vw - 40px));
        height: max(500px, 64.10vw);
    }
    .sub02.education .thumb_nail {
        width: min(700px, calc(100vw - 40px));
        height: max(500px, 64.10vw);
    }
    .sub02 .board .category .program_area {
        width: 100%;
        padding: 30px;
        gap: 0 13.71vw;
    }
    .sub02 .board .category .program_area .program_wrap {
        width: calc(100% - 30px);
    }
    .sub02 .board .category .program_area .desc_wrap {
        margin-top: 30px;
        gap: 5px 0;
    }
    .sub02 .board .category .program_area .desc {
        gap: 0 10px;
    }
    .sub02 .board .category .program_area .detail:last-child {
        width: calc(100% - 103px);
    }
    .sub02 .board .category .program_area .icon_wrap {
        height: 100%;
    }
    .sub02 .program_area .arrow.right {
        width: 40px;
        height: 28px;
        background-image: url(../img/mo_arrow_right_black.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    .sub02.education .board_area {
        position: relative;
        padding: 50px 0;
    }
    .sub02.education .inner_content p {
        font-size: 17px;
    }
    .sub02.education .board {
        flex-direction: column;
        margin-bottom: 0;
    }
    .sub02.education .board .program_wrap {
        width: 100%;
        margin: 30px 0;
        padding: 0;
    }
    .sub02.education .board .category {
        min-width: 111px;
    }
    .sub02.education .board .program_wrap .title_wrap {
        margin: 20px 0 50px;
    }
    .sub02.education .board .program_wrap .title {
        width: 100%;
    }
    .sub02.education .desc_wrap .desc {
        margin-bottom: 5px;
    }
    .sub02.education .desc_wrap .desc:before {
        top: 8px;
    }
    .sub02.education .detail_board .details {
        flex-wrap: wrap;
    }
    .sub02.education .detail_board .detail {
        width: 50%;
        flex: 0 0 50%;
    }
    .sub02.education .program_wrap .btn {
        float: none;
    }
    @media screen and (max-width: 540px) {
        .sub02 .boards {
            margin: 30px auto 50px;
        }
        .sub02.education .board {
            margin: 0;
        }
        .sub02.education .thumb_nail_wrap {
            height: 300px;
        }
        .sub02.education .desc_wrap {
            min-height: unset;
        }
        .sub02.education .desc_wrap.detail.bold {
            width: 90px;
        }
        .sub02.education .detail_board .detail {
            padding: 30px 15px;
        }
        .sub02 .board .category {
            height: 100%;
        }
        .sub02 .board .category .program_area {
            padding: 15px;
            gap: 0 10px;
        }
        .sub02.education .board .program_wrap .title_wrap {
            margin: 20px auto;
        }   
        .sub02.education .detail_board .detail .text_wrap {
            gap: 0 10px;
        }
        .sub02 .board .category .thumb_nail, .sub02.education .thumb_nail {
            height: max(300px, 55.55vw);
        }
        .sub02 .board .category .program_area .icon_wrap {
            min-width: unset;
        }
    }
}