.bannetp {
    width: 100%;
    height: 50vh;
    position: relative;
}

.bannetp>img {
    width: 100%;
    height: 100%;
}

.bannetp>div {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    z-index: 99;
    color: #ffffff;
}

.bannetp>div>h1 {
    font-size: 50px;
    font-weight: 600;
}

/* .bannetp > div> p{
    font-size: 16px;
    margin-top: 25px;
} */








.casesbj{
    background-color: #ffffff;
}
.cases-ok{
    display: flex;
    flex-wrap: wrap;
    padding: 80px 0 120px;
}
.cases-ok a {
    width: 19%;
    margin: 5px;
}
.cases-ok a img{
    width: 100%;
    transition: all .3s;
    box-shadow: 0 5px 10px 2px #f5f5f5;
    border: 1px solid #eeeeee;
    border-radius: 10px;
}
.cases-ok a:hover img{
    transform: scale(1.1);
}











@media screen and (max-width:768px) {
    .bannetp {
        width: 100%;
        height: 20vh;
        position: relative;
    }

    .bannetp>img {
        width: 100%;
        height: 100%;
    }

    .bannetp>div {
        position: absolute;
        top: 50%;
        left: 10%;
        transform: translateY(-50%);
        z-index: 99;
        color: #ffffff;
    }

    .bannetp>div>h1 {
        font-size: .5rem;
        font-weight: 600;
    }

    /* .bannetp > div> p{
        font-size: .16rem;
        margin-top: .25rem;
    }
     */






    .cases-ok{
        display: flex;
        flex-wrap: wrap;
        padding: .4rem 0 1.2rem;
    }
    .cases-ok a {
        width: 30%;
        margin: .1rem;
    }
    .cases-ok a img{
        width: 100%;
        transition: all .3s;
    }
    .cases-ok a:hover img{
        transform: scale(1.1);
    }




}