@font-face {
    font-family: 'Noto Sans TC';
    src: url('../fonts/NotoSansTC_VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* 支援從 100 到 900 的字重 */
	font-display: swap;
}

@font-face {
    font-family: 'Noto Serif TC';
    src: url('../fonts/NotoSerifTC_VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* 支援從 100 到 900 的字重 */
	font-display: swap;
}

@font-face {
    font-family: 'EBGaramond';
    src: url('../fonts/EBGaramond-VariableFont_wght.woff2') format('woff2');
    font-weight: 100 900; /* 支援從 100 到 900 的字重 */
	font-display: swap;
}

body{
	font-family: 'Noto Sans TC', 'Noto Serif TC', 'sans-serif', 'serif';
	font-size: 16px;
}

input::placeholder, textarea::placeholder {
    font-size: 0.875rem;
}

.form-select{
    color: #6c757d;
    font-size: 0.875rem;
}

.cursor_pointer{
	cursor: pointer;
}

a {
    text-decoration: none;
}

.container {
	max-width: 1920px;
	margin-left: auto;
	margin-right: auto;
}

.dvh_100{
	min-height: 100dvh;
}

.section_background{
	background-color: #efefef;
}

.text_justify{
	text-align: justify; /*文字左右對齊*/
}

.text_break{
	word-break: break-all;
}

.menu_icon{
	width: 50px;
}

.arrow_icon{
	width: 28px;
}

.style_red{
	color: #c1272d !important;
}

.style_grey{
	color: #484d4b !important;
}

.style_spinner{
	color: #a40000;
}

#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.8);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

#fbBtn {
	width: 50px;
	height: 50px;
	background: #3b5998; /* Facebook 藍 */
	bottom: 130px; /* 設在 goTop 上方（50px 高 + 10px 間距） */
	right: 20px;
	z-index: 1000;
	text-decoration: none;
}

#LineBtn {
	width: 50px;
	height: 50px;
	background: #00b900; /* Line 綠 */
	bottom: 75px; /* 設在 goTop 上方（50px 高 + 10px 間距） */
	right: 20px;
	z-index: 1000;
	text-decoration: none;
}

#goTop{
	width: 50px;
	height: 50px;
	background: rgba(0, 0, 0, .3);
	text-decoration: none;
	bottom: 20px;
	right: 20px;
	z-index: 1000
}

.section_text_1{
	font-family: 'Noto Serif TC';
	font-size: clamp(16px, 4.2vw, 31px);
	font-weight:700;
}

.section_text_2{
	font-family: 'Noto Serif TC';
	font-size: clamp(20px, 3vw, 36px);
	font-weight:700;
}

.section_text_3{
	font-family: 'EBGaramond';
	font-size: clamp(14px, 3vw, 30px);
	font-weight:500;
}

.section_text_4{
	font-size: clamp(16px, 3vw, 18px);
}

.section_text_5{
	font-size: clamp(12px, 3vw, 17px);
	color: #3e3a39;
}

.section_text_6{
	font-family: 'Noto Serif TC';
	font-size: clamp(12px, 2vw, 17px);
	font-weight:700;
	color: #c1272d;
}

.section_text_7{
	font-family: 'Noto Serif TC';
	font-size: clamp(18px, 2vw, 20px);
	font-weight:700;
}

.section_text_8{
	font-size: 16px;
}

.section_text_9{
	font-size: clamp(12px, 1.5vw, 23px);
	font-weight:500;
}

.section_text_10{
	font-size: clamp(8px, 1.1vw, 18px);
	font-weight:500;
}

.section_text_11{
	font-family: 'Noto Serif TC';
	font-size: clamp(18px, 3vw, 48px);
	font-weight:700;
}

.section_text_12{
	font-family: 'EBGaramond';
	font-size: clamp(10px, 1.2vw, 18px);
}

.section_text_13{
	font-family: 'Noto Serif TC';
	font-size: clamp(16px, 1.5vw, 24px);
}

.section_text_14{
	font-size: clamp(10px, 1.2vw, 16px);
}

#googleForm{
	position: relative;
	z-index:1;
}

#googleForm,
#googleForm input,
#googleForm select,
#googleForm textarea,
#googleForm label,
#googleForm option {
	font-weight: 500 !important;
	color:#2f2422 !important;
}

#googleForm ::placeholder {
	font-size: clamp(16px, 2.5vw, 17.5px);
	font-weight: 500 !important;
	color:#2f2422 !important;
	opacity: 1;
}

#googleForm .form-select{
	font-size: clamp(16px, 2.5vw, 16.5px);
}

#googleForm input,
#googleForm select,
#googleForm textarea {
	border: 1px solid #605654 !important;
}

@media screen and (min-width: 1199px){

	.px_xl_2rem {
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.px_xl_4rem {
		padding-left: 4rem;
		padding-right: 4rem;
	}		
	
}
	
@media screen and (max-width: 1399px){

	.border_end_hide_xxl{
		border-right: 0 !important;
	}	
	
}

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

	.border_end_hide_xl{
		border-right: 0 !important;
	}
	
}

