/* 重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.rounded-box {
            display: inline-block;
            padding: 10px 20px; /* 内边距 */
            border: 2px solid #333; /* 边框颜色和宽度 */
            border-radius: 15px; /* 圆角半径，数值越大圆角越明显 */
            background-color: #f8f9fa; /* 背景色 */
            font-size: 16px;
            color: #333;
            line-height: 1.4;
            margin: 10px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* 可选：添加阴影效果 */
            transition: all 0.3s ease; /* 平滑过渡效果 */
        }



body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
  background-color: #f4f4f4;
  line-height: 1.6;
}

/* 1. 头部容器 */
.header-container {
  width: 1300px;
  margin: 0 auto;
  padding: 10px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 84px;
}

.logo img {
  display: block;
}

.header-right {
  text-align: right;
  width: 370px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 15px;
}

.header-links {
  font-size: 14px;
  color: #333;
}
.header-links span {
  margin-left: 15px;
  cursor: pointer;
}
.header-links span:hover {
  color: #00b2fc;
  text-decoration: underline;
}

.search-box {
  font-size: 14px;
}
.search-box input {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  outline: none;
  width: 180px;
}
.search-box button {
  padding: 5px 10px;
  background-color: #1764aa;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}
.search-box button:hover {
  background-color: #00b2fc;
}



/* 2. 导航栏 */
.navbar {
  background-color: #1764aa;
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-list {
  list-style: none;
  display: flex;
  width: 1300px;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.nav-list li {
  flex: 1;
  text-align: center;
}

.nav-list a {
  display: block;
  color: white;
  text-decoration: none;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.nav-list a:hover {
  background-color: #00b2fc;
}


/* 当前活动项的样式 */
.nav-list a.active {
  color: yellow; /* 活动状态下的文字颜色 */
  background-color: #00b2fc; /* 可选：也可以改变背景色 */
}

/* 3. 广告图 */
.ad-link {
  display: block;
  margin: 5px auto;
  text-align: center;
}

.ad-link img {
  width: 1300px;
  height: 125px;
  border: none;
  box-shadow: 4px 4px 8px rgba(64, 64, 64, 0.6); /* 暗灰色，根据实际需求调整透明度 */
  
}

/* 4. 主内容区 */
.main-container {
  width: 1300px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
}

/* 轮播图容器 */
.carousel-container {
  position: relative;
  width: 625px;
  height: 350px;
  overflow: hidden;

}


.carousel-slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  height: 100%;
}

.slide {
  min-width: 100%;
  height: 350px;
  position: relative;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-title {
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 4px;
  max-width: 90%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.prev { left: 10px; }
.next { right: 10px; }

.carousel-btn:hover {
  background-color: rgba(0, 0, 0, 0.7);
}

.carousel-dots {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #bbb;
  border-radius: 50%;
  cursor: pointer;
}

.dot.active {
  background-color: #fff;
}

/* 右侧新闻 */
.news-container {
  flex: 1;
  background-color: #f9f9f9;
  padding: 15px;
  /* 新增固定高度和布局控制 */
  height: 350px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 可选：如果希望也去掉圆角，删除下面这行；否则保留美观性 */
  border-radius: 8px;
}

/* --- 新闻头部：标题 + 更多链接 --- */
.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.news-tabs {
  display: flex;
  gap: 20px;
  font-weight: bold;
}

.tab {
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

.tab.active {
  color: #00b2fc;
  border-bottom-color: #00b2fc;
   text-decoration: underline;
}

/* 确保 tab 中的链接去除默认样式 */
.news-tabs a.tab {
  /* 继承原有 span.tab 的样式 */
  text-decoration: none;         /* 去掉下划线 */
  color: inherit;                /* 初始继承父级颜色（未激活时为黑色/深灰）*/
  display: inline-block;         /* 保持块级行为以便设置 padding/border */
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
  cursor: pointer;
}

/* 激活状态：保持蓝色字体和底部边框 */
.news-tabs a.tab.active {
  color: #00b2fc !important;           /* 强制使用蓝色 */
  border-bottom-color: #00b2fc;
}

/* 悬停效果（可选增强体验） */
.news-tabs a.tab:hover {
  color: #00b2fc !important;
  border-bottom-color: #00b2fc;
  text-decoration: none;
}


/* 更多链接 */
.more-link {
  font-size: 14px;
  color: #666;
  text-decoration: none;
  white-space: nowrap;
}

.more-link:hover {
  color: #00b2fc;
  text-decoration: underline;
}

.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-list li {
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.news-list a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-list a:hover {
  color: #00b2fc;
}

.date {
  color: #666;
  font-size: 14px;
  white-space: nowrap;
  margin-left: 10px;
}

/* 双列新闻容器 */
.dual-news-container {
  width: 1300px;
  margin: 20px auto;
  display: flex;
  gap: 20px;
}

/* 每个新闻区块 */
.news-block {
  flex: 1;
  background-color: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  height: 280px; /* 限制高度不超过 260px */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 标题栏 */
.news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
}

.news-tabs {
  display: flex;
  gap: 20px;
  font-size: 16px;
}

.tab {
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s;
}

.tab.active {
  color: #00b2fc;
  border-bottom-color: #00b2fc;
}

.more-link {
  font-size: 14px;
  color: #666;
  text-decoration: none;
}

.more-link:hover {
  color: #00b2fc;
  text-decoration: underline;
}

/* 新闻列表 */
.news-list {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1;
  overflow-y: auto; /* 内容超出时滚动 */
}

.news-list li {
  padding: 6px 0;
  border-bottom: 1px dashed #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.news-list a:hover {
  color: #00b2fc;
}

.date {
  color: #666;
  font-size: 14px;
  margin-left: 10px;
}



/* 底部整体：通栏背景 */
.footer {
  background-color: #f5f5f5;
  padding: 40px 0;
  border-top: 1px solid #ddd;
}

/* 中间内容区：1300px 居中 */
.footer-container {
  width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: 14px;
  color: #333;
}

/* 左侧文字 */
.footer-left p {
  margin: 8px 0;
}

.footer-left a {
  color: #00b2fc;
  text-decoration: none;
}

.footer-left a:hover {
  text-decoration: underline;
}

/* 右侧：关键！使用 flex 让两个模块并排 */
.footer-right {
  display: flex;
  gap: 20px; /* 两个图片之间的间距 */
  align-items: flex-start;
}

/* 微信二维码 */
.qr-code {
  text-align: center;
}

.qr-code img {
  display: block;
  margin: 0 auto;
}

.qr-code p {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
}

/* 事业单位图标 */
.icon-group {
  display: flex;
  align-items: center;
}

.icon-group a {
  display: block;
}

.icon-group img {
  vertical-align: middle;
}


/* 面包屑导航 */
.breadcrumb {
  background-color: #e6f2ff;
  border: 1px solid #b0d7ff;
  padding: 8px 15px;
  font-size: 14px;
  color: #333;
  margin-bottom: 20px;
}

.breadcrumb a {
  color: #00b2fc;
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* 新闻列表容器 */
.news-list-container {
  width: 1300px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border: 1px solid #ddd;
}



/* 分页导航 */
.pagination {
  display: flex;
  gap: 5px;
  margin-top: 20px;
  justify-content: flex-start;
  font-size: 14px;
}

.page-link {
  padding: 3px 8px;
  border: 1px solid #ccc;
  background-color: white;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.3s;
}

.page-link:hover {
  background-color: #e6f2ff;
  border-color: #00b2fc;
  color: #00b2fc;
}

.page-link.active {
  background-color: #00b2fc;
  color: white;
  border-color: #00b2fc;
}


/* 左侧栏目：宽度不超过 300px */
.sidebar {
  width: 300px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.sidebar h3 {
  color: #00b2fc;
  font-size: 16px;
  margin: 0 0 10px 0;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
}

.category-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  margin-bottom: 5px;
}

.category-list a {
  display: block;
  padding: 8px 15px;
  background-color: #e6f7f7;
  border: 1px solid #b0d7ff;
  color: #333;
  text-decoration: none;
  border-radius: 3px;
  transition: all 0.3s;
  text-align: center;
}

.category-list a:hover {
  background-color: #b0d7ff;
  color: #00b2fc;
}

.category-list a.active {
  background-color: #00b2fc;
  color: white;
  border-color: #00b2fc;
}

/* 右侧内容区 */
.content {
  flex: 1;
  background-color: white;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}


/* 内容容器 */
.content-container {
  width: 1300px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* 标题样式 */
.article-title {
  font-size: 28px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin: 30px 0 20px;
  line-height: 1.4;
}

/* 元信息：时间、来源、访问量 */
.article-meta {
  text-align: center;
  color: #666;
  font-size: 14px;
  margin: 15px 0 30px;
  padding: 10px;
  border-top: 1px dashed #eee;
}

/* 正文内容 */
.article-content {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
  text-align: justify;
  margin: 0;
}

.article-content p {
  margin: 15px 0;
  text-indent: 2em; /* 首行缩进 */
}

.article-content a {
  color: #00b2fc;
  text-decoration: none;
}

.article-content a:hover {
  text-decoration: underline;
}


/* ================================
   搜索框整体样式
=============================== */
.search-box {
  margin-top: 10px;
  display: inline-block;
  vertical-align: middle;
}

.search-container {
  display: flex;
  align-items: center;
  border: 2px solid #00b2fc;
  border-radius: 6px;
  overflow: hidden;
  background-color: white;
}

/* ================================
   下拉选择器
=============================== */
.search-select {
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  border: none;
  outline: none;
  background-color: transparent;
  cursor: pointer;
}

.search-select:focus {
  box-shadow: none;
}

/* ================================
   搜索输入框
=============================== */
.search-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  color: #333;
  border: none;
  outline: none;
  background-color: transparent;
}

.search-input::placeholder {
  color: #999;
}

/* ================================
   搜索按钮
=============================== */
.search-btn {
  padding: 8px 16px;
  background-color: #00b2fc;
  color: white;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-btn:hover {
  background-color: #009edc;
}

/* ================================
   搜索图标（可选：使用字体图标或背景图）
=============================== */
.icon-search {
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 5 1.47-1.47L16.5 13.79l-5-5z" fill="%23fff"/><path d="M9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="%23fff"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}