.video-player {
    position: relative;
    width: 100%;
    height: 100%;
    background: #000
}

.video-player .schedule-box {
    height: 61%;
    font-size: 14px;
    color: #fff;
    display: none
}

.video-player .schedule-box>div {
    height: 100%
}

.video-player .schedule-box .schedule-countdown {
    font-size: 20px;
    text-align: center
}

.video-player .schedule-box .schedule-countdown div {
    padding: 10px
}

.video-player .schedule-box .schedule-countdown div span {
    display: block;
    font-size: 22px;
    font-weight: 700
}

.video-player .schedule-box .schedule-time {
    text-align: center;
    font-family: Oswald, sans-serif !important;
    font-weight: 700;
    font-size: 16px;
    margin: 10px
}

.video-player .schedule-box .schedule-img {
    text-align: center
}

.video-player .schedule-box .schedule-img p {
    white-space: nowrap;
    font-size: 16px;
    height: 60px;
    line-height: 60px;
    margin: 0 20px
}

.video-player .schedule-box .schedule-img img {
    display: inline-block;
    width: 60px;
    height: 60px
}

.video-player .dplayer {
    height: 100%;
    width: 100%;
    z-index: 2;
    background: #000
}

.video-player .dplayer .dplayer-danmaku {
    top: 20px
}

.video-player .big-play-btn {
    position: absolute;
    width: 120px;
    height: 120px;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%)
}

.video-player .loading {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0)
    }

    to {
        -webkit-transform: rotate(360deg)
    }
}

.video-player .loading .imgRotate {
    width: 80px;
    height: 80px;
    -webkit-transform: rotate(360deg);
    animation: rotation 1.5s linear infinite;
    -moz-animation: rotation 1.5s linear infinite;
    -webkit-animation: rotation 1.5s linear infinite;
    -o-animation: rotation 1.5s linear infinite
}

.video-player .loading .loading-logo {
    position: absolute;
    width: 35.2px;
    height: 35.2px;
    left: 22px;
    top: 22px
}

.video-player .loading .imgRotate-min-screen {
    width: 60px;
    height: 60px
}

.video-player .loading .loading-logo-min-screen {
    width: 26px;
    height: 26px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.video-player .loading p {
    margin-top: 14px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    user-select: none
}

.video-player .refresh {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 0;
    right: 0;
    z-index: 30;
    text-align: center;
    transform: translateY(-50%);
    background: #000;
    user-select: none
}

.video-player .refresh div:first-child {
    margin: 25% auto 23px;
    font-size: 18px;
    font-weight: 400;
    color: #8f8f8f
}

.video-player .refresh div:last-child {
    width: 70px;
    height: 32px;
    line-height: 28px;
    margin: 0 auto;
    text-align: center;
    color: #ffb600;
    border-radius: 16px;
    border: 1px solid #ffb600;
    cursor: pointer;
    transition: all .15s
}

.video-player .refresh div:last-child:hover {
    background: #ffb600;
    color: #fff
}

.video-player .bottomCtrl {
    transition: opacity .3s;
    line-height: 60px;
    height: 100px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%);
    width: 100%;
    color: #fff;
    z-index: 10
}

