*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
body, html {
    width: 100%;
    font-family: "Noto Sans TC", sans-serif, Arial, Verdana, Helvetica, "微軟正黑體", "蘋果儷黑體", "新細明體";
    color: #231815;
    font-size: 3.125rem;
    letter-spacing: 1px;
    background: #FFF;
    position: relative;
    overflow-x: hidden;
}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url('../images/btn_next.png');
   background-size: contain;
}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next {
    background-image: url('../images/btn_prev.png');
   background-size: contain;
}
.swiper-button-next, .swiper-button-prev{
	width: 80px;
	height: 70px;
}
.wrapper {
    width: 100%;
    line-height: 1;
    position: relative;
    font-size: 0.36rem;
    overflow: hidden;
}

.wrapper img{
	max-width: 100%;
}

#contentBox{
	position: relative;
	height: 90vh;
}


/* 開始頁面 */

#index.game4 {
	width: 100%;
	height: 100%;
    background: url('../images/index.png') center 0% no-repeat;
    background-size: cover;
    position: fixed;
    padding: 3% 0 5%;
    overflow: hidden;
    top: 0;
    left: 0;
    z-index: 10;
}

#index.game4 img{
	max-width: 100%;
}
#index .container {
    max-width: 15rem;
    height: auto;
    position: relative;
    clear: both;
    width: 90%;
    top: 10%;
    margin: auto;
}

.tit{
	max-width: 600px;
	margin: auto;
	width: 100%;
	text-align: center;
	position: absolute;
	top: 4%;
	left: 0;
	right: 0;
}
.tit img{
	width: 100%;
}

.home{
	background: url('../images/home.png') no-repeat center;
	background-size: 100% 100%;
	font-size: 0.6rem;
	padding: 5rem 3rem 3rem;
	color: #61430F;
	line-height: 0.9rem;
}
.people{
	position: absolute;
	bottom: 0%;
	right: -15%;
	max-width: 25%;
	transform: rotate(5deg);
	animation:people .8s ease infinite;
}



.start_btn{
	position: absolute;
	bottom: 5%;
	right: 0;
	left: 0;
	margin: auto;
	width: 250px;
	transition: all .5s;
	-webkit-filter: drop-shadow(0px 10px 0px rgba(132, 66, 33, .6));
    filter: drop-shadow(0px 10px 0px rgba(132, 66, 33, .6));
    transform: translateY(0px);
    transition: all .5s

}
.gamebtn{
	-webkit-filter: drop-shadow(0px 10px 0px rgba(132, 66, 33, .6));
    filter: drop-shadow(0px 5px 0px rgba(132, 66, 33, .6));
    transform: translateY(0px);
    transition: all .5s
}
.start_btn:hover{
	bottom: calc( -5% -10px);
	transition: all .5s;
	-webkit-filter: drop-shadow(0px 10px 0px rgba(132, 66, 33, 0));
    filter: drop-shadow(0px 10px 0px rgba(132, 66, 33, 0));
    transform: translateY(5px);
    transition: all .5s
}
.gamebtn:hover{
	-webkit-filter: drop-shadow(0px 10px 0px rgba(132, 66, 33, 0));
    filter: drop-shadow(0px 5px 0px rgba(132, 66, 33, 0));
    transform: translateY(5px);
    transition: all .5s
}

@keyframes people {
	0%{
		transform: rotate(5deg)
	}
	50%{
		transform: rotate(0deg)
	}
	100%{
		transform: rotate(5deg)
	}
}


@media screen and (max-width: 630px){
	#contentBox {
	    padding-bottom: 0rem;
	}
}

@media screen and (max-width: 768px){
	.home {
	    padding: 13em 4.9em 4rem;
	    font-size: 1.5em;
 		margin-top: 0.7rem;
 		line-height: 1.5em;
	}
	.tit{
 		top: 10%;
 	}
 	.start_btn {
	    bottom: 5%;
	    width: 50%;
	    max-width: 200px;
	}
	.people{
		right: -2%;
	}
}
	
	
 @media screen and (max-width: 567px) {
 	.home{
 		padding: 8em 1.9em 2rem;
 		/* font-size: 0.5rem; */ 		
 	}
 	
 }



/* 背景 */

#level1.level_bg{
	background:url('../images/level1_bg.png');
	background-size: cover;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
    z-index: 4;
}
#level2.level_bg{
	background:url('../images/level1_bg.png');
	background-size: cover;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
}

#level3.level_bg{
	background:url('../images/level3_bg.png');
	background-size: cover;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

