body, html {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
}

body.full-screen, body.landscape {
    background-color: #000000;
    position: relative;
}

/* body.landscape .player-wrapper {
    padding-bottom: 0;
    margin: 0 auto;
    position: relative;
} */

:-webkit-full-screen #playArea, body.full-screen #playArea {
    width: 100%;
    height: 100%;
    padding-bottom: 0;
}

:-webkit-full-screen #main, :-webkit-full-screen #talkInp, body.full-screen #main,
body.full-screen #talkInp, body.full-screen .countenance, :-webkit-full-screen .table-operation-div, body.full-screen .table-operation-div {
    display: none;;
}

/* 设备横屏时调用该段css代码 */
/*@media all and (orientation : landscape){*/
/*#main,#talkInp,.countenance,#fullscreen {*/
/*display: none;*/
/*}*/
/*}*/
body.landscape #talkInp, body.landscape #fullscreen, body.landscape .table-operation-div, body.landscape .inner-main{
    display: none;
}

body.landscape #playerFooter, body.full-screen #playerFooter, :-webkit-full-screen #playerFooter {
    bottom: 0 !important;
}
body.landscape.full-screen #playerFooter .js-toggle-screen{
    display: none;
}

body.ime-show #playArea {
    position: absolute !important;
    top: -999px !important;
}

body.disabled .chat-mask {
    display: block;
}

body.disabled .chatContent {
    text-align: left;
}

body.disabled #countenance {
    display: none !important;
}



body.without-bottom .main {
    padding-bottom: 0;
    overflow:hidden;
}

body.without-bottom .talkInp {
    display: none;
}

body.video-disabled .main {
    padding-top: 0;
}
body.video-disabled .player-wrapper {
    display: none;
}

.white {
    color: #ffffff;
}

.orange {
    color: #ff970b;
}

.green {
    color: #00cccc;
}

.blue {
    color: #006699;
}

.gold {
    color: gold;
}

/*canvas*/
#courseware {
    position: static;
    width: auto;
}

/*mv*/
.player-wrapper {
    /*position: relative;
    clear: both;
    width: auto;
    height: auto;
    background-color: #000;*/
    position: fixed;
    clear: both;
    width: 100%;
    top: 0;
    height: 0;
    z-index: 1;
    padding-bottom: 75%; /* 4:3 */
    /*padding-bottom: 56.25%; *//* 16:9 */
    background-color: #000;
}

.player-wrapper > div {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
    height: 100%;
}

/*.mv{
    margin: 0 auto;
    width: 100%;
}*/
/* .player-container {
    
} */

.player-container > * { /**/
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: block;
}

.player-container .player-footer {
    top: auto;
    height: 30px;
    z-index: 2;
}

.player-container .play-button-div {
    width: 64px;
    height: 64px;
    z-index: 2;
    display: none;
    background-repeat: no-repeat;
    background-size: contain;
}
.player-inner-container video {
    width: 100%;
    height: 100%;
}

.play-button-div {
    background-image: url("../images/play.png");
}

.play-button-div .uil-default-css {
    display: none;
}

.play-button-div.begin-loading {
    background-image: none;
}

.play-button-div.begin-loading .uil-default-css {
    display: block;
}

/*.player-container */
.poster-img-div img {
    height: 100%;
    width: 100%;
}

