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

    main {
        display: block;
    }

    .top {
        display: flex;

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

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


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

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

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

    .about-intro {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 120px 0 100px 0;
        background-color: #f3f7fe;
    }

    .about-intro .content {
        display: flex;
        width: 60%;
        flex-direction: column;
        justify-content: space-between;
    }

    .about-intro .p {
        /* font-size: 1.6rem; */
        font-size: 1.4rem;
        line-height: 40px;
    }

    .about-intro .p2 {
        margin-top: 30px;
    }


    .intro1 {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 120px 0;
    }

    .intro1 .content1 {
        display: flex;
        width: 60%;
        flex-direction: row;
        justify-content: space-between;
    }

    .intro1 .p3 {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42%;
    }

    .intro1 .p3-p {
        width: 100%;
        /* font-size: 1.6rem; */
        font-size: 1.4rem;
        line-height: 4rem;
        margin-top: 0px;
    }

    .intro1 .img-box {
        width: 50%;
    }

    .img-box img {
        width: 100%;
    }

    .slogans {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 40px 0 100px 0;
        background-color: #f3f7fe;
    }

    .slogans .item {
        position: relative;
        display: flex;
        width: 60%;
        flex-direction: column;
        margin-top: 90px;
    }

    .slogans .title {
        font-size: 2rem;
        font-weight: bold;
    }

    .slogans .watermarks1 {
        position: absolute;
        left: -130px;
        top: -31px;
        width: 493px;
        height: 56px;
        background: url(../image/1.png) no-repeat center;
        background-size: 69%;
    }

    .slogans .watermarks2 {
        position: absolute;
        /* left: -109px; */
        left: -104px;
        top: -31px;
        /* width: 261px; */
        /* height: 56px; */
        width: 315px;
        height: 56px;
        background: url(../image/4.png) no-repeat center;
        /* background: url(../images/about/2.png) no-repeat center; */
        background-size: 69%;
    }

    .slogans .watermarks3 {
        position: absolute;
        left: -97px;
        top: -31px;
        width: 255px;
        height: 56px;
        background: url(../image/3.png) no-repeat center;
        background-size: 69%;
    }

    .slogans .detail {
        font-size: 1.4rem;
        margin-top: 15px;
    }
}

@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/bg.png) no-repeat left top;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        background-size: cover;
        margin-top: -80px;
    }

    .top-m .about-title {
        margin-left: 10%;
        /* font-size: 2.5rem; */
        font-size: 2rem;
        font-weight: bold;
        color: #fff;
        letter-spacing: .2rem;
        margin-top: 18rem;
    }

    .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;
    }

    .about-intro-m {
        display: flex;
        width: 100%;
        justify-content: center;
        padding: 30px 0;
    }

    .about-intro-m .content {
        display: flex;
        flex-direction: column;
        width: 80%;
    }

    .about-intro-m .p {
        font-size: 1.3rem;
        line-height: 2.2rem;
    }

    .about-intro-m .p2 {
        margin-top: 20px;
    }

    .intro-m {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: center;
        padding: 30px 0;
        background-color: #f3f7fe;
    }

    .intro-m .content1 {
        display: flex;
        flex-direction: column;
        width: 80%;
    }

    .intro-m .img-box {
        width: 100%;
    }

    .img-box img {
        width: 100%;
    }

    .intro-m .p3 {
        width: 100%;
        margin-top: 20px;
    }

    .intro-m .p3-p {
        font-size: 1.3rem;
        line-height: 2.2rem;
    }

    .slogans-m {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
        padding: 40px 0 100px 0;
    }

    .slogans-m .item {
        position: relative;
        display: flex;
        width: 70%;
        flex-direction: column;
        margin-top: 90px;
    }

    .slogans-m .title {
        /* font-size: 1.7rem; */
        font-size: 1.5rem;
        font-weight: bold;
    }

    .slogans-m .watermarks1 {
        position: absolute;
        left: -102px;
        top: -40px;
        width: 350px;
        height: 66px;
        background: url(../image/1.png) no-repeat center;
        background-size: 68%;
    }

    .slogans-m .watermarks2 {
        position: absolute;
        left: -120px;
        top: -31px;
        /* width: 261px; */
        /* height: 56px; */
        /* background: url(../images/about/2.png) no-repeat center; */
        width: 315px;
        height: 56px;
        background: url(../image/4.png) no-repeat center;
        background-size: 54%;
    }

    .slogans-m .watermarks3 {
        position: absolute;
        left: -109px;
        top: -31px;
        width: 255px;
        height: 56px;
        background: url(../image/3.png) no-repeat center;
        background-size: 54%;
    }

    .slogans-m .detail {
        font-size: 1.3rem;
        margin-top: 15px;
    }
}