/*這邊是導覽欄和Footer,layout通用格式,限制整個內容的寬度、整體背景圖片設定 以及 手機導覽欄強制拓展高度*/

    /* 這裡設定最小視口高度,這樣才能構成擴充版面的基本條件 */
    body {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        /*進入頁面轉場動畫*/
        animation: fadeIn 0.4s ease-out forwards;

    }

    /*進入頁面淡入動畫的 動畫偵*/
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /*這是放置背景圖片的效果,盡量找那種無規律的*/
    body::before {
        content: "";
        background-image: url(../../background/bg01.webp);
        background-position: center center;
        position: fixed;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: 0.8;
    }

    /*
      當您將 flex 屬性設置為 1 時，您實際上是設置了 flex-grow: 1; flex-shrink: 1; flex-basis: 0%;
      這意味著子元素將在可用空間內均等地擴展，填充其父元素的剩餘空間。如果有多個子元素都使用了 flex: 1，它們將根據比例均等地分享剩餘的空間。
      */

    .bodyBox {
        flex: 1;
        position: relative;
    }

    main {
        width: 80%;
        margin: 0 auto;
    }

    #navigation {
        max-width: 1280px;
        width: 85%;
        margin: 0% auto;
        margin-bottom: 2%;
    }


    #footer {
        position: relative;
        margin-top: 2%;
        color: #fff;
    }

    #footer::before {
        display: block;
        content: "";
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:  linear-gradient(to right, #003278, #18A26D) ;
        width: 100%;
        height: 4px;
    }

    .clickEffect {
        transition: transform 0.2s;
        /* 添加動畫過渡效果 */
    }

    .clickEffect:hover {
        transform: translateY(3px);
        /* 點擊時向下移動3px */
    }