/* 页面头部容器：固定宽度居中，相对定位，固定高度 */
.header {
  /* 布局定位 */
  position: relative;  /* 建立定位上下文，供内部元素定位参考 */
  
  /* 盒模型 */
  width: 980px;        /* 头部固定宽度 */
  height: 148px;       /* 头部固定高度 */
  margin: 0 auto;      /* 水平居中显示 */
}

/* 头部Logo容器：左浮动，设置外边距 */
.header-logo {
  /* 布局定位 */
  float: left;         /* 左浮动，使Logo居左显示 */
  
  /* 盒模型 */
  margin-top: 10px;    /* 顶部10px间距 */
  margin-bottom: 10px; /* 底部10px间距 */
  margin-left: 40px;   /* 左侧40px间距，与边缘保持距离 */
}

/* Logo图片：固定尺寸，去除边框 */
.logo-content img {
  /* 盒模型 */
  width: 130px;        /* 图片固定宽度 */
  height: 128px;       /* 图片固定高度 */
  border: none;        /* 去除图片默认边框（尤其作为链接时） */
}

/* 头部右侧内容容器：右浮动 */
.header-content {
  /* 布局定位 */
  float: right;        /* 右浮动，使内容靠右显示 */
}

/* 头部搜索框容器：右浮动，顶部留白 */
.header-search {
  /* 布局定位 */
  float: right;        /* 右浮动，使搜索框靠右显示 */
  
  /* 盒模型 */
  padding-top: 10px;   /* 顶部10px内边距，与上方内容保持距离 */
}



/*自定义输入框*/
/* 搜索内容容器：右浮动，顶部留白，清除浮动 */
.search-content {
  /* 布局定位 */
  float: right;          /* 右浮动，使整个搜索区域靠右显示 */
  clear: both;           /* 清除之前的浮动影响，确保搜索区域独立成行 */
  
  /* 盒模型 */
  margin-top: 30px;      /* 顶部30px间距，与上方元素保持距离 */
}

/* 搜索框外层容器：允许内容溢出 */
.wp-search {
  /* 兼容性与工具类 */
  overflow: visible;     /* 允许内容溢出容器，默认是hidden，此处可能用于特殊交互效果 */
}

/* 搜索输入框容器：左浮动 */
.search-input {
  /* 布局定位 */
  float: left;           /* 左浮动，与搜索按钮在同一行 */
}

/* 搜索输入框样式：虚线边框，无背景色 */
.search-input input {
  /* 布局定位 */
  float: left;           /* 左浮动，确保在容器内靠左显示 */
  
  /* 盒模型 */
  height: 20px;          /* 输入框高度 */
  padding: 2px 5px;      /* 内边距，使文字不贴边 */
  border: 1px dashed #aeada4; /* 浅灰色虚线边框，风格独特 */
  
  /* 视觉外观 */
  background: none;      /* 无背景色，透明效果 */
  
  /* 文本字体 */
  color: #004D83;        /* 输入文字颜色：深蓝色 */
  line-height: 18px;     /* 行高略小于高度，微调文字垂直位置 */
}

/* 搜索按钮容器：右浮动 */
.search-btn {
  /* 布局定位 */
  float: right;          /* 右浮动，与输入框在同一行右侧 */
}

/* 搜索按钮样式：背景图片，无边框 */
.search-btn input {
  /* 布局定位 */
  float: left;           /* 左浮动，确保按钮在容器内正确定位 */
  
  /* 盒模型 */
  width: 70px;           /* 按钮固定宽度 */
  height: 25px;          /* 按钮固定高度 */
  margin-left: 10px;     /* 左侧10px间距，与输入框分隔 */
  border: 0;             /* 去除默认边框 */
  
  /* 视觉外观 */
  background: url(../images/btn-search.jpg) no-repeat; /* 使用图片作为按钮背景 */
  
  /* 交互与动态 */
  cursor: pointer;       /* 鼠标悬停时显示手型，提示可点击 */
}



/*导航栏*/
/* 头部导航容器：绝对定位在右上角 */
.header-nav {
  /* 布局定位 */
  position: absolute;  /* 绝对定位，相对于最近的定位祖先元素（通常是.header） */
  top: 80px;           /* 距离顶部80px */
  right: 0px;          /* 距离右侧0px */
}

/* 导航内容区：固定宽高，水平居中 */
.nav-content {
  /* 盒模型 */
  width: 780px;        /* 导航区固定宽度 */
  height: 55px;        /* 导航区固定高度 */
  margin: 0 auto;      /* 水平居中 */
}

