main{
	/*background: url('') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;*/
	/*background-image: url('../images/game_zone/htp_bg.jpg');
    background-repeat: no-repeat;
    background-position: center; */
	display:block;
	background:url('../images/game_zone/htp_bg.jpg') no-repeat center;
}

main#game2_main{
	background-image: url('../images/game_zone/game2/howToPlay_bg.jpg');
}

main.gz_landing{
	/*background: url('') no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;*/
	/*background-image: url('../images/game_zone/end_bg.jpg');
    background-repeat: no-repeat;
    background-position: center; */
	background:url('../images/game_zone/end_bg.jpg') no-repeat center;
	font-family: Ubuntu-Light;
}

.gz_landing .main-title{
	position: absolute;
    top: 13%;
    left: 53%;
}

.gz_landing .main-title p{
	font-size: 3.1vw;
}

.gz_landing .title-area{
	position: absolute;
    bottom: 0;
    right: 0;
    background-color: #e3ded3;
    padding: 0 1.1vw;
    padding-right: 3.5vw;
    padding-top: 20px;
    padding-bottom: 40px;
	z-index: 1;
}

.gz_landing .title-area .title-area-desc{
	font-size: 1.4vw;
	padding-bottom: 70px;
}

.gz_landing .title-area .text-block{
	display: inline-block;
    font-size: 1.87vw;
    padding: 20px 10px;
    font-weight: 300;
    margin-bottom: 30px;
	color: #000;
    background-color: white;
}

.gz_landing .title-area .btn-list a{
	display: inline-block;
    font-size: 1.35vw;
    line-height: 1.25em;
    text-align: left;
    width: 230px;
    margin-right: 20px;
    padding: 30px 20px;
    max-width: calc(100% / 2 - 13px);
    font-weight: 300;
	background-color: #ab6502;
    color: white;
}

.gz_landing .title-area .btn-list a span{
	display: inline-block;
    vertical-align: middle;
	min-height: 35px;
}

#game1{
	background-image: url('../images/game_zone/bg.jpg');
    background-repeat: no-repeat;
    background-position: center; 
}
#game2{
	background-image: url('../images/game_zone/game2/game2_bg.jpg');
    background-repeat: no-repeat;
    background-position: center; 
	background-size: cover;
}
.gz{
	position: relative;
	min-height:500px;
}
.s_icon{
	position:absolute;
	top: 5%;
	right: 2%;
	z-index: 2;
}
/*#game2_main .s_icon
{
	top: 4%;
}*/
.lorry{
	position:absolute;
	bottom:4%;
	left:15%;
	width:10%;
}

.icon_set .icon_set_w{
		display:none;
	}
	
.icon_set .icon_set_c{
	display:none;
}

.icon1{
	position:absolute;
	bottom:27%;
	left:83%;
	width:10%;
}
.icon2{
	position:absolute;
	bottom:30%;
	left:8%;
	width:10%;
}
.icon3{
	position:absolute;
	bottom:70%;
	left:70%;
	width:10%;
}
.icon4{
	position:absolute;
	bottom:68%;
	left:20%;
	width:10%;
}
.game1_title{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}
.game1_rule{
	color: #333333;
	font-size: 30px;
	font-family: DIN;
	padding-bottom: 20px;
	line-height: 1.3;
}
.game1_rule .game1_rule_r{
	font-size: 30px;
	font-family: DIN Bold;
}

.game1_rule .game1_rule_p img{
	width:15%;
}

.game_level_title{
	color: #00a069;
	font-size: 40px;
	font-family: DIN Medium;
	padding-bottom: 50px;
}

.mainpage_image{
	position: absolute;
    left: 4%;
    top: 10%;
    width: 55%;
}

.curtain{
	height: 100%;
}
.curtain .curtain_l{
	position: absolute;
	top: 0;
	left: 0;
	max-height: 97%;
}
.curtain .curtain_r{
	position: absolute;
	top: 0;
	right: 0;
	max-height: 97%;
}

.game2_title{
	width: 100%;
	position: absolute;
	top: 27%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	z-index: 1;
}
.game2_rule{
	color: #333333;
	font-size: 28px;
	font-family: DIN;
	margin-bottom: 1em;
	margin-top: 0.5em;
	line-height: 1.1;
	width: 55%;
    margin-left: auto;
    margin-right: auto;
}
[lang="zh-Hant"] .game2_rule,[lang="zh-Hans"] .game2_rule{
	line-height: 1.3;
}

.game2_rule .game2_rule_r{
	font-size: 30px;
	font-family: DIN Bold;
}

.game2_title .game_level_title{
	font-size: 34px;
	padding-bottom: 5px;
}

.game2-htp{
	max-width: 1270px;
	width: 100%;
	position: absolute;
	top: 72%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}
.htp-w{
	top: 73%;
}

.htp-c, .htp-w{
	display:none;
}
.htp_image{
	width: 90%;
}
.game_2_btn{
	width: 3.5%;
}

.mobile-hide{
		display: block;
	}
.mobile-show{
		display: none;
	}