.live-page-div, .live-pause-div,.live-wait-div,.live-to-teacher-div,.live-to-assistant-div {
    display: none;
    height: 100%;
}
.live-wait-div>div {
    background: url("../images/web1/live_wait_icon.png") no-repeat top center;
    background-size: 100% 100%;
    width: 84px;
    height: 80px;
    background-size: 59px 40px;
}
.live-page-div>div {
    background: url("../images/web1/live_end_icon.png") no-repeat;
    background-size: 100% 100%;
    width: 84px;
    height: 120px;
    background-size: 84px 72px;
}
.live-pause-div > div {
    background: url("../images/computer_icon.png") no-repeat center;
    background-size: 100px 100px;
    text-align: center;
    font-size: 20px;
    width: 80%;
    height: 80%;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
.live-page-div>div, .live-pause-div>div,.live-wait-div>div{
    text-align: center;
    font-size: 14px;
    color: #CCCCCC;
    position: relative;
    margin: auto;
}
.live-to-teacher .live-to-teacher-div,.live-to-assistant .live-to-assistant-div{
    background: #fff;
    border-right: 1px solid rgba(0,0,0,0.05);
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    margin: auto;
    display: flex;
}
.live-to-teacher-div>div{
    /* margin: 69px auto 0; */
    width: 148px;
    height: 115px;
    background: url("../images/live_to_teacher_mobile.png") no-repeat center top;
}
.live-to-assistant-div>div{
    /* margin: 69px auto 0; */
    width: 148px;
    height: 115px;
    background: url("../images/live_to_assistant_mobile.png") no-repeat center top;
}
.pause-div-text {
    padding-top: 100px;
    position: relative;
    top: 50%;
    margin-top: -40px;
}
.info-div-text {
    padding-top: 100px;
    text-align: left;
}
.wait-div-text {
    padding-top: 60px;
    text-align: left;
}
.toggle-stage-text {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    padding-top: 124px;
    font-size: 16px;
    color: #212121;
}
.player-footer .footer-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding-left: 10px;
    box-sizing: border-box;
    line-height: 30px;
}
.live-to-assistant .live-to-assistant-div{
    display: flex;
}
.live-to-teacher .live-to-teacher-div{
    display: flex;
}
.player-wrapper.live-not-start .live-page-div {
    display: flex;
}
.player-wrapper.teacher-offline .live-pause-div {
    display: block;
}
.player-wrapper.live-wait-start .live-wait-div {
    display: flex;
}

.player-wrapper.live-not-start .player-container,
.player-wrapper.live-not-start .live-pause-div,
.player-wrapper.live-not-start .live-to-assistant-div,
.player-wrapper.live-not-start .live-to-teacher-div,
.player-wrapper.live-not-start .live-wait-div {
    display: none;
}

.player-wrapper.live-wait-start .player-container,
.player-wrapper.live-wait-start .live-pause-div,
.player-wrapper.live-wait-start .live-to-assistant-div,
.player-wrapper.live-wait-start .live-to-teacher-div,
.player-wrapper.live-wait-start .live-page-div {
    display: none;
}

.player-wrapper.teacher-offline .player-container,
.player-wrapper.teacher-offline .live-page-div,
.player-wrapper.teacher-offline .live-to-assistant-div,
.player-wrapper.teacher-offline .live-to-teacher-div,
.player-wrapper.teacher-offline .live-wait-div {
    display: none;
}
.player-wrapper.live-to-assistant .live-page-div,
.player-wrapper.live-to-assistant .live-to-teacher-div,
.player-wrapper.live-to-assistant .live-wait-div,
.player-wrapper.live-to-assistant .live-pause-div,
.player-wrapper.live-to-assistant .player-container{
    display: none;
}
.player-wrapper.live-to-teacher .live-page-div,
.player-wrapper.live-to-teacher .live-to-assistant-div,
.player-wrapper.live-to-teacher .live-wait-div,
.player-wrapper.live-to-teacher .live-pause-div,
.player-wrapper.live-to-teacher .player-container{
    display: none;
}

/*text*/
.table-operation-div {
    /* clear: both;
    position: relative;
    height: 46px;
    z-index: 2;
    border-bottom: solid 1px #ebebeb;
    box-sizing: border-box; */
    
    height: 46px;
    width: 100%;
    text-align: center;
    position: absolute;
    z-index: 2;
    display: flex;
    justify-content: space-around;
    align-items: center;
    -webkit-box-shadow: 0 -1px 8px rgba(0, 0, 0, .2);
    box-shadow: 0 -1px 8px rgba(0, 0, 0, .2);
    background: white;
}

.table-operation-div > div {
    position: relative;
    width: 70px;
    height: 28px;
    font-size: 16px;
    line-height: 28px;
}

.table-operation-div > div.table-selected {
    background: url('../images/web1/checked_bg.png') 100% 100% no-repeat; 
}

