#my-video {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 2rem);
}
body{
	background-color: #f6f6f6;
}

.video-box .vjs-big-play-button {
    top: 50%;
    left: 50%;
    margin-top: -0.92666em;
    margin-left: -1.5em;
}

.video-info{
	padding: .24rem .36rem;
	font-size: .32rem;
    background-color: #f6f6f6;
}

.video-title h2{
	margin-bottom: .2rem;
	line-height: .56rem;
	font-size: .38rem;
	font-weight: 500;
	color: #3a3a3a;
}

.eee{
	color: #a6a6a6;
}

.eee img{
    width: .36rem;
    height: .36rem;
    vertical-align: bottom;
    border-radius: 50%;
    margin-right: .1rem;
}

.right-c{
	color: #a6a6a6;
	font-size:.28rem;
}

.right-c span{
    margin-right: .08rem;
}

.video-desc{
	color: #3a3a3a;
	font-size: .28rem;
	line-height: .48rem; 
	margin-top: .26rem;
}

.video-desc p{
	margin-bottom: .4rem;
}

.other-video{
	padding: .48rem .36rem;
}
/**
 * 图片样式
 * 顶部图片
 * 
 */

.video-list .top-list-box:nth-child(2n){
   margin-right: 0;
}

.top-img img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: .08rem
}

.top-list-box{
	margin-bottom: .36rem;
	width: calc(50vw - .48rem);
    margin-right: .24rem;
}

 

.top-info  {
    height: .34rem;
    line-height: .34rem;
    color: #a6a6a6;
    font-size: .24rem;
}

.top-info i {
    display: inline-block;
    margin: 0 5px;
    width: 3px;
    height: 3px;
    vertical-align: middle;
    background-color: #999;
    border-radius: 50%;
    overflow: hidden;
}

.top-ds {
    display: block;
    margin-top: .12rem;
    margin-bottom: .16rem;
    font-size: .28rem;
    line-height: .44rem;
    font-weight: 700;
    color: #3a3a3a; 
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
      -webkit-line-clamp: 2
}
body,
.video-info {
    background: #fff;
}

.video-box {
    z-index: 999;
}

.eee .title,
.right-c {
    color: #666;
}

.video-info {
    padding: .3rem .4rem;
}

.video-title h2 {
    font-size: .4rem;
	color:#000;
}

.video-desc {
    margin-top: .36rem;
    padding: 0;
}

.video-desc p {
    font-size: .32rem;
    line-height: .5rem;
    color: #333;
}

.newcomment .line-title,
.other-video .line-title{
	font-size:.34rem
}

.newcomment {
    padding: 0 .4rem;
}

.appgo {
    background: #f9f9f9;
    font-size: .28rem;
    text-align: center;
    height: 0.8rem;
    line-height: .8rem;
    margin: 0.4rem auto .9rem;
    width: 5rem;
    box-shadow: 5px 5px 10px 0px rgb(0 0 0 / 7%);
}

.newcomment .content-box .user-img img {
    width: .5rem;
    height: .5rem;
}

.user-name,
.user-zan {
    line-height: .5rem;
}

.recomment a,
.comment-time {
    color: #999;
    font-size: .22rem;
}

.user-zan {
    margin-top: .05rem;
    font-size: .3rem;
}

.content-text {
    margin: .12rem 0 .2rem;
    line-height: .4rem;
}

.hot-content {
    margin-bottom: .2rem;
}

.top-img img {
    border-radius: 0;
}

.top-img {
    position: relative;
}

.video-time {
    background: rgba(0, 0, 0, 0.5);
    height: .3rem;
    line-height: .3rem;
    position: absolute;
    bottom: .12rem;
    right: .2rem;
    border-radius: .3rem;
    font-size: .24rem;
    color: #fff;
    padding: 0 .02rem 0 .05rem;
}

.video-time span {
    -webkit-text-size-adjust: none;
}

.video-time i {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAANlBMVEUAAAD////////////////////////////////////////////////////////////////////xY8b8AAAAEXRSTlMAAQcQHS1BWXOMpr7S4u/4/tUoZXsAAAB1SURBVEjH7ZQ5EoAwEMPCfR/+/2cpIVDEGjqIe81klV2HkPPTjBUEtLQQ0D6UDJDmBgLa+oIB0lRDQGsHAckUfAKm4AvgCVYUQ3AMGIJ1T0rwA0gJfg/AJ9GhoVb6cXQ14PLR9YYHRE8UlgCtGVpkuCpzPpoDkO0Smddno4sAAAAASUVORK5CYII=) no-repeat;
    display: inline-block;
    float: left;
    width: 0.3rem;
    height: 0.3rem;
    background-size: 100%;
    vertical-align: text-top;
}

.video-time span {
    transform: scale(0.8);
    line-height: .33rem;
    float: left;
    transform-origin: center left;
}

.top-dis {
    display: block;
    margin-top: 0.12rem;
    margin-bottom: 0.16rem;
}

.top-dis a {
    font-size: .28rem;
    color: #999;
    font-weight: normal;
    margin-top: .24rem;
    line-height: .36rem;
}

.hot-content img {
    max-width: 2rem;
    margin: 0 auto;
    display: flex;
}

@media (min-width: 768px) {
    .video-box {
        width: 100%;
        min-width: 320px;
        max-width: 640px;
    }
    .top-list-box {
        width: calc(50% - .24rem);
    }
    .video-list .weui-flex {
        width: calc(100% + .24rem);
    }
}