.wrapper {
  width: 10rem;
  height: 100vh;
  border: 3px solid red;
  background: url(../img/bg_0.jpg) no-repeat center / cover;
  margin: 0 auto;
  position: relative;
}
.wrapper .page {
  width: 10rem;
  height: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.page_cover {
  background: url(../img/bg_co_1.png) no-repeat bottom center / 100%, url(../img/bg_co_2.png) no-repeat top center / 100%;
  background-color: #C9ECFF;
  position: relative;
}
.page_cover .co_title {
  width: 9.33333333rem;
  height: 4.66666667rem;
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: -4.66666667rem;
}
.page_cover .co_title .co_tit_1 {
  width: 6rem;
  height: 1.46666667rem;
  position: absolute;
  left: 0;
  top: 0;
}
.page_cover .co_title .co_tit_2 {
  width: 8.26666667rem;
  height: 1.33333333rem;
  position: absolute;
  top: 1.6rem;
  left: 50%;
  margin-left: -4.13333333rem;
}
.page_cover .co_title .co_tit_3 {
  width: 3.6rem;
  height: 1.6rem;
  position: absolute;
  right: 0;
  bottom: 0;
}
.page_cover .person_1 {
  width: 6.13333333rem;
  height: 10.13333333rem;
  position: absolute;
  right: 0;
  bottom: 0.32rem;
}
.page_cover .btn_go {
  width: 3.46666667rem;
  height: 1.6rem;
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  margin-left: -1.73333333rem;
}
.page_choose .scene {
  width: 100%;
  height: 100%;
  position: relative;
}
.page_choose .scene .se_place {
  width: 4.66666667rem;
  height: 1.06666667rem;
  position: absolute;
  left: 0;
  top: 5%;
}
.page_choose .scene .se_main {
  width: 10rem;
  height: 90%;
  min-height: 16rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -5rem;
}
.page_choose .scene .se_choose {
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
}
.page_choose .scene .se_choose .choose_box {
  background-color: #F4E6DB;
  border-radius: 0.26666667rem;
  padding: 0.13333333rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.page_choose .scene .se_choose .choose_box .ch_box_line {
  width: 100%;
  height: 100%;
  border: 1px dashed #7A554C;
  border-radius: 0.26666667rem;
  padding: 0.4rem 0.13333333rem 0 0.13333333rem;
}
.page_choose .scene .se_choose .choose_box .ch_box_line .tit_choose {
  display: block;
  width: 4rem;
  height: 0.8rem;
  margin: 0 auto;
  margin-bottom: 0.53333333rem;
}
.page_choose .scene .se_choose .choose_box .ch_box_line .option_box {
  width: 7.6rem;
  margin: 0 auto;
  margin-bottom: 0.4rem;
  position: relative;
}
.page_choose .scene .se_choose .choose_box .ch_box_line .option_box .option {
  width: 7.6rem;
}
.page_choose .scene .se_choose .choose_box .ch_box_line .option_box .ch_duigou {
  width: 1.06666667rem;
  height: 0.8rem;
  position: absolute;
  left: 0;
  top: 0;
}
.page_choose .scene .se_choose .choose_box .ch_box_line .option_box {
  margin-bottom: 0.4rem;
}
.page_choose .scene_1 {
  background-color: #F4E6DB;
}
.page_choose .scene_1 .se_main_1 {
  background: url(../img/se_bg_1.png) no-repeat center bottom / contain;
}
.page_choose .scene_1 .se_main_1 .bub_1_1 {
  width: 4.53333333rem;
  height: 1.46666667rem;
  position: absolute;
  left: 0.37333333rem;
  bottom: 80%;
}
.page_choose .scene_1 .se_main_1 .bub_box {
  width: 3.81333333rem;
  height: 2.8rem;
  position: absolute;
  right: 0.21333333rem;
  bottom: 65%;
}
.page_choose .scene_1 .se_main_1 .bub_box .bub_1_2 {
  width: 3.81333333rem;
  height: 2.8rem;
  position: absolute;
}
.page_choose .scene_1 .se_main_1 .bub_box .icon_hand {
  width: 1.06666667rem;
  height: 1.33333333rem;
  position: absolute;
  right: 0;
  bottom: -0.4rem;
  animation-duration: 0.5s;
}
.page_choose .scene_2 {
  background-color: #F4E6DB;
}
.page_choose .scene_2 .se_main_2 .se2_dapan {
  width: 9.86666667rem;
  height: 11.6rem;
  position: absolute;
  top: 5%;
  left: 50%;
  margin-left: -4.93333333rem;
}
.page_choose .scene_2 .se_main_2 .person_2 {
  width: 4.8rem;
  height: 12.53333333rem;
  position: absolute;
  right: 0.8rem;
  bottom: 0.16rem;
}
.page_choose .scene_2 .se_main_2 .bub_1_1 {
  width: 4.53333333rem;
  height: 1.46666667rem;
  position: absolute;
  left: 0.37333333rem;
  bottom: 80%;
}
.page_choose .scene_2 .se_main_2 .bub_box {
  width: 4.26666667rem;
  height: 3.12rem;
  position: absolute;
  left: 0.26666667rem;
  bottom: 8rem;
}
.page_choose .scene_2 .se_main_2 .bub_box .bub_2 {
  width: 4.26666667rem;
  height: 3.12rem;
  position: absolute;
}
.page_choose .scene_2 .se_main_2 .bub_box .icon_hand {
  width: 1.06666667rem;
  height: 1.33333333rem;
  position: absolute;
  right: 0;
  bottom: -0.8rem;
}
.page_choose .scene_3 {
  background-color: #F4E6DB;
}
.page_choose .scene_3 .se_main_3 {
  background: url(../img/se_bg_3.png) no-repeat center bottom / contain;
}
.page_choose .scene_3 .se_main_3 .bub_3_1 {
  width: 6.34666667rem;
  height: 2.61333333rem;
  position: absolute;
  right: 0.26666667rem;
  top: 8%;
}
.page_choose .scene_3 .se_main_3 .bub_box {
  width: 4.34666667rem;
  height: 3.6rem;
  position: absolute;
  left: 0.8rem;
  bottom: 2.66666667rem;
}
.page_choose .scene_3 .se_main_3 .bub_box .bub_3_2 {
  width: 4.34666667rem;
  height: 3.6rem;
  position: absolute;
}
.page_choose .scene_3 .se_main_3 .bub_box .icon_hand {
  width: 1.06666667rem;
  height: 1.33333333rem;
  position: absolute;
  right: 0;
  bottom: -0.93333333rem;
}
.page_choose .scene_4 {
  background-color: #E8F7FF;
}
.page_choose .scene_4 .se_main_4 {
  background: url(../img/se_bg_4.png) no-repeat center bottom / contain;
}
.page_choose .scene_4 .se_main_4 .bub_4_1 {
  width: 4.93333333rem;
  height: 3.33333333rem;
  position: absolute;
  right: 0.8rem;
  bottom: 10.93333333rem;
}
.page_choose .scene_4 .se_main_4 .bub_4_2 {
  width: 2.93333333rem;
  height: 1.78666667rem;
  position: absolute;
  left: 1.06666667rem;
  bottom: 10.93333333rem;
}
.page_choose .scene_4 .se_main_4 .bub_box {
  width: 4.93333333rem;
  height: 3.33333333rem;
  position: absolute;
  right: 0.8rem;
  bottom: 10.93333333rem;
}
.page_choose .scene_4 .se_main_4 .bub_box .bub_4_3 {
  width: 4.93333333rem;
  height: 3.33333333rem;
  position: absolute;
}
.page_choose .scene_4 .se_main_4 .bub_box .icon_hand {
  width: 1.06666667rem;
  height: 1.33333333rem;
  position: absolute;
  right: 0;
  bottom: -0.13333333rem;
}
.page_rule {
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
}
.page_rule .rule_box {
  width: 8.69333333rem;
  height: 11.09333333rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.34666667rem;
  margin-top: -5.54666667rem;
  animation-duration: 0.5s;
}
.page_rule .rule_box .rule {
  width: 8.69333333rem;
  height: 11.09333333rem;
  position: absolute;
}
.page_rule .rule_box .btn_know {
  width: 3.06666667rem;
  height: 2.13333333rem;
  position: absolute;
  right: 2.4rem;
  bottom: 1.6rem;
}
.page_gover {
  background-color: #867E79;
}
.page_gover .zui_box {
  width: 100%;
  height: 68%;
  min-height: 12rem;
  position: absolute;
  top: 5%;
}
.page_gover .zui_box .zui {
  animation-duration: 0.5s;
}
.page_gover .zui_box .zui_1 {
  width: 4.45333333rem;
  height: 1.14666667rem;
  position: absolute;
  left: 0.66666667rem;
  top: 0;
}
.page_gover .zui_box .zui_2 {
  width: 7.73333333rem;
  height: 1.68rem;
  position: absolute;
  left: 0.66666667rem;
  top: 60%;
}
.page_gover .zui_box .zui_3 {
  width: 9.65333333rem;
  height: 3.38666667rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -4.82666667rem;
}
.page_gover .zui_box .zui_4 {
  width: 4.16rem;
  height: 1.97333333rem;
  position: absolute;
  right: 0.66666667rem;
  top: 0;
}
.page_gover .zui_box .over_box {
  width: 10rem;
  height: 6.4rem;
  position: absolute;
  top: 10%;
  left: 50%;
  margin-left: -5rem;
}
.page_gover .zui_box .over_box .light_2 {
  width: 10rem;
  height: 6.4rem;
  position: absolute;
  animation-duration: 0.5s;
}
.page_gover .zui_box .over_box .game_over {
  width: 10rem;
  height: 5.46666667rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -5rem;
}
.page_gover .person_3 {
  width: 8.93333333rem;
  height: 8.93333333rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -4.46666667rem;
  animation-duration: 0.5s;
}
.page_gover .light_1 {
  width: 13.33333333rem;
  height: 20rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -6.66666667rem;
  margin-top: -10rem;
  animation-duration: 0.5s;
}
.page_gover .btn_again {
  width: 3.46666667rem;
  height: 1.6rem;
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  margin-left: -1.73333333rem;
}
.page_end {
  background: url(../img/bg_end_1.png) no-repeat bottom center / 100%, url(../img/bg_end_2.png) no-repeat top center / 100%;
}
.page_end .moon_light {
  width: 10rem;
  height: 20rem;
  position: absolute;
  right: 0;
  top: 0;
}
.page_end .person_1 {
  width: 6.13333333rem;
  height: 10.13333333rem;
  position: absolute;
  right: 0;
  bottom: 1.33333333rem;
}
.page_end .txt_box {
  width: 9.46666667rem;
  height: 20%;
  position: absolute;
  top: 8%;
  left: 50%;
  margin-left: -4.73333333rem;
}
.page_end .txt_box .txt_data {
  position: absolute;
  left: 0;
  top: 0;
}
.page_end .txt_box .txt_data .num_data {
  color: #FF002B;
  font-family: "Microsoft YaHei";
  font-size: 0.64rem;
  font-weight: 900;
  font-style: italic;
  line-height: 0.64rem;
}
.page_end .txt_box .txt_data .txt_di {
  display: inline-block;
  width: 0.66666667rem;
  height: 0.53333333rem;
}
.page_end .txt_box .txt_data .txt_wei {
  display: inline-block;
  width: 4.8rem;
  height: 0.53333333rem;
}
.page_end .txt_box .txt_end {
  width: 9.46666667rem;
  height: 1.86666667rem;
  position: absolute;
  left: 0;
  bottom: 0;
}
.page_end .scancode {
  width: 4rem;
  height: 3.06666667rem;
  position: absolute;
  left: 1.6rem;
  bottom: 2rem;
}
.page_end .co_present {
  width: 10rem;
  height: 1rem;
  position: absolute;
  bottom: 0.4rem;
  left: 50%;
  margin-left: -5rem;
}
.dont_click {
  pointer-events: none;
}
.tip_share {
  width: 2.66666667rem;
  height: 0.4rem;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  line-height: 0.4rem;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 2%;
  left: 50%;
  margin-left: -1.2rem;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  z-index: 10000;
}
/* 海报 */
#canvasImg {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
/* 背景音乐 */
.bgm {
  width: 25px;
  height: 25px;
  background: url(../img/musicOff.png) no-repeat;
  background-size: 100%;
  z-index: 99999;
  position: fixed;
  top: 5%;
  right: 0.8rem;
}
.music_on {
  background-image: url(../img/musicOn.png);
  animation: reverseRotating 1.2s linear infinite;
  -webkit-animation: reverseRotating 1.2s linear infinite;
}
@keyframes reverseRotating {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes reverseRotating {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-360deg);
  }
}