@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: DigitalDismay;
    src: url(Digital_Dismay.otf);
}

body{
  font-family: "Microsoft JhengHei", "微軟正黑體", Helvetica, Arial, Verdana;
  color: #333333;
}

#tutorial-memorygame{
  margin: 0 15px 50px;
}

.text-style1{
  font-size: 14pt;
  color: #56605f;
  font-weight: normal;
  text-shadow: 1px 1px 1px #fff;
  margin: 0;
  line-height: 24pt;
}

.mgcard-show img {
	width: 100%;
	height: 100%;
}

.home-description-container {
	position: relative;
}

.home-description-container img {
	max-width: 100%;
}

.home-description {
	position: absolute;
    bottom: 2%;
    width: 100%;
    padding: 0 8%;
    text-align: right;
}

.home-description p {
    color: #333333;
    font-size: 14px;
	font-weight: bold;
}

.home-content-container {
	margin: 0 45px;
}

.home-block {
	float: left;
    display: inline-block;
    width: 55%;
    position: relative;
}

.home-block-img {
	 width: 45%;
}

.form_group {
	width: 100%;
	display: inline-block;
	margin-bottom: 10px;
}

.form_group div {
	float: left;
}

.form_group .form_label {
	width: 200px;
    font-weight: 600;
    font-size: 14px;
    padding-top: 2px;
}

.form_group .form_label span.required {
	font-weight: 500;
	font-size: 12px;
}

.form_group .form_input input {
	padding: 5px;
	outline: none;
	width: 310px;
	border: 1px solid #AAAAAA;
}

.form_group .form_remark span {
	margin-left: 10px;
	font-weight: 600;
	font-size: 12px;
}

.required-remark {
	margin-left: 0;
}

.mobile_no_code {
	width: 50px !important;
}

.mobile_no {
	width: 257px !important;
}

.game_rule h3 {
	text-decoration: underline;
	color: #333333;
}

.terms {
	border: 1px solid #AAAAAA;
}

.terms h4 {
	margin: 0;
	padding: 5px 15px;
	cursor: pointer;
}

.terms .terms_content ol {
	padding: 5px 15px 0 30px;
    margin-top: 5px;
}

.agreeTermsLabel {
	padding-top: 20px;
}

.agreeTermsLabel label {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
	font-weight: 500;
}

.agreeTermsLabel input {
    width: 20px;
    height: 20px;
    padding: 0;
    margin:0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
    *overflow: hidden;
}

.arrow_down {
	float: right;
}

.arrow_down img {
	width: 20px !important;
    padding-top: 5px;
    padding-left: 5px;
}

.arrow_up {
	float: right;
}

.arrow_up img {
	width: 20px !important;
    padding-top: 5px;
    padding-left: 5px;
}

.confirm_start {
    width: 100%;
    position: relative;
    margin: 20px 0;
    display: inline-block;
}

.btn_confrim_start {
	border: 0;
	background: #333333;
	color: #fff;
	box-shadow: none;
	padding: 5px 20px;
	width: 200px;
	outline: 0;
}

.content-description {
	font-size: 14px;
    margin: 25px 45px 30px;
    display: inline-block;
}

.desktop-display {
	display: block;
}

.mobile-display {
	display: none;
}

.lightbox {
    display: none;
}

.game-result, .overtime, .overGamePerDay {
	width: 600px;
}

.game-result img,
.overtime img,
.overGamePerDay img {
	width: 270px;
	float: left;
	margin-right: 20px;
}

.game-result-content,
.overtime-content,
.overGamePerDay-content {
	float: left;
}

.game-result-content h1,
.overtime-content h1,
.overGamePerDay-content h1 {
	font-weight: bolder;
    font-size: 25px;
    margin: 50px 0 0;
}

.game-result-content h2,
.overtime-content h2,
.overGamePerDay-content h2 {
	font-weight: bold;
    margin: 0;
    font-size: 17px;
}

.game-result-content p,
.overtime-content p,
.overGamePerDay-content p {
	font-size: 14px;
    font-weight: bold;
}

.game-result-content p {
	margin: 15% 0 10px;
}

.overtime-content p {
	margin: 15% 0 10px;
}

.overGamePerDay-content p {
	margin: 15% 0 10px;
}

span#gameFinishedTime {
    font-size: 25px;
    font-weight: bold;
    padding-bottom: 10px;
    display: inline-block;
}

.btn-confirm-close {
	background: #333333;
	color: #fff;
	padding: 5px 10px;
	border: 0;
}


#gameTimer {
	text-align: center;
}

