.sbar{
position:fixed;

bottom:50%;
left:50px;
z-index:10001;
}
.sbarItem{
width:30px;
border:1px solid #e3e5e7;
padding:6px;
background:#fff;
border-radius:8px;
margin-bottom:6px;
-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;
position:relative;
z-index:10001;
}
.sbarItem:hover{
background:#e3e5e7;
}
.sbarItem:last-child{
margin-bottom:0px;
}
.sbarItem a{display:block;padding:0;margin:0px;text-decoration:none;color:#000;}
.sbarItem a img{max-width:100%;display:block;margin:0 auto;}
.sbarItem a p{
text-align:center;
    line-height: 16px;
max-width:100%;
font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3";
background: #fff;
transition: background-color 0.2s ease;
font-size: 14px;
}
.sbarItem:hover .sbarItem-showBox{
visibility:visible;
opacity:1;
margin-top:0px;
}
.sbarItem-showBox{
position:absolute;
margin-top:15px;
left:44px;
top:0px;
visibility:hidden;
opacity:0;
-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;
}
.sbarItem-showBox-main{
border:1px solid #e3e5e7;
padding:6px;
margin-left:5px;
border-radius:5px;
background:#fff;
}
.sbarItem-showBox-arrow{
display:block;
position:absolute !important;
z-index:1;
left:-2px;
top:15px;
transform:rotate(180deg);-ms-transform:rotate(180deg); 	-moz-transform:rotate(180deg); 	-webkit-transform:rotate(180deg); -o-transform:rotate(180deg); 	
}


.sbarItem-showBox-main img{display:block;}
.sbarItem-showBox p{
padding:5px;
font-size:15px;
font-family: "PingFang SC","Microsoft YaHei",arial,"Hiragino Sans GB","Hiragino Sans GB W3";
white-space: nowrap;
overflow: auto;
}
.sbarItem-showBox a:hover{
color:#ff5c38;
-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;
}
.sbarItem-showBox .sbarItemText a:hover{color:#f60;}
.sbarItem-top{display:none;
}
.sbarItem:hover a p {
    background-color: #F0F0F0;
}