body {
  font-size: 3.8vmin;
  color: #271005;
  overflow: hidden;
  background: #000;
}

.a {
  border: 1px solid #f00;
}

.rotate0 .container {
  height: 100vmin;
  position: absolute;
  transform: rotate(90deg);
  transform-origin: 0 0;
  left: 100vmin;
  top: 0;
}

.rotate0 .pop {
  position: fixed;
  width: 100vmin;
  height: 100vmax;
  left: 0;
  top: 0%;
  transform-origin: 50% 50%;
  background-color: transparent;
}

.rotate0 iframe {
  width: 150vmin;
  height: 90vmin;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
}

.rotate0 .pop .pop-close {
  right: 5vmin;
  top: calc(50% + 75vmin);
}

.rotate0 .pop-tips, .rotate0 .open-cover {
  transform: rotate(90deg) translate(0%, -100%);
  transform-origin: 0 0;
  width: 100vmax;
  height: 100vmin;
}

.rotate0 .icon-scroll {
  left: 46vmin;
  top: 80vmax;
  opacity: 0;
  transform: rotate(90deg);
  animation: 3s scroll2 infinite 6s;
}

.rotate90 .container {
  height: 100vmin;
  position: absolute;
  transform: rotate(0deg);
  transform-origin: 0 0;
  left: 0;
  top: 0;
}

.rotate90 .pop {
  position: fixed;
  width: 150vmin;
  height: 90vmin;
  left: 50%;
  top: 5vmin;
  transform: translateX(-50%);
}

.pop-close {
  position: absolute;
  right: -8vmin;
  top: 0;
  background: #000;
  width: 8vmin;
  height: 8vmin;
  line-height: 8vmin;
  font-size: 5vmin;
  color: #fff;
  text-align: center;
}

.pop {
  background: white;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 102;
}

.container-scroll90 {
  width: 100vh !important;
  overflow: hidden;
}

iframe {
  width: 100%;
  height: 100%;
}

.pop-tips {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 200;
}

.pop-tips .main {
  position: relative;
}

.pop-tips .tips-img, .pop-tips .tips-video {
  height: 80vmin;
}

.pop-tips .pop-close {
  right: 0;
  opacity: 0;
}

.pop-tips .pop-close-video {
  right: -8vmin;
  opacity: 1;
  background: #fff;
  color: #000;
}

.bg {
  height: 100%;
  display: block;
}

.title1 {
  position: absolute;
  height: 20.28%;
  top: 21.57%;
  left: 3.21%;
  animation: 3s title1 both;
}

.title2 {
  position: absolute;
  height: 20.28%;
  top: 21.57%;
  left: 3.21%;
  animation: 1s title2 3s both;
}

.title-new {
  position: absolute;
  height: 22.13%;
  top: 20.93%;
  left: 2.46%;
  animation: 1s title-new both;
}

.title-hand {
  position: absolute;
  height: 9.07%;
  top: 47.87%;
  left: 7.98%;
  animation: 1s flash2 infinite 1s;
  opacity: 0;
}

.icon-scroll {
  position: absolute;
  height: 8.33%;
  top: 50%;
  left: 0%;
  height: 8.33vmin;
  left: 80vmax;
  opacity: 0;
  animation: 3s scroll infinite 6s;
  z-index: 102;
}

.open-cover {
  position: absolute;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  width: 100vmax;
  opacity: 0;
  z-index: 101;
  animation: 3s fadeInOut 1s both;
}

.map {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100vmax;
  animation: 2s blur both;
}

.map-bg {
  position: absolute;
  left: 50%;
  top: 2%;
  height: 100vmin;
  width: 178vmin;
  margin-left: -75vmin;
}

.map-china {
  animation: 1s mapChina 1s both;
  opacity: 0;
}

.map-name {
  animation: 1s flash2 infinite 2.5s;
  opacity: 0;
}

