.myLazyload {
  position: relative;
  width: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  overflow: hidden;
  --time: 3.2s;
  --size: 1.3rem;
  --sun-size: 1.25rem;
  --sun-color: #f6c564;
  --eye-size: .26rem;
  --eye-color: #fb6f20;
  --bg: linear-gradient(to bottom, var(--theme-color) 0%, #cedef0 70%, #f0f0f0 100%);
  background: var(--bg);
}
.myLazyload .loaded {
  z-index: 1;
}
.myLazyload:has(.loaded) .loadingBox,
.myLazyload:has(.loaded) .loadingBox::before {
  display: none;
}
.myLazyload.loaded {
  background: transparent;
}
.myLazyload.loaded .loadingBox,
.myLazyload.loaded .loadingBox::before {
  display: none;
}
.myLazyload .loadingBox::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #cedef0;
  z-index: 1;
}
.myLazyload .loadingBox {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 101;
  background: var(--bg);
}
.myLazyload .sun {
  width: var(--size);
  height: var(--size);
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 33%;
  bottom: 0;
  z-index: 0;
  -webkit-animation: move var(--time) infinite linear;
     -moz-animation: move var(--time) infinite linear;
       -o-animation: move var(--time) infinite linear;
          animation: move var(--time) infinite linear;
  opacity: 0.666;
  -webkit-filter: drop-shadow(0 0 10px rgba(246, 197, 100, 0.8));
          filter: drop-shadow(0 0 10px rgba(246, 197, 100, 0.8));
}
.myLazyload .sun .eye {
  position: absolute;
  width: 0.26rem;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  top: 39%;
  left: 30%;
  -webkit-animation: eye var(--time) infinite linear;
     -moz-animation: eye var(--time) infinite linear;
       -o-animation: eye var(--time) infinite linear;
          animation: eye var(--time) infinite linear;
  z-index: 0;
  margin: auto;
}
.myLazyload .sun .eye i {
  display: block;
  width: 100%;
  height: 100%;
  font-size: var(--eye-size);
  color: var(--eye-color);
}
.myLazyload .sun .sunbody {
  width: 100%;
  height: 100%;
  -webkit-animation: scroll var(--time) infinite linear;
     -moz-animation: scroll var(--time) infinite linear;
       -o-animation: scroll var(--time) infinite linear;
          animation: scroll var(--time) infinite linear;
}
.myLazyload .sun .sunbody i {
  width: 100%;
  height: 100%;
  display: block;
  font-size: var(--sun-size);
  color: var(--sun-color);
}
.myLazyload .sun .sunbody i::before {
  display: block;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.myLazyload .loadingBox p {
  position: absolute;
  left: 0;
  right: 0;
  top: 70%;
  bottom: 0;
  margin: auto;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
  font-size: 0.2rem;
  color: #333;
  -webkit-animation: opp var(--time) infinite linear;
     -moz-animation: opp var(--time) infinite linear;
       -o-animation: opp var(--time) infinite linear;
          animation: opp var(--time) infinite linear;
  z-index: 1;
}
@-webkit-keyframes move {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  70% {
    -webkit-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-moz-keyframes move {
  0% {
    -moz-transform: translateY(0);
         transform: translateY(0);
  }
  10% {
    -moz-transform: translateY(0);
         transform: translateY(0);
  }
  40% {
    -moz-transform: translateY(-40px);
         transform: translateY(-40px);
  }
  70% {
    -moz-transform: translateY(-40px);
         transform: translateY(-40px);
  }
  100% {
    -moz-transform: translateY(0);
         transform: translateY(0);
  }
}
@-o-keyframes move {
  0% {
    -o-transform: translateY(0);
       transform: translateY(0);
  }
  10% {
    -o-transform: translateY(0);
       transform: translateY(0);
  }
  40% {
    -o-transform: translateY(-40px);
       transform: translateY(-40px);
  }
  70% {
    -o-transform: translateY(-40px);
       transform: translateY(-40px);
  }
  100% {
    -o-transform: translateY(0);
       transform: translateY(0);
  }
}
@keyframes move {
  0% {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
  10% {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-40px);
       -moz-transform: translateY(-40px);
         -o-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  70% {
    -webkit-transform: translateY(-40px);
       -moz-transform: translateY(-40px);
         -o-transform: translateY(-40px);
            transform: translateY(-40px);
  }
  100% {
    -webkit-transform: translateY(0);
       -moz-transform: translateY(0);
         -o-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes scroll {
  0% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  40% {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(41.5deg);
            transform: rotate(41.5deg);
  }
  60% {
    -webkit-transform: rotate(41.5deg);
            transform: rotate(41.5deg);
  }
  100% {
    -webkit-transform: rotate(41.5deg);
            transform: rotate(41.5deg);
  }
}
@-moz-keyframes scroll {
  0% {
    -moz-transform: rotate(0);
         transform: rotate(0);
  }
  40% {
    -moz-transform: rotate(0);
         transform: rotate(0);
  }
  50% {
    -moz-transform: rotate(41.5deg);
         transform: rotate(41.5deg);
  }
  60% {
    -moz-transform: rotate(41.5deg);
         transform: rotate(41.5deg);
  }
  100% {
    -moz-transform: rotate(41.5deg);
         transform: rotate(41.5deg);
  }
}
@-o-keyframes scroll {
  0% {
    -o-transform: rotate(0);
       transform: rotate(0);
  }
  40% {
    -o-transform: rotate(0);
       transform: rotate(0);
  }
  50% {
    -o-transform: rotate(41.5deg);
       transform: rotate(41.5deg);
  }
  60% {
    -o-transform: rotate(41.5deg);
       transform: rotate(41.5deg);
  }
  100% {
    -o-transform: rotate(41.5deg);
       transform: rotate(41.5deg);
  }
}
@keyframes scroll {
  0% {
    -webkit-transform: rotate(0);
       -moz-transform: rotate(0);
         -o-transform: rotate(0);
            transform: rotate(0);
  }
  40% {
    -webkit-transform: rotate(0);
       -moz-transform: rotate(0);
         -o-transform: rotate(0);
            transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(41.5deg);
       -moz-transform: rotate(41.5deg);
         -o-transform: rotate(41.5deg);
            transform: rotate(41.5deg);
  }
  60% {
    -webkit-transform: rotate(41.5deg);
       -moz-transform: rotate(41.5deg);
         -o-transform: rotate(41.5deg);
            transform: rotate(41.5deg);
  }
  100% {
    -webkit-transform: rotate(41.5deg);
       -moz-transform: rotate(41.5deg);
         -o-transform: rotate(41.5deg);
            transform: rotate(41.5deg);
  }
}
@-webkit-keyframes eye {
  0% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    left: 0%;
    right: 25%;
  }
  50% {
    -webkit-transform: translateX(0px) scale(1, 1);
            transform: translateX(0px) scale(1, 1);
    left: 0%;
    right: 25%;
  }
  55% {
    -webkit-transform: translateX(0px) scale(1, 0.1);
            transform: translateX(0px) scale(1, 0.1);
    left: 0%;
    right: 25%;
  }
  60% {
    -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
    left: 0%;
    right: 25%;
  }
  70% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
}
@-moz-keyframes eye {
  0% {
    -moz-transform: translateX(0px);
         transform: translateX(0px);
    left: 0%;
    right: 25%;
  }
  50% {
    -moz-transform: translateX(0px) scale(1, 1);
         transform: translateX(0px) scale(1, 1);
    left: 0%;
    right: 25%;
  }
  55% {
    -moz-transform: translateX(0px) scale(1, 0.1);
         transform: translateX(0px) scale(1, 0.1);
    left: 0%;
    right: 25%;
  }
  60% {
    -moz-transform: translateX(0px) scale(1);
         transform: translateX(0px) scale(1);
    left: 0%;
    right: 25%;
  }
  70% {
    -moz-transform: translateX(0px);
         transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
  100% {
    -moz-transform: translateX(0px);
         transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
}
@-o-keyframes eye {
  0% {
    -o-transform: translateX(0px);
       transform: translateX(0px);
    left: 0%;
    right: 25%;
  }
  50% {
    -o-transform: translateX(0px) scale(1, 1);
       transform: translateX(0px) scale(1, 1);
    left: 0%;
    right: 25%;
  }
  55% {
    -o-transform: translateX(0px) scale(1, 0.1);
       transform: translateX(0px) scale(1, 0.1);
    left: 0%;
    right: 25%;
  }
  60% {
    -o-transform: translateX(0px) scale(1);
       transform: translateX(0px) scale(1);
    left: 0%;
    right: 25%;
  }
  70% {
    -o-transform: translateX(0px);
       transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
  100% {
    -o-transform: translateX(0px);
       transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
}
@keyframes eye {
  0% {
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
    left: 0%;
    right: 25%;
  }
  50% {
    -webkit-transform: translateX(0px) scale(1, 1);
       -moz-transform: translateX(0px) scale(1, 1);
         -o-transform: translateX(0px) scale(1, 1);
            transform: translateX(0px) scale(1, 1);
    left: 0%;
    right: 25%;
  }
  55% {
    -webkit-transform: translateX(0px) scale(1, 0.1);
       -moz-transform: translateX(0px) scale(1, 0.1);
         -o-transform: translateX(0px) scale(1, 0.1);
            transform: translateX(0px) scale(1, 0.1);
    left: 0%;
    right: 25%;
  }
  60% {
    -webkit-transform: translateX(0px) scale(1);
       -moz-transform: translateX(0px) scale(1);
         -o-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
    left: 0%;
    right: 25%;
  }
  70% {
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
  100% {
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
         -o-transform: translateX(0px);
            transform: translateX(0px);
    left: 0%;
    right: -25%;
  }
}
@-webkit-keyframes opp {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes opp {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes opp {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes opp {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}