/* 右侧边栏  开始 */

.suspension {
    position: fixed;
    right: 1.8%;
    top: 60%;
    z-index: 10;
    margin-top: -112px;
    width: 73px;
    /* height: 221px; */
    border: #ccc 1px solid;
    border-top: #2e58ab 3px solid;
    border-radius: 0 0 3px 3px;
    background: #fff;
}


.suspension .sus {
    position: relative;
    height: 73px;
    border-bottom: #ccc 1px solid;
    cursor: pointer;
}

.suspension .sus .icon em {
    margin-top: 7px;
    width: 100%;
    height: 37px;
    height: 40px;
}

.suspension .sus .icon p {
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* 无障碍阅读图标 */
.suspension .accessibility .icon em {
    background: url(../images/icon/wza.png) center no-repeat;
}

.suspension .accessibility:hover .icon em {
    background: url(../images/icon/wza_s.png) center no-repeat;
}

/* 智能机器人 图标 */
.suspension .robot .icon em {
    background: url(../images/icon/icon.png) center no-repeat;
}

.suspension .robot:hover .icon em {
    background: url(../images/icon/icon_s.png) center no-repeat;
}

/* 地震数字科普馆 图标 */
.suspension .dzszkpg {
    height: 88px;
}

.suspension .dzszkpg .icon em {
    background: url(../images/icon/dzszkpg.png) center no-repeat;
}

.suspension .dzszkpg:hover .icon em {
    background: url(../images/icon/dzszkpg_s.png) center no-repeat;
}



/* 微信图标 */
.suspension .sus_1 .icon em {
    background: url(../images/icon/icon_28.png) center no-repeat;
}

.suspension .sus_1:hover .icon em {
    background: url(../images/icon/icon_28s.png) center no-repeat;
}


.suspension .sus_2 .icon em {
    background: url(../images/icon/icon_29.png) center no-repeat;
}

.suspension .sus_3 {
    border-bottom: none;
    display: none;
}

.suspension .sus_3 .icon em {
    background: url(../images/icon/icon_30.png) center no-repeat;
}

.suspension .sus_3:hover .icon em {
    background: url(../images/icon/icon_30s.png) center no-repeat;
}

.suspension .sus_3 p {
    margin-top: 5px;
}



.suspension .pos {
    transition: all 0.5s;
    position: absolute;
    right: 85px;
    top: 50%;
    margin-top: -50px;
    z-index: 5;
    width: 0px;
    height: 100px;
    background: url(../images/icon/icon_43.png) right center no-repeat;
    overflow: hidden;
}

.suspension .pos img {
    padding: 2px 0 0 3px;
    width: 94px;
}

.suspension .sus:hover .pos {
    transition: all 0.5s;
    width: 104px;
}



.suspension i {
    margin-top: 152px;
    width: 100%;
    height: 73px;
    cursor: pointer;

}

.suspension_fixed {
    display: block !important;
}



@media screen and (max-width:1200px) {
    .suspension {
        width: 1rem;
        height: 4.3rem;
        border: #ccc 0px solid;
        border-top: #2e58ab 0px solid;
        border-radius: 0 0 3px 3px;
        right: 0.3rem;
        top: calc(100% - 3rem);
    }

    /* .suspension .pos {
        right: 50px;
    } */



    .suspension .sus {
        height: 1rem;
        margin-top: 3px;
        border-bottom: #ccc 0px solid;
    }

    .sus.sus_1 {
        display: none;
    }

    .suspension .sus .icon em {
        margin-top: 0px;
        height: 1rem;
        background: none !important;
    }

    .suspension .sus p {
        display: none;
        margin-top: 1px;
    }

    .suspension .sus_3 {
        width: 1rem;
        height: 1rem;
        background: url(../images/mobile/icon/icon_13.png) center no-repeat;
        background-size: 1rem auto;
        background-color: #3478dd;
        border-radius: 5px;
    }

    .suspension .icon_em1 {
        background: url(../images/mobile/mobile_wza.png) center no-repeat #3478dd;
        border-radius: 5px;
    }

    .suspension .icon_em2 {
        background: url(../images/mobile/mobile_icon.png) center no-repeat #3478dd;
        border-radius: 5px;
    }

    .suspension .icon_em3 {
        background: url(../images/mobile/mobile_dzsz.png) center no-repeat #3478dd;
        border-radius: 5px;

    }
}