/* 公共容器：固定宽度居中，底部留白 */
.public-container {
  /* 盒模型 */
  width: 990px;          /* 固定宽度，与页面其他核心模块（如头部、页脚）尺寸统一 */
  margin: 0 auto;        /* 水平居中，确保容器在页面中对称显示 */
  padding-bottom: 14px;  /* 底部14px内边距，与下方内容形成自然分隔 */
}

/* 左侧模块（ml：middle-left）：固定宽度左浮动，带边框阴影 */
.ml {
  /* 布局定位 */
  float: left;           /* 左浮动，作为三栏布局的左侧模块 */
  
  /* 盒模型 */
  width: 316px;          /* 固定宽度，与中间/右侧模块适配总宽度 */
  border: 1px solid #ccc;/* 浅灰色边框，区分模块边界 */
  
  /* 视觉外观 */
  background: #fff;      /* 白色背景，提升内容可读性 */
  box-shadow: #666 0 0 4px; /* 灰色阴影，增强模块立体感 */
  
  /* 文本字体 */
  color: #808080;        /* 默认文字色：浅灰色，适合辅助性内容 */
}

/* 公共内容区：清除浮动，内部留白 */
.public-content {
  /* 布局定位 */
  clear: both;           /* 清除前后浮动影响，避免内容布局错乱 */
  
  /* 盒模型 */
  padding: 5px;          /* 内部5px留白，内容不贴边，提升视觉舒适度 */
  
  /* 功能样式 */
  overflow: hidden;      /* 隐藏溢出内容，保持模块整洁（如长文本、图片） */
}

/* 公共模块头部：固定高度，深蓝色背景 */
.public-head {
  /* 布局定位 */
  position: relative;    /* 相对定位，为右侧按钮（.head-bth）提供定位上下文 */
  
  /* 盒模型 */
  height: 40px;          /* 固定头部高度，保持模块统一性 */
  padding: 0 0 0 7px;    /* 左侧7px内边距，标题不贴边 */
  
  /* 视觉外观 */
  background: #00519E;   /* 深蓝色背景，突出头部区域，与其他模块头部风格统一 */
}

/* 头部标题：白色文字，垂直居中 */
.head-title {
  /* 布局定位 */
  float: left;           /* 左浮动，标题居左显示 */
  
  /* 文本字体 */
  color: #fff;           /* 白色文字，与深蓝色背景形成高对比，确保可读性 */
  font-size: 16px;       /* 标题字号16px，大于正文，强化视觉层级 */
  line-height: 40px;     /* 行高等于头部高度，实现文本垂直居中 */
}

/* 头部按钮容器：绝对定位在右上角 */
.head-bth {
  /* 布局定位 */
  position: absolute;    /* 绝对定位，相对于.public-head */
  right: 0px;            /* 距离右侧0px */
  top: 10px;             /* 距离顶部10px，垂直居中对齐 */
}

/* 头部“更多”文本：行内块显示，居中对齐 */
.more_text {
  /* 布局定位 */
  display: inline-block; /* 行内块显示，可设置宽高和内外边距 */
  
  /* 盒模型 */
  margin-right: 10px;    /* 右侧10px外边距，与模块边缘保持距离 */
  
  /* 文本字体 */
  color: #fff;           /* 白色文字，与头部背景适配 */
  line-height: 25px;     /* 行高25px，垂直居中 */
  text-align: center;    /* 文字居中显示 */
  
  /* 交互与动态 */
  outline: none;         /* 清除聚焦时默认外边框 */
}

/* 公共模块主体：相对定位+溢出隐藏，内部留白 */
.public-body {
  /* 布局定位 */
  position: relative;    /* 相对定位，为内部元素（如图片、文本）提供定位基础 */
  
  /* 盒模型 */
  padding: 5px;          /* 内部5px留白，内容与边框分隔 */
  
  /* 功能样式 */
  overflow: hidden;      /* 隐藏溢出内容，防止内容超出模块范围 */
}

/* 主体内容文本：固定行高，浅灰色文字 */
.body-content {
  /* 文本字体 */
  line-height: 24px;     /* 行高24px，适合大段文本阅读，避免文字过密 */
  color: #808080;        /* 浅灰色文字，与模块默认文字色一致 */
}

