/*====================================
# nav
==================================== */
.main-nav {
  font-family: 'Roboto', 'Noto Sans TC', Arial, '微軟正黑體', '新細明體', Helvetica, sans-serif;
  margin: 10px 20px;
  padding: 15px 100px;
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.80);
  -webkit-backdrop-filter: blur(0.5em);
  backdrop-filter: blur(0.5em);
  box-shadow: rgba(97, 97, 97, 0.1) 0px 3px 8px;
  transition: all .3s ease-in-out;
}

.main-nav:hover {
  background-color: #fff;
}

.nav-item a {
  color: #333;
  border-bottom: 2px solid transparent;
  transition: all .1s ease-in-out;
}

.navbar-light .navbar-toggler {
  border: none;
}

.nav-item a:focus,
.nav-item a:hover {
  color: var(--main);
  border-bottom: 2px solid var(--main);
}

.main-nav .btn-signup {
  background-color: var(--main);
  color: #fff;
  border-bottom: none;
  padding: 8px 25px;
  border-radius: 25px;
  transition: all 0.3s;
}

.main-nav .btn-signup:hover,
.main-nav .btn-signup:focus {
  background-color: var(--C2);
  color: #fff;
  border-bottom: none;
}

.btn-signup-mobile {
  opacity: 1;
  visibility: visible;
  transition-property: opacity, visibility;
  transition-duration: .5s;
  transition-timing-function: ease;
  transition-delay: .5ms;
}

.btn-signup-desktop {
  display: none;
}

@media (max-width:1500px) {
  .main-nav {
    padding: 15px 10px;
  }

  .nav-item a {
    font-size: 18px;
  }
}

@media (max-width: 1300px) {
  .navbar-brand img {
    width: 180px;
  }

  .main-nav {
    padding: 15px 5px;
  }

  .nav-item a {
    font-size: 17px;
  }
}

@media (max-width: 1200px) {
  .main-nav>.container-fluid {
    display: block;
    text-align: center;
  }

  .main-nav .navbar-nav {
    margin: auto;
  }
}

@media (min-width: 992px) {
  .btn-signup-mobile {
    opacity: 0;
    display: none;
    visibility: hidden;
    transition-property: opacity, visibility;
    transition-duration: 0.1ms;
  }

  .btn-signup-desktop {
    display: block;
  }
}

@media (max-width:992px) {
  .main-nav {
    border-radius: 20px;
    padding: 10px 20px;
  }

  .main-nav .nav-item {
    width: 100%;
    text-align: center;
    border-bottom: 1px solid #fff;
  }

  .main-nav .nav-mobile {
    justify-content: center;
    display: flex;
  }

  .nav-item a:focus,
  .nav-item a:hover {
    border-bottom: 2px solid transparent;
  }
}

@media (max-width:576px) {
  .navbar-brand img {
    width: 100px;
  }

  .btn-signup {
    padding: 5px 10px;
  }
}

/*====================================
# openbtn 小版按鈕
==================================== */
.openbtn {
  position: relative;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 5px;
}

/*======= 按鈕內側 =======*/
.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  left: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--main);
  width: 45%;
}

.openbtn span:nth-of-type(1) {
  top: 15px;
}

.openbtn span:nth-of-type(2) {
  top: 23px;
}

.openbtn span:nth-of-type(3) {
  top: 31px;
}

/*======= active 線動作 =======*/

.openbtn.active span:nth-of-type(1),
.openbtn.active span:nth-of-type(3) {
  top: 23px;
}