.countdown-box {
  width: 400rpx;
  height: 400rpx;
  padding: 0;
  .countdown-title {
    margin-top: 52rpx;
    margin-bottom: 60rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #030000;
    line-height: 60rpx;
  }
  .countdown-content {
    display: flex;
    justify-content: center;
  }

  .countdown-popup-loading {
    position: relative;
  }

  .countdown-popup-loading-time {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin: auto;
    font-size: 54rpx;
    text-align: center;
    color: #ecf0f3;
    font-weight: bold;
  }

  .ui-loading__bg {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #ecf0f3;
    /* background-image: conic-gradient(#3CACFF 100%,#000 0%); */
  }
  .ui-loading__bg::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background-color: #fff;
  }

  .ui-loading {
    position: absolute;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background: transparent;
    box-sizing: border-box;
    border: 10rpx solid #3cacff;
    clip-path: polygon(0% 0%, 25% 0%, 50% 50%, 0% 25%);
    animation: countdownRotate 1s linear infinite;
  }

  @keyframes countdownRotate {
    from {
      transform: rotateZ(0deg);
    }
    to {
      transform: rotateZ(360deg);
    }
  }
}