#level3.level_bg{
	background:url('../images/level3_bg.png');
	background-size: cover;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}
#level4.level_bg{
	background:url('../images/level3_bg.png');
	background-size: cover;
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}
/* 主要場景 */

#level2.level_bg .house,#level1.level_bg .house,#level3.level_bg .house,#level4.level_bg .house{
	width: 100%;
	height: 90%;
	position: fixed;
	top: 0;
	bottom: 0;
	margin: auto;
	display: flex;
    align-items: center;
}
#level3.level_bg .house,#level4.level_bg .house{
	height: 100%;
}
#level1.level_bg .house{
	z-index: 4;
}
#level2.level_bg .house{
	z-index: 3;
}
#level3.level_bg .house{
	z-index: 2;
}
#level4.level_bg .house{
	z-index: 1;
}

#level1.level_bg .house>img,#level2.level_bg .house>img{
	height: 100%;
}

#level3.level_bg .house>img,#level4.level_bg .house>img{
    top: 0;
    height: 127%;
}

/* 對話框 */

.talk{
	position: absolute;
	bottom: -5%;	
	width: 80%;
	left: 0;
    right: 0;
    margin: auto;
   z-index: 1;
}

#level3 .talk,#level4 .talk{
	position: absolute;
	top:7%;	
	width: 80%;
	left: 0;
    right: 0;
    margin: auto;
    bottom: auto;
   z-index: 1;
}
.talk p{
	font-size: .5rem; 
	background-color: #FFEDC7;
    border: 5px solid #F58C56;
    border-radius: 30px;
    overflow: hidden;
    display: none;
}
.talk .talk_next>span{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.talk span>span{
	
	padding: 1.5% 5%;
	display: inline-block;
}

.talk .area{
	color: #fff;
	background-color: #F58C56;
	white-space: nowrap;
}


.search_icon::before{
	content: '';
	width: 100px;
	height: 80px;
	position: absolute;
	left: -2%;
	bottom: -5%;
	background: url('../images/icon_search.png') no-repeat;
	background-size: contain;
}


/* 共用物件 */

.prop{
	position: absolute;
	display: inline-block;
}
.prop img{width: 100%;}


/* 跳窗 */

.modalblock,.modalblock2{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #f8ecd575;
    display: none;
    top: 0;
    left: 0;
    z-index: 50;
}

.modalblock2 .blockimg{
	margin: 4% auto;
    height: 85%;
    padding: 12% 8% 4%;
}
.blockimg{
    text-align: center;
    background: url('../images/block.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    max-width: 992px;
   	height: 85%;
   	position: relative;
    margin: 4.5% auto;
}
.blockimg::before{
	content: '正確答案';
	font-size: 3em;
	position: absolute;
	left: 0;
	right: 0;
	top: 15%;
	color: #fff;
}

.close{
	position: absolute;
    right: 21%;
    top: 10%;
    width: 6%;
    cursor: pointer;
}

.answer_block{
	position: absolute;
    top: 36%;
    left: 0;
    width:85%;
    right: 0;
    margin: auto;
}

.modalblock2 .answer_block{
	position: relative;
	width: 100%;
	top: auto;
	left: auto;
}

.answer_img{
	max-width: 450px;
    margin: auto;
}
.answer_img img{
	max-height: 250px;
	width: auto;
    margin: auto;
}
.modalblock2 .answer_img{
	max-width: none;

}
.answer_p{
	padding: 1em;
	font-size: 0.5rem;
	line-height: 1.5em;
    margin: auto;
}

.btn_next{
	width: 5%;
    display: inline-block;
    margin: 0 1.6% 0 0;
}

.banner{
	position: relative;
    top: 0%;
}



/* 第一關 */

#level1 .prop:nth-child(1){
    left: 5.3%;
    bottom: 5.3%;
    width: 14.2%;
}
#level1 .prop.truePic:nth-child(1)::before{
	content: '';
    position: absolute;
    left: 17%;
    bottom: 22%;
    width: 60px;
    height: 70px;
    background: url('../images/shinee1.png');
    background-size: contain;
    background-repeat: no-repeat;
}
#level1 .prop.truePic:nth-child(1)::after{
	content: '';
	position: absolute;
	left: 40%;
	top: 35%;
	width: 60px;
	height: 70px;
	background: url('../images/shinee2.png');
	background-size: contain;
    background-repeat: no-repeat;
}
#level1 .prop:nth-child(2){
    left: 24%;
    top: 13%;
    width: 17%;
}

