/***** 導覽列菜單 *****/

.navbar {
  width: 100%;

  height: 60px;

  background: #000;

  position: fixed;

  top: 0;

  z-index: 100;
}

.logo {
  height: 40px;

  position: absolute;

  top: 0;

  left: 20px;

  bottom: 0;

  margin: auto;
}

.logo img {
  width: auto;

  height: 40px;
}

.navbar_nav {
  width: 250px;

  height: calc(100vh - 60px);

  background: #000;

  position: fixed;

  top: 60px;

  right: -250px;

  transition: 0.5s;
}

.navbar_nav a {
  display: block;

  text-decoration: none;

  color: #fff;

  padding: 20px;

  border-bottom: 1px solid #818181;

  text-align: center;
}

.menu_btn {
  display: none;
}

.menu_btn {
  width: 50px;

  height: 50px;

  background: #000;

  position: absolute;

  top: 5px;

  right: 10px;

  margin: auto;
}

.menu_btn span {
  opacity: 0;

  width: 1px;

  height: 1px;
}

.menu_btn::after {
  content: "";

  position: absolute;

  width: 36px;

  height: 2px;

  left: 7px;

  background: #fff;

  top: 0;

  bottom: 0;

  margin: auto;

  box-shadow: 0 10px 0 #fff, 0 -10px 0 #fff;
}

#menu_control {
  opacity: 0;

  position: absolute;
}

#menu_control:checked ~ .navbar_nav {
  right: 0;
}

@media only screen and (max-width: 768px) {
  .logo {
    height: 30px;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 20px;

    margin: auto;
  }

  .logo img {
    width: auto;

    height: 30px;
  }

  .menu_btn {
    width: 50px;

    height: 50px;

    position: absolute;

    top: 5px;

    right: 10px;

    margin: auto;

    display: block;

    cursor: pointer;
  }

  .menu_btn span {
    opacity: 0;

    width: 1px;

    height: 1px;
  }

  .menu_btn::after {
    content: "";

    position: absolute;

    width: 36px;

    height: 2px;

    left: 7px;

    background: #fff;

    top: 0;

    bottom: 0;

    margin: auto;

    box-shadow: 0 10px 0 #fff, 0 -10px 0 #fff;
  }
}

@media (min-width: 768px) {
  .navbar_nav {
    width: auto;

    height: 60px;

    display: flex;

    top: 0;

    right: 0;
  }

  .navbar_nav a {
    border-bottom: none;
  }
}

/***** 導覽列菜單end *****/

/***** qr *****/

#qr {
  position: fixed;

  z-index: 999;

  right: 30px;

  bottom: 30px;

  width: 80px;

  padding: 5px 10px 10px;

  border-radius: 5px;

  background-color: #fff;

  cursor: pointer;

  text-align: center;

  display: block;
}

@media only screen and (max-width: 768px) {
  #qr {
    display: none;
  }
}

/***** qr end *****/