@charset "UTF-8";
@font-face {
  font-family: "number";
  src: url("/assets/fonts/Farlight84_Etc_Bold.woff2") format("woff2");
}
/**统一设置*/
body {
  width: 100vw;
  background-color: #999;
}
.wrapper {
  position: relative;
  width: 100%;
}
.wrapper-container {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  z-index: 2;
}
.pop-test-tip {
  display: none;
}
/** 背景图片 S*/
.bg1 {
  width: 7.5rem;
  height:14.39rem;
  background: url(/assets/images/m/bg1_m.png) no-repeat;
  background-size: 100% 100%;
  background-color: #7843dc;
}
.bg2 {
  width: 7.5rem;
  height: 10.08rem;
  background: url(/assets/images/m/bg2.jpg) no-repeat;
  background-size: 100% 100%;
  background-color: #7843dc;
}
.bg3 {
  width: 7.5rem;
  height:13.03rem;
  background: url(/assets/images/m/bg3.jpg) no-repeat;
  background-size: 100% 100%;
  background-color: #7843dc;
}
.bg4 {
  width: 7.5rem;
  height: 20.13rem;
  background: url(/assets/images/m/bg4.jpg) no-repeat;
  background-size: 100% 100%;
  background-color: #7843dc;
}
/** 背景图片 E */
.slogan-content{
  height:12.2rem;
}

.slogan-content .btns-group{
  position:relative;
  width:6.12rem;
  height:1.43rem;
  background-image: url(/assets/images/m/index-btns2.png);
  background-size:100% 100%;
  margin:0 auto;
}

.official .slogan-content .btns-group{
  background-image: url(/assets/images/m/index-btns-of.png);
}
.official .slogan-content .btns-group .link-1{
  display:none;
}
.official .slogan-content .btns-group .link-2{
  top:0;
  bottom:auto;
  left:1.56rem;
}
.equip-swiper-container1{
  height:6.5rem;
}
.slogan-content .btns-group .link-1{
  position:absolute;
  width:3rem;
  height:.85rem;
  bottom:0;
  left:0;
}
.slogan-content .btns-group .link-2{
  position:absolute;
  width:3rem;
  height:.85rem;
  bottom:0;
  right:0;
  font-family:"84font-bold";
  text-align:center;
  line-height:.85rem;
  color:#202121;
}

