/**************** Body *********************/
* { margin:0; padding:0;}
a{
	color: #0000FF;
	text-decoration: none;
} 
a:hover, a:focus{
	color: #F00;
	text-decoration:underline;
}
a:visited{color: #0000FF;} /*similar to #154595*/
sup {
    line-height: 0;
    font-size: 0.83em;
    vertical-align: super;
}
body {
	font-size: 12pt;
	font-family: "微軟正黑體";
	color: #000;
	line-height: 150%;
	background-color: #FFFFFF; /*grey ccc*/	
	background:  url(../images/bg.jpg) top center fixed repeat-y;
}
p{
	text-align:justify;
	text-justify:inter-ideograph;	
}
#wrapper {
	margin: 0px auto;
	padding: 0;
	width: 954px;
	background-color: #FFFFFF;
}
#top{
	margin: 0 auto;
	width: 954px;
	height: 70px;
	background: #FFFFFF;
	padding-top:64px;

}

#header {
	margin: 0 auto;
	width: 954px;
	height: 280px;
	padding-bottom: 5px
}
#top #logo{ float:left}

#top #font_bar{
	float: left;
	width: 260px;
	height: 40px;
	margin-left: 304px;
	padding-top: 20px;
}
#top #font_bar ul {
    list-style: none;
}
#top #font_bar #size li{
    float: left;
    height: 24px;
    position: relative;
    width: 30px;
}
#top #font_bar #size li a{
	text-decoration: none;
	position: absolute;
	bottom: 0;
	line-height: 1;
	color: #000000;
}

#skip{
	text-decoration: none;
	color: #FFF;
}
#skip-wrap a:focus{
	color: #00F;
}

#top #font_bar #sitemap{
	float:left;
	font-family: "微軟正黑體";
	font-size:1em;
}
#top #font_bar #sitemap a:hover, a:focus{
	color: #F00;
	text-decoration:underline;
	font-weight:normal;
}

/**************** Content *********************/
#content {
	margin: 0 auto;
	padding-top:20px;
	padding-left:30px;
	padding-right:30px;
	width: 894px;
}

.bgindex{
		background-image:url(../images/bg_index.jpg);
}
.bg_s1{
		background-image:url(../images/bg_s1.jpg);
}
.bg_s2{
		background-image:url(../images/bg_s2.jpg);
}
.bg_s3{
		background-image:url(../images/bg_s3.jpg);
}
.bg_s4{
		background-image:url(../images/bg_s4.jpg);
}
.bg_s5{
		background-image:url(../images/bg_s5.jpg);
}
.bg_s6{
		background-image:url(../images/bg_s6.jpg);
}

#content #path{
	font-size:0.9em;
	padding-bottom: 20px;
}

