#main {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 5rem 4rem;
    background: url('/images/audition_bg.png') no-repeat center;
    background-size: cover;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
}

.main_title{
    position: relative;
    top: 4rem;
    font:700 2.5rem 'Pretendard';
    color: #fff;
    width: fit-content;
    align-self: flex-start;
}

#time {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 5vh 4vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #150E60;
}

.time__txt_wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1vh;
}   

.time_title {
    font:700 4vh 'Pretendard';
    color: #fff;
    width: fit-content;
    align-self: flex-start;
}

.time_txt {
    font:200 2.5vh 'Pretendard';
    color: #fff;
    width: fit-content;
    align-self: flex-start;
}

.time_wrap {
    position: relative;
    width: 100%;
    display: flex;
    gap: 8vw;
    align-items: flex-end;
    justify-content: flex-start;
    height: 50vh;
}

.time_wrap > img {
    width: auto;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.time_desc {
    font:200 3vh 'Pretendard';
    color: #fff;
    width: fit-content;
    align-self: flex-end;
    line-height: 1.5;
}

#perks {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 5vh 4vw;
    box-sizing: border-box;
    background: #150E60;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.perks_title {
    position: absolute;
    top: 12vh;
    left: 5vw;
    font: 700 4vh 'Pretendard';
    color: #fff;
    width: fit-content;
    align-self: flex-start;
}

.perks_wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15vh;
    box-sizing: border-box;
    padding-left: 40vw;
}

.perks_txt {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
}

.perks_wrap_title {
    font: 700 1.5rem 'Pretendard';
    color: #09C2A2;
    width: fit-content;
}

.perks_list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3.5vh;
}

.perks_list > li {
    display: flex;
    gap: 1rem;
}

.perks_list_wrap {
    position: relative;
    display: flex;
    gap: 1vw;
    font: 1.2rem 'Pretendard';
    color: #fff;
    align-items: flex-start;
}

.perks_list_wrap > img {
    width: 1.2rem;
    height: auto;
    object-fit: cover;
}

.info_txt {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2.5vh;
}

.info_wrap_title {
    font: 700 1.5rem 'Pretendard';
    color: #09C2A2;
    width: fit-content;
}

.info_list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4vh;
    font: 1.2rem 'Pretendard';
    color: #fff;
    line-height: 1.5;
    align-items: flex-start;
    box-sizing: border-box;
    padding-left: 1rem; 
}

.info_list > li {
    list-style: decimal;
}

#judge {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 5vh 4vw;
    box-sizing: border-box;
}

.judge_title {
    font: 700 4vh 'Pretendard';
    color: #fff;
    width: fit-content;
    align-self: flex-start;
    margin-bottom: 10vh;
}

.judge_list {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(50vh, auto);
    gap: min(4vh, 2vw);
}

.judge_wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    height: 50vh;
    box-sizing: border-box;
    background: #fff;
}

.judge_imgbox {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: min(1rem, 2vw);
    box-sizing: border-box;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.judge_wrap:nth-child(1) .judge_imgbox {
    background-image: url('/images/profile_lim.png');
}

.judge_wrap:nth-child(2) .judge_imgbox {
    background-image: url('/images/profile_hong.png');
}

.judge_wrap:nth-child(3) .judge_imgbox {
    background-image: url('/images/profile_yoon.png');
}

.judge_wrap:nth-child(4) .judge_imgbox {
    background-image: url('/images/profile_shin.png');
}

.judge_name_wrap {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.judge_name {
    font: 700 clamp(1.5rem, 2vw, 2rem) 'Pretendard';
    color: #fff;
}

.judge_job {
    font: 700 clamp(0.9rem, 1.2vw, 1.2rem) 'Pretendard';
    color: #fff;
}

.judge_desc {
    position: relative;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow-y: auto;
}

.judge_career_list {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: min(1.25rem, 2vw) min(2.375rem, 3vw) 0 min(2rem, 2.5vw);
    box-sizing: border-box;
    margin-bottom: min(1rem, 1.5vw);
}

.judge_career_list > li {
    font: 500 clamp(0.8rem, 1vw, 1rem) 'Pretendard';
    line-height: 1.5;
    color: #000;
    list-style-type: '- ';
    margin-bottom: 0.5em;
}

.judge_desc_txt {
    font: 500 clamp(0.8rem, 1vw, 1rem) 'Pretendard';
    line-height: 1.5;
    color: #000;
    padding: min(1.25rem, 2vw) min(2.375rem, 3vw) 0 min(1rem, 1.5vw);
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    #main {
        padding: 3rem 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .main_title {
        font-size: 2rem;
        top: 2rem;
        text-align: center;
        align-self: center;
        width: 100%;
    }
    
    #time {
        padding: 3rem 2rem;
    }
    
    .time__txt_wrap {
        gap: 1vh;
    }
    
    .time_title {
        font-size: 3.5vh;
    }
    
    .time_txt {
        font-size: 2vh;
    }
    
    .time_wrap {
        flex-direction: column;
        height: auto;
        gap: 4vh;
        align-items: center;
    }
    
    .time_wrap > img {
        height: 40vh;
        width: 90%;
        object-fit: cover;
        border-radius: 10px;
    }
    
    .time_desc {
        font-size: 2.5vh;
        align-self: center;
        text-align: center;
        margin-top: 2vh;
    }

    #perks {
        padding: 4vh 5vw;
        justify-content: flex-start;
    }
    
    .perks_title {
        position: relative;
        top: auto;
        left: auto;
        margin-top: 5vh;
        margin-bottom: 5vh;
        font-size: 3.5vh;
        text-align: left;
        align-self: center;
    }
    
    .perks_wrap {
        padding-left: 0;
        gap: 8vh;
    }
    
    .perks_txt {
        gap: 2vh;
        text-align: center;
    }
    
    .perks_wrap_title {
        font-size: 1.8rem;
        align-self: center;
        margin-bottom: 2vh;
    }
    
    .perks_list {
        gap: 4vh;
    }
    
    .perks_list > li {
        flex-direction: column;
        gap: 3vh;
    }
    
    .perks_list_wrap {
        gap: 3vw;
        font-size: 1rem;
    }
    
    .perks_list_wrap > img {
        width: 1rem;
        align-self: center;
    }
    
    .info_wrap_title {
        font-size: 1.8rem;
        align-self: center;
        margin-top: 5vh;
        margin-bottom: 2vh;
    }

    .judge_desc {
        padding: 1rem 1rem 3rem;
    }
    
    .info_list {
        gap: 3vh;
        font-size: 1rem;
        padding-left: 2rem;
    }

    /* 글자 크기 고정 */
    .judge_name {
        font-size: 1.5rem;
    }
    
    .judge_job {
        font-size: 0.9rem;
    }
    
    .judge_career_list > li,
    .judge_desc_txt {
        font-size: 1rem;
    }
    
    /* 레이아웃 변경 */
    .judge_list {
        grid-template-columns: 1fr;
        justify-items: center;
    }
    
    .judge_wrap {
        flex-direction: column;
        height: auto; 
        min-height: 50vh;
        width:90%;
    }
    
    .judge_imgbox {
        width: 100%; 
        height: 60vh; 
        background-position: center top;
    }
    
    .judge_desc {
        width: 100%; 
        height: auto; 
        min-height: 30vh;
        padding-left: 1rem;
        box-sizing: border-box;
    }    
}