.video-player .bottomCtrl.fullscreen {
    z-index: 10000000000;
    position: fixed
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel {
    width: 330px;
    height: 195px;
    bottom: 111px;
    left: 0;
    right: 0;
    z-index: 9
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox {
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2);
    border-radius: 4px;
    position: relative;
    left: 0;
    right: 0;
    overflow: hidden
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox:hover {
    overflow-y: auto;
    overflow-y: overlay
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox::-webkit-scrollbar {
    width: 6px;
    height: 1px;
    padding-right: 2px
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(225, 225, 226, .2);
    background: rgba(0, 0, 0, .3)
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox::-webkit-scrollbar-track {
    border-radius: 0;
    background: transparent
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox ul {
    display: flex;
    flex-wrap: wrap;
    padding: 16px
}

.video-player .bottomCtrl.fullscreen .ctrlBox .send-danmu .emoji-panel .browBox ul li {
    width: 11%;
    font-size: 24px;
    list-style: none;
    text-align: center;
    cursor: pointer
}

.video-player .bottomCtrl.fullscreen .ctrlBox .video-full {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-full-close.png) center center no-repeat !important;
    background-size: 100% auto !important
}

.video-player .bottomCtrl.fullscreen .ctrlBox .video-full:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-full-close-over.png) center center no-repeat !important;
    background-size: 100% auto !important
}

.video-player .bottomCtrl .ctrlBox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 24px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-start
}

.video-player .bottomCtrl .ctrlBox .video-botton {
    width: 20px;
    height: 20px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle
}

.video-player .bottomCtrl .ctrlBox .video-play {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-play.png) center center no-repeat;
    background-size: 100% auto;
    margin-right: 40px
}

.video-player .bottomCtrl .ctrlBox .video-play:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-play-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .video-pause {
    margin-right: 40px;
    background: url(//sta.vnres.co/web/assets/soco/img/icon-pause.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .video-pause:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-pause-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .icon-volume {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-volume-close.png) center center no-repeat;
    background-size: 100% auto;
    margin-right: 5px
}

.video-player .bottomCtrl .ctrlBox .icon-volume:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-volume-close-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .icon-close-volume {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-volume-on.png) center center no-repeat;
    background-size: 100% auto;
    margin-right: 5px
}

.video-player .bottomCtrl .ctrlBox .icon-close-volume:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-volume-on-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .video-full {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-full.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .video-full:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-full-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .video-open-danmu {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-danmu-close.png) center center no-repeat;
    background-size: 100% auto;
    margin-right: 20px
}

.video-player .bottomCtrl .ctrlBox .video-open-danmu:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-danmu-close-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox .video-close-danmu {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-danmu-on.png) center center no-repeat;
    background-size: 100% auto;
    margin-right: 20px;
    margin-top: 4px
}

.video-player .bottomCtrl .ctrlBox .video-close-danmu:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/icon-danmu-on-over.png) center center no-repeat;
    background-size: 100% auto
}

.video-player .bottomCtrl .ctrlBox>.mute-tips {
    font-size: 12px;
    color: #fff;
    line-height: 17px;
    width: 172px;
    height: 34px;
    line-height: 34px;
    background: rgba(0, 0, 0, .7);
    border-radius: 8px;
    text-align: center;
    position: absolute;
    bottom: 43px;
    left: 50px;
    user-select: none;
    cursor: auto
}

.video-player .bottomCtrl .ctrlBox>.mute-tips img {
    width: 12px;
    height: 12px;
    cursor: pointer
}

.video-player .bottomCtrl .ctrlBox .volumn-slider {
    width: 120px;
    height: 4px;
    background-color: #e4e7ed;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
    vertical-align: middle
}

.video-player .bottomCtrl .ctrlBox .volumn-slider .volumn-line {
    height: 4px;
    background-color: #ffc71c;
    left: 0;
    width: 70%;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    position: absolute
}

.video-player .bottomCtrl .ctrlBox .volumn-slider .volumn-point {
    height: 36px;
    width: 36px;
    z-index: 100;
    left: 70%;
    top: -16px;
    background-color: transparent;
    transform: translateX(-50%);
    position: absolute;
    text-align: center;
    user-select: none;
    line-height: normal
}

.video-player .bottomCtrl .ctrlBox .volumn-slider .volumn-point span {
    height: 12px;
    width: 12px;
    border: none;
    background-color: #ffc71c;
    vertical-align: middle;
    border-radius: 50%;
    transition: .2s;
    display: block;
    margin: 12px
}

.video-player .bottomCtrl .ctrlBox .volumn-slider .volumn-point:hover {
    cursor: -webkit-grab
}

.video-player .bottomCtrl .ctrlBox .volumn-slider .volumn-point:hover span {
    transform: scale(1.2)
}

