@charset "utf-8";
/* CSS Document */

/*----------------------------------------------------------------------*/
/*共用區塊*/
/* 動畫在一起 */
.IndexMoreBtn > a, .IndexTextColumn .title a, .IndexTextColumn .tags ul li a, .IndexIconList .title,
.IndexTextList .item .title a, #Header .tool_link > ul > li.login a, .industryInfoBox .more_btn a,
.industryInfoBox .more_btn span::after, .tabs_common_box ul li a{
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
}


/*----------------------------------------------------------------------*/
/* Header */
#Header { top: -100px; z-index:10099; }
#Header .topHeader{ height: 130px; max-width: 1440px; margin: auto; position: relative; }
#Header .logo{ width: 180px; position: absolute; top: 0; left: 0; }
#Header .logo a{ width: 100%; height: 100%; }
#Header .logo a img{ vertical-align: middle; }
#Header .topGuidBox{ padding-top: 20px; }
#Header .tool_link > ul > li.login a:hover{ opacity: 0.8; }

/*做動畫*/
#Header{
    -webkit-transition: top 0.3s ease-out; 
    -moz-transition: top 0.3s ease-out; 
    transition: top 0.3s ease-out;   
}

/* 浮動效果 */
.MenuFix #Header{ position: fixed; top: 0; z-index: 9998; min-height: inherit; height: 100px; 
   box-shadow:0 8px 15px rgba(0,0,0,0.15); display: table; background-color: rgba(255,255,255,0.95);
}
.MenuFix #Header > div { position: relative; }
.MenuFix #Header .topHeader{ max-width: 100%; height: auto; padding: 0 20px; position: initial; }
.MenuFix #Header .logo{ top:0; width: 138px; }
.MenuFix #Header .tool_link{ display: inline-block; vertical-align: middle; margin-bottom: 0; font-size: 1rem; }
.MenuFix #Header .tool_link > ul > li{ padding: 0 10px; }
.MenuFix #Header .tool_link > ul > li.login{ padding-left: 0; padding-right: 0; }
.MenuFix #Header .tool_link > ul > li.login a{ background-image:none; padding: 0 15px; }

.MenuFix #Header .header_search{ width: 200px; float: none; display: inline-block; vertical-align: middle; }
.MenuFix #Header .topGuidBox{ padding-top: 10px; }
.MenuFix .header_search{ background-color:#dddddd; }
.MenuFix .header_search input[type="text"]{ font-size: 1rem; background-color:#dddddd; }

@media screen and ( max-width:1439px ){  
    #Header .topHeader{ padding-left: 20px; padding-right: 20px; }
}

@media screen and ( min-width:1440px ){ 

}


/*----------------------------------------------------------------------*/
/* Menu */
#Menu { position: relative; z-index: 9999;
    display:block; width:100%; box-sizing:border-box; clear:both; border-top: 1px solid #dddddd;
    text-align:right; font-size: 1.25rem; color: #000000;
}
#Menu > div { text-align:center; padding: 0 20px; box-shadow: 0 10px 10px rgba(0,0,0,0.15); }
#Menu li { position:relative; }
#Menu li a { display:block; color:#222222; letter-spacing:.1em; position:relative; }
#Menu li a:hover, #Menu li a:focus { color:#1f893c; }

/* ---------- Menu 第1層 ---------- */
#Menu > div > ul > li { display:inline-block; position: relative; padding: 0 20px; }
#Menu > div > ul > li::after{
    content: "";
    display: block;
    width: 1px;
    height: 18px;
    background-color: #bbbbbb;
    position: absolute;
    top: 23px;
    left: -4px;
    transform: skew(-20deg);
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
}
#Menu > div > ul > li:first-child::after{ display: none; }
#Menu > div > ul > li > a { display: block; line-height:2rem; padding:15px 0; }

@media screen and ( max-width:1359px ){
}
@media screen and ( min-width:1360px ){
}

