#masonry {
      position: relative;
      margin: auto;
    }

    #masonry .card {
      position: absolute;
      width: 320px;
      background: white;
      padding: 0;
      margin: 0;
      border-radius: 8px;
      box-shadow: 0 5px 80px rgba(0, 0, 0, 0.1);
      opacity: 0;
      transition: all 0.8s ease;
      transform: translateY(20px);
      overflow: hidden;
    }

    #masonry .card.visible {
      opacity: 1;
      transform: translateY(0);
    }

    #masonry .card:hover {
      transform: translateY(-15px) scale(1.02);
      box-shadow: 0 8px 80px rgba(0, 0, 0, 0.15);
    }

    #masonry .card-imgWrapper {
      display: flex;
      aspect-ratio: 16/9;
      background-color: #000;
      overflow: hidden;
    }

    #masonry .card img {
      width: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
    }

    #masonry .card-content {
      padding: 8px 16px;
    }

    #masonry .card h4 {
      margin: 0.3em 0;
      font-size: 1.0rem;
      color: #03a3a4;
      font-weight: 700;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }

    #masonry .card p {
      font-size: 1rem;
      color: #444;
    }

    #masonry .card a {
      display: inline-block;
      text-decoration: none;
    }

    #masonry .card a:hover {
      text-decoration: none;
    }

    #masonry .slide-left {
      transform: translateX(-60px);
    }

    #masonry .slide-right {
      transform: translateX(60px);
    }

    #masonry .slide-up {
      transform: translateY(60px);
    }

    #masonry .fade-in {
      transform: scale(0.9);
    }

    #masonry .card.hidden {
      display: none;
    }



    /*修正因導覽列寬度導至出現橫向捲軸及掉下來呈現的問題。
    #menu {
      width: 95%;
      margin: 0px auto;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
    }

    #menu>ul {
      width: auto !important;
      min-width: 8.5vw;
    }

    #menu>ul>li {
      margin: 0 1.5vw;
    }

    #menu>ul>li>a {
      padding: 0 !important;
      width: 100% !important;
      text-align: center;
    }*/

    /*修正因導覽列文字大小。
    #menu {
      container-type: inline-size;
    }

    #menu>ul>li>a {
      --min-size: 20;
      --max-size: 22;
      --font-size: calc((var(--min-size) * 1px) + (var(--max-size) - var(--min-size)) * ((100cqw - 320px) / (1920 - 320)));
      font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);
    }*/

    /*調整不同尺吋的內容寬度*/

    @media (max-width: 1400px) {
      #center {
        width: 90% !important;
      }
    }

    @media (max-width: 1300px) {
      #center {
        width: 95% !important;
      }
    }