@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,900&display=swap');

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.banner {
  position: relative;
  min-width: 280px;
  width: 100%;
  height: 90px;
  margin: 0 auto;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  background: rgb(13, 24, 46);
  background-size: contain;
  border: 1px solid rgb(0, 165, 254);
  overflow: hidden;
}

.logo {
  position: absolute;
  width: 183px;
  height: 64px;
  left: 236px;
  top: 50%;
  transform: translateY(-50%);
  background: url(../img/logo.png) center no-repeat;
  background-size: contain;
}

.btn-wrap {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  right: 233px;
  width: 174px;
  height: 53px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size: 16px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  color: rgb(44, 49, 60);

  border-radius: 60px;
  border: 4px solid rgb(94, 227, 0);
  animation: btn-an 4.2s infinite;
}

.btn {
  width: 156px;
  height: 35px;
  padding-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgb(94, 227, 0);
  border-radius: 60px;
  box-shadow: 0px 0px 8px 0px rgba(137, 233, 68, 0.8),
    inset 0px 2px 0px 0px rgba(137, 233, 68, 0.8);
}

.bcg {
  position: absolute;
  width: 607px;
  height: 90px;
  top: -1px;
  left: 288px;
  background: url(../img/bcg.png) center no-repeat;
  background-size: contain;
}

.bcg-one {
  position: absolute;
  width: 349px;
  height: 94px;
  top: 34px;
  left: 489px;
  /* transform: translate(24px, -24px) scale(1.03); */
  background: url(../img/bcg-txt.png) center no-repeat;
  background-size: contain;
  animation: bcg1 4.2s infinite;
}

.wrapper {
  position: relative;
  margin: 0 auto;
  max-width: 2060px;
  width: 100%;
  height: 100%;
}

.container {
  position: relative;
  margin: 0 auto;
  max-width: 920px;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
}

.block-imgs {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}

.slide-one .img-one {
  position: absolute;
  top: 6px;
  left: 444px;
  width: 444px;
  height: 71px;
  background: url(../img/s1-1.png) center no-repeat;
  background-size: contain;
  animation: s1-i1 4.2s infinite;
}

.slide-one .img-two {
  position: absolute;
  top: -32px;
  left: 447px;
  width: 389px;
  height: 77px;
  z-index: 1;
  background: url(../img/s1-2.png) center no-repeat;
  background-size: contain;
  animation: s1-i2 4.2s infinite;
}

.slide-one .img-three {
  position: absolute;
  top: -31px;
  left: 519px;
  width: 321px;
  height: 300px;
  background: url(../img/s1-3.png) center no-repeat;
  background-size: contain;
  animation: s1-i3 4.2s infinite;
}

.block-txt {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 0px 6px 7px rgba(0, 0, 0, 0.8);
}

.slide-one .block-txt {
  top: 18px;
  left: -163px;
  font-size: 23px;
  line-height: 1.2;
  letter-spacing: -0.1px;
  animation: s1-txt 4.2s infinite;
}

.slide-two .block-txt {
  display: inline;
  top: 30px;
  left: -190px;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: 0.1px;
  animation: s2-txt 4.2s infinite;
}

.slide-two .img-one {
  position: absolute;
  width: 104px;
  height: 136px;
  top: 2px;
  left: 855px;
  background: url(../img/s2-1.png) center no-repeat;
  background-size: contain;
  animation: s2-i13 4.2s infinite;
}

.slide-two .img-two {
  position: absolute;
  width: 60px;
  height: 69px;
  top: 24px;
  left: 425px;
  background: url(../img/s2-2.png) center no-repeat;
  background-size: contain;
  animation: s2-i2 4.2s infinite;
}

.slide-two .img-three {
  position: absolute;
  width: 77px;
  height: 100px;
  top: 2px;
  left: 462px;
  background: url(../img/s2-3.png) center no-repeat;
  background-size: contain;
  animation: s2-i13 4.2s infinite;
}

  

