@media only screen and (min-width:750px) and (max-width: 1920px) {
    main {
        display: block;
    }

    main-m {
        display: none;
    }

    .top {
        display: flex;

        /* width: 100%; */
        /* height: 687px; */
        margin-top: -100px;
        flex-direction: column;
        /* background: url(../images/about/bg.png) no-repeat center; */

        background: url(../image/bg8.png) no-repeat;
        width: 100%;
        height: 35.78vw;
        background-size: 100% 100%;


        justify-content: center;
        align-items: flex-start;
    }

    /* .top .about-title {
        margin-left: 10vw;
        font-size: 2.4vw;
        font-weight: bold;
        color: #fff;
        letter-spacing: .3rem;
        margin-top: 18rem;
    } */


    .watermarks {
        width: 569px;
        height: 54px;
        background: url(../image/watermarks.png) no-repeat center;
        background-size: 80%;
        margin-left: -2vw;
        margin-top: 10vw;
    }

    .case-title {
        margin-left: 10vw;
        margin-top: -25px;
        /* font-size: 4rem; */
        font-size: 2.4vw;
        font-weight: bold;
        color: #fff;
        letter-spacing: .3rem;
    }

    .case-sub-title {
        /* font-size: 2.7rem; */
        font-size: 1.6vw;
        color: #fff;
        margin-left: 10vw;
        margin-top: 11px;
    }

    .content {
        display: flex;
        width: 100%;
        background-color: #f3f4f7;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding-top: 140px;
        padding-bottom: 200px;
    }

    .wp {
        position: relative;
        display: flex;
        width: 1250px;
        height: 650px;
        /* background-color: #59a509; */
        flex-direction: row;
        justify-content: flex-end;
    }

    .img-box {
        position: absolute;
        width: 42%;
        left: 0;
        bottom: -60px;
        z-index: 9;
    }

    .details-box {
        display: flex;
        width: 85%;
        background-color: #fff;
        justify-content: flex-end;
        align-items: center;
    }

    .details {
        width: 50%;
        margin-top: -30px;
    }

    .title {
        font-size: 2rem;
        color: #101010;
        font-weight: bold;
    }

    .title2 {
        margin-left: -14px;
        margin-top: 5px;
    }

    .info {
        /* font-size: 1.5rem; */
        font-size: 1.4rem;
        margin-top: 30px;
        width: 80%;
        line-height: 2.5rem;
    }

    .info1 {
        font-size: 1.5rem;
        margin-top: 40px;
        width: 80%;
    }

    .info2 {
        font-size: 1.5rem;
        margin-top: 20px;
        width: 80%;
    }

    .info3 {
        font-size: 1.5rem;
        margin-top: 20px;
        width: 80%;
    }

    .btn-more {
        width: 145px;
        height: 46px;
        line-height: 42px;
        border: 2px solid #eb6100;
        font-size: 1.4rem;
        text-align: left;
        background: url(../image/right_white_30.png) no-repeat right;
        background-color: #eb6100;
        background-size: 8%;
        background-position: 86% 52%;
        padding-left: 20px;
        font-weight: 500;
        color: #fff;
        margin-top: 50px;
        cursor: pointer;
    }

    .img-box1 {
        position: absolute;
        width: 42%;
        right: 0;
        bottom: -60px;
        z-index: 9999;
    }

    .details-box1 {
        display: flex;
        width: 85%;
        background-color: #fff;
        justify-content: flex-start;
        align-items: center;
    }

    .details1 {
        width: 50%;
        margin-top: -30px;
        margin-left: 10vw;
    }

}

/* 小于750的时候显示 */
@media only screen and (max-width: 750px) {
    main-m {
        display: block;
    }

    main {
        display: none;
    }

    .top-m {
        display: flex;
        width: 100%;
        height: 400px;
        background: url(../image/bg8.png) no-repeat left center;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-size: cover;
        margin-top: -80px;
    }

    .top-m .watermasks{
        width: 285px;
        height: 27px;
        background: url(../image/watermarks1.png) no-repeat center;
        background-size: 80%;
        margin-top: 5vh;
        margin-left: 6vw;
    }

    .top-m .about-title {
        margin-left: 10%;
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        letter-spacing: .2rem;
        margin-top: -.5rem;
    }
    
    .top-m .about-sub-title1 {
        width: 80%;
        font-size: 1.4rem;
        color: #fff;
        margin-left: 10%;
        margin-top: 10px;
    }

    .top-m .about-sub-title2 {
        width: 80%;
        font-size: 1.5rem;
        color: #fff;
        margin-left: 10%;
        margin-top: 10px;
    }


    .wp {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        margin-top: 10vh;
    }
    

    .img-box {
        width: 100%;
        margin: 0 auto;
    }

    .details-box {
        display: flex;
        width: 90%;
        background-color: #fff;
        justify-content: flex-end;
        align-items: center;
        margin: 0 auto;
        margin-top: -15vh;
        flex-direction: column;
        box-shadow: 0 50px 100px 0 rgb(9 44 66 / 10%);
        padding-bottom: 25px;
    }

    .title {
        font-size: 1.5rem;
        color: #101010;
        font-weight: bold;
    }

    .title1 {
        margin-top: 30px;
    }

    .title2 {
        margin-top: 10px;
    }

    .info {
        font-size: 1.3rem;
        margin-top: 30px;
        width: 80%;
        text-align: center;
        line-height: 2rem;
    }

    .info1 {
        font-size: 1.3rem;
        margin-top: 40px;
        width: 80%;
    }

    .info2 {
        font-size: 1.3rem;
        margin-top: 20px;
        width: 80%;
    }

    .info3 {
        font-size: 1.5rem;
        margin-top: 20px;
        width: 80%;
    }

    .btn-more {
        width: 80px;
        line-height: 42px;
        font-size: 1.3rem;
        text-align: left;
        background: url(../image/arrow-right.png) no-repeat right;
        background-size: 20%;
        background-position: 100% 50%;
        font-weight: 500;
        color: #eb6100;
        margin-top: 20px;
        cursor: pointer;
    }
}