/* #3A3B3B
#E8CB49 */
body {
	background-color: #212323;
	/* 換你想要的顏色 */
}

@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideInLeft {
	0% {
		transform: translateX(-100px);
		opacity: 0;
	}

	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes zoomIn {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}

	100% {
		transform: scale(1);
		opacity: 1;
	}
}



h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Noto Sans TC', sans-serif;
}

p,
a,
span,
li,
label {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.09rem;
	font-weight: 300;
}

img {
	max-width: 100%;
}

li {
	list-style: none;
}

nav li {
	margin: 0 0.8125rem;
	color: #faebd7;
}

.navbar-toggler-icon {
	filter: invert(1);
	/* 把原本的黑白色反轉 */
}

.navbar {
	background-color: rgb(33, 35, 35)
		/* 你想要的顏色 */
}

.nav-link {
	color: antiquewhite;
	/*這裡可以換成你想要的字體顏色 */
	font-size: 1.5rem;
	font-weight: 400;
}

#intro .jumbotron {
	background: url('../pictures/mainbg.png');
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50%;
	height: 70vh;
	margin-bottom: 0.0rem;
}

#intro .jumbotron .container {
	position: relative;
	top: 10%;
	transform: translate(0, -50%);
}

#intro .btn {
	margin-top: 1.25rem;
}

#intro h1 {
	font-family: 'Noto Sans TC', sans-serif;
	/* 或換你想要的字體 */
	color: antiquewhite;
	font-size: 6rem;
	font-weight: 400;
	animation: fadeInUp 1.2s ease-out forwards;
}

#intro h2 {
	font-family: 'Noto Sans TC', sans-serif;
	/* 或換你想要的字體 */
	color: antiquewhite;
	font-size: 8rem;
	font-weight: 700;
	animation: slideInLeft 2.4s ease-out forwards;

}

#intro h3 {
	font-family: 'Noto Sans TC', sans-serif;
	/* 或換你想要的字體 */
	color: antiquewhite;
	font-size: 8rem;
	font-weight: 700;
	animation: slideInLeft 4.5s ease-out forwards;

}

#intro p {
	font-family: 'Noto Sans TC', sans-serif;
	/* 或換你想要的字體 */
	color: antiquewhite;
	font-size: 3rem;
	font-weight: 500;
	animation: zoomIn 8s ease-out forwards;
}

#intro a {
	font-family: "Press Start 2P", system-ui;
	/* 或換你想要的字體 */
	color: #faebd7;
	font-size: 1.5rem;
}

.btn {

	font-weight: 600;
	color: #373434;
	/* 白色 */
	background-color: #efecf1;
	/* 主色 violet */
	border-color: #dccbf7;
	/* 主色 violet */

	/* hover 狀態 */
	transition: all 0.3s;
}

.btn:hover {
	color: #ffffff;
	/* 維持白色 */
	background-color: #09070b;
	/* 比主色暗10% */
	border-color: #1a191b;
	/* 比主色暗10% */
}

.btn:focus {
	box-shadow: 0 0 0 0.25rem rgba(102, 16, 242, 0.5);
	/* violet的透明陰影 */
}

.btn:active {
	color: #ffffff;
	/* 維持白色 */
	background-color: #4d0ca3;
	/* 比主色暗20% */
	border-color: #4d0ca3;
	/* 比主色暗20% */
}

#second {
	padding: 5.0rem 0.0rem;
}

#second p {
	margin-bottom: 4.375rem;
	color: antiquewhite;
	font-size: 2.5rem;
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 800;
	font-style: normal;
}

#second h3,
#latest h3 {
	margin-bottom: 1.875rem;
	color: antiquewhite;
	font-size: 3.625rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.carousel-caption.caption-top {
	top: 6.25rem;
	/* 距離圖片上緣 1.25rem，可視情況調整 */
	bottom: auto;
}

