@media (max-width: 768px) {
    .nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #222;
        z-index: 999;
        flex-direction: column;
        padding-top: 60px;
        transition: transform 0.3s;
        transform: translateX(-100%);
    }
    .nav.active {
        display: flex;
        transform: translateX(0);
    }
    .nav ul {
        width: 100%;
        padding: 0;
    }
    .nav li {
        width: 100%;
        border-bottom: 1px solid #333;
        position: relative;
    }
    .nav li a {
        display: block;
        color: #fff;
        padding: 16px 20px;
        font-size: 16px;
    }
    .nav li .dropbtn::after {
        content: '>';
        float: right;
        font-size: 16px;
    }
    /* 副导航侧边栏 */
    .nav .dropdown-content {
        display: none;
        position: fixed;
        top: 0;
        left: 80%;
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background: #333;
        z-index: 1000;
        padding-top: 60px;
        transition: transform 0.3s;
        transform: translateX(100%);
        flex-direction: column;
    }
    .nav .dropdown.active .dropdown-content {
        display: flex;
        transform: translateX(-80%);
    }
    .nav .dropdown-content a {
        color: #fff;
        padding: 16px 30px;
        border-bottom: 1px solid #444;
        font-size: 15px;
    }
    .nav .dropdown-content .back-btn {
        display: block;
        color: #fff;
        background: #444;
        padding: 16px 20px;
        font-size: 16px;
        border-bottom: 1px solid #555;
        cursor: pointer;
    }
    .hamburger-menu {
        display: block;
        position: absolute;
        right: 20px;
        top: 15px;
        width: 30px;
        height: 20px;
        cursor: pointer;
        z-index: 1001;
    }
    .hamburger-menu span {
        display: block;
        position: absolute;
        height: 2px;
        width: 100%;
        background: #fff;
        border-radius: 2px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out;
    }
    .hamburger-menu span:nth-child(1) { top: 0px; }
    .hamburger-menu span:nth-child(2) { top: 9px; }
    .hamburger-menu span:nth-child(3) { top: 18px; }
    .hamburger-menu.active span:nth-child(1) {
        top: 9px; transform: rotate(135deg);
    }
    .hamburger-menu.active span:nth-child(2) {
        opacity: 0; left: -60px;
    }
    .hamburger-menu.active span:nth-child(3) {
        top: 9px; transform: rotate(-135deg);
    }
    .nav-overlay {
        display: none;
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 998;
    }
    .nav-overlay.active { display: block; }
}