@charset "utf-8";

      /* ==================== 三横菜单按钮样式 ==================== */
        .mobile-switch {
            position: fixed;
            top: 35px;
            right: 35px;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            cursor: pointer;
            background: rgba(0, 105, 80, 0.85);
            border: 2px solid rgba(255, 255, 255, 0.6);
            border-radius: 50%;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
        }

        .mobile-switch:hover {
            background: rgba(0, 105, 80, 0.95);
            border-color: rgba(255, 255, 255, 0.9);
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
        }

        .mobile-switch .icon {
            width: 56px;
            height: 56px;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .mobile-switch .icon svg {
            width: 100%;
            height: 100%;
            fill: white;
            stroke: white;
            stroke-width: 2;
        }

        .mobile-switch .close-btn {
            position: absolute;
            width: 56px;
            height: 56px;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .mobile-switch .close-btn svg {
            fill: white;
            stroke: white;
            stroke-width: 2;
        }

        .mobile-switch.active .icon:not(.close-btn) {
            opacity: 0;
            visibility: hidden;
        }

        .mobile-switch.active .close-btn {
            opacity: 1;
            visibility: visible;
        }

        /* ==================== 左上角Logo样式 ==================== */
        .brand-logo {
            z-index: 999;
            width: 150px;
            height: auto;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
            cursor: pointer;
            position: absolute;
            top: 40px;
            left: 40px;
        }

        .brand-logo:hover {
            transform: scale(1.05);
        }

        .brand-logo img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* ==================== 一级菜单样式 ==================== */
        .alert-nav {
            position: fixed;
            top: 0;
            right: 0;
            height: 100vh;
            width: 360px;
            background: #003429;
            z-index: 999;
            transform: translateX(100%);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            opacity: 0;
            visibility: hidden;
            overflow: visible;
            perspective: 1000px;
        }

        .alert-nav.show {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }

        .alert-nav nav {
            display: flex;
            flex-direction: column;
            gap: 0;
            padding: 160px 0 20px 0;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            width: 360px;
            min-width: 360px;
            flex-shrink: 0;
            position: relative;
            z-index: 10;
        }

        .alert-nav.show nav {
            opacity: 1;
            transform: translateX(0);
        }

        .alert-nav nav li {
            list-style: none;
        }

        .alert-nav nav li .headline {
            height: 78px;
            line-height: 78px;
            padding: 0 30px 0 60px;
            opacity: 0;
            transform: translateX(50px);
            transition: opacity 0.4s ease, transform 0.4s ease;
            display: flex;
            align-items: center;
        }

        .alert-nav.show nav li .headline {
            opacity: 1;
            transform: translateX(0);
        }

        .alert-nav nav li .headline a {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            font-size: 23px;
            color: white;
            font-weight: 700;
            transition: color 0.3s ease, transform 0.3s ease;
        }

        .alert-nav nav li .headline a:hover {
            color: rgba(255, 255, 255, 0.9);
            transform: translateX(5px);
        }

        .alert-nav nav li .headline .icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            transition: transform 0.25s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .alert-nav nav li .headline .icon svg {
            width: 100%;
            height: 100%;
            stroke: rgba(255, 255, 255, 0.6);
            fill: none;
            stroke-width: 1.5;
            transition: stroke 0.25s ease, transform 0.25s ease;
            transform: rotate(-45deg);
        }

        .alert-nav nav li:hover .headline .icon svg {
            stroke: white;
            transform: rotate(135deg);
        }

        .alert-nav nav li:hover .headline {
            background: #015140;
        }

        /* ==================== 子菜单样式 ==================== */
        /* 子菜单容器 */
        .alert-nav .submenu-container {
            width: 360px;
            height: 100%;
            background: #015140;
            position: absolute;
            right: 360px;
            top: 0;
            z-index: 9;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .alert-nav .submenu-container.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        /* 隐藏滚动条 */
        .alert-nav .submenu-container::-webkit-scrollbar {
            display: none;
        }
        .alert-nav .submenu-container {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* 子菜单内容项 */
        .alert-nav .submenu-content {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            padding: 160px 30px 30px 50px;
            height: 100%;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;
            transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* 隐藏子菜单内容的滚动条 */
        .alert-nav .submenu-content::-webkit-scrollbar {
            display: none;
        }
        .alert-nav .submenu-content {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .alert-nav .submenu-content.show {
            z-index: 5;
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }

        /* 子菜单标题 */
        .alert-nav .submenu-title {
            font-size: 20px;
            color: #cccccc;
            font-weight: 600;
            margin-bottom: 30px;
            padding-bottom: 15px;
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            padding-left: 20px;
            margin-left: -20px;
            width: calc(100% + 20px);
            box-sizing: border-box;
            border-bottom: none;
            position: relative;
        }

        /* 子菜单标题下划线 */
        .alert-nav .submenu-title::after {
            content: '';
            position: absolute;
            left: 20px;
            right: 30px;
            bottom: 0;
            height: 1px;
            background: rgba(255, 255, 255, 0.2);
        }

        /* 子菜单列表 */
        .alert-nav .submenu-list {
            list-style: none;
        }

        .alert-nav .submenu-list .submenu-item {
            margin: 11px 0;
        }

        .alert-nav .submenu-list .submenu-item a {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 0;
            text-decoration: none;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
            font-weight: 700;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            opacity: 0;
            transform: translateX(50px);
        }

        .alert-nav .submenu-container.show .submenu-list .submenu-item a {
            opacity: 1;
            transform: translateX(0);
        }

        /* SVG 箭头图标 */
        .alert-nav .submenu-list .submenu-item a .arrow-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .alert-nav .submenu-list .submenu-item a .arrow-icon svg {
            width: 100%;
            height: 100%;
            stroke: rgba(255, 255, 255, 0.6);
            fill: none;
            stroke-width: 1.5;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .alert-nav .submenu-list .submenu-item a:hover {
            color: white;
            padding-left: 10px;
            background: transparent;
        }

        .alert-nav .submenu-list .submenu-item a:hover .arrow-icon svg {
            stroke: white;
            transform: translateX(3px);
        }

        /* 子菜单项动画延迟 */
        .alert-nav .submenu-container.show .submenu-list .submenu-item:nth-child(1) a {
            transition-delay: 0.08s;
        }
        .alert-nav .submenu-container.show .submenu-list .submenu-item:nth-child(2) a {
            transition-delay: 0.12s;
        }
        .alert-nav .submenu-container.show .submenu-list .submenu-item:nth-child(3) a {
            transition-delay: 0.16s;
        }
        .alert-nav .submenu-container.show .submenu-list .submenu-item:nth-child(4) a {
            transition-delay: 0.2s;
        }
        .alert-nav .submenu-container.show .submenu-list .submenu-item:nth-child(5) a {
            transition-delay: 0.24s;
        }

        /* 遮罩层 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 998;
            opacity: 0;
            visibility: hidden;
            transition: all 0.4s ease;
        }

        .overlay.show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto; /* 确保遮罩层显示时可以点击 */
        }

        /* 遮罩层隐藏时不阻挡点击和滚动 */
        .overlay:not(.show) {
            pointer-events: none;
        }

        /* 隐藏滚动条 */
        .alert-nav::-webkit-scrollbar {
            display: none;
        }
        .alert-nav {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        /* ==================== 移动端响应式样式 ==================== */
        @media (max-width: 768px) {
            /* 三横菜单缩小并往右上移动 */
            .mobile-switch {
                width: 50px !important;
                height: 50px !important;
                top: 15px !important;
                right: 15px !important;
            }

            .mobile-switch .icon {
                width: 35px !important;
                height: 35px !important;
            }

            .mobile-switch .close-btn {
                width: 35px !important;
                height: 35px !important;
            }

            /* 菜单宽度调整为33.33% */
            .alert-nav {
                width: 33.33% !important;
                overflow: visible !important;
            }

            /* 子菜单宽度调整33.33% - 定位到屏幕左侧 */
            .alert-nav .submenu-container {
                width: 33.33vw !important;
                right: auto !important;
                left: -100% !important;
            }

            /* 菜单项字号和间距调整 */
            .alert-nav nav li .headline {
                height: 55px;
                line-height: 55px;
                padding: 0 3px 0 8px;
            }

            .alert-nav nav li .headline a {
                font-size: 14px;
                gap: 6px;
            }

            /* 子菜单内容区域内边距调整 */
            .alert-nav .submenu-content {
                padding: 100px 10px 30px 15px !important;
            }

            /* 子菜单标题字号调整 */
            .alert-nav .submenu-title {
                font-size: 13px;
                padding: 5px 10px 20px 10px !important;
                margin-bottom: 15px;
                text-align: left;
                margin-left: 2px !important;
                padding-left: 0 !important;
            }

            /* 子菜单标题横线向左移动 */
            .alert-nav .submenu-title::after {
                left: 0px !important;
                right: 30px !important;
            }

            /* 子菜单列表项调整 */
            .alert-nav .submenu-list .submenu-item {
                margin: 6px 0;
            }

            .alert-nav .submenu-list .submenu-item a {
                padding: 6px 2px;
                font-size: 12px;
                gap: 5px !important;
                white-space: nowrap;
                align-items: flex-start;
                padding-top: 5px;
            }

            /* 子菜单箭头向上微调 */
            .alert-nav .submenu-list .submenu-item a .arrow-icon {
                margin-top: 0px;
            }

            /* 菜单顶部padding调整 */
            .alert-nav nav {
                padding: 100px 0 20px 0;
            }

            /* 小箭头图标缩小 */
            .alert-nav nav li .headline .icon {
                width: 14px !important;
                height: 14px !important;
            }

            /* 子菜单箭头图标缩小 */
            .alert-nav .submenu-list .submenu-item a .arrow-icon {
                width: 10px !important;
                height: 10px !important;
            }

            /* 移动端点击事件 - 移除hover效果 */
            .alert-nav nav li:hover .headline {
                background: transparent;
            }

            .alert-nav nav li:hover .headline .icon svg {
                stroke: rgba(255, 255, 255, 0.6);
                transform: rotate(-45deg);
            }

            /* 移动端一级菜单激活状态 - 小箭头旋转 */
            .alert-nav nav li.is-active-mobile .headline .icon svg {
                stroke: white;
                transform: rotate(135deg);
            }

            .alert-nav nav li.is-active-mobile .headline {
                background: #015140;
            }

            /* 子菜单项点击效果 */
            .alert-nav .submenu-list .submenu-item a:hover {
                color: rgba(255, 255, 255, 0.9);
                padding-left: 0;
            }

            .alert-nav .submenu-list .submenu-item a:active {
                color: white;
                padding-left: 10px;
                background: transparent;
            }
        }