/* 列表 */
   .ProductBox {
       background: #F3F4F8;
   }

   .NyProBox {
       width: 100%;
   }


   .NyProList {
       margin-bottom: 30px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       grid-gap: 90px 60px;
   }


   .NyProList .item {
       position: relative;
   }

   .NyProList .item::after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       display: block;
       width: 0%;
       height: 5px;
       background: var(--color);
       transition: 2s;
   }

   .NyProList .item:hover::after {
       width: 100%;
   }

   .NyProList .item .text {
       padding-bottom: 30px;
       display: flex;
       justify-content: space-between;
   }


   .NyProList .item .text h1 {
       font-weight: 500;
       font-size: 20px;
       line-height: 1;
       color: #565656;
       position: relative;
       padding-left: 30px;
       transition: 0.5s;
       overflow: hidden;
       display: -webkit-box;
       -webkit-box-orient: vertical;
       -webkit-line-clamp: 1;
   }

   .NyProList .item:hover .text h1 {
       color: var(--color);
   }

   .NyProList .item .text h1::after {
       content: "";
       display: block;
       width: 5px;
       height: 6px;
       background: #565656;
       position: absolute;
       left: 0;
       top: calc(50% - 3px);
       transition: 0.5s;
   }

   .NyProList .item:hover .text h1::after {
       background: var(--color);
   }

   .NyProList .item .text img {
       opacity: 0;
       transition: 0.5s;
   }

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


   @media (max-width: 1200px) {
       .NyProList {
           grid-gap: 75px 45px;
       }
   }

   @media (max-width: 720px) {
       .NyProList {
           grid-template-columns: 1fr;
           grid-gap: 30px;
       }

       .NyProList .item::after {
           height: 3px;
       }

       .NyProList .item .text h1 {
           padding-left: 20px;
       }

   }

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



   /* 放大 */
   .bigimg {
       width: auto !important;
       height: auto !important;
       max-width: 70vw !important;
       max-height: 70vh !important;
       position: fixed;
       left: 0;
       top: 0;
       right: 0;
       bottom: 0;
       margin: auto;
       display: none;
       z-index: 9999;
       border: 20px solid #fff;
       object-fit: contain;
   }

   .mask {
       position: fixed;
       left: 0;
       top: 0;
       right: 0;
       bottom: 0;
       background-color: #000000cc;
       z-index: 9998;
       transition: all 1s;
       display: none
   }

   .mask img {
       width: 50px;
       height: 50px;
       background: #fff;
       padding: 15px;
       border-radius: 50%;
       position: fixed;
       bottom: 5vh;
       left: calc(50% - 25px);
   }

   @media (max-width: 640px) {
       .mask img {
           bottom: 10vh;
       }
   }