@charset "utf-8";
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";

    :root {
        --primary-blue: #0056b3;
        --hover-blue: #004085;
        --text-dark: #111;
        --text-gray: #555;
        --white: #ffffff;
        --top-bar-bg: #f8f9fa;
        --border: #eeeeee;
        --max-width: 1480px;
        --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }
a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;        /* 继承父元素颜色，确保不变色 */
  text-decoration: none; /* 移除下划线 */
}
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; color: var(--text-dark); background: #fff; overflow-x: hidden; }

    /* --- 1. Top Bar 桌面样式 --- */
    .top-bar {
        background: var(--top-bar-bg);
        border-bottom: 1px solid var(--border);
        font-size: 14px;
        color: var(--text-gray);
    }
    .top-bar-container {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 24px;
    }
    .top-left, .top-right { display: flex; align-items: center; gap: 20px; }
    .contact-item { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
    .lang-select { border: none; background: transparent; cursor: pointer; color: var(--text-gray); font-size: 14px; }

    /* --- 2. Header (1480px) --- */
    header {
        background: var(--white);
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        position: sticky;
        top: 0;
        z-index: 2000;
    }
    .nav-wrapper {
        max-width: var(--max-width);
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        height: 85px;
    }
    .navbar-brand {
        padding-top: .625rem;
        padding-bottom: .625rem;
    }
    .logo img {
        height: 3rem;
    }

    @media screen and (max-width: 768px) {
        .nav-wrapper {
            height: 50px;
        }
        .navbar-brand {
            height: 3.125rem;
        }
        .logo img {
            height: 1.875rem;
        }
    }

    .logo { font-size: 24px; font-weight: 700; color: var(--bg-light); text-decoration: none; display: flex; align-items: center; }

    /* Desktop Menu */
    .desktop-menu { display: flex; list-style: none; height: 100%; }
    .nav-item { position: relative; display: flex; align-items: center; }
    .nav-link {
        text-decoration: none; color: var(--text-dark); font-weight: 600; font-size: 18px;
        padding: 0 22px; height: 100%; display: flex; align-items: center; transition: var(--transition);
    }
    .nav-link:hover { color: var(--primary-blue); }

    @media screen and (max-width: 768px) {
        .nav-link {
            padding: 0 0px;
        }
    }

    /* Dropdown Logic */
    .dropdown, .sub-dropdown {
        position: absolute; background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        opacity: 0; visibility: hidden; transform: translateY(15px); transition: var(--transition);
        list-style: none; border-top: 4px solid var(--primary-blue);
    }
    .dropdown { top: 100%; left: 0; min-width: 260px; }
    .sub-dropdown { top: 0; left: 100%; min-width: 240px; border-top: none; border-left: 4px solid var(--primary-blue); }
    .nav-item:hover > .dropdown, .has-sub:hover > .sub-dropdown { opacity: 1; visibility: visible; transform: translate(0); }

    .dropdown li a {
        display: flex; justify-content: space-between; padding: 15px 25px;
        text-decoration: none; color: var(--text-gray); font-size: 16px; border-bottom: 1px solid #f9f9f9;
    }

    .btn-inquiry {
        background: var(--primary-blue); color: #fff; padding: 12px 26px; border-radius: 4px;
        text-decoration: none; font-weight: 700; transition: 0.3s; display: inline-block;
    }

    /* --- 3. Mobile Full-Width Drawer --- */
    .mobile-toggle { display: none; font-size: 32px; cursor: pointer; color: var(--primary-blue); }

    .mobile-drawer {
        position: fixed; top: 0; left: -100%; width: 100%; height: 100%;
        background: #fff; z-index: 3000; transition: var(--transition);
        display: flex; flex-direction: column;
    }
    .mobile-drawer.active { left: 0; }

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

    @media screen and (max-width: 768px) {
        .drawer-header {
            padding: 0px 24px;
        }
    }

    .drawer-logo {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

    .drawer-body { flex: 1; overflow-y: auto; }
    .m-link {
        display: flex; justify-content: space-between; padding: 20px 24px;
        font-size: 19px; font-weight: 600; text-decoration: none; color: var(--text-dark); border-bottom: 1px solid #f5f5f5;
    }

    @media screen and (max-width: 768px) {
        .m-link {
            padding: 10px 24px;
        }
    }

    .m-sub { display: none; background: #fafafa; }
    .m-sub .m-link { padding-left: 44px; font-size: 17px; color: var(--text-gray); }

    .close-btn { font-size: 40px; cursor: pointer; color: #999; line-height: 1; }

    /* --- 4. Slider --- */
    .slider { position: relative; height: 750px; background: #000; overflow: hidden; }
    .slide {
        position: absolute; inset: 0; opacity: 0; transition: 1.2s;
        background-size: cover; background-position: center; display: flex; align-items: center;
    }
    .slide.active { opacity: 1; z-index: 10; }
    .slide::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.45); }
    .slide-content { max-width: var(--max-width); margin: 0 auto; width: 100%; padding: 0 24px; position: relative; z-index: 20; color: #fff; }
    .slide-content h2 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin-bottom: 1.5rem; letter-spacing: -0.02em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }
    .slide-content p { font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 650px; line-height: 1.6; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
    .slide-content li { font-size: clamp(1rem, 1.5vw, 1.2rem); max-width: 650px; line-height: 1.6; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }

    /* Controls */
    .arrow {
        position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px;
        background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3);
        color: #fff; display: flex; align-items: center; justify-content: center;
        cursor: pointer; z-index: 30; border-radius: 50%; backdrop-filter: blur(8px);
    }

    .arrow:hover {
        position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px;
        background: rgb(0 35 221 / 80%); border: 1px solid rgba(255,255,255,0.3);
        color: #fff; display: flex; align-items: center; justify-content: center;
        cursor: pointer; z-index: 30; border-radius: 50%; backdrop-filter: blur(8px);
    }
    .prev { left: 30px; } .next { right: 30px; }
    .dots { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; z-index: 30; }
    .dot { width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%; cursor: pointer; transition: 0.4s; }
    .dot.active { background: var(--primary-blue); border-color: var(--primary-blue); width: 35px; border-radius: 10px; }

    /* --- 5. 移动端优化 (≤1480px) --- */
    @media (max-width: 1480px) {
        /* 顶部栏固定，渐变蓝背景，只显示第一个电话项 */
        .top-bar {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(135deg, var(--primary-blue), #003d99);
            color: #fff;
            border-bottom: none;
            z-index: 2100;
            height: 44px;
            display: flex;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }
        .top-bar-container {
            justify-content: center;
            padding: 0 20px;
            height: 100%;
        }
        .top-right,
        .contact-item:not(:first-child) {
            display: none !important;
        }
        /* 第一个联系项（电话）样式：隐藏默认图标，显示 WhatsApp 图标 */
        .contact-item:first-child {
            color: #fff !important;
            font-weight: 700;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .contact-item:first-child .icon {
            display: none; /* 隐藏默认电话图标 */
        }
        .contact-item:first-child::before {
            content: "";
            display: inline-block;
            width: 20px;
            height: 20px;
            background-color: #fff;
            mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.1 0-65.6-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6z"/></svg>') no-repeat center;
            mask-size: contain;
            -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.1 0-65.6-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6z"/></svg>') no-repeat center;
            -webkit-mask-size: contain;
        }
        /* 调整 header 位置，紧贴顶部栏下方，并添加margin-top避免被遮挡 */
        header {
            top: 44px;
            margin-top: 44px;  /* 新增：使 header 从顶部栏下方开始，防止被固定栏覆盖 */
        }
        /* 原有移动端规则保持不变 */
        .desktop-menu {
            display: none;
        }
        .mobile-toggle {
            display: block;
        }
        header .btn-inquiry {
            display: none;
        }
        .slider {
            height: 550px;
        }
        .arrow {
            display: none;
        }
    }
/* ===== 下拉菜单悬停变色效果（电脑端）===== */
.dropdown li a:hover,
.sub-dropdown li a:hover {
    background-color: #f0f7ff;        /* 浅蓝背景，与品牌色呼应 */
    color: var(--primary-blue);        /* 文字变为主蓝色 */
    padding-left: 30px;                /* 轻微右移，增强层次感 */
    transition: var(--transition);     /* 使用已有的过渡变量 */
}

/* 可选：二级菜单左边框悬停时也变亮 */
.has-sub:hover > .sub-dropdown {
    border-left-color: var(--hover-blue);
}