@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);
html, body{background-color:#fff;font-family:'Noto Sans TC', Arial, Helvetica, Microsoft JhengHei, Heiti TC, sans-serif;color:#231f20;font-size:1.5vmin;line-height:1.5;text-align:center;position:relative;z-index:-9999;}
h1{font-size:4vmin;line-height:1.2;font-weight:bold;padding-bottom:3vmin;border-bottom:.5vmin solid #231f20;}
@media screen and (max-width: 768px) , screen and (max-height: 768px) {
h1{font-size:6vmin;}
}
@media screen and (max-width: 480px) , screen and (max-height: 480px) {
h1{font-size:8vmin;}
}
h4{font-size:3vmin;line-height:1.5;font-weight:bold;}
@media screen and (max-width: 768px) , screen and (max-height: 768px) {
h4{font-size:4vmin;}
}
@media screen and (max-width: 480px) , screen and (max-height: 480px) {
h4{font-size:5vmin;}
}
p{font-size:2vmin;transition-duration:0s;}
@media screen and (max-width: 768px) , screen and (max-height: 768px) {
p{font-size:3vmin;}
}
@media screen and (max-width: 480px) , screen and (max-height: 480px) {
p{font-size:4vmin;}
}
label {font-weight:400;}
.remark-block{font-size:0.6em;display:block;}
input{max-width:100%;}
 /* unvisited link */
a,a:link,a:visited,a:hover,a:active{color:inherit;}
a{text-decoration:underline;}
a:hover{text-decoration:none;}
input[type=checkbox]{margin-right:3px; vertical-align:middle; margin-top:0;}
.container,.wrapper{display:flex;align-items:center;justify-content:center;}
.container{width:auto; min-height:100vh;padding-right:0;padding-left:0;}
.inEdge .container,

.wrapper{width:100vmin;height:100vmin;position:relative;transition-duration:0s;}
.container .content{position:relative;padding-right:5vmin;padding-left:5vmin;max-width:100vw;transition-duration:0s;}

.btn{text-decoration:none;padding:1.5vmin 2vmin 2vmin;
border-radius:1vh;position:relative;z-index:3;max-width:400px;margin: 0 auto;transition-duration:0s;
/*display:block;width:100%;*/
background-color:#c9120c;
background: -webkit-linear-gradient(#e54f3c, #c9120c);
background: -o-linear-gradient(#e54f3c, #c9120c);
background: -moz-linear-gradient(#e54f3c, #c9120c);
background: linear-gradient(#e54f3c, #c9120c);}
.btn,.btn:link,.btn:visited,.btn:hover,.btn:active{
	box-shadow:0 2px 6px rgba(0,0,0,0.7);
}
@media screen and (max-width: 768px) , screen and (max-height: 768px) {
.btn{padding:2vmin 2.5vmin 2.5vmin;}
}
@media screen and (max-width: 480px) , screen and (max-height: 480px) {
.btn{padding:2.5vmin 3vmin 3vmin;}
}
.btn.hover,
.btn:hover{
background-color:#e2130d;
background: -webkit-linear-gradient(#f4604e, #e2130d);
background: -o-linear-gradient(#f4604e, #e2130d);
background: -moz-linear-gradient(#f4604e, #e2130d);
background: linear-gradient(#f4604e, #e2130d);
}
.btn h1{border-bottom:0;padding-bottom:0;letter-spacing:.5vh;margin-left:.5vh;color:#fff;}
.btn.share-facebook{padding:2vmin 2vmin 1.5vmin;
background-color:#0b1e52;
background-image:url(../images/icon-facebookBtn.png) , -webkit-linear-gradient(#476fba, #0b1e52);
background-image:url(../images/icon-facebookBtn.png) , -o-linear-gradient(#476fba, #0b1e52);
background-image:url(../images/icon-facebookBtn.png) , -moz-linear-gradient(#476fba, #0b1e52);
background-image:url(../images/icon-facebookBtn.png) , linear-gradient(#476fba, #0b1e52);
background-repeat:no-repeat;
background-position:left center;
background-size:contain;}
.btn.share-facebook.hover,
.btn.share-facebook:hover{
background-color:#192e6a;
background-image:url(../images/icon-facebookBtn.png) , -webkit-linear-gradient(#6b87ba, #192e6a);
background-image:url(../images/icon-facebookBtn.png) , -o-linear-gradient(#6b87ba, #192e6a);
background-image:url(../images/icon-facebookBtn.png) , -moz-linear-gradient(#6b87ba, #192e6a);
background-image:url(../images/icon-facebookBtn.png) , linear-gradient(#6b87ba, #192e6a);}
.btn.share-facebook h1{font-size:3.2vmin;line-height:1.5;letter-spacing:.3vh;margin-left:5vmin;}
.btn.share-facebook h1 .english{letter-spacing:.1vh;transition-duration:0s;}
@media screen and (max-width: 768px) , screen and (max-height: 768px) {
.btn.share-facebook{padding:2.5vmin 2.5vmin 2vmin;}
.btn.share-facebook h1{font-size:4.8vmin;margin-left:6vmin;}
}
@media screen and (max-width: 480px) , screen and (max-height: 480px) {
.btn.share-facebook{padding:3vmin 3vmin 2.5vmin;}
.btn.share-facebook h1{font-size:6.4vmin;margin-left:7vmin;}
}

body {margin: 0; overflow: hidden;}
#container {position: relative; width: 100vw; height: 100vh; margin: 0;}
canvas {position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; margin: auto; cursor: none;}

#header{position:absolute;top:0;left:0;width:100%;}
#header .logo{width:100%;margin:0 auto;padding:8vh 10% .5vh;transition-duration:0s;display:none;}
#share #header .logo.common,
#form #header .logo.common,
#intro #header .logo.common{display:block;}
#index #header .logo.index{display:block;}

.content .btn.pedal{position:absolute;border-radius:1vh;padding:2vh;margin-top:-1vh;width:auto;}
.content .btn.pedal.left{left:5vmin;}
.content .btn.pedal.right{right:5vmin;}
.content .btn.pedal .iconPedal{height:8vh;}

#index .content .terms-popup{font-size: 2.4vh;}
#index .content .terms-popup,
#index .content .terms-popup a{color:#fff;}


.logo {     
	width:15vw;
	position: absolute;
	top:0;
	z-index:9999;
	left:50%;
	transform: translateX(-50%);
}

.logo img{width:100%; max-width:none;}


#index .container{ transition-duration:0s; background:url(../images/index-bg-ref.jpg) center center; background-size:cover; background-repeat: no-repeat}


#index .play {
	position: absolute;
	transition: none;
	width:9.4vw;
	top:52.1vw;
	left:43vw;
	margin-top: calc(0px - 50vw + 50vh);
}

#index .play * {
	left:0;
	position: absolute;
}


#index .play img:nth-child(1) {
	display: none;
	z-index: 6;
}

#index .play:hover img:nth-child(1) {
	display: initial;
 }

@keyframes play-1 {
	0% { opacity: 1; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes play-1 {
	0% { opacity: 1; }
	20% { opacity: 0; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-2 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes play-2 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 0; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-3 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes play-3 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 0; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-4 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes play-4 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 0; }
	100% { opacity: 0; }
}


@keyframes play-5 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}

@-webkit-keyframes play-5 {
	0% { opacity: 1; }
	20% { opacity: 1; }
	40% { opacity: 1; }
	60% { opacity: 1; }
	80% { opacity: 1; }
	100% { opacity: 1; }
}

#index .play img:nth-child(2) {
	z-index: 5;
	animation: play-1 800ms infinite step-end;
	-webkit-animation: play-1 800ms infinite step-end;
	transition: none;
}

#index .play img:nth-child(3) {
	z-index: 4;
	animation: play-2 800ms infinite step-end;
	-webkit-animation: play-2 800ms infinite step-end;
	transition: none;
}

#index .play img:nth-child(4) {
	z-index: 3;
	animation: play-3 800ms infinite step-end;
	-webkit-animation: play-3 800ms infinite step-end;
	transition: none;
}

#index .play img:nth-child(5) {
	z-index: 2;
	animation: play-4 800ms infinite step-end;
	-webkit-animation: play-4 800ms infinite step-end;
	transition: none;
}

#index .play img:nth-child(6) {
	z-index: 1;
	animation: play-5 800ms infinite step-end;
	-webkit-animation: play-5 800ms infinite step-end;
	transition: none;
}

#game .guide {
	z-index: 2;
	position: absolute;
	width: 100vw;
	height: 100vh;
	transition-duration:0s; background:url(../images/game-bg.jpg) center center; background-size:cover; background-repeat: no-repeat;
	box-shadow:inset 0 0 0 2000px rgba(0,0,0,0.6);
}

@keyframes sprite {
	from { background-position: 0 0%; }
	to { background-position: 0 100%; }
  }


#game .guide > div {
	width: 40vw;
	left: 50%;
	top: 50%;
    position: relative;
	transform: translate(-50%,-50%);
}

#game .guide .sprite {
	background-image: url("../images/howToPlay_desk_sprite.png");
	width: 40vw;
	height: 40vw;
    background-size: 100%;
	background-size: 100%;
	animation: sprite 1s steps(15) infinite;
	top: 12vh;
}

#game.isMobile .guide .sprite {
	background-image: url("../images/howToPlay_mob_sprite.png");
}
#game .guide p.mobi {
	display:none;
}
#game.isMobile .guide p.mobi {
	display:block;
}
#game.isMobile .guide p.desk {
	display:none;
}

#game .guide p {
	font-size: 2em;
	color: #fff;
	font-weight: 700;
}

#game #container {
	opacity: 1;
}

#game .control img {
	position: absolute;
	width: 20vmin;
	height: 20vmin;
}

#game .mobi {
	display: none;
}


#greeting .container{ transition-duration:0s; background:url(../images/greeting-bg.jpg) center center; background-size:cover; background-repeat: no-repeat}

#greeting .logo {     
	position: absolute;
	top: 0; 
	margin: auto 0;
}

#greeting .play {
	position: absolute;
	width: 10.2vw;
	top: 54.3vw;
	left: 46.5vw;
	margin-top: calc(0px - 50vw + 50vh);
	cursor: pointer;
	transition: none;
}