.carousel-caption.press-start-2p-regular {
	font-family: "Press Start 2P", system-ui;
	font-weight: 400;
	font-style: normal;
}

#carouselExampleCaptions h5 {
	margin-bottom: 4.375rem;
	color: antiquewhite;
	font-size: 4rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#carouselExampleCaptions a {
	font-family: "Press Start 2P", system-ui;
	/* 或換你想要的字體 */
	color: antiquewhite;
	font-size: 1rem;
	font-weight: 400;
}

#subscribe p {
	font-size: 1.25rem;
	line-height: 1.25rem;
	color: antiquewhite;
}

#subscribe h1 {
	margin-bottom: 4.375rem;
	color: antiquewhite;
	font-size: 3rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#subscribe h2,
h3,
h4,
h5,
h6 {
	color: antiquewhite;
	font-size: 1.25rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#subscribe a,
#latest span,
li,
label {
	color: antiquewhite;
	font-size: 1.25rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

#second .self img {
	object-fit: cover;
	height: 34.375rem;
	width: 100%;
	object-position: 80%;
}

#second h5 {
	margin-top: 1.375rem;
	font-size: 1.0rem;
}

#second li {
	font-family: 'Noto Sans TC', sans-serif;
	position: relative;
	color: antiquewhite;
	text-align: left;
	padding-left: 1.25rem;
}

p {
	font-size: 1.5rem;
	line-height: 2.0rem;
	color: antiquewhite;
}

p.lead {
	font-size: 2.0rem;
	color: antiquewhite;
	line-height: 1.9375rem;
}

#latest {
	background: rgb(33, 35, 35);
	padding-top: 1.25rem;
	margin-top: 0.0rem;
	margin-bottom: 3.75rem;
}

#latest .upper {
	position: relative;
}

#latest img {
	height: 23.125rem;
	object-fit: cover;
}

#latest .innertext {
	position: absolute;
	bottom: 1.25rem;
	left: 1.875rem;
}

#latest .innertext span {
	background: rgba(0, 0, 0, 0.3);
	padding: 0.3125rem 1.0rem;
	border-radius: 1.875rem;
}

#latest h4 {
	font-size: 1.1875rem;
	margin-top: 1.125rem;
}

#latest .lower {
	padding: 1.375rem;

}

#latest .col-md-4 .outer {
	box-shadow: 0 0 0.5rem 0 rgba(255, 255, 255, 0.571);
	padding: 0.3125rem;
	margin: 0 0.3125rem;
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #484646;
}

#latest .lower h3 {
	font-size: 1.8125rem;
	margin-bottom: 0.75rem;
}

#latest .lower p {
	font-size: 1.0rem;
	font-weight: 500;
	margin-bottom: 0.25rem;
	font-weight: normal;
}

#latest a {
	color: black;
}

#latest a {
	color: black;
	text-decoration: none;
}

#latest i {
	margin-right: 0.3125rem;
}

#email {
	padding: 5.0rem 0.0rem
}

footer {
	margin-top: 1.25rem;
	padding: 0.625rem 0.0rem
}

#email p {
	font-family: 'Noto Sans TC', sans-serif;
	margin-top: 2.5rem;
	color: antiquewhite;
}

#email h3 {
	margin-bottom: 4.375rem;
	color: antiquewhite;
	font-size: 4rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.input-group .form-control,
.input-group .btn {
	height: 3.125rem;
}

.input-group .form-control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.input-group .btn {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

footer {
	background-color: #5a5959;
	border-top: 0.0625rem solid rgba(0, 0, 0, 0.09);
}

footer img {
	margin-bottom: 1.5rem;
}

#LogoLine p {
	font-family: "New Amsterdam", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.125rem;
}

footer h4 {
	margin-bottom: 4.375rem;
	color: antiquewhite;
	font-size: 2.4rem;
	font-family: "Stick", sans-serif;
	font-weight: 400;
	font-style: normal;
}

