@import url('https://fonts.googleapis.com/css2?family=Chiron+Sung+HK:ital,wght@0,200..900;1,200..900&display=swap');

body {
	font-family: "Chiron Sung HK", serif;
}

.hover-image {
	content: url('../img/section01/btn-01.webp');
	transition: 0.3s ease-in-out;
	cursor: pointer;
}
.hover-image:hover {
	content: url('../img/section01/btn-01_active.webp');
}

.hover-image-2 {
	content: url('../img/section01/btn-02.webp');
	transition: 0.3s ease-in-out;
	cursor: pointer;
}
.hover-image-2:hover {
	content: url('../img/section01/btn-02_active.webp');
}

.milestone-img {
	@apply w-[280px] max-sm:w-[180px] max-w-none;
}

.completed-label {
	@apply absolute bottom-[60px] w-[100px] max-sm:w-[80px];
}

.swiper-slide {
	display: flex !important;
}

.register-frame-m {
	position: relative;
}

@layer components {
  .register-frame-m::before,
  .register-frame-m::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 50;
  }
  .register-frame-m::before {
    background-image: url("../img/section02/frame-l.webp");
    left: -200px;
  }
  .register-frame-m::after {
    background-image: url("../img/section02/frame-r.webp");
    right: -200px;
  }
}

.hover-image02 {
	content: url('../img/section02/btn-mregister_xactive.webp');
	transition: 0.3s ease-in-out;
	cursor: pointer;
}

.hover-image02:hover,
.hover-image02.active {
	content: url('../img/section02/btn-mregister_active.webp');
}

.hover-image02-2 {
	content: url('../img/section02/btn-eregister_xactive.webp');
	transition: 0.3s ease-in-out;
	cursor: pointer;
}

.hover-image02-2:hover,
.hover-image02-2.active {
	content: url('../img/section02/btn-eregister_active.webp');
}

.gradient-text {
	background: linear-gradient(180deg, #61312F, #993220);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bold;
	font-size: 18px;
}

.gradient-text:hover {
	-webkit-text-fill-color: #ffffff;
	-webkit-text-stroke: 0.25px rgba(246, 98, 0, 0.8);
	text-shadow: 0 0 18px rgba(246, 98, 0, 0.5);
	transform: scale(1.15);
	font-weight: 900;
	cursor: pointer;
}

#bgInfo01,
#bgInfo02 {
  transition: all 0.7s ease-out;
  opacity: 0;
  transform: translateY(10px);
}

.reward-inactive {
	filter: grayscale(1) brightness(0.6) saturate(0.5) !important;
	transition: filter 0.5s ease;
	/*pointer-events: none;*/
}

.group:hover .reward-inactive{
	filter: grayscale(1) brightness(0.6) saturate(0.5) !important;
}

.reward-active {
	filter: none !important;
	transition: filter 0.5s ease;
}

.reward-container {
	opacity: 0;
	transform: translateY(10px);
	z-index: 10;
}

.reward-container:not(.hidden) {
	opacity: 1;
	transform: translateY(0);
	transition: all 0.5s ease;
}

.swiper-button-next,
.swiper-button-prev {
	z-index: 20;
}

#inkSection {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #000000;
}

.bg-layer {
	position: absolute;
	width: 100%;
	height: 100%;
	inset: 0;
	object-fit: cover;
}

/*#bgTop01 {
	z-index: 10;
	transition: opacit 800ms ease-in-out;
	background: url('../img/section03/bg01.webp');
}

#bgTop02 {
	z-index: 20;
	transition: opacit 800ms ease-in-out;
	background: url('../img/section03/bg02.webp');
}*/


#bgTop {
	z-index: 100;
	transition: opacit 800ms ease-in-out;
	background: url('../img/section03/bg03.webp') center;
	height: 100vh;
	overflow-y: scroll;
}


/* -------------------------------- 
Main Content
-------------------------------- */
.cd-main-content {
	position: relative;
	z-index: 100;
	width: 100%;
	height: 100vh;
}

.buttons {
	position: absolute;
	top: 0;
	width: 100%;
	margin: 0 auto;
	transform: translate(0%, 50%);
	display: flex;
	justify-content: space-between;
	padding: 0 50px;
	z-index: 40;	
}

.btn01 {
	width: 126px;
	height: 500px;
	background: url('../img/section03/btn-l.webp') no-repeat;
	background-size: contain;
}

.btn02 {
	width: 126px;
	height: 500px;
	background: url('../img/section03/btn-r.webp') no-repeat;
	background-size: contain;
}

@media (max-width: 768px) {
	  .btn01,
	  .btn02 {
		width: 80px;      /* 缩小宽度 */
		height: 300px;    /* 缩小高度 */
		background-size: contain; /* 确保图案不变形 */
	  }
	  
	  .buttons {
		justify-content: center;   /* 居中排列 */
		gap: 300px;                 /* 按钮之间留空 */
		padding: 0;                /* 去掉左右 padding */
		transform: translate(0%, 100%); /* 可以微调位置 */
	  }
}

