@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap");

///COLORS

$bg: #595455;

$body: #47423f;
$body2: #332f2d;
$body3: #1e1b1b;
$bodyShadow: #1e1a1b;

$hubber: #2e2d33;

$silver1: #dfdfdf;
$silver2: #cfcfcf;
$silver3: #929292;
$silver4: #6c6c6c;

$red1: #b74444;

$mesh: #201d1c;
$topspmesh: #363030;
$speakerInner: #393636;
$speakerInner2: #4e4b4a;

$btmLight1: #363834;
$btmLight2: #141212;

$sc2line: #302b2b;
$sc2body: #524f48;
$sc2rollerside1: #312f34;
$sc2rollerside2: #2e2b2d;
$sc2rollerbar: #3c3530;
$sc2clockback: #cabcbc;
$sc2label: #e0e3f3;

$sc3body1: #281e1d;
$sc3body2: #443e40;
$sc3body3: #b1b1b1;
$sc3window: #453b3a;
$sc3tapecolor1: #54b39b;
$sc3tapecolor2: #e65946;
$sc3tape1: #f0cb74;
$sc3tape2: #b09e91;
$sc3tapehole1: #a78472;
$sc3tapehole2: #6c5652;
$sc3tapehole3: #eab5a8;
$sc3tape1: #f0cb74;

$sc4bodylight: #3b3a3d;
$sc4body: #30292a;
$sc4shadow: #242425;
$sc4sw1: #e7f8fa;
$sc4sw2: #d2dee1;
$sc4red1: #dc7479;
$sc4red2: #f25452;
$sc4red3: #e25152;

$sc5body1: #a4a4b2;
$sc5body2: #585860;
$sc5body3: #2e2d33;
$sc5red: #d4bbc1;
$sc5box: #2e292a;
$sc5eqshadow1: #0e0e10;
$sc5eqshadow2: #38393f;
$sc5eqshadow3: #0b0b0d;

*,
*::after,
*::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

:root {
  --size: 69; //You can change the size here
  --unit: calc((var(--size) / 242) * 1vmin);
}

body {
  background: $bg;
  min-height: 100vh;
}

img {
  height: calc(var(--size) * 1vmin);
  opacity: 0.8;
}