@media screen and (max-width: 767px){
	.border_end_hide{
		border-right: 0 !important;
	}
}

@media screen and (max-width: 575px){
	section{
		padding-top: 5rem !important;
		padding-bottom: 5rem !important;			
	}	
}

@media screen and (max-width: 500px){
	body{
		font-size: 14px;
	}	
}

@media screen and (max-width: 375px){
	section{
		padding-top: 4rem !important;
		padding-bottom: 4rem !important;			
	}	
}

/************  hr text *********************/

.hr_with_text_left, .hr_with_text_left2{
	display: flex;
	align-items: center;
	text-align: left;
}

.hr_with_text_left::after, .hr_with_text_left2::after{
	content: '';
	flex: 1;
	border-bottom: 1px solid #ccc;
	margin-left: 10px;
}

@media screen and (max-width: 575px){
	
	.hr_with_text_left {
		display: block; /* 換行 */
		text-align: center; /* 讓文字置中 */
	}

	.hr_with_text_left::after {
		content: none; /* 移除虛線 */
	}	
	
}

/*******************************************/

/***************  header ********************/
header nav{
	min-height: 60px;
}

header .navbar a{
	font-family: 'Noto Serif TC';
	font-size:18px;
	font-weight:600;
	color: #484D4B;
	line-height: 1.2;
}

header .navbar a small{
	font-family: 'EBGaramond';
	font-size:10px;
	font-weight:400;
}

header .navbar-brand {
	font-size: 30px !important;
	font-weight: 700;
}

.logo_navbar {
	max-height: 50px;
}

.logo_offcanvas{
	width: 150px;
}

header .offcanvas ul {
	font-weight: 700;
	letter-spacing: 0.1rem;
}

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

	header .offcanvas-body{
		background-image: linear-gradient(to bottom, rgba(79, 79, 79, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url(../img/banner.jpg);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center center;	
	}
	
	header .nav-item{
		padding-top:20px;
		padding-bottom:20px;
	}
	
	header .navbar a{
		color: #fff;
	}	
	
}


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

	.menu_icon{
		width: 42px;
	}	
	
	.logo_navbar {
		max-height: 30px;
	}
	
	.logo_offcanvas{
		width: 95px;
	}	

	header .offcanvas-header{
		max-height: 50px;
	}

	header .offcanvas-body{
		background-image: linear-gradient(to bottom, rgba(79, 79, 79, 0.8) 0%, rgba(0, 0, 0, 0.8) 100%), url(../img/banner2.jpg);	
	}
	
	header .navbar a{
		font-size:14px;
	}
	
	header .nav-item{
		padding-top:12px;
		padding-bottom:12px;
	}
	
}

/*********************************************/
/***************  footer ********************/
.footer_about_title {
    width: 120px;
}

footer .row{
	padding: 1.5rem !important;
}


@media screen and (min-width: 576px){
	footer .row {
		padding: 3rem 6rem !important;
	}
}

/*********************************************/
/***************  animate ********************/

.style_transform{
	-webkit-transition: -webkit-transform 1000ms ease-out !important;
	-o-transition: -o-transform 1000ms ease-out !important;
	-moz-transition: -moz-transform 1000ms ease-out !important;
	transition: transform 1000ms ease-out !important;	
}

.style_transform:hover{
	-ms-transform: scale3d(1.1,1.1,1);
	-webkit-transform: scale3d(1.1,1.1,1);
	-moz-transform: scale3d(1.1,1.1,1);
	-o-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);	
}	

@-webkit-keyframes styleSlowZoom {
	0% {
		opacity: 1;
		-webkit-transform: scale(1.1);
				transform: scale(1.1);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
				transform: scale(1);
	}
}

@keyframes styleSlowZoom {
	0% {
	opacity: 1;
		-webkit-transform: scale(1.1);
				transform: scale(1.1);
	}
	20% {
		opacity: 1;
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
				transform: scale(1);
	}
}

/*******************************************/
/***************  分頁 ********************/

#pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	list-style: none;
	padding-left: 0;
	margin-top: 3rem;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}	
	
#pagination li {
	margin-left: 1rem;
	margin-right: 1rem;
	flex-shrink: 0;
}
		
#pagination li a, #pagination li .current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-size: 18px;
	text-decoration: none;
	white-space: nowrap;
	padding-top: 5px;
	padding-bottom: 5px;
}
		
#pagination li .current {
	color: #c1272d;
}
		
#pagination li .prev, #pagination li .next {
	color: #c1272d;
	font-size: 18px;
}

#pagination .page_mark {
	font-size: 30px;
	font-weight: 100;
	line-height: 1;
}
		
@media (max-width: 1199px) {
	
	#pagination li {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}	
	
	#pagination li a {
		gap: 0px;  /* 箭頭與文字間距 */
		font-size: 16px;		
	}
	
	#pagination li a, #pagination li .current {
		gap: 0px;
		font-size: 16px;
	}
	
	#pagination li .prev, #pagination li .next {
		font-size: 14px;
	}
	
	#pagination .page_mark {
		font-size: 16px;
	}
	
}

/*******************************************/