.border-color {
  z-index: 2;
  position: relative;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
  height: 0;
  padding-bottom: 56.1%;
  border-radius: 20px;
}

.border-color .border-bg {
  position: absolute;
  z-index: 10000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* background: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video2.png') -2px center no-repeat;
  background-size: cover; */
  background-image: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video_off.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* transition: background .2s; */
  animation: video-deng 1s linear infinite reverse;
}

@keyframes video-deng {
  0%{
    background-position: 1px center;
    background-image: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video_off.png');
  }
  49%{
    background-position: 1px center;
    background-image: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video_off.png');
  }
  50%{
    background-position: 0 center;
    background-image: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video_on.png');
  }
  99% {
    background-position: 0 center;
    background-image: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video_on.png');
  }
  100%{
    background-position: 1px center;
    background-image: url('http://files.haojue163.com/haojue_winning_pc_v15/img/bg_video_off.png');
  }
}


.border-color section.border-content {
  z-index: 3;
  position: absolute;
  top: 6px;
  left: 6px;
  background: #fff;
  width: calc(100% - 14px);
  height: calc(100% - 12px);
  border-radius: 20px;
  overflow: hidden;
  z-index: -1;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease;
}

.border-color section.border-content.current {
  display: block;
  z-index: 9999;
  visibility: visible;
  opacity: 1;
}

#video-wrap video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-jit: cover;
}

#video-wrap .winning-text {
  box-sizing: border-box;
  z-index: 9;
  position: absolute;
  bottom: 27px;
  right: 27px;
  width: 139px;
  height: 56px;
  color: #fff;
  border-radius: 5px;
  opacity: 0;
  transition: all 2.2s;
  animation: 6s ease infinite normal both running flipInY;
}

#video-wrap .winning-text img {
  width: 100%;
}

#video-wrap .winning-text.op1 {
  opacity: 1;
}

#video-wrap .xfq {
  position: absolute;
  z-index: 9;
  top: 22px;
  left: 36px;
  width: 140px;
  height: 65px;
}

#video-wrap .xfq img {
  animation: 10s ease infinite normal both running zoomBigSmall;
  width: 100%;
}

#video-wrap .dg-xfq {
  position: absolute;
  z-index: 9;
  top: -37px;
  left: -20px;
  width: 254px;
}

#video-wrap .dg-xfq img {
  animation: 2s linear .2s infinite normal both running zoomBigSmall2;
  width: 100%;
}

#video-wrap .scroll-text {
  z-index: 99;
  position: absolute;
  width: 69.4627%;
  height: 29px;
  overflow: hidden;
}
#video-wrap .scroll-text.full-scroll {
  width: 92.4627%;
}
#video-wrap .scroll-big-text {
  z-index: 99;
  position: absolute;
  width: 100%;
  height: 50px;
  overflow: hidden;
  top: 50%;
  margin-top: -25px;
  left: 0;
}
#video-wrap .scroll-big-text li:nth-child(1) {
  margin-left: 0;
}
#video-wrap .scroll-big-text li {
  float: left;
  height: 29px;
  margin-left: 600px;
}

#video-wrap .scroll-big-text li span {
  vertical-align: middle;
  font-size: 30px;
  margin-right: 6px;
  color: #d7000f;
  font-weight: bold;
  font-family: "MicrosoftYaHei";
  text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0, #fff 1.6px 0 0, #fff 0 1.6px 0, #fff -1.6px 0 0, #fff 0 -1.6px 0;
  -webkit-text-stroke: 1px #fff;
}

#video-wrap .scroll-text.scroll-top-text {
  top: 25px;
  right: 28px;
}

#video-wrap .scroll-text.scroll-bottom-text {
  bottom: 17px;
  left: 32px;
}

#video-wrap .scroll-text .scroll-top,
#video-wrap .scroll-text .scroll-bottom {
  height: 29px;
  width: 1000%;
}

#video-wrap .scroll-text li {
  float: left;
  height: 29px;
  margin-left: 20px;
}

#video-wrap .scroll-text li img {
  width: 29px;
  height: 29px;
  display: inline-block;
  border-radius: 29px;
  vertical-align: middle;
  margin-right: 10px;
}

#video-wrap .scroll-text li span {
  vertical-align: middle;
  font-size: 17px;
  margin-right: 6px;
  color: #fff;
  font-weight: bold;
  font-family: "MicrosoftYaHei";
  text-shadow: #3c031b 1px 0 0, #3c031b 0 1px 0, #3c031b -1px 0 0, #3c031b 0 -1px 0, #3c031b 1.6px 0 0, #3c031b 0 1.6px 0, #3c031b -1.6px 0 0, #3c031b 0 -1.6px 0;
  -webkit-text-stroke: 1px #3c031b;
}

#video-wrap .Barrage {
  position: absolute;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

#video-wrap .Barrage #BarrageWrap {
  position: relative;
}

#video-wrap .Barrage div[data-font-size='font__size__4'] span {
  font-size: 20px;
}

#video-wrap .Barrage div[data-font-size='font__size__6'] span {
  font-size: 25px;
}

#video-wrap .Barrage div[data-font-size='font__size__7'] span {
  font-size: 27px;
}

#video-wrap .Barrage div[data-font-size='font__size__8'] span {
  font-size: 27px;
}

#video-wrap .Barrage div[data-font-size='font__size__10'] span {
  font-size: 32px;
}

#video-wrap .Barrage div[data-font-size='font__size__NaN'] {
  font-size: 32px;
}

#video-wrap .Barrage div[data-font-size='font__size__8'] span, #video-wrap .Barrage div[data-font-size='font__size__10'] span {
  color: #f35626;
  background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 2s infinite linear;
}

#video-wrap .Barrage div.red {
  color: #ff0000 !important;
}

#video-wrap .Barrage div span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  font-size: 32px;
  font-weight: bold;
  font-family: "MicrosoftYaHei";
  -webkit-text-stroke: 1.2px #fff;
}

#video-wrap .Barrage div img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 20px;
  width: 37px;
  border-radius: 50%;
  height: 37px;
}
#video-wrap .Barrage div img.danmu-eggs-img{
  border-radius: 0;
  width: 43px ;
  height: 54px;
  margin-right: 10px;
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(360deg);
    transform: perspective(400px) rotateY(360deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(360deg);
    transform: perspective(400px) rotateY(360deg);
  }
}

.right {
  position: absolute;
  visibility: hidden;
  white-space: nowrap;
  transform: translateX(1061px);
}

.left {
  position: absolute;
  white-space: nowrap;
  user-select: none;
}

@keyframes zoomBigSmall {
  0% {
    transform: scale(0.01);
  }
  5%,
  15%,
  25%,
  35%,
  45%,
  55%,
  65%,
  75%,
  85% {
    transform: scale(1);
  }
  10%,
  20%,
  30%,
  40%,
  50%,
  60%,
  70%,
  80%,
  90% {
    transform: scale(1.2);
  }
  95% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}