.press-record {
  height: 100vh;
  overflow-y: auto;
  background: rgba(255, 255, 255, .60) url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/match-mask-bg.png) no-repeat;
  background-size: 100% 100%;
  padding: .38rem .28rem;
}

.press-record__box {
  display: flex;

  .press-record__dot {
    width: .24rem;
    height: .24rem;
    background: url(https://image-1251917893.file.myqcloud.com/tip-project/pubg/pubg-match/icon-step-dot.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
    z-index: 2;
  }

  .press-record__dot--active {
    &::after {
      content: '';
      width: .06rem;
      height: 2.2rem;
      border-radius: .1rem;
      background: #d3ceee;
      position: absolute;
      top: .22rem;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
    }
  }

  .press-record__info {
    margin: -.1rem 0 .8rem .44rem;

    .press-record__title {
      color: #212124;
      font-size: .32rem;
      line-height: .48rem; 
    }

    .press-record__desc,
    .press-record__text {
      color: #212124;
      font-size: .28rem;
      line-height: .44rem; 
      opacity: .75;
    }
  }
}