@charset "utf-8";
/* ==========================================================================
   移动端「直播回放 / 图文直播」模板
   设计稿宽度 750px，1rem = 100px（375 屏时 1rem = 50px）
   主色：#d40300  头部：#ae0300  底色：#f2f3f5
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:13.3333vw;-webkit-text-size-adjust:100%;}
@media (min-width:750px){html{font-size:100px;}}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Helvetica,Arial,sans-serif;
  font-size:.28rem;line-height:1.6;color:#333;background:#e9eaec;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img,video{display:block;width: 143px;}
em,i{font-style:normal;}
.page{max-width:750px;margin:0 auto;min-height:100vh;background:#f2f3f5;overflow-x:hidden;}

/* ============================ 头部 ============================ */
.hd{
    background: #ae0300 url(https://3g.china.com/static/img/header_bg.jpg) no-repeat 50% 0;
    background-size: cover;
}
.hd-top{height:1rem;display:flex;align-items:center;padding:0 .27rem;}
.logo{font-size:.44rem;font-weight:700;letter-spacing:.04em;color:#fff;}
.logo em{color:#ffcdc9;}
.nav-btn{margin-left:auto;width:.5rem;height:.5rem;display:flex;flex-direction:column;justify-content:center;gap:.1rem;}
.nav-btn i{display:block;height:.04rem;border-radius:.02rem;background:#fff;}
.hd-nav{display:flex;align-items:center;justify-content:space-between;height:.74rem;padding:0 .27rem;font-size:.3rem;}
.hd-nav a{position:relative;color:rgba(255,255,255,.88);}
.hd-nav a.on{font-weight:600;color:#fff;}
.hd-nav a.on::after{
  content:"";position:absolute;left:50%;bottom:-.16rem;width:.3rem;height:.06rem;
  margin-left:-.15rem;border-radius:.03rem;background:#fff;
}

/* ============================ 视频区 ============================ */
.live-video{position:relative;overflow:hidden;aspect-ratio:16/9;background:#000;}
.live-video video{width:100%;height:100%;object-fit:contain;background:#000;}
.live-video .v-state{
  position:absolute;z-index:5;top:.22rem;left:.22rem;
  display:none;align-items:center;gap:.1rem;
  padding:.1rem .18rem;border-radius:.24rem;
  font-size:.22rem;line-height:1;color:#fff;background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.live-video .v-state[data-state="live"]{display:flex;background:#d40300;}
.live-video .v-state[data-state="end"]{display:none;padding-left:.2rem;}
.live-video[data-status="end"] .v-state[data-state="live"]{display:none;}
.live-video[data-status="end"] .v-state[data-state="end"]{display:none;}
/* 直播结束封面：结束态整幅显示，盖住视频最后一帧 */
/* 等待直播封面：未开播/未起播时整幅盖住视频区，开播后消失 */
.wait-cover{display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:6;background:#000;}
.wait-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.live-video[data-status="live"]:not(.live-started) .wait-cover{display:block;}
.live-video[data-status="live"]:not(.live-started) .v-state[data-state="live"]{display:none;}
.end-cover{display:none;position:absolute;left:0;top:0;width:100%;height:100%;z-index:6;}
.end-cover img{display:block;width:100%;height:100%;object-fit:cover;}
.live-video[data-status="end"] .end-cover{display:block;}
.live-video[data-status="end"] video{visibility:hidden;}
.live-video[data-status="end"] .unmute-btn{display:none !important;}
.v-state em{width:.12rem;height:.12rem;border-radius:50%;background:#fff;animation:blink 1.2s infinite;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
/* 开始播放后隐藏状态角标（等待直播/直播中/回放） */
.live-video.playing .v-state{display:none !important;opacity:0;transition:opacity .2s;}

/* 静音自动播放时的「开启声音」按钮 */
.unmute-btn{
  position:absolute;z-index:7;top:.22rem;right:.22rem;display:none;
  padding:.1rem .2rem;border:0;border-radius:.24rem;
  font-size:.22rem;line-height:1.2;color:#fff;background:rgba(0,0,0,.6);cursor:pointer;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.unmute-btn.show{display:block;}

/* 播放遮罩 */
.play-mask{
  position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.05),rgba(0,0,0,.45));
  transition:opacity .25s;cursor:pointer;
}
.play-mask.hide{opacity:0;pointer-events:none;}
.play-btn{
  display:flex;align-items:center;justify-content:center;
  width:.92rem;height:.92rem;border:1px solid rgba(255,255,255,.9);border-radius:50%;
  background:rgba(0,0,0,.25);
}
.play-btn svg{width:.34rem;height:.34rem;margin-left:.05rem;fill:#fff;}

/* ============================ 在线/点赞 ============================ */
.audience{
  display:flex;align-items:center;justify-content:flex-end;gap:.4rem;
  padding:.18rem .3rem;background:#fff;font-size:.22rem;color:#9aa0a6;
}
.audience span,.audience button{display:flex;align-items:center;}
.audience svg{width:.28rem;height:.28rem;margin-right:.08rem;fill:#b6bbc1;}
.audience b{font-weight:400;color:#7b8189;}
.like{border:0;background:none;font:inherit;color:inherit;cursor:pointer;}
.like.on svg{fill:#d40300;}
.like.on b{color:#d40300;}

/* ============================ 标题信息 ============================ */
.art-head{margin-top:.2rem;padding:.3rem .3rem .32rem;background:#fff;}
.art-title{position:relative;padding-left:.3rem;font-size:.44rem;line-height:.66rem;font-weight:700;color:#d40300;}
.art-title::before{
  content:"";position:absolute;left:0;top:.08rem;width:.06rem;height:.5rem;
  border-radius:.03rem;background:#d40300;
}
.art-time{margin-top:.2rem;font-size:.3rem;color:#222;}
.art-desc{margin-top:.18rem;font-size:.28rem;line-height:.5rem;color:#555;}
.art-desc:empty{display:none;}

/* ============================ 栏目标题 ============================ */
.sec-hd{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:.2rem;padding:.28rem .3rem .22rem;background:#fff;
  border-bottom:1px solid #eceded;
}
.sec-hd h2{position:relative;padding-left:.26rem;font-size:.32rem;font-weight:700;color:#d40300;}
.sec-hd h2::before{
  content:"";position:absolute;left:0;top:50%;margin-top:-.15rem;
  width:.08rem;height:.3rem;border-radius:.04rem;background:#d40300;
}
.sec-tip{font-size:.22rem;color:#9aa0a6;}

/* ============================ 图文直播列表 ============================ */
.live-list{background:#fff;}
.live-item{padding:.3rem .3rem .34rem;border-bottom:1px solid #f2f3f5;}
.live-item:last-child{border-bottom:0;}
.li-meta{display:flex;align-items:center;gap:.12rem;font-size:.22rem;color:#9aa0a6;}
.li-dot{
  width:.12rem;height:.12rem;border-radius:50%;background:#d40300;
  box-shadow:0 0 0 .06rem rgba(212,3,0,.12);
}
.live-item.is-new .li-meta{color:#d40300;}
.li-title{margin-top:.14rem;font-size:.3rem;line-height:.44rem;font-weight:700;color:#1a1a1a;}
.li-title:empty{display:none;}
.li-body{margin-top:.12rem;font-size:.3rem;line-height:.52rem;color:#333;}
.li-body p+p{margin-top:.16rem;}
.li-body strong{font-weight:600;color:#d40300;}
.li-body img{margin-top:.18rem;width:100%;border-radius:.08rem;background:#f2f3f5;}

/* 列表内嵌视频 */
.li-video{position:relative;margin-top:.18rem;overflow:hidden;aspect-ratio:16/9;border-radius:.08rem;background:#000;}
.li-video video{width:100%;height:100%;object-fit:contain;}
.li-video .play-btn{position:absolute;left:50%;top:50%;width:.72rem;height:.72rem;margin:-.36rem 0 0 -.36rem;}
.li-video .play-btn svg{width:.26rem;height:.26rem;}

/* ============================ 视频错误提示 ============================ */
.video-tip{
  position:absolute;inset:0;z-index:6;display:none;
  align-items:center;justify-content:center;text-align:center;
  padding:0 .6rem;font-size:.26rem;line-height:.46rem;color:#fff;
  background:rgba(0,0,0,.72);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.video-tip.show{display:flex;}

/* ============================ 尾部 ============================ */
.editor{padding:.26rem .3rem .34rem;font-size:.24rem;color:#9aa0a6;background:#fff;}
.ft{padding:.3rem .3rem .5rem;text-align:center;font-size:.22rem;line-height:.42rem;color:#b0b4b9;}