/* 主导航列表：清除默认样式，使用Flex布局 */
.wp-menu {
  /* 布局定位 */
  display: flex;       /* 启用Flex布局，使菜单项水平排列 */
  flex-wrap: wrap;     /* 当空间不足时，允许菜单项换行 */
  
  /* 盒模型 */
  list-style: none;    /* 清除默认列表项目符号 */
  margin: 0;           /* 清除默认外边距 */
  padding: 0;          /* 清除默认内边距 */
}

/* 主导航菜单项：相对定位，用于子菜单定位 */
.wp-menu li {
  /* 布局定位 */
  position: relative;  /* 相对定位，作为子菜单的定位容器 */
}

/* 主导航链接：块级显示，固定高度，居中文字 */
.wp-menu li a {
  /* 布局定位 */
  display: inline-block; /* 行内块显示，使宽高和内边距生效 */
  
  /* 盒模型 */
  height: 50px;        /* 链接固定高度 */
  padding: 0 26px;     /* 左右内边距26px，控制菜单项间距 */
  
  /* 文本字体 */
  color: #333;         /* 文字颜色：深灰色 */
  font-size: 16px;     /* 字体大小 */
  font-weight: normal; /* 常规字重 */
  line-height: 50px;   /* 行高等于高度，实现文本垂直居中 */
  text-align: center;  /* 文字居中显示 */
  text-decoration: none; /* 清除默认下划线 */
  
  /* 交互与动态 */
  transition: all 0.3s ease; /* 所有属性变化添加0.3秒过渡效果，提升交互体验 */
  outline: none;       /* 清除聚焦时默认外边框 */
}

/* 主导航链接hover状态：改变文字颜色 */
.wp-menu li a:hover {
  /* 文本字体 */
  color: #004D83;      /* hover时文字变为深蓝色 */
  text-decoration: none; /* 确保hover时无下划线 */
  outline: none;       /* 清除聚焦外边框 */
}

/* 子菜单：默认隐藏，绝对定位在父菜单下方 */
.sub-menu {
  /* 布局定位 */
  position: absolute;  /* 绝对定位，相对于父菜单项 */
  left: 0;             /* 左侧与父菜单项对齐 */
  top: 50px;           /* 顶部与父菜单项底部对齐（父链接高度50px） */
  display: none;       /* 默认隐藏子菜单 */
  
  /* 盒模型 */
  min-width: 200px;    /* 子菜单最小宽度 */
  padding: 5px 0;      /* 上下内边距5px，左右0 */
  list-style: none;    /* 清除默认列表项目符号 */
  margin: 0;           /* 清除默认外边距 */
  
  /* 视觉外观 */
  background: #004D83; /* 子菜单背景色：深蓝色 */
  border-radius: 0 0 4px 4px; /* 底部圆角4px，顶部直角与父菜单衔接 */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 添加阴影，增强层次感 */
  
  /* 文本字体 */
  white-space: nowrap; /* 禁止文字换行，确保子菜单项不折行 */
  
  /* 堆叠层级 */
  z-index: 100;        /* 较高层级，确保子菜单显示在其他内容上方 */
}

/* 子菜单链接：块级显示，自适应高度，白色文字 */
.sub-menu li a {
  /* 布局定位 */
  display: block;      /* 块级显示，使链接占满整个子菜单项 */
  
  /* 盒模型 */
  height: auto;        /* 高度自适应内容 */
  padding: 10px 20px;  /* 内边距，上下10px，左右20px */
  border-bottom: 1px dotted rgba(255,255,255,0.3); /* 底部点状边框，半透明白色 */
  
  /* 文本字体 */
  color: #fff;         /* 文字颜色：白色，与深蓝色背景对比 */
  line-height: normal; /* 行高恢复默认，适应多行文本 */
  text-align: left;    /* 文字左对齐，与主菜单区分 */
}

/* 子菜单最后一项链接：去除底部边框 */
.sub-menu li:last-child a {
  /* 盒模型 */
  border-bottom: none; /* 移除最后一项的底部边框 */
}

/* 子菜单链接hover状态：切换背景色和文字色，增加左侧内边距 */
.sub-menu li a:hover {
  /* 视觉外观 */
  background-color: #fff; /* 背景色变为白色 */
  
  /* 盒模型 */
  padding-left: 25px;  /* 左侧内边距增加到25px，形成缩进效果 */
  
  /* 文本字体 */
  color: #004D83;      /* 文字颜色变为深蓝色 */
  text-decoration: none; /* 确保无下划线 */
  
  /* 交互与动态 */
  outline: none;       /* 清除聚焦外边框 */
}

/* 父菜单项hover时显示子菜单，并添加淡入动画 */
.menu-item:hover .sub-menu {
  /* 布局定位 */
  display: block;      /* 显示子菜单 */
  
  /* 动画效果 */
  animation: fadeIn 0.3s ease; /* 应用淡入动画，0.3秒完成 */
}

