header {
    background: #482910 url(../images/topbar-default.png) top left repeat-x;
}

#head-content {
    width: var(--all-width);
    margin: 0 auto;
    min-height: 190px;
}

.head-top {
    min-height: 77px;
    display: flex;
    align-items: center;
    column-gap: 50px;
}

.logo {
    width: var(--logo);
}

.head-top>p {
    width: calc(100% - (var(--logo) + 50px));
    color: #bb8551;
    font-size: 13px;
    font-family: "";
}

.head-cen {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.menu {
    display: flex;
    align-items: center;
    column-gap: 40px;
}

.menu a {
    color: #fff;
}

.searchBar {
    width: var(--searchBar);
    display: flex;
}

#search {
    flex: 1;
    background-color: #623714;
    border-radius: calc(var(--button) / 2) 0 0 calc(var(--button) / 2);
    color: #fff;
    text-indent: 20px;
}

#go {
    width: calc(var(--button) * 2);
    display: flex;
    justify-content: center;
    height: var(--button);
    background-color: #f9ac45;
    border-radius: 0 calc(var(--button) / 2) calc(var(--button) / 2) 0;
}

#go img {
    width: var(--button);
    opacity: .7;
    filter: invert(1);
}

.class {
    min-height: 56px;
    padding: 10px 0;
    display: flex;
    align-items: center;
    margin-top: 2px;
    justify-content: space-between;
}

.class li {
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 6px;
    transition: .4s;
}

.class a {
    color: #e8b272;
}

.class li:hover {
    background-color: #7b4f25;

}

.class li:hover a {
    color: #fff;
}

.clsact {
    background-color: #7b4f25;
    color: #fff;
}

.search-btn,
.off-search {
    width: var(--button);
    display: none;
}

.peBtn {
    width: var(--button);
    height: var(--button);
    display: none;
}

@media (max-width:799px) {
    header {
        z-index: 100000;
    }

    #head-content {
        position: relative;
        min-height: auto !important;
    }

    .peBtn {
        display: block;
    }

    .head-top {
        justify-content: space-between;
        padding: 0 10px;
        gap: 0;
    }

    .search-btn,
    .off-search {
        display: block;
    }

    .head-top>p {
        display: none;
    }

    .menu,
    .class {
        padding: 10px;
    }

    .menu,
    .class {
        width: 100%;
        overflow-x: auto;
    }

    .menu::-webkit-scrollbar {
        display: none;
    }

    .menu a {
        white-space: nowrap;
    }

    .off-search {
        position: absolute;
        top: 5px;
        right: 5px;
    }

    .searchBar {
        position: absolute;
        padding: 60px 10px 0;
        background-color: #482910;
        width: 100vw;
        height: 100vh;
        z-index: 10;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        transition: .4s;
        top: 100%;
    }

    .searchBar>* {
        height: var(--button);
    }

    .head-cen {
        padding: 0;
    }

    .head-cen .menu {
        display: none;
    }

    nav {
        width: 100%;
        position: absolute;
        height: 100vh;
        top: 100%;
        background-color: #623714;
        transform: translateX(-100%);
        transition: .4s;
        top: 100%;
        left: 0;
    }

    nav ul {
        flex-direction: column;
        gap: 5;
    }

    nav ul li {
        width: 100%;
    }

    .searchBar.active,
    nav.active {
        transform: translateX(0);
    }
}