/** * @authors guoshengze * @date 2015-08-18 10:38:26 */ /*! normalize.css v1.1.3 | MIT License | git.io/normalize */ /* ========================================================================== HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */ audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4. * Known issue: no IE 6 support. */ [hidden] { display: none; } /* ========================================================================== Base ========================================================================== */ /** * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using * `em` units. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-size: 100%; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Address margins handled incorrectly in IE 6/7. */ body { margin: 0; } /* ========================================================================== Links ========================================================================== */ /** * Address `outline` inconsistency between Chrome and other browsers. */ a:focus { outline: thin dotted; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* ========================================================================== Typography ========================================================================== */ /** * Address font sizes and margins set differently in IE 6/7. * Address font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.67em; margin: 2.33em 0; } /** * Address styling not present in IE 7/8/9, Safari 5, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */ b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } /** * Address styling not present in Safari 5 and Chrome. */ dfn { font-style: italic; } /** * Address differences between Firefox and other browsers. * Known issue: no IE 6/7 normalization. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Address styling not present in IE 6/7/8/9. */ mark { background: #ff0; color: #000; } /** * Address margins set differently in IE 6/7. */ p, pre { margin: 1em 0; } /** * Correct font family set oddly in IE 6, Safari 4/5, and Chrome. */ code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } /** * Improve readability of pre-formatted text in all browsers. */ pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } /** * Address CSS quotes not supported in IE 6/7. */ q { quotes: none; } /** * Address `quotes` property not supported in Safari 4. */ q:before, q:after { content: ''; content: none; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* ========================================================================== Lists ========================================================================== */ /** * Address margins set differently in IE 6/7. */ dl, menu, ol, ul { margin: 1em 0; } dd { margin: 0 0 0 40px; } /** * Address paddings set differently in IE 6/7. */ menu, ol, ul { padding: 0 0 0 40px; } /** * Correct list images handled incorrectly in IE 7. */ nav ul, nav ol { list-style: none; list-style-image: none; } /* ========================================================================== Embedded content ========================================================================== */ /** * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3. * 2. Improve image quality when scaled in IE 7. */ img { border: 0; /* 1 */ -ms-interpolation-mode: bicubic; /* 2 */ } /** * Correct overflow displayed oddly in IE 9. */ svg:not(:root) { overflow: hidden; } /* ========================================================================== Figures ========================================================================== */ /** * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */ figure { margin: 0; } /* ========================================================================== Forms ========================================================================== */ /** * Correct margin displayed oddly in IE 6/7. */ form { margin: 0; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct color not being inherited in IE 6/7/8/9. * 2. Correct text not wrapping in Firefox 3. * 3. Correct alignment displayed oddly in IE 6/7. */ legend { border: 0; /* 1 */ padding: 0; white-space: normal; /* 2 */ *margin-left: -7px; /* 3 */ } /** * 1. Correct font size not being inherited in all browsers. * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5, * and Chrome. * 3. Improve appearance and consistency in all browsers. */ button, input, select, textarea { font-size: 100%; /* 1 */ margin: 0; /* 2 */ vertical-align: middle; /* 3 */ } /** * Address Firefox 3+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ button, input { line-height: normal; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+. * Correct `select` style inheritance in Firefox 4+ and Opera. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. * 4. Remove inner spacing in IE 7 without affecting normal text inputs. * Known issue: inner spacing remains in IE 6. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ *overflow: visible; /* 4 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * 1. Address box sizing set to content-box in IE 8/9. * 2. Remove excess padding in IE 8/9. * 3. Remove excess padding in IE 7. * Known issue: excess padding remains in IE 6. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ *height: 13px; /* 3 */ *width: 13px; /* 3 */ } /** * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari 5 and Chrome * on OS X. */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Remove inner padding and border in Firefox 3+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * 1. Remove default vertical scrollbar in IE 6/7/8/9. * 2. Improve readability and alignment in all browsers. */ textarea { overflow: auto; /* 1 */ vertical-align: top; /* 2 */ } /* ========================================================================== Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } html { height: 100%; text-rendering: optimizelegibility; } body { word-wrap: break-word; min-height: 100%; _height: 100%; } img { max-width: 100%; height: auto; vertical-align: middle; } i, em { font-style: normal; } ol, ul, menu { list-style: none outside none; } fieldset, iframe, abbr, acronym { border: 0 none; } dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, select, textarea, p, blockquote, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; } img, iframe { vertical-align: middle; } textarea { resize: vertical; } hr { border: none; border-bottom: 1px solid #cfcfcf; margin-bottom: 10px; *color: pink; *filter: chroma(color=pink); height: 10px; *margin: -7px 0 2px; } .blank5, .blank10, .blank15, .blank20 { display: block; clear: both; overflow: hidden; } .blank5 { height: 5px; } .blank10 { height: 10px; } .blank15 { height: 15px; } .blank20 { height: 20px; } .fr { float: right; _display: inline; } .fl { float: left; _display: inline; } .show { display: block; } .hide { display: none; } .hidden { display: none !important; visibility: hidden; } .clear { clear: both; } .zoom { zoom: 1; } .highlight { color: #F60 !important; } .important { font-weight: 700 !important; } .no-border { border: 0 none !important; } .transparent { opacity: .0; filter: alpha(opacity=0); } .blue-link { color: #0a8cd2 !important; font-size: 12px; font-weight: normal; } .blue-link:hover { text-decoration: underline; } .blue-link:hover .txt { text-decoration: underline; } .blue-link:hover i { text-decoration: none; } .nowrap { white-space: nowrap; word-wrap: normal; } .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { content: ""; display: table; line-height: 0; } .clearfix:after { clear: both; } html, body, div, span, ul, li, a, em, h1, h2, h3, h4, h5, p, input, em, i, img { margin: 0; padding: 0; border: none; } em, i { font-style: normal; color: #666; } body { font-family: "microsoft yahei",Tahoma,sans-serif; font-size: 12px; } a { text-decoration: none; cursor: pointer; color: #666; } input { outline: none; } ul, li { list-style: none; } h3 { font-size: 12px; font-weight: bold; color: #666; } p { color: #999; } .fl { float: left; _display: inline; } .fr { float: right; _display: inline; } a { text-decoration: none; outline: none; } a:link, a:active, a:focus { outline: none; } .box { width: 600px; height: 460px; overflow: hidden; padding: 15px; position: relative; clear: both; } .box .nav { width: 100%; height: 30px; margin-bottom: 20px; background-color: #ecf3f9; } .box .nav li { width: 33%; float: left; _display: inline; } .box .nav li.last { width: 34%; } .box .nav li a { display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 14px; color: #666666; } .box .nav li.active { background-color: #ddebf7; } .common_title { width: 100%; height: 20px; position: relative; } .common_title .more { display: block; height: 12px; position: absolute; top: 0; right: 0; color: #999999; } .main_p { font-size: 14px; color: #333; margin-top: 5px; font-weight: bold; } .sec_tit { position: absolute; top: 7px; left: 80px; } .sec_tit li { height: 12px; line-height: 12px; border-right: 1px solid #cccccc; float: left; _display: inline; } .sec_tit li.last { border-right: none; } .sec_tit li a { font-size: 12px; color: #999999; padding: 0 8px; } .sec_tit li a.active { color: #666666; } .order_and_history { width: 600px; height: 90px; background-color: #ecf3f9; display: none; overflow: hidden; } .order_and_history .title, .order_and_history .content { float: left; _display: inline; } .order_and_history .title { width: 13px; height: 90px; padding: 0 6px; background-color: #ddebf7; color: #666666; } .order_and_history .order .title { height: 70px; padding-top: 20px; } .order_and_history .history .title { height: 75px; padding-top: 15px; } .order_and_history .content { max-width: 670px; padding: 10px 15px 0 15px; } .order_and_history .content li { width: 54px; height: 80px; margin-right: 20px; float: left; _display: inline; position: relative; z-index: 4; } .order_and_history .content li.last { margin-right: 0; } .order_and_history .content li.hover { z-index: 5; } .order_and_history .content li .hover_wrap { display: none; width: 208px; height: 54px; background-color: transparent; background-color: rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000); position: absolute; top: 0; left: 0; z-index: 100; } .order_and_history .content li .hover_wrap a.left_a { display: block; width: 54px; height: 54px; position: absolute; top: 0; left: 0; } .order_and_history .content li .hover_wrap a.left_a.live span { display: block; width: 26px; height: 26px; margin-top: 14px; margin-left: 14px; background-image: url(../slice/play_icon.png); } .order_and_history .content li .hover_wrap a.left_a span { display: block; width: 100%; height: 12px; line-height: 12px; margin-top: 21px; color: #ffffff; } .order_and_history .content li .hover_wrap a.left_a span i { display: block; width: 13px; height: 11px; margin: 1px 2px 0 7px; background-image: url(../slice/order_01.png); float: left; _display: inline; text-indent: -9999px; } .order_and_history .content li .hover_wrap a.left_a span i.done { background-image: url("../slice/order_02.png"); } .order_and_history .content li .hover_wrap p { height: 22px; line-height: 22px; text-indent: 65px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .order_and_history .content li .hover_wrap p.p_1 { color: #ffffff; } .order_and_history .content li .hover_wrap p.p_2 { color: #cccccc; } .order_and_history .history .content li.last { margin-right: 4px; } .usr_photo { display: block; width: 44px; height: 44px; border: 1px solid #959db1; position: absolute; bottom: 0; left: 0; z-index: 10; } .usr_photo img { display: block; width: 100%; height: 100%; } .live_top { width: 600px; display: none; height: 180px; margin-top: 20px; } .live_top .left { width: 350px; height: 180px; background-color: #cccccc; float: left; _display: inline; position: relative; } .live_top .left .banner_wrap { width: 100%; height: 100%; } .live_top .left .banner_wrap li { width: 100%; height: 100%; } .live_top .left .banner_wrap li:hover a .mask { background: #000; opacity: .3; filter: alpha(opacity=30); } .live_top .left .banner_wrap li:hover a .icon { display: block; } .live_top .left .banner_wrap li a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } .live_top .left .banner_wrap li a .banner { display: block; width: 100%; height: 100%; } .live_top .left .banner_wrap li a .tag { display: block; padding: 7px 10px; color: #ffffff; position: absolute; top: 10px; left: 0; z-index: 10; background-color: #ce7c4e; } .live_top .left .banner_wrap li a .title { display: block; width: 100%; height: 14px; line-height: 14px; color: #ffffff; font-size: 14px; text-indent: 60px; position: absolute; top: 140px; left: 0; z-index: 10; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .live_top .left .banner_wrap li a .number { display: block; width: 50%; height: 12px; line-height: 12px; font-size: 12px; color: #999999; position: absolute; top: 160px; left: 60px; z-index: 10; } .live_top .left .banner_wrap li a .number i { display: block; width: 11px; height: 12px; float: left; _display: inline; margin-right: 4px; background-image: url("../slice/people_icon.png"); } .live_top .left .banner_wrap li a .mask { display: block; width: 190px; height: 115px; position: absolute; top: 0; left: 0; z-index: 8; text-indent: -9999px; background: #000; opacity: .1; filter: alpha(opacity=10); -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .live_top .left .banner_wrap li a .icon { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; z-index: 9; margin-top: -24px; margin-left: -24px; display: none; } .live_top .left .banner_wrap li a .font_bg { display: block; width: 100%; height: 49px; position: absolute; top: 131px; left: 0; z-index: 9; background-image: url("../img/bot_shadow.png"); background-repeat: repeat-x; } .live_top .left .change_item { height: 6px; position: absolute; bottom: 10px; right: 2px; z-index: 11; } .live_top .left .change_item li { width: 8px; height: 8px; background-color: #858284; float: left; _display: inline; margin-right: 4px; text-indent: -9999px; overflow: hidden; border-radius: 4px; cursor: pointer; } .live_top .left .change_item li.active { background-color: #ffffff; } .live_top .right { width: 390px; height: 180px; float: left; _display: inline; } .live_top .right li { width: 120px; height: 85px; margin-left: 10px; background-color: #cccccc; float: left; _display: inline; } .live_top .right li.bottom { margin-top: 10px; } .live_top .right li:hover a span.mask { background: #000; opacity: .3; filter: alpha(opacity=30); } .live_top .right li:hover a span.icon { display: block; } .live_top .right li a { display: block; width: 100%; height: 100%; position: relative; } .live_top .right li a span { display: block; } .live_top .right li a span.img { width: 120px; height: 85px; overflow: hidden; } .live_top .right li a span.img img { display: block; width: 100%; height: 100%; } .live_top .right li a span.tag { height: 20px; line-height: 20px; padding: 3px 5px; color: #ffffff; background-color: #ce7c4e; position: absolute; top: 5px; left: 0; z-index: 10; } .live_top .right li a span.name { width: 100%; height: 24px; line-height: 24px; padding-top: 25px; text-indent: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; bottom: 0; left: 0; z-index: 10; background-image: url("../slice/bot_shadow.png"); background-repeat: no-repeat; color: #cccccc; } .live_top .right li a span.mask { display: block; width: 100%; height: 115px; position: absolute; top: 0; left: 0; z-index: 8; text-indent: -9999px; background: #000; opacity: .1; filter: alpha(opacity=10); -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .live_top .right li a span.icon { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; z-index: 9; margin-top: -24px; margin-left: -24px; display: none; } .match_team { width: 46px; height: 76px; position: absolute; top: 13px; } .match_team.team_l { left: 20px; } .match_team.team_r { right: 20px; } .match_team .match_team_photo { width: 46px; height: 46px; border-radius: 23px; overflow: hidden; } .match_team p { height: 22px; line-height: 22px; color: #666666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .match_top { width: 600px; height: 90px; background-color: #ecf3f9; margin-top: 20px; color: #666666; } .match_top .left { width: 165px; height: 100%; float: left; _display: inline; } .match_top .center { width: 245px; height: 100%; float: left; _display: inline; position: relative; } .match_top .center p { text-align: center; color: #999999; } .match_top .center p.p_1 { margin-top: 17px; } .match_top .center p.p_2 { height: 32px; line-height: 32px; font-size: 22px; font-weight: bold; color: #666666; } .match_top .center p.p_1, .match_top .center p.p_3 { height: 12px; line-height: 12px; } .match_top .right { width: 309px; height: 59px; margin-top: 15px; border-left: 1px solid #dedede; float: left; _display: inline; position: relative; } .match_top .right ul { width: 220px; padding-left: 20px; overflow: hidden; } .match_top .right ul li { height: 12px; line-height: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .match_top .right ul li.cen { height: 36px; line-height: 36px; *height: 30px; *line-height: 30px; } .match_btn { display: block; width: 70px; height: 25px; line-height: 25px; background-color: #408bcb; font-size: 12px; color: #ffffff; text-align: center; border-radius: 2px; position: absolute; right: 0; } .match_btn.order_match { top: 0; } .match_btn.watch_match { top: 34px; } .match_btn:hover { background-color: #4b9add; } .king_live, .intrest_live, .hot_live { width: 600px; margin-top: 20px; } .king_live .video_wrap, .intrest_live .video_wrap, .hot_live .video_wrap { margin-top: 10px; } .king_live .video_wrap li, .intrest_live .video_wrap li, .hot_live .video_wrap li { width: 190px; height: 151px; margin-right: 15px; margin-bottom: 10px; float: left; _display: inline; position: relative; } .king_live .video_wrap li.right, .intrest_live .video_wrap li.right, .hot_live .video_wrap li.right { margin-right: 0; } .king_live .video_wrap li .photo_wrap, .intrest_live .video_wrap li .photo_wrap, .hot_live .video_wrap li .photo_wrap { display: block; width: 190px; height: 115px; position: relative; } .king_live .video_wrap li .photo_wrap .img, .intrest_live .video_wrap li .photo_wrap .img, .hot_live .video_wrap li .photo_wrap .img { display: block; width: 190px; height: 115px; overflow: hidden; } .king_live .video_wrap li .photo_wrap .img img, .intrest_live .video_wrap li .photo_wrap .img img, .hot_live .video_wrap li .photo_wrap .img img { display: block; width: 100%; height: 100%; } .king_live .video_wrap li .photo_wrap .usr_img, .intrest_live .video_wrap li .photo_wrap .usr_img, .hot_live .video_wrap li .photo_wrap .usr_img { display: block; width: 44px; height: 44px; position: absolute; bottom: 0px; left: 0; z-index: 10; border: 1px solid #a6a49b; } .king_live .video_wrap li .photo_wrap .usr_img img, .intrest_live .video_wrap li .photo_wrap .usr_img img, .hot_live .video_wrap li .photo_wrap .usr_img img { display: block; width: 100%; height: 100%; } .king_live .video_wrap li .photo_wrap .mask, .intrest_live .video_wrap li .photo_wrap .mask, .hot_live .video_wrap li .photo_wrap .mask { display: block; width: 100%; height: 115px; position: absolute; top: 0; left: 0; z-index: 9; background: #000; opacity: .3; filter: alpha(opacity=30); display: none; } .king_live .video_wrap li .photo_wrap .mask_icon, .intrest_live .video_wrap li .photo_wrap .mask_icon, .hot_live .video_wrap li .photo_wrap .mask_icon { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; z-index: 10; margin-top: -27px; margin-left: -20px; display: none; } .king_live .video_wrap li .photo_wrap .name, .intrest_live .video_wrap li .photo_wrap .name, .hot_live .video_wrap li .photo_wrap .name { display: block; width: 70px; height: 20px; line-height: 20px; position: absolute; bottom: 5px; left: 50px; color: #cccccc; z-index: 10; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .king_live .video_wrap li .photo_wrap .number, .intrest_live .video_wrap li .photo_wrap .number, .hot_live .video_wrap li .photo_wrap .number { display: block; max-width: 70px; height: 12px; line-height: 12px; position: absolute; bottom: 9px; right: 5px; z-index: 10; color: #999999; } .king_live .video_wrap li .photo_wrap .number i, .intrest_live .video_wrap li .photo_wrap .number i, .hot_live .video_wrap li .photo_wrap .number i { display: block; width: 11px; height: 12px; float: left; _display: inline; margin-right: 4px; background-image: url("../slice/people_icon.png"); } .king_live .video_wrap li .photo_wrap .font_bg, .intrest_live .video_wrap li .photo_wrap .font_bg, .hot_live .video_wrap li .photo_wrap .font_bg { display: block; width: 190px; height: 49px; position: absolute; top: 66px; left: 0; z-index: 9; background-image: url("../img/bot_shadow.png"); background-repeat: repeat-x; } .king_live .video_wrap li:hover, .intrest_live .video_wrap li:hover, .hot_live .video_wrap li:hover { z-index: 11; } .king_live .video_wrap li:hover .photo_wrap .mask, .king_live .video_wrap li:hover .photo_wrap .mask_icon, .intrest_live .video_wrap li:hover .photo_wrap .mask, .intrest_live .video_wrap li:hover .photo_wrap .mask_icon, .hot_live .video_wrap li:hover .photo_wrap .mask, .hot_live .video_wrap li:hover .photo_wrap .mask_icon { display: block; } .king_live .video_wrap li p, .intrest_live .video_wrap li p, .hot_live .video_wrap li p { height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .king_live .video_wrap li p.p_1, .intrest_live .video_wrap li p.p_1, .hot_live .video_wrap li p.p_1 { margin-top: 5px; margin-bottom: 1px; color: #666666; cursor: pointer; padding-right: 22px; position: relative; } .king_live .video_wrap li p.p_1 span, .intrest_live .video_wrap li p.p_1 span, .hot_live .video_wrap li p.p_1 span { display: block; width: 20px; height: 20px; text-indent: -9999px; position: absolute; top: 2px; right: 0; background: url("http://a.dwstatic.com/huya/main/img/pic-global_782237f.png") -152px -51px no-repeat; } .king_live .video_wrap li p.p_2, .intrest_live .video_wrap li p.p_2, .hot_live .video_wrap li p.p_2 { color: #999999; } .king_live .video_wrap li .vs_info, .intrest_live .video_wrap li .vs_info, .hot_live .video_wrap li .vs_info { display: none; width: 194px; height: 116px; background: #ffffff; position: absolute; left: 191px; top: 0; z-index: 100; border: 1px solid #cccccc; padding: 5px 5px; overflow: hidden; } .king_live .video_wrap li .vs_info .left, .king_live .video_wrap li .vs_info .right, .intrest_live .video_wrap li .vs_info .left, .intrest_live .video_wrap li .vs_info .right, .hot_live .video_wrap li .vs_info .left, .hot_live .video_wrap li .vs_info .right { width: 85px; height: 100%; float: left; _display: inline; } .king_live .video_wrap li .vs_info .left p, .king_live .video_wrap li .vs_info .right p, .intrest_live .video_wrap li .vs_info .left p, .intrest_live .video_wrap li .vs_info .right p, .hot_live .video_wrap li .vs_info .left p, .hot_live .video_wrap li .vs_info .right p { width: 85px; height: 20px; line-height: 20px; padding: 2px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; } .king_live .video_wrap li .vs_info .left p span, .king_live .video_wrap li .vs_info .right p span, .intrest_live .video_wrap li .vs_info .left p span, .intrest_live .video_wrap li .vs_info .right p span, .hot_live .video_wrap li .vs_info .left p span, .hot_live .video_wrap li .vs_info .right p span { display: block; width: 20px; height: 20px; position: absolute; top: 0; right: 0; } .king_live .video_wrap li .vs_info .left p span img, .king_live .video_wrap li .vs_info .right p span img, .intrest_live .video_wrap li .vs_info .left p span img, .intrest_live .video_wrap li .vs_info .right p span img, .hot_live .video_wrap li .vs_info .left p span img, .hot_live .video_wrap li .vs_info .right p span img { display: block; width: 100%; height: 100%; } .king_live .video_wrap li .vs_info .right p, .intrest_live .video_wrap li .vs_info .right p, .hot_live .video_wrap li .vs_info .right p { text-indent: 25px; } .king_live .video_wrap li .vs_info .right p span, .intrest_live .video_wrap li .vs_info .right p span, .hot_live .video_wrap li .vs_info .right p span { right: 66px; } .king_live .video_wrap li .vs_info .left p, .intrest_live .video_wrap li .vs_info .left p, .hot_live .video_wrap li .vs_info .left p { width: 60px; padding-right: 25px; text-align: right; } .king_live .video_wrap li .vs_info .center, .intrest_live .video_wrap li .vs_info .center, .hot_live .video_wrap li .vs_info .center { width: 20px; height: 124px; line-height: 124px; float: left; _display: inline; text-align: center; } .hero_live { width: 600px; margin-top: 30px; position: relative; } .hero_live .list_wrap { width: 100%; height: 90px; margin-top: 13px; } .hero_live .list_wrap .title, .hero_live .list_wrap .content { float: left; _display: inline; } .hero_live .list_wrap .title { width: 13px; height: 90px; padding: 0 6px; background-color: #ddebf7; color: #666666; } .hero_live .list_wrap .order .title { height: 70px; padding-top: 20px; } .hero_live .list_wrap .history .title { height: 77px; padding-top: 13px; } .hero_live .list_wrap .content { padding-left: 15px; width: 560px; overflow: hidden; height: 90px; } .hero_live .list_wrap .content li { width: 60px; height: 80px; margin-right: 15px; float: left; _display: inline; position: relative; } .hero_live .list_wrap .content li.last { margin-right: 0; } .hero_live .list_wrap .content li.last .more_hero { display: block; width: 26px; height: 36px; line-height: 18px; padding: 12px 17px; text-align: center; color: #408bcb; background-color: #ddebf7; } .hero_live .list_wrap .content li.last .more_hero:hover { background-color: #eef7ff; } .hero_live .list_wrap .content li.active { background-color: #408bcb; } .hero_live .list_wrap .content li.active .con_usr_photo { width: 56px; height: 56px; margin-top: 2px; margin-left: 2px; } .hero_live .list_wrap .content li.active .con_usr_name { color: #ffffff; } .hero_live .list_wrap .content li.active .icon { display: block; } .hero_live .list_wrap .content li .con_usr_photo { width: 60px; height: 60px; } .hero_live .list_wrap .content li .con_usr_name { width: 100%; height: 22px; line-height: 22px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hero_live .list_wrap .content li .icon { display: block; width: 10px; height: 4px; text-indent: -9999px; position: absolute; bottom: -4px; left: 25px; background-image: url("../slice/hero_active.png"); display: none; } .hero_live .game_wrap { width: 100%; height: 160px; margin-top: 15px; overflow: hidden; position: relative; } .hero_live .game_wrap ul { width: 100%; height: 100%; overflow: hidden; } .hero_live .game_wrap ul li { width: 190px; height: 100%; margin-right: 15px; float: left; _display: inline; position: relative; z-index: 10; } .hero_live .game_wrap ul li.last { margin-right: 0; } .hero_live .game_wrap ul li:hover { z-index: 11; } .hero_live .game_wrap ul li:hover .photo_wrap .mask { background: #000; opacity: .3; filter: alpha(opacity=30); } .hero_live .game_wrap ul li:hover .photo_wrap .icon { display: block; } .hero_live .game_wrap ul li .photo_wrap { display: block; width: 190px; height: 115px; position: relative; *background-color: #cccccc; } .hero_live .game_wrap ul li .photo_wrap .img { display: block; width: 190px; height: 115px; overflow: hidden; } .hero_live .game_wrap ul li .photo_wrap .img img { display: block; width: 100%; height: 100%; } .hero_live .game_wrap ul li .photo_wrap .usr_img { display: block; width: 44px; height: 44px; position: absolute; bottom: 0; left: 0; z-index: 10; border: 1px solid #a6a49b; } .hero_live .game_wrap ul li .photo_wrap .usr_img img { display: block; width: 100%; height: 100%; } .hero_live .game_wrap ul li .photo_wrap .name { display: block; width: 110px; height: 20px; line-height: 20px; position: absolute; bottom: 5px; left: 50px; color: #cccccc; z-index: 10; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hero_live .game_wrap ul li .photo_wrap .mask { display: block; width: 100%; height: 115px; position: absolute; top: 0; left: 0; z-index: 8; text-indent: -9999px; background: #000; opacity: .1; filter: alpha(opacity=10); -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .hero_live .game_wrap ul li .photo_wrap .icon { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; z-index: 9; margin-top: -24px; margin-left: -24px; display: none; } .hero_live .game_wrap ul li p { width: 174px; height: 22px; line-height: 22px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .hero_live .game_wrap ul li p.p_1 { margin-top: 5px; color: #666666; cursor: pointer; padding-right: 20px; position: relative; } .hero_live .game_wrap ul li p.p_1 span { display: block; width: 20px; height: 20px; text-indent: -9999px; position: absolute; top: 2px; right: 0; background: url("http://a.dwstatic.com/huya/main/img/pic-global_782237f.png") -152px -51px no-repeat; } .hero_live .game_wrap ul li p.p_2 { color: #999999; } .hero_live .game_wrap ul li .vs_info { display: none; width: 181px; height: 104px; background: #ffffff; position: absolute; left: 190px; top: 0; z-index: 100; border: 1px solid #cccccc; padding: 5px 5px; overflow: hidden; } .hero_live .game_wrap ul li .vs_info .left, .hero_live .game_wrap ul li .vs_info .right { width: 80px; height: 100%; float: left; _display: inline; } .hero_live .game_wrap ul li .vs_info .left p, .hero_live .game_wrap ul li .vs_info .right p { width: 80px; height: 20px; line-height: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; } .hero_live .game_wrap ul li .vs_info .left p span, .hero_live .game_wrap ul li .vs_info .right p span { display: block; width: 20px; height: 20px; position: absolute; top: 0; right: 0; } .hero_live .game_wrap ul li .vs_info .left p span img, .hero_live .game_wrap ul li .vs_info .right p span img { display: block; width: 100%; height: 100%; } .hero_live .game_wrap ul li .vs_info .right p { text-indent: 25px; } .hero_live .game_wrap ul li .vs_info .right p span { right: 58px; } .hero_live .game_wrap ul li .vs_info .left p { width: 60px; padding-right: 25px; text-align: right; } .hero_live .game_wrap ul li .vs_info .center { width: 20px; height: 124px; line-height: 124px; float: left; _display: inline; text-align: center; margin-left: 4px; margin-right: -3px; } .hero_live .change_item { display: block; width: 24px; height: 62px; position: absolute; z-index: 100; top: 160px; display: none; } .hero_live .change_item.pre_item { left: 0; background-image: url("../slice/l_grey.png"); background-repeat: no-repeat; } .hero_live .change_item.pre_item.active { background-image: url("../slice/l_pink.png"); } .hero_live .change_item.next_item { right: 0; background-image: url("../slice/r_grey.png"); background-repeat: no-repeat; } .hero_live .change_item.next_item.active { background-image: url("../slice/r_pink.png"); } .professional_team { width: 600px; margin-top: 15px; position: relative; } .professional_team .change_item { display: block; width: 24px; height: 62px; position: absolute; z-index: 100; top: 162px; *top: 150px; display: none; } .professional_team .change_item.pre_item { left: 0; background-image: url("../slice/l_grey.png"); background-repeat: no-repeat; } .professional_team .change_item.pre_item.active { background-image: url("../slice/l_pink.png"); } .professional_team .change_item.next_item { right: 0; background-image: url("../slice/r_grey.png"); background-repeat: no-repeat; } .professional_team .change_item.next_item.active { background-image: url("../slice/r_pink.png"); } .team_name { width: 100%; height: 30px; margin: 15px 0; } .team_name ul li { float: left; _display: inline; background-color: #ecf3f9; } .team_name ul li.active { background-color: #ddebf7; } .team_name ul li a { display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; } .team_name tr td a { display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: #ecf3f9; } .team_name tr td a.active { background-color: #ddebf7; } .honor { width: 100%; height: 50px; background-color: #f4f4f4; } .honor ul { width: 540px; height: 50px; color: #666666; padding-left: 9px; float: left; _display: inline; } .honor ul li { width: 180px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; height: 50px; line-height: 50px; text-indent: 21px; float: left; _display: inline; position: relative; } .honor ul li .icon { display: block; width: 17px; height: 14px; position: absolute; top: 18px; left: 0; background: url(../img/champion_icon.png); } .team_logo { display: block; width: 50px; height: 50px; float: left; _display: inline; overflow: hidden; } .team_logo img { display: block; width: 100%; height: 100%; } .team_detail { width: 100%; height: 164px; overflow: hidden; } .team_detail .img { display: block; width: 100px; height: 100px; } .team_detail .img img { display: block; width: 100%; height: 100%; } .team_detail .video { width: 100%; height: 100px; margin-top: 14px; } .team_detail .video li { width: 100px; height: 100px; margin-right: 25px; float: left; _display: inline; position: relative; } .team_detail .video li.last { margin-right: 0; } .team_detail .video li:hover .tag { display: none; } .team_detail .video li:hover .hover_wrap { display: block; } .team_detail .live .tag { background-color: #cb754b; } .team_detail .live .hover_wrap .to_watch { background-color: #cb754b; } .team_detail .record .tag { background-color: #3471a5; } .team_detail .record .hover_wrap .to_watch { background-color: #3471a5; } .team_detail .tag { display: block; max-width: 50%; height: 20px; line-height: 20px; padding: 0 10px; color: #ffffff; position: absolute; top: 10px; left: 0; z-index: 10; } .team_detail .hover_wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: transparent; background-color: rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000); display: none; } .team_detail .hover_wrap p { width: 100%; height: 12px; line-height: 12px; text-indent: 8px; } .team_detail .hover_wrap p.p_1 { color: #ffffff; font-weight: bold; margin-top: 11px; } .team_detail .hover_wrap p.p_2 { color: #cccccc; margin-top: 7px; } .to_watch { display: block; width: 100%; height: 22px; line-height: 22px; text-indent: 8px; color: #ffffff; position: absolute; bottom: 0; left: 0; } .to_watch i { display: block; width: 14px; height: 14px; text-indent: -9999px; position: absolute; top: 4px; right: 10px; background: url(../img/little_play.png); } .all_box .girls_show { width: 600px; margin-top: 24px; } .all_box .girls_show .video_wrap { width: 100%; margin-top: 10px; } .all_box .girls_show .video_wrap li { width: 190px; height: 162px; margin-right: 15px; margin-bottom: 10px; float: left; _display: inline; } .all_box .girls_show .video_wrap li.right { margin-right: 0; } .all_box .girls_show .video_wrap li .top { display: block; width: 100%; height: 135px; position: relative; } .all_box .girls_show .video_wrap li .top .v_cover { display: block; width: 100%; height: 100%; overflow: hidden; } .all_box .girls_show .video_wrap li .top .v_cover img { display: block; width: 100%; height: 100%; } .all_box .girls_show .video_wrap li .top .hover_wrap { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; background-color: #000000; opacity: .2; filter: alpha(opacity=20); background-color: rgba(0, 0, 0, 0.5); display: none; } .all_box .girls_show .video_wrap li .top .hover_wrap i { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; margin-top: -24px; margin-left: -24px; text-indent: -9999px; } .all_box .girls_show .video_wrap li .top .hover_wrap_icon { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; z-index: 10; margin-top: -24px; margin-left: -24px; text-indent: -9999px; display: none; } .all_box .girls_show .video_wrap li .top:hover .hover_wrap { display: block; } .all_box .girls_show .video_wrap li .top:hover .hover_wrap_icon { display: block; } .all_box .girls_show .video_wrap li .top .name { display: block; width: 100%; height: 30px; line-height: 30px; padding-top: 10px; text-indent: 8px; background-image: url("../slice/bot_shadow.png"); position: absolute; bottom: 0; left: 0; z-index: 10; color: #cccccc; } .all_box .girls_show .video_wrap li p { height: 32px; line-height: 32px; color: #666666; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; } .all_box .wonder_video { width: 600px; } .all_box .wonder_video .video_wrap { width: 100%; height: 170px; margin-top: 10px; } .all_box .wonder_video .video_wrap li { width: 190px; height: 162px; float: left; _display: inline; margin-right: 15px; margin-bottom: 10px; } .all_box .wonder_video .video_wrap li.last { margin-right: 0; } .all_box .wonder_video .video_wrap li .top { display: block; width: 190px; height: 115px; position: relative; overflow: hidden; } .all_box .wonder_video .video_wrap li .top .cover { display: block; width: 100%; height: 100%; } .all_box .wonder_video .video_wrap li .top .cover img { display: block; width: 190px; height: 115px; } .all_box .wonder_video .video_wrap li .top .hover_wrap { display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; background-color: #000000; opacity: .2; filter: alpha(opacity=20); background-color: rgba(0, 0, 0, 0.5); display: none; } .all_box .wonder_video .video_wrap li .top .hover_wrap_icon { display: block; width: 48px; height: 48px; background-image: url("../slice/play_icon_king.png"); position: absolute; top: 50%; left: 50%; z-index: 10; margin-top: -24px; margin-left: -24px; text-indent: -9999px; display: none; } .all_box .wonder_video .video_wrap li .top:hover .hover_wrap { display: block; } .all_box .wonder_video .video_wrap li .top:hover .hover_wrap_icon { display: block; } .all_box .wonder_video .video_wrap li .top:hover .order { display: block; } .all_box .wonder_video .video_wrap li .top .name { display: block; width: 100%; height: 30px; line-height: 30px; padding-top: 10px; text-indent: 8px; background-image: url("../slice/bot_shadow.png"); position: absolute; bottom: 0; left: 0; z-index: 10; color: #cccccc; } .all_box .wonder_video .video_wrap li .top .order { display: block; width: 60px; height: 12px; line-height: 12px; color: #ffffff; position: absolute; top: 10px; right: 0; z-index: 10; display: none; } .all_box .wonder_video .video_wrap li .top .order i { display: block; width: 13px; height: 11px; margin: 1px 2px 0 7px; background-image: url(../slice/order_01.png); float: left; _display: inline; text-indent: -9999px; } .all_box .wonder_video .video_wrap li .top .order i.done { background-image: url("../slice/order_02.png"); } .all_box .wonder_video .video_wrap li .top .time { display: block; max-width: 100px; height: 32px; line-height: 32px; color: #cccccc; position: absolute; bottom: 0; right: 9px; z-index: 10; } .all_box .wonder_video .video_wrap li .bottom { width: 100%; height: 35px; line-height: 35px; position: relative; cursor: pointer; } .all_box .wonder_video .video_wrap li .bottom .p_font { display: block; width: 70%; height: 35px; line-height: 35px; position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .all_box .wonder_video .video_wrap li .bottom .p_times { display: block; position: absolute; top: 0; right: 0; } .order_box .list_wrap li { position: relative; width: 290px; height: 80px; margin-right: 20px; float: left; _display: inline; overflow: hidden; } .order_box .list_wrap li .photo { display: block; width: 60px; height: 60px; float: left; _display: inline; margin-top: 10px; margin-left: 10px; } .order_box .list_wrap li .photo img { display: block; width: 100%; height: 100%; } .order_box .list_wrap li .center { width: 114px; height: 100%; float: left; _display: inline; margin-left: 10px; margin-top: 10px; } .order_box .list_wrap li .center p { height: 20px; line-height: 20px; color: #999999; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .order_box .list_wrap li .center p.p_1, .order_box .list_wrap li .center p span { color: #666666; } .order_box .list_wrap li .right { position: absolute; right: 0; top: 0; padding: 14px 10px 0 0; float: right; _display: inline; } .order_box .list_wrap li .right a { display: block; width: 85px; height: 30px; line-height: 30px; text-align: center; color: #408bcb; border-radius: 2px; } .order_box .list_wrap li .right a.live { background-color: #fc905a; color: #ffffff; } .order_box .list_wrap li .right a.record { background-color: #408bcb; color: #ffffff; } .order_box .list_wrap li .right a.cancel { display: none; } .order_box .list_wrap li.li_r { margin-right: 0; } .order_box .list_wrap li:hover { background-color: #ecf3f9; } .order_box .list_wrap li:hover .right .cancel { display: block; } .order_box .tips { width: 100%; height: 30px; line-height: 30px; text-align: center; color: #999999; margin-top: 100px; } .order_box .tips a { color: #408bcb; } .pop_wrap { display: none; width: 760px; height: 100%; position: fixed; top: 0; left: 0; z-index: 100; background-color: transparent; background-color: rgba(0, 0, 0, 0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000, endColorstr=#7f000000); } .pop_wrap .msg_pop { width: 303px; height: 196px; border: 1px solid #e7e7e7; border-top: 3px solid #408bcb; background-color: #fcfdfd; position: absolute; top: 150px; left: 50%; margin-left: -152px; } .pop_wrap .msg_pop .error_msg { width: 80%; max-height: 60px; overflow: hidden; padding: 0 10%; text-align: center; line-height: 26px; padding-top: 50px; color: #999999; } .pop_wrap .msg_pop .confirm { display: block; width: 84px; height: 30px; line-height: 30px; text-align: center; color: #ffffff; margin: 0 auto; margin-top: 30px; background-color: #8cb4d5; border-radius: 3px; } .pop_wrap .msg_pop .confirm:hover { background-color: #408bcb; } em, i { font-style: normal; color: #666; } .heroRankCrumbs { background: #ecf3f9; height: 30px; line-height: 30px; padding: 0 15px; color: #666; width: 600px; } .heroRankCrumbs a { outline: none; } .heroRankCrumbs .fnMenu { float: right; _display: inline; margin-top: 7px; } .heroRankCrumbs .fnMenu a { cursor: pointer; width: 13px; height: 13px; float: left; _display: inline; padding: 4px 8px; border: 1px solid #cfdeea; background: #ecf3f9; margin-top: -4px; } .heroRankCrumbs .fnMenu .back { -webkit-border-radius: 2px; border-radius: 2px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; margin-right: 12px; } .heroRankCrumbs .fnMenu .back i { display: inline-block; width: 13px; height: 13px; margin-bottom: 12px; background-image: url(../slice/back-arrow.png); } .heroRankCrumbs .fnMenu .refresh { -webkit-border-radius: 2px; border-radius: 2px; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } .heroRankCrumbs .fnMenu .refresh i { display: inline-block; width: 13px; height: 13px; margin-bottom: 12px; background-image: url(../slice/refresh.png); } .sub-nav li { float: left; _display: inline; height: 25px; line-height: 25px; padding: 0 13px; font-weight: bold; color: #666; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .sub-nav li a { display: inline-block; *display: inline; *zoom: 1; width: 100%; height: 100%; } .sub-nav li.active { background-color: #ddebf7; } .no-live-data { text-align: center; margin-top: 80px; } .no-live-data img { margin-bottom: 25px; } .hot_live .video_wrap li { height: 140px !important; } #recommendList li, #comHeroList li, #comPosList li { margin-bottom: 20px; } .p-split { padding: 0 10px; color: #ccc; }