.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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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{ 
    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(https://gx.88888888woool.com/panlong/icon.png) 0 -2.16rem no-repeat; 
    background-size: 5rem auto; 
    display: inline-block; 
    margin-right: .02rem;

}
.index-music.on em{ 
    background: url(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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 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;

}
.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; 

}
.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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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;

}
.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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/down4b6d.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(https://gx.88888888woool.com/panlong/down4b6d.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(https://gx.88888888woool.com/panlong/down4b6d.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(https://gx.88888888woool.com/panlong/down4b6d.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(https://gx.88888888woool.com/panlong/down4b6d.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(https://gx.88888888woool.com/panlong/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);
  }
}
/* 新闻资讯 */
.page2{ 
    min-height: 8.67rem; 
    padding-top: 1rem; 
    box-sizing: border-box; 
    position: relative; 

}
.page3 {
    height: 9.3rem;
    background: #000;
    position: relative;
    overflow: visible !important;
}

.heros {
    height: 100%;
    position: relative;
    overflow: visible !important;
}

    .heros::after {
        display: block;
        content: '';
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: calc(50% - 50vw);
        right: calc(50% - 50vw);
        min-height: 100%;
        background: url(https://gx.88888888woool.com/panlong/hero_nav6654.png) no-repeat bottom center;
        background-size: 100vw auto;
        pointer-events: none;
    }

.hero-nav{ 
    position: absolute; 
    z-index: 3; 
    width: 5.99rem; 
    height: .63rem; 
    bottom: 2.05rem; 
    right: 2.4rem; 
    background: url(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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.on::after{ 
    display: block; 
    content: ''; 
    width: .6rem; 
    height: .68rem; 
    position: absolute; 
    left: -.08rem; 
    top: -.08rem; 
    background: url(https://gx.88888888woool.com/panlong/icon.png) 0 -.86rem no-repeat; 
    background-size: 5rem auto;

}
.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-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; 
    -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; }
.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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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; 

}
.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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/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(https://gx.88888888woool.com/panlong/hero_intro6654.png) 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; 
}

#b2.page2 {
    padding: 0 !important;
    background: transparent !important;
}

/* 原画欣赏 */
.page4#b4 {
    width: 100%;
    background: url("https://gx.88888888woool.com/panlong/ditu.jpg") no-repeat center center;
    background-size: cover;
}

.art-wrap {
    width: 100%;
    background: transparent;
    padding: 0.6rem 0;
}
.art-section {
    width: 100%;
    max-width: 12rem;
    margin: 0 auto;
    padding: 0 0.2rem;
    box-sizing: border-box;
}

.art-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0.12rem;
}

.art-title {
    font-size: 0.48rem;
    color: #d4b27c;
    font-weight: bold;
    margin: 0;
    position: relative;
}

    .art-title::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -0.12rem;
        width: 1.2rem;
        height: 0.03rem;
        background: #d4b27c;
    }

.art-tab-box {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.art-tab {
    font-size: 0.32rem;
    color: #c9b89c;
    cursor: pointer;
}

    .art-tab.on {
        color: #e6c488;
    }

.art-more-btn {
    background: #b88b4e;
    color: #fff;
    border: none;
    border-radius: 0.08rem;
    font-size: 0.24rem;
    padding: 0.06rem 0.2rem;
    cursor: pointer;
}

.art-divider {
    width: 100%;
    height: 1px;
    background: #998870;
    margin-bottom: 0.3rem;
}

.art-card-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.16rem;
}

.art-card {
    overflow: hidden;
    border-radius: 0.04rem;
    position: relative;
    background: #000;
}

    .art-card img {
        width: 100%;
        height: 1.4rem;
        display: block;
        object-fit: cover;
    }

.art-card-name {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 0.22rem;
    color: #fff;
    text-align: center;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    padding: 0.08rem 0;
}

@media (max-width: 900px) {
    .art-wrap {
        padding: 0.3rem 0;
    }

    .art-card-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .art-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.2rem;
    }
}

@media (max-width: 520px) {
    .art-card-list {
        grid-template-columns: 1fr;
    }
}

