/* ==========================================================
   项目：Looksky 头部导航组件
   版本：稳定版 v5.1 (中文注释版)
   特点：零冲突构架、全屏物理分区、工业级稳定性
   ========================================================== */

/* --- 1. 基础头部容器 --- */
#pc-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

#pc-header .container-layout {
    max-width: 1400px;
}

#pc-header .navbar {
    background: #FFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
    z-index: 9;
}

/* Logo 样式：使用滤镜实现变色效果 */
#pc-header .logo {
    display: flex;
    align-items: center;
    height: 90px;
}

#pc-header .logo img {
    max-width: none;
    max-height: 50px;
}

#pc-header .logo-scrolled {
    display: none;
}

#pc-header.scrolled .logo-default {
    display: none;
}

#pc-header.scrolled .logo-scrolled {
    display: block;
}

/* 一级导航链接 */
#pc-header .nav li a {
    color: #3e3e3e;
    line-height: 90px;
    padding: 0 20px;
    font-size: 16px;
    font-weight: 500;
    transition: none;
}

#pc-header .nav li.active a,
#pc-header .nav li a:hover,
#pc-header .nav li:hover a.first-level {
    color: #3366ff;
}

/* --- 2. 基础下拉菜单 (Standard Dropdown) --- */
#pc-header .nav li ul {
    position: absolute;
    display: block;
    opacity: 0;
    visibility: hidden;
    top: 100%;
    left: 0;
    min-width: 180px;
    padding: 8px 0;
    background: #FFF;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    z-index: 10;
    border: 1px solid rgba(51, 102, 255, 0.1);
    transform: translateY(10px);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

#pc-header .nav li:hover>ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#pc-header .nav li ul li {
    position: relative;
    display: block;
}

#pc-header .nav li ul li a {
    background: #FFF;
    line-height: 44px;
    color: #555;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    width: 100%;
    text-align: left;
    transition: all 0.25s ease;
}

#pc-header .nav li ul li a:hover {
    background: #eef6ff;
    color: #3366ff;
    padding-left: 28px;
}

/* 多级下拉：右侧弹出逻辑 */
#pc-header .nav li ul .sub-menu {
    top: -8px;
    left: calc(100% + 5px);
    border: 1px solid rgba(51, 102, 255, 0.1);
    transform: translateX(10px);
}

#pc-header .nav li ul li:hover>.sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

#pc-header .nav li ul .sub-menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5px;
    width: 5px;
    height: 100%;
}

/* --- 3. 页面滚动吸顶状态 (Sticky Scrolled) --- */
#pc-header.scrolled .navbar {
    background: linear-gradient(135deg, #3366ff 0%, #2b7cff 50%, #4a9fff 100%);
    box-shadow: 0 4px 15px rgba(0, 80, 200, 0.3);
}

#pc-header.scrolled .logo img {
    /* filter: none; */
}

#pc-header.scrolled .nav li a {
    color: rgba(255, 255, 255, 0.8);
}

#pc-header.scrolled .nav li.active a,
#pc-header.scrolled .nav li a:hover,
#pc-header.scrolled .nav li:hover a.first-level {
    color: #FFF;
}

#pc-header.scrolled a.search-ico i {
    color: #FFF;
}

#pc-header.scrolled .nav .drop-menu a {
    color: #555 !important;
}

/* --- 4. 弹出式搜索组件 --- */
#pc-header .searchBar {
    position: absolute;
    top: 37px;
    right: 120px;
}

#pc-header a.search-ico i {
    font-size: 18px;
    color: #6E6E6E;
}

/* 弹出搜索 begin */
/* 弹出搜索 begin */
.searchBar-m {
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    z-index: 9999;
    text-align: center
}

.searchBar-m .mask {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
}

.searchBar-m .mask-ico i {
    font-size: 20px;
}

.searchBar-m a {
    display: block;
    position: absolute;
    right: 5%;
    top: 5%;
    width: 60px;
    height: 60px;
    line-height: 56px;
    font-size: 48px;
    z-index: 9999;
    color: #fff;
}

.searchBar-m a:hover {
    color: #ff9600
}

.searchBar-m .form-group {
    width: 90%;
    max-width: 720px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
}

.searchBar-m .input {
    width: calc(100% - 60px);
    background: transparent;
    border: 0;
    border-bottom: 2px solid #f2f2f2;
    color: #fff;
    height: 60px;
    line-height: 60px;
    float: left;
    padding: 0;
    border-radius: 0;
    font-size: 18px;
}

.searchBar-m .input:focus {
    border-color: #3366ff
}

.searchBar-m .button {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-bottom: 2px solid #f2f2f2;
    display: block;
    float: left;
    background: url(/uploads/image/ico-search-button.png) no-repeat center 50%;
    background-size: 24px;
    text-indent: -9999px;
    border-radius: 0;
}

