/* 全局样式，应用于 body、div、p、td 和 th */
body, div, p, td, th {
  font-size: 14px; /* 设置字体大小为14像素 */
  line-height: 20px; /* 设置行高为20px */
  font-family: Arial, sans-serif; /* 设置字体为 Arial */
  color: #646464; /* 设置字体颜色为 #646464 */
   overflow-wrap: break-word !important; /* 允许在必要时在单词内断行，以避免内容溢出其容器 */
   word-break: normal !important; /* 允许在空格或连字符处换行 */
   white-space: normal !important; /* 允许文本正常换行 */
   min-width: 0;  /* 允许内容收缩 */
}



/* 标题样式，应用于 h1、h2 和 h3 */
h1 {
  font-size: 18px;
  font-weight: bold;
  color: #39C; /* 标题主色调 */
  line-height: 1.3;

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

h2 {
  font-size: 16.5px;
  font-weight: bold;
  color: #ac7746; /* 标题主色调 */
  line-height: 1.4;
  margin-top: 18px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

h3 {
  font-size: 15px;
  font-weight: bold;
  font-style: italic;
  color: #7F8C8D; /* 标题主色调 */
  line-height: 1.5;
  margin-top: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
               "Helvetica Neue", Arial, sans-serif;
}

/* 响应式调整 - 小屏幕设备 */
@media (max-width: 768px) {
  h1 {
    font-size: 17px;

  }
  
  h2 {
    font-size: 15.5px;
    margin-top: 15px;
  }
  
  h3 {
    font-size: 14px;
    margin-top: 7px;
  }
}

/* 响应式调整 - 超小屏幕设备 */
@media (max-width: 480px) {
  h1 {
    font-size: 16px;

  }
  
  h2 {
    font-size: 15px;
    margin-top: 14px;
  }
  
  h3 {
    font-size: 14px;
    margin-top: 7px;
  }
}



/* 表格样式 */
table {
  border-collapse: collapse; /* 合并表格单元格的边框 */
  border-spacing: 0; /* 设置单元格之间的间距为 0 */
  width: 100%; /* 设置表格宽度为父容器的 100% */
 -webkit-border-collapse: collapse; /* Safari兼容 */
}

table tr {
  height: 40px; /* 设置每行行高为 40 像素 */
}

/* 表头样式 */
table thead tr {
  background-color: #ffffff; /* 设置表头的背景色 */
}

/* 表格奇偶行背景颜色 */
table tbody tr:nth-child(odd) {
  background-color: #d0d0d0; /* 奇数行背景色 */
}

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

/* 表格单元格样式 */
table td {
  padding-left: 0.4em; /* 设置单元格左侧内边距为 0.4em */
  vertical-align: middle; /* 设置单元格内容垂直居中 */
}




/* 确保图片在网页中居中显示、不溢出容器、且能自动缩放以适应容器大小 */
.image-container {
    text-align: center; /* 水平居中 */
    overflow: hidden;   /* 隐藏溢出容器的部分 */
    width: 100%;        /* 容器宽度设为100%，可根据需要调整 */
    max-width: some-value; /* 可选：设置容器的最大宽度，防止过大 */
    height: auto;       /* 高度自适应，保持宽高比 */
    display: inline-block; /* 或使用 block，但 inline-block 更灵活 */
    /* 可选：添加padding或margin来调整容器内间距 */
}

.image-container img {
    max-width: 100%;    /* 图片最大宽度为容器宽度 */
    height: auto;       /* 图片高度自适应，保持宽高比 */
    display: block;     /* 将图片设为块级元素，以便应用margin: 0 auto;居中 */
    margin: 0 auto;     /* 图片水平居中，垂直margin为0 */
}


/* 图片全局居中方案 */
img {
  display: block;
  margin: 0 auto;
  max-width: 100%;  /* 防止响应式问题 */
  height: auto;     /* 保持宽高比 */
}



/* 如果图片是背景图，而不是<img>标签，则使用以下样式 */
.background-image-container {
    background-image: url('your-image-url.jpg'); /* 设置背景图片 */
    background-size: contain; /* 图片缩放以适应容器，不裁剪 */
    background-repeat: no-repeat; /* 图片不重复 */
    background-position: center; /* 图片居中 */
    width: 100%; /* 容器宽度设为100% */
    height: 0; /* 高度初始为0，通过padding-bottom技巧设置比例 */
    padding-bottom: 56.25%; /* 假设图片宽高比为16:9，则(9/16)*100=56.25% */
    position: relative; /* 为绝对定位的子元素提供参照 */
    overflow: hidden; /* 隐藏溢出容器的部分（虽然这里通常不需要） */
}

/* 注意：使用padding-bottom技巧时，.background-image-container内不应有子元素或需设置额外样式 */