@charset "utf-8";
/* CSS Document */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');


@import url("reset.css");

body{background-color:#282424;}
*{	
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;

}


#bttop {
	width:100px;
	height:100px;
	background-image: url(img/bttop.png);
	background-size: cover;
	background-repeat: no-repeat;

	position: fixed;
    right: 50px;
    bottom: 100px;
    cursor: pointer;
}

#bttop:hover{
	background-image: url(img/bttop-1.png);
}



/* --------------------------------

              電腦版型

--------------------------------- */


.WRAPPER{max-width:1000px;
	margin:0 auto;
	text-align:center;
	
	box-shadow: 
		0 3px 30px 1px rgba(0, 0, 0, 0.7), 
		-50px -50px 30px 5px rgba(90, 90, 90, 0.2);
	
	background-image:url(img/bg-1.png), url(img/bg.jpg) ;
	background-position: bottom center, center center;
	background-repeat: repeat-y,repeat;


	background-color:#fff229;
}


.TOP{
	width:100%;
	height:650px;
	background-image: url("img/bg_top.png");
	background-position: top center;
	background-repeat: no-repeat;
}

.TOPe{
	width:100%;
	height:650px;
	background-image: url("img/bg_top_e.png");
	background-position: top center;
	background-repeat: no-repeat;
}
		

.LINK{
	width:100%;
	height:130px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.L1,.L2,.L3,.L4,.L5,.L6{
	width:190px;
	height:115px;
	background-position: left center;
	background-size: cover;
	list-style: none;
	text-indent: -9999px;
}



.L1{background-image: url(img/link1.png);}
.L2{background-image: url(img/link2.png);}
.L3{background-image: url(img/link3.png);}
.L4{background-image: url(img/link4.png);}
.L5{background-image: url(img/link5.png);}
.L6{background-image: url(img/link6.png);}

.L1:hover,.L2:hover,.L3:hover,
.L4:hover,.L5:hover,.L6:hover
{	background-position: right center;
	/*transition:0.3s ease;*/
}




/* =============獎獎獎獎=============*/

.PRIZE,.JOURNEY{
	width:100%;
	padding:40px 0;
}
.JOURNEY{padding-bottom:0;}

.PRIZE p,.JOURNEY p{
	font-size:20px;
	line-height:1.8;
	padding-bottom:20px;}

.title_1{
	max-width:60%;
	margin-bottom: 20px;}

.PRIZE_container{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.PRIZE_item{
	width:26%;
	margin:5px 20px;}
.PRIZE_item img{
	width:100%;
	height: auto;
	margin-bottom:5px;}
.PRIZE_item P{
	font-size:16px;
	line-height: 1.4;}


/* =============關關相互=============*/

.STAGE ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.STAGE ul li{
	display:block;
	margin:5px;
	list-style: none;
}

.S1, .S3, .S5{	width:22%;}
.S2, .S4, .S6, .S7,.S9{	width:18%;}
.S8 {width:14%;}
.S10,.S11,.S12,.S13{width:30%;}

.S1 img,.S2 img,.S3 img,
.S4 img,.S5 img,.S6 img,
.S7 img,.S8 img,.S9 img,
.S10 img,.S11 img,.S12 img,.S13 img
{
  object-fit: cover;
  width:100%;
  height:auto;
}



/* =============時間時間=============*/
.HOURS{
	width:100%;
	text-align:center;
	padding:40px 40px;
	background-position: bottom center;
	background-repeat: no-repeat;
	padding-bottom: 40px;
	margin-top:25px;
	
}

.HOURS_container{
	display: flex;
	justify-content: space-around;
	background-color:rgba(255, 230, 169, 0.7);
	border-radius: 15px;
	padding-bottom:20px;
}

	
.HOURS h2{
	font-size:18px;
	line-height: 1.8;
	padding-bottom: 10px;
	font-weight: normal;
}

.HOURS h3{
	font-size:20px;
	padding-top:25px;
	margin-block:10px;
}
.HOURS h4{
	display: inline-block;
	
	font-size:16px;
	border: 1px solid #004b9f;
	color:#004b9f;
	padding:3px 20px;
	margin-block: 10px;
	font-weight: normal;
	border-radius: 5px;

}
.HOURS h5{
	display: inline-block;
	font-weight: normal;
	font-size:16px;
	background-color:#231f20;
	color:#ffffff;
	padding:3px 20px;
	margin-block:5px;;
	border-radius: 5px;
}

.HOURS h6{
	font-size:24px;
	color:#004b9f;
	padding-top:25px;
	margin:0;
}



.HOURS p{
	font-size:18px;
	line-height:1.4;
}

.nn{font-size:16px; color:#0089A7;}
.pp{
	font-size:15px;
	line-height:1.5;
}


.pap{
	padding:10px 100px;
}



	
/* =============底部版權=============*/

.FOOTER{
	width:100%;
	padding:20px 0;
	padding-bottom:40px;
}
.FOOTER a {
	text-decoration:none;
	color:#FF9900;
}

.FOOTER a:hover {
	font-weight:bold;
	color:#FFFF33;
}
.FOOTER p{
	color:#FFFFFF;
	font-size:15px;
	text-decoration:none;
	line-height:1.6;
	text-align:center;
}





/* --------------------------------


        OOOOOOOOOOOOO版型


--------------------------------- */









/* --------------------------------


              小版型


--------------------------------- */

@media screen and (max-width: 1000px) {

*{box-sizing:border-box;} /* 讓 padding 與 width 解除關係 */
html,body{-webkit-text-size-adjust:none;} /* iPhone 旋轉後 文字不要放大 */

	
.TOP{	
	background-image: url("img/bg_top_m.png");
	background-size: contain;
	height:auto;
	padding-top:95%;
}
.TOPe{	
	background-image: url("img/bg_top_m_e.png");
	background-size: contain;
	height:auto;
	padding-top:95%;
}

.LINK{
	background-image: url("img/bg_link_m.png");
	background-size:cover;
	height:auto;
	padding-block:10px;}

	.S1, .S3, .S5{	width:30%;}
	.S2, .S4, .S6, .S7,.S9{	width:30%;}
	.S8 {width:20%;}
	.S10,.S11,.S12,.S13{width:45%;}


.title_1{	max-width:90%;}
.title_2{	max-width:80%;}
.PRIZE_item{	width:40%;}


.HOURS_container{
	display: flex;
	flex-direction: column;
}

.FOOTER{
	width:100%;
	padding:20px 0;
}

.pap{	padding:10px 20px;}

.FOOTER p{font-size:13px;}

}




/* --------------------------------


           小------版型


--------------------------------- */

@media screen and (max-width: 700px) {

#bttop {
    right: 50px;
    bottom: 60px;}


	.LINK{background-size:contain;}

	.HOURS h3{	font-size:20px;}
	.HOURS{	padding:20px 20px;}

	.STAGE ul li{margin:2px;}

	.PRIZE p,.JOURNEY p{
	font-size:16px;
	line-height:1.8;
	padding-bottom:20px;}

	.HOURS p{
	font-size:16px;}
	.PRIZE_item P{
	font-size:14px;
	line-height: 1.3;}


}

@media screen and (max-width: 600px) {

	.L1,.L2,.L3,.L4,.L5,.L6{
		
		width:150px;
		height:92px;
	}


	.PRIZE_item{
		width:38%;
		margin:5px 10px;
	}
	
}