#post{margin:4.5rem 0;}
#post .menu{position:sticky;top:7.5rem;}
#post .menu .title{font-size:1.5rem;}
#post .menu .tree{margin-top:2rem;}
#post .menu .tree a.collapse-title{position:relative;display:block;width:100%;margin-top:2rem;}
#post .menu .tree a.collapse-title::after{content:"\f105";font-family: "Font Awesome 5 Pro", sans-serif;position:absolute;top:0;right:0;}
#post .menu .tree a.collapse-title:not(.collapsed)::after{content:"\f107"}
#post .menu .tree .collapse,
#post .menu .tree .collapsing{padding-top:2rem;}
#post .menu .tree .collapse li,
#post .menu .tree .collapsing li{padding-top:1.25rem;}
#post .menu .tree .collapse li:first-child,
#post .menu .tree .collapsing li:first-child{padding-top:unset;}
#post .menu .tree .collapse li a,
#post .menu .tree .collapsing li a{color:#838c9a;}
#post .menu .tree .collapse li a.active,
#post .menu .tree .collapsing li a.active{color:#3899ec;}
#post .menu .search{}
#post .list{position:relative;min-height:50rem;}
#post .list a.item{display:block;margin-top:3rem;}
#post .list a.item img{width:100%;border-radius:.75rem;transition:transform .3s ease-in-out;}
#post .list a.item p{padding-top:.5rem;}
#post .list a.item div{padding-top:.5rem;font-size:.75rem;color:#667080;overflow:hidden;}
#post .list a.item div span.show{float:left;}
#post .list a.item div span.time{float:right;}
#post .detail{position:relative;padding-top:3rem;}
#post .detail .title{padding-bottom:3rem;width:100%;border-bottom:1px solid #e3e3e2;}
#post .detail .title .meta{padding-top:1rem;}
#post .detail .title .meta span{margin-right:1rem;color:#667080;}
#post .detail .content{padding-top:3rem;line-height:2rem;}
@media only screen and (max-width:768px) {
    #post{margin:3rem 0;}
    #post .menu{top:5rem;}
    #post .list a.item{margin-top:2rem;}
    #post .detail{padding-top:2rem;}
    #post .detail .title{padding-bottom:2rem;}
    #post .detail .content{padding-top:2rem;}
}