/* aside */
aside{
    width:200px;
    background: #000033;
    height:100%;
    float: left;
}
aside header{
   width:100%;
   height: auto;
   color:#ffffff;
   font-size: 20px;
   text-align: center;
   padding: 20px 0;
   box-sizing: border-box;
   background: rgba(255, 255, 255, 0.1);
}
aside section{
    width:100%;
    height:auto;
    text-align: center;
}
aside section img{
    width:60px;
    height:60px;
    border-radius: 50%;
    margin-top: 20px;
}
aside section h3{
    font-size: 16px;
    color: #e4effd;
    width: 100%;
    text-align: center;
    margin-top:10px;
}
aside section p{
   font-size:12px;
   color:aliceblue;
   opacity: 0.6;
   margin-top:10px;
}
aside ul{
    width:100%;
    height:auto;
    margin-top:20px;
}
aside ul>li{
    list-style-type: none;
    color:#e4effd;
    opacity: 0.8;
    text-align: left;
    padding:20px 20px;
    box-sizing: border-box;
    background: rgba(177, 208, 248, 0.1);
    cursor: pointer;
}

aside ul>li.active{
    color:#ffffff;
    opacity: 1;
}

aside::after{
    content:'';clear:both;display:block;height:0;width:0px;visibility:hidden;
}

/* container */
.container{
    width:calc(100% - 200px);
    float: left;
}
.container footer{
   width:100%;
   height:40px;
   background: #e4effd;
   line-height: 40px;
   color: #000033;
   text-align: center;
   font-size: 14px;
}
.container footer a {
    text-decoration: none;
    color:black;
}
.wrap{
    width:100%;
    height: calc(100vh - 40px);
    padding:30px;
    box-sizing: border-box;
}