/* ---------- Menu 第2層 ---------- */
#Menu ul ul a, #Menu ul ul a::before, #Menu ul ul a::after { 
    transition: all .25s ease-out; 
    -moz-transition:all .25s ease-out; 
    -webkit-transition: all .25s ease-out;
}
#Menu ul ul {
    border-top:2px solid #1f893c;
    position:absolute;
    top: 20px;
    /*left:0;*/
    right:0;
    width:8em;
    overflow:visible;
    clear:left;
    z-index:99999;
    box-shadow:0 5px 30px rgba(0,0,0,0.2);
    transform:translateY(40px);
}
#Menu > div > ul > li:first-child > ul, 
#Menu > div > ul > li:nth-child(2) > ul { right:auto; left:0; }
/*#Menu > div > ul > li:last-child > ul, 
#Menu > div > ul > li:nth-last-child(2) > ul,
#Menu > div > ul > li:nth-last-child(3) > ul,
#Menu > div > ul > li:nth-last-child(4) > ul { left:auto; right:0; }*/

#Menu ul ul a { 
    background-color:rgba(255,255,255,1); padding:10px; text-align:left;   
    line-height:150%; color:#000000; letter-spacing:.03em; font-size: 1.125rem;
}

#Menu ul ul li{ border-bottom: 1px solid #ddd; }
#Menu ul ul a:hover, #Menu ul ul a:focus{ background-color: #f4f4f4; }


/* ---------- Menu 第3層 ---------- */
#Menu ul ul ul { /*left:100%;*/ right:100%; top:-42px; }
#Menu > div > ul > li:first-child ul ul, 
#Menu > div > ul > li:nth-child(2) ul ul { 
    right:auto; left:100%; 
}
/*#Menu > div > ul > li:last-child ul ul, 
#Menu > div > ul > li:nth-last-child(2) ul ul, 
#Menu > div > ul > li:nth-last-child(3) ul ul,
#Menu > div > ul > li:nth-last-child(4) ul ul{ 
    left:auto; right:100%; 
}*/

/* ---------- 隱藏與顯示階層 ---------- */
#Menu ul ul { opacity:0; visibility:hidden;  }
#Menu ul li:hover > ul { opacity:1; visibility:visible; }

/* 浮動效果 */
.MenuFix #Menu{ border-top: 0; font-size: 1.125rem; }
.MenuFix #Menu > div{ box-shadow: none; text-align: right; padding: 0 20px; }
.MenuFix #Menu > div > ul > li::after{ top: 13px; }
.MenuFix #Menu > div > ul > li > a{ padding: 5px 0; }
.MenuFix #Menu ul ul{ top: 0; }
.MenuFix #Menu ul ul ul{ top: -42px; }


/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual .bx-wrapper .bx-controls-direction a { width:60px; height:60px; margin-top:-30px; }
#KeyVisual .bx-wrapper .bx-controls-direction a::after { width:14px; height:14px; margin-top:-8px; }
#KeyVisual .bx-wrapper .bx-controls-direction a:hover{ 
    box-shadow:0 5px 20px rgba(0,0,0,0.25); background-color:#ffffff;
}
#KeyVisual .bx-wrapper .bx-controls-direction .bx-prev{ left: 20px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-next{ right: 20px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-prev::after{ left:25px; }
#KeyVisual .bx-wrapper .bx-controls-direction .bx-next::after{ right:25px; }

.MenuFix #KeyVisual { margin-top: 150px; }


/*----------------------------------------------------------------------*/
/* Footer */
#Footer .ft_info{ padding: 40px 15px; }
#Footer .ft_info .col_left{ float: left; width: 30%; padding-right: 3.125vw; }
#Footer .ft_info .col_right{ float: right; width: 70%; padding-left: 3.125vw; }
#Footer .ft_info .logo{ text-align: right; padding-top: 15px; padding-bottom: 15px; }
#Footer .ft_info .logo + .contBox{ border-left: 1px solid #dddddd; }
#Footer .ft_info .logo .img{ max-width: 97px; display: inline-block; }
#Footer .ft_info .contBox .info{ font-size: 1.125rem; }


/*----------------------------------------------------------------------*/
/* 首頁 */
/* 共用區塊 */
.IndexBlock{ padding-top: 4.1666666666vw; padding-bottom: 4.1666666666vw; }

@media screen and (max-width: 1439px) {
    .IndexBlock > div{ padding-left: 20px; padding-right: 20px; }
}

/* 標題 */
@media screen and (max-width: 1439px) {
    .IndexTitle{ margin-bottom: 30px; }
    .IndexTitle h3{ font-size: 2.125rem; padding: 15px 0 15px 75px; }
    .IndexTitle .icon{ width: 70px; height: 62px; }
}
@media screen and (min-width: 1440px) {
    .IndexTitle{ margin-bottom: 35px; }
    .IndexTitle h3{ font-size: 2.375rem; padding: 15px 0 15px 85px; }
    .IndexTitle .icon{ width: 77px; height: 68px; }
}

