* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #417172;
}

.container {
  width: 100%;
  height: 100%;
  position: relative;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  border: none;
  outline: none;
  text-decoration: none;
  display: inline-block;
}

li {
  list-style: none;
}

div {
  position: relative;
}

span {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: none;
}

.abs {
  position: absolute;
}

.hide {
  display: none;
}

.mask {
  width: 100%;
  height: 100%;
  background: rgba(32, 29, 36, 0.9);
  position: absolute;
  top: 0;
  left: 0;
}

.loading {
  width: 100%;
  height: 100%;
}

.delay-1 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.delay-2 {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.logo {
  position: absolute;
  top: 20px;
  left: 25px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/logo.png") no-repeat top;
  background-size: cover;
  width: 107px;
  height: 42px;
  background-size: cover;
  z-index: 999;
}

.dot {
  display: inline-block;
  width: 54px;
  height: 54px;
  background-color: #F7B09C;
  border-radius: 50%;
}

.dot::after {
  position: absolute;
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
  opacity: 0;
  -webkit-box-shadow: 0 0 1px 2px #F7B09C;
          box-shadow: 0 0 1px 2px #F7B09C;
  -webkit-animation: halo 1.5s 0.5s infinite ease-out;
          animation: halo 1.5s 0.5s infinite ease-out;
}

.dot::before {
  position: absolute;
  content: "";
  width: 54px;
  height: 54px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  margin-left: -27px;
  margin-top: -27px;
  opacity: 0;
  -webkit-box-shadow: 0 0 1px 2px #F7B09C;
          box-shadow: 0 0 1px 2px #F7B09C;
  -webkit-animation: halo 1.5s infinite ease-out;
          animation: halo 1.5s infinite ease-out;
}

@-webkit-keyframes notes {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.5) translate(50%, -50%);
            transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}

@keyframes notes {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.5) translate(50%, -50%);
            transform: scale(1.5) translate(50%, -50%);
  }
  80% {
    opacity: 0;
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
  }
  100% {
    -webkit-transform: scale(1.5) translate(100%, -100%);
            transform: scale(1.5) translate(100%, -100%);
    opacity: 0;
  }
}

.audio {
  display: none;
}

#btn_audio {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/music.png") no-repeat center;
  background-size: cover;
  width: 40px;
  height: 40px;
  background-size: cover;
  z-index: 999;
}

#btn_audio.on {
  -webkit-animation: rotate 4s infinite linear both;
          animation: rotate 4s infinite linear both;
}

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotate {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

@keyframes zoom {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.2);
            transform: scale(1.2);
  }
}

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

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

@-webkit-keyframes halo {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
  }
}

@keyframes halo {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.7);
            transform: scale(1.7);
  }
}

@-webkit-keyframes updown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

@keyframes updown {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
}

.loading {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/bg.jpg") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.loading .bg {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/bg1.png") no-repeat center;
  background-size: cover;
  width: 100%;
  height: 100vh;
}

.loading .logo {
  top: 15vh;
  left: 50%;
  margin-left: -53px;
}

.loading .disk {
  position: absolute;
  top: 45%;
  left: 50%;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p0_01.png") no-repeat center;
  background-size: cover;
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  -webkit-animation: rotate 5s linear infinite;
          animation: rotate 5s linear infinite;
}

.loading #loading_txt {
  position: absolute;
  bottom: 25vh;
  width: 100%;
  text-align: center;
  font-size: 28px;
  color: #fff;
  font-weight: bold;
}

.p1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 100vh;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/bg.jpg") no-repeat top center;
  background-size: cover;
  width: 375px;
  height: 100vh;
}

.p1 .bg {
  position: absolute;
  width: 375px;
  height: 735px;
  top: 50%;
  margin-top: -367.5px;
}

.p1 .bg .l1 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_01.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 735px;
}

.p1 .bg .l2 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_02.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 735px;
}

.p1 .bg .l2 .note {
  position: relative;
  width: 100%;
  height: 100%;
}

.p1 .bg .l2 .noot-1,
.p1 .bg .l2 .noot-2,
.p1 .bg .l2 .noot-3,
.p1 .bg .l2 .noot-4,
.p1 .bg .l2 .noot-5 {
  position: absolute;
  -webkit-animation: notes 2s infinite linear;
          animation: notes 2s infinite linear;
  font-size: 12px;
  opacity: 0;
  color: #FFD74B;
}