#content #title_news {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	margin-left:12px;
	height:60px;
	color:#FF0000;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_news.png);
	background-repeat:no-repeat;
}
#content #title_s1 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:60px;
	color:#4400B7;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_s1.png);
	background-repeat:no-repeat;
}
#content #title_s2 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:60px;
	color:#0058B0;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_s2.png);
	background-repeat:no-repeat;
}
#content #title_s3 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:auto;
	min-height:60px;
	color:#005742;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_s3.png);
	background-repeat:no-repeat;
}
#content #title_s4 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:auto;
	min-height:60px;
	color:#5C7B00;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_s4.png);
	background-repeat:no-repeat;
}
#content #title_s5 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:auto;
	min-height:60px;
	color:#D86C00;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_s5.png);
	background-repeat:no-repeat;
}
#content #title_s6 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:auto;
	min-height:60px;
	color:#B22D00;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_s6.png);
	background-repeat:no-repeat;
}
#content #title_s7 {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:60px;
	color:#4400B7;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_sitemap.png);
	background-repeat:no-repeat;
}
#content #title_ecard {
	font-size:1.3em;
	line-height:110%;
	padding-top:4px;
	height:60px;
	color:#FF0000;
	font-weight:400;
	padding-left:70px;
	background-image:url(../images/icon_ecard.png);
	background-repeat:no-repeat;
}
#content #whatsnew{
	margin: 0 auto;
	/* padding-top:20px;  */
}
#content #s1_dline{
	background-image:url(../images/dline_s1.png);
	background-repeat: no-repeat;
	background-position:center;
	height:40px;
}
#content #s2_dline{
	background-image:url(../images/dline_s2.png);
	background-repeat: no-repeat;
	background-position:center;
	height:40px;
}
#content #s3_dline{
	background-image:url(../images/dline_s3.png);
	background-repeat: no-repeat;
	background-position:center;
	height:40px;
}
#content #s4_dline{
	background-image:url(../images/dline_s4.png);
	background-repeat: no-repeat;
	background-position:center;
	height:40px;
}
#content #s5_dline{
	background-image:url(../images/dline_s5.png);
	background-repeat: no-repeat;
	background-position:center;
	height:40px;
}
#content #s6_dline{
	background-image:url(../images/dline_s6.png);
	background-repeat: no-repeat;
	background-position:center;
	height:40px;
}
.wb_l {
	background-image: url(../images/wb_l.jpg);
	background-repeat: repeat-y;
	width: 30px;
}
.wb_r {
	background-image: url(../images/wb_r.jpg);
	background-repeat: repeat-y;
	width: 30px;
}
.wb_rb {
	background-image: url(../images/wb_br.jpg);
	background-repeat: no-repeat;
	width: 30px;
}
.wb_lb {
	background-image: url(../images/wb_bl.jpg);
	background-repeat: no-repeat;
	width: 30px;
	height: 30px;
}
.wb_rt {
	background-image: url(../images/wb_tr.jpg);
	background-repeat: no-repeat;
	background-position:bottom;
	width: 30px;
}
.wb_lt {
	background-image: url(../images/wb_tl.jpg);
	background-repeat: no-repeat;
	background-position:bottom;
	width: 30px;
	height: 30px;
}
.wb_b {
	background-image: url(../images/wb_b.jpg);
	background-repeat: repeat-x;
}
.wb_t {
	background-image: url(../images/wb_t.jpg);
	background-repeat: repeat-x;
	background-position:bottom;
}
.wb_center{
	background-image: url(../images/logo_watermark.jpg);
	background-repeat:no-repeat;
	background-position:center 10px;
}


.list_style1 li{
	background: url(../images/bullet_heart.png) left 4px no-repeat ;
	padding-left:25px;
	list-style:none;
	line-height:120%;
	margin-top:10px;
	margin-bottom:20px;
	text-justify:inter-ideograph;
	text-align:justify;

}
.list_style1 li ul li{
	background: url(../images/bullet_play.png) left 4px no-repeat ;
}

.list_style2 li{
	background: url(../images/icon_download.jpg) left 0px  no-repeat ;
	padding-left:64px;
	list-style:none;
	line-height:120%;
	margin-top:10px;
	margin-bottom:20px;
	line-height:70px;
}
.list_style3 li{
	list-style-image:url(../images/icon_shutter.png);
	height:auto;
	min-height:24px;
	margin-left:44px;
	padding-left:10px;
	line-height:200%;
}
.list_style3 li ul li{
	list-style:disc;
	margin-left:20px;
}
.list_style4 li{
	list-style:none;
	margin-left:6px; 
	margin-bottom:10px;	
}
.list_style4 li ul li{
	list-style-image:url(../images/bullet_play.png);
	margin-left:26px;
 	
}
.list_style5 li{
	list-style-image:url(../images/bullet_play.png);
	margin-left:26px;
	padding-bottom:8px;
 	
}
.list_style6 li{
	list-style-image:url(../images/bullet_pen.png);
	margin-left:30px;
	padding-bottom:8px;
 	
}
.list_style7 li{
	list-style-image:url(../images/bullet_sitemap_lv1.png);
	margin-left:30px; 
	margin-bottom:10px;
	line-height:300%;
}
.list_style7 li ul li{
	list-style-image:url(../images/bullet_sitemap_lv2.png);
	margin-left:26px;
 	line-height:150%;
}
.list_style8 li{
	list-style-image:url(../images/bullet_down.png);
	margin-left:30px;
	padding-bottom:8px;
 	
}
.caption{
	font-size:0.9em;
	text-align:left;
}
.smalltext{
	font-size:0.8em;
	text-align:left;
}
.hline_green{
	background-image:url(../images/hline_green.png);
	background-repeat:repeat-x;
}
/**************** Footer *********************/
#footer1 {
	margin: 0 auto;
	background-image:url(../images/bg_content.png);
	background-repeat:no-repeat;
	background-position:bottom;
	height:115px;
	width: 914px;
}
#footer2 {

	margin: 0 auto;
	background-image:url(../images/bg_footer.jpg);
	background-repeat:no-repeat;
	background-position:center;
	height:40px;
	width: 954px;
}
#footer2 p{
	font-size:0.8em;
	color:#FFF;
	text-align:center;
	font-weight:bold;
	padding-top:5px;
}



