@font-face {
  font-family: 'Noto Sans CJK TC';
  src: url('../fonts/noto-sans-tc-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}


/* 基本樣式設定 */
html{
	scroll-behavior: smooth;
}

body {
	/* font-family: sans-serif; */
	font-family: Arial, "Noto Sans CJK TC", "思源黑體", sans-serif;
	margin: 0;
	padding: 0;
	background-image: url("../images/html-bg.jpg");
	background-repeat: repeat;
	background-size: auto;
	//background-color: #0d1222; /* 根據圖片主色調設定 */
	color: #fff;
	position: relative;
}


.blur-bg{
	width:80%;
	height:auto;
	position: absolute;
	top:0;
	left:0;
	opacity: .6;
}

.blur-bg img{
	width:100%;
	height:auto;
}

.for_m{
	display: none!important;
}

.for_laptop{
	display: flex!important;
}

.mainWrapper{
	max-width:1920px;
	/* min-width:1200px; */
	width:100vw;
	margin:0 auto;
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	z-index: 2;
}

a{
	-webkit-tap-highlight-color: transparent;
}

a:focus {
	outline: none;
}

.hover_effect_btn{
	position: relative;
}

.invitation_btn{
	width:280px;
	height:60px;
	display: block;
	margin: 0 auto;
	-webkit-tap-highlight-color: transparent;
}



a.invitation_btn:focus {
	outline: none;
}

.hover_effect_btn img{
	width:100%!important;
	height:auto!important;
	position: absolute;
	transition: all .3s ease-in-out;
	top:0;
	left:0;
}

.hover_effect_btn img.link{
	opacity: 1;
}

.hover_effect_btn img.hover{
	opacity: 0;
}

.hover_effect_btn:hover img.link{
	opacity: 0;
}

.hover_effect_btn:hover img.hover{
	opacity: 1;
}



@media (min-width: 1921px) {
	.mainWrapper {
		width: 100%;       /* 佔滿父容器 */
		min-width: 100%;   /* 最小也是父容器寬度 */
		max-width: none;   /* 移除最大限制，允許超過 1920px */
		margin: 0;         /* 移除置中，緊貼邊緣 */
	}
}

.web-container {
	width: 100vw;
	//min-width: 1000px;
	margin: 0 auto;
	box-sizing: border-box;
	margin-bottom:0px;
}

.web-container:not(.innavbar) {
	max-width: 1100px;
}

.dignity-section .web-container{
	padding-bottom:5vw;
}

.rights-section .web-container{
	max-width: 900px;
}

.web-navbar .web-container{
	width:100%;
	padding: 0 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom:0;
}

h2 {
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	margin-bottom: 1rem;
}

img.session-cnt-img{
	width:100%;
	height:auto;
}

.shinestar_line{
	width:100%;
	height:auto;
	text-align: center;
}

.shinestar_line img{
	width:40%;
	max-width:550px;
	height:auto;
	margin: 0 auto;
}

.align-center{
	text-align: center!important;
}

.content p{
	font-size: 1.3rem;
	color:#fff;
	line-height: 1.6;
	margin-bottom: 2rem!important;
}

.content-sub-title{
	wisth:100%;
	text-align: center;
	margin-bottom:1.5rem;
}

.w-100{
	width:100%;
	height:auto;
}

a.regBtn{
	position: fixed;
	bottom:5%;
	right:2%;
	width:10vw;
	height:10vw;
	display: block;
	z-index: 3;
}

a.regBtn img{
	width:100%;
	height:auto;
}



/* 1. Navbar */
.web-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 1000;
	/* 這裡不再需要 padding-bottom，因為漸層線和小圖標將獨立定位 */
	padding: 1vw 0; 
	transition: background-color 0.3s ease;
	
	position: fixed; /* 確保 navbar 是定位基準 */
}



/* 使用偽元素創建底部漸層線 */
.web-navbar::after {
	content: '';
	position: absolute;
	bottom: 0; /* 讓它緊貼 navbar 底部 */
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(
		to right,
		#ffc700,
		#ffd400,
		#e9a000,
		#d18a00,
		#ffc700
	);
}

/* 小圖標的容器，用來實現平滑移動 */
.web-navbar .nav-marker {
	position: absolute;
	bottom: -9px; /* <--- 讓它緊貼 navbar 的底部 */
	height: 20px;
	width: 85px;
	z-index: 2;
	background-image: url('../images/active-marker.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s ease-in-out;
}

/* 為了讓 JavaScript 能夠正確計算，我們需要知道 nav-menu 的位置 */
.web-navbar .nav-menu {
	position: static; /* 預設值，確保它在正常流中 */
}
/* 初始狀態，小圖標隱藏或放置在第一個連結下方 */
/* .web-navbar .nav-menu ul li:first-child a.active ~ .nav-marker {
	transform: translateX(0); /* 初始位置 
} */



.web-navbar .logo img {
	height: 2.5vw; /* 調整 Logo 大小 */
}

.web-navbar .nav-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.web-navbar .nav-menu li {
	margin-left: 1rem;
}

.web-navbar .nav-menu a {
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: color 0.3s ease;
	font-size: 1.1vw;
	display: flex; /* 關鍵：讓 a 標籤能容納多行文字並擴展高度 */
	text-align: center;  
	width:auto;
	min-height: 40px; 
	line-height: 1.2; 
	align-items: center;
	justify-content: center;
	white-space: nowrap; 
	padding: 0 1.5rem;
}



/* .web-navbar .nav-menu a.index-link{
	width:50px;
} */

@media (min-width: 769px) {
  /* 這段樣式適用於 769px 到 1699px 的範圍 */
  .web-navbar .nav-menu a:hover {
	background-image: linear-gradient(
	  45deg,
	  #e0bc66,
	  #faea9b,
	  #faea9b,
	  #b67b31
	);
	font-size: 1.1vw;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
  }

  .web-navbar .nav-menu a:hover {
	font-size: 1.1vw;
  }
  
  .web-navbar .nav-menu a.active:hover{
	  font-size: 1.1vw;
  }
}

@media (min-width: 1700px) {
  /* 這段樣式適用於 1700px 以上的範圍 */
  /* 它會覆蓋上面定義的樣式 */
  .web-navbar .nav-menu a {
	font-size: 18px;
  }

  .web-navbar .nav-menu a:hover {
	font-size: 18px; /* 這裡會將上面的 1vw 覆蓋為 20px */
  }
  
  .web-navbar .nav-menu a.active:hover {
	  font-size: 18px;
  }
}

.web-navbar .nav-menu a.active {
	
	background-image: linear-gradient(
		45deg,
		#e0bc66,
		#faea9b,
		#faea9b,
		#b67b31
	  );
	  
	  /* 裁切背景，使其只顯示在文字的區域內 */
	  -webkit-background-clip: text;
	  background-clip: text;
	  
	  /* 將文字顏色設為透明，這樣就能看見漸層背景 */
	  -webkit-text-fill-color: transparent;
	  color: transparent;
	  
	  
}



.web-navbar .nav-menu a.link-itemName {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.web-navbar .nav-menu a.link-itemName.active::before{
	content: '';
	
	display: inline-block;
	
	width: 16px;
	height: 16px;
	
	background-image: url('../images/submenu-bearicon.png'); 
	
	background-size: contain;
	
	background-repeat: no-repeat;
	
	vertical-align: middle;
	margin-right: 8px;
}

.web-navbar .hamburger-menu {
	display: none; /* 預設隱藏 */
	cursor: pointer;
}

.web-navbar .hamburger-menu .bar {
	width: 25px;
	height: 3px;
	background-color: #fff;
	margin: 5px 0;
}



/* fancy-box */

.fancy-lightbox-title {
	text-align: center;
	margin-bottom: 2rem;
}

.fancy-lightbox-body{
	width:80%;
	max-width: 1300px;
	margin: 0 auto;
	position: relative;
}

.fancy-lightbox-body #fancybox-body-img{
	width:100%;
	height:auto;
}

.fancy-lightbox-body #fancybox-body-img img{
	width:100%;
	height:auto;
}




.f-html{
	background: transparent!important;
}

a#fancybox_closeBtn{
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	top: -30px;
	right: -20px;
}

