body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

iframe{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.back{
  width: 7%;
  height: 5%;
  position: absolute;
  right: 2%;
  top: 6%;
  /* background-color: #fff; */
}
.swiper-box {
  z-index: 1000;
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #0d0a31;
  opacity: .85;
}
.swiper {
  
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0;
  width: 80vw;
  height: 48vw;
}  

.close-box {
  position: absolute;
  top:0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 1;
  width: 80vw;
  height: 48vw;
}  

.close {
  display: none;
  z-index: 1002;
  position: absolute;
  top: -1%;
  right: -4%;
  cursor: pointer;
  width: 4%;
  height: 7%;
  
  
}
.box{
  display: none;
}
* {
  margin: 0;
}
.wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  /* display: none; */
}
.kv{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: none;
}
#video1 {
  z-index: 999;
  /* display: none; */
  cursor: pointer;
}

.swiper-button-prev {
  transform: translate3d(0,0,0);
}

.swiper-button-next {
  transform: translate3d(0,0,0);
}



video {
  object-fit: fill;
  position: absolute;
  width: 100%;
  height: 100%;
  /* margin-top: 50%; */
  top: 0px;
  left: 0px;
}

.button {
  width: 5%;
  height: 10%;
  /* background-color: #fff; */
  position: absolute;
  z-index: 300;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 56%;
  opacity: 0;
}
.application {
  left: 19.8%;
}
.application2 {
  left: 38.2%;
}
.application3 {
  left: 57.3%;
}
.application4 {
  left: 76.8%;
}




.inner {
  width: 8px;
  height: 8px;
  border-radius: 5px;
  background-color: #fff;
  animation: moveInner 1s infinite;
}

.middle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: rgba(229, 234, 235, 0.918);
  animation: moveMiddle 1s infinite;
}

.biggest {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgba(0, 211, 233, 0.1);
  animation: moveBiggest 1s infinite;
}

@keyframes moveInner {
  from {
      width: 4px;
      height: 4px;
  }

  to {
      width: 8px;
      height: 8px;
  }
}

@keyframes moveMiddle {
  from {
      width: 8px;
      height: 8px;
  }

  to {
      width: 24px;
      height: 24px;
  }
}

@keyframes moveBiggest {
  from {
      width: 8px;
      height: 8px;
  }

  to {
      width: 40px;
      height: 40px;
  }
}