html,body,.wrapper,.story-header{width: 100%; position: relative;}
html,body { margin: 0 auto; background-color: #000; min-width: 1280px; max-width: 3840px;}

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

@font-face {
 	font-family:tpe;
 	src: url(https://game.gtimg.cn/images/gp/font/tpe_light.ttf  );
}

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

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

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

.fadeanim { animation: fadeInDown .4s .2s ease-out both;}

[data-animclass] { opacity: 0;}

.comm-scroll::-webkit-scrollbar {
  width: .1rem;
  height: .1rem; 
  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: #353535; 
  border-radius: 4px; 
}

.exp-spr{ background-image:url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/exp-spr.png); background-repeat:no-repeat; background-size:10.1rem 2.1rem;}
.exp-spr.arrow.hover{ width:0.22rem; height:0.22rem; background-position:47.46964% 92.02128%;}
.exp-spr.arrow{ width:0.22rem; height:0.22rem; background-position:50.50607% 92.02128%;}
.exp-spr.comic{ width:0.46rem; height:0.46rem; background-position:93.46473% 55.4878%;}
.exp-spr.expl-title{ width:4.32rem; height:1.02rem; background-position:1.55709% 8.33333%;}
.exp-spr.i-comic{ width:1.78rem; height:0.74rem; background-position:53.96635% 6.61765%;}
.exp-spr.i-music{ width:1.78rem; height:0.74rem; background-position:56.37019% 66.91176%;}
.exp-spr.i-story{ width:1.78rem; height:0.74rem; background-position:76.32212% 6.61765%;}
.exp-spr.i-video{ width:1.78rem; height:0.74rem; background-position:98.67788% 6.61765%;}
.exp-spr.music{ width:0.46rem; height:0.46rem; background-position:99.06639% 55.4878%;}
.exp-spr.off-line{ width:2.22rem; height:0.82rem; background-position:1.14213% 92.96875%;}
.exp-spr.on{ width:2.22rem; height:0.82rem; background-position:30.32995% 92.96875%;}
.exp-spr.play{ width:1.15rem; height:1.03rem; background-position:73.18436% 85.04673%;}
.exp-spr.story{ width:0.46rem; height:0.46rem; background-position:93.46473% 88.41463%;}
.exp-spr.video{ width:0.46rem; height:0.46rem; background-position:99.06639% 88.41463%;}
.exp-spr.view{ width:1.15rem; height:1.03rem; background-position:86.92737% 85.04673%;}
@font-face { font-family: "agen"; src: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/font/AGENCYB.TTF); font-display: block;}
.agen { font-family: "agen";}
.page-content { background: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/bg.jpg) no-repeat center top; background-size: 100% auto;}

.part1 { width: 100%; height: 4.2rem; position: relative;}
.main { width: 20.8rem; margin: 0 auto; position: relative;}
.part1 .main { padding-top: 2rem; padding-bottom: .8rem; font-size: 0;}
.expl-title { display: inline-block; vertical-align: top; width: 4.3rem; height: 1rem; background: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/title.png) no-repeat center top; background-size: 100% 100%;}
.page-tab-box { float: right; overflow: hidden; height: .9rem; margin-bottom: .2rem; white-space: nowrap; font-size: 0; text-align: left;}
.page-tab-box a { display: inline-block; vertical-align: top; width: 2.2rem; height: .8rem; position: relative; margin-right: .2rem;}
.page-tab-box a em { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 1; transition: all .3s;}
.page-tab-box a span { position: relative; z-index: 3; font-size: .32rem; color: #fff; display: block; line-height: .8rem; text-align: center;}
.page-tab-bg1 { background: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/page-tab.png) no-repeat 0 0; background-size: 100% 100%;}
.page-tab-bg2 { background: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/page-tab-cur.png) no-repeat 0 0; background-size: 100% 100%;}
.page-tab-box a em.def { opacity: 1;}
.page-tab-box a em.hov { opacity: 0;}
.page-tab-box a:hover em.def { opacity: 0;}
.page-tab-box a:hover em.hov { opacity: 1;}
.page-tab-box a.cur em.def { opacity: 0;}
.page-tab-box a.cur em.hov { opacity: 1;}

.part2 { width: 100%; height: auto;}
.exp-comm-tit { margin: 0 0 0 0; position: relative; width: 20.8rem; height: 0.76rem; background: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/role-comm-tit.png) no-repeat; background-size: 100% 100%;}
.exp-comm-tit p { font-size: .36rem; color: #080806; line-height: .76rem; padding-left: .32rem; font-weight: bold;}
.exp-comm-tit-icon { position: absolute; left: -.65rem; top: .18rem; }
a.exp-more { position: absolute; right: 0; top: 0; font-size: .32rem; color: #fff; line-height: .76rem;}
a.exp-more span { display: inline-block; vertical-align: middle; margin-left: 0.06rem; position: relative; top: -0.02rem;}
.exp-comm-tit p i { width: 0.02rem; height: 0.32rem; margin: 0 0.2rem; display: inline-block; vertical-align: middle; position: relative; top: -0.02rem; background: #080806;}
a.exp-more:hover { color: #871B9B;}
a.exp-more span.hover { display: none;}
a.exp-more:hover span { display: none;}
a.exp-more:hover span.hover { display: inline-block;}
.part2 .page-cont-item { position: relative;}
.part2 .tab-item-box { margin-top: 0.8rem; height: auto; font-size: 0;}
.part2 .tab-item { height: 4.42rem; width: 4.60rem; display: inline-block; vertical-align: top; margin-right: 0.8rem;}
.part2 .tab-item:nth-child(4n) { margin-right: 0;}
.part2 .vid-box { width: 100%; height: 2.58rem; position: relative; overflow: hidden; border: 1px solid transparent;}
.part2 .vid-box img { width: 100%; height: auto; vertical-align: top; transition: 0.3s all;}
.part2 .vid-box a { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5;}
.part2 .vid-box div { display: none; background: rgba(0, 0, 0, 0.518); width: 100%; height: 100%; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1;}
.part2 .vid-box div span { position: absolute; top: 50%; left: 50%; margin: -0.5rem 0 0 -0.56rem;}
.part2 .vid-box em { position: absolute; top: 0; right: 0; z-index: 3; transform-origin: 100% 0%; transform: scale(0.5);}
.part2 .vid-box:hover div { display: block;}
.part2 .vid-box:hover { border: 1px solid #871B9B;}
.part2 .vid-box:hover img { transform-origin: 50% 50%; transform: scale(1.1);}
.part2 .tab-tl { font-size: 0.24rem; line-height: 0.42rem; color: #fff; margin-top: 0.2rem;}
.part2 .tab-item-box-music .vid-box  img{ width: auto; height: 100%; margin:0 auto; vertical-align: top; }
.part2 .tab-item-box-music .vid-box .cover_bg{ width: 100%; z-index: -1; position: absolute; filter: blur(30px); left: 0; top: 0;}

.part2 .vid-box .cover_bg~img{ width: auto; height: 100%; margin:0 auto; vertical-align: top; }
.part2 .vid-box .cover_bg{ width: 100%; z-index: -1; position: absolute; filter: blur(30px); left: 0; top: 0;}


.part-foot2 { width: 100%; height: 1.68rem; margin: .5rem auto 0; background: url(//game.gtimg.cn/images/gp/cp/a20251225metrostory/explore/part-foot2.png) no-repeat center top; background-size: auto;}

.arma-title { opacity: 0; animation: fadeInDown .4s .4s ease-out both;}
.part2 { opacity: 0; animation: fadeInDown .4s .6s ease-out both;}