.seoulfesta2024-detailpage {
    background-color: #fff;
}
.seoulfesta2024-detailpage .visual-section {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.seoulfesta2024-detailpage .visual-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../../../src/img/project/seoulfesta2024/main_bg.png) no-repeat center center / cover;
    z-index: -10;
    content: "";
}
.seoulfesta2024-detailpage .visual-section .bg-icon01 {
    position: absolute;
    right: -4%;
    top: -4%;
    width: 20vw;
    z-index: -1;
    aspect-ratio: 1 / 1;
}
.seoulfesta2024-detailpage .visual-section .bg-icon01 img,
.seoulfesta2024-detailpage .visual-section .bg-icon02 img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.seoulfesta2024-detailpage .visual-section .bg-icon02 {
    position: absolute;
    right: 5%;
    top: 17%;
    width: 10vw;
    z-index: -1;
    aspect-ratio: 1 / 1;
}
.seoulfesta2024-detailpage .overview-section {
    background-image: linear-gradient(to top, rgba(238, 195, 255, 1), rgba(254, 230,255,1));
}
.seoulfesta2024-detailpage .overview-section .home-wrap {
    margin-bottom: 116px;
}
.seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 25px;
}   
.seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap {
    display: flex;
    align-items: flex-end;
    gap: 100px;
}
.seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .video-title-wrap {
    width: calc(60% - 50px);
}
.seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .video-title-wrap .video-area {
    aspect-ratio: 988 / 666;
}
.seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .m-list-wrap {
    display: flex;
    gap: 80px;
    width: calc(40% - 50px);
}
.seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .m-list-wrap .img-title-wrap { 
    width: calc(50% - 40px);
}

.seoulfesta2024-detailpage .tone-manner-section {
    background-color: #EEC3FF;
}
.seoulfesta2024-detailpage .tone-manner-section .contents-wrap ul li.maipink {
    background-image: linear-gradient(to right, rgba(240, 82, 112, 1) 50%, rgba(252, 214, 221, 1));
}
.seoulfesta2024-detailpage .tone-manner-section .contents-wrap ul li.yellow {
    background-image: linear-gradient(to right, rgba(253, 175, 46, 1) 50%, rgba(255, 234, 200, 1));
}
.seoulfesta2024-detailpage .tone-manner-section .contents-wrap ul li.green {
    background-image: linear-gradient(to right, rgba(57, 177, 113, 1) 50%, rgba(197, 239, 216, 1));
}
.seoulfesta2024-detailpage .tone-manner-section .contents-wrap ul li.blue {
    background-image: linear-gradient(to right, rgba(110, 186, 255, 1) 50%, rgba(198, 228, 255, 1));
}
.seoulfesta2024-detailpage .tone-manner-section .contents-wrap ul li.purple {
    background-image: linear-gradient(to right, rgba(182, 125, 255, 1) 50%, rgba(232, 217, 252, 1));
}

.seoulfesta2024-detailpage .detailpage-section .wrapper80 .project-detail-head {
    border-bottom: 1px solid rgba(16, 12, 18, 0.25);
}
.seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap {
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap .home01-wrap {
    display: flex;
    justify-content: flex-end;
}
.seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap {
    /* width: calc(100% - 322px); */
    width: 75vw;
}

.seoulfesta2024-detailpage .detailpage-section.program-section {
    background-color: #FEE6FF;
}
.seoulfesta2024-detailpage .detailpage-section.program-section .contents-wrap {
    padding: 0 83px;
}
.seoulfesta2024-detailpage .detailpage-section.program-section .contents-wrap .img-title-wrap {
    position: relative;
}
.seoulfesta2024-detailpage .detailpage-section.program-section .contents-wrap .img-title-wrap::after {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 15;
    width: 100%;
    height: 12%;
    background-image: linear-gradient(to top, rgba(254, 230, 255, 1) 50%, rgba(254, 230, 255, 0));
    content: "";  
}
.seoulfesta2024-detailpage .detailpage-section.news-section {
    background-image: linear-gradient(-13deg, rgba(198, 169, 255, 1), rgba(254, 230, 255, 1) 40%);
}
.seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap {
    display: flex;
    gap: 30px;
}
.seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap {
    width: calc(50% - 15px);
}
.seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap .img-area {
    border-radius: 10px;
}
.seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap.news2 .img-area {
    margin-top: 100px;
}


.seoulfesta2024-detailpage .detailpage-section.mobile-section {
    background-color: #DCA4FF;
    padding: 100px 0 116px 0;
}
.seoulfesta2024-detailpage .detailpage-section.mobile-section .contents-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 92px;
} 
.seoulfesta2024-detailpage .detailpage-section.mobile-section .contents-wrap .img-title-wrap {
    width: 16%;
}



