@charset "utf-8";

body			{ background: #def; margin: 20px; font-family: 'Century Gothic', 'Lucida Grande', 'Microsoft JhengHei', '微軟正黑體', Tahoma, PMingLiu; font-size: 12px; line-height: 18px; color: #444; }
a				{ color: #09f; }
a:hover			{ color: #008; }
.cls			{ clear: both; }
.main			{ width: 1000px; margin: 0 auto; }
.line			{ margin: 0 0 10px; height: 5px; line-height: 1px; font-size: 1px; border-radius: 5px; box-shadow: 2px 2px 5px #ccc;
	background: -ms-linear-gradient(left, #f00 0%, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00 100%);
	background: -moz-linear-gradient(left, #f00 0%, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00 100%);
	background: -o-linear-gradient(left, #f00 0%, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00 100%);
	background: -webkit-linear-gradient(left, #f00 0%, #f0f 15%, #00f 33%, #0ff 49%, #0f0 67%, #ff0 84%, #f00 100%);
}
h1				{ margin: 0 0 5px; padding: 0 10px; font-size: 36px; line-height: 48px; color: #309; }
h1 span			{ display: inline-block; margin: 0 5px 0 0; -ms-transform: rotate(-5deg); -moz-transform: rotate(-5deg); -o-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); }
h1 span.pure	{ -ms-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); font-size: 48px; color: #fee; text-shadow: 2px 2px 8px #f44, -2px -2px 8px #f44, 2px -2px 8px #f44, -2px 2px 8px #f44; }
h1 span.css		{ color: #efe; text-shadow: 2px 2px 8px #484, -2px -2px 8px #484, 2px -2px 8px #484, -2px 2px 8px #484; }
h1 span.design	{ color: #def; text-shadow: 2px 2px 8px #44f, -2px -2px 8px #44f, 2px -2px 8px #44f, -2px 2px 8px #44f; }
h1 span.eng		{ color: #ffe; text-shadow: 2px 2px 8px #884, -2px -2px 8px #884, 2px -2px 8px #884, -2px 2px 8px #884; font-size: 24px; -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); }
.menu			{ position: absolute; }
.menu ul		{ margin: 0; padding: 0; width: 1000px; list-style-type: none; }
.menu li		{ margin: 0 -158px 0 20px; padding: 0; float: left; z-index: 1; }
.menu a			{ margin: 0; width: 200px; display: block; -ms-transform: skew(5deg,5deg); -moz-transform: skew(5deg,5deg); -o-transform: skew(5deg,5deg); -webkit-transform: skew(5deg,5deg); text-shadow: 2px 2px 1px #ffe; -ms-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; }
.menu a span		{ -moz-transform: translate(0,0); display: block; text-shadow: 2px 2px 5px #fff; -ms-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; }
.menu a span.star	{ position: absolute; width: 20px; opacity: 0; z-index: 2; }
.menu a span.label	{ width: 100px; z-index: 1; font-size: 12px; color: #09f; }
.menu img			{ margin: 5px 0 0; padding: 1px; border: 5px solid #fff; background: #ccc; display: block; border-radius: 8px; box-shadow: 5px 5px 5px #ccc; width: 200px; height: 150px; -ms-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; }
.menu li span.info			{ padding: 5px 0 0; text-align: center; display: block; width: 200px; opacity: 0; margin: -80px 0 0; -ms-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; -webkit-transition: all 1s; }
.menu li:hover a			{ margin: -80px 0 0; padding: 5px; text-decoration: none; width: 640px; -ms-transform: skew(0deg,0deg); -moz-transform: skew(0deg,0deg); -o-transform: skew(0deg,0deg); -webkit-transform: skew(0deg,0deg); }
.menu li:hover img			{ width: 640px; height: 480px; }
.menu li:hover span.info	{ margin: 0; display: block; white-space: nowrap; width: 640px; opacity: 1; color: #060; text-shadow: 2px 2px 5px #888; }
.menu li:hover a span.star	{ font-size: 84px; color: #ffc; text-shadow: 2px 2px 5px #888; opacity: 100; -ms-transform: translate(-40px,65px) rotate(-15deg); -moz-transform: translate(-40px,65px) rotate(-15deg); -o-transform: translate(-40px,65px) rotate(-15deg); -webkit-transform: translate(-40px,65px) rotate(-15deg); }
.menu li:hover a span.label	{ background: #c88; padding: 5px 30px; border-top: 2px solid #ffc; border-bottom: 2px solid #ffc; box-shadow: 2px 2px 5px #ccc; text-shadow: 2px 2px 5px #888; font-weight: bold; color: #ffc; font-size: 15px; -ms-transform: translate(-3px,40px) rotate(-10deg); -moz-transform: translate(-3px,40px) rotate(-10deg); -o-transform: translate(-3px,40px) rotate(-10deg); -webkit-transform: translate(-3px,40px) rotate(-10deg); }
.text			{ padding: 0 15px 15px; text-shadow: 2px 2px 1px #fff; }
.support		{ margin: 250px auto 0; padding: 10px; background: #fff; text-align: center; border-radius: 15px; box-shadow: 5px 5px 5px #ccc; text-shadow: 2px 2px 5px #888; width: 640px; color: #060; }