/* 更小屏幕（例如手机直立 480px 以下） */
@media (max-width: 480px) {
	  .btn01,
	  .btn02 {
		width: 60px;
		height: 220px;
	  }
	  
	  .buttons {
		flex-direction: row;  /* 改为垂直方向 */
		align-items: center;     /* 居中对齐 */
		gap: 150px;
		transform: translate(0%, 152%);
	  }
}


/* -------------------------------- 
Modal window 
-------------------------------- */
body.modal-open {
	overflow: hidden;
	height: 100vh;
}



.cd-modal {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background-size: cover;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s;
	pointer-events: none;
}	

.cd-modal .modal-content {
	height: 100%;
	overflow-y: auto;
	padding: 3em 5%;
	color: #e4dcca;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.cd-modal h1::after {
	/* ink/brush separation */
	content: '';
	display: block;
	width: 130px;
	height: 18px;
	margin: 0.2em auto 0;
}

.cd-modal .modal-close {
	/* 'X' icon */
	position: absolute;
	z-index: 200;
	top: 50px;
	left: 5%;
	background: url('../img/section03/btn_back.webp') no-repeat center center;
	height: 145px !important;
	width: 145px !important;
	/*border-radius: 50%;*/
	/*background: rgba(0, 0, 0, 0.3) url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRw%0D%0AOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjI0cHgiIGhl%0D%0AaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0Ij48ZyAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUo%0D%0AMCwgMCkiPgo8cGF0aCBmaWxsPSIjZTRkY2NhIiBkPSJNMTkuNyw0LjNjLTAuNC0wLjQtMS0wLjQt%0D%0AMS40LDBMMTIsMTAuNkw1LjcsNC4zYy0wLjQtMC40LTEtMC40LTEuNCwwcy0wLjQsMSwwLDEuNGw2%0D%0ALjMsNi4zbC02LjMsNi4zJiMxMDsmIzk7Yy0wLjQsMC40LTAuNCwxLDAsMS40QzQuNSwxOS45LDQu%0D%0ANywyMCw1LDIwczAuNS0wLjEsMC43LTAuM2w2LjMtNi4zbDYuMyw2LjNjMC4yLDAuMiwwLjUsMC4z%0D%0ALDAuNywwLjNzMC41LTAuMSwwLjctMC4zJiMxMDsmIzk7YzAuNC0wLjQsMC40LTEsMC0xLjRMMTMu%0D%0ANCwxMmw2LjMtNi4zQzIwLjEsNS4zLDIwLjEsNC43LDE5LjcsNC4zeiIvPgo8L2c+PC9zdmc+') no-repeat center center;*/
	/* image replacement */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	visibility: hidden;
	opacity: 0;
	/*-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);*/
	transform: scale(0);
	/*-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;*/
	transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}

.page-menu {
	list-style: none;
	font-size: 30px;
	color: #000;
	text-align: center;
	padding: 10px;
	text-transform: uppercase;
}

.no-touch .cd-modal .full-menu .modal-close:hover {
	background-color: rgba(0, 0, 0, 0.5);
}

.cd-modal.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	-webkit-transition: opacity 0.7s, visibility 0s;
	-moz-transition: opacity 0.7s, visibility 0s;
	transition: opacity 0.7s, visibility 0s;
}

.cd-modal.visible .modal-content {
	/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
	-webkit-overflow-scrolling: touch;
}

.cd-modal.visible .modal-close {
	visibility: visible;
	opacity: 1;
	-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);
}

@media only screen and (min-width: 1100px) {
  .cd-modal .modal-content {
		padding: 6em 5%;
  }
  .cd-modal .modal-close {
		height: 60px;
		width: 60px;
  }
  .cd-modal p {
		font-size: 2rem;
  }
}
/* -------------------------------- 
Transition Layer 
-------------------------------- */
.cd-transition-layer {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	height: 100%;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	pointer-events: none;
}

.cd-transition-layer .bg-layer {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: 100%;
	width: 2500%;

	/* 这是被遮罩显示出来的背景图 */
	background: url('../img/section03/bg02_info.webp')
	background-size: auto;
	width: 100%;
	height: 100vh;

	/* 使用墨水图当作遮罩 mask */
	-webkit-mask-image: url('https://raw.githubusercontent.com/CodyHouse/ink-transition-effect/master/img/ink.png');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position: center;

	/* 非Webkit兼容写法（可选） */
	mask-image: url('https://raw.githubusercontent.com/CodyHouse/ink-transition-effect/master/img/ink.png');
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-position: center; 
}

