.cooperation1 {
    padding: 96px 0 295px 0;
    position: relative;
    z-index: 1
}

.cooperation1 .bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1
}

.cooperation1 .title {
    font-weight: bold;
    font-size: 30px;
    color: #111111;
    text-align: center;
    margin: 0 0 62px
}


/**/
.cooperation1 .content2 {
    display: grid;
    grid-template-columns:repeat(8, 1fr);
    gap: 60px 46px
}

.cooperation1 .content2 .item {
    width: 100%;
    height: 90px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #E4E4E4;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer
}

.cooperation1 .content2 .item img {
    transition: .6s ease;
}

.cooperation1 .content2 .item:hover img {
    filter: grayscale(0%)
}

.cooperation1 .content2 .item:hover svg rect {
    stroke-dashoffset: 0
}

.cooperation1 .content2 .item svg {
    position: absolute;
    width: 102%;
    height: 102%;
    top: -1px;
    left: -2px
}

.cooperation1 .content2 .item svg rect {
    width: 99%;
    height: 98%;
    stroke-dashoffset: 476;
    stroke-dasharray: 476;
    transition: 1s ease
}
/**/

.cooperation1 .content .matter:not(:last-child) {
    margin: 0 0 166px
}

.cooperation1 .content .matter .p1 {
    font-weight: bold;
    font-size: 24px;
    color: #111111;
    margin: 0 0 60px;
    text-align: center
}

.cooperation1 .content .matter .flex {
    display: grid;
    grid-template-columns:repeat(8, 1fr);
    gap: 60px 120px
}

.cooperation1 .content .matter .flex .img {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.cooperation1 .content .matter .flex .img:hover img {
    transform: scale(1.1)
}

.cooperation1 .content .matter .flex .img img {
    transition: 1s
}

@media screen and (max-width: 1919px) {
    .cooperation1{
        padding: 5vw 0px 15.3645833333vw;
    }
    .cooperation1 .title{
        font-size: 1.5625vw;
        margin: 0px 0px 3.2291666667vw;
    }
    .cooperation1 .content .matter:not(:last-child){
        margin: 0px 0px 8.6458333333vw;
    }
    .cooperation1 .content .matter .p1{
        font-size: 1.25vw;
        margin: 0px 0px 3.125vw;
    }
    .cooperation1 .content .matter .flex{
        gap: 3.125vw 6.25vw;
    }

    .cooperation1 .content2{
        gap: 3.125vw 2.3958333333vw;
    }
    .cooperation1 .content2 .item{
        height: 4.6875vw;
        border-radius: 0.2083333333vw;
    }
    .cooperation1 .content2 .item svg{
        left: -0.1041666667vw;
    }
}

@media screen and (max-width: 1024px) {
    .cooperation1 .title{
        font-size: 24px;
        margin: 0 0 30px;
    }
    .cooperation1{
        padding: 60px 0;
    }
    .cooperation1 .content .matter .p1{
        font-size: 16px;
        margin: 0 0 25px;
    }
    .cooperation1 .content .matter .flex {
        gap: 55px 42px;
        grid-template-columns: repeat(4, 1fr);
    }

    .cooperation1 .content .matter:not(:last-child) {
        margin: 0px 0px 75px;
    }

    .cooperation1 .content2 {
        gap: 15px;
        grid-template-columns: repeat(3, 1fr);
    }
    .cooperation1 .content2 .item {
        height: 68px;
        border-radius: 4px;
    }
    .cooperation1 .content2 .item img{
        max-width: 70%;
        max-height: 70%;
    }
}