.pencilin-detailpage {
    background: #DBF9EC;
}

.pencilin-detailpage .visual-section {
    display: flex;
    flex-direction: column;
    gap: 54px;
    padding: 133px 0 70px 0;
    background: linear-gradient(180deg, #50EAA8 12.46%, #039470 120.14%);
}
.portfolio-detailpage .visual-section .project-mainimg .sub-title-wrap {
    bottom: 5%;
}
.pencilin-detailpage .overview-section {
    background: linear-gradient(180deg, #FFF 50%, #DBF9EC 100%);
}
.pencilin-detailpage .overview-section .contents-wrap .home-wrap .wrapper80 {
    display: flex;
    justify-content: center;
}
.pencilin-detailpage .overview-section .contents-wrap .home-wrap .inner {
    max-width: 1450px;
    width: 75vw;
    padding: 45px 0 100px 0;
}
.pencilin-detailpage .overview-section .contents-wrap .product-wrap {
    display: flex;
    justify-content: flex-start;
    margin-left: -6%;
    padding: 16px 0 290px 0;
}
.pencilin-detailpage .overview-section .contents-wrap .product-wrap .inner {
    max-width: 1450px;
    width: 75vw;
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner {
    display: flex;
    justify-content: space-between;
    gap: 345px;
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 80px;
    width: calc(44% - 172.5px);
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap.pad {
    width: calc(56% - 172.5px);
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list {
    display: flex;
    align-items: flex-start;
    flex-grow: 1;
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list .img-title-wrap {
    width: 52%;
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list .img-title-wrap.main {
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list .img-title-wrap.sub {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list .img-title-wrap.sub .img-area {
    outline: none;
    outline-offset: 0;
    margin: 0 0 0 -7%;
    box-shadow: -7px 2px 20px 5px rgba(100, 125, 119, 0.20);
    margin-top: 230px;
}


.pencilin-detailpage .tone-manner-section {
    background-color: #DBF9EC;
}
.pencilin-detailpage .tone-manner-section .contents-wrap ul li {
    width: 50%;
}
.pencilin-detailpage .tone-manner-section .contents-wrap ul li.white {
    background-color: #fff;
}
.pencilin-detailpage .tone-manner-section .contents-wrap ul li.white span {
    color: rgba(0, 28, 31, 0.20);
}
.pencilin-detailpage .tone-manner-section .contents-wrap ul li.black {
    background-color: #001C1F;
}

.pencilin-detailpage .detailpage-section.about-section {
    background-color: #DBF9EC;
}
.pencilin-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap {
    max-width: 1450px;
    width: 75vw;
    margin: 0 auto;
}


.pencilin-detailpage .detailpage-section.product-section {
    position: relative;
}
.pencilin-detailpage .detailpage-section.product-section::before {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -2;
    width: 100%;
    aspect-ratio: 960 / 449;
    background: url(../../../src/img/project/pencilin/section_bg.png) no-repeat center center / contain;
    content: "";
}
.pencilin-detailpage .detailpage-section.product-section::after {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: -5;
    width: 40%;
    aspect-ratio: 777 / 242;
    background: url(../../../src/img/project/pencilin/logo_bg.png) no-repeat center center / contain;
    content: "";
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap {
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap {
    position: relative;
    display: flex;
    gap: 30px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap {
    width: calc(50% - 15px);
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap .img-area {
    border-radius: 10px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap.product02 .img-area {
    margin-top: 170px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .sub-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
    width: fit-content;
    max-width: 85vw;
    margin-left: -20px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .sub-wrap .img-list {
    display: flex;
    gap: 40px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .sub-wrap .img-list .img-title-wrap {

    width: calc(33.33% - 26.66px);
    max-width: 500px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap {
    display: flex;
    align-items: center;
    gap: 97px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .desc-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 50%;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .desc-wrap p {
    font-size: 14px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap .img-list { 
    display: flex;
    gap: 60px;
}
.pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap .img-list .img-title-wrap{
    width: calc(33.33% - 40px);    
}
 

@media screen and (max-width : 1600px) { 
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap {
        width: calc(44% - 75px);
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap.pad {
        width: calc(56% - 75px);
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner {
        gap: 150px;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list .img-title-wrap.sub .img-area {
        margin-top: 130px;
    }
}
@media screen and (max-width : 1280px) {
    .pencilin-detailpage .overview-section {
        background: linear-gradient(180deg, #FFF 30%, #DBF9EC 100%);
    }
    .pencilin-detailpage .overview-section .contents-wrap .home-wrap .inner {
        width: 100%;
        padding: 0 0 50px 0;
    }
    .pencilin-detailpage .overview-section .contents-wrap .product-wrap {
        padding: 16px 0 100px 0;
    }
    .pencilin-detailpage .overview-section .contents-wrap .product-wrap .inner {
        width: 83vw;
    }
    
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner {
        align-items: center;
        flex-direction: column;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap {
        align-items: center;
        width: 60%;
        gap: 20px;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap.pad {
        width: 60%;
    }

    .pencilin-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap {
        width: 80%;
    }

    .pencilin-detailpage .detailpage-section.product-section .contents-wrap {
        gap: 50px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap {
        flex-direction: column;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap {
        width: 100%;
        margin: 0 auto;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap.product02 .img-area {
        margin-top: 60px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap {
        align-items: flex-end;
        flex-direction: column-reverse;
        gap: 50px;
        width: 100%;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .desc-wrap {
        width: 100%;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap {
        width: 80%;
        margin-right: -55px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap .img-list {
        gap: 40px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap .img-list .img-title-wrap {
        width: calc(33.33% - 26.66px);
    }
}

@media screen and (max-width : 768px) {
    .pencilin-detailpage .visual-section {
        padding: 80px 0 54px 0;
        gap: 35px;
    }
    .pencilin-detailpage .visual-section .project-mainimg {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }
    .portfolio-detailpage .visual-section .project-mainimg .sub-title-wrap {
        position: relative;
        bottom: auto;
    }
    .pencilin-detailpage .overview-section .contents-wrap .product-wrap {
        margin-left: 0;
    }
    .pencilin-detailpage .overview-section .contents-wrap .product-wrap .inner {
        width: 100%;
        padding: 0 16px;
    }
    .pencilin-detailpage .overview-section .contents-wrap .product-wrap .inner .img-title-wrap {
        align-items: flex-start;
    } 
    .pencilin-detailpage .overview-section .contents-wrap .product-wrap .inner .img-title-wrap .img-area {
        margin-left: -44px;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap.pad {
        width: 100%;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap.pad .img-list {
        width: 80%;
        min-width: 250px;
        max-width: 500px;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap {
        width: 100%;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap .img-list {
        width: 77%;
        min-width: 300px;
        max-width: 500px;
    }

    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner {
        gap: 80px;
    }
    .pencilin-detailpage .overview-section .contents-wrap .mobile-wrap .inner .mobile-img-wrap {
        gap: 12px;
    }

    .pencilin-detailpage .detailpage-section.about-section .contents-wrap .img-title-wrap {
        width: 100%;
    }


    .pencilin-detailpage .detailpage-section.product-section .project-detail-head h2 {
        font-size: 55px;
    }
    .pencilin-detailpage .detailpage-section.product-section::after {
        display: none;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap {
        gap: 50px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap {
        width: 100%;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .pc-wrap .img-title-wrap.product02 .img-area {
        margin-top: 0;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .sub-wrap {
        width: 110%;
        max-width: 100%;
        gap: 12px;
        margin-left: -50px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .sub-wrap .img-list {
        gap: 10px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .sub-wrap .img-list .img-title-wrap {
        width: calc(33.33% - 6.66px);
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap {
        width: 95%;
        gap: 12px;
        margin-right: -26px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap .img-list {
        gap: 10px;
    }
    .pencilin-detailpage .detailpage-section.product-section .contents-wrap .m-wrap .m-img-wrap .img-list .img-title-wrap {
        width: calc(33.33% - 6.66px);
    }
}

@media screen and (max-width : 500px) {
    .pencilin-detailpage .f-thumb-section {
        padding: 50px 0;
    }
    .pencilin-detailpage .f-thumb-section .wrapper80 h2 {
        font-size: 55px;
        text-align: right;
    }
}