@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.banner {
  margin: 0 auto;
  min-width: 280px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a1c49;
  font-size: 1vw;
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.banner div {
  position: absolute;
}
.banner img {
  position: absolute;
}

.logo-wrapper {
  width: 32.2916666667em;
  height: 15.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-148.5%, -160%);
}

.logo {
  position: relative !important;
  width: 23.991667em;
}

.btn-wrapper {
  width: 32.2916666667em;
  height: 15.625em;
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(-159.5%, 54%);
  z-index: 10;
}

.btn {
  font-size: 1.5em;
  width: 10.5em;
  height: 2em;
  color: #32373d;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
  border-radius: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  z-index: 10;
  box-sizing: content-box;
  background: none !important;
  box-shadow: inset 0 0 0 0.13em #9ee607, 0 0 0.6em 0 #9de505;
  padding: 0.4em;
}
.btn::before {
  content: "";
  width: 100%;
  height: 300%;
  position: absolute;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 35%, rgb(255, 255, 255) 45%, rgb(255, 255, 255) 55%, rgba(255, 255, 255, 0) 65%);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: glare 3s infinite;
}
.btn::after {
  content: "";
  width: calc(100% - 0.8em);
  height: calc(100% - 0.8em);
  position: absolute;
  border-radius: 2em;
  box-shadow: inset 0 0.1em 0 0 #c5ff8d, 0 0 0.9em 0 #9de505;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #9ee607;
  z-index: -1;
}

.wrapper {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

.txt-1-wrapper {
  width: 51.291667em;
  height: 19.8125em;
  line-height: 1;
  color: #ae0606;
  text-align: left;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-85.5%, -61%);
  animation: s1 0.5s 0.5s 1 backwards;
  z-index: 5;
}

.txt-1-sh,
.txt-1-fill {
  font-size: 7em;
  line-height: 0.85;
  letter-spacing: 0.02em;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.txt-1-fill {
  -webkit-text-stroke: #fff 0.01em;
}

.txt-1-sh {
  color: transparent;
  text-shadow: 0 0.037em 0 rgba(0, 0, 0, 0.4), 0 0.0296em 0.0519em rgba(0, 0, 0, 0.4);
}

.txt-2-wrapper {
  width: 44.291667em;
  height: 7.8125em;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  top: 50%;
  left: 50%;
  transform: translate(-99%, 70%);
  animation: s1 0.5s 1s 1 backwards;
  z-index: 5;
}

.txt-2 {
  font-size: 4.4em;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-shadow: 0 0.0941em 0.2824em rgba(0, 0, 0, 0.08);
  width: 100%;
  position: relative !important;
}

.back {
  width: 117.03125em;
  height: 56.5625em;
  top: 50%;
  left: 50%;
  transform: translate(-42.7%, -54%);
  background: url(../img/back.jpg) no-repeat center center/contain;
  animation: s1 1s 0.5s 1 backwards;
}

@keyframes s1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes glare {
  0%, 0.001%, 55% {
    transform: translate(-100%, -50%);
  }
  100% {
    transform: translate(100%, -50%);
  }
}
@media screen and (max-aspect-ratio: 1366/1024) and (min-aspect-ratio: 1000/999) {
  .logo-wrapper {
    font-size: 1.19em;
    transform: translate(-134.5%, -165%);
  }
  .txt-1-wrapper {
    font-size: 1.19em;
    transform: translate(-76.5%, -61%);
  }
  .txt-2-wrapper {
    font-size: 1.19em;
    transform: translate(-88.5%, 68%);
  }
  .btn-wrapper {
    font-size: 1.19em;
    transform: translate(-145.5%, 59%);
  }
  .back {
    width: 159.03125em;
    height: 82.5625em;
    transform: translate(-47.8%, -48.5%);
  }
  .back::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-20%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 0, 0) 38%, rgba(10, 28, 73, 0.27) 56%, rgb(10, 28, 73) 85%);
  }
  .back::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(10, 28, 73, 0) 91%, rgba(10, 28, 73, 0.41) 100%, rgb(10, 28, 73) 100%);
  }
}
@media screen and (min-aspect-ratio: 740/360) {
  .logo-wrapper {
    font-size: 0.9em;
    transform: translate(-161.5%, -161%);
  }
  .txt-1-wrapper {
    font-size: 0.9em;
    transform: translate(-93.5%, -61.5%);
  }
  .txt-2-wrapper {
    font-size: 0.9em;
    transform: translate(-108%, 67%);
  }
  .btn-wrapper {
    font-size: 1.25em;
    transform: translate(-129.5%, 30%);
  }
}
@media screen and (max-aspect-ratio: 1024/1023) {
  .banner {
    font-size: calc(0.4vw + 0.4vh);
  }
  .logo-wrapper {
    font-size: 1.8em;
    transform: translate(-50%, -248%);
  }
  .btn-wrapper {
    font-size: 2.55em;
    transform: translate(-50%, 93%);
  }
  .txt-1-wrapper {
    width: 56.291667em;
    text-align: center;
    font-size: 1.59em;
    transform: translate(-50%, -163%);
  }
  .txt-2-wrapper {
    text-align: center;
    font-size: 1.55em;
    transform: translate(-50%, -236%);
  }
  .txt-1-wrapper .br1 {
    display: none;
  }
  .back {
    font-size: 1vw;
    width: 155.9803921569em;
    height: 136.1764705882em;
    transform: translate(-46.5%, -49%);
    background: url(../img/back-1024.jpg) no-repeat center center/contain;
  }
}
@media screen and (max-aspect-ratio: 1024/1320) {
  .banner {
    font-size: 1vw;
  }
}
@media screen and (max-aspect-ratio: 320/568) {
  .logo-wrapper {
    font-size: 2.3em;
    transform: translate(-50%, -241%);
  }
  .txt-1-wrapper {
    font-size: 1.8em;
    transform: translate(-50%, -167%);
  }
  .txt-2-wrapper {
    font-size: 1.8em;
    transform: translate(-50%, -241%);
  }
  .btn-wrapper {
    transform: translate(-50%, 128%);
  }
  .back {
    transform: translate(-46.5%, -50%);
  }
  .back::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgb(10, 28, 73) 0%, rgba(10, 28, 73, 0.54) 13%, rgba(10, 28, 73, 0) 37%);
  }
}
@media screen and (max-aspect-ratio: 520/1024) {
  .logo-wrapper {
    transform: translate(-50%, -300%);
  }
  .btn-wrapper {
    font-size: 3.45em;
    transform: translate(-50%, 116%);
  }
  .txt-1-wrapper {
    font-size: 2.3em;
    transform: translate(-50%, -166%);
  }
  .txt-2-wrapper {
    font-size: 2.25em;
    transform: translate(-50%, -203%);
  }
  .txt-1-wrapper .br1 {
    display: block;
  }
  .back {
    width: 175.980392em;
    height: 164.176471em;
    transform: translate(-47%, -45%);
  }
}/*# sourceMappingURL=style.css.map */