.room-wrap{width:100%;height:100vh;display:flex}.room-wrap .audience-list,.room-wrap .chat-list{width:265px;height:100vh;background-color:#fff}.room-wrap .audience-list .tab-list,.room-wrap .chat-list .tab-list{width:100%;height:60px;color:#8e929f;font-size:13px;text-align:center;border-bottom:1px solid #ececed}.room-wrap .audience-list .tab-list .tab-item,.room-wrap .chat-list .tab-list .tab-item{display:inline-block;margin:0 7px;padding:0 2px;text-align:center;line-height:60px;cursor:pointer}.room-wrap .audience-list .tab-list .active,.room-wrap .chat-list .tab-list .active{color:#3a91f3;border-bottom:2px solid #3a91f3}.room-wrap .audience-list .user-box,.room-wrap .chat-list .user-box{width:100%;padding:10px 0;height:calc(100% - 60px);overflow:auto}.room-wrap .audience-list .user-box .user-content,.room-wrap .chat-list .user-box .user-content{display:flex;align-items:center;padding:8px 0;font-size:13px;color:#000;position:relative}.room-wrap .audience-list .user-box .user-content .user-avator,.room-wrap .chat-list .user-box .user-content .user-avator{width:30px;height:30px;border-radius:50%;margin-left:20px;margin-right:10px}.room-wrap .audience-list .user-box .user-content .block-panel,.room-wrap .chat-list .user-box .user-content .block-panel{position:absolute;z-index:100;background-color:#fff;width:200px;top:100%;bottom:0;left:50%;transform:translateX(-50%);box-shadow:0 0 8px hsla(0,0%,59.2%,.2);border-radius:5px;height:108px}.room-wrap .audience-list .user-box .user-content .block-panel .block-panel-content,.room-wrap .chat-list .user-box .user-content .block-panel .block-panel-content{display:flex;align-items:center;width:100%;padding:0 20px}.room-wrap .audience-list .user-box .user-content .block-panel .block-panel-content .action-icon,.room-wrap .chat-list .user-box .user-content .block-panel .block-panel-content .action-icon{width:14px;height:14px}.room-wrap .audience-list .user-box .user-content .block-panel .block-panel-content p,.room-wrap .chat-list .user-box .user-content .block-panel .block-panel-content p{font-size:12px;color:#000;margin:9px 0 9px 15px;cursor:pointer}.room-wrap .audience-list .user-box .user-content .block-time,.room-wrap .chat-list .user-box .user-content .block-time{padding:18px 15px;height:150px;font-size:12px;color:#000;position:absolute;z-index:100;background-color:#fff;width:200px;top:100%;bottom:0;left:50%;transform:translateX(-50%);box-shadow:0 0 8px hsla(0,0%,59.2%,.2);border-radius:5px}.room-wrap .audience-list .user-box .user-content .block-time .block-time-select,.room-wrap .chat-list .user-box .user-content .block-time .block-time-select{margin-top:15px;text-align:center}.room-wrap .audience-list .user-box .user-content .block-time .block-time-opt,.room-wrap .chat-list .user-box .user-content .block-time .block-time-opt{margin-top:28px;text-align:center}.room-wrap .audience-list .user-box .user-content .block-time .block-time-opt .block-time-confirm,.room-wrap .chat-list .user-box .user-content .block-time .block-time-opt .block-time-confirm{padding:3px 17px;border-radius:5px;color:#fff;background-color:#09f;border:1px solid #09f;margin-right:9px;cursor:pointer}.room-wrap .audience-list .user-box .user-content .block-time .block-time-opt .block-time-cancel,.room-wrap .chat-list .user-box .user-content .block-time .block-time-opt .block-time-cancel{padding:3px 17px;border-radius:5px;color:#8e929f;background-color:#f2f4f6;border:1px solid #dde2e8;margin-left:9px;cursor:pointer}.room-wrap .audience-list .chat-box,.room-wrap .chat-list .chat-box{width:100%;height:calc(100% - 74px)}.room-wrap .audience-list .chat-box .message-list,.room-wrap .chat-list .chat-box .message-list{position:absolute;top:70px;bottom:123px;width:265px;font-size:12px;overflow-x:hidden;overflow-y:auto}.room-wrap .audience-list .chat-box .message-list .message-box,.room-wrap .chat-list .chat-box .message-list .message-box{margin:4px 0}.room-wrap .audience-list .chat-box .message-list .message-box .message-item,.room-wrap .chat-list .chat-box .message-list .message-box .message-item{display:flex;align-items:flex-start}.room-wrap .audience-list .chat-box .message-list .message-box .message-item .message-user-name,.room-wrap .chat-list .chat-box .message-list .message-box .message-item .message-user-name{color:#92abf4;margin:0 12px 0 10px}.room-wrap .audience-list .chat-box .message-list .message-box .message-item .message-user-name .message-user-content,.room-wrap .chat-list .chat-box .message-list .message-box .message-item .message-user-name .message-user-content{color:#000}.room-wrap .audience-list .chat-box .message-input,.room-wrap .chat-list .chat-box .message-input{position:absolute;height:120px;width:265px;bottom:0;border-top:1px solid #ececed}.room-wrap .audience-list .chat-box .message-input .textarea,.room-wrap .chat-list .chat-box .message-input .textarea{width:265px;height:72px;padding:10px 10px 0 10px;font-size:12px;border:none;resize:none}.room-wrap .audience-list .chat-box .message-input .send-wrap,.room-wrap .chat-list .chat-box .message-input .send-wrap{padding:0 10px;display:flex;justify-content:space-between;align-items:center}.room-wrap .audience-list .chat-box .message-input .send-wrap .emoji-panel,.room-wrap .chat-list .chat-box .message-input .send-wrap .emoji-panel{position:absolute;overflow:scroll;bottom:48px;left:10px;width:199px;height:110px;background-color:#fff;box-shadow:0 0 8px hsla(0,0%,59.2%,.2);border-radius:5px;padding:8px 8px;font-size:18px;overflow-x:hidden}.room-wrap .audience-list .chat-box .message-input .send-wrap .emoji-panel .emoji-content,.room-wrap .chat-list .chat-box .message-input .send-wrap .emoji-panel .emoji-content{padding:5px;width:22px;height:22px;background-size:22px 22px;cursor:pointer}.room-wrap .audience-list .chat-box .message-input .send-wrap .emoji-btn,.room-wrap .chat-list .chat-box .message-input .send-wrap .emoji-btn{position:relative;width:22px;height:22px;background-image:url(../img/emoji.c6be79cf.png);background-position:0 0;background-size:auto 22px;cursor:pointer}.room-wrap .audience-list .chat-box .message-input .send-wrap .input-send,.room-wrap .chat-list .chat-box .message-input .send-wrap .input-send{opacity:.3;margin-left:140px;color:#fff;border:none;width:70px;height:30px;border-radius:5px;background:-webkit-gradient(linear,right top,left top,from(#0ca4ff),to(#52e4ff))}.room-wrap .audience-list .chat-box .message-input .send-wrap .isBtn,.room-wrap .chat-list .chat-box .message-input .send-wrap .isBtn{opacity:1;cursor:pointer}.room-wrap .audience-list .chat-box .gift-content,.room-wrap .chat-list .chat-box .gift-content{position:relative;margin:14px 0;display:flex;align-items:center;width:100%}.room-wrap .audience-list .chat-box .gift-content .gift-rank,.room-wrap .chat-list .chat-box .gift-content .gift-rank{background-color:#ffc12c;margin-left:7px;width:15px;height:15px;font-size:12px;line-height:14px;border-radius:50%;text-align:center}.room-wrap .audience-list .chat-box .gift-content .gift-portrait,.room-wrap .chat-list .chat-box .gift-content .gift-portrait{margin-left:7px;width:30px;height:30px;border-radius:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.room-wrap .audience-list .chat-box .gift-content .gift-user-name,.room-wrap .chat-list .chat-box .gift-content .gift-user-name{color:#33353b;font-size:13px;width:70px;margin:0 7px}.room-wrap .audience-list .chat-box .gift-content .gift-send,.room-wrap .chat-list .chat-box .gift-content .gift-send{color:#33353b;font-size:13px}.room-wrap .audience-list .chat-box .gift-content .gift-send .gift-count,.room-wrap .chat-list .chat-box .gift-content .gift-send .gift-count{color:#3a91f3;margin:0 3px;cursor:pointer}.room-wrap .rong-video-wrap{flex:1;border-right:1px solid #e8e8e8;border-left:1px solid #e8e8e8}.room-wrap .rong-video-wrap .anchor-box{width:100%;height:60px;padding:0 20px;background-color:#fff;display:flex;justify-content:space-between;align-items:center}.room-wrap .rong-video-wrap .anchor-info-l{display:flex;align-items:center}.room-wrap .rong-video-wrap .anchor-info-l .avator{width:44px;height:44px;border-radius:50%;margin-right:10px}.room-wrap .rong-video-wrap .anchor-info-l .info-detail{display:flex;flex-direction:column}.room-wrap .rong-video-wrap .anchor-info-l .info-detail .list{display:flex}.room-wrap .rong-video-wrap .anchor-info-l .info-detail .list .item{font-size:12px;margin-top:4px;margin-right:10px;display:flex;align-items:center}.room-wrap .rong-video-wrap .anchor-info-l .info-detail .list .item .icon{width:12px;height:12px}.room-wrap .rong-video-wrap .anchor-icon-r{display:flex;align-items:center}.room-wrap .rong-video-wrap .anchor-icon-r .icon-box{position:relative;cursor:pointer}.room-wrap .rong-video-wrap .anchor-icon-r .icon-box .icon-r{width:20px;height:20px;margin-left:20px;cursor:pointer}.room-wrap .rong-video-wrap .anchor-icon-r .icon-box .upload-video{position:absolute;font-size:0;top:0;left:20px;width:20px;height:20px;opacity:0}.room-wrap .rong-video-wrap .wrap-video{position:relative}.room-wrap .rong-video-wrap .wrap-video .video-btn-icon{position:absolute;top:13px;right:13px;width:36px;height:36px;cursor:pointer;z-index:99}.room-wrap .rong-video-wrap .wrap-video .view-list-wrap{position:absolute;bottom:130px;left:0;width:100%;height:150px;display:flex;flex-direction:column;align-items:center;overflow:auto}.room-wrap .rong-video-wrap .wrap-video .view-list-wrap .call-view{width:150px;height:130px;margin:0 10px;-o-object-fit:fill;object-fit:fill}.room-wrap .rong-video-wrap .wrap-video .view-list-wrap .upload-video{width:100%;height:150px;padding:10px 0;background-color:#000;text-align:center}.room-wrap .rong-video-wrap .wrap-video .view-list-wrap .upload-video .load-video{width:250px;height:130px;-o-object-fit:fill;object-fit:fill}.room-wrap .rong-video-wrap .wrap-video .view-list-wrap .view-list{width:100%;height:130px;display:flex;align-items:center}.room-wrap .rong-video-wrap .wrap-video .view-list-wrap .view-list .call-view{width:150px;height:130px;margin:0 10px;-o-object-fit:fill;object-fit:fill}@keyframes live-gift{0%{left:-1px}to{right:11px}}.room-wrap .rong-video-wrap .wrap-video .gift-box-wrap{font-size:13px;display:flex;flex-direction:column;position:absolute;top:100px;left:110px;width:157px;background-color:#fff;border-radius:12px;border:1px solid #51e4ff;background-color:rgba(0,0,0,.5);color:#fff;animation:live-gift .3s 1;padding:6px 6px 9px 6px}.room-wrap .rong-video-wrap .wrap-video .gift-box-wrap .live-user-avator{margin-right:10px;width:22px;height:22px;border-radius:50%}.room-wrap .rong-video-wrap .wrap-video .gift-box-wrap .live-user-detail{margin-left:30px;display:flex;font-size:12px;flex-direction:column}.room-wrap .rong-video-wrap .wrap-video .gift-box-wrap .live-user-detail .live-user-name{color:#f8e71c;margin-bottom:3px}.room-wrap .rong-video-wrap .wrap-video .gift-box-wrap .live-user-detail .live-gift-icon{display:flex;align-items:center}.room-wrap .rong-video-wrap .wrap-video .gift-box-wrap .live-user-detail .live-gift-icon .gift-icon{width:30px;height:30px;margin-right:5px}.room-wrap .rong-video-wrap .wrap-video .rong-video-box{width:100%;min-width:680px;height:600px;background-color:#000;margin-bottom:30px;color:#fff;line-height:600px;text-align:center;font-size:16px}.room-wrap .rong-video-wrap .wrap-video .rong-video-box video{width:100%;height:100%;padding:0 170px;-o-object-fit:fill;object-fit:fill}.room-wrap .rong-video-wrap .wrap-video .btn-wrap{width:100%;height:90px;display:flex;justify-content:center;align-items:center}.room-wrap .rong-video-wrap .wrap-video .btn-wrap .btn-close{width:140px;height:38px;color:#fff;border:none;border-radius:5px;font-size:12px;background:linear-gradient(right,#0ca4ff,#52e4ff);background:-webkit-gradient(linear,right top,left top,from(#0ca4ff),to(#52e4ff));margin:0 10px;cursor:pointer}.room-wrap .btn{width:1000px;text-align:center}.room-wrap video::-webkit-media-controls{display:none!important}