/* 
---------------------------------------------
            Company 04, Company 05
--------------------------------------------- 
*/

/* cont1 */
.cont1 .visual {
    margin-bottom: 28px;
}

.cont1 .visual img {
    width: 100%;
    height: 100%;
    object-position: left center;
    border-radius: 20px;
}

.cont1 .headline {
    text-align: center;
}

.logo-list {
    margin-top: 80px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px 30px;
}

.logo-list .item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 186px;
    border-radius: 20px;
    background: #EEF5FA;
    box-shadow: 0 1px 6px rgba(14, 26, 43, 0.06);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: transform 0.5s ease;
}

.logo-list .item:hover {
    transform: translateY(-8px);
}

.logo-list .item img {
    max-width: 60%;
    max-height: 70%;
    width: auto;
    height: auto;
    display: block;
}

@media (max-width: 1440px) {
    .cont1 .visual {
        height: 220px;
        overflow: hidden;
    }

    .cont1 .visual img {
        object-fit: cover;
    }

    .cont1 .headline {
        font-size: 46px;
        line-height: 1.3;
    }

    .logo-list {
        margin-top: 70px;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px 28px;
    }

    .logo-list .item {
        height: 160px;
        border-radius: 18px;
    }
}

@media (max-width: 1280px) {

    .cont1 .headline {
        font-size: 42px;
        line-height: 1.35;
    }

    .logo-list {
        margin-top: 60px;
        grid-template-columns: repeat(4, 1fr);
        gap: 26px 24px;
    }

    .logo-list .item {
        height: 150px;
        border-radius: 16px;
    }
}

@media (max-width: 1024px) {
    .cont1 .headline {
        font-size: 34px;
    }

    .logo-list {
        margin-top: 52px;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px 20px;
    }

    .logo-list .item {
        height: 130px;
        border-radius: 14px;
    }

    .logo-list .item img {
        max-width: 70%;
    }
}

@media (max-width: 768px) {
    .cont1 .visual {
        height: 200px;
    }

    .cont1 .headline {
        font-size: var(--font-3xl);
        line-height: 1.4;
    }

    .logo-list {
        margin-top: 40px;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px 16px;
    }
}

@media (max-width: 480px) {
    .cont1 .visual {
        height: 180px;
    }

    .cont1 .visual img {
        object-fit: cover;
    }

    .cont1 .headline {
        font-size: var(--font-xl);
        line-height: 1.4;
    }

    .logo-list {
        margin-top: 32px;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px 12px;
    }
}