@charset "utf-8";
/* CSS Document */
/*----------------------------------------------------------------------*/
/* 共用區塊 */
.IndexBlock > div{ max-width: 1280px; margin: auto; }

/* 標題 */
.IndexTitle{ text-align: center; border-bottom: 3px solid #66bc2c; }
.IndexTitle h3{ display: inline-block; position: relative; letter-spacing: 0.1em; }
.IndexTitle .icon{ display: block; background-repeat: no-repeat;
    background-size: cover; background-position: center center;
    position: absolute; top: 0; left: 0;
}

/* 按鈕 */
.IndexMoreBtn{ text-align: center; }
.IndexMoreBtn > a{ display: inline-block; min-width: 300px; background-color: #10654e; 
    color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.3);
    border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;
   
}
.IndexMoreBtn > a:hover{ opacity: 0.8; }
.IndexMoreBtn span{ position: relative; display: inline-block; padding-right: 15px; }
.IndexMoreBtn span::after{ 
    content:''; display:block; position:absolute; top:50%; right:-15px; margin-top:-5px;
    border-left:2px solid #ffffff;
    border-top:2px solid #ffffff;
    width:10px; height:10px;
    -webkit-transform:rotate(135deg);
    -moz-transform:rotate(135deg);
    transform:rotate(135deg);
}


/*----------------------------------------------------------------------*/
/* KeyVisual */
#KeyVisual { box-sizing: border-box; }
#KeyVisual .bx-wrapper { padding-bottom: 33.854166666%; }
#KeyVisual .bx-viewport{ overflow: hidden;  }
#KeyVisual .bxSlider_list li:only-child img{ overflow: hidden; }


