.Side-kf ul {
    list-style: none;
}

.Side-kf {
    position: fixed;
    right: 0;
    top: 50%;
    margin-top: -90px;
    width: 38px;
    border-radius: 4px 0 0 4px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .4);
    z-index: 999;
}

.Side-kf-main li {
    position: relative;
    height: 38px;
    line-height: 38px;
}

.Side-kf-main li a {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    color: #fff;
    display: block;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    -webkit-transition: all 0.6s;
    -ms-transition: all 0.6s;
    -moz-transition: all 0.6s;
    text-decoration: none;
    font-size: 2rem;
}

/*匿名咨询*/
.bdkf-main {
    position: absolute;
    left: 0;
    bottom: 6px;
    color: #fff;
    width: 92px;
    height: 28px;
    line-height: 27px;
    text-align: center;
    border-radius: 4px;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    background-color: #333;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
}

.bdkf-main:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -4px;
    top: 8px;
    background-color: #fff;
    transform: rotate(45deg);
}

.Side-kf-main li:hover .bdkf-main {
    left: -97px;
    font-size: 0.5rem;
    opacity: 1;
}

/*QQ客服*/
.qqkf-main {
    position: absolute;
    left: 0;
    bottom: -85px;
    color: #333;
    width: 110px;
    height: 170px;
    border-radius: 4px;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    background-color: #fff;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
}

.qqkf-main:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -4px;
    top: 61px;
    background-color: #fff;
    transform: rotate(45deg);
}

.Side-kf-main li:hover .qqkf-main {
    left: -115px;
    opacity: 1;
}

.qqkflist {
    margin: 0;
    padding: 8px 8px 8px 12px;
    overflow: hidden;
}

.qqkflist li {
    margin: 0;
    padding: 0;
    height: 26px;
    line-height: 26px;
    font-size: 0.5rem;
    overflow: hidden;
}

#qqkft {
    padding: 0 0 0 8px;
    font-weight: bold;
    background: url()left 4px no-repeat;
}

#qqkfh a:link,
#qqkfh a:active,
#qqkfh a:visited {
    display: inline-block;
    margin: 0;
    padding: 0 0 0 26px;
    width: 100%;
    height: 26px;
    line-height: 26px;
    font-size: 0.5rem;
    text-align: left;
    color: #333;
    background: url(img/qqol.gif)left 4px no-repeat;
    text-decoration: none;
}

#qqkfh a:hover {
    padding: 0 0 0 27px;
    text-decoration: none;
}

/*微信客服*/
.wxkf-main {
    position: absolute;
    left: 0;
    bottom: -22px;
    color: #222;
    width: 100px;
    height: 120px;
    line-height: 42px;
    font-size: 0.5rem;
    text-align: center;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
    border-radius: 4px;
    background: url(img/wxewm.svg)#fff center 6px no-repeat;
    background-size: 88px 88px;
}

.wxkf-main:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -4px;
    top: 73px;
    background-color: #fff;
    transform: rotate(45deg);
}

.Side-kf-main li:hover .wxkf-main {
    left: -105px;
    opacity: 1;
}

/*SKYPE客服*/
.skype-main {
    position: absolute;
    left: 0;
    bottom: 5px;
    color: #222;
    width: 130px;
    height: 28px;
    line-height: 27px;
    font-size: 0.5rem;
    text-align: center;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
    border-radius: 4px;
}

.skype-main:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -4px;
    top: 8px;
    background-color: #fff;
    transform: rotate(45deg);
}

.Side-kf-main li:hover .skype-main {
    left: -135px;
    opacity: 1;
}

/*Telegram客服*/
.telegram-main {
    position: absolute;
    left: 0;
    bottom: 5px;
    color: #222;
    width: 80px;
    height: 28px;
    line-height: 27px;
    font-size: 0.5rem;
    text-align: center;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
    border-radius: 4px;
}

.telegram-main:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -4px;
    top: 8px;
    background-color: #fff;
    transform: rotate(45deg);
}

.Side-kf-main li:hover .telegram-main {
    left: -85px;
    opacity: 1;
}

/*返回顶部*/
.gotop-main {
    position: absolute;
    left: 0;
    bottom: 6px;
    color: #fff;
    width: 66px;
    height: 28px;
    line-height: 27px;
    text-align: center;
    border-radius: 4px;
    -webkit-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -moz-transition: all 0.2s;
    background-color: #333;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .3);
    z-index: 1;
    opacity: 0;
}

.gotop-main:before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: -4px;
    top: 8px;
    background-color: #fff;
    transform: rotate(45deg);
}

.Side-kf-main li:hover .gotop-main {
    left: -71px;
    font-size: 0.5rem;
    opacity: 1;
}

/*匿名咨询*/
.Side-kf-main li.bdkf-body a {
    border-radius: 4px 0 0 0;
    background: linear-gradient(90deg, #333, #666);
}

.Side-kf-main li.bdkf-body .bdkf-main:before {
    background-color: #333;
}

/*QQ客服*/
.Side-kf-main li.qqkf-body a {
    border-bottom: #fff 1px solid;
    background: linear-gradient(90deg, #73079F, #7632FF);
}

.Side-kf-main li.qqkf-body .qqkf-main:before {
    background-color: #fff;
}

/*微信客服*/
.Side-kf-main li.wxkf-body a {
    border-bottom: #fff 1px solid;
    background: linear-gradient(90deg, #10AA72, #01FA9F);
}

.Side-kf-main li.wxkf-body .wxkf-main:before {
    background-color: #fff;
}

/*SKYPE客服*/
.Side-kf-main li.skype-body a {
    border-bottom: #fff 1px solid;
    background: linear-gradient(90deg, #315F03, #5AAF03);
}

.Side-kf-main li.skype-body .skype-main,
.Side-kf-main li.skype-body .skype-main:before {
    background-color: #fff;
}

/*telegram客服*/
.Side-kf-main li.telegram-body a {
    border-bottom: #fff 1px solid;
    background: linear-gradient(90deg, #0395DE, #1ab5ff);
}

.Side-kf-main li.telegram-body .telegram-main,
.Side-kf-main li.telegram-body .telegram-main:before {
    background-color: #fff;
}

/*返回顶部*/
.Side-kf-main li.gotop-body a {
    border-radius: 0 0 0 4px;
    background: linear-gradient(90deg, #333, #666);
}

.Side-kf-main li.gotop-body .gotop-main,
.Side-kf-main li.gotop-body .gotop-main:before {
    background-color: #333;
}

.img-qq-svg {
    background-position: 1px 1px;
}

.bdkfimg {
    background: url(img/baidukefu.svg) no-repeat;
}

.qqkfimg {
    background: url(img/qq.svg) no-repeat;
}

.wxkfimg {
    background: url(img/wx.svg) no-repeat;
}

.skypeimg {
    background: url(img/skype.svg) no-repeat;
}

.telegramimg {
    background: url(img/telegram.svg) no-repeat;
}

.goupimg {
    background: url(img/go_top.svg) no-repeat;
}

.bdkfimg,
.qqkfimg,
.goupimg {
    display: block;
    height: 39px;
    background-position: center center;
    background-size: 58% auto
}

.wxkfimg {
    display: block;
    height: 39px;
    background-position: center center;
    background-size: 63% auto
}

.skypeimg {
    display: block;
    height: 39px;
    background-position: center center;
    background-size: 53% auto
}

.telegramimg {
    display: block;
    height: 39px;
    background-position: center center;
    background-size: 56% auto
}