/*common*/
/* Add html from Chienlin 109.09.23*/
html{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
flex-flow: rownowrap;
justify-content: center;
/*align-content: center;*/
align-items: center;
margin: 0;
padding: 0;
background: #E2E2E2;
}
body {
background-color:#E2E2E2;
/* 呼應 fixed by Chienlin 109.09.23*/
/* text-align:center;*/
text-align:left;
vertical-align:middle;
margin: 0px auto;
padding:0px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
}
a:link{
color:#598817;
text-decoration: none;}
a:visited{/*超連結顯示*/
/* color:#D6BDCB;*/
color:#00008B;
text-decoration: none;}
a:hover {/*滑鼠移動到時*/
/* color:#DAF5D6;*/
color:#ff8c00;
text-decoration: none;}
a:active{
/* color:#DA85D6;*/
color:#DA85D6;
text-decoration: none;}
hr{
color:#B8B7B7;
border-style:dotted;}
/*p{
color:#D6BDCB;
font-size:12px;
padding-left:20px;}
*/
p{
color:#434647;
font-size:13px;
padding-left:20px;}
/*home*/
#homecontent{
float:left;
width:1003px;
}
#login{
float:left;
width:628px;
height:172px;
background-image: url("../images/home_login.jpg");
background-repeat:no-repeat;}
.area{margin:60px 0 0 280px;}
#login input{border:1px solid #BED299;}
#login_vn{
float:left;
width:628px;
height:172px;
background-image: url("../images/home_login_vn.jpg");
background-repeat:no-repeat;}
.area_vd{margin:30px 0 0 180px;}
#login_vn input{border:1px solid #BED299;}
#passw{color:#2BDFE1;padding:10px 30px 10px 235px;font-size:15px;}
#password{text-align:center;color:#2BDFE1;font-size:12px;}
#vdmemmo_css{text-align:left;color:#2B2FE1;font-size:10px;}
#news{
float:left;
padding:76px 120px 10px 200px;
font-size:14px;
width:628px;
height:221px;
background-image: url("../images/home_news.jpg");
background-repeat:no-repeat;
/*border:1px solid #434343;*/
}
html>body #news{padding:95px 150px 10px 200px;width:278px;height:116px;}
#news ul{
margin:-20px -50px 0px 0px;/*人工調整靠上距離by Chienlin*/
/*margin::0px;*/
padding:0px;
/*border:1px solid red;*/
}
#news li{
margin:0px;
list-style-image: url("../images/home2_15.gif");
/*background-repeat:no-repeat;*/
}
#more{
text-align:right;
padding:0px;
/*margin-top:0px;*/
margin:5px -60px 0px 0px;/*人工調整靠上距離by Chienlin*/
}
#home-footer{
float:left;
width:981px;
height:133px;
font-size:12px;
background-image: url("../images/home_footer.jpg");
background-repeat:no-repeat;
margin:0px;}
html>body #footer{margin-top:0px;}
#footerinfo2{
float:left;
width:800px;
/* padding:93px 30px 0px 40px;*/
padding:80px 20px 0px 30px;
color:#535353;
word-spacing:0.6em;
}
html>body #footerinfo2{margin-top:0px;}
#footerinfo2 table{font-size:13px;line-height:20px;}
/*
#footerinfo_special{
text-align:center;
float:left;
width:900px;
padding:73px 30px 0px 10px;
color:#535353;
word-spacing:1em;
font-family:"Microsoft JhengHei" , 微軟正黑體, Verdana;
font-weight:bold;
font-size:14px;
}
*/
#footerinfo_special {
background-color: #f9f9f9;
padding: 1em;
font-size: 14px;
line-height: 1.6;
border-top: 1px solid #ccc;
font-family: "Segoe UI", sans-serif;
}
#footerinfo_special ul {
list-style: none;
padding: 0;
margin: 0;
}
#footerinfo_special li {
margin-bottom: 5px;
}
.unit-name {
display: inline-block;
width: 130px;
font-weight: bold;
vertical-align: top;
}
img{
/*background-color:#E9E9E9;*/
background-color:#FFFFFF;
color:#474F51;}
/*head banner*/
#head{
width:979px;
height:127px;
background-image: url("../images/bg_headbanner.jpg");
background-repeat:no-repeat;
font-size:15px;
position: relative; /* 讓後續的絕對定位參考這個容器 */
}
/* 網站導覽容器 */
#sitemap-container {
position: absolute;
top: 10px;
right: 70px; /* 根據需要調整位置，保證與登出按鈕不重疊 */
}
/* 網站導覽連結 */
.sitemap-link {
background-color: transparent; /* 背景透明 */
color: #0000FF; /* 深藍色文字 */
font-size: 16px; /* 字體大小 */
padding: 5px 10px;
border: none; /* 移除邊框 */
text-decoration: none; /* 移除連結下劃線 */
cursor: pointer;
}
/* 當滑鼠懸停時 */
.sitemap-link:hover {
background-color: transparent; /* 背景保持透明 */
color: #FF4500; /* 懸停時變為橙紅色 */
font-size: 18px; /* 懸停時字體稍微放大 */
}
/* 登出容器 */
#logout-container {
position: absolute;
top: 10px;
right: 20px; /* 增加右邊距確保不會被裁切 */
z-index: 10; /* 確保它位於其他元素上層 */
}
/* 登出按鈕 */
.logout-button {
background-color: transparent;
color: #0000FF;
font-size: 16px;
padding: 5px 10px;
border: none;
cursor: pointer;
}
.logout-button:hover {
background-color: transparent;
color: #FF4500;
font-size: 18px; /* 懸停時字體稍微放大 */
}
/* 登入容器 */
#login-sso-container {
position: absolute;
top: 3px;
right: 30px; /* 增加右邊距確保不會被裁切 */
background: rgba(255, 255, 255, 0); /* 保持背景透明 */
z-index: 9999; /* 確保它位於其他元素上層 */
width: 980px; /* 固定寬度與 table 一致 */
margin: 0 auto; /* 讓容器水平居中 */
padding: 0;
border: none; /* 確保沒有邊框 */
text-align: center;
}
/* 登入按鈕 */
.login-sso-button {
background-color: transparent;
color: #0000FF;
font-size: 16px;
padding: 5px 10px;
border: none;
cursor: pointer;
}
.login-sso-button:hover {
background-color: transparent;
color: #FF4500;
font-size: 18px; /* 懸停時字體稍微放大 */
}
#logo{
float:left;
background-color:#83F2FF;
padding:0px 10px;
}
#headbanner {
color:#165A5D;
font-size:15px;
float:left;
padding:49px 0px 15px 90px;
}
html>body #headbanner {padding:70px 0px 15px 0px;margin-left:-140px;}
#headbanner a:link, #headbanner a:visited{
color:#598817;
font-weight:bold;
padding:0px;
text-decoration: none;}
#headbanner a:hover, #headbanner a:active{
color:#FFF;
background-color:#DA85D6;
padding:0px;
font-weight:bold;
text-decoration: none;}
/*container*/
#container {
width:979px;
padding:0px;
background-color:#FFFFFF;
}
html>body #container {margin-top:0px;height:150%;}
/*center content*/
#c-content{
float:left;
width:899px;
margin:-10px 0px 0px 0px;
padding:0px 0px 0px 8px;
}
html>body #c-content {width:962px;margin:-22px 0px 0px 0px;padding:0px 0px 0px 17px;background-color:#FFFFFF;}
#c-content td{vertical-align:top;}
.border{border-left:1px solid #DEDEDE;}
#c-content > table > tbody > tr {
display: flex; /* 僅影響第一層的 tr */
flex-wrap: wrap;
}
#breadcrumb{
float:left;
width:899px;
height:24px;
background-image: url("../images/bg_breadcrumb.gif");
background-repeat:no-repeat;
font-size:12px;
color:#747474;
margin:0px;
text-align:right;
padding:10px 30px 10px 0px;
}
html>body #breadcrumb {width:859px;padding:5px 40px 15px 0px;}
#sub-navigation{
float:left;
width:191px;
margin:0px;
padding:0px 6px 0px 10px;
/*border-left:1px solid #DEDEDE;
background-image: url("../images/bg_sub-navigation.gif");*/
/*max-height: 635px;*/ /* 設定最大高度 */
overflow-y: auto; /* 顯示垂直捲動條 */
}
html>body #sub-navigation{width:175px;}
#subnav-title{
color:#1E1D1D;
font-size:16px;
padding:10px 20px 0px 10px;
}
#subnav-item{
color:#1E1D1D;
font-size:12px;
padding:2px 10px 0px 10px;
line-height:15px;
}
#subnav-item a:hover, #subnav-item a:active{
width:150px;
height:15px;
background-image: url("../images/bg_arrow.gif");
background-repeat:no-repeat;
}
#content{
float:left;
width:680px;
padding:0px 0px 90px 0px;
margin-left:0px;
background-image: url("../images/bg_content.jpg");
background-repeat: repeat-y; /* 背景圖片在垂直方向重複 */
min-height: 100%; /* 確保內容區塊的高度能自適應 */
}
html>body #content {width:680px;margin:0px;}
#breadcrumb-all{
float:left;
width:899px;
height:24px;
background-image: url("../images/bg_breadcrumb_all.gif");
background-repeat:no-repeat;
font-size:12px;
color:#747474;
margin:0px;
text-align:right;
padding:10px 30px 10px 0px;
}
html>body #breadcrumb-all {width:859px;padding:5px 40px 15px 0px;}
#content-all {
margin: 0;
padding: 0;
width: 100%; /* 讓整個區塊寬度自動填滿可用空間 */
background-image: url("../images/bg_content_all.jpg");
}
html>body #content-all {width:960px;margin:0px;}
/*
html>body #content {width:697px;margin:0px;}
*/ /*fixed by Chienlin 109.09.23*/
#content-header {
display: flex;
justify-content: space-between;
}
#content-title{
color:#DA85D6;
font-size:20px;
padding:10px 10px 0px 25px;
}
.mark{
color:#DA85D6;
font-size:12px; }
#total{
color:#747474;
font-size:12px;
text-align:right;
padding:10px 35px 10px 0px;
}
#memo{
color:#3434FF;
font-size:12px;
text-align:right;
padding:10px 35px 10px 0px;
}
.red {
color: #FF0000;
font-weight:bold;}
.pink {
color: #DA85D6;
font-weight:bold;}
.green {
color: #747474;}
#table1 table{
width:95%;
font-size:12px;
color:#626060;
margin:0px 10px;
border:1px solid #DEDEDE;
}
html>body #table1 table{width:95%;}
#table1 th{
text-align:center;
background-color:#F1DEF0;
font-size:12px;
color:#1E1D1D;
padding:7px 0px;
}
#table1 td{
text-align:left;
vertical-align:top;
font-size:12px;
padding:2px 3px;
line-height: 15px;
/*border-bottom:1px dotted #DEDEDE;*/
}
.dgHeader {
background-color:#F1DEF0;
font-size:12px;
color:#1E1D1D;
padding:7px 0px;
text-align:center;
line-height: 15px;
}
.dgItem {
vertical-align:top;
font-size:12px;
padding:2px 3px;
line-height: 15px;
/*border-bottom:1px dotted #DEDEDE;*/
}
.dgAlternative{
vertical-align:top;
font-size:12px;
padding:2px 3px;
background-color:#F2F2F2;
line-height: 15px;
/*border-bottom:1px dotted #DEDEDE;*/
}
#table2 table{
width:650px;
font-size:12px;
color:#747474;
margin:10px 10px;
padding:0px 0px;
border:1px solid #DEDEDE;
line-height: 15px;
}
html>body #table2 table{width:650px;}
#table2 th{
font-size:12px;
color:#619740;
padding:10px 10px;
text-align:right;
vertical-align:middle;
}
#table2 td{
vertical-align:middle;
color:#61625E;
font-size:12px;
padding:5px 10px;
/*border-bottom:1px dotted red;*/
}
#table3 table{
width:615px;
font-size:12px;
color:#747474;
margin:10px 10px;
padding:0px 0px;
border:1px solid #DEDEDE;
line-height: 15px;
}
html>body #table2 table{width:650px;}
#table3 th{
font-size:12px;
color:#619740;
padding:10px 10px;
text-align:right;
vertical-align:middle;
}
#table3 td{
vertical-align:middle;
color:#61625E;
font-size:12px;
padding:5px 10px;
/*border-bottom:1px dotted red;*/
}
#table4 table{
width:615px;
font-size:12px;
color:#747474;
margin:10px 10px;
padding:0px 0px;
border:1px solid #DEDEDE;
line-height: 15px;
}
html>body #table2 table{width:650px;}
#table4 th{
font-size:12px;
color:#619740;
padding:10px 10px;
text-align:left;
vertical-align:middle;
}
#table4 td{
vertical-align:middle;
color:#61625E;
font-size:12px;
padding:5px 10px;
/*border-bottom:1px dotted red;*/
}
#title1{
color:#434647;
font-size:16px;
padding:10px 10px 0px 15px;
}
#title2{
color:#434647;
font-family:"Microsoft JhengHei" , 微軟正黑體, Verdana;
font-weight:bold;
font-size:15px;
padding:10px 10px 0px 5px;
line-height:16px;
}
.button1{
text-align:center;
background-color:#EFEFEF;
border:1px solid #D1D1D1;
/*height:20px;*/
padding:3px 2px;
height: 20px;
/*width: 40px;*/
}
.button2{
background-color:#F0E9F0;
border:1px solid #D1D1D1;
height:20px;
padding:3px 0px;}
#bottom{
float:left;
width:899px;
height:23px;
background-image: url("../images/bg_bottom.jpg");
/*border:1px solid red;*/
margin-left:-4px;
padding:0px;
position: absolute;
left: 50%; /* 水平居中 */
transform: translateX(-52%); /* 修正偏移 */
}
html>body #bottom {width:908px;margin:0px 0px 0px -17px;}
#footer{
float:left;
width:979px;
height:138px;
font-size:12px;
background-image: url("../images/bg_footer.jpg");
background-repeat:no-repeat;
margin:0px;}
html>body #footer{margin-top:0px;}
#footerinfo1{
text-align:center;
float:left;
width:900px;
/* padding:80px 30px 0px 60px;*/
padding:65px 30px 0px 10px;
color:#535353;
word-spacing:0.6em;
font-size:12px;
}
/*News content*/
#news_content{
float:left;
width:680px;
padding:0px 0px 90px 0px;
margin-left:0px;
/*border:1px solid #434343;*/
background-image: url("../images/bg_content.jpg");
}
#news_content table{
width:550px;
font-size:12px;
color:#747474;
margin:10px 10px 50px 50px;
padding:20px 0px;
border-top:1px dotted #DEDEDE;
border-right:1px dotted #DEDEDE;
border-bottom:0px dotted #DEDEDE;
border-left:1px dotted #DEDEDE;
}
html>body #news_content table{width:650px;}
#news_content th{
width:80px;
font-size:12px;
background-color:#F1DEF0;
color:#619740;
padding:10px 10px;
text-align:right;
vertical-align:middle;
border-bottom:1px dotted #DEDEDE;
}
#news_content td{
vertical-align:middle;
color:#61625E;
font-size:12px;
padding:5px 10px;
border-bottom:1px dotted #DEDEDE;
}
#content-left
{
font-size:12px;
color:#747474;
margin:0px;
text-align:left;
padding:10px 20px 10px 0px;
}
div#ucNav_pnlMenu {
margin: 10px 0px 0px 0px;
}
#lawmemo ol{
margin:0px 0px 0px 15px;
/*margin::0px;*/
padding:0px;
/*border:1px solid red;*/
/*list-style:none;*/
}
#lawmemo ul{
margin:0px 0px 0px 15px;
/*margin::0px;*/
padding:0px;
/*border:1px solid red;*/
/*list-style:none;*/
}
#lawmemo li{
margin:0px;
}
/*113.11.29 Chienlin 增加*/
.info-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 5px; /* 增加內邊距，確保按鈕的高度一致 */
margin: 0px;
font-size: 12px;
font-weight: bold;
color: #333;
background-color: #f4f4f4;
border: 2px solid #ccc;
border-radius: 5px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s, border-color 0.3s;
line-height: 1.5; /* 保證文字垂直居中 */
}
.info-button:hover {
background-color: #e6e6e6;
border-color: #888;
}
.button-icon {
margin-left: 8px;
width: 16px;
height: 16px;
vertical-align: middle; /* 保證圖示與文字垂直對齊 */
}
/* 主選單樣式 (mu_notype = 2) */
.sitemap-list {
display: inline-block;
vertical-align: top;
margin: 10px;
padding: 15px;
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
width: calc(25% - 20px);
min-width: 234px;
position: relative;
overflow: hidden;
line-height: 1.2; /* 調整行間距 */
font-size: 18px; /* 放大字體 */
color: #0000AF;
}
/* 第二層 (mu_notype = 3) */
.sitemap-list .submenu-container .level-2 {
background-color: #e3f2fd; /* 清淡的藍色 */
margin: 5px 0px;
border-radius: 10%; /* 半圓角 */
padding: 5px 0;
padding-left: 10px; /* 內縮文字一點 */
text-align: left;
line-height: 1.2;
font-size: 16px; /* 放大字體 */
color: #00006F;
}
/* 第三層 (mu_notype = 4) */
.sitemap-list .submenu-container .level-2 ul {
list-style-type: disc; /* 確保顯示圓點符號 */
margin: 0; /* 移除外邊距 */
padding: 0; /* 移除內邊距 */
padding-left: 20px; /* 左邊縮排，確保符號不會被遮住 */
}
/* 縮小 li 的行距，並確保圓點符號顯示 */
.sitemap-list .submenu-container .level-2 ul li {
margin: 2px 0; /* 減少項目間的間距 */
padding: 0; /* 去除額外內邊距 */
text-align: left;
font-size: 14px;
color: #333;
line-height: 1.1; /* 減小行距 */
}
/* 當 li 為塊級元素時，進一步確認縮小間距 */
.sitemap-list .submenu-container .level-2 ul li + li {
margin-top: 0; /* 取消項目之間的額外間距 */
}
/* 區塊的超連結樣式 */
.sitemap-list a {
text-decoration: none; /* 移除底線 */
color: inherit; /* 使顏色繼承父元素的顏色 */
font-weight: bold;
display: block;
height: 100%;
line-height: 1.2;
}
/* 超連結的懸停效果 */
.sitemap-list a:hover {
color:#ff8c00;
text-decoration: none;
}
/* 美化表格樣式：broad-list */
.broad-list {
background-color: #fff; /* 確保背景是白色 */
padding-bottom: 20px; /* 預留一點空間看起來不擠 */
margin-bottom: 0px;
}
.broad-list table {
width: 95%;
font-size: 13px;
color: #444;
margin: 10px auto;
border-collapse: collapse;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
background-color: #fff;
border: 1px solid #ddd;
border-radius: 6px;
overflow: hidden;
}
.broad-list th {
text-align: center;
background: linear-gradient(to right, #f0c7e6, #e0d9ff);
color: #333;
font-weight: bold;
padding: 10px;
border-bottom: 2px solid #e3e3e3;
font-size: 13px;
}
.broad-list td {
padding: 8px 10px;
vertical-align: middle;
border-bottom: 1px solid #f0f0f0;
font-size: 13px;
}
.broad-list tr:nth-child(even) {
background-color: #faf7ff;
}
/* 只讓 tbody 的 tr 有 hover 效果，排除表頭 */
.broad-list table tr:hover:not(:first-child) {
background-color: #f0f8ff;
transition: background-color 0.2s ease-in-out;
}
/* broad_read 專用 breadcrumb */
.breadcrumb-broad {
float: left;
width: 899px;
height: 24px;
background-repeat: no-repeat;
font-size: 12px;
color: #747474;
margin: 0;
text-align: right;
padding: 10px 30px 10px 0px;
}
/* 給 IE7+ / modern browsers */
html > body .breadcrumb-broad {
width: 859px;
padding: 5px 40px 15px 0px;
}
.breadcrumb-broad a {
color: #005a9e;
text-decoration: none;
}
.breadcrumb-broad a:hover {
text-decoration: underline;
}
/* 公告內容區塊 */
.content-panel {
background-color: #ffffff;
border: 1px solid #ddd;
padding: 30px;
margin-bottom: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
/* 表格 */
.notice-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 20px; /* 保留間距 */
padding-top: 0; /* 移除內距 */
}
.notice-table th {
background-color: #F1DEF0;
color: #333;
text-align: right;
padding: 12px;
vertical-align: middle;
width: 80px;
}
.notice-table td {
padding: 12px;
background-color: #fafafa;
vertical-align: middle;
}
/* 表單欄位 */
.broad-read-textbox {
width: 98%;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.broad-read-textarea {
width: 98%;
height: 300px;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
line-height: 1.5;
}