body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, 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;
}

fieldset, img {
    border: 0;
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

:focus {
    outline: 0;
}

address, caption, cite, code, dfn, em, th, var, optgroup {
    font-style: inherit;
    font-weight: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%;
    font-weight: normal;
}

abbr, acronym {
    border: 0;
    font-variant: normal;
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

input, button, select, textarea {
    outline: none;
}

textarea {
    resize: none;
}/*@branch For IE6-Win, IE7-Win */input, button, textarea, select {
                                      *font-size: 100%;
                                  }

ul, ol,li {
    list-style: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th {
    text-align: left;
}

sup, sub {
    font-size: 100%;
    vertical-align: baseline;
}

del {
    text-decoration: line-through;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}

:link, :visited, ins {
    text-decoration: none;
}

article, aside, canvas, dialog, figure, footer, header, hgroup, nav, section, video {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    zoom: 1;
    cursor:default;
}
.clearfix .selected{
    border-radius:8%
}
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    clear: both;
}

a {
    color: #000;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

body {
    font-size: 12px;
    line-height: 22px;
    font-family: \5FAE\8F6F\96C5\9ED1,arial,\5b8b\4f53;
    cursor: default;
}

cite,i {
    font-style: normal;
}

body {


}

.hide{
    display:none;
}
/*左边区域*/
.left-container{
    position: fixed;left:0;top:10px;bottom: 10px;background:#0a0d26;width: 70px;padding:10px;box-sizing: border-box;
}
.left-container .logo{
    width:50px;height: 50px;
}
.left-container .logo img{
    width:50px;height: 50px;
}
/*左边end*/
.center-container{
    position: fixed;left:80px;top:10px;bottom: 10px;right: 380px;background:#0a0d26;
}
.player-container{
    width:100%;height: 100%;position: relative;
}
#player-praises {
    width: 72px; height: 337px; position: absolute; bottom: 105px; right: 5px;
}
#player-praises .bubble {
    width: 100%; height: 280px; position: relative;
}
#player-praises .praises {
    position: relative; top: -15px;display: block;overflow: hidden; padding: 15px;
}
#player-praises .praises span {
    width: 42px; height: 42px; border-radius: 50%; display: block; background: #ffcc34 url(http://p4.qhimg.com/t01f30af2fc87f8c5c2.png) no-repeat;
    opacity: 0.6;
}
.right-container{
    position: fixed;right:10px;top:10px;bottom: 10px;background:#27293e;width: 360px;
}
.chat-wrapper{
    width:100%;height: 100%;position: relative;
}
.nav{
    display: flex;justify-content: space-around;height: 30px;line-height: 30px;background: #797C90;text-align: center;
}
.nav li{
    width:25%;
}
.nav li.on{
    background: #FFCC34;
}
.nav-tab{
    display: none;position:absolute; top:30px;bottom: 0;width:100%;
}
.nav-tab:first-child{
    display: block;
}
.chat-content{
    width:100%;height: 100%;position: relative;
}
/*聊天区域*/
.chat-container{
    padding:20px 10px;
}
.chat-item{
    display: flex;margin-bottom: 15px;
}
.chat-info{
    margin-left:10px;width: 290px;
}
.headurl img{
    width: 30px;height: 30px;border-radius: 50%;
}
.chat-top{
    font-size:13px;margin-bottom: 5px;display: flex;
}
.nickname{
    color:#f9963e;flex-grow: 1;
}
.time{
    color:#7e5596;
}
.chat-message{
    font-size: 14px;  color: #B4BCCC !important;  word-break: break-all; word-wrap: break-word;padding-right: 20px;line-height: 25px;
}
/*end*/
.chat-talk {
    position: absolute; bottom: 0px; width: 100%; padding-top: 10px;  height: 40px; left: 0; background: #31334b;
}

.MR-talk {
    height: 50px; position: relative; margin: 0 auto;
}
.MR-talk .send-btn {
    position: absolute; top: 2px; right: 10px; background: #ffcc34; width: 60px; height: 30px; line-height: 30px; color: #000;
    text-align: center; cursor: pointer; border-radius: 15px;
}
.MR-talk .send-btn:hover {
    background: #ca9701;
}
.MR-talk .saving,.MR-talk .saving:hover {
    cursor: default; background: #999; border: 1px solid #999;
}
.MR-talk .speaker {
    width: 270px; height: 32px; border-radius: 18px;left: 8px; position: absolute;top: 0;background: #1d1b27; border: 1px solid rgba(255,255,255,0.1);
}
.MR-talk .speaker input {
    margin-left: 10px; color: #7f6b8c;width: 232px; line-height: 32px; border: none;background: none;
}
.MR-talk .speaker input.txt-focus {
    color: #FFF;
}
.MR-talk .speaker cite {
    font-style: normal; color: #7f6b8c; position: absolute;line-height: 22px; top: 5px; right: 10px;
}
.MR-talk .speaker cite.txt-error {
    color: #FF0000;
}
.MR-talk .BTN-face-toggle:hover {
    background-position: -233px -153px;
}

/*讲座内容*/
.live-content{
    padding:20px 10px;color:#B4BCCC;
}
.live-content p{
    text-align: center;margin-top:20px;
}
.live-content p.group img{
    width:150px;height: 150px;display: block;margin: 0 auto;
}
/*直播预告*/
.notice-wrapper{
    padding:20px 10px;
}
.notice-item{
    margin-bottom: 15px;display: flex;
}
.cover{
    width:120px;height: 80px;
}
.cover img{
    width:120px;height: 80px;
}
.info{
    flex-grow: 1;margin-left:10px;color:#B4BCCC;
}
.room-name{
    height: 50px;font-size:14px;color:#f9963e;
}
.start-time{
    height: 20px;line-height: 20px;font-size:14px;
}


/*为关注部分*/
.shade{
    position: fixed;width:100%;height: 100%;background: #000;opacity: .6;z-index: 10;display: none;
}
.shade-follow{
    position: fixed;width:100%;height: 100%;background: #fff;z-index: 999;background: none;color:#fff;text-align: center;display: none;
}
.shade-follow .shade-wrap{
    padding:30px;
}
.shade-follow div{
    margin:20px auto;
}
.shade-follow .shade-title{
    font-size:15px;
}
.shade-follow .shade-qrcode img{
    width:200px;height: 200px;
}
.shade-follow .shade-description{
    font-size:15px;
}
.payer-video{
    position: relative; border: 3px solid #000;box-sizing: border-box;
}
.shade-video{
    position: absolute;width:100%;height: 100%;background: #000;opacity: .6;z-index: 11;
}
/*为关注部分*/
.player-top{
    position: absolute;height: 30px;width:100%;background: red;z-index: 9;box-sizing: border-box;padding:5px;
}
.player-cover{
    width:100%;height: 100%;
}
.player-cover img{
    width:100%;height: 100%;
}
/*计数器*/
.timer-wrapper{
    position: absolute;width:400px;text-align: center;z-index: 999;height: 80px;top:50%;left:50%;margin-top:-40px;margin-left:-200px;
}
.timer-wrapper .timer-title{
    font-size:19px;height: 30px;line-height: 30px;
}
.timer-wrapper .timer-counter{
    height: 50px;line-height: 50px;
}
.timer-wrapper .timer-counter span{
    color: #fff !important;font-size:19px;
}