html[data-theme='dark'] .app-loading {
     background-color: #2c344a;
 }

 html[data-theme='dark'] .app-loading .app-loading-title {
     color: rgb(255 255 255 / 85%);
 }
 html[data-theme="dark"] .ant-steps-navigation .ant-steps-item::after {
     border-bottom: none;
     border-left: none;
}

 .app-loading {
     display: flex;
     width: 100%;
     height: 100%;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     background-color: #f4f7f9;
 }

 .app-loading .app-loading-wrap {
     position: absolute;
     top: 50%;
     left: 50%;
     display: flex;
     transform: translate3d(-50%, -50%, 0);
     justify-content: center;
     align-items: center;
     flex-direction: column;
     background-color: transparent;
 }

 .app-loading .dots {
     display: flex;
     padding: 98px;
     justify-content: center;
     align-items: center;
 }

 .app-loading .app-loading-title {
     display: flex;
     margin-top: 30px;
     font-size: 30px;
     color: rgb(0 0 0 / 85%);
     justify-content: center;
     align-items: center;
 }

 .app-loading .app-loading-logo {
     display: block;
     width: 90px;
     margin: 0 auto;
     margin-bottom: 20px;
     border: none;
 }

 .dot {
     position: relative;
     display: inline-block;
     width: 48px;
     height: 48px;
     margin-top: 30px;
     font-size: 32px;
     transform: rotate(45deg);
     box-sizing: border-box;
     animation: antRotate 1.2s infinite linear;
 }

 .dot i {
     position: absolute;
     display: block;
     width: 20px;
     height: 20px;
     background-color: #0065cc;
     border-radius: 100%;
     opacity: 30%;
     transform: scale(0.75);
     animation: antSpinMove 1s infinite linear alternate;
     transform-origin: 50% 50%;
 }

 .dot i:nth-child(1) {
     top: 0;
     left: 0;
 }

 .dot i:nth-child(2) {
     top: 0;
     right: 0;
     animation-delay: 0.4s;
 }

 .dot i:nth-child(3) {
     right: 0;
     bottom: 0;
     animation-delay: 0.8s;
 }

 .dot i:nth-child(4) {
     bottom: 0;
     left: 0;
     animation-delay: 1.2s;
 }

 @keyframes antRotate {
     to {
         transform: rotate(405deg);
     }
 }

 @-webkit-keyframes antRotate {
     to {
         transform: rotate(405deg);
     }
 }

 @keyframes antSpinMove {
     to {
         opacity: 100%;
     }
 }

 @-webkit-keyframes antSpinMove {
     to {
         opacity: 100%;
     }
 }

 .l-dots {
   color: #333;
   font-weight: 600;
   font-size: 18;
   margin-left: 3em;
 }
 /* 点的基本样式 */
.l-dot {
  width: 4px;
  height: 4px;
  background-color: rgb(0, 2, 74); /* 点的颜色 */
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px; /* 两个点之间的间距 */
  opacity: 0; /* 初始透明度为 0 */
  animation: dotAnimation 0.8s ease infinite alternate; /* 动画效果，逐渐显现和消失 */
  /* 如果需要，可以在这里添加其他样式 */
}

/* 动画效果的定义 */
@keyframes dotAnimation {
  0% {
    opacity: 0; /* 初始透明度为 0 */
  }
  25% {
    opacity: 1; /* 第一个点显示 */
  }
  50% {
    opacity: 0; /* 第一个点消失，第二个点显示 */
  }
  75% {
    opacity: 1; /* 第二个点显示 */
  }
  100% {
    opacity: 0; /* 第二个点消失，循环开始 */
  }
}

/* 设置不同的延迟时间 */
.l-dot:nth-child(1) {
  animation-delay: 0.2s;
}

.l-dot:nth-child(2) {
  animation-delay: 0.4s;
}

.l-dot:nth-child(3) {
  animation-delay: 0.6s;
}