.online_kefu { position: fixed; bottom: 20vh; right: 2%; z-index: 9; }
.online_kefu ul li { border-radius: 3px; list-style-type: none; width: 40px; height: 40px; text-align: center; margin: 5px 0; position: relative; background-color: #ffffff; color: #333333; cursor: pointer; transition: background-color .2s linear 0s; perspective: 1000; transform-style: preserve-3d; -webkit-box-shadow: 2px 3px 14px 1px #e8e8e8; -moz-box-shadow: 2px 3px 14px 1px #e8e8e8; box-shadow: 2px 3px 14px 1px #e8e8e8; }
.online_kefu li i { font-size: 1.5rem; }
.online_kefu ul li a { color: #fff; }
.online_kefu ul li .con { position: relative; line-height: 40px; color: #333333; }
.online_kefu ul li .hover_con { border-radius: 3px; position: absolute; left: -200px; left: -100px; width: 120px; color: #ffffff; text-align: center; background-color: var(--theme-color); height: 40px; line-height: 40px; bottom: 0; transition: all .2s linear 0s; -webkit-transition: all .3s linear 0s; -moz-transition: all .3s linear 0s; -ms-transition: all .3s linear 0s; -o-transition: all .3s linear 0s; transition: all .3s linear 0s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); -ms-transform: rotateX(-90deg); -o-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }
.online_kefu ul li .hover_con img { width: 100px; }
.online_kefu ul li svg path { fill: #666666; }
.online_kefu ul li.qrcode .hover_con { height: 137px; padding: 10px; width: 130px; left: -141px; }
.online_kefu ul li.qrcode .hover_con p { color: #fff; line-height: 24px; }
.online_kefu li:hover { background-color: var(--theme-color); }
.online_kefu li:hover i { color: #ffffff; }
.online_kefu li:hover .hover_con { left: -130px; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); opacity: 1; }
.online_kefu li:hover svg path { fill: #ffffff; }
.online_kefu li:hover .hover_con .kficon { color: #ffffff; }
.online_kefu li .hover_con:before { width: 0px; height: 0px; border: 8px solid transparent; border-left: 8px solid var(--theme-color); display: block; content: ''; position: absolute; top: 12px; right: -16px; transition: top .2s linear; transition-delay: .1s; }
.online_kefu li.qrcode:hover .hover_con { bottom: -60px; }
.online_kefu li.qrcode:hover .hover_con:before { top: 48px; }
.mobile_mob { display: none !important; }
 @media (max-width: 767px) {
.mobile_mob { display: inline-block !important; }
.mobile_pc { display: none !important; }
}