.b-hero-bootcamp {
  --illus-width: 17.5rem;
  --top: 53%;
}
@media only screen and (max-width: 1530px) {
  .b-hero-bootcamp {
    --illus-width: 14rem;
    --top: 56%;
  }
}
@media only screen and (max-width: 987px) {
  .b-hero-bootcamp {
    --illus-width: min(50vw, 55vh);
    --top: 54.5%;
  }
}
@media only screen and (max-width: 767px) and (orientation: landscape),
  only screen and (max-width: 576px) {
  .b-hero-bootcamp {
    --illus-width: min(65vw, 55vh);
  }
}
.b-hero-bootcamp .b__illus {
  position: absolute;
  top: var(--top);
  left: 50%;
  width: var(--illus-width);
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  will-change: opacity, transform;
}
.b-hero-bootcamp .b__illus:before {
  display: block;
  padding-top: 133.3333%;
  content: "";
}
.b-hero-bootcamp .b__illus .b__head {
  position: absolute;
  top: 25%;
  left: 33.3333%;
  width: 33.3333%;
  background: var(--color-black);
  border-radius: 50%;
}
.b-hero-bootcamp .b__illus .b__head:before {
  display: block;
  padding-top: 100%;
  content: "";
}
.b-hero-bootcamp .b__illus .b__head .b__eye {
  position: absolute;
  top: 28.8643%;
  left: 4%;
  z-index: 2;
  width: 92%;
  height: 42.2714%;
}
.b-hero-bootcamp .b__illus .b__head .b__eye.is-set {
  background: #fff;
  clip-path: var(--path-open);
  animation: eye-blink 6s infinite;
  transition: clip-path 0.2s cubic-bezier(0.86, 0, 0.07, 1);
}
.b-hero-bootcamp .b__illus .b__head .b__pupil {
  --x-move: calc(
    (
        calc(
            var(--mouse-progress-x) * var(--mouse-progress-x) *
              (3 - 2 * var(--mouse-progress-x))
          ) - 0.5
      ) * 50%
  );
  --y-move: calc(
    (
        calc(
            var(--mouse-progress-y) * var(--mouse-progress-y) *
              (3 - 2 * var(--mouse-progress-y))
          ) - 0.5
      ) * 30%
  );
  position: absolute;
  top: 0;
  left: 27.6%;
  width: 44.8%;
  height: 100%;
  background: #ff8787;
  border-radius: 50%;
  transform: translate3d(var(--x-move), var(--y-move), 0);
}
.b-hero-bootcamp .b__illus .b__head.is-paused .b__eye {
  animation: none;
}
.b-hero-bootcamp .b__illus .b__head.is-paused .b__pupil {
  transform: none;
}
@keyframes b-hero-bootcamp-toggle {
  0%,
  25% {
    transform: translate3d(0, 0, 0);
  }
  50%,
  75% {
    transform: translate3d(0, 100%, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
.b-hero-bootcamp .b__illus .b__toggle {
  position: absolute;
  width: 33.3333%;
  height: 50%;
  background: var(--color-brand-3);
  border-radius: 999rem;
  will-change: transform;
}
.b-hero-bootcamp .b__illus .b__toggle:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 50%;
  background: var(--color-brand-7);
  border-radius: 50%;
  animation: b-hero-bootcamp-toggle 5s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  content: "";
}
.b-hero-bootcamp .b__illus .b__toggle--1 {
  top: 0;
  left: 0;
  background: var(--color-brand-3);
}
.b-hero-bootcamp .b__illus .b__toggle--1:before {
  background: var(--color-brand-7);
  animation-delay: 0.5s;
  animation-duration: 4s;
}
.b-hero-bootcamp .b__illus .b__toggle--2 {
  right: 0;
  bottom: 0;
  background: var(--color-brand-7);
}
.b-hero-bootcamp .b__illus .b__toggle--2:before {
  background: var(--color-brand-3);
  animation-delay: 2s;
  animation-duration: 5s;
}
.b-hero-bootcamp .b__illus .b__toggle--3 {
  top: 0;
  left: 33.33%;
  background: var(--color-brand-1);
}
.b-hero-bootcamp .b__illus .b__toggle--3:before {
  background: var(--color-brand-2);
  animation-delay: 1s;
  animation-duration: 6s;
}
.b-hero-bootcamp .b__illus .b__toggle--4 {
  top: 75%;
  left: 0;
  background: var(--color-brand-4);
}
.b-hero-bootcamp .b__illus .b__toggle--4:before {
  background: var(--color-brand-1);
  animation-delay: 3s;
  animation-duration: 4.5s;
}
.b-hero-bootcamp .b__illus .b__toggle--horizontal {
  rotate: -90deg;
  transform-origin: 50% 25%;
}
@keyframes b-hero-bootcamp-pie {
  0% {
    stroke-dashoffset: 157px;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -157px;
  }
}
.b-hero-bootcamp .b__illus .b__pie {
  position: absolute;
  width: 33.3333%;
  will-change: transform;
}
.b-hero-bootcamp .b__illus .b__pie:before {
  display: block;
  padding-top: 100%;
  content: "";
}
.b-hero-bootcamp .b__illus .b__pie svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: blue;
  border-radius: 50%;
}
.b-hero-bootcamp .b__illus .b__pie svg circle {
  stroke: red;
  stroke-dasharray: 157px 157px;
  animation: b-hero-bootcamp-pie 15s linear infinite;
}
.b-hero-bootcamp .b__illus .b__pie--1 {
  top: 25%;
  right: 0;
}
.b-hero-bootcamp .b__illus .b__pie--1 svg {
  background: var(--color-brand-4);
}
.b-hero-bootcamp .b__illus .b__pie--1 svg circle {
  stroke: var(--color-brand-2);
  animation-duration: 17.5s;
}
.b-hero-bootcamp .b__illus .b__pie--2 {
  top: 50%;
  left: 0;
}
.b-hero-bootcamp .b__illus .b__pie--2 svg {
  background: var(--color-brand-7);
}
.b-hero-bootcamp .b__illus .b__pie--2 svg circle {
  stroke: var(--color-black);
  animation-delay: 0s;
  animation-duration: 20s;
}
.b-hero-bootcamp .b__illus .b__pie--3 {
  top: 50%;
  left: 33.3333%;
}
.b-hero-bootcamp .b__illus .b__pie--3 svg {
  background: var(--color-brand-2);
}
.b-hero-bootcamp .b__illus .b__pie--3 svg circle {
  stroke: var(--color-brand-7);
}
.b-hero-bootcamp .b__line {
  position: absolute;
  top: calc(var(--top) - 0.25rem);
  width: calc(50vw - var(--illus-width) / 2 - 2rem);
  height: 0.5rem;
}
@media only screen and (max-width: 767px) and (orientation: landscape),
  only screen and (max-width: 576px) {
  .b-hero-bootcamp .b__line {
    width: calc(50vw - var(--illus-width) / 2 - 8.75vw + 0.3334rem);
  }
}
.b-hero-bootcamp .b__line:before {
  position: absolute;
  top: 0;
  box-sizing: border-box;
  width: 0.6667rem;
  height: 0.6667rem;
  border: 0.1667rem solid var(--color-black);
  border-radius: 50%;
  content: "";
}
.b-hero-bootcamp .b__line:after {
  position: absolute;
  top: 50%;
  width: auto;
  height: 0.1667rem;
  background: var(--color-black);
  content: "";
}
.b-hero-bootcamp .b__line:nth-child(1) {
  left: 0;
}
.b-hero-bootcamp .b__line:nth-child(1):before {
  right: 0;
}
.b-hero-bootcamp .b__line:nth-child(1):after {
  right: 0.6667rem;
  left: 0;
}
.b-hero-bootcamp .b__line:nth-child(2) {
  right: 0;
}
.b-hero-bootcamp .b__line:nth-child(2):before {
  left: 0;
}
.b-hero-bootcamp .b__line:nth-child(2):after {
  right: 0;
  left: 0.6667rem;
}