@charset "UTF-8";

/* ==========================================================================
   全局变量与基础核心设定
   ========================================================================== */
:root {
    --brand-red: #d31118;
    --carousel-duration: 6000ms;
    /* 丝滑核心：全局统一的高端缓动曲线 (Quintic / Circ) */
    --smooth-transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    /*background-color: #000;*/
    color: #fff;
    overflow-x: hidden;
}

/* ==========================================================================
   顶部导航栏（始终固顶 & 丝滑变色）
   ========================================================================== */
.custom-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    padding: 0;
    z-index: 2000;
    
    /* 默认顶栏状态：完全透明 */
    background-color: rgba(0, 0, 0, 0) !important;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    
    transition: var(--smooth-transition);
}

/* 统一控制导航栏内部所有核心元素的过渡动画 */
.custom-navbar .navbar-brand,
.custom-navbar .nav-link,
.custom-navbar .nav-phone-block,
.custom-navbar .nav-phone-block *,
.custom-navbar .navbar-toggler-icon,
.custom-navbar .text-light a {
    transition: var(--smooth-transition);
}

img {
    max-width: 100%;  /* 图片最大不会超过父元素的宽度 */
    height: auto;     /* 高度等比例自动缩放，防止图片变形 */

}
/* 默认状态下的导航白字排版 */
.custom-navbar .navbar-brand,
.custom-navbar .nav-link { 
    color: rgba(255, 255, 255, 0.9) !important; 
    font-size: 15px; 
    font-weight: 500; 
    padding: 25px 15px !important; 
    position: relative; 
}

.custom-navbar .nav-link:hover, 
.custom-navbar .nav-link.active { 
    color: #fff !important; 
}

/* 导航激活状态下的品牌红下划线 */
.custom-navbar .nav-item .active::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 15px; 
    right: 15px; 
    height: 3px; 
    background-color: var(--brand-red); 
}

/* 右侧电话区块基础视觉 */
.custom-navbar .nav-phone-block { 
    background-color: rgba(0, 0, 0, 0.2); 
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 25px; 
    color: #fff; 
    text-align: right; 
    min-width: 200px; 
}
.custom-navbar .nav-phone-block .phone-num { 
    color: #fff; 
}

/* --------------------------------------------------------------------------
   页面滚动后状态 (.scrolled)：顶栏平滑变白
   -------------------------------------------------------------------------- */
.custom-navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.96) !important; 
    backdrop-filter: blur(20px); 
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.custom-navbar.scrolled .navbar-brand,
.custom-navbar.scrolled .nav-link {
    color: #1a1a1a !important;
    padding: 20px 15px; 
}

.custom-navbar.scrolled .nav-link:hover, 
.custom-navbar.scrolled .nav-link.active { 
    color: var(--brand-red) !important; 
}

.custom-navbar.scrolled .nav-phone-block {
    background-color: #fcd23e;
    border-left: 1px solid transparent;
}
.custom-navbar.scrolled .nav-phone-block .phone-num { 
    color: #fff; 
}
.custom-navbar.scrolled .text-light a { 
    color: #1a1a1a !important; 
}
.custom-navbar.scrolled .navbar-toggler-icon { 
    filter: invert(1); 
}

/* ==========================================================================
   巨型下拉菜单 (Mega Menu) - 【始终保持白色背景】
   ========================================================================== */
