.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none; /* Non-prefixed version, currently
								  supported by Chrome, Edge, Opera and Firefox */
}
html{
	min-width: 616px;
	overflow-x: hidden;
	overflow-y: scroll;
	//min-height: 900px;
	height: 100%;
	background-color: #ffecd4;
}
html.portrait {
	-webkit-transform: rotate(0deg);
	-webkit-transform-origin: 50% 50%;
	transform: rotate(90deg);
	transform-origin: 50% 50%;
}
html.portrait-onready {
	/*-webkit-transform: rotate(90deg);
	-webkit-transform-origin: 50% 50%;
	transform: rotate(90deg);
	transform-origin: 50% 50%;*/
}
body{
	position: relative;
	margin: 0;
	width: 100%;
	height: 100%;
	//min-height: 900px;
	overflow-x: hidden;
	overflow-y: visible;
	transform-origin:  center center;
	/*padding-left: 20px;
	padding-right: 20px;*/
	box-sizing: border-box;
	/*background-image: url(layout/2.1.jpg);
	background-position-x: -38px;
	opacity: 0.5;*/
	background-repeat: no-repeat;
	font-family: "Microsoft Jhenghei";
}
.music{
	position: absolute;
	bottom: 22px;
	left: 45px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #e6be7a;
	cursor: pointer;
	background-image: url('asset/music-off.png');
	background-position: center;
	background-repeat: no-repeat;
}
.music.playing{
	background-image: url('asset/music-on.png');
}
.container{
}
.background{
	//opacity: 0.5;
	background-image: url('asset/bg.jpg');
	background-position: top center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	//max-width: 1904px;
	margin-left: auto;
	margin-right: auto;
	background-repeat: no-repeat;
	//background-size: 2100px;
	background-size: cover;
	display: block;
	margin-left: auto;
	margin-right: auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
/*@media(max-width: 1199px){
	.background{
		background-image: url('asset/t/bg.jpg');
	}
}
@media(max-width: 767px){
	.background{
		background-image: url('asset/m/bg.jpg');
	}
}*/
.container{
	max-width: 618px;
	margin-left: auto;
	margin-right: auto;
	height: 100%;
	//min-height: 900px;
	position: relative;
	//background-color: red;
	//max-height: 900px;
	overflow-x: hidden;
	overflow-y: hidden;
}
.container .start::after,.container .end::after{
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 17px;
	height: 100%;
	background-image: url(asset/frame-left.png);
	background-repeat: repeat-y;
	display: block;
	transform: scaleX(-1);
	z-index: 3;
}

.container .start::before, .container .end::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 17px;
	height: 100%;
	background-image: url(asset/frame-left.png);
	background-repeat: repeat-y;
	display: block;
	z-index: 3;
}

