@charset "utf-8";
body { min-width: 1200px; background: #EAEDF1; }
#layout { display: flex; flex-direction: column; min-height: 100vh; }
#header { padding: 0 20px; background: #0C3458; line-height: 80px; }
#header .name { font-size: 26px; color: #FFF; font-weight: bold; }
#header .menu a { color: #FFF; margin-left: 10px;  }
#main {flex: 1; padding: 0 10px;}
#content { display: flex; padding: 10px 0;}
#footer { background: #0C3458; padding: 20px; color: #FFF; }

#left { width: 140px; background: #FFF; margin-right: 10px; box-shadow: 0 0 10px #CCC; }
#left dl dt { background: #0C3458; height: 40px; line-height: 40px; color: #FFF; text-align: center; font-size: 18px; font-weight: bold; }
#left dl dd a { display: block; color: #0C3458; height: 40px; line-height: 40px;  text-align: center; border-bottom: 1px solid #EEE; }
#left dl dd a .icon { color: #0C3458; }
#left dl dd a.current , #left dl dd a:hover { border-left: 10px solid #0C3458; border-right: 10px solid #0C3458; transition: all .5s ease 0s; }


#right { flex: 1; box-shadow: 0 0 10px #CCC; }
.hd-1 { font-size: 18px; font-weight: bold; height: 40px; line-height: 40px; background: #0C3458; padding: 0 10px; color: #FFF; }
.bd-1 { padding: 20px; background: #FFF; }

.page_show { margin: 20px 0; }
.page_show a { display: inline-block; height: 40px; line-height: 40px; min-width: 40px; text-align: center; background: #F2F2F2; margin-right: 2px; }
.page_show a:hover, .page_show a.page_current { background: #0A8; color: #FFF; }

.login { background: #FFF; width: 360px; padding: 50px; box-shadow: 0 0 10px #CCC; border-radius: 5px; border: 1px solid #EEE; z-index: 1984;}
.login .name { text-align: center; font-size: 32px; font-weight: bold; }
.login .version { text-align: center; font-size: 12px; padding: 10px 0; color: #999; font-style: italic; }