.common__container {
  position: relative;
  padding: 0 0px;
  margin: 0 auto;
}

@media (min-width: 1921px) {
  .common__container {
    width: 1440px;
  }
}

@media (max-width: 1920px) and (min-width: 1300px) {
  .common__container {
    width: 1270px;
  }
}

@media (max-width: 1299px) and (min-width: 992px) {
  .common__container {
    width: 990px;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .common__container {
    width: 750px;
  }
}

@media (max-width: 767px) {
  .common__container {
    width: 100%;
  }
}

.scrollArea {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.scrollArea__mainVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 550px;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.scrollArea__mainVideo-canvas {
  width: 100%;
  position: relative;
  z-index: 3;
}

.scrollArea__mainVideo-color {
  position: absolute;
  top: 50%;
  left: 52%;
  width: 20%;
  height: 20%;
  z-index: 2;
  -moz-background-size: 120px 720px;
       background-size: 120px 720px;
}

.scrollArea__mainVideo-color .linearBG {
  width: 100%;
  height: 100%;
  -webkit-animation: rainbow 3s linear infinite;
     -moz-animation: rainbow 3s linear infinite;
          animation: rainbow 3s linear infinite;
  display: none;
}

.scrollArea__mainVideo-color .breathBG {
  width: 100%;
  height: 100%;
  -webkit-animation: breath 15s linear infinite;
     -moz-animation: breath 15s linear infinite;
          animation: breath 15s linear infinite;
  display: none;
}

.scrollArea__mainVideo-color .turnon {
  width: 100%;
  height: 100%;
  -webkit-animation: turnon 1s linear forwards;
     -moz-animation: turnon 1s linear forwards;
          animation: turnon 1s linear forwards;
  display: none;
}

.scrollArea__mainVideo2 {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  max-width: 550px;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.scrollArea__mainVideo2-canvas {
  width: 100%;
  position: relative;
  z-index: 3;
}

.scrollArea__mainVideo2 .colorchange {
  width: 120px;
  height: 120px;
  background: #ffffff00;
  position: absolute;
  top: 53%;
  left: 30%;
  z-index: 2;
}
/*# sourceMappingURL=all.css.map */