.kefu { position: fixed; right: 10px; bottom: 70px; z-index: 10; background: #1c1c1c; border: 1px solid #282828; }

.kefu-item { border-top: 1px solid #282828; position: relative; }

.kefu-item:first-of-type { border-top: none; }

.kefu-item .icon { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: #444444; }

.kefu-item .icon img { width: 60%; opacity: 0.4; transition: all .2s; }

.kefu-item:hover .icon { background: #303030; }

.kefu-item:hover .icon img { opacity: 1; }

.kefu-item:hover .kefu-pop { visibility: visible; transform: translateX(0); }

.kefu-pop { position: absolute; right: -1px; bottom: 100%; background: #fff; transform: translateX(100%); transition: all .2s; overflow: hidden; visibility: hidden; }

.kefu-pop__head { min-height: 40px; padding: 10px 10px 10px 20px; background: #444444; display: flex; justify-content: space-between; align-items: center; }

.kefu-pop__head .tit { color: #fff; }

.kefu-pop__head .close { cursor: pointer; transition: all .3s; width: 26px; }

.kefu-pop__head .close:hover { transform: rotate(-90deg); }

.kefu-pop__body { padding: 20px; color: #333; }

.kefu-pop__body .sub-tit { margin-bottom: 10px; }

.kefu-pop__body .sub-tit img { width: 20px; vertical-align: middle; margin-right: 10px; }

.kefu-pop__body .tel { font-size: 16px; display: block; white-space: nowrap; }

.kefu-pop.show { visibility: visible; transform: translateX(0); }

@media (max-width: 900px) { .kefu-item .icon { width: 40px; height: 40px; } }