/*  Author:UED Version:1.0.0
*/
#container { max-width: 750px; margin: 0 auto; }

html { font-size: 50px; }

@media screen and (min-width: 320px) { html { font-size: 42.7px; } }
@media screen and (min-width: 360px) { html { font-size: 48px; } }
@media screen and (min-width: 375px) { html { font-size: 50px; } }
@media screen and (min-width: 414px) { html { font-size: 55.2px; } }
body, button, input, select, textarea { font: 12px/1.5 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", sans-serif; }

h1, h2, h3, h4, h5, h6, b, strong { font-weight: normal; }

button, input, select, textarea { padding: 0; background: none; border: 0; font-size: inherit; -webkit-appearance: none; appearance: none; }

textarea:focus, input:focus, button:focus { outline: 0; }
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color: #999;}

i { font-style: normal; }

a { text-decoration: none; }

img { display: block; }

[v-cloak] { display: none; }
/* 0.5顶边 */
.pop-btn-wrap:before{
    content: '';
    position: absolute;
    left:0;
    top: 0;
    right:0;
    height: 100%;
    background: -webkit-linear-gradient(top, #e5e5e5 60%, transparent 60%) no-repeat left top;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
    z-index: -1;
}
/* icons */
.video-online:before,.s-mod-tit:before,.live-list li .btn-replay:before{content: '';position:absolute;background: url('../images/icons.png') no-repeat 0 0;-webkit-background-size:0.58rem auto;background-size:0.58rem auto;}

.s-header{position: fixed;top: 0;left: 0;right: 0;padding: 0.16rem 0.22rem 0.16rem 1.2rem;background: #fff;z-index: 100;line-height: 1.5;height: 1.1rem;-webkit-box-sizing: border-box;box-sizing: border-box;}
.s-header:before{content:'';position: absolute;left: 0.34rem;top: 50%;width:0.7rem;height:0.64rem;background: url('../images/logo.png') no-repeat 0 0;-webkit-background-size: 2.02rem auto;background-size: 2.02rem auto;margin-top: -0.32rem;}
.app-name{font-size: 0.28rem;font-weight: bold;}
.app-slogan{font-size: 0.2rem;color: #999;}
.download-btn{position: absolute;right: 0.22rem;top: 50%;width:1.54rem;line-height: 0.64rem;border-radius: 0.32rem;color: #fff;background:#286DF7;font-size: 0.28rem;text-align: center;margin-top: -0.32rem;}
.video-wrap{/* position:fixed;top:1.1rem;left: 0;right:0;z-index:100; */height:7.5rem;position: relative;-webkit-transition: all .3s;transition: all .3s;position: absolute;left: 0;top:1.1rem;right: 0;}
.video-wrap > div,.video-wrap > div .bg{height:100%;}
.video-wrap > div img.bg,.video-wrap > div .bg img{height:100%;width: auto;margin:0 auto;}
.video-wrap video{display: block;height:100%;margin:0 auto;}
.s-video{padding-top: 1.1rem;background:#0e0b17;height:8.6rem;position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;}
.s-video.play{height: 90vh;}
.s-video.play .video-wrap{height: 90vh;top: 0;}
.video-inform{position: absolute;left: 0.2rem;top: 0.24rem;background: rgba(0, 0, 0,0.5);padding: 0.08rem 1.6rem 0.08rem 1.0rem;height: 0.8rem;border-radius: 1.0rem;}
.video-inform p{font-size:0.28rem;color: #fff;font-weight: bold;}
.video-inform p small{font-size:0.24rem;font-weight: normal;opacity: 0.6;display: block;}
.video-inform .btn-attention{position: absolute;right: 0.14rem;top: 50%;width:1.14rem;height:0.64rem;font-size:0.32rem;color:#fff;text-align: center;line-height:0.64rem;background:#3A84FD;border-radius: 0.6rem;margin-top: -0.32rem;}
.video-inform img{position: absolute;left: 0.08rem;top: 50%;width:0.8rem;height:0.8rem;border-radius: 50%;margin-top: -0.4rem;}
.video-online{position: absolute;left:0.2rem;bottom:0.3rem;background: rgba(0, 0, 0,0.5);font-size:0.28rem;color: #fff;padding: 0.08rem 0.2rem 0.08rem 0.64rem;border-radius: 0.6rem;}
.video-online:before{left: 0.2rem;top: 50%;width: 0.26rem;height: 0.26rem;margin-top: -0.13rem;}
.btn-play{position: absolute;left: 50%;top: 50%;width:1.2rem;height:1.2rem;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.btn-play:before{content:'';position: absolute;left: 50%;top: 50%;width:1.2rem;height:1.2rem;background: url('../images/play.png') no-repeat 0 0;-webkit-background-size: cover;background-size: cover;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.btn-play:after{content:'';position: absolute;left: 50%;top: 50%;width:1.2rem;height:1.2rem;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);opacity: 1;-webkit-animation: wave 1.2s infinite;animation: wave 1.2s infinite;background:rgba(58,132,253,0.30);border-radius: 50%;z-index:-1;}

@-webkit-keyframes wave{
    0%{width: 1.2rem;height: 1.2rem;opacity: 1;}
    100%{width: 2.0rem;height: 2.0rem;opacity:0;}
}
@-ms-keyframes wave{
    0%{width: 1.2rem;height: 1.2rem;opacity: 1;}
    100%{width: 2.0rem;height: 2.0rem;opacity:0;}
}
@keyframes wave{
    0%{width: 1.2rem;height: 1.2rem;opacity: 1;}
    100%{width: 2.0rem;height: 2.0rem;opacity:0;}
}
.footer{padding:0.48rem 0.22rem 0.2rem 2.52rem;margin-top: 0.4rem;font-size: 0.24rem;position: relative;}
.footer:before{content: '';position:absolute;left:0.32rem;top:50%;background: url('../images/logo.png') no-repeat 0 0;-webkit-background-size: cover;background-size: cover;width: 2.02rem;height:0.64rem;margin-top: -0.32rem;}
.footer-btn{background:#286DF7;position:absolute;right: 0.22rem;top:0.3rem;width:1.54rem;color: #fff;font-size:0.28rem;border-radius: 0.08rem;line-height:0.52rem;text-align: center;}
#share h1{font-size:0.32rem;color:#222;font-weight:bold;padding:0.24rem 0.2rem 0;}
.s-mod{margin-top: 0.2rem;}
.s-mod-tit{font-size: 0.32rem;line-height: 0.8rem;padding: 0 0.3rem 0 1.12rem;position: relative;}
.s-mod-tit:before{content:'';position: absolute;left:0.3rem;top:50%;background-position:0 -0.34rem;width:0.54rem;height:0.38rem;margin-top:-0.19rem;}
.s-mod-tit a{font-size: 0.24rem;color: #999;padding-right: 0.26rem;}
.s-mod-tit a:after{content:'';position: absolute;right:0.3rem;top: 50%;width:0.12rem;height:0.12rem;border-bottom: 1px solid #999;border-right: 1px solid #999;transform:rotate(-45deg);margin-top:-0.08rem;}
.live-list{padding: 0.1rem;overflow:hidden;}
.live-list li{float: left;width: 47.1%;margin: 0 1.4% 0.4rem;position: relative;}
.live-list li .avator{width:100%;height:3.42rem;overflow: hidden;border-radius: 0.12rem;}
.live-list li img{border-radius: 0.12rem;}
.list-tit{font-size:0.32rem;margin:0.16rem 0 0.08rem;padding: 0 0.1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.live-list li p{font-size: 0.24rem;color: #999;padding: 0 0.12rem;}
.live-list li .tips{position:absolute;left:0.16rem;top:0.16rem;font-size: 0.2rem;color: #fff;text-shadow: 0 2px 2px #aaa;}
.live-list li .btn-replay{display: inline-block;background: rgba(0, 0, 0, 0.3);border-radius: 0.08rem;padding: 0.04rem 0.1rem 0.04rem 0.44rem;margin-right: 0.18rem;text-shadow:none;}
.live-list li .btn-replay:before{left:0.1rem;top:50%;width:0.24rem;height:0.2rem;background-position: -0.34rem 0;margin-top: -0.1rem;border-radius: 0.04rem;}
.video-over{position: absolute;left:50%;top:50%;text-align: center;color: #fff;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.video-over .over-tit{font-size: 0.44rem;font-weight: bold;}
.video-wrap .bg:before{content:'';background: rgba(0, 0, 0, 0.5);position: absolute;left: 0;top: 0;right: 0;bottom: 0;}
.video-over .avator{width:1.0rem;height:1.0rem;border-radius: 50%;border:1px solid #fff;margin:0.6rem auto 0.18rem;}
.video-over .over-author{font-size: 0.28rem;margin-bottom: 0.4rem;}
.video-over .over-author small{font-size: 0.24rem;display: block;opacity: 0.6;margin-top: 0.06rem;}
.video-over .btn-block{display:block;width:3.04rem;height:0.64rem;margin:0 auto 0.24rem;line-height: 0.64rem;font-size: 0.28rem;border-radius: 0.12rem;}
.video-over .btn-block.btn-blue-block{background:#3A84FD;color: #fff;}
.video-over .btn-block.btn-gray-block{background:#F5F6F9;color: #222;}
.btn-download{position: absolute;right:0.2rem;bottom:0.3rem;font-size:0.28rem;line-height:0.56rem;height:0.56rem;padding:0 0.24rem;color: #fff;border-radius: 0.4rem;background-image:-webkit-linear-gradient(right, #6CBAFF 0%, #3A84FD 100%);background-image: linear-gradient(270deg, #6CBAFF 0%, #3A84FD 100%);}

.blank{position: relative;text-align: center;padding:6rem 0.3rem 0;}
.blank:before{content:'';position: absolute;left: 50%;top:3.4rem;background: url('../images/blank.png') no-repeat 0 0;width:4rem;height:2.6rem;background-size: cover;margin-left: -2rem;}
.blank p{font-size:0.28rem;color: #999;}
.blank .btn{display:block;width:2.0rem;height:0.68rem;line-height:0.68rem;font-size:0.28rem;color: #fff;border-radius:0.12rem;margin:0.4rem auto;background: #286DF7;}