#greeting .play * {
	position: absolute;
}

#greeting .play img:nth-child(1) {
	display: none;
	z-index: 6;
	transition: none;
}

#greeting .play:hover img:nth-child(1) {
	display: initial;
	transition: none;
 }


@keyframes play-6 {
	0% { opacity: 1; }
	25% { opacity: 0; }
	50% { opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes play-6 {
	0% { opacity: 1; }
	25% { opacity: 0; }
	50% { opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-7 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@-webkit-keyframes play-7 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 0; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-8 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-8 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 0; }
	100% { opacity: 0; }
}

@keyframes play-9 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 1; }

}

@-webkit-keyframes play-9 {
	0% { opacity: 1; }
	25% { opacity: 1; }
	50% { opacity: 1; }
	75% { opacity: 1; }
	100% { opacity: 1; }
}

 #greeting .play img:nth-child(2) {
	z-index: 5;
	animation: play-6 600ms infinite step-end;
	-webkit-animation: play-6 600ms infinite step-end;
	transition: none;
}

#greeting .play img:nth-child(3) {
	z-index: 4;
	animation: play-7 600ms infinite step-end;
	-webkit-animation: play-7 600ms infinite step-end;
	transition: none;
 }

 #greeting .play img:nth-child(4) {
	z-index: 3;
	animation: play-8 600ms infinite step-end;
	-webkit-animation: play-8 600ms infinite step-end;
	transition: none;
 }

 #greeting .play img:nth-child(5) {
	z-index: 2;
	animation: play-9 600ms infinite step-end;
	-webkit-animation: play-9 600ms infinite step-end;
	transition: none;
 }
 