/* 定义淡入动画：从完全透明到完全不透明 */
@keyframes fadeIn {
  from { opacity: 0; }  /* 动画开始时完全透明 */
  to { opacity: 1; }    /* 动画结束时完全不透明 */
}



/* 页脚整体容器：固定宽度居中，深色背景，上下留白 */
.footer {
  /* 盒模型 */
  width: 990px;                  /* 固定宽度，与页面核心内容区（如.inner）尺寸统一 */
  margin: 0 auto;                /* 水平居中，确保页脚在页面中对称显示 */
  margin-top: 14px;              /* 顶部14px间距，与上方内容区分隔 */
  padding: 15px 0 5px 0;         /* 上下内边距（上15px/下5px），控制页脚内部内容间距 */
  
  /* 视觉外观 */
  background: #3C4644;           /* 深灰色背景，与正文区白色背景区分，凸显页脚边界 */
}

/* 页脚左侧内容区：左浮动，左侧留白 */
.footer-left {
  /* 布局定位 */
  float: left;                   /* 左浮动，使左侧内容（如导航、版权信息）靠左排列 */
  
  /* 盒模型 */
  margin-left: 30px;             /* 左侧30px间距，避免内容贴容器边缘，提升美观度 */
}

/* 页脚导航容器：清除浮动，白色文字 */
.footer-nav {
  /* 布局定位 */
  clear: both;                   /* 清除前后浮动影响，确保导航区独立成行，不与其他元素重叠 */
  
  /* 盒模型 */
  margin: 0 auto;                /* 水平居中，使导航在左侧区域内居中 */
  padding: 10px 0;               /* 上下10px内边距，控制导航与上下内容的间距 */
  
  /* 文本字体 */
  color: #fff;                   /* 文字白色，与深灰色背景形成高对比，确保可读性 */
}

/* 页脚导航列表：清除默认列表样式 */
.footernav {
  /* 盒模型 */
  margin: 0 auto;                /* 水平居中，与父容器.footer-nav对齐 */
  padding: 0;                    /* 清除默认内边距，避免列表整体偏移 */
  list-style: none;              /* 清除默认列表项目符号（如圆点），保持页脚简洁风格 */
}

/* 版权信息文本：固定字号，白色文字，大行距 */
.copyright-content {
  /* 文本字体 */
  font-size: 14px;               /* 字号14px，略大于默认文本，确保版权信息清晰 */
  color: #fff;                   /* 白色文字，与页脚背景适配 */
  line-height: 3;                /* 行高3倍，增加文本垂直间距，避免拥挤 */
  
  /* 盒模型 */
  margin: 10px 0;                /* 上下10px外边距，与导航区、其他内容分隔 */
}

/* 页脚右侧内容区：右浮动，右侧留白 */
.footer-right {
  /* 布局定位 */
  float: right;                  /* 右浮动，使右侧内容（如图标、二维码）靠右排列 */
  
  /* 盒模型 */
  margin-right: 50px;            /* 右侧50px间距，避免内容贴容器边缘，与左侧间距形成平衡 */
}

/* 页脚右侧图片（如图标、二维码）：固定尺寸，去除边框 */
.footer-right img {
  /* 盒模型 */
  width: 30px;                   /* 固定宽度30px，确保图片大小统一 */
  height: 30px;                  /* 固定高度30px，保持图片比例（如图标正方形） */
  margin-left: 10px;             /* 左侧10px间距，区分多个图片（如多个社交图标） */
  border: none;                  /* 去除图片默认边框（尤其图片为链接时，部分浏览器会加边框） */
}



/* 公共横幅容器：固定宽度居中，自适应高度 */
.public-ban {
  /* 盒模型 */
  width: 990px;          /* 固定宽度，与页面其他核心模块保持尺寸一致 */
  height: 100%;          /* 高度自适应内容，灵活适配不同横幅需求 */
  margin: 0 auto;        /* 水平居中，确保横幅在页面中对称显示 */
  margin-bottom: 15px;   /* 底部15px间距，与下方内容形成自然分隔 */
}

/* 横幅内容区：全屏显示，溢出隐藏 */
.ban-content {
  /* 布局定位 */
  position: relative;    /* 相对定位，为内部元素（如轮播按钮、指示器）提供定位上下文 */
  clear: both;           /* 清除前后浮动影响，确保横幅区域独立完整 */
  
  /* 盒模型 */
  width: 100%;           /* 宽度占满父容器，充分利用横幅空间 */
  height: 100%;          /* 高度继承父容器，保持内容与容器尺寸一致 */
  padding: 0;            /* 清除默认内边距，避免内容被挤压 */
  
  /* 功能样式 */
  overflow: hidden;      /* 隐藏溢出内容，常用于轮播图场景中裁剪超出部分，保持视觉整洁 */
}