* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    }
    body {
      background: #f5f7fa;
      display: flex;
      justify-content: center;
      /* padding: 20px; */
    }
    #app {
     /* max-width: 1200px; */
      width: 100%;
      /*  height: 100%;
      background: white; 
     border-radius: 28px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
      padding: 24px 28px 40px;
      transition: all 0.2s; */
    }
/* 头部共用样式 */
   /* 顶部导航栏 */
    .header {
     padding-top: 15px;
     width: 100%;
     height: 100px;
     background: #392415;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
    }
    .hdtitle{
     padding-top: 15px;
     width: 100%;
     height: 100%;
     background: url("../images/index/hederBg.png") no-repeat;
    background-size: 100vw auto;      /* 关键属性 */
    /* 居中裁剪，保证焦点在中间 */

     position: fixed;
     top: 0;
     left: 0;
     z-index: 999;
   }
    .imgLogo{
     height:  auto;
     width: 100%;
  
   
   }
   .headerTitle{
     padding: 20px;
       padding-top: 28px;
     font-size: 14px;
     font-weight: 600;
     color: #CEB794;
   }
    .nav-wrap {
      max-width: 77vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 68px;
    }
    .nav-list {
      display: flex;
      gap: 32px;
          padding-top: 2px;
          cursor: pointer;
    }
    .nav-list li span {
      font-size: 14px;
     font-weight: 600;
      color: #CEB794;
      transition: color 0.3s;
    }
    .nav-list li span:hover {
      color: #fff;
    }
   .banner img{
     height:  auto;
     width: 100%;
     display: block;
   }

   .knife{
    position: relative;
    right: 13%;
    color:#000000 ;
    text-align: end;
   }
   .engName{
    color: #66655d;
   font-family: Alibaba-PuHuiTi-R;
   }
   .cnName{
   font-family: monospace;
   margin-top: 50px;
   margin-bottom: 50px;
   }
   .nrName{
   font-family: Alibaba-PuHuiTi-L;
   color: #3f3f3c;
   letter-spacing: 2px; 
   line-height: 30px;
   }
   .more{
    margin-top: 70px;
    width: 160px;
    height: 50px;
    color: #3f3f3c;
    border: 2px solid #000000;
    position: absolute;
    right: 0;
    text-align: center;
    letter-spacing: 5px; 
    line-height: 50px;
   }
   .introduction{
    width: 100%;
    /* height: 100%; */
    background: url("../images/index/introduction.png") no-repeat;
    background-size: 100% 100%;
   }
   .itdtTitle{
    padding-top: 90px;
    color: #392415;
    align-items: flex-end;
   }
   .qz{
    width: 222px;
    height: 3px;
    background: #392415;
    position: relative;
    bottom: 20px;
   }
   .gsjs{
    font-size: 50px;
    font-weight: 700;
    margin-left: 20px;
    font-family: monospace;
   }
   .gsjsContent{
    margin-top: 50px;
    /* margin-left: 150px; */
   
   }
   .imgBox{
    
    position: relative;
   }

   .gsjsImg{
    width: 85vw;
    height: 800px;
    background: url("../images/index/gsjs_ds.png") no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 10vw;
   }
   .gsjs_ds{
    width: 85vw;
    height: 800px;
   background-size: cover;
  background-position: center;  /* 居中显示，防止裁剪到边缘空白 */
  background-repeat: no-repeat;
    position: absolute;
    top: 50px;
    left: 6vw;
   }
   .gsjsText{
    margin-top: 950px;
    padding:0 6vw ;
    font-size: 24px;
    color: #4e2f1b;
    line-height: 48px;
   }
   .mj{
    margin-top: 70px;
    margin-bottom: 100px;
    color: #392415;
    font-weight: normal;
   }
   .gsjsFgx{
    width: 3px;
    height: 126px;
    background: #4E2F1B;
   }
   .award{
    width: 40vw;
   }
   .sign{
    position: relative;
    top: -28px;
   }
   .icon_ry{
    width: 30px;
    height: 48px;
   }
   .gylc img{
    width: 100%;
    height: auto;
     display: block;
    /* background: url("../images/index/gylc.png") no-repeat;
    background-size: 100% auto; */
   }
   .gszgBox{
    padding: 60px;
    width: 100vw;
    /* height: 1000px; */
    background: url("../images/index/gszsBj.png") no-repeat;
    background-size: 100% 100%;
    color: #dfd8c8;
   }
   .gszgBox img{
    width: 30vw;
    height: 650x;
   }
    .headerH5{
      display: none;
    }  
    .product-img-box {
    /* 关键：告诉浏览器不要干扰触摸行为 */
    touch-action: none;
    /* 或者更精确：只禁止水平滚动 */
    /* touch-action: pan-y; */
    
    overflow: hidden;
    width: 100%;
}

