*,*:before,*:after{box-sizing:border-box;}body,html{height:100%;overflow:hidden;}body,ul{margin:0;padding:0;}body{color:#4d4d4d;font:14px/1.4em 'Helvetica Neue',Helvetica,'Microsoft Yahei',Arial,sans-serif;}ul{list-style:none;}#chat{overflow:hidden;border-radius:3px}#chat .main,#chat .sidebar{height:100%}#chat .sidebar{float:left;width:200px;color:#f4f4f4;background-color:#2e3238}#chat .mains,#chat .main{position:relative;overflow:hidden;background-color:#eee}#chat .m-text{position:absolute;width:100%;bottom:0;left:0}#chat .m-message{height:calc(100% - 10pc)}.m-card{padding:9pt;border-bottom:1px solid #24272c}.m-card .avatar,.m-card .name{vertical-align:middle}.m-card .avatar{border-radius:2px}.m-card .name{display:inline-block;margin:0 0 0 15px;font-size:1pc}.m-list{overflow:hidden;height: calc(100% - 10pc);}.m-list li{padding:9pt 10px;border-bottom:1px solid #292c33;cursor:pointer;-webkit-transition:background-color .1s;transition:background-color .1s}.m-list li:hover{background-color:hsla(0,0%,100%,.03)}.m-list li.active{background-color:hsla(0,0%,100%,.1)}.m-list li b{background:#f00;border-radius:10px;padding:0px 4px;color:#fff;text-align:center;font-size:12px;}.m-list li .on{padding:0;}.m-list .avatar,.m-list .name{vertical-align:middle}.m-list .avatar{border-radius:2px}.m-list .name{display:inline-block;font-size: 12px;width:120px;margin:0 0 0 15px}.m-text{height:10pc;border-top:1px solid #ddd}.m-text .div-textarea{padding:10px;height:100%;width:100%;border:none;outline:0;background:white;resize:none}.m-message{padding:10px 15px;overflow-y:scroll;overflow:hidden;}.m-message li{margin-bottom:15px}.m-message .time{margin:7px 0;text-align:center}.m-message .time>span{display:inline-block;padding:0 18px;font-size:9pt;color:#fff;border-radius:2px;background-color:#dcdcdc}.m-message .avatar{float:left;margin:0 10px 0 0;border-radius:3px}.m-message .text{display:inline-block;position:relative;padding:0 10px;max-width:calc(100% - 40px);min-height:30px;line-height:2.5;font-size:9pt;text-align:left;word-break:break-all;background-color:#fafafa;border-radius:4px}.m-message .text:before{content:" ";position:absolute;top:9px;right:100%;border:6px solid transparent;border-right-color:#fafafa}.m-message .self{text-align:right}.m-message .self .avatar{float:right;margin:0 0 0 10px}.m-message .self .text{background-color:#b2e281}.m-message .self .text:before{right:inherit;left:100%;border-right-color:transparent;border-left-color:#b2e281}.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);border-radius:8px;}.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);border-radius:8px;}.divScrollBar div{background-color:#666; position:absolute;border-radius:10px;}.send,.csend{right:80px;}.sendBtn{right:10px;}.but{width:68px;height:25px;background:#0188fb;border:none;position:absolute;bottom:10px;color:white;}
*{margin:0;padding:0;}
header{background:#5773dd;width:100%;height:60px;line-height:60px;position:relative;top:0;left:0;}
.logo{width:135px;height:60px;background:#3e50a1;position: absolute;top: 0;left: 0;}
.logo img{padding: 20px 33px;}
.head_right{position: absolute;top: 0;right: 0;display: flex;height:60px;color:#FFF;}
.head_right div{margin:0 15px 0 10px;}
.head_right .logout{cursor:pointer;}
.head_right img{width:35px;height:35px;margin: 12px 0;}
nav{position:relative;width:135px;height:100%;top:0;left:0;box-shadow:0px 0px 1px 0px #000;z-index: 1;}
nav ul li{width:135px;height:120px;text-align: center;cursor: pointer;position:relative;}
nav ul li:hover,.cur{background:#F9FAFB;}
nav ul li:hover::after,.cur::after{content: "";position: absolute;right: 0;top: 0;width: 0;height: 120px;border: 2px solid #1478ff;background:#F9FAFB;}
.msg_num{position:absolute;top:20px;display:none;right:20px;background:#f00;color:#fff;font-size:12px;padding:0 3px;border-radius: 10px;text-align: center;line-height: 18px;}
.icon{padding: 30px 50px 10px;}
.icon ins{width:30px;height:30px;display: block;}
.icon_console{background:url('../img/icon_console.png');background-size:100%;}
.icon_chat{background:url('../img/icon_chat.png');background-size:100%;}
.icon_msg{background:url('../img/icon_msg.png');background-size:100%;}
.icon_log{background:url('../img/icon_log.png');background-size:100%;}
.icon_user{background:url('../img/icon_user.png');background-size:100%;}
main{position: fixed;top: 60px;left: 135px;width: 100%;height: 100%;}
iframe{border: 0;}