.app {
    width: 100%;
    min-height: 100vh;
    background-color: #000000;
    padding-top: 0.1px;
    cursor: pointer;
  }
  //.robot_box{
  //  position: absolute;
  //  top: -70px;
  //  z-index: -99;
  //}
  .robot_img{
    width: 80px;
    //height: 209px;
  }
  /* CSS 调整 */
  .robot_box {
    position: fixed; /* 也要用 fixed 或 absolute */
    top: calc(50% - 200px); /* 根据位置微调 */
    right: calc(1.5% + 45px - 31.5px);
  
    z-index: 98; /* 比盒子小 */
  }
  .online_box{
    display: flex;
    flex-direction: column;
    color: black;
    align-items: center;
  }
  
  .show_box{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 220px;
    height: 120px;
    background-color: #ffffff;
    position: absolute;
    right: 140px;
    border-radius: 5px;
  }
  .consult_img{
    width: 35px;
    height: 35px;
    margin-top: 18px;
  }
  .show_phone{
  
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 22px;
    color: #2A2A2A;
    line-height: 10px;
    text-align: right;
    font-style: normal;
    margin-top: 10px;
  }
  .show_name{
    margin-top: 10px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: #2A2A2A;
    line-height: 20px;
    text-align: right;
    font-style: normal;
  }
  /* 创建三角形 */
  .show_box::after {
    content: "";
    position: absolute;
    top: 50%; /* 垂直居中 */
    right: -8px; /* 宽度的一半，让它贴在右边外面 */
    transform: translateY(-50%); /* 抵消自身高度的一半实现完美居中 */
  
    /* 经典的 CSS 三角形写法 */
    border-width: 5px 0 5px 9px; /* 上 左右 下 */
    border-style: solid;
    border-color: transparent transparent transparent #FFFFFF; /* 只显示左边的颜色，形成指向右的箭头 */
  }
  .show_box1::after {
    content: "";
    position: absolute;
    top: 30%; /* 垂直居中 */
    right: -8px; /* 宽度的一半，让它贴在右边外面 */
    transform: translateY(-50%); /* 抵消自身高度的一半实现完美居中 */
  
    /* 经典的 CSS 三角形写法 */
    border-width: 5px 0 5px 9px; /* 上 左右 下 */
    border-style: solid;
    border-color: transparent transparent transparent #FFFFFF; /* 只显示左边的颜色，形成指向右的箭头 */
  }
  .consult_box {
    position: fixed;
    top: 47%;
    right: 0.7%;
    width: 130px;
    height: 204px;
    background: #FFFFFF;
    z-index: 99; /* 比图片大，成功遮挡 */
    transform: translateY(-50%);
    border-radius: 10px;
  }
  //.consult_box{
  //  position: fixed;
  //  top: 50%;
  //  right: 0.7%;
  //  width: 130px;
  //  height: 210px;
  //  z-index: 999;
  //  transform: translateY(-50%);
  //  background: #FFFFFF;
  //  border-radius: 14px;
  //}
  /* 1. 最外层容器 */
  .page_wrapper {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background-color: #000; /* 与 app 背景一致 */
  }
  
  /* 2. 内容主体：必须有背景色以遮盖底下的 footer */
  .app_main {
    position: relative;
    z-index: 2; /* 确保在 footer 之上 */
    background-color: #000;
    min-height: 100vh;
    /* 这里的 box-shadow 可以增加视觉深度 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .footer_img{
    width: 100%;
    height: 57%;
  }
  /* 3. 揭示型页脚 */
  .footer_reveal {
    position: sticky; /* 关键：粘性定位 */
    bottom: 0;        /* 钉在底部 */
    left: 0;
    width: 100%;
    height: 300px;    /* 必须有固定高度 */
    background: #2CE8E6;
    z-index: 1;       /* 层级较低，被 app_main 盖住 */
  
    ///* 居中内容 */
    display: flex;
    //align-items: center;
    justify-content: center;
  }
  .app_box {
    position: relative;
    transition: transform 0.4s ease;
  }
  
  .app_box.pull-up {
    transform: translateY(-300px);   // footer 高度
  }
  
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background: #2CE8E6;
    z-index: 99;
    pointer-events: auto;
  }
  .bottom_right{
    display: flex;
    align-items: center;
    .gzh{
      margin-right: 10.17%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .gzh_img{
        width: 152px;
        height: 152px;
      }
      .gzh_name{
        font-size: 14px;
        color: #FFFFFF;
        margin-top: 10px;
      }
    }
  }
  .bottom_logo{
    width:98px;height:22px;
  }
  .bottom_about{
    display: flex;
    align-items: center;
    margin-top: 5.18%;
    .about{
      font-size: 14px;
      color: #FFFFFF;
      margin-right: 10px;
    }
  }
  .bottom_introduce{
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 15px;
    color: #6B707F;
    line-height: 17px;
    text-align: left;
    font-style: normal;
    margin-top: 10px;
  }
  .nav_bottom{
  
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5%;
    width: 70%;
  }
  .nav_top {
    /* width: 100%;
    /* 核心修改：使用粘性定位 */
    position: -webkit-sticky; /* 兼容 Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #000;
    display: flex;
    align-items: center;
    padding: 22px 8.03%; /* 1.5倍比例 */
    box-sizing: border-box; */
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}
  /* 注意：使用 fixed 后，导航栏不再占位，
   你需要给下方的页面内容添加一个 padding-top，
   防止内容被导航栏遮挡。 */

  .logo {
    margin-left: 8.03%;
    margin-right: 185px;
  }
  .nav_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* 保证图片不会影响文字位置 */
  }
  .nav_list {
    display: flex;
    align-items: center;
    justify-content: space-around;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #b7bdc8;
    line-height: 20px;
    text-align: left;
    font-style: normal;
  }
  
  .logo_img {
    width: 124px;
    height: 32px;
  }
  
  /* 每个导航项 */
  .nav_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: calc(100vw * (110 / 2048));
  }
  
  .nav_text {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
  .nav_list a {
    color: #b7bdc8;
    text-decoration: none;
    font-size: 20px;
  }
  
  .nav_list a:hover {
    color: #2ce6e4;
  }
  
  /* 激活的链接样式 */
  .nav_list .active {
    color: #2ce6e4; /* 激活时文字颜色 */
  }
  
  /* 设置底部图片 */
  .bottom_image {
    position: absolute;
    width: 118px;
    height: 19px;
    margin-top: 10px; /* 确保图片与文字之间有间距 */
  }
  @media (max-width: 1300px) {
    .nav_top {
      flex-direction: column; /* 保证在平板和手机上 logo 和导航项竖直排列 */
      align-items: flex-start; /* 将 logo 左对齐 */
      padding: 20px 0;
      /* margin-top: 20px; */
    }
  
    .logo {
      margin-left: 20px; /* logo 左侧间距 */
      margin-bottom: 20px; /* 保证 logo 和导航之间的间距 */
    }
  
    .nav_list {
      flex-direction: row; /* 保持导航项为水平排列 */
      justify-content: space-evenly; /* 让导航项水平居中 */
      width: 100%; /* 确保占满整个宽度 */
      margin-top: 10px;
    }
  
    .nav_item {
      margin-right: 0;
      margin-bottom: 20px; /* 增加导航项之间的间距 */
    }
  
    .nav_text {
      font-size: 14px; /* 增大文字大小 */
    }
  
    .bottom_image {
      width: 100px; /* 调整图片大小 */
      height: 16px;
      margin-top: 12px; /* 确保图片与文字之间有足够间距 */
    }
  
  }
  /* 媒体查询：适应较小屏幕（如平板、手机） */
  @media (max-width: 1200px) {
    .nav_top {
      flex-direction: column; /* 保证在平板和手机上 logo 和导航项竖直排列 */
      align-items: flex-start; /* 将 logo 左对齐 */
      padding: 20px 0;
      /* margin-top: 20px; */
    }
  
    .logo {
      margin-left: 20px; /* logo 左侧间距 */
      margin-bottom: 20px; /* 保证 logo 和导航之间的间距 */
    }
  
    .nav_list {
      flex-direction: row; /* 保持导航项为水平排列 */
      justify-content: space-evenly; /* 让导航项水平居中 */
      width: 100%; /* 确保占满整个宽度 */
      margin-top: 10px;
    }
  
    .nav_item {
      margin-right: 0;
      margin-bottom: 20px; /* 增加导航项之间的间距 */
    }
  
    .nav_text {
      font-size: 14px; /* 增大文字大小 */
    }
  
    .bottom_image {
      width: 100px; /* 调整图片大小 */
      height: 16px;
      margin-top: 12px; /* 确保图片与文字之间有足够间距 */
    }
  
  }
  @media (max-width: 1000px) {
    .footer_reveal {
      height: 150px;
    }
    .footer_img{
      width: 100%;
      height: 47%;
    }
    .bottom_right{
      margin-top: 20px;
    }
    .nav_bottom{
      flex-direction: column;
    }
    .bottom_about {
      display: flex;
      align-items: center;
  
      .about {
        font-size: 12px !important;
      }
    }
    .path_name{
        font-size: 14px !important;
    }
  }
  /* 媒体查询：适应手机屏幕 */
  @media (max-width: 768px) {
    .footer_reveal {
      height: 100px;
    }
    .path_name{
        font-size: 14px !important;
    }
    .footer_img{
      width: 100%;
      height: 37%;
    }
    .bottom_right{
      margin-top: 20px;
    }
    .nav_bottom{
      flex-direction: column;
    }
    .bottom_about {
      display: flex;
      align-items: center;
  
      .about {
        font-size: 12px !important;
      }
    }
    .nav_top {
      padding: 10px 0; /* 增加上下内边距 */
    }
    .bottom_image{
      width: 80px;
    }
    .logo_img {
      width: 100px; /* 调整 logo 大小 */
      height: 26px;
    }
  
    .nav_item {
      margin-bottom: 20px; /* 增加导航项之间的间距 */
    }
  
    .nav_text {
      font-size: 14px; /* 小屏幕上调整文字大小 */
    }
  }/* 遮罩层 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .download_left{
    margin-right: 10px;
  }
  .img_title{
    width: 100%;
    margin-right: 10px;
  }
  .img_download{
    width: 100%;
  }
 /* 弹窗主体 - 宽度要足够放下双排 */
.modal-content {
    border-radius: 24px;       /* 16*1.5 */
    padding: 48px;             /* 32*1.5 */
    width: 90%;
    max-width: 750px;          /* 调大最大宽度，确保双排能放下 */
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
    box-sizing: border-box;
}

/* 移除导致偏移的 margin-right */
.modal-body-content {
    margin: 0 auto; 
}

/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 5px;
    right: 30px;
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 30px;
    cursor: pointer;
}

