* {
  background-size: cover;

}

html,
body {
  overflow: hidden;
  background: #000;
}

body {
  width: 100%;
  height: 100%;
}

.animated {
  animation-duration: 0.5s;
}

.swiper-container,
.swiper-wrapper {
  width: 100%;
  height: 100%;
}

.swiper-wrapper .swiper-slide {
  overflow: hidden;
}

#page_swiper .page {
  background-position-x: center;
}

#page_swiper {
  overflow: hidden;
}

#page_swiper .swiper-slide {
  position: relative;
}

#page_swiper .page_inner {
  display: none;
  position: absolute;
  left: 50%;
  width: 1920px;
  height: 100%;
  transform: translateX(-50%);
  background-size: 100% 100%;
  overflow: hidden;
}

#page_swiper .page .title{
  width: 6.2rem;
  height: 1.19rem;
  position: absolute;
  left: 50%;
  top: 0.15rem;
  margin-left: -3.1rem;
}


/* 首页部分开始 */
#page_swiper .page_home .page_inner {
  display: none;
  position: absolute;
  margin: -600px 0 0 -960px;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1200px;
  background-size: cover;
  overflow: hidden;
}

.active.page_home .page_content {
  width: 1920px;
  height: 1200px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -600px 0 0 -960px;
  background: url("../img/home/bg.jpg?__rev=6808759") no-repeat;
  background-size: cover;
}



/* 主题 start */
.page_home .theme_con {
  display: none;
  position: absolute;
  background: url("../img/home/mask.png?__rev=81cb6f2") repeat;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 100;
}

.page_home .theme_con .btn_play {
  position: absolute;
  width: 62px;
  height:62px;
  top: 0.45rem;
  right: 376px;
  background: url("../img/home/btn_stop.png?__rev=b1dcdda") no-repeat;
  background-size: cover;
}
.page_home .theme_con .btn_play.playing{
  background: url("../img/home/btn_play.png?__rev=cb5b25a") no-repeat;
  background-size: cover;
}

.page_home .theme_con .btn_restart {
  position: absolute;
  width: 154px;
  height:51px;
  top: 0.5rem;
  right: 200px;
  background: url("../img/home/btn_restart.png?__rev=5bd006f") no-repeat;
  background-size: cover;
}

.page_home .theme_con .btn_gogw {
  position: absolute;
  width: 154px;
  height:51px;
  top: 0.5rem;
  right: 28px;
  background: url("../img/home/btn_gw.png?__rev=df81c84") no-repeat;
  background-size: cover;
}

.page_home .theme_con .logo {
  position: absolute;
  width: 330px;
  height: 77px;
  left: 50%;
  margin-left: -165px;
  bottom: 0.8rem;
  background: url("../img/home/logo.png?__rev=e71fcb3") no-repeat;
  background-size: cover;
}
.page_home .theme_con .logo_txt {
  position: absolute;
  width: 605px;
  height: 73px;
  left: 50%;
  margin-left: -302.5px;
  bottom: 0;
  background: url("../img/home/logo_txt.png?__rev=2651ea2") no-repeat;
  background-size: cover;
}

.page_home .theme_con .download_wrp {
  position: absolute;
  right: 0; 
  bottom: 1rem;
  width: 2.73rem;
  height: 3.94rem;
}

.page_home .theme_con .download_wrp .show_wrp {
  position: absolute;
  right: 0;
  top: 0;
  width: 2.73rem;
  height: 3.94rem;
  transition: all 0.5s;
}

.page_home .theme_con .download_wrp .box {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.3rem;
  height: 4.18rem;
  background: url("../img/home/xz_wrp.png?__rev=4348793") no-repeat;
  background-size: cover;
}

.page_home .theme_con .download_wrp .btn_sq {
  position: absolute;
  top: 0;
  right: 1.85rem;
  width: 0.74rem;
  height: 1.64rem;
  background: url("../img/home/btn_sq.png?__rev=feffc83") no-repeat;
  background-size: cover;
}

.page_home .theme_con .theme_v {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

}





/* 下载游戏按钮 */
.page_home .theme_con .download_wrp .btn_xz {
  position: absolute;
  top: 0;
  right: -0.8rem;
  width: 0.65rem;
  height: 1.64rem;
  background: url("../img/home/btn_xz.png?__rev=e7ecd97") no-repeat;
  background-size: cover;
  transition: all 0.5s;
}

.page_home .theme_con .download_wrp .btn_and {
  position: absolute;
  top: 2.45rem;
  right: 0.18rem;
  width: 1.87rem;
  height: 0.65rem;
  background: url("../img/home/btn_and.png?__rev=ecbe11c") no-repeat;
  background-size: cover;
}

.page_home .theme_con .download_wrp .btn_ios {
  position: absolute;
  top: 3.2rem;
  right: 0.18rem;
  width: 1.87rem;
  height: 0.65rem;
  background: url("../img/home/btn_ios.png?__rev=e247442") no-repeat;
  background-size: cover;
}