.p1 .bg .l2 .noot-1 {
  top: 250px;
  left: 50%;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.p1 .bg .l2 .noot-2 {
  top: 230px;
  left: 75%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.p1 .bg .l2 .noot-3 {
  top: 240px;
  left: 60%;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.p1 .bg .l2 .noot-4 {
  top: 260px;
  left: 90%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.p1 .bg .l2 .noot-5 {
  top: 170px;
  left: 85%;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

.p1 .bg .l3 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.p1 .bg .l3 .d1 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_03_01.png") no-repeat center;
  background-size: cover;
  width: 65px;
  height: 84px;
  top: 50%;
  left: 50%;
  margin: -32.5px 0 0 -42px;
  opacity: 0;
  -webkit-animation: d1 5s ease infinite;
          animation: d1 5s ease infinite;
}

.p1 .bg .l3 .d2 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_03_02.png") no-repeat center;
  background-size: cover;
  width: 126.5px;
  height: 115px;
  top: 50%;
  left: 50%;
  margin: -63.25px 0 0 -57.5px;
  opacity: 0;
  -webkit-animation: d2 4s ease .2s infinite;
          animation: d2 4s ease .2s infinite;
}

.p1 .bg .l3 .d3 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_03_03.png") no-repeat center;
  background-size: cover;
  width: 256px;
  height: 245.5px;
  top: 50%;
  left: 50%;
  margin: -128px 0 0 -122.75px;
  opacity: 0;
  -webkit-animation: d3 6s ease .5s infinite;
          animation: d3 6s ease .5s infinite;
}

.p1 .bg .l3 .d4 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_03_04.png") no-repeat center;
  background-size: cover;
  width: 214.5px;
  height: 238.5px;
  top: 50%;
  left: 50%;
  margin: -107.25px 0 0 -119.25px;
  opacity: 0;
  -webkit-animation: d4 4s ease 1s infinite;
          animation: d4 4s ease 1s infinite;
}

.p1 .bg .l4 {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_04.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 735px;
  -webkit-animation: flash 2s ease infinite;
          animation: flash 2s ease infinite;
}

.p1 .bg .txt {
  position: absolute;
  top: 80px;
  left: 0;
  width: 100%;
  height: 210px;
  background: url("../images/p1_t.png") no-repeat 0 0;
  background-size: 750px 420px;
  -webkit-animation: change 20s ease infinite forwards;
          animation: change 20s ease infinite forwards;
}

.p1 .bg .door {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_door.png") no-repeat center;
  background-size: cover;
  width: 375px;
  height: 735px;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.p1 .bg .door.in {
  -webkit-transform: scale(8);
          transform: scale(8);
  z-index: 999;
}

.p1 .views {
  position: absolute;
  width: 100%;
  bottom: 135px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}

.p1 .views span {
  font-family: Arial, Helvetica, sans-serif;
}

.p1 .btn {
  position: absolute;
  bottom: 58px;
  left: 146px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p1_btn.png") no-repeat center;
  background-size: cover;
  width: 88px;
  height: 66px;
}

@media screen and (max-height: 660px) {
  .p1 .txt {
    top: 30px !important;
  }
}

@-webkit-keyframes d1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  95% {
    opacity: 1;
    -webkit-transform: translate3d(-200px, 80px, 0);
            transform: translate3d(-200px, 80px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 80px, 0);
            transform: translate3d(-200px, 80px, 0);
  }
}

@keyframes d1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  95% {
    opacity: 1;
    -webkit-transform: translate3d(-200px, 80px, 0);
            transform: translate3d(-200px, 80px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-200px, 80px, 0);
            transform: translate3d(-200px, 80px, 0);
  }
}

@-webkit-keyframes d2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(170px, -180px, 0);
            transform: translate3d(170px, -180px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(170px, -180px, 0);
            transform: translate3d(170px, -180px, 0);
  }
}

@keyframes d2 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(170px, -180px, 0);
            transform: translate3d(170px, -180px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(170px, -180px, 0);
            transform: translate3d(170px, -180px, 0);
  }
}

@-webkit-keyframes d3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(-170px, -180px, 0);
            transform: translate3d(-170px, -180px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-170px, -180px, 0);
            transform: translate3d(-170px, -180px, 0);
  }
}

@keyframes d3 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(-170px, -180px, 0);
            transform: translate3d(-170px, -180px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-170px, -180px, 0);
            transform: translate3d(-170px, -180px, 0);
  }
}

@-webkit-keyframes d4 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(170px, 180px, 0);
            transform: translate3d(170px, 180px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(170px, 180px, 0);
            transform: translate3d(170px, 180px, 0);
  }
}

@keyframes d4 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scale(0);
            transform: translate3d(0, 0, 0) scale(0);
    opacity: 0;
  }
  90% {
    opacity: 1;
    -webkit-transform: translate3d(170px, 180px, 0);
            transform: translate3d(170px, 180px, 0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(170px, 180px, 0);
            transform: translate3d(170px, 180px, 0);
  }
}

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