/* 主体内容图片：固定尺寸，去除边框 */
.body-text-img img {
  /* 盒模型 */
  width: 300px;          /* 图片固定宽度，适配左侧模块宽度（316px-2*5px内边距） */
  height: 150px;         /* 图片固定高度，保持比例一致性 */
  border: none;          /* 去除图片默认边框（尤其图片为链接时） */
}

/* 中间模块（mc：middle-center）：固定宽度右浮动，带边框阴影 */
.mc {
  /* 布局定位 */
  float: right;          /* 右浮动，作为三栏布局的中间模块 */
  
  /* 盒模型 */
  width: 320px;          /* 固定宽度，与左侧/右侧模块适配总宽度 */
  margin-left: 14px;     /* 左侧14px外边距，与左侧模块分隔 */
  border: 1px solid #ccc;/* 浅灰色边框，与左侧模块风格统一 */
  
  /* 视觉外观 */
  background: #fff;      /* 白色背景，保持模块风格一致性 */
  box-shadow: #666 0 0 4px; /* 灰色阴影，与左侧模块立体感统一 */
  
  /* 文本字体 */
  color: #808080;        /* 浅灰色文字，与其他模块默认文字色一致 */
}

/* 右侧模块（mr：middle-right）：固定宽度右浮动，带边框阴影 */
.mr {
  /* 布局定位 */
  float: right;          /* 右浮动，作为三栏布局的右侧模块 */
  
  /* 盒模型 */
  width: 320px;          /* 固定宽度，与左侧/中间模块适配总宽度 */
  margin-left: 14px;     /* 左侧14px外边距，与中间模块分隔 */
  border: 1px solid #ccc;/* 浅灰色边框，保持三栏模块风格统一 */
  
  /* 视觉外观 */
  background: #fff;      /* 白色背景，与其他模块风格一致 */
  box-shadow: #666 0 0 4px; /* 灰色阴影，增强模块立体感 */
  
  /* 文本字体 */
  color: #808080;        /* 浅灰色文字，统一三栏模块文字风格 */
}



/* 新闻列表左侧容器：左浮动，固定宽高，带边框阴影 */
.newslist-left {
  /* 布局定位 */
  float: left;               /* 左浮动，作为页面左侧主内容区 */
  
  /* 盒模型 */
  width: 652px;              /* 固定宽度，与右侧边栏形成页面布局 */
  height: 400px;             /* 固定高度，控制新闻列表区域整体大小 */
  border: 1px solid #ccc;    /* 浅灰色边框，区分内容区域 */
  
  /* 视觉外观 */
  background: #fff;          /* 白色背景，提升内容可读性 */
  box-shadow: #666 0 0 4px;  /* 灰色阴影，增强容器立体感 */
}

/* 新闻列表：清除默认列表样式 */
.news-list {
  /* 盒模型 */
  list-style: none;          /* 清除默认列表项目符号 */
  padding: 0;                /* 清除默认内边距，避免列表整体偏移 */
  margin: 0;                 /* 补充清除默认外边距，保持样式一致性 */
}

/* 新闻列表项：底部边框分隔，上下留白 */
.news-item {
  /* 盒模型 */
  margin-bottom: 20px;       /* 底部20px外边距，分隔相邻新闻项 */
  padding-bottom: 20px;      /* 底部20px内边距，与底部边框保持距离 */
  border-bottom: 1px solid #ccc; /* 底部浅灰色边框，视觉上分隔新闻项 */
}

/* 新闻标题：放大字号，深蓝色，去除顶部外边距 */
.news-title {
  /* 文本字体 */
  font-size: 1.2em;          /* 字号放大1.2倍，突出标题层级 */
  color: #001C69;            /* 深蓝色文字，与正文区分，吸引注意力 */
  
  /* 盒模型 */
  margin-top: 0;             /* 去除顶部默认外边距，避免与容器顶部产生多余间距 */
  margin-bottom: 0;          /* 补充清除默认底部外边距，便于精确控制间距 */
}

/* 新闻图片容器：顶部留白 */
.news-img {
  /* 盒模型 */
  margin-top: 5px;           /* 顶部5px外边距，与标题保持距离 */
}

