@media screen and (min-width: 768px) {
    .container {
        width: 760px;
        margin: 0 auto;
    }

    .p30 {
        padding: 30px 0;
    }

    .ps30 {
        padding: 30px;
    }

    .m100 {
        margin: 100px 0;
    }

    .m50 {
        margin: 50px 0;
    }

    .p100 {
        padding: 100px 0;
    }

    .p50 {
        padding: 50px 0;
    }

    .grid {
        gap: 30px;
    }

    .grid2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* reset */
    /* header */
    .header-contact {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-right: 50px;
    }

    /* header */
    /* layout */
    /* section-title */
    .section-title h2 {
        font-size: 36px;
    }

    /* section-title */
    /* home-1 */
    .home-1-ul {
        grid-template-columns: repeat(5, 1fr);
        margin-top: -45px;
        padding: 15px 0;
    }

    .home-1-num {
        font-size: 26px;
    }

    .home-1-ul

    /* home-1 */
    /* home-4 */
    .home-4-partner {
        grid-template-columns: repeat(3, 1fr);
    }

    /* home-4 */
    /* layout */
    /* footer */
    .footer-item {
        flex-direction: row;
        align-items: center;
    }

    .footer-left {
        width: 300px;
    }

    /* footer */
    /* list-case */
    .caselist>li>a {
        flex-direction: row;
        align-items: center;
    }

    .caselist .img {
        width: 48%;
    }

    /* list-case */
    /* about */
    .about-1 {
        gap: 30px;
    }

    .about-4-ul>li>.time {
        flex-direction: column;
        align-items: self-start;
        width: 18%;
    }

    .about-4-ul>li {
        flex-direction: row;
    }

    /* about */
}

@media screen and (min-width: 1200px) {
    .container {
        width: 1170px;
    }

    .ps50 {
        padding: 50px;
    }

    .grid3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid5 {
        grid-template-columns: repeat(5, 1fr);
    }

    .imgtext {
        flex-direction: row;
        align-items: center;
    }

    .textimg {
        flex-direction: row-reverse;
        align-items: center;
    }

    /* reset */
    /* header */
    .nav-menu {
        display: flex;
        align-items: center;
    }

    .nav-menu>li {
        position: relative;
        z-index: 2;
    }

    .nav-menu>li>a {
        position: relative;
        text-transform: uppercase;
        display: block;
        padding: 15px 12px;
    }

    .nav-menu>li>a:hover {
        color: var(--hover-color);
    }

    .nav-menu-child>li {
        position: relative;
    }

    .nav-menu-child li a {
        display: block;
        background: var(--border-color);
        color: var(--text-color);
        text-align: center;
        padding: 10px 15px;
        border-top: 1px solid var(--hover-color);
        font-size: 14px;
    }

    .nav-menu-child li a:hover {
        background: var(--hover-color);
        color: var(--white-color);
    }

    .nav-menu>li:hover .nav-menu-child {
        position: absolute;
        z-index: 999;
        opacity: 1;
        left: 0;
        top: 100%;
        display: block;
        width: 150%;
        box-shadow: 1px 2px 21px 0 rgb(1 1 1 / 15%);
    }

    .nav-menu-child-child {
        display: none;
        box-shadow: 1px 2px 21px 0 rgb(1 1 1 / 15%);
    }

    .nav-menu-child>li:hover .nav-menu-child-child {
        display: block;
        position: absolute;
        z-index: 1111;
        width: 100%;
        top: 0;
        left: 100%;
    }

    .header-contact {
        margin-right: 0;
    }

    /* header */
    /* layout */
    /* section-title */
    .section-title {
        max-width: 50%;
        margin: 0 auto;
        margin-bottom: 50px;
    }

    /* section-title */
    /* home-1 */
    .home-1-ul {
        margin-top: -70px;
    }

    .home-1-num {
        font-size: 36px;
    }

    /* home-1 */
    /* home-3 */
    .home-3-content {
        gap: 50px;
    }

    .home-3-content .textimg-img {
        width: 45%;
    }

    /* home-3 */
    /* home-4 */
    .home-4-partner {
        grid-template-columns: repeat(5, 1fr);
    }

    /* home-4 */
    /* layout */
    /* footer */
    .footer-left::before {
        content: "";
        display: inline-block;
        height: 0px;
        border: 28px solid transparent;
        border-left-color: var(--hover-color);
        margin-left: 15px;
        transition: all .36s;
        top: -28px;
        right: -28px;
        position: absolute;
        transform: rotate(135deg);
    }

    .footer-left::after {
        content: '';
        background: var(--hover-color);
        position: absolute;
        z-index: -1;
        top: -40px;
        left: 0;
        height: calc(100% + 40px);
        width: 100%;
        box-shadow: -1px 0 5px var(--main-color);
    }

    .footer-right-top {
        flex-direction: row;
    }

    /* footer */
    /* page-banner */
    .page-banner-content {
        gap: 50px;
    }

    .page-banner-content .textimg-img {
        width: 40%;
    }

    /* page-banner */
    /* index-products */
    .indexpro-list-item1 .card {
        flex-direction: row;
    }

    /* index-products */
    /* list-case */
    .caselist .img {
        width: 40%;
    }

    /* list-case */
    /* single-product */
    .page {
        flex-direction: row-reverse;
        gap: 30px;
    }

    .sidebar {
        width: 25%;
    }

    .toppro-content {
        flex-direction: row;
        align-items: center;
        gap: 30px;
    }

    .toppro-img {
        width: 45%;
    }

    /* single-product */
    /* about */
    .about-1 {
        gap: 50px;
    }

    .about-1 .textimg-img {
        width: 45%;
    }

    /* about */
    /* contact */
    .contact-ul {
        gap: 30px;
        grid-template-columns: repeat(4, 1fr);
    }

    .contact-ul>li {
        padding: 30px;
    }

    /* contact */
}

@media screen and (min-width: 1430px) {
    .container {
        width: 1400px;
    }

    /* reset */
}