/* 按鈕 */
.IndexMoreBtn > a{ font-size: 1.5rem; line-height: 70px; padding: 0 20px; }


/*----------------------------------------------------------------------*/
/* 首頁-交通最前線 */
/* IndexTextColumn */
.IndexTextColumn { margin-bottom: 50px; }
.IndexTextColumn .item { padding: 0 5px; }
.IndexTextColumn .item > div{ padding: 40px; }
.IndexTextColumn .title { margin-top: 5px; margin-bottom: 5px; }
.IndexTextColumn .title a{ display: block; 
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 4.5em;
}
.IndexTextColumn .desc{ font-size: 1.25rem;
    line-height: 2em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    max-height: 14em;
}
.IndexTextColumn .tags ul li{ font-size: 1.125rem; }
.IndexTextColumn .tags ul li a:hover{ box-shadow: 0 0 10px rgba(0,0,0,0.2); }

@media screen and (max-width: 1439px) {
    .IndexTextColumn .item { padding: 0 10px; }
    .IndexTextColumn .title{ font-size: 1.625rem; }
    .IndexTextColumn .owl-nav .owl-prev { left:-5px; }
    .IndexTextColumn .owl-nav .owl-next { right:-5px; }
    .IndexTextColumn .owl-nav .owl-prev, .IndexTextColumn .owl-nav .owl-next { width:50px; height:50px; margin-top:-25px; }
}
@media screen and (min-width: 1440px) {
    .IndexTextColumn .item { padding: 0 5px; }
    .IndexTextColumn .title{ font-size: 1.875rem; }
    .IndexTextColumn .owl-nav .owl-prev { left:-60px; }
    .IndexTextColumn .owl-nav .owl-next { right:-60px; }
}


/*----------------------------------------------------------------------*/
/* 首頁-交通科技產業簡介 */
.IndexIndustryInfo .IndexTitle .subTitle{ font-size: 1.9375rem; }

/* IndexIconList */
.IndexIconList .item{ width: 16.66666666666667%; }
.IndexIconList .item .img{
    -webkit-transition: transform 0.25s ease;
    -moz-transition: transform 0.25s ease;
    transition: transform 0.25s ease;
}
.IndexIconList .item a:hover .img{
    transform: translateY(-10px);  background-color: rgba(255,255,255,0.95);
}
.IndexIconList .item a:hover .title{ text-shadow: 0 0 10px rgba(0,0,0,0.25); }

@media screen and (max-width: 1439px) {
    .IndexIconList .item{ padding: 30px 10px; }
    .IndexIconList .img{ width: 130px; height: 130px; }
    .IndexIconList .title{ font-size: 1.25rem; }
}
@media screen and (min-width: 1440px) {
    .IndexIconList .item{ padding: 30px 10px; }
    .IndexIconList .img{ width: 150px; height: 150px; }
    .IndexIconList .title{ font-size: 1.375rem; }
}


/*----------------------------------------------------------------------*/
/* 首頁-推動方向與實施作法 */
.IndexTextList{ display: flex; flex-wrap: wrap; padding-top: 27px; }
.IndexTextList .item{ flex: 0 1 auto; width: 33.333333333%; margin-bottom: 20px; }
.IndexTextList .item:nth-child(1), .IndexTextList .item:nth-child(2), .IndexTextList .item:nth-child(3){ 
    margin-bottom: 0; 
}
.IndexTextList .item > div{ padding:0 30px 35px 30px; min-height: 20em; }
.IndexTextList .item .title{ font-size: 1.875rem; padding-bottom: 15px; margin-bottom: 15px; }
.IndexTextList .item .title a{ display: block; 
    line-height: 1.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 4.2em;
}
.IndexTextList .item .desc{ font-size: 1.25rem; 
    line-height: 1.9em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-height: 5.7em;
}

.IndexTextList .item .no{ font-size: 1.75rem; margin-top: -27px; margin-bottom: 20px; }
.IndexTextList .item .no span{ width: 54px; height: 54px; line-height: 54px; }

