body {
	margin: 0;
	padding:0;
	 font-family: Helvetica, Arial, 微軟正黑體修正, 微軟正黑體, serif;
	font-size:15px;
	line-height:30px;
	width:100%;
	
  background-color: #000: 
	
	
}

/* 修正粗體 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: bold;
    src: local(Yu Gothic), local(MS Gothic);
}
/* 一般粗細的時候改回微軟正黑 */
@font-face {
    font-family: '微軟正黑體修正';
    unicode-range: U+7db0, U+78A7, U+7B75; /* ASCII (碧筵綰) */
    font-style: normal;
    font-weight: normal;
    src: local(微軟正黑體);
}
* {
    font-family: Helvetica, Arial, 微軟正黑體修正, 微軟正黑體, serif;
}


a
{ color: #3e3e3e;
  text-decoration: none; }



.bannerphoto
{ min-width: 100%;
   height: 140px;
   margin: 85px auto 0 auto;
   background-image:url(images/photobanner.jpg);
   background-size: 100%;
   background-size: 100% bottom;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
   padding-top: 50px;
   line-height: 40px;
   text-shadow:1px 1px 3px rgba(0,0,0,0.8);
   }


.bannerphoto2
{ min-width: 100%;
   height: 140px;
   margin: 85px auto 0 auto;
   background-image:url(images/photobanner2.jpg);
   background-size: 100% bottom;
   background-position: center 300px;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
   padding-top: 50px;
   line-height: 40px;
   text-shadow:1px 1px 3px rgba(0,0,0,0.8);
   }


.bannerphoto3
{ min-width: 100%;
   height: 140px;
   margin: 85px auto 0 auto;
   background-image:url(images/photobanner3.gif);
   background-size: 100% bottom;
   background-position: center 400px;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
   padding-top: 50px;
   line-height: 40px;
   text-shadow:1px 1px 3px rgba(0,0,0,0.8);
   }  


.bannerphoto4
{ min-width: 100%;
   height: 80px;
   margin: 85px auto 0 auto;
   background-image:url(images/banner.jpg);
   background-size: 1920px bottom;
   background-position: center 12px;
   background-repeat:no-repeat;
   color: #3e3e3e;
   font-size: 32px;
   text-align: center;
   padding-top: 40px;
   padding-bottom:30px;
   line-height: 40px;
   font-weight:bold;
  
   }

.bannerphoto4>.en_word
{ color:red;}


.en_word
{ font-size: 26px;
 font-family:  'Bank Gothic Light BT',Microsoft JhengHei;
 font-style: italic; }
.timeline2
{ min-width: 2600px;
width:100%;
   height: auto;
   margin: 85px auto 0 auto;
   }

.center

{ width: 1600px;
  margin:0 auto;
  position:relative; }

.center.short

{ width: 1024px;
  margin:0 auto;
  min-height: 300px;
  height: auto;
  padding:20px 0 0 0;
  position:relative; }



.timeline_bar
{ height: 20px;
  min-width:2600px;
  width:100%;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,2d2d2d+100 */
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top,  #7d7e7d 0%, #2d2d2d 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #7d7e7d 0%,#2d2d2d 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #7d7e7d 0%,#2d2d2d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#2d2d2d',GradientType=0 ); /* IE6-9 */
  margin:0 auto; 
 position: relative; }

 .timeline_bar>.center>.year_bar
 {
 border-left: 1px solid #f5f5f5;
 border-right: 1px solid #f5f5f5;
 color: #ffffff;
 text-align:center;
 height: 20px;
 line-height: 20px;
 float:left;
 font-family: "Frutiger Neue W02 Thin",Arial,Helvetica,sans-serif; 
}

.timeline_bar>.center
{min-width: 2600px;
  width:100%;
  margin:0 auto;
  position:relative;}



.timeline_bar>.center>.year_bar
 {}

.timeline_bar>.center>.year_bar.year10
{  width:100px;
margin-left:0; 
border-left:0;}

.timeline_bar>.center>.year_bar.year11
{  width:400px;
margin-left: 0; }

.timeline_bar>.center>.year_bar.year12
{  width:320px;
margin-left: 0; }

.timeline_bar>.center>.year_bar.year13
{  width:300px;
margin-left: 0; }

.timeline_bar>.center>.year_bar.year14
{  width:400px;
margin-left: 0; }

.timeline_bar>.center>.year_bar.year15
{  width:330px;
margin-left: 0; 
}

.timeline_bar>.center>.year_bar.year16
{  width:50px;
margin-left: 0; 
}

.timeline_bar>.center>.year_bar.year17
{  width:400px;
margin-left: 0; 
border-right:0;
}


.timeline_bar>.center>.year_bar.year18
{  width:100px;
margin-left: 0; 
border-right:0;
}



.timeline_top
{ height: 300px;
  min-width:2600px;
   width:100%;
  margin:0 auto;
  position:relative; 
}



.timeline_top>.area
{ 
  height: 260px;
  border-left: 3px solid #d6d6d6;
  display: inline-block; 
margin-left:30px;
margin-top: 40px;
padding-left: 10px;
float: left;
position: relative; }


.timeline_top>.area:after
{    display:inline-table;
    content: "";
    width: 9px;
    height: 9px;
    background-color: #3e3e3e;
    border-radius: 50%;
    position: absolute;
    margin-top: 7px;
    bottom:0;
    left: -6px;
  }







