/* ======== BN區 - 容器設定 ======== */
   .bn {

       width: 100%;
       height: auto;

   }

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


   }

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

       max-width: 100%;


   }

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

   @keyframes floatUpDown {

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

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

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

   }

   /* .bn-c img {} */


   /* ======== 內容區動畫 ======== */
   .section-container {
       /* max-width: 1000px; */
       position: relative;

       text-align: center;
       width: 100%;
       height: auto;
   }

   /* .items{} */

   .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);
   }