@media only screen and (max-width: 999px) {
    .container {
        width: 95%;
    }
    footer .footer__bottom p {
        margin-left: 1%;
    }

    /* ========== MAIN-PAGE ========= */
    .main .box-blue2 {
        top: 330px;
    }
}

@media only screen and (max-width: 768px) {
    .btn {
        width: 180px;
        height: auto;
        font-size: 13px;
        line-height: 1.8;
        padding: 5px;
    }
    .btn2 {
        max-width: 350px;
        width: 100%;
    }
    .btn-transparent {
        line-height: 24px;
    }
    .main .box {
        top: 80%;
        width: 85%;
        margin: 0 7.5%;
        height: initial;
        padding-bottom: 30px;
    }

    /*========= CODE CSS ==========*/
    /* MENU */
    #menu__header {
        display: none;
    }
    #menu__footer {
        display: flex;
        width: 100%;
        flex-wrap: wrap;
        margin-top: 30px;
        text-align: center;
        justify-content: center;
    }
    #menu__footer li {
        line-height: 30px;
        width: 30%;
    }
    #menu__mobile {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: 30%;
        overflow-y: auto;
        margin: 60px 0;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        -webkit-transition-duration: .5s;
        -o-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-transition-delay: 0s;
        -o-transition-delay: 0s;
        transition-delay: 0s;
        -webkit-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transform-origin: right center;
        -ms-transform-origin: right center;
        transform-origin: right center;
    }
    #menu__mobile li a {
        width: 100%;
        padding: 10px 0;
        z-index: 4;
        color: #fff;
    }
    #menu__mobile li a span {
        display: block;
    }
    #menu__mobile li a:focus {
        background: #fff;
        color: #0268cc;
    }
    .menu a::after {
        display: none;
    }
    .menu__btn {
        display: block;
        position: fixed;
        top: 15px;
        right: 20px;
        width: 25px;
        height: 25px;
        z-index: 4;
    }
    .home .bar {
        background: #fff;
    }
    .navbar-fixed-top.active .bar {
        background: #333;
    }
    .bar {
        position: absolute;
        top: 0;
        left: 0;
        width: 20px;
        height: 3px;
        background: #333;
        border-radius: 20px;
        -webkit-transition: all .5s;
        -o-transition: all .5s;
        transition: all .5s;
        -webkit-transform-origin: left top;
        -ms-transform-origin: left top;
        transform-origin: left top;
    }
    .middle {
        width: 30px;
        top: 10px;
    }
    .bottom {
        width: 25px;
        top: 20px;
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;
    }
    .close-menu {
        display: block;
        position: fixed;
        top: 0;
        width: 0;
        height: 100vh;
        background:  transparent;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: .5s;
        transition-duration: .5s;
        -webkit-transition-delay: 0s;
        transition-delay: 0s;
        visibility: hidden;
        opacity: 0;
    }
    .close-menu-left {
        left: 0;
    }
    .close-menu-right {
        right: 0;
    }

    .checkbox:checked~#menu__mobile {
        -webkit-transition-delay: .3s;
        -o-transition-delay: .3s;
        transition-delay: .3s;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1;
        z-index: 3;
        margin-right: 15%;
    }
    .checkbox:checked~.menu__btn .bar {
        background: #fff;
    }
    .checkbox:checked~.menu__btn .top {
        width: 30px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .checkbox:checked~.menu__btn .middle {
        opacity: 0;
    }
    .checkbox:checked~.menu__btn .bottom {
        width: 30px;
        top: 20px;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .checkbox:checked ~ .close-menu {
        -webkit-transition-duration: 0.5s;
        transition-duration: 0.5s;
        -webkit-transition-delay: .3s;
        transition-delay: .3s;
        background: transparent;
        visibility: visible;
        opacity: 1;
        z-index: 2;
        width: 40%;
    }
    .checkbox:checked ~ .close-menu-right {
        width: 60%;
        background: rgba(0, 0, 0, 0.8);
    }

    /* HEADER */
    header .container {
        padding: 10px 0;
    }
    /* FOOTER */
    footer .footer__top {
        display: block;
        margin: 55px 0 15px;
    }
    footer .footer__top .footer__logo {
        width: 100%;
        margin: 0 auto;
    }
    footer .footer__top .footer__logo img {
        /* min-width: 126px; */
    }
    footer .footer__bottom {
        -webkit-justify-content: space-around;
        -ms-flex-pack: distribute;
        justify-content: center;
        padding: 0 0 40px;
    }
    footer .footer__bottom a {
        font-size: 13px;
        margin: 0 10px 10px;
    }
    #copyright {
        text-align: center;
    }
    /* SECTION IN MAIN */
    #s1 .s1__video video {
        width: auto !important;
        height: 100vh !important;
        object-fit: unset;
    }
    #s2, #s3, #s4 {
        width: 100%;
    }
    #s2 {
        padding-top: 75px;
    }
    #s2 h2,#s3 h2,#s4 h2{
        font-size: 1.2rem;
    }
    #s2 h2, #s2 p {
        color:#fff;
    }
    .main .box-blue1 {
        background: rgba(2, 104, 204, 0.5);
    }
    #s3 {
        margin-top: 230px;
    }
    #s2 img,
    #s3 img{
        display: block;
        margin: 0 auto;
        max-width: unset;
        max-height: unset;
    }

    #s4 {
        margin-top: 250px;
    }
    #s4 .box-blue3 {
        bottom: unset;
    }
    #s5 {
    background-attachment: scroll;
    }
    .main #s5 {
        margin-top: 124px;
    }
    #s5 h2 {
        padding: 61px;
    }
    #s5 p {
        margin: 22px 0 40px;
    }
    #s5 .btn {
        line-height: 1;
        margin-bottom: 77px;
        border: 1px solid #FFF;
        width: 200px;
        padding: 13px 0;
    }
    /* ============ CSS for all page ============ */
    #message,
    #recruit,
    #contact,
    #policy,
    #service {
        margin-top: 75px;
    }
    #service-s1,
    #recruit-s1,
    #contact-s1,
    #policy-s1,
    #message-s1 {
        padding: 0 0 40px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        flex-direction: column-reverse;
    }
    #service-s1 .s1-img,
    #recruit-s1 .s1-img,
    #contact-s1 .s1-img,
    #policy-s1 .s1-img,
    #message-s1 .s1-img {
        width: 100%;
    }
    #service-s1 .s1-img1,
    #recruit-s1 .s1-img1,
    #contact-s1 .s1-img1,
    #policy-s1 .s1-img1,
    #message-s1 .s1-img1 {
        margin-top: 40px;
        width: 70%;
    }
    #policy-s1 .s1-img1 h2 {
        font-size: 1.4em;
    }
    #service-s1 .s1-img2,
    #recruit-s1 .s1-img2,
    #contact-s1 .s1-img2,
    #policy-s1 .s1-img2,
    #message-s1 .s1-img2 {
        max-width: unset;
        max-height: unset;
        text-align: center;
    }

    #google-map .map-content {
        width: 230px;
        height: auto;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    #google-map .map-content .map__logo{
        width: 50%;
    }
    /* ============ SERVICE-PAGE ============ */
    #service-s2 p {
        font-size: 14px;
        line-height: 2;
        margin: 0 auto 50px auto;
    }
    #service-s2 .img-bg {
        height: 150px;
        background-attachment: scroll;
    }
    #service-s3 .box {
        flex-wrap: wrap;
        margin-bottom: 72.5px;
    }
    #service-s3 .box2 {
        flex-direction: column-reverse;
    }
    #service-s3 .box img {
        width: 100%;
        max-width: 1000px;
        max-height: 667px;
    }
    #service-s3 .box .box-content {
        margin: 20px 0 0;
        width: 100%;
        text-align: center;
    }
    #service-s3 .box1 {
        margin-top: 100px;
    }
    #service-s3 .box3 {
        margin-bottom: 80px;
    }
    #service #s5 {
        margin-top: 0;
    }

    /* ============ PROFILE-PAGE ============ */
    #profile .content .profile {
        width: 95%;
    }

    #profile .content .profile p {
        line-height: 1.8;
    }

    #profile .content .profile-1 {
        padding-top: 60px;
        margin-bottom: 70px;
    }

    #profile .content .profile-1 h3 {
        margin: 50px auto 22.5px;
    }

    #profile .content .profile-1 img {
        margin: 35px auto 0;
    }

    #profile .content .profile-2 h3 {
        margin: 45px auto 35px;
    }

    #profile .content .profile-2 img {
        margin: 55px auto 40px;
    }
    /* ============ CONTACT-PAGE ============ */
    #contact .tb_style02 {
        margin: 25px auto 0;
        width: 90%;
    }

    #contact .tb_style02 tr {
        margin: 22px 0;
        display: block;
    }

    #contact .tb_style02 th {
        width: 100%;
        display: block;
        text-align: left;
        margin-bottom: 5px;
    }
    #contact .tb_style02 th span {
        width: 40px;
        padding: 3px;
        text-align: center;
    }
    #contact .tb_style02 tr td {
        width: 100%;
        display: block;
    }
    #contact .tb_style02 tr td span {
    font-size: 0.8rem;
    }

    #contact input[type="text"] ,
    #contact input[type="email"],
    #contact input[type="tel"] {
        height: 30px;
    }

    #contact textarea {
        height: 150px;
    }

    #contact button[type="submit"] {
        width: 200px;
        height: 40px;
        font-size: 0.8rem;
        margin: 30px auto 85px;
    }
    /* ============ MODAL ============ */
    .modal-content {
        width:85%;
        padding: 25px;
        height: 210px;
    }
    .modal-content p {
        line-height: 1.8;
    }
    .modal-content hr {
      margin: 20px 0;
    }

    .navbar-fixed-top h1 a img {
        height: 36px;
    }
}