.bbs { margin: 0 0.2rem; }
.ProHeadNav { display: -webkit-box; display: -ms-flexbox; display: flex; background: #f2f2f2; }
.ProHeadNav a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; font-size: 0.22rem; color: #666; font-weight: bold; height: 0.6rem; line-height: 0.6rem; }
.ProHeadNav .on { color: #333; }
.footer { background: #fff; position: relative; z-index: 2; padding: 0 0.2rem; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; }
.main { width: 100%; min-height: 100vh; max-width: 7.5rem; margin: auto; overflow: hidden; background: #f2f2f2; }
.ProBanner { width: 100%; position: relative; height: auto; }
.ProBanner .banner { width: 100%; display: block; }
.ProBanner .PlayBtn { width: 1rem; height: 1rem; position: absolute; z-index: 3; right: 2.18rem; bottom: 1.3rem; cursor: pointer; }
.ProBanner .dlbtn { width: 1.8rem; height: 0.4rem; display: block; position: absolute; right: 1.2rem; bottom: 0.6rem; }
.MainTitle { padding-bottom: 0.2rem; }
.MainTitle img { display: block; width: 100%; margin: 0 auto; height: 0.6rem; width: auto; }
.MainBox { position: relative; padding: 0.2rem 0; background: url(/images/zhuanti/blackmythwukong/pagebg.jpg) repeat-y top; background-size: 100% auto; margin-bottom: 0.1rem; }
.MainBox > div { position: relative; z-index: 2; }
.MainBox::after { content: ""; display: block; width: 100%; max-width: 760px; height: 100%; position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); background: url(/images/zhuanti/blackmythwukong/pagebg.png) no-repeat bottom; background-size: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0.6; z-index: 0; }
.TabHd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin: 0 0.12rem 0; }
.TabHd a, .TabHd span { width: 1.2rem; height: 0.34rem; border-radius: 0.2rem; text-align: center; line-height: 0.34rem; font-size: 0.16rem; background: #e2e2e2; color: #333; display: block; }
.TabHd .on { color: #fff; background: #cc8d56; }
.TabBody .item + .item { display: none; }
.TabBody .lista { width: 7.3rem; height: 4rem; border-radius: 0.08rem; overflow: hidden; display: block; margin: 0.2rem 0.1rem 0.1rem; position: relative; }
.TabBody .lista img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.TabBody .lista p { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(255, 255, 255, 0.7); color: #333; font-weight: bold; font-size: 0.16rem; height: 0.44rem; line-height: 0.44rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 0 0.1rem; -webkit-box-sizing: border-box; box-sizing: border-box; }
.TabBody .morebtn { display: block; margin: 0.2rem auto 0; width: 1.6rem; height: 0.4rem; line-height: 0.4rem; border-radius: 0.2rem; background: #fff; font-size: 0.16rem; color: #333; text-align: center; -webkit-box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1); box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1); }
.TabBody .morebtn::after { display: inline-block; content: ""; width: 0.2rem; height: 0.16rem; background: url(/images/zhuanti/blackmythwukong/ic_eye.png) no-repeat; background-size: 100%; margin: 0 0 -0.02rem 0.1rem; }
.Newslist { padding: 0 0.1rem; margin: 0 0.1rem; background: rgba(255, 255, 255, 0.1); border-radius: 0.08rem; max-height: 2rem; overflow: hidden; }
.Newslist li { display: -webkit-box; display: -ms-flexbox; display: flex; height: 0.48rem; line-height: 0.48rem; }
.Newslist li a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 0.12rem; font-size: 0.16rem; color: #fff; height: 0.48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.Newslist li span { font-size: 0.14rem; color: #fff; }
.Newslist li + li { border-top: 1px dashed #999; }
.Newslist.on { max-height: inherit; }
.PicItems { margin: 0.2rem 0.12rem 0; border-radius: 0.06rem; position: relative; height: 3rem; }
.PicItems .swiper-slide { position: relative; height: 3rem; }
.PicItems .swiper-slide .img { width: 100%; overflow: hidden; height: 100%; -o-object-fit: cover; object-fit: cover; }
.PicItems .swiper-slide .bt { position: relative; display: block; width: 100%; height: 100%; }
.PicItems .swiper-pagination { bottom: 0.1rem; }
.PicItems .swiper-pagination .swiper-pagination-bullet { background: #99855c; width: 0.14rem; height: 0.14rem; opacity: 1; border-radius: 0.08rem; }
.PicItems .swiper-pagination .swiper-pagination-bullet-active { width: 0.3rem; background: #ffcc66; }
.GamePicWrap .GamePic { position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; width: 100%; }
.GamePicWrap .GamePic .swiper-slide { width: 6rem; height: 4rem; position: relative; opacity: 0.9 !important; }
.GamePicWrap .GamePic .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; }
.GamePicWrap .GamePic .swiper-slide-active { -webkit-transform: scale(1); transform: scale(1); opacity: 1 !important; }
.VdTabHd { overflow: hidden; width: 100%; display: block; }
.VdTabHd span { margin: 0 0.4rem 0 0; float: left; }
.VdTabBody .PicItems { height: 4rem; }
.VdTabBody .PicItems .swiper-slide { width: 6rem; height: 4rem; position: relative; }
.VdTabBody .PicItems .swiper-slide img { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0.1rem; position: relative; z-index: 1; }
.VdTabBody .PicItems .swiper-slide .videoBtn { width: 1rem; height: 1rem; position: absolute; z-index: 3; -webkit-transition: opacity 0.2s linear; transition: opacity 0.2s linear; left: 50%; top: 50%; margin-top: -0.2rem; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: url(/images/zhuanti/blackmythwukong/video.png) no-repeat; background-size: 100%; }
.VdTabBody .PicItems .swiper-slide p { width: 100%; position: absolute; bottom: 0; left: 0; z-index: 2; background: rgba(255, 255, 255, 0.7); color: #333; font-size: 0.18rem; height: 0.48rem; line-height: 0.48rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; padding: 0 0.1rem; -webkit-box-sizing: border-box; box-sizing: border-box; }
.VdTabBody .swiper-pagination { bottom: 0.6rem; }
.Main2 .TabHd { display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; background: url(/images/zhuanti/blackmythwukong/tabbtnbg.png) no-repeat; background-size: 100% 100%; }
.Main2 .TabHd span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin: 0.02rem 0.1rem; cursor: pointer; height: 0.3rem; line-height: 0.3rem; background: none; text-align: center; border-radius: 0; }
.Main2 .TabHd .on { background: url(/images/zhuanti/blackmythwukong/tabbtn.png) no-repeat; background-size: 100% 100%; }
.Main2 .TabHd span + span { margin-left: 1px; }
.Main2 .item { margin: 0 0.2rem; overflow: hidden; }
.Main2 .item a { width: 33.33%; float: left; margin: 0.1rem 0 0; display: block; }
.Main2 .item a .img { width: 1.48rem; height: 1.48rem; background: rgba(255, 255, 255, 0.7); border-radius: 0.36rem; display: block; float: left; position: relative; margin: 0.12rem auto; }
.Main2 .item a .img img { display: block; -o-object-fit: cover; object-fit: cover; max-width: 98%; max-height: 98%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.Main2 .item a p { float: left; width: 1.48rem; text-align: center; height: 0.24rem; line-height: 0.24rem; font-size: 0.18rem; color: #fff; margin: 0.1rem auto 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.Main2 .item a:nth-child(3n) .img, .Main2 .item a:nth-child(3n) p { float: right; }
.Main2 .item a:nth-child(3n-1) .img, .Main2 .item a:nth-child(3n-1) p { float: initial; }
.Main3 .TabHd { overflow: hidden; width: 100%; display: block; }
.Main3 .TabHd span { margin: 0 0.4rem 0 0; float: left; }
.VideoInfo { width: 100%; height: 100%; z-index: 2999; position: fixed; left: 0; top: 0; overflow: hidden; display: none; }
.VideoInfo .VideoBg { width: 100%; height: 100%; position: absolute; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); }
.VideoInfo .VideoBody { width: 85%; height: 5rem; margin: 0 auto; position: relative; }
.VideoInfo .VideoBody .VideoClose { position: absolute; right: -0.5rem; top: 50%; width: 0.43rem; height: 0.43rem; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAMAAADWg4HyAAAAM1BMVEUAAAD//vv//vv//vv//vv//vv//vv//vv//vv//vv//vv//vv//vv//vv//vv//vv//vs7SnsYAAAAEHRSTlMAEesJRDDgL95AFfOwTzpQdnMOOgAAAJpJREFUOMvl0rEWgkAMBdEAakQF8/9f664U0+3Q86oUt8qZiFhv4cstOq1ynFXfiL3KcXa0xfIAD+k8Bdgp2CnYqGKoYqhiqGKoYqhiqGKoYugI5/++j+mBP0bBTsFK2UXosp+nT9pQShtCCckp2Cn4DAU7BTs9ngEWCmZQxVDFUMVQxVDHCRW8xjRDh/j9ioY7Vdxpw406bvQHIKkU7sH6l2AAAAAASUVORK5CYII=) no-repeat; background-size: 100%; cursor: pointer; }
.VideoInfo .VideoBody #video { width: 100%; height: 5rem; position: relative; top: 50%; }
.ListContent { min-height: 100vh; padding-top: 0; }
.ListContent .MainTitle { margin-top: .2rem; }
.ListContent .list { background: rgba(255, 255, 255, 0.1); margin: .2rem .1rem; padding: 0 .1rem; border-radius: .08rem; position: relative; z-index: 2; }
.ListContent .list li { padding: .2rem 0; }
.ListContent .list li a { display: -webkit-box; display: -ms-flexbox; display: flex; }
.ListContent .list li a img { width: 1.2rem; height: .7rem; border-radius: .08rem; margin-right: .2rem; }
.ListContent .list li a div { display: block; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-width: 0; }
.ListContent .list li a div p { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: .3rem; line-height: .3rem; font-size: .18rem; color: #fff; }
.ListContent .list li a div span { display: block; width: 100%; color: #fff; height: .3rem; line-height: .3rem; font-size: .16rem; margin-top: .1rem; }
.ListContent .list li + li { border-top: 1px dashed #999; }
.page { padding: .06rem; margin: .06rem; display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; }
.page span:before { display: block; content: ""; position: absolute; right: .06rem; top: .1rem; width: .16rem; height: .1rem; background-size: auto 100%; transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.page a, .page span { margin-left: .15rem; padding: .05rem 0; font-size: .18rem; }
.page > a { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; line-height: .3rem; border-radius: .04rem; background: #f5f5f5; text-align: center; color: #333; }
.page > a:active, .page span .cbtn a:active { background: #ddd; }
.page > span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: inline-block; line-height: .3rem; border-radius: .04rem; text-align: center; background: #cc8d56; color: #fff; position: relative; }
.page > span .cbtn { display: none; width: 100%; position: absolute; bottom: 0rem; left: 0; z-index: 10; height: 1.2rem; overflow-y: scroll; background: #fff; border-radius: .04rem; -webkit-box-shadow: 0 0 .03rem #bbb; box-shadow: 0 0 .03rem #bbb; }
.page > span .cbtn a { display: inline-block; text-align: center; line-height: .3rem; float: left; width: 100%; background: #f6f6f6; color: #666; margin: 0 0 1px; }
::-webkit-scrollbar { width: 6px; height: 6px; border-radius: 4px; }
::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 4px; }