.seoulfesta2023-detailpage {
    background-color: #f8f8f8;
}
.seoulfesta2023-detailpage .visual-section {
    background: linear-gradient(180deg, #FFE7C2 0%, #FCBD5E 119%, #FA9600 161.91%);
    color: #70574C;
}
.seoulfesta2023-detailpage .visual-section .sub-info-title.animate-title-in .box-icon {
    background-color: #70574C;
}
.seoulfesta2023-detailpage .visual-section .sub-info-title span {
    color: #70574C;
}

.seoulfesta2023-detailpage .overview-section {
    background-color: #f8f8f8;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .home-wrap {
    margin-bottom: 100px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .sub-wrap {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-right: -6%;
    padding: 16px 0 0 0;
    margin-bottom: 160px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .sub-wrap .inner {
    max-width: 1450px;
    width: 75vw;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap {
    padding: 0 40px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list {
    display: flex;
    gap: 130px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap {
    width: calc(25% - 97.5px);
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap:nth-child(even) { 
    margin-top: 100px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 .desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 .desc-wrap p {
    font-size: 14px;
    line-height: 1.6;
    color: #100C12;
    width: 100%;
    max-width: 660px;
}

.seoulfesta2023-detailpage .tone-manner-section {
     background-color: #F1F1F1;
}
.seoulfesta2023-detailpage .tone-manner-section .contents-wrap ul li.blue {
    background-image: linear-gradient(to right, rgba(50, 107, 179, 1) 50%, rgba(205, 223, 246, 1));
}
.seoulfesta2023-detailpage .tone-manner-section .contents-wrap ul li.pink {
    background-image: linear-gradient(to right, rgba(222, 47, 117, 1) 50%, rgba(244, 209, 223, 1));
}
.seoulfesta2023-detailpage .tone-manner-section .contents-wrap ul li.yellow {
    background-image: linear-gradient(to right, rgba(250, 150, 0, 1) 50%, rgba(255, 231, 194, 1));
}
.seoulfesta2023-detailpage .tone-manner-section .contents-wrap ul li.green {
    background-image: linear-gradient(to right, rgba(81, 168, 109, 1) 50%, rgba(197, 239, 211, 1));
}


.seoulfesta2023-detailpage .detailpage-section.about-section {
    background: linear-gradient(180deg, #F8F8F8 0%, #CDDFF6 100%);
}
.seoulfesta2023-detailpage .detailpage-section.about-section .contents-wrap {
    padding: 0 83px;
}
.seoulfesta2023-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap {
    position: relative;
}
.seoulfesta2023-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap::after {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 12%;
    background: linear-gradient(180deg, rgba(248, 248, 248, 0) 0%, rgba(205, 223, 246, 1) 80%);
    content: "";  
}
.seoulfesta2023-detailpage .detailpage-section.opening-section {
    background: linear-gradient(0deg, #C5EFD3 0%, #CDDFF6 100%);
}

.seoulfesta2023-detailpage .detailpage-section.event-section {
    position: relative;
    
}
.seoulfesta2023-detailpage .detailpage-section.event-section::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -10;
    background: linear-gradient(180deg, #C5EFD3 0%, #F4D1DF 100%);
    content: "";
}
.seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap {
    position: relative;
    display: flex;
    gap: 30px;
}
.seoulfesta2023-detailpage .detailpage-section.event-section::after {
    position: absolute;
    right: 0;
    top: 32%;
    width: 40%;
    transform: translate(0, -50%);
    z-index: -5;
    max-width: 830px;
    aspect-ratio: 777 / 242;
    background: url(../../../src/img/project/seoulfesta2023/bg_text.png) no-repeat center center / contain;
    content: "";
}
.seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap {
    width: calc(50% - 15px);
}
.seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap .img-area {
    border-radius: 10px;
}
.seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap.event02 .img-area {
    margin-top: 170px;
}

@media screen and (max-width : 1280px) {
    .seoulfesta2023-detailpage .overview-section .contents-wrap .sub-wrap .inner {
        width: 83vw;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 {
        padding: 0;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list {
        gap: 40px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap {
        width: calc(25% - 30px);
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap:nth-child(even) {
        margin-top: 50px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 .desc-wrap p {
        width: 100%;
        max-width: 700px;
    }

    .seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap {
        flex-direction: column;
    }
    .seoulfesta2023-detailpage .detailpage-section.event-section::after {
        display: none;
    }
    .seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap {
        width: 90vw;
        margin: 0 auto;
    }
    .seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap.event02 .img-area {
        margin-top: 60px;
    }
    
}

@media screen and (max-width : 768px) {
    .seoulfesta2023-detailpage .visual-section {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .seoulfesta2023-detailpage .visual-section .project-mainimg .sub-title-wrap {
        bottom: 12%;
    }
    .seoulfesta2023-detailpage .visual-section .project-info .wrapper80 .title h2 {
        font-size: 55px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .home-wrap {
        margin-bottom: 50px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 {
        gap: 30px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list {
        flex-wrap: wrap;
        column-gap: 40px;
        row-gap: 23px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap {
        width: calc(50% - 20px);
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .img-list .img-title-wrap:nth-child(even) {
        margin-top: 0;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .sub-wrap {
        margin-bottom: 80px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .sub-wrap .inner {
        width: 100%;
    } 
    .seoulfesta2023-detailpage .overview-section .contents-wrap .sub-wrap .inner .img-title-wrap {
        margin-left: 60px;
    }

    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap {
        padding: 0 15px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 .desc-wrap {
        gap: 12px;
    }
    .seoulfesta2023-detailpage .overview-section .contents-wrap .m-wrap .wrapper120 .desc-wrap p br {
        display: none;
    }
    
    .seoulfesta2023-detailpage .detailpage-section.about-section .project-detail-head h2 {
        font-size: 55px;
    }
    .seoulfesta2023-detailpage .detailpage-section.about-section .contents-wrap {
        padding: 0;
    }

    .seoulfesta2023-detailpage .detailpage-section.event-section .project-detail-head h2 ,
    .seoulfesta2023-detailpage .detailpage-section.opening-section .project-detail-head h2 { 
        font-size: 55px; 
    }
    .seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap {
        gap: 50px;
    }
    .seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap {
        width: 100%;
    }
    .seoulfesta2023-detailpage .detailpage-section.event-section .contents-wrap .img-title-wrap.event02 .img-area {
        margin-top: 0;
    }
    .seoulfesta2023-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap::after {
        height: 20%;
    }
}

@media screen and (max-width : 500px) { 
    .seoulfesta2023-detailpage .f-thumb-section {
        aspect-ratio: 390 / 696;
        min-height: 696px;
    }
}