@media screen and (orientation:portrait) {
	.logo {     
		width:15vh;
	}

	.errorBox,
	.tooSmallScreen,
	#ie .ieBox { background-size: auto 100vh; }

	#index .play {
		width:9.4vh;
		top:52.1vh;
		left:43vh;
		margin-top: 0;
		margin-left: calc(0px + 50vw - 50vh);
	}

	#greeting .play {
		width: 10.2vh;
		top: 54.3vh;
		left: 46.5vh;
		margin-top: 0;
		margin-left: calc(0px + 50vw - 50vh);
	}

	#game .guide { background-size: auto 100vh; }

	#game .guide > div {
		width: 60vh;
	}

	#game .guide .sprite {
		width: 60vh;
		height: 60vh;
	}

	#game .guide p {
		font-size: 2.4em;
	}
}
.errorBox .browser-icon { max-width:100%;}
.errorBox,
.SmallScreen{display:none;background: url("../images/bg.jpg") center center no-repeat;background-size:cover;height:100vh;width:100vw;position:relative;
	transition-duration: 0s;
}
.errorBox{display:block;}
.errorBox h2{ transition-duration: 0s; }
.errorBox > div { position:absolute; top:18%;left:50%; transform: translateX(-50%); width:80%;}
.errorBox img.mainImage,
.SmallScreen img {position:absolute;}
.SmallScreen > div{position:absolute;display:none;}
.errorBox h2,
.SmallScreen h2{color:#bc2c0a;font-weight:700;}
.errorBox p,
.SmallScreen p{color:#51332b;font-weight:500;}
.errorBox p{font-size:2vmin;line-height:6vmin;}
.errorBox a,
.SmallScreen a{color:#fff;}
.errorBox .browserLink{display:inline-block;}
.errorBox a img { margin-top: -2px; vertical-align: middle; margin-right:.5vmin;}
.errorBox a { color: #51332b; font-size:2vmin;line-height:5vmin; text-decoration:none;}
.errorBox .browserLink { 
	display: inline-block; 
	background-color: #fff8e0; 
	box-shadow: 0px .5vmin #eae0b8; 
	padding: .5vmin 3vmin; 
	border-radius: 512px;
	transition-duration: 0s;
	margin: 6px 6px;
	line-height: 4vmin;
}
.errorBox a img { width: 3vmin; height: 3vmin; margin-top:-.3vmin;}


@media screen and (max-width: 240px) , screen and (max-height: 240px), screen and (min-aspect-ratio: 3/1) , screen and (max-aspect-ratio: 1/2) {
	.fancybox-container,
	.container{opacity:0; pointer-events:none; display:none;}
	.errorBox,
	.SmallScreen{display:block;}
}

	.errorBox img.mainImage{height:100vh;top:0;left:50%;
			transform: translateX(-50%);
			transition-duration: 0s;
	}
	.errorBox h2 { font-size: 4vh; line-height: 8vh; margin-top: 12px; }
@media screen and (orientation:portrait) {
	.errorBox img.mainImage{height:auto;width:100vw;top:50%;left:0;
				transform: translateY(-50%);
	}
	.errorBox h2 { font-size: 6vw; line-height: 8vw; }

}
@media screen and (min-aspect-ratio: 3/1) { 
	.logo{width:40vh;}
	.SmallScreen h2{font-size: 10vh; line-height: 17.5vh; }
	.SmallScreen p,
	.SmallScreen a{font-size:4vh;line-height:7vh}
	.SmallScreen img {height:100vh;top:0;left:50%;
				transform: translateX(-50%);
	}
	.SmallScreen > div{width:80%;top:18%;left:50%;
				transform: translateX(-50%);
	}
	.errorBox > .EnlargeWidth,
	.SmallScreen > .EnlargeWidth {display:none;}
	.errorBox > .EnlargeHeight,
	.SmallScreen > .EnlargeHeight {display:none;}
	.errorBox > .EnlargeHScale,
	.SmallScreen > .EnlargeHScale {display:none;}
	.errorBox > .EnlargeVScale,
	.SmallScreen > .EnlargeVScale {display:block;}
}
@media screen and (max-aspect-ratio: 1/2) {
	.logo {width:40vw;}
	.SmallScreen h2{font-size:12.5vw;line-height:20vw;}
	.SmallScreen p,
	.SmallScreen a{font-size:4vw;line-height:8vw;}
	.SmallScreen img {width:100vw;top:50%;left:0;
				transform: translateY(-50%);
	}
	.errorBox > div,
	.SmallScreen > div{width:75%;top:calc(45% - 36vw);left:12.5%;}
	.errorBox > div {transform: translateX(0);}
	.errorBox > .EnlargeWidth,
	.SmallScreen > .EnlargeWidth {display:none;}
	.errorBox > .EnlargeHeight,
	.SmallScreen > .EnlargeHeight {display:none;}
	.errorBox > .EnlargeVScale,
	.SmallScreen > .EnlargeVScale {display:none;}
	.errorBox > .EnlargeHScale,
	.SmallScreen > .EnlargeHScale {display:block;}
}
@media screen and (max-height: 240px) {
	.logo{width:40vh;}

	.errorBox h2 { font-size: 5vh; line-height: 10vh; }
	.errorBox a img { width: 4vh; height: auto; }

	.SmallScreen h2{font-size:10vh;line-height:17.5vh}
	.SmallScreen p,
	.SmallScreen a{font-size:4vh;line-height:7vh}
	.errorBox img.mainImage,
	.SmallScreen img {height:100vh;top:0;left:50%;
				transform: translateX(-50%);
	}
	.errorBox > div,
	.SmallScreen > div{width:80%;top:18%;left:50%;
				transform: translateX(-50%);
	}

	.errorBox > .EnlargeVScale,
	.SmallScreen > .EnlargeVScale {display:none;}
	.errorBox > .EnlargeHScale,
	.SmallScreen > .EnlargeHScale {display:none;}
	.errorBox > .EnlargeWidth,
	.SmallScreen > .EnlargeWidth{display:none;}
	.errorBox > .EnlargeHeight,
	.SmallScreen > .EnlargeHeight {display:block;}
}

@media screen and (max-width: 240px) {
	.logo {width:40vw;}
	.SmallScreen h2{font-size:12.5vw;line-height:20vw;}
	.SmallScreen p,
	.SmallScreen a{font-size:4vw;line-height:8vw;}
	.errorBox img.mainImage,
	.SmallScreen img {width:100vw;top:50%;left:0;
				transform: translateY(-50%);
	}
	.errorBox > div,
	.SmallScreen > div{width:75%;top:calc(45% - 36vw);left:12.5%;
				transform: none;
	}
	.errorBox > .EnlargeVScale,
	.SmallScreen > .EnlargeVScale {display:none;}
	.errorBox > .EnlargeHScale,
	.SmallScreen > .EnlargeHScale {display:none;}
	.errorBox > .EnlargeHeight,
	.SmallScreen > .EnlargeHeight {display:none;}
	.errorBox > .EnlargeWidth,
	.SmallScreen > .EnlargeWidth{display:block;}
}

.controlBar {
    width: 100%;
    max-width: 177.78vh;
    margin: 0 auto;
	position: absolute;
	top:0;
	left:0;
	z-index:3;
}
.controlBar>a {
    position: absolute;
    top: 1vw;
    width: 7%;
    display: inline-block;
    z-index: 2;
}
@media screen and (min-aspect-ratio: 16/9) {
.controlBar>a {
    top: 2vh;
}
}
.controlBar #controlBar-music {
    left: 2%;
}
.controlBar>a>img {
    width: 100%;
    height: 100%;
}
.controlBar #controlBar-music.on .btn-music {
    display: inline-block;
}
.controlBar #controlBar-music.on .btn-mute {
    display: none;
}
.controlBar #controlBar-music.off .btn-music {
    display: none;
}
.controlBar #controlBar-music.off .btn-mute {
    display: inline-block;
}