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

    main-m {
        display: none;
    }

    .top {
        display: flex;
        width: 100%;
        height: 100vh;
        background-color: #59a509;
        margin-top: -100px;
        flex-direction: row;
    }

    .w1 {
        display: flex;
        width: 50%;
        height: inherit;
        background-color: aliceblue;
        justify-content: center;
        background-size: cover;
    }

    .w11 {
        background: url(../image/bg1.png) no-repeat top center;
        background-position: top center;
        background-size: cover;
    }

    .w144 {
        /* background: url(../image/bg1.png) no-repeat top center; */
        background-position: top center;
        background-size: cover;
    }

    .w12 {
        background: url(../image/bg2.png) no-repeat center;
        background-size: cover;
    }

    .w13 {
        background: url(../image/bg3.png) no-repeat center;
        background-size: cover;
    }

    .w14 {
        background: url(../image/bg4.png) no-repeat center;
        background-size: cover;
    }

    .w1 img {
        width: 100%;
    }

    .w2 {
        position: relative;
        display: flex;
        width: 50%;
        color: #fff;
        flex-direction: column;
    }

    .w21 {
        background: url(../image/right1.png) no-repeat center;
    }

    .w22 {
        background-color: #8b96a9;
    }

    .w23 {
        background-color: #34599a;
    }

    .w2 .watermarks {
        position: absolute;
    }

    .watermarks1 {
        width: 513px;
        height: 53px;
        background: url(../image/w1.png) no-repeat center;
        margin-top: calc(19vh - 4.0rem);
        left: 0px;
        background-size: 65%;
    }

    .watermarks2 {
        width: 507px;
        height: 53px;
        background: url(../image/w2.png) no-repeat center;
        margin-top: calc(19vh - 4.0rem);
        left: 28px;
        background-size: 65%;
    }

    .watermarks3 {
        width: 377px;
        height: 53px;
        background: url(../image/w3.png) no-repeat center;
        margin-top: calc(19vh - 4.0rem);
        left: 35px;
        background-size: 65%;
    }

    .watermarks4 {
        width: 676px;
        height: 53px;
        background: url(../image/w4.png) no-repeat center;
        margin-top: calc(19vh - 4.0rem);
        left: 0px;
        background-size: 65%;
    }

    .w2 .title {
        /* font-size: 4rem; */
        font-size: 2.3vw;
        font-weight: bold;
        margin-left: 8%;
        margin-top: 17vh;
        letter-spacing: .2rem;
    }

    .w2 .p {
        width: 75%;
        font-size: 1.4rem;
        line-height: 2.5rem;
        letter-spacing: .1rem;
        margin-left: 8%;
    }

    .w2 .p1 {
        margin-top: 4vh;
    }

    .w2 .p2 {
        margin-top: 3vh;
    }

    .w2 .items {
        display: flex;
        margin-top: 3vh;
        flex-direction: column;
        margin-left: 8%;
    }

    .w2 .item {
        position: relative;
        font-size: 1.4rem;
        margin-top: 1vh;
        padding-left: 15px;
    }

    .level1::before {
        content: '';
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        top: 10px;
        left: 0px;
        border-radius: 50%;
    }

    .level1::before {
        background: #fff;
    }

    /* content */

    .content {
        display: flex;
        width: 100%;
        background-color: #f3f4f7;
        justify-content: 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: 9999;
    }

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

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

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

    .details .title2 {
        margin-left: -14px;
    }

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

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

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

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

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

    main-m {
        display: none;
    }

    .top {
        display: flex;
        width: 100%;
        height: 100vh;
        background-color: #59a509;
        /* background-color: red; */
        margin-top: -100px;
        flex-direction: row;
    }

    .w1 {
        display: flex;
        width: 50%;
        height: inherit;
        background-color: aliceblue;
        justify-content: center;
        background-size: cover;
    }

    .w11 {
        background: url(../image/bg1.png) no-repeat top center;
        background-position: top center;
        background-size: cover;
    }

    .w144 {
        /* background: url(../image/bg1.png) no-repeat top center; */
        background-position: top center;
        background-size: cover;
    }

    .w12 {
        background: url(../image/bg2.png) no-repeat center;
        background-size: cover;
    }

    .w13 {
        background: url(../image/bg3.png) no-repeat center;
        background-size: cover;
    }

    .w14 {
        background: url(../image/bg4.png) no-repeat center;
        background-size: cover;
    }

    .w1 img {
        width: 100%;
    }

    .w2 {
        position: relative;
        display: flex;
        width: 50%;
        color: #fff;
        flex-direction: column;
    }

    .w21 {
        background: url(../image/right1.png) no-repeat center;
    }

    .w22 {
        background-color: #8b96a9;
    }

    .w23 {
        background-color: #34599a;
    }

    .w2 .watermarks {
        position: absolute;
    }

    .watermarks1 {
        width: 257px;
        height: 27px;
        background: url(../image/w1-1400.png) no-repeat center;
        margin-top: calc(19.5vh - 4.0rem);
        left: 50px;
        background-size: 90%;
    }

    .watermarks2 {
        width: 254px;
        height: 27px;
        background: url(../image/w2-1400.png) no-repeat center;
        margin-top: calc(19.5vh - 4.0rem);
        left: 50px;
        background-size: 90%;
    }

    .watermarks3 {
        width: 189px;
        height: 27px;
        background: url(../image/w3-1400.png) no-repeat center;
        margin-top: calc(19.5vh - 4.0rem);
        left: 50px;
        background-size: 90%;
    }

    .watermarks4 {
        width: 338px;
        height: 27px;
        background: url(../image/w4-1400.png) no-repeat center;
        margin-top: calc(19.5vh - 4.0rem);
        left: 50px;
        background-size: 90%;
    }

    .w2 .title {
        /* font-size: 4rem; */
        font-size: 2.3vw;
        font-weight: bold;
        margin-left: 8%;
        margin-top: 15vh;
        letter-spacing: .2rem;
    }

    .w2 .p {
        /* width: 75%; */
        width: 82%;
        font-size: 1.4rem;
        line-height: 2.5rem;
        letter-spacing: .1rem;
        margin-left: 8%;
    }

    .w2 .p1 {
        margin-top: 4vh;
    }

    .w2 .p2 {
        margin-top: 3vh;
    }

    .w2 .items {
        display: flex;
        margin-top: 3vh;
        width: 80%;
        margin-left: 8%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .w2 .item {
        position: relative;
        font-size: 1.4rem;
        margin-top: 8px;
        padding-left: 15px;
        width: 50%;
    }

    /* .w2 .item:nth-child(2n) {
        margin-bottom: 8%;
    } */

    .level1::before {
        content: '';
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        top: 10px;
        left: 0px;
        border-radius: 50%;
    }

    .level1::before {
        background: #fff;
    }

    /* content */

    .content {
        display: flex;
        width: 100%;
        background-color: #f3f4f7;
        justify-content: 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: 9999;
    }

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

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

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

    .details .title2 {
        margin-left: -14px;
    }

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

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

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

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


@media only screen and (max-width: 750px) {

    main {
        display: none;
    }

    main-m {
        display: block;
    }


    .top {
        display: flex;
        width: 100%;
        background-color: #59a509;
        flex-direction: column;
        margin-top: -70px;
    }

    .img-bg {
        width: 100%;
        background-size: cover;
        object-fit: cover;
        /* margin-top: -80px; */
    }

    .w1 {
        display: flex;
        width: 100%;
        height: 200vw;
        background-color: aliceblue;
        justify-content: center;
        margin-top: -100px;
        /* background-size: contain; */
    }

    .w11 {
        background: url(../image/bg1.png) no-repeat center;
    }

    .w12 {
        background: url(../image/bg2.png) no-repeat center;
    }

    .w13 {
        background: url(../image/bg3.png) no-repeat center;
    }

    .w14 {
        background: url(../image/bg4.png) no-repeat center;
    }

    .w1 img {
        width: 100%;
    }

    .w2 {
        position: relative;
        display: flex;
        width: 100%;
        color: #fff;
        flex-direction: column;
        padding-bottom: 50px;
    }

    .w21 {
        background: url(../image/right1.png) no-repeat center;
    }

    .w22 {
        background-color: #8b96a9;
    }

    .w23 {
        background-color: #34599a;
    }

    .w2 .watermarks {
        position: absolute;
    }

    .watermarks1 {
        width: 100%;
        height: 53px;
        background: url(../image/w1.png) no-repeat center;
        margin-top: calc(10vh - 4rem);
        left: 0px;
        background-size: 73%;
    }

    .watermarks2 {
        /* width: 507px;
        height: 53px; */
        width: 100%;
        height: 53px;
        background: url(../image/w2.png) no-repeat center;
        margin-top: calc(10vh - 4.0rem);
        left: 0px;
        background-size: 62%;
    }

    .watermarks3 {
        /* width: 377px; */
        /* height: 53px; */
        width: 100%;
        height: 53px;
        background: url(../image/w3.png) no-repeat center;
        margin-top: calc(10vh - 4.0rem);
        left: 0px;
        background-size: 55%;
    }

    .watermarks4 {
        /* width: 676px;
        height: 53px; */
        width: 100%;
        height: 53px;
        background: url(../image/w4.png) no-repeat center;
        margin-top: calc(10vh - 4.0rem);
        left: 0px;
        /* background-size: 62%; */
        background-size: 70%;

    }

    .w2 .title {
        font-size: 2.5rem;
        font-weight: bold;
        margin-left: 8%;
        margin-top: 7vh;
        letter-spacing: .2rem;
    }

    .w2 .p {
        width: 90%;
        font-size: 1.4rem;
        line-height: 2.5rem;
        letter-spacing: .1rem;
        /* margin-left: 8%; */
        margin: 0 auto;
    }

    .w2 .p1 {
        margin-top: 4vh;
    }

    .w2 .p2 {
        margin-top: 3vh;
    }

    .w2 .items {
        display: flex;
        margin-top: 3vh;
        flex-direction: column;
        margin-left: 8%;
    }

    .w2 .item {
        position: relative;
        font-size: 1.4rem;
        margin-top: 1vh;
        padding-left: 15px;
    }

    .level1::before {
        content: '';
        display: block;
        position: absolute;
        width: 6px;
        height: 6px;
        top: 10px;
        left: 0px;
        border-radius: 50%;
    }

    .level1::before {
        background: #fff;
    }

    /* content */

    .content {
        display: flex;
        width: 100%;
        background-color: #fff;
        justify-content: center;
        margin-top: 30px;
        padding-bottom: 30px;
    }

    .wp {
        display: flex;
        width: 90%;
        flex-direction: column;
        justify-content: flex-start;
    }

    .img-box {
        width: 100%;
    }

    .details-box {
        display: flex;
        width: 100%;
        background-color: #fff;
        justify-content: center;
        align-items: center;
        /* margin-top: 20px; */
        margin-top: 40px;
    }

    .details {
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .details .title {
        font-size: 1.4rem;
        color: #101010;
        font-weight: bold;
        text-align: center;
        margin-top: 5px;
    }

    .details .title2 {
        margin-left: -14px;
    }

    .details .info {
        font-size: 1.3rem;
        width: 95%;
        line-height: 2.5rem;
        margin: 0 auto;
        margin-top: 30px;
    }

    .details .info1 {
        font-size: 1.3rem;
        margin-top: 30px;
        width: 80%;
        margin-left: 8px;
        text-align: center;
    }

    .details .info2 {
        font-size: 1.3rem;
        margin-top: 20px;
        width: 80%;
        margin-left: 8px;
        text-align: center;
    }

    .details .info3 {
        font-size: 1.3rem;
        margin-top: 20px;
        width: 80%;
        margin-left: 8px;
        text-align: center;
    }

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