/*bootstrap框架开始*/

  /* 重置浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 页面内容顶部边距 */
       
            
           
/* 消除body默认的margin和padding */
body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh; /* 确保body至少占满屏幕高度 */
    font-family: 'Roboto', Arial, Helvetica, sans-serif !important;
   
}

/* 检查并清除可能导致空隙的子元素样式 */
body > *:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body > *:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 处理可能的伪元素导致的空隙 */
body::before,
body::after {
    content: none !important;
}
        
         /* 链接样式：去掉下划线，字体颜色为黑色 */
        a {
            text-decoration: none; /* 去掉下划线 */
            color: #000; /* 设置字体颜色为黑色 */
        }
        
        /* 可选：添加链接悬停效果 */
        a:hover {
            color: #333; /* 悬停时稍浅的黑色 */
        }
        .default-a-color{
            color: #0d6efd !important;
        }
         .default-a-color:hover {
            color: #333 !important; /* 悬停时稍浅的黑色 */
        }
        /* 导航栏样式 */
        .navbar {
           
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            
            z-index: 1030;
            min-height: 64px;
           
           
        }
        
        .navbar .container {
           
            width: 80% !important;
            margin: 0px auto !important; /* 上下保留20px margin，左右自动居中 */
        }
        
        /* 导航栏链接样式 */
        .nav-link {
            white-space: nowrap;
            transition: color 0.3s ease;
            padding: 0.5rem 0.75rem;
            position: relative;
        }
        
        .nav-link:hover {
            color: #0d6efd;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #0d6efd;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        /* 二级菜单箭头提示 */
        .has-dropdown {
            position: relative;
            padding-right: 1.5rem !important;
        }
        
        .has-dropdown::before {
            content: '';
            position: absolute;
            top: 50%;
            right: 0.5rem;
            transform: translateY(-50%);
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid #212529;
            transition: border-top-color 0.3s ease;
        }
        
        .has-dropdown:hover::before {
            border-top-color: #0d6efd;
        }
        
       
        
        /* 按钮通用样式 */
        .auth-btn {
            white-space: nowrap;
            transition: all 0.3s ease;
        }
        
         /* 1. 重置Bootstrap默认下拉菜单样式，消除冲突 */
         /* 二级菜单样式 */
        .dropdown-menu {
            border: none;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-radius: 0 0 8px 8px;
            padding: 1rem;
            margin-top: 0;
            left: 0;
            right: 0;
            width: 100%;
            transform: none !important;
        }
        
        /* 电脑端：四列布局，文字不换行 */
        .dropdown-columns {
            display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
        }
        
        .dropdown-column {
            flex: 1;
            min-width: 0;
            padding: 0 0.5rem;
        }
        /* 4. 二级菜单标题样式（优化层级感） */
        .dropdown-column-title {
            font-weight: 600;
            margin-bottom: 0.8rem;
            padding-left: 0.3rem;
            color: #212529;
            font-size: 1rem;
            white-space: nowrap; /* 标题不换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 标题过长显示省略号 */
            border-left: 3px solid #0d6efd; /* 蓝色左边界，突出标题 */
        }

        /* 5. 菜单项样式（解决文字换行） */
        .dropdown-item {
            display: block;
            width: 100%;
            padding: 0.6rem 0.3rem; /* 调整内边距，提升点击区域 */
            clear: both;
            font-weight: 400;
            color: #495057; /* 文字颜色稍浅，区分标题与菜单项 */
            text-align: left;
            text-decoration: none;
            white-space: nowrap; /* 强制菜单项文字不换行 */
            overflow: hidden;
            text-overflow: ellipsis; /* 文字过长显示省略号 */
            background-color: transparent;
            border: 0;
            transition: background-color 0.2s; /* hover过渡效果 */
        }

        /* 6. 菜单项hover效果（优化交互） */
        .dropdown-item:hover {
            color: #0d6efd; /* hover时文字变蓝 */
            background-color: #f1f5f9; /* 浅色背景，提升辨识度 */
        }
        
       
        
        /* 桌面端样式（仅调整菜单宽度，保持1列） */
        @media (min-width: 993px) {
            .small-mobile-buttons {
                display: none !important;
            }
            
            .dropdown:hover .dropdown-menu {
                display: block;
            }
            
            .nav-item {
                margin: 0 8px;
            }
            
            .desktop-buttons {
                display: flex;
                gap: 0.75rem;
            }
            
           /* 桌面端二级菜单位置调整 */
            .dropdown-menu {
                margin-top: 0rem !important;
                width: auto !important;
                min-width: 600px; /* 确保有足够宽度显示四列不换行 */
            }

            /* 关键：桌面端菜单容器水平居中（抵消Bootstrap默认的flex-start） */
            .navbar-collapse {
                justify-content: center !important;
            }

            /* 移除桌面端菜单额外内边距 */
            .d-flex.justify-content-center {
                padding: 0 !important;
                margin: 0 !important;
            }
        }
        
        /* 针对中等屏幕的响应式调整（保持1列） */
        @media (min-width: 993px) and (max-width: 1199px) {
            .dropdown-menu {
                width: 280px !important; /* 微调桌面端菜单宽度 */
            }
            
            .dropdown-column-title {
                font-size: 0.9rem;
            }
            
            .dropdown-item {
                font-size: 0.85rem;
            }
        }
         /* 移动端样式 */
        @media (max-width: 992px) {
            .has-dropdown::before {
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                border-left: 4px solid #212529;
                right: 0;
            }
            
            .has-dropdown:hover::before {
                border-left-color: #0d6efd;
            }
            
            .dropdown.show .has-dropdown::before {
                transform: translateY(-50%) rotate(90deg);
            }
            
            .navbar .container {
           
            width: 100% !important;
            margin: 0px auto !important; /* 上下保留20px margin，左右自动居中 */
        }
            
           
            
            .navbar {
                min-height: 58px;
                width: 100%;
            }
            
            /* 手机端隐藏desktop-buttons区域 */
            .desktop-buttons {
                display: none !important;
            }
            
            /* 汉堡菜单旁边的按钮样式 */
            .small-mobile-buttons {
                display: flex !important;
                gap: 0.5rem;
                margin-right: 0.5rem;
            }
            
            .small-mobile-buttons .auth-btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.8rem;
            }
            
            /* 移动端二级菜单容器：确保1列布局，清除多余间距 */
            .dropdown-menu {
                border: none;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                border-radius: 0 0 8px 8px;
                padding: 1rem 0; /* 上下内边距，左右靠列控制 */
                margin-top: 0;
                left: 0;
                right: 0;
                width: 100%;
                transform: none !important;
                list-style: none !important; /* 清除ul默认列表样式，避免偏移 */
                grid-template-columns: 1fr;
            }
            
            /* 核心：移动端1列布局 - 取消换行，列宽100% */
            .dropdown-columns {
                display: flex;
                flex-direction: column; /* 垂直排列，强制1列 */
                gap: 1.5rem; /* 列之间的垂直间距，更美观 */
                padding: 0 1rem; /* 左右内边距，控制内容与菜单边缘距离 */
            }
            
            .dropdown-column {
                flex: 0 0 100% !important; /* 固定列宽100%，确保1列 */
                min-width: 100% !important;
                padding: 0 !important; /* 取消列自身内边距，统一由容器控制 */
            }

            /* 移动端菜单居中 */
            .navbar-nav {
                padding: 0.5rem 0;
            }
        }
         /* 7. 适配移动端（防止菜单过宽） */
        @media (max-width: 768px) {
            .navbar .dropdown-menu {
             /* 限制最大高度为屏幕的70%，留出顶部导航栏空间 */
        max-height: 70vh;
        /* 超出部分显示垂直滚动条 */
        overflow-y: auto;
        /* 隐藏水平滚动条（防止意外出现） */
        overflow-x: hidden;
        /* 添加内边距防止内容贴边 */
        padding-bottom: 1.5rem;
            }
             /* 优化滚动条样式（可选） */
    .navbar .dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }
    
    .navbar .dropdown-menu::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 3px;
    }
            .dropdown-column {
                flex: 0 0 100% !important; /* 移动端自动变为1列布局 */
                min-width: 100% !important;
                max-width: 100% !important;
            }
        }
      
        @media (max-width: 992px) {
            .small-mobile-buttons {
                display: flex; /* 移动端显示按钮 */
                margin-right: 1rem;
            }
            .desktop-buttons {
                display: none; /* 移动端隐藏桌面端按钮 */
            }
             .img-fluid {
            width: 100%; /* 使图片宽度适应列 */
            height: auto !important; /* 保持高度比例 */
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }
        }