footer P {
	font-family: 'Noto Sans TC', sans-serif;
	color: antiquewhite;
	text-align: left;
	font-size: 1.125rem;
}

footer ul {
	list-style: none;
	padding: 0;
}

footer ul a {
	color: antiquewhite;
}

footer a {
	color: #E8CB49;
}

footer a:hover {
	color: #E8CB49;
}

footer ul a:hover {
	color: #707070;
	text-decoration: none;
	opacity: 0.8;
}

footer ul li {
	margin-bottom: 0.625rem;
}

footer ul {
	float: left;
	margin-right: 2.875rem;
}

#latest .thehead h3 {
	margin-bottom: 0.4375rem;
	font-size: 2.0rem;

}

#latest .thehead p {
	margin-bottom: 5.0rem;


}

#latest .thehead .col-md-4 p {
	margin-bottom: 0.0rem;
	margin-top: 1.5625rem;
}

#latest .thehead h3.notag {
	margin-bottom: 5.5rem;
}

.card-header .btn,
.card-header .btn:hover {
	background: none !important;
	color: black;
}

#intro .jumbotron.jumbotron2 {
	height: 25.0rem;
}

#singlecontent {
	padding: 80 0.0rem;
}

.thetag {
	color: #E8CB49;
	font-size: 1.0rem;
	border: 0.0625rem solid #E8CB49;
	padding: 0.625rem 1.125rem;
	border-radius: 1.25rem;
	display: inline-block;
	margin-left: 0.4375rem;
}

#singlecontent h4 {
	margin-top: 3.125rem;
}

.apply {
	background-color: #f9f9f9;
	padding: 2.75rem;
}

.apply .btn {
	font-size: 1.0rem;
	margin-top: 1.9375rem;
	width: 100%;
}

.applybelow {
	margin-top: 5.0rem;
	text-align: center;
}

.btn2 {
	color: #707070;
	border: 0.0625rem solid #707070;
	padding: 0.625rem 1.5rem;
	border-radius: 1.25rem;
	margin-top: 0.1875rem;
	display: inline-block;
}

.btn2:hover {
	text-decoration: none;
	opacity: 0.8;
	color: #707070;
}

#intro .contact {
	height: auto;
	padding: 0.0rem;
}

#intro .contact .col-md-4 {
	height: 25.0rem;
	background: rgba(0, 0, 0, 0.5);
	padding: 4.125rem;
	text-align: center;
}

#intro .contact .col-md-4 h1 {
	color: white;
}

#intro .contact .col-md-4 p {
	color: white;
}

#intro .contact .col-md-4 hr {
	color: white;
	border-top: 0.125rem solid #E8CB49;
	width: 5.4375rem;
	margin-top: 1.5rem;
	margin-bottom: 1.625rem;
}

.cinner {
	position: relative;
	top: 50%;
	transform: translate(0, -50%);
}

#contactcontent {
	padding: 5.0rem 0.0rem;
}

#contactcontent h3 {
	margin-bottom: 2.5rem;
}

#contactcontent a {
	color: #E8CB49;
}

#contactcontent a.btn {
	color: white;
}

#contactcontent textarea {
	height: 12.5rem;
	margin-bottom: 0.625rem;
}

#contactcontent i {
	display: inline-block;
	margin-right: 0.25rem;
}

@media only screen and (max-width: 48.0rem) {
	#second h5 {
		margin-bottom: 3.125rem;
	}

	#latest .col-md-4 {
		margin-bottom: 3.75rem;
	}

	footer h4 {
		font-size: 1.0625rem;
		margin-top: 1.875rem;
		margin-bottom: 1.125rem;
	}

	.gsc-input-box {
		display: flex !important;
		align-items: center;
		gap: 8px;
		/* 間距 */
	}


}

#intro .container {
	padding: 12.5rem 0;
}

#subscribe {
	padding: 2rem 0;
	/* 上下邊距縮小 */
}

