/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-image: url('images/backjpg.jpg'); /* 确保路径正确 */
    background-repeat: repeat; /* 使背景图在水平和垂直方向上都重复 */
}.navbar {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 在这个上下文中可能不是必需的，但保留也无妨 */
    background-color: #333399; /* 更新后的背景色 */
    padding: 10px 20px; /* 内边距，增加一些空间 */
}

.navbar-logo {
    height: 74px; /* 图片高度 */
    margin-right: 20px; /* 图片和导航项之间的间距 */
}

.nav-items {
    display: flex;
    gap: 20px; /* 导航项之间的间距 */
}

.nav-item a {
    color: white; /* 链接文字颜色 */
    text-decoration: none; /* 去掉下划线 */
    padding: 5px 15px; /* 内边距，增加点击区域 */
    border-radius: 5px; /* 圆角 */
    transition: background-color 0.3s; /* 背景色过渡效果 */
}

.nav-item a:hover {
    background-color: #5757a5; /* 鼠标悬停时的背景色，稍微深一些以提供视觉反馈 */
}
/* 主要内容样式 */
.container {
    max-width: 1200px; /* 最大宽度设置为1200像素 */
    margin: 0 auto;   /* 上下外边距为0，左右自动居中 */
    padding: 2rem;    /* 内边距设置为2rem（相对于根元素的字体大小） */
}
 
/* 文本区域（标题和段落）样式 */
.hero-section {
    text-align: center; /* 文本居中 */
    padding: 3rem 0;    /* 上下内边距为3rem，左右为0 */
}
 
/* 文本区域标题样式 */
.hero-section h1 {
    font-size: 2.5rem;  /* 字体大小设置为2.5rem */
    margin-bottom: 1rem; /* 下外边距设置为1rem */
}
 
/* 文本区域图片样式 */
.hero-image {
    display: block;     /* 作为块级元素显示 */
    margin: 2rem auto;  /* 上下外边距为2rem，水平居中 */
    max-width: 100%;    /* 最大宽度为容器的100% */
    height: auto;       /* 高度自动，以保持图片的宽高比 */
}



/* 产品展示样式 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.hero-section {
    text-align: center;
    padding: 40px 0;
    background-color: #f4f4f4; /* 浅灰色背景 */
}

.hero-section h1 {
    font-size: 2.5em;
    margin-bottom: 0.5em;
}

.hero-section p {
    font-size: 2em;
    color: #333; /* 深灰色文字 */
    font-weight: bold; /* 添加字体加粗效果 */
    margin: 0 30px; /* 在文字左右两侧增加5像素的边距，上下边距设为0 */
}

.product-gallery {
    display: flex;
    justify-content: space-between; /* 产品图片之间的间距 */
    flex-wrap: wrap; /* 允许换行 */
    margin-top: 20px;
}

.gallery-item {
    flex: 1 1 calc(50% - 20px); /* 每个项目占据50%的宽度，减去间距 */
    box-sizing: border-box; /* 包括内边距和边框在内计算宽度 */
    margin-bottom: 20px; /* 项目之间的垂直间距 */
}