@-webkit-keyframes change {
  0% {
    opacity: 0;
    background-position: 0 0;
  }
  6%, 20% {
    opacity: 1;
    background-position: 0 0;
  }
  25% {
    opacity: 0;
    background-position: 0 0;
  }
  26% {
    opacity: 0;
    background-position: 0 -210px;
  }
  32%, 45% {
    opacity: 1;
    background-position: 0 -210px;
  }
  50% {
    opacity: 0;
    background-position: 0 -210px;
  }
  51% {
    opacity: 0;
    background-position: -375px -210px;
  }
  57%, 70% {
    opacity: 1;
    background-position: -375px -210px;
  }
  75% {
    opacity: 0;
    background-position: -375px -210px;
  }
  76% {
    opacity: 0;
    background-position: -375px 0;
  }
  82%, 95% {
    opacity: 1;
    background-position: -375px 0;
  }
  100% {
    opacity: 0;
    background-position: -375px 0;
  }
}

@keyframes change {
  0% {
    opacity: 0;
    background-position: 0 0;
  }
  6%, 20% {
    opacity: 1;
    background-position: 0 0;
  }
  25% {
    opacity: 0;
    background-position: 0 0;
  }
  26% {
    opacity: 0;
    background-position: 0 -210px;
  }
  32%, 45% {
    opacity: 1;
    background-position: 0 -210px;
  }
  50% {
    opacity: 0;
    background-position: 0 -210px;
  }
  51% {
    opacity: 0;
    background-position: -375px -210px;
  }
  57%, 70% {
    opacity: 1;
    background-position: -375px -210px;
  }
  75% {
    opacity: 0;
    background-position: -375px -210px;
  }
  76% {
    opacity: 0;
    background-position: -375px 0;
  }
  82%, 95% {
    opacity: 1;
    background-position: -375px 0;
  }
  100% {
    opacity: 0;
    background-position: -375px 0;
  }
}

.p2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  overflow-y: scroll;
}

.p2 .logo {
  top: 10px;
  left: 25px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/logo2.png") no-repeat center;
  background-size: cover;
  width: 68px;
  height: 31px;
}

.p2 .bg {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/bg2.jpg") no-repeat top center;
  background-size: cover;
  width: 375px;
  height: 735px;
}

.p2 .bg .list {
  position: absolute;
  width: 365px;
  height: 70px;
  right: 0;
  overflow: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}

.p2 .bg .list.mlist1 {
  top: 247px;
}

.p2 .bg .list.mlist1 .scroll {
  padding-left: 70px;
  width: 760px;
}

.p2 .bg .list.mlist2 {
  top: 335px;
}

.p2 .bg .list.mlist2 .scroll {
  padding-left: 30px;
  width: 830px;
}

.p2 .bg .list .scroll {
  display: block;
  height: 70px;
}

.p2 .bg .list .item {
  position: relative;
  float: left;
  width: 59px;
  height: 70px;
  margin: 0 5px;
}

.p2 .bg .list .item .d {
  position: absolute;
  bottom: 5px;
  left: 2px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_d.png") no-repeat center;
  background-size: cover;
  width: 54px;
  height: 54px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
}

.p2 .bg .list .item .d.up {
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  opacity: 0;
}

.p2 .bg .list .item .name {
  position: relative;
  color: #67A493;
  top: 45px;
  text-align: center;
  margin: 0 2px 0 0px;
  font-size: 8px;
}

.p2 .bg .list .item .cover {
  position: relative;
}

.p2 .bg .list .item:nth-child(1) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_01.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(2) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_02.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(3) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_03.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(4) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_04.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(5) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_05.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(6) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_01.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(7) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_02.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(8) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_03.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(9) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_04.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(10) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_05.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .list .item:nth-child(11) .cover {
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_b_01.png") no-repeat center;
  background-size: cover;
  width: 59px;
  height: 70px;
}

