/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
   font-family: sans-serif;
   /* 1 */
   line-height: 1.15;
   /* 2 */
   -ms-text-size-adjust: 100%;
   /* 3 */
   -webkit-text-size-adjust: 100%
   /* 3 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
   margin: 0
}

/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
   display: block
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
   font-size: 2em;
   margin: .67em 0
}

/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
   /* 1 */
   display: block
}

/**
 * Add the correct margin in IE 8.
 */
figure {
   margin: 1em 40px
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   /* 1 */
   height: 0;
   /* 1 */
   overflow: visible
   /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
   font-family: monospace, monospace;
   /* 1 */
   font-size: 1em
   /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
   background-color: transparent;
   /* 1 */
   -webkit-text-decoration-skip: objects
   /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
   outline-width: 0
}

/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
   border-bottom: none;
   /* 1 */
   text-decoration: underline;
   /* 2 */
   text-decoration: underline dotted
   /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
   font-weight: inherit;
   font-weight: bolder
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
   font-family: monospace, monospace;
   /* 1 */
   font-size: 1em
   /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
   font-style: italic
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
   background-color: #ff0;
   color: #000
}

/**
 * Add the correct font size in all browsers.
 */
small {
   font-size: 80%
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline
}

sub {
   bottom: -.25em
}

sup {
   top: -.5em
}

/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
   display: inline-block
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
   display: none;
   height: 0
}

/**
 * Remove the border on images inside links in IE 10-.
 */
img {
   border-style: none
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
   overflow: hidden
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
   font-family: sans-serif;
   /* 1 */
   font-size: 100%;
   /* 1 */
   line-height: 1.15;
   /* 1 */
   margin: 0
   /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
   /* 1 */
   overflow: visible
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
   /* 1 */
   text-transform: none
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
[type=reset],
[type=submit],
button,
html [type=button] {
   -webkit-appearance: button
   /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner,
button::-moz-focus-inner {
   border-style: none;
   padding: 0
}

/**
 * Restore the focus styles unset by the previous rule.
 */
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring,
button:-moz-focusring {
   outline: 1px dotted ButtonText
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
   border: 1px solid silver;
   margin: 0 2px;
   padding: .35em .625em .75em
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   /* 1 */
   color: inherit;
   /* 2 */
   display: table;
   /* 1 */
   max-width: 100%;
   /* 1 */
   padding: 0;
   /* 3 */
   white-space: normal
   /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
   display: inline-block;
   /* 1 */
   vertical-align: baseline
   /* 2 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
   overflow: auto
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type=checkbox],
[type=radio] {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   /* 1 */
   padding: 0
   /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
   height: auto
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
   -webkit-appearance: textfield;
   /* 1 */
   outline-offset: -2px
   /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
   -webkit-appearance: none
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
   -webkit-appearance: button;
   /* 1 */
   font: inherit
   /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
   display: block
}

/*
 * Add the correct display in all browsers.
 */
summary {
   display: list-item
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
   display: inline-block
}

/**
 * Add the correct display in IE.
 */
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden],
template {
   display: none
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.btn {
   background: #f70;
   color: #fff
}

.btn,
.btn--reverse {
   display: inline-block;
   padding: 4px 12px 5px;
   vertical-align: middle;
   border: 1px solid #f70;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   font-size: 14px
}

.btn--reverse {
   background: #f70;
   color: #fff;
   background: transparent;
   color: #f70
}

.btn--reverse:hover {
   background: #f70;
   color: #fff
}

html {
   font: 400 12px/1.5 tahoma, arial, Hiragino Sans GB, Microsoft Yahei;
   color: #333;
   -webkit-font-smoothing: antialiased;
   -webkit-text-stroke-width: 0;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizelegibility
}

a {
   text-decoration: none
}

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   font-weight: 600
}

em,
i {
   font-style: normal
}

ol,
ul {
   margin: 0;
   padding: 0;
   list-style: none
}

table {
   border-collapse: collapse
}

img,
input {
   vertical-align: middle
}

body,
html {
   height: 100%;
   min-height: 100%;
   background: #f1f2f3
}

button,
input,
optgroup,
select,
textarea {
   font-family: inherit
}

.body {
   min-width: 1200px;
   overflow-y: hidden;
   min-height: 100%
}

.body-wrapper {
   overflow: hidden;
   width: 1200px;
   margin: 0 auto;
   margin-bottom: 120px
}

.body-wrapper .main {
   overflow: hidden;
   padding: 17px 0 40px
}

.body-wrapper-outer {
   margin-top: 61px
}

@-webkit-keyframes a {
   0% {
      -webkit-transform: scale(.6);
      transform: scale(.6)
   }

   to {
      -webkit-transform: scale(1);
      transform: scale(1)
   }
}

@-moz-keyframes a {
   0% {
      -moz-transform: scale(.6);
      transform: scale(.6)
   }

   to {
      -moz-transform: scale(1);
      transform: scale(1)
   }
}

@-o-keyframes a {
   0% {
      -o-transform: scale(.6);
      transform: scale(.6)
   }

   to {
      -o-transform: scale(1);
      transform: scale(1)
   }
}

@keyframes a {
   0% {
      -webkit-transform: scale(.6);
      -moz-transform: scale(.6);
      -o-transform: scale(.6);
      transform: scale(.6)
   }

   to {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1)
   }
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background: #222;
   border-bottom: 1px solid #292929;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
   z-index: 3;
   color: #d8d7d7;
   font-size: 0;
   -webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   transform: translateZ(0)
}

