/* default.css */


@font-face {
    font-family: 'SourceHanSans';
    src: url('https://www.whalin.com.tw/fonts/SourceHanSansTC-Normal.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* --- 全域樣式 --- */
html, body {
    height: 100%;
    /* 新增：box-sizing 確保佈局一致性 */
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0px;
    padding: 0px;
    background: #202020;
    font-family: 'SourceHanSans', 'Source Sans Pro', sans-serif;
    font-size: 12pt;
    font-weight: 300;
    color: #444444;
}

h1, h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #333333;
}

p, ol, ul {
    margin-top: 0;
}

ol, ul {
    padding: 0;
    /* list-style: none; */
}

p {
    line-height: 180%;
}

strong {}

a {
    color: #2980b9;
}

a:hover {
    text-decoration: none;
}

.container {
    overflow: hidden;
    margin: 0em auto;
    width: 1200px; /* 桌面系統固定寬度 */
}

/* --- Image Style --- */
.image {
    display: inline-block;
}

.image img {
    display: block;
    width: 100%; /* 確保圖片響應式 */
    height: auto; /* 保持圖片比例 */
}

.image-full {
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
}

.image-left {
    float: left;
    margin: 0 2em 2em 0;
}

.image-centered {
    display: block;
    margin: 0 0 2em 0;
}

.image-centered img {
    margin: 0 auto;
    width: auto;
}

.pime-img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* --- List Styles --- */
ul.style1 {
    margin: 0 auto;
    padding: 0;
    width: 90%;
    overflow: hidden;
    /* list-style: none; */
    text-align: left;
    color: #6c6c6c
}

ul.style1 li {
    padding: 1.6em 0em 0em 0em;
    margin: 0 0 2.5em 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    height: 100%;
}

ul.style1 li:first-child {
    border-top: none;
}

ul.style1 li:nth-child(odd) {
	/* 偶數列的顏色 */
    background-color: powderblue;
    color: blue;
}

ul.style1 p {
    margin: 0;
}

ul.style1 div {
	/* 這個 div 包裹了描述內容 */
    margin-left: 90px; /* 這是為日期欄位預留的空間 */
}

ul.style1 a {
    display: block;
    text-decoration: none;
    color: #2D2D2D;
}

ul.style1 a:hover {
    text-decoration: underline;
}

ul.style1 h3 {
    padding: 1em 0em 5px 0em;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 400;
}

ul.style1 .first {
    height: 100%;
    padding-top: 0;
}

ul.style1 .date {
	/* 這是新聞日期 */
    position: absolute;
    width: 80px;
    height: 100%; /* 原始設定為 100% */
    margin: 0.5em 1.5em 0em 0.5em;
    padding: 1.5em 0em 1.5em 0em;
    box-shadow: 0px 0px 0px 5px rgba(255,255,255,0.1);
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0px 1px 0px rgba(0,0,0,.2);
    font-size: 1em;
    font-weight: 400;
    border-right: 1px solid rgba(0,0,0,.1);
}

ul.style1 .date:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

ul.style1 .date b {
    margin: 0;
    padding: 0;
    display: block;
    margin-top: -5px;
    font-size: 1.8em;
    font-weight: 700;
}

ul.style1 .date a {}

ul.style1 .date a:hover {
    text-decoration: none;
}

/* --- Social Icon Styles --- */
ul.contact {
    margin: 0;
    padding: 2em 0em 0em 0em;
    list-style: none;
}

ul.contact li {
    display: inline-block;
    padding: 0em 0.30em;
    font-size: 1em;
}

ul.contact li span {
    display: none;
    margin: 0;
    padding: 0;
}

ul.contact li a {
    color: #FFF;
}

ul.contact li a:before {
    display: inline-block;
    background: #3f3f3f;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #FFFFFF;
}

ul.contact li a.icon-twitter:before { background: #2DAAE4; }
ul.contact li a.icon-facebook:before { background: #39599F; }
ul.contact li a.icon-dribbble:before { background: #C4376B;    }
ul.contact li a.icon-tumblr:before { background: #31516A; }
ul.contact li a.icon-rss:before { background: #F2600B; }

/* --- Button Style --- */
.button {
    display: inline-block;
    padding: 1em 3em 1em 2em;
    letter-spacing: 0.20em;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 0.90em;
    color: #FFF;
}

.button:before {
    display: inline-block;
    background: #FFC31F;
    margin-right: 1em;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #272925;
}

/* --- Column Layouts (通常在 RWD 中會被 Flexbox/Grid 取代) --- */
.box1, .box2, .box3, .box4,
.boxA, .boxB, .boxC,
.tbox1, .tbox2 {
    /* 這些固定寬度和浮動的樣式在小螢幕時將被媒體查詢覆蓋 */
}

.box1, .box2, .box3 {
	float: left;
	margin-right: 20px;
	width: 235px;
}

.box4 {
	float: right;
	width: 235px;
}

.boxA, .boxB { 
	float: left;
	margin-right: 20px;
	width: 320px;
}

.boxC {
	float: right;
	width: 320px;
}

.tbox1 {
	float: left;
	width: 575px;
}

.tbox2 {
	float: right;
	width: 575px;
}

/* --- Heading Titles --- */
.title {
    margin-bottom: 3em;
}

.title h2 {
    /* text-transform: lowercase; */
    font-size: 2.8em;
}

.title .byline {
    font-size: 1.3em;
    color: #6F6F6F;
}

/* --- Header --- */
#header {
    position: relative;
    float: left;
    width: 300px;
    padding: 3em 0em;
}

/* --- Logo --- */
#logo {
    text-align: center;
    margin-bottom: 4em;
}

#logo h1 {
    display: block;
}

#logo a {
    text-decoration: none;
    color: #FFF;
}

#logo span {
    padding-right: 0.5em;
    text-transform: uppercase;
    font-size: 0.90em;
    color: rgba(255,255,255,0.3);
}

#logo span a {
    color: rgba(255,255,255,0.5);
}

