* {
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
body {
	background: #fff url(../images/bg.gif) center top no-repeat;
	color: #0f0f0f;
	font-family: "微軟正黑體", "微软雅黑", "Microsoft JhengHei", "新細明體", "PMingLiu", AppleGothic, Dotum, Lucida Grande, Verdana Sana-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.7857;
	letter-spacing: 0.075em;
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}
html, body, h1, p, li, span {
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
p {
	text-align: justify;
	text-justify: inter-word;
}
a, a:active, a:hover, a:focus, a:visited { text-decoration:none;}
.text-blue { color: #005BAC;}
.text-tel { color:#E86500;}
.text-line { color:#00c300;}

h1, h2, h3, h4 { font-weight: 700;}
img {
	display: block;
	width: 100% \9;
	max-width: 100%;
	height: auto;
}
ul { 
	padding: 0;
	list-style: none;
}

/* start preloader */
.preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background: none repeat scroll 0 0 #fff;
}
.sk-spinner-rotating-plane.sk-spinner {
    width: 30px;
    height: 30px;
    background:url(../images/logo-icon.png) center center no-repeat;
    margin: 0 auto;
    -webkit-animation: sk-rotatePlane 1.2s infinite ease-in-out;
    animation: sk-rotatePlane 1.2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotatePlane {
  0% {
	  -webkit-transform: perspective(120px) rotateY(0deg);
	  transform: perspective(120px) rotateY(0deg);}
  50% {
	  -webkit-transform: perspective(120px) rotateY(-180.1deg);
	  transform: perspective(120px) rotateY(-180.1deg);}
  100% {
	  -webkit-transform: perspective(120px) rotateY(-180deg);
	  transform: perspective(120px) rotateY(-180deg);}
}

@keyframes sk-rotatePlane {
  0% {
	  -webkit-transform: perspective(120px) rotateY(0deg);
	  transform: perspective(120px) rotateY(0deg);}
  50% {
	  -webkit-transform: perspective(120px) rotateY(-180.1deg);
	  transform: perspective(120px) rotateY(-180.1deg);}
  100% {
	  -webkit-transform: perspective(120px) rotateY(-180deg);
	  transform: perspective(120px) rotateY(-180deg);}
}

/* BRANDBar */
#logo-bar {
	width:980px;
	height:56px;
	background: url(../images/logo.gif) 0 0 no-repeat;
	margin:0 auto;		
}
.submenu {
	width:320px;
	height:20px;
	font-size:12px;
	letter-spacing:1px;
	margin-top:30px;
	float:right;
	text-align:center;
}
.submenu a { color:#fff;}
.submenu > a:hover { border-bottom:1px solid #E6F6F9;}
.submenu span {	font-size:10px;	margin:0 5px 0;	color:#135d9b;}

/* Header */
header {
	background: url(../images/home.jpg) center no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	padding-top: 2%;
	padding-bottom: 20%;
	height: calc(100vh - 56px);
	-webkit-min-height:96%;
	overflow: hidden;
}
header { position: relative;}
header h1 {
	color: #061730;
	font-size: 500%;
	font-weight: 900;
	text-align: center;
}
.words { position: relative;}
.words .come-wrapper {
	position: relative;
	display: block;
	padding-top: 0.2em;
	padding-right: 0.05em;
	padding-bottom: 0.1em;
	overflow: hidden;
}
.words .come { color: #fff; display: inline-block; line-height: 1em;}
.words .text-wrapper {
	position: relative;
	display: inline-block;
	padding-top: 0.1em;
	padding-right: 0.05em;
	padding-bottom: 0.15em;
}
.words .letter { color:#ffa800;display: inline-block;line-height: 1em;}
.words .letters>span:first-child { color:#fff600;}
.words .letters>span:nth-child(2) { color:#fff600;}
.words .line {
	opacity: 0;
	position: absolute;
	left: 0;
	height: 2px;
	width: 100%;
	background-color: #fff;
	transform-origin: 0 0;
}
.words .line1 { top: 0;}
.words .line2 { bottom: 0;}

header h2 {
	color: #fff;
	font-size: 230%;
	font-weight: 800;
	margin-left: 35%;
	margin-top: 20px;
}
header h2>span {
	background-color: rgba(255,255,255,0.65);
	border-radius: 30px;
	color: #061730;
	padding: 5px 15px;
	padding-right: 4em;
	margin-left: 10px;
	font-size: 75%;
	font-weight: 600;
}
#Dyson{
	width: 9vw;
	height: 52vh;
	position: absolute;
	bottom: -3vh;
	right: 26vw;
	z-index: 1;
}
#iPhone{
	width: 18vw;
	height: 48vh;
	position: absolute;
	bottom: -2vh;
	right: 32vw;
	z-index: 2;
}
#Coupon{
	width: 48vw;
	height: 48vh;
	position: absolute;
	bottom: -12vh;
	left: 26%;
	z-index: 3;
}
#Airplane{
	width: 60vw;
	height: 42vh;
	position: absolute;
	bottom: 8vh;
	left: 13vw;
	z-index: 4;
}
header nav {
	position: absolute;
	bottom: 0;
	left: -15px;
	z-index: 10;
}
header nav a {
	display: inline-block;
	-webkit-transform: skewX(20deg);
	-moz-transform: skewX(20deg);
	-ms-transform: skewX(20deg);
	transform: skewX(20deg);
	padding: 10px 3.5em;
	font-size: 135%;
	font-weight: 600;
}
header nav a>span {
	display: block;
	-webkit-transform: skewX(-20deg);
	-moz-transform: skewX(-20deg);
	-ms-transform: skewX(-20deg);
	transform: skewX(-20deg);
}
header nav a:first-child{ background-color: #eb6100;}
header nav a:last-child{ background-color: #f39800; margin-left: -10px;}
header nav a:link, header nav a:visited { color: #191917;}
header nav a:hover, header nav a:focus { color: #fff;}
header nav a>span>i { color: #fff; margin-right: 5px;}

/* Intro */
#intro {
	padding-top: 50px;
	padding-bottom: 30px;
	padding-left: 2em;
	font-size: 190%;
}
#intro h3 {
	padding: 10px 25px;
	margin-top: 0;
	margin-bottom: 0;
	font-size: 105%;
	text-align: center;
}
.product h3 { color: #5e2ad3; border-right:6px solid #003567;line-height: 3em;}
.date h3 { color: #1a40e3; border-right:6px solid #f39800;line-height: 1.8em;}

#intro p {
	color: #181d23;
	padding: 10px 25px;
	letter-spacing: 0.2em;
	font-weight: 600;
	margin-bottom: 0;
}
.product p>span { display: block; color: #ea134b; line-height: 1.15em;}
.date p { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";}


/* Act */
#act {
	padding-top: 100px;
	padding-bottom: 80px;
	font-size: 200%;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.act_wrap {
	width: 100%;
	margin: 0 auto;
	height: 600px;
	min-height: 300px;
	position: relative;
	z-index: 1;
}
.act_wrap::before, .act_wrap::after {
	display: block;
	content: "";
	position: absolute;
	top:0;
	left: 0;
	right: 0;
	width: 130%;
	height: 100%;
	margin: 0 0 0 -15%;
	transform-origin: center top;
}
.act_wrap::before {
	background-color: #eee;
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	transform: rotate(3deg);
	z-index: 3;
}
.act_wrap::after {
	background-color: #eb6100;
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	-o-transform: rotate(-2deg);
	transform: rotate(-2deg);
	z-index: 2;
}
.act_area {width: 70%;position: relative;margin: 0 auto;z-index: 5;}
.act_contents {
	width: 100%;
	padding-top: 80px;
	position: relative;
	text-align: center;
}
#act h1 {margin: 0 auto;position: relative;z-index: 6;}
#act h1::after, #award h1::after {
	display: block;
	content: "";
	position: absolute;
	height:0;
	width:0;
}
#act h1::after {
	border:30px solid #005bac;
	border-color:#005bac transparent  transparent transparent;
	left: 48.5%;
}
#act h1>span, #award h1>span {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
	color:#fff;
	padding: 12px 50px;
}
#act h1>span {background-color: #005bac;}

section h2 {font-size: 250%; font-weight: 300; margin-bottom: 0.5em;}

.coupon {width: 35%;display: inline-block;}
.info {width: 50%;display: inline-block; margin-left: 5%;}
.info h2 {color:#eb6100;}
.info p {font-weight: 600;}
.info p>span {color:#AF102E; display:block; font-size: 90%;}

/* Plus */
#plus {
	padding-top: 30px;
	padding-bottom: 30px;
	font-size: 200%;
	font-weight: 800;
}
#plus h2 { color:#145beb;}
#plus p { line-height: 1.6em;}

#plus h3 {
	border-bottom: 4px solid #eb6100;
	color:#cd128d;
	font-size: 160%;
	padding-bottom: 10px;
	margin-bottom: 1em;
	text-align: center;
}
.panel-heading img { margin: 0 auto;}
.panel-body p { font-size: 60%; text-align: center;}
.panel-body p>span { display: block; font-size: 125%; margin-top: 6px;}

/* Award */
#award {
	padding-top: 80px;
	padding-bottom: 80px;
	font-size: 200%;
	text-align: center;
}
#award h1 {margin: 1em auto 2em;position: relative;}
#award h1::after {
	border:30px solid #e5004f;
	border-color:#e5004f transparent  transparent transparent;
	left: 47.5%;
}
#award h1>span {background-color: #e5004f;}

#AwardTab li { text-align: center;}
#AwardTab li a {
	text-decoration: none;
	border:2px solid #f39800;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
	display: block;
	padding: 15px 5px;
	font-size: 95%;
}
#AwardTab li a:hover, #AwardTab li a:focus { color:#212121; border:2px solid #212121;}
#AwardTab li a.active { background-color: #212121; border:2px solid #212121; color: #fff;}

#AwardTabContent .tab-pane {padding: 30px 20px;}
#AwardTabContent h4 { border-bottom: 5px solid #212121; text-align: left;padding: 10px 20px;}
.winner { width: 80%; margin: 10px auto;}
.winner span {padding: 3px 20px;}
.winner p { text-align: center;padding: 10px 20px;}
.coupons li { display: inline-block; width: 45%; margin: 10px 2%;}
.coupons li:nth-child(3), .coupons li:nth-child(4), .coupons li:nth-child(7), .coupons li:nth-child(8){background-color: #eee;}

/* Notic */
#notic {
	padding-top: 20px;
	padding-bottom: 50px;
	font-size: 125%;
}
.remark {
	background-color: #eee;
	padding: 1em 3.5em;
	position: relative;
}
.remark, .remark h4>span {
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
	border-radius: 20px;
}
.remark h4 {
	text-align: center;
	position: absolute;
	top:-18px;
}
.remark h4>span {
	background-color: #fff;
	color:#ee063c;
	padding: 10px 30px;
}
.remark ol li {
	color:#000;
	line-height: 1.35em;
	padding-top: 0.8em;
}

.notic {
	padding: 0.5em 1em;
	width: 90%;
	margin: 1em auto;
}
.notic h5 {
	border-bottom: 1px solid #b3b3b3;
	color: #181d23;
	font-size: 95%;
	text-align: left;
	padding: 0 20px 10px;
}
.notic ol { font-size: 80%;}
.notic ol li {
	color: #0f1113;
	text-align: justify;
	text-justify: inter-word;
}

/* start footer */
footer {
	padding-bottom: 20px;
	background-color: #005BAC;
	border-top:6px solid #eb6100;
	color: #fff;
}
footer p { padding: 0.5em 6em 0;}
footer p:last-child {
	text-align: center;
	margin: 0 auto;
}
footer a:hover { text-decoration: underline;}
/* end footer */

#go-to-top a {
	text-decoration:none;
	display: none;
	position: fixed;
	bottom: 5px;
	right: 5px;	
	text-align: center;
	line-height: 60px;
	margin: 0 20px 20px;
	background:url(../images/ui.totop.png) no-repeat left top;
	width: 51px;
	height: 51px;
	transition: .3s;
    -webkit-transition: .3s;
       -moz-transition: .3s;
         -o-transition: .3s;
        -ms-transition: .3s;
	z-index: 100;
}
#go-to-top a:hover {
	background: #00a7dd;
	color: #fff;
	background:url(../images/ui.totop.png) no-repeat left -51px;
}

@media screen and (max-width: 1440px) {
	header h1 { font-size: 460%;}
	header h2 {	font-size: 210%;margin-left: 38%;}
	
	header nav a {	padding: 10px 3em;font-size: 125%;}
	.act_area {width: 80%;}
}
@media screen and (max-width: 1360px) {
	header h1 { font-size: 430%;}
	header h2 {	font-size: 200%;margin-left: 38%;}
	
	footer p:first-child {
		text-align: left;
		text-align: justify;
		text-justify: inter-word;
	}
}
@media screen and (max-width: 1280px) {
	header h1 { font-size: 500%;}
	header h2 {	font-size: 220%;margin-left: 38%;}
}
@media screen and (max-width: 1024px) {
	body { font-size: 15px;}
	
	#Dyson{	width: 118px;height: 430px;bottom: -30px;right: 12%;}
	#iPhone{width: 235px;height: 400px;bottom: -20px;right: 23%;}
	#Coupon{width: 430px;height: 381px;bottom: -100px;left: 19%;}
	#Airplane{width: 600px;height: 327px;left: 2%;}
	
	.act_wrap {	height: 500px;}
	.act_area {width: 90%;}
	section h2 {font-size: 200%;}
	
	footer p { padding: 0.5em 3em 0;}
	footer p.copyright > span { display: block;}
}
@media screen and (max-width: 991px) {
	.submenu { display: none;}
	header {height: calc(100vh - 86px);}
	
	header h2 {	margin-left: 32%;}
	#Dyson{	right: 3%;}
	#iPhone{right: 17%;}
	#Coupon{bottom: -50px;left: 10%;}
	#Airplane{bottom:18%;left: 1%;}
	
	#intro {padding-left: 0;}
	.product h3 { border-right:none;border-bottom:3px solid #003567;line-height: 1.8em;}
	.date h3 {  border-right:none;border-bottom:3px solid #f39800;}
	
	#act, #award {padding-top: 50px;padding-bottom: 50px;}
	#notic { padding-bottom: 10px;}
	
	#act, #plus, #award {font-size: 165%;}
	.act_wrap {	height: 450px;}
	.act_area {width: 100%;}
	
	.winner span {padding: 3px 10px;}
	.coupons li { font-size: 80%;}
		
	footer { padding-top: 20px;}
}
@media screen and ( max-width: 767px ) {
	body { font-size: 14px;}
	
	header {
		background: url(../images/home_m.jpg) center no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		padding-top: 5%;
	}
	
	header h1 { font-size: 450%;}
	header h2 {	font-size: 220%;margin-left: 25%;}
	
	#Dyson,#iPhone,#Coupon,#Airplane{display: none;}
	#intro, #act, #plus, #award {font-size: 160%;}
	
	section h1 {font-size:150%;}
	#act h1::after, #award h1::after {left: 45%;}
	
	.act_wrap {	height:600px;}
	.coupon {width: 45%;display: block; margin: 0 auto;}
	.coupon img { margin: 0 auto;}
	.info {width: 100%;display: block; margin-left: 0;}
    
    #plus p {padding: 0 15px;}
	
	#AwardTab li a, .remark{
		-webkit-border-radius:0;
		-moz-border-radius:0;
		-o-border-radius:0;
		border-radius:0;
	}
	#AwardTab li:first-child a{
		-webkit-border-radius:10px 10px 0 0;
		-moz-border-radius:10px 10px 0 0;
		-o-border-radius:10px 10px 0 0;
		border-radius:10px 10px 0 0;
	}
	#AwardTab li:last-child a{
		-webkit-border-radius:0 0 10px 10px;
		-moz-border-radius:0 0 10px 10px;
		-o-border-radius:0 0 10px 10px;
		border-radius:0 0 10px 10px;
		border-top:none;
	}
	
	.panel-body p { font-size: 90%;}
	.panel-body p>span { display: inline-block; font-size: 100%; margin-top: 0; margin-left: 10px;}
	
	.coupons li { display: block; width: 98%; font-size: 100%; margin: 10px 2%;}
	.coupons li:nth-child(3), .coupons li:nth-child(4), .coupons li:nth-child(7), .coupons li:nth-child(8){background-color: #fff;}
	.coupons li:nth-child(even){background-color: #eee;}
	
	footer { padding-top: 10px;}
	footer p { padding: 0.5em 1em 0;}
}
@media screen and ( max-width: 600px ) {

}
@media screen and ( max-width: 480px ) {
	body { font-size: 13px;}
	#logo-bar {
		background:#009be4 url(../images/topbar.png) 0 0 no-repeat;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		width:100%;
		height:70px;
	}
	header {height: calc(100vh - 100px);}
	
	header h1 { font-size: 380%;}
	header h2 {	font-size: 185%;}
	
	.product p>span {letter-spacing: 0.1em;}
	
	#act h1::after, #award h1::after {left: 43%;}
	.act_wrap {	height:550px;}
}
@media screen and ( max-width: 420px ) {
	body { font-size: 12px;}
	#logo-bar {	height:56px;}
	header {height: calc(100vh - 86px);}
	
	header h1 { font-size: 375%;}
	header h2>span {padding-right: 3em;}
	header nav a {padding: 10px 2em;font-size: 110%; white-space: nowrap;}
	
	.act_wrap {	height:500px;}
	.winner { width: 100%;}
}
@media screen and ( max-width: 375px ) {
	#logo-bar { height:52px;}
	header {height: calc(100vh - 82px);}
	
	header h1 { font-size: 330%;}
	header h2 {	margin-left: 20%;}
	
	#award {font-size: 135%;}
}
@media screen and ( max-width: 360px ){
	body { font-size: 11px;}
	#award h4 { font-size: 110%;}
}
@media screen and ( max-width: 320px ){
	#logo-bar { height:48px;}
	header {height: calc(100vh - 78px);}
	header h1 { font-size: 300%;}
	header h2 {	margin-left: 15%;}
	header h2>span {padding-right: 2em;}
	.act_wrap {	height:450px;}
	#act h1::after, #award h1::after {left: 40%;}
}