.loadingChat{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; background: url(../image/chat/loading.gif) center center no-repeat; }
.nullData{ font-size: 14px; color:#a1a1a1; line-height: 14px; position:absolute; top: 50%; margin-top: -7px; text-align: center; left: 0; right: 0; }

.chatBox{ width: 260px; height: 480px; top: 0; left: 0; background: #fff url(../image/chat.jpg) top left no-repeat; position: fixed; z-index: 9997; -webkit-background-clip: content; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 50px rgba(0,0,0,.3); border: 1px solid #D9D9D9; border-color: rgba(0,0,0,.19); background-size: cover; }
.chatBox .chatDrag{ position:absolute; left: 0; right: 0; top: 0; height: 15px; cursor: move; }
.chatBox .chatTop{ padding:  0 16px; height: 65px; position: relative; margin-top: 15px; }
.chatBox .chatTop .name{ font-size: 16px; color:#333; font-family: \5FAE\8F6F\96C5\9ED1; line-height: 50px; }
.chatBox .chatTop .close{ width: 16px; cursor: pointer; height: 16px; position: absolute; background: url(../image/chat/icon.png) no-repeat; background-position: 1px -40px; right: 15px; top: 0; }
.chatBox .chatList{ background-color: #fff; background-color: rgba(255,255,255,.9); height: 400px; overflow-y: auto; }
.chatBox .chatTab .title{ padding-left: 30px; color:#333; background: url(../image/chat/8.png) 10px center no-repeat; background-size: 13px auto; cursor: pointer; }
.chatBox .chatTab .title em{ font-size: 14px; line-height: 28px; padding-left: 5px; color: #999; }
.chatBox .chatLine{ display: none; }
.chatBox .chatLi{ overflow: hidden; height: 52px; }
.chatBox .chatLi .head{position: relative; width: 36px; height: 36px; border-radius: 50%; /*overflow: hidden;*/ float: left; margin: 7px 8px 0 15px; }
.chatBox .chatLi .head img{ width: 100%; height: 100%; border-radius: 50%; }
.chatBox .chatLi .head .unread-message{display:none;position: absolute;top: 0px;left: 28px;width: 10px;height: 10px;border-radius:50%;background-color: #e63839;}
.chatBox .chatLi .head .unread-message-block{display: block}
.chatBox .chatLi .info{ padding-top: 3px;}
.chatBox .chatLi .info span{ font-size: 14px; color: #333; line-height: 24px; display: block; margin-top: 10px;}
.chatBox .chatLi .info em{ line-height: 18px; font-size: 12px; color: #999; display: block; }
.chatBox .chatLi:hover { background-color: #F2F2F2; background-color: rgba(0,0,0,.05); cursor: pointer; }
.chatBox .chatTab.show .title{ background: url(../image/chat/9.png) 10px center no-repeat; background-size: 13px auto; }
.chatBox .chatTab.show .chatLine{ display: block; }
.chatBox .chatLi.hasNoReadLi .head{ -webkit-animation:chatLi-noRead 0.5s linear 0s infinite alternate; animation:chatLi-noRead 0.5s linear 0s infinite alternate; }
@-webkit-keyframes chatLi-noRead{
	0% {  -webkit-transform: translate(-2px,2px); -ms-transform: translate(-2px,2px); transform: translate(-2px,2px); }
	25% {  -webkit-transform: translate(-2px,2px); -ms-transform: translate(-2px,2px); transform: translate(-2px,2px); }
	50% {  -webkit-transform: translate(0,-2px); -ms-transform: translate(0,-2px); transform: translate(0,-2px); }
	75% {  -webkit-transform: translate(2px,2px); -ms-transform: translate(2px,2px); transform: translate(2px,2px); }
	100% {  -webkit-transform: translate(2px,2px); -ms-transform: translate(2px,2px); transform: translate(2px,2px); }
}
@keyframes chatLi-noRead{
	0% {  -webkit-transform: translate(-2px,2px); -ms-transform: translate(-2px,2px); transform: translate(-2px,2px); }
	25% {  -webkit-transform: translate(-2px,2px); -ms-transform: translate(-2px,2px); transform: translate(-2px,2px); }
	50% {  -webkit-transform: translate(0,-2px); -ms-transform: translate(0,-2px); transform: translate(0,-2px); }
	75% {  -webkit-transform: translate(2px,2px); -ms-transform: translate(2px,2px); transform: translate(2px,2px); }
	100% {  -webkit-transform: translate(2px,2px); -ms-transform: translate(2px,2px); transform: translate(2px,2px); }
}
.chatBox .chatTab.hasNoReadTab:not(.show) .title em{ position: relative; }
.chatBox .chatTab.hasNoReadTab:not(.show) .title em::after{ content: ''; position:absolute; right: 0; width: 5px; height: 5px; border-radius: 50%; background: #ed4948; top: 0; }
.chatPage .tabLi .read{ display: none; }
.chatPage .tabLi.hasNoReadPage .read{ width: 18px; height: 18px; text-align: center; font-size: 10px; color: #fff; line-height: 18px; background: #ed4948; position: absolute; display: block; border-radius: 50%; left: 32px; top: 1px; }
.chatMinPage .read{ display: none; }
.chatMinPage.hasNoReadMinPage .read{ width: 18px; height: 18px; text-align: center; font-size: 10px; color: #fff; line-height: 18px; background: #ed4948; position: absolute; display: block; border-radius: 50%; right: 10px; top: 50%; margin-top: -9px; }



.chat-anim { -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .3s; animation-duration: .3s; }
.chat-slideShow{ -webkit-animation-name:chat-slideShow; animation-name:chat-slideShow; }
@-webkit-keyframes chat-slideShow{
	0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
@keyframes chat-slideShow{
	0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.chat-open{ -webkit-animation-name:chat-bounceIn; animation-name:chat-bounceIn; }
@-webkit-keyframes chat-bounceIn{
	0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5);}
	100%{opacity:1;-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes chat-bounceIn{
	0%{opacity:0;-webkit-transform:scale(.5);-ms-transform:scale(.5);transform:scale(.5);}
	100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
}
.chat-close{ -webkit-animation-name:chat-bounceOut; animation-name:chat-bounceOut; -webkit-animation-fill-mode:both; animation-fill-mode:both; -webkit-animation-duration:.2s; animation-duration:.2s; }
@-webkit-keyframes chat-bounceOut{
	100%{opacity:0;-webkit-transform:scale(.7);transform:scale(.7);}
	30%{-webkit-transform:scale(1.05);transform:scale(1.05);}
	0%{-webkit-transform:scale(1);transform:scale(1);}
}
@keyframes chat-bounceOut{
	100%{opacity:0;-webkit-transform:scale(.7);-ms-transform:scale(.7);transform:scale(.7);}
	30%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);}
	0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
}
.chatPage{ position: fixed; width: 602px; height: 520px; box-shadow: 1px 1px 50px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 50px rgba(0,0,0,.3); border: 1px solid #D9D9D9; border-color: rgba(0,0,0,.19); -webkit-background-clip: content; border-radius: 2px; left: 0; top: 0; z-index: 9998; margin: 0; background-color: #ffffff}
.chatPage-moreChat{ padding-left: 200px; }
.chatPage .tabList{ display: none; position: absolute; left: 0; top: 0; bottom: 0; background: #D9D9D9; overflow-y: hidden; width: 200px; }
.chatPage .tabList:hover{ overflow-y: auto; }
.chatPage-moreChat .tabList{ display: block; }
.chatPage .tabLi{ padding: 5px 26px 5px 5px; margin: 5px; cursor: pointer; border-radius: 3px; position:relative; }
.chatPage .tabLi:hover{ background-color: #E2E2E2; }
.chatPage .tabLi.cur { background-color: #F3F3F3; }
.chatPage .tabLi:not(:first-child){ margin-top: 0; }
.chatPage .tabLi img{ width: 40px; height: 40px; border-radius: 50%; float: left; }
.chatPage .tabLi span{ margin-left: 50px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 40px; }
.chatPage .tabLi .close{ position: absolute; right: 3px; top: 0; bottom: 0; width: 22px; display: none; }
.chatPage .tabLi:hover .close{ display: block; }
.chatPage .tabLi .close i{ margin-left: 4px; margin-top: 18px; width: 14px; height: 14px; background: #555 url(../image/chat/7.png) center center no-repeat; background-size: 8px auto; border-radius: 50%; display: block; }
.chatPage .tabLi .close:hover i{ background: #c00 url(../image/chat/7.png) center center no-repeat; background-size: 8px auto; border-radius: 50%; }
.chatMain { background: url(../image/chat.jpg) top left no-repeat; background-size: cover; -webkit-background-size: cover; }
.chatMain .chatMainLi{ display: none; }
.chatMain .top { height: 80px; background-color: #F8F8F8; background-color: rgba(245,245,245,.7); position: relative; cursor: default; }
.chatMain .info { overflow: hidden; float: left; height: 80px; padding-right: 10px; position:relative; z-index: 667; }
.chatMain .info img { width: 50px; height: 50px; border-radius: 50%; float: left; margin: 15px 10px 0 15px; }
.chatMain .info span { font-size: 18px; line-height: 24px; color:#444; padding-top:20px; display: block; float: left; }
.chatMain .fp { position: absolute; right: 15px; top: 0; z-index: 667; padding: 15px 0; }
.chatMain .fp .fpIcon{ width: 16px; cursor: pointer; height: 16px; margin-left: 10px; float: left; position: relative; }
.chatMain .fp .min::before { content: ''; position: absolute; width: 14px; height: 2px; left: 0; top: 50%; margin-top: -1px; background: #2E2D3C; cursor: pointer; _overflow: hidden; }
.chatMain .fp .min:hover::before { background: #2D93CA; }
.chatMain .fp .default { background: url(../image/chat/icon.png) no-repeat; background-position: -65px -40px; display: none; }
.chatMain .fp .default:hover { background-position: -49px -40px; }
.chatMain .fp .max { background: url(../image/chat/icon.png) no-repeat; background-position: -32px -40px; }
.chatMain .fp .max:hover { background-position: -16px -40px; }
.chatMain .fp .close { background: url(../image/chat/icon.png) no-repeat; background-position: 1px -40px; }
.chatMain .fp .close:hover { opacity: .7; }
.chatMain .chatDrag{ position:absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 666; cursor: move; }
.chatMain .content{display:block;table-layout: inherit;width: 100%;min-width: auto; background-color: #fff; background-color: rgba(255,255,255,.9); padding: 15px 15px 5px; overflow-x: hidden; overflow-y: auto; height: 262px; }
.chatMain .content-li{ position:relative; font-size: 0; margin-bottom: 10px; min-height: 68px; }
.chatMain .content-li .head{ float: left; padding: 0 17px 0 3px; }
.chatMain .content-li .head img{ width: 40px; height: 40px; border-radius: 50%; }
.chatMain .content-li .line{ margin-left: 60px; }
.chatMain .content-li .line .user{ line-height: 24px; font-size: 12px; white-space: nowrap; color: #999; }
.chatMain .content-li .line .user em{ padding-right: 15px; }
.chatMain .content-li .line .kop{ position: relative; display: inline-block; line-height: 22px; margin-top: 2px; padding: 8px 15px; background-color: #e2e2e2; border-radius: 3px; color: #333; word-break: break-all; font-size: 14px; }
.chatMain .content-li .line .kop::after { content: ''; position: absolute; left: -10px; top: 13px; width: 0; height: 0; border-style: solid dashed dashed; border-color: #e2e2e2 transparent transparent; overflow: hidden; border-width: 10px; }
.chatMain .content-li .line .kop img.faceImg{ vertical-align: middle; display: inline-block; margin: 0 4px; }
.chatMain .content-li .line .kop img.fileImg{ max-width: 100%; vertical-align: middle; }
.chatMain .content-li.receiveContent{ }
.chatMain .content-li.sendContent{ text-align: right; }
.chatMain .content-li.sendContent .head{ float: right; padding: 0 3px 0 17px; }
.chatMain .content-li.sendContent .line{ margin-right: 60px; }
.chatMain .content-li.sendContent .line .user em{ padding-left: 15px; padding-right: 0; }
.chatMain .content-li.sendContent .line .kop{ text-align: left; background-color: #5FB878; color: #fff; }
.chatMain .content-li.sendContent .line .kop::after { left: auto; right: -10px; border-top-color: #5FB878; }



.chatMain .tool{ background-color: #fff; background-color: rgba(255,255,255,.9); height: 38px; border-top: 1px solid #F1F1F1; padding: 0 8px; }
.chatMain .tool .icon{ width: 24px; height: 38px; float: left; margin: 0 10px; cursor: pointer; position: relative; }
.chatMain .tool .icon input[type="file"]{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; cursor: pointer; opacity:0; font-size: 0; }
.chatMain .tool .face{ background: url(../image/chat/1.png) center center no-repeat; }
.chatMain .tool .image{ background: url(../image/chat/2.png) center center no-repeat; }
.chatMain .tool .file{ background: url(../image/chat/3.png) center center no-repeat; }
.chatMain .tool .record{ float: right; font-size: 14px; color: #333; line-height: 38px; cursor: pointer; padding-left: 27px; background: url(../image/chat/5.png) left center no-repeat; margin: 0 10px; }
.chatMain .input{ background-color: #fff; background-color: rgba(255,255,255,.9); padding-left: 10px; }
.chatMain .input textarea { display: block; width: 100%; padding: 5px 0 0; height: 68px; line-height: 20px; border: none; overflow: auto; resize: none; background: 0 0; }
.chatMain .submit{ background-color: #fff; background-color: rgba(255,255,255,.9); height: 43px; position:relative; text-align: right; padding-right: 15px; padding-top: 3px; }
.chatMain .submit .icon{ display: inline-block; vertical-align: top; font-size: 14px; line-height: 32px; margin-left: 5px; padding: 0 20px; background-color: #5FB878; color: #fff; border-radius: 3px; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.chatMain .submit .icon:hover { background-color: #69BC80; }
.chatMain .submit .icon:active { background-color: #59B573; }
.chatMain .submit .close{ }
.chatMain .submit .send{ border-radius: 3px 0 0 3px; }
.chatMain .submit .sendChoose{ position: relative; width: 30px; height: 32px; margin-left: 0; padding: 0; border-left: 1px solid #85C998; border-radius: 0 3px 3px 0; }
.chatMain .submit .sendChoose::before{ display: inline-block; width: 0; height: 0; border-width: 6px; border-style: dashed; border-color: transparent; overflow: hidden; content:''; position: absolute; top: 14px; left: 9px; border-width: 6px; border-top-style: solid; border-top-color: #fff; }
.chatMain .submit .drop{ display: none; position: absolute; z-index: 100; border: 1px solid #E2E2E2; border-radius: 2px; background-color: #fff; box-shadow: 1px 1px 20px rgba(0,0,0,.1); left: auto; right: 15px; top: 36px; width: 180px; padding: 10px 0; text-align: left; }
.chatMain .submit .drop.show{ -webkit-animation-name: chat-upbit; animation-name: chat-upbit; }
@-webkit-keyframes chat-upbit{
	0%{transform: translate3d(0,30px,0);opacity: 0.3;}
	100%{ transform: translate3d(0,0,0);opacity: 1;}
}
@keyframes chat-upbit{
	0%{transform: translate3d(0,30px,0);opacity: 0.3;}
	100%{ transform: translate3d(0,0,0);opacity: 1;}
}
.chatMain .submit .dropLi{ padding-right: 15px; line-height: 28px; font-size: 12px; cursor: pointer; }
.chatMain .submit .dropLi span{ padding-left: 30px; }
.chatMain .submit .dropLi:hover { background-color: #eee; }
.chatMain .submit .dropLi.cur span{ display: block; background: url(../image/chat/6.png) 8px center no-repeat; }
.chatMain .faceChooseBox{ -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: .2s; animation-duration: .2s; position: absolute; width: 372px; padding: 10px; border: 1px solid #D9D9D9; background-color: #fff; box-shadow: 0 0 20px rgba(0,0,0,.2); bottom: 157px; left: 0; overflow: hidden; display: none; }
.chatMain .faceChooseBox.hide{ -webkit-animation-name: chat-faceOut; animation-name: chat-faceOut; display: block; }
@-webkit-keyframes chat-faceOut{
	0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
	30% {-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
	100% {opacity: 0;-webkit-transform: scale(.7);-ms-transform: scale(.7);transform: scale(.7);}
}
@keyframes chat-faceOut{
	0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}
	30% {-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}
	100% {opacity: 0;-webkit-transform: scale(.7);-ms-transform: scale(.7);transform: scale(.7);}
}
.chatMain .faceChooseBox.show{ -webkit-animation-name: chat-faceIn; animation-name: chat-faceIn; display: block; }
@-webkit-keyframes chat-faceIn{
	0% { opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); }
	100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}
@keyframes chat-faceIn{
	0% { opacity: 0; -webkit-transform: scale(.5); -ms-transform: scale(.5); transform: scale(.5); }
	100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
}
.chatMain .faceChooseBox .faceLi{ float: left; cursor: pointer; float: left; border: 1px solid #e8e8e8; height: 32px; width: 32px; overflow: hidden; margin: -1px 0 0 -1px; padding: 4px 2px; text-align: center; }
.chatMain .faceChooseBox .faceLi:hover { position: relative; z-index: 2; border: 1px solid #eb7350; background: #fff9ec; }
.chatMain .faceChooseBox .faceLi img{width: 100%}


.chatPage[state="max"]{ left: 0 !important; top: 0 !important; width: 100%; height: 100%; box-sizing: border-box; }
.chatPage[state="max"] .fp .min,.chatPage[state="max"] .fp .max{ display: none; }
.chatPage[state="max"] .fp .default{ display: block; }

.chatMinPage{ width: 152px; height: 40px; line-height: 40px; position: fixed; left: 0; top: 102%; z-index: 9999; background: #fff; border: 1px solid #D9D9D9; padding: 5px 15px; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3); }
.chatMinPage img{ width: 40px; height: 40px; border-radius: 50%; float: left; cursor: move; }
.chatMinPage span{ padding-left: 10px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chatMinPage .choose{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 665; cursor: pointer; }
.chatMinPage .drag{ width: 40px; height: 40px; border-radius: 50%; cursor: move; position:absolute; z-index: 666; left: 15px; top: 5px; }

.chatMinBox{ width: 152px; height: auto; line-height: 40px; position: fixed; left: 0; top: 102%; z-index: 9999; background: #fff; border: 1px solid #D9D9D9; padding: 5px 15px; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3); }
.chatMinBox img{ width: 40px; height: 40px; border-radius: 50%; float: left; cursor: move; }
.chatMinBox span{ padding-left: 10px; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.chatMinBox .choose{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 665; cursor: pointer; }
.chatMinBox .drag{ width: 40px; height: 40px; border-radius: 50%; cursor: move; position:absolute; z-index: 666; left: 15px; top: 5px; }
.chatMinBox .unread-message{display:none;position: absolute;top: 5px;left: 45px;width: 10px;height: 10px;border-radius:50%;background-color: #e63839;}



.chatRecord{ position: fixed; left: 0; top: 0; bottom: 0; background: #fff; border: 1px solid #B2B2B2; border: 1px solid rgba(0,0,0,.1); box-shadow: 1px 1px 5px rgba(0,0,0,.2); z-index: 9999; width: 452px; }
.chatRecord .top{ padding: 0 80px 0 20px; height: 42px; border-bottom: 1px solid #eee; overflow: hidden; background: #F8F8F8; position: relative; /*border-radius: 2px 2px 0 0; */}
.chatRecord .top .title{ line-height: 42px; font-size: 14px; color: #333; }
.chatRecord .top .title span{ padding: 0 6px; }
.chatRecord .fp { position: absolute; right: 15px; top: 0; z-index: 667; padding: 13px 0; }
.chatRecord .fp .fpIcon{ width: 16px; cursor: pointer; height: 16px; margin-left: 10px; float: left; position: relative; }
.chatRecord .fp .min::before { content: ''; position: absolute; width: 14px; height: 2px; left: 0; top: 50%; margin-top: -1px; background: #2E2D3C; cursor: pointer; _overflow: hidden; }
.chatRecord .fp .min:hover::before { background: #2D93CA; }
.chatRecord .fp .default { background: url(../image/chat/icon.png) no-repeat; background-position: -65px -40px; display: none; }
.chatRecord .fp .default:hover { background-position: -49px -40px; }
.chatRecord .fp .max { background: url(../image/chat/icon.png) no-repeat; background-position: -32px -40px; }
.chatRecord .fp .max:hover { background-position: -16px -40px; }
.chatRecord .fp .close { background: url(../image/chat/icon.png) no-repeat; background-position: 1px -40px; }
.chatRecord .fp .close:hover { opacity: .7; }
.chatRecord .chatDrag{ position:absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 666; cursor: move; }
.chatRecord .content{display:block;min-width: auto; background-color: #fff; background-color: rgba(255,255,255,.9); padding: 15px 15px 5px; overflow-x: hidden; overflow-y: auto; position: absolute; top: 43px; bottom: 50px; left: 0; right: 0; }
.chatRecord .content-li{ position:relative; font-size: 0; margin-bottom: 10px; min-height: 68px; }
.chatRecord .content-li .head{ float: left; padding: 0 17px 0 3px; }
.chatRecord .content-li .head img{ width: 40px; height: 40px; border-radius: 50%; }
.chatRecord .content-li .line{ margin-left: 60px; }
.chatRecord .content-li .line .user{ line-height: 24px; font-size: 12px; white-space: nowrap; color: #999; }
.chatRecord .content-li .line .user em{ padding-right: 15px; }
.chatRecord .content-li .line .kop{ position: relative; display: inline-block; line-height: 22px; margin-top: 2px; padding: 8px 15px; background-color: #e2e2e2; border-radius: 3px; color: #333; word-break: break-all; font-size: 14px; }
.chatRecord .content-li .line .kop::after { content: ''; position: absolute; left: -10px; top: 13px; width: 0; height: 0; border-style: solid dashed dashed; border-color: #e2e2e2 transparent transparent; overflow: hidden; border-width: 10px; }
.chatRecord .content-li .line .kop img.faceImg{ vertical-align: middle; display: inline-block; margin: 0 4px; }
.chatRecord .content-li .line .kop img.fileImg{ max-width: 100%; vertical-align: middle; }
.chatRecord .content-li.receiveContent{ }
.chatRecord .content-li.sendContent{ text-align: right; }
.chatRecord .content-li.sendContent .head{ float: right; padding: 0 3px 0 17px; }
.chatRecord .content-li.sendContent .line{ margin-right: 60px; }
.chatRecord .content-li.sendContent .line .user em{ padding-left: 15px; padding-right: 0; }
.chatRecord .content-li.sendContent .line .kop{ text-align: left; background-color: #5FB878; color: #fff; }
.chatRecord .content-li.sendContent .line .kop::after { left: auto; right: -10px; border-top-color: #5FB878; }
.chatRecord .page{ text-align: center; position: absolute; bottom: 0; height: 50px; left: 0; right: 0; }
.chatRecord .pageCenter{ display: inline-block; vertical-align: top; overflow: hidden; border: 1px solid #e2e2e2; border-radius: 2px; }
.chatRecord .pageCenter .toPage{ padding: 0 15px; height: 28px; line-height: 28px; margin: 0 -1px 0 0; background-color: #fff; color: #333; font-size: 12px; float: left; cursor: pointer; }
.chatRecord .pageCenter .toPage:hover { color: #009688; }
.chatRecord .pageCenter .toPage:not(:first-child){ border-left: 1px solid #e2e2e2; }
.chatRecord .pageCenter .toPage.notClick{ color: #d2d2d2; cursor: not-allowed; }
.chatRecord[state="max"]{ left: 0 !important; top: 0 !important; width: 100%; height: 100%; box-sizing: border-box; }
.chatRecord[state="max"] .fp .min,.chatRecord[state="max"] .fp .max{ display: none; }
.chatRecord[state="max"] .fp .default{ display: block; }


.chatMinRecord{ width: 162px; height: 42px; line-height: 42px; position: fixed; left: 0; top: 102%; z-index: 9999; background: #F8F8F8; border: 1px solid #D9D9D9; padding: 0 15px; border-radius: 2px; box-shadow: 1px 1px 50px rgba(0,0,0,.3); }
.chatMinRecord .title{ line-height: 42px; font-size: 14px; color: #333; padding-right: 54px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.chatMinRecord .title span{ padding: 0 6px; }
.chatMinRecord .fp { position: absolute; right: 15px; top: 0; z-index: 667; padding: 13px 0; }
.chatMinRecord .fp .fpIcon{ width: 16px; cursor: pointer; height: 16px; margin-left: 10px; float: left; position: relative; }
.chatMinRecord .fp .max { background: url(../image/chat/icon.png) no-repeat; background-position: -32px -40px; }
.chatMinRecord .fp .max:hover { background-position: -16px -40px; }
.chatMinRecord .fp .close { background: url(../image/chat/icon.png) no-repeat; background-position: 1px -40px; }
.chatMinRecord .fp .close:hover { opacity: .7; }
.chatMinRecord .drag{ height: 42px; cursor: move; position:absolute; z-index: 666; left: 0; top: 0; right: 0; }