@import "init.css";

.container {
   width: 1230px;
   margin: 0 auto;
}

/*列表*/
.list-container {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 26px;
   padding: 20px 0;
   width: 100%;
}

.list-item {
   position: relative;
   overflow: hidden;
   display: block;
   text-decoration: none;
   border-top: 1px solid #a09d9c;
   padding-top: 20px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
}

.list-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(80%);
   /* 图片变暗10% */
   transition: all 0.5s;
}

.list-item:hover img {
   filter: brightness(100%);
   /* 悬停时恢复正常亮度 */
   scale: 1.1;
}

.list-info {
   color: white;
   display: flex;
   margin-bottom: 58px;
}

.list-info i {
   font-size: 18px;
}

.list-info .casename {
   font-size: 17px;
   margin-top: 22px;
   color: #fff;
   max-height: 50px;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.5;
}

.cover {
   position: relative;
   aspect-ratio: 1 / 1;
   overflow: hidden;
}

.cover .text1 {
   position: absolute;
   font-size: 12px;
   color: #fff;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.cover .text1::after {
   content: "";
   display: block;
   width: 100%;
   height: 1px;
   background-color: #fff;
   margin-top: 2px;
}

.filter-container {
   display: flex;
   gap: 10px;
   margin: 0 auto 5px;
   width: 100%;
   flex-wrap: wrap;
}

.filter-item {
   border: 1px solid #bcb09d;
   border-radius: 50px;
   height: 29px;
   line-height: 29px;
   padding: 0 18px;
   color: #948885;
   cursor: pointer;
   font-size: 13px;
   transition: all 0.4s;
}

.filter-item.on,
.filter-container a:hover {
   background-color: #bcb09d;
   color: #fff;
}

.view-more {
   display: flex;
   align-items: center;
   cursor: pointer;
   justify-content: space-between;
   font-size: 12px;
   margin-top: auto;
}

.view-more .view-text {
   font-size: 12px;
   color: #948885;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   text-align: right;
}


.viewall-btn {
   display: block;
   width: 240px;
   height: 52px;
   line-height: 52px;
   border-radius: 52px;
   background-color: #bcb09d;
   color: #fff;
   font-size: 16px;
   text-align: center;
   margin: 116px auto 109px;
   transition: background-color 0.4s;
}

.viewall-btn a:hover {
   text-decoration: underline;
}

.iconfont.icon-download {
   margin-right: 3px;
}

/* 响应式布局 */
@media (max-width: 1280px) {
   .container {
      width: 87.2%;
   }

   .list-container {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media (max-width: 960px) {

   .container {
      width: 87.2%;
   }

   .list-container {
      padding: 0.1rem 0 0;
      grid-row-gap: 0.17rem;
      grid-column-gap: 0.22rem;

   }

   .list-item {
      padding-top: 0.29rem;
   }

   .list-info {
      margin-bottom: 0.58rem;
   }

   .list-info .casename {
      font-size: 0.27rem;
      line-height: 1.3;
      margin-top: 0.24rem;
      /*max-height: 0.72rem;*/
      max-height: fit-content;
   }

   .list-info .catename {
      font-size: 0.42rem;
      line-height: 0.42rem;
   }

   .year {
      font-size: 0.21rem;
      line-height: 0.21rem;

   }

   .filter-container {
      margin: 0.9rem auto 0px;
      gap: 0rem;

   }

   .filter-item {
      border: 1px solid #bcb09d;
      border-radius: 50px;
      height: 0.45rem;
      line-height: 0.45rem;
      padding: 0 18px;
      color: #948885;
      cursor: pointer;
      font-size: 0.21rem;
      transition: all 0.4s;
      margin: 0 0.08rem 0.19rem 0;
   }

   .viewall-btn {
      display: block;
      width: 100%;
      height: 0.94rem;
      line-height: 0.94rem;
      border-radius: 52px;
      background-color: #bcb09d;
      color: #fff;
      font-size: 0.29rem;
      text-align: center;
      margin: 1.28rem auto 1.28rem;

   }
}