body{
  margin:0;
  padding:0;
  height:1000px;
}

#header {
 background:#333;
 left:50%;
  width:500px;
  padding:20px;
  box-sizing:border-box;
  color:#fff;
  position:relative;
  z-index:1;
}

#menu {
  position:fixed;
  z-index:99;
  left:50%;
  width:500px;
}

.f-menu {
  list-style:none;
  display: flex;
  margin:0;
  padding:10px;
}
.f-menu li {
  margin: 0 3px;
}
.f-menu li a {
  background:#10099A;
  display:block;
  padding:10px 20px;
  color: #fff;
  text-decoration:none;
}
.f-menu li:first-child {
  margin-right:0px;
  margin-left:auto;
}
.f-menu li:first-child a {
  background:#10099A;
  opacity:0.5;
}

#t-menu {
  bottom: 30px;
  position:fixed;
  z-index:9;
  left:50%;
  width:500px;
}

.page-top {
  list-style:none;
  display: flex;
  margin:0;
  padding:10px;
}
.page-top li {
  margin: 0 3px;
}
.page-top li a {
font-size: 0.8em;
  background:#10099A;
  display:block;
  padding:10px 20px;
  color: #fff;
  text-decoration:none;
}
.page-top li:first-child {
  margin-right:0px;
  margin-left:auto;
}
.page-top li:first-child a {
  background:#10099A;
  opacity:0.7;
}
.page-top a:hover {
    text-decoration: none;
    background: #999;
}