.float-kefu { position: fixed; right: 1%; z-index: 2; bottom: 10%; --float-kefu-bg:#ffffff; --item-width:60px; --gutter:5px; }
.float-kefu .item {  width: var(--item-width); position: relative; }
.float-kefu .item .item-wrap{border: 1px solid #e0e0e0; border-bottom: none; }
.float-kefu .item:first-child .item-wrap{margin-bottom: 8px;border-bottom: 1px solid #e0e0e0;}
.float-kefu .item:last-child .item-wrap{border-bottom: 1px solid #e0e0e0;}
.float-kefu .item .item-wrap .item-icon { padding-top: 10px;padding-bottom: 5px;text-align: center; width: auto; position: relative; background-color: var(--float-kefu-bg); -webkit-transition: all .3s; -moz-transition: all .3s; -ms-transition: all .3s; -o-transition: all .3s; transition: all .3s; }
.float-kefu .item .item-wrap .item-name{transition: color .5s; font-size: 12px;  line-height: 2; }
.float-kefu .item .item-wrap .item-icon svg { width: 26px; height: auto; margin: 0 auto; transition: all .5s}
.float-kefu .item .item-wrap .item-icon svg path { fill: #999999; }
.float-kefu .item .item-wrap .item-icon.goTop { cursor: pointer; }
.float-kefu .item .overlay { visibility: hidden; position: absolute; top: 0; right: 60px; }
.float-kefu .item .overlay .overlay-wrap { -webkit-transition: transform .3s,opacity .5s; -moz-transition: transform .3s,opacity .5s; -ms-transition: transform .3s,opacity .5s; -o-transition: transform .3s,opacity .5s; transition: transform .3s,opacity .5s; -webkit-transition-delay: .2s; -moz-transition-delay: .2s; -ms-transition-delay: .2s; -o-transition-delay: .2s; transition-delay: .2s; position: relative; background-color: #ffffff; padding: 10px; border-radius: 5px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); opacity: 0; visibility: hidden; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); }
.float-kefu .item .overlay .overlay-wrap .qrcode-img { width: 100px; height: 100px; }
.float-kefu .item .overlay .overlay-wrap .qrcode-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.float-kefu .item .overlay .overlay-wrap .qrcode-name { line-height: 24px; text-align: center; }
.float-kefu .item .overlay .overlay-wrap .tel { font-size: 18px; width: 150px; text-align: center; color: var(--theme-color); }
.float-kefu .item:hover .item-name{ color:var(--theme-color)  }
.float-kefu .item:hover .item-icon svg  path{ fill:var(--theme-color)  }
.float-kefu .item:hover .overlay { visibility: visible; padding-right: 5px; }
.float-kefu .item:hover .overlay .overlay-wrap { visibility: visible; opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }