.mystic {
  position: relative;
  padding: 40px 0;
}
.mystic__nb {
  position: relative;
}
.mystic .vd {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: absolute;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  top: 0;
  left: 0;
  opacity: 0;
}
.mystic .vd::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
}
.mystic .vd__wrap {
  width: 100vw;
  height: 100vh;
  position: relative;
  opacity: 0;
}
.mystic .vd__wrap iframe, .mystic .vd__wrap object, .mystic .vd__wrap embed, .mystic .vd__wrap video {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  z-index: 2;
}
.mystic .vd__wrap::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: #000;
}
.mystic .vd__wrap::after {
  content: "";
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: #000;
}
.mystic .vd__nb {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
}
.mystic .vd__mask {
  position: absolute;
  width: 60%;
  height: 100%;
  top: 0;
  z-index: 3;
}
.mystic .vd__mask-left {
  left: 0%;
  background: linear-gradient(to right, #000 0%, #000 80%, rgba(0, 0, 0, 0) 100%);
}
.mystic .vd__mask-right {
  left: 40%;
  background: linear-gradient(to left, #000 0%, #000 80%, rgba(0, 0, 0, 0) 100%);
}
.mystic__bg {
  position: absolute;
  width: 80%;
  right: 0;
  top: 20%;
  z-index: 0;
}
.mystic .msi__container {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 50px;
  padding: 50px 25px 0;
}
@media (min-width: 996px) {
  .mystic {
    height: 100vh;
    overflow: hidden;
  }
  .mystic__nb {
    display: none;
  }
  .mystic .vd {
    opacity: 1;
  }
  .mystic .vd__wrap {
    opacity: 1;
  }
  .mystic__bg {
    top: 5%;
  }
}

.rgb {
  position: relative;
  text-align: center;
}
.rgb__font {
  position: relative;
}
.rgb__font img {
  width: 100%;
}
.rgb__font__base {
  position: absolute;
  width: 101%;
  top: 5px;
  left: 2px;
  z-index: 2;
  opacity: 1;
}
.rgb__font__img {
  position: relative;
  -webkit-mask: url("../images/mystic-font.png") center center no-repeat;
  mask: url("../images/mystic-font.png") center center no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
}
.rgb__font__img::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../images/mystic-font-bg.jpg") center center no-repeat ;
  background-size: cover;
  animation: rgb 5s infinite;
}
.rgb__nb {
  padding: 40px 0;
}
.rgb__nb__box {
  position: relative;
}
.rgb__nb img {
  width: 100%;
  vertical-align: bottom;
}
.rgb__nb__pd {
  position: relative;
  z-index: 3;
}
.rgb__nb__effert {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}
.rgb__nb__light {
  z-index: 2;
  -webkit-mask: url("../images/mystic-kb-mask.png") top center no-repeat;
  mask: url("../images/mystic-kb-mask.png") top center no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
  background: url("../images/rgb-light.svg") center center no-repeat ;
  background-size: cover;
  animation: rgblight 3s linear infinite;
}
.rgb__close-up {
  padding: 25px 0;
}
.rgb__close-up img {
  width: 80%;
  max-width: 500px;
}
.rgb__icons img {
  width: 50%;
}
@media (min-width: 996px) {
  .rgb {
    text-align: left;
  }
  .rgb__inner {
    width: 60%;
  }
  .rgb__text {
    padding-top: 25px;
  }
  .rgb__nb {
    padding: 0;
    position: absolute;
    width: 55%;
    left: 55%;
    z-index: 5;
    top: 25%;
    transform-origin: center center;
  }
}
@media (min-width: 1600px) {
  .rgb__text {
    padding-top: 80px;
  }
  .rgb__close-up img {
    width: 100%;
    max-width: none;
  }
  .rgb__nb {
    width: 75%;
    top: 30%;
    left: 59%;
  }
}

@keyframes rgb {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}
@keyframes rgblight {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(1440deg);
    filter: hue-rotate(1440deg);
  }
}