img,
.boombox {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.transCenter {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.boombox {
  width: calc(362 * var(--unit));
  height: calc(242 * var(--unit));
  // border: 2px solid red;
  overflow: hidden;

  .bb__shadow {
    position: absolute;
    opacity: 0.7;
    @extend .transCenter;
    top: 88%;
    width: 90%;
    height: 7%;
    border-radius: 100%;
    filter: blur(4px);
    background: radial-gradient($body3 0% 60%, transparent);

    &__legs {
      position: absolute;
      opacity: 0.7;
      top: 86%;
      left: 8.5%;
      width: 17%;
      height: 4%;
      border-radius: 100%;
      filter: blur(4px);
      background: radial-gradient($body3 0% 50%, transparent);

      &:nth-child(2n) {
        left: 75%;
      }
    }
  }

  .bb__legs {
    position: absolute;
    top: 86%;
    left: 10%;
    width: 14%;
    height: 2%;
    background: linear-gradient($body3, $body2, $body, $body3);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);

    &:nth-child(2n) {
      left: 77%;
    }
  }

  .bb__handle {
    position: absolute;
    top: 5%;
    left: 31.5%;
    width: 37.7%;
    height: 10%;
    background: linear-gradient($silver2, $silver4, $silver3);
    clip-path: polygon(
      1.36% 0%,
      -0.39% 25.72%,
      -0.18% 100%,
      2.26% 102.21%,
      2.61% 36.28%,
      98.21% 38.5%,
      97.89% 100%,
      100% 100%,
      100% 24.5%,
      97.71% -0%
    );

    &:first-child {
      left: 32.2%;
      width: 36.5%;
      background: $silver4;
    }

    &__rubber {
      position: absolute;
      @extend .transCenter;
      top: 18%;
      width: 88%;
      height: 35%;
      background: linear-gradient(
        lighten($hubber, 20%) 0% 3%,
        $hubber 4% 20%,
        darken($hubber, 50%) 20% 23%,
        $hubber 23% 80%,
        lighten($hubber, 20%) 80% 83%,
        $hubber 83% 97%,
        darken($hubber, 20%) 97% 100%
      );
    }
  }

  .bb__body {
    position: absolute;
    top: 14%;
    left: 2%;
    width: 96%;
    height: 72%;
    overflow: hidden;
    background: linear-gradient($body 0% 2%, $body2 3% 98.3%, $body3 99% 100%);

    .big__sp {
      position: absolute;
      bottom: 0%;
      left: 0%;
      width: 29%;
      height: 59%;

      &:nth-child(1) {
        left: 71%;
      }

      &__box {
        position: absolute;
        top: 2%;
        left: 4%;
        width: 92%;
        height: 93%;
        overflow: hidden;

        //SPEAKER RIM
        &__out {
          position: absolute;
          top: -5%;
          left: -7%;
          width: calc(106 * var(--unit));
          height: calc(106 * var(--unit));
          border-radius: 100%;
          overflow: hidden;
          background: linear-gradient(
            45deg,
            $silver3,
            $silver4,
            $silver3,
            $silver2,
            $silver1,
            $silver2
          );
          filter: drop-shadow(0 2px 0.8px $bodyShadow);

          //SCREWS

          &__edge {
            position: absolute;
            width: 15%;
            height: 7%;
            background: $silver3;

            &::before {
              content: "";
              position: absolute;
              top: 100%;
              left: 0%;
              width: 100%;
              height: 40%;
              background: linear-gradient(
                10deg,
                transparent 0 50%,
                $silver1 50% 60%,
                $silver3 100%
              );
            }

            &::after {
              content: "";
              position: absolute;
              top: -30%;
              left: 0%;
              width: 100%;
              height: 40%;
              background: linear-gradient(
                -10deg,
                $silver4 0,
                $silver3 50%,
                transparent 50% 100%
              );
            }

            &:nth-child(1) {
              top: 13%;
              left: 10%;
              transform: rotate(45deg);
            }

            &:nth-child(2) {
              top: 13%;
              right: 10%;
              transform: rotate(135deg);

              &::before {
                background: linear-gradient(
                  10deg,
                  transparent 0 50%,
                  $silver3 50% 60%,
                  $silver4 100%
                );
              }

              &::after {
                background: linear-gradient(
                  -10deg,
                  $silver1 0 20%,
                  $silver2 50%,
                  transparent 50% 100%
                );
              }
            }

            &:nth-child(3) {
              bottom: 13%;
              right: 10%;
              transform: rotate(-135deg);

              &::before {
                background: linear-gradient(
                  10deg,
                  transparent 0 50%,
                  $silver3 50% 60%,
                  $silver4 100%
                );
              }

              &::after {
                background: linear-gradient(
                  -10deg,
                  $silver3 0,
                  $silver1 50%,
                  transparent 50% 100%
                );
              }
            }

            &:nth-child(4) {
              bottom: 13%;
              left: 10%;
              transform: rotate(-45deg);

              &::before {
                background: linear-gradient(
                  10deg,
                  transparent 0 50%,
                  $silver1 50% 60%,
                  $silver3 100%
                );
              }

              &::after {
                background: linear-gradient(
                  -10deg,
                  $silver4 0,
                  $silver3 50%,
                  transparent 50% 100%
                );
              }
            }

            &__screw {
              position: absolute;
              @extend .transCenter;
              width: calc(4 * var(--unit));
              height: calc(4 * var(--unit));
              border-radius: 100%;
              border: calc(1 * var(--unit)) solid $silver1;
              background: $silver3;
            }
          }

          //SPEAKER Mesh

          &__outline {
            position: absolute;
            @extend .transCenter;
            width: 83%;
            height: 83%;
            border-radius: 100%;
            background: $speakerInner;
            border: calc(2 * var(--unit)) solid $silver3;
          }

          &__inner1 {
            position: absolute;
            @extend .transCenter;
            width: 80%;
            height: 80%;
            border-radius: 100%;
            background: $speakerInner;
            border: calc(1 * var(--unit)) solid $silver1;
            overflow: hidden;
          }

          &__inner2 {
            position: absolute;
            @extend .transCenter;
            width: 54%;
            height: 54%;
            border-radius: 100%;
            background: $speakerInner2;
            backface-visibility: hidden;
            animation: 0.5s ease-in-out infinite bigspeaker;
          }

          &__inner3 {
            position: absolute;
            @extend .transCenter;
            width: 28%;
            height: 28%;
            border-radius: 100%;
            background: $silver3;
            backface-visibility: hidden;
            animation: 0.5s ease-in-out infinite bigspeaker;
          }

          &__inner4 {
            position: absolute;
            @extend .transCenter;
            width: 25%;
            height: 25%;
            border: calc(2 * var(--unit)) solid $speakerInner;
            border-radius: 100%;
            background: linear-gradient(
              45deg,
              $silver3,
              $silver4,
              $silver3,
              $silver2,
              $silver1,
              $silver2
            );
            backface-visibility: hidden;
            animation: 0.5s ease-in-out infinite bigspeaker;
          }

          &__mesh {
            opacity: 0.7;
            position: absolute;
            @extend .transCenter;
            width: 80%;
            height: 80%;
            border: calc(1 * var(--unit)) solid $red1;
            border-radius: 100%;
            background-image: radial-gradient(transparent 50%, $mesh 50%);
            background-size: calc(2 * var(--unit)) calc(2 * var(--unit));
            box-shadow: 0 2px 2px -1px $bodyShadow;
          }
        }
      }
    }

    ///TOP SPEAKER

    .top__sp__box {
      position: absolute;
      top: 4%;
      left: 1%;
      width: 27%;
      height: 36%;
      background-image: linear-gradient(
          -90deg,
          darken($body, 10%) 50%,
          transparent 50%
        ),
        linear-gradient(darken($body, 10%) 50%, $body 50%);
      background-size: calc(2 * var(--unit)) calc(2 * var(--unit));
      box-shadow: 0 3px 2px -1px $bodyShadow;
      // display: none;

      &:nth-child(2) {
        left: 72%;
        transform: rotateY(180deg);
      }

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, $body3, $body);
        opacity: 0.4;
      }

      ///TOP LEFT SPEAKER

      &__leftsp {
        position: absolute;
        top: 8%;
        left: 9%;
        width: 45%;
        height: 61%;
        background: linear-gradient(
          0deg,
          $silver3,
          $silver4,
          $silver3,
          $silver2,
          $silver1,
          $silver2
        );
        filter: drop-shadow(0 2px 0.8px $bodyShadow);

        &::before,
        &::after {
          width: 100%;
          height: 0;
          display: block;
          position: absolute;
          left: 0;
          content: "";
        }

        &:before {
          border-bottom: solid calc(3 * var(--unit)) $silver2;
          border-left: solid calc(3 * var(--unit)) transparent;
          border-right: solid calc(3 * var(--unit)) transparent;
          bottom: 100%;
        }

        &:after {
          border-top: solid calc(3 * var(--unit)) $silver3;
          border-left: solid calc(3 * var(--unit)) transparent;
          border-right: solid calc(3 * var(--unit)) transparent;
          top: 99%;
        }

        &__stick {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 120%;
          height: 10%;
          background: $body;
          transform-origin: center;
          transform: translate(-50%, -50%) rotate(45deg);
          border-radius: 50px 50px 50px 50px;
          z-index: 3;
          box-shadow: 0 2px 1px 0px $bodyShadow inset;

          &::before {
            content: "";
            position: absolute;
            top: 10%;
            left: 1%;
            width: calc(3 * var(--unit));
            height: calc(3 * var(--unit));
            background: #000;
            border-radius: 50px 50px 50px 50px;
          }

          &::after {
            content: "";
            position: absolute;
            top: 10%;
            right: 1%;
            width: calc(3 * var(--unit));
            height: calc(3 * var(--unit));
            background: #000;
            border-radius: 50px 50px 50px 50px;
          }

          &:nth-child(2) {
            transform: translate(-50%, -50%) rotate(-45deg);
          }
        }

        &__mesh {
          position: absolute;
          opacity: 0.6;
          @extend .transCenter;
          width: calc(40 * var(--unit));
          height: calc(40 * var(--unit));
          border-radius: 100%;
          border: calc(1 * var(--unit)) solid $silver1;
          background-image: radial-gradient(transparent 50%, $mesh 50%);
          background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
          z-index: 3;
        }

        &__inners {
          position: absolute;
          @extend .transCenter;
          width: calc(40 * var(--unit));
          height: calc(40 * var(--unit));
          border-radius: 100%;
          background: $speakerInner;
          z-index: 3;
          box-shadow: 0 2px 1px -1px $bodyShadow;

          &__inner1 {
            position: absolute;
            @extend .transCenter;
            width: 60%;
            height: 60%;
            border-radius: 100%;
            background: $speakerInner2;
            backface-visibility: hidden;
            animation: 0.5s ease-in-out infinite smallspeaker;
          }

          &__inner2 {
            position: absolute;
            @extend .transCenter;
            width: 25%;
            height: 25%;
            border-radius: 100%;
            background: linear-gradient(
              45deg,
              $silver4,
              $silver3,
              $silver2,
              $silver1
            );
            backface-visibility: hidden;
            animation: 0.5s ease-in-out infinite smallspeaker;
          }

          &__inner3 {
            position: absolute;
            @extend .transCenter;
            width: 22%;
            height: 22%;
            border-radius: 100%;
            border: calc(1 * var(--unit)) solid $body2;
            background: linear-gradient(
              45deg,
              $silver4,
              $silver3,
              $silver2,
              $silver1
            );
            backface-visibility: hidden;
            animation: 0.5s ease-in-out infinite smallspeaker;
          }
        }
      }

      ///TOP RIGHT SPEAKER

      &__rightsp {
        position: absolute;
        top: 8%;
        right: 10%;
        width: 35%;
        height: 61%;
        background: linear-gradient(
          0deg,
          $silver3,
          $silver4,
          $silver3,
          $silver2,
          $silver1,
          $silver2
        );
        filter: drop-shadow(0 2px 0.8px $bodyShadow);

        &::before,
        &::after {
          width: 100%;
          height: 0;
          display: block;
          position: absolute;
          left: 0;
          content: "";
        }

        &:before {
          border-bottom: solid calc(3 * var(--unit)) $silver2;
          border-left: solid calc(3 * var(--unit)) transparent;
          border-right: solid calc(3 * var(--unit)) transparent;
          bottom: 100%;
        }

        &:after {
          border-top: solid calc(3 * var(--unit)) $silver3;
          border-left: solid calc(3 * var(--unit)) transparent;
          border-right: solid calc(3 * var(--unit)) transparent;
          top: 99%;
        }

        &__mid {
          position: absolute;
          @extend .transCenter;
          top: 49%;
          width: 44%;
          height: 115%;
          background: $body2;
          z-index: 3;
          border: calc(3 * var(--unit)) $mesh #000;

          &__mesh {
            position: absolute;
            top: 0;
            width: 100%;
            height: 70%;
            background-image: radial-gradient(transparent 40%, $mesh 50%);
            background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
            box-shadow: 0 3px 2px -1px $bodyShadow;
          }
        }

        ///TOP RIGHT SPEAKER SCREWS

        &__screw {
          position: absolute;
          width: calc(4 * var(--unit));
          height: calc(4 * var(--unit));
          border-radius: 100%;
          border: calc(1 * var(--unit)) solid #000;
          background: $body;
          z-index: 3;

          &:nth-child(5) {
            top: -1%;
            left: 7%;
          }

          &:nth-child(2) {
            top: -1%;
            right: 7%;
          }

          &:nth-child(3) {
            bottom: -1%;
            right: 7%;
          }

          &:nth-child(4) {
            bottom: -1%;
            left: 7%;
          }
        }
      }

      &__btm {
        position: absolute;
        bottom: 3%;
        right: 10%;
        width: 80%;
        height: 19%;
        background: linear-gradient(
          45deg,
          $silver3,
          $silver4,
          $silver3,
          $silver2,
          $silver1,
          $silver2
        );
        filter: drop-shadow(0 2px 0.8px $bodyShadow);

        &__shade {
          position: absolute;
          @extend .transCenter;
          width: 90%;
          height: 80%;
          background: $btmLight1;
          background: linear-gradient(
            $btmLight2 0 20%,
            $btmLight1 40% 60%,
            $btmLight2 80% 100%
          );
        }

        &__light {
          position: absolute;
          top: 50%;
          transform: translate(0, -50%);
          width: calc(3 * var(--unit));
          height: calc(3 * var(--unit));
          border-radius: 100%;
          background: radial-gradient(lighten($red1, 20%) 0 30%, $red1 40% 60%);

          &:last-child {
            left: 15%;
          }

          @for $i from 1 to 9 {
            &:nth-child(#{$i}) {
              left: 5% + (10% * $i);
            }
          }
        }
      }
    }

    .middle {
      // opacity: 0.3;
      position: absolute;
      bottom: 0%;
      left: 29.5%;
      width: 41%;
      height: 100%;

      &__section1 {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 28.5%;
        background: linear-gradient(
          $body 0% 10%,
          darken($sc3body1, 6%) 10% 100%
        );
        overflow: hidden;

        &__frame {
          // opacity: 0.8;
          position: absolute;
          top: 8%;
          left: 0%;
          width: 100%;
          height: 90%;
          border: calc(6 * var(--unit)) solid $sc5box;

          &__glare {
            position: absolute;
            top: 8%;
            left: 0%;
            width: 100%;
            height: 90%;
            box-shadow: 1px 1px 2px -1px lighten($sc5box, 90%) inset,
              2px 0 2px -1px darken($sc5box, 90%) inset,
              0 -2px 2px -1px darken($sc5box, 90%) inset;
            overflow: hidden;

            &::after {
              content: "";
              opacity: 0.08;
              position: absolute;
              top: -110%;
              left: -30%;
              width: 100%;
              height: 400%;
              background: lighten($sc5box, 60%);
              transform: skewY(-65deg);
            }

            &__sheet {
              opacity: 0.1;
              position: absolute;
              top: 8%;
              left: 0%;
              width: 100%;
              height: 90%;
              background: lighten($sc5box, 60%);
            }
          }
        }

        &__stick {
          position: absolute;
          top: 8%;
          left: 40%;
          width: 0.5%;
          height: 58%;
          background: lighten($sc5box, 60%);
        }

        &__top {
          position: absolute;
          top: 28%;
          left: 9%;
          width: 82%;
          height: 45%;
          background: $sc3body1;
          background-image: linear-gradient(
              transparent 0% 95%,
              darken($sc3body1, 3%) 95% 100%
            ),
            linear-gradient(
              90deg,
              transparent 0% 95%,
              darken($sc3body1, 3%) 95% 100%
            );
          background-size: calc(4.5 * var(--unit)) calc(4.5 * var(--unit));

          &__tb {
            position: absolute;
            top: 10%;
            left: 26%;
            width: 60%;
            height: 80%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;

            &__text {
              width: 98%;
              text-align: justify;
              text-align-last: justify;
              font-family: "Fjalla One", sans-serif;
              font-size: calc(2 * var(--unit));
              color: #fff;
            }
          }

          &__leftbox {
            position: absolute;
            top: 9%;
            left: 2%;
            width: 18%;
            height: 18%;
            background: $body3;

            &__arrow {
              position: absolute;
              top: 20%;
              left: 50%;
              width: 40%;
              height: 57%;
              background: #fff;

              &::after {
                content: "";
                position: absolute;
                top: 0%;
                left: 100%;
                width: 0;
                height: 0;
                border-style: solid;
                border-width: calc(1.3 * var(--unit)) 0 calc(1.3 * var(--unit))
                  calc(1.5 * var(--unit));
                border-color: transparent transparent transparent #fff;
              }
            }

            &:nth-child(2) {
              top: 30%;
            }

            &:nth-child(3) {
              top: 53%;
            }

            &:nth-child(4) {
              top: 75%;
            }
          }
        }

        &__btm {
          position: absolute;
          top: 76%;
          left: 0%;
          width: 100%;
          height: 30%;
          background: $sc3body1;
          clip-path: polygon(
            8.36% 0%,
            91.19% -2.18%,
            101.37% 91.26%,
            -2.05% 93.45%
          );
          &__blueline__out {
            position: absolute;
            top: 2%;
            left: 0%;
            width: 100%;
            height: 40%;
            background: linear-gradient(lighten(blue, 30%), #fff);
            clip-path: polygon(
              20% 0%,
              80.91% 0%,
              97.72% 121.86%,
              5.25% 121.86%
            );
          }
          &__blueline__in {
            position: absolute;
            top: 3%;
            left: 0%;
            width: 100%;
            height: 40%;
            background: $sc3body1;
            clip-path: polygon(
              24.11% -10.93%,
              78.17% -5.46%,
              91.56% 149.18%,
              9.59% 143.72%
            );
          }
          &__redline__out {
            position: absolute;
            top: 4%;
            left: 0%;
            width: 100%;
            height: 40%;
            background: linear-gradient(lighten(red, 30%), #fff);
            clip-path: polygon(
              24.34% -5.46%,
              77.72% -5.46%,
              90.42% 149.18%,
              10.27% 149.18%
            );
          }
          &__redline__in {
            position: absolute;
            top: 5%;
            left: 0%;
            width: 100%;
            height: 40%;
            background: $sc3body1;
            clip-path: polygon(
              27.53% 10.93%,
              76.12% 10.93%,
              86.54% 149.18%,
              16.21% 154.65%
            );
          }

          &__blackline__out {
            position: absolute;
            top: 5%;
            left: 0%;
            width: 100%;
            height: 40%;
            background: $sc3body2;
            clip-path: polygon(
              32.55% 27.32%,
              69.96% 27.32%,
              77.64% 160.11%,
              26.94% 165.58%
            );
          }

          &__lines {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-image: linear-gradient(
              transparent 0% 70%,
              darken($sc3body1, 3%) 70% 100%
            );
            background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
          }
        }
      }

      &__section2 {
        position: absolute;
        top: 28.5%;
        left: 0%;
        width: 100%;
        height: 14%;
        background: $sc2body;

        &__box {
          position: absolute;
          top: 5%;
          left: 2%;
          width: 97.5%;
          height: 92%;
          border: calc(1 * var(--unit)) solid $sc2line;

          &__inner1 {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 12%;
            height: 100%;
            border-right: calc(1 * var(--unit)) solid $sc2line;

            &__blackbox {
              position: absolute;
              @extend .transCenter;
              width: 86%;
              height: 85%;
              border: calc(1.8 * var(--unit)) solid $sc2line;
            }

            &__redbox {
              position: absolute;
              @extend .transCenter;
              width: 79%;
              height: 80%;
              border: calc(0.8 * var(--unit)) solid $red1;

              &__btn {
                position: absolute;
                @extend .transCenter;
                top: 15%;
                width: 90%;
                height: 23%;
                border-radius: calc(0.5 * var(--unit));
                background: $red1;
                box-shadow: 0px 1px 1px 0px lighten($sc4sw1, 30%) inset,
                  0 -2px 2px darken($red1, 20%) inset,
                  0 2px 3px -1px $bodyShadow, 0 2px 3px 0px $bodyShadow;
              }
            }
          }

          &__inner2 {
            position: absolute;
            top: 0%;
            left: 12%;
            width: 33.3%;
            height: 100%;
            border-right: calc(1 * var(--unit)) solid $sc2line;
            background-image: linear-gradient(
                transparent 0% 50%,
                darken($sc2body, 8%) 50% 100%
              ),
              linear-gradient(
                90deg,
                transparent 0% 50%,
                darken($sc2body, 8%) 50% 100%
              );
            background-size: calc(1.3 * var(--unit)) calc(1.3 * var(--unit));

            &__clock {
              position: absolute;
              top: 18%;
              left: 4%;
              width: 40%;
              height: 30%;
              border-radius: calc(1 * var(--unit));
              border: solid $sc2label;
              border-width: calc(1 * var(--unit)) calc(1.3 * var(--unit));
              background: $sc2clockback;

              &__outline {
                position: absolute;
                top: 18%;
                left: 4%;
                width: 40%;
                height: 30%;
                border-radius: calc(1 * var(--unit));
                border: solid $sc2label;
                border-width: calc(1 * var(--unit)) calc(1.3 * var(--unit));
                box-shadow: 0px 2px 1px 0px darken($sc2clockback, 40%) inset,
                  2px 1px 2px darken($sc2clockback, 40%) inset,
                  0 0px 2px 0px $bodyShadow;
              }
            }

            &__btn {
              position: absolute;
              top: 72%;
              left: 7%;
              width: 12%;
              height: 7%;
              background: #000;
              border-radius: calc(1 * var(--unit));
              box-shadow: 0px 1px 1px 0px lighten($sc4sw1, 30%) inset,
                0 -3px 2px darken($sc2rollerside2, 40%) inset,
                0 2px 3px -1px $bodyShadow, 0 2px 3px 0px $bodyShadow;

              &:nth-child(2n) {
                left: 28%;
              }
            }
          }

          &__inner3 {
            position: absolute;
            top: 0%;
            left: 45.3%;
            width: 29%;
            height: 100%;
            border-right: calc(5 * var(--unit)) solid $sc2line;
            &__boxs {
              position: absolute;
              top: 1%;
              left: 0%;
              width: 100%;
              height: 50%;
              display: flex;

              &__bar {
                position: absolute;
                top: 1%;
                left: 1%;
                width: 99%;
                height: 23%;
                background: $sc2label;
              }
              &__btns {
                width: 25%;
                height: 100%;
                border: calc(0.5 * var(--unit)) solid $sc2line;
                &__btn {
                  margin: 60% auto 0 auto;
                  width: 78%;
                  height: 24%;
                  background: #fff;
                  border-radius: calc(0.5 * var(--unit));
                  border: 1px solid $sc4sw2;
                  background: linear-gradient(#fff 0 50%, $sc4sw2 50% 100%),
                    linear-gradient(90deg, #fff 0 50%, $sc4sw2 50% 100%);
                  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
                  box-shadow: 0px 5px 1px 0px lighten($sc4sw1, 30%) inset,
                    0 -3px 2px darken($sc4sw2, 40%) inset,
                    0 2px 3px -1px $bodyShadow, 0 2px 3px 0px $bodyShadow;
                }
              }
              &:nth-child(2) {
                top: 51%;
              }
            }
          }

          &__inner4 {
            position: absolute;
            top: 0%;
            left: 74.3%;
            width: 25.5%;
            height: 100%;

            &__top {
              position: absolute;
              top: 1%;
              left: 0%;
              width: 100%;
              height: 50%;

              &__bartop {
                position: absolute;
                top: 0%;
                left: 0%;
                width: 99%;
                height: 20%;
                background: $sc2label;
              }

              &__box {
                position: absolute;
                top: 28%;
                left: 5%;
                width: 88%;
                height: 57%;
                background: darken($sc2body, 20%);
                border: solid $sc2rollerside2;
                border-width: calc(0.3 * var(--unit)) calc(5 * var(--unit));

                &__roller {
                  position: absolute;
                  @extend .transCenter;
                  width: 90%;
                  height: 90%;
                  background: radial-gradient(#fff 0% 50%, $sc2body 80% 100%);
                  border-radius: 40%;

                  &__bar {
                    position: absolute;
                    @extend .transCenter;
                    width: 100%;
                    height: 40%;
                    background: linear-gradient(
                      45deg,
                      darken($sc2rollerbar, 20%) 0% 10%,
                      $sc2rollerbar 20% 80%,
                      darken($sc2rollerbar, 20%) 90% 100%
                    );
                  }
                }
              }
            }
            &__boxs {
              position: absolute;
              top: 51%;
              left: 0%;
              width: 100%;
              height: 50%;
              display: flex;

              &__bar {
                position: absolute;
                top: 1%;
                left: 1%;
                width: 99%;
                height: 23%;
                background: $sc2label;
              }
              &__btns {
                width: 25%;
                height: 100%;
                border: calc(0.5 * var(--unit)) solid $sc2line;
                &__btn {
                  margin: 60% auto 0 auto;
                  width: 78%;
                  height: 24%;
                  background: #fff;
                  border-radius: calc(0.5 * var(--unit));
                  border: 1px solid $sc4sw2;
                  background: linear-gradient(#fff 0 50%, $sc4sw2 50% 100%),
                    linear-gradient(90deg, #fff 0 50%, $sc4sw2 50% 100%);
                  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
                  box-shadow: 0px 5px 1px 0px lighten($sc4sw1, 30%) inset,
                    0 -3px 2px darken($sc4sw2, 40%) inset,
                    0 2px 3px -1px $bodyShadow, 0 2px 3px 0px $bodyShadow;
                }
              }
              // background: #fff;
            }
          }
        }
      }

      &__section3 {
        position: absolute;
        top: 28.5% + 14%;
        left: 0%;
        width: 100%;
        height: 22.5%;
        background: linear-gradient(-45deg, $sc4bodylight, $sc4body);
        box-shadow: 0px 2px 1px 0px $sc4bodylight inset,
          2px 0 2px 1px $sc4shadow inset, 0 -5px 1px $sc4shadow inset;

        &__box {
          position: absolute;
          @extend .transCenter;
          top: 49%;
          width: 97%;
          height: 87%;
          border-radius: calc(1 * var(--unit));
          overflow: hidden;

          &__cassets {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 40%;
            height: 100%;
            background: $sc3body2;

            &__glare {
              position: absolute;
              top: 0%;
              left: -5%;
              width: 20%;
              height: 100%;
              background: #fff;
              opacity: 0.1;
              transform: skew(-25deg);

              &:nth-child(2) {
                left: 50%;
                z-index: 5;
              }
            }

            &::after {
              content: "";
              position: absolute;
              top: 0%;
              left: 0%;
              width: 100%;
              height: 100%;
              box-shadow: 1px 1px 4px -1px lighten($sc3body1, 90%) inset,
                2px 0 2px -1px darken($sc3body1, 90%) inset,
                0 -2px 2px -1px darken($sc3body1, 90%) inset;
            }

            &__box {
              position: absolute;
              top: 0%;
              left: 0%;
              width: 100%;
              height: 87%;
              background: $sc3body1;
              overflow: hidden;

              .casset2__color {
                background: $sc3tapecolor2;
              }

              &__inner {
                position: absolute;
                top: 17%;
                left: 9%;
                width: 100%;
                height: 69%;
                background: $sc3tapecolor1;

                clip-path: polygon(
                  0% 0%,
                  100% 0%,
                  103.03% 66.81%,
                  56.84% 63.54%,
                  43.11% 98.36%,
                  0px 100%
                );

                &__in {
                  position: absolute;
                  top: 2%;
                  left: 1%;
                  width: 95%;
                  height: 95%;
                  background: $sc3window;
                  clip-path: polygon(
                    0% 1.64%,
                    100.3% 1.64%,
                    103.03% 64.36%,
                    58.05% 61.9%,
                    44.32% 98.36%,
                    0px 100%
                  );

                  &__window {
                    position: absolute;
                    top: 10%;
                    left: 14%;
                    width: 45%;
                    height: 70%;
                    background: $sc3body3;
                    overflow: hidden;

                    &__glare {
                      position: absolute;
                      opacity: 0.5;
                      top: 10%;
                      left: 14%;
                      width: 45%;
                      height: 70%;
                      box-shadow: 2px 2px 2px -1px darken($sc3body3, 50%) inset,
                        5px 2px 2px 0px darken($sc3body3, 50%) inset;
                    }

                    &__glare .cassete2__shadow {
                      box-shadow: 2px 2px 2px -1px darken($sc3body3, 50%) inset,
                        -5px 2px 2px 0px darken($sc3body3, 50%) inset !important;
                    }

                    .tapespin {
                      backface-visibility: hidden;
                      animation: 2s linear infinite tape;
                    }

                    &__tape1 {
                      position: absolute;
                      top: -2%;
                      left: -11%;
                      width: calc(18 * var(--unit));
                      height: calc(18 * var(--unit));
                      border-radius: 100%;
                      background: $sc3tape1;
                      overflow: hidden;

                      &::after {
                        content: "";
                        position: absolute;
                        @extend .transCenter;
                        width: calc(19 * var(--unit));
                        height: calc(19 * var(--unit));
                        border-radius: 100%;
                        border: calc(2.2 * var(--unit)) solid $sc3tape1;
                      }

                      &__holes {
                        position: absolute;
                        @extend .transCenter;
                        width: 32%;
                        height: 100%;
                        background: $sc3tapehole1;
                        transform: translate(-50%, -50%) rotate(120deg);
                        transform-origin: bottom;
                        top: 0%;
                        clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
                        box-shadow: 0px 2px 1px -1px darken($sc3tapehole1, 10%) inset,
                          2px 0px 1px 0px darken($sc3tapehole1, 10%) inset;

                        &:nth-child(2) {
                          transform: translate(-50%, -50%) rotate(120deg * 2);
                        }

                        &:nth-child(3) {
                          transform: translate(-50%, -50%) rotate(120deg * 3);
                        }
                      }

                      &__center {
                        position: absolute;
                        @extend .transCenter;
                        width: calc(5 * var(--unit));
                        height: calc(5 * var(--unit));
                        border-radius: 100%;
                        background: $sc3tapehole2;
                        border: calc(1 * var(--unit)) solid $sc3tape2;

                        &::after {
                          content: "";
                          position: absolute;
                          @extend .transCenter;
                          width: calc(3 * var(--unit));
                          height: calc(3 * var(--unit));
                          border-radius: 100%;
                          background: $sc3tapehole2;
                        }

                        &__dots {
                          position: absolute;
                          @extend .transCenter;
                          width: 10%;
                          height: 100%;
                          background: $sc3tape2;
                          transform-origin: center;
                          @for $i from 1 to 6 {
                            &:nth-child(#{$i}) {
                              transform: translate(-50%, -50%)
                                rotate(60deg * $i);
                            }
                          }
                        }

                        &__outline {
                          position: absolute;
                          @extend .transCenter;
                          width: calc(8 * var(--unit));
                          height: calc(8 * var(--unit));
                          border-radius: 100%;
                          background: $sc3tape1;
                        }
                      }
                    }

                    &__tape2 {
                      position: absolute;
                      top: 4%;
                      left: 68%;
                      width: calc(17 * var(--unit));
                      height: calc(17 * var(--unit));
                      border-radius: 100%;
                      background: $sc3tape1;
                      overflow: hidden;

                      &::after {
                        content: "";
                        position: absolute;
                        @extend .transCenter;
                        width: calc(18 * var(--unit));
                        height: calc(18 * var(--unit));
                        border-radius: 100%;
                        border: calc(2 * var(--unit)) solid $sc3tape1;
                      }

                      &__holes {
                        position: absolute;
                        @extend .transCenter;
                        width: 32%;
                        height: 100%;
                        background: $sc3tapehole1;
                        transform: translate(-50%, -50%) rotate(120deg);
                        transform-origin: bottom;
                        top: 0%;
                        clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%);
                        box-shadow: 0px 2px 1px -1px darken($sc3tapehole1, 10%) inset,
                          2px 0px 1px 0px darken($sc3tapehole1, 10%) inset;

                        &:nth-child(2) {
                          transform: translate(-50%, -50%) rotate(120deg * 2);
                        }

                        &:nth-child(3) {
                          transform: translate(-50%, -50%) rotate(120deg * 3);
                        }
                      }

                      &__center {
                        position: absolute;
                        @extend .transCenter;
                        width: calc(5 * var(--unit));
                        height: calc(5 * var(--unit));
                        border-radius: 100%;
                        background: $sc3tapehole2;
                        border: 2px solid $sc3tape2;

                        &::after {
                          content: "";
                          position: absolute;
                          @extend .transCenter;
                          width: calc(3 * var(--unit));
                          height: calc(3 * var(--unit));
                          border-radius: 100%;
                          background: $sc3tapehole2;
                        }

                        &__dots {
                          position: absolute;
                          @extend .transCenter;
                          width: 10%;
                          height: 100%;
                          background: $sc3tape2;
                          transform-origin: center;
                          @for $i from 1 to 6 {
                            &:nth-child(#{$i}) {
                              transform: translate(-50%, -50%)
                                rotate(60deg * $i);
                            }
                          }
                        }

                        &__outline {
                          position: absolute;
                          @extend .transCenter;
                          width: calc(8 * var(--unit));
                          height: calc(8 * var(--unit));
                          border-radius: 100%;
                          background: $sc3tape1;
                        }
                      }
                    }
                  }

                  &__label {
                    position: absolute;
                    top: 50%;
                    left: 59%;
                    width: 32%;
                    height: 70%;
                    background: $sc3tapecolor1;
                    overflow: hidden;
                  }
                }
              }
            }

            &__label1 {
              position: absolute;
              bottom: 6%;
              left: 10%;
              width: 27%;
              height: 5%;
              background: #fff;
            }

            &__label2__box {
              position: absolute;
              bottom: 6%;
              left: 38%;
              width: 54%;
              height: 5%;

              display: flex;
              justify-content: space-between;

              .middle__section3__box__cassets__label2 {
                width: (96% / 4);
                height: 100%;
                background: $sc3body1;
              }
            }

            &:nth-last-child(3) {
              left: 60%;
              transform: rotateY(180deg);

              .middle__section3__box__cassets__label2__box {
                position: absolute;
                bottom: 6%;
                left: 38%;
                width: 54%;
                height: 5%;

                display: flex;
                justify-content: space-between;

                .middle__section3__box__cassets__label2 {
                  width: (96% / 4);
                  height: 100%;
                  background: $sc3body1;
                }
              }

              .cassets2__label2__box {
                left: 10%;
                width: 80%;

                .middle__section3__box__cassets__label2 {
                  width: (96% / 6);
                  height: 100%;
                  background: $sc3body1;

                  &:nth-child(6) {
                    background: $sc3tapecolor2;
                  }

                  &:nth-child(5) {
                    background: #fff;
                  }
                }
              }
            }
          }

          &__mid {
            position: absolute;
            top: 0%;
            left: 40.5%;
            width: 19%;
            height: 100%;
            background: $sc3body1;

            &__glare {
              position: absolute;
              top: 0%;
              left: 0%;
              width: 100%;
              height: 100%;
              box-shadow: 1px 1px 4px -1px lighten($sc3body1, 90%) inset,
                2px 0 2px -1px darken($sc3body1, 90%) inset,
                0 -2px 2px -1px darken($sc3body1, 90%) inset;
            }
            // opacity: 0.4;
            &__box1 {
              position: absolute;
              top: 13%;
              left: 0%;
              width: 100%;
              height: 44%;
              border-bottom: calc(1 * var(--unit)) solid $body2;
              border-top: calc(1 * var(--unit)) solid $body2;
              background: $sc3body2;
            }
            &__box2 {
              position: absolute;
              top: 8%;
              left: 35%;
              width: 28%;
              height: 8%;
              background: $sc3body1;
              border: calc(1 * var(--unit)) solid darken($sc3body1, 5%);
            }

            &__box3 {
              position: absolute;
              top: 28%;
              left: 20%;
              width: 60%;
              height: 64%;
              border: calc(1 * var(--unit)) solid $body2;
              background: $sc3body1;

              &::before {
                content: "";
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 15%;
                background: $sc3body3;
              }

              &__lines {
                position: absolute;
                @extend .transCenter;

                width: 24%;
                height: 100%;
                background: linear-gradient(#fff 0 17%, transparent 17% 100%);
                background-size: calc(1 * var(--unit)) calc(2 * var(--unit));
              }
            }

            &__switch {
              position: absolute;
              top: 8%;
              left: 80%;
              width: 10%;
              height: 5%;
              background: $sc3body3;
              box-shadow: 1px 1px 4px -1px lighten($sc3body3, 90%) inset,
                2px 0 2px -1px darken($sc3body3, 90%) inset,
                0 -2px 2px -1px darken($sc3body3, 90%) inset,
                0 3px 3px 0px $bodyShadow;
            }
          }
        }
      }

      &__section4 {
        position: absolute;
        top: 28.5% + 14% + 22.5%;
        left: 0%;
        width: 100%;
        height: 9%;
        background: linear-gradient(-45deg, $sc4bodylight, $sc4body);
        box-shadow: 0px 2px 1px 0px $sc4bodylight inset,
          2px 0 2px 1px $sc4shadow inset, 0 -5px 1px $sc4shadow inset;

        &__red {
          position: absolute;
          top: 35%;
          left: 45%;
          width: 10.5%;
          height: 27%;
          background: $sc4red2;
          border-radius: 2px;
          filter: drop-shadow(0 -3px 1px $bodyShadow);

          &__grip {
            position: absolute;
            @extend .transCenter;
            top: 60%;
            width: 95%;
            height: 60%;
            border: 1px solid $sc4red3;
            background: linear-gradient(transparent 0 50%, $sc4red3 50% 100%),
              linear-gradient(90deg, transparent 0 50%, $sc4red3 50% 100%);
            background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
          }
        }

        &__switches {
          position: absolute;
          top: 10%;
          left: 5%;
          width: 32%;
          height: 50%;
          display: flex;
          justify-content: space-between;
          box-shadow: 0 5px 3px -1px $bodyShadow, 0 10px 2px -1px $bodyShadow,
            0 15px 3px -2px $bodyShadow, 0 17px 10px -2px $bodyShadow;

          &:nth-child(2n) {
            left: 64%;
          }

          &__sw {
            width: (95% /6);
            height: 100%;
            background: $sc4sw1;
            position: relative;
            box-shadow: 0px 5px 1px 0px lighten($sc4sw1, 30%) inset,
              0 -3px 2px darken($sc4sw2, 40%) inset;

            &__grip {
              position: absolute;
              top: 60%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 90%;
              height: 55%;
              border: 1px solid $sc4sw2;
              background: linear-gradient(transparent 0 50%, $sc4sw2 50% 100%),
                linear-gradient(90deg, transparent 0 50%, $sc4sw2 50% 100%);
              background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
            }
          }
        }
      }

      &__section5 {
        position: absolute;
        top: 28.5% + 14% + 22.5% + 9%;
        left: 0%;
        width: 100%;
        height: 26%;

        background: linear-gradient(
          20deg,
          $sc5body3,
          $sc5body2 55% 60%,
          $sc5body3
        );
        box-shadow: 0px 1px 1px 0px $sc5body2 inset,
          0px -3px 1px 1px $sc5body3 inset, 0 3px 3px $sc5body3 inset;

        &__center__lines {
          position: absolute;
          @extend .transCenter;
          width: 48%;
          height: 60%;
          background: linear-gradient(#fff 0 17%, transparent 17% 100%);
          background-size: calc(1 * var(--unit)) calc(2 * var(--unit));
        }

        &__left__lines {
          position: absolute;
          @extend .transCenter;
          left: 19%;
          width: 2.5%;
          height: 60%;
          background: linear-gradient(#fff 0 17%, transparent 17% 100%);
          background-size: calc(1 * var(--unit)) calc(2 * var(--unit));
          overflow: hidden;

          &::before {
            content: "";
            opacity: 0.8;
            position: absolute;
            top: 3%;
            left: 0%;
            width: 100%;
            height: 0;
            border-style: solid;
            border-width: 0 calc(4 * var(--unit)) calc(30 * var(--unit)) 0;
            border-color: transparent $sc5red transparent transparent;
          }
        }

        .right__lines {
          left: 86.5%;
          transform: rotateY(180deg) translate(-50%, -50%);
        }

        &__right__lines {
          position: absolute;
          @extend .transCenter;
          left: 80%;
          width: 2.5%;
          height: 60%;
          background: linear-gradient(#fff 0 17%, transparent 17% 100%);
          background-size: calc(1 * var(--unit)) calc(2 * var(--unit));
          overflow: hidden;

          &::before {
            content: "";
            opacity: 0.8;
            position: absolute;
            top: 3%;
            left: 0%;
            width: 100%;
            height: 0;
            border-style: solid;
            border-width: calc(15 * var(--unit)) calc(4 * var(--unit)) 0 0;
            border-color: $sc5red transparent transparent transparent;
          }

          &::after {
            content: "";
            opacity: 0.8;
            position: absolute;
            bottom: 7%;
            left: 0%;
            width: 100%;
            height: 0;
            border-style: solid;
            border-width: calc(15 * var(--unit)) 0 0 calc(4 * var(--unit));
            border-color: transparent transparent transparent $sc5red;
          }
        }

        &__big__eq {
          position: absolute;
          top: 15%;
          left: 20%;
          width: 2.5%;
          height: 70%;
          background: linear-gradient(
            $sc5eqshadow1 0 15%,
            $sc5eqshadow2 20% 70%,
            $sc5eqshadow3
          );

          overflow: hidden;

          &__lv {
            position: absolute;
            top: 8%;
            left: 0%;
            width: 100%;
            height: 40%;
            background: linear-gradient(
              0deg,
              $silver2 0% 15%,
              $silver4 20% 23%,
              $silver1,
              $silver2,
              $silver3 70% 72%,
              $silver2
            );
            box-shadow: 1px 1px 4px -1px $silver1 inset,
              2px 0 2px -1px $silver1 inset, 0 -2px 2px -1px $silver1 inset,
              0 8px 5px -1px $sc5eqshadow3;
            // box-shadow: 0 8px 5px -1px $sc5eqshadow3;
          }
          &:nth-child(2n) {
            left: 77%;
          }

          &:nth-child(3n) {
            left: 85%;
          }
        }

        &__karaoke {
          position: absolute;
          bottom: 12%;
          right: 2%;
          width: 7%;
          height: 23%;
          background: $sc5red;

          &::after {
            content: "karaoke";
            position: absolute;
            top: 40%;
            right: -25%;
            width: 150%;
            height: 40%;
            background: $sc5body2;
            color: #fff;
            font-family: "Fjalla One", sans-serif;
            text-align: center;
            transform: scaleX(0.8);
            font-size: calc(3 * var(--unit));
          }
        }

        &__sm {
          position: relative;
          top: 15%;
          left: 29%;
          width: 41%;
          height: 70%;
          display: flex;
          justify-content: space-between;

          &__eq {
            width: 4%;
            height: 100%;
            background: linear-gradient(
              $sc5eqshadow3 0 10%,
              $sc5eqshadow2 20% 70%,
              $sc5eqshadow3
            );
            overflow: hidden;

            &__lv {
              margin-top: 15px;
              width: 100%;
              height: 40%;
              background: linear-gradient(
                0deg,
                $silver2 0% 15%,
                $silver4 20% 23%,
                $silver1,
                $silver2,
                $silver3 70% 72%,
                $silver2
              );
              box-shadow: 0px 1px 2px -1px $silver1 inset,
                1px 0 2px -1px $silver1 inset, 0 -1px 1px -1px $silver1 inset,
                0 8px 5px -1px $sc5eqshadow3;
            }
          }
        }

        &__left {
          position: absolute;
          top: 11%;
          left: 2%;
          width: 14.5%;
          height: 35%;
          border-radius: calc(1 * var(--unit));
          border: calc(0.2 * var(--unit)) solid #fff;
          overflow: hidden;

          &:nth-last-child(2) {
            top: 49%;
          }

          &__box {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 99%;
            height: 80%;
            background: $sc5box;
          }

          &__top {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 13%;
            background: #fff;
          }

          &__hole {
            position: absolute;
            top: 42%;
            left: 17%;
            width: calc(3 * var(--unit));
            height: calc(3 * var(--unit));
            border-radius: 100%;
            border: calc(0.7 * var(--unit)) solid $silver1;
            background: $body3;
            filter: drop-shadow(0 2px 0.8px $bodyShadow);

            &:nth-last-child(2) {
              left: 74%;
            }
          }
        }

        &__right {
          position: absolute;
          top: 11%;
          right: 2%;
          width: 7%;
          height: 40%;
          border-radius: calc(1 * var(--unit));
          border: calc(0.2 * var(--unit)) solid #fff;
          // background: red;
          overflow: hidden;

          &__box {
            position: absolute;
            top: 22%;
            left: 0%;
            width: 99%;
            height: 65%;
            background: $sc5box;
          }

          &__top {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 13%;
            background: #fff;
          }

          &__hole {
            position: absolute;
            top: 42%;
            left: 35%;
            width: calc(3 * var(--unit));
            height: calc(3 * var(--unit));
            border-radius: 100%;
            border: calc(0.8 * var(--unit)) solid $silver1;
            background: $body3;

            &:nth-last-child(2) {
              left: 74%;
            }
          }
        }
      }
    }
  }
}

// @keyframes bigspeaker {
//   0% {
//     transform: translate(-50%, -50%) scale(1);
//   }
//   50% {
//     transform: translate(-50%, -50%) scale(1.05);
//   }
//   100% {
//     transform: translate(-50%, -50%) scale(1);
//   }
// }

// @keyframes smallspeaker {
//   0% {
//     transform: translate(-50%, -50%) scale(1);
//   }
//   70% {
//     transform: translate(-50%, -50%) scale(1.05);
//   }
//   100% {
//     transform: translate(-50%, -50%) scale(1);
//   }
// }

// @keyframes tape {
//   0% {
//     transform: rotate(0deg);
//   }
//   100% {
//     transform: rotate(360deg);
//   }
// }