/* Reset CSS */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,input,select,textarea,div,td,th,tr,dt,
dd,dl,a{margin: 0;padding: 0;}
ul,ol,li{list-style:none}
em,i{font-style:normal}
u{text-decoration:none}
table{border-spacing:0;border-collapse:collapse;margin:inherit}
img{border:none;vertical-align:middle;transition:opacity .2s linear}
input,select,button{vertical-align:middle;outline:none;border: none;}
a{text-decoration:none;transition:color .2s linear;font-size: 14px;color: #666;}
.fl{float:left}
.fr{float:right}
.wrap{width:1200px;margin:0 auto}
.gray{-webkit-filter:grayscale(100%);-moz-filter:grayscale(1);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:grayscale(100%);filter:gray}
.clear{clear:both}
.clear::after{content:"";display:block;clear:both}

@font-face{font-family:"douyu";src:url(../fonts/douyuFont-2.woff2) format("woff2"),url(../fonts/douyuFont-2.otf) format("opentype");}
:root{--BoxBg: #fff;--BoxBg1: #fff;--BoxBg2: #f2f2f2;--BoxBg3: #f2f2f2; --OrgColor: #ff3d00;--AHover: #ff5500;--BgColor: #28282a;--Success: #12b24f;--Text: #6b6b6b;--Text1: #333; --Text2: #aeaeae;--Text3: #000;--Text4: #f00;--BorderC: #ededed;}
body{min-width:1200px;font-family:"Microsoft YaHei", Arial, Helvetica, sans-serif; background:var(--BdBg);font-size:14px;}

/* Old Header */
.fn-clear:after{visibility: hidden;display: table;font-size: 0;content: "";clear: both;height: 0;}
.icon{background-image: url(../images/indexicon.png);background-repeat: no-repeat;display: inline-block;vertical-align: bottom;font-size: 0;}
.bg-shadow1{box-shadow: 0 0 18px 0 rgba(231, 50, 12, 0.22);}
.bg-shadow2{box-shadow: 0px 10px 10px 0px rgba(203, 72, 41, 0.36);}
.bg-shadow3{border-radius: 10px;background-color: #f5f5f5;box-shadow: 0px 0px 10px 0px rgba(218, 207, 204, 0.6);}
.index-container { width: 100%; min-height: 90vh; color: #616161; background: #ececec;padding-bottom: 30px;}
.index-container > div { position: relative; z-index: 10;}
.index-container .header{width: 100%;height: 50px;background: #ffffff;position: relative;z-index: 13;}
.header-con { width: 1200px;  margin: auto;}
.header-left{float: left;height: 50px;line-height: 50px;}
.header-left span{ color: #2b2b2b;}
.header-left > a,
.header-left > div{  margin-right: 22px;position: relative;display: inline-block;vertical-align: middle;padding: 0 10px;}
.header-left .icon{width: 20px;height: 22px;margin-right: 8px;background-position-y: -17px;vertical-align: sub;}
.left-icon5 .icon{background-position-x: -269px;}
.left-icon4 .icon{background-position-x: -208px;}
.left-icon3 .icon{background-position-x: -147px;}
.left-icon2 .icon{background-position-x: -84px;}
.left-icon1 .icon{background-position-x: -25px;}
.header-right{float: right;height: 50px;line-height: 50px;position: relative;}
.header-right .ali213SSO-online-avatar{    width: 20px; height: 20px;  margin: 13.5px 5px; overflow: hidden;border-radius: 10px;}
.header-right .ali213app{width: 497px;height: 175px;position: absolute;left: -200px;top: 50px;padding: 0;display: none;}
.header-right .ali213app img{width: 100%;height: 100%;}
.header-right > div,
.header-right > a{float: right;height: 50px;padding: 0 8px;position: relative;}
.header-right .icon{width: 28px;height: 24px;margin-right: 5px;vertical-align: text-top;background-position-y: -17px;}
.right-icon4 .icon{background-position-x: -336px;}
.right-icon3 .icon{background-position-x: -459px;margin-top: 14px;}
.right-icon2 .icon{background-position-x: -504px;margin-right: 0;margin-top: 14px;}
.right-icon1 .icon{background-position-x: -407px;}
.header-right .right-icon4{margin-right: 20px;}
.header-right .right-icon4 .icon{margin-right: 2px;}
.ali-header-menu-box{width: 892px;height: 200px;overflow: hidden;border: 1px solid #E5E6E5;position: absolute;background: #FFF;left: -214px;top: 49px;z-index: 10;border-radius: 0 0 8px 8px;display: none;box-shadow: 0px 8px 16px 0px rgba(218, 207, 204, 0.6)}
.left-icon5:hover .ali-header-menu-box{display: block;}
.ali-header-menu-box-con{width: 888px;height: 193px;overflow: hidden;margin: 7px auto 0px auto;}
.ali-header-menu-box-g{width: 1px;height: 185px;overflow: hidden;float: left;border-right: 1px solid #EEEEEE;}
.ali-header-menu-box-list{width: 80px;height: 185px;overflow: hidden;float: left;padding-left: 8px;}
.ali-header-menu-box-list-tit{width: 80px;height: 26px;overflow: hidden;line-height: 26px;text-align: left;margin-bottom: 9px;}
.ali-header-menu-box-list-con{width: 80px;height: 150px;}
.ali-header-menu-box-list-con ul{width: 80px;height: 150px;}
.ali-header-menu-box-list-con ul li{width: 80px;height: 30px;line-height: 30px;text-align: left;}
.ali-header-menu-box-list-con ul li a:link{position: relative;display: inline;float: left;height: 25px;line-height: 25px;margin: 0px;padding: 0 8px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;-o-border-radius: 2px;border-radius: 2px;color: #3c3c3c;}
.ali-header-menu-box-list-con ul li a:visited{position: relative;display: inline;float: left;height: 25px;line-height: 25px;margin: 0px;padding: 0 8px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;-o-border-radius: 2px;border-radius: 2px;color: #3c3c3c;}
.ali-header-menu-box-list-con ul li a i{position: absolute;top: -5px;right: 0;display: block;width: 9px;height: 14px;overflow: hidden;}
.ali-header-menu-box-list-con ul li a i.hot{background: url(../images/ali-nav-hot.gif) no-repeat;}
.ali-header-menu-box-list-con ul li a i.new{background: url(../images/ali-nav-new.gif) no-repeat;}
.ali-a-color-1 ul li a:hover{background: #ff5400;color: #FFFFFF !important;}
.ali-a-color-2 ul li a:hover{background: #72c067;color: #FFFFFF !important;}
.ali-a-color-3 ul li a:hover{background: #de4f85;color: #FFFFFF !important;}
.ali-a-color-4 ul li a:hover{background: #ffc600;color: #FFFFFF !important;}
.ali-a-color-5 ul li a:hover{background: #00b4ff;color: #FFFFFF !important;}
.ali-header-menu-box-list-tit a{width: 44px;height: 26px;display: inline;overflow: hidden;font-size: 18px;/*text-indent: -99999px;*/float: left;margin-left: 6px;font-weight: bold;}
.ali-header-menu-box-list-tit a.ali-news-tit{color: #ff5400;}
.ali-header-menu-box-list-tit a.ali-oday-tit{color: #ff5400;}
.ali-header-menu-box-list-tit a.ali-down-tit{color: #72c067;}
.ali-header-menu-box-list-tit a.ali-gl-tit{color: #72c067;}
.ali-header-menu-box-list-tit a.ali-patch-tit{color: #de4f85;}
.ali-header-menu-box-list-tit a.ali-hanhua-tit{color: #de4f85;}
.ali-header-menu-box-list-tit a.ali-webgame-tit{color: #ffc600;}
.ali-header-menu-box-list-tit a.ali-shouyou-tit{color: #ffc600;}
.ali-header-menu-box-list-tit a.ali-all-tit{width: 80px;height: 26px;color: #00b4ff;}
.ali-header-menu-box-t-hot{width: 888px;height: 20px;overflow: hidden;clear: both;margin: 0 auto;line-height: 20px;text-align: left;}
.ali-header-menu-box-t-hot-tit{width: 80px;height: 20px;overflow: hidden;float: left;font-size: 14px;color: #FF5400;text-align: center;padding-left: 8px;}
.ali-header-menu-box-t-hot-tit span{float: left;margin-left: 7px;color: #FF5400;display: inline;}
.ali-header-menu-box-t-hot-con{width: 735px;height: 1px;overflow: hidden;border-top: 1px solid #EEEEEE;float: left;margin-top: 11px;margin-right: 5px;}
.ali-header-menu-box-t-hot-tag{width: 60px;text-align: center;height: 20px;float: right;}
.ali-header-menu-box-t-hot-tag a:link{color: #3c3c3c;}
.ali-header-menu-box-t-hot-tag a:visited{color: #3c3c3c;}
.ali-header-menu-box-t-hot-tag a:hover{color: #ff6600;}
.ali-header-menu-box-t-hot-tag a:active{color: #3c3c3c;}
.ali-header-menu-box-t-hot-ul{width: 890px;height: 65px;overflow: hidden;margin: 0 auto;}
.ali-header-menu-box-t-hot-ul li{width: 80px;height: 32px;line-height: 32px;text-align: left;float: left;padding-left: 9px;overflow: hidden;}
.ali-header-menu-box-t-hot-ul li a:link{position: relative;display: inline;float: left;height: 25px;line-height: 25px;margin: 7px 2px 0px 2px;padding: 0px 4px 0px 8px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;-o-border-radius: 2px;border-radius: 2px;color: #3c3c3c;overflow: hidden;}
.ali-header-menu-box-t-hot-ul li a:visited{position: relative;display: inline;float: left;height: 25px;line-height: 25px;margin: 0 2px;padding: 0px 4px 0px 8px;-webkit-border-radius: 2px;-moz-border-radius: 2px;-ms-border-radius: 2px;-o-border-radius: 2px;border-radius: 2px;color: #3c3c3c;overflow: hidden;}
.ali-header-menu-box-t-hot-ul li a:hover{background: #ff5400;color: #FFFFFF !important;}
.ali-header-weixin-body{width: 120px;height: 125px;overflow: hidden;border: 1px solid #EEEEEE;position: absolute;background: #FFF;left: -38px;top: 50px;z-index: 10;display: none;}
.right-icon2:hover .ali-header-weixin-body{display: block;}
.ali-weixin-body-pic{width: 119px;height: 120px;overflow: hidden;float: left;text-align: center;margin-top: 5px;}
.ali-weixin-body-pic img{width: 95px;height: 95px;overflow: hidden;display: block;margin: 0 auto;}
.ali-weixin-body-pic i{width: 100px;height: 25px;overflow: hidden;display: block;margin: 0 auto;text-align: center;font-style: normal;line-height: 25px;color: #6C6C6C;font-size: 12px;}
#ali213SSO {float: right;}
/* Reset old css */
.index-container #ali213SSO .ali213SSO-online-avatar-username-link .ali213SSO-online-avatar,.index-container #ali213SSO .ali213SSO-online-avatar-username-link .ali213SSO-username{vertical-align:middle}
.index-container .right-icon2 .icon,.index-container .right-icon3 .icon{margin-top:0}
.index-container #ali213SSO .ali213SSO-info-holder{bottom:-103px;z-index:2}
.index-container #ali213SSO .ali213SSO-offline-spliter{height:20px}
.index-container #ali213SSO .ali213SSO-online-avatar-username-link .ali213SSO-username,.index-container #ali213SSO .ali213SSO-online-avatar-username-link{width:auto}
.index-container .header-right .right-icon4 .icon{margin-top:-2px}
.index-container .ali-header-menu-box-list-con ul li a{font-size:12px}
.index-container .s1-a-ul .s1-a-li a .hot{width: 22px;height: 18px;display: inline-block;background: url(../images/icon-hot2.png) no-repeat;background-size: 100%;margin:0 0 10px 3px;}

/* New style */
.crumb{width:100%;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #e4e4e4}
.crumb span,.crumb a{font-size:16px}
.crumb a{color:#868686}
.crumb a:hover{color:#ff3d00}
.MainTitle{width:100%;position:relative;height:30px;line-height:30px;margin:5px 0}
.MainTitle strong{display:block;float:left;height:30px;color:#222;font-size:24px;font-weight:bold}
.MainTitle .more{float:right;font-size:14px;color:#6b6b6b;height:30px;line-height:30px;font-family:serif}
.MainTitle .more:hover{color:var(--AHover)}
.index-container .GameIndexNav{z-index:11}
.GameIndexNav{width:100%;height:96px;background:var(--BoxBg);box-shadow:0 0 16px rgba(0,0,0,.06);}
.GameIndexNav .HdLogo{width:216px;height:46px;background:url(../images/logo.png) no-repeat;margin-top:25px;transition:opacity .2s linear}
.GameIndexNav .HdLogo:hover{opacity:.8}
.GameIndexNav .NavList{width:950px;height:96px;margin-left:32px}
.GameIndexNav .NavList li{float:left;line-height:96px;margin:0 20px;position:relative}
.GameIndexNav .NavList li>a{display:block;font-size:18px;color:var(--Text)}
.GameIndexNav .NavList li>a::after{content:"";display:inline-block;margin:0 0 3px 5px;width:0;height:0;border-left:4px solid rgba(0,0,0,0);border-right:4px solid rgba(0,0,0,0);border-top:4px solid var(--Text);border-radius:3px}
.GameIndexNav .NavList li:hover>a{color:var(--Text4)}
.GameIndexNav .NavList li:hover>a::after{border-top:4px solidvar(--Text4)}
.GameIndexNav .NavList li:hover .Tags{display:block}
.GameIndexNav .NavList li .Tags{position:absolute;z-index:2;top:100px;left:-10px;display:none;width:240px;height:auto;padding:10px;background:var(--BoxBg);border-radius:6px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.GameIndexNav .NavList li .Tags::after{width:100px;height:50px;display:block;content:"";background:none;position:absolute;top:-40px}
.GameIndexNav .NavList li .Tags::before{content:"";position:absolute;top:-6px;left:30px;width:0;height:0;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-bottom:6px solid var(--BoxBg)}
.GameIndexNav .NavList li .Tags a{display:block;float:left;font-size:16px;width:33%;text-align:center;height:36px;line-height:36px;color:var(--Text);overflow:hidden}
.GameIndexNav .NavList li .Tags a:hover{color:var(--Text4)}
.GameIndexNav .NavList li:last-child{margin-right:0}
.GameIndexNav .NavList li:last-child>a::after,.GameIndexNav .NavList li:first-child>a::after{display:none}
.GameIndexNav .NavList li:nth-child(3)~li .Tags::after{margin-left:-5px}
.GameIndexNav .NavList li:nth-child(3)~li .Tags p::before{margin-left:-5px}
.GameIndexNav .NavList .on>a{color:var(--Text4);font-weight:bold;position:relative}
.GameIndexNav .NavList .on>a::before{display:block;content:"";position:absolute;bottom:-3px;left:10px;margin-left:-10px;width:100%;height:3px;border-radius:3px;background:var(--Text4);transition:width .2s linear}
.GameIndexNav .NavList li>a:not(:has(+ .Tags))::after {display: none;}
.GameIndexNav .NavList li:nth-last-child(2) .Tags{left:-70px;}
.GameIndexNav .NavList li:nth-last-child(2) .Tags::before{left: 85px;}
.SearchBox{width:260px;height:40px;background:var(--BoxBg);border-radius:25px;position: relative;}
.SearchBox .soinput{width:100px;height:22px;line-height:22px;margin:9px 5px 0 15px;background:none;color:#999;border-left:2px solid #ccc;padding-left:15px}
.SearchBox .icon_search{display:block;float:left;background:url(../images/icon-ss.png);width:18px;height:18px;margin:11px 3px 0 14px}
.SearchBox .msobutton{float:right;display:block;width:50px;height:30px;line-height:30px;font-size:14px;background:var(--Text4);border-radius:20px;text-align:center;color:#fff;margin:5px;cursor:pointer}
.SearchBox .msobutton:hover{opacity:.8}
.SearchBox:hover .HotSearchList{display:block}
.SearchBox .HotSearchList{display:none;width:260px;min-height:100px;background:var(--BoxBg);position:absolute;z-index:999;border-radius:12px;left:0;top:55px;box-shadow:0 4px 4px 2px rgba(0,0,0,.2)}
.SearchBox .HotSearchList::before{display:block;width:100%;content:"";height:22px;position:absolute;top:-17px;left:0}
.SearchBox .HotSearchList ul{margin:6px 15px;overflow:hidden}
.SearchBox .HotSearchList ul li{height:30px;line-height:30px;display:block;margin:4px 0;width:100%}
.SearchBox .HotSearchList ul li a{font-size:14px;display:block;float:left;height:30px;line-height:30px;max-width:200px;color:var(--Text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.SearchBox .HotSearchList ul li a:hover{color:var(--AHover)}
.SearchBox .HotSearchList ul li i{display:inline-block;width:20px;height:30px;background:#ddd}
.SearchBox .HotSearchList ul li .icon_hot{width:17px;height:20px;background:url(../images/icon-hot.png) no-repeat;background-size:100%;margin:2px 0 0 6px}
.SearchBox .HotSearchList ul li .icon_new{width:28px;height:8px;background:url(../images/icon-new.png) no-repeat;background-size:100%;margin:2px 0 0 2px}
.SearchBox .HotSearchList ul li .icon_up{width:18px;height:20px;background:url(../images/icon-up.png) no-repeat;background-size:100%;margin:4px 0 0 10px}

.FixedMenu{display:none;width:60px;position:fixed;bottom:10px;left:50%;cursor:pointer;margin-left:650px;z-index:100}
.FixedMenu li{display:block;height:68px;width:68px;margin-top:10px;position:relative}
.FixedMenu li a{display:block;height:100%;position:relative}
.FixedMenu li i{display:block;position:absolute;z-index:1;left:50%;top:50%;transform:translateY(-50%) translateX(-50%)}
.FixedMenu li .icon_up{background:url(../images/goto.png) no-repeat;width:68px;height:68px}
.FixedMenu li:hover span{display:block}
.FixedMenu li:hover .icon_up{background:url(../images/goto1.png) no-repeat}

.index_body_foot{width:100%;height:auto;background-color:#28282a;border-top:4px solid #fcb213;overflow:hidden;zoom:1;position: relative;z-index: 11;}
.index_body_foot .index_body_foot_con{width:950px;height:auto;overflow:hidden;margin:0 auto}
.index_body_foot .index_body_foot_top{width:100%;height:auto;padding-top:22px;padding-bottom:36px;zoom:1;border-bottom:1px solid #2f2f31;overflow:hidden}
.index_body_foot .index_body_foot_top span{color:#595959;float:left;margin-top:10px}
.index_body_foot .index_body_foot_top a{float:left;margin-right:22px;margin-top:10px;color:#595959;white-space:nowrap}
.index_body_foot .index_body_foot_top a:visited{color:#595959}
.index_body_foot .index_body_foot_top a:hover{color:#f60}
.index_body_foot .index_body_foot_bottom{width:100%;height:auto;overflow:hidden;zoom:1;padding-top:20px}
.index_body_foot .index_body_foot_bottom p{width:100%;text-align:center;color:#595959;margin-top:16px}
.index_body_foot .index_body_foot_bottom p a,.index_body_foot .index_body_foot_bottom a:visited{color:#595959}
.index_body_foot .index_body_foot_bottom a:hover{color:#f60}
.index_body_foot .mobile_foot{width:982px;height:auto;padding-top:20px;padding-bottom:30px;margin:0 auto;clear:both}
.index_body_foot .mobile_foot_con{width:100%;text-align:center;color:#555;height:auto;padding-top:10px}
.index_body_foot .mobile_foot_con a{color:#555}
.index_body_foot .mobile_foot_con a:visited{color:#555}
.index_body_foot .mobile_foot_con a:hover{color:#f60}
.index_body_foot .mobile_foot_con a span{color:var(--Text4)}

#page,.page{margin:0 auto;padding:25px 0;width:100%;overflow:hidden;text-align:center}
#page a,#page span,
.page a,
.page span{display:inline-block;width:auto;padding:0 15px;height:36px;text-align:center;line-height:36px;color:#333;font-size:15px;background:#fff;border-radius:4px;border:1px solid #e6e6e6;margin:0 5px;transition:background .2s linear}
#page span,.page span{background-color:var(--OrgColor);color:#fff;border-color:var(--OrgColor);box-shadow:1px 2px 6px var(--OrgColor)}
#page a:hover,#page .current,.page a:hover,.page .current{background-color:#f00;color:#fff}
#page .prevPage i,#page .nextPage i,.page .prevPage i,.page .nextPage i{display:inline-block;width:12px;height:20px;vertical-align:middle;margin-bottom:3px}
#page .MorePage,.page .MorePage{background:#fff !important;color:var(--OrgColor) !important}
#page .nextPage i,.page .nextPage i{transform:rotate(180deg)}

.VideoInfo{width:100%;height:100%;z-index:2999;position:fixed;left:0;top:0;overflow:hidden}
.VideoInfo .VideoBg{width:100%;height:100%;position:absolute;left:0;bottom:0;background:rgba(0,0,0,.6)}
.VideoInfo .VideoBody{width:900px;height:500px;margin:0 auto;position:relative}
.VideoInfo .VideoBody .VideoClose{position:absolute;right:-90px;top:50%;width:43px;height:43px;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:900px;height:500px;position:relative;top:50%}

@keyframes arrowDown{0%{transform:translateY(0)}
50%{transform:translateY(2px)}
100%{transform:translateY(0)}}

/* Module Style */
.ContentWrap .syicon{background:url(../images/IconSprites.png) no-repeat;display:block;margin:15px 20px 0 0}
.ContentWrap .ic_new{width:42px;height:31px;background-position:-150px -125px;margin:15px 11px 0 0}
.ContentWrap .ic_hot{width:30px;height:20px;background-position:-124px -245px}
.ContentWrap .ic_gift{width:34px;height:30px;background-position:-10px -195px}
.ContentWrap .ic_play{width:33px;height:26px;background-position:-64px -195px}
.ContentWrap .ic_zone{width:25px;height:25px;background-position:-55px -285px}
.ContentWrap .ic_eva{width:21px;height:25px;background-position:-141px -285px}
.ContentWrap .ic_game{width:32px;height:25px;background-position:-117px -195px}
.ContentWrap .ic_rank{width:27px;height:26px;background-position:-294px -56px}
.ContentWrap .ic_rank2{width:27px;height:26px;background-position:-294px -10px}
.ContentWrap .ic_hj{width:25px;height:25px;background-position:-10px -285px}
.ContentWrap .ic_soft{width:21px;height:25px;background-position:-100px -285px}
.icbg2{background:url(../images/IconSprites2.png) no-repeat}
.ic_az{display:inline-block;width:16px;height:18px;background-position:-264px -94px}
.ic_ios{display:inline-block;width:16px;height:18px;background-position:-264px -132px}
.ContentWrap .ListSwiper{overflow:hidden;position:relative;margin:15px 20px 0}
.ContentWrap .ListSwiper .swiper-slide{width:auto;float:left}
.ContentWrap .ListSwiper:hover .swiper-button-next,.ContentWrap .ListSwiper:hover .swiper-button-prev{opacity:1}
.ContentWrap .ListSwiper:hover .swiper-button-disabled{opacity:.1}
.ContentWrap .ListSwiper .swiper-button-next,.ContentWrap .ListSwiper .swiper-button-prev{width:40px;height:40px;background:#fff;border-radius:50%;bottom:40px;top:inherit;opacity:0}
.ContentWrap .ListSwiper .swiper-button-next::after,.ContentWrap .ListSwiper .swiper-button-prev::after{font-size:20px;font-weight:bold}
.ContentWrap .ListSwiper2{overflow:hidden;position:relative;margin:5px 20px 0}
.ContentWrap .ListSwiper2 .swiper-pagination{bottom:10px;}
.ContentWrap .ListSwiper2 .swiper-pagination .swiper-pagination-bullet{width:10px;height:10px;background:#d7d7d7;border-radius:50%;opacity:1}
.ContentWrap .ListSwiper2 .swiper-pagination .swiper-pagination-bullet-active{background:var(--Text4)}
.ContentWrap .TabStyle2{width:100%;height:50px}
.ContentWrap .TabStyle2 p{float:left;margin:10px 0 0 20px}
.ContentWrap .TabStyle2 p span,.ContentWrap .TabStyle2 p i{font-size:16px;color:var(--Text2);font-family:"douyu"}
.ContentWrap .TabStyle2 p span{width:100px;position:relative;display:block;float:left;text-align:center;height:35px;line-height:45px;margin-right:5px;position:relative;cursor:pointer}
.ContentWrap .TabStyle2 p span u{position:relative;z-index:2}
.ContentWrap .TabStyle2 p span:hover,.ContentWrap .TabStyle2 p .on{color:var(--Text3)}
.ContentWrap .TabStyle2 p span:hover i,.ContentWrap .TabStyle2 p .on i{color:var(--Text4)}
.ContentWrap .TabStyle2 p .on::before{width:100%;height:15px;background:#fc3;position:absolute;bottom:0;left:0;content:"";display:block}
.ContentWrap .HotRank{height:550px;width:100%;border-radius:10px;background:var(--BoxBg);position:relative}
.ContentWrap .HotRank .tag{width:83px;height:35px;background:url(../images/IconSprites.png) no-repeat;background-position:-10px -70px;position:absolute;top:-10px;left:-10px}
.ContentWrap .HotRank .TabStyle2{padding-top:5px}
.ContentWrap .HotRank .item ul{overflow:hidden;margin:0 20px}
.ContentWrap .HotRank .item ul li{height:20px;margin-top:20px;width:100%}
.ContentWrap .HotRank .item ul li u{display:block;float:left;width:36px;height:20px;line-height:20px;background:url(../images/IconRank.png) no-repeat;background-size:58px auto;background-position:-4px -5px;color:#fff;font-size:14px;text-align:center;margin:-1px 5px 0 0}
.ContentWrap .HotRank .item ul li a{display:block;float:left;max-width:196px;height:20px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Text1)}
.ContentWrap .HotRank .item ul li a:hover{color:var(--Text4)}
.ContentWrap .HotRank .item ul li i{display:block;float:left;width:20px;height:20px;background:url(../images/IconSprites.png) no-repeat}
.ContentWrap .HotRank .item ul li .ic_r{background-position:-214px -245px}
.ContentWrap .HotRank .item ul li .ic_x{background-position:-254px -245px}
.ContentWrap .HotRank .item ul li .ic_f{background-position:-174px -245px}
.ContentWrap .HotRank .item ul li:nth-child(1) u,.ContentWrap .HotRank .item ul li:nth-child(2) u,.ContentWrap .HotRank .item ul li:nth-child(3) u{width:38px;line-height:24px;text-indent:8px;font-size:12px;background-size:43px}
.ContentWrap .HotRank .item ul li:nth-child(1) u{background-position:-2px -25px}
.ContentWrap .HotRank .item ul li:nth-child(2) u{background-position:-2px -51px}
.ContentWrap .HotRank .item ul li:nth-child(3) u{background-position:-2px -77px}
.ContentWrap .GameList{width:100%;margin-top:15px;overflow:hidden}
.ContentWrap .GameList li{width:110px;height:150px;border-radius:10px;float:left;margin:5px 16px 5px 20px}
.ContentWrap .GameList li a{display:block}
.ContentWrap .GameList li a img{width:100%;height:110px;border-radius:16px;object-fit:cover}
.ContentWrap .GameList li a span{display:block;width:100%;height:30px;line-height:30px;text-align:center;font-size:16px;color:var(--Text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:10px}
.ContentWrap .GameList li:hover a span{color:var(--Text4)}
.ContentWrap .GameList li:hover a img{opacity:.8}
.ContentWrap .NewList{margin:0 20px;overflow:hidden}
.ContentWrap .NewList li{width:100%;margin-bottom:20px;background:var(--BoxBg2);border-radius:10px;height:160px;padding:20px;box-sizing:border-box}
.ContentWrap .NewList li a{display:block}
.ContentWrap .NewList li img{width:180px;height:120px;border-radius:12px;display:block;float:left;object-fit:cover;margin-right:20px}
.ContentWrap .NewList li .info{width:600px;height:120px;float:left}
.ContentWrap .NewList li .info p{height:30px;line-height:30px;font-size:18px;width:100%;color:var(--Text1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px}
.ContentWrap .NewList li .info p:hover{color:red}
.ContentWrap .NewList li .info .desc{height:50px;line-height:25px;width:100%;margin:10px auto;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;color:var(--Text2)}
.ContentWrap .NewList li .info span{display:block;width:100%;height:20px;line-height:20px;font-size:13px;color:var(--Text2);overflow:hidden}
.ContentWrap .GiftList{width:100%;overflow:hidden}
.ContentWrap .GiftList li{height:120px;border-radius:10px;margin:20px 20px 0;padding:20px;background:var(--BoxBg2)}
.ContentWrap .GiftList li img{display:block;float:left;width:120px;height:120px;border-radius:20px;margin-right:20px}
.ContentWrap .GiftList li .info{width:580px;float:left}
.ContentWrap .GiftList li .info .title{height:25px;line-height:25px}
.ContentWrap .GiftList li .info .title p{max-width:500px;font-size:18px;float:left;color:var(--Text3);height:25px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ContentWrap .GiftList li .info .title p:hover{color:var(--OrgColor)}
.ContentWrap .GiftList li .info .title i{display:block;float:left;margin:4px 0 0 5px;transform:scale(0.8)}
.ContentWrap .GiftList li .info .time,.ContentWrap .GiftList li .info .desc{height:25px;line-height:25px;font-size:14px;color:var(--Text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px}
.ContentWrap .GiftList li .info .GiftNum{margin-top:8px;line-height:25px;font-size:14px}
.ContentWrap .GiftList li .info .GiftNum span{color:var(--Text);float:left}
.ContentWrap .GiftList li .info .GiftNum u{display:block;float:left;width:260px;height:10px;background:var(--BoxBg);border-radius:5px;margin:8px 0 0 5px}
.ContentWrap .GiftList li .info .GiftNum u i{display:block;height:100%;background:red;border-radius:5px}
.ContentWrap .GiftList li .btn{width:80px;height:30px;border-radius:15px;background:linear-gradient(180deg, #f60 0%, #f60 0%, #f00 100%, #f00 100%);text-align:center;line-height:30px;font-size:14px;color:#fff;float:right;margin-top:45px}
.ContentWrap .GiftList li .btn:hover{opacity:.8}
.ContentWrap .HotGift{width:100%;overflow:hidden;margin-top:15px}
.ContentWrap .HotGift li{width:225px;height:120px;padding:20px;background:var(--BoxBg2);border-radius:10px;overflow:hidden;margin:0px 0 20px 20px;float:left}
.ContentWrap .HotGift li img{display:block;width:70px;height:70px;border-radius:16px;float:left;margin:0 15px 0 0}
.ContentWrap .HotGift li .info{display:block;float:left;width:140px;height:70px}
.ContentWrap .HotGift li .info .title{height:40px;line-height:20px;width:100%;font-size:16px;color:var(--Text3);margin-bottom:10px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ContentWrap .HotGift li .info .title:hover{color:var(--OrgColor)}
.ContentWrap .HotGift li .info .desc{font-size:14px;color:var(--Text)}
.ContentWrap .HotGift li .info .desc i{display:inline-block;vertical-align:middle;transform:scale(0.8)}
.ContentWrap .HotGift li .btn{display:block;margin-top:20px;width:100%;float:left;height:30px;line-height:30px;border-radius:15px;background:linear-gradient(180deg, #f60 0%, #f60 0%, #f00 100%, #f00 100%);text-align:center;font-size:12px;color:#fff;cursor:pointer}
.ContentWrap .EvalList{margin:10px 20px 0}
.ContentWrap .EvalList li{width:260px;height:180px;position:relative;border-radius:10px;margin-top:17px}
.ContentWrap .EvalList li a{display:block}
.ContentWrap .EvalList li a img{display:block;width:100%;height:130px;border-radius:10px;position:relative;z-index:2;object-fit:cover}
.ContentWrap .EvalList li a p{line-height:20px;height:40px;color:var(--Text);font-size:14px;margin:10px 10px 0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ContentWrap .EvalList li a span{display:block;font-size:18px;font-weight:bold;background:url(../images/IconSprites.png) no-repeat;width:50px;height:50px;background-position:-9px -123px;text-align:center;line-height:46px;color:#fff;position:absolute;left:-5px;top:-5px;z-index:3;font-style:italic}
.ContentWrap .EvalList li a span i{font-size:12px;font-style:normal;color:#fff;margin:0 2px}
.ContentWrap .EvalList li a .tag{position:absolute;right:-10px;top:-10px;z-index:3;color:#fff;width:130px;height:25px;background:linear-gradient(90deg, #5d87ff 0%, #5d87ff 0%, #b852ff 100%, #b852ff 100%);border-radius:0 20px 0 20px;text-align:center;line-height:25px;font-size:12px}
.ContentWrap .EvalList li a::after{display:block;content:"";position:absolute;z-index:1;right:-10px;top:15px;width:0;height:0;border-top:10px solid #05f; border-right: 10px solid transparent;}
.ContentWrap .EvalList li:hover img{opacity:.8}
.ContentWrap .EvalList li:hover p{color:var(--Text4)}
.ContentWrap .GameGift{height:435px;width:100%;border-radius:10px;background:var(--BoxBg);position:relative;margin-top:20px}
.ContentWrap .GameGift .item{margin:0 15px;overflow:hidden;height:375px}
.ContentWrap .GameGift .item a{display:block;float:left;width:100%;height:50px;margin:10px 0 2px}
.ContentWrap .GameGift .item a img{width:50px;height:50px;float:left;border-radius:10px;}
.ContentWrap .GameGift .item a .info{float:left;width:200px;height:50px;margin-left:15px}
.ContentWrap .GameGift .item a .info p{float:left;width:100%;line-height:22px;height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--Text1)}
.ContentWrap .GameGift .item a .info p:hover{color:var(--Text4)}
.ContentWrap .GameGift .item a .info .num{width:72px;height:6px;background-color:#e3e3e3;float:left;position:relative;margin-top:12px;display:block}
.ContentWrap .GameGift .item a .info .num i{position:absolute;width:50%;height:6px;background-color:#6bc41c}
.ContentWrap .GameGift .item a .info em{display:block;float:left;width:75px;height:16px;line-height:16px;margin:5px 0 0 10px;font-size:12px;color:var(--Text2)}
.ContentWrap .GameGift .item a .info .btn{display:block;float:right;width:40px;height:20px;line-height:20px;border-radius:5px;text-align:center;color:#fff;font-size:14px;background:linear-gradient(180deg, #f60 0%, #f60 0%, #f00 100%, #f00 100%);transition:.3s all;margin-top:3px}
.ContentWrap .GameGift .item a .info .btn:hover{background:linear-gradient(180deg, #ffcc00 0%, #ffcc00 0%, #ff6633 100%, #ff6633 100%)}

/* DayNight Switch btn */

.DayNightSwitch{position:relative;width:55px;height:22.5px;margin:13px 0 13px 10px;background:radial-gradient(circle at 9% 5px, #fff, #fff 1.5px, transparent 1.75px, transparent),radial-gradient(circle at 17.5% 11.25px, #fff, #fff 0.25px, transparent 0.5px, transparent),radial-gradient(circle at 5% 17.5px, #fff, #fff 0.625px, transparent 0.875px, transparent),radial-gradient(circle at 12.5% 3.75px, #fff, #fff 0.75px, transparent 1px, transparent),radial-gradient(circle at 7.5% 12.5px, #fff, #fff 0.375px, transparent 0.625px, transparent),radial-gradient(circle at 15% 18.75px, #fff, #fff 1.25px, transparent 1.5px, transparent),radial-gradient(circle at 2.5% 7.5px, #fff, #fff 0.125px, transparent 0.375px, transparent),radial-gradient(circle at 12.5% 15px, #fff, #fff 0.125px, transparent 0.375px, transparent),radial-gradient(circle at 3.5% 8.75px, #fff, #fff 0.125px, transparent 0.375px, transparent),linear-gradient(90deg, #2b303e, #2b303e 50%, #5a81b4 50%, #5a81b4);background-repeat:no-repeat;background-size:200% 100%;background-position:100% 0;border-radius:45px;box-shadow:0 -1.5px 2px rgba(187,187,187,.4),inset 0 1.5px 2.5px #333,0 1px 2px rgba(135,91,73,.1),inset 0 -1.5px 2.5px #ddd;cursor:pointer;overflow:hidden;transition:.5s all}
.DayNightSwitch::before,.DayNightSwitch::after{content:"";position:absolute;transition:.5s all}
.DayNightSwitch::before{width:18.75px;height:18.75px;inset:1.875px;border-radius:50%;background:#e9cb50;box-shadow:0 0 2.5px #333,inset 1px 1px 1.5px #f8f4e4,inset -1px -1px 1.5px #665613;z-index:1}
.DayNightSwitch::after{width:17.5px;height:17.5px;inset:2.5px;border-radius:50%;box-shadow:2.5px 15px 0 2.5px #fff,16.25px 15px 0 1.25px #fff,23.75px 17.5px 0 2.5px #fff,33.75px 11.25px 0 1.25px #fff,42.5px 8.75px 0 2.5px #fff,48.75px -1.25px 0 2.5px #fff,-2.5px 0 0 12.5px rgba(255,255,255,.2),3.75px 0 0 12.5px rgba(255,255,255,.15),10px 0 0 12.5px rgba(255,255,255,.21),2.5px 10px 0 2.5px #abc1d9,17.5px 8.75px 0 2.5px #abc1d9,23.75px 10px 0 2.5px #abc1d9,33.75px 5px 0 2.5px #abc1d9,38.75px 3.75px 0 2.5px #abc1d9,47.5px -5px 0 2.5px #abc1d9}
.DayNightSwitch:hover::before{filter:contrast(90%) brightness(110%);scale:1.05}

html.dark-mode{--BoxBg: #28282a;--BoxBg1: #1e222d;--BoxBg2: #1e222d;--BoxBg3: #28282a;--BorderC: #333;--Text: #737e91;--Text1: #737e91;--Text2: #6e6f71;--Text3: #fff;--Text4: #ff4b00}
html.dark-mode .DayNightSwitch{background-position:0 0;box-shadow:0 -1.5px 2px rgba(0,0,0,.1),inset 0 1.5px 2.5px #333,0 2px 2px rgba(0,0,0,.2),inset 0 -1.5px 2.5px #2f2f2f}
html.dark-mode .DayNightSwitch::before{translate:32.5px;background:radial-gradient(circle at 12.5px 5px, #939aa5, #939aa5 1.625px, transparent 1.75px, transparent),radial-gradient(circle at 8.75px 11.25px, #939aa5, #939aa5 2.875px, transparent 3px, transparent),radial-gradient(circle at 18px 12.5px, #939aa5, #939aa5 2.125px, transparent 2.25px, transparent),radial-gradient(#cbcdda, #cbcdda)}
html.dark-mode .DayNightSwitch::after{transform:translate(32.5px);box-shadow:2.5px 15px 0 2.5px rgba(0,0,0,0),16.25px 15px 0 1.25px rgba(0,0,0,0),23.75px 17.5px 0 2.5px rgba(0,0,0,0),33.75px 11.25px 0 1.25px rgba(0,0,0,0),42.5px 8.75px 0 2.5px rgba(0,0,0,0),48.75px -1.25px 0 2.5px rgba(0,0,0,0),-2.5px 0 0 12.5px rgba(255,255,255,.2),3.75px 0 0 12.5px rgba(255,255,255,.15),10px 0 0 12.5px rgba(255,255,255,.21),2.5px 10px 0 2.5px rgba(0,0,0,0),17.5px 8.75px 0 2.5px rgba(0,0,0,0),23.75px 10px 0 2.5px rgba(0,0,0,0),33.75px 5px 0 2.5px rgba(0,0,0,0),38.75px 3.75px 0 2.5px rgba(0,0,0,0),47.5px -5px 0 2.5px rgba(0,0,0,0)}
html.dark-mode .header span,
html.dark-mode #ali213SSO .ali213SSO-offline-reg,
html.dark-mode #ali213SSO .ali213SSO-login,
html.dark-mode .ali-header-menu-box-list-con ul li a:link,
html.dark-mode .ali-header-menu-box-list-con ul li a:visited{color:#737e91}
html.dark-mode .ali-header-menu-box{background:#1d222d;border:none;box-shadow:none}
html.dark-mode .ali-header-menu-box-g{border-right:1px solid #1b202a}
html.dark-mode .index-container{background:#353535}
html.dark-mode .index-container .header{box-shadow:none;background:#11171e}
html.dark-mode .IndexBanner::after{background-image:linear-gradient(to top, #353535, rgba(0, 0, 0, 0))}
html.dark-mode .GameIndexNav{box-shadow:0 0 16px rgba(0,0,0,.2)}
html.dark-mode .IndexBanner .SearchBox .soinput{border-color:#888}
html.dark-mode .page a,html.dark-mode .page span,
html.dark-mode #page a,html.dark-mode #page span{border-color:#282828;color:#737e91;background:#11171e}
html.dark-mode .page a:hover,html.dark-mode .page .current,
html.dark-mode #page a:hover,html.dark-mode #page .current{box-shadow:1px 2px 6px #11171e}
html.dark-mode .page .current,
html.dark-mode #page .current{background:var(--OrgColor);color:#fff}
html.dark-mode .Main1 .TabBody .listB a+a{border-color:#333}
html.dark-mode .Main1 .TabHd span{background-position:0 -182px}
html.dark-mode .Main1 .TabHd span.on{background-position:0 -230px}
html.dark-mode .Main1 .TabHd span:nth-child(1){background-position:-8px -276px}
html.dark-mode .Main1 .TabHd span:nth-child(1).on{background-position:-7px -320px}
html.dark-mode .TabStyle1{background:#1e222d}
html.dark-mode .Main3 .M3R .R_List li:hover p{color:#fff}
html.dark-mode .Main7 .item ul li a .info p{color:#d5d5d4}
html.dark-mode .Main4 .M4L .item ul li .list,
html.dark-mode .Main4 .M4L .item ul li:hover{background:#131725}
html.dark-mode .GiftTab a{border-color: #11171e;}
/* rank  */
html.dark-mode .ContentWrap .SoftList li:hover .info .title{background:#11171e}
html.dark-mode .ranking-section1,
html.dark-mode .NewsHotTop{background: #1e222d;}
html.dark-mode .NewsHotTop ul li{background: #11171e;}
html.dark-mode .s2-con .s2-con-li:nth-child(3)~.s2-con-li .num,html.dark-mode .ranking-container{background:#353535}
html.dark-mode .s2-con .s2-con-li,html.dark-mode .ranking-section1{box-shadow:0px 5px 20px rgba(235,99,41,.1)}
html.dark-mode .s2-con .s2-con-li{border-color:#1e222d !important}
html.dark-mode .s2-con .s2-con-li:hover{border-color:#000 !important}
html.dark-mode .index-container .s1-a-ul .s1-a-li.active a span{color:#fff}
html.dark-mode .index-container .s1-a-ul .s1-a-li.active a span i{color:red}
html.dark-mode .s1-a-ul .s1-a-li.active a:after{display:none}
html.dark-mode .index-container .s1-a-ul .s1-a-li a span i,html.dark-mode .index-container .s1-a-ul .s1-a-li a span{color:#737e91}
/*topic*/
html.dark-mode .contentbox *,
html.dark-mode .GiftInfo *,
html.dark-mode .GameDownlDesc,
html.dark-mode #bbs span,html.dark-mode #bbs div,
html.dark-mode .ali-comment-box-tit strong{color: #737e91;} 
html.dark-mode .TopicBg{opacity: 0 !important;}
html.dark-mode .TopicNav,
html.dark-mode .headBox,
html.dark-mode .TContL .listE,
html.dark-mode .TContR .HotRank,
html.dark-mode .glzj_gamecard,
html.dark-mode .BaseBox {background: #28282a;}
html.dark-mode .ali-comment-box-tit,
html.dark-mode .ali-c-block-box,
html.dark-mode .TContL .ContBox1 .listbox .list1{border-color: #3b3b3b;}
html.dark-mode .TContL .contentbox h3{background-image: linear-gradient(to right, rgba(104, 162, 248, 0.4), rgba(255, 255, 255, 0));}
/*collection*/
html.dark-mode .CollectionGame .InfoR .swiper::before{background-image: linear-gradient(to right, #28282a, rgba(40, 40, 42, 0));}
html.dark-mode .CollectionGame .InfoR .swiper::after{background-image: linear-gradient(to left, #28282a, rgba(40, 40, 42, 0));}
html.dark-mode #pictureViewer>.content,html.dark-mode .ranking-section1,html.dark-mode .RankTypeTab .TabBody .item a,html.dark-mode .s2-con .s2-con-li,html.dark-mode .RankTypeTab .TabHd span{background:#1e222d}
html.dark-mode .CollectionDownl li .btns .btn.no{background: #333 !important;border-color: #333 !important; color: #666;}