/* 卡片載入完成後顯示的狀態 */
.row.g-5 > .col > .card.show {
  opacity: 1; 
  transform: translateY(0); 
}

/* 確保 card-body 內容推到底部 */
.row.g-5 > .col > .card .card-body {
  display: flex;
  flex-direction: column;
}


.row.g-5 > .col > .card .card-body .date {
  margin-top: auto; 
}

/* 這個區域是滑鼠懸停在卡片上的效果 */
.row.g-5 > .col > .card:hover {
  box-shadow: 0 0 15px 5px rgba(255, 229, 152, 0.8); 
  transform: translateY(-10px) scale(1); /* 稍微上移並放大一點點 */
  cursor: pointer; 

   border: 1px solid #ffd864;
}

/* 確保卡片的高度過渡也包含在內 */
.row.g-5 > .col > .card {
  height: 100%; 
  transform: translateY(2px); /* 初始位置稍微往下 */
  transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; 

}

.row.g-5 > .col > .card .card-body .date p {
  margin-bottom: 0; /* 移除日期段落預設的下邊距 */
}


body {
    font-family: 'Noto Sans TC', sans-serif; 
    margin:0;
    padding:0px; 
    background-color: #000000; 
    position: relative;
    overflow-x:hidden ;

}

.bg-img-top{
  background-image: url("../backImg/background01.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 33%;
  }

.bg-img{
background-image: url("../backImg/background03.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: 33%;
}

@media (max-width: 768px) {

.bg-img-top{
  background-image: url("../backImg/background01.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 55%;
  }

.bg-img{
background-image: url("../backImg/background03.png");
background-repeat: no-repeat;
background-position: right bottom;
background-size: 55%;
}
body, html {
  overflow-x: hidden !important;
}
}


h1{
    font-size: 2.5em;
    text-align: center;
    letter-spacing: 1px;
    font-weight: 600;
    color: white;
    }

  /* .card-title::after{
    content: '';
    display: block;
    width: 200px;
    height: 4px;
    background-color: #ffbf00; 
   
} */

    h5{
        font-weight: 550;
    }

    .card{
        /* height: 65vh; */
        box-shadow: 3px 3px 3px #EEEAE7;
      
      } 
    
      .card-title{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      
      .card-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;
        overflow: hidden;
      }

      .date{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: small;
        color: gray;
      }

      .footer{
        background-color: #ffbf00;
        font-size: small;
        text-align: center;
    }

    a:link {
      color: black;
      text-decoration: none;
    }
    
    a:visited {
      color: rgb(223, 145, 0); 
    }
    
    a:hover {
      color: blue;
      text-decoration: underline;
    }


@media (max-width: 768px) {
.py-5{
  margin-left: 3px;
  margin-right: 7px;
}
}