.searchBar-m .button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================
   5. Mega Menu (超级菜单) 引擎 - 核心布局
   ========================================================== */
#pc-header .nav li.mega-trigger {
    position: static;
}

/* 面板外壳：全屏高度、模糊背景、平滑位移动画 */
#pc-header .mega-panel {
    position: fixed !important;
    top: 90px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 90px) !important;
    background: #ffffff !important;
    backdrop-filter: blur(25px) saturate(160%) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.08) !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) !important;
    z-index: 999999 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    text-align: left !important;
}

#pc-header .mega-trigger:hover .mega-panel {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
}

/* ！！！ 样式隔离锁定层 ！！！
   通过最高优先级重置 Mega Menu 内部元素的背景、间距、行高，彻底切断外部干扰 */
#pc-header .mega-panel ul,
#pc-header .mega-panel li,
#pc-header .mega-panel a {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    display: block !important;
    line-height: normal !important;
    float: none !important;
    transform: none !important;
    transition: none !important;
}

/* 布局支撑容器 */
#pc-header .mega-panel .mega-wrap {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: stretch !important;
}

/* --- A. 二级侧边导航：固定 300px 宽度 --- */
#pc-header .mega-panel .mega-sidebar {
    width: 20% !important;
    background: #f8fafe !important;
    padding: 60px 45px !important;
    border-right: 1px solid rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
}

#pc-header .mega-panel .lv2-item {
    margin-bottom: 22px !important;
    width: 100% !important;
}

#pc-header .mega-panel .lv2-item a {
    color: #333333 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    display: block !important;
    padding: 4px 0 !important;
    transition: all 0.25s ease !important;
}

#pc-header .mega-panel .lv2-item {
    position: relative !important;
}

#pc-header .mega-panel .lv2-item.active a,
#pc-header .mega-panel .lv2-item:hover a {
    color: #3366ff !important;
    transform: translateX(6px) !important;
}

/* 二级栏目 active 左侧蓝色竖线装饰 */
#pc-header .mega-panel .lv2-item.active::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 15px;
    background: #3366ff;
    border-radius: 0 3px 3px 0;
}

/* 底部联系热线区 */
#pc-header .mega-panel .mega-phone {
    margin-top: auto !important;
    padding-top: 30px !important;
    border-top: 1px dashed rgba(0, 0, 0, 0.1) !important;
}

#pc-header .mega-panel .phone-num {
    font-size: 24px !important;
    color: #3366ff !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: -0.5px;
    margin-top: 10px !important;
}

/* --- B. 中间内容交互区：包含三级列表 --- */
#pc-header .mega-panel .mega-main {
    flex: 1 !important;
    background: #ffffff !important;
    display: flex !important;
    overflow: hidden !important;
}

#pc-header .mega-panel .mega-content-top {
    flex: 1 !important;
    padding: 50px 60px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

#pc-header .mega-panel .lv3-container {
    display: none;
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
}

#pc-header .mega-panel .lv3-container.active {
    display: flex !important;
}

#pc-header .mega-panel .lv3-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 40px !important;
}

/* 三级联动网格容器 */
#pc-header .mega-panel .mega-docs-grid {
    display: flex !important;
    border: 1px solid #f2f5f9 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    flex: 1 !important;
    min-height: 0 !important;
    /* 重要：允许内容收缩以实现内部滚动 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

/* 优雅滚动条美化 */
#pc-header .mega-panel .lv3-sub-sidebar::-webkit-scrollbar,
#pc-header .mega-panel .lv3-article-content::-webkit-scrollbar {
    width: 6px !important;
}

#pc-header .mega-panel .lv3-sub-sidebar::-webkit-scrollbar-track,
#pc-header .mega-panel .lv3-article-content::-webkit-scrollbar-track {
    background: transparent !important;
}

#pc-header .mega-panel .lv3-sub-sidebar::-webkit-scrollbar-thumb,
#pc-header .mega-panel .lv3-article-content::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.04) !important;
    border-radius: 10px !important;
    transition: background-color 0.3s !important;
}

#pc-header .mega-panel .lv3-sub-sidebar:hover::-webkit-scrollbar-thumb,
#pc-header .mega-panel .lv3-article-content:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

/* 三级子菜单侧边栏 */
#pc-header .mega-panel .lv3-sub-sidebar {
    width: 210px !important;
    background: #fafbfc !important;
    border-right: 1px solid #f2f5f9 !important;
    padding: 25px 0 !important;
    flex-shrink: 0 !important;
    overflow-y: auto !important;
    height: 100% !important;
}

