@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/* 共用區塊 */
body{ background-color:#ffffff; }

/*----------------------------------------------------------------------*/
/* 內頁 */
#Center::after{ content:''; display:block; clear:both; }
#Content{ max-width:1280px; margin:0 auto; }
#Content::after{ content: ""; display: block; clear: both; }


/*----------------------------------------------------------------------*/
/* 標題 */ 
.page_header{ box-sizing: border-box;  position: relative; z-index: 99; border-bottom: 1px solid #dddddd; }
.page_header::after{ content: ""; display: block; clear: both; }
.PageTitle h2 { display: inline-block; position: relative; padding-right: 15px; color: #10654e; }


/*----------------------------------------------------------------------*/
/* 文章內容 */
.ArticleTitle h3 { color:#333333; margin-bottom:5px; border-bottom: 1px solid #dddddd; 
   position: relative; padding: 8px 0; 
}
.ArticleTitle h3::before{ content: ""; display: block; width: 50px; height: 5px; 
    position: absolute; top: 0; left: 0; background-color: #1f893c;
}

/* 文章日期 */
.postdate { font-size: 1rem; color:#666666; position:relative; margin-bottom: 10px; } 

/* 文章更新日期 */
.post_info { padding:5px 0; }
.post_info span { display:inline-block; padding: 0 8px; line-height:28px; color:#666666; font-size:0.938em; }
.post_info span.date { font-family:'Oswald', sans-serif; color: #545859; }
.post_info span.tag{ background-color: #004d47; color: #fff; font-weight: bold; }
.post_info.below { padding-right:0; margin-top:0; }
.post_info.below span{ color: #666666; padding-right: 10px; padding-left: 0; border-right: 1px solid #999; font-size: 0.938em;
    font-family: "Microsoft JhengHei", "微軟正黑體", "Heiti TC", "黑體-繁",'Arial', sans-serif; line-height: 22px;
    margin-right: 5px;
}
.post_info.below span:last-child{ border-right: 0; margin-right: 0; padding-right: 0; }

/* 內頁顯示欄位 */
.content_info { background-color: #f4f4f4; padding: 15px 25px;
    border-top-right-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px;
    border-bottom-right-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px;
    border-left: 4px solid #bbb; margin-bottom: 20px; overflow: hidden;
}
.content_info li:last-child::after{ display:none; }
.content_info li span { font-size:0.938rem; line-height:170%; }
.content_info li span.title { white-space:nowrap; font-weight: bold; color: #666666; }
.content_info li span.title::after { content:"："; }
.content_info li span.cont { color:#222222; }
.content_info li a { word-break:break-all; }
  
/* 按鈕 */
.commonBtn a{ display:inline-block; border:3px solid #ddd; background-color:#fff;
    padding:0 30px; box-sizing:border-box;
    -webkit-border-radius:35px;
    -moz-border-radius:35px;
    border-radius:35px;
}
.commonBtn a::before{ content: ""; font-family: 'Font Awesome 5 Pro';
    font-weight: 900; margin-right:5px;
}
.commonBtn.write-btn a{ color:#ee6d6d; border-color:#ee6d6d; }
.commonBtn.write-btn a::before{ content: "\f044"; }


/*----------------------------------------------------------------------*/
/* 內頁元素 */
/* 導覽列(麵包屑) */
#Breadcrumbs{ padding-top:5px; text-align: right; }
#Breadcrumbs ul { display: inline-block; padding: 5px 10px; }
#Breadcrumbs ul li { float:left; padding-left:5px; padding-right:20px; font-size:0.938rem; 
    color:#8f8e8e; line-height:24px; position:relative; 
}
#Breadcrumbs ul li a { display:inline; color:#8f8e8e; text-decoration:none; }
    #Breadcrumbs ul li:first-child{ padding-left:24px; }
    #Breadcrumbs ul li:first-child::before{ content:''; display:inline-block; vertical-align:middle;  
        position:absolute; top:2px; left:0; width:20px; height:20px; background-size:contain;
        background-image:url('../images/icon_home.png'); background-repeat:no-repeat;
    }
#Breadcrumbs ul li:last-child{ padding-right: 0; color: #10654e; }
#Breadcrumbs ul li:last-child a{ color: #10654e; }
#Breadcrumbs ul li::after { content:''; position:absolute; top:6px; right:8px; 
    display: block; width: 1px; height: 15px; background-color: #8f8e8e;
    -webkit-transform: skewX(-20deg);
    -moz-transform: skewX(-20deg);
    transform: skewX(-20deg);
}
#Breadcrumbs ul li:last-child::after{ display:none; }
#Breadcrumbs ul li a:hover { text-decoration:underline; color: #222222; }

/* 工具列 */
.ToolBar { overflow:hidden; position:relative; margin-bottom:20px; margin-top: 5px; }
.ToolBar::after{ content: ""; display: block; clear: both; }
.ToolBar > div{ box-sizing: border-box;  position: relative; z-index: 99; }

/*.ToolBar dl.font_size, .ToolBar dl.share { height:34px; }*/
.ToolBar .colm_left a, .ToolBar dl.font_size dt, .ToolBar dl.share dt { line-height:40px; }
.ToolBar .colm_left a span, .ToolBar dl.font_size dd, .ToolBar dl.font_size a, .ToolBar dl.share dd, .ToolBar dl.share a { 
    width:40px; height:40px; margin:auto;
}
.ToolBar .colm_left a{ 
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.ToolBar .colm_left a, .ToolBar .colm_left a span, .ToolBar dl.font_size dd, .ToolBar dl.share dd a, .ToolBar .colm_left a span::before{ 
    -webkit-transition: background-color 0.5s ease, opacity 0.3s ease, border 0.3s ease;
    -moz-transition: background-color 0.5s ease, opacity 0.3s ease, border 0.3s ease;
    transition: background-color 0.5s ease, opacity 0.3s ease, border 0.3s ease;
}

/* 左邊工具 */
.ToolBar .colm_left { float:left; margin-right:20px; }
.ToolBar .colm_left a { display: inline-block; float:left; position:relative; 
    text-decoration:none; color:#333333; background-color: #ffffff; height: 42px; line-height: 42px;
    padding-right:15px; margin-right: 15px; padding-left: 48px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%; 
}
.ToolBar .colm_left a span{ display:inline-block; position:absolute; top: 0; left: 0; 
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
.ToolBar .colm_left a span::before { 
    content:''; display:inline-block; width:40px; height:40px; position:absolute; top:0; left:0; 
    background:url("../images/icon_toolbar.png") no-repeat; border: 1px solid #bebebe;
    background-size: 200%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
.ToolBar .colm_left a.return span::before { background-position:0 0; }
.ToolBar .colm_left a.print span::before { background-position:0 -40px; }
.ToolBar .colm_left a:hover{ color: #000000; }
.ToolBar .colm_left a:hover span{ background-color: #f5f5f5; }

/* 右邊工具 */
.colm_right > dl{ margin-right: 10px; }
.colm_right > dl:last-child{ margin-right: 0; border-right: 0; }
.ToolBar dl.font_size{ position:relative; padding-right:5px; }
.ToolBar dl.font_size > * { float:left; }
.ToolBar dl.font_size dd { margin-right:10px; }
.ToolBar dl.font_size a { display:block; background: url("../images/icon_toolbar.png") no-repeat; 
    text-indent:-10000px; border:1px solid #bebebe; background-color: #ffffff; background-size: 200%;
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
.ToolBar dl.font_size dd.font_small a { background-position:0 -78px; }
.ToolBar dl.font_size dd.font_medium a { background-position:0 -115px; }
.ToolBar dl.font_size dd.font_big a { background-position:0 -152px; }
.ToolBar dl.font_size a:hover{ background-color: #f5f5f5; }
.fs1 .ToolBar dl.font_size dd.font_small a{ background-color: #e7ffe0; border-color: #b2cea9; }
.fs2 .ToolBar dl.font_size dd.font_medium a{ background-color: #e7ffe0; border-color: #b2cea9; }
.fs3 .ToolBar dl.font_size dd.font_big a{ background-color: #e7ffe0; border-color: #b2cea9; }

.ToolBar dl.share{ padding-left:10px; }
.ToolBar dl.share > * { float:left; }
.ToolBar dl.share dd { margin-right:10px; opacity:1; }
.ToolBar dl.share dd:last-child{ margin-right:0; }
.ToolBar dl.share dd a { display:block; background: #ffffff url("../images/icon_toolbar.png") no-repeat; text-indent:-10000px; 
    cursor:pointer; border:1px solid #000000; background-color: #ffffff; background-size: 200%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
}
.ToolBar dl.share dd.facebook a { background-position:0 -190px; border-color: #3b5998; }
.ToolBar dl.share dd.facebook a:hover{ background-position:-38px -190px; background-color:#3b5998; }
.ToolBar dl.share dd.twitter a { background-position:0 -227px; border-color: #00abf1; }
.ToolBar dl.share dd.twitter a:hover{ background-position:-38px -227px; background-color: #00abf1; }
.ToolBar dl.share dd.line a { background-position:0 -266px; border-color: #00c300; }
.ToolBar dl.share dd.line a:hover{ background-position:-38px -266px; background-color: #00c300; }

/* 測試用 */
.ToolBar dl.font_size.test{ padding-right: 0; margin-right: 0; }
.ToolBar dl.font_size.test::after{ display: none; }
.ToolBar dl.font_size.test dd.font_big{ margin-right: 0; }


/*----------------------------------------------------------------------*/
/* 分類下拉 */
.CatTitle { margin:15px 0 20px; border-bottom:1px dotted #ccc; }
.CatTitle::after { content:''; display:block; width:100%; clear:both; }
.CatTitle h3 {display:inline-block; font-size:1.25rem; line-height:35px; color:#df7b39; }
.CatTitle .cat_select { line-height:35px; }
.CatTitle .cat_select .btn {
    color:#fff; box-sizing:border-box; border:0; margin:0 0 0 5px; padding:0 15px; height:35px; line-height:35px;
    background-color:#1f893c; font-size:1em;
    -webkit-transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    transition:all 0.3s ease;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
}
.CatTitle .cat_select select{ background-color:#fff; }
.CatTitle .cat_select .btn:hover, .CatTitle .cat_select .btn:focus { opacity:0.8; }
.CatTitle .cat_select select, .CatTitle .cat_select .btn { vertical-align:top; }


/*----------------------------------------------------------------------*/
/* 內頁通用功能 */
/* 按鈕 */
.tabs_common_box { margin-bottom:20px; }
.tabs_common_box ul li{ display: inline-block; }
.tabs_common_box ul li a{ display: block; background-color: #a5adaf; color: #ffffff; 
    border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;
    box-sizing: border-box;
}
.tabs_common_box ul li.active a{ background-color: #32944c; }
.tabs_common_box ul li a:hover{ background-color: #8a9395; }
.tabs_common_box ul li.active a:hover{ background-color: #32944c; opacity: 0.8; }


/*----------------------------------------------------------------------*/
/* 交通科技產業簡介 */
/* 大標題 */
.industry_title{ border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; padding: 8px 0; margin-bottom: 10px; }
.industry_title h3{ color: #222222; font-weight: normal; border-left: 8px solid #1f893c; padding-left: 8px; }

/* 小標題 */
.industryInfoBox .item_title h4{ position: relative; padding-left: 35px; font-weight: normal; line-height: 28px; }
.industryInfoBox .item_title h4::before{ content: ""; display: block; 
    width: 28px; height: 28px; background:#1f893c url(../images/icon_title_arrow.png) no-repeat;
    background-size: cover; background-position: center center; position: absolute;
    top:0; left: 0; border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%;
}

/* 共用 */
.industryInfoBox .itemBox{ border-bottom: 1px solid #dddddd; }
.industryInfoBox .itemBox:last-child{ border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* 最新消息 */
.industryInfoBox .more_btn{ text-align: center; }
.industryInfoBox .more_btn a{ display: inline-block; border: 1px solid #c6c6c6; 
    border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;   
}
.industryInfoBox .more_btn span{ display: inline-block; position: relative; }
.industryInfoBox .more_btn span::after{ 
    content:''; display:block; position:absolute; top:50%; right:-15px; margin-top:-4px;
    border-left:2px solid #444444;
    border-top:2px solid #444444;
    width:8px; height:8px;
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    transform:rotate(135deg);
}
.industryInfoBox .more_btn a:hover{ background-color: #333333; color: #ffffff; border-color: #333333; }
.industryInfoBox .more_btn a:hover span::after{ border-color: #ffffff; }

/* 小組成員 */
.industryInfoBox .teamList{ display: flex; flex-wrap: wrap; }
.industryInfoBox .teamList .item{ flex: 0 1 auto; width: 50%; box-sizing: border-box; }
.industryInfoBox .teamList .item > div{ background-color: #eaefed; box-sizing: border-box; 
    border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; 
}
.industryInfoBox .teamList .item > div::after{ content: ""; display: block; clear: both; }
.industryInfoBox .teamList .img{ max-width: 100%; border: 2px solid #ffffff; overflow: hidden; 
    border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
    overflow: hidden; box-shadow: 0 0 10px rgba(0,0,0,0.15); background-color: rgba(255,255,255,0.5);
}
.industryInfoBox .teamList .img > div{ line-height: 0; text-indent: -9999px; background-repeat: no-repeat;
    padding-bottom: 100%; background-size: contain; background-position: center center; 
}
.industryInfoBox .teamList .cont{ box-sizing: border-box; }
.industryInfoBox .teamList .name{ margin-bottom: 5px; }
.industryInfoBox .teamList .sub_tt{ margin-bottom: 5px; }
.industryInfoBox .teamList .sub_tt span{ display: inline-block; padding-bottom: 5px; }
.industryInfoBox .teamList .sub_tt span::after{ content: "/"; color:#b9b9b9; padding-left: 3px; padding-right: 3px; }
.industryInfoBox .teamList .sub_tt span:last-child::after{ display: none; }
.industryInfoBox .teamList .company{ color: #888888; }

/* 產業推動措施 */
.industryInfoBox .editable_content table{ font-size: 1rem; }


/*----------------------------------------------------------------------*/
/* owl-carousel */
.owl-carousel.owl-drag .owl-item{ margin-bottom: 0; }
.owl-carousel .owl-dots.disabled{ display: none; }
.owl-carousel .owl-nav{ text-indent:-9999px; }
.owl-carousel button.owl-prev, .owl-carousel button.owl-next{ 
    position:absolute; top:50%; width:50px; height:50px; margin-top:-25px;
    border: 0; background-color: #eaeaea; text-indent: -99999px;
    border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.owl-carousel button.owl-prev:hover, .owl-carousel button.owl-next:hover{ background-color: #00b2b3; }
.owl-carousel button.owl-prev:focus, .owl-carousel button.owl-next:focus{ outline:0; }
.owl-carousel button.owl-prev { left:-50px; }
.owl-carousel button.owl-next { right:-50px; }

.owl-carousel button.owl-prev::after, .owl-carousel button.owl-next::after{
    content:''; position:absolute; top: 17px; width:14px; height:14px; 
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}
.owl-carousel button.owl-prev::after{ left:20px;
    border-right:2px solid #000;
    border-top:2px solid #000;
    -webkit-transform:rotate(-135deg);
    -moz-transform:rotate(-135deg);
    transform:rotate(-135deg); 
}
.owl-carousel button.owl-next::after{ right:20px;
    border-left:2px solid #000;
    border-top:2px solid #000;
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    transform:rotate(135deg);   
}
.owl-carousel button.owl-prev:hover::after, .owl-carousel button.owl-next:hover::after{ 
    border-color:#ffffff; 
}
.owl-carousel .owl-nav.disabled{ opacity: 0; visibility: hidden; }


/*----------------------------------------------------------------------*/
/* 搜尋表單 */
.ListSearch{ overflow:hidden; background-color: #f4f4f4; border: 1px solid #dddddd; 
    border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
    padding: 15px 20px 10px 20px;
}
.ListSearch .item{ display:inline-block; max-width:100%; line-height:35px; position:relative; 
    float:left; margin-right:15px;
}
.ListSearch .item:last-child{ margin-right:0; }
.ListSearch .item .label::after{ content:'：'; display: none; }
.ListSearch.FormElmt input[type="text"], .ListSearch.FormElmt select{ vertical-align:middle; margin-bottom:0;}

.ListSearch.FormElmt{ margin-bottom:15px; }
.ListSearch.FormElmt .item{ position:relative; }
.ListSearch.FormElmt .item .label{ color:#222222; font-size:0.938em; position:absolute; top:0; left:0; line-height:20px; }
.ListSearch.FormElmt .item .cont{ padding-top:25px; display:inline-block; }
.ListSearch.FormElmt select{ padding:0 8px; margin-right:10px; }
.ListSearch.FormElmt select:last-child{ margin-right:0; }
.ListSearch.FormElmt .BtnCommon{ position:inherit; display:inline-block; padding-top:25px; border: 0px;}
.ListSearch.FormElmt .BtnCommon span{ background-color: #333333; 
    border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;
}
.ListSearch.FormElmt .BtnCommon input[type="submit"]{ line-height:45px; font-size:1rem; padding: 0 20px 0 40px;
    background: url(../images/icon_search_w.png) no-repeat; background-position: 3px 3px; background-size: 40px 40px;
}
.ListSearch.FormElmt .BtnCommon span:hover{ background-color: #1f893c; }

.FormElmt .input_group > div { display: inline-block; margin-right: 15px; line-height: 35px; 
    white-space: normal; word-break: break-all;
}
.FormElmt .input_group > div:last-child{ margin-right: 0; }


/*----------------------------------------------------------------------*/
/* 搜尋結果 */
.SearchResult { margin-top:15px; margin-bottom:30px; }
.SearchResult .results_count{ padding:10px; margin-bottom: 10px; background-color: #e4f3e3;
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}
.SearchResult .results_count span{ color: #1f893c; background-color: #fcf7c0; font-weight: bold; }
.SearchResult .item { padding:20px 25px; overflow:hidden; margin-bottom: 10px;
    border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
    border: 1px solid #dddddd;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.SearchResult .item:nth-child(2n+1){ background-color: #f4f4f4; }
.SearchResult .item:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.2); }
.SearchResult .item span { color: #222222; background-color: #fcf7c0; color: #1f893c;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.SearchResult .title { padding-bottom:5px; line-height:150%; font-size:1.375em; font-weight: bold; }
.SearchResult .title a { display:block; color:#333333;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.SearchResult .title a:hover { color: #1f893c; }
.SearchResult .desc { color: #444444; line-height:180%; }
.SearchResult .date, .SearchResult .cat, .SearchResult .source { font-size: 0.938rem; }
.SearchResult .cat a { color: #222222; text-decoration: none; 
    display: inline-block; padding: 2px 5px;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    transition: all 0.25s ease; 
}
.SearchResult .cat a:hover, .SearchResult .cat a:focus{ color: #1f893c; text-decoration: underline; }
.SearchResult .date { 
    color: #6a6a6a;
    font-size: 0.875em;
    line-height: 175%;
    background: url(../images/icon_date.png) no-repeat 0 center;
    padding-left: 16px;
}


/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable { margin-top:10px; position:relative; }
.ListTable table{ width:100%; /*border-collapse:separate; border-spacing:3px;*/ } 
.ListTable table th{ font-weight: bold; }
.ListTable table th, .ListTable table td{ text-align:center; box-sizing:border-box; }
.ListTable table td.title { text-align:left; }
.ListTable table td.title a { display:inline-block; color:#000000; text-decoration:none; line-height:1.6; }
.ListTable table td.title a:hover { color:#1f893c; text-decoration:underline; }
.ListTable td.download li { margin-right:2px; margin-bottom:4px; display:inline-block; }
.ListTable td.download a { text-indent:-10000px; color:#7e7e7e; }
.ListTable td.download.desc a { width:auto; height:auto; text-indent:0; }
.ListTable td.download.desc a:after { left:0; margin-left:0; }
.ListTable td.download a:hover, .ListTable td.download a:focus { opacity:0.7; }
.ListTable .manage_btns a { 
	display:inline-block; margin:5px; background-color:#777; padding:0 10px; color:#fff; line-height:32px; font-size:1rem; 
	-webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px;
	-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;
	}
.ListTable .manage_btns a:hover, .ListTable .manage_btns a:focus { background-color:#1f893c; }
.ListTable .manage_btns a::before { 
	content:''; display:inline-block; width:16px; height:16px; margin:0 3px 0.25em 0; vertical-align:middle; 
	background:url(../images/icon_manage_btns.png) no-repeat; background-size:100%;
	}
	.ListTable .manage_btns a.add::before { background-position:0 0; }
	.ListTable .manage_btns a.edit::before { background-position:0 50%; }
	.ListTable .manage_btns a.del::before { background-position:0 100%; }
.ListTable table th.thum { width:150px; }
.ListTable table td.thum { width:150px; text-align:center; }
.ListTable table td.thum img { max-width:150px; }
.ListTable table .text-left{ text-align:left; }
.ListTable table .text-center{ text-align:center; }

.ListTableBtns { text-align:right; }
.ListTableBtns a { 
	display:inline-block; margin:5px; background-color:#333; padding:0 20px; color:#fff; line-height:44px; font-size:1.125rem; 
	-webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px;
	-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease;
	}
.ListTableBtns a:hover, .ListTableBtns a:focus { background-color:#1f893c; }
.ListTableBtns a::before { 
	content:''; display:inline-block; width:16px; height:16px; margin:0 3px 0.25em 0; vertical-align:middle; 
	background:url(../images/icon_manage_btns.png) no-repeat; background-size:100%;
	}
	.ListTableBtns a.add::before { background-position:0 0; }
	.ListTableBtns a.edit::before { background-position:0 50%; }
	.ListTableBtns a.del::before { background-position:0 100%; }

/* 第2配色 */
.ListTable.style2 table td.title a:hover { color:#296eb1; }
.ListTable.style2 .manage_btns a:hover, .ListTable.style2 .manage_btns a:focus { background-color:#296eb1; }


/*----------------------------------------------------------------------*/
/* 圖文列表 */
.editable_content + .ListPicText { margin-top:0; }
.ListPicText{ overflow: hidden; }
.ListPicText::after, .ListPicText .item > div::after { content:''; display:block; width:100%; clear:both; }
.ListPicText .item, .ListPicText .item > div, .ListPicText .img, .ListPicText .img > div, .ListPicText .cont, 
.ListPicText .btn { 
    box-sizing:border-box;  
}
.ListPicText .item > div { height:100%; position:relative; background-color: #eaf0ed; 
    border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px;
}
.ListPicText .img { position:relative; overflow:hidden; padding: 15px; overflow: hidden; 
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}
.ListPicText .img div {
    padding-bottom:75%; background-repeat:no-repeat; background-position: center center; background-size:cover; 
    text-indent: -9999px; line-height: 0; overflow: hidden; 
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}
.ListPicText .img a { overflow: hidden; display:block; width:100%; height:100%; text-indent:-10000px; 
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;
}

.ListPicText .cont{ position:relative; }
.ListPicText .info{ position: relative; padding-top: 4px; }
.ListPicText .info::before{ content: ""; display: block; width: 30px; height: 3px; background-color: #1f893c; position: absolute; top: 0; }
.ListPicText .info > div{ display: inline-block; margin-bottom: 5px; }
.ListPicText .info > div:after{ content: "/"; color: #bbb; font-family: 'Arial', sans-serif; padding-left: 8px; padding-right: 3px; }
.ListPicText .info > div:last-child:after{ display: none; }
.ListPicText .date{ color: #222222; position: relative; padding-top: 4px; }
.ListPicText .title { margin-bottom:5px; font-weight: bold; letter-spacing: 0.05em; color:#222222; }
.ListPicText .title a { 
    display:block; color:#222222; line-height:150%; text-decoration:none;
    /*描述最多顯2行，但此語法IE、Firefox皆不支援*/
    line-height:1.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    /*不支援上述語法時的備案*/
    max-height:3em;
    /*transition: color 0.25s ease-out;
    -webkit-transition: color 0.25s ease-out;
    -moz-transition: color 0.25s ease-out;*/
}
.ListPicText .title a:hover{ color: #1f893c; }
.ListPicText .desc { 
    margin-bottom:15px; color:#444444; line-height:170%; 
    /*描述最多顯示3行，但此語法IE、Firefox皆不支援*/
    line-height:1.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    /*不支援上述語法時的備案*/
    max-height:4.5em;
}

.ListPicText .btn{ text-align:center; position:absolute; }
.ListPicText .btn a { padding: 0 30px 0 20px; font-size:0.938em; line-height:35px;
    display:inline-block; color:#333333; text-decoration:none; position:relative;
    background-color:#d8e9ed;
    -webkit-border-radius:35px; 
    -moz-border-radius:35px; 
    border-radius:35px; 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.ListPicText .btn a::after{ content:''; position:absolute;  
    width: 6px; height: 6px; top:50%; right:20px; margin-top:-4px;
    border-top: 2px solid #3d3d3d;
    border-left: 2px solid #3d3d3d;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}

/* 限制行數 */
/*.ListPicText.single .title a{ 
    line-height:1.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    max-height:3em;
}*/
.ListPicText.list-view .title a{
    line-height:1.5em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    max-height:3em;
}
.ListPicText.grid-view .desc, .ListPicText.single .desc, .ListPicText.trisection .desc{  
    line-height:1.75em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    max-height:5.25em;
}

/* grid-view */
.ListPicText .tag{ display: inline-block; background-color:#004d47; padding:0 10px; color: #fff; line-height: 28px; text-align: center;}
.ListPicText .tag a{ display: block; }

/* 影片樣式 */
.ListPicText .video_box{ width: 100%; position: relative; }
.ListPicText .video_box .img{ 
    width: 100%; position: absolute; top: 0; left: 0; z-index: 202; 
}
.ListPicText .video_box .img::after{ content: ""; display: block; width: 48px; height: 48px; 
    background-image: url(../images/icon_play.png); position: absolute; top: 50%; left: 50%; 
    margin-top: -24px; margin-left: -24px; pointer-events: none;
    border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%;
}
.ListPicText .video_box .video{ position: relative; padding-bottom: 75%; overflow: hidden; z-index: 99; }
.ListPicText .video_box iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*----------------------------------------------------------------------*/
/* 上下篇文章 */
.prevNextLink { padding-top:30px; clear:both; }
.prevNextLink > div { overflow:hidden; }
.prevNextLink .prev, .prevNextLink .next { width:48%; background-color:#eaeaea; box-sizing:border-box; 
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.prevNextLink .prev { float:left; border-left:3px solid #0cb2d5; }
.prevNextLink .next { float:right; border-right:3px solid #0cb2d5; text-align:right; }
.prevNextLink a { display:block; padding:0 15px 10px 15px; text-decoration:none; color:#6d6d6d; line-height:150%; }

.prevNextLink a span { display:block; padding-top:10px; padding-bottom:10px; font-size:150%; color:#4d4d4d; position:relative; }
    .prevNextLink .prev a span { padding-left:30px; padding-right:15px; }
    .prevNextLink .next a span { padding-left:15px; padding-right:30px; }
.prevNextLink a span::after { 
    content:''; display:block; position:absolute; top:50%; margin-top:-7px; width:14px; height:14px; 
    border-bottom:2px solid #4d4d4d; border-left:2px solid #4d4d4d;
}
.prevNextLink .prev a span::after { 
    left:5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.prevNextLink .next a span::after { 
    right:5px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(-135deg);
}


/*----------------------------------------------------------------------*/
/* 延伸閱讀 */
.related_articles { box-sizing:border-box; position: relative;
    background-color:#f7f6f4; border: 2px solid #e1e0d8;
}
.related_articles .title { font-size:1.375em; font-weight:bold; background-color: #f7f6f4; 
    color:#333; position:relative; padding-left: 40px; display: block; line-height: 40px;
    position: absolute; top: -20px; left: 1.875rem; padding: 0 15px 0 60px; letter-spacing: 0.1em;
}
.related_articles .title::before { background:url(../images/icon_related.png) no-repeat;
    content:''; display:block; position:absolute; top:0; left:10px; width:40px; height:40px; 
}
.related_articles .list { padding-left:30px; list-style-type:decimal; }
.related_articles .list li { padding:8px 0; color:#333; line-height:150%; }
.related_articles .list a { display:block; color:#333; text-decoration:none; }
.related_articles .list a:hover { text-decoration:underline; color:#a68728; }


/*----------------------------------------------------------------------*/
/* 頁碼 */
#Pagination { clear:both; text-align:center; }
#Pagination .pages { display:inline-block; margin-bottom: 10px; }
#Pagination a { display:inline-block; width:40px; text-decoration:none; line-height:40px; color:#222222; background-color: #eeeeee;
    /*font-family: 'Barlow Condensed', 'Noto Sans TC', "Microsoft JhengHei", "微軟正黑體", "Heiti TC", sans-serif; */
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    /*-webkit-border-radius:5%; 
    -moz-border-radius:5%; 
    border-radius:5%;  */
}   
#Pagination a:hover { background-color:#cff1df; }
#Pagination a:focus{ border: none; }
#Pagination a.focuz { background-color: #1f893c; color: #ffffff; } 
#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { 
    width:auto; padding:0 10px;    
}
#Pagination .current { width:auto; background-color:transparent; cursor:default; padding: 0 10px; border:0;}
#Pagination .current:hover { color:#333333; background-color:transparent; }
    
#Pagination .setting { display:block; clear:both; padding-top:15px; line-height:40px; color:#666666; }
#Pagination .setting select { padding:2px 8px; border:1px solid #777777; height:40px; 
    vertical-align: middle; font-size:1em; 
    -webkit-border-radius:35px; 
    -moz-border-radius:35px; 
    border-radius:35px; 
}
#Pagination .setting input, #Pagination .setting select{
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}
#Pagination .setting input[type="text"] { width:55px; height:40px; border:1px solid #777777; vertical-align:bottom;
    padding:5px 10px; font-size: 1rem;
    -webkit-border-radius:35px; 
    -moz-border-radius:35px; 
    border-radius:35px; 
}
#Pagination .setting input[type="text"]:focus, #Pagination .setting select:focus{ outline:0; border-color:#1f893c; 
    background-color: #fffed3; 
}
#Pagination .setting input[type="submit"] { height:40px; padding:0 6px; margin-left:3px; }
#Pagination .setting input[type="button"]{ border:0; height:40px; line-height:40px; background-color:#333333; 
    color:#ffffff; padding:0 6px; vertical-align:middle; padding: 0 15px; font-size: 1rem;
    -webkit-border-radius:35px; 
    -moz-border-radius:35px; 
    border-radius:35px; 
}
#Pagination .setting  input[type="button"]:hover{ background-color:#1f893c; border-color:#1f893c; }
#Pagination .per_page select, #Pagination .goto input[type="text"]{ margin:0 5px; }

/* 內頁頁碼 */
.inPagination { margin-top:30px; margin-bottom:20px; clear:both; text-align:center; font-size:1.125rem; display:none; }
.inPagination .pages { display:inline-block; }
.inPagination a { border: 1px solid #f0f0f0;
    display:inline-block; width:40px; margin:0 4px 12px 4px; background-color:#f0f0f0; 
    color:#222222; text-decoration:none; line-height:38px; 
    -webkit-border-radius:50%; 
    -moz-border-radius:50%; 
    border-radius:50%; 
    transition: all 0.25s ease-in-out;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
}
.inPagination a:hover { border-color: #bbbbbb; background-color: #ffffff; }
.inPagination a.focuz { color:#ffffff; background-color:#333333; border-color: #333333; }


/* 檔案下載icon */
.file_ext { background-repeat:no-repeat; display:inline-block !important; }
	.file_doc { background-image:url("../images/file_ext/doc.png"); }
	.file_img { background-image:url("../images/file_ext/img.png"); }
	.file_mov { background-image:url("../images/file_ext/mov.png"); }
	.file_other { background-image:url("../images/file_ext/other.png"); }
	.file_pdf { background-image:url("../images/file_ext/pdf.png"); }
	.file_ppt { background-image:url("../images/file_ext/ppt.png"); }
	.file_txt { background-image:url("../images/file_ext/txt.png"); }
	.file_xls { background-image:url("../images/file_ext/xls.png"); }
	.file_zip { background-image:url("../images/file_ext/zip.png"); }
    .file_odp { background-image:url("../images/file_ext/odp.png"); }
    .file_csv { background-image:url("../images/file_ext/csv.png"); }
    .file_ods { background-image:url("../images/file_ext/ods.png"); }
    .file_odt { background-image:url("../images/file_ext/odt.png"); }
	.file_xml { background-image:url("../images/file_ext/xml.png"); }