.table-operation-div > div.table-selected::after {
    position: absolute;
    content: '';
    width:20px;
    height:4px;
    background:rgba(255,153,51,1);
    border-radius:3px;
    bottom: -10px;
    margin: auto;
    left: 0;
    right: 0;
}

.main {
    position: relative;
    padding-bottom: 50px; /*聊天输入区域高度*/
    padding-top: 75%; /* 4:3 */
    /*padding-top: 56.25%; *//* 16:9 */
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.main.without-bottom {
    padding-bottom: 0;
}

.inner-main {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

.tab-divs {
    width: 100%;
    height: 100%;
    padding-top: 46px; /*头部标题栏高度为40，保证此div+头部标题高度等于父层高度*/
    top: 0;
    box-sizing: border-box;
    position: absolute;
    z-index: 1;
    padding-bottom: 8px;
}

/* .tab-divs.on-focus {
    z-index:2;
} */
.tab-divs > div {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 52px;

}


.tab-divs .chat-outter-container {
    position: relative;
    background-color: #f9f9f9;
    padding-bottom: 0;
    width: 100% !important;
    height: 100% !important;
    overflow-y: scroll
}

.chat-outter-container .chat-online-count-div {
    position: absolute;
    width: auto;
    border-radius: 5px;
    padding: 5px;
    right: 10px;
    height: 20px;
    line-height: 10px;
    box-sizing: border-box;
    color: #ffffff;
    z-index: 2;
}

.chat-online-count-div {
    background-color: rgba(0, 0, 0, 0.5);
    top: 10px;
}

.content-item-inner-container {
    margin-right: auto;
    width: 100%;
    height: 100%;
    display: inline-block;
}
/* .public .content-item-inner-container{
    overflow-y: scroll;
} */
/* .public .msg-retreat{
    display: none;
} */

.chat-ul {
    font-size: 1.2em;
    line-height: 1.6em;
    margin: 0 auto;
    width: 95%;
    height: 100%;
    box-sizing: border-box;
    padding-bottom:  23px;
    overflow-x: hidden;
    /* display: none; */
}

.chat-ul li {
    clear: both;
    box-sizing: border-box;
    padding-top: 10px;
    /* min-height: 40px; */
}

.chat-container-wrapper {
    position: relative;
    display: flex;
    width: 100%;
}

/* .chat-container-wrapper > div { */
    /* position: relative; */
    /* box-sizing: border-box; */
    /* float:left; */
    /* display: inline-block; */
/* } */

.avatar-container {
    width: 30px;
    height: 30px;
    /* float:left; */
    flex-basis: 30px;
    position: relative;
}

.avatar-container img {
    display: block;
    /* width: 30px;
    height: 30px; */
    -moz-border-radius: 16px;
    -webkit-border-radius: 16px;
    border-radius: 16px;
}

.nick-time-div {
    height: 18px;
    line-height: 18px;
    padding: 2px 0px;
}

.nick-time-div img {
    width: 10px;
    height: 10px;
}

.nick-time-div span {
    font-size: 11px;
}

.text-container {
    width: auto;
    /* margin-top:-30px; */
    /* display: flex; */
    /* padding-bottom: 5px; */
    /* float:left; */
    padding-left: 10px;

}

/* .text-container .content-margin {
    flex-basis: 30px;
} */
.content-div {
    line-height: 22px;
    font-size: 13px;
    word-break: break-all;
    word-wrap: break-word;
    border-radius: 5px;
    box-sizing: border-box;
    width: auto;
    position: relative;
    display: inline;
}
.identity_sign{
    width: auto;
    padding: 0 5px;
    border-radius: 4px;
    background-color: rgb(255,153,51);
    color: rgb(255,255,255);
    display: inline-block;
    font-size: 13px;
    line-height: 18px;
    text-align: center;
}

/* .content-div::before {
    display: block;
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 5px solid #e7f6ff;
    border-color: transparent #e7f6ff transparent transparent;
    left: -10px;
    top: 5px;
}

.content-div img {
    display: inline-block;
    margin-right: 1px;
    vertical-align: middle;
    width: 22px;
    height: 22px;
} */

/*.chat-record.me-message .chat-container-wrapper {
    !* float: right; *!
    flex-direction: row-reverse;
}

.chat-record.me-message .nick-time-div {
    text-align: right;
}*/

/* .chat-record.me-message .text-container {
    flex-direction:row-reverse;
} */
/*.chat-record.me-message .text-container {
    padding-left: 0;
    padding-right: 10px;
}

.chat-record.me-message .content-div {
    background-color: #23cdef;
    color: #ffffff;
}

.chat-record.me-message .content-div::before {
    left: auto;
    right: -10px;
    border-color: transparent transparent transparent #23cdef;
}*/



.chat-frequent-tip {
    position: absolute;
    width: 260px;
    text-align: center;
    height: 20px;
    line-height: 20px;
    color: gray;
    display: none;
    left: 50%;
    margin: -40px auto;
    background: white;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
    margin-left: -130px;
}

.reward-container-3 {
    width: 260px;
    height: 302px;
    background: url(../images/h5_score_3.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -130px;
}

.reward-container-10 {
    width: 260px;
    height: 330px;
    background: url(../images/h5_score_10.png);
    background-size: 100% 100%;
    position: absolute;
    bottom: 20px;
    left: 50%;
    margin-left: -130px;
}

.reward-wrapper {
    position: absolute;
    height: 100%;
    width: 100%;
}
.notice-icon-con{
    display: inline;
}
.notice-icon{
    margin-left: 6px;
    margin-right: 2px;
    height: 15px;
    vertical-align: middle;
}
#class-notice-tip {
    display: none;
    background-color: rgb(255, 230, 153);
    color: #A44D00;
    line-height: 25px;
    z-index: 3;
    max-height: 50px;
    position: absolute;
    width: 100%;
}

a.noticeLink {
    text-decoration: none;
    color: rgb(89, 89, 89);
}

.jump-span {
    color: rgb(255, 186, 77);
    font-size: 16px;
    font-weight: 800;
}

.talkInp {
    z-index: 2;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    box-sizing: border-box;
    background:rgba(245,245,247,1);
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.2);
}

.talkInp form {
    width: 100%;
    height: 100%;
}

.talkInp ul {
    padding-left: 2%;
    padding-right: 2%;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
}

.talkInp ul li {
    vertical-align: middle;
    display: inline-block;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
}

.talkInp ul li.faceIcon {
    right: 44px;
    width: 40px;
    z-index: 1;
    font-size: 11px;
    color:#FF9933;
    line-height: 16px;
    text-align: center;
}

.talkInp ul li.routeIcon {
    z-index: 1;
    right: 2%;
    font-size: 11px;
    color:#FF9933;
    line-height: 16px;
}

.foot-right-icon{
    width: 26px;
    height: 26px;
    background-size: 100% 100%;
    background-repeat: no-repeat;  
    cursor: pointer;
    margin: auto;
}

.see-teacher-swith{
    background-image: url('../images/web1/see_teacher_only.png');
}
.see-all{
    background-image: url('../images/web1/see_all.png');
}
.un-see-teacher-swith{
    background-image: url('../images/svg/un_see_teacher_only.svg');
}
.p-color{
    color: #D2D2D2;
}
.chroute{
    background-image: url('../images/web1/exchange_line.png');
}
.route-panel {
    position: absolute;
    display: none;
    font-size: 12px;
    width: 62px;
    min-height: 130px;
    background-color: rgba(20, 24, 46, .9);
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    padding: 0 10px 10px;
    right: 2%;
    bottom: 60px;
    z-index:2;
    color:rgba(247,247,247,1);
}
.route-panel:after{
    position:absolute;
	content:"";
	height:0;
    width: 0;
    border: solid transparent;
    border-color: rgba(20, 24, 46, .9) transparent transparent transparent;
    border-width: 5px;
    right: 10%;
    bottom: -10px;
}
.route-title{
    display: block;
    padding: 9px 0;
    text-align: center;
    color:rgba(155,155,155,1);
    border-bottom: 1px solid rgba(224, 224, 224, 0.2445);
}
.route-link {
    text-align: right;
    margin-top: 10px;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.route-selected-img{
    width: 10px;
    height: 7px;
    background: url('../images/web1/route_selected.png') 100% 100% no-repeat;
}
.route-selected{
    color:rgba(255,153,51,1);
}

/* .route-panel {
    width: 87px;
    height: 200px;
    background: url('../images/route-panel.png') no-repeat;
    background-size: 90px 200px;
    position: absolute;
    margin-top: -194px;
    right: 2%;
    display: none;
}

.route-panel::before {
    content: "选择线路";
    color: #A8A8A8;
    position: absolute;
    line-height: 40px;
    height: 40px;
    text-align: center;
    width: 87px;
}

.route-link {
    width: 100%;
    height: 40px;
    position: relative;
    border-top: solid 1px #D8D8D8;
    line-height: 40px;
    text-align: center;
    font-size: 17px;
}

.route-selected {
    color: #23CDEE;
} */

.talkInp ul li.inpTxt {
    width: 100%;
    box-sizing: border-box;
    padding-left: 2%;
    padding-right: 127px; 
    height: 40px;
    left: 0;
    font-weight:400;
    color:rgba(130,130,130);
    line-height:40px
}

.talkInp ul li.inpTxt input {
    border-radius: 4px;
    border: solid 1px #eeeeee;
    background-color: #ffffff;
    font-size: 14px;
}

.talkInp ul li.faceIconWidth {
    width: 50px;
    right: 125px;
    text-align: center;
    background:rgba(239,239,239,1);
    border-radius:4px;  
}

.talkInp .chat-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #BBBBBB;
    opacity: 0.5;
    display: none;
    z-index: 1;
}

.txtMsg {
    box-sizing: content-box;
    background: none;
    outline: none;
    width: 98%;
    padding: 6px 0 6px 10px;
    height: 26px;
}

.chat-submit,.private-chat-submit {
    width: 50px;
    border: none;
    border-radius:4px;
    outline: none;
    line-height: 28px;
    -webkit-appearance: none; /*for ios*/
    font-size: 12px;
    font-weight: 400;
}

.zan {
    position: absolute;
    bottom: 60px;
    right: 4%;
    z-index: 999;

}

.zan img {
    display: block;
}

/* 评分 */
.stars-mask {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
    z-index: 10;
    top: 0;
    left: 0;
}


.stars-btn {
    display: none;
    width: 140px;
    height: 36px;
    line-height: 41px;
    border-radius: 25px;
    margin: 17px auto 0;
    font-size: 16px;
    color: #592D13;
    background-color: #FFB400;
    box-shadow:0px 5px 0px 0px #FA8C2C;
}
.stars-btn:active {
    width: 140px;
    height: 36px;
    line-height: 41px;
    border-radius: 25px;
    margin: 17px auto 0;
    font-size: 16px;
    color: #3E1903;
    background-color: #F58900;
    box-shadow:0px 5px 0px 0px #B55A00;
}
.is-mobile .stars-animation--wrapper{
    width: 100%;
    height: 100%;
}
.stars-container{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.is-mobile .reward-animation{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60%;
}
.stars-mask .stars-confirm-button{
    display: none;
    position: absolute;
    width: 220px;
    height: 60px;
    bottom: 16%;
    margin: 0 auto;
    left: 0;
    right: 0;
    cursor: pointer;
}
.stars-mask.confirm .stars-confirm-button{
    display: block;
}
.presention_tip{
    position: absolute;
    top: 88%;
    width: 100%;
    text-align: center;
    color: #FFB400;
    background:transparent;
}
.presention_tip p{font-size: 14px;margin: 6px 0 0 0}
.presention_tip p:nth-of-type(2){
    font-size: 18px
}

/* 语音打分 */
.answer-star-mask {
    display: none;
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .8);
}
.answer-star-container {
    background: url(../images/web1/answer_star_bg.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 302px;
    height: 307px;
}
.answer-star-container .answer-close {
    position: absolute;
    right: 18px;
    top: 40px;
    width: 26px;
    height: 26px;
    background: url("../images/web1/close.png") no-repeat;
    background-size: 100% 100%;
}

.answer-portrait {
    width: 230px;
    margin: 145px auto 0px;
    display: -webkit-flex;
    display: flex;
    text-align: center;
}

.answer-portrait .port-wrapper {
    -webkit-flex: 1;
    flex: 1;
}

.answer-portrait .ranking-bg {
    display: inline-block;
}

.ranking-bg img {
    border-radius: 50%;
    margin-top: 14px;
    width: 43px;
    height: 43px;
}
.ranking-bg{
    width: 49px;
    height: 60px;
}
.answer-portrait .first {
    background: url('../images/web1/ranking_01.png') no-repeat;
    background-size: 100% 100%;
}
.answer-portrait .second {
    background: url('../images/web1/ranking_02.png') no-repeat;
    background-size: 100% 100%;
}
.answer-portrait .third {
    background: url('../images/web1/ranking_03.png') no-repeat;
    background-size: 100% 100%;
}
.port-wrapper .name {
    display: inline-block;
    margin-top: 10px;
    font-size: 12px;
    color: #9B9B9B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 58px;
}
.answer-footer {
    width: 264px;
    margin: 40px auto 24px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: #9B9B9B;
    border-radius: 30px;
}

.answer-pic {
    vertical-align: middle;
}

/*断开提示*/
.closed-bg{
    width:106px;
    height:46px;
    line-height: 46px;
    font-size: 14px;
    background:rgba(0,8,39,0.9);
    box-shadow:0px 3px 6px 0px rgba(204,204,204,1);
    border-radius:4px;
    color: #CCCCCC;
    position: absolute;
    text-align: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: none;
}

.closed{
    position: absolute;
    top: 2%;
    right: 2%;
    background-image: url(../images/close_mobile.png);
    display: block;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
}
/*##头饰开始##*/
.avatar-wear {
    width: 46px;
    height: 46px;
    position: absolute;
    top: -5px;
    left: -5px;
}
.rank-item .image-div, .chat-logo {
    width: 36px;
    height: 36px;
    position: relative;
    background-size: 36px 36px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

/*##头饰结束##*/

/* 2018-09-30添加,作者:wzd */
#left-cicle{
    background: url('../images/web1/left_cicle.png') no-repeat;
    background-size: cover; 
    width: 38px;
    height: 23px;
    position: absolute;
    left: 0;
    bottom: 0;
}
#right-cicle{
    background: url('../images/web1/right_cicle.png') no-repeat;
    background-size: cover; 
    width: 54px;
    height: 31px;
    position: absolute;
    right: 0;
    top: 0;
}
/* 20181008添加 */
.chat-nick{
    color: #999999;
}
.chat-content-focus{
    background:linear-gradient(147deg,rgba(255,184,71,1) 0%,rgba(255,153,51,1) 100%);
    color: rgb(255,255,255);
}
.chat-content-blur,.private-chat-content-blur{
    background:rgb(239,239,239,1);
    color:#CCCCCC;
}
#rank-list{
    width: 100%;
    height: 100%;
    margin-top: 0;
    overflow-y: scroll;
}
.starfish-rank,.subject-rank{
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}
.starfish-rank-no{
    background: url('../images/web1/starfishrank_no.png') center no-repeat;
}
.sub-rank-no{
    background: url('../images/web1/subrank_no.png') center no-repeat;
}
.sub-rank-no::after,.starfish-rank-no::after{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 55%;
    text-align: center;
    color: #CCCCCC;
}
.sub-rank-no::after{
    content: '\6682 \65E0 \7B54 \9898 \699C';
}
.starfish-rank-no::after{
    content: '\6682 \65E0 \6D77 \661F \699C';
}