#level1 .prop:nth-child(3){
	left: 42%;
    bottom: 5.3%;
    width: 13%;
}
#level1 .prop.truePic:nth-child(3)::before{
	content: '';
	position: absolute;
	left: 0%;
	top: 25%;
	width: 60px;
	height: 70px;
	background: url('../images/shinee1.png');
	background-size: contain;
    background-repeat: no-repeat;
}
#level1 .prop:nth-child(4){
	left: 51.9%;
    top: 5.1%;
    width: 4%;
}

#level1 .prop.truePic:nth-child(4){
	left: 32%;
    top: 3.4%;
    width: 6%;
}
#level1 .prop.truePic:nth-child(4)::before{
	content: '';
	position: absolute;
	left: -55%;
	top: 0%;
	width: 40px;
	height: 50px;
	background: url('../images/shinee1.png');
	background-size: contain;
    background-repeat: no-repeat;
}

/* 第二關 */
#level2 .prop:nth-child(1){
    right: 31.8%;
    bottom: 28vh;
    width: 11%;
    z-index: 1;
}

#level2 .prop.truePic:nth-child(1)::before{
    content: '';
    position: absolute;
    left: 0%;
    bottom: 30%;
    width: 40px;
    height: 50px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#level2 .prop:nth-child(2){
    right: 4%;
    bottom: 36.7%;
    width: 27%;
}
#level2 .prop.truePic:nth-child(2)::before{
	content: '';
    position: absolute;
    left: 2%;
    top: 43%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#level2 .prop:nth-child(3){
	right: 26.8%;
    bottom: 3.8%;
    width: 17.6%;
}

#level2 .prop:nth-child(3) img{
	height: 67.6vh;
}
#level2 .prop.truePic:nth-child(3)::before{
    content: '';
    position: absolute;
    left: 10%;
    top: 12%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#level2 .prop:nth-child(4){
	right: 21.9%;
    top: 3.7%;
    width: 7%;
}


/* 第三關 */
#level3 .prop:nth-child(1){
    left: 6.8%;
    bottom: 0%;
    width: 15%;
}
#level3 .prop.truePic:nth-child(1)::before{
    content: '';
    position: absolute;
    left: -1%;
    top: 32%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#level3 .prop:nth-child(2){
    left: 46%;
    bottom: -0.3%;
    width: 9.6%;
    z-index: 1;
}

#level3 .prop.truePic:nth-child(2)::before{
    content: '';
    position: absolute;
  	left: 40%;
    bottom: 24%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#level3 .prop:nth-child(3) {
    left: 25.4%;
    bottom: 2%;
    width: 18.8%;
    z-index: 1;
}
#level3 .prop.truePic:nth-child(3)::before{
    content: '';
    position: absolute;
    left: 18%;
    top: 1%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}
#level3 .prop:nth-child(4){
	left: 10.4%;
    top: 29.7%;
    width: 40.8%;
}
#level3 .prop.truePic:nth-child(4)::before{
    content: '';
    position: absolute;
   	left: -5%;
    top: 0%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}


/* 第四關 */
#level4 .prop:nth-child(1){
	right: 13%;
    bottom: 29%;
    width: 13%;
}
#level4 .prop:nth-child(1)::before{
	content: '';
    position: absolute;
   	left: -5%;
    top: 0%;
    width: 50px;
    height: 60px;
    background: url(../images/shinee1.png);
    background-size: contain;
    background-repeat: no-repeat;
}

/* 結束 */
#level4 .talk_next{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(248, 236, 213, .85);
    display: none;
    top: 0;
    left: 0;
    z-index: 50;
}

#level4  .talk_next .house{	
	text-align: center;
    background: url('../images/finish.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    max-width: 992px;
    height: 90%;
    position: relative;
    margin: 3% auto;
    display: block;
}
#level4  .talk_next .house img{
	width: auto;
}
#medal{
	padding-top: 26vh;
    position: relative;
}
#level4  .talk_next .house::before{
	content: '任務完成';
	position: absolute;
	left: 0;
	right: 0;
	margin:0 auto;
	font-size:1.6rem;
	color: #fff;
	text-shadow: 2px 2px #864423;
	top: 15%;
}
#medal #trophy{
	display: inline-block;
    max-width: 42%;
    background: transparent;
    padding: 10px;
}
#medal img{
	max-width: 100%;
	margin: auto;
}
#medal input{
	position: absolute;
    top: 48%;
    left: 0;
    right: 0;
    margin: auto;
    font-size: 0.7rem;
    width: 8em;
    text-shadow: 1px 1px #fff;
    color: #5b2e19;
    text-align: center;
    background: transparent;
    border: none;
}