.cd-transition-layer.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.cd-transition-layer.opening .bg-layer {
	-webkit-animation: cd-sequence 0.8s steps(24);
	-moz-animation: cd-sequence 0.8s steps(24);
	animation: cd-sequence 0.8s steps(24);
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	pointer-events: auto;
}

.cd-transition-layer.closing .bg-layer {
	-webkit-animation: cd-sequence-reverse 0.8s steps(24);
	-moz-animation: cd-sequence-reverse 0.8s steps(24);
	animation: cd-sequence-reverse 0.8s steps(24);
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	pointer-events: auto;
}

.no-cssanimations .cd-transition-layer {
	display: none;
}
@-webkit-keyframes cd-sequence {
	0% {
		/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
		-webkit-transform: translateY(-50%) translateX(-2%);
	}
	100% {
		/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
		-webkit-transform: translateY(-50%) translateX(-98%);
	}
}
@-moz-keyframes cd-sequence {
	0% {
		/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
		-moz-transform: translateY(-50%) translateX(-2%);
	}
	100% {
		/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
		-moz-transform: translateY(-50%) translateX(-98%);
	}
}
@keyframes cd-sequence {
	0% {
		/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
		-webkit-transform: translateY(-50%) translateX(-2%);
		-moz-transform: translateY(-50%) translateX(-2%);
		-ms-transform: translateY(-50%) translateX(-2%);
		-o-transform: translateY(-50%) translateX(-2%);
		transform: translateY(-50%) translateX(-2%);
	}
	100% {
		/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
		-webkit-transform: translateY(-50%) translateX(-98%);
		-moz-transform: translateY(-50%) translateX(-98%);
		-ms-transform: translateY(-50%) translateX(-98%);
		-o-transform: translateY(-50%) translateX(-98%);
		transform: translateY(-50%) translateX(-98%);
	}
}	
@-webkit-keyframes cd-sequence-reverse {
	0% {
		-webkit-transform: translateY(-50%) translateX(-98%);
	}
	100% {
		-webkit-transform: translateY(-50%) translateX(-2%);
	}
}
@-moz-keyframes cd-sequence-reverse {
	0% {
		-moz-transform: translateY(-50%) translateX(-98%);
	}
	100% {
		-moz-transform: translateY(-50%) translateX(-2%);
	}
}
@keyframes cd-sequence-reverse {
	0% {
		-webkit-transform: translateY(-50%) translateX(-98%);
		-moz-transform: translateY(-50%) translateX(-98%);
		-ms-transform: translateY(-50%) translateX(-98%);
		-o-transform: translateY(-50%) translateX(-98%);
		transform: translateY(-50%) translateX(-98%);
	}
	100% {
		-webkit-transform: translateY(-50%) translateX(-2%);
		-moz-transform: translateY(-50%) translateX(-2%);
		-ms-transform: translateY(-50%) translateX(-2%);
		-o-transform: translateY(-50%) translateX(-2%);
		transform: translateY(-50%) translateX(-2%);
	}
}

@media (max-width: 991px){
	.cd-transition-layer .bg-layer {
		background-size: no-repeat
	}
}


.hover-image-3 {
	content: url('../img/section03/tnc.webp');
	transition: 0.3s ease-in-out;
	cursor: pointer;
}
.hover-image-3:hover {
	content: url('../img/section03/tnc_hover.webp');
}




/****************************
TNC Modal
****************************/
.cd-submodal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.cd-submodal.is-visible {
	display: flex;
}

.submodal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}

.submodal-content {
	position: relative;
	background: url('../img/section03/popup_frame.webp') no-repeat center;
	background-size: contain;
	padding: 0;
	width: 100%;
	height: 100%;
	max-width: 1210px;
	max-height: 685px;
	z-index: 2001;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.btn-close {
	position: absolute;
	top: 20px;
	right: 20px;
	background: url('../img/section03/close.webp') no-repeat;
	background-size: contain;
	width: 60px;
	height: 60px;
	cursor: pointer;
	z-index: 2100;
}

@media (max-width: 991px) {
	.submodal-content {
		background-size: cover;
		max-height: 385px;
	}
}



.scrollable-ol {
  overflow-y: auto;      /* 开启纵向滚动 */
  scrollbar-width: thin; /* Firefox 自定义滚动条 */
  scrollbar-color: #552400 transparent; /* 滚动条颜色 */
}

/* Chrome / Edge / Safari */
.scrollable-ol::-webkit-scrollbar {
  width: 8px;
}
.scrollable-ol::-webkit-scrollbar-thumb {
  background-color: #552400;
  border-radius: 4px;
}
.scrollable-ol::-webkit-scrollbar-track {
  background: transparent;
}

.my-ol {
	list-style-type: decimal;
	padding-left: 1.5rem;
}

.my-ol li {
	margin-bottom: 0.5rem;
}

.my-ol ol {
	list-style-type: lower-alpha; /* 内层 ol 使用 a,b,c */
	padding-left: 1.5rem;
}

.my-ol ul {
	list-style-type: disc; /* 内层 ul 使用黑点 */
	padding-left: 1.5rem;
}



















/****************************
Footer
****************************/
/* footer */
.deskstop-view {
	display: flex;
}

.mobile-view {
	display: none;
}

.footer{
	font-family: var(--opensans);
	color: white;
	font-size: .8rem;
	width: 100%;
	max-width: 2800px;
	background-color: #141414;
	height: auto;
	position: relative;
	z-index: 9999;
}

.footer-wrapper {
	display: flex;
	flex-direction: column;
}

.footer-info {
	flex-direction: row;
	align-items: center;
}

.gsrr-wrapper {
	flex: 0 0 120px;
}

.footerInfo-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 50px;	
	gap: 20px;
}