/* 如果容器内需要垂直滚动，在子元素上覆盖 */
.product-img-box .scrollable-content {
    touch-action: pan-y; /* 允许垂直滚动 */
}
      /* 移动端适配 */
    @media screen and (max-width: 768px) {
      .bannerH5{
        margin-top: 60px;
        /* height: 300px;
        width: 100%;
        background: url('../images/yidonguan/banner.png') no-repeat;
        background-size: 100% 100%; */
      }
      .itdtTitle{
        padding-top: 40px;
      }
      .qz{
         width: 40px;
         height: 2px;
         position: relative;
         top: -13px;
      }
      .gsjs{
       font-size: 30px;
       margin-left: 10px;
      }
      .ywsx{
         font-size: 10px !important;
      }
      .gsjsContent{
        margin-top: 30px;
  
      }
      .gsjsImg{
         height: 220px;
         background: url("../images/yidonguan/img_gsjs_ds.png") no-repeat;
      }
      .gsjs_ds{
        height: 220px;
         /* background: url("../images/yidonguan/img_gsjs.png") no-repeat; */
          background-size: 100% 100% !important;
          position: absolute;
          top: 20px;
          left: 6vw;
       }
       .gsjs_ds img{
         width: 100%;
         height: auto;
       }
     .gsjsText{
      margin-top: 310px;
       font-size: 16px;
       line-height: 25px;
      }
      .mj{
           margin-top: 20px;
          margin-bottom:40px;
          font-size: 16px !important;
          
      }
      .sign{
          position: relative;
          top: -18px;
        }
        .icon_ry{
        width: 20px;
        height: 38px;
      }
      .award{
        width: 100%;
      }
      .gold{
        width: 40vw;
       line-height: 15px;
       margin-bottom: 20px;
      }
      .mjyy{
        display: block;
       
      }
      .gszgBox{
      padding: 40px;
      width: 100vw;
    
    }
    .zsyy{
      font-size: 8px !important;
    }
    .zszw{
      font-size: 22px !important;
    }
    .banner img{
       margin-top: -3px;
   }
     /* 左侧图片轮播区域 */
    .product-img-box {
      flex: 1;
      position: relative;
      /* border: 1px dashed #cccccc47; */
      overflow: hidden;
    }
    .product-img {
      width: 100%;
      height: auto;
      display: block;
    }
    /* 左右切换箭头 */
    .arrow-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 50px;
      height: 50px;
      background: rgba(0,0,0,0.3);
      color: #fff;
      font-size: 24px;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .arrow-left {
      left: 12px;
    }
    .arrow-right {
      right: 12px;
    }
    /* 图片分页数字 */
    .page-num {
      position: absolute;
      bottom: 12px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.35);
      color: #fff;
      padding: 4px 12px;
      border-radius: 14px;
      font-size: 14px;
    }
    .gszgBox img{
      width: 100%;
    }
    .gylcH5 img{
      width: 100%;
    height: auto;
    /* background: url("../images/yidonguan/img_yd_gyi.png") no-repeat;
    background-size: 100% auto; */
    display: block;
    }
    }