@media (min-width: 992px) {
    .navbar { 
        position: relative; 
    }
    .mega-dropdown { 
        position: static !important; 
    }
    
    /* 核心控制：无论外层顶栏如何滑动，下拉卡片始终永久锁定纯白背景 */
    .custom-navbar .mega-menu-content {
        position: absolute;
        width: 100vw; 
        left: 0; 
        right: 0; 
        top: 100%; 
        border: none; 
        border-radius: 0; 
        margin-top: 0;
        padding: 40px 60px !important;
        transition: var(--smooth-transition);
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        
        background-color: #ffffff !important; 
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08) !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }
    
    /* 鼠标悬停触发：淡入并向上滑出微移特效 */
    .navbar-nav .nav-item.mega-dropdown:hover .mega-menu-content { 
        opacity: 1; 
        visibility: visible; 
        transform: translateY(0); 
    }
    
    /* 永久锁定白色菜单内部的高级深色排版 */
    .custom-navbar .mega-menu-content .menu-title { color: #111111 !important; }
    .custom-navbar .mega-menu-content .menu-subtitle { color: #888888 !important; }
    .custom-navbar .mega-menu-content .column-title { color: #444444 !important; }
    .custom-navbar .mega-menu-content .menu-list a { color: #555555 !important; }
    .custom-navbar .mega-menu-content .menu-list a:hover { color: var(--brand-red) !important; }
    
    /* 左侧首列右侧的垂直分割线：适配白底，改用极淡微灰线 */
    .custom-navbar .mega-menu-content .divider-col {
        border-color: rgba(0, 0, 0, 0.06) !important;
    }
}

/* 下拉菜单内部公共组件样式 */
.mega-menu-content .menu-title { 
    font-weight: 700; 
    font-size: 24px; 
    margin-bottom: 8px; 
}
.mega-menu-content .menu-subtitle { 
    font-size: 14px; 
    max-width: 240px; 
    line-height: 1.6; 
}
.mega-menu-content .all-link { 
    color: var(--brand-red); 
    text-decoration: none; 
    font-weight: bold; 
    font-size: 14px; 
    display: inline-block; 
    margin-top: 30px; 
}
.mega-menu-content .column-title { 
    font-weight: 700; 
    font-size: 15px; 
    margin-bottom: 20px; 
}
.mega-menu-content .menu-list { 
    list-style: none; 
    padding-left: 0; 
    margin-bottom: 0; 
}
.mega-menu-content .menu-list li { 
    margin-bottom: 15px; 
}
.mega-menu-content .menu-list a { 
    text-decoration: none; 
    font-size: 14px; 
    display: inline-flex; 
    align-items: center; 
    gap: 6px; 
}

/* 下拉菜单小红标徽章 */
.badge-red { 
    background-color: var(--brand-red); 
    color: #fff; 
    font-size: 10px; 
    padding: 1px 6px; 
    border-radius: 10px; 
    font-weight: normal; 
}
/* 下拉菜单右侧创意展示图 */
.mega-menu-img { 
    width: 100%; 
    max-width: 320px; 
    border-radius: 6px; 
    object-fit: cover; 
}

/* --------------------------------------------------------------------------
   移动端与折叠屏适配 (平板/手机)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .custom-navbar { padding: 10px 20px; }
    .nav-link { padding: 12px 10px !important; }
    .nav-item .active::after { display: none; }
    
    .mega-menu-content { background-color: #fff !important; padding: 15px !important; }
    .mega-menu-content .menu-title, .mega-menu-content .column-title { color: #111 !important; margin-top: 15px; }
    .mega-menu-content .menu-list a { color: #555 !important; }
    
    /* 移动端隐藏多余的不必要辅助视觉元素 */
    .mega-menu-content .menu-subtitle, 
    .mega-menu-content .divider-col, 
    .mega-menu-img-col { 
        display: none !important; 
    }
    
    .navbar-collapse { background-color: rgba(0,0,0,0.95); padding: 15px; border-radius: 8px; margin-top: 10px; }
    .scrolled .navbar-collapse { background-color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
    
    .explore-btn { position: relative; right: auto; top: auto; margin-top: 30px; }
    .circle-indicators, .scroll-down { bottom: 20px; }
}

/* ==========================================================================
   Hero Section 巨幕主轮播图
   ========================================================================== */
.hero-carousel { 
    height: 100vh; 
    min-height: 600px; 
    width: 100vw; 
    position: relative; 
    overflow: hidden; 
}
.hero-carousel .carousel-inner, 
.hero-carousel .carousel-item { 
    height: 100%; 
    width: 100%; 
}

/* 背景蒙版层：强化文字可读性 */
.carousel-bg-wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat; 
    z-index: 1; 
}
.carousel-video { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
}
.carousel-bg-wrapper::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)); 
}

.carousel-custom-caption { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    align-items: center; 
    z-index: 2; 
}

