/* @import "notosanstc.css"; */
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
  /* 先套用 Noto Sans TC 這個 思源黑體 */
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
}
@font-face {
  font-family: Font Awesome;
  font-family: "Font Awesome 5 Free";
}

@font-face {
	font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
	font-weight: normal;
	font-style: normal;
}

/* 引用 */
blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    background: #efefef;
    color: #555;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 10px;
    left: -3px;
    content: "“";
    font-family: sans-serif;
    color: #cfcfcf;
    font-size: 90px;
    line-height: 1;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}

/* Changelog 使用區塊 */
code {
    font-family: monospace,'Noto Sans TC',sans-serif;
    font-size: 14px;
    line-height: 1.4;
    background: #f8f8f8;
    border-radius: 3px;
}

/* 圖片游標放大移動 */
#button_zoomout{
			width: auto;
			height: auto;
			margin: 10px auto;
			overflow: hidden;
		}
		#button_zoomout img{
			cursor: pointer;
			transition: all 0.6s;
		}
		#button_zoomout img:hover{
			transform: scale(0.9);
		}

/*********************************************************************************/
/* Table                                                                         */
/*********************************************************************************/

table {
  border:1px solid #000;
  font-size:16px;
  width:200px;
  border:1px solid #000;
  text-align:left;
  border-collapse:collapse;
  font-size: 30px;
  font-weight: normal;
  width:100%;
} 

th {
  background-color: #717171;
  padding:15px;
  border:1px solid #000;
  font-size: 14pt;
  color:#fff;
  font-weight: normal;
  table-layout: fixed;
} 
td {
 background-color: #FFFFFF;
 border:1px solid #000;
 font-size: 14pt;
 padding:10px;
 /* width: 5%; */
} 

/* 文字格式 */
    footer_title
	{
		font-family: 'Noto Sans TC', sans-serif;
		color:#fff;
		font-size: 15pt;
		line-height: 2.4em;
	}
    input1
	{
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 12pt;
		line-height: 2.4em;
	}

	input2big
	{
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14pt;
		line-height: 2.4em;
	}
    
    input2big-bold
	{
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14pt;
		font-weight: bold;
		line-height: 2.4em;
	}


    input2big-red
	{
		font-family: 'Noto Sans TC', sans-serif;
		color:#791718;
		font-weight: bold;
		font-size: 14pt;
		line-height: 2.4em;
	}

    input2black
	{
		font-family: 'Noto Sans TC', sans-serif;
		font-size: 14pt;
		line-height: 2.4em;
		color: #7C0D0F;
	}

	inputtitle
	{
		font-family: 'Noto Sans TC', sans-serif; 
		font-weight: bold;
		font-size: 14pt;
		line-height: 2.3em;
		color: #880000;
	}


