body {
	margin: 0;
	padding: 0;
	font-family: "Noto Sans TC", serif;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	font-weight: initial;
	word-wrap: break-word;
	width: 100%;
	background: #FFFFFF;
	font-size: 18px;
	line-height: 1.5;
	color: #333;
}

/* 創建一個固定定位的偽元素來處理背景 */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url('../images/bg.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: -1;
	/* 確保背景在最底層 */
	pointer-events: none;
	/* 確保不會干擾其他元素的點擊 */
}

/* 針對 iOS 設備的特殊處理 */
@supports (-webkit-touch-callout: none) {
	body::before {
		background-attachment: scroll;
		/* iOS 設備使用滾動而不是固定 */
		height: 100vh;
		/* 使用視口高度 */
	}
}

/* RWD 設定 */
@media screen and (max-width: 768px) {

	/* 背景設置 */
	body::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('../images/bg.png');
		background-size: 200%;
		background-position: top;
		background-repeat: no-repeat;
		z-index: -1;
		pointer-events: none;
	}
}

* {
	padding: 0;
	margin: 0;
}

/*設定字型及捲軸*/
* {
	scroll-behavior: smooth;
}

body {
	font-family: 'Noto Sans TC', 'Arial';
	overflow-x: hidden;
}


h2 {
	width: 700px;
	margin: 0 auto;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 700;
	font-size: 2rem;
	color: #333;
	text-align: center;
	font-style: normal;
	position: relative;
	margin-top: 1.5em;
	margin-bottom: 0.7em;
}


.div-with-span {
	margin: 120px auto 80px;
	text-align: center;
}

.commentarea p {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
}

.div-with-span img {
	width: 50%;
	max-width: 300px;
}



/*設定整體的固定背景圖*/
.container {
	width: 90%;
	height: 100vh;
	margin: 0 auto;
}

.main {
	max-width: 100%;
	margin: 0 auto;
}

.mytitle {
	font-family: 'Noto Sans TC', sans-serif;
	font-size: 4em;
	font-weight: 900;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.main {
	max-width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	height: auto;
	flex-direction: column;
}

#timer {
	font-family: Roboto, sans-serif;
	font-weight: 400;
	max-width: 60%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	line-height: 1;
	/*padding: 20px;*/
	/*font-size: 40px;*/
	margin: 0 auto;
	text-align: center;
}

span {
	display: block;
	font-size: 18px;
	/*color: white;*/
}

#days {
	font-size: 4em;
	padding: 0 50px;
	/*background: rgba(40,50,61,.62);*/
	font-family: Roboto, sans-serif;
	font-weight: 500;
}

#hours {
	font-size: 4em;
	padding: 0 50px;
	/*background: rgba(40,50,61,.62);*/
	font-family: Roboto, sans-serif;
	font-weight: 500;
}

#minutes {
	font-size: 4em;
	padding: 0 50px;
	/*background: rgba(40,50,61,.62);*/
	font-family: Roboto, sans-serif;
	font-weight: 500;
}

#seconds {
	font-size: 4em;
	padding: 0 50px;
	/*background: rgba(40,50,61,.62);*/
	font-family: Roboto, sans-serif;
	font-weight: 500;
}

/* X-Small devices (portrait phones, less than 576px) */
/* No media query for `xs` since this is the default in Bootstrap*/


/**************footer**************/
.footer {
	color: #333;
	font-size: 1rem;
	line-height: 1.5;
	margin: 50px auto;
}

@media (min-width: 576px) and (max-width: 767.98px) {

}
/* xs - Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

	.div-with-span {
		margin: 80px auto;
		text-align: center;
	}

	h2 {
		font-size: 1.5em;
		width: 100%;
	}

	.mytitle {
		line-height: 150%;
		font-size: 3em;
		margin-top: 20px;
	}

	#timer {
		max-width: 100%;
	}

	#days {
		font-size: 2.5em;
		padding: 0 12px;
	}

	#hours {
		font-size: 2.5em;
		padding: 0 12px;
	}

	#minutes {
		font-size: 2.5em;
		padding: 0 12px;
	}

	#seconds {
		font-size: 2.5em;
		padding: 0 12px;
	}

	span {
		display: block;
		font-size: 14px;
		/*color: white;*/
	}

	.footer {
		color: #333;
		font-size: 0.7rem;
		line-height: 1.5;
		margin: 50px auto;
	}
}

/* sm - Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* md - Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* lg - Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* xl - Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {}


/* 整個滾動條 */
::-webkit-scrollbar {
	width: 12px; /* 滾動條的寬度 */
	height: 12px; /* 滾動條的高度（水平滾動條） */
  }
  
  /* 滾動條的軌道 */
  ::-webkit-scrollbar-track {
	background: #f1f1f1; /* 軌道的顏色 */
	border-radius: 10px; /* 圓角 */
  }
  
  /* 滾動條上的滑塊 */
  ::-webkit-scrollbar-thumb {
	background: #888; /* 滑塊的顏色 */
	border-radius: 10px; /* 圓角 */
	border: 2px solid #f1f1f1; /* 滑塊的邊框 */
  }
  
  /* 滑塊在懸停時的顏色 */
  ::-webkit-scrollbar-thumb:hover {
	background: #555; /* 滑塊懸停時的顏色 */
  }