/*中间内容部分开始*/
.container-col2-leftimg-righttext {
            max-width: 80%;
            margin: auto;
        }
         .container-col2-lefttext-rightimg {
            max-width: 80%;
            margin: auto;
        }
       
         .container-four-columns {
            max-width: 80%;
            margin: auto;
        }
         .caption {
            margin: 10px 0; /* 设置图片说明的外边距 */
            font-weight: bold; /* 加粗说明文字 */
        }
        .author-time {
            display: flex; /* 使用 Flexbox 布局 */
            justify-content: space-between; /* 左右分开 */
            align-items: center; /* 垂直居中对齐 */
            font-size: 0.9em; /* 设置字体大小 */
            color: gray; /* 设置字体颜色 */
        }
        .row {
            display: flex; /* 使用 Flexbox 布局 */
        }
        .col-md-6 {
            display: flex;
            align-items: stretch; /* 使列的高度一致 */
        }
          .img-fluid {
            width: 100%; /* 使图片宽度适应列 */
            height: auto; /* 保持高度比例 */
            transition: transform 0.3s ease; /* 添加过渡效果 */
        }
       
        .img-fluid:hover {
            transform: scale(1.05); /* 悬停时缩放 */
        }
        .text-container {
            display: flex;
            flex-direction: column; /* 使文字区域垂直排列 */
            justify-content: flex-start; /* 顶部对齐 */
        }
        .text-container p {
            line-height: 1.6; /* 设置行间距 */
            margin: 0; /* 去掉默认的段落外边距 */
        }
        .divider {
            width: 20%; /* 设置横线宽度为50% */
            height: 2px; /* 设置横线高度 */
            background-color: blue; /* 设置横线颜色为蓝色 */
            border: none; /* 去掉默认边框 */
            margin: 30px 0; /* 设置上下外边距 */
        }
        .homepage-background-contain {
            width: 100%; /* 设置宽度为100% */
            height: 500px; /* 设置固定高度 */
            background-image: linear-gradient(rgba(251, 244, 244, 0.952), rgba(226, 222, 222, 0.5)), /* 渐变层 */
            url('/img/homepage-bg.webp'); /* 替换为你的图片链接 */
          background-size: 100% auto; /* 宽度充满容器，高度按比例自适应 */
    background-position: center;
    background-repeat: no-repeat;
             position: relative; /* 为子元素定位提供参考 */
             margin-top: 50px;
              margin-bottom: 50px;
        }
         .homepage-background-contain .centered-div {
            width: 40%; /* 设置宽度为40% */
            margin: 0 auto; /* 水平居中 */
           
            padding: 20px; /* 内边距 */
            text-align: center; /* 文本居中 */
           
            position: absolute; /* 绝对定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 调整偏移量以实现真正的居中 */
        }
           .Medical-and-Dental-background-contain {
            width: auto; /* 设置宽度为100% */
            height:500px; /* 设置固定高度 */
            background-image:linear-gradient(rgba(53, 51, 51, 0.3), rgba(44, 43, 43,0.3)), /* 渐变层 */
            url('/img/Medical-and-Dental-background-contain.webp'); /* 替换为你的图片链接 */
          background-size: 100% auto; /* 宽度充满容器，高度按比例自适应 */
    background-position: center;
    background-repeat: no-repeat;
             position: relative; /* 为子元素定位提供参考 */
             margin-top: 20px;
              margin-bottom: 50px;
        }
            .Medical-and-Dental-background-contain .centered-div {
            width: 40%; /* 设置宽度为40% */
            margin: 0 auto; /* 水平居中 */
           
            padding: 20px; /* 内边距 */
            text-align: center; /* 文本居中 */
           
            position: absolute; /* 绝对定位 */
            top: 50%; /* 垂直居中 */
            left: 50%; /* 水平居中 */
            transform: translate(-50%, -50%); /* 调整偏移量以实现真正的居中 */
        }
         .dashed-border-div {
            text-align: center;
            border: 2px dashed #656fd3; /* 虚线边框，黑色 */
            padding: 10px; /* 内边距 */
            /*background-color: rgba(255, 255, 255, 0.9);  背景颜色，带透明度 */
           
        }
        /* 媒体查询：在小屏幕设备上调整样式 */
        @media (max-width: 768px) {
          
            .homepage-background-contain .centered-div {
                width: 100%; /* 在手机端，宽度为100% */
               
            }
              .Medical-and-Dental-background-contain .centered-div {
                width: 100%; /* 在手机端，宽度为100% */
               
            }

            .dashed-border-div {
                width: 100%; /* 在手机端，宽度为100% */
            }
        }
         @media (max-width:480px) {
          
           .homepage-background-contain{
            height: 650px;
          }
          .img-flagship-logo{width: 100px !important;}
            
        }

 /* 中间内容部分结束 */
       
       
        /* 页脚底部开始 */
        .footer-container {
            width: 80%;
            margin: 0 auto;
            padding-top: 100px;
        }
        
        .footer-column h5 {
            font-weight: 600;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        .footer-column h5::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background-color: #007bff;
        }
        
        .footer-column ul {
            list-style: none;
            padding: 0;
        }
        
        .footer-column ul li {
            margin-bottom: 0.75rem;
        }
        
        .footer-column ul li a {
            text-decoration: none;
            color: #6c757d;
            transition: color 0.3s ease;
        }
        
        .footer-column ul li a:hover {
            color: #007bff;
        }
        
        .contact-info li {
            display: flex;
            align-items: flex-start;
        }
        
        .contact-info li i {
            margin-right: 10px;
            color: #007bff;
            margin-top: 5px;
        }
        
        /* 社交媒体样式 */
        .social-links {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
           color: #007bff;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background-color: #007bff;
            color: white;
            transform: translateY(-3px);
        }
        
        /* 订阅区域样式 */
        .subscribe-form {
            margin-top: 1rem;
            display: flex;
            gap: 0.5rem;
        }
        
        .subscribe-form input {
            flex: 1;
            padding: 0.5rem 1rem;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 1rem;
        }
        
        .subscribe-form button {
            padding: 0.5rem 1.5rem;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        
        .subscribe-form button:hover {
            background-color: #0056b3;
        }
        
         /* 版权区域样式 - 确保垂直居中 */
        .copyright {
            border-top: 1px solid #e9ecef;
            padding: 0; /* 移除内边距，避免影响居中 */
            margin-top: 2rem;
            height: 100px; /* 设置固定高度 */
            display: flex;
            justify-content: space-between;
            align-items: center; /* 垂直居中关键属性 */
            flex-wrap: wrap;
        }
        
        .policy-links a {
            margin-left: 1.5rem;
        }
        
        /* 分隔线 */
        .footer-divider {
            margin: 2rem 0;
            border-top: 1px solid #e9ecef;
        }
        
        @media (max-width: 768px) {
            .footer-container {
                width: 90%;
            }
            
            .footer-column, .social-subscribe-column {
                margin-bottom: 2rem;
            }
            
            .policy-links {
                margin-top: 1rem;
                text-align: left !important;
            }
            
            .policy-links a {
                margin-left: 0;
                margin-right: 1rem;
            }
            
            .subscribe-form {
                flex-direction: column;
            }
        }
         /* 页脚底部结束 */

         /*宽度百分比div类开始*/
.container-div-100-per-width {
    width: 100%;
}
.container-container-div-100-per-bgcolor-e9ecef {
background: linear-gradient(135deg, #f8f9fa 0%, #dee2e6 100%);
            background-attachment: fixed;
        
}
.container-div-80-per-width {
            max-width: 80%;
            margin: auto;
            
        }
/*宽度百分比div类结束*/
/*边框*/
 .icon-box {
            padding: 20px;
            margin: 15px;
            text-align: center;
            transition: all 0.3s ease;
        }
        
        /* 基础边框样式 */
        .border-solid {
            border: 1px solid #3498db;
            border-radius: 6px;
        }
        
        /* 虚线边框 */
        .border-dashed {
            border: 2px dashed #e74c3c;
            border-radius: 10px;
        }
        
        /* 边框悬停效果 */
        .border-hover {
            border: 2px solid #2ecc71;
            border-radius: 0;
        }
        
        .border-hover:hover {
            border-color: #27ae60;
            box-shadow: 0 0 10px rgba(46, 204, 113, 0.5);
            transform: translateY(-3px);
        }
        
        /* 图标与文字样式 */
        .icon-box i {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: #34495e;
        }
        
        .icon-box h3 {
            font-size: 1.2rem;
            margin: 0;
            color: #2c3e50;
        }
        
        /* 圆形边框 */
        .border-circle {
            border: 3px double #9b59b6;
            border-radius: 50%;
            width: 150px;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .border-circle i {
            font-size: 2rem;
            color: #9b59b6;
        }

       /*表格自适应*/
       
        /* 表格容器 - 核心滚动控制 */
        .table-scroll-container {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
            margin: 20px 0;
            position: relative;
        }
        
        /* 表格基础样式 - 自动适应列数 */
        .multi-column-table {
            min-width: 900px; /* 基础最小宽度，列数增多时可适当增大 */
            width: 100%;
        }
        
        /* 表头固定样式 */
        .multi-column-table th {
            background-color: #2c3e50;
            color: white;
            position: sticky;
            top: 0;
            z-index: 2;
            white-space: nowrap; /* 表头文字不换行 */
        }
        
        /* 单元格样式 */
        .multi-column-table td,
        .multi-column-table th {
            text-align: center;
            vertical-align: middle;
            padding: 12px 15px;
            min-width: 120px; /* 每列最小宽度，确保内容不挤压 */
        }
        
        /* 表格美化 */
        .multi-column-table tbody tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        .multi-column-table tbody tr:hover {
            background-color: #e9ecef;
            transition: background-color 0.2s ease;
        }
        
        /* 滚动条样式优化 */
        .table-scroll-container::-webkit-scrollbar {
            height: 8px;
        }
        
        .table-scroll-container::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 4px;
        }
        
        .table-scroll-container::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
        }
        
        .table-scroll-container::-webkit-scrollbar-thumb:hover {
            background: #555;
        }
        
        /* 移动端提示 */
        @media (max-width: 767.98px) {
            .scroll-hint {
                display: block;
                color: #666;
                font-size: 0.9rem;
                margin-bottom: 8px;
                text-align: right;
            }
        }
        
        .scroll-hint {
            display: none;
        }
  /*超链接文字不换行*/
  .no-wrap-container {
    /* 核心属性：禁止内容换行 */
    white-space: nowrap;
    /* 可选：添加滚动条以处理内容溢出 */
    overflow-x: auto;
    /* 其他样式优化 */
    padding: 15px;
    
    border-radius: 6px;
    margin: 10px 0;
}

.no-wrap-container a {
    color: #3498db;
    text-decoration: none;
    margin: 0 8px;
}

.no-wrap-container a:hover {
    text-decoration: underline;
}

/* 分隔符样式 */
.no-wrap-container a + a::before {
    content: "|";
    color: #999;
    margin-right: 16px;
}

/* 移除第一个链接前的分隔符 */
.no-wrap-container a:first-child {
    margin-left: 0;
}

.no-wrap-container a:first-child::before {
    content: none;
}
/*背景色圆角边框*/
 .bg-rounded-box {
    /* 背景色 */
    background-color: #f0f4f8; /* 浅蓝色背景 */
    
    /* 圆角 */
    border-radius: 8px; /* 8px圆角，值越大角越圆 */
    
    /* 可选：添加内边距和阴影增强视觉效果 */
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
   .bg-rounded-box-nopadding {
    /* 背景色 */
    
    
    /* 圆角 */
    border-radius: 8px; /* 8px圆角，值越大角越圆 */
    
    /* 可选：添加内边距和阴影增强视觉效果 */
    
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

 /* Flex容器样式 */
.flex-container {
    display: flex;
    width: 100%;
    gap: 1rem;
    box-sizing: border-box;
    /* 移除可能影响的高度限制 */
    min-height: 100%;
    margin: 20px 0 20px 0;
}

.left-section {
    flex: 0 0 30%;
   
    padding: 1rem;
    box-sizing: border-box;
    height: auto; /* 桌面端自适应 */
}

.right-section {
    flex: 0 0 70%;
   
    padding: 1rem;
    box-sizing: border-box;
}

/* 手机端样式 */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
        /* 确保容器在移动端可以扩展 */
        min-height: auto;
    }
    
    .left-section, .right-section {
        flex: 0 0 100%;
        width: 90%; /* 强制占满宽度 */
    }
    
    /* 关键：使用!important确保优先级，同时设置min-height保底 */
    .left-section {
        height: 200px !important; /* 强制固定高度 */
        min-height: 200px; /* 保底高度 */
        overflow-y: auto; /* 内容溢出时滚动 */
        /* 确保没有内边距影响 */
        padding: 1rem;
        box-sizing: border-box;
    }
}
.siderbar-tolerance-table tbody tr td{ text-align: left;}

p {
  line-height: 1.6; /* 标准行高，适合大多数正文内容 */
}
/*Font Awesome图标颜色*/
/* 品牌色图标 */
.icon-brand-primary {
  color: #2c3e50; /* 深蓝灰色 */
}

.icon-brand-accent {
  color: #3498db; /* 亮蓝色 */
}

/* 功能色图标 */
.icon-success {
  color: #27ae60; /* 绿色 - 成功状态 */
}

.icon-warning {
  color: #f39c12; /* 橙色 - 警告状态 */
}

/* 透明度控制 */
.icon-transparent {
  color: rgba(52, 152, 219, 0.7); /* 70% 透明度的蓝色 */
}

/* 悬停变色效果 */
.icon-hover {
  color: #7f8c8d; /* 默认灰色 */
  transition: color 0.3s ease;
}

.icon-hover:hover {
  color: #2980b9; /* 悬停时变蓝 */
}


/* 定义显示默认颜色的链接类 */
.a-default {
  color:#1d6fea; /* 使用浏览器默认颜色 */
  font-weight: bold;
}

/* 确保不同状态下也保持默认行为 */
.a-default:link {
  color: -webkit-link; /* 针对WebKit浏览器的未访问链接颜色 */
}

.a-default:visited {
  color: -webkit-visited-link; /* 针对WebKit浏览器的已访问链接颜色 */
}
  /* 为什么选择我们，完全独立的样式，不依赖外部定义 */
        .why-choose-us-container {
            padding: 2rem 0;
           margin-top: 30px;
        }
        
        .feature-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            height: 100%;
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .section-title {
            position: relative;
            display: inline-block;
            margin-bottom: 2rem;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background-color: #0d6efd;
        }
        
        .testimonial-section {
            background-color: #0d6efd;
            color: white;
            padding: 3rem 0;
            margin-top: 3rem;
        }
        
        .testimonial-card {
            background-color: white;
            color: #333;
            padding: 2rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .cta-section {
            background-color: #f8f9fa;
            padding: 3rem 0;
            margin-top: 3rem;
            text-align: center;
        }
        /*页面导航栏*/
        .centered-div-dhl {
width: 80%;
    margin-left: auto;
    margin-right: auto;
    text-align: left !important; /* 容器内文字左对齐 */
    /* 其他样式 */
    padding: 100px 0 20px 0;
   
    
}

/*4列边框排列及弹窗显示详细开始*/
 .material-cards-container {
            /* 确保容器宽度足够容纳四列 */
            width: 100%;
            box-sizing: border-box;
            padding: 0 10px; /* 容器两侧留出空间 */
        }
        
        .material-card {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            cursor: pointer;
            /* 精确控制列间距 */
            margin-left: 8px;
            margin-right: 8px;
            box-sizing: border-box;
        }
        
        .material-card:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-3px);
        }
        
        .caption h5 {
            margin: 15px 0 10px;
            color: #2c3e50;
        }
        
        /* 调整行容器，抵消卡片的左右边距影响 */
        .material-cards-row {
            margin-left: -8px;
            margin-right: -8px;
            display: flex;
            flex-wrap: nowrap; /* 禁止换行 */
        }
        
        /* 调整列宽度计算方式 */
        .col-md-3 {
            flex: 0 0 calc(25% - 16px) !important; /* 25%宽度减去左右边距总和 */
            max-width: calc(25% - 16px) !important;
        }
        
        /* 弹窗样式 */
       /* 弹窗样式保持不变 */
        .modal-content {
            border-radius: 8px;
            border: none;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
        }
        .modal-header {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 20px;
        }
        .modal-body {
            padding: 0;
        }
        .modal-image-container {
            padding: 0;
        }
        .modal-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 0 0 0 8px;
        }
        .modal-text-container {
            padding: 25px;
            overflow-y: auto;
            max-height: 600px;
        }
        .material-detail {
            margin-bottom: 20px;
        }
        .material-detail h6 {
            font-weight: 600;
            color: #34495e;
            margin-bottom: 8px;
            font-size: 1.1em;
        }
        
        /* 响应式调整 */
        @media (max-width: 767px) {
            .material-card {
                /* 移动端减小间距 */
                margin-left: 5px;
                margin-right: 5px;
            }
           .material-cards-row {
                flex-wrap: wrap; /* 中等屏幕以下允许换行 */
            }
            .col-md-3 {
                flex: 0 0 calc(50% - 16px) !important; /* 中等屏幕显示两列 */
                max-width: calc(50% - 16px) !important;
            }
            .modal-image {
                max-height: 250px;
                border-radius: 0;
            }
            .modal-text-container {
                padding: 20px;
            }
        }
         @media (max-width: 767px) {
            .col-md-3 {
                flex: 0 0 calc(100% - 16px) !important; /* 小屏幕显示一列 */
                max-width: calc(100% - 16px) !important;
            }
        }
/*4列边框排列及弹窗显示详细结束*/