/* 主容器 */
#content {
    width: auto;
    background: #1c2526; /* 黑色底色 */
    border-radius: 10px; /* 圓角 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 陰影 */
}

/* 頁籤列 */
#tab_bar {
    width: auto;
    display: flex; /* 使用flex佈局 */
    border-bottom: 2px solid #222222;
}

/* 頁籤ul */
#tab_bar ul {
    padding: 0;
    margin: 0;
    display: flex;
    width: 100%;
}

/* 頁籤li */
#tab_bar li {
    list-style-type: none;
    flex: 1; /* 均分寬度 */
    height: 40px; /* 頁籤高度 */
    line-height: 40px; /* 文字垂直居中 */
    text-align: center;
    color: #ffffff; /* 文字白色 */
    cursor: pointer;
    transition: all 0.3s ease; /* 滑順過渡 */
    margin-right: 10px; /* 增加頁籤間距 */
    position: relative; /* 為分隔線定位 */
}

/* 最後一個頁籤不加右邊距 */
#tab_bar li:last-child {
    margin-right: 0;
}

/* 分隔線 */
#tab_bar li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -5px; /* 位於頁籤間距的中間 */
    top: 5px;
    width: 1px;
    height: 30px; /* 分隔線高度 */
    background: #E9EEED; /* 分隔線顏色與底線一致 */
}

/* 頁籤懸停效果 */
#tab_bar li:hover {
    background: #a81c1c; /* 懸停時稍亮的深紅色 */
}

/* 頁籤選中狀態 */
#tab_bar li[style*="border-bottom"] {
    background: #8b0000; /* 深紅色頁籤 */
    color: #ffffff; /* 文字白色 */
    font-weight: bold; /* 加粗 */
}

/* 內容區 */
.tab_css {
    width: 100%;
    height: 100%;
    display: none;
    clear: both; /* 清除浮動 */
    background: #000000; /* 內容區白色 */
    border-radius: 0 0 10px 10px; /* 底部圓角 */
    padding: 20px; /* 內距 */
    box-sizing: border-box; /* 防止內距影響寬度 */
}

/* 內容區顯示 */
.tab_css[style*="display: block"] {
    display: block;
}

/* 內容文字樣式 */
.tab_css div {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.5;
}