.p2 .bg .popup {
  position: absolute;
  top: 295px;
  left: 46px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_01.png") no-repeat center;
  background-size: cover;
  width: 136px;
  height: 92px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.p2 .bg .rb {
  position: absolute;
  top: 390px;
  left: 110px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_02_01.png") no-repeat center;
  background-size: cover;
  width: 109px;
  height: 124px;
}

.p2 .bg .rb .l {
  position: absolute;
  top: 62px;
  left: -9px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_02_02.png") no-repeat center;
  background-size: cover;
  width: 45px;
  height: 42px;
  animation: rbl 1s linear infinite alternate-reverse;
  -webkit-transform-origin: 40px 35px;
          transform-origin: 40px 35px;
}

.p2 .bg .rb .r {
  position: absolute;
  top: 64px;
  right: -8px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_02_03.png") no-repeat center;
  background-size: cover;
  width: 45px;
  height: 42px;
  animation: rbr 1s linear infinite alternate-reverse;
  -webkit-transform-origin: 5px 35px;
          transform-origin: 5px 35px;
}

.p2 .bg .cpj {
  position: absolute;
  top: 417px;
  left: 267px;
}

.p2 .bg .cpj .d {
  position: absolute;
  top: 85px;
  left: 13px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_04_01.png") no-repeat center;
  background-size: cover;
  width: 47px;
  height: 16px;
}

.p2 .bg .cpj .m {
  position: absolute;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_04.png") no-repeat center;
  background-size: cover;
  width: 75px;
  height: 115px;
}

.p2 .bg .cpj .note {
  position: relative;
  width: 75px;
  height: 115px;
}

.p2 .bg .cpj .noot-1,
.p2 .bg .cpj .noot-2,
.p2 .bg .cpj .noot-3,
.p2 .bg .cpj .noot-4,
.p2 .bg .cpj .noot-5 {
  position: absolute;
  -webkit-animation: notes 2s infinite linear;
          animation: notes 2s infinite linear;
  font-size: 12px;
  opacity: 0;
  color: #fff;
}

.p2 .bg .cpj .noot-1 {
  top: 10px;
  left: 30%;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.p2 .bg .cpj .noot-2 {
  top: 30px;
  left: 55%;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.p2 .bg .cpj .noot-3 {
  top: 40px;
  left: 10%;
  -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
}

.p2 .bg .cpj .noot-4 {
  top: 60px;
  left: 40%;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}

.p2 .bg .cpj .noot-5 {
  top: 70px;
  left: 25%;
  -webkit-animation-delay: 1.2s;
          animation-delay: 1.2s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}

.p2 .bg .desk {
  position: absolute;
  top: 552px;
  left: 121px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_03.png") no-repeat center;
  background-size: cover;
  width: 240px;
  height: 120px;
}

.p2 .bg .gc-panel {
  position: absolute;
  top: 563px;
  left: 102px;
  width: 250px;
  height: 93px;
}

.p2 .bg .gc-panel .detail {
  position: absolute;
  right: 0;
  width: 215px;
  height: 93px;
  text-align: center;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_05.png") no-repeat bottom right;
  background-size: 215px 62px;
}

.p2 .bg .gc-panel .title {
  position: absolute;
  width: 215px;
}

.p2 .bg .gc-panel .title strong {
  font-size: 16px;
  color: #fff;
}

.p2 .bg .gc-panel .scroll {
  position: absolute;
  top: 30px;
  width: 100%;
  height: 60px;
  padding: 5px 20px;
  overflow: hidden;
}

.p2 .bg .gc-panel .scroll .desc {
  padding-top: 60px;
  font-size: 10px;
  color: #fff;
  -webkit-animation: up 30s linear infinite;
          animation: up 30s linear infinite;
}

.p2 .bg .gc-panel .btn {
  position: absolute;
  top: 0;
  left: 0;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/btn_pause.png") no-repeat center;
  background-size: cover;
  width: 28px;
  height: 28px;
}

.p2 .bg .tips {
  position: absolute;
  top: 277px;
  left: 215px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_tips_01.png") no-repeat center;
  background-size: cover;
  width: 139px;
  height: 39px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}

.p2 .bg .tips .hand {
  position: absolute;
  top: 11px;
  left: 93px;
  background: url("https://dotway.oss-cn-beijing.aliyuncs.com/fisu211108/images/p2_tips_02.png") no-repeat center;
  background-size: cover;
  width: 62px;
  height: 50px;
  -webkit-animation: tips 2s ease infinite;
          animation: tips 2s ease infinite;
}

.p2 .bg .back {
  position: absolute;
  font-size: 12px;
  bottom: 80px;
  left: 15px;
  color: #fff;
  text-decoration: none;
}

@-webkit-keyframes rbl {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(-25deg);
            transform: rotate(-25deg);
  }
}

@keyframes rbl {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(-25deg);
            transform: rotate(-25deg);
  }
}

@-webkit-keyframes rbr {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
  }
}

@keyframes rbr {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  0% {
    -webkit-transform: rotate(25deg);
            transform: rotate(25deg);
  }
}

@-webkit-keyframes tips {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

@keyframes tips {
  0% {
    opacity: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  10% {
    opacity: 1;
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  90% {
    opacity: 1;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-100px);
            transform: translateX(-100px);
  }
}

@-webkit-keyframes up {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}

@keyframes up {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
}
/*# sourceMappingURL=styles.css.map */