@keyframes mapChina {
  0% {
    transform: scale(0.1);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blur {
  100% {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
}

@keyframes fadeInOut {
  100% {
    opacity: 1;
  }
}

@keyframes title-new {
  0% {
    transform: scale(0);
  }
}

@keyframes title1 {
  0% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
  60% {
    transform: scale(1);
    height: 20.28%;
    top: 21.57%;
    left: 3.21%;
  }
  100% {
    height: 8.89%;
    top: 4.91%;
    left: 0.35%;
  }
}

@keyframes title2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scroll {
  50% {
    opacity: 1;
    left: 90vmax;
  }
  100% {
    opacity: 0;
    left: 100vmax;
  }
}

@keyframes scroll2 {
  50% {
    opacity: 1;
    top: 90vmax;
  }
  100% {
    opacity: 0;
    top: 100vmax;
  }
}

.location1 {
  position: absolute;
  height: 5.28%;
  top: 35.28%;
  left: 21.88%;
}

.location2 {
  position: absolute;
  height: 5.46%;
  top: 83.52%;
  left: 35.36%;
}

.location3 {
  position: absolute;
  height: 6.02%;
  top: 81.67%;
  left: 47.72%;
}

.video1 {
  background: #000;
  position: absolute;
  height: 37.78%;
  top: 13.52%;
  left: 25.12%;
  width: 67.31vmin;
}

.video2 {
  background: #000;
  position: absolute;
  height: 37.78%;
  top: 13.7%;
  left: 37.79%;
  width: 67.31vmin;
}

.video3 {
  background: #000;
  position: absolute;
  height: 37.78%;
  top: 13.8%;
  left: 49.12%;
  width: 67.31vmin;
}

.video4 {
  background: #000;
  position: absolute;
  height: 44.35%;
  top: 30.56%;
  left: 69.19%;
  width: 79vmin;
}

.poster {
  width: 100%;
  display: block;
  height: 100%;
  opacity: .8;
  display: none;
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 30%;
  display: block;
  transform: translate(-50%, -50%);
}

.staff {
  position: absolute;
  height: 55.56%;
  top: 22.96%;
  left: 87.74%;
  width: 100vmin;
  text-align: center;
  color: #4a2c2c;
  overflow: auto;
}

.textbg {
  overflow: auto;
  color: #281006;
}

.avatar1 {
  position: absolute;
  height: 12.41%;
  top: 60.46%;
  left: 24.93%;
}

.avatar2 {
  position: absolute;
  height: 12.41%;
  top: 65%;
  left: 41.98%;
}

.avatar3 {
  position: absolute;
  height: 12.41%;
  top: 14.63%;
  left: 48.45%;
}

.textbg1 {
  position: absolute;
  height: 22.96%;
  top: 57.5%;
  left: 25.89%;
  width: 56.85vmin;
  padding: 3.5vmin 3.5vmin 3.5vmin 6vmin;
  background: url(img/textbg1.png) 0 0 no-repeat;
  background-size: 100% 100%;
}

.textbg2 {
  position: absolute;
  height: 22.96%;
  top: 58.15%;
  left: 37.81%;
  width: 57.12vmin;
  padding: 3.5vmin 6vmin 3.5vmin 3.5vmin;
  background: url(img/textbg2.png) 0 0 no-repeat;
  background-size: 100% 100%;
}

.textbg3 {
  position: absolute;
  height: 22.96%;
  top: 12.78%;
  left: 49.46%;
  width: 57.12vmin;
  padding: 3.5vmin 3.5vmin 3.5vmin 6vmin;
  background: url(img/textbg1.png) 0 0 no-repeat;
  background-size: 100% 100%;
}

.data-text {
  position: absolute;
  height: 77.04%;
  top: 18.06%;
  left: 60.8%;
  width: 90vmin;
  overflow: auto;
  border-radius: 1vmin;
  padding: 4vmin 9vmin;
  line-height: 6vmin;
  background-image: linear-gradient(0deg, rgba(255, 242, 181, 0.5), rgba(255, 242, 181, 0.5));
}

.links {
  position: absolute;
  top: 13vmin;
  left: 30.62%;
}

.links .icon-read-more {
  display: block;
  height: 7vmin;
  margin-left: -3.8vmin;
  margin-bottom: 3vmin;
}

.links .links-text {
  position: relative;
  margin-bottom: 3vmin;
}

.links .links-text span {
  position: relative;
  display: inline-block;
}

.links .links-text div {
  width: 1.8vmin;
  height: 1.8vmin;
  position: absolute;
  left: -15px;
  top: 2.4vmin;
  margin-top: -3px;
  background: #41997c;
  border-radius: 50%;
}

.links2 {
  top: 15vmin;
  left: 43.33%;
}

.links3 {
  top: 44vmin;
  left: 54.82%;
}

.hand1 {
  position: absolute;
  top: 30%;
  left: 100%;
  height: 11vmin;
  opacity: 0;
  animation: 1s flash infinite;
}

.hand2 {
  position: absolute;
  top: 120%;
  left: 20%;
  height: 11vmin;
  opacity: 0;
  animation: 1s flash infinite;
}

.hand3 {
  position: absolute;
  top: 30%;
  left: 100%;
  height: 11vmin;
  opacity: 0;
  animation: 1s flash infinite;
}

@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flash2 {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.big-data-icon1 {
  background: url(img/big-data-icon1.png) 0 48% no-repeat;
  background-size: auto 80%;
  padding-left: 5vmin;
}

.big-data-icon2 {
  background: url(img/big-data-icon2.png) 0 48% no-repeat;
  background-size: auto 80%;
  padding-left: 5vmin;
}

.big-data-icon3 {
  background: url(img/big-data-icon3.png) 0 48% no-repeat;
  background-size: auto 80%;
  padding-left: 5vmin;
}

.big-data-icon4 {
  background: url(img/big-data-icon4.png) 0 48% no-repeat;
  background-size: auto 80%;
  padding-left: 5vmin;
}

.big-data-icon5 {
  background: url(img/big-data-icon5.png) 0 48% no-repeat;
  background-size: auto 80%;
  padding-left: 5vmin;
}

.big-data-icon6 {
  background: url(img/big-data-icon6.png) 0 48% no-repeat;
  background-size: auto 80%;
  padding-left: 5vmin;
}

.password1 {
  position: absolute;
  height: 10.56%;
  top: 56.39%;
  left: 26.37%;
  animation: 1.5s password infinite;
}

.password2 {
  position: absolute;
  height: 10.56%;
  top: 56.39%;
  left: 39%;
  animation: 1.5s password infinite;
}

.password3 {
  position: absolute;
  height: 10.56%;
  top: 23.15%;
  left: 54.64%;
  animation: 1.5s password infinite;
}

@keyframes password {
  50% {
    transform: scale(1.2);
  }
}

.dream1 {
  position: absolute;
  height: 52.5%;
  top: 27.78%;
  left: 77.4%;
  opacity: 0;
  animation: 12s dream infinite;
}

.dream2 {
  position: absolute;
  height: 49.07%;
  top: 27.78%;
  left: 77.4%;
  opacity: 0;
  animation: 12s dream infinite 4s;
}

.dream3 {
  position: absolute;
  height: 49.07%;
  top: 27.78%;
  left: 77.4%;
  opacity: 0;
  animation: 12s dream infinite 8s;
}

.dream1-2 {
  position: absolute;
  height: 52.5%;
  top: 27.78%;
  left: 77.4%;
  opacity: 0;
  animation: 8s dream-2 infinite;
}

.dream2-2 {
  position: absolute;
  height: 49.07%;
  top: 27.78%;
  left: 77.4%;
  opacity: 0;
  animation: 8s dream-2 infinite 4s;
}

@keyframes dream {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  5% {
    opacity: 1;
    transform: scale(1);
  }
  28.33% {
    opacity: 1;
    transform: scale(1);
  }
  33.33% {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes dream-2 {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  5% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.text-link {
  position: absolute;
  height: 11.39%;
  top: 10.28%;
  left: 79.44%;
  width: 67vmin;
}

.hand4 {
  position: absolute;
  top: 14vmin;
  left: 84.19%;
  height: 11vmin;
  opacity: 0;
  animation: 1s flash infinite;
}

.flight {
  position: absolute;
  height: 6.39%;
  top: 49.54%;
  left: 33.81%;
  animation: 2s flight linear infinite;
  transform-origin: 50% 0;
}

@keyframes flight {
  50% {
    transform: translateY(-20%);
  }
}

.car4 {
  position: absolute;
  height: 10.19%;
  top: 69.26%;
  left: 22.5%;
  animation: 4s car linear infinite;
}

.car3 {
  position: absolute;
  height: 9.72%;
  top: 70.09%;
  left: 20.23%;
  animation: 4s car linear infinite;
}

.car2 {
  position: absolute;
  height: 8.43%;
  top: 66.48%;
  left: 19.42%;
  animation: 4s cars linear infinite;
}

.car1 {
  position: absolute;
  height: 11.67%;
  top: 62.96%;
  left: 18.74%;
  animation: 4s cars linear infinite;
}

@keyframes car {
  50% {
    transform: translateX(20%);
  }
}

@keyframes cars {
  50% {
    transform: translateY(20%);
  }
}

.boat1 {
  position: absolute;
  height: 22.87%;
  top: 60.65%;
  left: 46.82%;
  animation: 4s yunmove linear infinite;
}

.boat2 {
  position: absolute;
  height: 14.63%;
  top: 65.46%;
  left: 51.77%;
  animation: 4s yunmove linear infinite;
}

@keyframes yunmove {
  50% {
    transform: translateX(30%);
  }
}

.people {
  position: absolute;
  height: 13.7%;
  top: 77.41%;
  left: 31.65%;
  animation: 3s people linear infinite;
}

@keyframes people {
  50% {
    transform: translateY(100%);
  }
}

.family {
  position: absolute;
  height: 23.52%;
  top: 66.76%;
  left: 47.42%;
  animation: 4s family linear infinite;
}

.book {
  position: absolute;
  height: 12.69%;
  top: 77.31%;
  left: 45.86%;
  animation: 4s book linear infinite 3s;
}

@keyframes family {
  50% {
    transform: rotate(10deg);
  }
}

@keyframes book {
  50% {
    transform: rotate(5deg);
  }
}

@keyframes music {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}