/* 轮播文字分层淡入交错动画 */
.hero-title-en, .hero-title-cn, .hero-subtitle { 
    opacity: 0; 
    transform: translateY(30px); 
    will-change: transform, opacity; 
}

.carousel-item.active .hero-title-en { animation: textFadeInUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.1s; }
.carousel-item.active .hero-title-cn { animation: textFadeInUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.25s; }
.carousel-item.active .hero-subtitle { animation: textFadeInUp 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s; }

@keyframes textFadeInUp {
    0% { opacity: 0; transform: translateY(40px); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.hero-title-en { font-size: clamp(3.5rem, 8vw, 6.5rem); font-weight: 700; line-height: 1.1; letter-spacing: 1px; text-transform: uppercase; }
.hero-title-cn { font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 600; margin-top: 10px; letter-spacing: 2px; }
.hero-subtitle { font-size: clamp(0.95rem, 2vw, 1.25rem); color: rgba(255, 255, 255, 0.85); margin-top: 20px; letter-spacing: 1px; }

/* 右侧浮动“探索”圆纽 */
.explore-btn {
    width: 50px; 
    height: 50px; 
    background-color: var(--brand-red); 
    color: #fff; 
    border-radius: 50%;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    text-decoration: none;
    font-size: 13px; 
    font-weight: bold; 
    position: absolute; 
    right: 18%; 
    top: 42%;
    box-shadow: 0 0 15px rgba(211, 17, 24, 0.4); 
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); 
    z-index: 10;
}
.explore-btn:hover { 
    color: #fff; 
    transform: scale(1.15); 
}

/* 下方指示：向下滑动鼠标 */
.scroll-down { 
    position: absolute; 
    bottom: 30px; 
    right: 8%; 
    text-align: center; 
    font-size: 12px; 
    color: rgba(255, 255, 255, 0.8); 
    z-index: 10; 
}
.scroll-down i { 
    font-size: 20px; 
    display: block; 
    animation: bounce 2s infinite; 
}
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 
    40% { transform: translateY(-6px); } 
    60% { transform: translateY(-3px); } 
}

/* 左侧环形加载指示器系统 */
.circle-indicators {
    position: absolute; 
    bottom: 40px; 
    left: 8%; 
    display: flex; 
    gap: 20px; 
    align-items: center;
    z-index: 10; 
    margin: 0; 
    padding: 0; 
    list-style: none;
}
.circle-indicators li { position: relative; width: 24px; height: 24px; cursor: pointer; }
.circle-indicators svg { width: 24px; height: 24px; transform: rotate(-90deg); }
.circle-indicators .bg-track { fill: none; stroke: rgba(255, 255, 255, 0.2); stroke-width: 2; }
.circle-indicators .progress-cover { fill: none; stroke: var(--brand-red); stroke-width: 2; stroke-dasharray: 63; stroke-dashoffset: 63; }

@keyframes circleRunningAnim {
    0% { stroke-dashoffset: 63; }
    100% { stroke-dashoffset: 0; }
}

/* ==========================================================================
   新增：“以数字之力，赋能企业增长” 服务板块
   ========================================================================== */
.services-section {
    background-color: #f8f9fa; /* 浅灰偏白的高级底色 */
    padding: 100px 0;
}

.services-section .section-title {
    color: #222222;
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    letter-spacing: 2px;
    margin-bottom: 60px;
}

.cases-section .section-title {
    color: #222222;
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: 2px;
    margin-bottom: 60px;
}
.reasons-section .section-title {
    color: #222222;
    font-weight: 700;
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    letter-spacing: 2px;
    margin-bottom: 60px;
}

 .abouttitle{ color:#fcd23e; 
     
     
     
 }

/* 渐变卡片核心承载容器 */
.service-card-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    min-height: 420px;
    padding: 35px 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

