html,body,.wrapper,.page-box{width: 100%; height: 100%; position: relative;}
html,body { background-color: #000; min-width: 1400px; max-width: 3840px; overflow-x: auto; margin: 0 auto;}

@font-face {
 	font-family:AgencyFB;
 	src: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/font/AGENCYR.TTF);
}

.wrapper,.wrapper *{box-sizing: border-box;}
.wrapper{font-size: 12px;}


@keyframes bounceInleft {
	0% {opacity: 0;transform: translateX(-2rem);}
	100% { opacity: 1; transform: translateX(0);}
}

@keyframes bounceInright{
	0% {opacity: 0;transform: translateX(2rem);}
	100% { opacity: 1; transform: translateX(0);}
}

@keyframes bounceInbot {
	0% {opacity: 0;transform: translateY(2rem);}
	100% { opacity: 1; transform: translateX(0);}
}

@keyframes bounceIntop {
	0% {opacity: 0;transform: translateY(-2rem);}
	100% { opacity: 1; transform: translateX(0);}
}

@keyframes scale {
    0%{transform: scale(1.5);opacity: 0;}
    80%{transform: scale(0.9);opacity: 1;}
    100%{transform: scale(1);opacity: 1;}
}



@-webkit-keyframes move{50%{-webkit-transform:translate3d(0,-.1rem,0)}}
@keyframes move{50%{transform:translate3d(0,-.1rem,0)}}


