/* page about */

.banner-section.about {
  position: relative;
  background-position: center top 130px;
  height: calc(100vh + 130px);
  background-size: contain;
}

.banner-section.about::after {
  content: "";
  position: absolute;
  top: calc(50% - 130px);
  left: 50%;
  transform: translate(-50%, calc(-50% + 120px));
  background-image: url('../assets/about-logo.svg');
  max-width: 294px;
  max-height: 265px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.about-video {
  width: 356px;
  max-height: 634px;
  height: auto;
}

@media only screen and (min-width: 1024px) and (max-width: 1050px) {
  .banner-section.about {
    max-height: 100vh;
    background-position: center;
    margin-bottom: 50px;
  }
}

@media only screen and (min-width: 640px) and (max-width: 1023px) {
  .banner-section.about {
    max-height: 100vh;
    background-position: center;
    margin-bottom: 50px;
  }
  .about-video {
    width: 100%;
    height: auto;
    margin: 0 auto 64px auto;
  }
  .banner-section.about::after {
    max-width: 194px;
    max-height: 185px;
    /* top: 50%; */
    left: 50%;
    transform: translateX(-50%);
  }
}

@media screen and (max-width: 600px) {
  .banner-section.about {
    max-height: 320px;
    margin-bottom: 70px;
  }

  .banner-section.about::after {
    max-width: 83px;
    max-height: 75px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
  }

  .about-video {
    width: 100%;
    height: auto;
    margin: 0 auto 50px auto;
  }
}