.gsrr-info p {
	text-align: justify;
	max-width: 1000px;
	margin: 0;
	font-size: 0.8rem;
}

.company-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.comp-logo {
	display: flex;
	gap: 28px;
	align-items: center;
}

.comp-logo img {
	width: auto;
	height: 30px !important; 
	object-fit: contain;
}

.comp-info {
	font-size: 0.8rem;
	text-align: justify;
	flex-wrap: wrap;
	max-width: 350px;
	font-weight: 600;
	line-height: 1.4;
}

.footer-border {
	width: 100%;
	height: 1px;
	background: #fff;
	margin-top: 12px;
	opacity: 0.3;
}

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

.footer-copyrightWrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.footer-copyrightWrapper {
	font-size: 0.8rem;
	margin-top: 8px;
}

.terms-wrapper a {
	padding-left: 8px;
	padding-right: 8px;
	color: #fff;
	text-decoration: none;
}

.terms-wrapper a:hover {
	text-decoration: underline;
}

.terms-spread {
	border-left: 1.2px solid #fff;
	/*border-right: 1.2px solid #fff;*/
}


/****** Chinese (CN) ******/
.cn-gsrr-info p {
	text-align: justify;
	flex-wrap: wrap;
	font-size: 0.8rem;
}

.cn-footerInfo-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;	
	gap: 0;
}

@media (max-width: 991px){
	.deskstop-view {
		display: none;
	}
	
	.mobile-view {
		display: flex;
	}
	
	.footer {
		padding: 25px;
		/* height: 60vh; */
}

	.m-footer-info {
		flex-direction: column;
		gap: 30px;
	}

	.m-gsrr-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		gap: 16px;
	}

	.img-gsrrLogo {
		max-width: 10%;
		height: 10% !important;
	}
	
	.footerInfo-wrapper {
		padding: 0;
	}
	
	.company-info {
		flex-direction: column;
		align-items: center;
	}
	
	.comp-info {
		max-width: 100%;
		text-align: center;
	}
	
	.comp-logo img {
		height: 35px !important;
	}
	
	.footer-copyrightWrapper {
		flex-direction: column;
		align-items: center;
		font-size: 0.65rem;
	}
	
	.footer-copyrightWrapper p {
		margin-bottom: 0;
	}
	
	.cn-img-gsrrLogo {
		max-width: 10%;
		height: 10% !important;
	}
}


@media (max-width: 768px) {
	.deskstop-view {
		display: none;
	}
	
	.mobile-view {
		display: flex;
	}
	
	.footer{
		/* height: 60vh; */
	}
	
	.footer-wrapper {
		flex-direction: column;
		text-align: center;
	}
	
	.footerInfo-wrapper {
		width: 100%;
	}
	
	.img-gsrrLogo {
		max-width: 20%;
		height: 10% !important;
	}
	
	.footer-copyrightWrapper {
		margin-bottom: 50px;
	}
	
	/****** Chinese (CN) ******/
	.cn-img-gsrrLogo {
		max-width: 12%;
		height: 10% !important;
	}
}

@media (max-width: 568px) {
	.deskstop-view {
		display: none;
	}
	
	.mobile-view {
		display: flex;
	}
	
	.gsrr-info p {
		font-size: 0.7rem;
	}
	
	.company-info {
		gap: 15px;
	}
	
	.comp-info {
		font-weight: 500;
		font-size: 0.7rem;
	}
	
	.img-gsrrLogo {
		max-width: 28%;
		height: 10% !important;
	}
	
	.m-gsrr-wrapper {
		flex-direction: column;
		align-items: center;
	}
	
	.footer {
		padding: 40px 20px;
		/* height: 70vh; */
	}
	
	/****** Chinese (CN) ******/
	.cn-img-gsrrLogo {
		max-width: 18%;
		height: 10% !important;
	}
	
	.cn-gsrr-info p {
		font-size: 0.7rem;
	}
}

.iti {
  width:100%;
}

.g-recaptcha {
max-height: 50px !important;
}