@font-face {
  font-family: "Roboto-Regular";
  src: url(../font/Roboto-Regular.ttf) format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "BebasNeue";
  src: url(../font/BebasNeue.ttf) format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "zihun143hao-Medium";
  src: url(../font/字魂143号-正酷超级黑-Medium.ttf) format("truetype");
  font-style: normal;
}

@font-face {
  font-family: "zihun143hao-Regular";
  src: url(../font/字魂143号-正酷超级黑-Regular.ttf) format("truetype");
  font-style: normal;
}

.cube {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;

  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
}

.img_100 {
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
}

.btn {
  background-color: transparent;
  outline: none;
  padding: 0;
  border: none;
  cursor: pointer;
}

body {
  width: 7.5rem;
  height: 100%;
  margin: 0 auto;
  background-color: #000;
}

.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0;
}

.nav-switch {
  width: 0.56rem;
  height: 0.56rem;
  position: absolute;
  top: 0.3rem;
  right: 0.38rem;
  z-index: 99;
  cursor: pointer;
}

.nav-switch-on,.nav-switch-off {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  transition: all 0.3s;
}

.nav-switch-off {
  opacity: 0;
}

.nav-switch.cur .nav-switch-off {
  opacity: 1;
}


.nav-switch.cur .nav-switch-on {
  opacity: 0;
}

