.pagePro .container .proList .item {
  border: 1px solid rgba(216, 175, 95, 0.2);
  background: #2E2E2E;
}
.pagePro .container .proList .item .img {
  aspect-ratio: 393/330;
  text-align: center;
  padding: 20px;
}
.pagePro .container .proList .item .text {
  position: relative;
  padding: 25px 20px;
  text-align: center;
}
.pagePro .container .proList .item .text::after {
  position: absolute;
  content: '';
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
  background: linear-gradient(90deg, #0000 0%, rgba(216, 175, 95, 0.5) 50%, #0000 100%);
}
.pagePro .container .proList .item .text .name {
  font-size: 18px;
  color: var(--deputy-color);
}
.pagePro .container .proList .item .text .desc {
  margin-top: 12px;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-family: Montserrat-Light;
}
.pagePro .container .proList .item:hover .img img {
  transform: scale(1.08);
}
.pagePro .container .proList .item:hover .text {
  background: var(--active-color);
}
.pagePro .container .proList .item:hover .text .name {
  color: #320F00;
}
.pagePro .container .proList .item:hover .text .desc {
  color: rgba(50, 15, 3, 0.6);
}
@media screen and (max-width: 1024px) {
  .pagePro .container .proList {
    gap: calc(var(--w-padding)/2);
  }
  .pagePro .container .proList .item .text,
  .pagePro .container .proList .item .img {
    padding: calc(var(--w-padding)/2);
  }
}
@media screen and (max-width: 480px) {
  .pagePro .container .proList .item .img {
    padding: 10px;
  }
  .pagePro .container .proList .item .text {
    padding: 10px;
  }
  .pagePro .container .proList .item .text .name {
    font-size: 15px;
  }
  .pagePro .container .proList .item .text .desc {
    display: none;
  }
}