@import '../css/index.css';

/* 滚动背景 */
.roll-bg {
  width: 100%;
  height: 88%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  background-image: url('./images/roll-bg.jpg');
  background-size: cover;
  /* background-position: 0% 100%; */
  animation: rollbg 7s linear infinite;
}
@keyframes rollbg {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 275% 0%;
  }
}

#topic {
  width: 42vw;
  height: 11vw;
  color: maroon;
  font-weight: 700;
  text-align: center;
  position: absolute;
  top: 7vw;
  left: 16vw;
  box-sizing: border-box;
  padding-top: 2.5vw;
  padding-left: 3vw;
  background: url('./images/topic.png') center no-repeat;
  background-size: contain;
}
#topic img {
  height: 3vw;
}
.option-box {
  width: 100%;
  height: 300px;
  position: absolute;
  left: 0;
  bottom: 0;
}
/* 飞机 */
.aircraft-box {
  width: 12vw;
  position: absolute;
  left: 17vw;
  bottom: 24vw;
  transition: bottom 0.5s;
}
/* 子弹 */
#bullet {
  width: 5vw;
  position: absolute;
  left: 12vw;
  top: 40%;
  transform: translateY(-50%);
  opacity: 0;
}
/* 飞机爆炸 */
#aircraft-explode {
  position: absolute;
  left: -1vw;
  top: -6vw;
  width: 16vw;
  opacity: 0;
}
.aircraft-boom {
  animation: aircraftBoom 1s forwards;
}
@keyframes aircraftBoom {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 爆炸 */
#list-box li .explode {
  width: 15vw;
  height: 15vw;
  position: absolute;
  left: -2vw;
  top: -5vw;
  animation: boom 1s forwards;
}
@keyframes boom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}

.bullet-launch {
  animation: launch 1s forwards;
}
@keyframes launch {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(40vw, 0, 0) scale(1.2);
  }
}

#list-box {
  width: 45vw;
  height: 30vw;
  position: absolute;
  right: 12vw;
  bottom: 11vw;
  display: flex;
  justify-content: space-between;
}
#list-box li {
  width: 45vw;
  height: 7vw;
  text-align: center;
  box-sizing: border-box;
  padding: 2vw 1vw 0 8vw;
  color: maroon;
  /* background-color: gray; */
  cursor: pointer;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
#list-box li:nth-child(1) {
  position: absolute;
  left: 0;
  top: 0;
  background-image: url('./images//op1.png');
}
#list-box li:nth-child(2) {
  /* width: 19vw; */
  position: absolute;
  left: 10vw;
  top: 10vw;
  background-image: url('./images//op2.png');
}
#list-box li:nth-child(3) {
  /* width: 15vw; */
  position: absolute;
  left: 5vw;
  top: 20vw;
  background-image: url('./images//op3.png');
}
#list-box li img {
  height: 2vw;
}

#colour-bar {
  width: 10vw;
  position: absolute;
  left: 84vw;
  bottom: 22.5vw;
  display: none;
}