@charset 'UTF-8';

body {
  font-family: 微软雅黑, 'Microsoft YaHei';
}

.container {
  width: 100%;
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  background: #000;
}
.zhishi {
  position: fixed;
  bottom: .2rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: .72rem;
  height: .44rem;
  background: url("../images/zhishi.png") no-repeat center / cover;
  z-index: 50;
  -webkit-animation: fadeIn 1s infinite ease-in-out;
  animation: fadeIn 1s infinite ease-in-out;
}
@keyframes fadeIn {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

.topnav {
  width: 100%;
  height: 1.02rem;
  background: url("../images/topnav.png") no-repeat center / cover;
  position: relative;
}
.topnav .icon {
  position: absolute;
  top: .15rem;
  left: .16rem;
  width: .8rem;
  height: .8rem;
  background: url("../images/icon.png") no-repeat center / cover;
}
.topnav .title {
  position: absolute;
  top: .42rem;
  left: 1.15rem;
  width: 3.78rem;
  height: .24rem;
  background: url("../images/THEPASCALSWAGER.png") no-repeat center / cover;
}

.topnav .audio-btn {
  position: absolute;
  top: .28rem;
  right: .33rem;
  width: .48rem;
	height: .48rem;
	border: solid 1px #7b6442;
}

.demo2>span {
  position: absolute;
  top: .2rem;
  width: 3px;
  height: 5px;
  background: #826c3f;
  animation: preloader_1 1.5s infinite ease-in-out;
}
.demo2>span:nth-child(1) {
  left: .1rem;
}
.demo2>span:nth-child(2) {
  left: .2rem;
  animation-delay: .2s;
}
.demo2>span:nth-child(3) {
  left: .3rem;
  animation-delay: .4s;
}
@keyframes preloader_1 {
  0% {
    height: 5px;
    transform: translateY(0);
    background: #826c3f;
  }
  50% {
    height: .3rem;
    transform: translateY(-.15rem);
    background: #826c3f;
  }
  100% {
    height: 5px;
    transform: translateY(0);
    background: #826c3f;
  }
}

.sprite {
  background: url("/m/images/v1/sprite.png") no-repeat;
  background-position: 0 0;
  background-size: 7.36rem 3.79rem;
}

.section1 {
  height: 13.6rem;
  background: url("../images/top_bg.jpg") no-repeat center / cover;
  position: relative;
}
.section1 .vedio-wrap {
  position: absolute;
  top: 7.6rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 1.36rem;
  height: 1.21rem;
}
.section1 .vedio-wrap .sjx {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: .56rem;
  height: .6rem;
  background-position: -.84rem 0;
}

.section1 .vedio-wrap .sjx .v-btn {
  position: absolute;
  top: -.3rem;
  left: -.48rem;
  width: 1.36rem;
  height: 1.21rem;
  background: url("/m/images/v1/v_cri.png") no-repeat center / cover;
  -webkit-animation: rotate 2.5s infinite linear;
  animation: rotate 2.5s infinite linear;
}
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotate {
  0% { -webkit-transform: rotate(0); }
  100% { -webkit-transform: rotate(360deg); }
}
.section1 .slogan {
  position: absolute;
  top: 8.93rem;
  left: .21rem;
  width: 7.07rem;
  height: 1.72rem;
  background: url("/m/images/v1/solgan.png") no-repeat center / cover;
  -webkit-animation: bounceInDown 1.5s 1 both;
  animation: bounceInDown 1.5s 1 both;
}
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    filter:alpha(opacity=0);
    transform: translate3d(0, -3000px, 0);
  }

  60% {
    opacity: 1;
    filter:alpha(opacity=100);
    transform: translate3d(0, 25px, 0);
  }

  75% {
    transform: translate3d(0, -10px, 0);
  }

  90% {
    transform: translate3d(0, 5px, 0);
  }

  to {
    transform: none;
  }
}
.section1 .yy-btn {
  position: absolute;
  top: 11.27rem;
  left: .62rem;
  width: 6.27rem;
  height: 1.02rem;
  background: url("/m/images/v1/yy_btn.png") no-repeat center / cover;
  -webkit-animation: fadeInUp 1s 1 both;
  animation: fadeInUp 1s 1 both;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    filter:alpha(opacity=0);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    filter:alpha(opacity=100);
    transform: none;
  }
}
.section1 p {
  position: absolute;
  top: 12.43rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: FangSong;
	font-size: .24rem;
	color: rgb(176, 135, 77);
}

