#small-notices {
        font-family: "SimSun", "宋体", 'Times New Roman', Times, serif;
        color:#0000ff;
        font-size: 0.8rem;
        margin: 1rem auto auto 2rem;
    }
  #brands ul{
      gap: 1rem;
  }
  #takeout-titles span{
        color: #0066cc;  
        white-space: nowrap; 
    }
  h2{
        margin: 0 auto;
    }
  #about-us p{
        margin: 0.3rem auto;
    }

@media (min-width: 768px){   
  body {
      display:flex;
      flex-direction: column;
  }
  main{
      width: 100%;
  }
  #brands {
      width:80%;
      padding: 2% 10%; 
      background-color: #f4f9fd;
      margin: 1.5rem 0 1.2rem 0;
  }
  #brands img{
      width: 2.8rem;
      height: 2.8rem;
  }
  #brands ul {
      display: flex;
      padding: 0; /* 移除 ul 的默认内边距 */
      margin-bottom: 10px;
  }
  #small-notices {
    color:#0000ff;
    font-size: 0.8rem;
    font-family: "SimSun", "宋体", 'Times New Roman', Times, serif;
    display: block;
    margin:1rem auto 2rem 10%;
  }
  #takeout{
      /* **关键修复：移除固定的宽度，让它自适应父容器** */
      width: 17%;
      min-width: 180px;  /* 🌟 新增：确保在 iPad 上至少有 180px 宽 */
      height: auto;
      background-color: #eaf4fc;
      margin: 20px auto 50px 10%;
  }
  #takeout img{
      width:100%;
  }
  #takeout-titles{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0.2rem 2rem;
  }
  #takeout-titles img{
    width: 2rem;
    height: auto;
    object-fit: contain;
    margin-right: 0.5rem;
  }
  #takeout-titles span{
    font-size: 1.5rem;
    display:block;
    font-weight: bolder;
  }
  #about-us{
      width: 80%;
      margin: 3rem auto 1rem auto;
  }
  #about-us, #about-us h2{
      font-size: 1rem;
  }
}

/* 针对屏幕宽度小于 767px 的设备 */
@media (max-width: 767px) {
  body {
    display: flex;
    flex-direction: column;
  }
  main{
    width: 100%;
    padding: 0 0;
    margin: 0 auto;
  }
  #brands {
/* 将 12px 转换为 rem，假设根字体是 16px，则 12px = 0.75rem */
    width: 90%;
    padding: 1.5rem 5%;
    margin-bottom: 0.5rem; /* 建议将 20px (20/16=1.25) 也转换为 rem */
    background-color: #f4f9fd;
  }
  /* 4. 优化图片和品牌图标的布局 */
  #brands ul {
    flex-wrap: wrap; /* 让图片在一行放不下时换行 */
    display: flex;
    flex-direction: row;
  }
  #brands ul li img {
      width: 2.8rem; 
      height: 2.8rem;
  }
  #small-notices {
    color:#0000ff;
    font-size: 0.8rem;
    font-family: "SimSun", "宋体", 'Times New Roman', Times, serif;
    display: block;
    margin:1rem auto 2rem 2rem;
  }
  #takeout{
    width: 45%;
/* 2. 核心：删除或大幅缩小 min-width */
    min-width: 140px;     /* 🌟 设一个极小的保底值，确保至少能放下图标 */
    
    /* 3. 限制最大宽度 */
    max-width: 45vw;      /* 🌟 强制最大宽度不超过屏幕的一半 */
    height: auto;
    background-color: #eaf4fc;
    margin-left: 1rem;
  }

  #takeout img{
      width: 100%;
  }
  #takeout-titles{
    display:flex;
    /* 新增：让内部元素在交叉轴（垂直方向）上居中对齐，确保图标和文字对齐 */
    align-items: center; 
    justify-content: center;
    /* 移除或简化 padding，以减少容器边缘和内容之间的空间 */
    padding: 0.2rem 0.2rem;
  }
  #takeout-titles img{
    width: 2rem;
    height: auto;
    margin-left: 0rem;
  }
  #takeout-titles span{
    font-size: 1.1rem;
    font-weight: bolder;
    margin: 0 0rem 0 0.3rem;
  }


  /* 6. 调整 about-us 的宽度 */
  #about-us {
      width: 90%; /* 让它占据整个宽度 */
      margin: 1.5rem 5%;
  }
  #about-us,#about-us h2{
      font-size: 1rem;
  }
}