@charset "utf-8";
/* CSS Document */
.scroll-wrapper {
  width: 1550px;	/*滚动条宽度*/
  overflow: hidden; /* 隐藏容器外的内容，形成裁剪效果 */
  margin-top: 50px; /* 距离上方元素的间距 */
  margin-left: 100px; /* 距离上方元素的间距 */
}

/* 滚动轨道：使用 flex 布局让图片横向排列 */
.scroll-track {
  display: flex;
  width: max-content; /* 宽度由内容撑开，这是无限滚动的关键 */
  
  /* 应用动画：20秒完成一次线性滚动，无限循环 */
  animation: scrollLeft 50s linear infinite;
}

/* 鼠标悬停时暂停动画 */
.scroll-wrapper:hover .scroll-track {
  animation-play-state: paused;
}

/* 定义向左滚动的关键帧动画 */
@keyframes scrollLeft {
  0% {
    transform: translateX(0); /* 起始位置 */
  }
  100% {
    /* 
      技巧：向左移动 50% 的距离。
      因为我们复制了一份图片列表，
      所以移动 50% 刚好回到视觉上的起点，
      从而实现无缝衔接的效果。
    */
    transform: translateX(-50%); 
  }
}

/* =========================================================
   【4. 滚动内容样式】
   ========================================================= */
/* 单个产品项容器 */
.product-item {
  flex-shrink: 0; /* 禁止 flex 项目被压缩 */
  width: 300px;   /* 每个产品的固定宽度 */
  margin: 0 15px; /* 左右间距 */
  text-align: center;
}

/* 产品图片样式 */
.product-item img {
  width: 100%;
  height: 250px;
  object-fit: cover; /* 图片自适应填充，不变形 */
  border-radius: 8px;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

/* 图片悬停效果 */
.product-item img:hover {
  border: 3px solid #17EF58; /* 您原文档中的悬停边框色 */
  transform: scale(1.05);   /* 轻微放大 */
}

/* 产品标题 */
.product-item h3 {
  margin-top: 10px;
  font-size: 1.2rem;
  color: #333;
}

.img-hover:hover {
  border: 2px solid #17EF58;
}

* {
  box-sizing: border-box;
}

.navbar {
  display: flex;
  align-items:baseline;
  justify-content: space-between;
  padding: 10px 40px;
}

.navbar nav a,
.navbar nav span {
  font-size: 2.5rem;
	margin-left: 30px;
}
.logo {
  height: 80px;
}