.header-wrapper {
   width: 1200px;
   margin: 0 auto;
   zoom: 1
}

.header-wrapper:after {
   clear: both;
   display: table;
   content: ""
}

.header-action {
   float: right;
   line-height: 58px;
   font-size: 12px
}

.header-action a {
   color: #e5e5e5
}

.header-action .split {
   margin: 0 11px;
   color: #555
}

.header-action-history,
.header-action-user,
.header-action .split,
.header-logo {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.header-logo {
   position: relative;
   font-size: 0
}

.header-logo a {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 142px;
   height: 29px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -270px
}

.header-logo b {
   position: absolute;
   right: 0;
   top: -15px;
   width: 43px;
   height: 16px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -19px
}

.header-menu {
   font-size: 0
}

.header-menu,
.header-menu a {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.header-menu a {
   margin: 0 2px 0 39px;
   padding: 0 3px;
   color: #e5e5e5;
   font-size: 14px;
   line-height: 58px;
   padding-bottom: 2px
}

.header-menu a.is-active,
.header-menu a:hover {
   color: #24baf1;
   padding-bottom: 0;
   border-bottom: 2px solid #24baf1
}

.header-menu .icon-menu-live {
   position: relative;
   top: -1px;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   margin-left: 4px;
   width: 30px;
   height: 14px;
   background: url(/ouyue/components/header/live.png?302a7ee673) no-repeat 50%
}

.userinfo {
   position: relative;
   cursor: default
}

.userinfo .icon-arrow {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 11px;
   height: 7px;
   margin: 0 9px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e) no-repeat 50%;
   background-position: -4px -4px
}

.userinfo:hover .userinfo-panel {
   display: block;
   -webkit-animation: a .1s;
   -moz-animation: a .1s;
   -o-animation: a .1s;
   animation: a .1s
}

.userinfo-label {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   overflow: hidden;
   white-space: nowrap;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   max-width: 80px;
   color: #e5e5e5
}

.userinfo-panel {
   display: none;
   position: absolute;
   right: 0;
   background: #fff;
   border: 1px solid #ccc;
   line-height: 1.5;
   filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(51,51,51,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
   -webkit-filter: drop-shadow(0 0 2px #333);
   filter: drop-shadow(0 0 2px #333);
   -webkit-box-shadow: 0 0 2px #333\9;
   -moz-box-shadow: 0 0 2px #333\9;
   box-shadow: 0 0 2px #333\9
}

.userinfo-panel .icon-trans {
   position: absolute;
   right: 20px;
   top: -12px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-bottom-color: #ccc
}

.userinfo-panel .icon-trans .icon-trans-inr {
   position: absolute;
   top: -6px;
   left: -6px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-bottom-color: #fff
}

.userinfo-main {
   width: 140px;
   padding: 12px 15px 9px;
   text-align: center;
   white-space: nowrap
}

.userinfo-avatar {
   display: inline-block;
   padding: 9px;
   border: 1px solid #f6f6f6;
   border-radius: 9999px
}

.userinfo-avatar,
.userinfo-avatar img {
   width: 60px;
   height: 60px;
   -webkit-border-radius: 9999px;
   -moz-border-radius: 9999px
}

.userinfo-avatar img {
   border-radius: 9999px
}

.userinfo-nickname {
   margin: 5px 0;
   color: #222;
   font-size: 14px;
   overflow: hidden;
   white-space: nowrap;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis
}

.userinfo-buyvip,
.userinfo-nickname {
   display: block
}

.userinfo-buyvip {
   font-size: 12px
}

.userinfo-buyvip a {
   text-decoration: underline
}

.userinfo-buyvip a,
.userinfo-viplast {
   color: #a0a0a0
}

.userinfo-viplast-label {
   line-height: 1.5;
   padding: 0 6px;
   margin-right: 4px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   background: #2fb3ff;
   color: #fff;
   text-transform: uppercase;
   text-shadow: 0 0 1px #000
}

.userinfo-viplast-label,
.userinfo-viplast-time {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.userinfo-footer {
   padding: 5px 15px 6px;
   background: #f2f2f2;
   border-top: 1px solid #ccc;
   text-align: right
}

.userinfo-footer a {
   color: #4b4b4b
}

.userinfo-menu li {
   margin: 10px 0
}

.userinfo-menu li a {
   display: block;
   padding: 6px 0;
   color: #333
}

.userinfo-menu li a i {
   margin-right: 22px
}

.userinfo-menu li .message-new {
   display: none;
   position: absolute;
   width: 4px;
   height: 4px;
   margin: 4px;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   border-radius: 100%;
   background-color: #2eb4fe
}

.userinfo-menu li .icon--header-history {
   width: 20px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -69px
}

.userinfo-menu li .icon--header-favorite,
.userinfo-menu li .icon--header-history {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: -5px;
   height: 20px
}

.userinfo-menu li .icon--header-favorite {
   width: 21px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -97px
}

.userinfo-menu li .icon--header-message {
   width: 21px;
   height: 23px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -239px
}

.userinfo-menu li .icon--header-member,
.userinfo-menu li .icon--header-message {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: -5px
}

.userinfo-menu li .icon--header-member {
   width: 20px;
   height: 21px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -181px
}

.userinfo-menu li a:hover {
   color: #2eb4fe
}

.userinfo-menu li a:hover .icon--header-history {
   width: 20px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -125px
}

.userinfo-menu li a:hover .icon--header-favorite,
.userinfo-menu li a:hover .icon--header-history {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: -5px;
   height: 20px
}

.userinfo-menu li a:hover .icon--header-favorite {
   width: 21px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -153px
}

.userinfo-menu li a:hover .icon--header-message {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: -5px;
   width: 21px;
   height: 23px;
   background: url(/ouyue/components/header/icon_com_message_v.png?e81a717826)
}

.userinfo-menu li a:hover .icon--header-member {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: -5px;
   width: 20px;
   height: 21px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e);
   background-position: -4px -210px
}

.history {
   position: relative;
   cursor: default
}

.history .icon-history {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 18px;
   height: 18px;
   margin: 0 9px;
   background: url(/ouyue/components/header/sp_header.png?01bbeaa24e) no-repeat 50%;
   background-position: -4px -43px
}

.history.is-active .history-panel {
   display: block;
   -webkit-animation: a .1s;
   -moz-animation: a .1s;
   -o-animation: a .1s;
   animation: a .1s
}

.history-label {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   color: #e5e5e5
}

.history-panel {
   display: none;
   position: absolute;
   right: 0;
   background: #fff;
   padding: 12px 4px 7px 17px;
   border: 1px solid #ccc;
   line-height: 1.5;
   filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="2" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(51,51,51,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
   -webkit-filter: drop-shadow(0 0 2px #333);
   filter: drop-shadow(0 0 2px #333);
   -webkit-box-shadow: 0 0 2px #333\9;
   -moz-box-shadow: 0 0 2px #333\9;
   box-shadow: 0 0 2px #333\9
}

.history-panel .icon-trans {
   position: absolute;
   right: 20px;
   top: -12px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-bottom-color: #ccc
}

.history-panel .icon-trans .icon-trans-inr {
   position: absolute;
   top: -6px;
   left: -6px;
   width: 0;
   height: 0;
   border: 6px solid transparent;
   border-bottom-color: #fff
}

.history-list {
   overflow: hidden;
   max-height: 300px
}

.history-list .mCSB_container {
   padding-left: 3px
}

.history-list .mCSB_scrollTools .mCSB_draggerRail {
   background: none
}

.history-list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
   background: #e5e5e5
}

.history-list-null {
   text-align: center;
   padding-right: 10px;
   min-width: 120px;
   color: #000;
   white-space: nowrap;
   line-height: 2
}

.history-list-date {
   width: 260px;
   padding-right: 5px;
   border-left: 1px solid #f5f5f5;
   padding-left: 16px
}

.history-list-date a {
   color: #999
}

.history-list-date li {
   margin-top: 12px
}

.history-list-date strong {
   position: relative;
   display: block;
   top: -5px;
   color: #222;
   font-size: 14px;
   font-weight: 500
}

.history-list-date strong i {
   position: absolute;
   width: 5px;
   height: 5px;
   margin: -3px;
   left: -16px;
   top: 50%;
   -webkit-border-radius: 100%;
   -moz-border-radius: 100%;
   border-radius: 100%;
   background: #2fb3ff
}

.history-list-item {
   margin-top: -5px
}

.history-list-item li {
   margin: 11px 0;
   white-space: nowrap;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.buypanel,
.history-list-item li {
   overflow: hidden
}

.buypanel {
   position: relative;
   width: 810px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   text-align: left;
   white-space: normal;
   -webkit-animation: a .1s;
   -moz-animation: a .1s;
   -o-animation: a .1s;
   animation: a .1s;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.buypanel-mask {
   display: none;
   text-align: center;
   white-space: nowrap;
   z-index: 4
}

.buypanel-mask,
.buypanel-mask-holder {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0
}

.buypanel-mask-holder {
   filter: Alpha(opacity=30);
   background: #000;
   background: rgba(0, 0, 0, .3)
}

.buypanel-banner {
   height: 200px;
   background: url(/ouyue/components/buypanel/buy_banner.png?9064a3ab1e) no-repeat 50%;
   text-align: center;
   color: #fff;
   white-space: nowrap
}

.buypanel-banner strong {
   position: absolute;
   left: 30px;
   top: 26px;
   font-size: 18px
}

.buypanel-banner h3 {
   font-size: 40px
}

.buypanel-banner .banner-holder,
.buypanel-banner h3 {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.buypanel-banner .banner-holder {
   height: 200px
}

.buypanel-close {
   position: absolute;
   line-height: 14px;
   top: 15px;
   right: 15px;
   font-size: 24px;
   color: #fff
}

.buypanel-holder {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 0;
   height: 100%
}

.buypanel-content {
   padding: 26px 30px 60px;
   background: #fff;
   font-size: 16px
}

.buypanel-content .icon-accounts {
   width: 13px;
   height: 16px;
   background: url(/ouyue/components/buypanel/sp_buypanel.png?e3748b0fbe) no-repeat 50%;
   background-position: -4px -49px
}

.buypanel-content .icon-accounts,
.buypanel-content .icon-method {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.buypanel-content .icon-method {
   width: 17px;
   height: 15px;
   background: url(/ouyue/components/buypanel/sp_buypanel.png?e3748b0fbe) no-repeat 50%;
   background-position: -4px -26px
}

.buypanel-content .icon-type {
   width: 14px;
   height: 14px;
   background: url(/ouyue/components/buypanel/sp_buypanel.png?e3748b0fbe) no-repeat 50%;
   background-position: -4px -4px
}

.buypanel-content-accounts span,
.buypanel-content .icon-type {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.buypanel-content-main {
   overflow: hidden;
   margin-top: 22px
}

.buypanel-content-buymethod {
   float: right;
   width: 260px;
   margin-left: 30px;
   padding-bottom: 9999px;
   margin-bottom: -9999px
}

.buypanel-content-buymethod-label {
   padding-left: 30px
}

.buypanel-content-buymethod-main {
   overflow: hidden;
   margin-top: 16px;
   padding-left: 30px;
   border-left: 1px solid #f5f5f5;
   text-align: center
}

.buypanel-content-buymethod-main a {
   color: #bbb;
   font-size: 12px
}

.buypanel-content-buymethod-alipay {
   width: 165px;
   height: 58px;
   margin: 40px auto 0;
   background: url(/ouyue/components/buypanel/icon_alipay.png?281c8f0f3d) no-repeat 50%
}

.buypanel-content-buymethod-tip {
   display: block;
   margin: 36px auto 25px;
   border: 0;
   width: 135px;
   height: 30px;
   line-height: 30px;
   font-size: 14px;
   text-align: center;
   color: #fff;
   background: #058fde;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px
}

.buypanel-content-buytype {
   overflow: hidden
}

.buypanel-content-buytype-label span {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.buypanel-content-buytype-list {
   margin-top: 16px;
   margin-left: -8px;
   font-size: 0
}

.buypanel-content-buytype-list li {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 50%
}

.buypanel-content-buytype-list a {
   overflow: hidden;
   position: relative;
   display: block;
   padding: 1px;
   height: 100px;
   line-height: 100px;
   margin-left: 8px;
   margin-bottom: 9px;
   font-size: 18px;
   text-align: center;
   background: #f5f5f5;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   color: #999
}

.buypanel-content-buytype-list a em {
   margin-right: 4px;
   color: #058fde;
   font-size: 20px;
   font-weight: 600
}

.buypanel-content-buytype-list a:hover {
   padding: 0;
   border: 1px solid #058fde;
   background: transparent
}

.buypanel-content-buytype-list a:hover>i {
   position: absolute;
   width: 0;
   height: 0;
   right: 0;
   bottom: 0;
   border: 10px solid #058fde;
   border-color: transparent #058fde #058fde transparent
}

.buypanel-content-buytype-list .is-active {
   padding: 0;
   border: 1px solid #058fde;
   background: transparent
}

.buypanel-content-buytype-list .is-active>i {
   position: absolute;
   width: 0;
   height: 0;
   right: 0;
   bottom: 0;
   border: 10px solid #058fde;
   border-color: transparent #058fde #058fde transparent
}

body.is-panel-active .buypanel-mask {
   display: block
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.carousel {
   position: relative;
   height: 520px;
   background: #000
}

.carousel-main {
   height: 100%;
   font-size: 0
}

.carousel-main ul {
   white-space: nowrap;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis
}

.carousel-main li,
.carousel-main ul {
   overflow: hidden;
   height: 100%
}

.carousel-main li {
   position: relative;
   width: 100%;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle
}

.carousel-main li img {
   position: absolute;
   top: 0;
   left: 50%;
   width: 1920px;
   margin-left: -960px
}

.carousel-wrapper,
.carousel-wrapper-mask {
   overflow: hidden;
   width: 1200px;
   margin: 0 auto;
   white-space: nowrap;
   text-align: center
}

.carousel-wrapper-mask a,
.carousel-wrapper a {
   overflow: hidden;
   position: relative;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 127px;
   height: 70px;
   margin: 0 10px
}

.carousel-wrapper-mask a img,
.carousel-wrapper a img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   min-height: 100%
}

.carousel-wrapper-mask a.is-active,
.carousel-wrapper-mask a:hover,
.carousel-wrapper a.is-active,
.carousel-wrapper a:hover {
   width: 121px;
   height: 64px;
   border: 3px solid #24baf1
}

.carousel-wrapper-outer {
   padding: 20px 0
}

.carousel-wrapper-mask,
.carousel-wrapper-outer {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0
}

.carousel-wrapper-mask {
   top: 0;
   background: #000;
   opacity: .3;
   filter: Alpha(opacity=30)
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.module {
   margin: 0 0 10px
}

.module-title {
   padding: 14px 0;
   text-align: justify;
   text-justify: distribute-all-lines;
   font-size: 0
}

.module-title:after {
   content: "";
   width: 100%
}

.module-title-left,
.module-title:after {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
}

.module-title-left {
   text-align: left;
   font-size: 14px;
   color: #333333;
}

.module-title-left h2 {
   font-size: 18px;
   display: inline;
   color: #333333;
}

.module-title-right {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   text-align: left;
   font-size: 12px
}

.module-title-right .more {
   color: #666
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block
 * */
/*
 * button
 * */
/*
 * eclipsis
 * */
/*
 * 三角
 * */
/**
 */
a {
   color: #449fd5
}

.video-list {
   margin: -20px 0 0 -20px;
   font-size: 0
}

.video-item,
.video-item--legend {
   position: relative;
   display: inline-block;
   width: 224px;
   margin: 20px 0 0 20px;
   vertical-align: top;
   font-size: 12px;
}

.video-item--legend:hover .video-item-close,
.video-item:hover .video-item-close {
   visibility: visible
}

.video-item--legend .icon-play,
.video-item .icon-play {
   visibility: hidden;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   filter: Alpha(opacity=30);
   background-color: #000;
   background-color: rgba(0, 0, 0, .3)
}

.video-item--legend .icon-play i,
.video-item .icon-play i {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(/ouyue/components/video/play.png?0406b689b4) no-repeat 50%;
   filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feGaussianBlur in="SourceAlpha" stdDeviation="3" /><feOffset dx="1" dy="1" result="offsetblur" /><feFlood flood-color="rgba(0,0,0,1)" /><feComposite in2="offsetblur" operator="in" /><feMerge><feMergeNode /><feMergeNode in="SourceGraphic" /></feMerge></filter></svg>#filter');
   -webkit-filter: drop-shadow(0 0 3px #000);
   filter: drop-shadow(0 0 3px #000);
   -webkit-box-shadow: 0 0 3px #000\9;
   -moz-box-shadow: 0 0 3px #000\9;
   box-shadow: 0 0 3px #000\9
}

.video-item--legend:hover .icon-play,
.video-item:hover .icon-play {
   visibility: visible
}

.video-item--legend:hover .icon-play i,
.video-item:hover .icon-play i {
   will-change: transform;
   -webkit-animation: a .1s;
   -moz-animation: a .1s;
   -o-animation: a .1s;
   animation: a .1s
}

.video-item-close {
   visibility: hidden;
   position: absolute;
   width: 27px;
   height: 27px;
   top: -13px;
   right: -13px;
   background: url(/ouyue/components/com/icon_fav_cancel.png?3fe84980e0);
   z-index: 1
}

.video-item--legend {
   width: 468px;
}

.video-cover {
   overflow: hidden;
   position: relative;
   height: 125px;
}

.video-cover,
.video-cover a {
   display: block
}

.video-cover img {
   top: 0;
   left: 0;
   width: 100%;
   height: 100%
}

.video-cover img,
.video-label,
.video-label--vip {
   position: absolute
}

.video-label,
.video-label--vip {
   top: 4px;
   right: 4px;
   padding: 0 6px;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px;
   text-shadow: 0 0 1px #000;
   background: #f70;
   color: #fff;
   text-transform: uppercase
}

.video-label--vip {
   background: #2fb3ff
}

.video-info {
   min-height: 48px;
   padding: 3px 10px 4px;
   background: #fff;
}

.video-info,
.video-info strong {
   overflow: hidden;
   display: block
}

.video-info strong {
   white-space: nowrap;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   margin: 3px 0 0;
   font-size: 15px;
   color: #333333;
   font-weight: 400;
}

.video-info strong a {
   color: inherit
}

.video-info em {
   overflow: hidden;
   white-space: nowrap;
   -o-text-overflow: ellipsis;
   text-overflow: ellipsis;
   display: block;
   color: #BBBBBB;
}

:root {
   /*
     * 文字颜色
     * */
   /*
     * 背景颜色
     * */
   /*
     * 超链接
     * */

   /*
     * 宽度
     * */
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.form-control {
   position: relative;
   zoom: 1;
   margin: 20px 0
}

.form-control:after {
   clear: both;
   display: table;
   content: ""
}

.form-control .impt {
   position: absolute;
   line-height: 20px
}

.form-control-vcode {
   float: right;
   width: 85px;
   height: 35px;
   margin-left: 5px
}

.form-control-vcode img {
   cursor: pointer
}

.form-control-main {
   overflow: hidden;
   border: 1px solid #ddd;
   -webkit-border-radius: 2px;
   -moz-border-radius: 2px;
   border-radius: 2px
}

.form-control-main input {
   height: 33px;
   border: 0;
   line-height: 33px;
   outline: 0;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0;
   margin: 0;
   width: 100%;
   background: transparent;
   text-indent: 36px
}

.login {
   position: relative;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 400px;
   height: 505px;
   text-align: left;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   background: #fff
}

.login-close {
   position: absolute;
   line-height: 14px;
   height: 14px;
   top: 10px;
   right: 10px;
   font-size: 24px;
   color: #b4b4b4
}

.login-mask {
   z-index: 5;
   text-align: center
}

.login-mask,
.login-mask-holder {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0
}

.login-mask-holder {
   filter: Alpha(opacity=30);
   background: #000;
   background: rgba(0, 0, 0, .3)
}

.login-holder {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 0;
   height: 100%
}

.login .nav-tab {
   padding: 15px 0 0;
   border-bottom: 1px solid #eee;
   text-align: center;
   font-size: 0
}

.login .nav-tab-item {
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   padding: 12px 37px;
   font-size: 18px;
   color: #34495e
}

.login .nav-tab-item.is-active {
   font-weight: 700;
   color: #058fde
}

.login .nav-content {
   overflow: hidden;
   padding: 10px 50px
}

.login .nav-content-item {
   display: none
}

.login .nav-content-item.is-active {
   display: block
}

.login .icon-username {
   top: 12px;
   height: 11px;
   background: url(/ouyue/components/login/sp_login.png?e77a5984ec) no-repeat 50%;
   background-position: -4px -4px
}

.login .icon-password,
.login .icon-username {
   position: absolute;
   left: 10px;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 14px
}

.login .icon-password {
   top: 9px;
   height: 17px;
   background: url(/ouyue/components/login/sp_login.png?e77a5984ec) no-repeat 50%;
   background-position: -4px -45px
}

.login .icon-vcode {
   position: absolute;
   top: 11px;
   left: 10px;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 14px;
   height: 14px;
   background: url(/ouyue/components/login/sp_login.png?e77a5984ec) no-repeat 50%;
   background-position: -4px -23px
}

.login .icon-fullname {
   background-image: url('https://sta-op.douyucdn.cn/dyfelocal/act/5b8912375b25742b09e61ccb/icon_ident.png?timestamp=1546595255');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   position: absolute;
   top: 11px;
   left: 10px;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 14px;
   height: 14px;
}

.login .icon-ident {
   background-image: url('https://sta-op.douyucdn.cn/dyfelocal/act/5b8912375b25742b09e61ccb/icon_ident.png?timestamp=1546595255');
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
   position: absolute;
   top: 11px;
   left: 10px;
   display: inline;
   zoom: 1;
   display: inline-block;
   vertical-align: middle;
   width: 14px;
   height: 14px;
}

.login .btn--block {
   border: 0;
   width: 100%;
   padding: 8px 0;
   margin: 16px 0 7px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   background: #058fde;
   font-size: 16px;
   color: #fff;
   font-weight: 600;
   cursor: pointer
}

.impt {
   color: red
}

/*
 *  clearfix
 * */
/*
 * 通用 wrapper
 * */
/*
 * 通用 border
 * */
/*
 * 圆角---小圆角
 */
/*
 * 圆角---半圆角
 */
/*
 * inline-block 
 * */
/*
 * button
 * */
/*
 * eclipsis 
 * */
/*
 * 三角
 * */
/**
 */
.footer {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   overflow: hidden;
   position: absolute;
   left: 0;
   right: 0;
   min-height: 120px;
   margin-top: -120px;
   text-align: left;
   z-index: 2;
   border-top: 1px solid #dedede;
   color: #8f8f8f;
   font-size: 12px
}

.footer a {
   color: #acadad
}

.footer-wrapper {
   width: 1200px;
   margin: 0 auto;
   margin-top: 22px
}

.footer-links {
   font-size: 0
}

.footer-links a,
.footer-links span {
   color: #8f8f8f;
   font-size: 12px
}

.footer-links a:hover {
   color: #333
}

.footer-links .split {
   margin: 0 1em;
   font-size: 12px
}

.footer-copyright {
   color: #acadad
}

.footer-copyright span {
   margin-right: 20px
}