#beginLayer {
    position: absolute;
    left: 50%;
    top: 50%
}

#beginLayerImg {
    position: absolute;
    width: 175px;
    height: 186px;
    left: -87.5px;
    top: -93px;
    cursor: pointer;
    /* background: url(/static/scene/livenew/public/img/video_move_bg.png) no-repeat 50% 50%; */
    background-size: auto 100%;
    display: none;
    text-align: center;
    transform: scale(.7);
}
#beginLayerImg img{
    width: 100%;
    /* margin-top: 25px; */
    opacity: .7;
}
.videoScrollTop {
    position: absolute;
    /* width: 100%; */
    height: 20px;
    /* float: left;
    top: -3px; */
    cursor: pointer
}

#videoBG {
    background-color: rgba(31, 31, 31, 0.8);
    width: 100%;
    height: 100%
}

#videoToolbar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 40px;
    bottom: 0;
    z-index: 3002;
}

#videoTogglePlay {
    background-image: url(toolbar.png?1);
    background-size: 60px auto;
    background-position: 10px 10px;
    cursor: pointer;
    height: 100%;
    width:40px;
}

#videoTogglePlay.videoStop {
    background-position: 10px 10px;
}
#videoTogglePlay.videoPlay {
    background-position: -20px 10px;
}


.videoScroll {
    position: relative;
    height: 100%;
    float: left;
    margin-left: 10px
}

#videoScrollBG {
    position: absolute;
    background: #5b5a5a;
    width: 100%;
    height: 5px;
    pointer-events: none;
}

#videoScrollBG1 {
    position: absolute;
    background: #848484;
    width: 0;
    height: 5px;
    pointer-events: none;
    cursor: pointer
}
#videoScrollBG2 .right_flag{
    width: 5px;
    height: 12px;
    float: right;
    background: #ffffff;
    margin-right: -5px;
    margin-top: -3px;
    border-radius: 5px;
}
#videoScrollBG2 {
    position: absolute;
    background: #1caffc;
    width: 0;
    height: 5px;
    pointer-events: none;
    cursor: pointer
}

#videoTime {
    height: 41px;
    line-height: 44px;
    vertical-align: middle;
    text-align: center;
    width: 70px;
    float: left;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #fff
}

#live #videoViewPortToggle{
    z-index: 3003;
}

#videoViewPortToggle {
    background-size: 91px 250px
}

.videoViewPort1 {
    background-position: 1px -35px
}

.videoViewPort2 {
    background-position: 8px -96px
}

#videoFullScreen {
    background-size: 88px 250px
}

.videoFullScreen1 {
    background-position: -132px -35px
}

.videoFullScreen2 {
    background-position: -132px -78px
}

#curVideo {
    width: 85px;
    height: 41px;
    line-height: 41px;
    text-align: center;
    font-size: 14px;
    color: #fff
}

.curVideoText:after {
    content: "";
    width: 6px;
    height: 6px;
    border-color: #fff;
    border-width: 0 0 1px 1px;
    border-style: solid;
    margin-left: 4px;
    top: 17.5px;
    transform: rotateZ(135deg);
    position: absolute
}

.curVideoText_sel:after {
    content: "";
    width: 6px;
    height: 6px;
    border-color: #fff;
    border-width: 0 0 1px 1px;
    border-style: solid;
    margin-left: 4px;
    top: 15px;
    transform: rotateZ(-45deg);
    position: absolute
}

.videoDomList {
    position: absolute;
    background-color: rgba(31, 31, 31, 0.8);
    width: 85px;
    text-align: center;
    padding: 10px 0;
    display: none
}

.videoListDom {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #d1d1d1;
    text-align: center
}

.videoListDomCheck {
    color: #1caffc
}

.floatR {
    float: right
}

.floatL {
    float: left
}

.floatW {
    cursor: pointer;
    width: 44px;
    height: 100%
}

.barrage {
    background-size: 91px 250px;
    background-position: 320px 85px;
}

.barrage1 {
    background-size: 91px 250px;
    background-position: 411px 128px;
}

