html,
body {
  overflow: hidden;
  font-size: 0.18rem;
}
.screen_tips{
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 100000;
}
.screen_tips img{
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -1.3rem 0 0 -1.55rem;
  width: 3.1rem;
  height: 2.6rem;
}

.top_music.active{
  animation: ani_bgm 3s ease-in-out infinite;
}
.top_layer {
    animation: keyframes-empty 1s infinite;
}

.share_bubble{
  /* display: none; */
  top: 0;
  left: -1.88rem;
  width: 1.88rem;
  height: 0.48rem;
  background: url(../img/bg.png);
  background-size: 100%;
  transform-origin: right;
  opacity: 0;
  transform: scale(0);
  transition: 0.3s;
}
.top_share:hover .share_bubble{
  display: block;
  transform: scale(1);
  opacity: 1;
}
.share_bubble ul{
  margin: 0 0 0 0.1rem;
}
.share_bubble li{
  display: inline-block;
  margin: 0.09rem 0 0 0.05rem;
  width: 0.3rem;
  height: 0.3rem;
  background: url(../img/share_bg.png);
  background-size: 1.38rem;
  transition: 0.3s;
  cursor: pointer;
}.share_bubble li:hover{
  transform: scale(1.1) translateY(-2px);
}.share_bubble li.qq{
  background-position-x: 0rem
}.share_bubble li.qzone{
  background-position-x: -0.38rem
}.share_bubble li.weixin{
  background-position-x: -0.72rem
}.share_bubble li.weibo{
  background-position-x: -1.1rem
}

.main{
  position: relative;
  width: 100%;
  height: 100%;
  /* max-width: 19.2rem;
  max-height: 10.8rem; */
}

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

.inwap.main{
  transform: rotate(90deg) translateY(-100vw);
  transform-origin: left top;
  width: 100vh;
  height: 100vw;
}

/* loading 部分 */

.loading {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background-color: #0d0d30;
}

.loading_bar {
  position: absolute;
  top: 25%;
  width: 100%;
}

.loading_bar .left_line {
  position: absolute;
  top: 48%;
  left: 0;
  width: 40%;
  box-sizing: border-box;
}

.loading_bar .right_line {
  position: absolute;
  top: 48%;
  right: 0;
  width: 40%;
  box-sizing: border-box;
}

.loading_bar .inner {
  width: 0;
  height: 2px;
  background: #836195;
}
.loading_bar .right_line .inner {
  float: right;
}


.loading_bar .content {
  position: relative;
  margin: 0 auto;
  width: 20%;
}

.loading_bar .process {
  position: absolute;
  top: 50%;
  margin-top: -0.3rem;
  font-size: 0.4rem;
  width: 100%;
  color: #3bf5ff;
  font-family: 'Times New Roman', Times, serif;
  text-align: center;
  /* text-indent: 0.2rem; */
}

.loading_bar .bg_wrap {
  position: relative;
  width: 100%;
}
.loading_bar img {
  width: 100%;
}

.loading_bar .bg {
  width: 100%;
}

.loading_bar .bg_1 {
  position: absolute;
  top: 0;
  width: 100%;
}

