/* 默认隐藏两个元素，防止样式闪烁或意外显示 */
.pc-post-main,
.mobile-post-main {
    display: none;
}

/* 媒体查询：PC 端样式 (视口宽度大于 768px 时生效) */
@media screen and (min-width: 768px) {
    .pc-post-main {
        display: block; /* 仅在 PC 端显示此内容 */
margin:40px  0;
    }
    .pc-main-box{
      max-width:1028px;
         margin:0 auto;
    }
}

/* 媒体查询：移动端样式 (视口宽度小于或等于 767px 时生效) */
@media screen and (max-width: 767px) {
    .mobile-post-main {
        display: block; /* 仅在移动端显示此内容 */
    }
}
/* 顶部导航 影评---》帖子切换 */
.top-nav .top-nav-list{
    display:flex;
  justify-content: center;
    align-items:center;
}
.top-nav .top-nav-list li a{
  display: flex;
width:288px;
height:40px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 6px;
color:  #7C7C7C;
text-align: center;

/* 18 */
font-family: "PingFang SC";
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 133.333% */
}
.top-nav .top-nav-list .active a{
background: #FEBD2B;
color: #292929;

}
/* 二级导航 最新最热过滤 */
.top-sub-nav-box{
  margin:36px 0;
}
.top-sub-nav-box ul{
   display:flex;
    align-items:center;
    border-bottom: 1px solid  rgba(255, 255, 255, 0.10);
}
.top-sub-nav-box li a{
 display: flex;
height: 44px;
align-items: center;
flex-direction:column;
justify-content:center;
gap:  28px;
margin-right:28px;
color:  #7C7C7C;
text-align: center;

/* Regular */
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
}
.top-sub-nav-box .active a{
  color: #FFF;
  position:relative;
  
}
.top-sub-nav-box .active a::after{
  content:'';
  display:block;
  width: 16px;
height: 4px;
 position: absolute;
left: 50%;
transform: translate(-50%);
bottom: 0;
border-radius:  3px  3px 0 0;
background:  #FEBD2B;
  
}
/* 主体内容样式 */
.post-list>li{
margin-bottom:36px;
 cursor: pointer; 
}
.post-list>li{
  display:flex;

}
.post-list li .user-avatar{
  width: 40px;
height: 40px;
flex-shrink: 0;
border-radius:50%;
margin-right:12px;
padding:0 !important;
}
.user-name{
  display:flex;
  justify-content:space-between;
}
.user-name h2{
  color:  #BDBDBD;

/* Medium */
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 137.5% */
}
.user-name a{
  color:  #FFF;

/* Regular */
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
cursor: pointer; /* 当鼠标悬停在 .link-box 上时，显示手型图标 */
font-weight: 400;
line-height: 18px; /* 150% */
}
.create-time, .last-updated{
  color: #7C7C7C;
/* Regular */
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
}
.post-title-box{
  display:flex;
margin:10px 0 ;

}
.post-title-box mark{
  border-radius: 1.778px;
background:  #FEBD2B;
display: flex;
padding: 1.778px 5.333px;
justify-content: center;
align-items: center;
gap: 8.889px;
margin-left:10px;
}
.post-title{
  overflow: hidden;
color:  #BDBDBD;
text-overflow: ellipsis;

/* Medium */
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 22px; /* 137.5% */
}
.post-desc{
  overflow: hidden;
color:#7C7C7C;
text-overflow: ellipsis;

/* Regular */
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 137.5% */
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
align-self: stretch;
}
/* 主体封面列表 */
.post-cover-list{
  margin:10px 0;
  display:flex;
}
.item-box{
  width: 230px;
height: 129.375px;
position:relative;
margin-right:11.25px;

}

.video-cover{
  width:100%;
  height:100%;
  
}
.video-cover-box {
    /* 针对 index 为 0 的样式 */
    background-color: lightblue; /* 示例背景色 */
}

.video-cover-box::before {
    content: ""; /* 伪元素内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 覆盖整个 li */
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.30); /* 设置为 RGBA 颜色 */
    z-index: 1; /* 确保在图像上层 */
}
.play-icon{
  width: 24px;
height: 24px;
position: absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
z-index:2;
}
.item-box{
  display:flex;
}
.item-box img{
  max-width:100%;
  height:100%;
  flex-shrink:0;
  margin-right:12px;
}
.post-item-numb{
  display:flex;
  align-items:center;
}
.post-item-numb li{
   display:flex;
  align-items:center;
  justify-content:center;
  color:  #7C7C7C;
margin-right:30px;
/* Regular */
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 18px; /* 150% */
}
.post-item-numb li img{
  width: 20px;
height: 20px;
margin-right:4px;
}