body {
  background-image: radial-gradient(#3b34f1, #0e073a);
  -webkit-background-image: radial-gradient(#3b34f1, #0e073a);
}
.wrapper {
  width: 10rem;
  margin: 0 auto;
}
.wrapper .page {
  position: relative;
}
.wrapper .page .bjnews_logo {
  width: 1.93333333rem;
  height: 0.66666667rem;
  position: absolute;
  top: 0.48rem;
  left: 50%;
  margin-left: -0.96666667rem;
}
.wrapper .page .light_ray {
  width: 10rem;
  height: 4.53333333rem;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -5rem;
  animation-duration: 3s;
}
.wrapper .page .light_ray_2 {
  animation-delay: 0.5s;
}
.wrapper .page .main_box {
  width: 100%;
  height: 80%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}
.wrapper .page .main_box .main_box_flex {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* 封面 */
.page_cover {
  width: 100%;
  height: 100vh;
  background: #190352 url(../img/bg_cover.jpg) no-repeat center bottom / contain;
}
.page_cover .btn_enter {
  width: 3.2rem;
  height: 1.04rem;
  position: absolute;
  bottom: 0.66666667rem;
  left: 50%;
  margin-left: -1.6rem;
  opacity: 0;
}
.page_cover .cover_main_box .c_main_flex .tit_box {
  width: 8.93333333rem;
  height: 3.46666667rem;
  margin-bottom: 0.4rem;
  position: relative;
  opacity: 0;
}
.page_cover .cover_main_box .c_main_flex .tit_box .tit_img {
  width: 5.86666667rem;
  height: 1.52rem;
  position: absolute;
}
.page_cover .cover_main_box .c_main_flex .tit_box .tit_quanjing {
  left: 0;
  top: 0;
}
.page_cover .cover_main_box .c_main_flex .tit_box .tit_zhiling {
  right: 0;
  bottom: 0;
}
.page_cover .cover_main_box .c_main_flex .tit_subhead {
  width: 5.2rem;
  height: 1.12rem;
  opacity: 0;
}
.page_cover .cover_main_box .c_main_flex .car_space {
  width: 100%;
  height: 7.6rem;
}
/* 地图 */
.page_map {
  width: 100%;
  height: 100vh;
}
.page_map .map_main_box {
  margin-top: 5%;
}
.page_map .map_main_box .m_main_flex .tit_map {
  width: 6.13333333rem;
  height: 0.93333333rem;
  opacity: 0;
}
.page_map .map_main_box .m_main_flex .tip_click {
  width: 5.89333333rem;
  height: 0.74666667rem;
  animation-iteration-count: 3;
  animation-duration: 0.5s;
  opacity: 0;
}
.page_map .map_main_box .m_main_flex .map_box {
  width: 10rem;
  height: 9.73333333rem;
  background: url(../img/map_box.png) no-repeat center / contain;
  position: relative;
  opacity: 0;
}
.page_map .map_main_box .m_main_flex .map_box .position_box {
  width: 2.93333333rem;
  height: 2rem;
  position: absolute;
}
.page_map .map_main_box .m_main_flex .map_box .position_box .icon_locate {
  width: 0.58666667rem;
  height: 0.8rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -0.29333333rem;
  margin-top: -0.4rem;
}
.page_map .map_main_box .m_main_flex .map_box .position_W {
  left: 1.33333333rem;
}
.page_map .map_main_box .m_main_flex .map_box .position_E {
  right: 2rem;
}
.page_map .map_main_box .m_main_flex .map_box .position_4 {
  top: 0;
}
.page_map .map_main_box .m_main_flex .map_box .position_3 {
  top: 2rem;
}
.page_map .map_main_box .m_main_flex .map_box .position_2 {
  bottom: 2.90666667rem;
}
.page_map .map_main_box .m_main_flex .map_box .position_1 {
  bottom: 0.90666667rem;
}
.page_map .map_main_box .m_main_flex .btn_guide {
  width: 3.70666667rem;
  height: 1.04rem;
  opacity: 0;
}
/* 指南 */
.page_guide {
  width: 100%;
  min-height: 100vh;
  padding-top: 30%;
}
.page_guide .tit_guide {
  display: block;
  width: 6.13333333rem;
  height: 0.93333333rem;
  margin: 0 auto;
  margin-bottom: 10%;
  opacity: 0;
}
.page_guide .g_part {
  margin-bottom: 10%;
}
.page_guide .g_part .tit_part {
  width: 9.6rem;
  height: 1.06666667rem;
  background-color: #fff;
  margin: 0 auto;
  margin-bottom: 5%;
  position: relative;
}
.page_guide .g_part .tit_part .text_car {
  height: 1.06666667rem;
  color: #2a028f;
  font-size: 0.53333333rem;
  font-weight: 900;
  line-height: 1.06666667rem;
  position: absolute;
  top: 50%;
  margin-top: -0.53333333rem;
}
.page_guide .g_part .tit_part .text_car_r {
  right: 0;
}
.page_guide .g_part .tit_part .text_car_g {
  left: 0;
}
.page_guide .g_part .tit_part .icon_car {
  width: 2.53333333rem;
  height: 1.2rem;
  position: absolute;
  top: 50%;
  margin-top: -0.6rem;
}
.page_guide .g_part .tit_part .icon_car-r {
  left: 0;
}
.page_guide .g_part .tit_part .icon_car-g {
  right: 0;
}
.page_guide .g_part .part {
  width: 100%;
  margin-bottom: 3%;
}
.page_guide .g_part .tip_slide {
  width: 10rem;
  height: 2.66666667rem;
  margin: 0 auto;
  animation-duration: 2s;
}
.page_guide .btn_back {
  display: block;
  width: 3.2rem;
  height: 1.04rem;
  margin: 0 auto;
  margin-bottom: 15%;
  opacity: 0;
}
/* car-txt动画 */
.car_r_ani {
  animation: CarR_Ani 1s linear 1 forwards;
  -webkit-animation: CarR_Ani 1s linear 1 forwards;
}
@keyframes CarR_Ani {
  0% {
    left: 0;
  }
  100% {
    left: 0.8rem;
  }
}
@-webkit-keyframes CarR_Ani {
  0% {
    left: 0;
  }
  100% {
    left: 0.8rem;
  }
}
.car_g_ani {
  animation: CarG_Ani 1s linear 1 forwards;
  -webkit-animation: CarG_Ani 1s linear 1 forwards;
}
@keyframes CarG_Ani {
  0% {
    right: 0;
  }
  100% {
    right: 0.8rem;
  }
}
@-webkit-keyframes CarG_Ani {
  0% {
    right: 0;
  }
  100% {
    right: 0.8rem;
  }
}
.txt_r_ani-1 {
  animation: TxtR_Ani-1 1s linear 1 forwards;
  -webkit-animation: TxtR_Ani-1 1s linear 1 forwards;
}
@keyframes TxtR_Ani-1 {
  0% {
    right: 0;
  }
  100% {
    right: 3.33333333rem;
  }
}
@-webkit-keyframes TxtR_Ani-1 {
  0% {
    right: 0;
  }
  100% {
    right: 3.33333333rem;
  }
}
.txt_g_ani-1 {
  animation: TxtG_Ani-1 1s linear 1 forwards;
  -webkit-animation: TxtG_Ani-1 1s linear 1 forwards;
}
@keyframes TxtG_Ani-1 {
  0% {
    left: 0;
  }
  100% {
    left: 3.73333333rem;
  }
}
@-webkit-keyframes TxtG_Ani-1 {
  0% {
    left: 0;
  }
  100% {
    left: 3.73333333rem;
  }
}
.txt_r_ani-2 {
  animation: TxtR_Ani-2 1s linear 1 forwards;
  -webkit-animation: TxtR_Ani-2 1s linear 1 forwards;
}
@keyframes TxtR_Ani-2 {
  0% {
    right: 0;
  }
  100% {
    right: 2.8rem;
  }
}
@-webkit-keyframes TxtR_Ani-2 {
  0% {
    right: 0;
  }
  100% {
    right: 2.8rem;
  }
}
.txt_g_ani-2 {
  animation: TxtG_Ani-2 1s linear 1 forwards;
  -webkit-animation: TxtG_Ani-2 1s linear 1 forwards;
}
@keyframes TxtG_Ani-2 {
  0% {
    left: 0;
  }
  100% {
    left: 3.06666667rem;
  }
}
@-webkit-keyframes TxtG_Ani-2 {
  0% {
    left: 0;
  }
  100% {
    left: 3.06666667rem;
  }
}
/* ★全景地图 */
#panoramicMap {
  z-index: 999;
  width: 100%;
  height: 100%;
  position: fixed;
}
.the_place_name {
  width: 100%;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 5px #666;
  -webkit-text-shadow: 2px 2px 5px #666;
  position: fixed;
  top: 5%;
  z-index: 1000;
}
.menu_box {
  width: 0.96rem;
  position: fixed;
  top: 4.66666667rem;
  right: 5%;
  z-index: 1000;
}
.menu_box .pano_btn {
  display: block;
  width: 0.8rem;
  margin: 0 auto;
}
.menu_box .p_btn_back {
  width: 1.06666667rem;
}
.menu_box .p_btn_share {
  width: 1.06666667rem;
}
.mask_share {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  z-index: 10002;
}
.mask_share .tip_share {
  width: 1.06666667rem;
  height: 1.89333333rem;
  position: absolute;
  right: 0.66666667rem;
  top: 0.2rem;
}
/* 背景音乐 */
.bgm {
  width: 25px;
  height: 25px;
  background: url(../img/musicOff.png) no-repeat;
  background-size: 100%;
  z-index: 999;
  position: fixed;
  left: 0.33333333rem;
  top: 0.4rem;
}
.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);
  }
}