.loading_bar .bg_1 img{
  animation-name: rotate_2;
  animation-duration: 4000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

.loading_bar .bg_2 {
  position: absolute;
  top: 0;
  width: 100%;
}

.loading_bar .bg_2 img{
  animation-name: rotate_1;
  animation-duration: 4000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}


@keyframes rotate_1 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate_2 {
  0% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
/* loading 部分结束 */

/* page_door 部分 */

.page_door {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10.8rem;
  background-color: #0d0d30;
  z-index: 40;
}

.page_door .dl_box{
  position: absolute;
  top: 20%;
  right: 0.2rem;
  width: 1.66rem;
  height: 4.26rem;
  background-image: url(../img/down/dl_bg.png);
  background-size: 100%;
  z-index: 400;
}
.page_door .dl_box{
  position: absolute;
  top: 20%;
  right: 0.2rem;
  width: 1.66rem;
  height: 4.26rem;
  background-image: url(../img/down/dl_bg.png);
  background-size: 100%;
  z-index: 400;
}

.page_door .dl_box .dl_code{
  margin: 1.5rem 0 0 0.26rem;
  width: 1.2rem;
  height: 1.36rem;
  background-image: url(../img/down/dl_code.png);
  background-size: 100%;
}
.page_door .dl_box .dl_code img{
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.05rem;
}
.page_door .dl_box .dl_android{
  display: none;
  background-image: url(../img/down/dl_android.png);
  background-size: 100%;
}
.page_door .dl_box .dl_ios{
  display: none;
  background-image: url(../img/down/dl_ios.png);
  background-size: 100%;
}
.page_door .dl_box .dl_taptap{
  background-image: url(../img/down/dl_taptap.png);
  background-size: 100%;
}

.page_door .dl_box .btn{
  margin: 0.1rem 0 0 0.15rem;
  width: 1.42rem;
  height: 0.52rem;
}

.page_door .cover{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  animation: keyframes-empty 1s infinite;
  pointer-events: none;
}
.page_door .content{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12rem;
  margin-top: -5.4rem;
  width: 24rem;
  height: 10.8rem;
  z-index: 90;
  background: url(../img/page_door/bg.jpg) no-repeat;
  background-size: 100%;
  /* overflow: hidden; */
  z-index: 50;
  transform-origin: top;
} 
.page_door .activity_title{
  position: absolute;
  top: 2%;
  left: 50%;
  margin-left: -3.9rem;
  width: 7.8rem;
  height: 2.5rem;
  background-image: url(../img/page_door/title.png);
  background-size: 100% 100%;
  z-index: 10;
  transform-origin: right center;
}
.page_door .wall{
  position: relative;
  margin: 1.6rem auto 0 auto;
  width: 7.38rem;
  height: 7.07rem;
  background-image: url(../img/page_door/door.png);
  background-size: 100%;
  overflow: hidden;
  z-index: 9;
}
.page_door .door{
  position: absolute;
  top: 5.38rem;
  left: 50%;
  margin-left: -1.15rem;
  width: 2.3rem;
  height: 2.87rem;
  z-index: 0;
}
.page_door .door_p{
  position: absolute;
  width: 1.15rem;
  height: 2.87rem;
  background-size: 1.15rem 2.87rem;
}
.page_door #door_l{
  left: 0;
  background-image: url(../img/page_door/door_l.png);
  /* transform: rotateY(60deg); */
  transform-origin: left center;
  z-index: 0;
}
.page_door #door_r{
  right: 0;
  background-image: url(../img/page_door/door_r.png);
  /* transform: rotateY(-80deg); */
  transform-origin: right center;
  z-index: 0;
}
.page_door .light{
  position: relative;
  margin: 3.6rem auto 0 auto;
  width: 2.97rem;
  height: 3.09rem;
  background-size: 100%;
  transform-origin: right center;
}

.page_door .light img{
  position: absolute;
  top: 0;
  animation-name: light;
  animation-duration: 3000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  filter: brightness(1.2);
  opacity: 0;
}
.page_door .light .layer2{
  animation-delay: 800ms;
}

.page_door .light .layer3{
  animation-delay: 1400ms;
}

.page_door .light .layer4{
  animation-delay: 2200ms;
}

@keyframes light {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }

  100% {
    transform:  scale(2)  rotate(180deg);
    opacity: 0;
  }
}

.page_door .go{
  position: absolute;
  top: 15%;
  left: 50%;
  margin-left: -0.52rem;
  width: 1.04rem;
  height: 2.24rem;
  background-image: url(../img/page_door/go.png);
  background-size: 100%;
  transform-origin: right center;
  
  animation-name: keyframes-scale2;
  animation-delay: 500ms ;
  animation-duration: 3000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}
.page_door{
  transform-origin: 50% 64%;
}


/* page_door 部分结束 */


/* 顶层固定浮层 */
.top_layer {
  animation: keyframes-empty 1s infinite;
  z-index: 100;
}
.top_layer .treasure {
  display: none;
}

 .top_layer .top_logo{
  left: 0.3rem;
  top: 0.4rem;
  width: 2.57rem;
  height: 0.87rem;
  background: url(../img/logo_1.png?v=20190926) center no-repeat;
  background-size: 100%;
  z-index: 10000;
}