.start, .play, .end{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 1s;
	//opacity: 0;
}
.play{
	//display: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s;
}
.start_background{
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 618px;
	height: 100%;
}
.element{
	position: absolute;
	z-index: 1;
}
.element.frame_left_top{
	left: -29px;
	top: -10px;
}
.element.frame_right_top{
	animation-name: right_top_in;
	animation-duration: 3s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
}
@keyframes right_top_in{
	0%{
		right:-204px;
		top: -154px;
		transform: rotate(-20deg);
	}
	85%{
		right:-38px;
		top: -13px;
	}
	100%{
		right:-38px;
		top: -13px;
		transform: rotate(0deg);
	}
}
.element.frame_right_top_clone{
	right: -1px;
	top: 12px;
	border: 2px dashed #d99745;
	z-index: 0;
	border-radius: 10px;
	width: 133px;
	height: 197px;
	transform: rotate(-19deg);
}
.element.frame_right_top.clone img{
	opacity: 0;
}
.element.frame_bottom_1{
	bottom:9px;
	left: -275px;
	animation-name: bottom_1_in;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
	animation-delay: 0.2s;
}
@keyframes bottom_1_in{
	0%{
		bottom:9px;
		left: -275px;
		transform: rotate(20deg);
	}
	85%{
		bottom: 117px;
		left: -63px;
	}
	100%{
		bottom: 117px;
		left: -63px;
		transform: rotate(0deg);
	}
}
.element.frame_bottom_1_clone{
	bottom: 144px;
	left: -69px;
	border: 2px dashed #d99745;
	z-index: 0;
	border-radius: 10px;
	width: 267px;
	height: 160px;
	transform: rotate(-10deg);
}
.element.frame_bottom_2{
	bottom:-300px;
	left: 150px;
	animation-name: bottom_2_in;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
	animation-delay: 0.5s;
}
@keyframes bottom_2_in{
	0%{
		bottom:-300px;
		left: 150px;
		transform: rotate(25deg);
	}
	85%{
		bottom: 55px;
		left: 164px;
	}
	100%{
		bottom: 55px;
		left: 164px;
		transform: rotate(0deg);
	}
}
.element.frame_bottom_2_clone{
	bottom: 92px;
	left: 191px;
	border: 2px dashed #d99745;
	z-index: 0;
	border-radius: 10px;
	width: 238px;
	height: 161px;
	transform: rotate(14deg);
}
.element.frame_bottom_3{
	bottom: 213px;
	left: 277px;
}
.element.frame_bottom_4{
	bottom: 170px;
	left: 600px;
	animation-name: bottom_4_in;
	animation-duration: 1.75s;
	animation-fill-mode: forwards;
	//animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
	animation-delay: 1.25s;
}
@keyframes bottom_4_in{
	0%{
		bottom: 170px;
		left: 600px;
		transform: rotate(-10deg);
	}
	85%{
		bottom: 140px;
		left: 383px;
	}
	100%{
		bottom: 140px;
		left: 383px;
		transform: rotate(0deg);
	}
}
.element.frame_bottom_4_clone{
	bottom: 158px;
	left: 399px;
	border: 2px dashed #d99745;
	z-index: 0;
	border-radius: 10px;
	width: 238px;
	height: 161px;
	transform: rotate(2.5deg);
}
.start_stage{
	position: relative;
	z-index: 2;
}
.start_stage .start_title{
	display: table;
	position: relative;
	margin-top: 216px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
@media(max-width: 767px){
	.start_stage .start_title img{
		width: 224px;
		height: auto;
	}
}
.start_stage .start_content{
	text-align: center;
	font-size: 19px;
	font-weight: bold;
	line-height: 1.55;
	letter-spacing: 0.1px;
	margin-top: 29px;
	width: 100%;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
}
@media(max-width: 767px){
	.start_stage .start_content{
		font-size: 3vw;
	}
}
.start_stage .start_content p{
	margin: 0;
}
.start_stage .start_mode_title{
	font-size: 19px;
	font-weight: bold;
	margin-top: 31px;
	text-align: center;
}
.start_stage .start_mode_container{
	margin-top: 16px;
	text-align: center;
}
.start_stage .start_mode_container .start_mode{
	background-image: url('asset/button-bg.png');
	background-repeat: no-repeat;
	width: 143px;
	height: 53px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	font-size: 19px;
	font-weight: bold;
	color: #ffffff;
	vertical-align: middle;
	margin: 0 15px;
	cursor: pointer;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none;
}

@media(max-width: 1199px){
	.start_stage .start_mode_container .start_mode{
		background-image: url('asset/button-bg_m.png');
		background-size: contain;
	}
}


.play_head{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 48px;
}
.play .play_head .score{
	position: absolute;
	left: 48px;
	top: 12px;
	display: inline-block;
}
.play .play_head .score span{
	font-size: 19px;
	font-weight: bold;
	color: #ffffff;
	display: inline-block;
	vertical-align: middle;
	margin-right: 23px;
}
.play .play_head .score p{
	color: #ffbb6f;
	font-size: 19px;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
}

.play .play_head .time{
	position: absolute;
	right: 47px;
	top: 12px;
	display: inline-block;
}
.play .play_head .time span{
	font-size: 19px;
	font-weight: bold;
	color: #ffffff;
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
}
.play .play_head .time p{
	color: #ffbb6f;
	font-size: 19px;
	font-weight: bold;
	display: inline-block;
	vertical-align: middle;
	margin: 0;
	font-family: "Microsoft Jhenghei";
}
.play_info{
	position: absolute;
	top: 48px;
	left: 0;
	width: 100%;
	height: 48px;
}
.play_info .type{
	font-size: 31.29px;
	font-weight: bold;
	position: absolute;
	top: 24px;
	left: 46px;
}

.play_info .countdown{
	position: absolute;
	top: 1px;
	left: calc(50% - 10px);
	opacity: 0;
	transition: opacity 0.5s;
}
.play_info .countdown span{
	font-size: 60px;
	font-weight: bold;
	color: #a82e2e;
	display: inline-block;
	vertical-align: middle;
	min-width: 48px;
}
.play_info .countdown p{
	font-size: 19px;
	font-weight: bold;
	color: #a82e2e;
	display: inline-block;
	vertical-align: middle;
	padding-top: 9px;
}

.play_info .remain{
	font-size: 19px;
	font-weight: bold;
	position: absolute;
	top: 32px;
	right: 48px;
}
.play_stage{
	position: relative;
	font-size: 0;
	//perspective: 50cm;
	height: 100%;
	transform-origin: center;
	width: 618px;
	left: 50%;
	transform: translateX(-50%);
}
.play_stage .card{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: top;
	width: 160px;
	height: 160px;
	background-color: rgba(255, 255, 255, 1);
	box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.42);
	box-sizing: border-box;
	border-color: transparent;
	border-width: 4px;
	border-style: solid;
	border-collapse: separate;
	border-radius: 14px;
	cursor: pointer;
	z-index: 3;
	overflow: hidden;
	font-size: 0;
	bottom: unset;
	flex-flow: column;
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	 -khtml-user-select: none; /* Konqueror HTML */
	   -moz-user-select: none; /* Old versions of Firefox */
		-ms-user-select: none; /* Internet Explorer/Edge */
			user-select: none;
	  -webkit-transform-style: preserve-3d;
			  transform-style: preserve-3d;
	/*  -webkit-transform: rotateY(0deg) rotateX(0deg)  rotateZ(0deg) ;
			  transform: rotateY(0deg) rotateX(0deg)  rotateZ(0deg) ;*/
	-webkit-transform: rotateY(180deg) rotateX(0deg)  rotateZ(0deg) ;
			  transform: rotateY(180deg) rotateX(0deg)  rotateZ(0deg) ;
	border-width: 0px;
	animation-duration: 1.5s;
	/*animation-name: flip-card;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-play-state: running;
	animation-timing-function: linear;*/
}
.play_stage .card img{
	visibility: hidden;
}
.play_stage .card.matched{
	transition: border-color 1s, background-color 1s;
	border-color: rgba(123, 235, 41, 1) !important;
	background-color: rgba(123, 235, 41, 1) !important;
	animation-name: correctFlip;
}

