@import "../../res.less";

.GuidePage {
  width: 750px;
  height: 1624px;
  left: 0;
  top: 0;
  position: absolute;
  overflow: hidden;

  .bg {
    width: 750px;
    height: 1624px;
    left: 0;
    top: 0;
    position: absolute;
    .sparkBg("GuidePage/bg.jpg");
  }

  .joystick {
    position: absolute;
    left: 270px;
    top: 1070px;
    width: 210px;
    height: 210px;
    .sparkBg("GuidePage/方向键未触发.png");
  }

  .tip {
    font-size: 32px;
    color: rgb(255, 255, 255);
    text-align: center;
    position: absolute;
    left: 0;
    top: 1300px;
    width: 100%;
  }

  .kuang {
    width: 750px;
    height: 411px;
    position: absolute;
    left: 0;
  }

  .kuang1 {
    top: 575px;
  }

  .kuang2 {
    top: 694px;
  }

  .kuang3 {
    top: 694px;
  }

  .kuang4 {
    top: 694px;
  }

  .kuang5 {
    top: 344px;
  }

  .guide {
    position: absolute;
    .fadeIn();
  }

  .guide1 {
    left: 70px;
    top: 690px;
    width: 613px;
    height: 208px;
    .sparkBg("GuidePage/guide1.png");
  }

  .guide2 {
    left: 70px;
    top: 544px;
    width: 611px;
    height: 479px;
    .sparkBg("GuidePage/guide2.png");
  }

  .guide3 {
    left: 92px;
    top: 554px;
    width: 569px;
    height: 467px;
    .sparkBg("GuidePage/guide3.png");
  }

  .guide4 {
    left: 42px;
    top: 571px;
    width: 676px;
    height: 459px;
    .sparkBg("GuidePage/guide4.png");
  }

  .guide5 {
    left: 43px;
    top: 211px;
    width: 707px;
    height: 461px;
    .sparkBg("GuidePage/guide5.png");
  }

  .guide6 {
    position: absolute;
    left: 107px;
    top: 568px;
    width: 534px;
    height: 374px;
    .sparkBg("GuidePage/文案.png");

    .guide6Btn {
      position: absolute;
      left: 93px;
      top: 218px;
      width: 349px;
      height: 90px;
      .sparkBg("GuidePage/按钮.png");
    }
  }
}


.fadeIn {
  opacity: 0;
  animation-name: fadeInAni;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-duration: 1s;
  animation-delay: 0.88s;
}

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