img {
  max-width: 100%;
  display: block;
}
.container {
  width: 1200px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  color: #3b2a1a;
}

/* 顶部页眉，和about页面保持一致 */
.site-header {
  background-color: #fff8ee;
  border-bottom: 2px solid #c8161d;
}
.header-inner {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}
.header-brand {
  font-size: 22px;
  font-weight: bold;
  color: #c8161d;
}
.header-nav a {
  margin: 0 18px;
  text-decoration: none;
  color: #3b2a1a;
  font-size: 15px;
}
.header-nav a:hover,
.header-nav a.active {
  color: #c8161d;
  border-bottom: 2px solid #c8161d;
  padding-bottom: 4px;
}
.header-hotline {
  color: #c8161d;
  font-size: 18px;
  font-weight: bold;
}

/* 面包屑 */
.breadcrumb {
  background-color: #faf4e6;
  border-bottom: 1px solid #e6d9c0;
}
.breadcrumb-inner {
  width: 1200px;
  margin: 0 auto;
  padding: 12px 0;
  font-size: 14px;
  color: #6b5a44;
}
.breadcrumb-inner a {
  color:#c8161d;
}

/* Banner 1600*320 */
.page-banner {
  width:100%;
  height:320px;
  background: url("../images/xpwd_banner.png") no-repeat center center;
  background-size: cover;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.banner-text h1 {
  font-size:48px;
  color:#fff;
  margin-bottom:12px;
}
.banner-text p {
  font-size:20px;
  color:#fff;
}

/* 列表主体区域 */
.qa-wrap {
  padding:60px 0;
}
/* 分类筛选 */
.filter-box {
  display:flex;
  gap:16px;
  margin-bottom:35px;
}
.filter-item {
  padding:8px 22px;
  border:1px solid #c8161d;
  border-radius:4px;
  color:#c8161d;
  transition: all 0.3s;
}
.filter-item.active,
.filter-item:hover {
  background-color:#c8161d;
  color:#fff;
}

/* 文章列表 */
.article-list {
  background:#fff8ee;
  border:1px solid #e6d9c0;
  padding:30px;
  border-radius:6px;
}
.article-item {
  padding:20px 0;
  border-bottom:1px dashed #e6d9c0;
}
.article-item:last-child {
  border-bottom:none;
}
.article-title {
  font-size:18px;
  font-weight:bold;
  color:#3b2a1a;
}
.article-title:hover {
  color:#c8161d;
}
.article-info {
  margin:8px 0;
  font-size:14px;
  color:#776853;
}
.article-info span {
  margin-right:20px;
}
.article-desc {
  font-size:15px;
  color:#554838;
}

/* 分页 */
/* 分页组件 修复版 */
/* 分页组件 缩小版 */
.page-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
}

.page-btn {
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  line-height: 44px;
  text-align: center;
  border: 1px solid #c8161d;
  color: #c8161d;
  border-radius: 4px;
  font-size: 14px;
  background-color: transparent;
  white-space: nowrap;
}

.page-btn.active {
  background-color: #c8161d;
  color: #fff;
}

.page-btn:hover:not(.active) {
  background-color: rgba(200, 22, 29, 0.08);
}


/* TAB内容默认隐藏，active才显示 */
.tab-content{
    display: none;
}
.tab-content.active{
    display: block;
}
/* 原来filter-item是a标签，现在改成div，补上鼠标手型 */
.filter-item{
    cursor: pointer;
}
.tab-content{display:none;}
.tab-content.active{display:block;}
.filter-item{cursor:pointer;}



/* 移动端适配 */
@media screen and (max-width:1200px){
  .container,
  .header-inner,
  .breadcrumb-inner{
    width:96%;
  }
}
@media screen and (max-width:768px){
  .container,
  .header-inner,
  .breadcrumb-inner{
    width:94%;
  }
  .header-inner{
    height:auto;
    flex-wrap:wrap;
    padding:15px 0;
  }
  .header-nav{
    margin-top:10px;
  }
  .header-nav a{
    margin:0 8px;
    font-size:14px;
  }
  .page-banner{
    height:220px;
  }
  .banner-text h1{
    font-size:32px;
  }
  .filter-box{
    flex-wrap:wrap;
  }
  .qa-wrap{
    padding:30px 0;
  }
}