@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('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');

.oxanium {
  font-family: "Oxanium", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


@import url("reset.css");

body{background-color:#282424;}
*{	
	box-sizing: border-box;
	font-family: 'Noto Sans TC', sans-serif;
	font-family: "Oxanium", 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/bg1.png);
	background-position: top center;
	background-repeat: no-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{
	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);}

.L1:hover,.L2:hover,.L3:hover,
.L4:hover,.L5:hover
{background-position: right center;}




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

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


.PRIZE p,.JOURNEY p{
	font-size:18px;
	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;
}


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


.HOURS{
	width:100%;
	text-align:center;
	padding:40px 40px;
	background-position: bottom center;
	background-repeat: no-repeat;

	padding-bottom: 40px;
	
}

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

	
.HOURS h2{
	font-size:18px;
	padding-bottom: 0px;
	font-weight: normal;
}

.HOURS h3{
	font-size:24px;
	padding-top:25px;
	margin:0;
}
.HOURS h4{
	display: inline-block;
	
	font-size:18px;
	border: 1px solid #EC1D25;
	color:#EC1D25;
	padding:3px 20px;
	margin-top: 10px;
	margin-bottom:0;
	font-weight: normal;
	border-radius: 5px;

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

.HOURS h6{
	font-size:24px;
	color:#f15a22;
	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:13px;
	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;}




.title_1{	max-width:100%;}
.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;
}



}




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


           小------版型


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

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

#bttop {
	width:80px;
	height:80px;

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


	.LINK{background-size:contain;}

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

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

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


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