@font-face {
	font-family: 'Antic';
	src: url('../fonts/Antic-Regular.ttf') format('truetype');
  	font-weight: normal;
  	font-style: normal;
  	font-display: swap;
}

:root{
	--primary-color: #006dae;
	--spacing-unit: 1em;
}

*{box-sizing:border-box;font-size:16px;font-family:"Antic", sans-serif}
body{margin:0}

.d-block{display:block !important}

.mb-0{margin-bottom:0 !important}
.mb-1{margin-bottom:calc(var(--spacing-unit) * 0.25) !important}
.mb-2{margin-bottom:calc(var(--spacing-unit) * 0.5) !important}
.mb-3{margin-bottom:var(--spacing-unit) !important}
.mb-4{margin-bottom:calc(var(--spacing-unit) * 1.5) !important}
.mb-5{margin-bottom:calc(var(--spacing-unit) * 3) !important}

.mt-0{margin-top:0 !important}
.mt-1{margin-top:calc(var(--spacing-unit) * 0.25) !important}
.mt-2{margin-top:calc(var(--spacing-unit) * 0.5) !important}
.mt-3{margin-top:var(--spacing-unit) !important}
.mt-4{margin-top:calc(var(--spacing-unit) * 1.5) !important}
.mt-5{margin-top:calc(var(--spacing-unit) * 3) !important}

.mx-auto{margin-left:auto !important;margin-right:auto !important}

main .container{padding:0 80px}
.container{max-width:1440px;margin:0 auto;padding:0 20px}

header{padding:20px 0;background-color:var(--primary-color)}
header h1{width:180px}
header h1 a{text-decoration:none}
header h1 img{width:100%;display:block}

header .container{display:flex;flex-wrap:wrap;align-items:center}

header .header-menus{width:calc(100% - 300px);margin-left:120px;display:none}

.header-menus .menu-links{list-style:none;padding:0;display:flex;justify-content:end;margin-top:0;align-items:center;gap:15px}
.header-menus .menu-links li{position:relative}
.header-menus .menu-links li:first-child{margin-left:0}
.header-menus .menu-links li:last-child{margin-right:0}
.header-menus .menu-links li > a{color:white;font-weight:800;display:block;font-size:14px;text-decoration:none;display:block}
.header-menus #header-social{display:flex;gap:5px;align-items:center;justify-content:space-between}
.header-menus #header-social a{width:calc(50% - 5px);display:block}
.header-menus #header-social a img{display:block;width:100%;max-width:20px}
.header-menus #header-social a:last-child{margin-right:0}


main.main-content{min-height:calc(100vh - 440px)}

.w-100{width:100% !important}
.w-70{width:70% !important}
.w-50{width:50% !important}
img.w-50,
img.w-70{display:block;margin-left:auto;margin-right:auto}
.page-title{
	font-family: "Antic", sans-serif;
	font-size: 88px;
	color: #7e4e38;
	text-align: center;
	font-weight: bold;
	margin: 0 0 30px;
}

.with-indent-1{text-indent:calc(var(--spacing-unit) * 0.25) !important}
.with-indent-2{text-indent:calc(var(--spacing-unit) * 0.5) !important}
.with-indent-3{text-indent:var(--spacing-unit) !important}
.with-indent-4{text-indent:calc(var(--spacing-unit) * 1.5) !important}
.with-indent-5{text-indent:calc(var(--spacing-unit) * 3) !important}
.text-center{text-align:center !important}

/* 隱藏原生箭頭 */
.mobile-nav-languages select,
#header-languages select{
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-color: transparent;
	color: white;
	border: 0;
	padding: 5px 30px 5px 10px;
	font-size: 14px; 
	font-weight: 700;
}

.mobile-nav-languages select option,
#header-languages select option{color:white}

.mobile-nav-languages > .custom-select-wrapper,
#header-languages > .custom-select-wrapper{position:relative;display:inline-block}

.mobile-nav-languages .custom-arrow,
#header-languages .custom-arrow {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: white;
	pointer-events: none;
}

