@charset "utf-8";
/* h3 标题样式 */
#products {
  width: 100%;
}
#products .classes_box:not(:last-of-type) {
  border-bottom: 2px dashed #454; /* 添加上划线样式 */
  padding-top: 5px; /* 可选：添加上划线和文字之间的间距 */
}
#products h3 {
  font-size: 16px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
  color: #fff; /* 设置文字颜色为白色 */
  margin: 5px; /* 设置下边距 */
  padding: 5px;
  display: inline-block;
  width: auto; /* 设置宽度为自动，根据内容宽度调整 */
  border: 2px solid #fff; /* 设置边框样式为白色实线 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加阴影效果 */
  background: rgba(155, 155, 155, 0.3);
}
/* divsbox 大盒子样式 */
#products .divsbox {
  width: 100%;
  display: flex; /* 使用 Flex 布局 */
  flex-wrap: wrap; /* 自动换行 */
}
/* 子 div 样式 */
#products .divsbox > a > div {
  width: 180px;
  margin: 5px; /* 设置外边距 */
  padding: 5px; /* 设置内边距 */
  border-radius: 10px; /* 设置边框圆角 */
  background-color: rgba(55, 255, 55, 0.2); /* 设置背景颜色，这里使用了半透明的绿色 */
  text-align: center; /* 文字居中对齐 */
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* 添加阴影效果 */
  border: 2px solid #444; /* 设置边框样式为白色实线 */
}
/* 图片样式 */
#products .divsbox > a > div img {
  width: 100%; /* 图片宽度100%，撑满父容器 */
  display: block; /* 块级显示 */
  margin-bottom: 10px; /* 图片下边距 */
}
/* 文字样式 */
#products .divsbox > a > div div {
  color: #fff; /* 设置文字颜色为白色 */
  font-size: 16px; /* 设置字体大小 */
}
@keyframes hoverBig {
  0% {
    background-color: rgba(0, 0, 0, 0.3); /* 初始颜色 */
  }
  100% {
    transform: scale(1.05); /* 向右移动 20 像素 */
    background-color: rgba(255, 255, 255, 0.3); /* 中间颜色 */
  }
}
.productBox:hover {
  animation: hoverBig 1s ease forwards;
}
/* 样式产品容器 */
#oneProduct {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2%;
  border: 1px solid #444;
  border-radius: 5px;
  background-color: rgba(0, 222, 222, 0.1); /* 中间颜色 */
}
/* 产品图片容器 */
#productTop {
  display: flex;
  height: auto;
  margin-bottom: 2%;
  width: 100%;
  min-width: 300px;
  min-height: 200px;
  flex-wrap: wrap;
  box-shadow: 0px 10px 20px rgba(200, 200, 255, 0.5);
}
#productTop > div {
  flex-grow: 1;
}
#productTop > div:nth-child(1) {
  width: 40%;
  min-width: 300px;
  min-height: 200px;
}
#productTop > div:nth-child(2) {
  width: 45%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#productTop > div > div {
  height: 100%;
}
/* 产品图片 */
#productTop img {
  width: 100%; /* 产品图片宽度为容器的百分之四十 */
  height: auto;
}
/* 产品信息段落 */
#productTop p {
  letter-spacing: 0.2em;
}
/* 第一个p */
#productTop > div p:nth-child(1) {
  font-weight: bold;
  font-size: 20px;
  color: white;
  text-align: center;
  margin: 10px auto;
}
/* 第二个p */
#productTop > div p:nth-child(2) {
  margin: 0 auto;
  margin-top: 5px;
  ;
  margin-bottom: 5px;
  font-size: 14px;
  color: #eee;
}
#productTop > div > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}
#productTop > div > div a {
  text-decoration: underline;
  font-size: 14px;
  display: block;
  color: aqua;
  margin: 5px 5px;
  white-space: nowrap;
}
#productTop > div > div a:hover {
  animation: ahover 1s ease forwards;
}
@keyframes ahover {
  to {
    background: rgba(222, 222, 222, 0.5);
    transform: scale(1.1);
  }
}
/* 产品信息图片容器 */
#productInfoImg {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
/* 产品信息图片 */
#productInfoImg img {
  width: 100%;
  height: auto;
  margin: 10px 2%; /* 图片之间的间距 */
}
#oneProduct h3 {
  margin-top: 10px;
  text-align: center;
  box-shadow: rgb(255, 255, 255) 5px 5px 15px 5px;
  text-shadow: 2px 2px 4px rgba(222, 222, 0, 0.8);
  margin-bottom: 10px;
}