/****************import google font****************/
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);

/****************normalize.css v7.0.0****************/
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:0;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}

/****************design start****************/
body{
	background: #000;
}
body, button, input{
	font-family: "PingFangTC-Regular", arial,"Noto Sans TC", "微軟正黑體","sans-serif";
	font-weight: bold;
	font-size: 33px;
	color: #fff;
	line-height: 1.4;
}
a{
	color: #fff;
	text-decoration: none;
}
.body2{
	padding-bottom: 40px;
	background: url(img/body-bg.jpg) 50% 0% no-repeat;
	background-size: cover;
}
.body2 > .wrap{
	width: 706px;
	margin: 0 auto;
	position: relative;
}
.header{
	padding-top: 40px;
	margin-bottom: 30px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.header img{
	width: 266px;
	margin-bottom: 18px;
}
.main{
	margin-bottom: 30px;
}
.slogan{
	text-shadow: 0 2px 5px black, 0 2px 5px black, 0 2px 5px black, 0 2px 5px black, 0 2px 5px black;
}
.video-wrap{
	position: relative;
}
.video-wrap.modal:before{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(img/video-modal.png) 0% 0%;
}
.pseudo-img{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.btn-play{
	width: 120px;
	height: 120px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	background: url(img/btn-play.png) 50% 50%;
	background-size: cover;
	cursor: pointer;
}
.btn-play:hover{
	margin-top: -3px;
}
#theVideo{
	width: 100%;
	outline: 1px solid rgba(255,255,255,.3);
	display: block;
}
#theVideo::-webkit-media-controls-overlay-play-button{
	display: none;
}
.key-display{
	width: 100%;
	position: absolute;
	left: 50%;
	top: 450px;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
}
.key-display > div{
	width: 186px;
	height: 120px;
	margin: 0 8px;
	position: relative;
	box-shadow: 0 0 7px black, 0 0 7px black;
	background-color: #b5b5b5;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.key-display > div:before{
	content: "";
	width: 100%;
	height: 100%;
	border: 3px solid #e0e0e0;
	border-radius: 8px;
	box-sizing: border-box;
	box-shadow: 0 0 7px black inset;
	position: absolute;
	left: 0;
	top: 0;
}
.key-display > div.wrong:after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: url(img/wrong.png) 50% 50% no-repeat;
	background-size: 100% 100%;
	border-radius: 8px;
}
.key-display > div > span{
	width: 84px;
	height: 84px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
	display: block;
}
div[key=X] > span{
	background-image: url(img/key-display-x.png);
}
div[key=Z] > span{
	background-image: url(img/key-display-z.png);
}
.correct > span{
	animation: zoomIn .3s 1 linear;
}
.correct[key=X] > span{
	background-image: url(img/key-display-x-on.png);
}
.correct[key=Z] > span{
	background-image: url(img/key-display-z-on.png);
}
@keyframes zoomIn {
	0%   {transform: scale(6);}
	100% {transform: scale(1);}
}
.keyboard{
	width: 100%;
	position: absolute;
	left: 50%;
	top: 330px;
	transform: translateX(-50%);
	display: flex;
	justify-content: center;
	align-items: baseline;
	display: none;
}
.keyboard [class^=key-]{
	width: 55px;
	height: 55px;
	margin: 0 8px;
    position: relative;
	bottom: -2px;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: cover;
}
.key-X{
	order: 3;
	background-image: url(img/keyboard-x.png);
}
.key-Z{
	order: 2;
	background-image: url(img/keyboard-z.png);
}
.wording1{
	order: 1;
}
.wording2{
	order: 4;
}
[class^=wording]{
	text-shadow: 0 2px 5px black, 0 2px 5px black, 0 2px 5px black, 0 2px 5px black, 0 2px 5px black;
}
.links{
	width: 800px;
	margin-left: -50px;
	display: flex;
	justify-content: center;
}
.links a{
	padding: 14px 32px;
	margin: 0 16px;
	font-size: 20px;
	background: #222;
	border-left: 14px solid #e5004f;
	border-radius: 10px;
	box-shadow: 0 0 0 3px black;
}
.links a:hover{
	background: #585858;
}

/****************Media Query****************/
@media screen and (max-width: 750px) {
	html, body, .body2{
		height: 100%;
	}
	body, button, input{
		font-size: 42px;
	}
	.body2{
		padding: 0;
		background: url(img/body-bg-m.jpg) 50% 0% no-repeat;
	}
	.body2 > .wrap{
		width: auto;
	}
	.header{
		padding-top: 54px;
		margin-bottom: 38px;
	}
	.header img {
		margin-bottom: 30px;
	}
	.slogan{
		text-shadow: 0 3px 8px black, 0 3px 8px black, 0 3px 8px black, 0 3px 8px black, 0 3px 8px black;
		text-align: center;
	}
	.main {
		margin-bottom: 40px;
	}
	.key-display {
		top: 420px;
	}
	.key-display > div{
		height: 186px;
		margin: 0 16px;
	}
	.key-display > div > span {
		width: 110px;
		height: 110px;
	}
	.keyboard{
		width: auto;
		padding: 310px 0 40px 0;
		position: fixed;
		bottom: -450px;
		left: 20px;
		top: auto;
		right: 20px;
		border: 15px solid #828282;
		border-bottom: none;
		box-shadow: 0 0 18px 2px black inset;
		border-radius: 50px 50px 0 0;
		transform: none;
		background: url(img/keyboard-bg.gif) 0% 0%;
		transition: bottom .5s linear;
	}
	.keyboard.active{
		bottom: 0px;
	}
	.keyboard [class^=key-]{
		width: 170px;
		height: 170px;
		position: absolute;
		top: 86px;
	}
	.key-Z{
		left: 110px;
	}
	.key-X{
		right: 110px;
	}
	.fold{
		width: 90px;
		height: 90px;
		position: absolute;
		top: 10px;
		right: 10px;
		background: url(img/toggle-fold.png) 50% 50% no-repeat;
		background-size: 76px 55px;
	}
	.expand{
		width: 100px;
		height: 100px;
		position: fixed;
		right: 10px;
		bottom: 0px;
		background: url(img/toggle-expand.png) 50% 100% no-repeat;
		background-size: 96px 100px;
		display: block;
		/* opacity: 1;
		transition: opacity .5s linear; */
	}
	.keyboard.active .expand{
		display: none;
		/* opacity: 0; */
	}
	.links{
		width: auto;
		margin: 0;
		align-items: center;
		flex-direction: column;
	}
	.links a{
		width: 420px;
		padding: 20px 10px 20px 0;
		margin: 0 0 40px 0;
		font-size: 50px;
		text-align: center;
		border-left-width: 25px;
	}
}
.page-loading{
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 9999;
	background: #000;
	display: flex;
	justify-content: center;
	align-items: center;
}