/* Main */
html,
body {
  height: 100%;
  margin: 0;
}

body>.wrapper {
  padding-top: 3rem;
  padding-bottom: 50px;
  /* 內容與footer的距離 */
  min-height: 84.4%;
  /*外層高度%數*/
}

/* font */
h5 {
  font-weight: 700;
}

/* nav-link style */
.nav-link,
.dropdown-item {
  font-size: 1.25rem;
  font-weight: 700;
}

.navbar-dark .navbar-nav .nav-link {
  cursor: pointer;
}

/* footer */
.footer {
  margin-bottom: -50px;
  color: #ffffff;
  background-color: #3F3F3F;
}


@media (max-width: 480px) {
  body>.wrapper {
    padding-top: 1rem;
  }

  /* Header > background */
  .bg-info {
    background-color: #239B85 !important;
  }

  /* Header > dropdown nav-link*/
  .navbar-dark .navbar-nav .show>.nav-link {
    color: #ffffff;
  }

  .navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
  }

  .navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
  }

  .navbar-dark .navbar-nav .nav-link:focus {
    background-color: #3F3F3F;
    color: #ffffff;
  }

  /* Header > dropdown-menu */
  .dropdown-menu {
    border: 0;
    border-radius: 0;
  }

  .dropdown-menu[data-bs-popper] {
    margin-top: 0;
    background-color: #E0EDE6;
  }

  /* Header > dropdown-item */
  .dropdown-item {
    color: #239B85;
    font-weight: 700;
  }

  .dropdown-item:focus {
    color: #3F3F3F;
    background-color: #E0EDE6;
  }
}


@media (min-width: 481px) and (max-width: 1400px) {

  /* Header > background */
  .bg-info {
    background-color: #239B85 !important;
  }

  /* 選單垂直分割線條 */
  .nav-item {
    box-shadow: 2px 0px 0px #ffffff;
  }

  /* Header > dropdown nav-link*/
  .navbar-dark .navbar-nav .show>.nav-link {
    color: #ffffff;
  }

  .navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
  }

  .navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
  }

  .navbar-dark .navbar-nav .nav-link:focus {
    background-color: #3F3F3F;
    color: #ffffff;
  }

  /* Header > dropdown-menu */
  .dropdown-menu {
    border: 0;
    border-radius: 0;
  }

  .dropdown-menu[data-bs-popper] {
    margin-top: 0;
    background-color: #E0EDE6;
  }

  /* Header > dropdown-item */
  .dropdown-item {
    color: #239B85;
    font-weight: 700;
  }

  .dropdown-item:hover {
    color: #3F3F3F;
    background-color: #E0EDE6;
  }

  .dropdown-item:focus {
    color: #3F3F3F;
    background-color: #E0EDE6;
  }
}


@media (min-width: 1401px) {

  /* Header > background */
  .bg-info {
    background-color: transparent !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    background-position: center;
  }

  /* 選單垂直分割線 */
  .nav-item {
    box-shadow: 2px 0px 0px #A9BEC9;
  }

  /* header > 一般選單 */
  .navbar-dark .navbar-nav .active>.nav-link {
    color: #3F3F3F;
  }

  .navbar-dark .navbar-nav .active>.nav-link:hover {
    color: #ffffff;
    background: #3F3F3F;
  }

  .navbar-dark .navbar-nav .active>.nav-link:focus {
    color: #ffffff;
    background: #3F3F3F;
  }

  /* Header > dropdown nav-link*/
  .navbar-dark .navbar-nav .show>.nav-link {
    color: #3F3F3F;
  }

  .navbar-dark .navbar-nav .nav-link {
    color: #3F3F3F;
  }

  .navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
    background-color: #3F3F3F;
  }

  .navbar-dark .navbar-nav .nav-link:focus {
    color: #ffffff;
    background-color: #3F3F3F;
  }

  /* Header > dropdown-item */
  .dropdown-item {
    color: #3F3F3F;
    font-weight: 700;
  }

  .dropdown-item:hover {
    color: #239B85;
    text-decoration: none;
    background-color: #E0EDE6;
    font-weight: 700;
  }

  /* header > 登出按鈕 */
  .navbar-dark .navbar-nav .nav-link.active {
    color: #FFFFFF;
    background: rgba(35, 155, 133, 0.8);
  }

  .navbar-dark .navbar-nav .nav-link.active:hover {
    color: #ffffff;
    background-color: #3F3F3F;
  }

  .navbar-dark .navbar-nav .nav-link.active:focus {
    color: #ffffff;
    background: #3F3F3F;
  }
}