/* 角色介绍 */
.section2 {
  width: 100%;
  height: 13rem;
  padding-top: 1.7rem;
  background: url("/m/images/v1/hero_bg.jpg") no-repeat center / cover;
}
.section2 .hero-container {
  width: 100%;
  height: 11.3rem;
}
.section2 .hero-list {
  height: 9.5rem;
}
.section2 .hero-list {
  width: 100%;
  height: 9.5rem;
}
.section2 .hero-list img {
  width: 100%;
  height: 100%;
}

.section2 .hero-container .swiper-pagination .swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.78rem;
  border-radius: 0;
  opacity: 1;
  margin: 0;
}
.section2 .hero-container .swiper-pagination .swiper-pagination-bullet:nth-child(1) {
  background: url("../images/tl.png") no-repeat center / cover;
}
.section2 .hero-container .swiper-pagination .swiper-pagination-bullet:nth-child(2) {
  background: url("../images/wa.png") no-repeat center / cover;
}

.section2 .hero-container .swiper-pagination .swiper-pagination-bullet:nth-child(1).swiper-pagination-bullet-active {
  background: url("../images/tl_on.png") no-repeat center / cover;
}

.section2 .hero-container .swiper-pagination .swiper-pagination-bullet:nth-child(2).swiper-pagination-bullet-active {
  background: url("../images/wa_on.png") no-repeat center / cover;
}

.section2 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0;
}
.section2 .swiper-button-prev, .section2 .swiper-button-next {
  width: .42rem;
  height: .72rem;
  margin-top: -1.5rem;
}
.section2 .swiper-button-prev {
  background: url("../images/left.png") no-repeat center / cover;
}
.section2 .swiper-button-next {
  background: url("../images/right.png") no-repeat center / cover;
}

.section3 {
  width: 100%;
  height: 13rem;
}
.section3 .swiper-wrapper {
  width: 100%;
  height: 13rem;
}
.section3 .swiper-wrapper .swiper-slide {
  width: 100%;
  height: 12.64rem;
}
.section3 .swiper-wrapper img {
  width: 100%;
  height: 100%;
}
.section3 .swiper-container .swiper-pagination {
  bottom: 0;
}

.section3 .swiper-button-prev, .section3 .swiper-button-next {
  width: .42rem;
  height: .72rem;
  margin-top: -1.5rem;
}

.section3 .swiper-button-prev {
  background: url("/m/images/v1/left.png") no-repeat center / cover;
}
.section3 .swiper-button-next {
  background: url("/m/images/v1/right.png") no-repeat center / cover;
}

.section3 .swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: .2rem;
	height: .2rem;
  background-color: #7b6442;
  border-radius: 0;
  opacity: 1;
}

.section3 .swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  border: solid 2px #ba985d;
  background: transparent;
}

.section4 {
  width: 100%;
  height: 4.3rem;
  margin-top: .3rem;
  background: url("/m/images/v1/geci.jpg") no-repeat center / cover;
}
.section5 {
  width: 100%;
  height: 7.37rem;
  background: url("/m/images/v1/join_bg.jpg") no-repeat center / cover;
  position: relative;
}
.section5 .join-btn {
  position: absolute;
  top: 6rem;
  left: 2.48rem;
  width: 2.54rem;
  height: .7rem;
}
.section6 {
  height: 2rem;
  text-align: center;
  background: url("/m/images/v1/shequ_bg.jpg") no-repeat center / cover;
  font-size: 0;
  padding-top: .52rem;
}
.section6 a {
  display: inline-block;
  width: .96rem;
  height: .96rem;
  margin-right: .6rem;
}
.section6 a.wechat {
  background: url("/m/images/v1/wechat.png") no-repeat center / cover;
}
.section6 a.weibo {
  background: url("/m/images/v1/weibo.png") no-repeat center / cover;
}
.section6 a.tb {
  background: url("/m/images/v1/tb.png") no-repeat center / cover;
}
.section6 a.qq {
  margin-right: 0;
  background: url("/m/images/v1/QQ.png") no-repeat center / cover;
}

/* 底部通用 */
.footer {
  padding: .3rem;
  position: relative;
}
.footer p {
  font-size: .24rem;
  color: #866945;
  text-align: center;
  line-height: .4rem;
}
.footer p a {
  color: #866945;
}
.footer .gotop {
  position: absolute;
  bottom: .4rem;
  right: .3rem;
  width: .6rem;
  height: .6rem;
  background: url("../images/gotop.png") no-repeat center / cover;
}
/* 底部通用 */

.bottom-nav {
  width: 100%;
  height: 1.1rem;
  background: url("../images/bottom_nav.jpg") no-repeat center / cover;
  font-size: 0;
}
.bottom-nav a {
  display: inline-block;
  width: 33.33%;
  height: 100%;
}


