/* ============================================
   图标字体样式
   用于在网页中显示图标
   
   使用方法：
   1. 在 HTML 中引入此 CSS 文件
   2. 在需要显示图标的地方添加以下类名：
      - iconfont（必须）：基础图标样式
      - icon-xxx（必须）：具体图标名称
      - inline-icon（可选）：行内对齐样式
   
   HTML示例：
   <span class="iconfont icon-zhuyi"></span>
   <span class="iconfont icon-dengpaohei"></span>
   <span class="iconfont icon-lianjie"></span>
   
   在句子中使用图标示例：
   <p>请<span class="iconfont icon-zhuyi inline-icon"></span>注意安全</p>
   
   可用图标列表：
   ============================================ */

@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1505975089675'); /* IE9*/
  src: url('iconfont.eot?t=1505975089675#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
  url('iconfont.ttf?t=1505975089675') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1505975089675#iconfont') format('svg'); /* iOS 4.1- */
}

/* 图标基础样式（必须添加） */
.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 可用图标列表： */

/* 链接图标 */
.icon-lianjie:before { content: "\e661"; }

/* 灯泡图标（提示/说明） */
.icon-dengpaohei:before { content: "\e61d"; }

/* 注意图标（警告） */
.icon-zhuyi:before { content: "\e602"; }

/* 注意图标（变体2） */
.icon-zhuyi1:before { content: "\e624"; }

/* ============================================
   表格样式
   用于在文章中展示数据表格
   
   HTML示例：
   <table class="article-table">
     <thead>
       <tr>
         <th>表头1</th>
         <th>表头2</th>
         <th>表头3</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>内容1</td>
         <td>内容2</td>
         <td>内容3</td>
       </tr>
     </tbody>
   </table>
   
   主要样式说明：
   - 表头背景色：主题蓝色 #3b89ef
   - 表头字体：白色、加粗
   - 表格边框：1px 灰色实线
   - 单元格内边距：12px
   - 表格宽度：100%
   - 文字对齐：左对齐
   ============================================ */

/* 表格主容器 */
.article-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 16px 0;
  font-size: 14px;
}

/* 表格边框 */
.article-table,
.article-table th,
.article-table td {
  border: 1px solid #e0e0e0;
}

/* 表头单元格 */
.article-table th {
  background-color: #3b89ef;
  color: #ffffff;
  font-weight: bold;
  text-align: left;
  padding: 12px 16px;
  white-space: nowrap;
}

/* 内容单元格 */
.article-table td {
  padding: 12px 16px;
  color: #464646;
  line-height: 1.8;
}

/* 内容行 */
.article-table tbody tr {
  background-color: #ffffff;
}

/* 内容行悬停效果 */
.article-table tbody tr:hover {
  background-color: #f5f8ff;
}

/* 表格底部边框（可选） */
.article-table tfoot td {
  font-weight: bold;
  background-color: #fafafa;
}

/* ============================================
   水平分隔线样式
   用于在文章中分隔不同内容区块
   
   HTML示例：
   <hr class="article-divider">
   <hr class="article-divider"></hr>
   
   样式说明：
   - 颜色：浅灰色 #e0e0e0
   - 高度：1px
   - 上下间距：16px
   ============================================ */

.article-divider {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 16px 0;
}

/* ============================================
   红色字体样式
   用于强调重要或危险信息
   
   HTML示例：
   <span class="text-red">重要提示内容</span>
   
   样式说明：
   - 颜色：红色 #dc3545
   ============================================ */

.text-red {
  color: #dc3545;
}