.page_home .theme_con .arrow {
  position: absolute;
  width: 1.24rem;
  height: 0.88rem;
  background: url("../img/home/arrow.png") no-repeat;
  background-size: cover;
  bottom: 0;
  left: 50%;
  margin-left: -0.62rem;
  animation: myArrowing 0.5s ease-in-out infinite alternate;
}

/*视频播放按钮*/
.page_home .theme_con .btn_v {
  width: 72px;
  height: 65px;
  position: absolute;
  background: url("../img/home/btn_v.png?__rev=3f8413a") no-repeat;
  background-size: cover;
  left: 50%;
  top: 37%;
  margin-left: -36px;
}

.page_home .theme_con .moke_w1920h960 {
  position: absolute;
  width: 1920px;
  height: 960px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* background: red; */
}

/* 主题 end */









/* 彩蛋 */
.active.page_home .clue {
  position: absolute;
}

.active.page_home .clue .role {
  background-size: cover;
  z-index: 4;
}

.active.page_home .clue .role:hover {
  /* filter: brightness(1.1); */
  cursor: pointer;
}

.active.page_home .clue .line {
  position: absolute;
  width: 0;
  transition: all 0.3s ease-in-out;
}

.active.page_home .clue .panel {
  overflow: hidden;
  position: absolute;
  height: 0;
  transition: all 0.3s ease-in-out;
  z-index: 5;
}

.page_home .clue .panel .panel_con {
  line-height: 32px;
  font-size: 18px;
  padding: 34px 32px;
  font-family: 'HYQihei 50S';
  color: #5dedff;
  word-break: break-all;
}

.active.page_home .clue.clicked .panel {
  margin-top: 0;
}


.active.page_home .panel .btn_get {
  display: none;
  width: 178px;
  height: 74px;
  position: absolute;
  top: 240px;
  left: 50%;
  margin-left: -101px;
  background: url("../img/home/btn_get.png?__rev=9f9b7d6") no-repeat;
  background-size: cover;
}

.active.page_home .panel .btn_got {
  display: none;
  width: 178px;
  height: 74px;
  position: absolute;
  top: 240px;
  left: 50%;
  margin-left: -101px;
  background: url("../img/home/btn_got.png?__rev=0a9c88a") no-repeat;
  background-size: cover;
}

.active.page_home .panel .btn_close {
  width: 48px;
  height: 48px;
  right: 0;
  top: 0;
  position: absolute;
  background: url("../img/home/btn_close.png?__rev=6197073") no-repeat;
  background-size: cover;
}

/* 线索1  钟表店 start */
.active.page_home .clue.clue_1 {
  left: 176px;
  top: 646px;
}

.active.page_home .clue .role_1 {
  width: 175px;
  height: 101px;
  background: url("../img/home/clue_1.png?__rev=8fb5ae3") no-repeat;
  background-size: cover;
}

.active.page_home .clue .line_1 {
  left: 153px;
  top: 50px;
  height: 28px;
  background: url("../img/home/clue_1_l.png?__rev=a2e189e") no-repeat;
  background-size: cover;
}

.active.page_home .clue .panel_1 {
  width: 455px;
  top: -171px;
  left: 180px;
  margin-top: 155px;
}

.active.page_home .clue .panel_1 .panel_con {
  width: 425px;
  height: 231px;
  background: url("../img/home/clue_1_p.png?__rev=3468aa5") no-repeat;
  background-size: 100% auto;
}

.active.page_home .clue.clue_1:hover .role_1 {
  background: url("../img/home/hover/clue_1.png?__rev=ddeff95") no-repeat;
  background-size: cover;
}

.active.page_home .clue.clue_1.clicked .line_1 {
  width: 129px;
}

.active.page_home .clue.clue_1.clicked .panel_1 {
  height: 310px;
}

/* 线索1  end */



/* 线索2 圣诞树 start */
.active.page_home .clue.clue_2 {
  left: 320px;
  top: 759px;
}

.active.page_home .clue .role_2 {
  width: 43px;
  height: 88px;
  background: url("../img/home/clue_2.png?__rev=8ec0ae2") no-repeat;
  background-size: cover;
}

.active.page_home .clue .line_2 {
  left: 10px;
  top: 55px;
  height: 28px;
  background: url("../img/home/clue_1_l.png?__rev=a2e189e") no-repeat;
  background-size: cover;
}

.active.page_home .clue .panel_2 {
  width: 455px;
  top: -171px;
  left: 43px;
  margin-top: 155px;
}

.active.page_home .clue .panel_2 .panel_con {
  width: 425px;
  height: 231px;
  background: url("../img/home/clue_1_p.png?__rev=3468aa5") no-repeat;
  background-size: 100% auto;
}

.active.page_home .clue.clue_2:hover .role_2 {
  background: url("../img/home/hover/clue_2.png?__rev=0737b3b") no-repeat;
  background-size: cover;
}

