@import url("reset.css");
/* 基本設定 */
html{height:100%;}
body {font-family: Arial, Helvetica, sans-serif;	font-size: 12px;color: #666666;vertical-align:middle; background-color: black; width: 100%;height: 100%;}
a{ text-decoration:none; color: #003366; outline: none; /* for Firefox */
 hlbr:expression(this.onFocus=this.blur()); /* for IE */
}
a:hover{filter:alpha(opacity=50); /* IE */-moz-opacity:0.5; /* Moz + FF */opacity: 0.5; }


/* 最外框 */
#WARPPER{ display: block; position: relative; width: 100%; height: 100%;  max-width:1600px; max-height:900px;
	 left:50%; top:50%; transform:translateY(-50%) translatex(-50%) ;}

/* 頁首 */
#HEADER{}
#TSMCLOGO{ display: block;  position: fixed;top: -30px; left: 20px; width:90px;  }
#H1{ display: block;  position: fixed; top:65px; left: 130px; font:300 2em Arial,"微軟正黑體", "新細明體"; color:#fff;text-shadow: 1px 1px 10px #000;  }

/* 選單 */
#BBMBOX{ display: block; position:absolute; top: 120px; left:20px; padding: 10px 20px; }
#BBMBOX li{ margin-bottom: 5px;}
#BBMBOX a{ display: block;font:300 1.5em Arial,"微軟正黑體", "新細明體"; color:#fff; padding:0 10px;filter:alpha(opacity=100); /* IE */-moz-opacity:1; /* Moz + FF */opacity:1; line-height: 1.7em; cursor: pointer}
#BBMBOX a:hover{  background-color: rgba(255,0,4,1.00)}
#BBMBOX ol { display: none; margin-bottom:0;background-color: rgba(255, 255, 255, 0.1); color:#FC9;  padding: 10px 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
#BBMBOX ol a{ font:300 1.2em Arial,"微軟正黑體", "新細明體"; color:#FC9;  padding: 1px 1em 1px 1.5em }
#BBMBOX ol a:hover{  background-color: rgba(255,0,4,0.5)}

#TOPMENU{ display: block; position: fixed; right: 0; top:70px; border-bottom: 3px #ff0000  solid; padding-right: 20px; }
#TOPMENU li{ float: left;}
#TOPMENU a{ font:300 1.3em Arial,"微軟正黑體", "新細明體"; color:#FFF;   padding-right: 1em;text-shadow: 1px 1px 10px #000; line-height: 1.3em;}

.toggle { display: none} 
.menushow{display: none}

/* 內容 */
#CONTENT{}

/* 頁尾 */
#FOOTER{  display:  block; width: 100%; background-color: rgba(0, 0, 0, 0.6);  font: 1.2em Arial,"微軟正黑體", "新細明體"; color:#fff ; position: fixed; bottom: 0; text-align: center; padding: 5px 0; line-height: 1.2em; }

/* 常用的標題css */
.Stittle01{ display:block; font:30px Arial,"微軟正黑體", "新細明體"; color:#39C; padding:20px 0 5px 0;}
.Stittle02{ display:block; font:30px Arial,"微軟正黑體", "新細明體"; color: #096; padding:20px 0 5px 0;}
.Stittle03{ display:block; font:800 23px Arial,"微軟正黑體", "新細明體"; color: #930; padding:20px 0 5px 0;}
.Stittle04{ display:block; font:800 20px Arial,"微軟正黑體", "新細明體"; color: #F93; padding:20px 0 5px 0;}

/* 常用的UL css */
.list1 li{ list-style:outside  decimal; margin-left:30px; padding-bottom:5px;}
.list2 li{ list-style:outside  upper-roman; margin-left:30px;padding-bottom:5px;}
.list3 { display:block;  padding:20px; margin-bottom:10px;border-radius: 30px; -webkit-border-radius: 30px; -moz-border-radius: 30px; background-color:#8dcdcc}
.list3 li{ list-style:outside  decimal; margin-left:30px; padding-bottom:5px;}
.listil4 li{  padding-bottom:10px; float: none; color:#666}
.listil4 input{ border: 2px #FC9 solid; padding:5px;}

.listil4 select{ border: 2px #FC9 solid; }
.listil4 textarea{ border: 2px #FC9 solid;padding:5px;width:320px;}
.inputBox{width:320px;}
.joinw{ display:inline-block; width:200px; text-align:right}


/* 清除float */
.clearfloat{
clear:both;height:0;font-size:1px;line-height:0;}

/* 捲軸css*/
.Scroll {margin: 10px 5px 0px 0px;}


@media (max-width: 1100px) {
body {font-size: 11px; }
		}

@media (max-width: 640px) {

	.menushow{display: block}
   #TOPMENU{ display: none; }
    #TSMCLOGO{  position: absolute; width:140px; top: -60px; left: 50%; margin-left: -70px;  }
    #H1{ position: absolute; left: 0; width: 100%;  top: 170px; text-align: center}
    #BBMBOX{ position: absolute; top: 240px; width:80%; left: 20px; padding-bottom: 40px;}
    #BBMBOX li{ margin-bottom: 0;} 

    
		}