.video-player .bottomCtrl .ctrlBox .send-danmu {
    height: 32px;
    line-height: 32px;
    margin-left: 40px
}

.video-player .bottomCtrl .ctrlBox .send-danmu>div {
    display: inline-block;
    vertical-align: top
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input {
    position: relative;
    width: 470px;
    height: 32px;
    background: rgba(255, 255, 255, .2);
    border-radius: 36px;
    padding-left: 14px;
    padding-right: 40px;
    font-size: 14px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenInput {
    width: 100%;
    height: 100%;
    overflow: auto;
    outline: 0
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenInput::-webkit-scrollbar {
    width: 6px;
    height: 1px;
    padding-right: 2px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenInput::-webkit-scrollbar-thumb {
    width: 6px;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #ddd;
    background: rgba(0, 0, 0, .3)
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenInput::-webkit-scrollbar-track {
    border-radius: 0;
    background: transparent
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenInput:empty:before {
    content: attr(placeholder);
    color: grey
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenInput:focus:before {
    content: ''
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input span {
    color: #ffc71c;
    cursor: pointer;
    user-select: none
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input input {
    background: 0 0;
    border: none;
    width: 84%;
    color: #fff
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input #fullScreenEmoji {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #b5b5b5;
    border-radius: 50%;
    margin: 0 14px 6px 0;
    float: right;
    cursor: pointer
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input .emoji-panel {
    bottom: 42px;
    position: absolute;
    right: -136px;
    left: auto;
    color: #666
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input .emoji-panel::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 159px;
    width: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid #fff;
    z-index: 100
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input .message-tips {
    bottom: 42px;
    position: absolute;
    left: 0;
    color: #ff3434;
    height: 28px;
    line-height: 28px;
    background: #fff;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 10px;
    transition: all .15s;
    visibility: hidden;
    opacity: 0
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input .message-tips::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 16px;
    width: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #fff;
    z-index: 100
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-input .message-tips.show-tips {
    visibility: visible;
    opacity: 1;
    cursor: pointer
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-enter {
    width: 64px;
    height: 32px;
    border: none;
    line-height: 32px;
    background: #ffb600;
    border-radius: 36px;
    margin: 0 20px 0 10px;
    color: #000;
    font-size: 14px;
    text-align: center;
    user-select: none;
    cursor: pointer
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-enter.cgcolor {
    background: #d6d6d6;
    cursor: unset
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift {
    width: 30px;
    cursor: pointer;
    position: relative
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift img {
    width: 100%
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block {
    position: absolute;
    bottom: 52px;
    left: -114px;
    width: 270px;
    min-height: 164px;
    background: #fff;
    box-shadow: 0 3px 10px 0 rgba(43, 58, 73, .15);
    border-radius: 6px;
    user-select: none
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block::before {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 118px;
    width: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 10px solid #efefef;
    z-index: 100
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top {
    width: 100%;
    min-height: 122px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift {
    width: 90px;
    display: inline-block;
    text-align: center
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift .img {
    position: relative;
    width: 50px;
    height: 50px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
    transition: all .15s;
    cursor: pointer;
    margin: 22px 20px 6px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift .img img {
    width: 100%;
    height: 100%
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift .img .gift-effect {
    position: absolute;
    top: 0;
    left: 0;
    animation: gift 1s;
    -moz-animation: gift 1s;
    -webkit-animation: gift 1s;
    -o-animation: gift 1s
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift .gift-name {
    color: #0f263b;
    line-height: 20px;
    height: 20px;
    font-size: 14px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift .gift-score {
    height: 17px;
    line-height: 17px;
    font-size: 12px;
    color: #ffb600
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift.active .img,
.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift:hover .img {
    border: 1px solid #ffc71c;
    box-shadow: 0 0 20px rgba(255, 199, 28, .3)
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-bottom {
    width: 100%;
    height: 42px;
    line-height: 42px;
    background: #efefef;
    padding: 10px 16px;
    font-size: 12px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-bottom>div {
    display: inline-block;
    color: #777;
    height: 22px;
    line-height: 22px;
    vertical-align: top
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-bottom .gift-my-socre span {
    color: #000
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-bottom .gift-send {
    float: right;
    height: 22px;
    padding: 0 8px;
    border-radius: 2px;
    background: #ffc71c;
    text-align: center;
    color: #000;
    user-select: none
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-bottom .gift-send.noScore {
    background: #dadada;
    cursor: unset;
    color: #777
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight {
    margin-left: auto;
    display: inline-block;
    height: 50px;
    line-height: 50px;
    font-size: 0
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight.inRoom {
    display: none
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .btn {
    position: relative;
    width: 36px;
    height: 24px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 2px;
    border: 1px solid #fff;
    cursor: pointer
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .select-definition {
    border: 1px solid #ffc71c
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .select-definition span {
    color: #ffc71c;
    cursor: pointer
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .select-definition .select-opt {
    position: absolute;
    z-index: 101;
    bottom: 34px;
    background-color: rgba(0, 0, 0, .4);
    left: -5px;
    border-radius: 4px;
    width: 44px
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .select-definition .select-opt div {
    list-style: none;
    line-height: 36px;
    margin: 0;
    font-size: 14px;
    cursor: pointer;
    outline: 0;
    color: #fff
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .select-definition .select-opt div.active,
.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .select-definition .select-opt div:hover {
    color: #ffc71c
}

.video-player .bottomCtrl .ctrlBox .bottomCtrlRight .goRoom {
    height: 23px;
    padding: 0 8px;
    line-height: 23px;
    background: #ffc71c;
    border-radius: 4px;
    display: inline-block;
    text-align: center;
    margin-right: 24px;
    font-size: 12px;
    color: #0f263b;
    vertical-align: middle;
    cursor: pointer
}

.video-player .vplayer-recommend {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    z-index: 20;
    background: #000
}

.video-player .vplayer-recommend .text {
    height: 61%;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    color: #fff;
    width: 100%
}

.video-player .vplayer-recommend .recommend-swiper-container {
    background: #000;
    border: #000;
    height: 33.6%;
    overflow: hidden
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide {
    width: 285px;
    height: 100%;
    margin-right: 16px;
    border: 1px #000 solid;
    background: center no-repeat;
    background-size: 285px 100%;
    border-radius: 4px;
    position: relative
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide .cover {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide a {
    width: 100%;
    display: block;
    height: 100%
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide:first-child {
    margin-left: 24px
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide:last-child {
    margin-right: 24px
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide .living {
    position: absolute;
    top: 10px;
    right: 8px;
    height: 18px;
    padding: 0 4px;
    line-height: 18px;
    font-size: 0;
    background: #fa3434;
    border-radius: 2px
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide .living img {
    width: 10px;
    height: 10px;
    margin-right: 4px;
    vertical-align: middle
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide .living span {
    position: static;
    font-size: 12px;
    color: #fff;
    border-radius: 0;
    border-right: 0;
    vertical-align: middle
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide .bottom {
    position: absolute;
    width: 100%;
    height: 46px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .8) 100%);
    bottom: 0
}

.video-player .vplayer-recommend .recommend-swiper-container .swiper-slide .bottom .content {
    position: absolute;
    width: 147px;
    padding-left: 14px;
    padding-bottom: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    bottom: 0
}

.video-player.min-screen {
    position: fixed;
    width: 456px !important;
    height: 259px !important;
    right: 100px;
    top: 400px;
    z-index: 100
}

.video-player.min-screen .min-screen-mark {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 14px 16px 16px;
    background: 0 0;
    top: 0;
    z-index: 4;
    cursor: move
}

.video-player.min-screen .min-screen-mark:hover .min-screen-ctrl {
    visibility: visible
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl {
    position: relative;
    width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 101
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .top .left {
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    user-select: none
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .top .right {
    float: right
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .top .right .icon-close {
    width: 20px;
    height: 20px;
    background: url(//sta.vnres.co/web/assets/soco/img/minscreen-close.png) no-repeat center;
    background-size: 20px 20px
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .top .right .icon-close:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/minscreen-close-active.png);
    cursor: pointer
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom {
    position: absolute;
    bottom: 0
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom .video-pause,
.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom .video-play {
    width: 40px;
    height: 40px;
    background-size: 40px 40px
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom .video-play {
    background: url(//sta.vnres.co/web/assets/soco/img/minscreen-pause.png) no-repeat center
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom .video-play:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/minscreen-pause-active.png);
    cursor: pointer
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom .video-pause {
    background: url(//sta.vnres.co/web/assets/soco/img/minscreen-play.png)
}

.video-player.min-screen .min-screen-mark .min-screen-ctrl .bottom .video-pause:hover {
    background: url(//sta.vnres.co/web/assets/soco/img/minscreen-play-active.png);
    cursor: pointer
}

.video-player.min-screen .video-player.video-player.vjs-custom-skin {
    width: 456px;
    height: 259px
}

.video-player.min-screen .video-player.video-player.vjs-custom-skin>div {
    width: 456px;
    height: 259px;
    border-radius: 4px
}

.video-player.min-screen .video-player.video-player.vjs-custom-skin .vjs-tech {
    width: 456px;
    height: 259px
}

.video-player.min-screen .bottomCtrl {
    display: none
}

.video-player.min-screen .baberrage-fixed {
    display: none
}

.video-player.min-screen .loading p {
    display: none
}

.video-player .dplayer-mobile-play {
    display: none !important
}

@keyframes gift {
    0% {
        transform: translate(0, 0)
    }

    20% {
        left: 20px
    }

    40% {
        transform: translate(-200px, -150px) scale(1.5, 1.5)
    }

    100% {
        transform: translate(-230px, -70px) scale(.5, .5)
    }
}

.bullet-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none
}

.bullet-wrapper div {
    font-size: 18px !important;
    cursor: default
}

.video-player .bottomCtrl .player-tip-box {
    position: relative;
    width: 100%;
    line-height: 1
}

.video-player .bottomCtrl .player-tip-box .player-tip-item {
    position: absolute;
    top: 0
}

.video-player .bottomCtrl .player-tip-box .player-tip-item .text {
    padding: 5px 0;
    background: #000;
    color: #f8c21b;
    font-size: 12px;
    text-align: center;
    border-radius: 6px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item:after {
    content: '';
    position: absolute;
    bottom: -20px;
    width: 15px;
    height: 15px;
    background: url(//sta.vnres.co/web/assets/soco/img/player-tip.svg) center no-repeat;
    background-size: 15px 15px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.play-tip {
    top: 12px;
    left: 8px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.play-tip .text {
    padding-left: 8px;
    padding-right: 8px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.play-tip:after {
    left: 19px;
    transform: rotate(90deg)
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.volumn-tip {
    top: 12px;
    left: 95px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.volumn-tip .text {
    padding-left: 8px;
    padding-right: 8px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.volumn-tip:after {
    left: -5px;
    transform: rotate(90deg)
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.hd-tip {
    right: 140px;
    width: 135px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.hd-tip:after {
    right: 15px;
    bottom: -25px;
    transform: rotate(20deg);
    width: 20px;
    height: 20px;
    background-size: 20px 20px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.danmu-tip {
    right: 75px;
    width: 60px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.danmu-tip:after {
    right: -8px;
    transform: rotateY(180deg) rotate(90deg)
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.full-tip {
    right: 10px;
    width: 60px
}

.video-player .bottomCtrl .player-tip-box .player-tip-item.full-tip:after {
    left: 50%;
    transform: rotateY(180deg) rotate(90deg)
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top {
    min-height: 134px
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-top .gift .gift-name {
    height: 30px;
    line-height: 1
}

.video-player .bottomCtrl .ctrlBox .send-danmu .send-danmu-gift .gift-block .gift-bottom {
    padding: 10px 8px
}