.service-card-wrapper:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* 各卡片专属高饱和度渐变与背景纹理混搭 */
.card-orange {
    background: linear-gradient(135deg, #ff9300 0%, #ff5b00 100%);
}
.card-red {
    background: linear-gradient(135deg, #ff3300 0%, #cc0000 100%);
}
.card-green {
    background: linear-gradient(135deg, #7ad100 0%, #3ca800 100%);
}
.card-blue {
    background: linear-gradient(135deg, #0099ff 0%, #0055ff 100%);
}

/* 磨砂质感背景图装饰叠加层 */
.card-bg-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    mix-blend-mode: overlay; /* 混合模式：融入渐变 */
    opacity: 0.18; /* 维持若隐若现的科技底纹质感 */
    z-index: 1;
    pointer-events: none;
}

/* 卡片内部图文内容排版 */
.service-card-body {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.service-card-body .card-main-title {
    color: #ffffff;
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 1px;
}

/* 符号列表精细微调 */
.service-item-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.service-item-list  br{
    list-style: none;
    padding-left: 0;
    display: none;
    margin-bottom: 0;
}
.service-item-list li {
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    line-height: 1.5;
}

/* 完美复现图片中的白色小圆点前缀 */
.service-item-list li::before {
    content: "•";
    color: #ffffff;
    font-weight: bold;
    display: inline-block;
    width: 15px;
    margin-left: -2px;
}

/* 针对长英文小字（如第3列Facebook等）的附属排版优化 */
.service-item-list li .sub-text-en {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* 省略号样式 */
.service-item-list li.list-more {
    opacity: 0.7;
    font-weight: bold;
    font-size: 16px;
    padding-left: 12px;
}
.service-item-list li.list-more::before {
    display: none;
}

/* --------------------------------------------------------------------------
   响应式断点补充控制
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .service-card-wrapper {
        min-height: 450px; /* 容纳平板状态下可能换行的小字 */
        padding: 30px 22px;
    }
}

@media (max-width: 767.98px) {
    .services-section {
        padding: 60px 0;
    }
    .services-section .section-title {
        margin-bottom: 40px;
        font-size: 1.7rem;
    }
    .service-card-wrapper {
        min-height: auto; /* 手机端自适应内容高度 */
    }
    .quote-section h2{font-size:1.25rem}
    .custom-navbar .navbar-brand,
    .custom-navbar .nav-link { 
    color: rgba(255, 255, 255, 0.9) !important; 
    font-size: 15px; 
    font-weight: 500; 
    padding: 25px 5px!important; 
    position: relative; 
}
  
}

/* 案例板块样式 */
.cases-section { background-color: #ffffff; }

.case-card { 
    transition: transform 0.4s ease; 
    cursor: pointer;
}
.case-card:hover { transform: translateY(-10px); }

.case-img { 
    width: 100%; 
    height: 300px;
    overflow: hidden;
    border-radius: 8px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.case-img img{max-width:100%; height:auto}

.case-info { padding: 20px 0; }
.case-title { font-size: 1.2rem; font-weight: bold; color: #1a1a1a; margin-bottom: 8px; }
.case-desc { font-size: 0.9rem; color: #666; margin: 0; }

@media (max-width: 768px) {
    .case-title { font-size: 1.1rem; }
    .about-content h2 { font-size: 1.7rem!important }
    .news-section h2{font-size:1.7rem!important;color:#fcd23e; }
    .about-section { padding: 20px 0!important; }
    
    
.case-img { 
    width: 100%; 
    height: 200px;
    overflow: hidden;
    border-radius: 8px; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.case-img img{max-width:100%; height:auto}
}


/* 关于我们板块样式 */
.about-section {
    background-color: #ffffff;
    padding: 30px 0;
}

/* 调整标题和段落间距 */
.about-content h2 { font-size: 2.5rem; }

/* 数据块样式优化 */
.about-content .col-3 h3 {
    margin-bottom: 5px;
    color: var(--brand-red); /* 若要呼应主题可改为红色，否则保持黑色 */
}

/* 响应式调整 */
@media (max-width: 991px) {
    .about-content h2 { font-size: 2rem; }
    .about-section { padding: 60px 0; }

}
    .about-section h1{font-size:3.5rem!important}
@media (max-width: 576px) {
    /* 移动端数据块改为两行显示，避免过挤 */
    .about-content .col-3 {
        width: 50%;
        margin-bottom: 20px;
    }
}

.reasons-section { background-color: #ffffff; padding: 100px 0; }
.reason-circle { 
    width: 100px; height: 100px; margin: 0 auto 20px; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: white; font-size: 40px; transition: transform 0.3s;
}
.bg-purple { background-color: #9c27b0; }

/* 初始隐藏状态 */
.slide-up { 
    opacity: 0; 
    transform: translateY(50px); 
    transition: all 0.8s ease-out; 
}
/* 触发后的动画状态 */
.slide-up.visible { 
    opacity: 1; 
    transform: translateY(0); 
}

/* Tab 导航栏样式 */
#newsTab .nav-link {
    color: #555;
    font-weight: 500;
    padding: 10px 20px;
    border: none;
    transition: 0.3s;
}
#newsTab .nav-link.active {
    color: var(--brand-red);
    /*background: transparent;*/
    /*border-bottom: 2px solid var(--brand-red);*/
}

/* 新闻卡片样式 */

/* 1. 确保整个新闻板块背景为纯白 */
.news-section {
    background-color: #ffffff; /* 修改此处为白色 */
    padding: 100px 0;
    color: #000;
}

.news-section h2{font-size:2.5rem;color:#fcd23e; }

/* 2. 修改卡片背景（你可以选择保持浅灰以增加层次，或改为白色） */
.news-card {
    background-color: #f2f2f2; /* 修改此处为白色 */
    border: 1px solid #f0f0f0;  /* 建议加一个极淡的边框，防止白底在白背景上“消失” */
    padding: 30px;
    border-radius: 10px;
    transition: 0.3s;
    height: 100%;
}

.news-card a{color:#000; text-decoration:none}
/* 悬停效果优化：在白底上悬停时增加阴影，使其浮起 */
.news-card:hover {
    background-color: #ffffff;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* 调整阴影使其更高级 */
    transform: translateY(-5px);
}

/* 让激活的 Tab 在白色背景下更醒目 */
#newsTab .nav-link.active {
    color: var(--brand-red);
 
    /*border-bottom: 2px solid var(--brand-red);*/
    /*border-radius: 4px 4px 0 0;*/
}


/* 响应式调整 */
@media (max-width: 991px) {
    #newsTab {
        justify-content: start !important;
        overflow-x: auto;
        flex-wrap: nowrap;
        white-space: nowrap;
        gap:5px;
    }
}

.tab-content h5{font-size:22px}

.quote-section {
    background: url('/theme/img/homeform.png') center/cover no-repeat fixed;
    padding: 100px 0;
    position: relative;
}

.quote-card {
    background: rgba(255, 255, 255, 0.95);
    padding: 60px;
    border-radius: 15px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.quote-card h5{color:#000} 
/* 表单输入框优化 */
.form-control {
    border: none;
    border-radius: 4px;
    padding: 12px;
}

/* 移动端适配 */
@media (max-width: 991px) {
    .quote-card { padding: 30px; }
    .quote-section { padding: 50px 0; }
}


.footer-section {
    background-color: #111214;
    color: #ffffff;
    padding: 80px 0 40px;
}

.footer-features i {
    font-size: 24px;
    display: block;
    margin-bottom: 10px;
    color: #ffffff;
}

.footer-section h6 {
    margin-bottom: 20px;
    font-weight: bold;
}

.footer-section a:hover {
    color: #ffffff !important;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .footer-features .col-6 { margin-bottom: 30px; }
    .footer-section { text-align: center; }
    .footer-section .text-lg-end { text-align: center !important; }
}

/* 定义统一的底部特色项布局 */
.footer-item {
    display: flex;
    align-items: center; /* 确保图标和文字垂直居中 */
    gap: 15px;           /* 图标与右侧文字的间距 */
}

/* 图标样式统一 */
.footer-item i {
    font-size: 28px;     /* 图标大小 */
    color: #ffffff;
    flex-shrink: 0;      /* 确保图标不被挤压 */
}

/* 文字区块样式 */
.footer-item strong {
    font-size: 16px;
    display: block;
    margin-bottom: 2px;
}

.banner-section a{color:#fff; text-decoration:none}
.footer-bottom a{text-decoration:none; color:#6d767e}
.footer a{text-decoration:none; color:#6d767e}
.footer a:link{text-decoration:none; color:#6d767e}

.list-unstyled a{text-decoration:none; color:#6d767e}
.list-unstyled a:link{text-decoration:none; color:#6d767e}
.list-unstyled a:visited{text-decoration:none; color:#6d767e}
/* 容器样式：限制二维码最大宽度，确保在手机端不会过大 */
.qrcode-wrapper {
    width: 100px; /* 您希望二维码显示的理想大小 */
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 关键：确保图片始终按比例缩放，并填充容器 */
.qrcode-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 关键属性：保持比例，完整展示 */
    border-radius: 8px;  /* 增加圆角，更符合现代视觉 */
    transition: transform 0.3s ease;
}

/* 鼠标悬停微放大，增加交互反馈 */
.qrcode-wrapper img:hover {
    transform: scale(1.05);
}

/* 基础 Logo 样式定义 */
.logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.logo-img {
    height: 45px; /* 统一限制 Logo 高度，可根据实际视觉微调 */
    width: auto;
    transition: opacity 0.3s ease, transform 0.3s ease; /* 顺滑的过渡动效 */
}

/* 默认状态：显示 Logo 1，隐藏 Logo 2 */
.custom-navbar .logo-default {
    display: block;
    opacity: 1;
}
.custom-navbar .logo-scrolled {
    display: none;
    opacity: 0;
}

/* 滚动固顶状态 (.scrolled)：隐藏 Logo 1，显示 Logo 2 */
.custom-navbar.scrolled .logo-default {
    display: none;
    opacity: 0;
}
.custom-navbar.scrolled .logo-scrolled {
    display: block;
    opacity: 1;
}


/* 仅在屏幕宽度大于等于 992px（Bootstrap的lg断点）时生效 */
@media (min-width: 992px) {
    .navbar-nav .nav-item.dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0; /* 消除鼠标移出间隙，防止菜单闪烁关闭 */
    }
}

.search-form button{border:0; background:none}



.self-svg {
  --size: 80%;
  --fill: linear-gradient(-34deg, #ed7841 0%, #ebb13c 100%);
  --fill: #ffffff;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  width:37.44px;
  height:37.44px;
  background: var(--main-color);
}
.self-svg svg {
  transform: translateX(-5%);
}

/* 网站地图核心自定义样式 */
        .sitemap-card {
            border: 1px solid #e9ecef;
            transition: all 0.3s ease;
        }
        .sitemap-card:hover {
            border-color: #dee2e6;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.05);
            background-color: #fafafa;
        }
        .sitemap-title {
            font-size: 1.1rem;
            font-weight: 700;
            position: relative;
            padding-bottom: 10px;
        }
        /* 标题下方的红色小装饰线 */
        .sitemap-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 30px;
            height: 2px;
            background-color: #dc3545;
        }
        .sitemap-links {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }
        .sitemap-links li {
            margin-bottom: 12px;
        }
        .sitemap-links li:last-child {
            margin-bottom: 0;
        }
        .sitemap-links a {
            color: #495057;
            text-decoration: none;
            font-size: 0.95rem;
            display: inline-block;
            transition: transform 0.2s ease, color 0.2s ease;
        }
        .sitemap-links a:hover {
            color: #dc3545;
            transform: translateX(4px);
        }

        /* 新增：新闻与案例列表的精致版样式 */
        .detail-list {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }
        .detail-list li {
            padding: 10px 0;
            border-bottom: 1px dashed #edeecb; /* 优雅的虚线分割 */
        }
        .detail-list li:last-child {
            border-bottom: none;
            padding-bottom: 0;
        }
        .detail-list a {
            color: #212529;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .detail-list a:hover {
            color: #dc3545;
        }
        /* 进度条滑过动画（响应之前的需求，让列表更有质感） */
        .anim-item {
            position: relative;
        }
        .anim-item::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 1px;
            background: #dc3545;
            transition: width 0.3s ease-in-out;
        }
        .anim-item:hover::after {
            width: 100%;
        }