main{
    width: 100%;
    padding: 32px 0 150px 0;
}
.mainInner{
    width: 100%;
    /* max-width: 1920px; */
    padding: 0 80px;
    margin: 0 auto;
}
.projectLists{
    display: grid;
    grid-template-columns: repeat(4, minmax(300px, 1fr));
    column-gap: 20px;
    row-gap: 56px;
    width: 100%;
}
.projectLists li{
    width: 100%;
}

.projectLists li {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.projectLists li.show {
    opacity: 1;
    transform: scale(1);
}

.projectLists li a{
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    width: 100%;
}
.projectLists li a span{
    display: block;
    width: 100%;
}
.projectLists li a span img{
    width: 100%;
}
.projectLists li p{
    font-size: 18px;
    font-weight: 500;
    line-height: 100%; /* 18px */
    letter-spacing: -0.9px;
}

@media all and (max-width : 1435px){
    .projectLists{
        display: grid;
        grid-template-columns: repeat(3, minmax(200px, 1fr));
        column-gap: 20px;
        row-gap: 56px;
        width: 100%;
    }
}

@media all and (max-width : 1024px){
    main{
        padding: 20px 0 150px 0;
    }
    .mainInner{
        padding: 0 14px;
    }
    .projectLists{
        grid-template-columns: repeat(2, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .projectLists li p{
        line-height: 140%;
    }
}