.box-top .border-box .bg-border-style{
  position:relative;
  transform:translateZ(0);
}

.box-top .border-box .bg-border-style.live-ball-roll{
  overflow:hidden;
}

.box-top .border-box .bg-border-style .span1{
  min-width:1.5em;
  text-align:center;
  transform-origin:center;
  will-change:color;
}

.box-top .border-box .bg-border-style.live-ball-roll .span1{
  color:transparent!important;
}

.box-top .border-box .bg-border-style.live-ball-roll::before,
.box-top .border-box .bg-border-style.live-ball-roll::after{
  position:absolute;
  top:0;
  left:0;
  z-index:3;
  width:100%;
  height:40px;
  color:#000;
  font-size:22px;
  font-weight:700;
  line-height:40px;
  text-align:center;
  pointer-events:none;
  will-change:transform;
}

.box-top .border-box .bg-border-style.live-ball-roll::before{
  content:attr(data-roll-previous);
  animation:live-ball-old-up .72s cubic-bezier(.22,.72,.2,1) both;
}

.box-top .border-box .bg-border-style.live-ball-roll::after{
  content:attr(data-roll-current);
  animation:live-ball-new-up .72s cubic-bezier(.22,.72,.2,1) both;
}

@keyframes live-ball-old-up{
  0%{transform:translateY(0)}
  100%{transform:translateY(-40px)}
}

@keyframes live-ball-new-up{
  0%{transform:translateY(40px)}
  100%{transform:translateY(0)}
}

@media (prefers-reduced-motion:reduce){
  .box-top .border-box .bg-border-style.live-ball-roll .span1{animation-duration:.18s}
}