.js-top1 .item-index {
    background: url(../images/web1/first_icon.png) no-repeat center;
}

.js-top2 .item-index {
    background: url(../images/web1/second_icon.png) no-repeat center;
}

.js-top3 .item-index {
    background: url(../images/web1/third_icon.png) no-repeat center;
}
.js-top1 .item-index, .js-top2 .item-index, .js-top3 .item-index{
    width: 52px;
    height: 100%;
}

.recommend-con{
    width: 104px;
    height: 78px;
    position: absolute;
    right: 8px;
    bottom: 110px;
    z-index: 1;
    display: none;
}
.recommend-close{
    width: 17px;
    height: 17px;
    position: absolute;
    top: -25px;
    right: 0;
    cursor: pointer;
}
.recommend-banner{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: inline-block;
    background: url(../images/web1/recommend_banner-.png) no-repeat;
    text-decoration: none;
    background-size: cover;
}
.recommend-text{
    width: 80px;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 2px 2px #244CE5;
    margin: 7px auto 0;
    line-height: 19px;
}

.lottery-bg{
    top: auto;
    width: 263.2px;
    height: 305.2px;
    background-repeat: no-repeat;
}
.sys-push-reward-box{
    position: absolute;
    bottom: 0;
}
.lottery-box{
    width: 214.2px;
    height: 186.2px;
    margin: 81.9px 0 0 31.5px;
    padding-top: 85.4px;
}
.lottery-box{
    padding-right: 16px;
}