.top_layer .treasure{
  left: 3rem;
  top: 0.2rem;
}
.top_right{
  top: 0.3rem;
  right: 0.4rem;
}

.top_right button, .top_right>a{
  background: url(../img/top_btn.png);
  background-size: 2.4rem 0.48rem;
}
.top_right .keyword{
  display: none;
  height: 0.5rem;
  display: block;
  width: 0.5rem;
  position: absolute;
  left: 0.6rem;
  top: 0;
  opacity: 0;
}
.top_right .top_share button{
  width: 0.5rem;
  height: 0.48rem;
  background-position-x: 0rem;
  vertical-align: middle;
}
.top_right .top_music{
  width: 0.5rem;
  height: 0.48rem;
  background-position-x: -0.55rem ;
}
.top_right .top_office{
  width: 1.3rem;
  height: 0.48rem;
  background-position-x: -1.1rem ;
}
.top_right .top_dl{
  width: 1.3rem;
  height: 0.48rem;
  background-image: url(../img/down/dl_right.png);
  background-size: 100%;
}
.copyright{
  position: fixed;
  display: inline-block;
  bottom: 0rem;
  right: 0rem;
  padding: 0.2rem;
  font-size: 0.18rem;
  color: #fff;
  line-height: 0.4rem;
  z-index: 100;
  cursor: pointer;
}


/* 场景背景 部分 */

#container {
  position: absolute;
  overflow: hidden;
  z-index: 10;
  top: 0;
}

#scroller {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5.0rem;
  width: 50rem;
  height: 10.8rem;
  perspective-origin: center;
  perspective: 1000px;
  cursor: -webkit-grab;
}

#scroller .scroller_bg{
  position: relative;
}

#scroller .scroller_bg img{
  width: 100%;
  height: 100%;
}
#scroller .far{
  position: absolute;
  top: 0;
  left: 0;
  width: 37rem;
  height: 100%;
  z-index: 20;
}
#scroller .sky{
  position: absolute;
  top: 0;
  left: 0;
  width: 37rem;
  height: 100%;
  z-index: 10;
}
#scroller .street{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  transform: translateX(0)
}
#scroller .arrow_line{
  position: absolute;
  top: 7.3rem;
  left: 0;
  width: 100%;
  height: 0.9rem;
  z-index: 31;
}

#scroller .arrow_box{
  display: inline-block;
  width: 4rem;
  margin: 0 4rem;
}

#scroller .arrow{
  display: inline-block;

  width: 3.5rem;
  height: 0.9rem;
  background: url(../img/page_street/arrow.png);
  background-size: 1.16rem 0.9rem;

  animation: ani_arrow  2s  infinite; 
  animation-timing-function: steps(1, end); 

  transform-origin: 50% 50%;
}

@keyframes ani_arrow {
  0% {
    width: 0rem;
   background-repeat: 0;
  }

  20% {
    width: 30%;
  }

  40% {
    width: 60%;
  }

  60% {
    width: 80%;
  }
  
  80% {
    width: 80%;
  }

  100% {
    width: 80%;
  }
}
/* 场景背景 部分结束 */

