/* 基础样式 */
body {
    font-family: 'Inter', system-ui, sans-serif;
}

a {
	text-decoration: underline;
}

/* 自定义工具类相关样式 */
.relative.group:hover {
    border-bottom: 4px solid #0857c3;
}

/* 滚动条美化 */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* 下拉菜单动画 */
.dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.25s ease-out;
    min-width: 280px; /* 移动端适配 */
    width: 100%; /* 移动端占满宽度 */
    left: 0;
    transform: translateY(10px);
}
@media (min-width: 768px) {
    .dropdown-menu {
        min-width: 900px; /* 桌面端保持宽菜单 */
    }
}
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 子菜单项样式 */
.dropdown-col {
    min-width: 100%; /* 移动端单列显示 */
}
@media (min-width: 768px) {
    .dropdown-col {
        min-width: 280px; /* 桌面端恢复三列 */
    }
}

/* 轮播图容器 */
.carousel-container {
    position: relative;
    overflow: hidden;
}

/* 轮播图定位器（长方形设计） */
.carousel-indicators {
    position: absolute;
    bottom: 12px; /* 适当下移 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    gap: 8px; /* 增加间距 */
    padding: 6px 12px;
    border-radius: 0px;
}
/* 长方形定位器 - 默认暗色 */
.carousel-indicator {
    width: 24px; /* 长方形宽度 */
    height: 6px; /* 长方形高度 */
    border-radius: 0px; /* 轻微圆角 */
    background-color: rgba(255, 255, 255, 0.4); /* 默认暗色调 */
    cursor: pointer;
    transition: all 0.3s ease;
}
/* 当前轮播图定位器 - 亮起效果 */
.carousel-indicator.active {
    background-color: white; /* 亮起效果 */
    width: 36px; /* 激活状态宽度增加 */
}

/* 移动端适配 */
@media (max-width: 767px) {
    .carousel-container {
        height: 250px !important;
    }
    
    .dropdown-menu .grid {
        grid-template-columns: 1fr;
    }
    
    /* 移动端定位器调整 */
    .carousel-indicator {
        width: 18px;
        height: 5px;
    }
    .carousel-indicator.active {
        width: 28px;
    }
}

.news-title {
    display: block;
    box-sizing: border-box;
}

/* 新增类，使用 !important 提升优先级 */
.news-title-uniform-height {
    min-height: 0 !important;
}

.fa-phone{
    color: #0855be;
    margin-left: 10px;
    margin-right: 10px;
}

.fa-envelope{
    color: #0855be;
    margin-left: 10px;
    margin-right: 10px;
}

/* 右侧竖线 */
.card {
    position: relative; /* 确保伪元素相对于 .card 定位 */
}

.card:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(100% + 12px);
    top: 0; 
    transform: translateX(-50%); /* 向左偏移自身宽度的一半，实现左右居中 */
    height: 100%; 
    width: 2px; 
    background: #ccc; 
}

/* 搜索框样式 */
.search-container {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.8s ease-in-out, opacity 0.8s ease-in-out; /* 增加透明度过渡，延长动画时间 */
}
.search-container.activee {
    max-height: 300px; /* 可根据搜索框实际高度调整 */
    opacity: 1;
}

.search-container {
/* 使容器在页面中水平居中 */
display: flex;
justify-content: center;
align-items: center;
/* 可根据需要调整上下间距 */
width: 100%;
padding:4px;
border-top:1px solid #ccc;
}

.search-form {
/* 搜索表单的整体样式 */
display: flex;
align-items: center;
width: 100%;
max-width: 500px; /* 限制最大宽度，避免在宽屏上过宽 */
}

.search-input {
/* 搜索输入框样式 */
flex: 1; /* 占满剩余空间 */
padding: 10px 15px;
border: 1px solid #ccc;
border-right: none; /* 与按钮接壤处无边框 */
border-radius: 0;
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}

.search-input:focus {
}

.search-button {
/* 搜索按钮样式 */
padding: 10px 15px;
background-color: #0857c3;
border: 2px solid #ddd;
border-radius: 0;
cursor: pointer;
transition: background-color 0.3s;
}

.search-button:hover {
background-color: #66afe9; /* 悬停时背景变色 */
}

/* 二维码和返回顶部样式 */
.qrcode-container {
    position: fixed; /* 固定定位 */
    right: 0;   /* 紧贴页面右侧 */
    bottom: 0;  /* 紧贴页面底部 */
}
.qrcode-container img {
    width: 200px; /* 设置图片宽度，可按需调整 */
    height: 256px; /* 设置图片高度，可按需调整 */
    border: 0;
}
/* 返回顶部按钮样式 */
#backToTop {
    display: block;
    width: 100%;
    padding: 8px 0;
    background-color: #0857c3;
    color: white;
    border: none;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
#backToTop:hover {
    background-color: #0857c3;
}

