.common-banner {
  position: relative;
  width: 100%;
  height: 450px;
}
@media screen and (min-width: 1200px) {
  .common-banner {
    height: 574px;
  }
}
@media screen and (min-width: 1600px) {
  .common-banner {
    height: 654px;
  }
}
.common-banner figure {
  width: 100%;
  height: 100%;
}
.common-banner figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.common-banner-content {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 50px;
}
@media screen and (min-width: 1200px) {
  .common-banner-content {
    bottom: 80px;
  }
}
@media screen and (min-width: 1600px) {
  .common-banner-content {
    bottom: 100px;
  }
}
.common-banner-content .banner-title {
  color: #fff;
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  -webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, -webkit-transform 1s ease;
  transition: opacity 1s ease, transform 1s ease;
  transition: opacity 1s ease, transform 1s ease, -webkit-transform 1s ease;
}
.common-banner-content .banner-title.animate {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}
.common-banner::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(51.72%, rgba(0, 0, 0, 0)), to(rgba(3, 18, 33, 0.88))), -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.2)), to(rgba(0, 0, 0, 0)));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 51.72%, rgba(3, 18, 33, 0.88) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
  left: 0;
  bottom: 0;
}