* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Microsoft JhengHei", sans-serif;
			font-size:14px;
			line-height:2;
            display: flex;
            flex-direction: column;
            height: 100vh; /* 撐滿全螢幕高度 */
            overflow: hidden;
        }
		h1 {font-size:36px;}
		h3 {font-size:24px;}
		h6 {font-size:18px;}

        .header {
            height: 150px;
            background-color:black; 
            color: white;
            display: flex;
            align-items: center;
            padding: 0 20px;
            flex-shrink: 0;

        }

        header div {display:block}
        header div span {opacity:0.4;}
        header i {font-size:18px; display: inline-block; transform: rotate(-30deg);
    margin-left: -10px;}
        p.intro {line-height:1.9; font-weight:bold;}
        p.intro a {color:red;}
        main span{font-weight:bold;}
        main span.bg{background-color:rgba(128, 128, 128, 0.269); padding:0.5%;}

        .main-container {
            display: flex;
            flex: 1; 
            overflow: hidden;
        }

        /* 左 30% */
        .sidebar {
            width: 20%;
            background-color: #ededed;
            padding: 20px;
            overflow-y: auto; /* 內容過長可捲動 */
        }

        /* 右 70% */
        .content {
            width: 80%;
            background-color: #ffffff;
            padding: 30px;
            overflow-y: auto;
        }


    .grid-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
        font-family: "Microsoft JhengHei", sans-serif;
        font-size: 14px;
    }
    .grid-container a {color:red;}
    .grid-container a:hover {color:black}

    /* 定義每一列 */
    .grid-row {display: flex;width: 100%;  }
    .grid-cell {
        flex: 1;
        padding: 10px;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        display: flex;
        align-items: center;
    }


   .grid-row.header {
        font-weight: bold;
        background-color: black;
        height:auto;
        padding:0;
    }

      @media screen and (max-width: 768px) {
             main.content {width:100%;}
            .main-container { flex-direction: column;}
            .sidebar{display:none;}
            .grid-row.header {display:none}
        .grid-container {border-left: none;}
        .header {height:80px;}
        h1 {font-size:24px; line-height:24px;}

        .grid-row {
            flex-direction: column; /* 改為垂直排列 */
            border-bottom: 8px solid #eee; /* 每一組資料間加入間隔感 */
            border-left:1px solid #ccc; /* 加入左側邊框，形成卡片感 */
        }

        .grid-cell {
            display: flex;
            justify-content: flex-start;
            padding:0 15px;
            width: auto;
        }

        .grid-cell.cell-title {font-weight:bold;}


        /* 透過偽元素在左側加入標題 */
        .grid-cell::before {
            font-weight: bold;
            color: #888;
            min-width: 100px;
            display: inline-block;
            font-size: 13px;
        }
    }