.side-bar-box {
    position: fixed;
    top: 260px;
    right: 18px;
    z-index: 1999999999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.side-bar-box::before{
    content: "";
    width: 150px;
    height: 105px;
    left: -45px;
    top: -72px;
    position: absolute;
    background-image: url(../img/rotating-rabbit.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 100%;
    animation: newrotating 2s steps(47) infinite;
    z-index: 1;
    pointer-events: none;
}


@keyframes newrotating {
    0% { background-position: right 0; }
    100% { background-position: right 100%; }
}

.side-bar-box .side-qq-item{
    width: 60px;
    height: 136px;
    background-image: url(../img/contact-slide.png);
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.side-bar-box .side-qq-item .side-qq-span {
    color: #fff;
    writing-mode: vertical-rl;
    font-size: 15px;
    padding-top: 35px;
    letter-spacing: 2px;
    cursor: pointer;
}

.side-bar-box:hover .bubble-wrap{
    opacity: 1;
    visibility: visible;
}


.side-bar-box .bubble-wrap {
    position: absolute;
    top: 24px;
    right: 72px;
    line-height: 50px;
    text-align: left;
    padding-bottom: 15px;
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
}

.side-bar-box .bubble-wrap.kf {
    width: 684px;
    position: fixed;
    top: 150px;
    right: 80px;
    z-index: 99;
}


.bubble-wrap.kf .bubble{
    background-image: url(../img//bg.png);
    background-repeat: no-repeat;
    padding: 95px 0 0;
    border-radius: 16px;
    box-shadow: 0px 7px 24px 0px rgba(125, 131, 137, 0.1);
    color: #1c1d1f;
    white-space: nowrap;
    background-color: #FFFFFF;
}

@media screen and (max-height: 768px) and (min-width: 769px) {
    .fix-qq{top:300px}
    .side-bar-box .bubble-wrap.kf{top:100px;}
}

@media screen and (min-height: 550px) and (max-height: 640px) and (min-width: 769px)  {
    .pop.kf{margin-top: -222px;}
    .kf-container{height: 345px;overflow: auto;}
}

@media screen and (max-height: 735px) and (min-width: 769px)  {
    .fix-qq{top:250px}
    .side-bar-box .bubble-wrap.kf{top:50px;}
}
@media screen and (max-height: 700px) and (min-width: 769px)  {
    .fix-qq{top:220px}
    .side-bar-box .bubble-wrap.kf{top:20px;z-index: 9999!important;}
}
.bubble-list {
    padding: 40px 40px 40px 40px;

}
.bubble-list .list-item{
    float: left;
    width: 25%;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    box-sizing: border-box;
    padding-right: 10px;
}

.bubble-list .list-item .icon-qq{
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url(../img//QQ.png);
    background-repeat: no-repeat;
    position: relative;
    top: 1px;
}

.clearfix {
    clear: both;
}
.clearfix::after {
    display: block;
    clear: both;
    content: "";
}