@charset "utf-8";
html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
  margin: 0;
  padding: 0
}
body {
  padding: 0;
  margin: 0;
  background: #f0f0f0
}
html, body, fieldset, img, iframe, abbr {
  border: 0
}
li {
  list-style: none
}
textarea {
  overflow: auto;
  resize: none
}
a, button {
  cursor: pointer
}
h1, h2, h3, h4, h5, h6, strong, b {
  font-weight: 700
}
a, a:hover {
  text-decoration: none;
  outline: 0
}
body, textarea, button {
  color: #fff
}
html, body {
  min-width: 1400px;
  margin: 0 auto;
  font-family: "Microsoft YaHei", "Helvetica Neue", HelveticaNeue, HelveticasimSun, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Arial;
  font-size: 14px
}
i, em {
  font-style: normal
}
.hide {
  display: none
}
.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px)
}
.clearfix:after {
  clear: both;
  content: '\0020';
  display: block;
  visibility: hidden;
  height: 0
}
.clearfix {
  zoom: 1
}
.inline-box {
  display: inline-block;
  zoom: 1
}
@font-face {
  font-family: RefrigeratorDeluxeBold;
  src: url(../fonts/RefrigeratorDeluxeBold.ttf)
}
@font-face {
  font-family: RefrigeratorDeluxeHeavy;
  src: url(../fonts/RefrigeratorDeluxeHeavy.ttf)
}
@font-face {
  font-family: NunitoSans10ptCondensedMedium;
  src: url(../fonts/NunitoSans10ptCondensedMedium.ttf)
}
.nicescroll-rails::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: .03rem;
  height: 100%;
  margin-left: -1px;
  content: "";
  background: #8e96a9
}
.nicescroll-rails > div {
  -webkit-transform: skew(0, -20deg);
  -moz-transform: skew(0, -20deg);
  -ms-transform: skew(0, -20deg);
  -o-transform: skew(0, -20deg);
  transform: skew(0, -20deg)
}
.nicescroll-rails > div::before {
  position: absolute;
  top: 0;
  right: 0;
  width: .06rem;
  height: .2rem;
  content: "";
  background: url(../img/heroes/i-scroll.png) center center no-repeat;
  background-size: 100% 100%
}
#xlz-btn4 {
  width: 3.9rem;
  height: 1.36rem;
  position: absolute;
  top: -.36rem;
  right: 0;
  z-index: 99999;
  pointer-events: none
}
#xlz-btn4 canvas {
  width: 100%;
  height: 100%
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100)
  }
}
@-moz-keyframes fadeIn {
  0% {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100)
  }
}
@-ms-keyframes fadeIn {
  0% {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100)
  }
}
@-o-keyframes fadeIn {
  0% {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100)
  }
}
@keyframes fadeIn {
  0% {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    filter: alpha(opacity=100)
  }
}
@-webkit-keyframes down {
  0% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  50% {
    -o-transform: translateY(0.1rem);
    -webkit-transform: translateY(0.1rem);
    -moz-transform: translateY(0.1rem);
    -ms-transform: translateY(0.1rem);
    transform: translateY(0.1rem)
  }
  100% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}
@-moz-keyframes down {
  0% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  50% {
    -o-transform: translateY(0.1rem);
    -webkit-transform: translateY(0.1rem);
    -moz-transform: translateY(0.1rem);
    -ms-transform: translateY(0.1rem);
    transform: translateY(0.1rem)
  }
  100% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}
@-ms-keyframes down {
  0% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  50% {
    -o-transform: translateY(0.1rem);
    -webkit-transform: translateY(0.1rem);
    -moz-transform: translateY(0.1rem);
    -ms-transform: translateY(0.1rem);
    transform: translateY(0.1rem)
  }
  100% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}
@-o-keyframes down {
  0% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  50% {
    -o-transform: translateY(0.1rem);
    -webkit-transform: translateY(0.1rem);
    -moz-transform: translateY(0.1rem);
    -ms-transform: translateY(0.1rem);
    transform: translateY(0.1rem)
  }
  100% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}
