/* ======== BN區 - 容器設定 ======== */
   .bn {
       position: relative;
       width: 100%;
       height: auto;
       min-height: clamp(300px, 40vw, 620px); /* 改成以視窗寬度為主的高度 */
   }

   .bn-a,
   .bn-b,
   .bn-c,
   .bn-floating {
       position: absolute;
       width: 100%;
       height: auto;


   }

   .bn-a img,
   .bn-b img,
   .bn-c img,
   .bn-floating img {
       width: 100%;
       height: auto;

       max-width: 100%;


   }

   /* BN 區與第一個 section（time.png）之間的響應式間距 */
   .bn + .section-container {
       margin-top: clamp(1rem, 5vw, 5rem);
   }

   @media (max-width: 768px) {
       .bn {
           min-height: clamp(260px, 45vw, 520px);
       }
       .bn + .section-container {
           margin-top: clamp(0.75rem, 4vw, 3rem);
       }
   }

   @media (max-width: 576px) {
       .bn {
           min-height: clamp(240px, 48vw, 440px);
       }
       .bn + .section-container {
           margin-top: clamp(0.75rem, 3.5vw, 2rem);
       }
   }

   /* 中層懸浮動畫 */
   /* .bn-b {
       animation: floatUpDown 5s ease-in-out infinite;
   }

   @keyframes floatUpDown {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-10px);
       }
   } */

   /* 浮動圖片動畫 */
   .bn-floating-1 {
       --float-distance: -20px;
       animation: floatUpDown1 3s ease-in-out infinite;
   }

   .bn-floating-2 {
       --float-distance: -30px;
       animation: floatUpDown2 5s ease-in-out infinite 1s;
   }

   .bn-floating-3 {
       --float-distance: -25px;
       animation: floatUpDown3 7s ease-in-out infinite 2s;
   }

   @keyframes floatUpDown1 {
       0%, 100% {
           transform: translateY(0);
       }
       50% {
           transform: translateY(var(--float-distance));
       }
   }

   @keyframes floatUpDown2 {
       0%, 100% {
           transform: translateY(0);
       }
       50% {
           transform: translateY(var(--float-distance));
       }
   }

   @keyframes floatUpDown3 {
       0%, 100% {
           transform: translateY(0);
       }
       50% {
           transform: translateY(var(--float-distance));
       }
   }

   @media (max-width: 1200px) {
       .bn-floating-1 {
           --float-distance: -16px;
       }
       .bn-floating-2 {
           --float-distance: -24px;
       }
       .bn-floating-3 {
           --float-distance: -20px;
       }
   }

   @media (max-width: 768px) {
       .bn-floating-1 {
           --float-distance: -12px;
       }
       .bn-floating-2 {
           --float-distance: -18px;
       }
       .bn-floating-3 {
           --float-distance: -14px;
       }
   }

   @media (max-width: 576px) {
       .bn-floating-1 {
           --float-distance: -8px;
       }
       .bn-floating-2 {
           --float-distance: -12px;
       }
       .bn-floating-3 {
           --float-distance: -10px;
       }
   }

   /* 前景層 */
   .bn-c {
       position: relative;

   }

   /* .bn-c img {} */


   /* ======== 內容區動畫 ======== */
   .section-container {
       position: relative;
       max-width: 1000px;
       margin: 0 auto;
       padding: 0 1rem;
       text-align: center;
       width: 100%;
       height: auto;
   }

   .items {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 100%;
       max-width: 1000px;
       margin: 0 auto;
       gap: 1rem;
   }

   .items img {
       width: 100%;
       max-width: 100%;
   }

   .section-container img {
       width: 100%;
       height: auto;
       text-align: center;
       max-width: 1000px;

       opacity: 0;
       transition: opacity 1s ease-out, transform 1s ease-out;
   }

   [data-anim="up"] {
       transform: translateY(50px);
   }

   [data-anim="left"] {
       transform: translateX(-50px);
   }

   [data-anim="right"] {
       transform: translateX(50px);
   }

   .section-container img.show {
       opacity: 1;
       transform: translate(0, 0);
   }

   /* 頁尾 */
   .social-links a {
       display: inline-block;
       margin: 0 10px;
       font-size: 1.8rem;
       color: #bbb;
       transition: color 0.3s ease, transform 0.3s ease;
   }

   .social-links a:hover {
       color: white;
       transform: scale(1.2);
   }

   .footer {
       background-color: #000;
       color: #777;
       font-size: 0.9rem;
   }

   .footer-logo {
       height: 60px;
       width: auto;
   }

   .footer-divider {
       width: 2px;
       height: 50px;
       background-color: rgb(158, 158, 158);
   }