.siderbar{
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0px;
    bottom: 6.5104vw;
    z-index: 999;
}
.siderbar .siderbar-rows{
    background: rgb(0 0 0 / 80%);
    width: 3.9063vw;
    height: 3.9063vw;
    font-size: .7813vw;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: .1953vw;
    cursor: pointer;
    position: relative;
}
.siderbar .siderbar-rows .col-item{
    width: 3.9063vw;
    height: 3.9063vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.siderbar .siderbar-rows a{
    color: #fff;
}
.phone-detail{
    position: absolute;
    height: 100%;
    right: -39.0625vw;
    width: 0px;
    background: linear-gradient(to right, #0889B6, #2ACC93);
    display: flex;
    align-items: center;
    min-width: 17.1875vw;
}

.siderbar .siderbar-rows>.col-item:hover{
    background: linear-gradient(to right, #0889B6, #2ACC93);
}
.siderbar .siderbar-rows:first-child:hover .phone-detail{
    animation: phoneExpand 0.3s ease-out forwards;
}
.siderbar .siderbar-rows:nth-child(3):hover .wx-detail{
    animation: wxExpand 0.3s ease-out forwards;
}
.siderbar .siderbar-rows .line{
    height: 1.5625vw;
    width: .0651vw;
    background: rgba(255,255,255,0.5);
    margin:0px .651vw;
}
.siderbar .siderbar-rows img{
    margin-bottom: .3255vw;
}
.siderbar .siderbar-rows .siderbar-1{
    width: 1.3672vw;
    height: 1.3021vw;
}
.siderbar .siderbar-rows .siderbar-2{
    width: 1.5625vw;
    height: 1.3021vw;
}
.siderbar .siderbar-rows .siderbar-3{
    width: 1.6276vw;
    height: 1.3021vw;
}
.siderbar .siderbar-rows .siderbar-4{
    width: 1.1458vw;
    height: 1.4583vw;
}

.phone-detail .col-item{
    width: auto!important;
    padding-left: .651vw;
}

.wx-detail{
    position: absolute;
    height: 100%;
    right: -39.0625vw;
    background: #fff;
    display: flex;
    align-items: center;
    padding:.651vw;
    justify-content: center;
    flex-direction: column;
    height: 8.4635vw;
    border-radius: .651vw;
    box-shadow: 0 .3255vw .651vw rgb(0 0 0 / 20%);
    z-index: 999;
}
.wx-detail img{
    width: 5.0781vw;
    height: 5.0781vw;
    min-width: 5.1432vw;
    margin-bottom: .651vw;
}
.wx-detail .wx-desc{
    font-size: .9115vw;
    font-family: Source Han Sans SC;
    font-weight: 400;
    color: #666666;
}
@keyframes phoneExpand{

    0%{
        right: -32.5521vw;
    }
    100%{
        right: 0px;
    }
 
 }


 @keyframes wxExpand{

    0%{
        right: -32.5521vw;
    }
    100%{
        right: 7.8125vw;
    }
 
 }