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

@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);}
}
@keyframes bounceInleft{
	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: #4d4b4d;
  border-radius: 4px; 
}
body, html, .wrapper, .page-content { width: 100%;}

.part1 { width: 100%; height: auto; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/bg.jpg) #000 no-repeat center top; background-size: 100% auto; position: relative; z-index: 2; padding-top: 6.38rem; padding-bottom: 1rem;}

.time-title { width: 16.6rem; margin: 0 auto; height: 1.46rem; position: relative; z-index: 8;}
.time-title>p { font-size: .48rem; line-height: .5rem; color: #fff; font-weight: bold; text-align: left; }

.time-title .category-sort { width: 2.16rem; height: .64rem; border: .02rem solid #888889; position: relative; overflow: hidden; display: inline-block; vertical-align: top; }
.time-title .category-sort.on { height: 2.1rem; }
.time-title .category-sort .category-sort-btn { width: 100%; height: .64rem; padding: 0 .3rem; }
.time-title .category-sort.on .category-sort-btn { background: #222; }
.time-title .category-sort p { width: 1.56rem; font-size: .24rem; line-height: .64rem; font-weight: bold; color: #fff; text-align: left; cursor: pointer; position: relative; z-index: 2; }
.time-title .category-sort p:after { content: ''; width: .15rem; height: .07rem; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/time-i-tri.png) no-repeat 0 0; background-size: 100%; position: absolute; right: 0; top: 50%; margin-top: -.03rem; transition: transform .3s; }
.time-title .category-sort.on p { border-bottom: 1px solid #4e4e4e; background: #222; }
.time-title .category-sort.on p:after { transform: rotate(180deg); }
.time-title .category-sort ul { width: 100%; height: 100%; font-size: 0; text-align: left; border-radius: .22rem; padding: .64rem .3rem 0; position: absolute; top: 0; left: 0; opacity: 0; margin-right: .3rem; z-index: 1; }
.time-title .category-sort.on ul { opacity: 1; background: #222; }
.time-title .category-sort li { width: 1.56rem; height: .64rem; padding: .2rem 0; }
.time-title .category-sort li:not(:nth-child(1)) { border-top: 1px solid #4e4e4e; }
.time-title .category-sort a { font-size: .24rem; line-height: .44rem; color: #fff; }
.time-title .category-sort a:hover, .time-title .category-sort li.cur a { color: #ffb900; }

.time-title-box { position: absolute; top: 0; right: 0; z-index: 2; width: 16.6rem; font-size: 0; text-align: right;}
.time-title-box.fix { position: fixed; top: .8rem; left: 50%; z-index: 9; margin-left: -8.3rem; background-color: #000; height: 1.04rem; padding: .2rem 0;}
.time-title-box.show-ctrl .search-ctrl { display: inline-block; vertical-align: top;}
.time-title-box.show-ctrl .search-cont input { width: 2.58rem;}
.search-cont { display: inline-block; vertical-align: top; width: auto; font-size: .3rem; margin-left: .3rem; height: .64rem; line-height: .64rem; border: .02rem solid #888889; padding-left: .18rem;}
.search-cont input { float: left; width: 4.06rem; margin-right: .2rem; height: 100%; outline: none; background-color: transparent; color: #fff; font-size: .24rem; border: none;}
.search-cont a { display: block; float: left; width: .66rem; height: 100%; position: relative;}
.search-cont a::before { content: ""; width: .25rem; height: .24rem; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/seach-icon1.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; margin: -.12rem 0 0 -.12rem;}
.search-ctrl { color: #fff; display: none; width: auto; margin-left: .3rem; height: .64rem; line-height: .62rem; border: .02rem solid #888889; font-size: 0; text-align: center;}
.search-ctrl a { position: relative; display: inline-block; vertical-align: top; width: .68rem;}
.search-ctrl a.prev { border-right: .02rem solid #888889;}
.search-ctrl a.next { border-left: .02rem solid #888889;}
.search-ctrl a.prev::before { content: ""; width: .15rem; height: .26rem; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/seach-icon2.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; margin: -.13rem 0 0 -.07rem;}
.search-ctrl a.next::before { content: ""; width: .15rem; height: .26rem; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/seach-icon3.png) no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 50%; left: 50%; margin: -.13rem 0 0 -.07rem;}
.search-ctrl span { display: inline-block; vertical-align: top; padding: 0 .28rem; font-size: .2rem; color: #fff;}
.search-ctrl span b { font-size: .28rem; color: #fdb626;}
.time-list li span.hl { background-color: #FCB726; color: #000;}
.time-list li span.cur { background-color: #dead47; color: #000;}
.search-height { position: absolute; z-index: -1; width: 100%; height: 1.04rem; pointer-events: none; top: -.2rem; left: 0;}
.time-title-box.fix .search-height { top: 0;}

.time-list-box { width: 16.6rem; margin: 0 auto; padding-top: .2rem; position: relative; top: -.15rem;}
.time-list-box ul { position: relative; z-index: 3;}
.time-list-box li { width: 100%; height: auto; overflow: hidden; position: relative; margin-bottom: .85rem; padding-top: .15rem;}
.item-title { float: left; width: 3.49rem; height: .66rem; line-height: .66rem; position: relative; top: -.15rem; font-size: 0; text-align: left;}
.item-title::before { content: ""; width: .2rem; height: .2rem; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/icon-before.png) no-repeat 0 0; background-size: 100% 100%; right: -.11rem; top: .23rem; position: absolute;}
.item-title em { display: inline-block; vertical-align: middle; width: .66rem; margin-right: .2rem;}
.item-title.gang1 { color: #597eb2;}
.item-title.gang2 { color: #91613d;}
.item-title.gang4 { color: #a03d38;}
.item-title.gang5 { color: #ada274;}
.item-title.gang6 { color: #afafaf;}
.item-title.gang1 em { background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/gang-icon1.png) no-repeat 0 0; background-size: 100% 100%; height: .52rem;}
.item-title.gang2 em { background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/gang-icon2.png) no-repeat 0 0; background-size: 100% 100%; height: .61rem;}
.item-title.gang4 em { background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/gang-icon4.png) no-repeat 0 0; background-size: 100% 100%; height: .57rem;}
.item-title.gang5 em { background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/gang-icon5.png) no-repeat 0 0; background-size: 100% 100%; height: .36rem;}
.item-title.gang6 em { background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/gang-icon6.png) no-repeat 0 0; background-size: 100% 100%; height: .38rem;}
.item-title p { font-weight: bold; display: inline-block; vertical-align: middle; font-size: .3rem;}
.item-info { float: right; width: 12.4rem; height: auto;}
.item-text { width: 100%; height: auto; font-size: .24rem; line-height: .36rem; color: #fff; opacity: .7;}
.item-link { font-size: 0; text-align: left; width: 100%; height: auto; margin-top: .08rem;}
.item-link a { display: inline-block; vertical-align: top; width: auto; line-height: .28rem; border: 1px solid #fbb726; color: #fbb726; font-size: .2rem; padding: 0 .06rem; margin-right: 10px;}
.item-video { width: 12.6rem; position: relative; height: auto; overflow: hidden; margin-top: .08rem; margin-bottom: -.2rem;}
.item-video a { display: block; position: relative; float: left; width: 6.12rem; height: auto; margin-bottom: .2rem; margin-right: .16rem; border: .04rem solid #464648;}
.item-video-pic { width: 100%; height: 3.4rem; background-color: #000; position: relative; z-index: 1; overflow: hidden;}
.item-video-pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: all .3s;}
.item-video-icon { position: absolute; z-index: 2; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);}
.item-video-icon em { background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/item-video-icon.png) no-repeat 0 0; background-size: 100% 100%; width: .62rem; height: .56rem; position: absolute; top: 50%; left: 50%; margin: -.28rem 0 0 -.31rem; z-index: 2;}
.item-video a:hover img { transform: scale(1.1);}
.item-video.type1 a { width: 4rem;}
.item-video.type1 a .item-video-pic { height: 2.21rem;}
.item-video.type1 a .item-video-icon em { width: .4rem; height: .36rem; margin: -.2rem 0 0 -.18rem;}
.time-list-line { width: .03rem; height: 100%; position: absolute; z-index: 1; top: 0; left: 3.49rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0 1%, #000 8% 90%, transparent 99% 100%); mask-image: linear-gradient(to bottom, transparent 0 1%, #000 8% 90%, transparent 99% 100%);}
.time-list-line em { display: block; width: .03rem; height: 100%; background: url(//game.gtimg.cn/images/gp/cp/a20260410metrotl/line.png) repeat-y 0 0; background-size: .03rem 10rem;}
.time-list li span.hl { background-color: #FCB726; color: #000;}
.time-list li span.cur { background-color: #dead47; color: #000;}