.timer-values {
	font-family: "DigitalDismay", "Microsoft JhengHei", "微軟正黑體", Helvetica, Arial, Verdana;
	font-size: 46px;
}

#game_rule {
	width: 600px;
	height: 400px;
	max-height: 400px;
	overflow: hidden;
}

.game_rule_head {
    background: #C7C7C7;
    padding: 2px 15px;
    font-weight: bold;
}

.game_rule_content {
	overflow-y: auto;
    height: 375px;
}

.game_rule_content ol {
	padding-left: 30px;
}

.home .featherlight .featherlight-close-icon {
	background: none;
}

.mobile-scroll {
    display: none;
}

@media only screen and (max-width: 768px) { 
	#header, .content, #footer {
		width: 100%;
	}
	
	.content #main {
		width: 100%;
	}
	
	.home-content-container {
		margin: 0 45px;
	}
	
	.home-block-img img {
		width: 100%;
	}
	
	.home-block-img {
		width: 100%;
		margin-bottom: 20px;
	}
	
	.home-block {
		width: 100%;
	}
}

@media only screen and (max-width: 767px) {
	.content {
		padding: 0;
	}
	
	#tutorial-memorygame{
	  	width: 100%;
	}
	
	.desktop-display {
		display: none;
	}
	
	.mobile-display {
		display: block;
	}
	
	.home-description {
		bottom: 10%;
	}
	
	.home-description h1 {
		font-size: 17px !important;
		font-weight: bold !important;
	}
	
	.home-description p {
		font-size: 12px;
		margin: 0;
		font-weight: bold;
	}
	
	.content-description {
		font-size: 14px;
		margin: 25px 15px 30px;
	}
	
	.home-block {
		float: none;
		display: inline-block;
		width: 100%;
		position: relative;
		padding: 0;
	}
	
	.home-block img { 
		width: 100%;
	}
	
	.form_group div {
		width: 100%;
	}
	
	.form_group .form_label {
		width: 180px;
		font-weight: 600;
		font-size: 12px;
		padding-top: 4px;
	}
	
	.form_group .form_input input {
		padding: 5px;
		outline: none;
		width: 100%;
		border: 1px solid #AAAAAA;
	}
	
	.mobile_no {
		width: 328px !important;
	}
	
	.mobile-mt30 {
		margin-top: 30px;
	}
	
	.mobile-plr-15 {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#tutorial-memorygame {
		margin: 0 3.5% 50px;
	}
	
	.game-result, .overtime {
		width: 100%;
	}
	
	.game-result img, .overtime img {
		width: 100%;
		float: left;
		margin-right: 20px;
	}
	
	.game-result-content, .overtime-content {
		float: left;
		width: 100%;
		text-align: center;
		padding: 0 0 25px;
	}
	
	.game-result-content h1, .overtime-content h1 {
		font-size: 22px;
		margin: 15px 0 0;
	}
	
	.game-result-content h2, .overtime-content h2 {
		font-size: 17px;
	}
	
	.game-result-content p, .overtime-content p {
		font-size: 15px;
		margin: 5% 0 10px;
	}
	
	span#gameFinishedTime {
		font-size: 30px;
	}
	
	.home .featherlight .featherlight-content {
		padding: 0;
		box-shadow: none;
		border: 1px solid #ddd;
	}
	
	#game_rule {
		width: 320px;
		height: 550px;
		max-height: 550px;
	}
	
	#game_rule img {
		max-width: 100%;
	}
	
	.game_rule_content {
		padding: 0 10px 0 0;
		height: 525px;
	}
	
	.home-content-container {
		margin: 0;
	}
	
	.mobile-scroll {
		display: block;
		position: absolute;
		bottom: 12px;
		left: 0;
		right: 0;
		margin: 0 auto;
		text-align: center;
	}
	
	.game-result-content h2,
	.overtime-content h2,
	.overGamePerDay-content h2 {
		font-size: 15px;
	}
}

@media only screen and (max-width: 375px) {
	.form_group .form_label {
		width: 180px;
		font-weight: 600;
		font-size: 13px;
		padding-top: 4px;
	}
	
	.form_group .form_input input {
		padding: 5px;
		outline: none;
		width: 100%;
		border: 1px solid #AAAAAA;
	}
	
	.mobile_no {
		width: 288px !important;
	}
}

@media only screen and (max-width: 360px) {
	.mobile_no {
		width: 273px !important;
	}
}

@media only screen and (max-width: 320px) {
	#game_rule {
    	width: 305px;
	}
	
	.form_group div {
		float: left;
		width: 100%;
	}
	
	.form_group .form_input input {
		width: 100%;
	}
	
	.mobile_no {
		width: 233px !important;
	}
}