.active.page_home .clue.clue_2.clicked .line_2 {
  width: 129px;
}

.active.page_home .clue.clue_2.clicked .panel_2 {
  height: 310px;
}

/* 线索2  end */



/* 线索3  菲尔  start */
.active.page_home .clue.clue_3 {
  left: 624px;
  top: 852px;
  transition: top 0.2s ease-in-out;
}

.active.page_home .clue .role_3 {
  width: 114px;
  height: 116px;
  background: url("../img/home/clue_3.png?__rev=f77701d") no-repeat;
  background-size: cover;
}

.active.page_home .clue .line_3 {
  left: 2px;
  top: -4px;
  height: 28px;
  background: url("../img/home/clue_1_l.png?__rev=a2e189e") no-repeat;
  background-size: cover;
}

.active.page_home .clue .panel_3 {
  width: 455px;
  top: -197px;
  left: 0;
  margin-top: 144px;
}

.active.page_home .clue .panel_3 .panel_con {
  padding: 22px 32px;
  width: 425px;
  height: 201px;
  background: url("../img/home/clue_3_p.png?__rev=2ca03bd") no-repeat;
  background-size: 100% auto;
}

.active.page_home .clue.clue_3:hover {
  top: 857px;
}

.active.page_home .clue .panel_3 .btn_get,
.active.page_home .clue .panel_3 .btn_got {
  top: 210px;
}

.active.page_home .clue.clue_3.clicked .line_3 {
  width: 129px;
}

.active.page_home .clue.clue_3.clicked .panel_3 {
  height: 288px;
}

/* 线索3  end */



/* 线索4  电玩城  start */
.active.page_home .clue.clue_4 {
  left: 972px;
  top: 457px;
}

.active.page_home .clue .role_4 {
  width: 77px;
  height: 111px;
  background: url("../img/home/clue_4.png?__rev=4f9b735") no-repeat;
  background-size: cover;
}

.active.page_home .clue .line_4 {
  left: 57px;
  top: 73px;
  height: 28px;
  background: url("../img/home/clue_1_l.png?__rev=a2e189e") no-repeat;
  background-size: cover;
}

.active.page_home .clue .panel_4 {
  width: 455px;
  top: -209px;
  left: 73px;
  margin-top: 185px;
}

.active.page_home .clue .panel_4 .panel_con {
  width: 425px;
  height: 290px;
  background: url("../img/home/clue_4_p.png?__rev=98ccd8d") no-repeat;
  background-size: 100% auto;
}

.active.page_home .clue .panel_4 .btn_get,
.active.page_home .clue .panel_4 .btn_got {
  top: 300px;
}

.active.page_home .clue.clue_4:hover .role_4 {
  background: url("../img/home/hover/clue_4.png?__rev=f3c20ff") no-repeat;
  background-size: cover;
}

.active.page_home .clue.clue_4.clicked .line_4 {
  width: 129px;
}

.active.page_home .clue.clue_4.clicked .panel_4 {
  height: 370px;
}

/* 线索4  end */



/* 线索5  外卖车  start */
.active.page_home .clue.clue_5 {
  left: 1302px;
  top: 858px;
}

.active.page_home .clue .role_5 {
  width: 143px;
  height: 124px;
  background: url("../img/home/clue_5.png?__rev=6562e77") no-repeat;
  background-size: cover;
}

.active.page_home .clue .line_5 {
  left: -42px;
  top: 31px;
  height: 28px;
  background: url("../img/home/clue_5_l.png?__rev=0f715d1") no-repeat;
  background-size: cover;
}

.active.page_home .clue .panel_5 {
  width: 455px;
  left: -329px;
  top: -164px;
  margin-top: 144px;
}

.active.page_home .clue .panel_5 .panel_con {
  padding: 22px 32px;
  width: 425px;
  height: 201px;
  background: url("../img/home/clue_3_p.png?__rev=2ca03bd") no-repeat;
  background-size: 100% auto;
}

.active.page_home .clue .panel_5 .btn_get,
.active.page_home .clue .panel_5 .btn_got {
  top: 210px;
}

.active.page_home .clue.clue_5:hover .role_5 {
  background: url("../img/home/hover/clue_5.png?__rev=643cdf0") no-repeat;
  background-size: cover;
}

.active.page_home .clue.clue_5.clicked .line_5 {
  width: 129px;
}

.active.page_home .clue.clue_5.clicked .panel_5 {
  height: 288px;
}

/* 线索5  end */


/* 线索6  金箍棒  start */
.active.page_home .clue.clue_6 {
  left: 1186px;
  top: 257px;
  transition: left 0.2s ease-in-out;
}

.active.page_home .clue .role_6 {
  width: 175px;
  height: 72px;
  background: url("../img/home/clue_6.png?__rev=0b3164e") no-repeat;
  background-size: cover;
}

.active.page_home .clue .line_6 {
  left: 29px;
  top: -3px;
  height: 28px;
  background: url("../img/home/clue_6_l.png?__rev=1a63e29") no-repeat;
  background-size: cover;
}

