html,body{width:100%; min-width:840px; height: 100%; min-height:650px; background: #f5f5f5;}
p{padding:0;margin:0;}
.serout{display: table; width: 100%; height: 100%;}
.serout .serw{display: table-cell; width: 100%; height: 100%; text-align: center; vertical-align: middle;}
.serviceout{display:inline-block; width: 840px; height: 650px; background: #ffffff; overflow: hidden; border-radius: 4px; box-shadow: 0 0 20px #e1e1e1; text-align: left; position: relative;}
.servtit{height: 60px; padding-left: 20px; font-size: 16px; font-weight: bold; line-height: 60px; color: #333333;border-bottom: 1px solid #eeeeee; }
.servtit .title{
    display:inline-block; width: 40px; height: 40px; margin-right: 10px; overflow: hidden; vertical-align: middle;
}
.servtit .title img{
    max-width: 100%; max-height: 100%;
}
.servtit .swoole-status{
    display:inline-block; width: auto;font-size: 14px;font-weight: unset; vertical-align: middle;
}
.servtit .swoole-status em{
    font-style: normal;
}
.servtit .servicePhone{font-size: 14px; margin-left: 15px;}
.servtit .relink{ margin-left:15px; font-size: 14px;}
.servtit .gohome{
    float: right; padding-right: 20px;
}
.servtit .gohome a{
    display: inline-block; height: 32px; padding: 0 15px; font-size: 14px; font-weight: normal; line-height: 32px; color: #515a6e; border: 1px solid #E1E1E1; border-radius: 4px;
}
.servtit .gohome a:hover{color: #2d8cf0; border-color: #2d8cf0;}

.msgw{height: 428px; overflow-y: scroll;}
.upimg-progress{
    position: absolute; top: 0;width: 540px;height: 513px;text-align: center;line-height: 513px;color:#ff6600;background: rgba(245, 245, 245, 0.4);z-index: 999;
}
.msgw .loadmore{height: 24px;  padding-top: 10px; font-size: 12px; line-height: 24px; color: #666666; text-align: center;}

.msgw .msglis {width: auto; height: auto; clear: both; overflow: hidden;}
.msgw .msglis.left{padding:0 64px 10px 20px;}
.msgw .msglis.right{padding:0 20px 10px 64px;}
.msgw .msglis.left .chathead{float: left; padding:26px 10px 0 0;}
.msgw .msglis.right .chathead{float: right; padding:26px 0 0 10px;}
.msgw .msglis .chathead{width: 34px; height: 34px;}
.msgw .msglis .chathead img{width: 100%; height: 100%; border-radius: 50%;}
.msgw .msglis .chatlw{width:690px;}
.msgw .msglis.left .chatlw{float: left;}
.msgw .msglis.right .chatlw{float: right;}
.msgw .msglis .chatlw .chattime{float:left; height: 22px; width: 100%; font-size: 12px; line-height: 22px; color: #999999;}
.msgw .msglis.right .chatlw .chattime{text-align: right;}

.msgw .msglis .chatlw .chattxt{min-height: 20px; padding: 10px; font-size: 12px;color: #333333; background: #f3f3f3;}
.msgw .msglis.left .chattxt{float:left; border-top-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius: 10px;}
.msgw .msglis.right .chattxt{float:right; border-top-left-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius: 10px;}
.msgw .msglis .chattxt .chat-img img{
    display: block;width: auto;max-width: 200px;max-height: 200px;height: auto;border-radius: 5px;
}
.msgw .msglis .chat-msg .cface{
    display:inline-block; width: 24px; height: 24px; margin: 0; vertical-align: middle;
}
.msgw .msglis.left .product{
   display: block; width: 330px;height: auto;padding:10px;border-radius: 5px;background: #ffffff;clear: both;overflow: hidden;
}
.msgw .msglis.right .product{
    display: block;width: 330px;height: auto;padding:10px;border-radius: 5px;background: rgba(232,232,232,0.4);clear: both;overflow: hidden;
}
.msgw .msglis.mid-m{
    display: block;width: 350px;height: auto;border-radius: 5px;border:1px dotted #dddddd;margin:20px auto 50px;
}
.msgw .msglis.mid-m .product,.msgw .msglis.mid-m .order{
    display: block;width: 330px;height: auto;padding:10px;clear: both;overflow: hidden;
}
.msgw .msglis.mid-m .b-p-s{
    display: block;width: auto;height: 35px;border-top:1px dotted #dddddd;font-size: 14px;text-align: center;line-height: 35px;color: #1a1a1a;cursor: pointer;
}
.msgw .msglis .product .pro-img{
    display: block;width: 60px;height: 60px;float: left;margin-right: 10px;overflow: hidden;
}
.msgw .msglis .product .pro-img img{
    display: block;width: 100%;height: 100%;border-radius: 5px;
}
.msgw .msglis .product .pro-msg{
    width: 240px;float: left;height: auto;min-height: 40px;
}
.msgw .msglis .product .pro-msg .title{
    font-size: 14px;color: #444444;line-height: 20px;padding:0;
}
.msgw .msglis .product .pro-msg .sub-title{
    width: auto;font-size: 14px;color: #666666;line-height: 20px;padding:0;
}
.msgw .msglis .price em{
    font-style: normal;color: #cc3300;font-size: 13px;
}
.msgw .msglis.left .order{
    display: block;width: 330px;height: auto;padding:10px;border-radius: 5px;background: #ffffff;
}
.msgw .msglis.right .order{
    display: block;width: 330px;height: auto;padding:10px;border-radius: 5px;background: rgba(232,232,232,0.4);
}
.msgw .msglis .order p{
    display: block;width: auto;height: 20px;line-height: 20px;color: #444444;font-size: 13px;
}
.chatw{
    height: 160px; border-top: 1px solid #eeeeee; overflow: hidden;
}
.facew{
    width: 392px;height: 132px;overflow-y: auto;padding: 5px; position: absolute; left: 10px; bottom:160px;z-index: 2;  box-sizing: content-box; background:#ffffff; border:1px solid  #eeeeee;
}
.facew img{
    display: block; float: left; width: 24px; height: 24px; margin: 5px; cursor: pointer;
}
.facew img:hover{
    background-color: #dddddd;
}
.chatw .othw{
    height: 38px; padding: 0 10px; line-height: 38px;
}
.chatw .othw #upimg{
    display: block;width: 40px;height: 40px;float: left;
}
.chatw .othw #upimg input{
    display: none;
}
.chatw .othw #face{
    display: block;width: 40px;height: 40px;float: left;font-size: 24px;color: #555555;text-align: center;line-height: 40px;
}
.is-sendimg{
    width: 300px;height: auto;margin:20px auto;
}
.is-sendimg img{
   display: block; width: 300px;height: auto;max-height: 300px; border-radius: 4px;
}
.btn{
    display: block;width: auto;height: 60px;clear: both;overflow: hidden;
}
.btn a{
    display: block;width: 80px;height: 35px;float: right;margin:15px;font-size: 14px;line-height: 34px;border-radius: 3px;text-align: center;
}
.btn a.send-btn{
    background: #0000ff;color: #ffffff;
}
.btn a.cancel-btn{
    background: #999999;color: #ffffff;
}

.chatw .othw #upimg img{max-height: 18px; margin: 0 10px; vertical-align: middle;}
.chatw textarea{display:block; height: 72px; width: 820px; margin-left: 20px;font-size: 14px; line-height: 24px; color: #333333; border: none; resize: none;}
.sendw{height: 47px; padding: 0 10px;}
.sendw a{display: block;float: right; height: 34px; width: 80px; margin: 0 10px; font-size: 14px; line-height: 34px; text-align: center; color: #ffffff; background: #ff4242; border-radius: 2px;}
/**滚动条*/
.chatw textarea::-webkit-scrollbar,.msgw::-webkit-scrollbar{width: 6px; border-radius: 3px;}
.chatw textarea::-webkit-scrollbar-button,.msgw::-webkit-scrollbar-button {display: none;}
.chatw textarea::-webkit-scrollbar-track,.msgw::-webkit-scrollbar-track {display: none;}
.chatw textarea::-webkit-scrollbar-track-piece,.msgw::-webkit-scrollbar-track-piece{background: #f1f1f1;}
.chatw textarea::-webkit-scrollbar-thumb,.msgw::-webkit-scrollbar-thumb{background: #d3d3d3; border-radius: 3px;}
.msgw{
    scrollbar-arrow-color: #cccccc;
    scrollbar-face-color: #d3d3d3;
    scrollbar-3dlight-color: #d3d3d3;
    scrollbar-highlight-color: #d3d3d3;
    scrollbar-shadow-color: #d3d3d3;
    scrollbar-darkshadow-color: #d3d3d3;
    scrollbar-track-color: #f1f1f1;
}