#header {
    font-weight: 600;
    font-size: 16px;
}
#header .content {
    width: 100%;
    display: flex;
    justify-content: center; /* 子元素居中对齐 */
    margin: 0 1%; /* 左右各加上1%的间距，使子元素居中 */
}
#header .content #nav {
    width: 70%;
    display: flex;
    justify-content: center; /* 子元素居中对齐 */
}
#header .content #logo {
    width: 30%;
}
#header .content #nav-hanbao {
    width: 0%;
}
#header .nav-menu {
    display: none;
}
#header ul li.navitem a.active,
#header ul li.navitem:hover a {
    background-color: #2169d3;
}

/*屏幕宽度在768px到1024px之间*/
@media (min-width: 768px) and (max-width: 1024px) {
    #header .content #nav {
        width: 75%;
    }
    #header .content #logo {
        width: 25%;
    }
    #header .content #nav-hanbao {
        width: 0%;
    }
}


/*屏幕宽度小于768px*/
@media (max-width: 768px) {
    .lowB #header {
        position: fixed;
    }
    #header .content #nav {
        width: 0%;
        display: none;
    }
    #header .content #logo {
        width: 50%;
    }
    #header .content #nav-hanbao {
        width: 50%;
    }

    #header .nav-menu {
        display: block;
        width: 100%;
        padding: 0 20px 20px;
        background-color: #171c20;
        position: fixed;
        top: -150px;
        text-align: center;
        transition: transform 0.3s linear;
    }

    #header .nav-menu > li {
        /*border-bottom:  1px solid white;*/
    }

    #header .nav-menu a {
        color: white !important;
        border-bottom: 2px solid white;
    }

    /* 显示菜单 */
    #header .nav-menu.active {
        top: 79px;
        font-size: 16px;
        line-height: 35px;
        border-top: 1px solid white;
    }

    #header .menu-icon {
        font-size: 34px;
        cursor: pointer;
        color: white;
        transition: transform 0.3s ease;
    }

    /* 当菜单激活时，汉堡图标变成X */
    #header .menu-icon.active {
        /*transform: rotate(45deg);*/
        /*font-family: Arial, sans-serif;*/
    }

    #header .menu-icon.active::before {
        content: '✖';
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 34px;
    }

    #header .menu-icon::before {
        content: '☰';
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 34px;
    }
}