
.online_kefu{ position: fixed;  bottom: 20vh;right:2%;z-index: 9999;}
.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 5px 0px rgba(0,0,0,.1);-moz-box-shadow:  2px 3px 5px 0px rgba(0,0,0,.1);box-shadow:  2px 3px 5px 0px rgba(0,0,0,.1);}
.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; }
}