#logo img {
    display: inline-block;
    margin-bottom: 1em;
    border-radius: 50%;
}

/* --- Menu --- */
#menu {}

#menu ul {}

#menu li {
    border-top: 1px solid rgba(255,255,255,0.08);
}

#menu li a, #menu li span {
    display: block;
    padding: 2em 1.5em;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}

#menu li:hover a, #menu li.active a, #menu li.active span {
    /* 保持原樣式 */
}

#menu .current_page_item a {
    background: #2980b9;
    color: rgba(255,255,255,1);
}

#menu .icon {}

/* --- Banner --- */
#banner {
    margin-bottom: 4em;
}

/* --- Page --- */
#page {
    background: #2a2a2a;
}

/* --- Main --- */
#main {
    overflow: hidden;
    float: right;
    width: 800px;
    padding: 3em 50px 5em 50px;
    background: #FFF;
    border-top: 6px solid #2980b9;
    text-align: center;
}

/* --- Featured --- */
#featured {
    overflow: hidden;
    margin-bottom: 3em;
    padding-top: 5em;
    border-top: 1px solid rgba(0,0,0,0.08);
}

/* --- Sidebar (若有使用，請保留) --- */
#sidebar {}

/* --- Footer (若有使用，請保留) --- */
#footer {}

/* --- Copyright --- */
#copyright {
    overflow: hidden;
    padding: 5em 0em;
    border-top: 1px solid rgba(0,0,0,0.08);
}

#copyright span {
    display: block;
    letter-spacing: 0.20em;
    line-height: 2.5em;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.80em;
    color: rgba(0,0,0,0.7);
}

#copyright a {
    text-decoration: none;
    color: rgba(0,0,0,0.9);
}

.fa {
    display: block;
    color: #000;
    background: red;
}

/* --- 語系切換 --- */
.language {
    position: fixed;
    top: 20px;
    right: 100px;
}