@keyframes correctFlip{
	0%{
		box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.42);
	}
	50%{
		box-shadow:0px 0px 13px 0px rgba(123, 235, 41, 0.8);
	}
	100%{
		box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.42);
	}
}
@keyframes warnFlip{
	0%{
		box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.42);
	}
	50%{
		box-shadow:0px 0px 20px 0px rgba(201,0,24, 1);
	}
	100%{
		box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.42);
	}
}
@keyframes flip-card{
	0%{
	  border-width: 0px;
	  -webkit-transform: rotateY(180deg) rotateX(0deg)  rotateZ(0deg) ;
			  transform: rotateY(180deg) rotateX(0deg)  rotateZ(0deg) ;
	}
	50%{
	  -webkit-transform: rotateY(90deg) rotateX(0deg)  rotateZ(0deg) ;
			  transform: rotateY(90deg) rotateX(0deg)  rotateZ(0deg) ;
		border-width: 0px;
	}
	51%{
		border-width: 4px;
	}
	100%{
	-webkit-transform: rotateY(0deg) rotateX(0deg)  rotateZ(0deg) ;
			  transform: rotateY(0deg) rotateX(0deg)  rotateZ(0deg) ;
	}
}

@keyframes flip-card_back{
	0%{
		visibility: visible;
	}
	50%{
		visibility: hidden;
	}
	100%{
		visibility: hidden;
	}
}

