@import "init.css";

body {
   background-color: #fff;
   color: #332d2b;
}

.container {
   width: 64%;
   margin: 100px auto 0;
}

.breadcrumb {
   border-bottom: 1.5px #666 solid;
   line-height: 1.8;
}

.breadcrumb-item.on {
    color: #000;
}

/*文章标题*/
.titlesection {
   position: relative;
   overflow: hidden;
   display: block;
   text-decoration: none;
   width: 100%;
   border-bottom: 1px #888 solid;
}

.articletitle {
   color: white;
   display: flex;
   margin-bottom: 50px;
}

.articletitle .title {
   font-size: clamp(40px, 3vw, 60px);
   color: #332d2b;
   width: 65%;
   line-height: 1.2;
   font-weight: 400;
}

.articletitle .time {
   font-size: clamp(40px, 3.5vw, 60px);
   line-height: 0.8;
   color: #948885;
   width: 35%;
   text-align: right;
}

.articletitle .time .year {
   font-size: clamp(22px, 2vw, 27px);
   line-height: 1;
   margin-top: 16px;
}

.subtitle-text {
   font-size: 19px;
   color: #948885;
   margin-bottom: 20px;
}

/*文章详情*/
.detailtext {
   font-size:14px;
   width: 100%;
   padding: 107px 0 160px 10%;
}

/*更多列表*/
.line {
   width: 100%;
   height: 1px;
   background-color: #888;
}

.more {
   width: 64%;
   padding: 110px 0 185px;
   margin: 0 auto;
}

.moretitle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 24px;
}

.moretitle .text1 {
   font-size: clamp(34px, 2.5vw, 40px);
   color: #332d2b;
}

.swiperbtn {
   position: relative;
   width: 86px;
   height: 36px;
}

.brandswiper-prevbutton {
   width: 36px !important;
   height: 36px !important;
   left: 0px !important;
   top: 0% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background: url("../images/prev-blacks.png") no-repeat;
}

.brandswiper-nextbutton {
   width: 36px !important;
   height: 36px !important;
   right: 0 !important;
   top: 0% !important;
   color: white !important;
   position: absolute;
   margin-top: 0 !important;
   z-index: 20;
   cursor: pointer;
   background: url("../images/next-blacks.png") no-repeat;
}

.swiper-slide:hover .name {
   text-decoration: underline;

}

.slide-content img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(80%);
   /* 图片变暗10% */
   transition: all 0.5s;
}

.slide-content:hover img {
   filter: brightness(100%);
   /* 悬停时恢复正常亮度 */
   scale: 1.1;
}

.list-info {
   display: flex;
   margin-bottom: 50px;
   border-top: 1px solid #111111;
   padding-top: 20px;
}

.list-info .name {
   font-size: clamp(18px, 1.5vw, 22px);
   color: #111111;
   width: 80%;
   padding-right: 7%;
   max-height: 130px;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 1.4;
}

.list-info .date {
   font-size: clamp(28px, 2vw, 42px);
   line-height: 1;
   color: #948885;
   width: 20%;
   text-align: right;
}

.cover {
   aspect-ratio: 1.42 / 1;
   overflow: hidden;
   margin-top: 10px;
}

.year {
   font-size: clamp(14px, 1vw, 18px);
   line-height: 1;
   margin-top: 10px;
}

.view-more {
   display: flex;
   align-items: center;
   cursor: pointer;
   justify-content: space-between;
}

.view-more .view-text {
   font-size: 12px;
   color: #948885;
}


/* 响应式布局 */
@media (max-width: 1280px) {

   .container {
      width: 87.2%;

   }

   .more {
      width: 87.2%;
   }

   .list-container {
      grid-template-columns: repeat(2, 1fr);
   }

}

@media (max-width: 960px) {
   .container {
      width: 87.2%;
      min-width: 87.2%;
      margin-top: 0.87rem;
   }

   .articletitle {
      flex-direction: column;
      justify-content: flex-end;
      margin-bottom: 0.2rem;
   }

   .articletitle .title {
      font-size: 0.5rem;
      width: 100%;
   }

   .articletitle .time {
      font-size: 0.475rem;
      line-height: 1;
      color: #948885;
      width: 100%;
      text-align: right;
   }

   .articletitle .time .year {
      font-size: 0.23rem;
      line-height: 1;
      margin-top: 0.05rem;
   }

   .subtitle-text {
      font-size: 0.25rem;
      margin-bottom: 0.21rem;
      position: absolute;
      bottom: 0;
   }

   .detailtext {
      width: 100%;
      padding: 1.18rem 0 1.5rem 10%;
   }

   .more {
      width: 100%;
      min-width: 100%;
      padding: 1.08rem 0 1.45rem 6.4%;
   }

   .list-info {
      margin-bottom: 0.65rem;
      border-top: 0;
   }

   .moretitle {
      margin-bottom: 0.4rem;
   }

   .moretitle .text1 {
      font-size: 0.42rem;
   }

   .cover {
      aspect-ratio: 1.9 / 1;
   }

   .swiperbtn {
      width: 1.24rem;
      height: 0.52rem;
      margin-right: 6.4%;
   }

   .brandswiper-prevbutton,
   .brandswiper-nextbutton {
      width: 0.52rem !important;
      height: 0.52rem !important;
      background-size: 0.52rem !important;
   }

   .list-info .name {
      font-size: 0.31rem;
   }

   .list-info .date {
      font-size: 0.34rem;
   }

   .year {
      font-size: 0.16rem;
      margin-top: 2px;
   }


}