.mobile-nav-languages .custom-arrow img,
#header-languages .custom-arrow img{width:100%;display:block;max-width:20px}

footer{
	background-color: var(--primary-color);
	padding: 40px 30px 40px;
	color: white;
	font-family: "Antic", sans-serif
}

footer .supervisors{margin-bottom:40px}
footer .supervisors ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	list-style: none;
	padding-left: 0;
	margin-top: 0;
	align-items: center;
	gap: 10px;
}
footer .supervisors ul li{color:white;display:flex;align-items:center;
	
}
footer .supervisors ul li:nth-child(1){
	justify-self: center;
  	text-align: center;
}
footer .supervisors ul li:nth-child(2){justify-self:center}
footer .supervisors ul li > span{float:left}
footer .supervisors ul li > span:nth-child(1){border-right:2px solid white;width:100px;margin-right:30px;padding-right:20px}
footer .supervisors ul li > span:nth-child(2){width:calc(100% - 130px);max-width:350px}
footer .supervisors ul li > span:nth-child(2) img{width:100%}

footer .social-links{display:flex;flex-wrap;justify-content:center;align-items:center;gap:15px}
footer .social-links a img{max-width:24px}
footer .social-links a:nth-child(2) img{max-width:14px}
footer p.copyright{margin:40px 0 0;text-align:center}

/* 手機選單樣式 */
.menu-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1001;
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #fff;
}

.mobile-menu {
	position: fixed;
	top: 0;
	left: -80%;
	width: 250px;
	height: 100vh;
	background-color: var(--primary-color);
	color: white;
	padding: 20px;
	z-index: 1002;
	transition: left 0.3s ease;
	display: flex;
	flex-direction: column;
}

.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin-top: 60px;
}

.mobile-menu li {
	margin-bottom: 20px;
}

.mobile-menu a {
	color: white;
	text-decoration: none;
	font-size: 18px;
}
.mobile-menu a:hover{color:#FFF697}

.menu-close {
	position: absolute;
	top: 15px;
	right: 15px;
	background: none;
	border: none;
	font-size: 22px;
	color: #fff;
	cursor: pointer;
}

.menu-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}
.mobile-footer{position:absolute;left:20px;bottom:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;width:calc(100% - 40px)}
.mobile-footer .social-links{width:calc(50% - 20px);margin-left:20px;text-align:right}
.mobile-footer .social-links a{display:inline-block;margin-left:5px}
.mobile-footer .social-links a img{display:block;width:24px}
.mobile-footer .mobile-nav-languages{width:calc(50% - 20px);margin-right:20px}



body.menu-open{overflow:hidden}
body.menu-open .mobile-menu{left:0}
body.menu-open .menu-backdrop {
	opacity: 1;
	visibility: visible;
}

@media screen and (max-width: 1191px) {
	header .header-menus{width:calc(100% - 190px);margin-left:10px}
	.header-menus .menu-links li > a{font-size:.85rem}
} 

@media(min-width: 1015px) {
	header .header-menus{display:block}
	.menu-toggle {
		display: none;
	}
}

@media screen and (max-width: 1015px) {
	header{position:sticky;top:0;z-index:999}
}

@media screen and (max-width: 991px) {
	footer .supervisors ul {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		gap: 20px;
		justify-items: center;
	}
	footer .supervisors ul li{width:100%}
	footer .supervisors ul li:nth-child(1),
	footer .supervisors ul li:nth-child(2) {
		justify-content: center;
		justify-self: center;
		text-align: center;
	}

	footer .supervisors ul li > span:nth-child(2){max-width:400px}
}

@media screen and (max-width: 768px) {
	main .container{padding:0 20px}
}

@media screen and (max-width: 600px) {
	footer{padding:40px 15px}

	footer .supervisors ul li > span:nth-child(1){margin-right:15px;padding-right:0}
	footer .supervisors ul li > span:nth-child(2){width:calc(100% - 115px)}
	footer p.copyright{font-size:14px}
}