﻿@layer utilities {
            .content-auto { content-visibility: auto; }
            .text-shadow-xl { text-shadow: 0 8px 16px rgba(0,0,0,0.25); }
            .overflow-hidden-x { overflow-x: hidden; }
            .hover-lift { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
            .hover-lift:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            }
            .brand-logo {
                filter: grayscale(100%);
                transition: all 0.4s ease;
                opacity: 0.7;
            }
            .brand-logo:hover {
                filter: grayscale(0%);
                opacity: 1;
                transform: translateY(-5px);
            }
            /* 简化轮播样式 */
            .carousel-container { overflow: hidden; position: relative; }
            .carousel-track { display: flex; transition: transform 0.5s ease; }
            .cert-item { min-width: 25%; padding: 0 8px; }
            .brand-item { min-width: 16.666%; padding: 0 8px; }
            @media (max-width: 1280px) { .brand-item { min-width: 20%; } }
            @media (max-width: 1024px) { 
                .cert-item { min-width: 33.333%; }
                .brand-item { min-width: 25%; }
            }
            @media (max-width: 768px) { 
                .cert-item { min-width: 50%; }
                .brand-item { min-width: 33.333%; }
            }
            @media (max-width: 640px) { 
                .cert-item { min-width: 100%; }
                .brand-item { min-width: 50%; }
            }
            /* 轮播按钮简化 */
            .carousel-btn {
                position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
                width: 40px; height: 40px; border-radius: 50%; border: none;
                display: flex; align-items: center; justify-content: center;
                cursor: pointer; background: rgba(255,255,255,0.9);
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            }
            .carousel-btn.dark { background: rgba(45, 48, 71, 0.9); color: white; }
            .carousel-btn.left { left: 10px; }
            .carousel-btn.right { right: 10px; }
            /* 产品卡片简化 */
            .product-card {
                border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
                transition: all 0.4s ease; height: 400px; position: relative; cursor: pointer;
            }
            .product-card:hover { transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
            .product-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
            .product-card:hover img { transform: scale(1.05); }
            .product-info {
                position: absolute; bottom: 0; left: 0; right: 0;
                background: linear-gradient(to top, rgba(45, 48, 71, 0.9), transparent);
                padding: 2rem; color: white;
            }
            /* 视频弹窗简化 */
            .video-modal {
                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
                background: rgba(0,0,0,0.9); z-index: 9999; display: none;
                align-items: center; justify-content: center;
            }
            .video-modal.active { display: flex; }
            .video-modal-content {
                position: relative; width: 90%; max-width: 1000px; height: 70vh;
                background: #000; border-radius: 1rem; overflow: hidden;
            }
            .close-video {
                position: absolute; top: 1rem; right: 1rem; width: 3rem; height: 3rem;
                border-radius: 50%; background: rgba(0,0,0,0.7); color: white;
                border: none; cursor: pointer; z-index: 10;
            }
/* 基础容器样式 - 必须保留 */
.dropdown-container { 
    position: relative; 
}

/* 一级下拉菜单样式 */
.dropdown-menu {
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 250px;
    background: #fff; 
    border-radius: 0.5rem; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    opacity: 0; 
    visibility: hidden; 
    transform: translateY(5px);
    transition: all 0.3s ease; 
    z-index: 999; 
    padding: 0.5rem 0;
}

/* 一级菜单 hover 显示 */
.dropdown-container:hover .dropdown-menu {
    opacity: 1; 
    visibility: visible; 
    transform: translateY(0);
}

/* 菜单项基础样式 */
.dropdown-item {
    display: block; 
    padding: 0.8rem 1.5rem;
    color: #2D3047; 
    transition: all 0.2s ease;
    position: relative; /* 为三级菜单定位 */
    text-decoration: none; /* 去除下划线 */
}

/* 菜单项 hover 效果 */
.dropdown-item:hover { 
    background: #f8f5f0; 
    color: #E09F3E; 
}

/* 三级菜单容器（有子菜单的菜单项） */
.has-submenu {
    position: relative;
}

/* 三级菜单样式 - 核心 */
.sub-dropdown-menu {
    position: absolute; 
    top: 0; 
    left: 100%; /* 向右展开 */
    width: 250px;
    background: #fff; 
    border-radius: 0.5rem; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    opacity: 0; 
    visibility: hidden; 
    transform: translateX(5px);
    transition: all 0.3s ease; 
    z-index: 999; 
    padding: 0.5rem 0;
}

/* 三级菜单 hover 显示 */
.has-submenu:hover .sub-dropdown-menu {
    opacity: 1; 
    visibility: visible; 
    transform: translateX(0);
}

/* 有子菜单的菜单项添加右箭头 */
.has-submenu::after {
    content: "\f105"; /* FontAwesome 右箭头图标 */
    font-family: "FontAwesome";
    position: absolute; 
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: #2D3047;
}

/* 移动端适配 - 隐藏桌面端多级菜单 */
@media (max-width: 768px) {
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        width: 100%;
        background: transparent;
        padding: 0;
    }
    
    .sub-dropdown-menu {
        display: none; /* 移动端隐藏三级菜单 */
    }
    
    .has-submenu::after {
        display: none; /* 移动端隐藏箭头 */
    }
    
    .dropdown-item {
        color: #fff;
        padding: 0.5rem 0;
    }
    
    .dropdown-item:hover {
        background: transparent;
        color: #E09F3E;
    }
}
       /* 移动端多级菜单样式 - 核心新增 */
    .mobile-dropdown-container {
        width: 100%;
    }
    .mobile-dropdown-toggle,
    .mobile-submenu-toggle {
        background: transparent;
        border: none;
        cursor: pointer;
    }
    /* 箭头旋转动画 */
    .mobile-dropdown-toggle.open i {
        transform: rotate(180deg);
    }
    .mobile-submenu-toggle.open i {
        transform: rotate(90deg);
    }
    /* 移动端菜单展开/收起过渡 */
    .mobile-dropdown-menu,
    .mobile-sub-dropdown-menu {
        transition: all 0.3s ease;
    }
    /* 移动端三级菜单缩进效果 */
    .mobile-sub-dropdown-menu {
        border-left: 2px solid rgba(224, 159, 62, 0.3);
    }       
            .dropdown-item:hover { background: #f8f5f0; color: #E09F3E; }
            /* Since徽章简化 */
            .since-badge {
                position: absolute; top: -1.5rem; left: -1.5rem;
                background: #E09F3E; color: #2D3047; font-weight: bold;
                border-radius: 50%; width: 6rem; height: 6rem;
                display: flex; align-items: center; justify-content: center;
                text-align: center; font-size: 1.25rem; z-index: 10;
            }
            /* 播放按钮互动效果核心样式 */
            .play-video-btn {
                transition: all 0.3s ease;
                animation: pulse-play 2s infinite; /* 呼吸动画 */
                z-index: 5;
            }
            .play-video-btn:hover {
                transform: scale(1.1); /*  hover放大 */
                box-shadow: 0 0 20px rgba(224, 159, 62, 0.8); /* 发光效果 */
            }
            .play-video-btn:active {
                animation: rotate-play 0.5s ease-out; /* 点击旋转 */
                transform: scale(0.95); /* 点击缩小反馈 */
            }
            /* 新闻卡片样式 */
            .news-card {
                border-radius: 1.5rem; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
                transition: all 0.4s ease; background: white;
            }
            .news-card:hover {
                transform: translateY(-10px);
                box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
            }
            .news-date {
                position: absolute; top: 1.5rem; right: 1.5rem;
                background: rgba(224, 159, 62, 0.9); color: white;
                padding: 0.5rem 1rem; border-radius: 0.5rem;
                font-size: 0.875rem; font-weight: 600;
            }
			
			
			/* 面包屑样式补充 */
            .breadcrumb-item { transition: all 0.2s ease; }
            .breadcrumb-item:hover { color: #E09F3E; }
            /* 证书卡片样式 */
            .cert-card { 
                transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
                opacity: 0;
                transform: translateY(20px);
            }
            .cert-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            }
        }
        