@media screen and (max-width : 1280px) {
    .seoulfesta2024-detailpage .visual-section .project-info .wrapper80 .title h2 {
        font-size: 15rem;
    } 
    .seoulfesta2024-detailpage .visual-section .bg-icon01 {
        top: 0;
        transform: translateY(-10%);
        width: 25vw;
        min-width: 200px;
    }
    .seoulfesta2024-detailpage .visual-section .bg-icon02 {
        right: 10%;
        top: 20%;
        transform: translateY(-50%);
        width: 13vw;
        min-width: 120px;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap {
        flex-direction: column;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .video-title-wrap {
        width: 100%;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .m-list-wrap {
        width: 100%;
        padding: 0 5%;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .sub-info-title {
        padding: 0 5%;
    }


    .seoulfesta2024-detailpage .detailpage-section.mobile-section .contents-wrap {
        flex-wrap: wrap;
        row-gap: 23px;
        column-gap: 40px;
        padding: 0 5%;
    }
    .seoulfesta2024-detailpage .detailpage-section.mobile-section .contents-wrap .img-title-wrap {
        width: calc(50% - 20px);
    }

    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap {
        flex-direction: column;
    }
    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap {
        width: 90vw;
        margin: 0 auto;
    }
    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap.news2 .img-area {
        margin-top: 60px;
    }
}
@media screen and (max-width : 768px) {
    .seoulfesta2024-detailpage .visual-section .project-info .wrapper80 .title h2 {
        font-size: 55px;
    }
    .seoulfesta2024-detailpage .visual-section .bg-icon01 {
        right: -10%;
        width: 22vw;
        min-width: 150px;
    }
    .seoulfesta2024-detailpage .visual-section .bg-icon02 {
        right: 10%;
        top: 17%;
        width: 15vw;
        min-width: 79px;
    }
    .seoulfesta2024-detailpage .overview-section .home-wrap {
        margin-bottom: 66px;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 {
        gap: 12px;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap {
        gap: 24px;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .m-list-wrap {
        padding: 0 15px;
        gap: 40px;
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .video-img-wrap .m-list-wrap .img-title-wrap {
        width: calc(50% - 20px);
    }
    .seoulfesta2024-detailpage .overview-section .home-sub-wrap .wrapper120 .sub-info-title {
        padding: 0 15px;
    }

    .seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap {
        gap: 50px;
    }
    .seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap .home01-wrap {
        margin-right: -44px;
    }
    .seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap {
        width: calc(100vw - 32px);
    }
    .seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap .home01-wrap .img-title-wrap.align-r {
        align-items: flex-start;
    }
    .seoulfesta2024-detailpage .detailpage-section.about-section .contents-wrap .home02-wrap {
        margin-left: -44px;
    }
    .seoulfesta2024-detailpage .detailpage-section.about-section .contents-wra .home02-wrapp .img-title-wrap.align-r {
        align-items: flex-end;
    }


    .seoulfesta2024-detailpage .detailpage-section.program-section .contents-wrap {
        padding: 0;
    }
    .seoulfesta2024-detailpage .detailpage-section.program-section .contents-wrap .img-title-wrap::after {
        height: 20%;
        background-image: linear-gradient(to top, rgba(254, 230, 255, 1) 30%, rgba(254, 230, 255, 0));
    }

    .seoulfesta2024-detailpage .detailpage-section.mobile-section {
        padding: 100px 0 50px 0;
    }
    .seoulfesta2024-detailpage .detailpage-section.mobile-section .contents-wrap {
        padding: 0 15px;
    }

    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap {
        gap: 50px;
    }
    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap {
        width: 100%;
    }
    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap.news1 {
        margin-left: -44px;
        align-items: flex-end;
    }
    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap.news2 {
        align-items: flex-end;
    }
    .seoulfesta2024-detailpage .detailpage-section.news-section .contents-wrap .img-title-wrap.news2 .img-area {
        margin-top: 0;
    }
}

@media screen and (max-width : 500px) { 
    .seoulfesta2024-detailpage .f-thumb-section .wrapper80 h2 {
        font-size: 36px;
        letter-spacing: -1.4px;  
    } 
}