/*.play_stage .card.hide{
	border-width: 0px;
	animation-play-state: paused;
	-webkit-transform: rotateY(180deg) rotateX(0deg)  rotateZ(0deg) ;
			  transform: rotateY(180deg) rotateX(0deg)  rotateZ(0deg) ;
}*/
/*.play_stage .card:not(.hide) .back{
	animation-play-state: running;
}
.play_stage .card.hide.rev{
	animation-play-state: running;
	animation-direction: reverse;
}
.play_stage .card.hide.rev .back{
	animation-play-state: running;
	animation-direction: reverse;
}*/
.play_stage .card .back{
	background-color: #a82e2e;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
	background-position: center;
	background-image: url('asset/card_pattern.png');
	background-repeat: no-repeat;
	transform: scaleX(-1);
	/*animation-name: flip-card_back;
	animation-fill-mode: forwards;
	animation-duration: 1s;
	animation-play-state:paused;
	animation-timing-function: linear;*/
}
.play_stage .card > p{
	color: #d99745;
	font-size: 22px;
	font-weight: bold;
	margin: 0;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	background-color: #ffffff;
}
.play_stage .card > img{
	position: relative;
	z-index: 2;
	width: calc(100% - 1px);
	height: auto;
}
#card_1{
	position: absolute;
	top: 188px;
	left: 40px;
}
#card_2{
	position: absolute;
	top: 188px;
	left: 220px;
}
#card_3{
	position: absolute;
	top: 188px;
	left: 400px;
}
#card_4{
	position: absolute;
	top: 368px;
	left: 40px;
}
#card_5{
	position: absolute;
	top: 368px;
	left: 220px;
}
#card_6{
	position: absolute;
	top: 368px;
	left: 400px;
}

#card_7{
	position: absolute;
	top: 548px;
	left: 40px;
}

#card_8{
	position: absolute;
	top: 548px;
	left: 220px;
}

#card_9{
	position: absolute;
	top: 548px;
	left: 400px;
}


.end{
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1s;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
}
.end .end_title{
	display: table;
	margin-left: auto;
	margin-right: auto;
	margin-top: 186px;
}
@media(max-width: 767px){
	.end .end_title img{
		width: 224px;
		height: auto;
	}
}
.end_content{
	font-size: 40px;
	font-weight: bold;
	color: #a82e2e;
	margin-top: 31px;
}
.end_result{
	background-image: url('asset/marks-bg.png');
	display: flex;
	width: 100%;
	max-width: 382px;
	height: 220px;
	justify-content: center;
	align-items: center;
	margin-left: auto;
	margin-right: auto;
	margin-top: 42px;
	flex-flow: column;
	box-shadow: 0px 0px 23px 0px rgba(0, 0, 0, 0.36);
}
.end_result .result_title{
	font-size: 19px;
	font-weight: bold;
	margin-bottom: 7px;
}
.end_result .result_score{
	font-size: 50px;
	font-weight: bold;
	position: relative;
	top: 3px;
}
.restart_but{
	display: table;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	cursor: pointer;
}
.result_fb{
	display: table;
	margin-left: auto;
	margin-right: auto;
	margin-top: 24px;
	cursor: pointer;
}
.result_extra{
	font-size: 19px;
	font-weight: bold;
	margin-top: 24px;
}