.content-wrapper{
    position: absolute;
    top: 90%; 
    left: 0;
    right: 0;
    z-index: 5;
  }



  .nav-container {
    width: 100%;
    height: 1.333rem; /* 100rpx = 100/75rem ≈1.333rem */
    background-color: #8e4639;
    margin-bottom: 0;
    display: flex;
    align-items: flex-end;
    overflow-x: auto; /* 横向滚动 */
    -webkit-overflow-scrolling: touch; /* 移动端滚动优化 */
    padding: 0 0.267rem; /* 左右内边距20rpx=20/75≈0.267rem（微调避免边缘紧贴） */
  }
  
  /* 隐藏滚动条（不影响滚动功能） */
  .nav-container::-webkit-scrollbar {
    display: none;
  }
  
  /* 导航项外层容器：用于承载所有导航项 */
  .nav-wrapper {
    display: flex;
    gap: 0.04rem; /* 导航项间距3rpx=3/75=0.04rem */
    height: 1.2rem; /* 与导航项高度一致（90rpx=90/75=1.2rem） */
    align-items: center;
  }
  
  /* 导航项基础样式 */
  .nav-item {
    min-width: fit-content; /* 宽度适应内容 */
    height: 1.2rem; /* 点击后高度90rpx=90/75=1.2rem */
    padding: 0.356rem 0.267rem 0.453rem; 
    background-color: #8e4639; /* 默认背景色 */
    
    display: flex;
    align-items: center;
    gap: 0.133rem; /* 图标与文字间距10rpx=10/75≈0.133rem（优化显示） */
    font-size: 0.4rem; /* 30rpx=30/75=0.4rem */
    color: #fff; /* 默认文字色 */
    cursor: pointer;
    transition: background-color 0.3s ease; /* 背景色过渡 */
    white-space: nowrap; /* 防止文字换行 */
  }
  
  /* 导航项图标：默认隐藏 */
  .nav-item img {
    width: 0.4rem; /* 图标大小30rpx=0.4rem（与文字同高） */
    height: 0.4rem;
    display: none; /* 未点击时不显示 */
    object-fit: contain;
  }
  
  /* 点击激活状态样式 */
  .nav-item.active {
    background: linear-gradient(180deg, #FDEBC8, #FBF5E9); /* 点击后渐变背景 */
    color: #873527 ; /* 点击后文字色（与背景对比） */
    border-radius: 0.173rem 0.173rem 0 0; /* 13rpx=13/75≈0.173rem */
  }
  
  /* 激活状态显示图标 */
  .nav-item.active img {
    display: block;
  }


 .audio-wrappre{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .listen-img{
    width: 0.4rem;
    height: 0.4rem;
  }
  .listen-text{
    font-size: 0.35rem;
    margin-left: 0.2rem;
  }


  .video{
      width: 100%;
      height: auto;
    max-width: 100%; 
    display: block;
     /* 关键属性：移除浏览器默认控件 */
            controls: none;
            /* 兼容不同浏览器的写法 */
            -webkit-appearance: none;
            appearance: none;
             object - fit: cover;
   }

/* 导航栏下方的主容器 */
.main-container {
    width: 100%;
    height: auto; /* 高度自适应 */
    background-image: url("/images/bg1.png");
    background-size: 100% ; /* 背景图覆盖容器 */
    background-position: center;
    padding: 0.413rem 0 0.693rem; /* 上46rpx=46/75≈0.613rem，下52rpx=52/75≈0.693rem */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* 内部竖向排列 */
    align-items: center; /* 内容横向居中 */
  }
  
  /* 标题区样式 */
  .title-wrapper {
    display: flex;
    align-items: center; /* 竖向居中 */
 
    margin-bottom: 0.72rem; 
    
  }
  
  .title-icon {
    width: 0.4rem; /* 30rpx=30/75=0.4rem */
    height: 0.284rem; /* 21.3rpx=21.3/75≈0.284rem */
    object-fit: contain;
  }
  
  .title-text {
    font-size: 0.4rem; /* 建议文字大小，可自行调整 */
    color: #873527;
    position: relative; /* 新增定位 */
    top:-0.03rem;
    font-weight: 500;
    text-align: center;
  }
 
  /* 内容区样式 */
  .content-area {
    width: 8.213rem; /* 616rpx */
    height: auto;
    margin-bottom: 0.711rem; /* 内容区与图片区距离53.3rpx */
    font-weight: 400;
    font-size: 0.373rem; /* 28rpx */
    color: #4B4B4B;
    line-height: 0.667rem; /* 50rpx */
    text-align: left;
    font-family: Source Han Serif SC;
   
}
.content-area img {
    max-width: 100%; 
}
  
  /* 图片区容器 */
  .img-container {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 100vw;
    padding: 0.2rem 0;
    min-height: 10rem;
    box-sizing: border-box;
  }
  
  /* 左右切换按钮 */
  .img-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.8rem;
    height: 0.8rem;
    z-index: 10;
    cursor: pointer;
    pointer-events: auto;
  }
  
  .left-btn {
    left: 0.2rem;
  }
  
  .right-btn {
    right: 0.2rem;
  }
  
  /* 图片滚动容器 */
  .img-scroll {
    width: 100%;
    overflow: hidden;
    padding: 0.2rem 0;
    position: relative;
  }
  
  /* 图片列表 */
  .img-list {
    display: flex;
    transition: transform 0.3s ease;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  
  /* 单张图片样式 - 实现半张+全张+半张效果 */
  .img-item {
    width: auto; /* 图片宽度自适应 */
    margin: 0 10px; /* 图片间距10px */
    flex-shrink: 0;
    opacity: 1; /* 所有图片都完全显示，无遮罩 */
    transition: all 0.3s ease;
    transform: scale(1); /* 所有图片正常大小 */
    box-sizing: border-box;
  }
  
  /* 中心图片样式 */
  .img-item.active {
    opacity: 1; /* 中心图片完全显示 */
    transform: scale(1); /* 中心图片正常大小，不放大 */
  }
  
  .img-item img {
    width: auto; /* 图片宽度自适应 */
    height: 9.111rem; /* 固定高度，保持宽高比 */
    object-fit: contain; /* 保持图片比例，不裁剪 */
    border-radius: 0.133rem;
    display: block;
  }
  


  .swiper-container {
    width: 100%;
    height: auto;
}
.swiper-slide {
   
    width: 33%;
    margin: 0 13%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide img {
width: 5.9rem !important;
height: auto !important;
object-fit: cover;
margin: 0 0.045rem; /* 左右各0.045rem实现0.09rem间隙 */
border-radius: 0.32rem;
}

.img-desc {
text-align: center;
font-size: 0.35rem;
color: #666;
transition: opacity 0.3s ease;
margin-top: 0.61rem;
}




.titleimg{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.titleimg img{
    width: 100%;
    height: 0.32rem;
}