/* 
    CSS Document 
    author xuyan 2025-02-14
*/

@font-face {
  font-family: 'FZHuaSiKeXianTiS';
  src: url('../font/FZHUASKXTS-M--GB1-0.woff2') format('woff2'),
      url('../font/FZBWKSJW--GB1-0.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 导航 */
.header{ position: fixed; left: 0; top: 0; right: 0; height: .64rem; z-index: 9; }
.header-main{ width: 100%; height: .64rem; background: rgba(24, 24, 24, .75); position: relative; display: flex; justify-content: center; animation-duration: .4s; -webkit-animation-duration: .4s; -moz-animation-duration: .4s; -o-animation-duration: .4s; -ms-animation-duration: .4s;  }
.logo{ position: absolute; top: 0; left: .23rem; display: block; }
.logo img{ height: 1.05rem;}
.nav{ overflow: hidden; margin: 0 auto; background: url(../img/header_line.png) top right no-repeat; background-size: auto 100%; }
.nav li{ float: left; width: 1.98rem; text-align: center; position: relative; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; background: url(../img/header_line.png) no-repeat; background-size: auto 100%; }
.nav li a{ display: flex; width: 100%; height: .64rem; align-items: center; justify-content: center; color: #ab976f; font-size: .2rem; position: relative; }
.nav li a::before,.nav li a::after{ display: block; content: ''; width: .16rem; height: .14rem; margin: 0 .15rem; background: url(../img/icon.png) -.35rem 0 no-repeat; background-size: 5rem auto; opacity: 0; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform opacity; transition-property: transform opacity; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.nav li.on a{ background: url(../img/nav_on.png) no-repeat; background-size: 100% 100%; color: #d7bb85; }
.nav li:hover a{ color: #d7bb85;}
.nav li:hover a::before{ -webkit-transform: translateX(.07rem); transform: translateX(.07rem); opacity: 1; }
.nav li:hover a::after{ -webkit-transform: translateX(-.07rem); transform: translateX(-.07rem); opacity: 1; }
.nav li.on a::before,.nav li.on a::after{ opacity: 1;}
.nav li.on:hover a::before,.nav li.on:hover a::after{ -webkit-transform: translateX(0); transform: translateX(0); }
.index-music{ position: absolute; top: .14rem; right: .32rem; cursor: pointer; z-index: 2; width: 1.25rem; padding-right: .05rem; height: .34rem; border-radius: .18rem; border: .01rem solid #483d32; display: flex; align-items: center; justify-content: center; font-size: .18rem; color: #998765; }
.index-music::after{ display: inline-block; content: '关'; color: #6b542a; }
.index-music em{ width: .4rem; height: .4rem; background: url(../img/icon.png) 0 -2.16rem no-repeat; background-size: 5rem auto; display: inline-block; margin-right: .02rem; }
.index-music.on em{ background: url(../img/music_on.gif) no-repeat; background-size: 100% auto; }
.index-music.on::after{ content: '开';}
.sidebar{ position: fixed; bottom: .6rem; right: .25rem; width: .82rem; height: 2.7rem;  z-index: 5; }
.sidebar li{ position: relative; margin-top: -.01rem; }
.sidebar li a{ display: block; width: .54rem; height: .51rem; padding-top: .1rem; margin: 0 auto; background: url(../img/icon.png) 0 -3.73rem no-repeat; background-size: 5rem auto; text-align: center; }
.sidebar li em{ width: .27rem; height: .31rem; background-position: 0 -2.97rem; }
.sidebar li em.dy{ background-position: -.35rem -2.97rem;}
.sidebar li em.wx{ background-position: -.72rem -2.97rem;}
.sidebar li em.bz{ background-position: -1.1rem -2.97rem;}
.sidebar li a:hover em.rw{ background-position: 0 -3.34rem;}
.sidebar li a:hover em.dy{ background-position: -.35rem -3.34rem;}
.sidebar li a:hover em.wx{ background-position: -.72rem -3.34rem;}
.sidebar li a:hover em.bz{ background-position: -1.1rem -3.34rem;}
.side-down{ width: 0; position: absolute; left: -1.3rem; top: -.5rem; opacity: 0; transition: opacity .7s ease; }
.sidebar li:hover .side-down{ opacity: 1; width: 1.34rem; }
.to-top{ display: block; width: .38rem; height: .42rem; background-position: -.59rem -3.73rem; margin: .1rem auto 0; }
.to-top:hover{ background-position: -1.01rem -3.73rem;}
.for-mp3{ width: 0; height: 0; opacity: 0; }

/* loading */
.loading{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 100; background: #cac5a7 url(../img/loading.jpg) no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; }
.load-img{ display: block; width: 3.13rem; }

/* 第一屏 */
.page1{ height: 9.3rem; background: url(../img/bg1.jpg) center center no-repeat; background-size: cover; position: relative; }
.page1::before{ display: block; content: ''; z-index: 1; position: absolute; right: 0; bottom: 0; width: 7.94rem; height: 2.97rem; background: url(../img/index_fade.png) no-repeat; background-size: 100% auto; }
.page1::after{ display: block; content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .2); }
.index-video{ width: 100%; height: 100%; object-fit: cover; }
.sgs-tag{ position: absolute; top: 1.14rem; left: .52rem; width: 2.5rem; }
.age{ position: absolute; z-index: 2; width: .61rem; left: .3rem; bottom: .56rem; cursor: pointer; }
.games{ position: absolute; z-index: 3; width: 3.86rem; height: 1.18rem; left: 50%; bottom: 1.4rem; margin-left: -1.93rem; overflow: hidden; }
.download-code{ float: left; width: 1.03rem; height: 1.5rem; background: #fffdf6 url(../img/code_bg.jpg) no-repeat; background-size: 100% auto; padding: .13rem 0 0; position: relative; }
.download-code img{ width: .78rem; display: block; margin: 0 auto; }
.down-line{ width: .97rem; height: .02rem; background: rgba(255, 90, 0, .8); position: absolute; left: .03rem; top: .03rem; box-shadow: 0 0 .03rem .02rem rgba(255, 90, 0, .4); animation: scan 4s linear infinite; }
@keyframes scan {
  0% {
    top: 0;
    transform: translateY(-100%);
  }
  100% {
    top: 100%;
    transform: translateY(0);
  }
}
.play-btn{ display: block; width: 2.7rem; height: 1.18rem; float: right; background: #d64325; background: -webkit-linear-gradient(bottom, #ce301a, #dc512c); background: -o-linear-gradient(bottom, #ce301a, #dc512c); background: -moz-linear-gradient(bottom, #ce301a, #dc512c); background: linear-gradient(to bottom, #ce301a, #dc512c); position: relative; font-size: 0; overflow: hidden; }
.play-btn em{ position: relative; z-index: 2; display: block; width: 100%; height: 100%; background: url(../img/down.png) -2.97rem 0; background-size: 6rem auto; width: 2.63rem; height: 1.14rem; margin: .02rem auto 0; }
.play-btn span{ width: 1.52rem; height: 1.52rem; background: url(../img/down.png) 0 -1.22rem no-repeat; background-size: 6rem auto; display: block; position: absolute; left: 50%; top: 50%; margin: -.76rem 0 0 -.76rem; transition: transform 0.2s ease-out; animation: four_play 6s .1s linear infinite; -webkit-animation: four_play 6s .1s linear infinite; -moz-animation: four_play 6s .1s linear infinite; }
.play-btn:hover span{ animation-play-state: paused;}
@keyframes four_play {
	from { 
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
	  }
	to {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg);
	 }
}
@-moz-keyframes four_play {
	from {
	  -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
	  }
	to {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg);
	  }
}
@-webkit-keyframes four_play {
	from {
      -webkit-transform: rotate(0deg);
	  -moz-transform: rotate(0deg);
	  transform: rotate(0deg);
	  }
	to {
	  -webkit-transform: rotate(360deg);
	  -moz-transform: rotate(360deg);
	  transform: rotate(360deg);
	  }
}
.download{ position: absolute; z-index: 3; bottom: .56rem; left: 1.27rem; height: .92rem; }
.download-phone{ width: 1.41rem; float: left; }
.download-phone a{ display: flex; width: 1.41rem; height: .43rem; position: relative; justify-content: center; align-items: center; font-size: 0; overflow: hidden; background: url(../img/down.png) 0 0 no-repeat; background-size: 6rem auto; }
.download-phone a.az{ background-position: 0 -.49rem; margin-top: .06rem; }
.download-phone a em,.download-pc em{ width: 1rem; height: .27rem; background: url(../img/down.png) -1.88rem -1.29rem no-repeat; background-size: 6rem auto;-webkit-transition: -webkit-transform 0.2s linear; -moz-transition: -moz-transform 0.2s linear; transition: transform 0.2s linear; -webkit-transform: scale(.9); transform: scale(.9); z-index: 2; }
.download-phone a.az em{ width: 1.14rem; height: .18rem; background-position: -1.88rem -2.06rem; }
.download-phone a:hover em{ background-position: -1.88rem -1.64rem; -webkit-transform: scale(1); transform: scale(1); }
.download-phone a.az:hover em{ background-position: -1.88rem -2.06rem; }
.download-pc{ width: .81rem; height: .92rem; background: url(../img/down.png) -1.48rem 0 no-repeat; background-size: 6rem auto; display: flex; align-items: center; justify-content: center; float: left; margin-left: .06rem; position: relative; font-size: 0; }
.download-pc em{ width: .38rem; height: .7rem; background-position: -3.22rem -1.4rem; }
.download-pc:hover em{ background-position: -3.67rem -1.4rem; -webkit-transform: scale(1); transform: scale(1);}
.download-phone a span,.download-pc span{ display: block; position: absolute; left: .03rem; top: .03rem; right: .03rem; bottom: .03rem; border: .01rem solid #eae5d6; }
.download-phone a.az span{ border-color: #c6b081;}
.download-pc span{border-color: #4c493e;}
.download-phone a:hover span{ border-color: #e4c682;}
.download-phone a.az:hover span{ border-color: #dfc99e;}
.download-pc:hover span{ border-color: #887f5f;}
.scroll{ position: absolute; z-index: 2; width: 4.18rem; height: .45rem; background: url(../img/mouse.png) no-repeat; background-size: 100% auto; left: 50%; margin-left: -2.09rem; bottom: .38rem; }
.scroll::before,.scroll::after{ display: block; content: ''; position: absolute; top: .09rem; left: 1.88rem; width: 0; height: 0; border-right: .05rem solid #927947; border-top: .03rem solid transparent; border-bottom: .03rem solid transparent; -webkit-animation: hvrleft .8s .1s ease-in both infinite; -moz-animation: hvrleft .8s .1s ease-in both infinite; animation: hvrleft .8s .1s ease-in both infinite; }
.scroll::after{ border-left: .05rem solid #927947; border-right: 0; -webkit-animation: hvrright .8s .1s ease-in both infinite; -moz-animation: hvrright .8s .1s ease-in both infinite; animation: hvrright .8s .1s ease-in both infinite; left: 2.3rem; }
@-webkit-keyframes hvrleft {
  0% {
    -webkit-transform: translateX(.08rem);
    transform: translateX(.08rem);
  }

  40% {
    -webkit-transform: translateX(.04rem);
    transform: translateX(.04rem);
  }

  100% {
    -webkit-transform: translateX(.08rem);
    transform: translateX(.08rem);
  }
}
@keyframes hvrleft {
  0% {
    -webkit-transform: translateX(.08rem);
    transform: translateX(.08rem);
  }

  40% {
    -webkit-transform: translateX(.04rem);
    transform: translateX(.04rem);
  }

  100% {
    -webkit-transform: translateX(.08rem);
    transform: translateX(.08rem);
  }
}
@-webkit-keyframes hvrright {
  0% {
    -webkit-transform: translateX(-.08rem);
    transform: translateX(-.08rem);
  }

  40% {
    -webkit-transform: translateX(-.04rem);
    transform: translateX(-.04rem);
  }

  100% {
    -webkit-transform: translateX(-.08rem);
    transform: translateX(-.08rem);
  }
}
@keyframes hvrright {
  0% {
    -webkit-transform: translateX(-.08rem);
    transform: translateX(-.08rem);
  }

  40% {
    -webkit-transform: translateX(-.04rem);
    transform: translateX(-.04rem);
  }

  100% {
    -webkit-transform: translateX(-.08rem);
    transform: translateX(-.08rem);
  }
}
.slogan{ display: block; width: .74rem; position: absolute; z-index: 2; left: .7rem; top: 4rem; }

/* 新闻资讯 */
.page2{ height: 8.67rem; padding-top: 1rem; box-sizing: border-box; background: url(../img/bg2.jpg) center top no-repeat; background-size: auto 100%; position: relative; }
.banner{ width: 14rem; margin: 0 auto .95rem; position: relative; overflow: hidden; padding: 0 .1rem .05rem; }
.banner::after{ content: ''; display: block; width: .92rem; height: .39rem; background: url(../img/icon.png) -.45rem -2.16rem no-repeat; background-size: 5rem auto; position: absolute; left: 2.93rem; top: .15rem; z-index: 3; }
.banner-swiper{ width: 11.12rem; height: 2.97rem; float: right; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); margin-top: .05rem; position: relative; }
.banner-swiper a{ display: block; width: 100%; height: 100%; overflow: hidden; position: relative; }
.banner-swiper a img{ display: block; width: 11.12rem; height: 2.97rem; object-fit: cover; }
.banner-page{ position: absolute; left: 0; top: 2.8rem; width: 2.78rem!important; display: flex; justify-content: center; align-items: center; }
.banner-page .swiper-pagination-bullet{ width: .15rem; height: .15rem; border-radius: 50%; opacity: 1; border: .01rem solid #d2bb8c; background: none; font-size: 0; margin: 0 .05rem!important; }
.banner-page .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #d2bb8c; }
.banner-btn{ position: absolute; z-index: 1; bottom: .45rem; right: .5rem; width: 1.8rem; height: .32rem; background: #f4f3ef; border: .01rem solid #dcd3cd; border-radius: .17rem; display: flex; align-items: center; justify-content: center; font-size: .16rem; color: #9c7b5b; }
.banner-btn::before,.banner-btn::after{ display: block; content: ''; width: .13rem; height: .11rem; margin-right: .32rem; background: url(../img/icon.png) -1.47rem 0 no-repeat; background-size: 5rem auto; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.banner-btn::after{ margin-right: 0; margin-left: .32rem; }
.banner-swiper a:hover .banner-btn::before{ -webkit-transform: translateX(.2rem); transform: translateX(.2rem); opacity: 1; }
.banner-swiper a:hover .banner-btn::after{ -webkit-transform: translateX(-.2rem); transform: translateX(-.2rem); opacity: 1; }
.news{ width: 14rem; margin: 0 auto; overflow: hidden; position: relative; padding: 0 .1rem; }
.news-more{ position: absolute; top: 0; right: .1rem; display: flex; align-items: center; font-size: .2rem; color: #404040; height: .34rem; }
.more-icon{ width: .2rem; height: .2rem; border: .01rem solid #d2c8c2; border-radius: .03rem; position: relative; background: #f5ede5; display: block; margin-left: .05rem; }
.more-icon em{ position: absolute; -webkit-transition: 0.3s; transition: 0.3s; display: block; }
.more-icon em.line1{ left: 26%; top: 50%; width: 55%; border-top: .01rem solid #c9b49f; -webkit-transform-origin: right; transform-origin: right;}
.more-icon em.line2{ left: 50%; top: 25%; width: 0; height: 50%; border-left: .01rem solid #c9b49f; -webkit-transform-origin: top; transform-origin: top; }
.news-more:hover .line1{ -webkit-transform: rotate(30deg); transform: rotate(30deg); }
.news-more:hover .line2{ left: 75%; -webkit-transform: translate(0, 50%) rotate(60deg); transform: translate(0, 50%) rotate(60deg); }
.news-more:hover{ color: #82562a;}
.news-list{ overflow: hidden; width: 14.16rem; margin-left: -.21rem; padding: .2rem .05rem; }
.news-list li{ width: 4.56rem; height: 2.28rem; box-sizing: border-box; border: .01rem solid #fff; background: #fff; float: left; margin-left: .16rem;  box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); }
.news-list li a{ display: block; height: 100%; box-sizing: border-box; padding: .25rem .22rem 0; font-size: .18rem; color: #808080; }
.news-top{ white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; font-size: .22rem; color: #404040; padding-bottom: .15rem; border-bottom: .01rem solid #f0ebe6; }
.news-top span{ height: .25rem; line-height: .26rem; overflow: hidden; background: #d2bb8c; border-radius: .03rem; display: inline-block; font-size: .2rem; color: #fffbf1; text-shadow: -.01rem -.01rem 0 #b39450, .01rem -.01rem 0 #b39450, -.01rem  .01rem 0 #b39450, .01rem  .01rem 0 #b39450; vertical-align: middle; margin: -.05rem .15rem 0 0; }
.news-top span::before,.news-top span::after{ display: inline-block; width: .03rem; height: .03rem; background: #ac986c; border-radius: 50%; content: ''; vertical-align: middle; margin: -.03rem .06rem 0; }
.news-info{ margin-top: .1rem; line-height: .28rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.news-time{ margin-top: .25rem; display: flex; align-items: center; justify-content: flex-end; padding-right: .08rem; }
.news-time::before{ display: block; height: .01rem; width: .92rem; background: #bfbfbf; content: ''; margin-right: .12rem; }
.news-list li:hover{ border-color: #d2bb8c;}
.news-list li:hover .news-top{ color: #82562a;}
.no-data{ width: 99%!important; float: inherit; display: flex; align-items: center; justify-content: center; font-size: .22rem; color: #808080; }
.no-data:hover{ border-color: #fff!important; -webkit-transform: translateY(0)!important; transform: translateY(0)!important; }

/* 同人社区 */
.page6{ height: 9.36rem; padding-top: 2.5rem; box-sizing: border-box; background: url(../img/bg3.jpg) center top no-repeat; background-size: auto 100%; position: relative; }
.club{ overflow: hidden; width: 14.16rem; margin-left: -.21rem; padding: .2rem .05rem;}
.club li{ width: 4.56rem; height: 2.72rem; float: left; margin-left: .16rem; margin-bottom: .16rem; background: #fff; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); box-sizing: border-box; padding: .16rem .2rem 0; position: relative; border: .02rem solid #fff; }
.club li a{ display: block; height: 100%; }
.club-top{ padding-left: .7rem; position: relative; height: .66rem; }
.avatar{ position: absolute; left: .05rem; top: 0; width: .56rem; height: .56rem; border-radius: 50%; overflow: hidden; }
.avatar img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.user-name{ font-size: .22rem; color: #404040; height: .26rem; overflow: hidden; padding-top: .02rem; }
.user-info{ display: flex; align-items: center; justify-content: space-between; font-size: .18rem; color: #808080; }
.club-name{ font-size: .18rem; color: #404040; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; padding-top: .15rem; border-top: .01rem solid #f0ebe6; }
.club-name.long{ border: 0; padding-top: .12rem; }
.club-info{ color: #999; font-size: .18rem; line-height: .28rem; margin-top: .08rem; position: relative; height: .56rem; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.club-info::after{ display: ''; content: '全文'; position: absolute; top: .28rem; right: 0; font-size: .18rem; color: #cc1818; line-height: .28rem; padding-left: .2rem; background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%); }
.club-next{ font-size: .18rem; color: #808080; position: absolute; left: .2rem; right: .2rem; bottom: .18rem; overflow: hidden; }
.club-tag{ height: .24rem; line-height: .24rem; border-radius: .12rem; font-size: .16rem; color: #82562a; padding: 0 .1rem; overflow: hidden; max-width: 1.8rem; float: left; background: #ede9e2; }
.club-more{ display: flex; align-items: center; float: right; }
.club-more span{ display: flex; align-items: center; margin-left: .12rem; }
.club-more span em{ width: .23rem; height: .2rem; background-position: 0 -2.6rem; margin-right: .02rem; }
.club-more span em.reply-icon{ width: .19rem; background-position: -.27rem -2.6rem; }
.club-more span em.like-icon{ width: .19rem; background-position: -.52rem -2.6rem; }
.club-img{ height: 1.3rem; border-radius: .05rem; overflow: hidden; }
.club-img.long{ height: 1.65rem;}
.club-img img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.club li:hover{ border-color: #d2bb8c;}

/* 视听盛宴 */
.page4{ height: 9.92rem; padding-top: 2.15rem; box-sizing: border-box; background: url(../img/bg4.jpg) center top no-repeat; background-size: auto 100%; position: relative; }
.media{ overflow: hidden; width: 14.16rem; margin-left: -.21rem; padding: .2rem .05rem; }
.media li{ width: 4.56rem; height: 2.71rem; float: left; margin-left: .16rem; margin-bottom: .16rem; background: #fff; border-radius: .1rem .1rem 0 0; box-shadow: 0 0 .05rem 0 rgba(148, 113, 77, .2); cursor: pointer; }
.media li a{ display: block; height: 100%; }
.media-img{ height: 1.84rem; border-radius: .1rem; overflow: hidden; position: relative; box-sizing: border-box; }
.media-img em{ width: .37rem; height: .37rem; background-position: -1.48rem -2.22rem; position: absolute; z-index: 2; left: 50%; top: 50%; margin: -.185rem 0 0 -.185rem; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); transform:scale(1.5); }
.media-name{ margin: 0 .17rem; height: .46rem; line-height: .46rem; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden; font-size: .22rem; color: #404040; border-bottom: .01rem solid #f2f2f2; }
.media-name span{ display: inline-block; color: #fffbf1; font-size: .18rem; text-shadow: -.01rem -.01rem 0 #b39450, .01rem -.01rem 0 #b39450, -.01rem  .01rem 0 #b39450, .01rem  .01rem 0 #b39450; vertical-align: middle; margin: -.05rem .15rem 0 0; width: .74rem; height: .21rem; line-height: .22rem; text-align: center; background-position: -1.52rem -1.73rem; overflow: hidden; }
.media-next{ display: flex; align-items: center; justify-content: space-between; font-size: .18rem; color: #808080; padding: 0 .2rem; height: .4rem; line-height: .4rem; }
.media-next em{ width: .15rem; height: .15rem; background-position: -1.54rem -2.02rem; vertical-align: middle; margin: -.03rem .05rem 0 0; }
.media li:hover .media-img{ border: .03rem solid #d2bb8c;}
.media li:hover .media-img::after{ display: block; content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .5); }
.media li:hover .media-img em{ opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
.media li.imgs .media-next em{ background-position: -1.75rem -2.02rem;}
.media li.imgs .media-img em,.media li.imgs:hover .media-img::after{ display: none;}

/* 武将 */
.page3{ height: 9.3rem; background: #000; position: relative; }
.heros{ height: 100%; position: relative; }
.heros::after{ display: block; content: ''; width: 14.43rem; height: 4.57rem; background: url(../img/hero_nav.png?v1) no-repeat; background-size: 100% auto; position: absolute; z-index: 2; bottom: 0; right: 0; pointer-events: none; }
.hero-nav{ position: absolute; z-index: 3; width: 5.99rem; height: .63rem; bottom: 2.05rem; right: 2.4rem; background: url(../img/hero_line.png) center .22rem no-repeat; background-size: 5.99rem auto; box-sizing: border-box; padding-left: .95rem; }
.hero-nav li{ font-size: 0; width: .42rem; height: .42rem; background: url(../img/icon.png) 0 -.36rem no-repeat; background-size: 5rem auto; cursor: pointer; float: left; margin: 0 .18rem; position: relative; }
.hero-nav li.hnav2{ background-position: -.46rem -.36rem;}
.hero-nav li.hnav3{ background-position: -.92rem -.36rem;}
.hero-nav li.hnav4{ background-position: -1.4rem -.36rem;}
.hero-nav li.on::after{ display: block; content: ''; width: .6rem; height: .68rem; position: absolute; left: -.08rem; top: -.08rem; background: url(../img/icon.png) 0 -.86rem no-repeat; background-size: 5rem auto; }
.hero-more{ display: block; float: left; width: .8rem; height: .22rem; color: #82562a; font-size: .18rem; border: .01rem solid #cdb5a4; background: #fff9ee; border-radius: .12rem; text-align: center; line-height: .22rem; margin: .1rem 0 0 .27rem;}
.hero-guide{ position: absolute; z-index: 5; right: 2.25rem; bottom: .7rem; width: 6.6rem; height: 1.4rem; }
.hero-guide.three{ width: 4.38rem; right: 3.36rem;}
.hero-guide.three .hero-thumbs{ width: 3.33rem;}
.hero-guide.four{ width: 5.49rem; right: 2.8rem;}
.hero-guide.four .hero-thumbs{ width: 4.44rem;}
.hero-thumbs{ width: 5.55rem; margin: 0 auto; }
.hero-thumbs .swiper-slide{ padding: .27rem 0; width: 1.11rem; }
.general{ width: .84rem; height: .84rem; border-radius: 50%; border: .01rem solid #b7a087; position: relative; cursor: pointer; margin: 0 auto; overflow: hidden; }
.general p{ width: .84rem; height: .84rem; border-radius: 50%; overflow: hidden; }
.general img{ width: .84rem; height: .84rem; object-fit: cover; border-radius: 50%; overflow: hidden; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); }
.general:hover img{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1);}
.general::before{ display: block; content: ''; width: .84rem; height: .84rem; background: rgba(0, 0, 0, .5); position: absolute; left: 0; top: 0; border-radius: 50%; z-index: 2; }
.end .general::before{ display: none;}
.hero-thumbs .swiper-slide.swiper-slide-thumb-active .general{ overflow: initial; border-color: transparent; }
.hero-thumbs .swiper-slide.swiper-slide-thumb-active .general:hover img{ -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1);}
.hero-thumbs .swiper-slide.swiper-slide-thumb-active .general::before{ width: 1.24rem; height: 1.4rem; background: url(../img/hero_on.png) no-repeat; background-size: 100% auto; top: 50%; left: 50%; margin: -.7rem 0 0 -.62rem; border-radius: 0; }
.hero-prev,.hero-next{ width: .33rem; height: .38rem; background: url(../img/icon.png) 0 -1.71rem no-repeat; background-size: 5rem auto; position: absolute; z-index: 3; top: .5rem; left: 0; cursor: pointer; }
.hero-next{ right: 0; left: auto; background-position: -.37rem -1.71rem; }
.hero-prev:hover{ background-position: -.73rem -1.71rem;}
.hero-next:hover{ background-position: -1.1rem -1.71rem;}
.general:hover::before{ display: none; }
.hero-thumbs .swiper-slide.swiper-slide-thumb-active .general:hover::before{ display: block;}
.hero-main{ position: relative; height: 9.3rem; }
.hero-main .swiper-slide::after{ display: block; content: ''; position: absolute; z-index: 3; left: 0; top: 0; width: 5.89rem; height: 2.51rem; background: url(../img/hero_nav2.png) no-repeat; background-size: 100% auto; }
.h-fade,.h-fade2{ display: block; content: ''; background: rgba(0, 0, 0, .4); position: absolute; left: 0; top: 0; right: 0; bottom: 0; pointer-events: none; }
.h-fade2{ display: none;}
.hero-video{ width: 100%; height: 100%; object-fit: cover; }
.hero-img{ height: 9.3rem; display: block; pointer-events: none; }
.hero-name{ position: absolute; z-index: 4; width: .89rem; height: 2.28rem; background: url(../img/tag1.png) no-repeat; background-size: 100% auto; font-size: .24rem; right: 1.9rem; top: .5rem; text-align: center; box-sizing: border-box; padding-top: .8rem; }
.hero-name span{ background-image: -webkit-gradient(linear, 1.8% 0, 1.5% bottom, from(#c0a272), to(#fff1ad)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; display: inline-block; width: .36rem; margin-left: .03rem; }
.caption{ height: 7.7rem; width: 1.12rem; padding-top: .48rem; box-sizing: border-box; position: absolute; z-index: 4; left: 1.55rem; top: .55rem; background: url(../img/hero_nav_line.png) .94rem 0 no-repeat; background-size: .09rem 7.7rem; }
.caption li{ height: .3rem; line-height: .3rem; margin-bottom: .52rem; font-size: .2rem; color: #d2bb8c; position: relative; cursor: pointer; }
.caption li.on::after{ display: block; content: ''; width: .28rem; height: 1.04rem; background: url(../img/hero_dot.png) no-repeat; background-size: 100% auto; position: absolute; right: 0; top: 50%; margin-top: -.52rem; }
.caption li.on{ text-shadow: 0 0 .02rem #cda342, 0 0 .08rem #ffc949; color: #fff7d1; }
.caption-main{ position: absolute; z-index: 4; left: 3.5rem; top: .9rem; width: 5.7rem; color: #fff; max-height: 8rem; overflow-y: auto; padding-right: .1rem; }
.caption-main::-webkit-scrollbar{ display: none; }
.caption-main{ -ms-overflow-style: none; }
.caption-main{ scrollbar-width: none; }
.caption-main p{ font-size: .18rem; color: #fff; line-height: .26rem; padding-bottom: .25rem; margin-bottom: .1rem; background: url(../img/hero_line2.png) left bottom no-repeat; background-size: 5.66rem auto; }
.caption-main p:last-child{ background: none;}
.caption-main p span{ color: #d2bb8c; }
.caption-main h5{ display: flex; align-items: center; font-size: .26rem; color: #d9c69a; margin-bottom: .05rem; }
.caption-main h5::before{ display: inline-block; content: ''; width: .3rem; height: .3rem; background: url(../img/icon.png) -1.68rem 0 no-repeat; background-size: 5rem auto; margin-right: .03rem; }
.hero-label{ display: flex; align-items: center; justify-content: center; height: .26rem; margin-left: .1rem; overflow: hidden; border-radius: .04rem; color: #fff; font-size: .18rem; width: .92rem; text-align: center; background: rgba(221, 179, 94, .5); text-shadow: -.01rem -.01rem 0 #806a3d, .01rem -.01rem 0 #806a3d, -.01rem .01rem 0 #806a3d, .01rem .01rem 0 #806a3d; }
.hero-label::before,.hero-label::after{ display: inline-block; width: .03rem; height: .03rem; border-radius: 50%; content: ''; background: rgba(255, 255, 255, .5); margin: 0 .05rem; }
.hero-label.b-green{ background: rgba(155, 210, 140, .5); text-shadow: -.01rem -.01rem 0 #436936, .01rem -.01rem 0 #436936, -.01rem .01rem 0 #436936, .01rem .01rem 0 #436936; }
.hero-label.b-org{ background: rgba(210, 156, 140, .5); text-shadow: -.01rem -.01rem 0 #875743, .01rem -.01rem 0 #875743, -.01rem .01rem 0 #875743, .01rem .01rem 0 #875743; }
.hero-label.b-blue{ background: rgba(91, 121, 216, .5); text-shadow: -.01rem -.01rem 0 #35487b, .01rem -.01rem 0 #35487b, -.01rem .01rem 0 #35487b, .01rem .01rem 0 #35487b; }
.dub-list{ background: url(../img/hero_line2.png) left bottom no-repeat; background-size: 5.66rem auto; overflow: hidden; padding-bottom: .1rem; margin-bottom: .2rem; padding-top: .25rem; }
.dub-list:last-child{ background: none;}
.caption-main .cv-info{ height: .36rem; line-height: .36rem; background: none; padding-bottom: 0; margin-bottom: .25rem; display: inline-block; background: #d9c69a; padding: 0 .5rem 0 .15rem; border-radius: .03rem; position: relative; }
.caption-main .cv-info::before{ display: inline-block; content: ''; position: absolute; left: .1rem; top: -.07rem; width: 0; height: 0; border-left: .07rem solid transparent; border-right: .07rem solid transparent; border-bottom: .08rem solid #d9c69a; }
.caption-main .cv-info span{ font-size: .2rem; height: .36rem; color: #222; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; overflow:hidden; }
.voice-btn{ width: .18rem; height: .18rem; background-position: -.56rem 0; cursor: pointer; position: absolute; right: .08rem; top: .1rem; }
.voice-btn.on{ background: url(../img/cv_play.png) no-repeat; background-size: 100% auto; }
.hero-main .hero-tag{ z-index: 4; right: 2.35rem; left: auto; top: 2.95rem; position: absolute; width: .84rem; height: .7rem; font-size: 0; cursor: pointer;background: url(../img/icon.png) 0 -5.49rem no-repeat; background-size: 5rem auto; }
.hero-main .hero-tag.on{ background-position: -.89rem -5.49rem;}
.hero-person .yin-img{ display: none;}
.hero-person{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; min-width: 12.34rem; background: url(../img/hero_bg.png) top right no-repeat; background-size: auto 100%; }
.hero-person.on .yang-img{ display: none;}
.hero-person.on .yin-img{ display: block;}
.hero-close{ position: absolute; top: 3.5rem; right: 8.4rem; width: .48rem; height: .38rem; background-position: -2.08rem 0; cursor: pointer; pointer-events:auto; z-index: 2; }
.hero-open{ position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 2.3rem; display: flex; align-items: center; justify-content: center; cursor: pointer; background: url(../img/hero_fade.png) repeat-y; background-size: 100% auto; padding-bottom: 2rem; }
.hero-open em{ display: block; width: .48rem; height: .38rem; background-position: -2.59rem 0; }
.intors{ position: absolute; z-index: 4; top: 1.2rem; right: 1.2rem; font-size: .24rem; color: #d2bb8c; line-height: .44rem; width: .44rem; min-height: 4.53rem; background: url(../img/hero_intro.png?v1) center center no-repeat; background-size: 100% auto; display: flex; justify-content: center; flex-wrap: wrap; word-wrap: break-word;writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 5px; }

/* 玩家共创 */
.page5{ height: 10.58rem; padding-top: 3.2rem; box-sizing: border-box; background: url(../img/bg6.jpg) center top no-repeat; background-size: auto 100%; position: relative; }
.event{ width: 14rem; margin: 0 auto; display: flex; justify-content: space-between; }
.event li{ position: relative; overflow: hidden; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform;}
.event img{ height: 6.17rem;}
.event li:hover{ -webkit-transform: scale(1.05); transform: scale(1.05);}
.event-info{ position: absolute; bottom: .14rem; left: 0; right: 0; padding: 1.6rem 0 .25rem; text-align: center; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 45%, rgba(255, 255, 255, 1) 100%); opacity: 0; transition: opacity .5s ease; }
.event-name{ font-size: .48rem; color: #886c36; margin-bottom: .03rem; }
.event-intro{ font-size: .16rem; line-height: .22rem; color: #c6b7aa; font-family: 'FZHuaSiKeXianTiS'; }
.event li:hover .event-info{ opacity: 1;}
.event li:nth-child(2) .event-info,.event li:nth-child(3) .event-info{ left: .08rem; right: .16rem; }
.event .banner-btn{ position: initial; margin: .15rem auto 0; }
.event li:hover .banner-btn::before{ -webkit-transform: translateX(.2rem); transform: translateX(.2rem); opacity: 1; }
.event li:hover .banner-btn::after{ -webkit-transform: translateX(-.2rem); transform: translateX(-.2rem); opacity: 1; }
.famous-btn{ position: absolute; right: .06rem; bottom: .06rem; width: .55rem; display: block; font-size: .16rem; color: #9c7b5b; text-align: center; }
.famous-btn i{ display: block; width: .55rem; height: .55rem; background-position: -3.73rem -4.84rem; }