@media screen and (max-width: 1439px) {
    .IndexTextList .item{ padding-left: 15px; padding-right: 15px; }
}
@media screen and (min-width: 1440px) {
    .IndexTextList{ margin-left: -20px; margin-right: -20px; }
    .IndexTextList .item{ padding-left: 20px; padding-right: 20px; }
}


/*----------------------------------------------------------------------*/
/* popup 彈出視窗 */
.popup_box > div{ width:1100px; height:80%; margin:auto; padding:30px; }
.popup_box > div{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.popup_box .close { position:absolute; top:5px; right:5px; }
.popup_box .alert_boxBody{ padding-bottom: 10px; }
.popup_box .popup_title, .popup_box .popup_detail{ margin-left: 20px; margin-right: 20px; }

@media screen and (max-width: 1359px) {
    .popup_box > div{ width:80%; height:90%; margin:auto; padding:30px; }
}



/*===================================以下為內頁===================================*/
/*----------------------------------------------------------------------*/
/* 內頁 */
.MenuFix #Center.content{ margin-top: 150px; }
#Center.content{ padding:40px 0 50px 0; }
#Center.content > div{ max-width: 1280px; margin: auto; box-sizing: border-box; }
#content{ padding-bottom: 40px; }

@media screen and (max-width: 1359px) {
    #Center.content > div { padding-left: 20px; padding-right: 20px; }
}

/* 標題 */
.page_header{ margin-bottom: 15px; }
.PageTitle{ float: left; }
.PageTitle h2 { font-size: 1.5625rem; }

/* 文章內容 */
.ArticleTitle h3{ font-size:1.875rem; }

/* 文章更新日期 */
.post_info { text-align:right; }

/* 按鈕 */
.commonBtn{ text-align:right; margin-bottom:10px; }
.commonBtn a{ font-weight:bold; line-height:40px; }
.commonBtn.write-btn a:hover{ background-color:#ee6d6d; color:#fff; }


/*----------------------------------------------------------------------*/
/* 內頁元素 */
/* 麵包列 */
#Breadcrumbs{ float: right; }

/* 工具列 */
.ToolBar .colm_right { float:right; }
.ToolBar dl.font_size { float:left; position: relative; }
.ToolBar dl.share { float:left; margin-right: -10px; }

/* 列表搜尋 */
.ListSearch { margin-bottom: 15px; }
.ListSearch .BtnCommon { position:absolute; right:20px; bottom:25px; }
.ListSearch .BtnCommon input { line-height:30px; }
.ListSearch .item{ margin-bottom: 10px; }
.ListSearch .item .label{ position:relative;}
.ListSearch .item .label, .ListSearch .item .cont{ display:inline-block;}

/* 分類下拉 */
.CatTitle h3 { float:left; }
.CatTitle .cat_select { float:right; }


/*----------------------------------------------------------------------*/
/* 內頁通用功能 */
/* 按鈕 */
.tabs_common_box ul li{ font-size: 1.125rem; padding-right: 5px; padding-bottom: 10px; }
.tabs_common_box ul li a{ line-height: 45px; padding: 0 25px; }


/*----------------------------------------------------------------------*/
/* 交通科技產業簡介 */
/* 按鈕 */
/*.IndustryInfoWrap .tabs_common_box{ margin-bottom: 20px; }*/

/* 大標題 */
.industry_title h3{ font-size: 1.5625rem; }

/* 小標題 */
.industryInfoBox .item_title{ margin-bottom: 20px; }
.industryInfoBox .item_title h4{ font-size: 1.5rem; }

/* 共用 */
.industryInfoBox{ padding-top: 20px; }
.industryInfoBox .itemBox{ padding-bottom: 35px; margin-bottom: 35px; }

/* 最新消息 */
.industryInfoBox .more_btn a{ line-height: 45px; padding: 0 45px 0 30px; }

/* 小組成員 */
.industryInfoBox .teamList .item{ margin-bottom: 24px; }
.industryInfoBox .teamList .item:nth-child(2n+1){ padding-right: 12px; }
.industryInfoBox .teamList .item:nth-child(2n+2){ padding-left: 12px; }
.industryInfoBox .teamList .item > div{ padding: 15px; }
.industryInfoBox .teamList .img, .industryInfoBox .teamList .cont{
    float: left;
}
.industryInfoBox .teamList .name{ font-size: 1.5rem; }
.industryInfoBox .teamList .sub_tt{ font-size: 1.125rem; }
.industryInfoBox .teamList .company{ font-size: 1.125rem; }

@media screen and (max-width: 1359px){
    .industryInfoBox .teamList .img{ width: 150px; }
    .industryInfoBox .teamList .cont{ width: calc(100% - 150px); padding-left: 20px; padding-top: 10px; }    
}
@media screen and (min-width: 1360px){
    .industryInfoBox .teamList .img{ width: 200px; }
    .industryInfoBox .teamList .cont{ width: calc(100% - 200px); padding-left: 25px; padding-top: 20px; } 
}


/*----------------------------------------------------------------------*/
/* 頁碼 */
#Pagination{ padding-top:2rem; margin-bottom:20px; }
#Pagination a { margin:0 2px; position:relative;
    -webkit-border-radius:50%; 
    -moz-border-radius:50%; 
    border-radius:50%;  
}
#Pagination a.first, #Pagination a.prev, #Pagination a.next, #Pagination a.last { 
    background-color:transparent; 
    -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;  */
}
#Pagination a.prev{ margin-right:8px; }
#Pagination a.next{ margin-left:8px; }
#Pagination a.first:hover, #Pagination a.prev:hover, #Pagination a.next:hover, #Pagination a.last:hover,
#Pagination a.first:focus, #Pagination a.prev:focus, #Pagination a.next:focus, #Pagination a.last:focus{
    color:#1f893c;
}
#Pagination a.first::before, #Pagination a.first::after, #Pagination a.last::before, #Pagination a.last::after,
#Pagination a.prev::before, #Pagination a.next::before { 
    content:''; position:absolute; top:50%; width:8px; height:8px; border-top:1px solid #333; border-left:1px solid #333;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#Pagination a.first::before, #Pagination a.first::after, #Pagination a.prev::before { 
    margin-top:-4px; 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#Pagination a.last::before, #Pagination a.last::after, #Pagination a.next::before { 
    margin-top:-5px; 
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}
#Pagination a.first:hover::before, #Pagination a.first:hover::after, #Pagination a.last:hover::before, #Pagination a.last:hover::after,
#Pagination a.first:focus::before, #Pagination a.first:focus::after, #Pagination a.last:focus::before, #Pagination a.last:focus::after,
#Pagination a.prev:hover::before, #Pagination a.next:hover::before,
#Pagination a.prev:focus::before, #Pagination a.next:focus::before { 
    border-color:#1f893c; 
}
#Pagination a.first::before { left:-8px; }
#Pagination a.first::after { left:-2px; }
#Pagination a.prev::before { left:0; }
#Pagination a.last::before { right:-8px; }
#Pagination a.last::after { right:-2px; }
#Pagination a.next::before { right:0; }

