@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&display=swap');

@font-face {
  font-family: 'Thesignature';
  src: url('../fonts/Thesignature.otf') format('opentype'), url('../fonts/Thesignature.ttf') format('truetype');
}

/* mobile first 先寫手機版樣式，電腦版在下面media query */

.content_block {
  overflow: hidden;
  padding-bottom: 88px;
}
small {
  color: var(--Colors-bs-gray-400);
}
/* Banner樣式 */
.banner-container {
  height: 295px;
  margin-bottom: 2rem;
}
.banner-container a {
  padding: 1.5rem;
  width: 100%;
  height: 100%;
}
.banner-container h5, .banner-container h1{
  color: #ffffff;
}
.banner-container h5 {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}
.banner-container h1 {
  font-weight: 700;
  font-size: 2rem;
}
/* Banner電腦版 */
@media screen and (min-width: 768px) {
  .banner-container {
    height: 420px;
    margin-top: 56px;
    margin-bottom: 3rem;
  }
  .banner-container a {
    padding: 40px;
  }
  .banner-container h1 {
    font-size: 40px;
  }
}

/* 文章列nav */
.col-12.g-md-0:has(.blog-nav-container) {
    z-index: 1;
}
.blog-main-wrapper a, .blog-cate-wrapper a {
  color: var(--text-body);
}
.blog-main-wrapper a:hover, .blog-cate-wrapper a:hover {
  color: var(--Colors-mid-green-dark);
}
.blog-main-wrapper a {
  height: 40px;
  border-left: 2.967px solid var(--Colors-mid-green-dark);
  padding-left: 11.868px;
  color:#545759;
}
.blog-main-wrapper .logo {
  font-family: 'Copperplate', sans-serif;
  font-size: 27.692px;
  line-height: 39.56px;
  margin-right: 10px;
}
.blog-main-wrapper .blog-title {
  font-family: 'Thesignature', sans-serif;
  line-height: 39.56px;
}
.blog-cate-wrapper .nav {
  flex-wrap: nowrap;
  overflow-x: auto;
}
.blog-cate-wrapper .nav-item {
  padding: 12px 1rem 12px 1rem;
  white-space: nowrap;
}
.blog-cate-wrapper .nav-item:has(.active) {
  border-bottom: 4px solid var(--Colors-mid-green-dark);
}

/* 文章列 */
.allarticle {
  margin-top: 1.5rem;
}
.article-title {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}
.info-block {
  margin-top: 1rem;
}
.info-block a {
  color: var(--Colors-vivid-red-medium) !important;
}
.blog_img img {
  object-fit: cover;
}
.blog_post .title {
  font-size: 14px;
  color: var(--Colors-bs-gray-800);
}
.sticky_post .title {
  font-size: 1rem;
  color: var(--Colors-bs-gray-800);
}
.sticky_post:hover .title, .blog_post:hover .title {
  color: var(--Colors-mid-green-dark);
}
.blog_post:hover a {
  color: var(--Colors-vivid-red-medium);
}
.blog_info span.category {
  font-size: 14px;
}
.blog_post .title {
  font-size: 14px;
}
.blog-swiper-container {
  overflow: hidden;
  position: relative;
}
.swiper-wrapper{
  @media(width<768px) {
    margin-bottom: 60px;
    .swiper-btn-wrapper{
      height: auto;
      top: unset;
      bottom: 0;
    }
   
  }
}
 @media(width<768px) {
 .swiper-pagination{
      bottom: 18px !important;
    }
  }
