/* ============= 1122px ================== */

@media screen and (max-width: 1122px) {
    /* ============= 宽度================== */
    .menu-header, .footer, section>.content, section>.title {
        width: 100%;
        padding: 0 20px;
    }
    /* ============= 宽度================== */
    header {
        height: 92px;
    }
    .menu-header, .footer {
        width: 100%;
        padding: 0 30px;
    }
    header .menu-nav {
        display: none;
    }
    /* 导航折叠按钮 */
    .burger {
        cursor: pointer;
        display: block;
        position: relative;
        float: right;
        width: 20px;
        height: 20px;
        margin-top: 36px;
        margin-right: 30px;
    }
    .burger-line1, .burger-line2, .burger-line3 {
        width: 20px;
        height: 2px;
        background-color: var(--text-darker);
    }
    .burger-line2 {
        position: absolute;
        top: 7px;
    }
    .burger-line3 {
        position: absolute;
        top: 14px;
    }
    header.open .burger-line1, header.open .burger-line2, header.open .burger-line3 {
        background-color: var(--text-darker);
        transition: 0.4s ease;
    }
    header.open .burger-line1 {
        transform: rotate(45deg) translate(5px, 5px);
    }
    header.open .burger-line2 {
        transform: translateX(5px);
        opacity: 0;
    }
    header.open .burger-line3 {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    /* 菜单展开 */
    header.open {
        position: fixed;
        top: 0;
    }
    header.open+.glide {
        margin-top: 88px;
    }
    header.open .menu-nav {
        display: block;
    }
    header.open .menus {
        display: grid;
        grid-auto-rows: max-content;
        /* 菜单项靠右对齐 */
        justify-items: end;
        position: absolute;
        top: 0;
        left: 0;
        background: white;
        width: 100%;
        height: 100vh;
        padding: 0 40px;
        opacity: 0;
        /* 下滑效果 */
        animation: slideDown 0.6s ease-out forwards;
        z-index: -1;
    }
    @keyframes slideDown {
        from {
            height: 0;
            opacity: 0;
        }
        to {
            height: 100vh;
            padding-top: 80px;
            opacity: 1;
        }
    }
    header.open .menus>* {
        margin: 4px 0;
        font-size: 18px;
        color: var(--text-color-darker);
        opacity: 0;
        animation: showMenu 0.5s linear forwards 0.4s;
    }
    @keyframes showMenu {
        from {
            opacity: 0;
            transform: translateY(-1vh);
        }
        to {
            opacity: 1;
        }
    }
    /* 子菜单 */
    header.open .menu-item>a.menu-hassub::before {
        font-family: "FontAwesome";
        content: "\f078";
        margin-right: 10px;
    }
    header.open .menu-item:hover>a.menu-hassub::before {
        font-family: "FontAwesome";
        content: "\f077";
        margin-right: 10px;
    }
    header.open .menu-item {
        padding: 20px;
    }
    header.open .menu-item>a::after {
        top: 45px;
    }
    header.open .menu-sub {
        top: 0;
        background: transparent;
    }
    header.open .menu-item:hover>.menu-sub {
        display: none;
        position: relative;
        visibility: visible;
        top: 20px;
        opacity: 1;
    }
    header.open .menu-sub .menu-sub-item>a {
        color: var(--text-darker);
    }
    header.open .menu-item ul>li:hover {
        background: var(--bg-gray-dark);
    }
    header.open .menu-item ul>li:hover>a {
        color: var(--bg-gray-light);
    }
    /* 页脚 */
    .footer-menus {
        width: 100%;
    }
    .footer-menu {
        width: 10%;
    }
    .footer-code {
        border-left: none;
        padding: 40px 10px;
    }
    .footer-code>img {
        width: 180px;
    }
}

/* ============= 768px ================== */

@media screen and (max-width: 768px) {
    .footer-menu {
        width: 100%;
        margin: 0;
        padding: 0 20px;
    }
    .menu-title {
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
}