#pc-header .mega-panel .lv3-sub-item {
    padding: 14px 25px !important;
    cursor: pointer !important;
    position: relative !important;
}

#pc-header .mega-panel .lv3-sub-item span {
    font-size: 15px !important;
    color: #444444 !important;
    font-weight: 600 !important;
}

/* 选中项高亮逻辑 */
#pc-header .mega-panel .lv3-sub-item:hover,
#pc-header .mega-panel .lv3-sub-item.active {
    background: #ffffff !important;
}

#pc-header .mega-panel .lv3-sub-item.active span {
    color: #3366ff !important;
}

#pc-header .mega-panel .lv3-sub-item.active::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 18px;
    background: #3366ff;
    border-radius: 0 4px 4px 0;
}

/* 具体文章列表展示 */
#pc-header .mega-panel .lv3-article-content {
    flex: 1 !important;
    padding: 40px 45px !important;
    overflow-y: auto !important;
}

#pc-header .mega-panel .article-list-wrap {
    display: none;
}

#pc-header .mega-panel .article-list-wrap.active {
    display: block !important;
}

#pc-header .mega-panel .doc-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 35px !important;
}

#pc-header .mega-panel .doc-list li {
    width: calc(50% - 18px) !important;
}

#pc-header .mega-panel .doc-list li a {
    color: #555555 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    transition: all 0.2s ease !important;
}

#pc-header .mega-panel .doc-list li a:hover {
    color: #3366ff !important;
    transform: translateX(6px) !important;
}

/* --- C. 右侧辅助详情面板：SEO 信息聚合 --- */
#pc-header .mega-panel .mega-info-panel {
    width: 32% !important;
    background: #fafbfc !important;
    padding: 60px 45px !important;
    border-left: 1px solid rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0 !important;
}

#pc-header .mega-panel .info-img {
    width: 100% !important;
    height: 230px !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 35px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
}

#pc-header .mega-panel .info-img img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

#pc-header .mega-panel .info-title {
    font-size: 24px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin-bottom: 18px !important;
}

#pc-header .mega-panel .info-desc {
    font-size: 15px !important;
    color: #777777 !important;
    line-height: 1.8 !important;
}

/* ==========================================================
   B. ID 57 专用联动样式 (案例/生态联盟)
   ========================================================== */
/* 风格对齐：移除特殊装饰，回归 ID 6 的极简侧边栏风格 */
#pc-header .mega-type-57 .lv2-item a i {
    display: none !important;
}

#pc-header .mega-type-57 .lv2-item a::after {
    display: none !important;
}

/* 中间：文档列表布局对齐 */
#pc-header .mega-type-57 .article-grid-container {
    display: none;
    width: 100% !important;
}

#pc-header .mega-type-57 .article-grid-container.active {
    display: block !important;
}

#pc-header .mega-type-57 .case-list {
    display: flex !important;
    flex-wrap: wrap !important;
    /* 改为网格平铺，增加呼吸感 */
    gap: 15px 40px !important;
}

#pc-header .mega-type-57 .case-item {
    width: calc(50% - 20px) !important;
    /* 两列排版，对齐 ID 6 的视觉节奏 */
}

#pc-header .mega-type-57 .case-item a {
    color: #555555 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    transition: all 0.25s ease !important;
}

#pc-header .mega-type-57 .case-item:hover a,
#pc-header .mega-type-57 .case-item.active a {
    color: #3366ff !important;
    transform: translateX(6px) !important;
}

/* 右侧：高度对齐 ID 6 的规格 */
#pc-header .mega-type-57 .info-img {
    height: 230px !important;
    border-radius: 20px !important;
}

#pc-header .mega-type-57 .info-img img {
    max-width: 85% !important;
    max-height: 85% !important;
    object-fit: contain !important;
}

#pc-header .mega-type-57 .info-title {
    font-size: 24px !important;
    margin-bottom: 18px !important;
}

#pc-header .mega-type-57 .info-desc {
    font-size: 15px !important;
    color: #777777 !important;
}

/* --- 6. 全局辅助类 --- */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

body {
    padding-top: 90px;
}

/* ==========================================================
   Antigravity 移动端自适应补丁 (Responsive Patches)
   ========================================================== */

/* 抽屉导航基础样式 - 全局默认隐藏（隔离 PC 端） */
.mobile-nav-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: #FFF;
    z-index: 1000000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}

.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: none;
    backdrop-filter: blur(3px);
}

.mobile-menu-toggle {
    display: none;
    /* PC 默认隐藏 */
}