.nav {
  background: url(../images/topbar/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
  left: 0rem;
  z-index: 98;
  display: flex;
  justify-content: center;
  flex-direction: column;
  transition: all 0.5s;
  overflow: hidden;
}

.nav.cur {
  transform: translateY(100%);
}

.nav::after {
  content: "";
  background: url(../images/topbar/bg_img.png) no-repeat 0 0 / 100% 100%;
  width: 7.5rem;
  height: 3.83rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.nav-con {
  width: 7.5rem;
  height: 9rem;
}

.nav-list {
  width: 7.5rem;
  height: 5.2rem;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.nav-list li {
  text-align: center;
  cursor: pointer;
}

.nav-list li span {
  font-size: 0.32rem;
  color: #fff;
  opacity: 0.3;
  transition: all 0.3s;
  position: relative;
}

.nav-list li.cur span {
  opacity: 1;
  text-shadow: 0 0 5px #ffd270;
}

.nav-list li span::before {
  content: "";
  background: url(../images/topbar/icon.png) no-repeat 0 0 / 100% 100%;
  width: 0.52rem;
  height: 0.53rem;
  position: absolute;
  top: 50%;
  left: -0.5rem;
  margin-top: -0.265rem;
  opacity: 0;
  animation: navIconAni 1s linear infinite;
}

.nav-list li.cur span::before {
  opacity: 1;
}

@keyframes navIconAni {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-0.1rem);
  }
  100% {
    transform: translateX(0);
  }
}

.nav-download-1 {
  width: 4.92rem;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  margin: 0.78rem auto 0;
}

.nav-download-1 a {
  width: 2.35rem;
  height: 0.7rem;
}

.nav-download-2 {
  width: 4.92rem;
  height: 0.65rem;
  display: flex;
  justify-content: center;
  margin: 0.28rem auto 0;
}

.nav-download-2 a {
  width: 2.35rem;
  height: 0.65rem;
}

.nav-sns {
  width: 3.3rem;
  height: 0.65rem;
  margin: 0.63rem auto 0;
  display: flex;
  justify-content: space-between;
}

.nav-sns a {
  width: 0.65rem;
  height: 0.65rem;
}


.pageSwiper {
  width: 100%;
  height: 100%;
}

.s1 {
  background: url(../images/1/wap-bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
  width: 7.5rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.s1-kv {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.s1-kv video {
  width: 100%;
  height: 100%;
}

.s1-con {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s1-logo {
  width: 1.79rem;
  height: 0.9rem;
  position: absolute;
  top: 0.1rem;
  left: 0.3rem;
}


.s1::before {
  content: "";
  background: url(../images/1/mengban.png) no-repeat 0 0 / 7.5rem 15rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s1-play {
  width: 1.52rem;
  height: 1.65rem;
  position: absolute;
  bottom: 3.4rem;
  left: 50%;
  margin-left: -0.76rem;
  /* animation: playAni 1s infinite; */
}

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

  50% {
    transform: scale(0.98);
  }

  100% {
    transform: scale(1);
  }
}

.s1-line {
  width: 5.97rem;
  height: 0.58rem;
  position: absolute;
  bottom: 7.11rem;
  left: 50%;
  margin-left: -2.985rem;
}

.s1-slogan {
  width: 6.47rem;
  height: 2.17rem;
  position: absolute;
  bottom: 5rem;
  left: 50%;
  margin-left: -3.09rem;
}

.s1-download {
  width: 6.24rem;
  height: 0.55rem;
  position: absolute;
  bottom: 1.48rem;
  left: 50%;
  margin-left: -3.12rem;
  display: flex;
  justify-content: space-between;
}

.s1-download a {
  width: 2rem;
  height: 0.55rem;
}

.s1-arrow {
  width: 0.61rem;
  height: 0.53rem;
  position: absolute;
  bottom: 0.52rem;
  left: 50%;
  margin-left: -0.305rem;
  pointer-events: none;
  animation: s1ArrowAni 1s infinite;
}

@keyframes s1ArrowAni {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0.2rem);
    opacity: 0.6;
  }

  100% {
    transform: translateY(0);
  }
}

.s2 {
  background: url(../images/2/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
  width: 7.5rem;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#lightBox1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

#lightBox1 #c1 {
  width: 100%;
  height: 100%; 
}


.s2-title {
  width: 3.6rem;
  height: 1.54rem;
  margin-top: 0.4rem;
  margin-left: 0.5rem;
}

.s2-picBox {
  width: 5.6rem;
  height: 3.1rem;
  margin: -0.2rem auto 0;
  position: relative;
  box-sizing: content-box;
  border: 1px solid #fff;
}

.s2-swiper {
  width: 100%;
  height: 100%;
}

.s2-pic-img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s2-picBox a::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(90deg,#0c214299 0,transparent 50%);
  position: absolute;
  top: 0;
  left: 0rem;
  z-index: 3;
  /* opacity: 0;
  transition: opacity 0.3s; */
}

/* .s2-picBox a:hover::before {
  opacity: 1;
} */

.s2-pic-info {
  width: 5.18rem;
  /* height: 0.64rem; */
  position: absolute;
  bottom: 0.2rem;
  left: 50%;
  margin-left: -2.59rem;
  z-index: 4;
}

.s2-pic-type {
  display: block;
  width: 0.86rem;
  height: 0.26rem;
}

.s2-pic-type.event {
  background: url(../images/2/type_event.png) no-repeat 0 0 / 100% 100%;
}

.s2-pic-type.notice {
  background: url(../images/2/type_notice.png) no-repeat 0 0 / 100% 100%;
}

.s2-pic-type.update {
  background: url(../images/2/type_update.png) no-repeat 0 0 / 100% 100%;
}

.s2-pic-title {
  width: 100%;
  margin-top: 0.2rem;
  color: #fff;
  font-size: 0.22rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.s2-pagination {
  bottom: -0.55rem !important;
}

.s2-pagination .swiper-pagination-bullet {
  background-color: transparent !important;
  opacity: 0.5 !important;
  background: url(../images/2/dot.png) no-repeat 0 0 / 0.77rem 0.37rem;
  width: 0.2rem;
  height: 0.2rem;
  background-position: 0 -0.08rem;
  border-radius: 0 !important;
}

.s2-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 0.38rem;
  height: 0.36rem;
  background-position: -0.4rem 0;
  transform: translateY(0.08rem);
  opacity: 1 !important;
}

.s2-tab {
  width: 6.5rem;
  height: 0.7rem;
  border-bottom: 1px solid #62707e;
  position: relative;
  margin: 0.78rem auto 0;
}

.s2-tab ul {
  width: 6.22rem;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.s2-tab ul li {
  width: 1.02rem;
  height: 0.7rem;
  line-height: 0.7rem;
  color: #273949;
  font-family: "zihun143hao-Medium";
  font-size: 0.4rem;
  cursor: pointer;
  transition: all 0.3s;
}

.s2-tab ul::after {
  content: "";
  width: 1.02rem;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  transition: all 0.5s;
}

.s2-tab ul.tab2::after {
  transform: translateX(1.74rem);
}

.s2-tab ul.tab3::after {
  transform: translateX(3.48rem);
}

.s2-tab ul.tab4::after {
  transform: translateX(5.22rem);
}


.s2-tab ul li.cur {
  text-shadow: 0 0 5px #ffd270;
  color: #fff;
}

.s2-list {
  margin: 0.2rem auto 0;
  width: 6.5rem;
  height: 3.66rem;
}

.s2-list ul {
  display: none;
  width: 100%;
  height: 100%;
  justify-content: flex-start;
  flex-direction: column;
}

.s2-list ul.cur {
  display: flex;
}

.s2-list ul a {
  width: 100%;
  height: 0.7rem;
  transition: background 0.3s;
  cursor: pointer;
  padding: 0 0.1rem;
  border: 1px solid transparent;
  position: relative;
  margin: 0.1rem 0;
}

.s2-list-title {
  width: 100%;
  color: #273949;
  font-size: 0.26rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.s2-list ul a div {
  width: 3.6rem;
  height: 0.26rem;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  position: absolute;
  left: 0.1rem;
  bottom: 0;
}

.s2-list-type {
  display: inline-block;
  width: 0.86rem;
  height: 0.26rem;
}

.s2-list-type.event {
  background: url(../images/2/type_event.png) no-repeat 0 0 / 100% 100%;
}

.s2-list-type.notice {
  background: url(../images/2/type_notice.png) no-repeat 0 0 / 100% 100%;
}

.s2-list-type.update {
  background: url(../images/2/type_update.png) no-repeat 0 0 / 100% 100%;
}


.s2-list-time {
  display: inline-block;
  height: 0.26rem;
  line-height: 0.26rem;
  color: #54616e;
  margin-left: 0.2rem;
  font-size: 0.2rem;
  font-family: "Roboto-Regular";
}

.s2-more {
  display: block;
  width: 2.68rem;
  height: 0.62rem;
  margin: 0.5rem auto 0;
  box-shadow: 0 0 20px #ffd270;
  cursor: pointer;
}

.s3 {
  width: 100%;
  height: 100%;
}

.s3-vBox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}


.s3-v {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: all 1s;
  opacity: 0;
}

.s3-v.cur {
  opacity: 1;
  z-index: 2;
}

.s3-v1 {
  background: url(../images/3/Artas/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
}

.s3-v2 {
  background: url(../images/3/Omar/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
}

.s3-v3 {
  background: url(../images/3/Luke/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
}

#lightBox2 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
}

#lightBox2 #c2 {
  width: 100%;
  height: 100%;
}


.s3-bgAni {
  width: 7.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.s3-bgAni-1 {
  width: 7.42rem;
  height: 6.37rem;
  position: absolute;
  top: 2.3rem;
  left: 50%;
  margin-left: -3.71rem;
  z-index: 1;
  animation: bgAni1 10s linear infinite;
  opacity: 0.5;
}

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

  25% {
    transform: rotate(5deg);
  }

  50% {
    transform: rotate(0);
  }

  75% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(0);
  }
}

.s3-bgAni-2 {
  width: 4.58rem;
  height: 4.58rem;
  position: absolute;
  top: 3.2rem;
  left: 50%;
  margin-left: -2.29rem;
  transform-origin: center center;
  z-index: 2;
  animation: bgAni2 20s linear infinite;
  opacity: 0.5;
}

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

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

.s3-bgAni-3 {
  width: 5.36rem;
  height: 5.11rem;
  position: absolute;
  top: 3rem;
  left: 50%;
  margin-left: -2.68rem;
  transform-origin: center center;
  z-index: 2;
  animation: bgAni3 2s infinite;
}

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

  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.s3-con {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3;
}


.s3-title {
  width: 3.64rem;
  height: 1.54rem;
  position: absolute;
  top: 0.48rem;
  left: 0.5rem;
  pointer-events: none;
}

.s3-swiper {
  width: 100%;
  height: 100%;
  overflow: visible !important;
}

.s3-swiper-prev::after,
.s3-swiper-next::after {
  display: none;
}

.s3-swiper-prev {
  background: url(../images/3/prev.png) no-repeat 0 0 / 100% 100%;
  width: 1.02rem;
  height: 1.47rem;
  left: 0.1rem;
  margin-top: 5rem;
}

.s3-swiper-next {
  background: url(../images/3/next.png) no-repeat 0 0 / 100% 100%;
  width: 1.02rem;
  height: 1.47rem;
  right: 0.1rem;
  margin-top: 5rem;
}


.s3-swiper .swiper-slide {
  transition-duration: 1s !important;
}

.s3-left-type {
  width: 1.19rem;
  height: 1.37rem;
  position: absolute;
  top: 1.46rem;
  left: 0.5rem;
  z-index: 2;
  transform: translateX(-4rem);
  opacity: 0;
  transition: all .6s;
}

.s3-swiper .swiper-slide.swiper-slide-active .s3-left-type {
  transform: translateX(0);
  opacity: 1;
}

.s3-left-type img {
  height: 100%;
}

.s3-left-name {
  width: 3.64rem;
  height: 0.81rem;
  position: absolute;
  top: 7.7rem;
  left: 0.5rem;
  z-index: 2;
  transform: translateX(-4rem);
  opacity: 0;
  transition: all .6s;
}

.s3-swiper .swiper-slide.swiper-slide-active .s3-left-name {
  transform: translateX(0);
  opacity: 1;
}

.s3-left-name img {
  height: 100%;
}


.s3-mid-role {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  transform: translateX(4rem);
  opacity: 0;
  transition: all 1s;
}

.s3-swiper .swiper-slide.swiper-slide-active .s3-mid-role {
  transform: translateX(0);
  opacity: 1;
}

canvas {
  pointer-events: none;
}

.s3-mid-role canvas {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}


.s3-mid-role.Artas {
  width: 6.75rem;
  height: 9rem;
  top: 1.3rem;
  left: 50%;
  margin-left: -2.7rem;
}

.s3-mid-role.Artas::before {
  content: "";
  background: url(../images/3/Artas/Artas_shadow.png) no-repeat 0 0 / 100% 100%;
  width: 6.75rem;
  height: 9rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.s3-mid-role.Omar {
  width: 10.12rem;
  height: 8.64rem;
  top: 1rem;
  left: 50%;
  margin-left: -4rem;
}

.s3-mid-role.Omar::before {
  content: "";
  background: url(../images/3/Omar/Omar_shadow.png) no-repeat 0 0 / 100% 100%;
  width: 10.12rem;
  height: 9.08rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.s3-mid-role.Luke {
  width: 7.5rem;
  height: 8.25rem;
  top: 1.6rem;
  left: 50%;
  margin-left: -3.4rem;
}

.s3-mid-role.Luke::before {
  content: "";
  background: url(../images/3/Luke/Luke_shadow.png) no-repeat 0 0 / 100% 100%;
  width: 7.5rem;
  height: 8.25rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}







.s3-left-title {
  width: 2.55rem;
  height: 0.47rem;
  position: absolute;
  top: 8.58rem;
  left: 0.5rem;
  z-index: 2;
  transform: translateX(-4rem);
  opacity: 0;
  transition: all .6s;
}

.s3-swiper .swiper-slide.swiper-slide-active .s3-left-title {
  transform: translateX(0);
  opacity: 1;
}

.s3-left-title img {
  height: 100%;
}

.s3-tab {
  width: 6.5rem;
  height: 1.37rem;
  position: absolute;
  top: 10.26rem;
  left: 50%;
  margin-left: -3.25rem;
  z-index: 10;
  display: flex;
  justify-content: space-between;
}

.s3-tab-more {
  background: url(../images/3/more.png) no-repeat 0 0 / 100% 100%;
  width: 1.38rem;
  height: 1.37rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.s3-tab-more span {
  color: #fff;
  font-family: "BebasNeue";
  font-size: 0.34rem;
  letter-spacing: 1px;
  text-align: center;
  transition: all 0.3s;
}

.s3-tab-more:hover span {
  text-shadow: 0 0 5px #ffd270;
}

.borderAni em {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.borderAni em i:first-child {
  width: 0.2rem;
  height: 0.2rem;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  transform: translate(-0.15rem, 0.15rem);
  opacity: 0;
  transition: all 0.3s;
}

.borderAni em i:nth-child(2) {
  width: 0.2rem;
  height: 0.2rem;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  bottom: -0.15rem;
  right: -0.15rem;
  transform: translate(-0.15rem, -0.15rem);
  opacity: 0;
  transition: all 0.3s;
}

.borderAni em i:nth-child(3) {
  width: 0.2rem;
  height: 0.2rem;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #fff;
  position: absolute;
  bottom: -0.15rem;
  left: -0.15rem;
  transform: translate(0.15rem, -0.15rem);
  opacity: 0;
  transition: all 0.3s;
}

.borderAni em i:nth-child(4) {
  width: 0.2rem;
  height: 0.2rem;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  position: absolute;
  top: -0.15rem;
  left: -0.15rem;
  transform: translate(0.15rem, 0.15rem);
  opacity: 0;
  transition: all 0.3s;
}

.borderAni.cur em i {
  transform: translate(0, 0);
  opacity: 1;
}


.s3-tab ul {
  width: 4.77rem;
  /* height: 2.1rem; */
  height: 1.37rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.s3-tab ul li {
  width: 1.38rem;
  height: 1.37rem;
  position: relative;
  border: 1px solid #fff;
  transition: all 0.3s;
  cursor: pointer;
  /* transform: translateY(0); */
}

.s3-tab ul li.cur {
  height: 2.1rem;
  /* transform: translateY(-0.73rem); */
}

.s3-tab ul li .s3-tab-item {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.s3-tab ul li .s3-tab-item .s3-tab-role {
  width: 1.38rem;
  height: 2.1rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.s3-tab ul li .s3-tab-item::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: -webkit-linear-gradient(90deg, #b068db 0%, transparent 50%);
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s;
}

.s3-tab ul li.cur .s3-tab-item::before {
  opacity: 1;
}

.s3-tab ul li .s3-tab-item .s3-tab-type {
  width: 0.32rem;
  height: 0.32rem;
  position: absolute;
  top: 0.04rem;
  left: 0.02rem;
  z-index: 3;
}

.s3-tab ul li .s3-tab-item .s3-tab-job {
  width: 1.03rem;
  height: 0.27rem;
  position: absolute;
  bottom: 0.02rem;
  left: 50%;
  margin-left: -0.515rem;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
  text-align: center;
}

.s3-tab ul li .s3-tab-item .s3-tab-job img {
  height: 100%;
}

.s3-tab ul li:hover .s3-tab-job,
.s3-tab ul li.cur .s3-tab-job {
  opacity: 1;
}

.s3-tab-sss {
  width: 0.51rem;
  height: 0.46rem;
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.3s;
}

.s3-tab ul li.cur .s3-tab-sss {
  opacity: 1;
}


.s4 {
  background: url(../images/4/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
  width: 100%;
  height: 100%;
}


#lightBox3 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

#lightBox3 #c3 {
  width: 100%;
  height: 100%; 
}

.s4-title {
  width: 6.4rem;
  height: 1.4rem;
  margin-top: 0.4rem;
  margin-left: 0.5rem;
}

.s4-swiper {
  width: 6.17rem;
  height: 4.58rem;
  margin: 1.54rem auto 0;
}

.s4-swiper .swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}

.s4-swiper .swiper-slide .s4-img {
  width: 6.17rem;
  height: 3.47rem;
}

.s4-pagination .swiper-pagination-bullet {
  background-color: transparent !important;
  opacity: 0.5 !important;
  background: url(../images/2/dot.png) no-repeat 0 0 / 0.77rem 0.37rem;
  width: 0.2rem;
  height: 0.2rem;
  background-position: 0 -0.08rem;
  border-radius: 0 !important;
}

.s4-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 0.38rem;
  height: 0.36rem;
  background-position: -0.4rem 0;
  transform: translateY(0.08rem);
  opacity: 1 !important;
}

.s4-dayan {
  width: 4.02rem;
  height: 6rem;
  position: absolute;
  top: 7.36rem;
  left: 0.64rem;
  pointer-events: none;
  z-index: 3;
}

.s4-ray {
  width: 6.91rem;
  height: 6.29rem;
  position: absolute;
  top: 3rem;
  left: 0.3rem;
  pointer-events: none;
  z-index: 3;
}


.s4-pageNum {
  background: url(../images/4/pageNum.png) no-repeat 0 0 / 100% 100%;
  width: 1.42rem;
  height: 1.22rem;
  position: absolute;
  top: 2.62rem;
  right: 0.3rem;
  z-index: 4;
}

.s4-pageNum span {
  font-size: 0.68rem;
  font-family: "BebasNeue";
  color: #fff;
  position: absolute;
  top: 0.16rem;
  left: 0.2rem;
}

.s4-pageNum em {
  font-size: 0.28rem;
  font-family: "BebasNeue";
  color: #fff;
  position: absolute;
  top: 0.75rem;
  left: 0.9rem;
}

.s5 {
  /* background: url(../images/5/bg.jpg) no-repeat 0 0 / 7.5rem 15rem; */
  width: 100%;
  height: 100%;
}

.s5-title {
  width: 3.62rem;
  height: 1.54rem;
  margin-top: 0.4rem;
  margin-left: 0.5rem;
}

.s5-tab {
  width: 4rem;
  height: 5.4rem;
  margin: 1.4rem auto 0;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  transform: scale(1.3);
  position: relative;
}

.s5-tab a {
  width: 4rem;
  height: 2.2rem;
  border: 1px solid #fff;
  box-sizing: content-box;
  position: relative;
}

.s5-tab a .s5-tab-item {
  width: 100%;
  height: 100%;
  filter: brightness(0.4);
}

.s5-tab-icon {
  width: 2.34rem;
  height: 1.28rem;
  position: absolute;
  top: 0.4rem;
  left: 50%;
  margin-left: -1.17rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s5-tab-imgBox .s5-tab-icon span {
  background: url(../images/5/icon_img.png) no-repeat 0 0 / 100% 100%;
  width: 0.64rem;
  height: 0.63rem;
}

.s5-tab-vBox .s5-tab-icon span {
  background: url(../images/5/icon_v.png) no-repeat 0 0 / 100% 100%;
  width: 0.64rem;
  height: 0.63rem;
}

.s5-tab-more {
  width: 100%;
  height: 0.44rem;
  color: #fff;
  line-height: 0.44rem;
  text-transform: uppercase;
  font-size: 0.2rem;
  position: absolute;
  bottom: -0.44rem;
  left: 0rem;
}

.s5-tab-more span {
  width: 100%;
  height: 0.46rem;
  color: #fff;
  line-height: 0.46rem;
  font-size: 0.2rem;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
}

.s5-tab-more::after {
  content: "";
  background: url(../images/5/icon.png) no-repeat 0 0 / 2.66rem 0.02rem;
  width: 2.66rem;
  height: 0.02rem;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
}

.s5-tab-imgBox.borderAni em,.s5-tab-vBox.borderAni em {
  opacity: 0.5;
  animation: borderAni 1s infinite;
  transform-origin: center center;
}

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

  50% {
    transform: scale(0.95);
  }

  100% {
    transform: scale(1);
  }
}

.s5-tab-imgBox.borderAni em i,.s5-tab-vBox.borderAni em i {
  opacity: 1;
}


.s5-bgbox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: hidden;
}

.s5-bgbox .s5-bg-img {
  background: url(../images/5/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.1);
  opacity: 0;
  transition: all 2s;
  transform-origin: center;
}

.s5-bgbox .s5-bg-img.cur {
  transform: scale(1);
  opacity: 1;
}

.footer {
  background: #24282f url(../images/footer/bg.png) no-repeat 0 0 / 100% 100%;
  width: 7.5rem;
  height: 6rem;
  overflow: hidden;
}

.footer::after {
  content: "";
  background: url(../images/footer/bg_img.png) no-repeat 0 0 / 100% 100%;
  width: 100%;
  height: 2.75rem;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  z-index: -1;
}

.footer-logo {
  width: 1.79rem;
  height: 0.9rem;
  margin: 0.3rem auto 0;
}

.footer-sns {
  width: 3.34rem;
  height: 0.65rem;
  display: flex;
  justify-content: space-between;
  margin: 0.3rem auto 0;
}

.footer-sns a {
  width: 0.65rem;
  height: 0.65rem;
}

.footer-download {
  width: 5.92rem;
  height: 0.5rem;
  display: flex;
  justify-content: space-between;
  margin: 0.34rem auto 0;
}

.footer-download a {
  width: 1.8rem;
  height: 0.5rem;
}

.footer-link {
  width: 5.5rem;
  display: flex;
  justify-content: space-between;
  margin: 0.34rem auto 0;
}

.footer-link a {
  text-transform: uppercase;
  color: #fff;
  opacity: 0.5;
  font-size: 0.18rem;
}

.footer-goTop {
  width: 1.05rem;
  height: 1.14rem;
  position: absolute;
  bottom: 0.48rem;
  right: 0.3rem;
  z-index: 2;
}

.footer-goTop::before {
  content: "";
  background: url(../images/footer/goTop_border.png) no-repeat 0 0 / 100% 100%;
  width: 1.05rem;
  height: 1.14rem;
  position: absolute;
  top: 0;
  left: 0;
}

.footer-goTop::after {
  content: "";
  background: url(../images/footer/goTop_icon.png) no-repeat 0 0 / 100% 100%;
  width: 0.46rem;
  height: 0.43rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.23rem;
  margin-top: -0.215rem;
  animation: goTopAni 1s infinite;
}

@keyframes goTopAni {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateY(0.05rem);
    opacity: 0.7;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* loading */
.loading {
  width: 100%;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  opacity: 0;
}

.loading-con {
  width: 5rem;
  height: 5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -2.5rem;
  margin-top: -2.5rem;
}

.loading-ani {
  width: 2.7rem;
  height: 2.7rem;
  margin: 0 auto;
}

.loading-progress {
  font-family: "BebasNeue";
  font-size: 1.8rem;
  margin-top: 0.2rem;
  text-align: center;
  -webkit-background-clip: text;
  color: transparent;
  background-image: -webkit-linear-gradient(-90deg, #0f9fff33 0%, transparent 90%);
}
/* sub */
.goBack {
  width: 0.84rem;
  height: 0.96rem;
  position: absolute;
  top: 0.48rem;
  left: 0.48rem;
  cursor: pointer;
  z-index: 99;
}

.sub-footer {
  position: absolute;
  bottom: -6rem;
  left: 0;
  z-index: 9;
  transition: all 0.6s;
  overflow: visible;
}

.sub-footer.cur {
  transform: translateY(-6rem);
}

.footer-switch {
  width: 1.14rem;
  height: 1.2rem;
  background-color: #0006;
  position: absolute;
  top: -1.2rem;
  left: 0rem;
}

.footer-switch::before {
  content: "";
  background: url(../images/news/open.png) no-repeat 0 0 / 100% 100%;
  width: 0.56rem;
  height: 0.61rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.28rem;
  margin-top: -0.305rem;
  opacity: 1;
  transition: all 0.3s;
  animation: footerSwitchAni 1s infinite;
}

@keyframes footerSwitchAni {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.1rem);
  }
  100% {
    transform: translateY(0);
  }
}

.footer-switch.cur::before {
  opacity: 0;
}

.footer-switch::after {
  content: "";
  background: url(../images/news/close.png) no-repeat 0 0 / 100% 100%;
  width: 0.5rem;
  height: 0.49rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.25rem;
  margin-top: -0.245rem;
  opacity: 0;
  transition: all 0.3s;
}

.footer-switch.cur::after {
  opacity: 1;
}




/* news */
body {
  position: fixed;
  width: 7.5rem;
  top: 0;
  left: 50%;
  margin-left: -3.75rem;
  overflow: hidden;
}

body[data-type="news"]::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/news/bg.jpg) no-repeat center 0 / 7.5rem 15rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.news-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
}

.news-con {
  width: 6.54rem;
  min-height: 100%;
  margin: 0 auto;
  padding: 1.7rem 0;
  position: relative;
  z-index: 1;
}

.news-tab {
  width: 6.54rem;
  height: 0.7rem;
  border-bottom: 1px solid #62707e;
  position: relative;
}

.news-tab ul {
  width: 5.8rem;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.news-tab ul a {
  width: 1.04rem;
  height: 0.7rem;
  line-height: 0.7rem;
  color: #273949;
  font-family: "zihun143hao-Medium";
  font-size: 0.4rem;
  cursor: pointer;
  transition: all 0.3s;
}


.news-tab ul a.cur {
  text-shadow: 0 0 5px #ffd270;
  color: #fff;
  border-bottom: 2px solid #fff;
}

.news-list {
  margin-top: 0.4rem;
  width: 6.54rem;
}

.news-list ul {
  width: 100%;
  height: 100%;
}

.news-list ul a {
  display: block;
  width: 100%;
  height: 1.66rem;
  transition: all 0.3s;
  padding: 0.18rem 0.1rem 0.18rem 0.15rem;
  margin-bottom: 0.35rem;
  border: 1px solid #ffffff24;
  background-color: #ffffff24;
  position: relative;
}

.news-list-img {
  width: 2.4rem;
  height: 1.3rem;
  border: 1px solid #fff;
  float: left;
}

.news-list-info {
  width: 3.26rem;
  height: 1.3rem;
  float: left;
  margin-left: 0.2rem;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  padding: 0.1rem 0;
}

.news-list-title {
  width: 100%;
  color: #273949;
  font-size: 0.22rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: all 0.3s;
}

.news-list ul a .news-list-item {
  width: 3.6rem;
  height: 0.26rem;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  margin-top: 0.1rem;
}

.news-list-type {
  display: inline-block;
  width: 0.86rem;
  height: 0.26rem;
}

.news-list-type.event {
  background: url(../images/2/type_event.png) no-repeat 0 0 / 100% 100%;
}

.news-list-type.notice {
  background: url(../images/2/type_notice.png) no-repeat 0 0 / 100% 100%;
}

.news-list-type.update {
  background: url(../images/2/type_update.png) no-repeat 0 0 / 100% 100%;
}

.news-list-time {
  display: inline-block;
  height: 0.26rem;
  line-height: 0.26rem;
  color: #54616e;
  margin-left: 0.2rem;
  font-size: 0.2rem;
  font-family: "Roboto-Regular";
}

.news-list-more {
  width: 0.29rem;
  height: 100%;
  float: right;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.news-list-more img {
  width: 0.29rem;
  height: 0.35rem;
}

/* detail */
body[data-type="detail"]::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/news/bg.jpg) no-repeat center 0 / 7.5rem 15rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.detail-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
}

.detail-con {
  width: 6.55rem;
  min-height: 100%;
  margin: 0 auto;
  padding: 1.8rem 0;
  position: relative;
}

.detail-breadcrumb-box {
  width: 100%;
  overflow: hidden;
}

.detail-breadcrumb {
  text-transform: uppercase;
  color: #273949;
  font-size: 0.24rem;
  float: right;
}

.detail-line {
  background: url(../images/detail/line.png) no-repeat 0 0 / 100% 100%;
  width: 6.54rem;
  height: 0.03rem;
  margin-top: 0.1rem;
}

.detail-title {
  margin-top: 0.3rem;
  width: 100%;
  text-transform: uppercase;
  color: #273949;
  font-size: 0.3rem;
  line-height: 0.48rem;
  font-weight: 700;
  position: relative;
  padding-left: 0.5rem;
}

.detail-title::before {
  content: "";
  background: url(../images/detail/icon.png) no-repeat 0 0 / 100% 100%;
  width: 0.33rem;
  height: 0.38rem;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.19rem;
}

.detail-time {
  font-size: 0.2rem;
  color: #54616e;
  font-family: "Roboto-Regular";
  margin-top: 0.3rem;
  padding-left: 0.5rem;
}

.detail-body {
  width: 100%;
  margin-top: 0.3rem;
  font-size: 0.24rem;
  line-height: 1.5;
  padding: 0 0.24rem 0 0.5rem;
  color: #54616e;
  overflow: hidden;
  word-break: break-all;
}

.detail-body p {
  font-size: 0.24rem;
  line-height: 1.5;
  color: #54616e;
}


.detail-body img {
  max-width: 100%;
  margin: 0.3rem auto;
}

/* heroes */
body[data-type="heroes"]::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/heroes/bg.jpg?v1) no-repeat center 0 / 7.5rem 15rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.heroes-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
}

.heroes-con {
  width: 6.54rem;
  min-height: 100%;
  margin: 0 auto;
  padding: 1.76rem 0;
  position: relative;
}

.heroes-tab-raceBox {
  width: 6.54rem;
  height: 0.72rem;
  overflow-y: hidden;
  overflow-x: auto;
}

.heroes-tab-race {
  width: 6.54rem;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heroes-tab-race a {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 2px solid transparent;
}

.heroes-tab-race a.cur {
  border-bottom: 2px solid #fff;
}

.heroes-tab-race a .heroes-race-icon {
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  position: relative;
  transform: translateX(-0.1rem);
}

.heroes-tab-race a .heroes-race-icon::before {
  content: "";
  background: url(../images/heroes/all_0.png) no-repeat 0 0 / 100% 100%;
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
  transition: opacity 0.3s;
}

.heroes-tab-race a.heroes-all .heroes-race-icon::before {
  background-image: url(../images/heroes/all_0.png);
}

.heroes-tab-race a.heroes-terran .heroes-race-icon::before {
  background-image: url(../images/heroes/terran_0.png);
}


.heroes-tab-race a.heroes-atlas .heroes-race-icon::before {
  background-image: url(../images/heroes/atlas_0.png);
}


.heroes-tab-race a.heroes-wenfyr .heroes-race-icon::before {
  background-image: url(../images/heroes/wenfyr_0.png);
}


.heroes-tab-race a.heroes-void .heroes-race-icon::before {
  background-image: url(../images/heroes/void_0.png);
}


.heroes-tab-race a.heroes-god .heroes-race-icon::before {
  background-image: url(../images/heroes/god_0.png);
}


.heroes-tab-race a.cur .heroes-race-icon::before {
  opacity: 0;
}

.heroes-tab-race a .heroes-race-icon::after {
  content: "";
  background: url(../images/heroes/all_1.png) no-repeat 0 0 / 100% 100%;
  width: 0.6rem;
  height: 0.6rem;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.heroes-tab-race a.heroes-all .heroes-race-icon::after {
  background-image: url(../images/heroes/all_1.png);
}

.heroes-tab-race a.heroes-terran .heroes-race-icon::after {
  background-image: url(../images/heroes/terran_1.png);
}


.heroes-tab-race a.heroes-atlas .heroes-race-icon::after {
  background-image: url(../images/heroes/atlas_1.png);
}


.heroes-tab-race a.heroes-wenfyr .heroes-race-icon::after {
  background-image: url(../images/heroes/wenfyr_1.png);
}


.heroes-tab-race a.heroes-void .heroes-race-icon::after {
  background-image: url(../images/heroes/void_1.png);
}


.heroes-tab-race a.heroes-god .heroes-race-icon::after {
  background-image: url(../images/heroes/god_1.png);
}


.heroes-tab-race a.cur .heroes-race-icon::after {
  opacity: 1;
}


.heroes-tab-race a em {
  color: #273949;
  font-size: 0.42rem;
  line-height: 0.7rem;
  font-family: "zihun143hao-Medium";
  transform: translateX(-0.14rem);
  transition: all 0.3s;
}

.heroes-tab-race a.cur em {
  text-shadow: 0 0 5px #ffd270;
  color: #fff;
}


.heroes-tab-career {
  margin-top: -0.02rem;
  width: 100%;
  height: 1.26rem;
  background-color: #ffffff1a;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.2rem 0.34rem;
  border-top: 1px solid #27394980;
}

.heroes-tab-career.hide {
  display: none;
}

.heroes-tab-career a {
  width: 1.62rem;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.heroes-tab-career a .checkbox {
  width: 0.16rem;
  height: 0.16rem;
  border: 1px solid #ffffffb3;
  position: relative;
  transform: rotate(45deg);
}

.heroes-tab-career a .checkbox::after {
  content: "";
  width: 0.06rem;
  height: 0.06rem;
  background-color: #ffffffb3;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.03rem;
  margin-top: -0.03rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.heroes-tab-career a.cur .checkbox::after {
  opacity: 1;
}


.heroes-tab-career a .heroes-career-icon {
  width: 0.31rem;
  height: 0.31rem;
  margin-left: 0.1rem;
  opacity: 0.7;
}

.heroes-tab-career a span:last-child {
  color: #ffffffb3;
  font-size: 0.22rem;
  margin-left: 0.1rem;
}

.heroes-cards {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  padding: 0 0.2rem;
}

.heroes-cards li {
  width: 1.6rem;
  height: 2.1rem;
  cursor: pointer;
  margin-right: 0.66rem;
  margin-top: 0.6rem;
  position: relative;
}

.heroes-cards li:nth-child(3n) {
  margin-right: 0;
}

.heroes-cards li a {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  border: 0.01rem solid #fff;
}

.heroes-cards-info {
  width: 100%;
  height: 0.37rem;
  background-color: #000000b3;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.05rem;
}

.heroes-cards-career {
  width: 0.31rem;
  height: 0.31rem;
  background: url(../images/heroes/Vanguard.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-career.Vanguard {
  background: url(../images/heroes/Vanguard.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-career.Assassin {
  background: url(../images/heroes/Assassin.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-career.Tank {
  background: url(../images/heroes/Tank.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-career.Hunter {
  background: url(../images/heroes/Hunter.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-career.Energy {
  background: url(../images/heroes/Energy.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-career.Support {
  background: url(../images/heroes/Support.png) no-repeat 0 0 / 100% 100%;
}

.heroes-cards-name {
  width: 1.15rem;
  height: 0.31rem;
  line-height: 0.31rem;
  color: #fff;
  font-size: 0.22rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  text-align: center;
}






.heroes-sss::after {
  content: "";
  background: url(../images/heroes/sss.png) no-repeat 0 0 / 100% 100%;
  width: 0.53rem;
  height: 0.5rem;
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
}

/* heroes_detail */
.hd-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto !important;
}

.hd-top {
  background-image: url(../images/heroes_detail/bg.jpg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: 7.5rem 19rem;
  width: 100%;
  min-height: 20rem;
  position: relative;
}

.hd-center {
  width: 6.54rem;
  margin: 0 auto;
  position: relative;
  border: 1px solid transparent;
}



.hd-nameBox {
  position: absolute;
  top: 4.1rem;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.hd-name {
  font-size: 0.7rem;
  letter-spacing: 1px;
  color: #fff;
  position: absolute;
  top: 5.38rem;
  left: 0;
  z-index: 2;
}


.hd-job {
  width: 1.11rem;
  height: 0.81rem;
  position: absolute;
  top: 4.56rem;
  left: 0;
  z-index: 2;
}

.hd-job.Vanguard {
  background: url(../images/heroes_detail/Vanguard.png) no-repeat 0 0 / 100% 100%;
}

.hd-job.Assassin {
  background: url(../images/heroes_detail/Assassin.png) no-repeat 0 0 / 100% 100%;
}

.hd-job.Tank {
  background: url(../images/heroes_detail/Tank.png) no-repeat 0 0 / 100% 100%;
}

.hd-job.Hunter {
  background: url(../images/heroes_detail/Hunter.png) no-repeat 0 0 / 100% 100%;
}

.hd-job.Energy {
  background: url(../images/heroes_detail/Energy.png) no-repeat 0 0 / 100% 100%;
}

.hd-job.Support {
  background: url(../images/heroes_detail/Support.png) no-repeat 0 0 / 100% 100%;
}



.hd-title {
  padding: 0 0.2rem 0 0.1rem;
  height: 0.46rem;
  background-color: #00000033;
  overflow: hidden;
  position: absolute;
  top: 6.26rem;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hd-title span {
  width: 0.26rem;
  height: 0.29rem;
}

.hd-title p {
  color: #fff;
  font-size: 0.28rem;
  margin-left: 0.1rem;
  letter-spacing: 1px;
}



.hd-vBox {
  background-image: url(../images/heroes_detail/v_bg.png);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  width: 3.6rem;
  height: 1.8rem;
  margin-top: 7.08rem;
  position: relative;
  cursor: pointer;
}

.hd-vBox .hd-play {
  width: 0.86rem;
  height: 0.91rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.43rem;
  margin-top: -0.455rem;
}

.hd-desc {
  width: 4.62rem;
  color: #273949;
  font-family: "Roboto-Regular";
  font-size: 0.24rem;
  line-height: 0.3rem;
  margin-top: 0.3rem;
}

.hd-sss {
  width: 1.19rem;
  height: 1.03rem;
  position: absolute;
  top: 0.72rem;
  right: 0rem;
}

.hd-sss.hide {
  display: none;
}

.hd-bottom {
  width: 100%;
  min-height: 9.28rem;
  background-color: #ffffff80;
  position: absolute;
  top: 15.03rem;
  left: 0;
  opacity: 0;
  transform: translateY(0);
  transition: all 1s;
  padding: 0 0.5rem;
}

.hd-bottom.cur {
  opacity: 1;
  transform: translateY(-5rem);
}

.hd-skill-title {
  width: 100%;
  color: #273949;
  font-size: 0.42rem;
  font-weight: 700;
  margin-top: 0.7rem;
  padding-left: 0.5rem;
  position: relative;
  top: 2rem;
  opacity: 0;
  transition: all 1s;
  transform: translateY(0);
}

.hd-skill-title.cur {
  opacity: 1;
  transform: translateY(-2rem);
}

.hd-skill-title::before {
  content: "";
  background: url(../images/heroes_detail/icon.png) no-repeat 0 0 / 0.33rem 0.38rem;
  width: 0.33rem;
  height: 0.38rem;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -0.19rem;
}

.hd-skill-tab {
  margin-top: 0.52rem;
  width: 100%;
  height: 1.36rem;
  padding: 0 0.2rem;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #27394980;
  position: relative;
  top: 2rem;
  opacity: 0;
  transition: all 1s;
  transform: translateY(0rem);
}

.hd-skill-tab.cur {
  opacity: 1;
  transform: translateY(-2rem);
}

.hd-skill-tab::after {
  content: "";
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-left: 0.1rem solid transparent;
  border-right: 0.1rem solid transparent;
  border-top: 0.1rem solid transparent;
  border-bottom: 0.1rem solid #27394980;
  position: absolute;
  bottom: 0rem;
  left: 0rem;
  transition: transform 0.5s;
}

.hd-skill-tab.tab1::after {
  transform: translateX(0.5rem);
}

.hd-skill-tab.tab2::after {
  transform: translateX(2.3rem);
}

.hd-skill-tab.tab3::after {
  transform: translateX(4rem);
}

.hd-skill-tab.tab4::after {
  transform: translateX(5.8rem);
}

.hd-skill-tab li {
  width: 0.86rem;
  height: 0.86rem;
  cursor: pointer;
  position: relative;
  margin-right: 0.9rem;
}

.hd-skill-tab li:last-child {
  margin-right: 0;
}

.hd-skill-tab li img {
  position: relative;
  z-index: 2;
}

.hd-skill-tab li::before {
  content: "";
  background: url(../images/heroes_detail/cur_border.png) no-repeat 0 0 / 100% 100%;
  width: 1.23rem;
  height: 1.2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -0.6rem;
  margin-left: -0.615rem;
  transition: all 0.5s;
  transform: scale(0.2);
  transform-origin: center center;
  z-index: 1;
}

.hd-skill-tab li.cur::before {
  transform: scale(1);
}

.hd-skill-con {
  padding: 0.2rem 0 0;
  opacity: 0;
  transition: all 1s;
  transform: translateY(2rem);
}

.hd-skill-con.cur {
  opacity: 1;
  transform: translateY(0rem);
}

.hd-skill-con li {
  display: none;
}

.hd-skill-con li.cur {
  display: block;
}

.hd-skill-con .hd-skill-name {
  font-size: 0.36rem;
  font-weight: 700;
  color: #273949;
}

.hd-skill-con .hd-skill-info {
  margin-top: 0.2rem;
  font-size: 0.22rem;
  font-family: "Roboto-Regular";
  color: #54616e;
  line-height: 2;
}

/* media */
body[data-type="media_img"]::before,
body[data-type="media_v"]::before {
  content: "";
  width: 100%;
  height: 100%;
  background: url(../images/media/bg.jpg) no-repeat 0 0 / 7.5rem 15rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.media-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

.media-con {
  width: 6.55rem;
  min-height: 100%;
  margin: 0 auto;
  padding: 1.66rem 0;
}

.media-tab {
  width: 100%;
  height: 0.7rem;
  border-bottom: 1px solid #62707e;
  position: relative;
}

.media-tab ul {
  width: 2.4rem;
  height: 0.7rem;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.media-tab ul a {
  height: 0.7rem;
  line-height: 0.7rem;
  color: #273949;
  font-size: 0.36rem;
  cursor: pointer;
  transition: all 0.3s;
  font-family: "zihun143hao-Medium";
}

.media-tab ul a.cur {
  text-shadow: 0 0 5px #ffd270;
  color: #fff;
  border-bottom: 2px solid #fff;
}

.media-list {
  margin-top: 0.56rem;
  width: 100%;
}

.media-list ul {
  width: 100%;
  height: 100%;
  position: relative;
}

body[data-type="media_img"] .media-list ul li {
  height: 3.34rem;
}

.media-wallpaper-img {
  width: 100%;
  height: 3.34rem;
  border: 1px solid #fff;
  position: relative;
  cursor: pointer;
}

.media-wallpaper-img::after {
  content: "";
  background: url(../images/media/magnifyingGlass.png) no-repeat 0 0 / 100% 100%;
  width: 0.3rem;
  height: 0.3rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.15rem;
  margin-top: -0.15rem;
  opacity: 0.8;
}

/* media_v */
.media-list ul {
  width: 100%;
  position: relative;
  padding: 0 0.28rem;
}

.media-list ul li {
  width: 100%;
  height: 4.24rem;
  position: relative;
  margin-bottom: 0.3rem;
  cursor: pointer;
}

.media-v-img {
  width: 100%;
  height: 3.34rem;
  border: 1px solid #fff;
  position: relative;
}

.media-v-img img.vImg {
  filter: brightness(0.7);
}

.media-v-play {
  width: 1.24rem;
  height: 1.32rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.62rem;
  margin-top: -0.66rem;
}


.media-v-desc {
  padding: 0.1rem 0.1rem 0;
  color: #54616e;
  font-size: 0.27rem;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}


/* dialog */
.dialog-mask {
  background-color: #000;
  border-top: 1px solid #000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  filter: alpha(opacity=0);
  z-index: -1;
}

.dialog-mask.on {
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  opacity: 0.8;
  filter: alpha(opacity=80);
  z-index: 9997;
}

.dialog {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
}

.dialog.on {
  display: block;
}

.dialog-v {
  width: 7.5rem;
  height: 4.16rem;
  margin-left: -3.75rem;
  margin-top: -2.08rem;
  background-color: #000;
}

.dialog-v .dialog-close {
  width: 0.61rem;
  height: 0.61rem;
  position: absolute;
  top: -1rem;
  right: 0.1rem;
}


.dialog-v .dialog-con {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid #fff;
  background-color: #000;
  display: flex;
  align-items: center;
} 

.dialog-v video {
  width: 100%;
}

.dialog-img {
  width: 7.5rem;
  height: 4.24rem;
  margin-left: -3.75rem;
  margin-top: -2.12rem;
}

.dialog-img .dialog-close {
  width: 0.61rem;
  height: 0.61rem;
  position: absolute;
  top: -0.8rem;
  right: 0.1rem;
  z-index: 99;
}

.wallpaper-bigImg {
  width: 100%;
  height: 100%;
}

.wallpaper-bigImg-download {
  background: url(../images/media/download_icon2.png) no-repeat 0 0 / 100% 100%;
  width: 0.73rem;
  height: 0.72rem;
  position: absolute;
  bottom: -1rem;
  left: 50%;
  margin-left: -0.365rem;
}

.wallpaper-bigImg-download img {
  width: 0.36rem;
  height: 0.38rem;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -0.18rem;
  margin-top: -0.19rem;
  animation: downloadAni 1s infinite;
}

@keyframes downloadAni {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(0.05rem);
  }

  100% {
    transform: translateY(0);
  }
}