/* sub03 공통 */
.sub03 .sub_sec2:has(.chart_area) {
    background-image: url(../img/sub03/sub03_bg.png);
    background-repeat: no-repeat;
    background-size: cover;
}
.sub03 .chart_area {
    padding: 90px 0 150px;
}
.sub03 .chart_area .tabs {
    display: flex;
    gap: 0 1px;
}
.sub03 .chart_area .tab_wrap .category {
    padding: 15px 45.5px;
    background-color: var(--gray_border);
    font-size: 2.2rem;
    color: var(--white);
}
.sub03 .tab_wrap .tab.active .category[data-type="PT01"] {
    background-color: var(--blue);
}
.sub03 .tab_wrap .tab.active .category[data-type="PT02"] {
    background-color: var(--yellow);
}
.sub03 .chart_wrap {
    margin: 50px 0 100px;
}
.sub03 .chart_wrap .charts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 40px 20px;
}
.sub03 .chart_wrap .chart {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray_border);
}
.sub03 .chart_wrap .chart .thum_nail {
    aspect-ratio: 23/16;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}
body:not(:has(.guide)) .thumb_nail img {
    max-height: 100%;
    object-fit: fill;
}
.sub03 .chart_wrap .chart .thum_nail>img {
    height: 100%;
}
.sub03 .chart_wrap .chart .title {
    padding: 28px 0;
    background-color: var(--white);
    border-top: 1px solid var(--gray_border);
    font-size: 2rem;
    font-weight: var(--bold);
    text-align: center;
    transition: all 300ms ease-in-out;
}
.sub03 .chart_wrap .chart[data-type="PT01"]:hover .title {
    opacity: 1;
    background-color: var(--blue);
    border-top: 1px solid var(--blue);
    color: var(--white);
}
.sub03 .chart_wrap .chart[data-type="PT02"]:hover .title {
    opacity: 1;
    background-color: var(--yellow);
    border-top: 1px solid var(--yellow);
    color: var(--white);
}

