pfhwyigou/mobile/web/video/css/live.css

.m_top {height:50px;background:#fff;position:fixed;top:0;left:0;width:100%;z-index:9999;box-shadow:0px 0px 2px 0px rgba(191, 190, 190, 0.2);display:flex;align-items:center;}
.header_back {position:absolute;top: 13px;width: 18px;right: 15px;}
.header_menu{position:relative;margin-left:4%;}
.header_menu a{ width:11px;display:block;float: left;position:relative;top:1px;}
.header_menu img {display:inline-block;width:100%;height:auto;}
.y_input {width:55%;border-radius:100px;background:#F7F5F6;float: left;margin-left:4%;}
.y_input input {display:inline-block;width:81%;height:30px;line-height:33px;background:#F7F5F6;border:none;border-radius:50px;font-size:0.7rem;color:#666;padding-left:5px;}
.y_input input::-ms-input-placeholder{color:#ccc}
.y_input input::-webkit-input-placeholder{ color:#ccc}
.y_input input::-moz-placeholder{color:#ccc}
.y_input i{display:inline-block;width:12px;margin-left:15px;}
.xm_toplogo{width:70px;float: left;margin-left:10px;}
.xm_toplogo img{width:100%;height:100%;}



/*头部*/
.m_videohead_box{padding:0 0px;display:none;}
.m_videohead{border-bottom:1px solid #EEE;}
.m_videohead_box a{display:block;width:25%;float:left;text-align:center;height:40px;line-height:40px;}
.m_videohead_box span{width:60%;display:inline-block;position:relative;font-size:0.875rem;color:#999;}
.m_videohead_box span:before {content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:rgba(0,0,0,0);}
.m_videohead_box a.on span:before{background:#E03700;}
.m_videohead_box a.on span{font-weight:600;color:#333;}




.liveNav{width: 100%;height: auto; margin-top: 30px;}
.liveNav_box{text-align: center;}
.liveNav_box a{margin: 0 20px; display: inline-block;background: url('/video/image/video11.png') no-repeat center;width: 65px;height: 30px;line-height: 25px; background-size:100% 100%; font-size: 0.875rem; color: #333; text-align: center;}
.liveNav_box a.on{background: url('/video/image/video12.png') no-repeat center;background-size:100% 100%; color: #fff;}



/*视频列表*/
.m_video_box{margin-top:20px;padding:0 15px;}
.m_video li{padding-bottom:16px;margin-bottom:20px;}
.m_video li:last-child{margin-bottom:0;}
.m_video li a{display:block;}
.m_video li .img{width:100%;height:240px;border-radius:5px;position:relative;overflow:hidden; background: #e1e1e1;}
.m_video li .img .imgbj{width:100%;height:100%;}
.m_video li .img .imgtb{position:absolute;top:50%;left:50%;width:55px;height:55px;margin-top:-27.5px;margin-left:-27.5px;}
.m_video li .img i{position:absolute;top:10px;left:0px;font-size:0.937rem; height: 22px; line-height: 22px;}
.m_video li .img i em{display:inline-block; background: #DD2222; border:1px solid #DD2222; padding: 0 10px; color: #fff; border-radius: 0 20px 20px 0;}
.m_video li .img i span{display: inline-block;margin-left: 10px; color: #fff;}

.m_video li .img.playback i em{display:inline-block; background: rgba(0,0,0,0.1); border:1px solid #fff;border-left: none; padding: 0 10px; color: #fff; border-radius: 0 20px 20px 0;}
.m_video li .img.advance i em{border:none; width: 6.5px;height: 6.5px;border-radius: 100%; background: #DD2222;display: inline-block; padding:0 0; margin-left: 10px; position: relative;top: -2.5px;}
.m_video li .img.advance p.text_m{width: 82px; height: 33px; border-radius: 16px; line-height: 30px; border:1px solid #fff; background: rgba(0,0,0,0.3); color: #fff; font-size: 1.025rem;text-align: center; position: absolute;left: 50%; top: 50%; margin-top: -16.5px; margin-left: -41px; z-index: 2;}


.m_video li .img .imgtext{position:absolute;bottom:0;left:0;width:100%;padding:39px 0 10px 0;
background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56)));  
        -moz-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56))); 
        -o-linear-gradient(linear, 0 0, 0 bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.56))); 
}
.m_video li .img .imgtext p{padding:0 10px;}
.m_video li .img .imgtext p span{font-size:0.75rem;color:#F8F8F8;float:left;}
.m_video li .img .imgtext p span:nth-child(2){float:right;}
.m_video li .img .imgtext p span img{width:12px;margin-top:-2px;margin-right:4px;}
.m_video li .text{font-size:1.0625rem;color:#333;font-weight:600;margin-top:12px;line-height:25px;}



.dropload-up,.dropload-down{
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    /* 开启硬件加速 */
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}
.dropload-down{
    height: 75px;
}
.dropload-refresh,.dropload-update,.dropload-load,.dropload-noData{
    height: 50px;
    line-height: 50px;
    text-align: center;
}
.dropload-load .loading{
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}
@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* 报名 */
.liveBm{display: none; width: 86%; height: auto;position: fixed;left: 50%;top: 20%;margin-left: -43%; z-index: 101;}
.liveBm_bg{display: none; width: 100%;height: 100%;position: fixed;left: 0; top: 0; z-index: 99; background: rgba(0,0,0,0.5);}
.liveBm_main{width: 100%; height: auto;position: relative;}
.liveBm_gb{position: absolute;right: 18px;top:-10px; z-index: 2;width: 27px;height: 27px;}
.liveBm_gb img{width: 100%;height: 100%;}
.liveBm_box{width:65%; margin: 0 auto;padding-top: 0px;position:absolute;left: 50%; margin-left: -38%; bottom: -55px;}
.liveBm_box p.in{width: 100%; height: 32px;background: #fff; border-radius: 4px;}
.liveBm_box p.in i{float: left; display: inline-block;width: 10px; height: 15px; margin-left: 10px;position: relative;top: 4px;}
.liveBm_box p.in i img{width: 100%;height: 100%;}
.liveBm_box p.in em{display: inline-block;height: 15px;width: 1px; background-color:#CCCCCC;float: left;margin: 0 9px 0 7px;position: relative; top: 9px;}
.liveBm_box p.in input{display: inline-block;float: left; width: 80%; height: 30px; border:none; position: relative; top: 1px;font-size: 0.837rem; color: #666; }
.liveBm_box a{display: block;height: auto;width: 80%; margin: 0 auto;margin-top: 75px;}
.liveBm_box a img{width: 100%;height: auto;}
.liveBm_main .bg_ico{width: 100%; height: auto;}
.liveBm_main .bg_ico img{width: 100%; height: auto;}