#navigate{
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 220px;
    padding: 0.6%;
    background-color: #f5f4f4;
    border-right: solid;
    border-right-width: 1px;
    border-right-color: #ececeb;
}
#content{
    position: fixed;
    left: 250px;
    top: 0;
    bottom: 0;
    width: calc(88% - 250px);
    height: auto;
    margin: 0;
    padding: 6% 6% 6% 6%;
    overflow-x: hidden;
    overflow-y: scroll;
}
#avatar{
    float:left;
    height: 24px;
    border-radius: 20%;
}
#title{
    float:left;
    height: 24px;
    line-height: 24px;
    color: #5e5d5b;
    margin: 0 7% 0 7%;
    font-size: 18px;
}
#keyBox{
    width: 100%;
    position: relative;
    top: 0;
}
body{
    background-color: #fdfdfe;
}
.key {
    position: relative;
    height: 32px;
    width: 100%;
    border: none;
    padding: 8px 16px 8px 34px;
    margin: 1px 0;
    text-align: left;
    font-size: 13px;
    line-height: 14px;
    border-radius: 6px;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}
.key::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    }
.keySelected{
    background-color: #efeeee;
    color: #5e5d5b;
}
.keyNorm{
    background-color: #f5f4f4;
    color: #5e5d5b;
}
.key:hover {
    background-color: #efeeee;
    color: #32302d;
}
#avatarBtn {
    position: relative;
    height: 36px;
    width: 100%;
    border: none;
    padding: 8px 16px 8px 36px;
    margin: 0;
    text-align: left;
    font-size: 16px;
    line-height: 17px;
    border-radius: 6px;
    -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    cursor: pointer;
}
#avatarBtn::before{
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 4px;
}
#focusBtn::before{
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0iIzVlNWQ1YiIgY2xhc3M9ImJpIGJpLXN0YXJzIiB2aWV3Qm94PSIwIDAgMTYgMTYiIGlkPSJpY29uLXN0YXJzLTE1Ij48cGF0aCBkPSJNNy42NTcgNi4yNDdjLjExLS4zMy41NzYtLjMzLjY4NiAwbC42NDUgMS45MzdhMi44OSAyLjg5IDAgMCAwIDEuODI5IDEuODI4bDEuOTM2LjY0NWMuMzMuMTEuMzMuNTc2IDAgLjY4NmwtMS45MzcuNjQ1YTIuODkgMi44OSAwIDAgMC0xLjgyOCAxLjgyOWwtLjY0NSAxLjkzNmEuMzYxLjM2MSAwIDAgMS0uNjg2IDBsLS42NDUtMS45MzdhMi44OSAyLjg5IDAgMCAwLTEuODI4LTEuODI4bC0xLjkzNy0uNjQ1YS4zNjEuMzYxIDAgMCAxIDAtLjY4NmwxLjkzNy0uNjQ1YTIuODkgMi44OSAwIDAgMCAxLjgyOC0xLjgyOGwuNjQ1LTEuOTM3ek0zLjc5NCAxLjE0OGEuMjE3LjIxNyAwIDAgMSAuNDEyIDBsLjM4NyAxLjE2MmMuMTczLjUxOC41NzkuOTI0IDEuMDk3IDEuMDk3bDEuMTYyLjM4N2EuMjE3LjIxNyAwIDAgMSAwIC40MTJsLTEuMTYyLjM4N0ExLjczNCAxLjczNCAwIDAgMCA0LjU5MyA1LjY5bC0uMzg3IDEuMTYyYS4yMTcuMjE3IDAgMCAxLS40MTIgMEwzLjQwNyA1LjY5QTEuNzM0IDEuNzM0IDAgMCAwIDIuMzEgNC41OTNsLTEuMTYyLS4zODdhLjIxNy4yMTcgMCAwIDEgMC0uNDEybDEuMTYyLS4zODdBMS43MzQgMS43MzQgMCAwIDAgMy40MDcgMi4zMWwuMzg3LTEuMTYyek0xMC44NjMuMDk5YS4xNDUuMTQ1IDAgMCAxIC4yNzQgMGwuMjU4Ljc3NGMuMTE1LjM0Ni4zODYuNjE3LjczMi43MzJsLjc3NC4yNThhLjE0NS4xNDUgMCAwIDEgMCAuMjc0bC0uNzc0LjI1OGExLjE1NiAxLjE1NiAwIDAgMC0uNzMyLjczMmwtLjI1OC43NzRhLjE0NS4xNDUgMCAwIDEtLjI3NCAwbC0uMjU4LS43NzRhMS4xNTYgMS4xNTYgMCAwIDAtLjczMi0uNzMyTDkuMSAyLjEzN2EuMTQ1LjE0NSAwIDAgMSAwLS4yNzRsLjc3NC0uMjU4Yy4zNDYtLjExNS42MTctLjM4Ni43MzItLjczMkwxMC44NjMuMXoiPjwvcGF0aD48L3N2Zz4=");
}
#categoryBtn::before{
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgdmlld0JveD0iMCAwIDE2IDE2IiBpZD0iaWNvbi1saXN0LXVub3JkZXJlZC0xNi0yOCIgZmlsbD0iIzVlNWQ1YiI+PHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMiA0YTEgMSAwIDEgMCAwLTIgMSAxIDAgMCAwIDAgMnptMy43NS0xLjVhLjc1Ljc1IDAgMCAwIDAgMS41aDguNWEuNzUuNzUgMCAwIDAgMC0xLjVoLTguNXptMCA1YS43NS43NSAwIDAgMCAwIDEuNWg4LjVhLjc1Ljc1IDAgMCAwIDAtMS41aC04LjV6bTAgNWEuNzUuNzUgMCAwIDAgMCAxLjVoOC41YS43NS43NSAwIDAgMCAwLTEuNWgtOC41ek0zIDhhMSAxIDAgMSAxLTIgMCAxIDEgMCAwIDEgMiAwem0tMSA2YTEgMSAwIDEgMCAwLTIgMSAxIDAgMCAwIDAgMnoiPjwvcGF0aD48L3N2Zz4=");
}
#topUpBtn::before{
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0iIzVlNWQ1YiIgY2xhc3M9ImJpIGJpLWFycm93LXVwLWNpcmNsZS1maWxsIiB2aWV3Qm94PSIwIDAgMTYgMTYiIGlkPSJpY29uLWFycm93LXVwLWNpcmNsZS1maWxsLTU5Ij48cGF0aCBkPSJNMTYgOEE4IDggMCAxIDAgMCA4YTggOCAwIDAgMCAxNiAwem0tNy41IDMuNWEuNS41IDAgMCAxLTEgMFY1LjcwN0w1LjM1NCA3Ljg1NGEuNS41IDAgMSAxLS43MDgtLjcwOGwzLTNhLjUuNSAwIDAgMSAuNzA4IDBsMyAzYS41LjUgMCAwIDEtLjcwOC43MDhMOC41IDUuNzA3VjExLjV6Ij48L3BhdGg+PC9zdmc+");
}
#copyrightBtn::before{
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0iIzVlNWQ1YiIgY2xhc3M9ImJpIGJpLWJhZGdlLWNjLWZpbGwiIHZpZXdCb3g9IjAgMCAxNiAxNiIgaWQ9Imljb24tYmFkZ2UtY2MtZmlsbC0wIj48cGF0aCBkPSJNMiAyYTIgMiAwIDAgMC0yIDJ2OGEyIDIgMCAwIDAgMiAyaDEyYTIgMiAwIDAgMCAyLTJWNGEyIDIgMCAwIDAtMi0ySDJ6bTMuMDI3IDQuMDAyYy0uODMgMC0xLjMxOS42NDItMS4zMTkgMS43NTN2Ljc0M2MwIDEuMTA3LjQ4IDEuNzI3IDEuMzE5IDEuNzI3LjY5IDAgMS4xMzgtLjQzNSAxLjE4Ni0xLjA1SDcuMzZ2LjExNGMtLjA1NyAxLjE0Ny0xLjAyOCAxLjkzOC0yLjM0MiAxLjkzOC0xLjYxMyAwLTIuNTE4LTEuMDI4LTIuNTE4LTIuNzI5di0uNzQ3QzIuNSA2LjA1MSAzLjQxNCA1IDUuMDE4IDVjMS4zMTggMCAyLjI5LjgxMyAyLjM0MiAydi4xMUg2LjIxM2MtLjA0OC0uNjM4LS41MDUtMS4xMDgtMS4xODYtMS4xMDh6bTYuMTQgMGMtLjgzMSAwLTEuMzE5LjY0Mi0xLjMxOSAxLjc1M3YuNzQzYzAgMS4xMDcuNDggMS43MjcgMS4zMTggMS43MjcuNjkgMCAxLjEzOS0uNDM1IDEuMTg3LTEuMDVIMTMuNXYuMTE0Yy0uMDU3IDEuMTQ3LTEuMDI4IDEuOTM4LTIuMzQyIDEuOTM4LTEuNjEzIDAtMi41MTgtMS4wMjgtMi41MTgtMi43Mjl2LS43NDdjMC0xLjcuOTE0LTIuNzUxIDIuNTE4LTIuNzUxIDEuMzE4IDAgMi4yOS44MTMgMi4zNDIgMnYuMTFoLTEuMTQ3Yy0uMDQ4LS42MzgtLjUwNS0xLjEwOC0xLjE4Ny0xLjEwOHoiPjwvcGF0aD48L3N2Zz4=");
}
#navHr{
    margin: 15px auto 5px;
    width: 95%;
    background-color: #cbcbcb;
    height: 1px;
    border: none;
}
#navTag{
    color: #91918e;
    font-size: 12px;
    line-height: 12px;
    padding: 2px;
}