/* 英雄详情 */
.hero-detail .detail-bg {
  width: 100%;
  height: 15.66rem;
  background: url("../images/det_bg.jpg") no-repeat center / cover;
  overflow: hidden;
}

.hero-detail .detail-bg .logo {
  display: block;
  width: 4.55rem;
  height: 1.27rem;
  margin: .2rem auto;
}

.hero-detail .detail-bg .d-tls {
  display: block;
  width: 100%;
  height: 12.2rem;
  margin-top: .6rem;
}
.hero-detail .detail-bg .fhml {
  display: block;
  width: 2.54rem;
  height: .7rem;
  margin: .2rem auto;
  background: url("/m/images/v1/fhml.png") no-repeat center / cover;
}
.hero-detail .detail-bg .fhml.en-fhml {
  background: url("../images/back.png") no-repeat center / cover;
}

/* 预约 */
.maks {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .9);
  z-index: 950;
  display: none;
}
.yy-pop {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 7.3rem;
  transform: translateY(-50%);
}
.yy-pop .tt {
  width: 3.38rem;
  height: 1.08rem;
  margin: 0 auto;
  background: url("/m/images/v1/tt.png") no-repeat center / cover;
}
.yy-pop .info {
  width: 6.4rem;
  margin: .5rem auto 0;
}
.yy-pop .info p {
  height: 1rem;
  border-bottom: 1px solid #65543a;
  position: relative;
}
.yy-pop .info p #img-code img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.6rem;
  height: .64rem;
}
.yy-pop .info p #yzm {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.6rem;
  height: .64rem;
  text-align: center;
  line-height: .64rem;
  background: #65543a;
  font-size: .24rem;
  color: #190d03;
}
.yy-pop .info p #yzm.on {
  font-size: .16rem;
}


.yy-pop .info p input {
  width: 100%;
  height: 100%;
  font-size: .32rem;
  color: #65543a;
  background: transparent;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {   
  /* WebKit browsers */
font-family: SimSun;
 color: #65543a;   
 }   
 input:-moz-placeholder, textarea:-moz-placeholder {   
 /* Mozilla Firefox 4 to 18 */   
 font-family: SimSun;
 color: #65543a;   
 }   
 input::-moz-placeholder, textarea::-moz-placeholder {   
  /* Mozilla Firefox 19+ */  
  font-family: SimSun; 
 color: #65543a;   
 }   
 input:-ms-input-placeholder, textarea:-ms-input-placeholder {   
  /* Internet Explorer 10+ */   
  font-family: SimSun;
 color: #65543a;   
 }
 
 .yy-pop .yybtn {
  display: block;
  width: 3.3rem;
  height: .86rem;
  margin: .4rem auto;
  background: url("/images/v1/queren.png") no-repeat center / cover;
 }
 .closed {
  position: absolute;
  top: .3rem;
  right: .3rem;
  width: .6rem;
  height: .6rem;
  background: url("../images/closed.png") no-repeat center / cover;
}

/* 预约成功 */
.success-moda, .coming-soon {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .7);
  z-index: 950;
  display: none;
}
.success-moda .success {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 4.46rem;
  transform: translateY(-50%);
}
.success-moda .success .tt {
  width: 3.9rem;
  height: .9rem;
  margin: 0 auto;
  background: url("/m/images/v1/succ_tt.png") no-repeat center / cover;
}
.success-moda .success p {
  text-align: center;
  color: #8c744c;
  margin-top: .6rem;
  letter-spacing: 1px;
}
.success-moda .success p.t1 {
  font-size: .34rem;
}
.success-moda .success p.t2 {
  font-size: .26rem;
}
.success-moda .success .share-link {
  text-align: center;
  margin-top: .5rem;
}
.success-moda .success .share-link a {
  display: inline-block;
  width: .96rem;
  height: .96rem;
  margin: 0 .1rem;
}
.success-moda .success .share-link a.w1 {
  background: url("/images/v1/w1.png") no-repeat center / cover;
}
.success-moda .success .share-link a.w2 {
  background: url("/images/v1/w2.png") no-repeat center / cover;
}
.success-moda .success .share-link a.w3 {
  background: url("/images/v1/w3.png") no-repeat center / cover;
}
.success-moda .success .share-link a.w4 {
  background: url("/images/v1/w4.png") no-repeat center / cover;
}

/* 敬请期待 */
.coming-soon .cm {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5.9rem;
  height: 3.1rem;
}
.coming-soon img {
  display: block;
  width: 100%;
  height: 100%;
}
.coming-soon .cm .closed {
  top: -.6rem;
  right: 0;
}
#code-mm {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  z-index: 996;
  display: none;
}
#code {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 3.44rem;
  height: 3.44rem;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 999;
}