/* ==================================================================================================== */
/* 媒體查詢 (Media Queries) - 適用於非桌面系統 (平板、手機) */
/* 當螢幕寬度小於或等於 980px 時套用以下樣式 */
/* 你可以根據需要調整斷點 (例如 768px 或其他尺寸) */
/* ==================================================================================================== */
@media (max-width: 980px) {

    /* --- 調整容器寬度與內距 --- */
    .container {
        width: auto; /* 不再固定寬度 */
        margin: 0 auto;
        padding: 0 20px; /* 增加左右內邊距 */
    }

    /* --- Header (左側固定欄位) --- */
    #header {
        position: static; /* 移除固定定位 */
        float: none; /* 移除浮動 */
        width: 100%; /* 全寬 */
        padding: 2em 0; /* 調整內邊距 */
        text-align: center; /* 內容置中 */
        background: #2a2a2a; /* 保持與 #page 相同的背景色 */
    }

    #logo {
        margin-bottom: 2em; /* 調整 logo 與選單的間距 */
    }

    #logo h1 {
        font-size: 2.2em; /* 調整標題字體大小 */
    }

    #logo img {
        width: 80px; /* 調整 logo 圖片大小 */
        height: 80px;
    }

    /* --- Menu (導覽列) --- */
    #menu ul {
        display: flex; /* 使用 Flexbox */
        flex-direction: column; /* 選單項目垂直堆疊 */
        align-items: center; /* 項目水平置中 */
        padding: 0; /* 移除內邊距 */
    }

    #menu li {
        width: 90%; /* 每個選單項目佔據大部分寬度 */
        margin: 5px 0; /* 調整垂直間距 */
        border-top: none; /* 移除上邊線 */
    }

    #menu li:first-child {
        border-top: none;
    }

    #menu li a, #menu li span {
        padding: 1.2em 1.5em; /* 調整內邊距 */
        border-radius: 5px; /* 增加圓角 */
        background: rgba(255,255,255,0.1); /* 調整背景色與原風格一致 */
        color: rgba(255,255,255,0.7); /* 調整文字顏色 */
        font-weight: normal; /* 調整字重 */
    }

    #menu li:hover a, #menu li.active a, #menu li.active span,
    #menu .current_page_item a {
        background: #2980b9; /* 保持激活狀態的背景色 */
        color: rgba(255,255,255,1);
    }

    #menu li a img {
        width: 30px; /* 調整 Facebook 圖示大小 */
        height: auto;
        vertical-align: middle;
        margin-left: 10px; /* 圖示與文字間距 */
    }

    /* --- Main (主要內容區) --- */
    #main {
        float: none; /* 移除浮動 */
        width: 100%; /* 全寬 */
        padding: 2em 20px 3em 20px; /* 調整內邊距 */
        text-align: left; /* 內容左對齊 (與桌面版不同，更適合手機閱讀) */
    }

    .title {
        margin-bottom: 2em;
    }

    .title h2 {
        font-size: 2.2em; /* 調整標題字體大小 */
        text-align: center; /* 標題置中 */
    }

    .title .byline {
        font-size: 1.1em;
        text-align: center; /* 副標題置中 */
    }

    /* --- 最新消息 (ul.style1) --- */
    ul.style1 {
        width: 100%; /* 佔據容器全部寬度 */
        text-align: left; /* 左對齊 */
    }

    ul.style1 li {
        padding: 1.2em 0; /* 調整內邊距 */
        margin-bottom: 1.5em; /* 調整項目間距 */
    }

    /* 將日期和描述從 float/absolute 佈局改為 Flexbox */
    ul.style1 li > .news-item { /* 使用 .news-item 類別來選中包裝器 */
        display: flex;
        flex-direction: column; /* 預設垂直堆疊 */
    }

    ul.style1 .date {
        position: static; /* 移除絕對定位 */
        width: auto; /* 自動寬度 */
        height: auto; /* 自動高度 */
        margin: 0; /* 移除外邊距 */
        padding: 0.5em 0; /* 調整內邊距 */
        text-align: left; /* 日期左對齊 */
        border-right: none; /* 移除右邊線 */
        border-bottom: 1px solid rgba(0,0,0,.1); /* 增加底部邊線 */
        margin-bottom: 0.8em; /* 日期與內容間距 */
        min-width: unset; /* 移除最小寬度限制 */
    }

    ul.style1 .date b {
        margin-top: 0; /* 調整 b 標籤的負上邊距 */
        font-size: 1.5em; /* 調整字體大小 */
    }

    ul.style1 div { /* 這是新聞描述 */
        margin-left: 0; /* 移除為日期預留的空間 */
        padding-left: 0; /* 確保內容不會被縮進 */
    }


    /* --- 版權資訊 --- */
    #copyright {
        padding: 3em 20px; /* 調整內邊距 */
    }

    #copyright span {
        display: block; /* 每個 span 佔據一行 */
        margin-bottom: 8px; /* 調整行間距 */
        font-size: 0.9em; /* 調整字體大小 */
        letter-spacing: normal; /* 移除字元間距 */
    }

    /* --- 語系切換 --- */
    .language {
        position: static; /* 移除固定定位 */
        width: 100%; /* 佔據全部寬度 */
        text-align: center; /* 置中 */
        top: auto;
        right: auto;
        padding: 15px 0; /* 增加內邊距 */
        background-color: #f0f0f0; /* 輕微背景色區分 */
        border-top: 1px solid #eee;
        margin-top: 20px;
    }
}


/* 更小的螢幕 (例如手機直向模式) */
@media (max-width: 480px) {
    body {
        font-size: 11pt; /* 調整基本字體大小 */
    }

    #main {
        padding: 1.5em 15px 2em 15px; /* 進一步調整內邊距 */
    }

    .title h2 {
        font-size: 1.8em; /* 進一步調整標題字體大小 */
    }

    #menu li a, #menu li span {
        padding: 1em 1em; /* 進一步調整選單內邊距 */
        font-size: 0.9em;
    }
}