* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; font-size: 15px; }

#header { position: fixed; top: 0; width: 100%; height: 80px; background-color: lightyellow; z-index: 1000; }
#header > #h_top { position: relative; width: 1000px; height: 40px; margin: 0 auto; }
#header > #h_top > #topLogo { width: 500px; height: 40px; float: left; line-height: 40px; font-weight: bold; padding-left: 2px; }
#header > #h_top > #topLogo > #pre { font-size: 24px; letter-spacing: 4px; }
#header > #h_top > #login { width: 400px; height: 40px; float: right; text-align: right; line-height: 40px; }
#header > #h_top > #login > input { padding: 2px; }
#header > #h_top > #login > a { text-decoration: none; color: skyblue; }
#header > #h_top > #login > a:hover { text-decoration: underline; color: red; font-weight: bold; }
#header > #h_bottom { position: relative; width: 1000px; height: 32px; margin: 0 auto; background-color: #f0f0f0; border-radius: 5px; display: flex; justify-content: flex-end; align-items: center; box-shadow: 2px 2px 2px; }

.mainMenu li { list-style: none; width: calc(1000px / 6); text-align: center; font-size: 15px; }
.mainMenu a { text-decoration: none; color: #0099ff; display: block; height: 32px; line-height: 32px; }
.mainMenu > li { position: relative; float: left; }
.mainMenu > li:hover { background-color: black; }
.mainMenu > li:hover > a { color: yellow; font-weight: bold; }
.mainMenu > li:hover .subMenu { transform: scaleY(1); }

.subMenu { position: absolute; box-shadow: 1px 1px 1px; background-color: #f0f0f0; overflow: hidden; transform-origin: top; transform: scaleY(0); transition: transform 0.3s; }
.subMenu > li:hover > a { background-color: #555555; color: yellow; font-weight: bold; }

#mainFrame { width: 100vw; height: calc(100% - 80px - 30px); margin-top: 80px; overflow-x: hidden; overflow-y: auto; }

#footer { position: fixed; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: lavender; }