/* 街道内容 部分 */
.street_content{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
/* 街道内容 部分结束 */

/* 主角动画 部分 */
.mian_role {
  position: absolute;
  top: 5.8rem;
  left: 0;
  margin-left: -1.8rem;
  width: 2rem;
  /* width: 2.3rem; */
  height: 2.5rem;
  z-index: 10;
  overflow: hidden;
  transform: scale(0.8);
  pointer-events: none;
}

/* .mian_role .role_size {
  width: 2.8rem;
  margin-left: -0.4rem;
} */

.mian_role .gka {
  width: 100%;
  height: 0;
  padding-bottom: 98.86685552407933%;
  background-image: url("../img/main_role/stand.png");
  background-size: 1200% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-stand;
  animation-duration: 0.48s;
}

.mian_role .gka.run {
  background-image: url("../img/main_role/sprites.png");
  background-size: 2000% 100%;
  animation-name: keyframes-run;
  animation-duration: 0.84s;
}

.mian_role .gka.run_left {
  transform: scaleX(-1)
}
/* 主角动画 部分结束 */


.part{
  position: absolute;
  top: 0;
}

.magic_light{
  position: absolute;
  top: 0.4rem;
  left: -0.1rem;
  width: 1.8rem;
  height: 2rem;
  z-index: 1;
  background-size: 100%;
}.magic_light.light_green{
  background-image: url(../img/page_street/magic_light_green.png)
}.magic_light.light_bule{
  background-image: url(../img/page_street/magic_light_bule.png)
}.magic_light.light_purple{
  background-image: url(../img/page_street/magic_light_purple.png)
}.magic_light.light_orange{
  background-image: url(../img/page_street/magic_light_1.png)
}.magic_light.light_pink{
  background-image: url(../img/page_street/magic_light_pink.png)
}




.btn_play{
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}

.btn_play>div{
  position: absolute;
  top: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-position: center;
  background-repeat: no-repeat;
}

.btn_play .play_3{
  background-image: url('../img/page_street/play_3.png');
  position: absolute;
  top: 0;
  animation-name: light2;
  animation-duration: 2000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
  filter: brightness(1.2);
  opacity: 0;
  background-size: 100%;
}

.btn_play .play_3.layer2{
  animation-delay: 800ms;
}

.btn_play .play_3.layer3{
  animation-delay: 1400ms;
}

.btn_play .play_3.layer4{
  animation-delay: 2200ms;
}

@keyframes light2 {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform:  scale(1.5);
    opacity: 0;
  }
}


.btn_play .play_2{
  background-image: url('../img/page_street/play_2.png');
  background-size: 0.9rem;

  animation-name: keyframes-rotate;
  animation-duration: 3000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}
.btn_play .play_1{
  background-image: url('../img/page_street/play_1.png');
  background-size: 0.9rem;
  z-index: 10;
  transition: 0.5s;
  animation: keyframes-empty 1s infinite;
}

.btn_play .play_1:hover{
  transform: scale(1.5) rotate(360deg);
}

.btn_play p{
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 1.5rem;
  font-size: 0.18rem;
  font-weight: bold;
  color: #632ca9;
  text-shadow: 
  1px 1px 0.05rem #fff, 
  -1px 1px 0.05rem #fff,
  1px 1px 0.05rem #fff, 
  1px -1px 0.05rem #fff;
  text-align: center;
}

 .street_content .word{
  position: absolute;
  top: -0.3rem;
  left: 0.4rem;
  width: 1.3rem;
  height: 0.8rem;background-size: 100%;
  background-repeat: no-repeat;
  z-index: 3;
  animation: keyframes-word 5s infinite;
  transform-origin: center bottom;
}

.inwap  .street_content  .word{
  animation-name: keyframes-word2 ;
}

.op_tips{
  position: absolute;
  top: 6.4rem;
  left: 4rem;
  text-align: center;
  font-size: 0.18rem;
  color: #fff;
  width: 2rem;
  line-height: 0.3rem;
  text-shadow: 0 0 0.3rem #E91E63;
  animation: keyframes-op_tips 1s linear infinite;
}
.op_tips1{
  display: inline-block;
}
.op_tips2{
  top: 6.6rem;
  font-size: 0.24rem;
  display: none;
}
.inwap .op_tips1{
  display: none;
}
.inwap .op_tips2{
  display: inline-block;
}

@keyframes keyframes-op_tips {
  0% {
    transform: translateY(0.1rem);
    opacity: 1;
    text-shadow: 0 0 0.1rem #E91E63;
  }
  50% {
    transform: translateY(0rem);
    opacity: 0.2;
    text-shadow: 0 0 0.3rem #E91E63;
  }
  100% {
    transform: translateY(0.1rem);
    opacity: 1;
    text-shadow: 0 0 0.1rem #E91E63;
  }
}

/* 第一部分  */
/* 移动端加transform: translateX(0);  */
.part_1{
  left: 0;
  width: 14.86rem;
}
.part_1 .btn_play{
  top: 4.8rem;
  left: 9.3rem;
  background: rgba(100, 0, 0, 0.1)
}

