@media screen and (max-width:600px) {
    html {
        font-size: 6px;
    }
    
}
@media screen and (min-width:600px) and (max-width:700px){
    html {
        font-size: 7px;
    }
}
@media screen and (min-width:700px) and (max-width:850px){
    html {
        font-size: 8px;
    }
}
@media screen and (min-width:850px) and (max-width:1000px){
    html {
        font-size: 9px;
    }
}
@media screen and (min-width:1000px) and (max-width:1100px){
    html {
        font-size: 10px;
    }
}
@media screen and (min-width:1100px) and (max-width:1200px){
    html {
        font-size: 11px;
    }
}
@media screen and (min-width:1200px) and (max-width:1300px){
    html {
        font-size: 12px;
    }
}
@media screen and (min-width:1300px) and (max-width:1400px){
    html {
        font-size: 13px;
    }
}
@media screen and (min-width:1400px) and (max-width:1500px){
    html {
        font-size: 14px;
    }
}
@media screen and (min-width:1500px) and (max-width:1600px){
    html {
        font-size: 15px;
    }
}
@media screen and (min-width:1600px) {
    html {
        font-size: 16px;
    }
}
/* media.css */

/* 基本的响应式设置 */
html {
    box-sizing: border-box;
  }
  
  *, *:before, *:after {
    box-sizing: inherit;
  }
  
  /* 为手机和平板设置样式 */
  @media only screen and (max-width: 768px) {
    /* 调整容器宽度 */
    .container {
      padding: 0 15px; /* 减少内边距以适应小屏幕 */
    }
  
    /* 调整图标和按钮布局 */
    .icon img {
      width: 100%; /* 使图标图片宽度为100% */
      height: auto;
    }
  
    /* 调整视频容器样式 */
    .video-container video {
      width: 100%; /* 视频宽度为100% */
    }
  
    /* 隐藏桌面端的元素 */
    .arrow1, .arrow2, .arrow3, .arrow4, .arrow5, .arrow6 {
      display: none;
    }
  }
  
  /* 为桌面设置样式 */
  @media only screen and (min-width: 769px) {
    /* 调整容器宽度 */
    .container {
      width: 90%; /* 增加宽度以适应大屏幕 */
      margin: 0 auto;
    }
  
    /* 调整图标和按钮布局 */
    .icon {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  
    .c2, .c3, .c4, .c5, .c6 {
      width: calc(50% - 10px); /* 两列布局 */
    }
  
    .c12, .c13, .c14, .c15 {
      width: calc(25% - 10px); /* 四列布局 */
    }
  
    /* 调整视频容器样式 */
    .video-container {
      max-width: 400px; /* 限制视频容器的最大宽度 */
    }
  }
  
  /* 为大屏幕设置样式 */
  @media only screen and (min-width: 992px) {
    /* 调整图标和按钮布局 */
    .c2, .c3, .c4, .c5, .c6 {
      width: calc(33.333% - 10px); /* 三列布局 */
    }
  
    .c12, .c13, .c14, .c15 {
      width: calc(25% - 10px); /* 四列布局 */
    }
  }