.shuoshuo {
    background-image: url(toolbar.png?1);
    background-size: 91px 250px;
    background-position: 1px 100px;
}

.shuoshuo1 {
    background-image: url(toolbar.png?1);
    background-size: 91px 250px;
    background-position: 332px 100px;
}

.gyroklm {
    display: none;
    background-size: 98px 256px;
    background-position: 587px 44px;
}

.gyroklm1 {
    background-size: 98px 256px;
    background-position: 538.5px 44px;
}

.videoViewPort2 {
    background-position: 1px -78.5px;
}

@media (max-width:1024px) {
    .gyroklm {
        display: block;
    }
}

/*----------------------------------------------------------------------------------------------*/
/*直播播放器样式覆盖*/
#videoBG{
    background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 100%) ;
}
/* .videoScrollTop{
    width: calc(100% - 240px) !important;
    left: 120px;
    top: 18px !important;
} */

.top_video_tool{
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%) ;
    z-index: 3;
}
.top_video_tool .gyroklm{
    font-size: 20px;
    width: 40px;
    padding-left: 10px;
}
.top_video_tool .gyroklm,.top_video_tool .videoViewPort1,.top_video_tool .videoViewPort2,#videoFullScreen{
    background: none ;
    color: #d0d0d0;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
.top_video_tool .setting_btn.iconfont{
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #d0d0d0;
    text-align: center;
    font-size: 20px;
}
/*选中效果*/
.gyroklm.gyroklm1,.top_video_tool .videoViewPort2,#videoFullScreen.videoFullScreen2{
    color: rgb(255,120,0);
}
#videoBG .barrage{
    width: 60px;
    height: 20px;
    line-height: 20px;
    margin: 10px 0;
    background: #2a2a2a;
    border-radius: 10px;
    color: #d0d0d0;
    font-size: 12px;
    text-align: center;
    vertical-align: middle;
    /* position: absolute; */
    right: 40px;
    bottom: 0;
}
#videoBG .barrage .text_btn span{
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgb(103,255,41);
    border: 2px solid rgb(75,77,74);
    box-sizing: border-box;
    margin-right: 5px;
    vertical-align: middle;
}
#videoBG .barrage.barrage1 .text_btn span{
    background: rgb(75,77,74);
}
#videoBG .barrage .icon_btn{
    display: none;
    font-size: 20px;
}

#videoBG .ai_help{
    display: none;
    width: 80px;
    height: 40px;
    cursor: pointer;
    margin-right: 10px;
    background: url(/static/skin/common/pc/images/ai_help.png) center / contain no-repeat;
}
#videoBG .ai_help_custom{
    background: none;
}
#videoBG .ai_help img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#videoScrollBG2{
    background: rgb(103,255,41) !important;
}
.hide_tool #videoToolbar{
    bottom: -41px !important;
}
.hide_tool #videoScrollBG2 .right_flag{
    display: none;
}
.hide_tool .top_video_tool{
    top: -41px !important;
}
#videoToolbar,.top_video_tool{
    transition: all .5s;
}
.video_box>.setting_btn{
    color: #FFFFFF;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.video_box div[name='SceneViewer']{
    z-index: 2 !important;
}
#live .iconfont{
    cursor: pointer;
}
#logoBox{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 210px;
    height: 70px;
    z-index: 1;
    pointer-events: none;
}
#logoBox img{
    max-width: 210px;
    max-height: 70px;
    object-fit: contain;
}
.barragebox.container{
    position: relative;
    top: 20px;
}
.barragebox.container .list.animate{
    /* transform: translateY(5px); */
    
}

/*2021年2月6日13:58:49新增样式改动*/

