#header {
    --navitem-gap: clamp(20px, 2.5vw, 52px);
    --nav-padding: clamp(40px, 10vw, 230px);

    /* mm-burger 汉堡菜单按钮 */
    mm-burger {
        --mb-bar-width: 22px;
        --mb-bar-height: 2px;
        --mb-bar-spacing: 6px;
        display: none;
        flex-shrink: 0;
    }

    &.compact {
        --nav-height: 44px;
        --navitem-gap: clamp(16px, 1.5vw, 32px);
        .nav-inner {
            .logo .log-img {
                height: 32px;
            }
            nav.menu {
                font-size: 14px;
            }
        }
    }
    .nav-inner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--nav-height);
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 100;
        padding: 0 var(--nav-padding);
        background: rgba(205, 222, 255, var(--nav-bg-opacity, 0.4));
        backdrop-filter: blur(6px);
        box-sizing: border-box;
        transition:
            background 0.1s linear,
            height 0.2s ease;

        .logo {
            min-width: 250px;
            .log-img {
                height: 48.5px;
                width: auto;
                display: block;
                transition: height 0.2s ease;
            }
        }

        nav.menu {
            .menu_link {
                color: #5a8cce;
                text-decoration: none;
                &:visited {
                    color: #5a8cce;
                }
                &:not(:first-child) {
                    margin-left: var(--navitem-gap);
                }
                &:hover {
                    color: #4972a8;
                }
                &.pop-btn {
                    svg {
                        vertical-align: middle;
                        margin-left: 3px;
                        position: relative;
                        top: -1px;
                    }
                }
            }
        }
    }
    .solution-pop {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        height: 72.5vh;
        z-index: 99;
        display: flex;
        pointer-events: none;
        opacity: 0;
        transform: translateY(-10%);
        will-change: transform, opacity;
        transition: 0.3s;
        box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.18);
        &.show {
            transform: translateY(0);
            opacity: 1 !important;
            pointer-events: auto;
        }
        .pop-left {
            width: 23.125%;
            flex-shrink: 0;
            background: #f0f6ff;
            display: flex;
            .solution-desc {
                margin-left: auto;
                padding-top: 32px;
                width: 215px;
                .solution-title {
                    font-size: 20px;
                    color: #000000;
                    font-weight: 500;
                }
                .solution-subtitle {
                    margin-top: 13px;
                    font-size: 12px;
                    color: #666666;
                    line-height: 21px;
                }
            }
        }
        .pop-right {
            flex: 1;
            background: #ffffff;
            padding: 32px 41px;
            display: flex;
            flex-direction: column;

            #search-input {
                width: 487px;
                height: 39px;
                line-height: 39px;
                outline: none;
                display: block;
                font-size: 14px;
                color: var(--text-color);
                background-color: #fff;
                background-image: var(--input-search-icon);
                background-repeat: no-repeat;
                background-size: 15px auto;
                background-position: 13px center;
                border-radius: 4px;
                border: 1px solid #e6e6e6;
                box-sizing: border-box;
                padding-left: 37px;
                flex-shrink: 0;
                &:focus {
                    border-color: #999999;
                }
                &::-webkit-input-placeholder {
                    color: #999999;
                }
            }

            .default-content {
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                flex: 1;
                height: 0;
                overflow: hidden;
                margin-top: 28px;
                .solution-col {
                    overflow: hidden;
                }
            }

            .search-content {
                display: none;
                flex: 1;
                height: 0;
                overflow: hidden;
                margin-top: 28px;

                &.show {
                    display: block;
                }
                .solution-col,
                .col-group,
                .group-item {
                    height: 100%;
                    overflow: hidden;
                }
                .group-item {
                    display: flex;
                    flex-direction: column;
                    flex-wrap: wrap;
                }
            }
            .col-title {
                height: 19px;
                font-weight: 500;
                font-size: 18px;
                color: #1764ff;
                line-height: 19px;
                margin-bottom: 19px;
            }
            .col-group {
                height: calc(100% - 38px);
                display: flex;
                flex-direction: column;
                flex-wrap: wrap;
                overflow: hidden;
                gap: 38px 100px;
            }
            .group-item {
                .group-title {
                    color: var(--text-color);
                    line-height: 19px;
                    margin-bottom: 15px;
                    font-weight: bold;
                }
                .link {
                    display: block;
                    font-size: 14px;
                    color: var(--text-color);
                    text-decoration: none;
                    line-height: 19px;
                    &:not(:last-child) {
                        margin-bottom: 10px;
                    }
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .nav-temp {
        height: 0px;
        display: block;
        transition: height 0.2s ease;
    }
}

/* ==================== 移动端适配 ==================== */

@media (max-width: 1620px) {
    #header {
        --navitem-gap: clamp(10px, 1.5vw, 40px);
        --nav-padding: clamp(25px, 7vw, 150px);
    }
}

/* 移动端响应式 */
@media (max-width: 1024px) {
    #header {
        /* 固定值替代 clamp() */
        --nav-padding: 20px;
    }
    #header .nav-inner {
        .logo {
            min-width: auto;
        }
        nav.menu {
            display: none;
        }
        mm-burger {
            display: inline-flex;
            margin-left: auto;
        }
    }
}

/* 小屏幕优化 */
@media (max-width: 768px) {
    #header {
        --nav-height: 55px;
        --nav-padding: 17px;
        &.compact {
            --nav-height: 42px;
            .logo .log-img {
                height: 28px;
            }
            mm-burger {
                --mb-bar-width: 18px;
                --mb-bar-height: 1px;
                --mb-bar-spacing: 5px;
            }
        }
        .logo .log-img {
            height: 40px;
        }
        .nav-temp {
            /* 小屏幕时 header下面需要占位 */
            height: var(--nav-height);
        }
    }
}