@keyframes down {
  0% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
  50% {
    -o-transform: translateY(0.1rem);
    -webkit-transform: translateY(0.1rem);
    -moz-transform: translateY(0.1rem);
    -ms-transform: translateY(0.1rem);
    transform: translateY(0.1rem)
  }
  100% {
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0)
  }
}
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges
}
body, html {
  width: 100%;
  min-width: 1400px
}
.wrap {
  width: 100%;
  height: 100vh;
  overflow: hidden
}
.home {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: .68rem
}
.inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: url(../img/teamup/bg.jpg) center center no-repeat;
  background-size: cover
}
.inner img {
  width: 100%;
  height: 100%
}
.teamup-box {
  position: relative;
  left: -.23rem;
  width: 82.29166667%;
  height: 6.75rem
}
.teamup-box .teamup-cont {
  box-sizing: border-box;
  width: 100%;
  height: 100%
}
.teamup-box .teamup-cont .teamup-wrap {
  height: 100%
}
.teamup-box .teamup-cont .teamup-wrap .teamup-slide {
  position: relative;
  box-sizing: border-box;
  width: 3.48rem;
  height: 6.75rem;
  padding: .08rem .06rem .24rem;
  margin: 0 .23rem
}
.teamup-box .teamup-cont .teamup-wrap .teamup-slide::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.48rem;
  height: 6.75rem;
  pointer-events: none;
  content: "";
  background: url(../img/teamup/item-h.png) center center no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease
}
.teamup-box .teamup-cont .teamup-wrap .teamup-slide:hover::before, .teamup-box .teamup-cont .teamup-wrap .teamup-slide.cur::before {
  opacity: 1
}
.teamup-box .btn-prev, .teamup-box .btn-next {
  width: 1.01rem;
  height: .51rem;
  margin-left: 0;
  margin-right: 0;
  background: url(../img/blank.png) center center no-repeat;
  background-size: 100% 100%;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease
}
.teamup-box .btn-prev.swiper-button-disabled, .teamup-box .btn-next.swiper-button-disabled {
  cursor: default;
  pointer-events: none;
  -webkit-opacity: .5;
  -moz-opacity: .5;
  opacity: .5;
  filter: alpha(opacity=50)
}
.teamup-box .btn-prev {
  position: absolute;
  top: 50%;
  left: -1.02rem;
  margin-top: -.25rem;
  background-image: url(../img/teamup/btn-prev.png)
}
.teamup-box .btn-prev:hover {
  margin-left: -.15rem
}
.teamup-box .btn-next {
  position: absolute;
  top: 50%;
  right: -1.02rem;
  margin-top: -.25rem;
  background-image: url(../img/teamup/btn-next.png)
}
.teamup-box .btn-next:hover {
  margin-right: -.15rem
}
.teamup-detail {
  position: absolute;
  top: -110%;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  background: url(../img/teamup/bg-inner.jpg) center center no-repeat;
  background-size: cover;
  -o-transition: top .6s ease-in-out;
  -webkit-transition: top .6s ease-in-out;
  -moz-transition: top .6s ease-in-out;
  -ms-transition: top .6s ease-in-out;
  transition: top .6s ease-in-out
}
.teamup-detail.dropDown {
  top: 0
}
.teamup-detail .bg-img {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  justify-content: flex-end;
  width: 12.01rem;
  height: 9.09rem;
  pointer-events: none;
  margin-left: -2.41rem
}
.teamup-detail .bg-img img {
  width: auto
}
.teamup-detail .teamup-info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.58rem;
  height: 4.64rem;
  margin: -3.21rem 0 0 -8.07rem
}
.teamup-detail .teamup-info .btn-back {
  position: absolute;
  top: -.6rem;
  left: 0;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: .31rem;
  font-family: NunitoSans10ptCondensedMedium;
  font-size: .18rem;
  color: #000
}
.teamup-detail .teamup-info .btn-back i {
  width: .48rem;
  height: .31rem;
  margin-right: .14rem;
  background: url(../img/heroes/btn-back.png) center center no-repeat;
  background-size: 100% 100%
}
.teamup-detail .teamup-info .name {
  width: 100%;
  height: .82rem;
  font-family: RefrigeratorDeluxeHeavy;
  font-size: .75rem;
  color: #181a26;
  line-height: .82rem;
  white-space: nowrap
}
.teamup-detail .teamup-info .intro {
  width: 100%;
  margin-top: .15rem
}
.teamup-detail .teamup-info .intro p {
  font-family: NunitoSans10ptCondensedMedium;
  font-size: .2rem;
  line-height: .3rem;
  color: #32353a;
  margin-bottom: .3rem
}
.bot-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 100;
  box-sizing: border-box;
  width: 100%;
  height: 1rem;
  padding-top: .05rem;
  background: url(../img/teamup/bot-bg.png) center center no-repeat;
  background-size: 100% 100%
}
.bot-wrap .bot-cen {
  position: relative;
  width: 15.22rem;
  height: .86rem;
  margin: 0 auto
}
.bot-wrap .tnav-cont {
  box-sizing: border-box;
  width: 15.22rem;
  height: .86rem;
  padding: 0 .17rem 0 .07rem;
  margin: 0 auto
}
.bot-wrap .tnav-cont .tnav-wrap {
  height: 100%
}
.bot-wrap .tnav-cont .tnav-slide {
  width: 1.81rem;
  height: .86rem;
  margin-left: .04rem
}
.bot-wrap .tnav-cont .tnav-slide::before {
  position: absolute;
  top: 0;
  left: -.11rem;
  width: 2.05rem;
  height: .86rem;
  pointer-events: none;
  content: "";
  background: url(../img/teamup/sm_item-h.png) center center no-repeat;
  background-size: 100% 100%;
  opacity: 0;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease
}
.bot-wrap .tnav-cont .tnav-slide:hover::before, .bot-wrap .tnav-cont .tnav-slide.cur::before {
  opacity: 1
}
.bot-wrap .tnav-cont .tnav-point {
  display: none
}
.bot-wrap .btn-drop {
  position: absolute;
  top: -.36rem;
  left: 50%;
  width: 1.4rem;
  height: .36rem;
  margin-left: -.7rem;
  background: url(../img/teamup/btn-drop.png) center center no-repeat;
  background-size: 100% 100%
}
.bot-wrap .tnav-prev, .bot-wrap .tnav-next {
  width: .24rem;
  height: .35rem;
  margin-left: 0;
  margin-right: 0;
  background: url(../img/blank.png) center center no-repeat;
  background-size: 100% 100%;
  -o-transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  transition: all .3s ease
}
.bot-wrap .tnav-prev.swiper-button-disabled, .bot-wrap .tnav-next.swiper-button-disabled {
  cursor: default;
  pointer-events: none;
  -webkit-opacity: .5;
  -moz-opacity: .5;
  opacity: .5;
  filter: alpha(opacity=50)
}
.bot-wrap .tnav-prev {
  position: absolute;
  top: 50%;
  left: -.56rem;
  margin-top: -.17rem;
  background-image: url(../img/teamup/btn-sprev.png)
}
.bot-wrap .tnav-prev:hover {
  margin-left: -.1rem
}
.bot-wrap .tnav-next {
  position: absolute;
  top: 50%;
  right: -.56rem;
  margin-top: -.17rem;
  background-image: url(../img/teamup/btn-snext.png)
}
.bot-wrap .tnav-next:hover {
  margin-right: -.1rem
}