*{
	margin: 0;
	padding: 0;
}

html, body{ 
	font-family:Arial, Helvetica, sans-serif, "微軟正黑體";
	-webkit-text-size-adjust:none;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
}

/* Mobile First 手機版優先 */
@media screen and (max-width: 600px){
	
body{
	background-color: #FFF;
}

header{
	width: 100%;
}

header h1{	
	width:100%;
	height:0;
	padding-bottom:225%;
	background-image:url(images/banner_mobile.png);
	background-size:cover;
	text-indent:-9999px;
}

nav #SIGN{
	width:170px;
	height:45px;
	line-height:45px;
	background: #f85032; /* Old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-8 */

	text-align:center;
	margin: 40px auto 50px auto;
	box-shadow:2px 2px 3px #999;
	text-shadow:1px 1px 2px #900;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

nav #SIGN:hover{
	background: #f3c5bd; /* Old browsers */
background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-8 */

}

nav #SIGN a{
	text-decoration:none;
	color:#FFF;
	font-size:18px;
	letter-spacing:1px;
	font-weight:bold;
}

article{
	width:95%;
	margin:auto;
}

article #BOX1{
	width:100%;
}

article #BOX1 h1{
	font-size:14px;
	text-align:left;
	color:#ba2737;
}

article #BOX1 ul {
	width:100%;
	height:30px;
	list-style:none;
	line-height:44px;
	margin:1px 0px 1px 0px;
}
article #BOX1 ul li{
	float:left;
	max-width:90;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

article #BOX1 ul:nth-child(2){
	text-align:center;
	color:#FFF;
	background: #d24b5a; /* Old browsers */
background: -moz-linear-gradient(top,  #d24b5a 0%, #ba2737 51%, #f18e99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d24b5a', endColorstr='#f18e99',GradientType=0 ); /* IE6-8 */
	border-radius:5px 5px 0px 0px;
	
}
article #BOX1 ul:nth-child(odd){
	background-color:#DBDBDB;
	line-height:30px;
}
article #BOX1 ul:nth-child(even){
	background-color:#E6E6E6;
	line-height:30px;
}
article #BOX1 ul li:nth-child(1){
	display:none;
	width:0%;
	text-align:center;
	font-size:10px;
}
article #BOX1 ul li:nth-child(2){
	font-size:16px;
	width:100%;
	padding-left:5px;
}
article #BOX1 ul li:nth-child(3){
	display:none;
	width:0%;
	text-align:center;
	font-size:10px;
}
article #BOX1 ul:last-child{
	border-radius:0px 0px 5px 5px;
}
article #BOX2{
	width:100%;
	margin-top:20px;
}

article #BOX2 p{
	color:#666;
	font-size:12px;
	text-align:left;
	line-height:18px;
}

article #BOX3{
	width:100%;
	margin:10px 0px 0px 0px;
}


article #BOX3 h2{
	width:100%;
	height:0;
	padding-bottom:8.33%;
	background-image:url(images/logo_mobile.png);
	background-size:cover;
	text-indent:-8888px
}

article #BOX4{
	width:100%;
}
article #BOX4 p{
	text-align:center;
	color:#666;
	font-size:10px;
	line-height:70px;
}

}

/* 以下為 平板電腦 */
 
@media screen and (min-width: 600px) and (max-width: 1024px) {
body{
	background-color: #FFF;
}

header{
	width: 100%;
}

header h1{	
	width:100%;
	height:0;
	padding-bottom:102.54%;
	background-image:url(images/banner_tablet.png);
	background-size:cover;
	text-indent:-9999px;
}

nav #SIGN{
	width:170px;
	height:45px;
	line-height:45px;
	background: #f85032; /* Old browsers */



background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-8 */
	
	text-align:center;
	margin: 25px auto 25px auto;
	box-shadow:2px 2px 3px #999;
	text-shadow:1px 1px 2px #900;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

nav #SIGN:hover{
	background: #f3c5bd; /* Old browsers */
background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-8 */

}

nav #SIGN a{
	text-decoration:none;
	color:#FFF;
	font-size:18px;
	letter-spacing:1px;
	font-weight:bold;
}

article{
	width:90%;
	margin:auto;
}

article #BOX1{
	width:100%;
}

article #BOX1 h1{
	font-size:18px;
	text-align:left;
	line-height:30px;
	color:#ba2737;
}

article #BOX1 ul {
	width:100%;
	height:30px;
	list-style:none;
	line-height:30px;
	font-size:16px;
	margin:1px 0px 1px 0px;
}
article #BOX1 ul li{
	float:left;
	max-width:90;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
}

article #BOX1 ul:nth-child(2){
	text-align:center;
	color:#FFF;
	background: #d24b5a; /* Old browsers */