#level4 .talk_next .house img.fireman{
    right: -37%;
    left: 0;
    margin: 0 auto;
    position: absolute;
    width: 20%;
    bottom: 8%;
    top: auto;
    height: auto;
    transform: rotate(5deg);
	animation:people .8s ease infinite;
}

#level4 .talk_next .links{
	display: flex;
    justify-content: space-around;
    position: absolute;
    width: 100%;
    bottom: -2%;
	
}

#level4 .talk_next .links a{
	max-width: 20%;
}

@media screen and (max-width: 1200px){
	.modalblock2 .blockimg {
		padding: 18% 8% 4%;
	}
	#medal #trophy{
		max-width: 40%;
	}
}
@media screen and (max-width: 991px){
	.level_bg .house>img{
		height: 70%;
	}
	.talk p{
		font-size: 0.4rem;
	}
	.talk{
		bottom: 2%;
	}
	.search_icon::before{
		left: -10%;
	}
	.modalblock2 .blockimg{
		padding: 24% 8% 4%;
	}

	.blockimg::before{
		font-size: 2em;
	}
	#level1 .prop:nth-child(1) {
	    left: 5.2%;
	    /* bottom: 19%; */
	    bottom: 6%;
	    width: 19%;
	}
	#level1 .prop.truePic:nth-child(3)::before,#level1 .prop.truePic:nth-child(1)::before,#level1 .prop.truePic:nth-child(1)::after{
		width: 40px;
		height: 40px;
	}
	#level1 .prop:nth-child(1) img{
		max-height: 397px;
	}
	#level1 .prop:nth-child(2){
		top: 28%;
	}
	#level1 .prop:nth-child(3){
		 /* bottom: 19%; */
		 bottom: 6%;
	}
	#level1 .prop:nth-child(4){
		left: 50.5%;
	    top: 20.1%;
	    width: 6%;
	}
	#level1 .prop.truePic:nth-child(4) {
	    left: 30%;
	    /* top: 17.4%; */
	    top: 3.4%;
	    width: 11%;
	}
	/* #level2 .prop:nth-child(3) img {
    	height: 47.5vh;
	} */

	/* #level2 .prop:nth-child(3) {
	    right: 26.8%;
	    bottom: 17.3%;
	    width: 17.9%;
	} */
	#level2 .prop:nth-child(2){
		/* bottom: 40.7%; */
		bottom: 38%;
	}
	#level2 .prop:nth-child(1){
		bottom: 29.5vh;
	}
	#level2 .prop:nth-child(4){
		top: 17.7%;
	}

}

