body {
  font-family: "Avenir Next";
}

li {
  list-style: none;
}

p {
  font-size: 18px;
  color: #555;
}

a {
  text-decoration: none
}

a:hover {
  color: #00a9c0;
}

a:visited {
  color: #00c800;
}

.header {
  background-color: #fff;
  color: #000;
  height: 120px;
}

.header-logo {
  float: left;
}

.header-logo img {
  float: left;
  width: 170px;
  height: 80px;
  padding: 20px 20px;
}

.header-logo p {
  float: left;
  padding-top: 30px;
}

.header-list {
  float: right;
  padding: 30px 40px;
}

.main {
  width: 80%;
  margin: 0 auto;
  padding: 50px 0px;
}

h2{
  background-color: #ddd;
  font-size: 28px;
  padding: 15px;
}

.contents {
  width: 90%;
  margin: 50px auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  border-top: solid 1px #ddd;
}

th{
  background: #fafafa;
  text-align: center;
  width: 30%;
}


th,td {
  border-bottom: 1px solid #ddd;
  padding: 10px;      /* 余白指定 */
  line-height: 31px;
}

.contact {
  width: 80%;
}

.footer {
  background-color: #fff;
  color: #000;
  height: 120px;
  padding: 40px;
}

.footer-logo {
  float: left;
  width: 100px;
  height: 47px;
  padding: 20px 20px;
}

.footer-copyright {
  float: right;
  padding: 30px 20px;
}

.footer-copyright p {
  font-size: 0.9em;
}

@media screen and (max-width:670px) { 
.header {
  height: 100px;
}

.main {
  padding: 0px;
  width:100%;
}

.header-logo img {
  float: left;
  width: 100px;
  height: 47px;
  padding: 10px 20px 10px 20px;
}

.header-logo p {
  font-size: 0.9em;
  float: left;
  padding-top: 10px;
}

.header-list{
  padding: 0px 20px;
}

table {
  table-layout: auto;
}
.footer {
  padding: 20px;
}
}