background: -moz-linear-gradient(top,  #d24b5a 0%, #ba2737 51%, #f18e99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d24b5a', endColorstr='#f18e99',GradientType=0 ); /* IE6-8 */

	
	line-height:30px;
	border-radius:5px 5px 0px 0px;
}
article #BOX1 ul:nth-child(odd){
	background-color:#DBDBDB;
	line-height:30px;
}
article #BOX1 ul:nth-child(even){
	background-color:#E6E6E6;
	line-height:30px;
}
article #BOX1 ul li:nth-child(1){
	width:20%;
	text-align:center;
}
article #BOX1 ul li:nth-child(2){
	width:50%;
}
article #BOX1 ul li:nth-child(3){
	width:30%;
	text-align:center;
}
article #BOX1 ul:last-child{
	border-radius:0px 0px 5px 5px;
}
article #BOX2{
	width:100%;
	margin-top:20px;
}

article #BOX2 p{
	color:#666;
	font-size:12px;
	text-align:left;
	line-height:20px;
}

article #BOX3{
	width:100%;
}


article #BOX3 h2{
	width:100%;
	height:0;
	padding-bottom:7.32%;
	background-image:url(images/logo_tablet.png);
	background-size:cover;
	text-indent:-8888px
}

article #BOX4{
	width:100%;
}
article #BOX4 p{
	text-align:center;
	color:#666;
	font-size:9px;
	line-height:70px;
}

}

/* 以下為 桌機電腦 */
 
@media screen and (min-width: 1025px) {
body{
	background-color: #FFF;
}

header{
	width: 100%;
}

header h1{	
	width:100%;
	height:0;
	padding-bottom:90.28%;
	background-image:url(images/banner_pc.png);
	background-size:cover;
	text-indent:-9999px;
}

nav #SIGN{
	width:170px;
	height:45px;
	line-height:45px;
	background: #f85032; /* Old browsers */
background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* IE10+ */
background: linear-gradient(to bottom, #f85032 0%,#f16f5c 50%,#f6290c 51%,#f02f17 71%,#e73827 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* IE6-8 */
	
	text-align:center;
	margin: 20px 0px 0px 75%;
	box-shadow:2px 2px 3px #999;
	text-shadow:1px 1px 2px #900;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
}

nav #SIGN:hover{
	background: #f3c5bd; /* Old browsers */
background: -moz-linear-gradient(top,  #f3c5bd 0%, #e86c57 50%, #ea2803 51%, #ff6600 75%, #c72200 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3c5bd), color-stop(50%,#e86c57), color-stop(51%,#ea2803), color-stop(75%,#ff6600), color-stop(100%,#c72200)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* IE10+ */
background: linear-gradient(to bottom,  #f3c5bd 0%,#e86c57 50%,#ea2803 51%,#ff6600 75%,#c72200 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3c5bd', endColorstr='#c72200',GradientType=0 ); /* IE6-8 */

}

nav #SIGN a{
	text-decoration:none;
	color:#FFF;
	font-size:18px;
	letter-spacing:1px;
	font-weight:bold;
}

article{
	width:90%;
	margin:auto;
}

article #BOX1{
	width:100%;
}

article #BOX1 h1{
	font-size:18px;
	text-align:left;
	line-height:30px;
	color:#ba2737;
}

article #BOX1 ul {
	width:100%;
	height:30px;
	list-style:none;
	line-height:30px;
	font-size:1em;
	margin:1px 0px 1px 0px;
}
article #BOX1 ul li{
	float:left;
}

article #BOX1 ul:nth-child(2){
	text-align:center;
	color:#FFF;
	background: #d24b5a; /* Old browsers */
background: -moz-linear-gradient(top,  #d24b5a 0%, #ba2737 51%, #f18e99 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* IE10+ */
background: linear-gradient(to bottom,  #d24b5a 0%,#ba2737 51%,#f18e99 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d24b5a', endColorstr='#f18e99',GradientType=0 ); /* IE6-8 */


	line-height:30px;
	border-radius:5px 5px 0px 0px;
}
article #BOX1 ul:nth-child(odd){
	background-color:#DBDBDB;
	line-height:30px;
}
article #BOX1 ul:nth-child(even){
	background-color:#E6E6E6;
	line-height:30px;
}
article #BOX1 ul li:nth-child(1){
	width:20%;
	text-align:center;
}
article #BOX1 ul li:nth-child(2){
	width:50%;
}
article #BOX1 ul li:nth-child(3){
	width:30%;
	text-align:center;
}
article #BOX1 ul:last-child{
	border-radius:0px 0px 5px 5px;
}

article #BOX2{
	width:100%;
	margin-top:20px;
}

article #BOX2 p{
	color:#666;
	font-size:12px;
	text-align:left;
	line-height:20px;
}

article #BOX3{
	width:100%;
}


article #BOX3 h2{
	width:100%;
	height:0;
	padding-bottom:3.47%;
	background-image:url(images/logo_pc.png);
	background-size:cover;
	text-indent:-8888px
}

article #BOX4{
	width:100%;
}
article #BOX4 p{
	text-align:center;
	color:#666;
	font-size:10px;
	line-height:70px;
}

}