body,
html {
    background: var(--bg);
}

.content {
    padding         : 50px;
    /* background   : #FFF; */
    margin-bottom   : 10px;
    min-height      : 500px;
    position        : relative;
}

.content>.article {
    margin-left: calc(2.5rem + 40px);
    padding    : 10px;
    background : #FFF;
    min-height: calc(100vh - var(--nav-height) - var(--footer-height) - 100px);
}

.content>.right-menu {
    width                 : 2.5rem;
    background            : rgba(243, 243, 243, 0.49);
    height                : calc(100% - 100px);
    position              : absolute;
    left                  : 50px;
    padding               : 20px;
    -webkit-font-smoothing: antialiased;
}

.content>.right-menu .progress {
    position: relative;
}

.content>.right-menu .progress::before {
    bottom: 0px;
}

.content>.right-menu .progress::before,
.content>.right-menu .progress .line {
    position  : absolute;
    height    : calc(100% - 47px);
    width     : 2px;
    background: rgb(240 240 240);
    content   : '';
    left      : 9px;
    top       : 0px;
    margin    : auto;
}

.content>.right-menu .progress .line {
    background: var(--theme);
    top       : 20px;
}


.content>.right-menu .item {
    padding      : 10px 10px 10px 20px;
    position     : relative;
    margin-left  : 20px;
    font-size    : 16px;
    cursor       : pointer;
    color        : #666;
    margin-bottom: 20px;
    height       : 47px;
    line-height  : 27px;
    font-weight  : bold;
}

.content>.right-menu .item:hover {
    color: var(--theme)
}

.content>.right-menu .item:last-child {
    margin-bottom: 0px;
}

.content>.right-menu .item.active {
    color: #000;
}

.content>.right-menu .item::before {
    content         : "";
    height          : 12px;
    width           : 12px;
    background-color: #FFF;
    position        : absolute;
    left            : -16px;
    bottom          : 0px;
    top             : 0px;
    margin          : auto;
    border-radius   : 100%;
    border          : 2px solid #f5a0a0;
    z-index         : 2;
}

.content>.right-menu .item.active::before {
    content         : "";
    height          : 20px;
    width           : 20px;
    left            : -20px;
    background-color: var(--theme);
    border          : 2px solid var(--theme);
}


.content>.right-menu .item::after {
    content         : "";
    height          : 20px;
    width           : 20px;
    position        : absolute;
    left            : -20px;
    bottom          : 0px;
    top             : 0px;
    margin          : auto;
    border-radius   : 100%;
    background-color: rgba(251, 13, 21, 0.18);
    z-index         : 1;
}

.content>.right-menu .item.active::after {
    opacity: 0;
}

.menu-title {
    font-size    : 32px;
    font-weight  : bold;
    color        : #000;
    margin-bottom: 35px;
}

.content>.left-menu {
    width                    : 250px;
    background               : rgba(243, 243, 243, 0.49);
    /* height                : calc(100% - 100px); */
    position                 : fixed;
    /* left                     : 0px; */
    padding                  : 20px;
    font-family              : SourceHanSansCN-Normal, SourceHanSansCN;
    -webkit-font-smoothing   : antialiased;
}

.content>.left-menu li {
    padding      : 8px 0px;
    padding-right: 20px;
    margin-bottom: 15px;
    position     : relative;
    cursor       : pointer;
}

.content>.left-menu li a {
    color: #666;
}

.content>.left-menu li:hover a {
    color: var(--theme);
}

.content>.left-menu li b {
    display  : none;
    position : absolute;
    right    : 10px;
    top      : -1px;
    font-size: 27px;
}

.content>.left-menu li.active {
    background-color: var(--theme);
}

.content>.left-menu .active b {
    display: block
}

.content>.left-menu li.active a {
    color: #FFF;
}

.content>.left-menu li.active span {
    color: var(--theme);
}


.content>.left-menu span {
    font-size   : 12px;
    margin-right: 5px;
    font-family : fangsong;
}