.wrapper {
  width: 10rem;
  height: 100vh;
  background-color: #8abc72;
  margin: 0 auto;
}
.wrapper .page {
  width: 10rem;
  height: 100vh;
}
.page_load {
  z-index: 999;
  background: url(../img/bg_load.jpg) no-repeat center bottom / 100%;
}
.page_load .load_wrap {
  width: 8.53333333rem;
  height: 2.4rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.26666667rem;
  margin-top: -1.2rem;
  animation-duration: 2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.page_load .load_wrap .load_picture {
  width: 8.53333333rem;
  height: 0.53333333rem;
}
.page_load .load_wrap .load_jiazaiz {
  width: 2.13333333rem;
  height: 0.53333333rem;
}
.page_load .load_wrap .load_progress {
  width: 8.53333333rem;
  height: 0.48rem;
  background-color: #109021;
  border: 0.08rem solid #fff9b5;
  border-radius: 0.24rem;
  margin: 0.13333333rem 0;
  position: relative;
}
.page_load .load_wrap .load_progress .pro_bar {
  width: 0;
  height: 100%;
  background-color: #c1e97b;
  border-radius: 0.24rem;
  transition: width ease-in 500ms;
  -webkit-transition: width ease-in 500ms;
  position: absolute;
}
.page_cover,
.page_end {
  background: url(../img/bg_main.jpg) no-repeat center bottom / 100%;
}
.page_cover .main_area,
.page_end .main_area {
  width: 9.33333333rem;
  height: 14.66666667rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.66666667rem;
  margin-top: -7.66666667rem;
  animation-duration: 2s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.page_cover .main_area .title,
.page_end .main_area .title {
  width: 9.33333333rem;
  height: 6rem;
  position: relative;
}
.page_cover .main_area .title .c_tit_1,
.page_end .main_area .title .c_tit_1 {
  width: 8.26666667rem;
  height: 4.53333333rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -4.13333333rem;
}
.page_cover .main_area .title .c_tit_2,
.page_end .main_area .title .c_tit_2 {
  width: 4.53333333rem;
  height: 0.93333333rem;
  position: absolute;
  top: 4.13333333rem;
  left: 50%;
  margin-left: -2.26666667rem;
}
.page_cover .main_area .title .c_tit_3,
.page_end .main_area .title .c_tit_3 {
  width: 7.28rem;
  height: 0.93333333rem;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -3.64rem;
}
.page_cover .main_area .image,
.page_end .main_area .image {
  width: 8.66666667rem;
  height: 6.66666667rem;
  position: relative;
}
.page_cover .main_area .image .c_tiantan,
.page_end .main_area .image .c_tiantan {
  width: 9.6rem;
  height: 8.33333333rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.8rem;
  margin-top: -4.16666667rem;
}
.page_cover .main_area .button,
.page_end .main_area .button {
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
}
.page_cover .main_area .button .btn_unlock,
.page_end .main_area .button .btn_unlock {
  width: 1.6rem;
  height: 1.6rem;
  animation-duration: 0.5s;
}
.page_cover .main_area .button_end,
.page_end .main_area .button_end {
  width: 2.26666667rem;
  height: 1.6rem;
  position: relative;
}
.page_cover .main_area .button_end .btn,
.page_end .main_area .button_end .btn {
  width: 2.26666667rem;
  height: 0.8rem;
}
.page_cover .main_area .button_end .btn_again,
.page_end .main_area .button_end .btn_again {
  margin-bottom: 0.13333333rem;
}
.page_cover .main_area .author_dongcheng,
.page_end .main_area .author_dongcheng {
  width: 5.46666667rem;
  height: 1.06666667rem;
}
.page_line {
  background-color: #8abc72;
  position: relative;
}
.page_line .btn_start {
  width: 2.13333333rem;
  height: 2.13333333rem;
  position: fixed;
  bottom: 0.53333333rem;
  left: 50%;
  margin-left: -1.06666667rem;
  animation-duration: 0.5S;
}
.page_line .yuyan {
  width: 0.88rem;
  height: 0.98666667rem;
  position: absolute;
  left: 4.66666667rem;
  top: 66.93333333rem;
}
.page_line .map {
  width: 10rem;
  height: 71.57333333rem;
  background: url(../img/bg_map.jpg) no-repeat center / contain;
  position: absolute;
  left: 50%;
  margin-left: -5rem;
  animation-duration: 2S;
}
.page_line .map .board {
  width: 0.58666667rem;
  position: absolute;
}
.page_line .map .board_1 {
  left: 2.08rem;
  bottom: 6.13333333rem;
}
.page_line .map .board_2 {
  right: 2.66666667rem;
  bottom: 8.93333333rem;
}
.page_line .map .board_3 {
  left: 3.33333333rem;
  bottom: 8.82666667rem;
}
.page_line .map .board_4 {
  width: 0.70666667rem;
  left: 2.13333333rem;
  bottom: 12rem;
}
.page_line .map .board_5 {
  left: 3.6rem;
  bottom: 19.46666667rem;
}
.page_line .map .board_6 {
  width: 0.70666667rem;
  left: 4rem;
  bottom: 27.06666667rem;
}
.page_line .map .board_7 {
  left: 2.26666667rem;
  bottom: 31.73333333rem;
}
.page_line .map .board_8 {
  right: 2.93333333rem;
  bottom: 34.13333333rem;
}
.page_line .map .board_9 {
  right: 3.06666667rem;
  top: 29.8rem;
}
.page_line .map .board_10 {
  right: 0.53333333rem;
  top: 27.06666667rem;
}
.page_line .map .board_11 {
  left: 2.4rem;
  top: 26.86666667rem;
}
.page_line .map .board_12 {
  left: 3.46666667rem;
  top: 22.66666667rem;
}
.page_line .map .board_13 {
  left: 3.46666667rem;
  top: 18.48rem;
}
.page_line .map .board_14 {
  right: 2.93333333rem;
  top: 11.25333333rem;
}
.page_line .map .board_15 {
  left: 3.06666667rem;
  top: 4.90666667rem;
}
.page_line .map .place {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
}
.page_line .map .place .point {
  width: 0.8rem;
  height: 0.8rem;
  position: absolute;
  animation-duration: 2s;
}
.page_line .map .place .street {
  height: 0.8rem;
  position: absolute;
}
.page_line .map .place_1 {
  left: 8.8rem;
  top: 61.53333333rem;
}
.page_line .map .place_1 .street_1 {
  left: -1.06666667rem;
  top: -0.73333333rem;
}
.page_line .map .place_2 {
  left: 6.46666667rem;
  top: 54.66666667rem;
}
.page_line .map .place_2 .street_2 {
  left: -0.66666667rem;
  top: -0.73333333rem;
}
.page_line .map .place_3 {
  left: 9rem;
  top: 53.13333333rem;
}
.page_line .map .place_3 .street_3 {
  left: -1.6rem;
  top: -0.73333333rem;
}
.page_line .map .place_4 {
  left: 8.13333333rem;
  top: 25.93333333rem;
}
.page_line .map .place_4 .street_4 {
  left: -2rem;
  top: -0.73333333rem;
}
.page_line .map .place_5 {
  left: 8.46666667rem;
  top: 19.41333333rem;
}
.page_line .map .place_5 .street_5 {
  left: -2.13333333rem;
  top: -0.66666667rem;
}
.page_line .map .place_6 {
  left: 8.4rem;
  top: 14.73333333rem;
}
.page_line .map .place_6 .street_6 {
  left: -2.13333333rem;
  top: -0.73333333rem;
}
.page_line .map .place_7 {
  left: 8.72rem;
  top: 12rem;
}
.page_line .map .place_7 .street_7 {
  left: -1.06666667rem;
  top: -0.73333333rem;
}
.page_line .map .place_8 {
  left: 7.33333333rem;
  top: 6rem;
}
.page_line .map .place_8 .street_8 {
  left: -0.26666667rem;
  top: -0.73333333rem;
}
.page_line .map .place_9 {
  left: 6.8rem;
  top: 1.33333333rem;
}
.page_line .map .place_9 .street_9 {
  left: 0.33333333rem;
  bottom: -0.66666667rem;
}
.page_mask {
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.page_mask .intro {
  width: 8.88rem;
  height: 12rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.44rem;
  margin-top: -6rem;
}
.page_mask .scenic {
  width: 9.6rem;
  height: 12.26666667rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -4.8rem;
  margin-top: -6.13333333rem;
}
.page_mask .share_text {
  width: 8.17333333rem;
  height: 0.82666667rem;
  position: absolute;
  right: 0.66666667rem;
  top: 1.6rem;
}
.page_street {
  z-index: 999;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.page_street .st_map {
  width: 10rem;
  height: 20rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -5rem;
  margin-top: -10rem;
}
.page_street .btn_back {
  width: 1.2rem;
  height: 1.2rem;
  position: absolute;
  left: 0.13333333rem;
  top: 0.13333333rem;
}
/* 背景音乐 */
.bgm {
  width: 0.8rem;
  height: 0.8rem;
  background: url(../img/musicOff.png) no-repeat;
  background-size: 100%;
  z-index: 999;
  position: fixed;
  right: 0.13333333rem;
  top: 0.33333333rem;
}
.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);
  }
}