.sidebar { height: 100vh; width: 4.2rem; left: 0; top: 0; position: fixed; z-index: 21; background-color: #fff; transition: all .6s; display: none; animation: rightFloat  .3s; -webkit-animation: rightFloat  .3s; }
.sidebar.on {  display: block;}


.sidebar .bg { height: 100%; position: absolute; left: 0;}
.sidebar .bg img { height: 100%;}
.sidebar .main { width: calc(100% - .4rem); /* background-color: #fff; */ box-shadow: 7px 7px 20px 0px rgba(3, 2, 0, 0.08); border-radius: 20px; position: absolute; top:calc(var(--top) + .5rem);
   border: 1px solid #DADDE6;  }
.sidebar .main h3 {   }
.sidebar .main .list .item:not(:last-child) { margin-bottom: 5px;}
.sidebar .main .list .item .head {    height: .58rem;   transition: all .6s;}
.sidebar .main .list .item:hover .head,
.sidebar .main .list .item.on .head { background-color:  var(--color); color: #fff;}
.sidebar .main .list .item:hover .head a,
.sidebar .main .list .item.on .head a { color: #fff;}
.sidebar .main .list .item.on .head .icon { transform: rotate(90deg);}
.sidebar .main .list .item:not(.active) .body { display: none;}
.sidebar .main .list .item .head .icon { transition: transform .6s;}
.sidebar .main .list .item .head .icon span { font-size: 14px;}
.sidebar .main .list .item .body a.on { transition: all .6s;}
.sidebar .main .list .item .body a.on span { color:  var(--color);}
.sidebar .main .list .item .head a { color: #111; transition: all .6s;}
.sidebar .main .list .item .body { padding: 10px 20px 20px;}
.sidebar .main .list .item .body a { line-height: 30px; display: block; color: #444444; transition: all .6s;}
.sidebar .main .list .item .body a:hover { color:  var(--color);}