.slogan {
  position: relative;
  top: -0.14rem;
  width: 7.11rem;
  height: 3.22rem;
  background: url(/assets/images/m/slogan.png) no-repeat;
  background-size: 100% auto;
  margin:.4rem auto 0;
}
.btn-booking {
  display: block;
  margin: 0 auto 0.15rem;
  width: 4.13rem;
  height: 1.09rem;
  background: url(/assets/images/m/btn-order.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-weight: bold;
}
.btn-test {
  display: block;
  margin: 0 auto;
  width: 4.13rem;
  height: 0.79rem;
  line-height: 0.79rem;
  background: url(/assets/images/m/btn-signup.png) no-repeat;
  background-size: 100% 100%;
  text-align: center;
  font-weight: bold;
  color: #202121;
  font-size: 0.3rem;
}
.btn-booking .booking-tip {
  display: block;
  color: #f3f3f3;
  font-size: 0.18rem;
  line-height: 0.3rem;
}
.btn-booking .booking-text {
  display: block;
  color: #202121;
  font-size: 0.3rem;
  line-height: 0.75rem;
}
.title h2 {
  font-size:.36rem;
  font-family:"84font-bold";
  color:#fff;
  font-style: italic;
}
/** 预约奖励 S */
.common-content {
  padding: 0 0.4rem;
  box-sizing: border-box;
}
.award-content {
  position: relative;
  margin-top: 4.5rem;
  padding-top: 2rem;
}
.award-content .title {
  width: 2.04rem;
  height: 0.33rem;
  background: url(/assets/images/m/order-award-title.png) no-repeat;
  background-size: 100% 100%;
}
.progress-container {
  position: absolute;
  left: 50%;
  margin-left: -0.94rem;
  top: 3.9rem;
  width: 1.88rem;
  height: 9.68rem;
  background: url(/assets/images/m/progress.png) no-repeat;
  background-size: 100% 100%;
}
.progress-active {
  position: relative;
  width: 1.88rem;
  background: url(/assets/images/m/progress-active.png) no-repeat;
  background-size: 100% auto;
}
.progress-active .arrow {
  position: absolute;
  right: 0.6rem;
  bottom: 0;
  width: 0.08rem;
  height: 0.13rem;
  background: url(/assets/images/m/progress-arrow.png) no-repeat;
  background-size: 100% 100%;
}
.award-list {
  width: 100%;
  height: 12rem;
  position: relative;
  padding-left: 0.4rem;
  padding-top: 2.4rem;
  box-sizing: border-box;
}
.award-list li {
  position: relative;
  width: 1.41rem;
  text-align: center;
}
.award-list img {
  display: block;
  width: 1.41rem;
  height: 1.41rem;
  background-size: 100% 100%;
  margin-bottom: 0.15rem;
}
.award-list .money {
  display: block;
  width: 1.41rem;
  font-size: 0.3rem;
  text-align: center;
  color: #fff;
  margin-bottom: 0.06rem;
  font-weight: 700;
}
.award-list .label {
  display: block;
  font-size: 0.24rem;
  color: #fff;
  text-align: center;
  width: 1.41rem;
  margin-bottom: 0.45rem;
}
.award-list .line {
  position: absolute;
  top: 0.61rem;
  display: block;
  width: 0.68rem;
  height: 0.07rem;
  background: #6b6c70;
  border-radius: 0.05rem;
}
.award-list .award1 .line, .award-list .award7 .line {
  display: none;
}
.award-list .award1 {
  position: absolute;
  right: 0.2rem;
  top: -0.52rem;
  width: 2.18rem;
}
.award-list .award1 .label {
  display: block;
  width: 1.64rem;
  margin-left: auto;
  margin-bottom: 0.17rem;
}
.award-list .award1 .order-send {
  display: block;
  width: 1.64rem;
  height: 0.54rem;
  background: #fff;
  border-radius: 0.05rem;
  color: #202121;
  font-weight: 700;
  font-size: 0.3rem;
  text-align: center;
  line-height: 0.54rem;
  margin-left: auto;
}
.award-list .award1 img {
  display: block;
  position: relative;
  right: 0.1rem;
  width: 2.18rem;
  height: 2.62rem;
}
.award-list .award7 {
  position: absolute;
  width: 4.79rem;
  top: 9rem;
  left: 0.8rem;
}
.award-list .award7 img {
  display: block;
  position: relative;
  top: 0.15rem;
  right: 0.1rem;
  width: 5.25rem;
  height: 2.54rem;
}
.award-list .award7 .money {
  position: absolute;
  right: -1rem;
  top: 2.1rem;
}
.award-list .award7 .label {
  position: absolute;
  right: -0.8rem;
  top: 2.5rem;
  white-space: nowrap;
}
.award-list .award2 .line, .award-list .award4 .line, .award-list .award6 .line {
  left: 1.78rem;
}
.award-list .award3 .line, .award-list .award5 .line {
  right: 1.78rem;
}
.award-list .award3 {
  position: absolute;
  top: 3.68rem;
  right: 0.37rem;
}
.award-list .award4 {
  top: -0.08rem;
}
.award-list .award5 {
  position: absolute;
  top: 6.3rem;
  right: 0.37rem;
}
.award-list .award6 {
  top: -0.08rem;
}
.award-list .award2 .label {
  margin-bottom: 0.5rem;
}
.award-list .award4 .label {
  margin-bottom: 0.5rem;
}
.order-tip {
  line-height: 0.5rem;
  font-size: 0.24rem;
  color: #fff;
  font-weight: 700;
}
.order-people {
  position: absolute;
  top: 2.85rem;
  color: #fff;
  font-size: 0.24rem;
}
.order-people i {
  font-style: italic;
  display: block;
  font-size: 0.72rem;
  font-family: "number";
  margin-bottom: 0.14rem;
}
/** 预约奖励 E */
/** 远光装备 S*/
.equip-top {
  padding-top: 1.2rem;
  display: flex;
  justify-content: space-between;
}
.equip-type-con {
  height: 7.6rem;
}
.equip-content{
  height:9.6rem;
}
.equip-content .title {
  display:inline-flex;
  /* width: 2.56rem; */
  height: 0.35rem;
  padding:0 .3rem;
  margin-left: auto;
  background: url(/assets/images/m/equip-title.png) no-repeat;
  background-size: auto 100%;
}
.equip-select {
  display: none;
}
.custom-select {
  display: inline-flex;
  position: relative;
  width: 2.37rem;
}
.custom-select .custom-arrow {
  position: relative;
  width: 2.37rem;
  height: 0.53rem;
  line-height: 0.53rem;
  padding: 0 0.3rem;
  background: url(/assets/images/m/btn-select.png) no-repeat;
  background-size: 100% 100%;
  border: 0;
  box-sizing: border-box;
  font-size: 0.24rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}
.custom-select .select-items {
  display: none;
  z-index: 10;
  padding: 0.1rem;
  border-radius: 0.1rem;
  position: absolute;
  top: 0.6rem;
  background-color: #222;
  color: #fff;
  font-size: 0.24rem;
  width: 2.37rem;
}
.custom-select .select-items .select-item {
  width: 100%;
  line-height: 0.5rem;
  text-align: center;
}
.equip-swiper1 {
  width: 100%;
  height: auto;
  margin-bottom: 0.6rem;
}
.equip-swiper1 .swiper-slide {
  width: 100%;
  height: auto;
  overflow: hidden;
}
.equip-swiper1 .swiper-slide img {
  opacity: 0;
  transform: translateX(-5%);
  transition: transform 0.5s, opacity 0.3s;
}
.equip-swiper1 .swiper-slide .feature {
  opacity: 0;
  transform: translateX(3%);
  transition: transform 0.5s, opacity 0.3s;
  margin-bottom: 0.2rem;
}
.equip-swiper1 .swiper-slide .name {
  margin-top:.2rem;
  opacity: 0;
  transform: translateX(5%);
  transition: transform 0.4s, opacity 0.3s;
}
.equip-swiper1 .swiper-slide .name.size-s {
  font-size: 0.7rem;
}
.equip-swiper1 .swiper-slide .name.size-xs {
  font-size: 0.8rem;
}
.equip-swiper1 .swiper-slide .name.size-xxs {
  font-size: 0.75rem;
}
.equip-swiper1 .swiper-slide .praise {
  opacity: 0.1;
  transform: translateX(8%);
  transition: transform 0.3s, opacity 0.3s;
  margin-top: 0.2rem;
}
.equip-swiper1 .swiper-slide.on-show img, .equip-swiper1 .swiper-slide.on-show .feature, .equip-swiper1 .swiper-slide.on-show .name, .equip-swiper1 .swiper-slide.on-show .praise {
  transform: translateX(0);
  opacity: 1;
}
.equip-swiper1 img {
  display: block;
  width: 6.67rem;
  height: 3.12rem;
  background-size: 100% 100%;
}
#equiqSwiper2 img {
  height: 4.16rem;
}
#equiqSwiper2{
  margin-top:-.7rem;
}
.equip-swiper1 .feature, .equip-swiper1 .praise {
  text-align: right;
  font-size: 0.24rem;
  font-weight: bold;
  color: #fff;
  line-height:.32rem;

}
.equip-swiper1 .name {
  text-align: right;
  font-size:.8rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.1rem;
  font-family: "84font-regular";
}
.equip-swiper-container2 {
  position: relative;
}
.equip-swiper2 {
  width: 5.45rem;
  margin: 0 auto;
  overflow: hidden;
}
.equip-swiper2 .swiper-wrapper {
  width: 5.45rem;
  margin: 0 auto;
}
.equip-swiper2 .swiper-slide {
  position: relative;
  width: 1.65rem;
  height: 1.35rem;
}
.equip-swiper2 .origin {
  width: 1.65rem;
  height: 1.04rem;
  background: #532b99;
  border-radius: 0.08rem;
  position: absolute;
  top: 0;
  left: 0.07rem;
  z-index: 4;
}
.equip-swiper2 .active {
  position: absolute;
  left: 0.07rem;
  top: 0;
  z-index: 1;
  opacity: 0;
  width: 1.65rem;
  height: 1.35rem;
  background: url(/assets/images/m/role-selected.png) no-repeat;
  background-size: 100% 100%;
}
.equip-swiper2 .active::after {
  content: "";
  position: absolute;
  border: 0.05rem solid #cbff3f;
  width: 1.65rem;
  height: 1.04rem;
  border-radius: 0.08rem;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.equip-swiper2 .swiper-slide img {
  width: 100%;
}
.equip-swiper2 .swiper-slide-thumb-active .origin {
  background-color: transparent;
}
.equip-swiper2 .swiper-slide-thumb-active .origin img {
  filter: invert(100%);
}
.equip-swiper2 .swiper-slide-thumb-active .active {
  opacity: 1;
}
.equip-swiper-container2 .swiper-button-prev {
  position: absolute;
  margin-top: 0;
  left: 0;
  top: 0;
  width: 0.53rem;
  height: 1.04rem;
  background: url(/assets/images/m/btn-next.png) no-repeat;
  background-size: 100% 100%;
  transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
}
.equip-swiper-container2 .swiper-button-prev::after {
  display: none;
}
.equip-swiper-container2 .swiper-button-next {
  position: absolute;
  margin-top: 0;
  right: 0;
  top: 0;
  width: 0.53rem;
  height: 1.04rem;
  background: url(/assets/images/m/btn-next.png) no-repeat;
  background-size: 100% 100%;
}
.equip-swiper-container2 .swiper-button-next::after {
  display: none;
}
.equip-swiper-container2 .equip-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1rem;
  border-radius: 0.05rem;
  background: #926de4;
}
/** 远光装备 E*/
/** 英雄 S*/
.hero-content .title {
  display:inline-flex;
  /* width: 2.07rem; */
  height: 0.33rem;
  padding-right:.5rem;
  background: url(/assets/images/m/hero-title.png) no-repeat;
  background-size: auto 100%;
  background-position:100% 0;
  margin: 1.2rem 0 0;
}
.hero-swiper-container1 {
  margin: 0 -0.4rem;
  height: 10rem;
  margin-bottom: 0.15rem;
  overflow-y: hidden;
}
.hero-swiper1 {
  padding-top: 3.5rem;
}
.hero-swiper1 .swiper-slide {
  transition: opacity 0.3s;
}
.hero-swiper1 .on-hide {
  opacity: 0.2;
}
.hero-swiper1 .hero-item {
  position: relative;
  height: 7rem;
  overflow: hidden;
}
.hero-swiper1 .hero-item .hero-info {
  z-index: 5;
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 90vw;
  left: 50%;
  top: -3rem;
  transform: translateX(-50%);
  opacity: 0;
}
.hero-swiper1 .hero-item .hero-img {
  height: 7rem;
  transition: transform 0.2s;
  transform: scale(0.73);
}
.hero-swiper1 .hero-item .hero-img img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 7rem;
}
.hero-swiper1 .hero-item .hero-img img.front {
  z-index: 5;
  opacity: 0;
  transition: opacity 0.8s;
}
.hero-swiper1 .swiper-slide-active {
  z-index: 10;
  overflow: visible;
}
.hero-swiper1 .swiper-slide-active .hero-img {
  position: relative;
  top: 1.3rem;
  transform: scale(2);
}
.hero-swiper1 .swiper-slide-active .hero-info {
  opacity: 1;
}
.hero-swiper1 .swiper-slide-active .hero-img img.front {
  opacity: 1;
}
.hero-swiper1 .label {
  display: inline-flex;
  font-size: 0.3rem;
  font-weight: bold;
  color: #fff;
  padding-top: 0.4rem;
  margin-bottom: 0.2rem;
}
.hero-swiper1 .name {
  display: inline-flex;
  font-size: 0.5rem;
  /* font-weight: bold; */
  color: #fff;
  margin-bottom: 0.3rem;
  align-items: flex-end;
  font-family:"number";
  position:relative;
  top:1rem;
}
.hero-swiper1 .name.size-s {
  /* font-size: 0.6rem; */
}
.hero-swiper1 .name .hero-icon {
  position: relative;
  /* bottom: 0.1rem; */
  width: 0.5rem;
  height: 0.41rem;
  background-size: 90% auto;
  background-position: center;
  margin-left: 0.15rem;
  border-radius: 0.05rem;
  background-color: #fff;
}
.hero-swiper1 .name .hero-icon.type-zc {
  background-image: url(/assets/images/heros/icon-type-zc.png);
}
.hero-swiper1 .name .hero-icon.type-zy {
  background-image: url(/assets/images/heros/icon-type-zy.png);
}
.hero-swiper1 .name .hero-icon.type-yj {
  background-image: url(/assets/images/heros/icon-type-yj.png);
}
.hero-swiper1 .name .hero-icon.type-gj {
  background-image: url(/assets/images/heros/icon-type-gj.png);
}
.hero-swiper1 .name .hero-icon.type-zb {
  background-image: url(/assets/images/heros/icon-type-zb.png);
}
.hero-swiper1 .name .hero-icon.type-fy {
  background-image: url(/assets/images/heros/icon-type-fy.png);
}
.hero-swiper1 .features {
  position: absolute;
  text-align: right;
  right: 0;
  top: 0;
}
.hero-image {
  width: 7.24rem;
  height: 7.18rem;
}
.hero-swiper1 .feature-desc {
  color: #fff;
  opacity: 0.7;
  font-size: 0.24rem;
  font-weight: bold;
}
.hero-swiper1 .feature-images{
  display: flex;
  justify-content:flex-end;
}
.hero-swiper1 .feature-tv {
  display: flex;
  color: #fff;
  font-size: 0.3rem;
  font-weight: bold;
  line-height: 0.5rem;
  margin-top: 0.1rem;
  align-items: center;
  justify-content: end;
}
.hero-swiper1 .feature-tv .tv-icon {
  display: flex;
  align-items: center;
  margin-right: 0.1rem;
  display:none;
}
.hero-swiper1 .feature-tv .tv-icon img {
  height: 0.36rem;
}
.hero-swiper1 .feature-tv .tv-label {
  display: flex;
  font-size: 0.36rem;
  line-height: 0.36rem;
}
.hero-swiper1 .feature-pic {
  display: inline-flex;
  width: 1.24rem;
  height: 0.71rem;
  margin-left: 0.05rem;
  border-radius: 0.08rem;
  background: #6b6c70;
  margin-top: 0.17rem;
  cursor: pointer;
}
.hero-swiper1 .feature-pic img {
  height: 100%;
  display: block;
  margin: 0 auto;
}
.hero-swiper1 .feature-pic.active {
  background: url(/assets/images/m/role-feature-bg.png) no-repeat;
  background-size: 100% 100%;
}
.hero-swiper-container2 {
  position: relative;
}
.hero-swiper-container2 .swiper-button-prev {
  position: absolute;
  left: 0;
  top: 0.44rem;
  width: 0.53rem;
  height: 1.04rem;
  background: url(/assets/images/m/btn-next2.png) no-repeat;
  background-size: 100% 100%;
  transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  z-index: 2;
}
.hero-swiper-container2 .swiper-button-prev::after {
  display: none;
}
.hero-swiper-container2 .swiper-button-next {
  position: absolute;
  right: 0;
  top: 0.44rem;
  width: 0.53rem;
  height: 1.04rem;
  background: url(/assets/images/m/btn-next2.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2;
}
.hero-swiper-container2 .swiper-button-next::after {
  display: none;
}
.hero-swiper2 {
  width: 5.45rem;
  margin: 0 auto;
  position:relative;
  left:0.06rem;
}
.hero-swiper2 .swiper-slide {
  position: relative;
  width: 1.65rem;
  height: 1.35rem;
}
.hero-swiper2 .swiper-slide > div {
  width: 1.65rem;
  height: 1.04rem;
  background: #2d2f34;
  border-radius: 0.08rem;
  position: relative;
}
.hero-swiper2 .swiper-slide > div img {
  position: absolute;
  width: 1.65rem;
  height: 1.04rem;
  border-radius: 0.08rem;
}
.hero-swiper2 .swiper-slide-thumb-active > div {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 1.65rem;
  height: 1.35rem;
  background: url(/assets/images/m/role-selected.png) no-repeat;
  background-size: 100% 100%;
}
.hero-swiper2 .swiper-slide-thumb-active > div::after {
  content: "";
  position: absolute;
  border: 0.05rem solid #cbff3f;
  width: 1.65rem;
  height: 1.04rem;
  border-radius: 0.08rem;
  top: 0;
  left: 0;
  box-sizing: border-box;
}
.hero-swiper-container2 .hero-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0.1rem;
  border-radius: 0.05rem;
  background: #6b6c70;
}
/** 英雄 E*/
/** 游戏特色 S*/
.special-content {
  padding-top: 1.8rem;
}
.special-content .title {
  /* width: 1.99rem; */
  display:inline-flex;
  height: 0.33rem;
  padding:0 .3rem;
  margin-left: auto;
  background: url(/assets/images/m/special-title.png) no-repeat;
  background-size:auto 100%;

}
.special-title{
  display:flex;
  justify-content: flex-end;
  margin-bottom:-0.2rem;
}
.special-swiper-container {
  position: relative;
  width: 6.71rem;
  height: 5.08rem;
  z-index: 1;
  box-sizing: border-box;
  margin: 0 auto;
}
.special-swiper-container::after {
  content: "";
  width: 6.71rem;
  height: 5.08rem;
  background: url(/assets/images/m/special-bg.png) no-repeat;
  background-size: 100% 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
.special-swiper {
  width: 6.71rem;
  height: 4.44rem;
  border-radius: 0.2rem;
  overflow: hidden;
}
.special-swiper img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.05rem auto;
}
.special-swiper-num {
  width: 0.8rem;
  text-align: center;
  line-height: 0.55rem;
  color: #6a39c0;
  font-size: 0.48rem;
  font-weight: bold;
  position: relative;
  z-index: 2;
  font-family: "number";
}
.special-swiper-container .swiper-button-prev {
  position: absolute;
  left: 0.1rem;
  top: 2.7rem;
  width: 0.23rem;
  height: 0.38rem;
  background: url(/assets/images/m/special-left.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2;
}
.special-swiper-container .swiper-button-prev::after {
  display: none;
}
.special-swiper-container .swiper-button-next {
  position: absolute;
  right: 0.1rem;
  width: 0.23rem;
  height: 0.38rem;
  top: 2.7rem;
  background: url(/assets/images/m/special-right.png) no-repeat;
  background-size: 100% 100%;
  z-index: 2;
}
.special-swiper-container .swiper-button-next::after {
  display: none;
}
.special-swiper-container .swiper-pagination {
  width: 6.71rem;
  height: 0.1rem;
  display: flex;
  justify-content: space-between;
  margin: 0.3rem auto 0.56rem;
  position: absolute;
  top: 5.2rem;
  left: 0;
}
.special-swiper-container .swiper-pagination span {
  width: 1.26rem;
  height: 0.1rem;
  background-color: rgba(255, 255, 255, 0.4);
  opacity: 1;
  border-radius: 0.1rem;
}
.special-swiper-container .swiper-pagination span.swiper-pagination-bullet-active {
  background-color: #cbff3f;
}
.special-role {
  position: relative;
  width: 100%;
  height: 3rem;
  margin-top: 0.1rem;
}
.special-banner {
  position: absolute;
  right: -.4rem;
  overflow: hidden;
  top: 0;
  width: 5rem;
  height: 4.7rem;
  z-index: 1;
}
.special-role-tip {
  font-size: 0.24rem;
  color: #fff;
}
.special-role-title {
  font-family:"84font-bold";
  text-transform: uppercase;
  position: absolute;
  left: 0;
  font-size: .35rem;
  font-weight: 700;
  color: #fff;
  line-height: .65rem;
  margin-bottom: .2rem;
  padding-top: 1.2rem;
  z-index:2;
  width:3.5rem;
}
.special-banner img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    right: -.3rem;
}
/** 游戏特色 E*/
/** 情报 S */
.info-content {
  padding-top:1.2rem;
}
.info-content .title {
  display:inline-flex;
  /* width: 2.12rem; */
  padding-right:.5rem;
  height: 0.33rem;
  background: url(/assets/images/m/info-title.png) no-repeat;
  background-size: auto 100%;
  background-position: 100% 0;
  margin-bottom: 1.33rem;
  position:relative;
  top:.4rem;
}
.info-swiper-container {
  width: 6.71rem;
  height: 5.54rem;
  padding-bottom: 0.2rem;
  background-size: cover;
  background-position: 0 -0.54rem;
  border-radius: 0.1rem;
  position: relative;
}
.info-swiper-container .swiper-wrapper {
  width: 6.71rem;
  height: 5.54rem;
  border-radius: 0.2rem;
}
.info-swiper {
  width: 6.71rem;
  height: auto;
  position: relative;
}
.info-swiper .img-wrapper {
  width: 6.71rem;
  height: 3.68rem;
  border: 0.08rem solid #ccff40;
  border-radius: 0.2rem;
  overflow: hidden;
  margin-bottom: 0.3rem;
}
.info-swiper .img-wrapper img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.info-swiper .swiper-slice {
  border-radius: 0.2rem;
}
.info-swiper-container .tag-desc {
  display: flex;
  color: #fff;
  font-size: 0.24rem;
  line-height: 0.33rem;
}
.info-swiper-container .tag-desc .date {
  font-size: 0.3rem;
  display: inline-flex;
}
.info-swiper-container .tag-desc .tag {
  display: inline-flex;
  width: 1rem;
  line-height: 0.33rem;
  height: 0.33rem;
  background: #ccff40;
  border-radius: 0.05rem;
  text-align: center;
  font-size: 0.18rem;
  color: #202121;
  margin-left: 0.26rem;
  justify-content: center;
}
.info-swiper-container .desc {
  color: #fff;
  font-size: 0.3rem;
  line-height: 0.6rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.btn-info-more, .btn-normal {
  display: block;
  margin: 0.5rem auto;
  width: 4.55rem;
  height: 0.76rem;
  background: url(/assets/images/m/btn-normal.png) no-repeat;
  background-size: 100% 100%;
  color: #202121;
  font-size: 0.3rem;
  line-height: 0.76rem;
  text-align: center;
  font-style: italic;
  font-weight: 700;
}
.info-swiper-pagination {
  width: 6.71rem !important;
  height: 0.08rem !important;
  display: flex;
  top: 5.4rem !important;
  left: 0 !important;
  border-radius: 0.06rem;
}
.info-swiper-pagination .swiper-pagination-bullet {
  flex: 1;
  height: 0.1rem;
  background: #fff;
  border-radius: 0.12rem;
  top: -0.02rem;
  position: relative;
  opacity: 0.2;
}
.info-swiper-pagination .swiper-pagination-bullet-active {
  opacity: 1;
  background-color: #c7fd43;
}
/** 情报 E */
/* pop */
.bodyovh {
  height: 100vh;
  overflow: hidden;
}
.pop {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transform: translateZ(0);
}
.pop-cont {
  position: absolute;
  width: 6.94rem;
  height: 10.58rem;
  background: url(/assets/images/m/pop-bg1.png) no-repeat;
  background-size: 100% 100%;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  color: #fff;
  text-align: center;
}
.pop-close {
  width: 1.16rem;
  height: 0.67rem;
  display: block;
  background: url(/assets/images/m/pop-close.png) no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: -0.46rem;
  right: 0.6rem;
}
.pop-qrcode .pop-cont {
  padding-top: 3.1rem;
}
.pop-qrcode .font1 {
  font-size: 0.48rem;
  line-height: 0.48rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
.qrcode {
  width: 2.88rem;
  height: 2.88rem;
  margin: 0 auto 0.3rem;
  display: block;
}
.pop-qrcode .font2 {
  font-size: 0.24rem;
  font-weight: bold;
  line-height: 0.24rem;
  margin-bottom: 0.46rem;
}
.pop-qrcode .font3 {
  font-size: 0.3rem;
  font-weight: bold;
  text-decoration: underline;
}
.pop-reservation .pop-cont {
  padding-top: 3.3rem;
}
.pop-reservation .font1 {
  font-size: 0.6rem;
  line-height: 0.6rem;
  margin-bottom: 1.16rem;
}
.pop-reservation .btn-reservation {
  width: 4.72rem;
  height: 1.15rem;
  /* background: url(/assets/images/m/btn-reservation.png) no-repeat; */
  background-size: 100% 100%;
  display: block;
  margin: 0 auto;
}
.pop-thanks .pop-cont {
  padding-top: 3.8rem;
}
.pop-thanks .font1 {
  font-size: 0.6rem;
  line-height: 0.8rem;
  font-weight: bold;
  margin-bottom: 0.7rem;
}
.pop-thanks .font2 {
  font-size: 0.24rem;
}
.pop-questionnaire .pop-cont {
  padding-top: 2rem;
}
.pop-questionnaire h4 {
  font-size: 0.34rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.pop-questionnaire .cont {
  width: 6rem;
  margin: 0 auto;
  padding: 0 0.25rem;
  font-size: 0.24rem;
  text-align: left;
  height: 4rem;
  overflow-y: scroll;
}
.pop-questionnaire .cont strong {
  color: #c7fd43;
}
.pop-questionnaire .cont p {
  line-height: 0.36rem;
}
.pop-questionnaire .cont::-webkit-scrollbar {
  width: 0.1rem;
}
.pop-questionnaire .cont::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 0.1rem;
}
.pop-questionnaire .cont::-webkit-scrollbar-thumb {
  background: #fff;
  border-radius: 0.1rem;
}
.pop-download .pop-cont {
  padding-top: 2.5rem;
  width: 7.33rem;
  background-image: url(/assets/images/m/pop-bg2.png);
}
.pop-download .font1 {
  font-size: 0.24rem;
  line-height: 0.6rem;
}
.pop-download .btn-download1 {
  width: 4.68rem;
  height: 0.78rem;
  display: block;
  /* background: url(/assets/images/m/btn-download1.png) no-repeat; */
  background-size: 100%;
  margin: 0.5rem auto;
}
.pop-download .btn-download2 {
  width: 4.68rem;
  height: 0.78rem;
  display: block;
  /* background: url(/assets/images/m/btn-download2.png) no-repeat; */
  background-size: 100%;
  margin: 0 auto;
}
.bottom-fix-bar {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left: 0;
  width: 7.5rem;
  height: 1.96rem;
  /* background: url(/assets/images/m/bottom-fc.png) no-repeat; */
  background-size: 100%;
}
.bottom-fix-bar .link-btn {
  font-size: 0;
  opacity: 0;
  position: absolute;
  right: 0.5rem;
  top: 0.74rem;
  height: 1rem;
  width: 4rem;
}
.video-box {
  width: 6rem;
  height: 3.6rem;
  margin: 0 auto;
}
.video-box .video-js {
  width: 100%;
  height: 100%;
}
.video-box .video-js .vjs-big-play-button {
  width: 1.6em;
  height: 1.6em;
  margin-left: -0.8em;
}
.video-desc {
  width: 6rem;
  padding: 0 0.2rem;
  margin: 0.4rem auto 0;
  font-size: 0.3rem;
  text-align: left;
}
.pop-video .pop-cont {
  background-image: url(/assets/images/m/pop-bg3.png);
}
.pop-video .video-box {
  margin-top: 2rem;
}