#Pagination .current { display:none; }


/*----------------------------------------------------------------------*/
/* owl-carousel */
@media screen and (max-width:1359px) {
    .owl-carousel button.owl-prev{ left: 50px; }
    .owl-carousel button.owl-next{ right: 50px; }
}
@media screen and (min-width:1360px) and (max-width:1499px) {
    .owl-carousel button.owl-prev{ left: 10px; }
    .owl-carousel button.owl-next{ right: 10px; }
}


/*----------------------------------------------------------------------*/
/* 文字列表 */
.ListTable{ margin-bottom:20px; }
.ListTable table{ /*border-collapse:separate; border-spacing: 3px */}
.ListTable table tr th { padding:10px 15px; white-space:nowrap; font-size: 1.125rem; 
    background-color: rgba(45,172,137,0.3); color: #222222; font-weight: normal;
}
.ListTable table td { padding:15px 10px; vertical-align:middle; font-size: 1.125rem; }
.ListTable table tr:nth-child(even) { background-color: #ffffff; }
.ListTable table tr:nth-child(odd) { background-color: #ecf4ef; }
 
.ListTable table th.date{ width:160px; }
.ListTable table td.title { position: relative; }
.ListTable table img{ width: 100%; height: auto; vertical-align: middle; }
.ListTable table td.img, .ListTable table th.img{ width: 150px; } 
.ListTable table th.cat, .ListTable table td.cat{ width:17%; }
.ListTable table th.no{ width: 30px; }
.ListTable table td.date{ width:160px; white-space:nowrap; text-align:center; }
.ListTable table td.ind_type, .ListTable table th.ind_type { width:200px; }

.ListTable table td.no{ width: 100px; white-space: nowrap; }
.ListTable th.download { width:150px; }
.ListTable td.download { width:150px; }
.ListTable td.download a.file_ext { width:20px; height:20px; line-height:20px; }
.ListTable td.download a.file_ext::before { width:20px; height:20px; }
.ListTable td.download.desc li { display:block; }
.ListTable td.download.desc a.file_ext { text-indent:0; width:auto; padding-left:24px; }
.ListTable td.download.desc a.file_ext::before { left:0; margin-left:0; }
.ListTable .manage_btns { text-align:center; }
    
@media screen and (max-width: 1179px){
	.ListTable table td { padding:13px; }
}

/* 第2配色 */
.ListTable.style2 table tr th { background-color:#9fc8f0; color:#053869; }
.ListTable.style2 table tr:nth-child(odd) { background-color:#e3eef8; }


/*----------------------------------------------------------------------*/
/* 圖文列表 */
.ListPicText { /*margin-left:-10px; margin-right:-10px;*/ padding-top:10px; padding-left:10px; padding-right:10px; }
.ListPicText > div { margin-left:-20px; margin-right:-20px; }
.ListPicText .item { padding-left:10px; padding-right:10px; margin-bottom:20px; }
.ListPicText .item > div:hover{ background-color: #f3f3d6; }
.ListPicText .tag{
    -webkit-transition: background-color 0.2s ease-in-out;
    -moz-transition: background-color 0.2s ease-in-out;
    transition: background-color 0.2s ease-in-out;
}

/* list-view */
.ListPicText.list-view { margin-bottom: 20px; }
.ListPicText.list-view .cont{ overflow:hidden; }
.ListPicText.list-view .item > div{ padding: 10px 15px; }
.ListPicText.list-view .img, .ListPicText.list-view .video_box { 
    float:left; width:320px; max-width:50%; padding-bottom: 10px; padding-top: 10px; 
}
.ListPicText.list-view .video_box .img{ width: 100%; float: none; max-width: 100%; }
.ListPicText.list-view .btn{ right:10px; bottom:10px; }
.ListPicText.list-view .date, .ListPicText.list-view .tag{ display: inline-block; margin-bottom: 5px; }
.ListPicText.list-view .tag{ margin-left: 5px; margin-right: 5px; }

/* grid-view */
.ListPicText.grid-view .date{ line-height: 24px; }
.ListPicText.grid-view .btn { position:absolute; width:100%; bottom:20px; }
.ListPicText.grid-view .item .cont{ padding: 5px 35px 15px 35px; }
.ListPicText.grid-view .tag{ position:absolute; top:-14px; right:12px; }

.ListPicText .item .img div{ 
    -webkit-transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.ListPicText .item > div{
    -webkit-transition: box-shadow 0.3s ease-out;
    -moz-transition: box-shadow 0.3s ease-out;
    transition: box-shadow 0.3s ease-out;
}
.ListPicText .btn a::after{ 
    -webkit-transition: border-color 0.3s ease-out;
    -moz-transition: border-color 0.3s ease-out;
    transition: border-color 0.3s ease-out;
}

/* hover效果 */
.ListPicText .item .img div:hover{ transform:scale(1.05); opacity: 0.8; }
.ListPicText .btn a:hover, .ListPicText .btn a:focus { background-color:#1f893c; color:#ffffff; }
.ListPicText .title a:hover, .ListPicText .title a:focus { color:#1f893c; }
.ListPicText .btn a:hover::after{ border-color:#fff; }

/* 單欄 */
.ListPicText.list-view.single{ margin-left: 0; margin-right: 0; }
.ListPicText.list-view.single .item { margin-bottom: 20px; }
.ListPicText.list-view.single .img { padding:15px; }
.ListPicText.list-view.single .cont{ padding: 20px 20px 35px 10px; }
.ListPicText.list-view.single .desc{ margin-bottom: 10px; }
.ListPicText.list-view.single .video_box { padding-right: 20px; }
.ListPicText.list-view.single .video_box .img::after{ margin-left: -34px; }
.ListPicText.list-view.single.staggered .item:nth-child(2n+2) .img { float:right; }
.ListPicText.list-view.single.staggered .item:nth-child(2n+2) .video_box { float:right; padding-right:10px; padding-left:20px; }
.ListPicText.list-view.single.staggered .item:nth-child(2n+2) .video_box .img::after{ margin-left: -14px; }
.ListPicText.list-view.single.staggered .item:nth-child(2n+1) .cont{ padding: 20px 5px 35px 10px; }
.ListPicText.list-view.single.staggered .item:nth-child(2n+2) .cont{ padding: 20px 5px 35px 10px; }
.ListPicText.single .title { font-size:1.5rem; }
.ListPicText.single .tag{ font-size: 1.125rem; line-height: 34px; }
.ListPicText.single .date { font-size:1rem; }
.ListPicText.single .desc { font-size:1.125rem; }
.ListPicText.grid-view.single .img{ padding: 30px 30px 20px 30px; }
.ListPicText.grid-view.single .cont { padding: 5px 30px 35px 30px; }

/* 兩欄 */
.ListPicText.bisection .item { float:left; width:50%; }
.ListPicText.bisection .cont { padding:20px 20px 35px; }
.ListPicText.bisection .title { font-size:1.375rem; }
.ListPicText.bisection .tag{ font-size: 1.125rem; line-height: 32px; }
.ListPicText.bisection .date { font-size:1rem; }
.ListPicText.bisection .desc { font-size:1.125rem; 
    /* 限制行數 */
    line-height:1.75em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    max-height:5.25em;
}
.ListPicText.list-view.bisection .item{ margin-bottom:25px; padding-left: 15px; padding-right: 15px; }
.ListPicText.list-view.bisection .img { padding:10px 15px 10px 0; }
.ListPicText.list-view.bisection .video_box { padding:10px 15px 10px 0; }
.ListPicText.list-view.bisection .video_box .img::after{ margin-left: -34px; }
.ListPicText.list-view.bisection .cont { padding:15px 15px 0 5px; }
.ListPicText.list-view.bisection .info{ clear: both; }
.ListPicText.list-view.bisection .tag{ font-size: 1em; line-height: 28px; }
.ListPicText.list-view.bisection .date { font-size:0.938rem; }
.ListPicText.grid-view.bisection .item{ padding-left: 20px; padding-right: 20px; margin-bottom: 35px; }
.ListPicText.grid-view.bisection .img{ padding: 30px 30px 20px 30px; }

/* 三欄 */
.ListPicText.trisection .item { float:left; width:33.3333%; }
.ListPicText.trisection .desc{ clear:both; }
.ListPicText.trisection .cont { padding: 5px 0 20px 0; }
.ListPicText.trisection .title { font-size:1.25rem; }
.ListPicText.trisection .date { font-size: 1rem; }
.ListPicText.trisection .desc { font-size:1rem; }
.ListPicText.list-view.trisection .item { border-bottom:0; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
.ListPicText.list-view.trisection .item > div{ padding-top: 15px; padding-bottom: 15px; }

.ListPicText.list-view.trisection .img { padding:0 15px 0 0; max-width: 40%; }
.ListPicText.list-view.trisection .video_box{ padding:10px 15px 10px 0; max-width: 40%; }
.ListPicText.list-view.trisection .video_box .img{ max-width: 100%; }
.ListPicText.list-view.trisection .video_box .img::after{ 
    background-size: contain; width: 30px; height: 30px; margin-left: -22px; margin-top: -15px;
}
.ListPicText.list-view.trisection .title{ font-size: 1.188rem; }
.ListPicText.list-view.trisection .date{ font-size: 0.938rem; }
.ListPicText.list-view.trisection .cont { padding-bottom: 0; }
.ListPicText.list-view.trisection .desc{ font-size: 0.938rem; clear: inherit; }
.ListPicText.grid-view.trisection .item { padding-left: 15px; padding-right: 15px; }

/* 四欄 */
.ListPicText.quarters .item { float:left; width:25%; }
.ListPicText.quarters .cont { padding: 5px 15px 35px; }
.ListPicText.quarters .title { font-size:1.188rem; }
.ListPicText.quarters .date { font-size:0.938rem; }
.ListPicText.quarters .desc { font-size:0.938rem; }
.ListPicText.list-view.quarters .item{ margin-bottom: 15px; padding-left:10px; padding-right:10px; }
.ListPicText.list-view.quarters .item > div{ padding: 15px; } 

.ListPicText.list-view.quarters .title{ font-size: 1.125rem; }
.ListPicText.list-view.quarters .img { padding:0 10px 0 0; max-width: 40%; }
.ListPicText.list-view.quarters .video_box{ padding:10px 15px 10px 0; max-width: 40%; }
.ListPicText.list-view.quarters .video_box .img{ max-width: 100%; }
.ListPicText.list-view.quarters .video_box .img::after{ 
    background-size: contain; width: 30px; height: 30px; margin-left: -22px; margin-top: -15px;
}
.ListPicText.list-view.quarters .tag{ font-size: 0.875rem; margin-left: 0; margin-right: 0; }
.ListPicText.list-view.quarters .date{ font-size: 0.938rem; }
.ListPicText.list-view.quarters .cont { padding:5px 0 0 0; }
.ListPicText.list-view.quarters .desc { margin-bottom: 0; font-size:0.875rem; 
    /* 限制行數 */
    line-height:1.75em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
    max-height:5.25em;
}
.ListPicText.list-view.quarters .btn{ position:relative; text-align:center; bottom:20px; right:inherit; }
.ListPicText.grid-view.quarters .item{ padding-left: 10px; padding-right: 10px; }
.ListPicText.grid-view.quarters .item .cont{ padding: 0 20px 10px 20px; }

/* 影片樣式 */
.ListPicText .video_box .img{ background-color: #f7f6f4; }
.ListPicText .video_box .img:hover::after{ box-shadow: 0 0 10px rgba(0,0,0,0.4); }


/*----------------------------------------------------------------------*/
/* 表單 */
.FormTable > tbody > tr > th, .FormTable > tbody > tr > td { vertical-align:top; }
.FormTable > tbody > tr > th { width:125px; padding: 0px 5px 10px 0; text-align:right;}
.FormTable > tbody > tr > th:empty::after { display:none; }
.FormTable > tbody > tr > td { padding: 5px 10px; }
	
table.FormTable > tbody > tr > th, table.FormTable > tbody > tr > td { border-bottom:1px solid rgba(156,156,156,0.25); }
table.FormTable > tbody > tr:last-child > th, table.FormTable > tbody > tr:last-child > td{ border-bottom:0; }
/*table.FormTable > tbody > tr:first-child > th, table.FormTable > tbody > tr:first-child > td{ border-top:1px dotted #ccc; }*/
table.FormTable > tbody > tr > th.tt-top{ vertical-align:top; }
table.FormTable > tbody > tr > th.tt-center{ vertical-align:middle; }
table.FormTable > tbody > tr > th { width:200px; padding:15px 5px; text-align:right; }
table.FormTable > tbody > tr > th:empty::after { display:none; }
table.FormTable > tbody > tr > td { padding:15px 6px; }
/*table.FormTable > tbody > tr:nth-child(odd) > th, table.FormTable > tbody > tr:nth-child(odd) > td { background-color:#f5f5f5; }*/

/* 表單元件 */
.FormElmt .input_group > div { display:inline-block; padding-bottom: 3px; }

/* 表單群組 */
.form_group_title span { font-size:1.25em; padding:0 15px; }


/*----------------------------------------------------------------------*/
/* 上下篇文章 */
.prevNextLink .prev:hover, .prevNextLink .next:hover { background-color:rgba(255,255,255,0.7); }


/*----------------------------------------------------------------------*/
/* 延伸閱讀 */
.related_articles{ margin-top:40px; margin-bottom:20px; padding: 30px 3.125rem; }


/*----------------------------------------------------------------------*/
/* colorbox */
#colorbox_thum { padding-bottom: 20px; }
#colorbox_thum a { width:16.666666%; box-sizing: border-box; padding: 0 10px; margin-bottom: 20px; }


/*----------------------------------------------------------------------*/
/* 編輯器 */


/*----------------------------------------------------------------------*/
/* 按鈕 */
.BtnCommon.mid div[class] a, .BtnCommon.mid div[class] input { padding-left:56px; padding-right:30px; }
.BtnCommon.mid div[class] span::before { left:30px; }


/*----------------------------------------------------------------------*/
/* 頁籤 */
.tabs_group .tab_cont { padding:0; transform:scale(0); height:0; visibility:hidden; opacity:0; 
    -webkit-transition: opacity 0.5s ease; /*只針對透明度去做動畫時間*/
    -moz-transition: opacity 0.5s ease;
    transition: opacity 0.5s ease; 
}
.tabs_group .tab_cont.active { transform:scale(1); height:auto;  visibility:visible; opacity:1; }