.active.page_home .clue .panel_6 {
  width: 455px;
  left: -97px;
  top: 18px;
  margin-top: 144px;
}

.active.page_home .clue .panel_6 .panel_con {
  padding: 22px 32px;
  width: 425px;
  height: 201px;
  background: url("../img/home/clue_3_p.png?__rev=2ca03bd") no-repeat;
  background-size: 100% auto;
}

.active.page_home .clue .panel_6 .btn_get,
.active.page_home .clue .panel_6 .btn_got {
  top: 210px;
}

.active.page_home .clue.clue_6:hover {
  left: 1176px;
}

.active.page_home .clue.clue_6.clicked .line_6 {
  width: 129px;
}

.active.page_home .clue.clue_6.clicked .panel_6 {
  height: 288px;
}

/* 线索6  end */


/* 彩蛋搜集进度 start */
.active.page_home .process_wrp {
  position: absolute;
  right: 30px;
  bottom: 170px;
  text-align: center;
  color: #17d3dd;
  font-family: 'HYQihei 50S';
  z-index: 2;
}

.page_home .process_wrp .p_num {
  font-size: 30px;
}

.page_home .process_wrp .p_person {
  font-size: 20px;
}

.active.page_home .process_wrp .p_wrp {
  position: relative;
  width: 78px;
  height: 286px;
  margin: 0 auto;
  background: url("../img/home/process_wrp.png?__rev=84f2892") no-repeat;
  background-size: cover;
}

.active.page_home .process_wrp .p_wrp .p_con {
  position: absolute;
  left: 14px;
  bottom: 23px;
  width: 51px;
  height: 0;
  background: url("../img/home/process_con.png?__rev=7a82281") no-repeat;
  background-size: cover;
  transition: height 0.2s ease-in;
}

/* 彩蛋搜集进度 end */




/* 趣味提示 start */
.active.page_home .interest {
  position: absolute;
}

.active.page_home .interest .i_role {
  background-size: cover;
  z-index: 4;
  background: #000;
  opacity: 0;
}

.active.page_home .interest .i_role:hover {
  cursor: pointer;
}

.active.page_home .interest .i_line {
  position: absolute;
  width: 0;
  transition: all 0.3s ease-in-out;
}

.page_home .interest .i_panel {
  overflow: hidden;
  position: absolute;
  height: 0;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
  z-index: 5;
  font-family: 'HYQihei 50S';
  color: #5dedff;
  word-break: break-all;
}

.active.page_home .interest:hover .i_panel {
  margin-top: 0;
}



/* 趣味1 德兴海味 start */
.active.page_home .interest.interest_1 {
  left: 479px;
  top: 378px;
}

.active.page_home .interest .i_role_1 {
  width: 165px;
  height: 65px;
}