/* 하위 페이지 공통(~guide.php) */
.sub03.guide .sub_section {
    padding-bottom: 8.85vw;
}
.sub03.guide .board {
    display: flex;
    gap: 0 50px;
    margin-bottom: 50px;
}
.sub03.guide .board .thumb_nail_wrap {
    position: relative;
    width: min(43.33vw, 832px);
    height: 100%;
    overflow: hidden;
}
.sub03.guide .board .thumb_nails {
    width: 10000vw;
    display: flex;
    gap: 0 1px;
}
.sub03.guide .board .thumb_nail {
    width: min(43.33vw, 832px);
    aspect-ratio: 832 / 579;
}
.sub03.guide .board .thumb_nail>img {
    height: 100%;
    object-fit: fill;
}
.sub03.guide .board .thumb_nail_wrap .btn_wrap {
    display: flex;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: var(--white);
    border-radius: 10px 0 0 0;
}
.sub03.guide .board .program_wrap {
    width: calc(100% - 43.33vw - 50px);
}
.sub03.guide .board .category {
    width: min(6.77vw, 130px);
    height: auto;
    padding: 12px 0;
    font-size: 2.2rem;
    text-align: center;
    color: var(--white);
    border: 0;
}
.sub03.guide .board .category[data-type="PT01"] {
    background-color: var(--blue);
}
.sub03.guide .board .category[data-type="PT02"] {
    background-color: var(--yellow);
}
.sub03.guide .board .program_wrap .title {
    font-size: 3rem;
    font-weight: var(--bold);
    margin: 30px 0 60px;
}
.sub03.guide .board .program_wrap .desc_wrap {
    min-height: calc(100% - 260px);
    margin-bottom: 30px;
}
.sub03.guide .board .program_wrap .desc_wrap .desc {
    position: relative;
    display: flex;
    gap: 0 20px;
    margin-left: 18px;
    margin-bottom: 20px;
}
.sub03.guide .board .program_wrap .desc_wrap .desc:last-child {
    margin-bottom: 0;
}
.sub03.guide .board .program_wrap .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;
}
.sub03.guide .board:has(.category[data-type="PT01"]) .desc_wrap .desc:before {
    border-left-color: var(--blue);
}
.sub03.guide .board:has(.category[data-type="PT02"]) .desc_wrap .desc:before {
    border-left-color: var(--yellow);
}
.sub03.guide .board .program_wrap .desc_wrap .detail {    
    font-size: 2rem;
    word-break: normal;
}
.sub03.guide .board .program_wrap .btn {
    margin-top: 0;
    float: right;
}
.sub03.guide .detail_board .details {
    display: flex;
    gap: 0 20px;
}
.sub03.guide .detail_board .detail {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sub03.guide .detail_board .detail .text {
    font-size: 2.4rem;
    font-weight: var(--bold);
}
.sub03.guide .detail_board .detail .desc_wrap {
    height: 100%;
    margin-top: 13px;
    padding: 20px;
    background-color: var(--gray);
    word-break: keep-all;
}
.sub03.guide:has(.category[data-type="PT01"]) .detail_board .detail .desc_wrap {
    border-top: 1px solid var(--blue);
}
.sub03.guide:has(.category[data-type="PT02"]) .detail_board .detail .desc_wrap {
    border-top: 1px solid var(--yellow);
}
.sub03.guide .detail_board .detail .desc {
    position: relative;
    margin-left: 15px;
    font-size: 2rem;
    color: var(--dark_gray);
    line-height: 170%;
}
.sub03.guide .detail_board .detail .desc:before {
    content: "";
    position: absolute;
    top: 15px;
    left: -15px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: var(--dark_gray);
}
.sub03.guide .board_area {
    padding: 90px 0 50px;
}

@media screen and (max-width: 1240px) {
    .sub03.guide .board .category {
        min-width: 111px;
    }
}

@media screen and (max-width: 768px) {
    /* Font-size 모음 */
    .sub03.guide .board .program_wrap .title {
        margin: 20px auto;
        font-size: 24px;
    }

    .sub03 .sub_sec2:has(.board_area) {
        background-image: url(../img/sub02/mo_sub02_bg.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sub03 .tab_wrap {
        width: 100vw;
        transform: translateX(-20px);
    }
    .sub03 .tabs .tab {
        flex: 1 1 50%;
    }
    .sub03 .chart_area .tab_wrap .category {
        padding: 19px 0;
        text-align: center;
    }    
    .sub03 .chart_area {
        padding: 0 0 19.23vw 0;
    }
    .sub03 .chart_wrap .charts {
        grid-template-columns: auto;
    }
    .sub03 .charts li:first-child .chart {
        margin-top: 30px;
    }
    .sub03.guide .board .thumb_nail_wrap {
        width: min(700px, calc(100vw - 40px));
        height: 470px;
        background-color: var(--white);
    }
    .sub03.guide .board .thumb_nails {
        height: 100%;
    }
    .sub03.guide .board .thumb_nail {
        width: min(700px, calc(100vw - 40px));
    }
    .sub03.guide .board_area {
        position: relative;
        padding: 80px 0 0 0;
    }
    .sub03.guide .board {
        flex-direction: column;
    }
    .sub03.guide .board .program_wrap {
        width: 100%;
        margin-top: 30px;
        padding: 0;
    }
    .sub03.guide .board .program_wrap .title_wrap {
        margin: 20px 0 50px;
    }
    .sub03.guide.worker .desc_wrap .desc:before {
        top: 8px;
    }
    .sub03.guide .detail_board .details {
        flex-wrap: wrap;
        gap: 20px 0;
    }
    .sub03.guide .detail_board .detail {
        flex: 0 0 100%;
    }
    .sub03.guide .board .program_wrap .btn {
        float: none;
    }
}

@media screen and (max-width: 540px) {
    .sub03.guide .board .thumb_nail_wrap {
        height: 300px;
    }
    .sub03 .chart_wrap {
        margin: 0 auto 50px;
    }
    .sub03.guide .board_area + .btn {
        width: max(70%, 300px);
        padding: 15px 0;
    }
    .sub03.guide .board_area {
        padding: 50px 0 20px;
    }
    .sub03.guide .board .program_wrap .desc_wrap {
        height: auto;
    }
}