.chat-scroll::-webkit-scrollbar{width:4px}
.chat-scroll::-webkit-scrollbar-thumb{border-radius:2px;background:rgba(0,0,0,.1)}
.chat-scroll::-webkit-scrollbar-thumb:window-inactive{background:rgba(0,0,0,.1)}
.chat-scroll::-webkit-scrollbar-thumb:vertical:hover{background-color:rgba(0,0,0,.2)}
.chat-scroll::-webkit-scrollbar-thumb:vertical:active{background-color:rgba(0,0,0,.5)}
.chat-smooth{-moz-transition: ease-in-out 0.5s;-webkit-transition: ease-in-out 0.5s;-o-transition: ease-in-out 0.5s;-ms-transition: ease-in-out 0.5s;transition: ease-in-out 0.5s}
.chat *{margin:0;padding:0;font-size:100%;border:0;vertical-align:baseline;line-height: unset;box-sizing: border-box;}
.chat {font-size:16px;color:#333;font-family:Penrose,"PingFang SC","Hiragino Sans GB",Tahoma,Arial,"Lantinghei SC","Microsoft YaHei",simsun,sans-serif;}
.chat-alone {background:#ececec;margin:0;}
.chat a{color:#07c160;text-decoration:none;-webkit-transition:background-color .15s linear,color .15s linear;-moz-transition:background-color .15s linear,color .15s linear;-o-transition:background-color .15s linear,color .15s linear;-ms-transition:background-color .15s linear,color .15s linear;transition:background-color .15s linear,color .15s linear}
.chat a:hover{color:#07c160;text-decoration:none}
.chat i{font-style:normal}
.chat li,.chat-textmenu li{list-style: none;}
.chat-avatar{pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}
.chat img{max-width:100%;height:auto;border:0;}
@font-face{font-family:iconfont;src:url(fonts/iconfont.eot);src:url(fonts/iconfont.eot?#iefix) format('embedded-opentype'),url(fonts/iconfont.woff2) format('woff2'),url(fonts/iconfont.woff) format('woff'),url(fonts/iconfont.ttf) format('truetype'),url(fonts/iconfont.svg#iconfont) format('svg');font-weight:400;font-style:normal}
.chat{z-index:5555;width:800px;height:600px;position:fixed;bottom:10px;right:10px;max-width:calc(100% - 20px);max-height: calc(100% - 55px);box-shadow: 0 0 5px 3px #00000010;}
.chat.mousedown{-moz-transition: ease-in-out 0.0001s;-webkit-transition: ease-in-out 0.0001s;-o-transition: ease-in-out 0.0001s;-ms-transition: ease-in-out 0.0001s;transition: ease-in-out 0.0001s}
.chat.mousedown .chatbox{opacity:0.8;}
.chat-hide{box-shadow:none;}
.chat-hide .chatbox{overflow:hidden;}
.chat-toggle span:first-child{display:none;}
.chat-toggle span:last-child{display:inline-block;}
.chat-size{cursor:nw-resize;position:absolute;height: 20px;width: 20px;top: -5px;left: -5px;}
.chat-hide .chat-size,.chat-alone .chat-size{display:none;}
.chat-hide .chat-toggle span:last-child{display:none;}
.chat-hide .chat-toggle span:first-child{display:inline-block;}
.chat-alone .chat{width:1000px!important;height:900px!important;max-width:100%;max-height:100%; position:relative;left:50%;-webkit-transform:translate(-50%,0);transform:translate(-50%,0);box-shadow:none;}
.chat-alone .chat-toggle{display:none;}
.chat-toggle{position: absolute;top: -35px;right: 0;background-color: #07c160;color: #fff;padding: 5px 30px;cursor: pointer;}
.chatbox{width:100%;height:100%;margin:0 auto;background:#fff;background-size: 10px;background-position: 2px 2px;background-image:url(icon/tl.svg);background-repeat:no-repeat;position:relative;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);zoom:1}
.chat-alone .chatbox{height:80%;background-image:none;}
.chatbox::after{content:"";display:block;clear:both}
.chatside{width:30%;height:100%;float:left;display:inline;font-size:0;border:1px solid #e6e6e6;box-sizing:border-box;position:relative;overflow: hidden;}
.chatsidehead{height:60px;padding:0 12px;line-height:60px;position:relative;zoom:1;overflow: hidden;}
.chatsidehead::after{content:"";display:block;clear:both}
.chatsidehead .chat-name{float:revert;display:inline;font-size:18px;color:#333}
.chatsidehead::before{content:"";width:100%;height:1px;background:#e6e6e6;position:absolute;bottom:0;left:0}
.chatsearch{padding:15px 12px;border-bottom:1px solid #e6e6e6;box-sizing:border-box}
.chatsearch form{position:relative}
.chatsearch .schtxt{width:100%;height:30px;padding:0 10px 0 32px;font-size:14px;color:#333;line-height:30px;border:1px solid #e6e6e6;border-radius:15px;box-sizing:border-box;background:#f5f5f5}
.chatsearch .schtxt:focus{background:#fff;box-shadow:none;outline: 0;}
.chatsearch .schbtn{width:28px;height:28px;padding:0;line-height:28px;border:0;outline:0;border-radius:50%;cursor:text;background:0 0;position:absolute;top:1px;left:5px}
.chatsearch .schbtn::after{content:"\e6e1";font-size:26px;color:#888;font-family:iconfont}
.chatfriend{height:calc(100% - 125px);overflow:auto}
.chatfriend ul{position: relative;}
.chatfriend ul:empty::after{content:'暂时没有会话';display: inline-block;color: #ccc;font-size: 16px;text-align: center;width: 100%;padding: 20px 10px;box-sizing: border-box;}
.chatfriend li{border-left:solid 3px #fff;padding:12px;font-size:0;cursor:pointer;overflow:hidden;position:relative}
.chatfriend li.on{border-color:#9eea6a!important;background:#f0f0f0}
@media screen and (min-width:600px){
    .chatfriend li:hover{background:#f0f0f0;border-color:#f0f0f0;}
    .chatfriend li:hover .closechat{display:inline;}
    .chatfriend li:hover .chattime{display:none;}
    .chatfriend li:hover .friendname{color:#07c160}
    .chatfriend li:hover::after{display:none}
}
.chatfriend li.on .friendname{color:#07c160}
.chatfriend li.on::after{display:none}
.chatbody{background-image:url(images/welcome.png);background-repeat:no-repeat;background-position:center;background-size: 400px;width:70%;height:100%;float:right;display:inline;box-sizing:border-box;background-color: #f6f6f7;}
.chatmain{display:none;height: 100%;background-color: #fff;}
.chathead{height:60px;padding:0 20px;line-height:60px;border:1px solid #e6e6e6;border-bottom:0;border-left:0;box-sizing:border-box}
.chathead h2{font-size:16px;color:#444;}
.chathead h2 em{padding:0 3px;font-size:12px;color:#ccc;font-style:normal;line-height:16px;border:1px solid #ccc;border-radius:3px;display:inline-block;vertical-align:text-bottom}
.chathead h2 em.on{color:#07c160;border-color:#07c160}
.chathead h2 em:empty{display:none;}
.chathead .chat-subinfo{line-height: 22px;font-size: 14px;color: #999;position: absolute;bottom: 0;}
.chatoppo{position:relative}
.chatmore{width:30px;height:30px;text-align:center;line-height:30px;border:1px solid transparent;border-radius:5px;cursor:pointer;position:absolute;top:14px;right:0}
.chatmore::before{content:"\e6a9";font-size:22px;color:#888;font-family:iconfont}
.chatcon{position: relative;height:calc(100% - 60px);border:1px solid #e6e6e6;border-left:0;box-sizing:border-box;display: flex;flex-direction: column;overflow:hidden;}

.msgmenu{width:250px;height:100%;border-left:1px solid #e6e6e6;background:#fff;position:absolute;overflow-y: auto;top:-1px;right:-251px;z-index:9;-webkit-transition:right .3s ease 0s;-o-transition:right .3s ease 0s;transition:right .3s ease 0s}
.msgmenu-show{right:0;}
.msgmenulist{padding:20px 15px 10px;border-bottom:1px solid #e6e6e6}
.msgmenulist li{margin-bottom:10px;zoom:1;}
.msgmenulist li::after{content:"";display:block;clear:both}
.msgmenulist li label{font-size:14px}
.msgmenuset{text-align:center}
.msgmenuset a{font-size:15px;color:#07c160;line-height:50px;display:block}
.msguserlist{border-bottom:1px solid #f1f1f1}
.msguserlist ul{padding:10px 10px 15px;font-size:0;max-height: 220px;overflow: hidden;}
.msguserlist ul:empty::before{content:'loading';    display: inline-block;width: 100%;color: #999;font-size: 14px;text-align: center;}
.msguserlist ul.person-full{max-height:100%}
.msguserlist li{width:25%;display:inline-block;vertical-align:top;position:relative;}
.msguserlist .msguserlistmore{width:100%;margin-bottom:10px;text-align:center;display:none;}
.msguserlist .msguserlistmore a{font-size:14px;color:#999}
.msguserlist .msguserlistmore a::after{content:"\e69b";font-size:18px;color:#999;font-family:iconfont;display:inline-block;vertical-align:top}
.msguserlist .msguserlistmore a.on::after{content:"\e6a5"}
.msguserlistimg{padding:10px 10px 5px;text-align:center}
.msguserlistimg a{width:36px;height:36px;display:block}
.msguserlistimg img{border-radius:2px;display:block}
.msguserlistname{text-align:center}
.msguserlistname a{font-size:12px;color:#333;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display:block}
.adduserimg{width:36px;height:36px;text-align:center;line-height:36px;border:1px solid #e6e6e6;border-radius:2px;box-sizing:border-box;display:inline-block;vertical-align:top}
.adduserimg::before{content:"\e6a2";font-size:26px;color:#888;font-family:iconfont}
.adduserimg:hover{border-color:#ccc}
.chat-checklabel{cursor:pointer;width:40px;height:20px;float:right;display:inline;margin-top:2px;position:relative;display:inline-block;vertical-align:top}
.chat-checkinput{display:none}
.chat-checkbtn{border-radius:11px;cursor:pointer;background:#bbb;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;-webkit-transition:.2s;transition:.2s}
.chat-checkbtn.chat-check-disabled{cursor:no-drop;background:#eee}
.chat-checkinput:checked+.chat-checkbtn{background:#07c160}
.chat-checkbtn::after{content:"";width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;-webkit-transition:.2s;transition:.2s}
.chat-checkinput:checked+.chat-checkbtn::after{-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
.chat-menus-info{margin: 10px 0;padding: 0 15px;font-size: 14px;;}
.chat-menus-info .chat-menu-title{}
.chat-menus-info .chat-menu-content{margin-top: 5px;color: #777;}
.msgmenuset .chat-quit-group-btn{color:red;}
.chat-group-admin::after{content:'';position:absolute;top:2px;right:2px;width:20px;height:20px;background-image:url(icon/admin.svg);background-repeat:no-repeat;background-position:center;background-size:25px;    background-color: #fff;border-radius: 50%;}

.chatmsg{flex:auto;padding:20px;overflow:auto;box-sizing:border-box;background:#fafafa;position:relative;overflow-x: hidden;}
.chatmsg.group .you .msggravatar{margin-top:8px}
.chatmsg.group .you p{display:block}
.chat-logo{height:60px;float:left;display:inline;margin-right:5px;overflow:hidden;position:relative;z-index:99}
.chat-logo span{width:100%;height:60px;display:table-cell;vertical-align:middle;transition:all ease .3s}
.chat-logo span img{height:28px;vertical-align:middle;border-radius: 50%;}
.chat-logout{width:28px;height:28px;float:right;display:inline;margin-top:16px;font-size:16px;color:#fff;text-align:center;line-height:28px;border-radius:50%;background:#eee}
.chat-logout::after{content:"\e634";font-size:22px;color:#888;font-family:iconfont}
.chat-logout:hover{background:#07c160}
.chat-logout:hover::after{color:#fff}
.offline img{-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;}
.friendimg{width:40px;float:left;display:inline;position:relative}
.friendimg.new::before{content:"";width:8px;height:8px;border:2px solid #fff;border-radius:6px;background:#07c160;position:absolute;top:0;right:0;z-index:1}
.friendimg img{width:40px;height:40px;max-width: initial;border-radius:50%}
.friendinfo{position:relative;padding-left:52px;line-height:20px;zoom:1}
.friendinfo::after{content:"";display:block;clear:both}
.friendinfo .chattime{position: absolute;right:0;top:20px;font-size:13px;color:#888}
.friendinfo p{width:80%;font-size:14px;color:#888;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;display: block;}
.friendname{width:100%;float:left;display:inline;font-size:14px;color:#333;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.newcount,.closechat{height:16px;display:inline-block;font-size:12px;color:#fff;text-align:center;line-height:16px;border-radius:10px;background:#07c160;padding: 0 4px;margin-left: 5px;}
.closechat {position:absolute;background: #bbb;display: none;width:16px;padding:0;float:right;right:0;top:0;}
.closechat::before {content: "\e69f";font-size: 16px;color: #fff;font-family: iconfont;display: inline-block;vertical-align: top;}
.newcount:empty{display:none;}
.msgmore,.msgtips{padding:5px 0;font-size:13px;color:#999;text-align:center;cursor:default}
.msgmore span{padding:0 20px;position:relative}
.msgmore span::after,.msgmore span::before{content:"";width:100px;height:1px;background:#dfdfdf;position:absolute;top:9px;right:100%}
.msgmore span::before{left:100%}
.msgtips{padding:10px 0;color:#fff}
.msgtips span{padding:0 5px;line-height:19px;border-radius:2px;background:#dadada;display:inline-block}
.msgtime + .msgtime{display:none;}
.msggravatar{width:34px;height:34px;float:left;display:inline;margin:4px 10px 0 0}
.msggravatar img{width:34px;height:34px;border-radius:50%;}
.you .msggravatar img{cursor:pointer;}
.msgitem{font-size:13px;line-height:28px;overflow:hidden}
.msgitem.me{text-align:right}
.msgitem.me .msggravatar{float:right;display:inline;margin:4px 0 0 10px}
.msgitem.me .msgcon{float:right;border-color:#9eea6a;background:#9eea6a;text-align:left;}
.msgitem.me .msgcon::before{border-right-color:transparent;border-left-color:#9eea6a;right:-10px;left:auto}
.msgitem.me .msgcon::after{display:none}
.msgitem p{font-size:12px;color:#b2b2b2;line-height:22px;display:none}
.msgitem:last-child .msgcon{margin:0}
.msgcon{max-width:70%;float:left;display:inline;margin-bottom:15px;padding:10px;font-size:14px;border:1px solid #ededed;border-radius:4px;box-sizing:border-box;background:#fff;position:relative;line-height: 20px;word-break: break-all;}
.msgcon img{max-width:174px;display:inline-block;vertical-align:top}
.msgcon a{color:#2440b3;}
.msgcon a:hover{color:#2440b3;opacity:1;text-decoration:underline;}
.msgcon::after,.msgcon::before{content:"";width:0;height:0;border:5px solid transparent;position:absolute;top:15px}
.msgcon::before{border-right-color:#ccc;left:-10px}
.msgcon::after{border-right-color:#fff;left:-10px}
.chat-img-box{display:inline-block;position:relative;}
.msgitem[data-id^=imgsending] .chat-img-box::after,.chat-image-loading::after {content:'';position: absolute;top: 0;left: 0;background-image: url(images/loading.svg);position: absolute;width: 100%;height: 100%;display: inline-block;background-position: center;background-size: 80px;background-repeat: no-repeat;}
.msgform{position: relative;height:25%;border-top:1px solid #ececec;box-sizing:border-box;width: 100%;background-color:#fff;}
.msgform .msgform-resize{display:inline-block;width:100%;height:6px;position:absolute;top:-3px;cursor:n-resize;}
.msgform .msgform-resize.onmove{background-color:#00000010;}
.msgformbar{height:28px;margin:5px 0;padding:0 20px;line-height:30px}
.msgformbar ul{margin-left:-3px;font-size:0}
.msgformbar li{margin-left:3px;position:relative;display:inline-block;vertical-align:top}
.chat-disabledSpeak .msgformbar li::after{content:'';position: absolute;;width:100%;height:100%;top:0;left:0;cursor: no-drop;}
.msgformbar li a{height:28px;display:block}
.msgformbar li a::before{font-size:28px;color:#888;font-family:iconfont}
.msgformbar li a.on::before,.msgformbar li a:hover::before{color:#07c160}
.msgformarea {height: 100%;padding-bottom: 90px;}
.msgformsend{width:100%;padding:0 20px;box-sizing:border-box;position:absolute;right:0;bottom:10px;z-index:1;zoom:1;text-align:right;}
.msgformsend::after{content:"";display:block;clear:both}
.msgformsend button{width:80px;height:30px;display:inline;vertical-align:middle;font-size:14px;color:#fff;text-align:center;line-height:30px;border:0;outline:0;cursor:pointer;background:#07c160;display:inline-block}
.msgformsend button+button{margin-left:5px;}
.msgformsend .submitMessage::after{content:"\e856";margin-left:3px;font-size:18px;color:#fff;font-family:iconfont;display:inline-block;vertical-align:top}
.msgformsend a:disabled,.msgformsend button:disabled{background:#ccc}
.msgformsend .chat-quickMessage{position:relative;display: inline-block;background: #fff;border:solid 1px #fff;height: 30px;vertical-align: middle;margin-right: 10px;line-height: 30px;color: #999;font-size: 13px;padding: 0 10px;}
.msgformsend .chat-quickMessage ul{z-index:-1;display:none;right:-1px;bottom: calc(100% - 1px);padding: 1px;position: absolute;background-color: #fff;border:solid 1px #eee;text-align: left;border-radius: 2px;}
.msgformsend .chat-quickMessage:hover ul{display:inline-block;box-shadow: 0 0 5px 0 #00000030;}
.msgformsend .chat-quickMessage:hover{border-color:#eee;border-top-color:#fff;box-shadow: 0 3px 3px 0 #00000030;}
.msgformsend .chat-quickMessage li {position: relative;padding: 0 10px;border-bottom: solid 1px #eee;word-break: keep-all;padding-right:35px;color:#444;white-space: nowrap;}
.msgformsend .chat-quickMessage li:last-child{border-bottom:none;}
.msgformsend .chat-quickMessage li:hover{background-color:#07c160;color:#fff;}
.msgformsend .chat-quickMessage li span{position: absolute;right: 1px;height: 100%;padding:0 5px;}
.msgformsend .chat-quickMessage li span::after{content: "\e856";font-size: 18px;color: #07c160;font-family: iconfont;}
.msgformsend .chat-quickMessage li:hover span::after{color:#fff;}
.msgwrite{font-family: 'zblog';width:100%;height:100%;padding:0 20px;font-size:14px;border:0;outline:0;box-sizing:border-box;background:0 0;resize:none;color:#333;}
.msgwrite:focus{border:none;box-shadow:none;}
.chat-pltex{font-size:14px;margin-right:5px;width: auto;padding: 0 5px;}
.msgcount{float:left;display:inline;margin-top:5px;font-size:14px;color:#ccc;line-height:20px}
.msgcount .warn{color:red}
.msgcount .warn::before{content:"\e6a3";font-size:22px;font-family:iconfont;vertical-align:top}
.icon-emoji::before{content:"\ea56"}
.icon-cut::before{content:"\e61c"}
.icon-img::before{content:"\e6de"}
.icon-upload::before{content:"\e619"}
.icon-audio::before{content:"\e6cf"}
.icon-video::before{content:"\e6dd"}
.icon-pay::before{content:"\e617"}
.icon-mail::before{content:"\e678"}
.icon-address::before{content:"\e6a7"}
.icon-user::before{content:"\e603"}
.icon-add::before{content:"\e698"}
.emojibox{width:100%;padding: 10px;padding-right: 0;border:1px solid #eee;box-sizing:border-box;background:#fff;position:absolute;bottom:100%;left:0;display:none}
.emojibox ul{overflow:auto;max-height: 200px;;zoom:1}
.emojibox ul::after{content:"";display:block;clear:both}
.emojibox li{text-align:center;overflow:hidden;position:relative;display:inline-block;width: 30px;height: 30px;cursor:pointer;}
.emojibox li:hover{background:#e7e7e7}
.emojibox li img{margin-top:3px;}

.chat-popbox{z-index:5557;width:420px;text-align:center;border-radius:4px;background:#fff;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}
.chat-popmask{z-index:5556;content:"";width:100%;height:100%;background:rgba(0,0,0,.3);position:fixed;top:0;right:0;bottom:0;left:0;}
.chat-poptitle{padding:30px 0;font-size:20px;color:#333;line-height:20px;position:relative}
.chat-popcon{margin:0 20px 20px;font-size:15px;color:#999;line-height:26px}
.chat-popcon em{font-style:normal;color:#07c160}
.chat-popbtn{padding-bottom:30px;font-size:0}
.chat-popbtn span{width:100px;height:40px;font-size:14px;color:#000;line-height:40px;border:1px solid #e8e8e8;border-radius:20px;cursor:pointer;background:#fff;display:inline-block;vertical-align:top}
.chat-popbtn span.chat-popbtn-act{color:#fff;border-color:#07c160;background:#07c160}
.chat-popbtn span + span {margin-left:30px;}
.chat-image-review{width: 100%;height: 100%;background:#00000040;transform:none;left:0;top:0;}
.chat-image-review::after{content: '';display: inline-block;height: 100%;vertical-align: middle;}
.chat-image-review img{display:none;vertical-align: middle;padding: 8px;background-color: #00000050;border-radius: 10px;max-height: 98%;max-width:98%;cursor:pointer;box-sizing:border-box;}
.chat-image-review.chat-image-error::after{background-image:url('icon/image-error.svg');}

.chat-textmenu{position:fixed;z-index:5556;min-width:150px;font-size:14px;}
.chat-textmenu a{display:inline-block;padding:5px 15px 5px 35px;color:#333;width:100%;cursor:default;box-sizing: border-box;text-decoration:none;}
.chat-textmenu li:hover > a:not(.chat-menu-disable){background-color:#e1e1e1;color:#333;}
.chat-textmenu li ul{display:none;}
.chat-textmenu li{position:relative;}
.chat-textmenu li:hover ul{display:block;position:absolute;right:-100%;top:0;width: 100%;background-color: #fff;}
.chat-textmenu ul{margin:0;background-color:#fff;box-shadow: 2px 2px 3px 0px rgb(0 0 0 / 20%);padding:5px 1px;border:solid 1px #ddd;}
.chat-textmenu [class^=chat-icon-]{background-repeat:no-repeat;background-size:16px;background-position:center;background-position-x: 10px;}
.chat-textmenu .chat-icon-search{background-image:url(icon/search.svg);}
.chat-textmenu .chat-icon-baidu{background-image:url(icon/baidu.svg);}
.chat-textmenu .chat-icon-bing{background-image:url(icon/bing.svg);}
.chat-textmenu .chat-icon-back{background-image:url(icon/back.svg);}
.chat-textmenu .chat-icon-bz{background-image:url(icon/bz.svg);}
.chat-textmenu .chat-icon-tr{background-image:url(icon/tr.svg);}
.chat-textmenu .chat-menu-disable{color:#c7c7c7;}
.chat-textmenu .chat-menu-disable+ul{display:none!important;}
.chat-textmenu .chat-menu-disable.chat-icon-back{background-image:url(icon/back-gary.svg);}
.chat-textmenu .chat-menu-disable.chat-icon-bz{background-image:url(icon/bz-gary.svg);}
.chat-textmenu .chat-menu-disable.chat-icon-tr{background-image:url(icon/tr-gary.svg);}
.chat-textmenu .chat-menu-sub::after{content: "\e6a6";font-family:iconfont;position: absolute;right: 0;top: 5px;font-size: 18px;color: #888;}

.chat-copy-input{position:absolute;left:-100000px;}

.chat-alone-service .chatside{display:none;}
.chat-alone-service .chatbody{width:100%;}

@-webkit-keyframes float{0%{-webkit-transform:translatey(10px)}50%{-webkit-transform:translatey(-10px)}100%{-webkit-transform:translatey(10px)}}
@keyframes float{0%{transform:translatey(10px)}50%{transform:translatey(-10px)}100%{transform:translatey(10px)}}
.chat-with-logo.chat-hide{height:0!important;}
.chat-with-logo .chat-toggle{background-image: url(icon/down.svg);width: 40px;height: 40px;background-size: 25px;font-size: 0;background-repeat: no-repeat;background-position: center;top: -45px;background-color: initial;right: 8px;animation: float 3s infinite;-webkit-transition: top 1s ease, opacity 1s ease;transition: top 1s ease, opacity 1s ease;border-radius: 5px;}
.chat-with-logo.chat-hide .chat-toggle{background-image: url(images/welcome.png);width: 140px;height: 80px;background-size: 100px;top: -80px;}
.chat-with-logo{max-height:calc(100% - 85px);}

.chat-insidebar.chat-hide{width:55px!important;}
.chat-insidebar .chat-toggle{top: 0;left: -30px;padding: 10px 5px;width: 30px;text-align: center;}
.chat-insidebar.chat-hide .chatbody,.chat-insidebar.chat-hide .msgmenu{width:0;overflow: hidden;}
.chat-insidebar.chat-hide .chatside{width:100%;}
.chat-insidebar.chat-hide .chatsearch,.chat-insidebar.chat-hide .chat-name,.chat-insidebar.chat-hide .friendinfo{display:none;}
.chat-insidebar.chat-hide .chatfriend{height: 100%;max-height: calc(100% - 60px);overflow: hidden;}
.chat-insidebar.chat-hide .chat-logo{width: 100%;}
.chat-insidebar.chat-hide .chat-logo span{display:block;text-align:center;}
.chat-insidebar.chat-hide .friendimg{width:100%;text-align:center;}

.chat-type-box:not(.chat-hide){width: 100%!important;height: 100%!important;max-width: 100%;max-height: 100%;position: fixed;top: 0;left: 0;bottom: 0;background-color: #00000080;box-shadow:none;} 
.chat-type-box:not(.chat-hide) .chatbox{background-image:none;width: 1000px;height: 700px;max-width: 100%;max-height: 100%;margin: auto;left: 0;right: 0;top: 0;bottom: 0;position: absolute;-webkit-transform: none;transform: none;}
.chat-type-box.chat-hide{height:0!important;}
.chat-type-box.chat-hide .chatbox{height:0;width:0;}


.chat-defalt.chat-hide{height:0!important;}

.chat-max {overflow: hidden;height: 100%;width: 100%;position: absolute;}
.chat-max .chat{width:100%!important;height:100%!important;bottom:0;}
.chat-max .chatbox{height:100%;}
@media screen and (max-width:600px) {
    .chat-name,.chatside .chatsearch,.friendinfo .chattime{display:none!important}
    .friendimg.new::before{display:none;}
    .chatfriend li{padding:7px;}
    .chatside{width:60px;text-align:center}
    .chat-logo,.chatbody{width:100%;float:unset}
    .chat-logo span{display:block;text-align:center;}
    .friendimg{width:100%}
    .chatmain{padding-left:60px}
    .newcount{position:absolute;left:25px;z-index:5}
    .chatbox{background-image:none}
    .msgform{min-height:145px;}
    .chat-alone .chatbox{height:100%;}
    .chat-alone .chat{position: absolute;bottom: 0;}
    .chat-alone-service .chatmain {padding-left: 0;}
    
    .chat-insidebar:not(.chat-hide) .chat-toggle{width: 100px;padding: 2px;top: -28px;left: 1px;}
    .chat-insidebar.chat-hide {width: 0!important;}
    
    .chat-type-box:not(.chat-hide){top: auto;max-height: calc(100% - 50px);}
    .chatfriend {height:100%;max-height: calc(100% - 60px);}
}