@media (max-width: 1899px) {
  .wrapper {
    max-width: 1564px;
  }

  .logo {
    left: 106px;
  }

  .btn-wrap {
    right: 93px;
  }

  .bcg-one {
    left: 379px;
    /* transform: translate(0px, -24px) scale(1.03); */
    animation: bcg1-1280 4.2s infinite;
  }

  .bcg {
    left: 178px;
  }

  .slide-one .block-txt {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: 0.1px;
    top: 6px;
    left: -153px;
  }

  .slide-one .line-one,
  .slide-one .line-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .slide-one .block-imgs {
    left: -110px;
  }

  .slide-two .block-txt {
    display: flex;
    font-size: 19px;
    line-height: 1.2;
    letter-spacing: -0.1px;
    top: 24px;
    left: -156px;
  }

  .slide-two .block-imgs {
    left: -110px;
  }

  .slide-two .img-one {
    left: 805px;
  }
}



@media (max-width: 1279px) {
  .container {
    max-width: 768px;
  }

  .wrapper {
    max-width: 954px;
  }

  .logo {
    width: 124px;
    left: 19px;
    top: 49%;
  }

  .btn-wrap {
    width: 90px;
    height: 41px;
    right: 23px;
    border-width: 3px;
  }

  .btn {
    font-size: 10px;
    line-height: 1.1;
    padding-top: 1px;
    width: 78px;
    height: 29px;
    box-shadow: 0px 0px 8px 0px rgba(137, 233, 68, 0.8),
      inset 0px 2px 0px 0px rgba(137, 233, 68, 0.8);
  }

  .bcg-one {
    width: 277px;
    top: 25px;
    left: 319px;
    /* transform: translate(-1px, -18px) scale(1.03); */
    animation: bcg1-768 4.2s infinite;
  }

  .bcg {
    width: 486px;
    left: 156px;
    background: url(../img/bcg768.png) center no-repeat;
    background-size: contain;
  }

  .block-txt {
    width: 300px;
  }

  .slide-one .block-txt {
    font-size: 12px;
    line-height: 1.2;
    top: 16px;
    left: 74px;
  }

  .slide-one .block-imgs {
    left: -149px;
    top: -1px;
    transform: scale(0.795);
  }

  .slide-two .block-txt {
    font-size: 15px;
    top: 10px;
    left: 69px;
  }

  .slide-two .line-one,
  .slide-two .line-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .slide-two .block-imgs {
    left: -148px;
    top: 0px;
    transform: scale(0.792);
  }

  .slide-two .img-one {
    left: 805px;
  }
}



@media (max-width: 767px) {
  .container {
    max-width: 468px;
  }

  .wrapper {
    max-width: 624px;
  }

  .logo {
    width: 74px;
    left: 12px;
    top: 49.5%;
  }

  .btn-wrap {
    width: 74px;
    height: 34px;
    right: 3px;
    border-width: 2px;
  }

  .btn {
    font-size: 8.5px;
    width: 64px;
    height: 24px;
    box-shadow: 0px 0px 5px 0px rgba(137, 233, 68, 0.8),
      inset 0px 1px 0px 0px rgba(137, 233, 68, 0.8);
  }

  .bcg-one {
    width: 193px;
    top: 31px;
    left: 182px;
    /* transform: translate(0px, 1px) scale(0.9); */
    animation: bcg1-468 4.2s infinite;
  }

  .bcg {
    width: 397px;
    left: -1px;
    background: url(../img/bcg468.png) center no-repeat;
    background-size: contain;
  }

  .slide-one .block-txt {
    font-size: 10px;
    line-height: 1.2;
    top: 23px;
    left: -11px;
  }

  .slide-one .block-imgs {
    left: -162px;
    top: -1px;
    transform: scale(0.481);
  }

  .slide-one .img-one {
    top: 2px;
    left: 447px;
    width: 443px;
    height: 137px;
    background: url(../img/s1-1-468.png) center no-repeat;
    background-size: contain;
  }

  .slide-two .block-txt {
    font-size: 12px;
    line-height: 1.25;
    top: 23px;
    left: -5px;
  }

  .slide-two .line-two {
    display: inline;
  }

  .slide-two .block-imgs {
    left: -127px;
    top: -15px;
    transform: scale(0.62);
  }

  .slide-two .img-one {
    width: 88px;
    top: -8px;
    left: 520px;
  }
}



