﻿@media screen and (min-width: 768px) {
    .fix {
        position: fixed;
        top: 40%;
        right: 17px;
        z-index: 1000;
        font-size: 12px;
    }

        .fix .th {
            position: relative;
            z-index: -2;
            text-align: center;
        }

    div, p, span {
        word-break: break-all;
    }

    .fix .th .pulse1, .fix .th .pulse2 {
        position: absolute;
        width: 8px;
        height: 8px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%,-50%);
        box-shadow: 0 0 12px #b3c7ff;
        border-radius: 50%;
        z-index: -1;
    }

    .fix .th .pulse2 {
        animation: pulse-2a953369 3.2s linear infinite;
    }

    .fix .th .pulse3 {
        position: absolute;
        width: 8px;
        height: 8px;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%,-50%);
        box-shadow: 0 0 12px #b3c7ff;
        border-radius: 50%;
        -webkit-animation: pulse-2a953369 1.6s linear infinite;
        animation: pulse-2a953369 1.6s linear infinite;
        z-index: -1;
    }
}

@keyframes pulse-2a953369 {
    70% {
        width: .9rem;
        height: .9rem;
        opacity: 1
    }

    to {
        width: 1.2rem;
        height: 1.2rem;
        opacity: 0
    }
}
    .fix .th img {
        z-index: 1;
        width: 80px;
        height: 80px;
    }


    .fix .fix-icon-info4 {
        width: 130px;
        display: none;
        position: absolute;
        background-color: #fff;
        padding: 12px 11px;
        background: #fff;
        box-shadow: 4px 0 24px 0 rgba(0,0,0,.07);
        top: 57px;
        right: calc(100% + 22px);
        border-radius: 4px
    }

        .fix .fix-icon-info4 span {
            color: #3467fa
        }

        .fix .fix-icon-info4:after {
            display: block;
            content: "";
            background: #fff;
            width: 12px;
            height: 12px;
            position: absolute;
            right: -6px;
            top: 12px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .fix .fix-icon1, .fix .fix-icon2, .fix .fix-icon3 {
        background: #fff;
        box-shadow: 0 4px 24px 0 hsla(0,0%,87.8%,.5);
        text-align: center;
        color: #727272;
        line-height: 12px;
        border-radius: 3px;
        position: relative;
        padding: 20px 10px;
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-justify-content: space-around;
        justify-content: space-around;
        margin-bottom: 4px;
    }

        .fix .fix-icon1 img, .fix .fix-icon2 img, .fix .fix-icon3 img {
            width: 26px;
            height: 26px;
            margin-bottom: 8px
        }

    .fix .to-top {
        background: #fff;
        box-shadow: 0 4px 24px 0 hsla(0,0%,87.8%,.5);
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        padding: 10px 0
    }

        .fix .to-top img {
            width: 16px;
            height: 16px
        }

    .fix .zxwm {
        margin-left: 0;
        margin-top: -17px;
        margin-bottom: 6px;
        cursor: default;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        text-align: center;
        background-image: -webkit-linear-gradient(top, #4976f5, #235cff);
        background-image: linear-gradient(180deg, #4976f5, #235cff);
        border-radius: 4px;
        padding: 5px 10px;
    }

    .fix .fix-icon-info1 {
        display: none;
        position: absolute;
        top: 0;
        right: calc(100% + 12px);
        z-index: 99;
        min-width: 152px;
        background: #fff;
        box-shadow: 3px 0 24px 0 rgba(0,0,0,.07);
        border-radius: 3px;
        text-align: center
    }

        .fix .fix-icon-info1 .title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            line-height: 14px;
            margin-bottom: 6px;
            margin-top: 14px
        }

        .fix .fix-icon-info1 .subtitle {
            font-size: 12px;
            color: #999;
            padding: 6px 10px;
            white-space: nowrap
        }

        .fix .fix-icon-info1 .info {
            color: #666;
            font-size: 12px;
            color: #4976f5;
            padding: 10px 0
        }

        .fix .fix-icon-info1 .sj {
            position: absolute;
            top: .16rem;
            right: -13px;
            border: 8px solid transparent;
            border-left-color: #fff;
            box-shadow: 0 3px 24px 0 hsla(0,0%,87.8%,.5)
        }

        .fix .fix-icon-info1 .pic {
            margin: 0 auto;
            width: 120px;
            height: 120px;
            background: url(/images/liaotian_kefu.png) no-repeat;
            background-size: cover
        }

    .fix .fix-icon-info2 {
        display: none;
        position: absolute;
        top: 0;
        right: calc(100% + 12px);
        z-index: 99;
        min-width: 152px;
        background: #fff;
        box-shadow: 3px 0 24px 0 rgba(0,0,0,.07);
        border-radius: 3px;
        text-align: center
    }

        .fix .fix-icon-info2 .title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            line-height: 14px;
            margin-bottom: 6px;
            margin-top: 14px
        }

        .fix .fix-icon-info2 .subtitle {
            font-size: 12px;
            color: #999;
            padding: 6px 10px;
            white-space: nowrap
        }

        .fix .fix-icon-info2 .info {
            color: #666;
            font-size: 12px;
            color: #4976f5;
            padding: 10px 0
        }

        .fix .fix-icon-info2 .sj {
            position: absolute;
            top: .16rem;
            right: -13px;
            border: 8px solid transparent;
            border-left-color: #fff;
            box-shadow: 0 3px 24px 0 hsla(0,0%,87.8%,.5)
        }

        .fix .fix-icon-info2 .pic {
            margin: 0 auto;
            width: 120px;
            height: 120px;
            background: url(/images/lianxi_gzh.jpg) no-repeat;
            background-size: cover
        }

    .fix .fix-icon-info3 {
        display: none;
        position: absolute;
        top: 0;
        right: calc(100% + 12px);
        z-index: 99;
        min-width: 152px;
        background: #fff;
        box-shadow: 3px 0 24px 0 rgba(0,0,0,.07);
        border-radius: 3px;
        text-align: center
    }

        .fix .fix-icon-info3 .title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            line-height: 14px;
            margin-bottom: 6px;
            margin-top: 14px
        }

        .fix .fix-icon-info3 .subtitle {
            font-size: 12px;
            color: #999;
            padding: 6px 10px;
            white-space: nowrap
        }

        .fix .fix-icon-info3 .info {
            color: #666;
            font-size: 12px;
            color: #4976f5;
            padding: 10px 0
        }

        .fix .fix-icon-info3 .sj {
            position: absolute;
            top: .16rem;
            right: -13px;
            border: 8px solid transparent;
            border-left-color: #fff;
            box-shadow: 0 3px 24px 0 hsla(0,0%,87.8%,.5)
        }

        .fix .fix-icon-info3 .pic {
            margin: 0 auto;
            width: 120px;
            height: 120px;
            background: url('/images/liaotian_xiaochengxu_tu.png') no-repeat;
            background-size: cover
        }

    .fix .fix-icon-info4 {
        width: 1.3rem;
        display: none;
        position: absolute;
        background-color: #fff;
        padding: 12px .11rem;
        background: #fff;
        box-shadow: 3px 0 24px 0 rgba(0,0,0,.07);
        top: .57rem;
        right: calc(100% + .22rem);
        border-radius: 3px
    }

        .fix .fix-icon-info4 span {
            color: #3467fa
        }

        .fix .fix-icon-info4:after {
            display: block;
            content: "";
            background: #fff;
            width: 12px;
            height: 12px;
            position: absolute;
            right: -6px;
            top: 12px;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
        }

    .fix .fix-icon1:hover .fix-icon-info1, .fix .fix-icon2:hover .fix-icon-info2, .fix .fix-icon3:hover .fix-icon-info3 {
        display: block
    }
}
