.side-bar {
        top: 260px;
        right: 0;
        position: fixed;
        height: 286px;
    }

    .side-bar p {
        float: left;
        margin-top: 20px;
    }

    .side-bar #ul1 {
        float: right;
        width: 109px;
    }


    /* QQ悬浮样式 */
    .littleJ {
        width: 72px;
        /* height: 95px; */
        position: fixed;
        right: 0px;
        top: 221px;
        z-index: 9999;
    }

    .sideTip {
        z-index: 9999;
        position: fixed;
        right: 0px;
        top: 300px;
        box-shadow: 0px 0px 6px rgba(72, 72, 72, 0.16);
        border-radius: 8px 0px 0px 8px;
        background: #fff;
    }

    .sideTip>li {
        z-index: 999;
    }

    .sideTip>li>a {
        width: 72px;
        height: 70px;
        text-align: center;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        display: flex;
        flex-direction: column;
    }

    .sideTip>li>a>div {
        width: 25px;
        height: 25px;
        opacity: 1;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
        margin: 10px auto 6px;
        background-size: 100% 100%;
    }

    .sideTip>li>a>span {
        font-size: 14px;
        color: #186cea;
    }

    .sideTip>li:hover a {
        background: #186cea;
    }

    .sideTip>li:hover span {
        color: #fff;
    }

    #online {
        background-image: url("/Content/img/7422@2x.png");
    }

    #qq {
        background-image: url("/Content/img/7314@2x.png");
    }

    #weixin {
        background-image: url("/Content/img/wechat-1.png");
    }

    #telphone {
        background-image: url("/Content/img/7316@2x.png");
    }

    .sideTip>li:hover #online {
        background-image: url("/Content/img/7418@2x.png");
    }

    .sideTip>li:hover #qq {
        background-image: url("/Content/img/7323@2x.png");
    }

    .sideTip>li:hover #weixin {
        background-image: url("/Content/img/wechat-hover.png");
    }

    .sideTip>li:hover #telphone {
        background-image: url("/Content/img/7325@2x.png");
    }

    .pos,
    .trial,
    .wei {
        position: relative;
    }

    .weixinCode {
        display: none;
        background-color: #fff;
        position: absolute;
        top: -30px;
        right: 72px;
        width: 159px;
        height: 159px;
        animation: show-nav 0.7s forwards;
        -webkit-animation: show-nav 0.7s forwards;
        -moz-animation: show-nav 0.7s forwards;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.16);
        border-radius: 3px;
        transition: all 1s linear;
        -webkit-transition: all 1s linear;
        -o-transition: all 1s linear;
    }

    .weixinCode img {
        width: 100%;
        height: 100%;
    }

    .tel {
        position: absolute;
        text-align: center;
        top: 0px;
        right: 72px;
        width: 250px;
        height: 70px;
        line-height: 70px;
        background: #186cea;
        color: #fff;
        font-size: 14px;
    }

    /**右侧qq,tel动画 */

    @keyframesbounceInLeft {
        0% {
            transform: translate3d(500px, 0, 0);
        }

        60% {
            /*  opacity: 1;*/
            transform: translate3d(0px, 0, 0);
        }

        75% {
            transform: translate3d(0px, 0, 0);
        }

        90% {
            transform: translate3d(0px, 0, 0);
        }

        100% {
            transform: translate3d(0px, 0, 0);
        }
    }

    /**右侧qq,tel动画 */
    .leftslide-enter-active {
        transition: all 0.5s ease;
    }

    .leftslide-leave-active {
        transition: all 0.5s ease;
    }

    .leftslide-enter,
    .leftslide-leave-to {
        transform: translateX(250px);
        opacity: 0;
    }