.npc_mission {
  position: absolute;
  top: 5.1rem;
  left: 2rem;
  width: 1.8rem;
  height: 2.14rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_mission .gka {
  position: absolute;
  top: -0.3rem;
  width: 100%;
  height: 0;
  padding-bottom: 138.96103896103895%;
  background-image: url("../img/page_street/part_1/mission_sprites.png");
  background-size: 2200% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-mission;
  animation-duration: 2.0s;
  z-index: 2;
}

.npc_mission .word {
  background-image: url(../img/page_street/part_1/word_mission.png);
}


.notic{
  position: absolute;
  top: 4.25rem;
  left: 3.4rem;
  width: 2.8rem;
  height: 2.34rem;
  animation: keyframes-empty 1s infinite;
}

.notic .notic_title{
  position: absolute;
  top: 0.3rem;
  left: 0.9rem;
  width: 1rem;
  height: 0.4rem;
  overflow: hidden;
}

.notic .notic_title P{
  display: block;
  height: 0.4rem;
  font-size: 0.24rem;
  font-weight: bold;
  color: #ffe9dd;
  text-shadow: 
  2px 2px 0px #000, 
  -2px -2px 0px #000;
  letter-spacing: 0.05rem;
  white-space: nowrap;
  animation: keyframes-notic 1.5s steps(1) infinite;
  overflow: hidden;
}

.npc_lixi {
  position: absolute;
  top: 5.1rem;
  left: 7rem;
  width: 1.8rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_lixi .gka {
  position: absolute;
  top: 0.2rem;
  width: 100%;
  height: 0;
  padding-bottom: 106.9090909090909%;
  background-image: url("../img/page_street/part_1/sprites_lixi.png");
  background-size: 2400% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_lixi;
  animation-duration: 1.8s;
  z-index: 2;
}

.npc_lixi .word {
  top: -0.4rem;
  left: 0rem;
  background-image: url(../img/page_street/part_1/npc_lixi_word.png);
  animation-delay: 0.5s;
}

.npc_shizi {
  position: absolute;
  top: 5.1rem;
  left: 11.5rem;
  width: 2.5rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_shizi .gka {
  position: absolute;
  top: -0.2rem;
  left: 0.15rem;
  width: 100%;
  height: 0;
  padding-bottom: 90.41450777202073%;
  background-image: url("../img/page_street/part_1/sprites_shizi.png");
  background-size: 2000% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_shizi;
  animation-duration: 1.8s;
  z-index: 2;
}

.npc_shizi .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_1/npc_shizi_word.png);
  animation-delay: 0.8s;
}

.npc_tips {
  position: absolute;
  top: 3.2rem;
  left: 2.4rem;
  width: 2rem;
  height: 2rem;
  z-index: 1002;
  transform: translateX(0);
  text-align: center;
}
.npc_tips .gka{
  position: relative;
  display: inline-block;
  margin-bottom: 0.1rem;
  width: 1.5rem;
  height: 2rem;
  background: url(../img/tips.png);
  background-size: 100%;
  animation: keyframes-update 2s linear infinite;
}
.npc_tips p{
  color: #fff;
  font-size: 0.18rem;
}

.npc_jinghun {
  position: absolute;
  top: 4.9rem;
  left: 3.8rem;
  width: 2.5rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_jinghun .gka {
  position: absolute;
  top: -0.2rem;
  left: 0.15rem;
  width: 1.7rem;
  height: 1.44rem;
  background-image: url("../img/page_street/part_1/npc_jinghun.png");
  background-size: 100%;
  z-index: 2;
}

.npc_jinghun .word {
  top: -0.8rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_1/npc_jinghun_word.png);
  animation-name: shake-hard;
  animation-duration: 2s;
  animation-delay: 0.1s;
}

.inwap .npc_jinghun .word {
  animation-name: shake-hard;
}


/* 第二部分  */
.part_2{
  left: 14.86rem;
  width: 16.9rem;
}

.part_2 .btn_play{
  top: 3.9rem;
  left: 8.52rem;
  width: 2rem;
  height: 2rem;
}

.part_2 .play_3{
  width: 2rem;
  height: 2rem;
  background-size: 2rem 2rem;
}

.part_2 .play_1{
  width: 2rem;
  height: 2rem;
  background-image: url(../img/page_street/part_2/video.png);
  background-size: 2rem 2rem;
  animation-name: keyframes-scale2;
  animation-duration: 3000ms;
  animation-iteration-count: infinite;
  transform-origin: 50% 50%;
}

.part_2 .play_1:hover{
 transform: scale(1.1)
}

.part_2 .history{
  position: absolute;
  top: 1.8rem;
  left: 1.4rem;
  width: 2.3rem;
  height: 3.74rem;
  background-image: url(../img/page_street/part_2/history.png);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: keyframes-update 2s ease-in-out infinite;
  transition: 0.3s;
  cursor: pointer;
}


.npc_duxin {
  position: absolute;
  top: 5.1rem;
  left: 6.1rem;
  width: 1.8rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_duxin .gka {
  position: absolute;
  top: 0.3rem;
  left: 0.15rem;
  width: 100%;
  height: 0;
  padding-bottom: 97.97570850202429%;
  background-image: url("../img/page_street/part_2/sprites-duxin.png");
  background-size: 2300% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_duxin;
  animation-duration: 1.8s;
  z-index: 2;
}

.npc_duxin .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_2/npc_duxin_word.png);
  animation-delay: 0.3s;
}


