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

    main {
        display: block;
    }

    main-m {
        display: none;
    }

    body {
        background-color: #f1f6f9;
    }

    main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        background-color: #f1f6f9;
    }

    .contact {
        display: flex;
        position: relative;
        width: 100%;
        background: url(../image/bg5.png) no-repeat top center;
        background-size: 100% 100%;
        height: 32.812vw;
        background-size: 100% 100%;
        justify-content: center;
        align-items: center;
        margin-top: -100px;
    }

    .contact .box {
        display: flex;
        width: 80%;
        height: 600px;
        /* background-color: red; */
        margin-top: 500px;
        flex-direction: row;
        justify-content: center
    }

    .box .head {
        display: flex;
        flex-direction: column;
        width: 55%;
        height: auto;
        justify-content: center;
        align-items: center;
    }

    .box .title {
        /* font-size: 1.5rem; */
        font-size: 1.4rem;
        width: 55%;
        line-height: 3.5rem;
        margin-top: 30px;
        font-weight: bold;
    }

    .box .container {
        display: flex;
        width: 45%;
        height: auto;
        /* background-color: yellow; */
        justify-content: flex-start;
        align-items: center;
    }

    .box .form {
        display: flex;
        width: 400px;
        background-color: #fff;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #fff;
        padding: 20px 20px 50px 20px;
        border-radius: 5px;
        box-shadow: 0 50px 100px 0 rgb(9 44 66 / 10%);
    }

    .form .item {
        display: flex;
        width: 88%;
        justify-content: flex-start;
        flex-direction: column;
        margin-top: 20px;
        margin-left: 6%;
    }

    .name {
        width: 100%;
        /* font-size: 1.1rem; */
        font-size: 1.2rem;
    }

    .field {
        height: 40px;
        padding: 0 0 0 15px;
        border: 1px solid rgba(9, 44, 66, 0.1);
        width: 100%;
        border-radius: 4px;
        font-size: 1.1rem;
        margin-top: 8px;
    }

    .text-mulit {
        padding: 15px;
        margin-top: 10px;
        border: 1px solid rgba(9, 44, 66, 0.1);
    }

    .btn-submit {
        background-color: #eb6100;
        color: #fff;
        font-size: 1.1rem;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
}

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

    body {
        background-color: #f1f6f9;
    }

    main {
        display: none;
    }

    main-m {
        display: block;
    }

    main-m {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        /* margin-top: -100px; */
        background-color: #f1f6f9;
    }

    /* main-m .top {
        display: flex;
        width: 100%;
        height: 447px;
        background: url(../image/bg-m.png) no-repeat right top;
        background-size: cover;
        margin-top: -80px;
    } */

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

    .top {
        display: flex;
        margin-top: -70px;
        flex-direction: column;
        background: url(../image/bg-m.png) no-repeat;
        width: 100%;
        height: 82.5vw;
        background-size: 100% 100%;
    }

    .img-bg {
        width: 100%;
        background-size: cover;
        object-fit: cover;
    }

    .contact {
        display: flex;
        position: relative;
        width: 100%;
        height: 700px;
        background-size: contain;
        justify-content: center;
        align-items: center;
        margin-top: -100px;
        z-index: 1;
    }

    .contact .box {
        display: flex;
        width: 90%;
        /* height: 600px; */
        /* background-color: red; */
        flex-direction: column;
        justify-content: flex-end;
    }

    .box .head {
        display: flex;
        width: 100%;
        height: auto;
        justify-content: center;
        align-items: center;
    }

    .head .title1 {
        font-size: 1.3rem;
        width: 100%;
        line-height: 3.5rem;
        margin-top: 30px;
        /* font-weight: bold; */
    }

    .box .container {
        display: flex;
        width: 100%;
        height: auto;
        justify-content: flex-start;
        align-items: center;
    }

    .box .form {
        display: flex;
        width: 100%;
        background-color: #fff;
        flex-direction: column;
        justify-content: flex-start;
        background-color: #fff;
        padding: 20px 20px 50px 20px;
        border-radius: 5px;
        box-shadow: 0 50px 100px 0 rgb(9 44 66 / 10%);
    }

    .form .item {
        display: flex;
        width: 88%;
        justify-content: flex-start;
        flex-direction: column;
        margin-top: 20px;
        margin-left: 6%;
    }

    .name {
        width: 100%;
        font-size: 1.1rem;
    }

    .field {
        height: 40px;
        padding: 0 0 0 15px;
        border: 1px solid rgba(9, 44, 66, 0.1);
        width: 100%;
        border-radius: 4px;
        font-size: 1.1rem;
        margin-top: 5px;
    }

    .text-mulit {
        padding: 15px;
    }

    .btn-submit {
        background-color: #eb6100;
        color: #fff;
        font-size: 1.1rem;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
    }
}