html,body{
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #7F1313 0%, #1A2B80 100%);
}
.video-header{
    width: 100%;
    top: 0;
    left: 0;
}
.pk-video-box{
    width: 100%;
    height: 87.73vw;
    top: 19vw;
    z-index: 80;
}
.pk-icon{
    width: 18.4vw;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}
.pk-video{
    width: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}
.video-pk{
    width: 50%;
    height: 71.2vw;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
}
.video-pk video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.footer-nav{
    width: 100%;
    bottom: 0;
    z-index: 80;
}
.pk-playing{
    width: 24vw;
    height: 5.34vw;
    border-radius: 2.67vw;
    background: rgba(0,0,0,.4);
    top: 2.66vw;
    right: 2.66vw;
    z-index: 60;
    padding-left: .53vw;
}
.pk-playing-name{
    max-width: 14vw;
}
.pk-follow{
    width: 7.73vw;
    height: 4.26vw;
    line-height: 4.26vw;
    background: linear-gradient(270deg, #C34DFF 0%, #FF59C8 100%);
    border-radius: 2.13vw;
}
.pk-number{
    width: 94.66vw;
    height: 13.33vw;
    top: 83.86vw;
    /* top: 88.86vw; */
    left: 50%;
    transform: translateX(-50%);
    background: url("../images/video/pk-img.png") no-repeat center;
    background-size: cover;
    z-index: 120;
}
.pk-time{
    width: 21.6vw;
    height: 6.3vw;
    margin: .26vw auto 0;
}
.pk-time-icon{
    width: 4.26vw;
    height: 4.26vw;
    margin-right: 1.06vw;
}
.pk-slide{
    width: 100%;
    height: 5.33vw;
    border-radius: 2.66vw;
    overflow: hidden;
}
.pk-text{
    width: 100%;
    height: 5.33vw;
    top: 0;
    background-color: rgba(0,0,0,0);
    z-index: 4;
}
.pk-color{
    width: 100%;
    height: 5.33vw;
    top: 0;
    z-index: 2;
}
.we-num{
    width: 50%;
    height: 100%;
    line-height: 5.33vw;
    background: linear-gradient(270deg, #FF884D, #FF4D6A);
}
.other-num{
    width: 50%;
    height: 100%;
    line-height: 5.33vw;
    background: linear-gradient(270deg, #4DC3FF, #4D6AFF);
}
.pk-seat{
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    left: 0;
    z-index: 6;
}
.seat-item{
    width: 8.53vw;
    height: 8.53vw;
}
.gift-seat-left{
    width: 8.53vw;
    height: 8.53vw;
    padding: .26vw;
    background: linear-gradient(270deg, #FF884D 0%, #FF4D6A 100%);
    overflow: hidden;
}
.gift-seat-right{
    width: 8.53vw;
    height: 8.53vw;
    padding: .26vw;
    background: linear-gradient(270deg, #59C7FF 0%, #5873FB 100%);
    overflow: hidden;
}
.seat-item img{
    width: 100%;
    height: 100%;
}
.gift-seat-mark{
    width: 7.6vw;
    height: 2.66vw;
    line-height: 2.66vw;
    border-radius: 1.33vw;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
.first-mark{
    background: linear-gradient(135deg, #FFE14C 0%, #FF9A0D 100%);
    color: #BF4000;
}
.second-mark{
    background: linear-gradient(139deg, #C2EAF2 0%, #87B4E0 100%);
    color: #3A5EA6;
}
.third-mark{
    background:linear-gradient(136deg, #FFCB64 0%, #E68250 100%);
    color: #8A3322;
}
.videoPlayer{
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    object-fit: fill;
    z-index: 10;
}
.pk-icon-center{
    width: 11.2vw;
    height: 11.2vw;
}
.pk-play-btn{
    width: 16vw;
    height: 16vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 20;
    display: none;
}
.left-svga{
    width: 32vw;
    height: 32vw;
    left: 9.06vw;
    bottom: 4.2vw;
    z-index: 10;
}
.right-svga{
    width: 32vw;
    height: 32vw;
    right: 9.06vw;
    bottom: 4.2vw;
    z-index: 10;
}