/* 背景圖格式(zh-TW) */
#bannerimage-index {
  width: 100%;
  background-image: url("../../img/index/banner-1.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-talk01 {
  width: 100%;
  background-image: url("../../img/index/talk01-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive {
  width: 100%;
  background-image: url("../../img/narrtive-zh/banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive01 {
  width: 100%;
  background-image: url("../../img/index/narr01-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  /* background-color: black; */
  background-position: center;
}

#bannerimage-narrtive02 {
  width: 100%;
  background-image: url("../../img/index/narr02-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive03 {
  width: 100%;
  background-image: url("../../img/index/narr03-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history-mackay-n {
  width: 100%;
  background-image: url("../../img/banner/banner-1.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-tms {
  width: 100%;
  background-image: url("../../img/index/tms-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-tamsui {
  width: 100%;
  background-image: url("../../img/banner/tamsui.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-train {
  width: 100%;
  background-image: url("../../img/banner/09-6.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-person {
  width: 100%;
  background-image: url("../../img/narrtive-zh/banner-2.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-future01 {
  width: 100%;
  background-image: url("../../img/index/future01-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history_1 {
  width: 100%;
  background-image: url("../../img/history/banner-1.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history_2 {
  width: 100%;
  background-image: url("../../img/history/banner-2.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history_3 {
  width: 100%;
  background-image: url("../../img/history/banner-3.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-maps {
  width: 100%;
  background-image: url("../../img/index/maps-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-aboutus {
  width: 100%;
  background-image: url("../../img/index/aboutus-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-introdution {
  width: 100%;
  background-image: url("../../img/index/introduct-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-talk {
  width: 100%;
  background-image: url("../../img/index/talk-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-talk02 {
  width: 100%;
  background-image: url("../../img/banner/talk02.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-profiles {
  width: 100%;
  background-image: url("../../img/index/profiles-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

/* 背景圖格式(en-US)) */
#bannerimage-index-en {
  width: 100%;
  background-image: url("../../en-US/img/banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-talk01-en {
  width: 100%;
  background-image: url("../../img/index/talk01-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive-en {
  width: 100%;
  background-image: url("../../img/narrtive-zh/banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive01-en {
  width: 100%;
  background-image: url("../../en-US/img/index/narr01-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive02-en {
  width: 100%;
  background-image: url("../../en-US/img/index/narr02-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-narrtive03-en {
  width: 100%;
  background-image: url("../../en-US/img/index/narr03-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-person-en {
  width: 100%;
  background-image: url("../../img/narrtive-zh/banner-2.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-future01-en {
  width: 100%;
  background-image: url("../../en-US/img/index/future01-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history_1-en {
  width: 100%;
  background-image: url("../../en-US/img/history/banner-1.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history_2-en {
  width: 100%;
  background-image: url("../../en-US/img/history/banner-2.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-history_3-en {
  width: 100%;
  background-image: url("../../en-US/img/history/banner-3.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-maps-en {
  width: 100%;
  background-image: url("../../en-US/img/index/maps-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-aboutus-en {
  width: 100%;
  background-image: url("../../en-US/img/index/aboutus-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-introdution-en {
  width: 100%;
  background-image: url("../../en-US/img/index/introduct-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-talk-en {
  width: 100%;
  background-image: url("../../img/index/talk-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}

#bannerimage-profiles-en {
  width: 100%;
  background-image: url("../../en-US/img/index/profiles-banner.png");
  background-repeat:no-repeat;
  background-position: center center;
  background-size: cover;
  height: 400px;
  background-color: black;
  background-position: center;
}


.img-responsive { display: block; height: auto; max-width: 100%; }
.lnr {
	font-family: 'Noto Sans TC';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}


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

	p, ul, ol, dl, table
	{
		margin-bottom: 1em;
	}



.lnr-home:before {
	content: "\e800";
}
.lnr-apartment:before {
	content: "\e801";
}
.lnr-pencil:before {
	content: "\e802";
}
.lnr-magic-wand:before {
	content: "\e803";
}
.lnr-drop:before {
	content: "\e804";
}
.lnr-lighter:before {
	content: "\e805";
}
.lnr-poop:before {
	content: "\e806";
}
.lnr-sun:before {
	content: "\e807";
}
.lnr-moon:before {
	content: "\e808";
}
.lnr-cloud:before {
	content: "\e809";
}
.lnr-cloud-upload:before {
	content: "\e80a";
}
.lnr-cloud-download:before {
	content: "\e80b";
}
.lnr-cloud-sync:before {
	content: "\e80c";
}
.lnr-cloud-check:before {
	content: "\e80d";
}
.lnr-database:before {
	content: "\e80e";
}
.lnr-lock:before {
	content: "\e80f";
}
.lnr-cog:before {
	content: "\e810";
}
.lnr-trash:before {
	content: "\e811";
}
.lnr-dice:before {
	content: "\e812";
}
.lnr-heart:before {
	content: "\e813";
}
.lnr-star:before {
	content: "\e814";
}
.lnr-star-half:before {
	content: "\e815";
}
.lnr-star-empty:before {
	content: "\e816";
}
.lnr-flag:before {
	content: "\e817";
}
.lnr-envelope:before {
	content: "\e818";
}
.lnr-paperclip:before {
	content: "\e819";
}
.lnr-inbox:before {
	content: "\e81a";
}
.lnr-eye:before {
	content: "\e81b";
}
.lnr-printer:before {
	content: "\e81c";
}
.lnr-file-empty:before {
	content: "\e81d";
}
.lnr-file-add:before {
	content: "\e81e";
}
.lnr-enter:before {
	content: "\e81f";
}
.lnr-exit:before {
	content: "\e820";
}
.lnr-graduation-hat:before {
	content: "\e821";
}
.lnr-license:before {
	content: "\e822";
}
.lnr-music-note:before {
	content: "\e823";
}
.lnr-film-play:before {
	content: "\e824";
}
.lnr-camera-video:before {
	content: "\e825";
}
.lnr-camera:before {
	content: "\e826";
}
.lnr-picture:before {
	content: "\e827";
}
.lnr-book:before {
	content: "\e828";
}
.lnr-bookmark:before {
	content: "\e829";
}
.lnr-user:before {
	content: "\e82a";
}
.lnr-users:before {
	content: "\e82b";
}
.lnr-shirt:before {
	content: "\e82c";
}
.lnr-store:before {
	content: "\e82d";
}
.lnr-cart:before {
	content: "\e82e";
}
.lnr-tag:before {
	content: "\e82f";
}
.lnr-phone-handset:before {
	content: "\e830";
}
.lnr-phone:before {
	content: "\e831";
}
.lnr-pushpin:before {
	content: "\e832";
}
.lnr-map-marker:before {
	content: "\e833";
}
.lnr-map:before {
	content: "\e834";
}
.lnr-location:before {
	content: "\e835";
}
.lnr-calendar-full:before {
	content: "\e836";
}
.lnr-keyboard:before {
	content: "\e837";
}
.lnr-spell-check:before {
	content: "\e838";
}
.lnr-screen:before {
	content: "\e839";
}
.lnr-smartphone:before {
	content: "\e83a";
}
.lnr-tablet:before {
	content: "\e83b";
}
.lnr-laptop:before {
	content: "\e83c";
}
.lnr-laptop-phone:before {
	content: "\e83d";
}
.lnr-power-switch:before {
	content: "\e83e";
}
.lnr-bubble:before {
	content: "\e83f";
}
.lnr-heart-pulse:before {
	content: "\e840";
}
.lnr-construction:before {
	content: "\e841";
}
.lnr-pie-chart:before {
	content: "\e842";
}
.lnr-chart-bars:before {
	content: "\e843";
}
.lnr-gift:before {
	content: "\e844";
}
.lnr-diamond:before {
	content: "\e845";
}
.lnr-linearicons:before {
	content: "\e846";
}
.lnr-dinner:before {
	content: "\e847";
}
.lnr-coffee-cup:before {
	content: "\e848";
}
.lnr-leaf:before {
	content: "\e849";
}
.lnr-paw:before {
	content: "\e84a";
}
.lnr-rocket:before {
	content: "\e84b";
}
.lnr-briefcase:before {
	content: "\e84c";
}
.lnr-bus:before {
	content: "\e84d";
}
.lnr-car:before {
	content: "\e84e";
}
.lnr-train:before {
	content: "\e84f";
}
.lnr-bicycle:before {
	content: "\e850";
}
.lnr-wheelchair:before {
	content: "\e851";
}
.lnr-select:before {
	content: "\e852";
}
.lnr-earth:before {
	content: "\e853";
}
.lnr-smile:before {
	content: "\e854";
}
.lnr-sad:before {
	content: "\e855";
}
.lnr-neutral:before {
	content: "\e856";
}
.lnr-mustache:before {
	content: "\e857";
}
.lnr-alarm:before {
	content: "\e858";
}
.lnr-bullhorn:before {
	content: "\e859";
}
.lnr-volume-high:before {
	content: "\e85a";
}
.lnr-volume-medium:before {
	content: "\e85b";
}
.lnr-volume-low:before {
	content: "\e85c";
}
.lnr-volume:before {
	content: "\e85d";
}
.lnr-mic:before {
	content: "\e85e";
}
.lnr-hourglass:before {
	content: "\e85f";
}
.lnr-undo:before {
	content: "\e860";
}
.lnr-redo:before {
	content: "\e861";
}
.lnr-sync:before {
	content: "\e862";
}
.lnr-history:before {
	content: "\e863";
}
.lnr-clock:before {
	content: "\e864";
}
.lnr-download:before {
	content: "\e865";
}
.lnr-upload:before {
	content: "\e866";
}
.lnr-enter-down:before {
	content: "\e867";
}
.lnr-exit-up:before {
	content: "\e868";
}
.lnr-bug:before {
	content: "\e869";
}
.lnr-code:before {
	content: "\e86a";
}
.lnr-link:before {
	content: "\e86b";
}
.lnr-unlink:before {
	content: "\e86c";
}
.lnr-thumbs-up:before {
	content: "\e86d";
}
.lnr-thumbs-down:before {
	content: "\e86e";
}
.lnr-magnifier:before {
	content: "\e86f";
}
.lnr-cross:before {
	content: "\e870";
}
.lnr-menu:before {
	content: "\e871";
}
.lnr-list:before {
	content: "\e872";
}
.lnr-chevron-up:before {
	content: "\e873";
}
.lnr-chevron-down:before {
	content: "\e874";
}
.lnr-chevron-left:before {
	content: "\e875";
}
.lnr-chevron-right:before {
	content: "\e876";
}
.lnr-arrow-up:before {
	content: "\e877";
}
.lnr-arrow-down:before {
	content: "\e878";
}
.lnr-arrow-left:before {
	content: "\e879";
}
.lnr-arrow-right:before {
	content: "\e87a";
}
.lnr-move:before {
	content: "\e87b";
}
.lnr-warning:before {
	content: "\e87c";
}
.lnr-question-circle:before {
	content: "\e87d";
}
.lnr-menu-circle:before {
	content: "\e87e";
}
.lnr-checkmark-circle:before {
	content: "\e87f";
}
.lnr-cross-circle:before {
	content: "\e880";
}
.lnr-plus-circle:before {
	content: "\e881";
}
.lnr-circle-minus:before {
	content: "\e882";
}
.lnr-arrow-up-circle:before {
	content: "\e883";
}
.lnr-arrow-down-circle:before {
	content: "\e884";
}
.lnr-arrow-left-circle:before {
	content: "\e885";
}
.lnr-arrow-right-circle:before {
	content: "\e886";
}
.lnr-chevron-up-circle:before {
	content: "\e887";
}
.lnr-chevron-down-circle:before {
	content: "\e888";
}
.lnr-chevron-left-circle:before {
	content: "\e889";
}
.lnr-chevron-right-circle:before {
	content: "\e88a";
}
.lnr-crop:before {
	content: "\e88b";
}
.lnr-frame-expand:before {
	content: "\e88c";
}
.lnr-frame-contract:before {
	content: "\e88d";
}
.lnr-layers:before {
	content: "\e88e";
}
.lnr-funnel:before {
	content: "\e88f";
}
.lnr-text-format:before {
	content: "\e890";
}
.lnr-text-format-remove:before {
	content: "\e891";
}
.lnr-text-size:before {
	content: "\e892";
}
.lnr-bold:before {
	content: "\e893";
}
.lnr-italic:before {
	content: "\e894";
}
.lnr-underline:before {
	content: "\e895";
}
.lnr-strikethrough:before {
	content: "\e896";
}
.lnr-highlight:before {
	content: "\e897";
}
.lnr-text-align-left:before {
	content: "\e898";
}
.lnr-text-align-center:before {
	content: "\e899";
}
.lnr-text-align-right:before {
	content: "\e89a";
}
.lnr-text-align-justify:before {
	content: "\e89b";
}
.lnr-line-spacing:before {
	content: "\e89c";
}
.lnr-indent-increase:before {
	content: "\e89d";
}
.lnr-indent-decrease:before {
	content: "\e89e";
}
.lnr-pilcrow:before {
	content: "\e89f";
}
.lnr-direction-ltr:before {
	content: "\e8a0";
}
.lnr-direction-rtl:before {
	content: "\e8a1";
}
.lnr-page-break:before {
	content: "\e8a2";
}
.lnr-sort-alpha-asc:before {
	content: "\e8a3";
}
.lnr-sort-amount-asc:before {
	content: "\e8a4";
}
.lnr-hand:before {
	content: "\e8a5";
}
.lnr-pointer-up:before {
	content: "\e8a6";
}
.lnr-pointer-right:before {
	content: "\e8a7";
}
.lnr-pointer-down:before {
	content: "\e8a8";
}
.lnr-pointer-left:before {
	content: "\e8a9";
}
