<ul class="card_boxs">
    <li class="card1">
        <div class="off"></div>
        <div class="on"></div>
    </li>
    <li class="card2">
        <div class="off"></div>
        <div class="on"></div>
    </li>
    <li class="card3">
        <div class="off"></div>
        <div class="on"></div>
    </li>
    <li class="card4">
        <div class="off"></div>
        <div class="on"></div>
    </li>
</ul>

.card_boxs {display: flex;justify-content: space-between;flex-wrap: wrap;gap: 25px;}
.card_boxs > li {flex: 1;border-radius: 10px;overflow: hidden;height: 570px;position: relative;cursor: pointer;transition: all .6s cubic-bezier(.34,1.56,.54,1);background-repeat: no-repeat;background-position: center center;background-size: cover;background-color: #000;}
.card_boxs > li:hover{flex: 3;}
.card_boxs > li.card1 {background-image: url('../images/sub/aboutus-bg1-1.jpg');}
.card_boxs > li.card2 {background-image: url('../images/sub/aboutus-bg1-2.jpg');}
.card_boxs > li.card3 {background-image: url('../images/sub/aboutus-bg1-3.jpg');}
.card_boxs > li.card4 {background-image: url('../images/sub/aboutus-bg1-4.jpg');}