*{margin: 0; padding: 0;}
.text-center::after{content: ' '; display: inline-block; width: 0; height: 100%; vertical-align: middle; margin-top: 4px;}
body{font-size: 15px; background-color: #c4c4c4; font-family: "Microsoft YaHei","宋体", Arial, "新宋体";}
.clearfix::after{ content:""; display:block; clear:both;}
input, textarea{border: none;} 
input:focus, textarea:focus{outline: none; outline-offset: 0;}
.off{display: none;}

.service{width: 100%; max-width: 640px; height: 100%; position: fixed; left: 0; right: 0; margin:auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.pc-service{width: 372px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.msg-head{height: 40px; background-color: #efefef; border-bottom: 1px solid #e2e2e2; color: #333; font-size: 17px; text-align: center; position: relative}
.msg-head a{width: 40px; height: 40px; line-height: 40px; position: absolute; left: 2px; text-decoration: none; color: #353535;}
.msg-head a i{font-size: 22px;}
.msg-head .tha{height: 20px; line-height:22px;}
.msg-head .thb{height:20px; line-height:20px; font-size:16px;}
.reply-on{width: 40px; height: 40px; line-height: 40px; position: absolute; top:1px; right: 6px; text-decoration: none; color: #353535; cursor: pointer;}
.reply-on i{font-size: 28px;}

.msg-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; background-color: #f3f3f3; padding: 10px 10px 0; line-height: 1.3; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-y: auto;} 
.msg{margin-bottom: 10px;}
.msg:last-of-type{margin-bottom: 16px}
.msg .img1{width:45px; height: 45px; float: left;}
.msg .img2{display: none;}
.msg .content{max-width: 65%; float: left; border: 1px solid #f1eded; border-radius: 5px; background-color: #fff; margin: 6px 0 0 12px; padding: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; text-align: justify;}
.content .indicate{width: 0; height: 0; border: 12px solid; border-color: transparent; position: absolute; top: 5px;}
.msg .content .left-indicate{border-right-color: #fff;  left: -20px;}
.msg .content .right-indicate{display: none;}
.msg.on .img1{display: none;}
.msg.on .img2{float: right; width:45px; height: 45px; display: block; }
.msg.on .content{float: right; margin: 6px 12px 0 0; background-color: #95ec69;}
.msg.on .content .left-indicate{display: none;}
.msg.on .content .right-indicate{border-left-color: #95ec69; right: -20px; display: block;}
.msg-box p{margin-top: -6px}


.reply{width: 100%; background-color: #b5b5bb; position: absolute; top:41px; bottom: 50px; right: 0; overflow-y: auto;}
.reply .reply-item{width: 100%; height: 30px; line-height: 30px; padding: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; margin-bottom: 1px; cursor: pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.reply .reply-item:last-child{margin-bottom: 0;}

.menu{height: 38px; background-color: #e3e3e3; padding: 8px 42px 0 42px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.menu .m-box{width:36px; height: 30px; line-height:30px; text-align: center; float:left; margin: 0 13px; cursor: pointer;}
.menu .m-box label{cursor: pointer;}
.menu .m-box .icontupian{font-size: 36px; color: #505050;}
.menu .m-box .iconheimingdan{font-size: 31px; color: #505050; vertical-align: -6px;}
.menu .m-box .iconhuiyuan{font-size: 30px; color: #505050; font-weight: bold; vertical-align: -6px;}
.menu .m-box input[type="file"]{display: none;}

.msg-post{height: 50px; background-color: #e3e3e3; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 6px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.msg-post textarea{resize: none; font-size: 15px; line-height: 1.3; padding: 3px 37px 3px 3px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid #ccc; border-radius: 3px;}
.msg-post label{position: absolute; right: 72px; bottom: 6px; height: 38px; line-height: 38px; cursor: pointer;}
.msg-post label .iconfont{font-size: 36px; color: #090c84; vertical-align: -1px;}
.msg-post input[type="file"]{display: none;}
.msg-post .msg-jia{position: absolute; right: 72px; bottom: 5px; height: 38px; line-height: 38px; cursor: pointer;}
.msg-post .msg-jia .iconjia{font-size: 31px; color: #a4a4a5; vertical-align: -1px;}
.msg-post .msg-jia .iconchacha{font-size: 30px; color: #a4a4a5; vertical-align: -1px;}
.msg-post input[type="button"]{padding: 0 12px; font-size: 15px; margin-left: 8px; background-color: #0679c7; border-radius: 3px; color: #fff; cursor: pointer;}
.msg-post .back{width: 50px; line-height: 38px; text-align: center; background-color: #35ace0; border-radius: 3px;}
.msg-post .back a{text-decoration:none; color:inherit;}

.service-box{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; font-size: 14px; background-color: #fff; overflow-y: auto; vertical-align: baseline;}
.user-box{padding: 10px 10px 0;}
.user-box a{text-decoration:none; color:inherit;}
.user-list{height: 46px; background-color: #f2f2f2; padding: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 10px; border-radius: 5px;}
.user-list img{width: 46px;}
.user-list .user{margin-left: 6px; padding-top: 3px; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; width: 0;}
.user-list .user .name{height: 23px; line-height: 23px; font-size: 17px; color: #333;}
.user-list .user .name .ison{margin-left: 6px; font-size: 13px; color: #860808; vertical-align: 1px;}
.user-list .user .last-msg{height: 20px; line-height: 20px; color: #808080; padding-left: 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.user-list .data{width: 82px; text-align: right;}
.user-list .data .time{height: 27px; line-height: 27px; color: #555;}
.user-list .data .num{ width: 20px; height: 17px; border-radius: 8px; background-color: red; color: #fff; text-align: center; line-height: 19px;margin-left: 62px;}
.foot{height: 38px; background-color: #e3e3e3; padding: 6px; display: -webkit-box; display: -ms-flexbox; display: flex; padding-right: 0;}
.foot > div{-webkit-box-flex: 1;-ms-flex: 1;flex: 1; padding: 1px; margin-right: 6px; background-color: #0679c7; border-radius: 5px; color: #fff; text-align: center; line-height: 38px;}
.foot a{display: block; height: 100%; text-decoration:none; color:inherit;}

.pc-main{width: 1014px; height: 100%; position: fixed; left: 0; right: 0; margin:auto;}
.pc-left{width: 372px; height:100%; float: left; border:1px solid #afafb7; border-right: none; -webkit-box-sizing: border-box; box-sizing: border-box;}
.pc-right{width: 642px; height:100%; float: left; border:1px solid #afafb7; -webkit-box-sizing: border-box; box-sizing: border-box;}