/* 私聊相关 */
.operation-area .private-chatForm,{
    display: none;
    justify-content: space-between;
}
.private-chat-mode .private-chatForm{
    display: flex;
}
.private-overtime .private-chatForm{
    display: block;
}
.private-chat-mode .chatForm{
    display: none;
}
.private .sayContent{
    overflow-y: scroll;
    margin-top: 50px;
    height: 100%;
}
.new-msg-info{
    background: url('../images/student_private_entry.png') no-repeat;
    background-size: 100% 100%;
    height: 36px;
    margin-left: 34px;
    position: absolute;
    width: 224px;
    right: 12px;
    bottom: 10px;
    display: none;
    cursor: pointer;
}
.new-msg-info-flex{
    display: flex;
}
.new-msg-info-img{
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 5px 4px 0 5px;
}
.new-msg-info-p{
    font-size: 14px;
    color: #A44D00;
    line-height:36px;
}
.new-msg-info .new-msg-tips{
    display: none;
}
.new-msg-tips{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF5F5C;
    margin: auto 0px auto 8px;
}
.have-new-msg .new-msg-tips{
    display: block;
}
.private-chat-mode{
    position: absolute;
    z-index: 1;
    bottom: 0;
}
/* .public .chat-ul,.private .msg-private-box{
    display: block;
} */
.msg-private-box{
    display: none;
}
.msg-private-box{
    position: relative;
    height: 100%;
}
.msg-retreat{
    background: #F4F4F4;
    position: absolute;
    top: 0px;
    width: 100%;
    line-height: 50px;
    display: none;
}
.msg-retreat .msg-retreat-btn{
    position: absolute;
    left: 18px;
    cursor: pointer;
    width: 18px;
    height: 50px;
}
.msg-retreat .msg-retreat-title{
    text-align: center;
    margin: 0
}
.msg-retreat .msg-retreat-btn::after,.msg-retreat .msg-retreat-btn::before{
    content: '';
    display: block;
    width: 16px;
    height: 2px;
    background: #212121;
    transform: rotate(-45deg);
    position: absolute;
    top: 21px;
}
.msg-retreat .msg-retreat-btn::before{
    transform: rotate(45deg);
    top: 31px;
}
.private .msg-retreat{
    display: block;
}
.private-msg-chat-ul li{
    padding-top: 10px;
}
.private-msg-chat-ul .private-overtime-info{
    color: #ADADAD;
    background-color: #F5F5F7;
    text-align: center;
    width: 268px;
    height: 22px;
    margin: 20px auto 28px;
    line-height: 22px;
    padding: 0;
    border-radius: 4px;
}
.display-block{
    display: block;
}
.display-none{
    display: none;
}
.student .chat-content{
    color: #212121;
    font: 14px;
}
.student .chat-nick{
    color: #9B9B9B;
    font: 14px;
}
.assistant .chat-nick,.assistant .chat-content{
    color: #FF9933;
}
/* 私聊结束 */

