@charset "utf-8";
/* CSS Document */
* {margin:0px; padding:0px; border:none; list-style:none; text-decoration:none;}

body {background-image:url(../images/bigbg2.jpg); background-position:top center; background-repeat:no-repeat; background-size:contain;}
.cleardiv {clear:both;}

#layout {width:1200px; margin:auto;}

header {height:400px; position:relative;}
#slogan {width:550px; height:350px; position:absolute; margin-top:20px; margin-left:325px; /*background:url(../images/blackbg.png) repeat;*/ color:white; text-align:center;}
.scg01 {margin-top:50px;}
.scg02 {margin-top:-20px;}

#mbcontent {display:none;}

#content {height:220px; position:relative;}
#content h1 {display:block; height:40px; font-size:19.5pt; line-height:30pt; letter-spacing:3px; font-family:微軟正黑體; color:white; background:#333; text-align:center;}
#content div {display:inline-block; width:350px; height:160px; margin:15px 0px 10px 35px; background:none;}
.imgg {height:100%;}
.main {overflow:hidden; position:relative;}
.pp {display:block; width:100%; position:absolute; top:20%; z-index:10; font-size:15pt; letter-spacing:2px; font-weight:bold; font-family:微軟正黑體; color:white; text-align:center; padding:0px;}
.sub {display:block; position:absolute; z-index:20; top:0px; left:0px; width:350px; height:160px; background:url(../images/blackbg.png) repeat; }
.sub p {position:absolute; top:30px; color:white; text-align:center; font-family:微軟正黑體; font-size:13.5pt; letter-spacing:1px; line-height:19.5pt;}

#product {padding-bottom:20px;}
#product h1 {display:block; height:40px; font-size:19.5pt; line-height:30pt; letter-spacing:3px; font-family:微軟正黑體; color:white; background:black; text-align:center;}
#product a {display:inline-block; width:350px; height:280px; margin:30px 0px 0px 35px;}
#product a:hover {opacity:0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; filter:alpha(opacity=80); box-shadow:0px 0px 5px #000; -moz-box-shadow:0px 0px 5px #000; -webkit-box-shadow:0px 0px 5px #000; filter:progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=120, Strength=3);}
#product a img {width:100%; overflow:hidden;}


@media screen and (min-width: 769px) and (max-width: 1024px) {
	body {background-size:120%;}
	#layout {width:980px;}
	#slogan {margin-left:215px;}
	#content {height:200px;}
	#content div {width:300px; height:180px; margin:15px 0px 10px 17px; background:none;}
	.sub {width:300px; height:214px;}
	.sub p {letter-spacing:1px;}
	#product {padding-bottom:20px;}
	#product a {width:300px; height:240px; margin:30px 0px 0px 17px;}
	#product a img {width:100%; overflow:hidden;}
}


@media screen and (max-width: 768px) {
	body {background-size:130%;}
	#layout {width:100%;}
	header {height:auto;}
	#slogan {width:80%; height:70%; margin-top:4%; margin-left:10%; position:relative;}
	#slogan img {width:70%;}
	.scg01 {margin-top:6%;}
	#content {display:none;}
	#mbcontent {display:block; width:100%; margin-bottom:20px;}
	#mbcontent div {display:inline-block; vertical-align:top; width:30%; padding:1%; background:url(../images/blackbg.png) repeat;}
	#mbcontent .mbtitle {display:block; background:black; padding:8px 0px; color:white; font-size:14px; font-family:微軟正黑體; font-weight:bold;}
	#mbcontent p {font-size:14px; line-height:18px; color:white; font-family:微軟正黑體;}
	/*#content {height:150px; margin-top:0px;}
	#content h1 {height:auto; font-size:15pt; line-height:21pt;}
	#content div {display:inline-block; width:33.33%; height:150px; margin-left:-3px; margin-top:0px; margin-bottom:0px; background:none;}
	.imgg {margin-left:-10%;}
	.pp {width:100%; height:auto;}
	.sub {width:100%; height:100%;}
	.sub p {font-size:11pt; line-height:13pt; letter-spacing:0px;}*/
	#product {padding-bottom:20px;}
	#product h1 {height:28px; font-size:15pt; line-height:21pt;}
	#product a {display:block; float:left; width:50%; height:auto; margin:auto;}
	#product a img {position:relative; width:100%; overflow:hidden; margin-bottom:-2%;}
}

@media screen and (max-width: 480px) {
	body {background-size:250%;}
	header {height:auto;}
	#slogan {width:100%; margin-top:7%; margin-left:0%; position:relative;}
	.scg01 {margin-top:8%;}
	/*#content {height:auto; margin-top:0px;}
	#content div {display:block; width:100%; height:100px; margin:auto; background:none;}
	.pp {top:0px; left:17%; width:65%;}
	.sub p {top:10%;}*/
	.imgg {width:100%; height:auto; margin-left:0px; margin-top:-15%;}
	#product {height:auto;}
	#product a {height:auto;}
}

@media screen and (max-width: 360px) {
	header {height:auto;}
	#slogan {height:90%;}
	#mbcontent div {display:block; width:98%; margin-bottom:10px;}
	/*#content div {height:90px;}
	.sub p {top:10%;}*/
	#product a {width:100%;}
}