/* 移动端 (1024px 以下) 激活逻辑 */
@media (max-width: 1024px) {

    /* 1. 结构重排：隐藏 PC 导航，显示汉堡菜单 */
    #pc-header .x9.text-center {
        display: none !important;
    }

    #pc-header .container-layout {
        padding: 0 15px;
    }

    #pc-header .x2.logo {
        width: 60%;
    }

    #pc-header .x1 {
        width: 40%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 20px;
        height: 90px;
    }

    #pc-header .searchBar {
        position: static;
        margin-top: 0;
        display: flex;
        align-items: center;
    }

    .mobile-menu-toggle {
        display: block !important;
        cursor: pointer;
        padding: 5px;
    }

    .mobile-menu-toggle i {
        font-size: 24px;
        color: #3e3e3e;
    }

    /* 吸顶状态按钮色值修正 */
    #pc-header.scrolled .mobile-menu-toggle i {
        color: #FFF;
    }

    /* 2. 抽屉导航组件交互样式 */
    .mobile-nav-drawer.active {
        right: 0;
    }

    .drawer-overlay.active {
        display: block;
    }

    .drawer-header {
        padding: 20px;
        border-bottom: 1px solid #f2f2f2;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .drawer-header .logo img {
        height: 48px;
        /* 适当调大 Logo */
    }

    .drawer-header .logo .logo-scrolled {
        display: none;
    }

    .close-drawer {
        cursor: pointer;
        font-size: 24px;
        color: #333;
    }

    .drawer-content {
        flex: 1;
        overflow-y: auto;
        padding: 20px 0;
    }

    /* 3. 移动端菜单列表 (Accordion) */
    .mobile-menu>li {
        border-bottom: 1px solid #f9f9f9;
        list-style: none;
    }

    .mobile-menu li a {
        display: block;
        padding: 18px 25px;
        /* 增加点击区域和呼吸感 */
        color: #333;
        font-size: 15px;
        /* 稍微缩小字号更显精致 */
        font-weight: 500;
        line-height: normal;
        background: transparent;
        transition: all 0.2s;
    }

    .mobile-menu li {
        border-bottom: 1px solid #f2f5f9;
        /* 添加极细分割线，更整齐 */
    }

    .mobile-menu li.active>.menu-item-wrap a {
        color: #3366ff;
        /* 高亮选中项 */
        font-weight: 700;
    }

    .mobile-menu .menu-item-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-menu .menu-item-wrap a {
        flex: 1;
    }

    .mobile-menu .toggle-sub {
        padding: 15px 20px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .mobile-menu li.open>.menu-item-wrap .toggle-sub {
        transform: rotate(180deg);
        color: #3366ff;
    }

    .mobile-menu .sub-menu {
        display: none;
        background: #f8fbff;
        padding: 5px 15px;
        list-style: none;
    }

    .mobile-menu li.open>.sub-menu {
        display: block;
    }

    .mobile-menu .sub-menu li a {
        font-size: 14px;
        padding: 12px 20px 12px 35px;
        /* 二级菜单缩进 */
        color: #666;
    }

    /* 三级菜单样式补丁 */
    .mobile-menu .lv3-sub {
        background: #fdfdff !important;
        border-top: 1px solid #f0f3f7;
    }

    .mobile-menu .lv3-sub li a {
        font-size: 13px !important;
        padding: 10px 20px 10px 50px !important;
        /* 三级菜单进一步缩进 */
        color: #888 !important;
    }

    .mobile-menu .lv3-sub li {
        border-bottom: 1px dashed #f0f0f0 !important;
    }

    .mobile-menu .lv3-sub li:last-child {
        border-bottom: none !important;
    }

    /* 4. 抽屉页脚与联系信息 */
    .drawer-footer {
        padding: 25px;
        background: #f8fbff;
        border-top: 1px solid #eef2f7;
    }

    .mobile-contact p {
        font-size: 12px;
        color: #888;
        margin-bottom: 8px;
        letter-spacing: 1px;
    }

    .mobile-contact .phone {
        font-size: 24px;
        color: #3366ff;
        font-weight: 800;
        text-decoration: none;
        display: block;
        line-height: 1;
    }

    /* 菜单打开时锁定页面滚动 */
    body.drawer-open {
        overflow: hidden;
    }
}

/* 5. 搜索遮罩层自适应补丁 */
@media (max-width: 768px) {

    /* 弹出搜索容器 */
    .searchBar-m {
        display: none;
    }

    .searchBar-m .form-group {
        top: 30%;
        width: 90% !important;
        transform: translate(-50%, -50%) !important;
    }

    .searchBar-m .input {
        font-size: 16px;
        height: 50px !important;
        line-height: 50px !important;
        width: calc(100% - 60px) !important;
    }

    .searchBar-m .button {
        height: 50px !important;
        line-height: 50px !important;
        width: 60px !important;
    }
}

/* --- Antigravity 补丁结束 --- */