.card{
  /* height: 65vh; */
  /* box-shadow: 3px 3px 3px #ffffff; */
  padding: 10px;

} 

.card-title{
  font-family: 'Noto Serif TC'!important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  letter-spacing :3px;
  font-weight:900px;
  color: rgba(18, 17, 17, 0.526);
}
@media (max-width: 768px)  {
  .card-title{
    font: weight 700px;
    font-size:large;
  }
}

.card-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  overflow: hidden;
  font-size: medium;
  letter-spacing:2.3px;
}


.row.g-4 > .col > .card:hover {
  box-shadow: 0 0 20px 3px rgb(255, 221, 118); 
  transform: translateY(-10px) scale(1.2); 
  cursor: pointer; 
   border: 2px solid #ffbf00;
}

.row.g-4 > .col > .card {
  height: 100%; 
  opacity: 0; 
  transform: translateY(20px); 
  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-4 > .col > .card.show {
  opacity: 1; /* 完全顯示 */
  transform: translateY(0); /* 回到原位 */
}

/* 這裡要讓card-body 內容推到底部 */
.row.g-4 > .col > .card .card-body {
  display: flex;
  flex-direction: column;
}

/* 然後找到 .card-body 裡面的 .date 區塊，推到底部 */
.row.g-4 > .col > .card .card-body .date {
  margin-top: auto; 
}


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

.pics{
  position:relative;}

.pics img{ position:absolute;
 /* 淡出淡入效果2秒 */
 -webkit-transition: opacity 2s ease-in-out;
 -moz-transition: opacity 2s ease-in-out;
 -o-transition: opacity 2s ease-in-out;
 transition: opacity 2s ease-in-out;

}
.pics img:last-child:hover{
   opacity:0;}