html{height:100%;}
body{height:100%;background-color: #F8FAFF;margin:0;padding:0;}
*{font-size: 14px;font-family: 'Microsoft YaHei','Courier New', Courier, monospace;color:#333333;}
.root{width:1200px;margin:0 auto;padding:0;display:flex;flex-direction: column;}
.titlebar{padding:10px 0;display: flex;flex-direction: row;}
.titlebar > div{flex-grow: 1;}
.titlebar-logo{display:inline-flex;flex-direction: row;align-items: center;padding:0.2em 0;}
.titlebar-logo:hover{background-color: #3A5B7F;padding:0.2em 0.5em;border-radius: 0.5em;}
.titlebar-logo:hover span{color:#fff;}
.titlebar-logo:hover a{color:#fff;}
.titlebar-logo span{font-size:18pt !important;margin-right: 0.5em;color:#999999;}
.titlebar-logo a{text-decoration: none;}
.titlebar-profile{display: inline-flex;flex-direction: row;align-items: center;justify-content: right;margin-right: 1em;padding:0.2em 0;}
.titlebar-profile:hover{background-color: #3A5B7F;padding:0.2em 0.5em;border-radius: 0.5em;}
.titlebar-profile:hover span{color:#fff;}
.titlebar-profile:hover a{color:#fff;}
.titlebar-profile span{font-size:18pt !important;margin-right: 0.5em;color:#999999;}
.titlebar-profile a{text-decoration: none;}

.container{display: flex;flex-direction: row;justify-content: space-between;}
.nav{width:300px;display: flex;flex-direction: column;margin-right: 24px;flex-basis: 300px;flex-shrink: 0;}
.nav-item{width:100%;border-radius: 12px;background-color: #ffffff;box-shadow: 1px 1px 6px #c0c0c0;margin-bottom: 2em; }
.nav-item-content{padding:12px;display:flex;flex-direction: column;}
.profile-item{background-image:url('../img/profile_background.webp');background-size: cover;min-height: 300px;}
.head-icon{width:96px;height:96px;border:none;outline: none;border-radius: 48px;margin:0.5em auto 0 auto;}
.name-item{font-size:18px;font-weight: 700;margin-top:2em;text-align: center;}
.subname-item{font-size:16px;font-weight: 700;margin-top:0.5em;text-align: center;}
.summary-container{margin-top:1.5em;display: flex;flex-direction: row;padding-bottom: 0.5em;}
.summary-item{display: flex;flex-direction: column;flex-grow: 1;text-align: center;border-right: 2px solid #c0c0c0;}
.summary-item label{font-size:16px;font-weight: 800;margin-bottom: 0.5em;color:#606060;}
.summary-item span{font-size:16px;font-weight: 800;color:#606060;}

.content{display: flex;flex-direction: column;flex-grow: 1;flex-shrink: 0;width:0;}
.main-bar{min-height:300px;background-image: url("../img/mainbar_background.webp");background-size: cover; border-radius: 12px;margin-bottom: 2em;}
.main-bar-content{padding:12px;display: flex;flex-direction: column;justify-content: center;color:#ffff00;height:90%;}

.tag-block{padding:0.5em;background-color: rgba(255,255,255,0.5);display: inline-block;border-radius: 8px;box-shadow: 2px 2px 4px #fff;}

.footer{display: flex;flex-direction: column;min-height: 96px;justify-content: center;background-color:#fff;}
.beian{line-height: 2em;text-align: center;}
.beian *{color:#606060;}
.beian a{text-decoration: none;}
.beian a:hover{color:#516bff;}

.category{margin-bottom: 0.5em;}
.category-title{ font-size:16px;font-weight: 700;border-bottom: 1px dotted #c0c0c0;padding:0.2em 0;}
.category a{line-height:1.5;}
.category ul{padding:0;list-style: none;}
.category ul li{padding: 1em 0;border-bottom: 1px dotted #efefef;}
.category ul li:last-child{border-bottom: none;}
.content-title{padding:0.4em 0;font-size:14px;}

.content-summary{display:flex;flex-direction: row;align-items: center;}
.content-summary label{font-size:12px;color:#606060;flex-grow: 1;}
.content-summary span{font-size:12px;color:#606060;flex-grow: 1;text-align: right;}

.no-article{padding:2em;text-align: center;font-size:12px;color:#606060;}

.label-ui li{display: inline-block;padding:0 !important;border:none !important;}
.label-ui li a{padding:0.5em 1em;display: block;text-decoration: none;}
.label-ui li a:hover{padding:0.5em 1em;display: block;text-decoration: underline;}
.label-selected{background-color: #3A5B7F;border-radius:0.3em;color:#fff !important}

.special-ui li{display: flex;align-items: center;}
.special-ui li a{flex-grow: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;flex-shrink: 0;width:0;}
.special-ui li span{flex-grow: 0;flex-basis: 4em;font-size:10pt; flex-shrink: 0;color:#606060;text-align: right;}