.timeline_top>.area.low
{ margin-top: 100px;
height: 200px; }


.timeline_bottom
{ height: 300px;
  min-width:2600px;
  width:100%;
  margin:0 auto;

   }  

.timeline_bottom>.area:before
{    display:inline-table;
    content: "";
    width: 9px;
    height: 9px;
    background-color: #3e3e3e;
    border-radius: 50%;
    position: absolute;
    margin-top: 0;
    top:0;
    left:-6px;
  }


.timeline_bottom>.area
{ width: auto;
  height: 300px;
  border-left: 3px solid #d6d6d6;
  display: inline-block; 
  padding-top: 20px;
margin-left:40px;
margin-top: 0;
padding-left: 10px;
float: left;
  position: relative; }

.timeline_bottom>.area.low
{ padding-top: 40px; 
height: 240px;}

.detail
{ font-size:12px;
font-weight: bold; }


.year
{font-family:"Frutiger Neue W02 Thin",Arial,Helvetica,sans-serif ;
height: 18px;

color: red;
font-weight: bold; }

.year.large
{ font-size: 19px;}



img {
  border: 0px
}


p
{ width:100%;}

h3
{ padding:0;
  margin:0 0 10px 0;}

#menu {
	position:fixed;
	top:0px;
	width:100%; 
	height:75px; 
	
	color: #FFFFFF;
	z-index:9999;
	display: none;
}

#header
{   position:fixed;
	top:0px;
	width:100%; 
	height:85px; 
	background: rgba(255,255,255,1);
	color: #FFFFFF;
	z-index:9999;
    box-shadow: 0.6px 0.6px 6px rgba(0,0,0,0.5);
    float: left;
	}
  
#nav
{ width:1024px;
  margin: 0 auto; }

#nav> ul
{ margin: 24px 10px 0  0;
  padding: 0;
  float:right;}
   
 @font-face {
font-family: 'Bank Gothic Light BT';
font-style: normal;
font-weight: normal;
src: local('Bank Gothic Light BT'), url('TT0589M_.woff') format('woff');
}


#nav> ul>li
{ list-style: none;
  float:left;
  margin-left: 40px; 
  color: #3e3e3e;
  font-size: 17px;
  font-weight: bolder;
  line-height: 18px;
  text-align: right;
  font-family:  'Bank Gothic Light BT',Microsoft JhengHei;

 }

.about
{ width:1024px;

height: auto;  }


.circle
{ width: 6px;
  height: 6px;
  border-radius: 30px;
  background-color:#3e3e3e;
  display: inline-block;
  margin-right: 10px;  }

 #nav> ul>li:hover
{ -webkit-animation-name:light; /* Chrome, Safari, Opera */
  -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
  animation-name:light;
  animation-duration: 1s;
  -webkit-animation-direction: alternate; /* Chrome, Safari, Opera */
  animation-direction: alternate;
  color:red;}  

.title_red
{ color:red;
   font-size:13px;
   display: block;
   font-style:italic;
   font-weight: bolder; 
   padding-right: 1px;
   text-transform:uppercase;
   font-family: 'Bank Gothic Light BT',Microsoft JhengHei;
   }


ul.topnav>li>a
{ text-decoration:none;
  color:#fbfbfb;
  text-shadow:1px 1px 1px rgba(0, 0, 0,0.2);
  font-weight:bold;
   }  
  

.footer
{ width: 100%;
  background-color: #2e2e2e;
  height: 80px;
  text-align:center;
  color: #ffffff;
  margin-top:30px; 
  padding-top: 10px;
  min-width: 1600px;
   position:relative;
   bottom:0;
   z-index: 9999;


   }
   
.footer.relative
{ 
  position:fixed;

  }


   
/* Chrome, Safari, Opera */
@-webkit-keyframes light {
    0%   {text-shadow:2px 2px 4px rgba(0, 0, 0,0.1);font-size: 17px;}
    50% {text-shadow:2px 2px 4px rgba(0, 0, 0,0.2);font-size: 20px;}
	100% {text-shadow:2px 2px 4px rgba(0, 0, 0,0.1);font-size: 20px;}
}

/* Standard syntax */
@keyframes light {
    0%   {text-shadow:2px 2px 4px rgba(0, 0, 0,0.1);font-size: 17px;}
    50% {text-shadow:2px 2px 4px rgba(0, 0, 0,0.2);font-size: 20px;}
	100% {text-shadow:2px 2px 4px rgba(0, 0, 0,0.1);font-size: 20px;}
}   
   

 .sidenav,
 .btn
 {  display: none;}  

 


/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

table.content_table
{ border-collapse: collapse;
  width: 960px;
  margin: 0 auto;

   }

table.content_table>tbody>tr>td
{ padding:0 10px 0 10px ; 
vertical-align: top; }   



iframe
{ box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.2);
margin-top: 10px; }

table.contact
{  margin-left: 30px;
width: 100%; }


table.contact>tbody>tr:nth-child(odd)>td
{ color: red;
  font-weight: bolder;
  border-bottom: 1px solid #bbbbbb;
  
  padding: 0;
     }

table.contact>tbody>tr:nth-child(even)>td
{ padding-bottom: 10px;
  
     }

table.contact>tbody>tr>td> span.en_word
{ font-size:16px; }

.large_area
{ display: inline-block;
  background-color: #2e2e2e;
  color: #ffffff;
  font-size: 20px;
  margin-left: 4px;
  margin-right:20px; }