﻿
#side {
    position: fixed;
    width: 36px;
    height: 102px;
    right: 10px;
    bottom: 202px;
    z-index: 100;
}

    #side ul li {
        width: 36px;
        height: 36px;
        line-height: 36px;
        float: left;
        margin-bottom:12px;
        position: relative;
    }

        #side ul li .sidebox {
            position: absolute;
            width: 36px;
            height: 36px;
            line-height: 36px;
            top: 0;
            right: 0;
            background: #eee;
            color: #fff;
            font: 12px !important;
            overflow: hidden;
            box-sizing:border-box;
            border-radius:3px;
        }
  #side ul li:last-child{
      margin-top:10px;
  } 
        #side ul li .sidetop {
            width: 36px;
            height: 36px;
            line-height: 36px;
            display: inline-block;
            background: #eee;
               border-radius:3px;
            
        }

            #side ul li .sidetop:hover {
                background: #f29600;
            }
               #side ul li:hover span.side_right{
                   display:block;
               }
            #side ul li span.side_right{
                margin-left:15px;
                display:none;
            }
        #side ul li span.side1 {
            background: url(/images/slideBar/sc.png) no-repeat;
            position: absolute;
            top: 11px;
            left: 12px;
            width: 14px;
            height: 14px;
        }

            #side ul li:hover span.side1 {
                background: url(/images/slideBar/sc-b.png) no-repeat;
      left: 78px;
            }

        #side ul li span.side2 {
            background: url(/images/slideBar/gwc.png) no-repeat;
            position: absolute;
            top: 11px;
            left: 12px;
            width: 14px;
            height: 14px;
        }
        
            #side ul li:hover span.side2{
                background: url(/images/slideBar/gwc-b.png) no-repeat;
                    left: 78px;
            }

        #side ul li span.side3 {
            background: url(/images/slideBar/zxkf.png) no-repeat;
            position: absolute;
            top: 11px;
            left: 12px;
            width: 14px;
            height: 14px;
        }

            #side ul li:hover span.side3 {
                background: url(/images/slideBar/zxkf-b.png) no-repeat;
                  left: 78px;
            }

        #side ul li span.side4 {
            background: url(/images/slideBar/fhdb.png) no-repeat;
            position: absolute;
            top: 16px;
            left: 12px;
            width: 14px;
            height: 14px;
        }

            #side ul li:hover span.side4 {
                background: url(/images/slideBar/fhdb-b.png) no-repeat;
               left: 78px;
            }
img.cuxiao {
    position: absolute;
    width: 28px;
    top: -14px;
    left: 50px;
    content: url(../images/cuxiao.png);
    animation: mymove 1.8s infinite;
    -webkit-animation: mymove 1.8s infinite;
}
@keyframes mymove {
    0% {
        transform: translateY(1px) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1);
    }

    100% {
        transform: translateY(1px) scale(1);
    }
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
    0% {
        transform: translateY(1px) scale(1);
    }

    50% {
        transform: translateY(-1px) scale(1);
    }

    100% {
        transform: translateY(1px) scale(1);
    }
}