/* sidenavi wrapper */
#sideNavi,
.side-navi-item,
.side-navi-data,
.side-navi-tab { margin: 0; padding: 0; }
#sideNavi { position: fixed; right: 50px; top: 14%; }
/* items */
.side-navi-item-default { height: 50px; display: none; }
.side-navi-item { position: absolute; left: 0; display: inline-block; width: 150px; height: 50px; transform: rotate(-90deg); transform-origin: left top 0; color: #fff; background-color: #d12129; cursor: pointer; border-radius: 10px 10px 0 0; box-shadow: 0px -1px 5px 0px rgba(0,0,0,0.6); font-weight: 700; }
.side-navi-item.item1 { top: 180px; }
.side-navi-item.item2 { top: 355px; }
.side-navi-item.active,
.side-navi-item:hover { background-color: #e5e5e5; color: #d12129; }
.side-navi-item > div { padding-top: 15px; text-align: center; }
/* data wrapper */
.side-navi-data { position: absolute; top: 0; left: 50px; width: 352px; max-height: 100vh; background-color: #e5e5e5; }
/* tab wrapper */
.side-navi-tab { display: none; }
.side-navi-tab.active { display: inline-block; }
.side-navi-tab > div { padding: 30px; padding-right:80px; }
 @media (max-width: 767px) {
#sideNavi {  }
.side-navi-item {  }
.side-navi-item > div { }
.side-navi-data {  width: calc(100vw - 15px); }
.side-navi-tab > div {
    
}
}