.online-service{position:fixed;top:208px;right:10px;z-index:999999;display:block}
.online-service .item{position:relative;margin-bottom:10px}
.online-service .item .item-icon{display:block;cursor:pointer;background:#fff url(../images/online_service.png) no-repeat;width:44px;height:44px;border-radius:4px;box-sizing:border-box;box-shadow:0 0 9px 0 rgba(0,0,0,.1)}
.online-service .item .item-icon.chat{background-position:left 0}
.online-service .item .item-icon.qq{background-position:left -44px}
.online-service .item .item-icon.weixin{background-position:left -88px}
.online-service .item .item-icon.tel{background-position:left -132px}
.online-service .item.active .item-icon{background-color:#0072c6}
.online-service .item.active .item-icon.chat{background-position:right 0}
.online-service .item.active .item-icon.qq{background-position:right -44px}
.online-service .item.active .item-icon.weixin{background-position:right -88px}
.online-service .item.active .item-icon.tel{background-position:right -132px}
.online-service .item .pop-box{display:none;position:absolute;right:100%;top:0}
.online-service .item .item-box{background-color:#fff;margin-right:10px;padding:10px;border-radius:2px;box-sizing:border-box;box-shadow:0 0 9px 0 rgba(0,0,0,.1)}
.online-service .item .qq-box{padding:10px 20px 0 10px}
.online-service .item .qq-box .qq{display:block;position:relative;line-height:34px;padding-left:44px;white-space:nowrap;margin-bottom:10px;color:#555}
.online-service .item .qq-box .qq .qq-icon{display:inline-block;width:34px;height:34px;background:#f1f1f3 url(../images/online_service.png) no-repeat 4px -208px;transition:all .2s;border-radius:50%;position:absolute;left:0;top:0}
.online-service .item .qq-box .qq:hover .qq-icon{background-position:4px -218px}
.online-service .item .weixin-box img{width:120px}
.online-service .item .weixin-box p{text-align:center}
.online-service .item .tel-box{white-space:nowrap;font-size:16px;padding:0 10px}
.online-service .go-top{display:none}
.online-service .go-top .go-btn{display:block;background:#fff url(../images/online_service.png) no-repeat left -176px;border-radius:4px;box-sizing:border-box;box-shadow:0 0 9px 0 rgba(0,0,0,.1);width:44px;height:44px}
.online-service .go-top .go-btn:hover{background-position:right -176px;background-color:#0072c6}
.online-service .chat-box{position:fixed;left:20px;bottom:10px;width:240px;background:#fff;border-radius:5px;box-shadow:0 4px 20px #666;display:none}
.online-service .chat-box .chat-header{font-size:14px;border-top-left-radius:5px;border-top-right-radius:5px;background:#73a0ff;padding:0 10px}
.online-service .chat-box .chat-header span{color:#fff;line-height:40px}
.online-service .chat-box .chat-header span.chat-close{float:right}
.online-service .chat-box .chat-body{font-size:12px}
.online-service .chat-box .chat-body div{width:auto;margin:10px;border:1px solid #999;border-radius:3px;padding-left:10px}
.online-service .chat-box .chat-body div.fa{width:220px;color:#999;margin-top:0}
.online-service .chat-box .chat-body textarea{font-size:12px;width:220px;margin:10px;height:80px;padding:10px 12px;overflow:hidden;border:1px solid #999;border-radius:3px}
.online-service .chat-box .chat-body div input{font-size:12px;width:190px;height:30px;padding-left:10px;margin-bottom:1px}
.online-service .chat-box .chat-footer{width:100%;height:50px;padding:10px;color:#fff}
.online-service .chat-box .chat-footer input[type=button]{float:right;width:50px;line-height:30px;border-radius:3px;color:#fff;background:#73a0ff}