.swiper-btn-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  @media(width<768px) {
    height: auto;
    top: unset;
    bottom: 0;
    .blog-swiper-button-prev, .blog-swiper-button-next{
      width: 40px;
      height: 40px;
    }
    .blog-swiper-button-next{
      right: 0;
    }
    .blog-swiper-button-prev{
      left: 0;
    }
  }
}
.blog-swiper-button-prev.swiper-button-disabled,
.blog-swiper-button-next.swiper-button-disabled {
  opacity: 0 !important;
}
.blog-swiper-button-prev,
.blog-swiper-button-next {
  display: flex;
  position: relative;
  width: 48px;
  height: 48px;
  top: 25%;
  z-index: 2;
}
.blog-swiper-button-prev {
  left: 1.5rem;
}
.blog-swiper-button-next {
  right: 1.5rem;
  justify-content: flex-end;
}
.blog-swiper-button-prev span,
.blog-swiper-button-next span {
  color: var(--Colors-mid-green-dark);
  width: 40px;
  height: 40px;
  font-size: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #FFF;
  transition: 0.2s;
  @media(width>=768px) {
    width: 48px;
    height: 48px;
    box-shadow: 0px 2px 8px 0px rgba(25, 25, 112, 0.12);
  }
}
.blog-swiper-button-prev:hover span,
.blog-swiper-button-next:hover span {
  color: #fff;
  background-color: var(--Colors-mid-green-dark);
}
.swiper-pagination-clickable .swiper-pagination-bullet{
    margin: 0 2px !important;
    border-radius: 0;
    background-color: rgba(37, 37, 55, .6);
    width: 16px;
    height: 4px;
    background: rgba(33, 37, 41, 0.10);
    border: none;
    opacity: 1;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    width: 32px;
    background: var(--Colors-mid-green-dark);
}
.sticky_post, .blog_post {
  cursor: pointer;
}
.article-list .btn-light {
  font-size: 14px;
  padding: 7px 12px 7px 1rem;
}
.article-list:not(:has(.articleCategory)) {
    display: flex;
    flex-direction: column;
}
.row.articleCategory{
  row-gap: 48px;
}
/* 文章列-電腦版 */
.article-list small{
  color: var(--text-secondary);
  margin-top: 17px;
}
@media screen and (min-width: 768px) {
  .blog-main-wrapper a {
    height: 80px;
    border-left-width: 6px;
    padding-left: 24px;
  }
  .blog-main-wrapper .logo {
    font-size: 3.5rem;
    margin-right: 24px;
    line-height: 80px;
  }
  .blog-main-wrapper .blog-title {
    line-height: 80px;
  }
  .article-list .btn-light {
    font-size: 1rem;
    padding: 10px 1rem 10px 24px;
  }
  .allarticle {
    margin-top: 29px;
  }
  .article-title {
    font-size: 40px; 
  }
  .blog_post .title {
    font-size: 18px;
  }
  .sticky_post .title {
    font-size: 1.5rem;
  }
  .blog_info span.category {
    font-size: 1rem;
  }
}
/* 熱門排行 */
.ranking-container {
  padding: 2rem;
  background-color: #F0F0EF;
  margin-bottom: 40px;
}
.ads-container {
  margin-bottom: 40px;
}
.ads-container a {
  padding: 2rem;
  width: 100%;
  height: 100%;
}
.ads-container .ads_subtitle, .ads-container .ads_title {
  font-weight: 700;
  color: #ffffff;
}
.ads-container .ads_subtitle {
  font-size: 1rem;
  line-height: 1.5rem;
  display: -webkit-box;
  width: 194px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.ads-container .ads_title {
  font-size: 2rem;
  line-height: 2.4rem;
}
.ranking-title {
  font-size: 2rem;
  color: var(--Colors-vivid-red-medium);
  margin-bottom: 25px;
}
.ranking-container .content-wrapper {
  display: flex;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--Colors-mid-green-medium);
  margin: 6px 0;
}
.ranking-container .content-wrapper:hover {
  cursor: pointer;
}
.ranking-container .content-wrapper:hover .title {
  color: var(--Colors-mid-green-dark);
}
.rank-num {
  font-family: "Cinzel", serif;
  font-size: 3.75rem;
  width: 2.25rem;
  text-align: center;
  flex-shrink: 0;
}
.rank-content {
  flex-basis: 100%;
}
.rank-content .title {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 4px;
}
.sticky_post .title,
.blog_post .title,
.rank-content .title {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.rank-content .category {
  color: var(--Colors-vivid-red-medium);
  margin-right: 0.5rem;
}
.sticky_post .date, .blog_post .date, .rank-content .date {
  color: var(--text-disable);
  font-size: 14px;
}
.rank-img {
  width: 90px;
  flex-shrink: 0;
  aspect-ratio: 3 / 2;
}

/* date picker */
.date-filter{
    gap: 16px;
    margin-bottom: 24px;
    label {
     width: 138px;
     position: relative;
     .material-symbols-rounded{
       position: absolute;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
     }
   }
}

@media screen and (min-width: 768px){
  .date-filter label {
    width: 182px;
  }
}

/* a.btn.btn-light */
.btn.btn-light {
  border: 0;
  border-radius: var(--button-border-radius, 999px);
  background: var(--Colors-mid-green-light, #DDE1D6);
}

.btn.btn-light,
.btn.btn-light span {
  transition: .3s ease-out;
  color: var(--text-body, #212529);
}

.btn.btn-light:hover,
.btn.btn-light:hover span {
  color: #fff;
}

.btn.btn-light:hover {
  border: 0;
  background: var(--Colors-mid-green-dark, #3F6043);
}