/* 全局样式放媒体查询外面 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 屏幕宽度≥1100px 才显示蜂窝布局 */
@media (min-width: 1200px) {
  .application_eight {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 4%;
    position: relative;
    z-index: 1;
  }

  .application_eight li {
    width: 20%;
    aspect-ratio: 1 / 0.9; 
    position: relative;
    background: transparent;
    transform: scale(0.7);
    transform-origin: center center;
    transition: transform 0.2s ease;
    will-change: transform;
    overflow: hidden;
  }
  /* 单独拉大 2和3 之间距离 */
  .application_eight li:nth-child(3) {
    margin-left: 7%;
  }
  /* 单独拉大 6和7 之间距离 */
  .application_eight li:nth-child(7) {
    margin-left: 7%;
  }

  .application_two {
    margin: 20px 0 0;
    padding: 30px 2%;
    list-style: none;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    display: flex;
    justify-content: space-around;
    gap: 20px;
    position: absolute;
    top: 366px;
    z-index: 99;
    pointer-events: none; /* 上层容器穿透鼠标，下层hover正常触发 */
  }
  .application_two li {
    pointer-events: auto; /* 自身六边形保留鼠标事件 */
    width: 20%;
    aspect-ratio: 1 / 0.9; 
    position: relative;
    background: transparent;
    transform: scale(0.8);
    transform-origin: center center;
    transition: transform 0.2s ease;
    will-change: transform;
    overflow: hidden;
  }
  /* 第二个六边形顺时针旋转90度 */
  .application_two li:nth-child(2){ 
    transform: scale(0.7) rotate(90deg);
  }
  .application_two li:nth-child(1) {
    position: relative;
    left: 67px;
  }
  .application_two li:nth-child(3) {
    position: relative;
    left: -82px;
  }

  /* 红色六边形主体 通用 */
  .application_eight li::before,
  .application_two li::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #f03838;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.15)) drop-shadow(0 0 3px #fff);
  }
  /* 文字：底部居中、白色加粗，只保留一段，删除重复冲突样式 */
  .application_eight li span,
  .application_two li span {
    position: absolute;
    width: 100%;
    bottom: 6px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    z-index: 2;
    pointer-events: none;
  }
  /* hover放大效果 */
  .application_eight li:hover,
  .application_two li:hover {
    cursor: pointer;
    transform: scale(0.9);
  }
}

/* 屏幕宽度小于1100px隐藏全部蜂窝 */
@media (max-width: 1199px) {
  .application_eight,
  .application_two {
    display: none;
  }