@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
}
img {
  width: 100%;
  height: 100%
}
.wrap {
  position: relative;
  width: 100%;
  min-width: 1400px;
  padding-bottom: 2.53rem;
  overflow: hidden;
  background: url(../img/heroes/details/bg2.png) center bottom no-repeat;
  background-size: 100% auto
}
.home {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 28.04rem;
  padding-top: .68rem
}
.hero-details {
  position: relative;
  width: 100%;
  height: 10.12rem;
  background: url(../img/heroes/details/bg.jpg) center center no-repeat;
  background-size: cover
}
.hero-details .jyImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.44rem
}
.hero-details .jyImg::after {
  position: absolute;
  bottom: .32rem;
  left: 0;
  width: 100%;
  height: 1.25rem;
  pointer-events: none;
  content: "";
  background: url(../img/heroes/details/bg-top.png) center center no-repeat;
  background-size: cover
}
.hero-details .jyImg img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none
}
.hero-details .jyImg img:nth-child(2) {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  width: 13.37rem;
  height: auto;
  margin-left: -6.32rem;
  pointer-events: none
}
.hero-details .jyImg[data-id="9"] img:nth-child(2) {
  margin-left: -6rem
}
.hero-details .hero-info {
  position: relative;
  box-sizing: border-box;
  width: 6.25rem;
  height: 100%;
  padding-top: 1.25rem;
  margin-left: 1.79rem
}
.hero-details .hero-info .hero-item {
  position: relative;
  box-sizing: border-box;
  left: -1.25rem;
  width: 8.1rem;
  margin-bottom: .33rem
}
.hero-details .hero-info .hero-item img {
  width: auto
}
.hero-details .hero-info .hero-item .assist {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.96rem;
  height: 2.22rem
}
.hero-details .hero-info .hero-item .hero-career {
  position: absolute;
  top: .43rem;
  left: 1.52rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  height: .36rem
}
.hero-details .hero-info .hero-item .hero-career img {
  width: .43rem;
  height: .36rem;
  margin-right: .05rem
}
.hero-details .hero-info .hero-item .hero-career span {
  font-family: RefrigeratorDeluxeBold;
  font-size: .4rem;
  color: #181a26;
  font-style: italic
}
.hero-details .hero-info .hero-item .hero-nick {
  position: absolute;
  top: .85rem;
  left: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 6.85rem;
  min-height: 1.4rem;
  font-family: RefrigeratorDeluxeHeavy;
  font-size: 1.83rem;
  line-height: 1.4rem;
  color: #171925;
  font-style: italic;
  word-wrap: break-word;
  text-indent: -.7rem;
  padding-left: .7rem
}
.hero-details .hero-info .hero-item .hero-nick[data-id='4'] {
  letter-spacing: -2px;
  text-indent: -.3rem;
  padding-left: .3rem
}
.hero-details .hero-info .hero-item .hero-nick[data-id='13'], .hero-details .hero-info .hero-item .hero-nick[data-id='16'] {
  text-wrap: nowrap;
  letter-spacing: -4px
}
.hero-details .hero-info .hero-item .hero-nick[data-id='23'] {
  left: 1.14rem;
  line-height: 1.49rem
}
.hero-details .hero-info .hero-item .hero-nick[data-id='23'] span {
  position: relative;
  left: -.05rem;
  font-size: 1rem;
  line-height: .88rem
}
.hero-details .hero-info .hero-item .hero-nick[data-id='24'], .hero-details .hero-info .hero-item .hero-nick[data-id='25'] {
  text-indent: 0;
  padding-left: 0
}
.hero-details .hero-info .hero-item.style1 {
  height: 3.58rem
}
.hero-details .hero-info .hero-item.style2 {
  height: 2.26rem;
  margin-top: 1.16rem
}
.hero-details .hero-info .hero-item.style3 {
  left: -1.05rem;
  height: 3.12rem;
  margin-top: .4rem
}
.hero-details .hero-info .hero-name {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 6.13rem;
  height: .26rem;
  margin: 0 0 .11rem .14rem;
  border-bottom: 1px rgba(24, 26, 38, .6) solid
}
.hero-details .hero-info .hero-name span {
  position: relative;
  bottom: -.02rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .2rem;
  height: 100%;
  font-family: RefrigeratorDeluxeBold;
  font-size: .24rem;
  font-style: italic;
  color: #fff;
  background: url(../img/heroes/name-bg.png) center center no-repeat;
  background-size: 100% 100%
}
.hero-details .hero-info .hero-intro {
  position: relative;
  width: 6.5rem;
  margin: 0 0 .23rem .14rem
}
.hero-details .hero-info .hero-intro .cont-poa .scroll-box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: .32rem
}
.hero-details .hero-info .hero-intro p {
  font-family: NunitoSans10ptCondensedMedium;
  font-size: .18rem;
  line-height: .32rem;
  color: #32353a
}
.hero-details .hero-info .btn-abilities {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.61rem;
  height: .82rem;
  margin-left: .14rem;
  font-family: RefrigeratorDeluxeHeavy;
  font-size: .4rem;
  color: #181a26;
  background: url(../img/heroes/btn-viewdet.jpg) 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
}
.hero-details .hero-info .btn-abilities img {
  width: .55rem;
  height: .55rem;
  margin-right: .14rem
}
.hero-details .hero-info .btn-abilities i {
  width: .34rem;
  height: .23rem;
  margin-left: .18rem;
  background: url(../img/heroes/i-tri.png) center center no-repeat;
  background-size: 100% 100%
}
.hero-details .hero-info .btn-abilities:hover {
  background-image: url(../img/heroes/btn-viewdet-h.jpg)
}
.hero-details .img-info {
  position: absolute;
  top: .55rem;
  right: 1.1rem;
  width: .09rem;
  height: 5.51rem;
  background: url(../img/heroes/details/img-zs.png) center center no-repeat;
  background-size: 100% 100%
}
.hero-details .img-info .btn-lore {
  position: absolute;
  top: 4.26rem;
  right: .3rem;
  display: flex;
  justify-content: flex-end;
  width: 1.72rem;
  height: .51rem;
  background: url(../img/heroes/details/btn-lore.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
}
.hero-details .img-info .btn-lore img {
  width: auto
}
.hero-details .img-info .btn-lore:hover {
  background-image: url(../img/heroes/details/btn-lore-h.png)
}
.hero-details .img-info .scene-box {
  position: absolute;
  top: 5.31rem;
  right: 0;
  display: none;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 3.61rem;
  height: 2.42rem
}
.hero-details .img-info .scene-box h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .81rem;
  height: .26rem;
  margin-right: .2rem;
  font-family: RefrigeratorDeluxeBold;
  font-size: .24rem;
  color: #fff;
  background: url(../img/heroes/details/scene.png) center center no-repeat;
  background-size: 100% 100%
}
.hero-details .img-info .scene-box .scene-img {
  position: relative;
  width: 3.61rem;
  height: 2.03rem;
  cursor: pointer
}
.hero-details .img-info .scene-box .scene-img::before, .hero-details .img-info .scene-box .scene-img::after {
  box-sizing: border-box;
  width: 3.55rem;
  height: 1.97rem;
  pointer-events: none;
  content: "";
  border: 1px rgba(175, 180, 208, .6) solid
}
.hero-details .img-info .scene-box .scene-img::before {
  position: absolute;
  top: .11rem;
  left: .11rem
}
.hero-details .img-info .scene-box .scene-img::after {
  z-index: 3;
  position: absolute;
  top: .03rem;
  left: .03rem
}
.hero-details .img-info .scene-box .scene-img img {
  position: relative;
  z-index: 2
}
.hero-details .img-info .scene-box .scene-img i {
  position: absolute;
  top: 1.53rem;
  right: 0;
  z-index: 4;
  width: .5rem;
  height: .5rem;
  background: url(../img/heroes/details/i-view.png) center center no-repeat;
  background-size: 100% 100%
}
.hero-details .down-tips {
  position: fixed;
  bottom: .1rem;
  left: 50%;
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.99rem;
  height: .65rem;
  padding: .02rem 0 .18rem;
  margin-left: -1rem;
  font-family: RefrigeratorDeluxeBold;
  font-size: .24rem;
  color: #171925;
  cursor: pointer;
  background: url(../img/heroes/down-tips.png) center center no-repeat;
  background-size: 100% 100%;
  -webkit-animation: down 1.5s ease-in-out infinite 300ms 0 ease;
  -moz-animation: down 1.5s ease-in-out infinite 300ms 0 ease;
  -ms-animation: down 1.5s ease-in-out infinite 300ms 0 ease;
  animation: down 1.5s ease-in-out infinite 300ms 0 ease;
  -o-animation: down 1.5s ease-in-out infinite;
  -webkit-animation: down 1.5s ease-in-out infinite;
  -moz-animation: down 1.5s ease-in-out infinite;
  -ms-animation: down 1.5s ease-in-out infinite;
  animation: down 1.5s ease-in-out infinite
}
.hero-details .hero-prev, .hero-details .hero-next {
  position: absolute;
  top: 50%;
  left: .5rem;
  width: .31rem;
  height: .47rem;
  margin-top: -.24rem;
  background: url(../img/heroes/btn-arrow.png) center center no-repeat;
  background-size: 100% 100%;
  cursor: pointer
}
.hero-details .hero-next {
  right: .5rem;
  left: auto;
  -o-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg)
}
.hero-select {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 17.24rem;
  background: url(../img/heroes/details/bg2.png) center top no-repeat;
  background-size: 100% auto;
  overflow: hidden
}
.hero-select::before {
  position: absolute;
  top: 1.03rem;
  left: 50%;
  width: 18.56rem;
  height: 10.36rem;
  margin-left: -9.28rem;
  pointer-events: none;
  content: "";
  background: url(../img/heroes/details/bg-txt.png) center center no-repeat;
  background-size: 100% 100%
}
.hero-select h2 {
  width: 15.61rem;
  height: .8rem;
  margin: .85rem auto 0
}
.hero-select .select-list {
  display: flex;
  flex-wrap: wrap;
  width: 15.62rem;
  margin: .71rem auto
}
.hero-select .select-list li {
  position: relative;
  width: 1.81rem;
  height: 3.29rem;
  margin: .39rem 0 0 .49rem;
  cursor: pointer
}
.hero-select .select-list li::before {
  position: absolute;
  top: -.02rem;
  left: -.12rem;
  width: 2.06rem;
  height: 3.36rem;
  pointer-events: none;
  content: "";
  opacity: 0;
  background: url(../img/heroes/details/item-h.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
}
.hero-select .select-list li:nth-of-type(-n+7) {
  margin-top: 0
}
.hero-select .select-list li:nth-child(7n-6) {
  margin-left: 0
}
.hero-select .select-list li:hover::before, .hero-select .select-list li.cur::before {
  opacity: 1
}
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  background: transparent !important
}
.pop {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  z-index: -1;
  display: none;
  -webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  width: 100%
}
.pop.on {
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: painted;
  -webkit-animation: fadeIn .3s ease-in-out forwards 300ms 0 ease;
  -moz-animation: fadeIn .3s ease-in-out forwards 300ms 0 ease;
  -ms-animation: fadeIn .3s ease-in-out forwards 300ms 0 ease;
  animation: fadeIn .3s ease-in-out forwards 300ms 0 ease;
  -o-animation: fadeIn .3s ease-in-out forwards;
  -webkit-animation: fadeIn .3s ease-in-out forwards;
  -moz-animation: fadeIn .3s ease-in-out forwards;
  -ms-animation: fadeIn .3s ease-in-out forwards;
  animation: fadeIn .3s ease-in-out forwards
}
.pop.on.flex-start {
  align-items: flex-start
}
.pop .close {
  position: absolute;
  top: .05rem;
  left: 0;
  z-index: 1001;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: .31rem;
  font-family: NunitoSans10ptCondensedMedium;
  font-size: .18rem;
  color: #d2d8e8
}
.pop .close i {
  width: .48rem;
  height: .31rem;
  margin-right: .14rem;
  background: url(../img/heroes/btn-back.png) center center no-repeat;
  background-size: 100% 100%
}
.pop > div {
  position: relative;
  box-sizing: border-box;
  background: url(../img/blank.png) center center no-repeat;
  background-size: 100% 100%
}
.pop > div.layer {
  position: fixed;
  right: 0;
  bottom: 0;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 16, .9)
}
.story-box {
  box-sizing: border-box;
  width: 13.02rem;
  height: 5rem;
  padding-top: .82rem
}
.story-box h2 {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .5rem;
  padding-bottom: .17rem;
  font-family: RefrigeratorDeluxeHeavy;
  font-size: .54rem;
  line-height: .5rem;
  color: #d2d8e8;
  text-align: center
}
.story-box h2 .s-line {
  position: absolute;
  bottom: .03rem;
  left: 50%;
  width: 12.38rem;
  height: .02rem;
  margin-left: -6.19rem;
  background: rgba(142, 150, 183, .5)
}
.story-box h2 .s-line::before, .story-box h2 .s-line::after {
  position: absolute;
  top: -.03rem;
  left: -.15rem;
  width: .17rem;
  height: .08rem;
  pointer-events: none;
  content: "";
  background: url(../img/heroes/p-tit-i.png) center center no-repeat;
  background-size: 100% 100%
}
.story-box h2 .s-line::after {
  left: auto;
  right: -.12rem;
  -o-transform: rotate(-270deg);
  -webkit-transform: rotate(-270deg);
  -moz-transform: rotate(-270deg);
  -ms-transform: rotate(-270deg);
  transform: rotate(-270deg)
}
.story-box .story-cont {
  position: relative;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .08)
}
.story-box .story-cont .cont-poa {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: .2rem .07rem .2rem .22rem
}
.story-box .story-cont .cont-poa .scroll-box {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-right: .27rem
}
.story-box .story-cont .cont-poa .scroll-box p {
  margin-top: .3rem;
  font-family: NunitoSans10ptCondensedMedium;
  font-size: .26rem;
  line-height: .45rem;
  color: #fff
}
.story-box .story-cont .cont-poa .scroll-box p:first-child {
  margin-top: 0
}
.largeImg-pop .largeImg-box {
  width: 12rem;
  height: 6.75rem
}
.largeImg-pop .largeImg-box::before, .largeImg-pop .largeImg-box::after {
  z-index: 2;
  width: 100%;
  height: .15rem;
  pointer-events: none;
  content: "";
  background: url(../img/blank.png) center center no-repeat;
  background-size: 100% 100%
}
.largeImg-pop .largeImg-box::before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../img/line-top.png)
}
.largeImg-pop .largeImg-box::after {
  position: absolute;
  bottom: 0;
  left: 0;
  background-image: url(../img/line-bot.png)
}
.largeImg-pop .largeImg-box .btn-prev, .largeImg-pop .largeImg-box .btn-next {
  width: 1.13rem;
  height: .5rem;
  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
}
.largeImg-pop .largeImg-box .btn-prev.swiper-button-disabled, .largeImg-pop .largeImg-box .btn-next.swiper-button-disabled {
  opacity: .5;
  cursor: default
}
.largeImg-pop .largeImg-box .btn-prev {
  position: absolute;
  top: 50%;
  left: -1.6rem;
  margin-top: -.25rem;
  background-image: url(../img/btn-prev.png)
}
.largeImg-pop .largeImg-box .btn-prev:hover {
  background-image: url(../img/btn-prev-h.png)
}
.largeImg-pop .largeImg-box .btn-prev.swiper-button-disabled:hover {
  background-image: url(../img/btn-prev.png)
}
.largeImg-pop .largeImg-box .btn-next {
  position: absolute;
  top: 50%;
  right: -1.6rem;
  margin-top: -.25rem;
  background-image: url(../img/btn-next.png)
}
.largeImg-pop .largeImg-box .btn-next:hover {
  background-image: url(../img/btn-next-h.png)
}
.largeImg-pop .largeImg-box .btn-next.swiper-button-disabled:hover {
  background-image: url(../img/btn-next.png)
}
.largeImg-pop .largeImg-box .btn-back {
  position: absolute;
  right: 0;
  bottom: -.44rem;
  box-sizing: border-box;
  width: 1.76rem;
  height: .31rem;
  padding-left: .41rem;
  font-size: .18rem;
  line-height: .31rem;
  color: #fff;
  text-align: center;
  background: url(../img/btn-back.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
}
.largeImg-pop .largeImg-box .btn-back:hover {
  background-image: url(../img/btn-back-h.png)
}