.gallery-item img {
    width: 100%;
    height: auto; /* 保持图片的纵横比 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 版权样式 */
.footer {
    background-color: #333399;
    color: white;
    text-align: center;
    padding: 2rem 0;
}

/* product页面主体内容样式 */

/* 设置产品表格头部的样式，包括文本对齐方式、字体大小、颜色、加粗和与表格之间的间距 */
.product-header {
    text-align: center;
    font-size: 25px; /* 根据需要调整字体大小 */
    color: #990000;
    font-weight: bold;
    margin-bottom: 20px; /* 表格头部与表格之间的间距 */
	margin-top: 20px; /* 增加文字上方的间距 */
}

/* 表格整体样式 */
.b1-table {
    width: 60%; /* 表格宽度设置为父容器宽度的70% */
    border-collapse: collapse; /* 合并边框 */
    border-radius: 8px; /* 圆角边框 */
    overflow: hidden; /* 隐藏超出表格边界的内容 */
    margin-left: auto; /* 自动设置左外边距 */
    margin-right: auto; /* 自动设置右外边距 */
}

/* 单元格样式 */
.b1-td {
    background-color: #66CCFF; /* 单元格背景色设为蓝色 */
    color: #FFFFFF; /* 文本颜色设为白色 */
    text-align: center; /* 文本水平居中 */
    vertical-align: middle; /* 文本垂直居中 */
    padding: 15px; /* 单元格内间距 */
    border: 1px solid #FFFFFF; /* 单元格边框设为白色 */
    transition: background-color 0.3s ease; /* 添加背景色变化的过渡效果 */
	 font-weight: bold; /* 将整个单元格内的文本设置为加粗 */
}

/* 超链接样式 */
.b1-td a {
    color: #FFFFFF; /* 超链接文本颜色设为白色 */
    text-decoration: none; /* 去除超链接下划线 */
}

/* 鼠标悬停时单元格的动态效果 */
.b1-td:hover {
    background-color: #0033FF; /* 鼠标悬停时改变背景色为更深的蓝色 */
}

/* 可选的：鼠标悬停时超链接的动态效果 */
.b1-td a:hover {
    text-decoration: underline; /* 鼠标悬停时给超链接添加下划线 */
}


/* 表格样式 */
.pro-table {
    width: 40%; /* 表格宽度设置为父容器宽度的70% */
    border-collapse: collapse; /* 合并边框 */
    border-radius: 8px; /* 圆角边框 */
    overflow: hidden; /* 隐藏超出表格边界的内容 */
    margin-left: auto; /* 自动设置左外边距 */
    margin-right: auto; /* 自动设置右外边距 */
}

/* 单元格样式 */
.pro-cell {
    width: 25%; /* 单元格宽度设置为25% */
    text-align: center; /* 文本居中，虽然对于图片单元格来说这个属性可能不是必需的 */
    padding: 10px; /* 内边距设置为0 */
    /* 可以添加一个vertical-align属性来确保图片在单元格内垂直居中，但这取决于你的布局需求 */
    vertical-align: middle; /* 图片在单元格内垂直居中 */
}

/* 单元格内图片的样式 */
.pro-cell img {
    width: 100%; /* 图片宽度设置为100%，即充满单元格 */
    height: auto; /* 图片高度自动调整以保持比例 */
    max-height: 100px; /* 设置图片的最大高度，防止图片过高撑破单元格 */
    /* 注意：这里不再需要注释中提到的max-height: none或max-height的百分比值，
       因为我们已经为图片设置了一个具体的最大高度限制。 */
    border: 0; /* 图片边框设置为0，即无边框 */
    /* 可以添加一个display属性来确保图片被视为块级元素，从而更好地控制其布局，
       但默认情况下img元素已经是内联块级元素（inline-block），且在此场景下可能不是必需的。 */
    /* display: block; */
}

/* contact页面主体内容样式 */
.cont-table {
    width: 100%;
    border-collapse: collapse; /* 合并表格边框 */
}
.cont-td, .cont-th {
    padding: 10px; /* 统一设置单元格内边距 */
    vertical-align: top; /* 垂直对齐方式 */
	font-size: 20px;   /* 设置字体大小为16像素（您可以根据需要调整这个值） */
}
.cont-highlight {
    background-color: #CCCCCC; /* 高亮背景色 */
    font-weight: bold; /* 加粗字体 */
    color: red; /* 字体颜色为红色 */
	font-size: 20px;   /* 设置字体大小为16像素（您可以根据需要调整这个值） */
}
.cont-bt{
    background-color: #CCCCCC; /* 高亮背景色 */
    font-weight: bold; /* 加粗字体 */
    color: ##000000; /* 字体颜色为红色 */
	font-size: 20px;   /* 设置字体大小为16像素（您可以根据需要调整这个值） */
}

.cont-right-align {
    text-align: right; /* 右对齐文本 */
}
.cont-feedback {
    text-align: center; /* 反馈链接居中 */
}
.feedback-text {
    font-weight: bold; /* 加粗字体 */
    text-align: justify;  /* 左对齐文本（虽然这通常是默认设置，但明确指定可以避免潜在问题） */
    text-indent: 2em;  /* 首行缩进2个字符宽度（这里使用的是em单位，可以根据需要调整） */
    font-size: 24px;   /* 设置字体大小为16像素（您可以根据需要调整这个值） */
}
.feedback-text-1 {
    font-weight: bold; /* 加粗字体 */
    text-align: center; 
    text-indent: 2em;  /* 首行缩进2个字符宽度（这里使用的是em单位，可以根据需要调整） */
    font-size: 24px;   /* 设置字体大小为16像素（您可以根据需要调整这个值） */
}