/* 全局 */ .wrap{width:1200px !important;} body{background:#f6f7f7;} .live-icon{ display:inline-block; *display:inline;*zoom:1; vertical-align:middle; width:29px;height:10px; background:url(../../i/index/live-icon.png) no-repeat; } .index-page .wrap{ /*overflow:hidden;*/ } /* banner */ .banner{ position:relative; padding-top:39px; height:606px; background-image:url(../../images/index/bg.jpg); background-repeat:no-repeat; background-position:top center; } .banner .wrap{position:relative;} .banner .skinA-bg{ position:absolute; top:0;left:0; width:100%; height:645px; z-index:0; } .banner .left-area{ position:relative; float:left; width:1005px;height:566px; background:#000 url(../../i/index/live-bg.png) center center no-repeat; } .banner .left-area img, .banner .left-area object{ display:block; width:100%;height:100%; } .banner .right-area{ float:right; background:url(../../i/index/banner-right-bg.png) repeat; } .banner .right-area li{ margin-bottom:10px; height:86px; width:185px; } .banner .right-area a{ position:relative; display:block; width:100%;height:100%; } .banner .right-area .img-box, .banner .right-area .img-box img{ display:block; width:100%;height:100%; } .banner .right-area .img-box{ position:relative; } .banner .right-area .img-box .p-area{ opacity:0; filter:alpha(opacity=00); position:absolute; bottom:0;left:0; padding:0 6px; width:173px;height:24px; background:url(../../i/index/mask-60.png) repeat; -moz-transition:opacity 200ms ease-out; -webkit-transition:opacity 200ms ease-out; -o-transition:opacity 200ms ease-out; transition:opacity 200ms ease-out; } .banner .right-area .img-box .name{ height:24px;line-height:24px; width:173px; font-size:12px;color:#fff; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .banner .right-area .sub-mask{ opacity:0; filter:alpha(opacity=00); position:absolute; top:0;left:0; width:100%;height:100%; background:url(../../i/index/banner-focus.png) no-repeat; z-index:2; -moz-transition:opacity 200ms ease-out; -webkit-transition:opacity 200ms ease-out; -o-transition:opacity 200ms ease-out; transition:opacity 200ms ease-out; } .banner .right-area a:hover .p-area, .banner .right-area .active .p-area, .banner .right-area .active .sub-mask{ opacity:1; filter:alpha(opacity=100); } /* 双击播放器全屏 */ .maxScreen .banner .left-area{ position:fixed; top:0;left:0; width:100%;height:100%; z-index:100; } /* 双击播放器全屏End */ /* 模块区域 */ .modular-area{ background:#fff; padding-bottom:25px; } .modular-area .modular{ float:left; margin-right:18px; width:388px; } .modular-area .modular .hd{ margin-top:25px; height:70px; text-align:center; } .modular-area .modular .hd img{ width:99px; height:27px; display:inline-block; *display:inline;*zoom:1; } .modular-area .modular .hd p{ margin-top:10px; line-height:16px; font-size:12px;color:#777; } .modular-area .modular .bd ul{ position:relative; *zoom:1; margin-right:-18px; } .modular-area .modular .bd li{ float:left; margin:0 18px 10px 0; width:185px;height:104px; } .modular-area .modular .bd li a{position:relative;} .modular-area .modular .bd li a, .modular-area .modular .bd li img{ display:block; width:100%;height:100%; } .modular-area .modular .bd li .img-box{ width:100%;height:100%; } .modular-area .modular .sub-mask{ position:absolute; left:0;top:0; width:100%;height:100%; z-index:9; } .modular-area .modular .mask-sub{ position:absolute; left:0;top:0; width:100%;height:100%; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); opacity:0; background-color:#000; -webkit-transition:all ease-in 250ms; transition:all ease-in 250ms; z-index:9; } .modular-area .modular li .name{ position:absolute; bottom:0;left:0; padding:0 5px; width:175px;height:30px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; line-height:30px; font-size:12px;color:#fff; -webkit-transition:all ease-in 250ms; transition:all ease-in 250ms; text-align:center; z-index:9; } .modular-area .modular li .name-bg{ position:absolute; bottom:0;left:0; height:30px;width:100%; background:url(../../i/index/index-p-bg.png) bottom left no-repeat; -webkit-transition:all ease-in 250ms; transition:all ease-in 250ms; opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); } .modular-area .modular li .play-icon{ position:absolute; z-index:10; top:50%;left:50%; margin-left:-20px; width:40px;height:40px; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); opacity:0; background:url(../../i/index/play-icon.png) no-repeat; -webkit-transform:scale(2); -ms-transform:scale(2); transform:scale(2); -webkit-transition:all ease-in 250ms; transition:all ease-in 250ms; } .modular-area .modular li a:hover .name{ bottom:12px; background:none; } .modular-area .modular li a:hover .play-icon{ margin-top:-27px; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); opacity:1; -webkit-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } .modular-area .modular li a:hover .mask-sub{ -ms-filter:alpha(opacity=50); filter:alpha(opacity=50); opacity:.5; } .modular-area .modular li a:hover .name-bg{ opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); } /* 新闻区域 */ .news-area{ padding-top:30px; padding-bottom:26px; background:#f5f5f5; } .news-area .news-sub-left{ float:left; margin-right:18px; width:260px;height:380px; } .news-area .news-sub-left .roll_pic_wrap{ position:relative; height:100%; } .news-area .news-sub-left .a1d_pic_box{ position:relative; height:100%; overflow:hidden; } .news-area .news-sub-left .a1d_pic_box a{ height:100%; display:block; text-align:left; } .news-area .news-sub-left .a1d_pic_box img{ display:block; width:100%;height:100%; } .news-area .news-sub-left .a1d_pic_box .text-area{ position:absolute; left:0;bottom:0; height:80px;width:260px; background:url(../../i/index/text-bg.png) repeat; } .news-area .news-sub-left .a1d_pic_box .text-area .title{ margin:9px 0 0 12px; height:32px;line-height:32px; font-size:18px;color:#fff; width:236px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .news-area .news-sub-left .a1d_pic_box .text-area .sub-title{ margin-left:12px; height:22px;line-height:22px; font-size:14px;color:#dedfe0; width:140px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .news-area .news-sub-left .a1d_btn{ display:none; position:absolute; width:0px; right:10px;bottom:10px; padding:2px 5px 2px 2px; height:12px; background:#6b767b; background:rgba(107,118,123,.5); border-radius:50px; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; overflow:hidden; z-index:11; } .news-area .news-sub-left .a1d_btn .js-roll-btn { display:block; _display:inline; float:left; margin-left:3px; width:12px;height:12px; background:#f1f2f2; border-radius:50px; text-indent:-99em; outline:0; -webkit-transition:width .3s ease-out; -moz-transition:width .3s ease-out; -ms-transition:width .3s ease-out; -o-transition:width .3s ease-out; transition:width .3s ease-out; overflow:hidden; } .news-area .news-sub-left .a1d_btn .active { background:#11b9f5; } .news-area .news-sub-mid{ float:left; margin-right:18px; width:678px; } .news-area .news-sub-mid .main-title{ margin-bottom:8px; height:30px;line-height:30px; font-size:26px; text-align:center; } .news-area .news-sub-mid .main-title .a{ color:#e11f1c; } .news-area .news-sub-mid .title-bottom{ margin-bottom:14px; height:24px;line-height:24px; font-size:12px; text-align:center; } .news-area .news-sub-mid .title-bottom .a{ margin:0 20px; color:#141414; text-decoration:underline; } .news-area .news-sub-mid .title-bottom .a:hover{ color:#12b7f5; } .news-area .news-sub-mid .news-bottom-left{ float:left; width:358px; } .news-area .news-sub-mid .news-bottom-left .ul-1{ margin-bottom:22px; margin-right:-5px; } .news-area .news-sub-mid .news-bottom-left .ul-1 li{ float:left; margin-right:2px; width:88px;height:30px; line-height:30px; font-size:14px; text-align:center; } .news-area .news-sub-mid .news-bottom-left .ul-1 a{ display:block; width:100%;height:100%; color:#777; background-color:#f7f7f9; } .news-area .news-sub-mid .news-bottom-left .ul-1 a:hover{ color:#12b7f5; } .news-area .news-sub-mid .news-bottom-left .ul-1 .active a, .news-area .news-sub-mid .news-bottom-left .ul-1 .active a:hover{ background-color:#12b7f5; color:#f5f5f5; } .news-area .news-sub-mid .news-bottom-left .tabc li{ height:30px; line-height:30px; border-bottom:1px dotted #dedfe0; font-size:12px;color:#555; } .news-area .news-sub-mid .news-bottom-left .tabc a{ color:#555; } .news-area .news-sub-mid .news-bottom-left .type{ float:left; width:48px; cursor:default; } .news-area .news-sub-mid .news-bottom-left .sub-content{ float:left; height:30px;line-height:30px; font-size:0; } .news-area .news-sub-mid .news-bottom-left .sub-content .title{ max-width:205px; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .news-area .news-sub-mid .news-bottom-left .sub-content .hot-icon{ margin-left:5px; width:25px;height:11px; background:url(../../i/index/hot-icon.png) no-repeat; } .news-area .news-sub-mid .news-bottom-left .sub-content:hover{ color:#12b7f5; } .news-area .news-sub-mid .news-bottom-left .time{ float:right; font-size:12px;color:#a5a7aa; cursor:default; } .news-area .news-sub-mid .news-bottom-left .textC{ margin-top:36px; } .news-area .news-sub-mid .news-bottom-left .more-btn{ display:inline-block; width:198px;height:28px; line-height:28px; background:#f7f7f9; border:1px solid #dedfe0; font-size:14px;color:#555; text-align:center; } .news-area .news-sub-mid .news-bottom-left .more-btn:hover{ background:#f3f3f3; } .news-area .news-sub-mid .news-bottom-right{ float:right; width:302px; } .news-area .news-sub-mid .news-bottom-right .ul1{ position:relative; *zoom:1; margin-right:-2px; margin-bottom:18px; } .news-area .news-sub-mid .news-bottom-right .ul1 li{ float:left; margin-right:2px; /*width:150px;*/ width:300px;height:30px; line-height:30px; background:#f7f7f9; font-size:14px; text-align:center; } .news-area .news-sub-mid .news-bottom-right .ul1 a{ color:#777; } .news-area .news-sub-mid .news-bottom-right .ul1 a:hover{ color:#12b7f5; } .news-area .news-sub-mid .news-bottom-right .ul1 .active{ background:#12b7f5; } .news-area .news-sub-mid .news-bottom-right .ul1 .active a, .news-area .news-sub-mid .news-bottom-right .ul1 .active a:hover{ color:#fff; } .news-area .news-sub-mid .news-bottom-right .jchd-area{ height:256px; overflow:auto; overflow-x:hidden; } .news-area .news-sub-mid .news-bottom-right .jchd-area .js-scroll{padding-left:17px;} .news-area .news-sub-mid .news-bottom-right .jchd-area ul{ display:block; padding-left:22px; border-left:1px solid #dedfe0; } .news-area .news-sub-mid .news-bottom-right .jchd-area li{ margin-bottom:13px; } .news-area .news-sub-mid .news-bottom-right .jchd-area .sub-hd{ position:relative; margin-left:-40px; height:32px;width:88px; line-height:32px; background:#fff; border:1px solid #dedfe0; text-align:center; } .news-area .news-sub-mid .news-bottom-right .jchd-area .sub-hd .t-arrow{ position:absolute; top:-4px;left:14px; width:5px;height:3px; background:url(../../i/index/news-arrow.png) no-repeat; } .news-area .news-sub-mid .news-bottom-right .jchd-area .sub-hd .b-arrow{ position:absolute; bottom:-4px;left:14px; width:5px;height:3px; background:url(../../i/index/news-arrow.png) no-repeat; background-position:0 -3px; } .news-area .news-sub-mid .news-bottom-right .jchd-area .sub-hd span{ font-size:12px;color:#555; } .news-area .news-sub-mid .news-bottom-right .jchd-area .sub-hd .num{ margin-left:5px; font-size:24px;color:#12b7f5; } .news-area .news-sub-mid .news-bottom-right .jchd-area .sub-bd{ margin-top:2px; } .news-area .news-sub-mid .news-bottom-right .jchd-area .name{ width:262px; height:36px;line-height:36px; font-size:12px;color:#555; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:default; font-weight:700; } .news-area .news-sub-mid .news-bottom-right .jchd-area .see-btn{ height:26px;line-height:26px; font-size:12px;color:#555; } .news-area .news-sub-mid .news-bottom-right .jchd-area .see-btn:hover{ color:#12b7f5; } .news-area .news-sub-mid .news-bottom-right .rmss-area{ height:256px; overflow:auto; overflow-x:hidden; } .news-area .news-sub-mid .news-bottom-right .rmss-area li{ margin-bottom:1px; height:63px; background:#f8f8f8; } .news-area .news-sub-mid .news-bottom-right .rmss-area a{ display:block; width:100%;height:100%; color:#555; } .news-area .news-sub-mid .news-bottom-right .rmss-area .rmss-left{ float:left; margin-right:10px; width:91px;height:63px; } .news-area .news-sub-mid .news-bottom-right .rmss-area img{ display:block; width:100%;height:100%; } .news-area .news-sub-mid .news-bottom-right .rmss-area .rmss-right{ float:left; } .news-area .news-sub-mid .news-bottom-right .rmss-area .name{ margin-top:10px; height:20px;line-height:20px; font-size:12px; font-weight:700; } .news-area .news-sub-mid .news-bottom-right .rmss-area .title{ width:190px; height:24px;line-height:24px; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .news-area .news-sub-mid .news-bottom-right .rmss-area a:hover{ color:#12b7f5; } .news-area .game-right{ float:right; width:226px; } .news-area .game-right li{ display:block; margin-bottom:10px; height:120px; overflow:hidden; } .news-area .game-right a{ position:relative; display:block; width:100%;height:100%; } .news-area .game-right li .img-box{ position:relative; height:100%; } .news-area .game-right img{ display:block; width:100%;height:100%; } .news-area .game-right .recommend-icon{ position:absolute; top:10px;right:0; width:58px;height:20px; line-height:20px; font-size:12px;color:#fff; background:#12b7f5; text-align:center; } .news-area .game-right .sub-mask{ position:absolute; bottom:-6px;left:0; padding:4px 6px 2px; width:214px;max-height:0; background:url(../../i/index/mask.png) repeat; font-size:12px;color:#fff; line-height:20px; overflow:hidden; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; } .news-area .game-right .sub-mask .name{ font-weight:700; } .news-area .game-right a:hover .sub-mask{ max-height:66px; bottom: 0; } /* 明星墙 */ .stars-wall{ padding-top:90px; height:170px; background:url(../../i/index/stars-wall-bg.jpg) top center no-repeat; } .stars-wall .wrap{ overflow:visible; } .stars-wall .pre, .stars-wall .next{ position:absolute; top:40px; width:24px;height:44px; background:url(../../i/index/stars-arrow.png) no-repeat; z-index:2; } .stars-wall .pre{ left:-34px; background-position:0 0; } .stars-wall .pre:hover{ background-position:-24px 0; } .stars-wall .next{ right:-34px; background-position:-48px 0; } .stars-wall .next:hover{ background-position:-72px 0; } .stars-wall .pre:active, .stars-wall .next:active{ top:41px; } .stars-wall .gallery{ width:1200px; overflow:hidden; } .stars-wall .gallery ul{ position:relative; width:999em; display:block; } .stars-wall .gallery li{ float:left; width:120px; margin-right:15px; } .stars-wall .gallery a{ position:relative; display:block; width:100%;height:120px; } .stars-wall .gallery .img-box{ height:100%; } .stars-wall .gallery img{ display:block; width:100%;height:100%; } .stars-wall .gallery .border{ position:absolute; top:0;left:0; width:100%;height:120px; background:url(../../i/index/stars-live.png) no-repeat; opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; z-index:5; } .stars-wall .gallery .live-icon{ display:none; position:absolute; left:46px;top:100px; opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; z-index:4; } .stars-wall .gallery .sub-mask{ position:absolute; top:0;left:0; width:100%;height:120px; background:url(../../i/index/mask.png) repeat; text-align:center; opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); -moz-transition:all 0.2s linear; -webkit-transition:all 0.2s linear; -o-transition:all 0.2s linear; transition:all 0.2s linear; } .stars-wall .gallery .game-name{ margin-top:10px; height:46px;line-height:46px; font-size:12px;color:#fff; } .stars-wall .gallery .info{ margin-bottom:14px; height:12px;line-height:12px; font-size:0; color:#aeabab; } .stars-wall .gallery .info .eyes-icon{ margin-right:5px; } .stars-wall .gallery .info span{ font-size:12px; } .stars-wall .gallery .type-btn{ display:inline-block; width:68px;height:22px; line-height:22px; font-size:12px;color:#fff; background:#b6b2b0; border-radius:20px; } .stars-wall .gallery .name{ height:42px;line-height:42px; font-size:12px;color:#fff; text-align:center; cursor:default; } .stars-wall .gallery .on-live .type-btn{ background:#12b7f5; } .stars-wall .gallery .on-live .live-icon{display:block;} .stars-wall .gallery a:hover .sub-mask, .stars-wall .gallery a:hover .border{ opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); } .stars-wall .gallery a:hover .live-icon{ opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); } .hot-games{ padding-top:15px; padding-bottom:25px; background:#f0f0f0; } .index-hd{ position:relative; height:54px;line-height:54px; font-size:0; text-align:center; } .index-hd .first{ display:inline-block; vertical-align:middle; font-size:24px; color:#12b7f5; } .index-hd .last{ display:inline-block; vertical-align:middle; font-size:24px; color:#555; } .index-hd small{ display:inline-block; vertical-align:middle; margin:0 8px; width:5px;height:5px; border-radius:100%; background:#a5a7aa; } .index-hd .more{ position:absolute; top:23px;right:0; height:20px;line-height:20px; font-size:0;color:#777; } .index-hd .more span{ margin-left:8px; font-size:12px; } .index-hd .more .round{ margin-left:3px; width:4px;height:4px; background:#777; border-radius:100%; -moz-transition:background 200ms ease-out; -webkit-transition:background 200ms ease-out; -o-transition:background 200ms ease-out; transition:background 200ms ease-out; } .index-hd .more:hover{color:#12b7f5;} .index-hd .more:hover .round{ background:#12b7f5; } /* 热门游戏 */ .hot-games .bd{margin-top:10px;} .hot-games .bd ul{ position:relative; *zoom:1; margin-right:-20px; } .hot-games .bd li{ float:left; margin-right:18px; width:134px;height:228px; } .hot-games .bd a{ position:relative; display:block; width:100%;height:188px; overflow:hidden; } .hot-games .bd img{ display:block; width:100%;height:100%; } .hot-games .bd a .sub-mask{ position:absolute; top:0;left:0; width:100%;height:100%; background:#fff; opacity:0; filter:alpha(opacity=00); -moz-transition:opacity 200ms linear; -webkit-transition:opacity 200ms linear; -o-transition:opacity 200ms linear; transition:opacity 200ms linear; } .hot-games .bd .name{ height:40px;line-height:40px; text-align:center; } .hot-games .bd a:hover .sub-mask{ opacity:.2; filter:alpha(opacity=20); } /* 旗娘推荐 */ .qn-recommend-area{ padding-top:15px; padding-bottom:25px; } .qn-recommend-area .bd{ margin-top:16px; } .qn-recommend-area .bd ul{ position:relative; *zoom:1; margin-right:-20px; } .qn-recommend-area .bd li{ margin-right:18px; float:left; width:286px; } .qn-recommend-area .bd a{ display:block; } .qn-recommend-area .bd .img-box{ position:relative; width:100%;height:160px; } .qn-recommend-area .bd img{ display:block; width:100%;height:100%; } .qn-recommend-area .bd .sub-mask{ position:absolute; top:0;left:0; width:100%;height:100%; background:#000; opacity:0; filter:alpha(opacity=00); z-index:1; } .qn-recommend-area .bd .play-icon{ position:absolute; top:50%;left:50%; margin:-23px 0 0 -23px; width:45px;height:45px; background:url(../../i/index/play-icon-2.png) no-repeat; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); transform:scale(1.5); z-index:2; } .qn-recommend-area .bd .room-name{ margin-top:3px; width:286px; height:24px;line-height:24px; font-size:12px;color:#555; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .qn-recommend-area .bd .meat{ padding-left:5px; height:24px;line-height:24px; font-size:0; } .qn-recommend-area .bd .meat .anchor{ width:264px; font-size:12px;color:#12b7f5; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .qn-recommend-area .bd a:hover .sub-mask{ opacity:.3; filter:alpha(opacity=30); } .qn-recommend-area .bd a:hover .play-icon{ opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } /* 广告 */ .odd-bg{background:#f0f0f0;} .gg-area li{ height:100px;width:591px; } .gg-area li .img-box{ height:100px; } .gg-area li img, .gg-area li a{ display:block; width:100%;height:100%; } /* 热门视频 */ .hot-lives .hd{ position:relative; padding:17px 0 6px; height:64px; text-align:left; font-size:0; } .hot-lives .hd .img-box{ float:left; color:#555; } .hot-lives .hd .img-box .img-area{ position:relative; float:left; margin-right:20px; width:64px; } .hot-lives .hd .img-box img{ display:block; height:64px; } .hot-lives .hd .img-box .img-area .img-mask{ position:absolute; top:4px;left:4px; width:52px;height:52px; border-radius:100%; background:#000; opacity:0; filter:alpha(opacity=00); -webkit-transition:.5s cubic-bezier(.3,0,0,1.3); -moz-transition:.5s cubic-bezier(.3,0,0,1.3); -ms-transition:.5s cubic-bezier(.3,0,0,1.3); -o-transition:.5s cubic-bezier(.3,0,0,1.3); transition:.5s cubic-bezier(.3,0,0,1.3); -webkit-transform:scale(0,0); -moz-transform:scale(0,0); -ms-transform:scale(0,0); -o-transform:scale(0,0); transform:scale(0,0); } .hot-lives .hd .img-box:hover .img-area .img-mask{ opacity:.3; filter:alpha(opacity=30); -webkit-transform:scale(1,1); -moz-transform:scale(1,1); -ms-transform:scale(1,1); -o-transform:scale(1,1); transform:scale(1,1); } .hot-lives .hd .img-box .text-area{ float:left; margin-top:-5px; height:64px;line-height:64px; font-size:0; } .hot-lives .hd .img-box .text-area .first, .hot-lives .hd .img-box .text-area .last, .hot-lives .hd .img-box .text-area .small{ display:inline-block; vertical-align:middle; font-size:24px; } .hot-lives .hd .img-box .text-area .small{ margin:0 8px; width:5px;height:5px; border-radius:100%; background:#a5a7aa; } .hot-lives .hd .img-box:hover{ color:#12b7f5; } .hot-lives .hd .change{ position:absolute; top:42px;right:70px; height:20px;line-height:20px; font-size:0; } .hot-lives .hd .change .change-icon{ margin-right:5px; width:12px;height:13px; background:url(../../i/index/change-icon.png) no-repeat; } .hot-lives .hd .change span{ font-size:12px;color:#777; } .hot-lives .hd .change:hover .change-icon{ background-position:-12px 0; } .hot-lives .hd .change:hover span{color:#12b7f5;} .hot-lives .hd .more{ position:absolute; top:42px;right:0; height:20px;line-height:20px; font-size:0;color:#777; } .hot-lives .hd .more span{ margin-left:8px; font-size:12px; } .hot-lives .hd .more .round{ display:inline-block; vertical-align:middle; margin-left:3px; width:4px;height:4px; background:#777; border-radius:100%; -moz-transition:background 200ms ease-out; -webkit-transition:background 200ms ease-out; -o-transition:background 200ms ease-out; transition:background 200ms ease-out; } .hot-lives .hd .more:hover{color:#12b7f5;} .hot-lives .hd .more:hover .round{ background:#12b7f5; } .hot-lives .bd li{ float:left; width:240px; height:208px; } .hot-lives .bd a{ position:relative; display:block; padding:8px; width:224px; color:#12b7f5; } .hot-lives .bd .img-box{ position:relative; height:125px; z-index:2; } .hot-lives .bd .img-box img{ display:block; width:100%;height:100%; } .hot-lives .bd .game-name{ position:absolute; left:0;bottom:0; padding-left:10px; width:99px;height:31px; line-height:31px; background:url(../../i/index/live-list-gameName.png) no-repeat; z-index:5; } .hot-lives .bd .game-name .name{ font-size:12px;color:#fff; } .hot-lives .bd .sub-mask{ position:absolute; top:0;left:0; width:100%;height:100%; background:#000; opacity:0; filter:alpha(opacity=00); z-index:1; } .hot-lives .bd .play-icon{ position:absolute; top:50%;left:50%; margin:-23px 0 0 -23px; width:45px;height:45px; background:url(../../i/index/play-icon-2.png) no-repeat; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -ms-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; -webkit-transform:scale(1.5); -moz-transform:scale(1.5); -ms-transform:scale(1.5); transform:scale(1.5); z-index:2; } .hot-lives .bd .room-name{ margin-top:10px; height:26px;line-height:26px; width:224px; font-size:12px;color:#555; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .hot-lives .bd .meat{ height:26px;line-height:26px; font-size:0; } .hot-lives .bd .meat .views{ float:right; margin-top:7px; line-height:12px;height:12px; font-size:12px;color:#888; } .hot-lives .bd .meat .anchor{ max-width:130px; font-size:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .index-page .hot-lives{padding-bottom:18px;} .hot-lives .bd a:hover{ background:#fff; } .hot-lives .bd a:hover .bg{ opacity:1; filter:alpha(opacity=100); } .hot-lives .bd a:hover .sub-mask{ opacity:.3; filter:alpha(opacity=30); } .hot-lives .bd a:hover .play-icon{ opacity:1; filter:alpha(opacity=100); -webkit-transform:scale(1); -moz-transform:scale(1); -ms-transform:scale(1); transform:scale(1); } .hot-lives .hd ul{ float:left; margin:18px 0 0 40px; } .hot-lives .hd li{ float:left; margin-right:20px; } .hot-lives .hd li a{ display:block; padding:0 8px; height:20px; line-height:20px; border:1px solid #a5a7aa; font-size:12px;color:#555; text-align:center; } .hot-lives .hd li a:hover{ background:#12b7f5; border:1px solid #12b7f5; color:#fff; } /* 百变 */ .baibian-area{ padding-top:58px; background:url(../../i/index/baibian-bg.jpg?2016100999) top center no-repeat; overflow:hidden; } .baibian-area .wrap{ overflow:visible; } .baibian-area .hd{ position:relative; height:26px;line-height:26px; font-size:16px;color:#f4e5dd; text-align:center; } .baibian-area .hd .bb-a{ position:absolute; top:-50px;left:525px; width:160px;height:50px; line-height:50px; font-size:30px;color:#fff; font-weight:700; text-align:center; } .baibian-area .hd .bb-a:hover{color:#12b7f5;} .baibian-area .hd p{font-weight:700;cursor:default;} .baibian-area .hd .more{ position:absolute; top:2px;right:16px; height:20px;line-height:20px; font-size:0;color:#fff; } .baibian-area .hd .more span{ margin-left:8px; font-size:12px; } .baibian-area .hd .more .round{ display:inline-block; vertical-align:middle; margin-left:3px; width:4px;height:4px; background:#fff; border-radius:100%; -moz-transition:background 200ms ease-out; -webkit-transition:background 200ms ease-out; -o-transition:background 200ms ease-out; transition:background 200ms ease-out; } .baibian-area .hd .more:hover{color:#12b7f5;} .baibian-area .hd .more:hover .round{ background:#12b7f5; } .baibian-area .bd{ position:relative; margin-top:26px; } .baibian-area .bd .pre, .baibian-area .bd .next{ position:absolute; top:178px; width:24px;height:44px; background:url(../../i/index/stars-arrow.png) no-repeat; z-index:2; } .baibian-area .bd .pre{ left:-42px; background-position:0 0; } .baibian-area .bd .pre:hover{ background-position:-24px 0; } .baibian-area .bd .next{ right:-42px; background-position:-48px 0; } .baibian-area .bd .next:hover{ background-position:-72px 0; } .baibian-area .bd .pre:active, .baibian-area .bd .next:active{ top:179px; } .baibian-area .left-bg-head, .baibian-area .right-bg-head{ position:absolute; top:0; width:360px; opacity:.2; filter:alpha(opacity=20); overflow:hidden; } .baibian-area .left-bg-head ul, .baibian-area .right-bg-head ul{ display:block; width:400px; } .baibian-area .left-bg-head ul{ position:relative; margin-left:-40px; *zoom:1; } .baibian-area .left-bg-head{left:-360px;} .baibian-area .right-bg-head{right:-360px;} .baibian-area .left-bg-head li, .baibian-area .right-bg-head li{ float:left; width:200px;height:200px; } .baibian-area .left-bg-head .img-box, .baibian-area .right-bg-head .img-box{ height:100%; } .baibian-area .left-bg-head img, .baibian-area .right-bg-head img{ display:block; width:100%;height:100%; } .baibian-area .gallery-bg{ width:1200px; overflow:hidden; } .baibian-area .gallery-bg .gallery{ width:9999em; } .baibian-area .gallery-bg .gallery ul{ display:block; width:1200px; } .baibian-area .gallery-bg .gallery li{ float:left; width:200px;height:200px; overflow:hidden; } .baibian-area .gallery-bg .gallery a{ position:relative; display:block; width:100%;height:100%; } .baibian-area .gallery-bg .gallery .img-box{ position:relative; height:100%; } .baibian-area .gallery-bg .gallery .img-box img{ display:block; width:100%;height:100%; } .baibian-area .gallery-bg .gallery .sub-mask{ position:absolute; top:0;left:0; width:100%;height:100%; background:#000; -ms-filter:alpha(opacity=30); filter:alpha(opacity=30); opacity:.3; -webkit-transition:all linear 250ms; -moz-transition:all linear 250ms; -o-transition:all linear 250ms; transition:all linear 250ms; z-index:1; } .baibian-area .gallery-bg .gallery .live-icon{ display:none; position:absolute; top:20px;right:0; z-index:3; } .baibian-area .gallery-bg .gallery .line{ position:absolute; left:0;bottom:0; width:0;height:4px; background:#12b7f5; -webkit-transition:all ease-in-out 250ms; -moz-transition:all ease-in-out 250ms; -o-transition:all ease-in-out 250ms; transition:all ease-in-out 250ms; z-index:3; } .baibian-area .gallery-bg .gallery .meat{ position:absolute; left:0;bottom:-45px; width:100%; text-align:center; -webkit-transition:all linear 250ms; -moz-transition:all linear 250ms; -o-transition:all linear 250ms; transition:all linear 250ms; z-index:3; } .baibian-area .gallery-bg .gallery .meat .name{ height:25px;line-height:25px; font-size:16px;color:#fff; font-weight:700; } .baibian-area .gallery-bg .gallery .meat .views{ margin-top:6px; padding-bottom:10px; font-size:12px; height:12px;line-height:12px; color:#e3ddd9; opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); -webkit-transition:all linear 250ms; -moz-transition:all linear 250ms; -o-transition:all linear 250ms; transition:all linear 250ms; } .baibian-area .gallery-bg .gallery .meat .views .eyes-icon{ background:url(../../i/index/eyes-icon1.png) no-repeat; } .baibian-area .gallery-bg .gallery .meat .state-btn{ position:relative; display:inline-block; margin-top:8px; padding-bottom:13px; width:68px;height:22px; line-height:22px; opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); -webkit-transition:all linear 250ms; -moz-transition:all linear 250ms; -o-transition:all linear 250ms; transition:all linear 250ms; } .baibian-area .gallery-bg .gallery .meat .state-btn .btn-bg{ position:absolute; top:0;left:0; width:100%;height:22px; background:#fff; border-radius:20px; opacity:.5; -ms-filter:alpha(opacity=50); filter:alpha(opacity=50); } .baibian-area .gallery-bg .gallery .meat .state-btn p{ position:absolute; top:0;left:0; width:100%;height:22px; font-size:12px;color:#fff; } .baibian-area .gallery-bg .gallery a:hover .sub-mask{ opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); } .baibian-area .gallery-bg .gallery a:hover .line{ width:100%; } .baibian-area .gallery-bg .gallery a:hover .meat{ bottom:0; } .baibian-area .gallery-bg .gallery a:hover .meat .state-btn{ opacity:1; -ms-filter:alpha(opacity=100); filter:alpha(opacity=100); margin-top:-24px; } .baibian-area .gallery-bg .gallery a:hover .views{ opacity:0; -ms-filter:alpha(opacity=0); filter:alpha(opacity=0); } .baibian-area .gallery-bg .gallery .on-live .live-icon{ display:block; } .baibian-area .gallery-bg .gallery .on-live .meat .state-btn .btn-bg{ background:#12b7f5; opacity:1; filter:alpha(opacity=100); } /* 榜单 */ .index-rank{padding:13px 0 50px;} .index-rank .rank-area{ float:left; margin-right:18px; padding-top:17px; width:388px; background:#fff; border-radius:5px; } .index-rank .rank-area .hd{ position:relative; padding:0 20px; height:48px;line-height:48px; font-size:20px;color:#555; font-weight:700; } .index-rank .rank-area .hd-content{ position:relative; border-bottom:1px solid #dedfe0; } .index-rank .rank-area .hd-content .hd-xq{ display:inline-block; margin-left:4px; width:44px;height:20px; line-height:20px; border:1px solid #04b0f0; background:#fff; font-size:12px;color:#04b0f0; text-align:center; } .index-rank .rank-area .hd-content .hd-xq:hover{ background:#04b0f0; color:#fff; } .index-rank .rank-area .hd .ul{ position:absolute; top:4px;right:0; } .index-rank .rank-area .hd .ul li{ position:relative; float:left; width:60px;height:44px; line-height:44px; font-size:0; background:#fff; font-weight:400; text-align:center; } .index-rank .rank-area .hd .ul a{ font-size:14px;color:#555; } .index-rank .rank-area .hd .ul .arrow{ display:inline-block; margin-left:7px; width:0;height:0; border:4px dashed transparent; border-top-style:solid; border-top-color:#555; overflow:hidden; } .index-rank .rank-area .hd .ul .active .name{ color:#04b0f0; } .index-rank .rank-area .hd .ul .active .arrow{ border-top-color:#04b0f0; } .index-rank .rank-area .hd .ul .rank-select{ position:absolute; left:0;top:44px; border:1px solid #edeff0; z-index:3; } .index-rank .rank-area .hd .ul .rank-select li{ float:none; width:58px; } .index-rank .rank-area .hd .ul .rank-select a{ display:block; background:#fff; } .index-rank .rank-area .hd .ul .rank-select a:hover{ background:#04b0f0; color:#fff; } .index-rank .rank-area .rank-content li{ height:68px;line-height:68px; } .index-rank .rank-area .rank-content li .rank-li-content{ border-top:1px solid #f3f3f3; } .index-rank .rank-area .rank-content a, .index-rank .th-rank .rank-content li{ display:block; padding:0 20px; height:100%; background:#fff; overflow:hidden; } .index-rank .th-rank .rank-content li{ height:68px; cursor:default; } .index-rank .rank-area .rank-content .rankNum{ float:left; margin-right:20px; width:25px;height:100%; line-height:74px; font-size:18px;color:#8c8c8c; font-family:Arial; text-align:center; } .index-rank .rank-area .rank-content .mid-area{ float:left; width:154px; font-size:0; } .index-rank .rank-area .rank-content .mid-area .anchor-grade, .index-rank .rank-area .rank-content .mid-area .all-level{ margin-right:14px; } .index-rank .rank-area .rank-content .mid-area .name{ display:inline-block; vertical-align:-34px; width:94px; font-size:12px;color:#555; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .index-rank .rank-area .rank-content .num{ position:relative; float:right; font-size:0;color:#555; } .index-rank .rank-area .rank-content .num span{ font-size:12px; margin-right:20px; display:inline-block; vertical-align: middle; } .index-rank .rank-area .rank-content .num .live-icon{ margin-right:10px; display:none; width:14px;height:14px; background:url(../../i/index/new-rank-live.gif) no-repeat; } .index-rank .rank-area .rank-content .num .change-icon{ display:inline-block; vertical-align: middle; width:8px;height:8px; background:url(../../i/index/updown-icon.png) 0 -16px no-repeat; } .index-rank .rank-area .rank-content li .down .change-icon{ background-position:0 -8px; } .index-rank .rank-area .rank-content li .up .change-icon{ background-position:0 0px; } .index-rank .rank-area .rank-content .on-live .num .live-icon{ display:inline-block; } .index-rank .rank-area .rank-content{ height:771px; overflow:hidden; } .index-rank .rank-area .rank-content .nothing-rank{ height:100%; background:url(../../i/index/nothing-rank.png) center center no-repeat; } .index-rank .rank-area .rank-content .first{ padding-top:20px; height:139px; line-height:inherit; } .index-rank .rank-area .rank-content .first .rank-li-content{ border-top:none; } .index-rank .rank-area .rank-content .first .rankNum{ margin-top:43px; margin-right:44px; width:25px;height:30px; line-height:inherit; background:url(../../i/index/new-rank-num-1.png) no-repeat; font-size:0; } .index-rank .rank-area .rank-content .second .rankNum{ margin-top:20px; width:25px;height:30px; line-height:inherit; background:url(../../i/index/new-rank-num-2.png) no-repeat; font-size:0; } .index-rank .rank-area .rank-content .third .rankNum{ margin-top:20px; width:25px;height:30px; line-height:inherit; background:url(../../i/index/new-rank-num-3.png) no-repeat; font-size:0; } .index-rank .rank-area .rank-content .first .mid-area{ width:204px; } .index-rank .rank-area .rank-content .first .img-box{ position:relative; padding:20px 75px 3px 69px; width:60px;height:60px; } .index-rank .rank-area .rank-content .first .img-bg{ position:absolute; top:0;left:0; width:204px;height:83px; background:url(../../i/index/new-rank-li-1.png) no-repeat; z-index:2; } .index-rank .rank-area .rank-content .first img{ position:relative; border-radius:100%; z-index:1; } .index-rank .rank-area .rank-content .first .anchor-grade, .index-rank .rank-area .rank-content .first .all-level{ position:absolute; bottom:-6px;left:76px; margin-right:0; z-index:3; } .index-rank .rank-area .rank-content .first .name{ display:block; height:55px;width:100%; line-height:55px; font-size:18px;color:#333; text-align:center; } .index-rank .zb-rank .rank-content .first .img-bg{ background:url(../../i/index/new-rank-li-2.png) no-repeat; } .index-rank .zb-rank .rank-content .mid-area{ width:220px; } .index-rank .zb-rank .rank-content .mid-area .mid-top{ margin-top:16px; height:20px;line-height:20px; } .index-rank .zb-rank .rank-content .game-name, .index-rank .zb-rank .rank-content .zb-title{ font-size:12px;color:#a5a7aa; line-height:30px; } .index-rank .zb-rank .rank-content .mid-area .name{ vertical-align:middle; width:160px; } .index-rank .zb-rank .rank-content .first .mid-area .name{ width:100%; } .index-rank .zb-rank .rank-content a:hover{ background:#f5f5f5; } .index-rank .zb-rank .rank-content .first a:hover{ background:#fff; } .index-rank .zb-rank .rank-content a:hover .game-name{ display:none; } .index-rank .zb-rank .rank-content a:hover .zb-title{ display:block; color:#04b0f0; } .index-rank .th-rank .rank-content .mid-area{ width:250px; } .index-rank .th-rank .rank-content .mid-area .name{ width:192px; } /* 向上弹窗 */ .up-area{ position:fixed; bottom:100px;right:24px; width:54px; z-index:15; } * html .up-area /* IE6 */ { _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)-100)); } .up-area a{ position:relative; display:block; margin-bottom:5px; width:54px;height:54px; } .up-area a i{ position:absolute; right:0;bottom:0; width:100%;height:100%; background:url(../../i/index/skin/up-icon.png) no-repeat; transition:background-position 0.2s ease-in; -webkit-transition:background-position 0.2s ease-in; -moz-transition:background-position 0.2s ease-in; -ms-transition:background-position 0.2s ease-in; -o-transition:background-position 0.2s ease-in; } .up-area .up-iconz.visiblehide{ opacity:0; } .up-area .up-iconz{ opacity:1; } .up-area .up-iconz i{background-position:0 0;} .up-area .my-live i{background-position:0 -54px;} .up-area .mobile-app i{background-position:0 -108px;} .up-area .feedback-icon i{ margin-bottom:0; background-position:0 -162px; } .up-area .up-iconz:hover i{ background-position:-54px 0; } .up-area .my-live:hover i{ background-position:-54px -54px; } .up-area .mobile-app:hover i{ background-position:-54px -108px; } .up-area .feedback-icon:hover i{ background-position:-54px -162px; } .up-area .active i{ background-position-x:-54px; } .up-area .mobile-app:hover .bg{ position:absolute; bottom:0;left:-150px; width:143px;height:212px; background:url(../../i/index/skin/up-area-qn-icon.png?2017050311) no-repeat; z-index:1; } .up-area .mobile-app .bg-1{ position:absolute; bottom:0;left:-150px; width:143px;height:212px; background:url(../../i/index/skin/up-area-qn-icon.png?2017050311) no-repeat; z-index:2; } .up-area .mobile-app .bg-1 .close{ position:absolute; top:-28px;right:-12px; width:22px;height:22px; background:url(../../i/index/skin/up-area-qn-icon-close.png) no-repeat; cursor:pointer; } /* 赛事入口 */ .match-orally-area{ padding:10px 0 45px; background:#f5f5f5; } .match-orally-area .bd{ position:relative; margin-top:10px; } .match-orally-area .bd .pre, .match-orally-area .bd .next{ position:absolute; top:70px; width:24px;height:44px; background:url(../../i/index/index-orally-arrow.png) no-repeat; } .match-orally-area .bd .pre{ left:-54px; background-position:0 0; } .match-orally-area .bd .pre:hover{ background-position:-24px 0; } .match-orally-area .bd .pre:active{ top:71px; background-position:-48px 0; } .match-orally-area .bd .pre.disabled, .match-orally-area .bd .next.disabled{ display: none; } .match-orally-area .bd .next{ right:-54px; background-position:-72px 0; } .match-orally-area .bd .next:hover{ background-position:-96px 0; } .match-orally-area .bd .next:active{ top:71px; background-position:-120px 0; } .match-orally-area .gallery{ width:1200px; overflow:hidden; } .match-orally-area .gallery ul{ position:relative; display:block; width:9999em; } .match-orally-area .gallery li{ float:left; margin-right:30px; width:216px; } .match-orally-area .gallery a{ display:block; width:212px;height:182px; border:2px solid #f5f5f5; } .match-orally-area .gallery .img-box, .match-orally-area .gallery .img-box img{ position:relative; width:100%;height:100%; } .match-orally-area .gallery .img-box .match-label{ position:absolute; top:0;left:0; padding:0 5px 0 10px; height:24px;line-height:24px; font-size:12px;color:#fff; background:#12b7f5; } .match-orally-area .gallery .img-box .match-label span{ max-width: 180px; height: 24px; display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .match-orally-area .gallery .img-box .match-label .sub-right{ position:absolute; top:0;right:-16px; width:16px;height:24px; background:url(../../i/index/index-orally-icon.png) no-repeat; } .match-orally-area .gallery a:hover{ border-color:#12b7f5; } .match-orally-area .gallery li .name{ margin-top:10px; width:216px; height:22px;line-height:22px; font-size:14px;color:#555; text-align:center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .match-orally-area .gallery li .sub-title{ height:22px;line-height:22px; font-size:0;color:#a5a7aa; text-align:center; } .match-orally-area .gallery li .sub-title span{ max-width:182px; font-size:12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .match-orally-area .gallery li .live-icon{ margin-left:5px; }