.box {
    width: 50px;
    height: auto;
    position: fixed;
    right: 3%;
    z-index: 3;
    top: 40%;
}

.box ul li {
    width: 51px;
    display: block;
    height: 51px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #fff;
    border-top: 0;
    box-sizing: border-box;
}

.box ul li:first-child {
    border-top: 1px solid #fff;
}

.kf {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -1085px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;

}

.kf:hover {
    background-position: 0 -1147px;
}

.kf:hover .kf-logo {
    width: 170px;
    height: 208px;
}

.tg {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -1209px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.tg:hover {
    background-position: 0 -1271px;
}

.tg:hover .tg-logo {
    width: 170px;
    height: 208px;
}

.gzh {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -1333px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.gzh:hover {
    background-position: 0 -1395px;
}

.gzh:hover .gzh-logo {
    width: 170px;
    height: 208px;
}

.app {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -1457px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;

}

.app:hover {
    background-position: 0 -1519px;
}

.app:hover .app-logo {
    width: 170px;
    height: 208px;
}

.wx {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -1581px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;

}

.wx:hover {
    background-position: 0 -1643px;
}

.wx:hover .wx-logo {
    width: 170px;
    height: 208px;
}


.top {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -1705px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;

}

.top:hover {
    background-position: 0 -1767px;
}

.kf-logo {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 0;
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: -150px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.tg-logo {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -233px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: -95px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.gzh-logo {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -460px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: -44px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.app-logo {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -665px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: 7px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.wx-logo {
    background: url(../images/kefu/kefu.png) no-repeat;
    background-position: 0 -876px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    position: absolute;
    top: 65px;
    left: -171px;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}

.hide1 {
    display: none !important;
}