@media (min-width: 1200px)
{
	.gz{
		min-height:700px !important;
	}
}
@media (max-width: 1200px){
	
	.game1_title{
		top:56%;
	}
	.game1_title .game_level_title{
		font-size: 1.5em;
		padding-bottom: 30px
	}
	.game2_title .game_level_title{
		font-size: 1.3em;
	}
	.game1_rule{
		font-size: 14px;
	}
	.game1_rule .game1_rule_r{
		font-size: 22px;
	}
	.game1_rule .game1_rule_p img{
		width:12%;
	}
	.icon1{
		left: 77%;
		width: 20%;
	}
	
	.icon2{
		left: 5%;
		bottom: 25%;
		width: 20%;
	}
	.icon3{
		left: 75%;
		width: 20%;
	}
	.icon4{
		left: 5%;
		width: 20%;
	}
	.game2_rule{
		font-size: 15px;
		width: 80%;
	}
	.htp_image{
		width: 90%;
	}
	.htp-w .htp_image{
		width: 85%;
	}
	.game2-htp{
		top: 67%;
	}
	.curtain .curtain_l{
		max-height: 87%;
	}
	.curtain .curtain_r{
		max-height: 87%;
	}
	.game2_rule .game2_rule_r{
		font-size: 20px;
	}
	
	main{
		background-size: cover;
	}
}

@media (max-width: 1550px){
	.gz_landing .title-area .btn-list a{
		font-size: 1em;
		width: 40%;
		padding: 10px 10px;
	}
}

@media (max-width: 992px){
	.game2_title .game_level_title{
		font-size: 1.3em;
	}
	.game2_title{
		top:45%
	}
	.game_2_btn{
		width: 8.5%;
	}
	.game_rule{
		font-size: 1.8em;
	}
	.game_1_btn{
		width: 20%;
	}
	.lorry{
		width: 30%;
	}
	main{
		padding: 0;
		background-size: cover;
	}
	#game1{
		/*background-size: 31.4em;*/
		background-size: cover;
	}
	#confetti-canvas{
		padding-top: 54.22px;
	}
	.s_icon{
		top: 6%;
	}
	.mainpage_image{
		left: 5%;
		top: 20%;
		width: 90%;
	}
	/*.gz_landing .title-area .btn-list a{
		font-size: 1em;
		width: 40%;
		padding: 10px 10px;
	}*/
	.gz_landing .title-area .title-area-desc{
		font-size: 1em;
		padding-bottom: 20px;
	}
	.gz_landing .title-area .text-block{
		font-size: 1em;
	}
	.gz_landing .main-title p{
		font-size: 1em;
	}
	.gz_landing .main-title{
		top: 15% !important;
	}
	.gz_landing .title-area{
		padding-bottom: 20px;
	}
	
	.mobile-hide{
		display: none;
	}
	.mobile-show{
		display: block;
	}
}

@media (max-width: 500px){
	.s_icon{
		top: 9%;
		width: 8%;
	}
}

@media (max-height: 820px) and (min-width: 1000px)
{
	.icon1, .icon2, .icon3, .icon4{
		width: 9%;
	}
	
	.lorry {
		width: 20%;
	}
	
	.mobile-hide{
		display: none;
	}
	.mobile-show{
		display: block;
	}
}

@media (max-height: 820px){
	.game2-htp {
		top: 75%;
	}

	.icon4{
		bottom: 63%;
	}
	
	.game1_rule .game1_rule_p img {
		width: 8%;
	}

	.game1_rule {
		padding-bottom: 10px;
	}
	
	.game_1_btn {
		width: 10%;
	}
	
	.game1_title {
		top: 50%;
	}
	
	.gz{
		min-height:400px;
	}
	.htp_image{
		width:80%;
	}
}

@media (max-height: 650px) and (max-width: 500px){
	.s_icon {
		width: 4%;
	}
	
	.mainpage_image {
		left: 20%;
		width: 60%;
		top: 15%;
	}
	
	.gz_landing .main-title {
		left: 70%;
		top: 8%;
	}
}

@media (max-height: 650px) and (max-width: 1000px){
	.s_icon {
		width: 4%;
	}
	
	.mainpage_image {
		left: 4%;
		width: 50%;
	}
	
	.gz_landing .main-title {
		left: 40%;
		top: 8%;
	}
}

@media (max-height: 650px) and (max-width: 800px) {
	.mainpage_image {
		left: 4%;
		width: 40%;
		top: 30%;
	}
}
@media (max-height: 500px){
	.s_icon {
		top: 15%;
	}
	
	.icon1, .icon2, .icon3, .icon4{
		width: 9%;
	}
	
	.game2_rule .game2_rule_r{
		font-size: 18px;
	}
	
	.game2_rule{
		font-size: 12px;
		width: 93%;
	}
	
	.lorry {
		width: 20%;
	}
	
	.game2-htp .htp_image {
		width: 60%;
	}
	
	.game_2_btn{
		width: 6.5%;
	}
}

@media (max-height: 700px) and (max-width: 400px)
{
	.s_icon {
		top: 10%;
	}
	
	.mainpage_image {
		left: 13%;
		width: 70%;
		top: 16%;
	}
	
	.gz_landing .main-title {
		left: 70%;
		top: 8%;
	}
}