a#fancybox_closeBtn_pop {
	width: 60px;
	height: 60px;
	display: block;
	position: absolute;
	top: -10px;
	right: 50px;
}

#fancybox-content a#fancybox_closeBtn,
#fancybox-content a#fancybox_closeBtn_pop{
	top: 10px;
	right: 10px;
}

a#fancybox_closeBtn img,
a#fancybox_closeBtn_pop img{
	width:100%;
	height:auto;
}


.activity-detail {
	padding: 8px;
	font-family: 'Microsoft JhengHei', sans-serif;
	background-color: #122646;
	color: white;
	border: 2px solid transparent;
	background-image: 
		linear-gradient(#161617, #161617),
		linear-gradient(45deg, #D4AF37, #FFD700, #B8860B, #D4AF37);
	background-origin: padding-box, border-box;
	background-clip: padding-box, border-box;
	margin: 10px;
	border-radius: 40px 0 40px 0;
}

.activity-detail p.brandlabel{
	color: #e8d280;
	border:1px solid #e8d280;
	padding:.25rem .5rem;
	width: fit-content;
}

.activity-detail p.small{
	line-height: 1.2;
}

.content-wrapper {
	display: flex;
	gap: 30px;
	align-items: flex-start;
	padding:2rem;
	background: #0e2d50;
	border-radius: 30px 0 30px 0;
}



.image-section {
	flex: 1;
}

.detail-image {
	width: 100%;
	height: auto;
	border-radius:20px 0 0 0;
	object-fit: cover;
}

.detail-image.noradius{
	border-radius:0;
}

.text-section {
	flex: 1;
}

.activity-title {
	color: #f7e182;
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 25px;
	line-height: 1.4;
	text-align: left;
}

.activity-info p {
	margin-bottom: 5px;
	line-height: 1.8;
	color: white;
	font-size: 16px;
}

.label {
	color: #f7e182;
	font-weight: bold;
}




/* 8. Footer */
.footer {
	position: relative;
	background-color: #e5e5e4;
	padding: 20px 0;
	text-align: center;
}

.footer::before {
	content: ''; /* <--- 偽元素必須有 content 屬性 */
	position: absolute; /* <--- 絕對定位 */
	top: 0; /* <--- 讓它位於 footer 的頂部 */
	left: 0;
	width: 100%; /* <--- 寬度與 footer 相同 */
	height: 5px; /* <--- 高度即為漸層線的粗細 */
	
	/* 設定您要的金黃色漸層 */
	background: linear-gradient(to right, #e0bc66, #b67b31, #fbee96);
}

.footer .web-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom:0;
}

.footer .disclaimer {
	font-size: 1.9rem;
	color: #888;
	padding-right:1.5rem;
}

.footer .footerinfo{
	border-left:1px solid #888;
	padding-left:1.5rem;
}

.footer .footerinfo p {
	font-size: 0.9rem;
	margin: 0;
	color: #888;
	text-align: left;
}




@media (max-width: 768px) {
	
	.fancy-lightbox-body{
		width:95%;
		max-width: 95%;
	}
	
	#fancybox-content a#fancybox_closeBtn,
	#fancybox-content a#fancybox_closeBtn_pop{
		top: 10px;
		right: -10px;
	}
	
	.web-navbar .nav-menu a.closeNavBtn{
		width:32px;
		height:32px;
		display: block;
		position: absolute;
		top:10px;
		right:10px;
	}
	
	.web-navbar .nav-menu a.closeNavBtn img{
		width:100%;
		height:auto;
	}
	
	.web-navbar .nav-menu a.closeNavBtn:not(.link-itemName)::after{
		background: none;
	}
	
	a#fancybox_closeBtn{
		width: 40px;
		height: 40px;
		display: block;
		position: absolute;
		top: -20px;
		right: -20px;
	}
	
	a#fancybox_closeBtn_pop {
		width: 40px;
		height: 40px;
		display: block;
		position: absolute;
		top: -10px;
		right: 20px;
	}
	
	.web-navbar .nav-menu a.index-link{
		width:90%;
	}
	
	.content-wrapper {
		flex-direction: column;
		gap: 20px;
	}
	
	.activity-title {
		font-size: 20px;
		margin-bottom: 20px;
	}
	
	.activity-info p {
		font-size: 14px;
		margin-bottom: 15px;
	}
	
	.activity-detail {
		padding: 15px;
	}
	
	.web-navbar .web-container{
		padding: 0 0;
	}
	
	html,body{
		overflow-x: hidden;
	}
	
	.mainWrapper{
		max-width:100%;
		min-width: 100%;
		margin:0 auto;
	}
	
	.web-container {
		width: 100%;
		max-width: 100%;
		margin: 0 auto;
		margin-bottom:10px;
		padding: 20px;
	}
	
	/* .invitation-section{
		padding:0;
	} */
	
	.invitation-section .web-container {
		padding: 20px 5px;
		padding-top:0;
	}
	
	.for_m{
		display: block!important;
	}
	
	.for_laptop{
		display: none!important;
	}
	
	.web-navbar {
		padding: 1rem 1rem;
		box-sizing: border-box;
	}
	
	.web-navbar .nav-menu {
		display: none; /* 預設隱藏選單 */
		position: fixed;
		top: 0;
		right: -100%; /* 隱藏在右側 */
		width: 70%;
		height: 100%;
		background-color: #1a223f;
		padding-top: 60px;
		transition: right 0.3s ease-in-out;
		z-index: 9;
	}
	
	.web-navbar .nav-menu a{
		display: flex;
		flex-direction: column;
		align-items: center;
		width:100%;
		font-size: 1.1rem;
		padding:0;
	}
	
	
	.web-navbar .nav-menu a:not(.link-itemName)::after {
		content: '';
		position: relative;
		display: block;
		width: 100%;
		height: 1px;
		margin-top: 10px;
		background: linear-gradient(
				to right,
				rgba(255,199,0,0),
				#ffd400,
				#e9a000,
				#d18a00,
				rgba(255,199,0,0)
			);
	}
	
	
	.web-navbar .nav-menu.active {
		display: flex;
		right: 0;
		justify-content: center;
	}
	
	.web-navbar .nav-menu ul li ul.link-item-wrapper{
		margin-left:0;
		list-style: none;
	}
	
	.web-navbar .nav-menu ul li ul.link-item-wrapper li a:link,
	.web-navbar .nav-menu ul li ul.link-item-wrapper li a:visited,
	.web-navbar .nav-menu ul li ul.link-item-wrapper li a:active{
		color:#fff;
		font-size: 1rem;
	}
	
	.web-navbar .nav-menu ul li ul.link-item-wrapper li a:hover{
		color:#f7e182;
	}
	
	/* .web-navbar .nav-menu ul li ul.link-item-wrapper li a span:last-child{
		margin-left:0.5rem;
	} */
	
	.web-navbar .logo img{
		height: 25px;
	}
	
	.web-navbar .nav-menu ul {
		flex-direction: column;
		align-items: center;
	}
	
	.web-navbar .nav-menu li {
		margin: .5rem 0;
	}
	
	.web-navbar .hamburger-menu {
		display: block; /* 顯示漢堡選單 */
	}
	
	.web-navbar .nav-marker{
		display: none;
	}
	
	
	.shinestar_line img {
		width: 80%;
	}
	
	
	a.regBtn {
		position: fixed;
		bottom: 5%;
		right: 2%;
		width: 120px;
		height: 120px;
		display: block;
		z-index: 3;
	}	
	
	.content p {
		font-size: 1.1rem;
		color: #fff;
		line-height: 1.6;
		margin-bottom: .5rem!important;
	}

	.footer .web-container {
		flex-direction: column;
	}

	.footer .footerinfo {
		margin-top: 10px;
	}
}