@charset "utf-8";

#header {
  padding: 27px 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}
#header .hd-bg .logo {
  width: 211px;
  margin-left: 7px;
}

@media (max-width: 767px) {
  #header {
    padding: 20px 0;
    position: fixed;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  #header .container {
    padding: 0 15px;
  }
  #header .hd-bg {
    justify-content: center;
  }
  #header .hd-bg .logo {
    width: 180px;
    margin-left: 0;
  }
  #header .hd-bg .logo img {
    width: 100%;
    height: auto;
  }

  .toogle-menu {
    font-size: 12px;
  }
  .toogle-menu .box {
    width: 24px;
    height: 22px;
    margin-left: 17px;
  }
  .toogle-menu .box span:before {
    transform: translateY(-9px);
    -webkit-transform: translateY(-9px);
  }
  .toogle-menu .box span:after {
    transform: translateY(9px);
    -webkit-transform: translateY(9px);
  }
}