body{background-color:#f6f7f8}.main{position:relative;overflow:hidden;padding:30px 0;min-height:calc(100vh - 636px)}.main .layout-center{padding:16px;background-color:#fff}.main .container{margin-top:20px;display:grid;grid-template-columns:300px 1fr;gap:10px}.main .container .menu-container{border:1px solid var(--color-border);border-radius:6px 6px 0 0}.main .container .menu-container .menu-header{text-align:center;color:#fff;font-size:26px;line-height:58px;font-weight:700;background-color:var(--color-blue);border-radius:6px 6px 0 0}.main .container .menu-container .menu-item,.main .container .menu-container .menu-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}.main .container .menu-container>.menu-list{padding:10px;display:grid;grid-template-columns:repeat(1, 1fr);gap:10px;transition:all 1s}.main .container .menu-container>.menu-list>.menu-item{padding:0 20px;text-align:center;line-height:50px;background-color:#f3f5f9;border-radius:6px;color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-item:hover,.main .container .menu-container>.menu-list>.menu-item.checked{color:#fff;background-color:var(--color-blue)}.main .container .menu-container>.menu-list .checked{max-height:100% !important}.main .container .menu-container>.menu-list>.menu-list{display:grid;grid-template-columns:repeat(1, 1fr);background-color:#f3f5f9;border-radius:6px;overflow:hidden;transition:all .5s;max-height:50px}.main .container .menu-container>.menu-list>.menu-list>.menu-title{padding:0 20px;text-align:center;line-height:50px;height:50px;border-radius:6px;color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-list>.menu-title:hover,.main .container .menu-container>.menu-list>.menu-list>.menu-title.checked{color:#fff;background-color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-list>.menu-item{padding:0 20px 0 40px;line-height:40px;background-color:#f3f5f9}.main .container .menu-container>.menu-list>.menu-list>.menu-item::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:6px;background-color:var(--color-gray);transform:translateY(-3px)}.main .container .menu-container>.menu-list>.menu-list>.menu-item:hover,.main .container .menu-container>.menu-list>.menu-list>.menu-item.checked{color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-list>.menu-item:hover::before,.main .container .menu-container>.menu-list>.menu-list>.menu-item.checked::before{background-color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-list>.menu-list{display:grid;grid-template-columns:repeat(1, 1fr);background-color:#f3f5f9;overflow:hidden;transition:all .5s;max-height:40px}.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-item{padding:0 20px 0 70px;line-height:40px;height:40px;border-radius:6px}.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-item:hover,.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-item.checked{color:#fff;color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-title{padding:0 20px 0 40px;line-height:40px;height:40px}.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-title::before{content:"";display:inline-block;width:6px;height:6px;margin-right:10px;border-radius:6px;background-color:var(--color-gray);transform:translateY(-3px)}.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-title:hover,.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-title.checked{color:var(--color-blue)}.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-title:hover::before,.main .container .menu-container>.menu-list>.menu-list>.menu-list>.menu-title.checked::before{background-color:var(--color-blue)}.main .container .content-container .title-box{background-color:#f3f5f9;font-size:24px;font-weight:700;color:var(--color-blue);border-radius:6px}.main .container .content-container .title-box span{display:inline-block;padding:8px 20px;border-bottom:3px solid var(--color-blue)}.main .container .content-container .article-container li:nth-child(5n)::after{content:"";display:block;border-bottom:1px dashed var(--color-border);margin:20px 0}.main .container .content-container .article-container .article-list{padding:20px}.main .container .content-container .article-container .article-list a{display:grid;grid-template-columns:1fr 100px;gap:10px;line-height:40px}.main .container .content-container .article-container .article-list a p:first-child{padding-left:20px;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main .container .content-container .article-container .article-list a p:first-child::before{content:"";position:absolute;top:50%;left:0;width:6px;height:6px;background-color:var(--color-border);border-radius:6px;transform:translateY(-50%)}.main .container .content-container .article-container .article-list a p:last-child{text-align:right;color:var(--color-gray)}.main .container .content-container .article-container .article-list a:hover p{color:var(--color-blue)}.main .container .content-container .article-container .article-list a:hover p::before{background-color:var(--color-blue)}@media screen and (max-width: 768px){.main .container{grid-template-columns:repeat(1, 1fr)}}