.npc_ruxue {
  position: absolute;
  top: 5.1rem;
  left: 11.5rem;
  width: 2.8rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_ruxue .gka {
  position: absolute;
  top: -0.2rem;
  left: -0.6rem;
  width: 100%;
  height: 0;
  padding-bottom: 89.44337811900192%;
  background-image: url("../img/page_street/part_2/sprites_ruxue.png");
  background-size: 1900% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_ruxue;
  animation-duration: 1.8s;
  z-index: 2;
}

.npc_ruxue .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_2/npc_ruxue_word.png);
  animation-delay: 0.8s;
}



.npc_zuozhan {
  position: absolute;
  top: 3.6rem;
  left: 13.9rem;
  width: 1.9rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_zuozhan .gka {
  position: absolute;
  top: 0.2rem;
  left: -0.1rem;
  width: 100%;
  height: 0;
  padding-bottom: 101.28617363344053%;
  background-image: url("../img/page_street/part_2/sprites_zuozhan.png");
  background-size: 2000% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_zuozhan;
  animation-duration: 0.9s;
  z-index: 2;
}

.npc_zuozhan .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_2/npc_zuozhan_word.png);
  animation-delay: 0.6s;
}

/* 第三部分  */
.part_3{
  left: 31.7rem;
  width: 16.9rem;
}
.part_3 .btn_play{
  top: 4.8rem;
  left: 5.4rem;
}


.part_3 .map{
  position: absolute;
  top: 3.8rem;
  left: -1.0rem;
  width: 1.9rem;
  height: 1.7rem;
  background-image: url(../img/page_street/part_3/map.png);
  background-size: 100%;
  background-repeat: no-repeat;
  animation: keyframes-update 2s ease-in-out infinite;
  transition: 0.3s;
  cursor: pointer;
}


.npc_partner {
  position: absolute;
  top: 5.1rem;
  left: 2.9rem;
  width: 1.2rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_partner .gka {
  position: absolute;
  top: 0.4rem;
  left: 0.2rem;
  width: 100%;
  height: 0;
  padding-bottom: 143.85026737967914%;
  background-image: url("../img/page_street/part_3/sprites_partner.png");
  background-size: 1400% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_partner;
  animation-duration: 1.8s;
  z-index: 2;
}

.npc_partner .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_3/npc_partner_word.png.png);
  animation-delay: 0.1s;
}

.npc_ssr {
  position: absolute;
  top: 5.1rem;
  left: 7.8rem;
  width: 1.9rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_ssr .gka {
  position: absolute;
  top: 0.2rem;
  left: -0.1rem;
  width: 100%;
  height: 0;
  padding-bottom: 101.28617363344053%;
  background-image: url("../img/page_street/part_3/sprites_ssr.png");
  background-size: 2000% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-npc_ssr;
  animation-duration: 1.8s;
  z-index: 2;
}

.npc_ssr .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_3/npc_ssr_word.png);
  animation-delay: 2s;
}