.site-footer {
    width: 100%;
    background: #5c1a1a;
    border-top: 0.02rem solid #b88b4e;
    padding: 0.18rem 0 !important;
}
    .footer-inner {
        width: 100%;
        max-width: 12rem;
        margin: 0 auto;
        padding: 0 0.2rem;
        box-sizing: border-box;
        text-align: center;
    }

    .footer-links {
        display: flex;
        justify-content: center;
        gap: 0.3rem;
        margin-bottom: 0.12rem;
    }

        .footer-links a {
            color: #e6c488;
            font-size: 0.14rem;
            text-decoration: none;
        }

            .footer-links a:hover {
                color: #fff;
            }

    .footer-copy {
        color: #d4b27c;
        font-size: 0.14rem;
        margin-bottom: 0.08rem;
    }

    .footer-other {
        color: #c9b89c;
        font-size: 0.12rem;
    }

.page1 {
    position: relative !important;
    overflow: hidden !important;
    z-index: 1;
}

.index-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2 !important;
    object-fit: cover;
}

.header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    height: .64rem;
    z-index: 20 !important;
}

.hero-title-wrap {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 15 !important;
    padding: 0 2% 0 42%;
    box-sizing: border-box;
    text-align: center;
    pointer-events: none;
}

.hero-title-img {
    display: inline-block;
    width: 9rem;
    max-width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    .hero-title-img {
        width: 6rem;
    }
}

@media (max-width: 520px) {
    .hero-title-img {
        width: 4rem;
    }
}
.page3_5 {
    width: 100% !important;
    max-width: none !important;
    padding: 1.2rem 0 !important;
    box-sizing: border-box;
    background: url("https://gx.88888888woool.com/panlong/ditutu.png") no-repeat center center !important;
    background-size: cover !important;
    background-color: #14100c;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.version-wrap {
    width: 100%;
    max-width: 14rem;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
}
.version-inner {
    padding: 0.9rem 1.2rem;
}
.version-top, .version-main, .version-tabs, .treasure-stage-area {
    position: relative;
    z-index: 2;
}
.treasure-arrow {
    position: relative;
    z-index: 12 !important;
    cursor: pointer;
}



.version-top {
    text-align: center;
    margin-bottom: 0.4rem;
}

.version-en {
    display: block;
    font-size: 0.16rem;
    letter-spacing: 4px;
    color: #594209;
    margin-bottom: 0.08rem;
}

.version-main-title {
    font-size: 0.48rem;
    color: #492d0a;
    font-weight: bold;
    margin: 0;
}

.version-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(20, 16, 14, 0.55);
    border: 0.02rem solid #6b4422;
    padding: 0.4rem;
    box-sizing: border-box;
}

.version-left {
    flex: 1;
    color: #fff;
}

.version-sub-title {
    font-size: 0.16rem;
    color: #c9b88c;
    letter-spacing: 2px;
    margin-bottom: 0.1rem;
}

.version-title {
    font-size: 0.36rem;
    color: #ffdd77;
    font-weight: bold;
    margin: 0 0 0.16rem 0;
}

.version-desc {
    font-size: 0.16rem;
    line-height: 1.8;
    color: #e2d7bc;
    margin-bottom: 0.24rem;
}

.version-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .version-list li {
        display: flex;
        align-items: flex-start;
        padding: 0.12rem 0;
        border-bottom: 1px dashed #6b4422;
        font-size: 0.16rem;
        line-height: 1.6;
    }

        .version-list li:last-child {
            border-bottom: none;
        }

.v-label {
    flex-shrink: 0;
    width: 0.72rem;
    color: #ffdd77;
    font-weight: bold;
}

.v-text {
    flex: 1;
    color: #e8ddc0;
}

.version-right {
    flex: 1.3;
}

.version-img-box {
    width: 100%;
    border: 0.02rem solid #8a6d3f;
    background: #000;
    box-shadow: 0 0 0.16rem rgba(255, 221, 119, 0.15);
}

    .version-img-box img {
        width: 100%;
        height: auto;
        display: block;
    }

