.container {
  position: relative;

}

.container .home {
  background: url("../../img/技术展示Banner.png") no-repeat center;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  position: relative;
  padding: 0 4rem;
}

.container .home .banner {
  color: #fff;
}

.container .home .banner span {
  display: block;
}

.container .content {
  margin: 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.container .content .item {
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
  overflow: hidden;
  border-radius: 0.3rem;
  /* 保持容器尺寸不变 */
}

.container .content .item .info {
  display: flex;
  justify-content: space-between;
  padding: .5rem;
  align-items: center;
  gap: 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

.container .content .item .info span {
  font-size: .7rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.container .content .item img {
  width: 19.675rem;
  height: 10.5rem;
  border-radius: 0.3rem;
  transition: transform 0.3s ease;
  /* 添加过渡效果 */
}

.container .content .item:hover img {
  transform: scale(1.05);
  /* 鼠标悬停时略微放大 */
}

.container .content .item .info img {
  width: 1.0795rem;
  height: 1.0795rem;
}

/* 鼠标悬停显示active图片效果 */
.arrow-icon img.active {
  display: none;
}

.container .content .item:hover .arrow-icon img.normal {
  display: none;
}

.container .content .item:hover .arrow-icon img.active {
  display: block;
}