.header-area {
  display: flex;
  width: 1200px;
  padding: 10px 20px;
  margin: 0 auto;
}
@media (max-width: 835px) {
  .header-area {
    display: none;
  }
}

.site-name {
  font-size: 3.8rem;
  font-weight: 700;
  color: green;
  line-height: 24px;
}

.header-area-menu {
  display: flex;
  align-items: center;
}
.header-area-menu li {
  margin-right: 24px;
}
.header-area-menu a:hover {
  color: rgb(4, 222, 4);
}

.login-button {
  background-color: #ffffff;
  color: #0076DD;
  font-weight: 700;
}

.header-area-responsive {
  display: none;
  padding: 32px 20px 16px;
}
@media (max-width: 835px) {
  .header-area-responsive {
    display: flex;
    justify-content: space-between;
  }
}

.responsive-menu {
  background-color: #ffffff;
  height: 100%;
  display: none;
  position: absolute;
  z-index: 10;
  width: 100%;
  left: 0;
}
.responsive-menu li {
  padding: 20px 30px;
  border-bottom: #F5F8FA 1px solid;
  line-height: 24px;
  font-weight: 700;
}
.responsive-menu li:last-of-type {
  border-bottom: none;
}

.appear {
  display: block;
}/*# sourceMappingURL=header.css.map */