/*----------------------------------------------------------------------*/
/* 交通最前線 */
.IndexTrafficNews{ background: #f5fbff url(../images/bg.jpg); }
.IndexTrafficNews .IndexTitle .icon{ background-image: url(../images/icon_index_title_01.png); }

/* IndexTextColumn */
.IndexTextColumn .owl-stage {
	display:flex; flex-wrap:wrap; align-items:stretch; align-content:center; 
	-ms-display:flex; -ms-flex-wrap:wrap; -ms-align-items:stretch; -ms-align-content:center; 
	}
.IndexTextColumn.owl-carousel .owl-item { flex: 0 1 auto; float:none; }
.IndexTextColumn .item { height:100%; max-width:400px; margin-left:auto; margin-right:auto; position: relative; }
.IndexTextColumn .item > div { height:100%; box-sizing: border-box; 
    border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
}
.IndexTextColumn .owl-item:nth-child(3n+1) .item > div{ background-color: rgba(102,188,44,0.2); }
.IndexTextColumn .owl-item:nth-child(3n+2) .item > div{ background-color: rgba(45,172,137,0.2); }
.IndexTextColumn .owl-item:nth-child(3n+3) .item > div{ background-color: rgba(209,193,16,0.2); }

.IndexTextColumn .date{ position: relative; padding: 0 0 0 28px; line-height: 32px; 
    font-family:'Arial', sans-serif;
}
.IndexTextColumn .date::before{ content: ""; display: block; width: 26px; height: 26px; 
    background: url(../images/icon_calendar.png) no-repeat; background-size: cover; 
    position: absolute; top: 2px; left: 0;
}
.IndexTextColumn .title{ font-weight: bold; }
.IndexTextColumn .tags ul li{ background-color: #ffffff; display: inline-block; position: relative; 
    border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;
    line-height: 32px; margin-bottom: 10px; margin-right: 4px;
}
.IndexTextColumn .tags ul li:last-child{ margin-right: 0; }
.IndexTextColumn .tags ul li a{ background-color: #ffffff; display: block; padding: 0 10px 0 30px;
    border-radius: 35px; -webkit-border-radius: 35px; -moz-border-radius: 35px;
}
.IndexTextColumn .tags .icon{ width: 32px; height: 32px; display: inline-block;
    background: url(../images/icon_hashtag.png) no-repeat; position: absolute;
    background-size: cover; top: 0; left: 4px;
}
.IndexTextColumn .desc{ margin-bottom: 15px; }

/* owl輪播套件 */
.IndexTextColumn .owl-stage-outer { margin-left:0; margin-right:0; }
.IndexTextColumn .owl-item { padding:10px 0; }
.IndexTextColumn .owl-item.active ~ .owl-item::before { display:none; }
.IndexTextColumn .owl-nav .owl-prev, .IndexTextColumn .owl-nav .owl-next {
    display:block; position:absolute; top:50%; text-indent:-10000px; z-index:9999;
    width:60px; height:60px; margin-top:-30px; background-color:#222222;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
    -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.1);
    -moz-box-shadow: 0 0 12px rgba(0,0,0,0.1);
    box-shadow: 0 0 12px rgba(0,0,0,0.1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.IndexTextColumn .owl-nav .owl-prev::after, .IndexTextColumn .owl-nav .owl-next::after { 
    content:''; display:block; position:absolute; top:50%; 
    width:14px; height:14px; margin-top:-8px; border-left:2px solid #ffffff; border-top:2px solid #ffffff; 
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.IndexTextColumn .owl-nav .owl-prev:hover, .IndexTextColumn .owl-nav .owl-next:hover,
.IndexTextColumn .owl-nav .owl-prev:focus, .IndexTextColumn .owl-nav .owl-next:focus{ 
    background-color:#10654e; 
    -webkit-box-shadow: 0 0 15px rgba(0,0,0,0.3);
    -moz-box-shadow: 0 0 15px rgba(0,0,0,0.3);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.IndexTextColumn .owl-nav .owl-prev:hover::after, .IndexTextColumn .owl-nav .owl-next:hover::after,
.IndexTextColumn .owl-nav .owl-prev:focus::after, .IndexTextColumn .owl-nav .owl-next:focus::after{ border-color:#fff; }
.IndexTextColumn .owl-nav .owl-prev::after { 
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
.IndexTextColumn .owl-nav .owl-next::after { 
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg);
}
.IndexTextColumn .owl-nav .owl-prev::after { left:50%; margin-left:-5px; }
.IndexTextColumn .owl-nav .owl-next::after { right:50%; margin-right:-5px; }

.IndexTextColumn .owl-dots { position:absolute; bottom:-25px; left:0; width:100%; text-align:center; }
.IndexTextColumn .owl-dots .owl-dot { 
    display:inline-block; width:14px; height:14px; margin:0 5px; padding:0; box-sizing:border-box; background-color:#fff; border:0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.IndexTextColumn .owl-dots .owl-dot:focus { outline:0; }
.IndexTextColumn .owl-dots .owl-dot.active, .IndexTextColumn .owl-dots .owl-dot:hover, .IndexTextColumn .owl-dots .owl-dot:focus { 
    background-color:#10654e; 
}


/*----------------------------------------------------------------------*/
/* 交通科技產業簡介 */
.IndexIndustryInfo{ background: #128b87 url(../images/bg_index_01.jpg); background-size: cover; 
    background-position: center center;
}
.IndexIndustryInfo .IndexTitle{ border-bottom: 0; color: #ffffff; }
.IndexIndustryInfo .IndexTitle h3{ color: #ffffff; padding-left: 0; }

/* IndexIconList */
.IndexIconList{ display: flex; flex-wrap: wrap; }
.IndexIconList .item{ flex: 0 1 auto; box-sizing: border-box; }
.IndexIconList .item > a{ display: block; }
.IndexIconList .img{ background-color: #ffffff; margin: auto;
    border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%;
    box-shadow: 5px 8px 0 rgba(0,0,0,0.15); margin-bottom: 15px;
}
.IndexIconList .img img{ max-width: 100%; max-height: 100%; }
.IndexIconList .title{ color: #ffffff; font-weight: bold; text-align: center; }


/*----------------------------------------------------------------------*/
/* 推動方向與實施作法 */
.IndexPromoteWay .IndexTitle .icon{ background-image: url(../images/icon_index_title_02.png); }

/* IndexTextList */
.IndexTextList .item{ box-sizing: border-box; }
.IndexTextList .item > div{ border: 1px solid #d0d0d0; box-sizing: border-box;
    border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px;
}
.IndexTextList .item .no{ color: #ffffff; text-align: center; }
.IndexTextList .item .no span{ display: inline-block; background-color: #ccc; 
    color: #ffffff; font-family:'Arial', sans-serif; outline: 4px solid #ffffff;
    border-radius: 50%;-webkit-border-radius: 50%; -moz-border-radius: 50%;
}
.IndexTextList .item:nth-child(3n+1) .no span{ background-color: #66bc2c; }
.IndexTextList .item:nth-child(3n+2) .no span{ background-color: #1f8d6f; }
.IndexTextList .item:nth-child(3n+3) .no span{ background-color: #d1c110; }

.IndexTextList .item .title{ font-weight: bold; border-bottom: 1px solid #dddddd;  }