/* 认真听课提醒开始 */
.student-listen-carefully .listen-carefully{
    width: 260px;
    height: 176px;
    background: url('../images/listen_carefully_mobile.png');
    top: auto;
    padding-top: 146px;
}
.student-listen-carefully-title{
    padding-top: 32px;
}
.student-listen-carefully-info{
    line-height: 28px;
    padding-top: 4px;
}
.student-listen-carefully-btn{
    display: block;
}
/* 认真听课提醒结束 */
body.hidden-player .player-wrapper{
    display: none;
}

/* pk */
.pk-pannel{
    display: none;
    position: fixed;
    z-index: 1;
    bottom: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
}
.pk-pannel .animation-container{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 70%;
}

/* 标记 */
.mark-layer{
    display: none;
    position: fixed;
    top: 50%;
    right: 0;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    background: rgba(0, 0,0, 0.3);
    border-radius: 100%;
    margin-top: -20px;
    cursor: pointer;
    overflow: hidden;
    z-index: 2;
}
.mark-layer .mark-icon{
    vertical-align: middle;
}
.mark-layer.unclick{
    background: rgba(0, 0, 0, 0.5);
    cursor: not-allowed;
}
/* toast */
.toast-layer{
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: auto;
    border-radius: 10px;
    text-align: center;
    padding: 20px;
    /* background-image: url(../images/less-stars-bg.png); */
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2;
}
.toast-layer .main-text{
    color: #fff;
    font-size: 22px;
}
.toast-layer .detail-text{
    color: #fff;
    margin-top: 8px;
}

