.layout {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    overflow: auto;
    background: rgb(233, 240, 245);
}
.hasSider {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
}
.header, .footer {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.header {
    position: fixed;
    width: 100%;
    z-index: 1000;
    background: rgb(29, 71, 99);
    padding: 0 50px;
    height: 56px;
    line-height: 56px;
}
.footer {
    padding: 30px;
    color: rgb(33, 33, 33);
    font-size: 14px;
}
.sider {
    position: relative;
    background: -webkit-linear-gradient(top, rgb(33, 75, 104) 0%, rgb(64, 120, 139) 100%);
    background: linear-gradient(to bottom, rgb(33, 75, 104) 0%, rgb(64, 120, 139) 100%);
    margin-top: 56px;
    -webkit-transition: width 0.35s cubic-bezier(0, 0, 0.2, 1),
        -webkit-box-flex 0.35s cubic-bezier(0, 0, 0.2, 1);
    transition: width 0.35s cubic-bezier(0, 0, 0.2, 1),
        -webkit-box-flex 0.35s cubic-bezier(0, 0, 0.2, 1);
    transition: width 0.35s cubic-bezier(0, 0, 0.2, 1),
        flex 0.35s cubic-bezier(0, 0, 0.2, 1);
    transition: width 0.35s cubic-bezier(0, 0, 0.2, 1),
        flex 0.35s cubic-bezier(0, 0, 0.2, 1),
        -webkit-box-flex 0.35s cubic-bezier(0, 0, 0.2, 1),
        -ms-flex 0.35s cubic-bezier(0, 0, 0.2, 1);
}
.sider .trigger {
    width: 100%;
    cursor: pointer;
    height: 48px;
    line-height: 48px;
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
}
.sider.collapsed .subMenuItem .caption {
    display: none;
}
.content {
    margin-top: 56px;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
}