/* Ellipse-web background inspired by https://codepen.io/pat_hg/pen/vNbEQw */
.mainCon .sec01 {
  --hero-bg-color: #FF5D00;
  --hero-bg-opacity: 0.25;
  --hero-ellipse-step: calc(max(100vw, 100vh) / 48);
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.mainCon .sec01 .heroBackground {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  opacity: var(--hero-bg-opacity);
  pointer-events: none;
  user-select: none;
}

.mainCon .sec01 .heroEllipse {
  position: absolute;
  top: 50%;
  left: 3%;
  width: calc(var(--ellipse-index) * var(--hero-ellipse-step));
  height: calc(var(--ellipse-index) * var(--hero-ellipse-step) / 20);
  border: 1px solid var(--hero-bg-color);
  border-radius: 50%;
  transform: rotate(calc(var(--ellipse-index) * 7deg));
  transform-origin: center;
  animation: mainHeroEllipseSpin calc(16s + var(--ellipse-index) * 0.8s) linear infinite;
  animation-delay: calc(var(--ellipse-index) * -0.45s);
  animation-play-state: paused;
}

.mainCon .sec01 .heroEllipse:nth-child(even) { animation-direction: reverse; }
.mainCon .sec01 .heroBackground.is-running .heroEllipse { animation-play-state: running; }
.mainCon .sec01 .con01 { position: relative; z-index: 1; }

@keyframes mainHeroEllipseSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .mainCon .sec01 .heroEllipse { animation: none; }
}