@import url("https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap");
*,
*::after,
*::before {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

:root {
  --size: 69;
  --unit: calc((var(--size) / 242) * 1vmin);
}

body {
  background: #595455;
  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, .boombox .bb__shadow, .boombox .bb__handle__rubber, .boombox .bb__body .big__sp__box__out__edge__screw, .boombox .bb__body .big__sp__box__out__outline, .boombox .bb__body .big__sp__box__out__inner1, .boombox .bb__body .big__sp__box__out__inner2, .boombox .bb__body .big__sp__box__out__inner3, .boombox .bb__body .big__sp__box__out__inner4, .boombox .bb__body .big__sp__box__out__mesh, .boombox .bb__body .top__sp__box__leftsp__mesh, .boombox .bb__body .top__sp__box__leftsp__inners, .boombox .bb__body .top__sp__box__leftsp__inners__inner1, .boombox .bb__body .top__sp__box__leftsp__inners__inner2, .boombox .bb__body .top__sp__box__leftsp__inners__inner3, .boombox .bb__body .top__sp__box__rightsp__mid, .boombox .bb__body .top__sp__box__btm__shade, .boombox .bb__body .middle__section2__box__inner1__blackbox, .boombox .bb__body .middle__section2__box__inner1__redbox, .boombox .bb__body .middle__section2__box__inner1__redbox__btn, .boombox .bb__body .middle__section2__box__inner4__top__box__roller, .boombox .bb__body .middle__section2__box__inner4__top__box__roller__bar, .boombox .bb__body .middle__section3__box, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1::after, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__holes, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center::after, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__outline, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2::after, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__holes, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center::after, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots, .boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__outline, .boombox .bb__body .middle__section3__box__mid__box3__lines, .boombox .bb__body .middle__section4__red__grip, .boombox .bb__body .middle__section5__center__lines, .boombox .bb__body .middle__section5__left__lines, .boombox .bb__body .middle__section5__right__lines {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.boombox {
  width: calc(362 * var(--unit));
  height: calc(242 * var(--unit));
  overflow: hidden;
}
.boombox .bb__shadow {
  position: absolute;
  opacity: 0.7;
  top: 88%;
  width: 90%;
  height: 7%;
  border-radius: 100%;
  filter: blur(4px);
  background: radial-gradient(#1e1b1b 0% 60%, transparent);
}
.boombox .bb__shadow__legs {
  position: absolute;
  opacity: 0.7;
  top: 86%;
  left: 8.5%;
  width: 17%;
  height: 4%;
  border-radius: 100%;
  filter: blur(4px);
  background: radial-gradient(#1e1b1b 0% 50%, transparent);
}
.boombox .bb__shadow__legs:nth-child(2n) {
  left: 75%;
}
.boombox .bb__legs {
  position: absolute;
  top: 86%;
  left: 10%;
  width: 14%;
  height: 2%;
  background: linear-gradient(#1e1b1b, #332f2d, #47423f, #1e1b1b);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.boombox .bb__legs:nth-child(2n) {
  left: 77%;
}
.boombox .bb__handle {
  position: absolute;
  top: 5%;
  left: 31.5%;
  width: 37.7%;
  height: 10%;
  background: linear-gradient(#cfcfcf, #6c6c6c, #929292);
  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%);
}
.boombox .bb__handle:first-child {
  left: 32.2%;
  width: 36.5%;
  background: #6c6c6c;
}
.boombox .bb__handle__rubber {
  position: absolute;
  top: 18%;
  width: 88%;
  height: 35%;
  background: linear-gradient(#5f5d69 0% 3%, #2e2d33 4% 20%, black 20% 23%, #2e2d33 23% 80%, #5f5d69 80% 83%, #2e2d33 83% 97%, black 97% 100%);
}
.boombox .bb__body {
  position: absolute;
  top: 14%;
  left: 2%;
  width: 96%;
  height: 72%;
  overflow: hidden;
  background: linear-gradient(#47423f 0% 2%, #332f2d 3% 98.3%, #1e1b1b 99% 100%);
}
.boombox .bb__body .big__sp {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 29%;
  height: 59%;
}
.boombox .bb__body .big__sp:nth-child(1) {
  left: 71%;
}
.boombox .bb__body .big__sp__box {
  position: absolute;
  top: 2%;
  left: 4%;
  width: 92%;
  height: 93%;
  overflow: hidden;
}
.boombox .bb__body .big__sp__box__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, #929292, #6c6c6c, #929292, #cfcfcf, #dfdfdf, #cfcfcf);
  filter: drop-shadow(0 2px 0.8px #1e1a1b);
}
.boombox .bb__body .big__sp__box__out__edge {
  position: absolute;
  width: 15%;
  height: 7%;
  background: #929292;
}
.boombox .bb__body .big__sp__box__out__edge::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: linear-gradient(10deg, transparent 0 50%, #dfdfdf 50% 60%, #929292 100%);
}
.boombox .bb__body .big__sp__box__out__edge::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: linear-gradient(-10deg, #6c6c6c 0, #929292 50%, transparent 50% 100%);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(1) {
  top: 13%;
  left: 10%;
  transform: rotate(45deg);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(2) {
  top: 13%;
  right: 10%;
  transform: rotate(135deg);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(2)::before {
  background: linear-gradient(10deg, transparent 0 50%, #929292 50% 60%, #6c6c6c 100%);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(2)::after {
  background: linear-gradient(-10deg, #dfdfdf 0 20%, #cfcfcf 50%, transparent 50% 100%);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(3) {
  bottom: 13%;
  right: 10%;
  transform: rotate(-135deg);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(3)::before {
  background: linear-gradient(10deg, transparent 0 50%, #929292 50% 60%, #6c6c6c 100%);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(3)::after {
  background: linear-gradient(-10deg, #929292 0, #dfdfdf 50%, transparent 50% 100%);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(4) {
  bottom: 13%;
  left: 10%;
  transform: rotate(-45deg);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(4)::before {
  background: linear-gradient(10deg, transparent 0 50%, #dfdfdf 50% 60%, #929292 100%);
}
.boombox .bb__body .big__sp__box__out__edge:nth-child(4)::after {
  background: linear-gradient(-10deg, #6c6c6c 0, #929292 50%, transparent 50% 100%);
}
.boombox .bb__body .big__sp__box__out__edge__screw {
  position: absolute;
  width: calc(4 * var(--unit));
  height: calc(4 * var(--unit));
  border-radius: 100%;
  border: calc(1 * var(--unit)) solid #dfdfdf;
  background: #929292;
}
.boombox .bb__body .big__sp__box__out__outline {
  position: absolute;
  width: 83%;
  height: 83%;
  border-radius: 100%;
  background: #393636;
  border: calc(2 * var(--unit)) solid #929292;
}
.boombox .bb__body .big__sp__box__out__inner1 {
  position: absolute;
  width: 80%;
  height: 80%;
  border-radius: 100%;
  background: #393636;
  border: calc(1 * var(--unit)) solid #dfdfdf;
  overflow: hidden;
}
.boombox .bb__body .big__sp__box__out__inner2 {
  position: absolute;
  width: 54%;
  height: 54%;
  border-radius: 100%;
  background: #4e4b4a;
  backface-visibility: hidden;
  animation: 0.5s ease-in-out infinite bigspeaker;
}
.boombox .bb__body .big__sp__box__out__inner3 {
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 100%;
  background: #929292;
  backface-visibility: hidden;
  animation: 0.5s ease-in-out infinite bigspeaker;
}
.boombox .bb__body .big__sp__box__out__inner4 {
  position: absolute;
  width: 25%;
  height: 25%;
  border: calc(2 * var(--unit)) solid #393636;
  border-radius: 100%;
  background: linear-gradient(45deg, #929292, #6c6c6c, #929292, #cfcfcf, #dfdfdf, #cfcfcf);
  backface-visibility: hidden;
  animation: 0.5s ease-in-out infinite bigspeaker;
}
.boombox .bb__body .big__sp__box__out__mesh {
  opacity: 0.7;
  position: absolute;
  width: 80%;
  height: 80%;
  border: calc(1 * var(--unit)) solid #b74444;
  border-radius: 100%;
  background-image: radial-gradient(transparent 50%, #201d1c 50%);
  background-size: calc(2 * var(--unit)) calc(2 * var(--unit));
  box-shadow: 0 2px 2px -1px #1e1a1b;
}
.boombox .bb__body .top__sp__box {
  position: absolute;
  top: 4%;
  left: 1%;
  width: 27%;
  height: 36%;
  background-image: linear-gradient(-90deg, #2c2927 50%, transparent 50%), linear-gradient(#2c2927 50%, #47423f 50%);
  background-size: calc(2 * var(--unit)) calc(2 * var(--unit));
  box-shadow: 0 3px 2px -1px #1e1a1b;
}
.boombox .bb__body .top__sp__box:nth-child(2) {
  left: 72%;
  transform: rotateY(180deg);
}
.boombox .bb__body .top__sp__box::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #1e1b1b, #47423f);
  opacity: 0.4;
}
.boombox .bb__body .top__sp__box__leftsp {
  position: absolute;
  top: 8%;
  left: 9%;
  width: 45%;
  height: 61%;
  background: linear-gradient(0deg, #929292, #6c6c6c, #929292, #cfcfcf, #dfdfdf, #cfcfcf);
  filter: drop-shadow(0 2px 0.8px #1e1a1b);
}
.boombox .bb__body .top__sp__box__leftsp::before, .boombox .bb__body .top__sp__box__leftsp::after {
  width: 100%;
  height: 0;
  display: block;
  position: absolute;
  left: 0;
  content: "";
}
.boombox .bb__body .top__sp__box__leftsp:before {
  border-bottom: solid calc(3 * var(--unit)) #cfcfcf;
  border-left: solid calc(3 * var(--unit)) transparent;
  border-right: solid calc(3 * var(--unit)) transparent;
  bottom: 100%;
}
.boombox .bb__body .top__sp__box__leftsp:after {
  border-top: solid calc(3 * var(--unit)) #929292;
  border-left: solid calc(3 * var(--unit)) transparent;
  border-right: solid calc(3 * var(--unit)) transparent;
  top: 99%;
}
.boombox .bb__body .top__sp__box__leftsp__stick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 10%;
  background: #47423f;
  transform-origin: center;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 50px 50px 50px 50px;
  z-index: 3;
  box-shadow: 0 2px 1px 0px #1e1a1b inset;
}
.boombox .bb__body .top__sp__box__leftsp__stick::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;
}
.boombox .bb__body .top__sp__box__leftsp__stick::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;
}
.boombox .bb__body .top__sp__box__leftsp__stick:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.boombox .bb__body .top__sp__box__leftsp__mesh {
  position: absolute;
  opacity: 0.6;
  width: calc(40 * var(--unit));
  height: calc(40 * var(--unit));
  border-radius: 100%;
  border: calc(1 * var(--unit)) solid #dfdfdf;
  background-image: radial-gradient(transparent 50%, #201d1c 50%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
  z-index: 3;
}
.boombox .bb__body .top__sp__box__leftsp__inners {
  position: absolute;
  width: calc(40 * var(--unit));
  height: calc(40 * var(--unit));
  border-radius: 100%;
  background: #393636;
  z-index: 3;
  box-shadow: 0 2px 1px -1px #1e1a1b;
}
.boombox .bb__body .top__sp__box__leftsp__inners__inner1 {
  position: absolute;
  width: 60%;
  height: 60%;
  border-radius: 100%;
  background: #4e4b4a;
  backface-visibility: hidden;
  animation: 0.5s ease-in-out infinite smallspeaker;
}
.boombox .bb__body .top__sp__box__leftsp__inners__inner2 {
  position: absolute;
  width: 25%;
  height: 25%;
  border-radius: 100%;
  background: linear-gradient(45deg, #6c6c6c, #929292, #cfcfcf, #dfdfdf);
  backface-visibility: hidden;
  animation: 0.5s ease-in-out infinite smallspeaker;
}
.boombox .bb__body .top__sp__box__leftsp__inners__inner3 {
  position: absolute;
  width: 22%;
  height: 22%;
  border-radius: 100%;
  border: calc(1 * var(--unit)) solid #332f2d;
  background: linear-gradient(45deg, #6c6c6c, #929292, #cfcfcf, #dfdfdf);
  backface-visibility: hidden;
  animation: 0.5s ease-in-out infinite smallspeaker;
}
.boombox .bb__body .top__sp__box__rightsp {
  position: absolute;
  top: 8%;
  right: 10%;
  width: 35%;
  height: 61%;
  background: linear-gradient(0deg, #929292, #6c6c6c, #929292, #cfcfcf, #dfdfdf, #cfcfcf);
  filter: drop-shadow(0 2px 0.8px #1e1a1b);
}
.boombox .bb__body .top__sp__box__rightsp::before, .boombox .bb__body .top__sp__box__rightsp::after {
  width: 100%;
  height: 0;
  display: block;
  position: absolute;
  left: 0;
  content: "";
}
.boombox .bb__body .top__sp__box__rightsp:before {
  border-bottom: solid calc(3 * var(--unit)) #cfcfcf;
  border-left: solid calc(3 * var(--unit)) transparent;
  border-right: solid calc(3 * var(--unit)) transparent;
  bottom: 100%;
}
.boombox .bb__body .top__sp__box__rightsp:after {
  border-top: solid calc(3 * var(--unit)) #929292;
  border-left: solid calc(3 * var(--unit)) transparent;
  border-right: solid calc(3 * var(--unit)) transparent;
  top: 99%;
}
.boombox .bb__body .top__sp__box__rightsp__mid {
  position: absolute;
  top: 49%;
  width: 44%;
  height: 115%;
  background: #332f2d;
  z-index: 3;
  border: calc(3 * var(--unit)) #201d1c #000;
}
.boombox .bb__body .top__sp__box__rightsp__mid__mesh {
  position: absolute;
  top: 0;
  width: 100%;
  height: 70%;
  background-image: radial-gradient(transparent 40%, #201d1c 50%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
  box-shadow: 0 3px 2px -1px #1e1a1b;
}
.boombox .bb__body .top__sp__box__rightsp__screw {
  position: absolute;
  width: calc(4 * var(--unit));
  height: calc(4 * var(--unit));
  border-radius: 100%;
  border: calc(1 * var(--unit)) solid #000;
  background: #47423f;
  z-index: 3;
}
.boombox .bb__body .top__sp__box__rightsp__screw:nth-child(5) {
  top: -1%;
  left: 7%;
}
.boombox .bb__body .top__sp__box__rightsp__screw:nth-child(2) {
  top: -1%;
  right: 7%;
}
.boombox .bb__body .top__sp__box__rightsp__screw:nth-child(3) {
  bottom: -1%;
  right: 7%;
}
.boombox .bb__body .top__sp__box__rightsp__screw:nth-child(4) {
  bottom: -1%;
  left: 7%;
}
.boombox .bb__body .top__sp__box__btm {
  position: absolute;
  bottom: 3%;
  right: 10%;
  width: 80%;
  height: 19%;
  background: linear-gradient(45deg, #929292, #6c6c6c, #929292, #cfcfcf, #dfdfdf, #cfcfcf);
  filter: drop-shadow(0 2px 0.8px #1e1a1b);
}
.boombox .bb__body .top__sp__box__btm__shade {
  position: absolute;
  width: 90%;
  height: 80%;
  background: #363834;
  background: linear-gradient(#141212 0 20%, #363834 40% 60%, #141212 80% 100%);
}
.boombox .bb__body .top__sp__box__btm__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(#d48d8d 0 30%, #b74444 40% 60%);
}
.boombox .bb__body .top__sp__box__btm__light:last-child {
  left: 15%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(1) {
  left: 15%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(2) {
  left: 25%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(3) {
  left: 35%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(4) {
  left: 45%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(5) {
  left: 55%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(6) {
  left: 65%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(7) {
  left: 75%;
}
.boombox .bb__body .top__sp__box__btm__light:nth-child(8) {
  left: 85%;
}
.boombox .bb__body .middle {
  position: absolute;
  bottom: 0%;
  left: 29.5%;
  width: 41%;
  height: 100%;
}
.boombox .bb__body .middle__section1 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 28.5%;
  background: linear-gradient(#47423f 0% 10%, #161110 10% 100%);
  overflow: hidden;
}
.boombox .bb__body .middle__section1__frame {
  position: absolute;
  top: 8%;
  left: 0%;
  width: 100%;
  height: 90%;
  border: calc(6 * var(--unit)) solid #2e292a;
}
.boombox .bb__body .middle__section1__frame__glare {
  position: absolute;
  top: 8%;
  left: 0%;
  width: 100%;
  height: 90%;
  box-shadow: 1px 1px 2px -1px white inset, 2px 0 2px -1px black inset, 0 -2px 2px -1px black inset;
  overflow: hidden;
}
.boombox .bb__body .middle__section1__frame__glare::after {
  content: "";
  opacity: 0.08;
  position: absolute;
  top: -110%;
  left: -30%;
  width: 100%;
  height: 400%;
  background: #c8c1c2;
  transform: skewY(-65deg);
}
.boombox .bb__body .middle__section1__frame__glare__sheet {
  opacity: 0.1;
  position: absolute;
  top: 8%;
  left: 0%;
  width: 100%;
  height: 90%;
  background: #c8c1c2;
}
.boombox .bb__body .middle__section1__stick {
  position: absolute;
  top: 8%;
  left: 40%;
  width: 0.5%;
  height: 58%;
  background: #c8c1c2;
}
.boombox .bb__body .middle__section1__top {
  position: absolute;
  top: 28%;
  left: 9%;
  width: 82%;
  height: 45%;
  background: #281e1d;
  background-image: linear-gradient(transparent 0% 95%, #1f1717 95% 100%), linear-gradient(90deg, transparent 0% 95%, #1f1717 95% 100%);
  background-size: calc(4.5 * var(--unit)) calc(4.5 * var(--unit));
}
.boombox .bb__body .middle__section1__top__tb {
  position: absolute;
  top: 10%;
  left: 26%;
  width: 60%;
  height: 80%;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.boombox .bb__body .middle__section1__top__tb__text {
  width: 98%;
  text-align: justify;
  text-align-last: justify;
  font-family: "Fjalla One", sans-serif;
  font-size: calc(2 * var(--unit));
  color: #fff;
}
.boombox .bb__body .middle__section1__top__leftbox {
  position: absolute;
  top: 9%;
  left: 2%;
  width: 18%;
  height: 18%;
  background: #1e1b1b;
}
.boombox .bb__body .middle__section1__top__leftbox__arrow {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 40%;
  height: 57%;
  background: #fff;
}
.boombox .bb__body .middle__section1__top__leftbox__arrow::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;
}
.boombox .bb__body .middle__section1__top__leftbox:nth-child(2) {
  top: 30%;
}
.boombox .bb__body .middle__section1__top__leftbox:nth-child(3) {
  top: 53%;
}
.boombox .bb__body .middle__section1__top__leftbox:nth-child(4) {
  top: 75%;
}
.boombox .bb__body .middle__section1__btm {
  position: absolute;
  top: 76%;
  left: 0%;
  width: 100%;
  height: 30%;
  background: #281e1d;
  clip-path: polygon(8.36% 0%, 91.19% -2.18%, 101.37% 91.26%, -2.05% 93.45%);
}
.boombox .bb__body .middle__section1__btm__blueline__out {
  position: absolute;
  top: 2%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: linear-gradient(#9999ff, #fff);
  clip-path: polygon(20% 0%, 80.91% 0%, 97.72% 121.86%, 5.25% 121.86%);
}
.boombox .bb__body .middle__section1__btm__blueline__in {
  position: absolute;
  top: 3%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: #281e1d;
  clip-path: polygon(24.11% -10.93%, 78.17% -5.46%, 91.56% 149.18%, 9.59% 143.72%);
}
.boombox .bb__body .middle__section1__btm__redline__out {
  position: absolute;
  top: 4%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: linear-gradient(#ff9999, #fff);
  clip-path: polygon(24.34% -5.46%, 77.72% -5.46%, 90.42% 149.18%, 10.27% 149.18%);
}
.boombox .bb__body .middle__section1__btm__redline__in {
  position: absolute;
  top: 5%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: #281e1d;
  clip-path: polygon(27.53% 10.93%, 76.12% 10.93%, 86.54% 149.18%, 16.21% 154.65%);
}
.boombox .bb__body .middle__section1__btm__blackline__out {
  position: absolute;
  top: 5%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: #443e40;
  clip-path: polygon(32.55% 27.32%, 69.96% 27.32%, 77.64% 160.11%, 26.94% 165.58%);
}
.boombox .bb__body .middle__section1__btm__lines {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(transparent 0% 70%, #1f1717 70% 100%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
}
.boombox .bb__body .middle__section2 {
  position: absolute;
  top: 28.5%;
  left: 0%;
  width: 100%;
  height: 14%;
  background: #524f48;
}
.boombox .bb__body .middle__section2__box {
  position: absolute;
  top: 5%;
  left: 2%;
  width: 97.5%;
  height: 92%;
  border: calc(1 * var(--unit)) solid #302b2b;
}
.boombox .bb__body .middle__section2__box__inner1 {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 12%;
  height: 100%;
  border-right: calc(1 * var(--unit)) solid #302b2b;
}
.boombox .bb__body .middle__section2__box__inner1__blackbox {
  position: absolute;
  width: 86%;
  height: 85%;
  border: calc(1.8 * var(--unit)) solid #302b2b;
}
.boombox .bb__body .middle__section2__box__inner1__redbox {
  position: absolute;
  width: 79%;
  height: 80%;
  border: calc(0.8 * var(--unit)) solid #b74444;
}
.boombox .bb__body .middle__section2__box__inner1__redbox__btn {
  position: absolute;
  top: 15%;
  width: 90%;
  height: 23%;
  border-radius: calc(0.5 * var(--unit));
  background: #b74444;
  box-shadow: 0px 1px 1px 0px white inset, 0 -2px 2px #6d2828 inset, 0 2px 3px -1px #1e1a1b, 0 2px 3px 0px #1e1a1b;
}
.boombox .bb__body .middle__section2__box__inner2 {
  position: absolute;
  top: 0%;
  left: 12%;
  width: 33.3%;
  height: 100%;
  border-right: calc(1 * var(--unit)) solid #302b2b;
  background-image: linear-gradient(transparent 0% 50%, #3c3a35 50% 100%), linear-gradient(90deg, transparent 0% 50%, #3c3a35 50% 100%);
  background-size: calc(1.3 * var(--unit)) calc(1.3 * var(--unit));
}
.boombox .bb__body .middle__section2__box__inner2__clock {
  position: absolute;
  top: 18%;
  left: 4%;
  width: 40%;
  height: 30%;
  border-radius: calc(1 * var(--unit));
  border: solid #e0e3f3;
  border-width: calc(1 * var(--unit)) calc(1.3 * var(--unit));
  background: #cabcbc;
}
.boombox .bb__body .middle__section2__box__inner2__clock__outline {
  position: absolute;
  top: 18%;
  left: 4%;
  width: 40%;
  height: 30%;
  border-radius: calc(1 * var(--unit));
  border: solid #e0e3f3;
  border-width: calc(1 * var(--unit)) calc(1.3 * var(--unit));
  box-shadow: 0px 2px 1px 0px #685252 inset, 2px 1px 2px #685252 inset, 0 0px 2px 0px #1e1a1b;
}
.boombox .bb__body .middle__section2__box__inner2__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 white inset, 0 -3px 2px black inset, 0 2px 3px -1px #1e1a1b, 0 2px 3px 0px #1e1a1b;
}
.boombox .bb__body .middle__section2__box__inner2__btn:nth-child(2n) {
  left: 28%;
}
.boombox .bb__body .middle__section2__box__inner3 {
  position: absolute;
  top: 0%;
  left: 45.3%;
  width: 29%;
  height: 100%;
  border-right: calc(5 * var(--unit)) solid #302b2b;
}
.boombox .bb__body .middle__section2__box__inner3__boxs {
  position: absolute;
  top: 1%;
  left: 0%;
  width: 100%;
  height: 50%;
  display: flex;
}
.boombox .bb__body .middle__section2__box__inner3__boxs__bar {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 99%;
  height: 23%;
  background: #e0e3f3;
}
.boombox .bb__body .middle__section2__box__inner3__boxs__btns {
  width: 25%;
  height: 100%;
  border: calc(0.5 * var(--unit)) solid #302b2b;
}
.boombox .bb__body .middle__section2__box__inner3__boxs__btns__btn {
  margin: 60% auto 0 auto;
  width: 78%;
  height: 24%;
  background: #fff;
  border-radius: calc(0.5 * var(--unit));
  border: 1px solid #d2dee1;
  background: linear-gradient(#fff 0 50%, #d2dee1 50% 100%), linear-gradient(90deg, #fff 0 50%, #d2dee1 50% 100%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
  box-shadow: 0px 5px 1px 0px white inset, 0 -3px 2px #5c818b inset, 0 2px 3px -1px #1e1a1b, 0 2px 3px 0px #1e1a1b;
}
.boombox .bb__body .middle__section2__box__inner3__boxs:nth-child(2) {
  top: 51%;
}
.boombox .bb__body .middle__section2__box__inner4 {
  position: absolute;
  top: 0%;
  left: 74.3%;
  width: 25.5%;
  height: 100%;
}
.boombox .bb__body .middle__section2__box__inner4__top {
  position: absolute;
  top: 1%;
  left: 0%;
  width: 100%;
  height: 50%;
}
.boombox .bb__body .middle__section2__box__inner4__top__bartop {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 99%;
  height: 20%;
  background: #e0e3f3;
}
.boombox .bb__body .middle__section2__box__inner4__top__box {
  position: absolute;
  top: 28%;
  left: 5%;
  width: 88%;
  height: 57%;
  background: #1c1b18;
  border: solid #2e2b2d;
  border-width: calc(0.3 * var(--unit)) calc(5 * var(--unit));
}
.boombox .bb__body .middle__section2__box__inner4__top__box__roller {
  position: absolute;
  width: 90%;
  height: 90%;
  background: radial-gradient(#fff 0% 50%, #524f48 80% 100%);
  border-radius: 40%;
}
.boombox .bb__body .middle__section2__box__inner4__top__box__roller__bar {
  position: absolute;
  width: 100%;
  height: 40%;
  background: linear-gradient(45deg, #030303 0% 10%, #3c3530 20% 80%, #030303 90% 100%);
}
.boombox .bb__body .middle__section2__box__inner4__boxs {
  position: absolute;
  top: 51%;
  left: 0%;
  width: 100%;
  height: 50%;
  display: flex;
}
.boombox .bb__body .middle__section2__box__inner4__boxs__bar {
  position: absolute;
  top: 1%;
  left: 1%;
  width: 99%;
  height: 23%;
  background: #e0e3f3;
}
.boombox .bb__body .middle__section2__box__inner4__boxs__btns {
  width: 25%;
  height: 100%;
  border: calc(0.5 * var(--unit)) solid #302b2b;
}
.boombox .bb__body .middle__section2__box__inner4__boxs__btns__btn {
  margin: 60% auto 0 auto;
  width: 78%;
  height: 24%;
  background: #fff;
  border-radius: calc(0.5 * var(--unit));
  border: 1px solid #d2dee1;
  background: linear-gradient(#fff 0 50%, #d2dee1 50% 100%), linear-gradient(90deg, #fff 0 50%, #d2dee1 50% 100%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
  box-shadow: 0px 5px 1px 0px white inset, 0 -3px 2px #5c818b inset, 0 2px 3px -1px #1e1a1b, 0 2px 3px 0px #1e1a1b;
}
.boombox .bb__body .middle__section3 {
  position: absolute;
  top: 42.5%;
  left: 0%;
  width: 100%;
  height: 22.5%;
  background: linear-gradient(-45deg, #3b3a3d, #30292a);
  box-shadow: 0px 2px 1px 0px #3b3a3d inset, 2px 0 2px 1px #242425 inset, 0 -5px 1px #242425 inset;
}
.boombox .bb__body .middle__section3__box {
  position: absolute;
  top: 49%;
  width: 97%;
  height: 87%;
  border-radius: calc(1 * var(--unit));
  overflow: hidden;
}
.boombox .bb__body .middle__section3__box__cassets {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 40%;
  height: 100%;
  background: #443e40;
}
.boombox .bb__body .middle__section3__box__cassets__glare {
  position: absolute;
  top: 0%;
  left: -5%;
  width: 20%;
  height: 100%;
  background: #fff;
  opacity: 0.1;
  transform: skew(-25deg);
}
.boombox .bb__body .middle__section3__box__cassets__glare:nth-child(2) {
  left: 50%;
  z-index: 5;
}
.boombox .bb__body .middle__section3__box__cassets::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  box-shadow: 1px 1px 4px -1px white inset, 2px 0 2px -1px black inset, 0 -2px 2px -1px black inset;
}
.boombox .bb__body .middle__section3__box__cassets__box {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 87%;
  background: #281e1d;
  overflow: hidden;
}
.boombox .bb__body .middle__section3__box__cassets__box .casset2__color {
  background: #e65946;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner {
  position: absolute;
  top: 17%;
  left: 9%;
  width: 100%;
  height: 69%;
  background: #54b39b;
  clip-path: polygon(0% 0%, 100% 0%, 103.03% 66.81%, 56.84% 63.54%, 43.11% 98.36%, 0px 100%);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in {
  position: absolute;
  top: 2%;
  left: 1%;
  width: 95%;
  height: 95%;
  background: #453b3a;
  clip-path: polygon(0% 1.64%, 100.3% 1.64%, 103.03% 64.36%, 58.05% 61.9%, 44.32% 98.36%, 0px 100%);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window {
  position: absolute;
  top: 10%;
  left: 14%;
  width: 45%;
  height: 70%;
  background: #b1b1b1;
  overflow: hidden;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__glare {
  position: absolute;
  opacity: 0.5;
  top: 10%;
  left: 14%;
  width: 45%;
  height: 70%;
  box-shadow: 2px 2px 2px -1px #323232 inset, 5px 2px 2px 0px #323232 inset;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__glare .cassete2__shadow {
  box-shadow: 2px 2px 2px -1px #323232 inset, -5px 2px 2px 0px #323232 inset !important;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window .tapespin {
  backface-visibility: hidden;
  animation: 2s linear infinite tape;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1 {
  position: absolute;
  top: -2%;
  left: -11%;
  width: calc(18 * var(--unit));
  height: calc(18 * var(--unit));
  border-radius: 100%;
  background: #f0cb74;
  overflow: hidden;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1::after {
  content: "";
  position: absolute;
  width: calc(19 * var(--unit));
  height: calc(19 * var(--unit));
  border-radius: 100%;
  border: calc(2.2 * var(--unit)) solid #f0cb74;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__holes {
  position: absolute;
  width: 32%;
  height: 100%;
  background: #a78472;
  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 #8e6a58 inset, 2px 0px 1px 0px #8e6a58 inset;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__holes:nth-child(2) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__holes:nth-child(3) {
  transform: translate(-50%, -50%) rotate(360deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center {
  position: absolute;
  width: calc(5 * var(--unit));
  height: calc(5 * var(--unit));
  border-radius: 100%;
  background: #6c5652;
  border: calc(1 * var(--unit)) solid #b09e91;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center::after {
  content: "";
  position: absolute;
  width: calc(3 * var(--unit));
  height: calc(3 * var(--unit));
  border-radius: 100%;
  background: #6c5652;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots {
  position: absolute;
  width: 10%;
  height: 100%;
  background: #b09e91;
  transform-origin: center;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots:nth-child(1) {
  transform: translate(-50%, -50%) rotate(60deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots:nth-child(3) {
  transform: translate(-50%, -50%) rotate(180deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots:nth-child(4) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__dots:nth-child(5) {
  transform: translate(-50%, -50%) rotate(300deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape1__center__outline {
  position: absolute;
  width: calc(8 * var(--unit));
  height: calc(8 * var(--unit));
  border-radius: 100%;
  background: #f0cb74;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2 {
  position: absolute;
  top: 4%;
  left: 68%;
  width: calc(17 * var(--unit));
  height: calc(17 * var(--unit));
  border-radius: 100%;
  background: #f0cb74;
  overflow: hidden;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2::after {
  content: "";
  position: absolute;
  width: calc(18 * var(--unit));
  height: calc(18 * var(--unit));
  border-radius: 100%;
  border: calc(2 * var(--unit)) solid #f0cb74;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__holes {
  position: absolute;
  width: 32%;
  height: 100%;
  background: #a78472;
  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 #8e6a58 inset, 2px 0px 1px 0px #8e6a58 inset;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__holes:nth-child(2) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__holes:nth-child(3) {
  transform: translate(-50%, -50%) rotate(360deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center {
  position: absolute;
  width: calc(5 * var(--unit));
  height: calc(5 * var(--unit));
  border-radius: 100%;
  background: #6c5652;
  border: 2px solid #b09e91;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center::after {
  content: "";
  position: absolute;
  width: calc(3 * var(--unit));
  height: calc(3 * var(--unit));
  border-radius: 100%;
  background: #6c5652;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots {
  position: absolute;
  width: 10%;
  height: 100%;
  background: #b09e91;
  transform-origin: center;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots:nth-child(1) {
  transform: translate(-50%, -50%) rotate(60deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots:nth-child(2) {
  transform: translate(-50%, -50%) rotate(120deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots:nth-child(3) {
  transform: translate(-50%, -50%) rotate(180deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots:nth-child(4) {
  transform: translate(-50%, -50%) rotate(240deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__dots:nth-child(5) {
  transform: translate(-50%, -50%) rotate(300deg);
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__window__tape2__center__outline {
  position: absolute;
  width: calc(8 * var(--unit));
  height: calc(8 * var(--unit));
  border-radius: 100%;
  background: #f0cb74;
}
.boombox .bb__body .middle__section3__box__cassets__box__inner__in__label {
  position: absolute;
  top: 50%;
  left: 59%;
  width: 32%;
  height: 70%;
  background: #54b39b;
  overflow: hidden;
}
.boombox .bb__body .middle__section3__box__cassets__label1 {
  position: absolute;
  bottom: 6%;
  left: 10%;
  width: 27%;
  height: 5%;
  background: #fff;
}
.boombox .bb__body .middle__section3__box__cassets__label2__box {
  position: absolute;
  bottom: 6%;
  left: 38%;
  width: 54%;
  height: 5%;
  display: flex;
  justify-content: space-between;
}
.boombox .bb__body .middle__section3__box__cassets__label2__box .middle__section3__box__cassets__label2 {
  width: 24%;
  height: 100%;
  background: #281e1d;
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) {
  left: 60%;
  transform: rotateY(180deg);
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) .middle__section3__box__cassets__label2__box {
  position: absolute;
  bottom: 6%;
  left: 38%;
  width: 54%;
  height: 5%;
  display: flex;
  justify-content: space-between;
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) .middle__section3__box__cassets__label2__box .middle__section3__box__cassets__label2 {
  width: 24%;
  height: 100%;
  background: #281e1d;
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) .cassets2__label2__box {
  left: 10%;
  width: 80%;
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) .cassets2__label2__box .middle__section3__box__cassets__label2 {
  width: 16%;
  height: 100%;
  background: #281e1d;
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) .cassets2__label2__box .middle__section3__box__cassets__label2:nth-child(6) {
  background: #e65946;
}
.boombox .bb__body .middle__section3__box__cassets:nth-last-child(3) .cassets2__label2__box .middle__section3__box__cassets__label2:nth-child(5) {
  background: #fff;
}
.boombox .bb__body .middle__section3__box__mid {
  position: absolute;
  top: 0%;
  left: 40.5%;
  width: 19%;
  height: 100%;
  background: #281e1d;
}
.boombox .bb__body .middle__section3__box__mid__glare {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  box-shadow: 1px 1px 4px -1px white inset, 2px 0 2px -1px black inset, 0 -2px 2px -1px black inset;
}
.boombox .bb__body .middle__section3__box__mid__box1 {
  position: absolute;
  top: 13%;
  left: 0%;
  width: 100%;
  height: 44%;
  border-bottom: calc(1 * var(--unit)) solid #332f2d;
  border-top: calc(1 * var(--unit)) solid #332f2d;
  background: #443e40;
}
.boombox .bb__body .middle__section3__box__mid__box2 {
  position: absolute;
  top: 8%;
  left: 35%;
  width: 28%;
  height: 8%;
  background: #281e1d;
  border: calc(1 * var(--unit)) solid #191312;
}
.boombox .bb__body .middle__section3__box__mid__box3 {
  position: absolute;
  top: 28%;
  left: 20%;
  width: 60%;
  height: 64%;
  border: calc(1 * var(--unit)) solid #332f2d;
  background: #281e1d;
}
.boombox .bb__body .middle__section3__box__mid__box3::before {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 15%;
  background: #b1b1b1;
}
.boombox .bb__body .middle__section3__box__mid__box3__lines {
  position: absolute;
  width: 24%;
  height: 100%;
  background: linear-gradient(#fff 0 17%, transparent 17% 100%);
  background-size: calc(1 * var(--unit)) calc(2 * var(--unit));
}
.boombox .bb__body .middle__section3__box__mid__switch {
  position: absolute;
  top: 8%;
  left: 80%;
  width: 10%;
  height: 5%;
  background: #b1b1b1;
  box-shadow: 1px 1px 4px -1px white inset, 2px 0 2px -1px black inset, 0 -2px 2px -1px black inset, 0 3px 3px 0px #1e1a1b;
}
.boombox .bb__body .middle__section4 {
  position: absolute;
  top: 65%;
  left: 0%;
  width: 100%;
  height: 9%;
  background: linear-gradient(-45deg, #3b3a3d, #30292a);
  box-shadow: 0px 2px 1px 0px #3b3a3d inset, 2px 0 2px 1px #242425 inset, 0 -5px 1px #242425 inset;
}
.boombox .bb__body .middle__section4__red {
  position: absolute;
  top: 35%;
  left: 45%;
  width: 10.5%;
  height: 27%;
  background: #f25452;
  border-radius: 2px;
  filter: drop-shadow(0 -3px 1px #1e1a1b);
}
.boombox .bb__body .middle__section4__red__grip {
  position: absolute;
  top: 60%;
  width: 95%;
  height: 60%;
  border: 1px solid #e25152;
  background: linear-gradient(transparent 0 50%, #e25152 50% 100%), linear-gradient(90deg, transparent 0 50%, #e25152 50% 100%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
}
.boombox .bb__body .middle__section4__switches {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 32%;
  height: 50%;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 5px 3px -1px #1e1a1b, 0 10px 2px -1px #1e1a1b, 0 15px 3px -2px #1e1a1b, 0 17px 10px -2px #1e1a1b;
}
.boombox .bb__body .middle__section4__switches:nth-child(2n) {
  left: 64%;
}
.boombox .bb__body .middle__section4__switches__sw {
  width: 15.8333333333%;
  height: 100%;
  background: #e7f8fa;
  position: relative;
  box-shadow: 0px 5px 1px 0px white inset, 0 -3px 2px #5c818b inset;
}
.boombox .bb__body .middle__section4__switches__sw__grip {
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 55%;
  border: 1px solid #d2dee1;
  background: linear-gradient(transparent 0 50%, #d2dee1 50% 100%), linear-gradient(90deg, transparent 0 50%, #d2dee1 50% 100%);
  background-size: calc(1 * var(--unit)) calc(1 * var(--unit));
}
.boombox .bb__body .middle__section5 {
  position: absolute;
  top: 74%;
  left: 0%;
  width: 100%;
  height: 26%;
  background: linear-gradient(20deg, #2e2d33, #585860 55% 60%, #2e2d33);
  box-shadow: 0px 1px 1px 0px #585860 inset, 0px -3px 1px 1px #2e2d33 inset, 0 3px 3px #2e2d33 inset;
}
.boombox .bb__body .middle__section5__center__lines {
  position: absolute;
  width: 48%;
  height: 60%;
  background: linear-gradient(#fff 0 17%, transparent 17% 100%);
  background-size: calc(1 * var(--unit)) calc(2 * var(--unit));
}
.boombox .bb__body .middle__section5__left__lines {
  position: absolute;
  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;
}
.boombox .bb__body .middle__section5__left__lines::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 #d4bbc1 transparent transparent;
}
.boombox .bb__body .middle__section5 .right__lines {
  left: 86.5%;
  transform: rotateY(180deg) translate(-50%, -50%);
}
.boombox .bb__body .middle__section5__right__lines {
  position: absolute;
  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;
}
.boombox .bb__body .middle__section5__right__lines::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: #d4bbc1 transparent transparent transparent;
}
.boombox .bb__body .middle__section5__right__lines::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 #d4bbc1;
}
.boombox .bb__body .middle__section5__big__eq {
  position: absolute;
  top: 15%;
  left: 20%;
  width: 2.5%;
  height: 70%;
  background: linear-gradient(#0e0e10 0 15%, #38393f 20% 70%, #0b0b0d);
  overflow: hidden;
}
.boombox .bb__body .middle__section5__big__eq__lv {
  position: absolute;
  top: 8%;
  left: 0%;
  width: 100%;
  height: 40%;
  background: linear-gradient(0deg, #cfcfcf 0% 15%, #6c6c6c 20% 23%, #dfdfdf, #cfcfcf, #929292 70% 72%, #cfcfcf);
  box-shadow: 1px 1px 4px -1px #dfdfdf inset, 2px 0 2px -1px #dfdfdf inset, 0 -2px 2px -1px #dfdfdf inset, 0 8px 5px -1px #0b0b0d;
}
.boombox .bb__body .middle__section5__big__eq:nth-child(2n) {
  left: 77%;
}
.boombox .bb__body .middle__section5__big__eq:nth-child(3n) {
  left: 85%;
}
.boombox .bb__body .middle__section5__karaoke {
  position: absolute;
  bottom: 12%;
  right: 2%;
  width: 7%;
  height: 23%;
  background: #d4bbc1;
}
.boombox .bb__body .middle__section5__karaoke::after {
  content: "karaoke";
  position: absolute;
  top: 40%;
  right: -25%;
  width: 150%;
  height: 40%;
  background: #585860;
  color: #fff;
  font-family: "Fjalla One", sans-serif;
  text-align: center;
  transform: scaleX(0.8);
  font-size: calc(3 * var(--unit));
}
.boombox .bb__body .middle__section5__sm {
  position: relative;
  top: 15%;
  left: 29%;
  width: 41%;
  height: 70%;
  display: flex;
  justify-content: space-between;
}
.boombox .bb__body .middle__section5__sm__eq {
  width: 4%;
  height: 100%;
  background: linear-gradient(#0b0b0d 0 10%, #38393f 20% 70%, #0b0b0d);
  overflow: hidden;
}
.boombox .bb__body .middle__section5__sm__eq__lv {
  margin-top: 15px;
  width: 100%;
  height: 40%;
  background: linear-gradient(0deg, #cfcfcf 0% 15%, #6c6c6c 20% 23%, #dfdfdf, #cfcfcf, #929292 70% 72%, #cfcfcf);
  box-shadow: 0px 1px 2px -1px #dfdfdf inset, 1px 0 2px -1px #dfdfdf inset, 0 -1px 1px -1px #dfdfdf inset, 0 8px 5px -1px #0b0b0d;
}
.boombox .bb__body .middle__section5__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;
}
.boombox .bb__body .middle__section5__left:nth-last-child(2) {
  top: 49%;
}
.boombox .bb__body .middle__section5__left__box {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 99%;
  height: 80%;
  background: #2e292a;
}
.boombox .bb__body .middle__section5__left__top {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 13%;
  background: #fff;
}
.boombox .bb__body .middle__section5__left__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 #dfdfdf;
  background: #1e1b1b;
  filter: drop-shadow(0 2px 0.8px #1e1a1b);
}
.boombox .bb__body .middle__section5__left__hole:nth-last-child(2) {
  left: 74%;
}
.boombox .bb__body .middle__section5__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;
  overflow: hidden;
}
.boombox .bb__body .middle__section5__right__box {
  position: absolute;
  top: 22%;
  left: 0%;
  width: 99%;
  height: 65%;
  background: #2e292a;
}
.boombox .bb__body .middle__section5__right__top {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 13%;
  background: #fff;
}
.boombox .bb__body .middle__section5__right__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 #dfdfdf;
  background: #1e1b1b;
}
.boombox .bb__body .middle__section5__right__hole:nth-last-child(2) {
  left: 74%;
}