/* 新闻图片：固定尺寸，左浮动，右侧和底部留白 */
.news-img img {
  /* 布局定位 */
  float: left;               /* 左浮动，使图片居左，文字环绕显示 */
  
  /* 盒模型 */
  width: 180px;              /* 固定图片宽度 */
  height: 120px;             /* 固定图片高度，保持比例一致性 */
  margin-right: 15px;        /* 右侧15px外边距，与右侧文字分隔 */
  margin-bottom: 10px;       /* 底部10px外边距，避免下方内容紧贴图片 */
  border: none;              /* 补充去除图片默认边框（尤其作为链接时） */
}

/* 新闻描述文本：固定行高和高度，深灰色 */
.news-desc {
  /* 文本字体 */
  line-height: 2;            /* 行高2倍，提升大段文本可读性，避免文字过密 */
  color: #4a4a4a;            /* 深灰色文字，与标题区分，适合正文阅读 */
  
  /* 盒模型 */
  height: 110px;             /* 固定高度，控制描述文本显示区域，确保列表项高度统一 */
  overflow: hidden;          /* 补充隐藏溢出内容，避免文本过长破坏布局 */
}



/* 新闻列表右侧容器：右浮动，固定宽度，带边框阴影 */
.newslist-right {
  /* 布局定位 */
  float: right;               /* 右浮动，与左侧新闻列表形成左右分栏布局 */
  
  /* 盒模型 */
  width: 320px;               /* 固定宽度，与左侧容器适配页面总宽度 */
  padding: 0;                 /* 清除默认内边距，避免内容偏移 */
  border: 1px solid #ccc;     /* 浅灰色边框，区分右侧内容区域 */
  
  /* 视觉外观 */
  background: #fff;           /* 白色背景，与左侧容器风格统一，提升内容可读性 */
  box-shadow: #666 0 0 4px;   /* 灰色阴影，增强容器立体感，与左侧阴影效果一致 */
}

/* 下载列表：清除默认列表样式（原代码"none outside none"语法修正） */
.downloads-list {
  /* 盒模型 */
  list-style: none;           /* 清除默认列表项目符号 */
  margin: 0;                  /* 清除默认外边距 */
  padding: 0;                 /* 清除默认内边距，确保列表紧贴容器 */
}

/* 下载列表项：固定高度，底部双重分隔（背景图+边框） */
.downloads-item {
  /* 盒模型 */
  height: 34px;               /* 固定高度，确保列表项整齐统一 */
  border-bottom: 1px solid #ddd; /* 底部浅灰色实线，视觉分隔列表项 */
  
  /* 视觉外观 */
  background: url(../images/bar-line.png) no-repeat left bottom; /* 底部背景图，叠加实线形成双重分隔效果 */
  
  /* 文本字体 */
  line-height: 34px;          /* 行高等于高度，实现文本垂直居中 */
}

/* 下载列表项标题：左浮动，左侧缩进，相对定位 */
.downloads-title {
  /* 布局定位 */
  float: left;                /* 左浮动，标题居左显示 */
  position: relative;         /* 相对定位，为右侧元数据（.downloads-meta）提供定位参考 */
  
  /* 盒模型 */
  padding-left: 20px;         /* 左侧20px内边距，标题不贴边，提升美观度 */
  
  /* 文本字体 */
  color: #333;                /* 深灰色文字，确保标题清晰可见 */
  line-height: 30px;          /* 行高略小于容器高度，微调文字垂直位置 */
}

/* 下载列表项元数据（如时间、大小）：绝对定位在右侧 */
.downloads-meta {
  /* 布局定位 */
  position: absolute;         /* 绝对定位，相对于.downloads-title */
  right: 10px;                /* 距离右侧10px，与容器边缘保持距离 */
  
  /* 文本字体 */
  line-height: 34px;          /* 行高等于列表项高度，实现元数据垂直居中 */
}

/* 右侧图片新闻容器：固定宽高，适配右侧模块尺寸 */
.body-picnews {
  /* 盒模型 */
  width: 312px;               /* 宽度略小于右侧容器（320px-2*4px内边距），避免图片溢出 */
  height: 208px;              /* 固定高度，控制图片新闻区域大小，保持布局稳定 */
}