html {
  -ms-touch-action: none;
}

body,
canvas,
div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Remove spin of input type number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

body {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  margin: 0 !important;

  cursor: default;
  color: #888;
  background-color: #ffffff;

  text-align: center;
  font-family: Helvetica, Verdana, Arial, sans-serif;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

canvas {
  background-color: rgba(0, 0, 0, 0);
}

#GameDiv,
#Cocos3dGameContainer,
#GameCanvas {
  width: 100%;
  height: 100%;
}

:root {
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
}

.box2 {
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  display: flex;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.box3 {
  /* background-color: gray; */
  margin: auto;
}
.box4 {
  position: relative;
  /* width: 30px;
  height: 30px; */
}
.imgLeft,
.imgRight {
  width: 100vw;
  height: 100vh;
}
.imgLeft:nth-child(1) {
  position: absolute;
  left: -87vw;
  bottom: -30vh;
}

.imgLeft:nth-child(2) {
  position: absolute;
  left: -53vw;
  bottom: -30vh;
}
.imgLeft:nth-child(3) {
  position: absolute;
  left: -19vw;
  bottom: -30vh;
}

.imgRight:nth-child(4) {
  position: absolute;
  left: -87vw;
  top: -10vh;
}

.imgRight:nth-child(5) {
  position: absolute;
  left: -58vw;
  top: -19vh;
}
.imgRight:nth-child(6) {
  position: absolute;
  left: -18vw;
  top: -16vh;
}

/* 定义左侧离开动画属性 */
.leftAn_leave0 {
  animation-name: moveLeft0;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  /* animation-direction:alternate; 反向属性，且animation-iteration-count > 1 */
}
.leftAn_leave1 {
  animation-name: moveLeft1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.leftAn_leave2 {
  animation-name: moveLeft2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* 定义左侧进入动画属性 */
.leftAn_enter0 {
  animation-name: enterLeft0;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.leftAn_enter1 {
  animation-name: enterLeft1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.leftAn_enter2 {
  animation-name: enterLeft2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/* 定义右侧离开动画属性 */
.rightAn_leave0 {
  animation-name: moveRight0;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.rightAn_leave1 {
  animation-name: moveRight1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.rightAn_leave2 {
  animation-name: moveRight2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
/* 定义右侧进入动画属性 */
.rightAn_enter0 {
  animation-name: enterRight0;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.rightAn_enter1 {
  animation-name: enterRight1;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.rightAn_enter2 {
  animation-name: enterRight2;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
.box5 {
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.plant {
  width: 156px;
  height: 131px;
  margin: 0px auto;
  display: block;
  margin-bottom: 35px;
  animation-name: plantMove;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.hotBalloon {
  width: 117.5px;
  height: 203px;
  margin: 0px auto;
  display: block;
  margin-bottom: 35px;
  animation-name: plantMove;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  animation-direction: alternate;
}

.progressBar {
  width: 494px;
  height: 34px;
  background: #e7e7e7;
  border-radius: 17px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
}

.bar {
  width: 495px;
  height: 35px;
  background: linear-gradient(270deg, #97f3f6 0%, #4fa0f6 100%);
  border-radius: 17px;
  position: absolute;
  left: -495px;
  top: 0px;

  /* animation-name: barMove;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; */
}
.barText {
  font-size: 22px;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #ffffff;
  line-height: 26px;
  text-shadow: 0px 0px 1px rgb(0 0 0 / 50%);
  text-align: center;
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

/* 左侧组云朵动画进入 */
@keyframes enterLeft0 {
  0% {
    transform: translate(-1000px, -1000px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes enterLeft1 {
  0% {
    transform: translate(0, -1000px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes enterLeft2 {
  0% {
    transform: translate(1000px, -1000px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* 左侧组云朵动画离开 */
@keyframes moveLeft0 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-800px, -800px);
  }
}
@keyframes moveLeft1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -800px);
  }
}
@keyframes moveLeft2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(800px, -800px);
  }
}

/* 右侧组云朵动画离开 */
@keyframes moveRight0 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-800px, 800px);
  }
}
@keyframes moveRight1 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 800px);
  }
}
@keyframes moveRight2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(800px, 800px);
  }
}

/* 右侧组云朵动画进入 */
@keyframes enterRight0 {
  0% {
    transform: translate(-1000px, 1000px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes enterRight1 {
  0% {
    transform: translate(0, 1000px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes enterRight2 {
  0% {
    transform: translate(1000px, 1000px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* bar动画 */
@keyframes barMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(490px, 0px);
  }
}
/* 飞机动画离开 */
@keyframes plantMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(0, -15px);
  }
}