.privilege-label{display: inline-block;height: 29px;width:55px;background:url('../images/encourage/tag_slice.png') no-repeat;margin: 0;margin-bottom: -7px;}

.continue_5{background-position:0 0;margin-bottom: -4px;}
.continue_6{background-position:0 -44px;margin-bottom: -4px;}
.continue_7{background-position:0 -88px;margin-bottom: -4px;}
.continue_8{background-position:0 -132px;margin-bottom: -4px;}
.continue_9{background-position:0 -176px;margin-bottom: -4px;}
.mvp_5{background-position:-87px 1px;width: 110px;}
.mvp_6{background-position:-87px -43px;width: 110px;}
.mvp_7{background-position:-87px -87px;width: 110px;}
.mvp_8{background-position:-87px -131px;width: 110px;}
.mvp_9{background-position:-87px -176px;width: 110px;}
.mvp_god{background-position:-87px -221px;width: 110px;}
.mvp{background-position:-225px -8px;width: 89px;margin-bottom: -10px;}
.god{background-position:-229px -45px;width: 82px;margin-bottom: -5px;}


.emoticon-profix-center .continue_5{background-position:0 -4px}
.emoticon-profix-center .continue_6{background-position:0 -48px}
.emoticon-profix-center .continue_7{background-position:0 -92px}
.emoticon-profix-center .continue_8{background-position:0 -136px}
.emoticon-profix-center .continue_9{background-position:0 -180px}