.videoScrollTop{
    width: calc(100% - 140px) ;
    left: 70px;
    /* top: -25px; */
    transition: left .5s,width .5s;
    padding-top: 10px;
}
#leftTime{
    position: absolute;
    left: 15px;
    top: -20px;
    color: #FFFFFF;
    font-size: 12px;
    width: 50px;
    text-align: left;
    
}
#rightTime{
    position: absolute;
    right: 15px;
    top: -20px;
    color: #FFFFFF;
    font-size: 12px;
    width: 50px;
    text-align: right;
}
.hide_tool #leftTime,.hide_tool #rightTime{
    display: none;
}
.hide_tool .videoScrollTop{
    top: -13px ;
    width: 100% !important;
    left: 0;
}
#videoTime{
    display: none ;
}



/*移动端样式调整*/

body .videoScrollTop {
    width: calc(100% - 340px);
    left: 90px;
    top: 8px;
}
body #leftTime {
    left: 40px;
    top: 12px;
}
body #rightTime {
    right: 190px;
    top: 12px;
    width: 50px;
    text-align: center;
}
#out_setting{
    display: none;
}


@media screen and (max-width: 813px){
    
    body .videoScrollTop {
        width: calc(100% - 200px) ;
        left: 80px;
        top: 8px;
    }
    body #rightTime {
        right: 70px;
        top: 10px;
        width: 40px;
        text-align: center;
    }
    body #leftTime {
        left: 40px;
        top: 12px;
        width: 40px;
    }
    #videoBG .barrage .text_btn{
        display: none;
    }
    #videoBG .barrage .icon_btn{
        display: inline-block;
        color:rgb(103,255,41)
    }
    #videoBG .barrage{
        width: 40px;
        height: 40px;
        background: none;
        right: 35px;
        text-align: center;
        margin: 0;
        line-height: 40px;
    }
    #videoBG .barrage.barrage1 .icon_btn{
        color:#ffffff;
    }
    body #rightTime {
        right: 80px;
        top: 12px;
        width: 50px;
        text-align: right;
    }
    
    
    
    
}

/*css横屏*/
/* @media all and (orientation : landscape) and (max-width: 813px){
    #videoBG{
        background: rgba(31, 31, 31, 0.8);
        border-radius: 8px;
        width: 96%;
        transform: translateX(2%);
        margin-top: -25px;
    }
    #videoFullScreen{
        color: rgb(255,120,0);
    }
    #live.hide_tool #videoBG{
        width: 100%;
        transform: none;
        margin-top: 0;
    }
    .top_video_tool{
        background: none;
        width: 96%;
        transform: translateX(2%);
        top: 10px;
    }
    .top_video_tool #setting_btn{
        background: rgba(31, 31, 31, 0.8);
        border-radius: 8px;
    }
    .top_video_tool #gyroklm{
        background: rgba(31, 31, 31, 0.8);
        border-radius: 8px 0 0 8px;
    }
    .top_video_tool #videoViewPortToggle{
        background: rgba(31, 31, 31, 0.8);
        border-radius: 0 8px 8px 0;
    }
    #time_box{
        top: 50vh;
        transform: translateY(-50%);
        margin-top: 0;
    }
} */

/*全屏样式*/
.max_video .scene_list{
    display: none;
}
.max_video .video_box{
    width: 100vw;
    height: 100vh !important;
}
.max_video #videoBG{
    background: rgba(31, 31, 31, 0.8);
    border-radius: 8px;
    width: 96%;
    transform: translateX(2%);
    margin-top: -25px;
}
.max_video #videoFullScreen{
    color: rgb(255,120,0);
}
.max_video #live.hide_tool #videoBG{
    width: 100%;
    transform: none;
    margin-top: 0;
}
.max_video .top_video_tool{
    background: none;
    width: 96%;
    transform: translateX(2%);
    top: 10px;
}
.max_video .top_video_tool #setting_btn{
    background: rgba(31, 31, 31, 0.8);
    border-radius: 8px;
}
.max_video .top_video_tool #gyroklm{
    background: rgba(31, 31, 31, 0.8);
    border-radius: 8px 0 0 8px;
}
.max_video .top_video_tool #videoViewPortToggle{
    background: rgba(31, 31, 31, 0.8);
    border-radius: 0 8px 8px 0;
}
.max_video #time_box{
    top: 50vh;
    transform: translateY(-50%);
    margin-top: 0;
}