.nav-bar{position: absolute; left: 0; top: 0; z-index: 9;}
.isblack .nav-bar{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/comm/state2_xbg.png) 0 0 repeat-x; background-size: .1rem 1.2rem;}
.white .nav-bar{ background: url(//game.gtimg.cn/images/gp/cp/a20250611gsz/comm/state2_xbg.png) 0 0 repeat-x; background-size: .1rem 1.2rem;}

.btn-comm-hover{position: relative;}
.btn-comm-hover span{position: relative; z-index: 2;}
.btn-comm-hover i,.btn-comm-hover em{position: absolute; left: 0; top: 0;  transition: .3s ease-out opacity; z-index: 1;}
.btn-comm-hover em,.btn-comm-hover:hover i{opacity: 0;}
.btn-comm-hover:hover em{opacity: 1;} 

/*渠道按钮*/
.footer-btn-box{position: absolute; bottom: .44rem; left: .6rem; z-index: 9; display: none;}



/*版权信息按钮*/
.btn-copy{right: .6rem; position: absolute; bottom: .44rem; z-index: 9; padding-right: .36rem; font-size: .2rem; line-height: .54rem; color: #363636; transition: .3s ease color; height: .54rem;}
.btn-copy i,.btn-copy em{position: absolute; right: 0; top: .155rem; left: auto;}
.btn-copy:hover{color: #222;}
.isblack .btn-copy{color: #b3b3b3;}
.isblack .btn-copy:hover{color: #fff;}
.isblack .correct.btn-copy{color: #363636;}
.isblack .correct.btn-copy:hover{color: #222;}

/*底部*/
.copygirht_details{position: absolute; left: 0; bottom: 0; z-index: 99; width: 100%; transform: translateY(230px);}
.copygirht_details.show{transform: translateY(0);}



.mouse-scroll {
	width: .24rem;
	height: .12rem;
	position: absolute;
	left: 50%;
	margin-left: -.12rem;
	bottom: 1rem;
	z-index: 9;
	opacity: .6;
}


.scroll-arrows
{
  display: block;
  width: .05rem;
  height: .05rem;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  border-right: .02rem solid #000;
  border-bottom: .02rem solid #000;
  margin: 0 0 .03rem .04rem;
  width: .16rem;
  height: .16rem;
}


.unu
{
  margin-top: .01rem;
}

.unu, .doi, .trei
{
    -webkit-animation: mouse-scroll 1s infinite;
    -moz-animation: mouse-scroll 1s infinite;
    animation: mouse-scroll 1s infinite;
  
}

.unu
{
  -webkit-animation-delay: .1s;
  -moz-animation-delay: .1s;
  -webkit-animation-direction: alternate;
  
  animation-direction: alternate;
  animation-delay: alternate;
}

.doi
{
  -webkit-animation-delay: .2s;
  -moz-animation-delay: .2s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .2s;
  animation-direction: alternate;
  
  margin-top: -.06rem;
}

.trei
{
  -webkit-animation-delay: .3s;
  -moz-animation-delay: .3s;
  -webkit-animation-direction: alternate;
  
  animation-delay: .3s;
  animation-direction: alternate;
  
  
  margin-top: -.06rem;
}

.sam-mouse {
  height: .42rem;
  width: .24rem;
  border-radius: .14rem;
  transform: none;
  border: .02rem solid #000;
  top: 1.7rem;
}


.wheel {
  height: .05rem;
  width: .02rem;
  display: block;
  margin: .05rem auto;
  background: #000;
  position: relative;
  
  height: .04rem;
  width: .04rem;
  border: .02rem solid #000;
  -webkit-border-radius: .08rem;
          border-radius: .08rem;
}

.isblack .scroll-arrows{border-right: .02rem solid #fff; border-bottom: .02rem solid #fff;}
.isblack .sam-mouse{border: .02rem solid #fff;}
.isblack .wheel{background: #fff; border: .02rem solid #fff;}

.wheel {
  -webkit-animation: mouse-wheel 0.6s linear infinite;
  -moz-animation: mouse-wheel 0.6s linear infinite;
  animation: mouse-wheel 0.6s linear infinite;
}

@-webkit-keyframes mouse-wheel{
   0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(6px);
    -ms-transform: translateY(6px);
    transform: translateY(6px);
  }
}
@-moz-keyframes mouse-wheel {
  50%{top:.04rem}
}
@-o-keyframes mouse-wheel {

    50%{top:.04rem}
}
@keyframes mouse-wheel {

   50%{top:.04rem}
}

@-webkit-keyframes mouse-scroll {

  0%   { opacity: 0;}
  50%  { opacity: .5;}
  100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@-o-keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}
@keyframes mouse-scroll {

  0%   { opacity: 0; }
  50%  { opacity: .5; }
  100% { opacity: 1; }
}

@keyframes fadeInDown1 {
    0% {
        opacity: 0;
        transform: translate3d(0,100px,0)
    }

    100% {
        opacity: 1;
        transform: translate3d(0,0,0)
    }
}
@keyframes fadeIn1 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
@keyframes fadeOut1 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.fadeanim { animation: fadeInDown1 .4s .2s ease-out both;}
.fadeanim1 { animation-delay: 0s; animation-duration: .1s;}
.comm-scroll::-webkit-scrollbar {
  width: .06rem;
  height: .06rem; 
  background-color: transparent;
}
.comm-scroll::-webkit-scrollbar-button { 
  width: 0; 
  height: 0; 
}
.comm-scroll::-webkit-scrollbar-corner { 
  display: block; 
}
.comm-scroll::-webkit-scrollbar-thumb { 
  background-clip: padding-box;
  background-color: #fff; 
  border-radius: .06rem; 
}

.music-spr{ background-image:url(https://game.gtimg.cn/images/gp/cp/a20230817explore/music/music-spr.png); background-repeat:no-repeat; background-size:8.98rem 1.26rem;}
.music-spr.music-mute.hover{ width:0.5rem; height:0.5rem; background-position:64.74057% 11.84211%;}
.music-spr.music-mute{ width:0.5rem; height:0.5rem; background-position:64.74057% 88.15789%;}
.music-spr.music-next.hover{ width:0.5rem; height:0.5rem; background-position:71.58019% 11.84211%;}
.music-spr.music-next{ width:0.5rem; height:0.5rem; background-position:71.58019% 88.15789%;}
.music-spr.music-pause.hover{ width:0.5rem; height:0.5rem; background-position:78.41981% 11.84211%;}
.music-spr.music-pause{ width:0.5rem; height:0.5rem; background-position:78.41981% 88.15789%;}
.music-spr.music-play.hover{ width:0.5rem; height:0.5rem; background-position:85.25943% 11.84211%;}
.music-spr.music-play{ width:0.5rem; height:0.5rem; background-position:85.25943% 88.15789%;}
.music-spr.music-prev.hover{ width:0.5rem; height:0.5rem; background-position:92.09906% 11.84211%;}
.music-spr.music-prev{ width:0.5rem; height:0.5rem; background-position:92.09906% 88.15789%;}
.music-spr.music-volume.hover{ width:0.5rem; height:0.5rem; background-position:98.93868% 11.84211%;}
.music-spr.music-volume{ width:0.5rem; height:0.5rem; background-position:98.93868% 88.15789%;}
.music-spr.music-info-next.hover{ width:0.82rem; height:0.82rem; background-position:1.10294% 20.45455%;}
.music-spr.music-info-next{ width:0.82rem; height:0.82rem; background-position:12.13235% 20.45455%;}
.music-spr.music-info-next.swiper-button-disabled{ width:0.82rem; height:0.82rem; background-position:23.16176% 20.45455%;}
.music-spr.music-info-prev.hover{ width:0.82rem; height:0.82rem; background-position:34.19118% 20.45455%;}
.music-spr.music-info-prev{ width:0.82rem; height:0.82rem; background-position:45.22059% 20.45455%;}
.music-spr.music-info-prev.swiper-button-disabled{ width:0.82rem; height:0.82rem; background-position:56.25% 20.45455%;}
.music-spr.tit-left{ width:1.89rem; height:0.16rem; background-position:1.26939% 90%;}
.music-spr.tit-right{ width:1.89rem; height:0.16rem; background-position:29.05501% 90%;}

.comm-tit { width: 100%; font-size: 0; text-align: center; line-height: .82rem;}
.comm-tit em,.comm-tit span { display: inline-block; vertical-align: top;}
.comm-tit em { margin-top: .4rem;}
.comm-tit span { margin: 0 .34rem; color: #fff; font-size: .5rem; font-weight: bold;}

.page-box { background: url(https://game.gtimg.cn/images/gp/cp/a20230817explore/music/bg-repeat.jpg) repeat-y 0 0; background-size: 100% auto; overflow: hidden;}
.music-main { width: 100%; height: 10.8rem; position: absolute; top: 50%; left: 0; margin: -5.4rem 0 0 0; padding-top: .27rem; margin-bottom: .64rem;}
.music-swiper { width: 100%; height: 27.26rem; position: absolute; top: 1.48rem; left: 0; padding-top: 10rem; margin-top: -10rem;}
.music-swiper li.swiper-slide { width: 16.2rem; height: 7.26rem; position: relative; overflow: hidden; float: left; opacity: .5; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px; will-change: transform;}
.music-bg { width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden;}
.music-bg img { width: 100%; height: auto; position: absolute; top: 50%; left: 0; margin-top: -8.1rem; opacity: .5; -webkit-filter: blur(70px); filter: blur(70px);}
.music-bg em { display: block; width: 100%; height: 100%; background-color: #38475b;}
.music-box { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%;}
.music-cover { position: absolute; left: .76rem; top: .74rem; border: 1px solid #8f959e; width: 5.82rem; height: 5.82rem; overflow: hidden;}
.music-cover img { display: block; width: 100%; height: auto;}
.music-name { margin-left: 7.36rem; width: 8.84rem; margin-top: .69rem; color: #fff; font-size: .36rem; line-height: .55rem; padding-bottom: .26rem; margin-bottom: .08rem; position: relative;}
.music-name h5 { font-weight: bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.music-name:after { content: ""; width: 100%; height: 1px; background-color: #fff; opacity: .3; position: absolute; left: 0; bottom: 0;}
.music-list { pointer-events: none; margin-left: 7.36rem; width: 8.84rem; height: 4.98rem; position: relative; overflow: hidden;/* -webkit-mask-image: url(https://game.gtimg.cn/images/gp/cp/a20230817explore/music/music-mask.png); mask-image: url(https://game.gtimg.cn/images/gp/cp/a20230817explore/music/music-mask.png); -webkit-mask-size: 100% 100%; mask-size: 100% 100%;*/}
.music-list ul { position: relative; z-index: 1; overflow: hidden; transition-duration: .3s !important;}
.music-list li { width: 8.84rem; line-height: .83rem; height: .83rem; position: relative; cursor: pointer; overflow: hidden;}
.music-list li span { display: block; float: left; color: #fff; font-size: .21rem; position: relative; z-index: 2; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.music-list li span.sp1 { width: .56rem; text-align: right; margin-right: .35rem;}
.music-list li span.sp2 { max-width: 4.66rem;}
.music-list li span.sp3 { margin: 0 .04rem; color: #bcbfc8;}
.music-list li span.sp4 { width: 2.42rem; color: #bcbfc8;}
.music-list li span.sp5,.music-list li span.sp6 { display: none; width: .22rem; height: .22rem; position: absolute; left: .34rem; top: .31rem;}
.music-list li span.sp5 img,.music-list li span.sp6 img { display: block; width: 100%;}
.music-list li:after { content: ""; transition: all .3s; width: 100%; height: 100%; background-color: #fff; opacity: 0; position: absolute; left: 0; top: 0; z-index: 1;}
.music-list li:hover:after { opacity: .1;}
.music-list li.cur:after { opacity: .1;}
.music-list li.cur span { color: #ffb900; font-weight: bold;}
.music-list li.cur span.sp1 { visibility: hidden;}
.music-list li.cur span.sp6 { display: block;}
.music-list li.pause span.sp5 { display: block;}
.music-list li.pause span.sp6 { display: none;}
.iScrollVerticalScrollbar { position: absolute; z-index: 4; width: .06rem; height: 100%; top: 0; right: .08rem;}
.iScrollVerticalScrollbar .iScrollIndicator { background-color: #fff; border-radius: 10px; border: none; cursor: pointer;}
.music-swiper li.swiper-slide-active { opacity: 1;}
.music-swiper li.swiper-slide-active .music-list { pointer-events: all;}
.music-pages { color: #fff; opacity: .3; letter-spacing: .04rem; width: 100%; line-height: .38rem; font-size: .18rem; text-align: center; margin-top: 8.22rem;}
.music-arrow-box { position: absolute; top: 50%; height: 0; margin-top: -.4rem; width: 90%; left: 5%; z-index: 5;}
.music-arrow-box a { display: block; position: relative; width: .8rem; height: .8rem;}
.music-arrow-box a.music-info-prev { float: left;}
.music-arrow-box a.music-info-next { float: right;}
.music-arrow-box a.swiper-button-disabled { pointer-events: none;}
.music-arrow-box a em { opacity: 0.6; position: absolute; left: 0; top: 0; transition: all .3s;}
.music-arrow-box a em.hover { opacity: 0;}
.music-arrow-box a em.swiper-button-disabled { opacity: 0;}
.music-arrow-box a:hover em { opacity: 0;}
.music-arrow-box a:hover em.hover { opacity: 0.6;}
.music-arrow-box a.swiper-button-disabled { display: none;}
.music-arrow-box a.swiper-button-disabled em { opacity: 0;}
.music-arrow-box a.swiper-button-disabled em.swiper-button-disabled { opacity: 0.6;}

.music-control { position: fixed; left: 0; bottom: 0; width: 100%; height: 1.26rem; z-index: 5; background-color: #000;}
.music-control-main { width: 13rem; margin: 0 auto;}
.music-control-box { float: left; margin-left: .5rem; width: 2.31rem; margin-top: .39rem;}
.music-control-box a { display: block; float: left; margin-right: .16rem;}
.music-btn { width: .5rem; height: .5rem; float: left; margin-right: .16rem;}
.music-btn a { display: block;}
.music-btn a.music-pause { display: none;}
.music-btn.on a.music-play { display: none;}
.music-btn.on a.music-pause { display: block;}
.music-details { float: left; width: 8.86rem; position: relative;}
.music-ctrl-cover { cursor: pointer; visibility: hidden; float: left; width: .6rem; height: .6rem; margin: .33rem .24rem 0 0; position: relative; z-index: 3;}
.music-ctrl-cover img { display: block; width: .6rem; height: .6rem;}
.music-ctrl-info { float: left; margin-top: .29rem; line-height: .38rem; font-size: .21rem; position: relative; z-index: 3;}
.music-ctrl-info span { display: block; float: left; color: #fff; font-size: .21rem; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.music-ctrl-info span.sp1 { max-width: 4.4rem;}
.music-ctrl-info span.sp2 { color: #bcbfc8; margin: 0 .04rem;}
.music-ctrl-info span.sp3 { max-width: 2.4rem; color: #bcbfc8;}
.music-bar { position: absolute; z-index: 1; left: .84rem; top: .76rem; width: 8.02rem; height: .08rem; background-color: #222222; cursor: pointer;}
.music-bar em { display: block; width: 0; max-width: 100%; height: 100%; position: relative; background-color: #ffb900;}
.music-bar em i { width: .16rem; height: .16rem; position: absolute; top: 50%; right: 0; margin: -.08rem -.08rem 0 0; background-color: #ffb900; border-radius: 50%;}
.music-time-box { float: right; width: 1.36rem; text-align: right; margin-top: .29rem; line-height: .38rem; color: #fff; font-size: .18rem; opacity: .3;}
.music-volume-box { float: left; margin: .38rem 0 0 .5rem; width: .5rem; height: .5rem;}
.music-volume-box a { display: block;}
.music-volume-box a.music-mute { display: none;}
.music-volume-box.on a.music-volume { display: none;}
.music-volume-box.on a.music-mute { display: block;}