.version-tabs {
    display: flex;
    justify-content: center;
    gap: 0.24rem;
    margin-top: 0.4rem;
}

.version-tab-item {
    padding: 0.1rem 0.3rem;
    font-size: 0.18rem;
    color: #b8a878;
    border: 0.02rem solid #6b4422;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

    .version-tab-item.on {
        color: #2b2112;
        background: #ffdd77;
        border-color: #ffdd77;
    }

@media (max-width: 900px) {
    .version-main {
        flex-direction: column;
    }

    .version-left,
    .version-right {
        width: 100%;
    }

    .version-title {
        font-size: 0.28rem;
    }
}

@media (max-width: 520px) {
    .version-main-title {
        font-size: 0.34rem;
    }

    .version-title {
        font-size: 0.24rem;
    }

    .version-list li {
        flex-direction: column;
    }

    .v-label {
        margin-bottom: 0.04rem;
    }
}
.treasure-stage-area {
    margin-top: 0.5rem;
    padding: 0 0.4rem 0rem; 
}

.treasure-swiper-wrap {
    position: relative;
    padding: 0 0.8rem;
}

.treasure-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.44rem;
    height: 0.44rem;
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .treasure-arrow img {
        width: 100%;
        height: 100%;
        display: block;
    }

.treasure-prev {
    left: 0;
}

.treasure-next {
    right: 0;
}

.treasureSwiper {
    overflow: hidden;
}

.treasure-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.35s ease;
    opacity: 0.32;
}
    .treasure-item.active-pair {
        opacity: 1 !important;
    }

.treasure-platform {
    width: 100%;
    height: 1.4rem;
    border: 0.02rem solid #d2bb8c;
    background: radial-gradient(circle at top center, rgba(255, 221, 119, 0.2), transparent 60%), #181410;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.treasure-glow {
    position: absolute;
    bottom: 0.08rem;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    height: 0.26rem;
    background: radial-gradient(ellipse, rgba(255, 221, 119, 0.5), transparent 70%);
    filter: blur(3px);
}

.treasure-model {
    width: 70%;
    height: 70%;
    position: relative;
    z-index: 2;
}

    .treasure-model img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.treasure-name {
    margin-top: 0.12rem;
    font-size: 0.16rem;
    color: #3f0b08;
    text-align: center;
}

@media (max-width: 900px) {
    .treasure-swiper-wrap {
        padding: 0 0.6rem;
    }

    .treasure-platform {
        height: 1.1rem;
    }
}

@media (max-width: 520px) {
    .treasure-platform {
        height: 0.95rem;
    }
}

.treasureSwiper .swiper-slide {
    transition: opacity 0.35s ease;
}
.sidebar {
    transform: scale(1.4);
    transform-origin: right bottom;
}
.sidebar-home {
    display: block;
    width: .68rem;
    height: .5rem;
    margin: .26rem auto 0;
    background: linear-gradient(180deg, #96332c, #5c1a1a);
    border: .02rem solid #d1b572;
    border-radius: .08rem;
    color: #ffdf8a;
    font-size: .2rem;
    line-height: .46rem;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 0 .08rem rgba(0, 0, 0, .5);
    cursor: pointer;
    transition: transform .2s ease;
}
.sidebar-home:hover {
    transform: scale(1.08);
    color: #fff3c4;
}
.download {
    transform: scale(1.4);
    transform-origin: left bottom;
}
.age {
    transform: scale(1.4);
    transform-origin: left bottom;
}
.sidebar li em {
    background-image: url(https://gx.88888888woool.com/panlong/icon.png);
    background-size: 5rem auto;
    background-position: 0rem -2.96rem;
}
.sidebar li em.dy {
    background-position: -0.37rem -2.96rem;
}
.sidebar li em.wx {
    background-position: -.72rem -2.97rem;
}
.sidebar li a:hover em.rw {
    background-position: 0rem -3.32rem;
}
.sidebar li a:hover em.dy {
    background-position: -0.37rem -3.33rem;
}
.sidebar li a:hover em.wx {
    background-position: -.72rem -3.34rem;
}

html, body { overflow-x: hidden; background: #14100c; }