@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;700&display=swap');

:root {
  --bs-primary: #2478bf; /* hsv(207,81%,75%) */
  --bs-primary-400: #1f6b9e;
  --bs-primary-300: #195186;
  --bs-primary-rgb: 36, 120, 191;
  --bs-link-color: #5b5b5b; /* hsv(0,0,35%) */
  --bs-link-color-rgb: 91, 91, 91;
  --bs-link-hover-color: #2478bf; /* hsv(207, 81%, 75%) */
  --bs-link-hover-color-rgb: 36, 120, 191;
}

body {
  font-family: 'Noto Sans TC', var(--bs-font-sans-serif);
  font-weight: 400;
  background-color: var(--bs-gray-100);
}



.btn {
  --bs-btn-border-radius: var(--bs-border-radius-xxl);
}
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-primary-400);
  --bs-btn-hover-border-color: var(--bs-primary-400);
  --bs-btn-active-bg: var(--bs-primary-300);
  --bs-btn-active-border-color: var(--bs-primary-300);
}


/* ***** */


.dropdown-menu {
  --bs-body-color: #5b5b5b;

  width: 100%;
  border-radius: 20px;

  .dropdown-item:hover {
    --bs-dropdown-link-hover-color: white;

    --bs-dropdown-link-active-bg: var(--bs-primary);
    --bs-dropdown-link-hover-bg: var(--bs-primary);

    --bs-dropdown-item-border-radius: 20px;
  }
}

/****** .sp-nav start *********/
.sp-nav {
  --bs-body-bg: var(--bs-gray-200);
  --bs-navbar-hover-color: var(--bs-primary);
  --bs-navbar-active-color: var(--bs-primary);
}
.sp-nav .navbar-nav {
  align-items: center;
}
.sp-nav__category {
  font-weight: bold;
  margin-left: 24px;
  margin-top: 15px;
  margin-bottom: 15px;
}
.sp-nav__category-item {
  margin-bottom: 15px;
  border-radius: 50%;
}
.sp-nav__category-item a {
  padding-left: 36px;
}
/********** .sp-nav end ********/

.sp-header {
  background-color: var(--bs-primary);
  text-align: center;
  padding: 64px 0;
  color: #8b8b8b;

  .img {
    width: 250px;
  }
}

.sp-aside {
  .accordion {
    --bs-accordion-border-width: 0;
    --bs-accordion-border-radius: 20px;
    --bs-accordion-btn-color: #5b5b5b;
  }

  .accordion-item {
    --bs-accordion-bg: var(--bs-gray-100);
    margin-bottom: 8px;
  }

  .accordion-button {
    border-radius: 20px !important;
  }

  .accordion-body {
    padding-top: 1.5rem;
    padding-bottom: 0rem;
  }

  .sp-aside__category-item {
    margin-bottom: 1.5rem;
  }

  .sp-aside__category-item a {
    text-decoration: none;
  }
}

.sp-main {
  .sp-main__cards {
    padding: 10px 0;
  }

  .pagination {
    --bs-pagination-bg: transparent;
    --bs-pagination-active-bg: var(--bs-primary);

    .page-item a {
      border: 1px solid #c1c1c1;
      border-radius: 14px !important;
      margin: 0 4px;
    }

    .page-item a.active {
      border: 1px solid white;
    }
  }
}

.sp-footer {
  text-align: center;
  line-height: 2rem;
  padding: 65px 0 65px 0;
  background-color: #2b383e;
  color: #ffffff;
}
.sp-footer__text a {
  color: white;
  text-decoration: none;
}
.sp-footer__text a:hover {
  color: var(--bs-primary);
  text-decoration: none;
}