.npc_tree {
  position: absolute;
  top: 3.15rem;
  left: 11.8rem;
  width: 4rem;
  height: 3.11rem;
  z-index: 1;
  transform: translateX(0);
}

.npc_tree .magic_light {
  position: absolute;
  top: 2.4rem;
  left: 0rem;
  width: 100%;
  height: initial;
  z-index: 2;
}
.npc_tree .gka {
  position: absolute;
  top: 0.2rem;
  left: -0.1rem;
  width: 100%;
  height: 0;
  padding-bottom: 77.75%;
  background-image: url("../img/page_street/part_3/sprites_tree.png");
  background-size: 1600% 100%;
  background-repeat: no-repeat;
  animation-name: keyframes-tree;
  animation-duration: 1s;
  z-index: 2;
}

.npc_tree .word {
  top: -0.4rem;
  left: 0.2rem;
  background-image: url(../img/page_street/part_3/npc_tree_word.png);
  animation-name: shake-hard;
  animation-duration: 2.4s;
  animation-delay: 0.1s;
}
.inwap .npc_tree .word {
  animation-name: shake-hard;
}

.part_3 .npc_mission {
  left: 15rem;
  top: 5.5rem;
}
.part_3 .npc_mission .word {
  background-image: url(../img/page_street/part_3/mission_finish.png);
}

/*========= 宝箱========= */
.treasure{
  width: 5.4rem;
}.treasure .box{
  width: 1.28rem;
  height: 1.28rem;
  vertical-align: middle;
}.treasure .box_bg_1{
  background-image: url(../img/box_bg_1.png);
  background-size: 100%;
  animation: keyframes-rotate 6s linear infinite;
}.treasure .box_bg_2{
  background-image: url(../img/box_bg_2.png);
  background-size: 100%;
  animation: keyframes-rotate2 10s linear infinite ;
}.treasure .box_content{
  background-image: url(../img/box.png);
  background-size: 100%;
  cursor: pointer;
}.treasure .box_content.active{
  animation: keyframes-scale2 1s linear infinite ;
}.treasure .words{
  padding-top: 0.36rem;
  padding-left: 0.2rem;
  width: 3.9rem;
  height: 1.28rem;
  background: url(../img/words_bg.png) no-repeat center;
  background-size: 100%;
  vertical-align: middle;
}

.keyword{
  display: inline-block;
  width: 0.54rem;
  height: 0.55rem;
  background: url(../img/empty.png) no-repeat center;
  background-size: 100%;
}.keyword_get{
  width: 0.8rem;
  height: 0.8rem;
  /* animation: keyframes-keyword_get infinite 1s; */
  cursor: pointer;
}.keyword.ke{
  background-image: url(../img/ke.png);
} .keyword.lan{
  background-image: url(../img/lan.png);
} .keyword.duo{
  background-image: url(../img/duo.png);
} .keyword.er{
  background-image: url(../img/er.png);
} .keyword.qi{
  background-image: url(../img/qi.png);
} .keyword.cheng{
  background-image: url(../img/cheng.png);
} .keyword.empty{
  background-image: url(../img/empty.png) !important;
}

.disable_cover{
  width: 20rem;
  height: 100%;
  top: 0;
  left: 1.2rem;
  background: url(../img/mask.png);
  background-size: 25rem;
  /* background: rgba(100, 0, 0, 0.6); */
  z-index: 1000;
  animation: keyframes-empty 1s infinite;
}.disable_cover span{
  display: inline-block;
  color: #fff;
  font-size: 0.4rem;
  text-shadow: 0 0 0.4rem #E91E63;
  line-height: 100%;
  padding-top: 5rem;
  padding-left: 4rem;
  font-weight: bold;
  opacity: 0.6;
  /* font-style: italic; */
}
.ani_empty{
  animation: keyframes-empty 1s infinite
}

.part_1 .keyword.er{
  position: absolute;
  left: 9.76rem;
  top: 2.3rem;
  width: 0.5rem;
  z-index: 1;
  animation: keyframes-keyword-er 1s infinite;
}
@keyframes keyframes-keyword-er {
  0% {
    transform: rotate(-48deg);
  }
  100% {
    transform: rotate(-48deg);
  }
}