@charset "utf-8";

/* 在线客服样式 */
.gr_kefu{
	position:fixed;
	width:68px;
	height:275px;
	right:0;
	top:50%;
	z-index:1005;
	margin-top: -172px;
}
.gr_kefu ul li{width:68px;height:68px;float:left;position:relative;margin-bottom:1px;font-size:14px;line-height:68px;}
.gr_kefu ul li .sidebox{position:absolute;width:68px;height:68px;top:0;right:0;transition:all 0.3s;color:#fff;background:#5eb7e8;overflow:hidden;}
.gr_kefu ul li.kf1 .sidebox{overflow:visible;}
.gr_kefu ul li span{font-size: 20px;padding: 0 15px;line-height: 40px;display: block;float: left; margin: 13px 0; border-right: 1px #CECECE solid;}
.gr_kefu ul li.kf5 img{width:68px; width:68px}
.gr_kefu ul li.kf2 .sidebox{background:#7fbb57;overflow:visible;}
.gr_kefu ul li.kf3 .sidebox{background:#e60012;}
.gr_kefu ul li.kf4 .sidebox{background:#e60012;}
.gr_kefu ul li.kf5 .sidebox {
	background:#5eb7e8;
}
.gr_kefu ul li.kf6 .sidebox {
	background:#7fbb57;
	overflow:visible;
}

.gr_kefu ul li .sidetop{width:68px;height:68px;line-height:68px;display:inline-block;background:#606060;transition:all 0.3s;}
.gr_kefu ul li .sidetop:hover{background:#333;}
.gr_kefu ul li img{float:left;}
.gr_kefu .kf_qq{
	position:absolute;
	top: -130px;
	left: -170px;
	width: 170px;
	height: auto;
	display:none;
	background-size: 160px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0;
	padding-left: 0px;
}
.gr_kefu .kf_qq .kf_1 {
	background-image: url(../images/kf_qqBG_01.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 120px;
	width: 160px;
}

.gr_kefu .kf_qq .kf_2 {
	height: auto;
	width: 160px;
	background-image: url(../images/kf_qqBG_02.jpg);
	background-repeat: repeat-y;
	background-position: left;
}
.gr_kefu .kf_qq .kf_2 a{
	float: left;
	width: 136px;
	height: 25px;
	line-height: 26px;
	padding-left: 12px;
	margin-bottom: 7px;
	font-size: 12px;
	background-image: url(../images/kf_qq.png);
	background-repeat: no-repeat;
	background-position: center center;
	padding-top: 0px;
	padding-right: 12px;
	padding-bottom: 0px;
	text-indent: 21px;
	white-space:nowrap;
}
.gr_kefu .kf_qq .kf_3 {
	background-image: url(../images/kf_qqBG_03.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 116px;
	width: 160px;
}
.gr_kefu .kf_wx{
	position:absolute;
	top: -69px;
	left: -170px;
	width: 170px;
    height: 260px;
	display:none;
	background:url(../images/kf_wxBG.png) no-repeat;
	background-size: 160px;
}

.gr_kefu .kf_wx img{display:block;width: 120px;height: 120px;/* margin-bottom:5px; */float:none;margin: 60px 0 0 22px;}
.gr_kefu .kf_whats {
	position:absolute;
	top: -69px;
	left: -170px;
	width: 170px;
	height: 260px;
	display:none;
	background:url(../images/kf_whatsBG.png) no-repeat;
	background-size: 160px;
}
.gr_kefu .kf_whats img {
	display:block;
	width: 120px;
	height: 120px;/* margin-bottom:5px; */
	float:none;
	margin: 60px 0 0 22px;
}

.gr_kefu ul li u{float:right; display:block;width:68px; height:68px; background:url(../images/kf_ico.png) 0 0 no-repeat;    -webkit-transition: .4s ease-in-out;
    transition: .4s ease-in-out;}
.gr_kefu ul li.kf1 u{background-position:0 0;}
.gr_kefu ul li.kf2 u{background-position: 0px -69px;}
.gr_kefu ul li.kf3 u{background-position: 0px -138px;}
.gr_kefu ul li.kf4 u{background-position: 0 -208px;}
.gr_kefu ul li.kf5 u {
	background-position: 0 -276px;
}
.gr_kefu ul li.kf6 u {
	background-position: 0 -276px;
}


.gr_kefu ul li.kf1:hover u{background-position:-68px 0;}
.gr_kefu ul li.kf2:hover u{background-position:-68px -69px;}
.gr_kefu ul li.kf3:hover u{background-position:-68px -138px;}
.gr_kefu ul li.kf4:hover u{background-position:-68px -208px;}
.gr_kefu ul li.kf5:hover u {
	background-position:-68px -276px;
}
.gr_kefu ul li.kf6:hover u {
	background-position:-68px -276px;
}