@media screen and (min-width: 1900px) {
    .container {
        max-width: 1230px;
    }
}

@media screen and (max-width: 1600px) {
}

@media screen and (max-width: 1400px) {
    .container {
        max-width: 1190px;
    }
    header ul.navbar-nav li a {
        padding: 8px 8px;
        font-size: 13px;
    }

    .chairman::before {
        width: 1254px;
    }

    .chairman::after {
        width: 1254px;
    }

    .jobs .categ ul li h5 {
        font-size: 14px;
    }

    section.jobs {
        padding: 25px 10px;
    }

    footer .fo-contact .foc-wrap .cal-nums a,
    footer .fo-contact .foc-wrap .cal-nums p {
        font-size: 14px;
    }

    footer .cpyr p {
        font-size: 12px;
    }

    li.jobactive {
        flex: 6;
        background: rgba(0, 0, 0, 0.8);
    }

    .navbar-expand-lg .navbar-nav {
        
        flex-wrap: wrap;
    }
}


@media screen and (max-width: 1024px) {
    li.jobactive {
        flex: 6;
        background: rgba(0, 0, 0, 0.8);
    }
}


@media screen and (min-width: 800px) {
    
    .navbar-expand-lg .navbar-nav.mb-hide {
        
        flex-direction: row;
        flex-wrap: nowrap;
    }
}

@media screen and (max-width: 800px) {
    header {
        backdrop-filter: none;
        background: #fff;
    }

    header .navbar-collapse {
        height: 100vh;
        padding-top: 40px;
    }

    ul.navbar-nav.mb-hide {
        display: none;
    }

    ul.navbar-nav.mb-show {
        display: block !important;
    }

    .jobs .categ {
        height: auto;
    }

    .jobs .categ ul {
        display: block;
    }

    .jobs .categ ul li {
        width: 100%;
        height: auto;
        padding: 20px 50px;
        text-align: left;
        display: block;
    }

    header ul li:hover .sub_menu {
        display: block;
    }

    header .sub_menu {
        position: relative;
        top: auto;
        width: auto;
        padding-top: 0;
    }

    header .sub_menu .wrap {
        background: transparent;
        border: 0;
        padding-bottom: 0;
    }

    header ul.navbar-nav li.nav-item.apl-now.hotline {
        max-width: 100%;
    }
}

@media screen and (max-width: 730px) {
    .fo-logo {
        text-align: center;
        margin-bottom: 20px;
    }

    footer .fo-contact {
        float: none;
    }
    footer .fo-contact .foc-wrap {
        justify-content: center;
    }

    .chairman::before {
        height: 250px;
        width: 100%;
    }

    .chairman::after {
        bottom: 29%;
        width: 100%;
    }
    section.job-lists .jl-wrap:nth-child(even) .col-md-6:first-child {
        order: inherit;
    }

    section.job-lists .jl-img img {
        margin-bottom: 30px;
        height: 260px;
    }

    .banner .bbag .banner-text h1 {
        width: 600px;
        font-size: 27px;
    }

    button.navbar-toggler {
        position: relative;
        z-index: 2;
    }

    ul.navbar-nav {
        width: 100%;

        justify-content: center;
        align-items: center;
        position: relative;
    }

    ul.navbar-nav li {
        margin: 16px 0;

        line-height: 1;
    }

    ul.navbar-nav li a {
        font-size: 18px !important;
        font-weight: 700 !important;
    }

    .contact .map iframe {
        margin: 50px 0;
    }

    .banner .bbag::before,
    .banner .bbag::after {
        display: none;
    }

    header ul.navbar-nav li:last-child a {
        padding-right: 15px;
    }
}

@media screen and (max-width: 480px) {
    .banner .bbag .banner-text {
        display: block;
    }

    .banner .bbag .banner-text h6 {
        letter-spacing: 0;
        font-size: 12px;
    }

    header ul.navbar-nav li.nav-item.apl-now a {
        display: block;
        text-align: center;
        padding: 20px;
    }

    ul.navbar-nav li {
        margin: 16px 0;
        line-height: 1;
        width: 100%;
        border-bottom: 1px solid #cdcdcd;
        padding: 0px 0 25px;
    }

    header ul.navbar-nav li.nav-item.apl-now.hotline a {
        width: 100%;
        padding: 20px;
    }

    .banner .bbag .banner-text .detail {
        margin-bottom: 40px;
    }

    .chairman::before {
        height: 280px;
    }

    .chairman::after {
        bottom: 26%;
    }

    section.clients.client-page .client-wrap .client-sing {
        width: 50%;
    }

    .banner .bbag .banner-text h1 {
        width: 300px;
        font-size: 32px;
    }

    .banner .bbag .banner-text h6::before {
        width: 40px;
        left: -20px;
    }

    .banner .bbag .banner-text h6::after {
        width: 40px;
        right: -20px;
    }

    .banner .bbag::before,
    .banner .bbag::after {
        height: 80%;
    }

    footer .cpyr p span {
        display: block;
    }

    .intro-about img {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 398px) {
    .client-sing {
        width: 48%;
    }
}