#infoHr {
    margin: 45px auto 45px 0;
    width: 95%;
    background-color: #ececeb;
    height: 1px;
    border: none;
}
.titleInfo{
    margin-top: 0;!important;
}
.timeInfo{
    padding-left: 3px;
    color: #a7a49d;
}
#footInfo{
    position: relative;
    height: 32px;
    padding: 2px 2px 2px 17px;
    margin: 1px 0;
    text-align: left;
    font-size: 13px;
    line-height: 14px;
    color: #a7a49d;
}
#footInfo::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0iI2E3YTQ5ZCIgY2xhc3M9ImJpIGJpLWFycm93LWRvd24tcmlnaHQtc3F1YXJlIiB2aWV3Qm94PSIwIDAgMTYgMTYiIGlkPSJpY29uLWFycm93LWRvd24tcmlnaHQtc3F1YXJlLTIwIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xNSAyYTEgMSAwIDAgMC0xLTFIMmExIDEgMCAwIDAtMSAxdjEyYTEgMSAwIDAgMCAxIDFoMTJhMSAxIDAgMCAwIDEtMVYyek0wIDJhMiAyIDAgMCAxIDItMmgxMmEyIDIgMCAwIDEgMiAydjEyYTIgMiAwIDAgMS0yIDJIMmEyIDIgMCAwIDEtMi0yVjJ6bTUuODU0IDMuMTQ2YS41LjUgMCAxIDAtLjcwOC43MDhMOS4yNDMgOS45NUg2LjQ3NWEuNS41IDAgMSAwIDAgMWgzLjk3NWEuNS41IDAgMCAwIC41LS41VjYuNDc1YS41LjUgMCAxIDAtMSAwdjIuNzY4TDUuODU0IDUuMTQ2eiI+PC9wYXRoPjwvc3ZnPg==");
}
#focusInfoLatest{
    position: relative;
    height: 32px;
    padding: 2px 2px 2px 17px;
    margin: 1px 0;
    text-align: left;
    font-size: 13px;
    line-height: 14px;
    color: #a7a49d;
}
#focusInfoLatest::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI0NCIgZmlsbD0iI2E3YTQ5ZCIgY2xhc3M9ImJpIGJpLWNsb2NrIiB2aWV3Qm94PSIwIDAgMTYgMTYiIGlkPSJpY29uLWNsb2NrLTQiPjxwYXRoIGQ9Ik04IDMuNWEuNS41IDAgMCAwLTEgMFY5YS41LjUgMCAwIDAgLjI1Mi40MzRsMy41IDJhLjUuNSAwIDAgMCAuNDk2LS44NjhMOCA4LjcxVjMuNXoiPjwvcGF0aD48cGF0aCBkPSJNOCAxNkE4IDggMCAxIDAgOCAwYTggOCAwIDAgMCAwIDE2em03LThBNyA3IDAgMSAxIDEgOGE3IDcgMCAwIDEgMTQgMHoiPjwvcGF0aD48L3N2Zz4=");
}
#articleFrame{
    display: flex;
    padding-top: 24px;
    padding-right: 0;
    display: -webkit-flex; /* Safari */
    flex-direction: row;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE 和 Edge */
    /* flex-wrap: wrap; 不换行*/
}
#articleFrame::before {
    content: "";
    position: absolute;
    width: 8px;
    height: 160px;
    background: linear-gradient(to right, #fdfdfe, rgba(253, 253, 254, 0));
}
#articleFrame::after {
    content: "";
    position: absolute;
    right: calc(6% + 15px);
    width: 24px;
    height: 160px;
    background: linear-gradient(to right, rgba(253, 253, 254, 0), #fdfdfe);
}
#articleFrame::-webkit-scrollbar {
    display: none; /* Webkit 浏览器 */
}
.articleBox{
    /* display: flex;*/
    border: #f1f1f1 solid 2px;
    padding: 20px;
    width: 120px;
    border-radius: 16px;
    margin: 0 8px 16px 8px;
    box-shadow: 0px 0px 20px 4px rgba(211, 211, 211, 0.1);
    flex-shrink: 0;/* 空间不足滚动而不是缩小 */
}
.articleBox span{
    font-size: 14px;
}
.articleBox img{
    height: 24px;
    width: 24px;
    margin: 24px 0 4px;
}
#guideFrame{
    margin: 8px;
    padding: 24px 16px;
    text-align: center;
    border: #f1f1f1 dotted 3px;
    box-shadow: 0px 0px 20px 4px rgba(211, 211, 211, 0.1);
    border-radius: 16px;
}
#focusInfoGuide{
    position: relative;
    height: 32px;
    padding: 2px 2px 2px 17px;
    margin: 1px 0;
    text-align: left;
    font-size: 13px;
    line-height: 14px;
    color: #a7a49d;
}
#focusInfoGuide::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBpZD0iaWNvbi1kb2N1bWVudC1kdXBsaWNhdGUtMiI+PHBhdGggZD0iTTggN3Y4YTIgMiAwIDAgMCAyIDJoNk04IDdWNWEyIDIgMCAwIDEgMi0yaDQuNTg2YTEgMSAwIDAgMSAuNzA3LjI5M2w0LjQxNCA0LjQxNGExIDEgMCAwIDEgLjI5My43MDdWMTVhMiAyIDAgMCAxLTIgMmgtMk04IDdINmEyIDIgMCAwIDAtMiAydjEwYTIgMiAwIDAgMCAyIDJoOGEyIDIgMCAwIDAgMi0ydi0yIiBzdHJva2U9IiNhN2E0OWQiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48L3BhdGg+PC9zdmc+");
}
#guideFrame span{
    color: #A7A49D;
}
.categoryListIcon{
    width: 16px;
    height: 16px;
}
.categoryListTitle{
    font-size: 16px;
    line-height: 16px;
    text-decoration: underline 1px #dddddd;!important;
}
.categoryListArticle{
    padding: 2px 6px;
    text-decoration: none;
    color: #37352f;
    margin-bottom: 4px;
    border: none;!important;
    -webkit-transition-duration: 0.1s; /* Safari */
    transition-duration: 0.1s;
}
#categoryList{
    display: flex;
    flex-direction: column-reverse;
    cursor: pointer;
}
.categoryListArticle:hover{
    display: flex;
    background-color: #f1f1f2;
    border-radius: 6px;
    flex-direction: column-reverse;
}