:root {
  --theme-color: #003f88;
  --noticeColor: #d41c1c;
  --warnColor: #e6a23c;
  --gray-f4: #f4f4f4;
  --c-33: #333;
  --c-66: #666;
  --c-99: #999;
  --c-cc: #ccc;
}

.myLazyload {
  position: relative;
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  background: -webkit-gradient(linear, left top, left bottom, from(var(--theme-color)), to(#f0f0f0));
  background: -webkit-linear-gradient(top, var(--theme-color), #f0f0f0 100%);
  background: -moz-linear-gradient(top, var(--theme-color), #f0f0f0 100%);
  background: -o-linear-gradient(top, var(--theme-color), #f0f0f0 100%);
  background: linear-gradient(to bottom, var(--theme-color), #f0f0f0 100%);
  overflow: hidden;
}
.myLazyload::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.3rem;
  height: 0.3rem;
  border: 0.03rem solid #ccc;
  border-top-color: var(--theme-color);
  -webkit-border-radius: 50%;
          border-radius: 50%;
  -webkit-animation: spin 1s linear infinite;
     -moz-animation: spin 1s linear infinite;
       -o-animation: spin 1s linear infinite;
          animation: spin 1s linear infinite;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.myLazyload:has(.loaded)::before {
  display: none;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-moz-keyframes spin {
  0% {
    -moz-transform: translate(-50%, -50%) rotate(0deg);
         transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -moz-transform: translate(-50%, -50%) rotate(360deg);
         transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: translate(-50%, -50%) rotate(0deg);
       transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -o-transform: translate(-50%, -50%) rotate(360deg);
       transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
       -moz-transform: translate(-50%, -50%) rotate(0deg);
         -o-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
       -moz-transform: translate(-50%, -50%) rotate(360deg);
         -o-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}