#subscribe .row {
	--bs-gutter-y: .75rem;
	/* 壓縮欄距 (原本 1rem) */
}

#subscribe .form-control {
	padding: .25rem .75rem;
	/* 更扁的輸入框 */
	font-size: .875rem;
}

#subscribe h1 {
	/* 標題更小、行高短 */
	font-weight: 600;
}

#subscribe p {
	font-size: .95rem;
}

/* 把 .row.g-2 自動加的 row-gap 壓到更小（或 0 都行） */
#subscribe .row.g-2 {
	--bs-gutter-y: .5rem;
}

/* 避免 <h1> 自帶的大行高撐開 */
#subscribe h1 {
	line-height: 1.2;
}


/* GSC 搜尋框強制橫向排列與排版限制 */
.gsc-control-searchbox {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	width: 100% !important;
	gap: 4px;

}

.gsc-input-box {
	flex-grow: 1 !important;
	min-width: 0 !important;

}

.gsc-search-button {
	flex-shrink: 0 !important;
}

@media (max-width: 48rem) {
	.gsc-control-searchbox {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.gsc-input-box {
		flex-grow: 1 !important;
		min-width: 0 !important;
	}

	.gsc-search-button {
		flex-shrink: 0 !important;
		margin-left: 0.25rem;
	}

	.gsc-input input.gsc-input {
		font-size: 1rem !important;
		/* 提高可讀性 */
	}
}


.gsc-search-button {
	margin-left: -0.4063rem !important;
	margin-top: 0.0rem !important;
	height: 2.2812rem;
	display: inline-block !important;
	vertical-align: middle;
}


input.gsc-search-button {
	padding: 0.375rem 0.75rem !important;
	border-radius: 0.5rem !important;
	background-color: #212323 !important;
	/* Bootstrap success 綠 */
	color: rgb(33, 35, 35) !important;
	border: none !important;
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: center;
}

.gsc-search-box {
	flex-grow: 1;
}

#Select_Title h1 {
	color: antiquewhite;
	font-weight: 700;
	font-size: 2.75rem;
}

.custom-tool-list .list-group-item {
	font-family: "微軟正黑體", sans-serif;
	font-size: 1.125rem;
	font-weight: bold;
	color: rgb(36, 36, 33);
}

#BMI_resultBox,
#bmiValue,
#bmiStatus,
#tdeeResult,
#tdeeValue,
#cutValue,
#bulkValue,
#recommand,
#recommand1,
#recommand2 {
	font-family: "微軟正黑體", sans-serif;
	font-size: 1.125rem;
	font-weight: bold;
	color: rgb(36, 36, 33);
}

#px_trans_label .form-label {
	font-family: "微軟正黑體", sans-serif;
	font-weight: 600;
}

#Unit_transfer .form-label {
	font-family: "微軟正黑體", sans-serif;
	font-weight: 600;
}

#BMI_count .form-label {
	font-family: "微軟正黑體", sans-serif;
	font-weight: 600;
}

#TDEE_Cal .form-label {
	font-family: "微軟正黑體", sans-serif;
	font-weight: 600;
}

#TDEE_explain P {
	font-family: "Microsoft JhengHei", sans-serif;
	font-size: 0.875rem;
	margin-top: 2.5rem;
}

#Unit_transfer h4 {
	font-family: "微軟正黑體", sans-serif;
	font-weight: 600;
	font-size: 1.8rem;
}

/* 將 dropdown 背景與文字顏色覆蓋（部分瀏覽器適用） */
.gsc-completion-container {
	background-color: #222 !important;
}

.gsc-completion-title {
	background-color: #222 !important;
	color: #fff !important;

}

.gsc-completion .gsc-completion-selected {
	background-color: #444 !important;
	color: #fff !important;
}

span {
	font-family: "Noto Sans TC", sans-serif ;
	
	color: antiquewhite ;
}