@media (min-width: 800px){



.kf_toolbar{ display:block;}

.kf_bottom{ display:none;}	

.kf_toolbar {

	position: fixed;

	top: 50%;

	right: 1%;

	margin-top: -100px;

	z-index: 100;

	width: 80px;

}

.kf_toolbar dd {

	position: relative;

	float: left;

	width: 60px;

	height: 60px;

	background: #323b42;

	margin-top: 2px;

	border-radius: 5px;

	color: #fff;

	font-size: 6px;

	line-height: 21px;

	text-align: center;

	cursor: pointer;

	transition: all .5s;

}

.kf_toolbar dd:first-child {

	margin-top: 0;

}

.kf_toolbar dd i {

	width: 100%;

	height: 30px;

	display: block;

	margin-top: 13px;

	background: url(../images/kf_toolbar.png) no-repeat center 0;

}

.kf_toolbar dd.qq i {

	background-position-y: 0;

}

.kf_toolbar dd.tel i {

	background-position-y: -30px;

}

.kf_toolbar dd.code i {

	background-position-y: -60px;

}

.kf_toolbar dd.top i {

	background-position-y: -90px;

}

.kf_toolbar dd span {

	display: block;

	color: #fff;

}

.kf_toolbar dd.tel .box {

	position: absolute;

	top: 0;

	width: 190px;

	right: -200px;

	height: 100%;

	margin-right: 10px;

	border-radius: 5px;

	background: #ed1c24;

	opacity: 0;

	transition: all .5s;

}

.kf_toolbar dd.tel .box p {

	font-size: 14px;

	margin: 15px auto 7px;

}

.kf_toolbar dd.tel .box h3 {

	font-size: 18px;

	font-weight: bold;

}

.kf_toolbar dd.tel .box:after {

	display: block;

	content: " ";

	border-style: solid dashed dashed dashed;

	border-color: transparent transparent transparent #0056f9;

	border-width: 9px;

	width: 0;

	height: 0;

	position: absolute;

	top: 50%;

	margin-top: -9px;

	right: -18px;

	margin-left: -12px;

}

.kf_toolbar dd.code .box {

	position: absolute;

	top: 0;

	width: 162px;

	right: -172px;

	height: 162px;

	margin-right: 10px;

	border-radius: 5px;

	background: #0056f9;

	opacity: 0;

	transition: all .5s;

}

.kf_toolbar dd.code .box img {

	width: 140px;

	height: 140px;

	padding: 11px;

}

.kf_toolbar dd.code .box:after {

	display: block;

	content: " ";

	border-style: solid dashed dashed dashed;

	border-color: transparent transparent transparent #0056f9;

	border-width: 9px;

	width: 0;

	height: 0;

	position: absolute;

	top: 30px;

	right: -18px;

	margin-left: -12px;

}

.kf_toolbar dd:hover {

	background: #333;

}

.kf_toolbar dd.tel:hover .box {

	opacity: 1;

	right: 80px;

}

.kf_toolbar dd.code:hover .box {

	opacity: 1;

	right: 80px;

}

}



@media (max-width: 800px){

.footer {

    margin-bottom: 50px;

}	

.kf_toolbar{ display:none;}

.kf_bottom{ display:block;}		

.kf_bottom {

	width: 100%;

	height: 50px;

	background:#FFFFFF;

	margin: 0 auto;

	position: fixed;

	bottom: 0;

	left: 0;



}

.kf_bottom ul {

	max-width: 640px;

	height: 60px;

	margin: 0 auto

}

.kf_bottom ul li {

	width: 25%;

	height: 60px;

	display: block;

	float: left;

	text-align: center;

	background: url(../images/kf_bottom_li.png) no-repeat right center

}

.kf_bottom ul li a {

	color: #fff;

	font-size: 12px;

	text-decoration: none;

}

.kf_bottom ul li:nth-of-type(4) {

	background-image: none

}

.kf_bottom ul li.f1 i {

	display: block;

	width: 100%;

	height: 32px;

	background: url(../images/f1.png) no-repeat center;

	margin-top: 5px;

}

.kf_bottom ul li.f2 i {

	display: block;

	width: 100%;

	height: 32px;

	background: url(../images/f4.png) no-repeat center;

	margin-top: 5px;

}

.kf_bottom ul li.f3 i {

	display: block;

	width: 100%;

	height: 32px;

	background: url(../images/f2.png) no-repeat center;

	margin-top: 5px;

}

.kf_bottom ul li.f4 i {

	display: block;

	width: 100%;

	height: 32px;

	background: url(../images/f3.png) no-repeat center;

	margin-top: 5px;

}

}