.emoticon-btn{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    right:23px;
    bottom: 36px;
    height: 47px;
    width: 47px;
    z-index: 3;
    background: gray;
    border-radius: 50%;
}

.emoticon-btn span{display: inline-block;height: 32px;
    width: 32px; background:url(../images/emoji/emoticon_btn.png) no-repeat;
    background-size: cover;}

.emotion-container{
    position: absolute;
    left:0;
    bottom: 0;
    height: 68px;
    width: 100%;
    background: rgba(0,0,0,.7);
    z-index: 3;
    display: none;
}



.special-emoticon{display: inline-block;height: 38px;width: 60px;}
.emoticon_1{background: url(../images/emoji/emoticon_1.png) no-repeat;background-size: contain;}
.emoticon_2{background: url(../images/emoji/emoticon_2.png) no-repeat;background-size: contain;}
.emoticon_666{background: url(../images/emoji/emoticon_666.png) no-repeat;background-size: contain;}
.emoticon_OK{background: url(../images/emoji/emoticon_ok.png) no-repeat;background-size: contain;}
.emotion-container div{
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-around;
}

.emoticon-profix-center{
    margin-top: -10px;
}

.emoticon-profix-center .chat-nick{position: relative;top: -8px;}

.emoticon-profix-center .privilege-label{margin-bottom: 0;}

.emotion-container img{height: 34px;width: auto;}