.ProductBox {
     background: #F5F5F5;
 }




 /* 列表 */
 .NyProList {
     width: 100%;
     margin-bottom: 30px;
     display: grid;
     align-items: stretch;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 40px 30px;
     min-height: 300px;
 }

 .NyProList .item {
     width: 100%;
     overflow: hidden;
     border-top: 6px solid var(--color);
 }


 .NyProList .item .img {
     width: 100%;
     border: 1px solid #CCCCCC;
     position: relative;
     margin: 0 auto;
 }

 .NyProList .item .img span {
     position: absolute;
     z-index: 2;
     inset: 0;
     width: 100%;
     height: 100%;
     background: rgba(41, 41, 41, 0.59);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     line-height: 1;
     color: #FFFFFF;
     opacity: 0;
     transition: 0.5s;
 }

 .NyProList .item:hover .img span {
     opacity: 1;
 }

 .NyProList .item .img .cp {
     position: relative;
     z-index: 1;
     width: 100%;
 }

 .NyProList .item .text {
     height: 72px;
     padding: 0 30px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .NyProList .item .text h1 {
     font-weight: 700;
     font-size: 20px;
     line-height: 1.5;
     text-align: center;
     color: #4D4D4D;
 }


 @media (max-width: 1440px) {
     .NyProList .item .text h1 {
         font-size: 18px;
     }
 }

 @media (max-width: 1200px) {}


 @media (max-width:1000px) {
     .NyProList {
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 15px;
     }

     .NyProList .item .text {
         padding: 0 20px;
     }
 }

 @media (max-width: 720px) {
     .NyProList .item .text {
         padding: 10px 20px;
         height: auto;
     }

     .NyProList .item .text h1 {
         font-size: 16px;
     }
 }

 @media (max-width: 380px) {
     .NyProList {
         grid-template-columns: repeat(1, 1fr);
     }
 }