.active.page_home .interest .i_line_1 {
  left: 111px;
  top: 42px;
  height: 28px;
  background: url("../img/home/interest/interest_1_l.png?__rev=95948a1") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_1 {
  width: 343px;
  height: 0;
  line-height: 110px;
  left: 44px;
  top: 62px;
  background: url("../img/home/interest/interest_1_p.png?__rev=310d576") no-repeat;
  background-size: cover;
  margin-top: 55px;
  text-align: center;
}

.active.page_home .interest.interest_1:hover .i_line_1 {
  width: 109px;
}

.active.page_home .interest.interest_1:hover .i_panel_1 {
  height: 110px;
}

/* 趣味1 德兴海味 end */


/* 趣味2 妻百衣 start */
.active.page_home .interest.interest_2 {
  left: 478px;
  top: 447px;
}

.active.page_home .interest .i_role_2 {
  width: 173px;
  height: 52px;
}

.active.page_home .interest .i_line_2 {
  left: 139px;
  top: 1px;
  height: 28px;
  background: url("../img/home/interest/interest_2_l.png?__rev=ec8b335") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_2 {
  width: 393px;
  height: 0;
  line-height: 33px;
  padding: 0 20px;
  left: 81px;
  top: -170px;
  background: url("../img/home/interest/interest_2_p.png?__rev=233491f") no-repeat;
  background-size: cover;
  margin-top: 90px;
}

.active.page_home .interest.interest_2:hover .i_line_2 {
  width: 109px;
}

.active.page_home .interest.interest_2:hover .i_panel_2 {
  height: 180px;
  padding: 38px 20px;
}

/* 趣味2 妻百衣 end */


/* 趣味3 林木家教 start */
.active.page_home .interest.interest_3 {
  left: 693px;
  top: 312px;
}

.active.page_home .interest .i_role_3 {
  width: 74px;
  height: 41px;
}

.active.page_home .interest .i_line_3 {
  left: 45px;
  top: 4px;
  height: 28px;
  background: url("../img/home/interest/interest_1_l.png?__rev=95948a1") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_3 {
  width: 413px;
  height: 0;
  line-height: 110px;
  left: -7px;
  top: 25px;
  background: url("../img/home/interest/interest_3_p.png?__rev=b5e8131") no-repeat;
  background-size: cover;
  margin-top: 55px;
  text-align: center;
}

.active.page_home .interest.interest_3:hover .i_line_3 {
  width: 109px;
}

.active.page_home .interest.interest_3:hover .i_panel_3 {
  height: 110px;
}

/* 趣味3 林木家教 end */


/* 趣味4 猪婆 start */
.active.page_home .interest.interest_4 {
  left: 732px;
  top: 625px;
}

.active.page_home .interest .i_role_4 {
  width: 56px;
  height: 194px;
}

.active.page_home .interest .i_line_4 {
  left: 28px;
  top: 22px;
  height: 28px;
  background: url("../img/home/interest/interest_2_l.png?__rev=ec8b335") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_4 {
  width: 313px;
  height: 0;
  line-height: 33px;
  padding: 0 20px;
  left: -44px;
  top: -109px;
  background: url("../img/home/interest/interest_4_p.png?__rev=283fa1a") no-repeat;
  background-size: cover;
  margin-top: 70px;
}

.active.page_home .interest.interest_4:hover .i_line_4 {
  width: 109px;
}

.active.page_home .interest.interest_4:hover .i_panel_4 {
  height: 140px;
  padding: 38px 20px;
}

/* 趣味4 猪婆 end */


/* 趣味5 位元堂 start */
.active.page_home .interest.interest_5 {
  left: 1024px;
  top: 698px;
}

.active.page_home .interest .i_role_5 {
  width: 156px;
  height: 26px;
}

.active.page_home .interest .i_line_5 {
  left: 83px;
  top: -8px;
  height: 28px;
  background: url("../img/home/interest/interest_2_l.png?__rev=ec8b335") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_5 {
  width: 313px;
  height: 0;
  line-height: 33px;
  padding: 0 20px;
  left: 0;
  top: -139px;
  background: url("../img/home/interest/interest_4_p.png?__rev=283fa1a") no-repeat;
  background-size: cover;
  margin-top: 70px;
}

.active.page_home .interest.interest_5:hover .i_line_5 {
  width: 109px;
}

.active.page_home .interest.interest_5:hover .i_panel_5 {
  height: 140px;
  padding: 38px 20px;
}

/* 趣味5 位元堂 end */


/* 趣味6 人 start */
.active.page_home .interest.interest_6 {
  left: 924px;
  top: 807px;
}

.active.page_home .interest .i_role_6 {
  width: 114px;
  height: 167px;
}

.active.page_home .interest .i_line_6 {
  left: -33px;
  top: 25px;
  height: 28px;
  background: url("../img/home/interest/interest_6_l.png?__rev=d1f9d5e") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_6 {
  width: 353px;
  height: 0;
  line-height: 110px;
  left: -133px;
  top: -77px;
  background: url("../img/home/interest/interest_6_p.png?__rev=8d87b5d") no-repeat;
  background-size: cover;
  margin-top: 55px;
  text-align: center;
}

.active.page_home .interest.interest_6:hover .i_line_6 {
  width: 79px;
}

.active.page_home .interest.interest_6:hover .i_panel_6 {
  height: 110px;
}

/* 趣味6 人 end */


/* 趣味7 伊乐 start */
.active.page_home .interest.interest_7 {
  left: 1233px;
  top: 554px;
}

.active.page_home .interest .i_role_7 {
  opacity: 1;
  width: 36px;
  height: 37px;
  background: url("../img/home/yl.png?__rev=9ccaca3") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_line_7 {
  left: -60px;
  top: -2px;
  height: 28px;
  background: url("../img/home/interest/interest_6_l.png?__rev=d1f9d5e") no-repeat;
  background-size: cover;
}

.active.page_home .interest .i_panel_7 {
  width: 343px;
  height: 0;
  line-height: 110px;
  left: -200px;
  top: -104px;
  background: url("../img/home/interest/interest_1_p.png?__rev=310d576") no-repeat;
  background-size: cover;
  margin-top: 55px;
  text-align: center;
}

.active.page_home .interest.interest_7:hover .i_line_7 {
  width: 79px;
}

.active.page_home .interest.interest_7:hover .i_panel_7 {
  height: 110px;
}

/* js 模拟hover*/
.active.page_home .interest_7.hover .i_line_7 {
  width: 79px;
}

.active.page_home .interest_7.hover .i_panel_7 {
  margin-top: 0;
  height: 110px;
}

/* 趣味7 伊乐 end */
/* 趣味提示 end */

/* 首页部分结束 */


/* 灵魂觉醒 start */
.active.page_juexing .page_inner {
  background: url("../img/juexing/bg.jpg?__rev=3ec3549") no-repeat;
}

.active.page_juexing .title {
  background: url("../img/juexing/title.png?__rev=7ed02f5") no-repeat;
  background-size: cover;
}

.active.page_juexing .role-slide .btn_know {
  width: 0.38rem;
  height: 1.12rem;
  background: url("../img/juexing/btn_know.png?__rev=89b1a4d") no-repeat;
  background-size: cover;
}

.active.page_juexing .role-slide .btn_unopen {
  width: 0.38rem;
  height: 1.12rem;
  background: url("../img/juexing/btn_unopen.png?__rev=153af4d") no-repeat;
  background-size: cover;
  cursor:not-allowed;
}

.active.page_juexing .role-slide1 .r1_bg {
  width: 1114px;
  height: 1114px;
  background: url("../img/juexing/s1_r1_bg.png?__rev=8d7a5e6") no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
}

.active.page_juexing .role-slide1 .r2_bg {
  width: 1098px;
  height: 1131px;
  background: url("../img/juexing/s1_r2_bg.png?__rev=f1ed857") no-repeat;
  background-size: cover;
  right: 0;
  top: 0;
}

.active.page_juexing .role-slide2 .r1_bg {
  width: 1095px;
  height: 1039px;
  background: url("../img/juexing/s2_r1_bg.png?__rev=abbe1da") no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
}

.active.page_juexing .role-slide2 .r2_bg {
  width: 814px;
  height: 1200px;
  background: url("../img/juexing/s2_r2_bg.png?__rev=4d5ec9b") no-repeat;
  background-size: cover;
  right: 0;
  top: 0;
}


.active.page_juexing .role-slide1 .r1_p {
  width: 9.9rem;
  height: 5rem;
  background: url("../img/juexing/s1_r1_p.png?__rev=ce24d29") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin-top: -2.5rem;
  margin-left: -9.9rem;
}

.active.page_juexing .role-slide1 .r2_p {
  width: 9.9rem;
  height: 5rem;
  background: url("../img/juexing/s1_r2_p.png?__rev=8bd677d") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin-top: -1.5rem;
  margin-right: -9.9rem;
}

.active.page_juexing .role-slide2 .r1_p {
  width: 9.9rem;
  height: 5rem;
  background: url("../img/juexing/s2_r1_p.png?__rev=7f895eb") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin-top: -2.5rem;
  margin-left: -9.9rem;
}

.active.page_juexing .role-slide2 .r2_p {
  width: 9.9rem;
  height: 5rem;
  background: url("../img/juexing/s2_r2_p.png?__rev=89b2142") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin-top: -1.5rem;
  margin-right: -9.9rem;
}


.active.page_juexing .role-slide1 .r1_r {
  width: 6.21rem;
  height: 7.94rem;
  background: url("../img/juexing/s1_r1.png?__rev=e030bbd") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin: -3.3rem 0 0 -6.21rem;
}

.active.page_juexing .role-slide1 .r2_r {
  width: 7.93rem;
  height: 7.64rem;
  background: url("../img/juexing/s1_r2.png?__rev=6b47513") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin: -3.2rem -8rem 0 0;
}

.active.page_juexing .role-slide2 .r1_r {
  width: 6.69rem;
  height: 6.42rem;
  background: url("../img/juexing/s2_r1.png?__rev=0998ce6") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin: -3.3rem 0 0 -6.8rem;
}

.active.page_juexing .role-slide2 .r2_r {
  width: 9.96rem;
  height: 9.05rem;
  background: url("../img/juexing/s2_r2.png?__rev=566897b") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin: -3.9rem -9.5rem 0 0;
}

.active.page_juexing .role-slide1 .r1_i {
  width: 1.1rem;
  height: 4.4rem;
  background: url("../img/juexing/s1_r1_i.png?__rev=5e0203a") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin: -2.2rem 0 0 -6.5rem;
}

.active.page_juexing .role-slide1 .r2_i {
  width: 1.1rem;
  height: 4rem;
  background: url("../img/juexing/s1_r2_i.png?__rev=e04d591") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin: -1.3rem -6.4rem 0 0;
}

.active.page_juexing .role-slide2 .r1_i {
  width: 1.1rem;
  height: 4.4rem;
  background: url("../img/juexing/s2_r1_i.png?__rev=3dd5ec8") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin: -2.2rem 0 0 -6.5rem;
}

.active.page_juexing .role-slide2 .r2_i {
  width: 1.1rem;
  height: 4.4rem;
  background: url("../img/juexing/s2_r2_i.png?__rev=10d4a92") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin: -1.3rem -6.4rem 0 0;
}

.active.page_juexing .diaog_wpr {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  display: none;
}

.active.page_juexing .diaog_wpr .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.75;
}

.active.page_juexing .diaog_wpr .dialog {
  width: 7.07rem;
  height: 5.54rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
}

.active.page_juexing .diaog_wpr .btn_close {
  position: absolute;
  left: 99%;
  top: 8%;
  width: 0.66rem;
  height: 0.66rem;
  background: url("../img/more/btn_close.png?__rev=ac6aa37") no-repeat;
  background-size: cover;
}

#juexing_swiper .swiper-button-prev {
  width: 0.68rem;
  height: 0.8rem;
  background: url("../img/juexing/btn_prev.png?__rev=5571155") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin: 0.5rem 0 0 -7.4rem;
}

#juexing_swiper .swiper-button-next {
  width: 0.68rem;
  height: 0.8rem;
  background: url("../img/juexing/btn_next.png?__rev=b4591c5") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin: 0.5rem -7.4rem 0 0;
}

/* 灵魂觉醒 end */


/* 星魂跃动 start */
.active.page_yuedong .page_inner {
  background: url("../img/yuedong/bg.jpg?__rev=82dc544") no-repeat;
}

.active.page_yuedong .title {
  background: url("../img/yuedong/title.png?__rev=f40b0aa") no-repeat;
  background-size: cover;
}

#yuedong_swiper {
  width: 100%;
  max-height: 7.5rem;
  position: absolute;
  top: 50%;
  transform: translateY(-3rem);
}

#yuedong_swiper .swiper-button-prev {
  width: 0.68rem;
  height: 0.8rem;
  background: url("../img/yuedong/btn_prev.png?__rev=9887b33") no-repeat;
  background-size: cover;
  left: 50%;
  top: 50%;
  margin: -0.4rem 0 0 -7.4rem;
}

#yuedong_swiper .swiper-button-next {
  width: 0.68rem;
  height: 0.8rem;
  background: url("../img/yuedong/btn_next.png?__rev=f507c0a") no-repeat;
  background-size: cover;
  right: 50%;
  top: 50%;
  margin: -0.4rem -7.4rem 0 0;
}

.active.page_yuedong .activity-slide img {
  width: 12.64rem;
  margin: 0 auto;
  display: block;
}

/* 星魂跃动 end */



/* 星魂传说 start */
.active.page_chuanshuo .page_inner {
  background: url("../img/chuanshuo/bg.jpg?__rev=aa4d12e") no-repeat;
}

.active.page_chuanshuo .title {
  background: url("../img/chuanshuo/title.png?__rev=e74f38c") no-repeat;
  background-size: cover;
}

.active.page_chuanshuo .normal {
  width: 5rem;
  height: 6.378rem;
  position: absolute;
}

.active.page_chuanshuo .normal_left {
  background: url("../img/chuanshuo/normal_an.png?__rev=6ac38ea") no-repeat;
  background-size: cover;
  right: 52%;
  top: 50%;
  margin-top: -2.7rem;
}

.active.page_chuanshuo .normal_right {
  background: url("../img/chuanshuo/normal_ming.png?__rev=0025242") no-repeat;
  background-size: cover;
  left: 52%;
  top: 50%;
  margin-top: -2.7rem;
}

.active.page_chuanshuo .btn_m_look {
  width: 0.74rem;
  height: 2rem;
  background: url("../img/chuanshuo/btn_m_look.png?__rev=c9f2245") no-repeat;
  background-size: contain;
  position: absolute;
}

.active.page_chuanshuo .btn_an_look {
  width: 0.74rem;
  height: 2rem;
  background: url("../img/chuanshuo/btn_an_look.png?__rev=6cb6f6e") no-repeat;
  background-size: contain;
  position: absolute;
}

.active.page_chuanshuo .story .red_wpr {
  width: 1110px;
  height: 100%;
  transform: translateX(-50%);
  position: absolute;
}

.active.page_chuanshuo .story .another {
  width: 5rem;
  height: 6.378rem;
  position: absolute;
}

.active.page_chuanshuo .story .btn_all {
  width: 3.15rem;
  height: 0.9rem;
  background: url("../img/chuanshuo/btn_all.png?__rev=241f2a6") no-repeat;
  background-size: cover;
  position: absolute;
}

.active.page_chuanshuo .story .txt {
  width: 8.7rem;
  height: 4.8rem;
  left: 0;
  position: absolute;
  top:1rem;
  overflow: hidden;
}
.active.page_chuanshuo .story .txt img {
  width: 8.7rem;
  height: 15.74rem;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(5rem);
}.active.page_chuanshuo .story .txt img.rollUp {
  animation: rollUp 25s linear infinite;
}.active.page_chuanshuo .story .txt img.rollUpIE9 {
  transform: translateY(0);
}

/*查看明线剧情*/
.active.page_chuanshuo .story.story_ming .red_wpr {
  left: 130%;
  background: url("../img/chuanshuo/right.jpg?__rev=6ed3d74");
  background-size: 100% 100%;
}

.active.page_chuanshuo .story.story_ming .another {
  display: none;
  background: url("../img/chuanshuo/an_left.png?__rev=bdacc43") no-repeat;
  background-size: cover;
  right: 62%;
  top: 50%;
  margin-top: -2.7rem;
}

.active.page_chuanshuo .story.story_ming .con_wpr {
  width: 8.7rem;
  height: 4.8rem;
  left: 12%;
  position: absolute;
  top: 50%;
  margin-top: -2.8rem;
}

.active.page_chuanshuo .story.story_ming .biaoti {
  width: 8.7rem;
  height: 0.52rem;
  position: absolute;
  background: url("../img/chuanshuo/ming_title.png?__rev=728a64f") no-repeat;
  background-size: cover;
  left:0;
  top:0;
  transition: transform 6s linear;
  transform: translateY(5rem);
}
.active.page_chuanshuo .story.story_ming .biaoti.rollUp{
  transform: translateY(0);
}



/*查看暗线剧情*/
.active.page_chuanshuo .story.story_an .red_wpr {
  left: -30%;
  background: url("../img/chuanshuo/left.jpg?__rev=3e8368c");
  background-size: 100% 100%;
}

.active.page_chuanshuo .story.story_an .another {
  display: none;
  background: url("../img/chuanshuo/ming_right.png?__rev=e8df475") no-repeat;
  background-size: cover;
  left: 62%;
  top: 50%;
  margin-top: -2.7rem;
}

.active.page_chuanshuo .story.story_an .con_wpr {
  width: 8.7rem;
  height: 4.8rem;
  right: 12%;
  position: absolute;
  top: 50%;
  margin-top: -2.795rem;
}

.active.page_chuanshuo .story.story_an .biaoti {
  width: 8.7rem;
  height: 0.52rem;
  position: absolute;
  background: url("../img/chuanshuo/an_title.png?__rev=107a2d5") no-repeat;
  background-size: cover;
  left: 0;
  top: 0;
  transform: translateY(5rem);
  transition: transform 6s linear;
}.active.page_chuanshuo .story.story_an .biaoti.rollUp{
  transform: translateY(0);
}


/* 星魂传说 end */


/* 更多活动 start */
.active.page_more .page_inner {
  background: url("../img/more/bg.jpg?__rev=2243d0b") no-repeat;
}

.active.page_more .title {
  background: url("../img/more/title.png?__rev=8438cde") no-repeat;
  background-size: cover;
}

.active.page_more .tree {
  width: 11.2rem;
  height: 10.92rem;
  background: url("../img/more/tree.png?__rev=66affbc") no-repeat;
  background-size: cover;
  position: absolute;
  bottom: -1.2rem;
  left: 50%;
  margin: 0 0 0 -5.79rem;
}

.active.page_more .btn_plate1 {
  width: 1.08rem;
  height: 2.59rem;
  background: url("../img/more/1.png?__rev=70423dd") no-repeat;
  background-size: cover;
  left: 1.5rem;
  top: 4.6rem;
}

.active.page_more .btn_plate2 {
  width: 1.08rem;
  height: 2.89rem;
  background: url("../img/more/2.png?__rev=50b96d8") no-repeat;
  background-size: cover;
  left: 3.6rem;
  top: 3.6rem;
}

.active.page_more .btn_plate3 {
  width: 1.08rem;
  height: 2.59rem;
  background: url("../img/more/3.png?__rev=9028a76") no-repeat;
  background-size: cover;
  left: 5.2rem;
  top: 2.8rem;
}

.active.page_more .btn_plate4 {
  width: 1.08rem;
  height: 2.90rem;
  background: url("../img/more/4.png?__rev=d1a3107") no-repeat;
  background-size: cover;
  left: 6.8rem;
  top: 3.5rem;
}

.active.page_more .btn_plate5 {
  width: 1.08rem;
  height: 3.09rem;
  background: url("../img/more/5.png?__rev=0668a52") no-repeat;
  background-size: cover;
  left: 9rem;
  top: 4.2rem;
}

.active.page_more .diaog_wpr {
  width: 100%;
  height: 100%;
  display: none;
}

.active.page_more .diaog_wpr .mask {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000;
  opacity: 0.75;
}

.active.page_more .diaog_wpr .dialog {
  width: 8.73rem;
  height: 5.79rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-size: cover;
}

.active.page_more .diaog_wpr .btn_close {
  position: absolute;
  left: 97%;
  top: 8%;
  width: 0.66rem;
  height: 0.66rem;
  background: url("../img/more/btn_close.png?__rev=ac6aa37") no-repeat;
  background-size: cover;
}

.page_more .info {
  position: absolute;
  bottom: 0.2rem;
  right: 0.05rem;
  font-size: 14px;
  font-family: 'HYQihei 50S';
  color: #fff;
  text-align: center;
  cursor: pointer;
}

/* 更多活动 end */




/*视频*/
.layer_video {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, .8);
  display: none;
}

.layer_video .video_layer {
  position: absolute;
  width: 9.4rem;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.layer_video .video_layer iframe {
  width: 9.4rem;
  height: 5.6rem;
}

.layer_video .btn_close_video {
  left: 9.5rem;
  top: -0.3rem;
  width: 0.66rem;
  height: 0.66rem;
  background: url("../img/more/btn_close.png?__rev=ac6aa37") no-repeat;
  background-size: cover;
}