@media (max-width: 467px) {
  .container {
    max-width: 280px;
  }

  .wrapper {
    max-width: 380px;
  }

  .logo {
    width: 80px;
    height: 27px;
    left: 14px;
    top: 10px;
    transform: translateY(0);
  }

  .btn-wrap {
    width: 64px;
    height: 31px;
    left: 20px;
    top: 47px;
    transform: translateY(0);
  }

  .btn {
    font-size: 7px;
    width: 54px;
    height: 21px;
  }

  .bcg-one {
    width: 192px;
    top: 32px;
    left: 97px;
    /* transform: translate(0px, 0px) scale(1); */
    animation: bcg1-280 4.2s infinite;
  }

  .bcg {
    width: 351px;
    left: 40px;
    background: url(../img/bcg280.png) center no-repeat;
    background-size: contain;
  }

  .block-txt {
    width: 100px;
  }

  .slide-one .block-txt {
    font-size: 9px;
    line-height: 11px;
    top: 10px;
    left: 93px;
    animation: s1-txt-280 4.2s infinite;
  }

  .slide-one .block-imgs {
    left: -112px;
    top: -14px;
    transform: scale(0.384);
  }

  .slide-one .img-one {
    display: none;
  }

  .slide-one .img-two {
    top: -51px;
    left: 431px;
    width: 419px;
    height: 95px;
    animation: s1-i-280 4.2s infinite;
  }

  .slide-one .img-three {
    animation: s1-i-280 4.2s infinite;
  }

  .slide-two .block-txt {
    font-size: 11px;
    top: 13px;
    left: 95px;
    animation: s2-txt-280 4.2s infinite;
  }

  .slide-two .block-imgs {
    left: -118px;
    top: -12px;
    transform: scale(0.6);
  }

  .slide-two .img-one {
    top: -15px;
    left: 482px;
    animation: s2-i13-280 4.2s infinite;
  }

  .slide-two .img-two {
    animation: s2-i2-280 4.2s infinite;
  }

  .slide-two .img-three {
    width: 79px;
    height: 103px;
    top: -2px;
    left: 460px;
    animation: s2-i13-280 4.2s infinite;
  }
}



@keyframes btn-an {
  0%, 64%, 68%, 72%, 76%, 100% {
    border-color: rgb(94, 227, 0);
  }

  66%, 70%, 74% {
    border-color: rgba(94, 227, 0, 0);
  }
}



@keyframes s1-txt {
  0%, 1% {
    transform: translateY(-90px);
  }

  6%, 47% {
    transform: translateY(0px);
  }

  50%, 100% {
    transform: translateY(90px);
  }
}

@keyframes s1-txt-280 {
  0%, 1% {
    transform: translateY(-90px);
  }

  6%, 47% {
    transform: translateY(0px);
  }

  50%, 100% {
    transform: translateY(-90px);
  }
}

@keyframes s1-i-280 {
  0%, 3% {
    opacity: 0;
  }

  6%, 47% {
    opacity: 1;
  }

  49%, 100% {
    opacity: 0;
  }
}

@keyframes s1-i1 {
  0%, 1% {
    opacity: 0;
  }

  5%, 48% {
    opacity: 1;
  }

  50%, 100% {
    opacity: 0;
  }
}

@keyframes s1-i2 {
  0%, 4% {
    opacity: 0;
  }

  7%, 47% {
    opacity: 1;
  }

  49%, 100% {
    opacity: 0;
  }
}