@media screen and (max-width: 768px){
	#level1.level_bg .house>img{
		height: 55%;
		width: 165%;
		max-width: none;
	}

	#level2.level_bg .house>img {
	    height: 55%;
	    width: 214%;
	    position: relative;
	    max-width: none;
	    left: -110%;
	}
	.btn_next{
		width: 21%;
		min-width: 45px;
	}

	.talk{
		bottom: 1%
	}
	.talk p{
		font-size: 0.5rem;
	}
	.talk .area{
		text-align: center;
		width: 100%;
	}
	.search_icon::before{
		content: none;
	}
	
	.answer_block{
		top: 31%;
		left: 0;
    	right: 0;
    	width: 80%
	}
	/* .answer_img img{
		max-height: 150px;
	} */
	.answer_p{
		font-size: 0.5rem;
		padding:1em 0em;
	}
	.close{
	    top: 7%;
	    width: 10%;
	    right: 19%;
	}
	.blockimg{
		height:60vh;
   		margin: 22.5% auto;
	}
	.modalblock2 .blockimg{
		height: 75%;
	    padding: 41% 8% 4%;
	    margin-top: 19%;
	}

	#level1 .prop:nth-child(1) {
	    left: 8.2%;
	    bottom: 25.3%;
	    width: 28%;
	    max-width: 150px;
	}
	#level1 .prop:nth-child(2) {
	    top: 34%;
	    width: 22%;
	    left: 38%; 
	}
	#level1 .prop:nth-child(3){
		bottom: 25.2%;
    	left: 67%;
    	width: 27.3%;
    	max-width: 150px;
	}
	#level1 .prop:nth-child(4){
		left: 83.5%;
    	top: 25.1%;
    	width: 10%;
	}
	#level1 .prop.truePic:nth-child(4) {
	    left: 48%;
	    top: 24.4%;
	    width: 17%;
	}
	
	#level1 .prop:nth-child(1) img {
 		   max-height: 315px;
	}
	#level2 .prop:nth-child(3) img {
 	   height: 37.5vh;
	}
	#level2 .prop:nth-child(3) {
	    left: 9.8%;
	    right: auto;
	    bottom: 24.3%;
	    width: 36.9%;
	}
	#level2 .prop:nth-child(1) {
	    bottom: 33vh;
	    width: 24%;
	    right: auto;
	    left: 13%;
	}
	#level2 .prop:nth-child(2) {
		width: 56%;
	    right: 5%;
	    bottom: 41.8%;
	}
	#level2 .prop:nth-child(4) {
	    top: 24%;
	    width: 14.6%;
	    right: 40%;
	}
	#level3 .talk, #level4 .talk{
		top: 15%;
	}
	#level3.level_bg .house>img, #level4.level_bg .house>img{
		height: 85%;	    
	    position: relative;
	    max-width: none;	    
	    margin-top: 6vh;
	    top: auto;
	}
	#level3.level_bg .house>img{
		width: 195%;
		left: -10%;
	}
	#level4.level_bg .house>img{
		width: 230%;
		left: -123%;
	}
	#level3 .prop:nth-child(1) {
	    left: 1.8%;
	    bottom: 13%;
	    width: 32%;
	}
	#level3 .prop:nth-child(2) {
	    left: 79%;
	    bottom: 12.7%;
	    width: 19.6%;
	    z-index: 1;
	}
	#level3 .prop:nth-child(4){
		left: 10.4%;
	    top: 45.7%;
	    width: 80%;
	}
	#level3 .prop:nth-child(3) {
	    left: 37.4%;
	    bottom: 16%;
	    width: 36.8%;
	}

	#level4 .prop:nth-child(1) {
	    right: 21%;
	    bottom: 31%;
	    width: 27%;
	}

	#level4 .talk_next .house::before{
		font-size: 1rem;
	}
	#level4 .talk_next .house img.fireman {
	    right: 9%;
	    left: auto;
	}
	#medal input{
		font-size: 0.4rem;
	}
	#medal #trophy{
		max-width: 80%;
	}
	#level4 .talk_next .links a {
    	max-width: 35%;
	}
	.swiper-button-next, .swiper-button-prev {
	    width: 40px;
	    height: 50px;
	}
}

@media screen and (max-width: 568px){
	.blockimg::before{
		font-size: 1.5em;
	}
	#level2 .prop:nth-child(1) {
    	bottom: 33.5vh;
	}
	#level2 .prop:nth-child(2) {
	    bottom: 42.8%;
	}
	#level1 .prop.truePic:nth-child(1)::before,#level1 .prop.truePic:nth-child(1)::after{
		width: 25px;
	}
	#level1 .prop.truePic:nth-child(1)::after{
		top: 35%;
	}
	#level1 .prop.truePic:nth-child(3)::before,#level1 .prop.truePic:nth-child(4)::before{
		width: 30px;
		height: 40px;
	}
	#level2 .prop.truePic:nth-child(3)::before{
		top: 5%;
    	width: 25px;
    	height: 35px;
	}
	#level2 .prop.truePic:nth-child(2)::before{
		left: 2%;
	    top: 35%;
	    width: 20px;
	    height: 30px;
	}
	#level2 .prop.truePic:nth-child(1)::before{
		bottom: 10%;
    	width: 20px;
    	height: 30px;
	}
	#level3 .prop.truePic:nth-child(4)::before{
		left: -5%;
	    top: -15%;
	    width: 30px;
	}
	#level3 .prop.truePic:nth-child(2)::before{
		width: 30px;
	    height: 40px;
	    bottom: 30%;
	}
	#level3 .prop.truePic:nth-child(1)::before{
		top: 15%;
	    width: 30px;
	    height: 40px;
	}
	#level3 .prop.truePic:nth-child(3)::before{
		left: 10%;
	    width: 30px;
	    height: 40px;
	}
	.home {
	    font-size: 1.1em;
	}
	.answer_img img{
		max-height: 150px;
	}
	.answer_p{
		font-size: 0.35rem;
		padding:1em 0em;
	}
	.talk p {
	    font-size: 0.33rem;
	}
}

@media screen and (max-width: 330px){
	.talk p {
	    font-size: 0.32rem;
	}
}