/* 文字样式 */
.modal-title { font-size: 30px; margin-bottom: 12px; }
.highlight { font-size: 22px; color: #2CE8E6; }
.modal-desc { color: #FFFFFF; font-size: 21px; margin-bottom: 24px; }
.modal-tip { color: #2CE8E6; font-size: 24px; margin-top: 10px; }

/* 1. 白色盒子：宽度设为 100% (相对于弹窗) 或由内容决定，但不再写死宽 */
.qr-wrapper {
    background-color: white;
    padding: 3% 5%; /* 使用百分比内边距，屏幕小时内间距也会变小 */
    border-radius: 12px;
    display: inline-block;
    margin-top: 24px;
    box-sizing: border-box;
    width: 90%;      /* 让白色盒子占满弹窗的绝大部分 */
    max-width: 600px; /* PC 端最大不建议超过 600px */
}

/* 2. 强制并排容器 */
.download_flex_container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-end;
    justify-content: center;
    gap: 5%; /* 间距使用百分比，屏幕缩小时图片之间的间隙也会缩小 */
}

/* 3. 核心修改：每一列使用百分比宽度 */
.download_left {
    /* 不再使用 width: 280px; */
    flex: 1;          /* 每一列平分空间 */
    max-width: 240px; /* PC 端不至于大得离谱 */
    min-width: 80px;  /* 移动端保证最小能看清 */
}

/* 4. 图片：保持 100% 宽度，高度自动 */
.img_title {
    width: 100%;      /* 宽度会随父级 .download_left 自动缩放 */
    height: auto;     /* 必须设为 auto 保证高度随宽度等比例变化 */
    margin-bottom: 8%;
    display: block;
}

.img_download {
    width: 100%;      /* 二维码也会随父级自动缩放 */
    height: auto;     /* 保持正方形比例 */
    display: block;
}


/* 5. 适配手机端微调 */
@media (max-width: 768px) {
    .logo{
        margin: 10px 10px;
    }
    .qr-wrapper {
        padding: 15px; /* 手机端内边距稍微固定一下，防止太小 */
        width: 95%;
    }
    .modal-content {
        padding: 30px 15px; /* 缩减弹窗外层边距 */
    }
    .modal-tip{
        font-size: 15px;
    }
    .bottom_right{
        display: flex;
        align-items: center;
       margin-left: 80px;
        .gzh{
          margin-right: 10.17%;
          display: flex;
          flex-direction: column;
          align-items: center;
          .gzh_img{
            width: 152px;
            height: 152px;
          }
          .gzh_name{
            font-size: 14px;
            color: #FFFFFF;
            margin-top: 10px;
          }
        }
      }
}