@keyframes s1-i3 {
  0%, 1% {
    opacity: 0;
    transform: translateY(110px);
  }

  6%, 47% {
    opacity: 1;
    transform: translate(0px);
  }

  50%, 100% {
    opacity: 0;
    transform: translateY(110px);
  }
}



@keyframes s2-txt {
  0%, 50% {
    transform: translateY(-90px);
  }

  53%, 94% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(90px);
  }
}

@keyframes s2-txt-280 {
  0%, 50% {
    transform: translateY(-90px);
  }

  53%, 94% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(-90px);
  }
}

@keyframes s2-i2 {
  0%, 50% {
    opacity: 0;
    transform: translateY(-110px);
  }

  53%, 94% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(-110px);
  }
}

@keyframes s2-i13 {
  0%, 50% {
    opacity: 0;
    transform: translateY(110px);
  }

  53%, 94% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(110px);
  }
}

@keyframes s2-i2-280 {
  0%, 50% {
    opacity: 0;
    transform: translateY(-30px);
  }

  53%, 94% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(-30px);
  }
}

@keyframes s2-i13-280 {
  0%, 50% {
    opacity: 0;
    transform: translateY(30px);
  }

  53%, 94% {
    opacity: 1;
    transform: translateY(0px);
  }

  100% {
    opacity: 0;
    transform: translateY(30px);
  }
}



@keyframes bcg1 {
  0%, 1% {
    transform: translate(0px, 110px) scale(1);
  }

  6%, 50% {
    transform: translate(0px, 0px) scale(1);
  }

  53%, 64%, 68%, 72%, 76%, 96% {
    transform: translate(24px, -24px) scale(1.03);
  }

  66%, 70%, 74% {
    transform: translate(24px, -24px) scale(1.2);
  }

  100% {
    transform: translate(24px, -110px) scale(1.03);
  }
}

@keyframes bcg1-1280 {
  0%, 1% {
    transform: translate(0px, 110px) scale(1);
  }

  6%, 50% {
    transform: translate(0px, 0px) scale(1);
  }

  53%, 64%, 68%, 72%, 76%, 96% {
    transform: translate(0px, -24px) scale(1.03);
  }

  66%, 70%, 74% {
    transform: translate(0px, -24px) scale(1.2);
  }

  100% {
    transform: translate(0px, -110px) scale(1.03);
  }
}

@keyframes bcg1-768 {
  0%, 1% {
    transform: translate(0px, 110px) scale(1);
  }

  6%, 50% {
    transform: translate(0px, 0px) scale(1);
  }

  53%, 64%, 68%, 72%, 76%, 96% {
    transform: translate(-1px, -18px) scale(1.03);
  }

  66%, 70%, 74% {
    transform: translate(-1px, -18px) scale(1.2);
  }

  100% {
    transform: translate(-1px, -110px) scale(1.03);
  }
}

@keyframes bcg1-468 {
  0%, 1% {
    transform: translate(0px, 110px) scale(1);
  }

  6%, 50% {
    transform: translate(0px, 0px) scale(1);
  }

  53% {
    transform: translate(0px, 30px) scale(1);
  }

  56%, 64%, 68%, 72%, 76%, 96% {
    transform: translate(0px, 1px) scale(0.9);
  }

  66%, 70%, 74% {
    transform: translate(0px, 1px) scale(1.1);
  }

  100% {
    transform: translate(0px, -110px) scale(0.9);
  }
}

@keyframes bcg1-280 {
  0%, 1% {
    transform: translate(0px, 90px) scale(1);
  }

  6%, 64%, 68%, 72%, 76%, 96% {
    transform: translate(0px, 0px) scale(1);
  }

  66%, 70%, 74% {
    transform: translate(0px, 0px) scale(1.1);
  }

  100% {
    transform: translate(0px, 90px) scale(1);
  }
}