.nav-section {
            width: 100%;
            display: flex; /* 使用flex布局实现左右排列 */
        }
        
        .left-div {
            width: 62%; /* 左边宽度6% */
            height: 300px; /* 示例高度，可根据需要调整 */
        }
        
        .right-div {
            width: 38%; /* 右边宽度38% */
            height: 300px; /* 与左边保持相同高度 */
            display: flex; /* 使用 flex 布局 */
            align-items: center; /* 子元素垂直居中 */
            justify-content: center; /* 子元素水平居中（可选） */
        }


		.breadcrumb {
            color: #666;
            margin-bottom: 30px;
            font-size: 14px;
        }
        .breadcrumb a {
            color: #666;
            text-decoration: none;
        }
        .breadcrumb span {
            margin: 0 8px;
            color: #999;
        }
        .category-title {
            font-size: 28px;
            color: #333;
            margin: 0 0 20px 16px;
        }
        .category-desc {
            color: #666;
            line-height: 1.6;
            margin: 0 0 30px 16px;
        }

		.breadcrumb {
            padding: 16px; /* 可根据需求调整内边距大小 */
        }

		.image-section {
            /*padding: 16px;  可根据需求调整内边距大小 */
        }

		.product-image {
            max-height: 80% !important;
            width: auto;
            display: block;
            margin: 0 auto; /* 可选，让图片水平居中 */
        }

		/* 新增样式 */
        .inner {
            display: flex; /* 使用 flex 布局实现左右排列 */
            margin-bottom: 20px; /* 底部外边距 */
            border: 1px solid #e0e0e0; /* 边框 */
            border-radius: 8px; /* 圆角 */
            overflow: hidden; /* 隐藏溢出内容 */
            background-color: #fff; /* 背景色 */
        }

        .left-box {
            width: 350px; /* 固定宽度 */
            padding: 16px; /* 内边距 */
            box-sizing: border-box; /* 确保边框和内边距包含在宽度内 */
        }

        .left-box img {
            width: 100%; /* 图片宽度自适应 */
            height: auto; /* 高度自适应 */
            display: block; /* 去除图片下方间隙 */
        }

        .right-box {
            flex: 1; /* 占据剩余空间 */
            padding: 16px 0; /* 上下内边距 */
        }

        .Title h2 {
			font-weight:700;
            font-size: 20px; /* 标题字体大小 */
            margin: 0 0 10px 0; /* 外边距 */
        }

        .Title h2 a {
            color: #333; /* 链接颜色 */
            text-underline-offset: 4px; /* 下划线与文本的间距 */
            text-decoration: underline; /* 去除下划线 */
            transition: color 0.3s; /* 颜色过渡效果 */
        }

        .Title h2 a:hover {
            color: #0857c3; /* 悬停颜色 */
        }

        .t_class_txt {
            color: #666; /* 文本颜色 */
            line-height: 1.6; /* 行高 */
            margin-bottom: 15px; /* 底部外边距 */
            margin-right: 15px; /* 底部外边距 */
        }

        .t_class_se ul {
            list-style: none; /* 去除列表项标记 */
            padding: 0; /* 去除内边距 */
            margin: 0; /* 去除外边距 */
            display: flex; /* 使用 flex 布局 */
            flex-wrap: wrap; /* 换行 */
            gap: 10px; /* 项间距 */
        }

        .t_class_se ul li a {
            color: #666; /* 链接颜色 */
            text-decoration: underline; /* 添加下划线 */
            text-underline-offset: 4px; /* 下划线与文本的间距 */
            padding: 5px 10px; /* 内边距 */
            border-radius: 4px; /* 圆角 */
            transition: all 0.3s; /* 过渡效果 */
        }

        .t_class_se ul li a:hover {
            color: #0857c3; /* 悬停颜色 */
            border-color: #0857c3; /* 悬停边框颜色 */
        }

		/* 新增表格样式 */
        .table2 {
            width: 100%; /* 表格宽度占满父容器 */
            border-collapse: collapse; /* 合并相邻单元格边框 */
            margin: 20px 0; /* 上下外边距 20px，左右无外边距 */
            font-size: 14px; /* 字体大小 */
            color: #333; /* 文字颜色 */
        }

        .table2 thead {
            background-color: #0857c3; /* 表头背景色 */
        }

        .table2 th {
            padding: 12px 15px; /* 内边距 */
            text-align: left; /* 文本左对齐 */
            border: 1px solid #e0e0e0; /* 边框 */
            font-weight: 600; /* 字体加粗 */
			color:#fff;
        }

        .table2 th div {
            white-space: nowrap; /* 文本不换行 */
        }

        .table2 tbody tr {
            border-bottom: 1px solid #e0e0e0; /* 行底边框 */
        }

        .table2 tbody tr:nth-child(even) {
            background-color: #f9f9f9; /* 偶数行背景色 */
        }

        .table2 tbody tr:hover {
            background-color: #f1f5f9; /* 行悬停背景色 */
        }

        .table2 td {
            padding: 12px 15px; /* 内边距 */
            border: 1px solid #e0e0e0; /* 边框 */
            vertical-align: middle; /* 垂直居中对齐 */
        }

        .table2 a {
            color: #0857c3; /* 链接颜色 */
            text-decoration: none; /* 去除下划线 */
            transition: color 0.3s; /* 颜色过渡效果 */
        }

        .table2 a:hover {
            color: #064296; /* 链接悬停颜色 */
            text-decoration: underline; /* 悬停添加下划线 */
        }

		.breadcrumb .elongated-triangle {
			display: inline-block;
			width: 0;
			height: 0;
			border-top: 6px solid transparent;
			border-bottom: 6px solid transparent;
			border-left: 18px solid #0857c3; /* 可调整 border-left-width 拉长三角形 */
			margin: 0 8px;
			vertical-align: middle;
		}