@charset "utf-8";
/* 直播�?*/
/* 视频区域 */
.playVideoBox{position: relative;}
.playVideoBox .tips{
    text-align:center;
    color:#fff;
    width:100%;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
.playVideoBox .tips .van-button--danger{
    border-radius:15px;
    padding-left:15px;
    padding-right:15px;
}
.playVideo .tips p{
    padding:15px 0;
}
.liveBox{
    min-height:200px;
    margin:15px;
    background:url(../images/vedio_bg.jpg);
    background-size:cover
}
.liveBox video{
    width:100%;
}
.liveList .van-hairline--top-bottom::after{
    border:none;
}
.liveList .van-tabs__line{
    width:40px!important;
  
}
.liveList .van-tabs__content{
    border-top:10px solid #f3f5f8;
}
.liveList .van-tab--active{
    color:#3377ff;
}
.liveList .van-tabs__line{
    background:#3377ff;
    bottom:0;
}
.playVideoList .van-tab:active{
	background: #e5e5e5;
	height: 44px;
}
.chooseLive{
    padding:20px;
    display:flex;
    flex-wrap: wrap;
}
.chooseLive li{
    font-size:12px;
    padding:10px;
    border:1px solid #ddd;
    border-radius: 4px;
    margin:0 10px 10px 0;
}
.chooseLive .selected{
    border-color:#4488ff;
    color:#4488ff;
}
/* 精彩回放 */
.liveList .con .van-cell__title{
    font-size:12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.liveList .van-steps .van-icon{
    font-size:16px;
    padding-top:3px;
}
.liveList .van-steps .van-cell{
    padding:0 5px;
}
.liveList .van-steps--vertical{
    padding:0 0 0 92px;
}
.liveList .van-steps__items{
    position: relative;
}
.liveList time{
    position: absolute;
    left:-80px;
    top:13px;
    z-index: 999;
    font-size:10px;
}
.liveList time span{
    font-size:16px;
}
.liveList .van-step--vertical .van-step__circle{
    top:22px;
    background:none;
    border:1px solid #999;
    border-radius: 100%;
}
.liveList .van-step--vertical .van-step__line{
    background:none;
    border-left:1px dotted #e5e5e5
}
/* .live{
    position: fixed;
    top:0;
    width:100%;
} */
.liveList .van-tabs__content{
    /* height:calc(100vh - 340px); */
    overflow-y: scroll;
}
/* 直播*/
.liveList .orderNumber{
    padding:15px;
}
.liveList section .courseCon .desc{
    padding-top:15px;
}
.liveList .stateBtn{
    padding:0 8px;
    border-radius:15px;
    border:1px solid #4488ff;
    flex-direction: row;
    height:26px;
    align-items: center;
    margin-top:10px;
    font-size:10px;
}
.liveList .stateBtn1{
    background:#4488ff;
    color:#fff;
}
.liveList .stateBtn1 img{
    width:12px;
}
.liveList .stateBtn2{
    border-color:#999;
    color:#999;
}
.liveList .stateBtn3{
    color:#4488ff;
}
/* 定制直播 */
.dingZhi{
    /* height:calc(100vh - 350px); */
    background:#f3f5f8;
    padding:10px 15px;
}
.dingZhi .van-button{
    margin-top:15px;
}



/* 视频播放页playVideo */
.playVideo{
    padding-bottom:50px;
}
.playVideo .liveBox{
   margin:0 
}
.chooseCourse .van-cell__title span{
    border-left:3px solid #4488ff;
    padding-left:8px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    width: 80%;
    line-height: 1em;
    vertical-align: middle;
}
.coursepopup{
    padding-bottom:50px;
    max-height:max-content;
    overflow-y:visible;
}
.coursepopup h3{
    padding:15px;
    text-align:center;
    border-bottom:1px solid #e5e5e5;
}
.coursepopup  .van-submit-bar__bar{
    border-top:1px solid #e5e5e5;
}
.coursepopup  .van-submit-bar__price{
    padding-left:15px;
    text-align: left;
    font-size:24px;
}
.playVideo .van-tabs__nav--line{
    border-bottom:1px solid #e5e5e5;
}
.playVideo .van-tabs__content{
    border-top:none;
}
.playVideo .van-tabs__line{
    background:none;
    width:0!important;
    height:0;
    border-width:0 8px 8px;
    border-style:solid;
    border-color:transparent transparent #ddd;
    margin:51px auto;
    position:relative;
    z-index: 999;
    bottom:14px;
}
.playVideo .van-tabs__line::after{
    display: block;
    content:'';
   position: absolute;
   
    width:0;
    height:0;
    left:-7px;
    top:1px;
    border-width:0 7px 7px;
    border-style:solid;
    z-index: 99;
    border-color:transparent transparent #fff;
}
.playVideo .van-tabs__line{
    left:21%
}
.van-tabs__nav--line{
    box-sizing: inherit;
}
.playVideoList .van-collapse-item__content{
    padding:0;
}

/* 课程详情 */
.detailsCon{
    padding:15px;
}
.detailsCon h2{
    font-size:15px;
    border-left:3px solid #4488ff;
    padding-left:10px;
    margin-top:15px;
    line-height:1em;
    
}
.detailsCon .desc{
    font-size:10px;
    padding:10px 0 20px;
    color:#666;
    line-height: 1.5em;
}
.detailsCon dl {
    display: flex;
    align-items: center;
    padding:15px 0;
}
.detailsCon dt{
    width:20px;
    height:20px;
    font-size:10px;
    background:#fd4d3f;
    border-radius: 4px;
    color:#fff;
    text-align: center;
    vertical-align: middle;
    margin-right:15px;
    padding: 3px;
    line-height: 15px;
}
.detailsCon dd{
    font-size:10px;
    color:#999;
    line-height: 1.5em;
}
.detailsCon ul.teSe{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 15px 0;
    border-bottom:1px solid #e5e5e5;
}
.detailsCon ul.teSe li{
    margin:0 10px;
    color:#999;
    line-height: 2em;
}
.detailsCon ul.teSe li .van-icon{
    vertical-align: middle;
    margin-right:5px;
}
.detailsCon .details{
    padding:15px 0;
    color:#999;
}
.detailsCon .details p{
    line-height: 1.5em;
}
.detailsCon .details img{
    width:100%;
}
.action{
    border-top:1px solid #e5e5e5;
}
.action .van-submit-bar__bar{
    text-align: center;
}
.actio span{
   
}
.action  .van-button{
    width:50%;
}
video::-internal-media-controls-download-button {
	    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
    width: calc(100% + 30px); 
}
/*自定义证书课程详情页面  */
.customData .details{
	padding: 5px;
}

/* 播放器页 */
.playActive{
    color:#3377ff;
}
.playTitleActive{
    color:red;
}
@media (min-device-width: 300px) and (max-device-width: 360px){
         /*针对iPhone 4, 5c,5s, 部分iPhone6的放大模式，个别iPhone6的标准模*/
    .liveList .stateBtn{
        padding:6px;
        font-size:10px;
    }        
}