@media only screen and (min-width: 0px) and (max-width: 640px) {
    :root {
        --font-18: 16px;
        --font-16: 14px;
    }

    .container {
        padding: 0 15px;
    }


    /*---------------------- header-main ---------------------*/
    .header-main .header-top .logo-site img {
        width: 90%;
    }

    .header-main .header-top .header-info {
        flex-direction: column;
    }

    .header-left ul li a img {
        width: 90%;
    }

    .header-left ul li {
        margin-left: 4px;
    }

    .header-main .header-menu .header-top-menu .desc-box {
        display: flex;
        justify-content: end;
    }

    .header-main .header-menu .header-top-menu .desc-box .form-group {
        width: 80%;
    }

    .header-main .header-menu .header-top-menu .desc-box .close-input {
        display: block;
        color: black;
        font-size: 30px;
        position: absolute;
        top: 0;
        left: 5%;
    }


    .header-main .header-menu .header-top-menu .desc-box .form-group .search-input input {
        color: var(--white) !important;
    }

    .header-main .header-menu .header-top-menu .icon-desc {
        background-color: var(--brown-seclight);
        color: var(--brown-black);
        padding: 8px;
        margin: 0;
    }


    .header-main .header-top .header-top .header-left .info-header-left {
        margin: 0;
    }

    .header-main .header-top .header-top {
        justify-content: flex-end;
    }

    .header-main .header-menu .header-top-menu .navbar-box .menu-class .navbar-nav li.open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        top: 50px;
        width: 100%;
        background-color: aliceblue !important;
    }

    .header-main .header-menu .header-top-menu .navbar-box .menu-class .navbar-nav .dropdown-menu a {
        color: var(--green);
    }

    .header-main .header-menu .header-top-menu .close-menu {
        width: 40px;
        height: 40px;
        background-color: var(--white);
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--green);
        font-size: 30px;
        font-weight: 700;
        position: absolute;
        left: 0;
        z-index: 9;
        cursor: pointer;
        top: 0;
        border: none;
    }

    .header-main .header-menu .header-top-menu .navbar-box .navbar-collapse {
        display: inline-table;
        position: fixed;
        right: -100%;
        top: 0;
        height: 100% !important;
        width: 25%;
        padding: 0;
        background-color: var(--green);
        z-index: 9999;
        transition: .5s all;
        margin: 0;
        width: 100%;
    }



    .header-main .header-menu .header-top-menu .navbar-box .navbar-collapse.in {
        right: 0;
    }

    .header-main .header-menu .header-top-menu .navbar-box .menu-class .navbar-nav {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 15px;
        margin: 0;
        width: 100%;
        margin-top: 30px;
    }

    .header-main .header-menu .header-top-menu .navbar-box .menu-class .navbar-nav li {
        width: 100%;
    }





    .header-main .header-menu .header-top-menu .navbar-box .menu-class .navbar-nav li a b::before {
        color: var(--brown-black);
        left: 20px;
        top: 10px;
    }

    .header-main .header-menu .header-top-menu {
        padding: 10px 0;
        justify-content: space-between;
        align-items: center;
    }

    .header-main .header-menu .header-top-menu .navbar-default .navbar-toggle {
        margin-left: 20px;
        padding: 7px 5px;
        background-color: var(--white);
        border: none;
        width: 39px;
        height: 35px;
        border-radius: 11px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .header-main .header-menu .header-top-menu .navbar-default .navbar-toggle .icon-bar {
        background-color: var(--green) !important;
    }

    .header-main::before {
        display: none;
    }

    .header-main::after {
        display: none;
    }

    .header-main .header-menu .header-top-menu .navbar-box .menu-class .navbar-nav li .dropdown-menu .dropdown-submenu .dropdown-menu {
        top: 50px;
        right: 0;
    }

    /*---------------------- /header-main ---------------------*/
    .content-main .slider-section .slide-groups .item-row {
        flex-direction: column;
    }

    .content-main .slider-section .slide-groups .item-row .news-img img {
        position: relative;
        z-index: 999;
    }

    .content-main .book-section .flexslider .slide-groups .item-row {
        flex-direction: column;
    }

    .content-main .book-section .flexslider .slide-groups .item-row .news-info .news-introtext {
        width: 100%;
    }

    .content-main .links-section .flex-link {
        justify-content: center;
    }

    .content-main .book-section .flexslider .slide-groups .item-row .news-img img {
        width: 71%;
    }

    .content-main .book-section .flexslider .slide-groups .item-row a {
        display: flex;
        justify-content: center;
    }

    .content-main .book-section {

        margin-bottom: 45px;
    }

    .content-main .links-section .flex-link {
        margin-bottom: 40px;
    }

    .content-main .arcive-section .flexslider .owl-nav {
        display: none;
    }

    .content-main .slider-section {
        margin-bottom: 40px;
    }

    .content-main .slider-section .flexslider .news-slider .owl-nav .owl-next {
        position: absolute;
        left: 36%;
        bottom: 9px;
    }

    .content-main .slider-section .flexslider .news-slider .owl-nav .owl-prev {
        position: absolute;
        right: 26%;
        bottom: 9px;
    }

    .content-main .tab-section .nav {
        overflow: scroll;
        height: 67px;
    }

    .content-main .multimedia-box {

        overflow: scroll;
    }

    .content-main .tab-section .nav li::before {

        top: -51px;
        right: -16px;
        width: 243px;
        height: 96px;
    }



    .content-main .slider-section .slide-groups .item-row .news-info .News_Titr {
        width: 100%;
    }

    .content-main .slider-section .slide-groups .item-row .news-info .news-introtext {
        width: 100%;
    }

    .footer-main .footer-section .list-footer ul {
        flex-direction: column;
    }

    .footer-main .footer-section .list-footer ul li {
        margin: 0 0 10px 0;
        justify-content: center;
        display: flex;

    }

    .footer-main .footer-section .list-footer::before {
        top: 243px;
    }

    .footer-main .footer-section .bottom-footer {
        flex-direction: column;
        align-items: center;
    }

    .footer-main .footer-section .bottom-footer p {
        font-size: 15px;
        margin-bottom: 10px;
    }


}