#font_bar a:hover, #font_bar a:focus{
	text-decoration: none;
	padding: 0;
	font-weight: bold;
	color: #F00;
} 
#size li{
    float: left;
    height: 24px;
    position: relative;
    width: 30px;
}
#size li a{
	text-decoration: none;
	position: absolute;
	bottom: 0;
	line-height: 1;
	color: #154595;
	font-weight: bold;
}
#size li .small{
    font-size: 12px;
}
#size li .med{
    font-size: 18px;
}
#size li .large{
    font-size: 24px;
    bottom: -2px;
}

.pixeltable {
	border: 1px solid #4400B7;
	border-collapse: collapse;
	background-color: #FFF;
	font-size:0.9em;
}
.pixeltable td, th{
	border-left: 1px solid #4400B7;
	border-top: 1px solid #4400B7;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:2px;
	padding-right:2px;
}

.pixeltable2 {
	border: 1px solid #4400B7;
	border-collapse: collapse;
	background-color: #FFF;
}
.pixeltable2 td, th{
	border-left: 1px solid #4400B7;
	border-top: 1px solid #4400B7;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:4px;
	padding-right:4px;
}
.pixeltable3 {
	border: 1px solid #666666;
	border-collapse: collapse;
	background-color: #FFF;
}
.pixeltable3 td, th{
	border-left: 1px solid #666666;
	border-top: 1px solid #666666;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:4px;
	padding-right:4px;
}
.pixeltable4 {
	border: 1px solid #666666;
	border-collapse: collapse;
	font-size:0.9em;
}
.pixeltable4 td, th{
	border-left: 1px solid #666666;
	border-top: 1px solid #666666;
	padding: 1px 4px 1px 4px;
}
.link a:hover, .link a:focus{
	 	text-decoration: none;
		color:#F00;
}
.textright{
	float:right;
}
.redlink a{
	text-decoration:none;
	color:#F00;
}

.redlink a:hover, .redlink a:focus{
		color: #F00;
	text-decoration:underline;
}
.inputbtn {
	width:50px;
	height:30px;
	font-size:1.2em;
}
.red{
		color:#F00;
}
/* The Modal (background) */
.modal {
  display: block; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 104; /* 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: 1% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
 width: 600px; /* Could be more or less, depending on screen size */
}
.modal-content img{
	margin-left:100px;
}
.modal-content p{
	text-align:center;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

#thumbnail{
	float:right;
	z-index:1;
    cursor: pointer;
	width:200px;
	height:290px;
	background-color:transparent;
	background: url(../images/TCS2020poster_tn.jpg) left center;
}

/* Top banner */
.topbanner {
	z-index:100;
  overflow: hidden;
  position: fixed; /* Set the navbar to fixed position */
  top: 0; /* Position the navbar at the top of the page */
  width: 100%; /* Full width */
}