/*!
 *  build: shine-server  
 *  time: 2026-3-3 10:45:19
 */
.first-loading-wrp { /* iOS 需要前缀 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  min-height: 90vh;
}
.first-loading-wrp > h1 {
  font-size: 30px;
  font-weight: bolder;
}
.first-loading-wrp .loading-wrp {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 98px;
}
.dot {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 64px;
  height: 64px;
  font-size: 64px;
  transform: rotate(45deg);
  animation: antRotate 1.2s infinite linear;
}
.dot i {
  position: absolute;
  display: block;
  width: 28px;
  height: 28px;
  background-color: #6FBA2C;
  border-radius: 100%;
  opacity: 0.3;
  transform: scale(0.75);
  transform-origin: 50% 50%;
  animation: antSpinMove 1s infinite linear alternate;
}
.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);
}
}
@keyframes antSpinMove {
to {
    opacity: 1;
}
}

/* ================= 新增加载动画 ================= */
/* 1) 三点跳动 */
.dot-bounce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.dot-bounce i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6FBA2C;
  animation: dotBounce 0.9s infinite ease-in-out;
  /* pc端的时候，宽度高度为24px */
@media (min-width: 1024px) {
    width: 24px;
    height: 24px;
}
  /* 移动端的时候，宽度高度为12px */
@media (max-width: 1023px) {
    width: 12px;
    height: 12px;
}
}
.dot-bounce i:nth-child(2) { animation-delay: 0.15s;
}
.dot-bounce i:nth-child(3) { animation-delay: 0.3s;
}
@keyframes dotBounce {
0%, 80%, 100% { transform: scale(0.3); opacity: 0.3;
}
40% { transform: scale(1); opacity: 1;
}
}

/* 2) 圆环旋转 */
.ring-spin {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(24, 144, 255, 0.2);
  border-top-color: #6FBA2C;
  border-radius: 50%;
  animation: ringSpin 0.9s linear infinite;
}
@keyframes ringSpin {
to { transform: rotate(360deg);
}
}

/* 3) 条形脉冲 */
.bar-pulse {
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 32px;
   /* pc端的时候，宽度高度为24px */
@media (min-width: 1024px) {
    height: 50px;
}
  /* 移动端的时候，宽度高度为12px */
@media (max-width: 1023px) {
    height: 32px;
}
}
.bar-pulse i {
  display: inline-block;
  width: 6px;
  height: 100%;
   /* pc端的时候，宽度高度为24px */
@media (min-width: 1024px) {
    width: 10px;
}
  /* 移动端的时候，宽度高度为12px */
@media (max-width: 1023px) {
    width: 6px;
}
  background: #6FBA2C;
  animation: barPulse 1s infinite ease-in-out;
}
.bar-pulse i:nth-child(2) { animation-delay: 0.1s;
}
.bar-pulse i:nth-child(3) { animation-delay: 0.2s;
}
.bar-pulse i:nth-child(4) { animation-delay: 0.3s;
}
@keyframes barPulse {
0%, 100% { transform: scaleY(0.4); opacity: 0.4;
}
50% { transform: scaleY(1); opacity: 1;
}
}
body .base-color{color:#6fba2c}body .base-background-color{background-color:#6fba2c}.base-header-svg-icon-color{color:#000 !important}.iconpark-icon{width:16px;height:16px;color:#000;vertical-align:middle}.base-background-color-1{background-color:rgba(222,230,222,.3)}.base-background-color-2{background-color:rgba(222,228,230,.3)}.base-background-color-3{background-color:rgba(230,228,222,.3)}.device-info-title{font-size:18px;color:#6a835f;margin-bottom:20px;font-weight:bold}.base-color-link-c{color:#5fb4ff}.base-color-link-bg{background-color:#5fb4ff}.font-weight-default{font-weight:400}.font-weight-small{font-weight:500}.font-weight-middle{font-weight:600}.font-weight-big{font-weight:700}