* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
}

@media (max-width: 1200px) {
	.menu {
		background-image: linear-gradient(to right, rgba(255, 254, 236, 0.9) 0%, rgba(255, 251, 231, 0.7) 25%, rgba(5, 11, 25, 0.7) 100%);
	}

	.menu-toggle {
		display: block;
		margin-left: auto;
		z-index: 1000;
		background: none;
		border: none;
		font-size: 32px;
		color: white;
	}

	.menu-links {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		flex-direction: column;
		align-items: center;
		padding: 50px 0;
		gap: 12px;
		background-color: rgba(28, 29, 41, 0.8);
		backdrop-filter: blur(8px);
		transform: translateY(-100%);
		opacity: 0;
		transition: transform 0.3s ease, opacity 0.3s ease;
		z-index: 998;
	}

	.menu-links.show {
		transform: translateY(0);
		opacity: 1;
	}
}

.button-container {
	/*background-color: rgba(28,29,41,0.5);*/
	position: absolute;
	width: 80%;
	height: 100vh;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 5vh;
	padding-bottom: 10vh;
	z-index: 2;
}

.gamelogo {
	width: fit-content;
	height: auto;
	transform: translateX(-5%);
	margin-bottom: 5%;
}

.download-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	max-width: calc(320px * 5 + 4 * 10px);
	margin: 0 auto;
}

.downloadbtn {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: calc((100% - 4 * 10px) / 5);
	max-width: 441px;
}

.downloadbtn img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.2s ease;
	cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
	.downloadbtn img:hover {
		transform: scale(0.95);
	}
}

@media (hover: none) and (pointer: coarse) {
	.downloadbtn img.active {
		transform: scale(0.8);
	}
}

.downloadbtn img.active {
	transform: scale(0.8);
}

@media (max-width: 1200px) {
	.download-container {
		max-width: calc(230px * 3 + 2 * 10px);
	}

	.downloadbtn {
		flex-basis: calc((100% - 2 * 10px) / 3);
	}

	.gamestart img {
		width: 515px;
        height: 580px;
	}
}

@media (max-width: 768px) {
	.button-container {
		gap: 30px;
	}

	.gamelogo {
		width: 250px;
	}
	
	.download-container {
		max-width: calc(320px * 2 + 1 * 10px);
	}

	.downloadbtn {
		flex-basis: calc((100% - 1 * 10px) / 2);
	}

	.gamestart img,
	.gamestart {
		margin-top: 20px;
		width: 320px;
		height: 400px;
	}
}

@media (hover: none) and (pointer: coarse) {
	.downloadbtn img:active {
		transform: scale(0.95);
	}
}

/* 排行 */
.rank-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 2% 0;
	margin-bottom: 1%;
	gap: 10px;
}

.rankA,
.rankB {
	display: flex;
	flex-direction: column;
	flex-basis: clamp(280px, 48%, 516px);
	max-width: 516px;
	min-width: 280px;
	font-size: min(2vw, 21px);
	position: relative;
}

.rankA .ranktitle {
	position: absolute;
	top: calc(145 / 775 * 100%);
	left: 22%;
	transform: translateX(-50%);
	width: 50%;
	font-size: 1.6rem;
	font-weight: bold;
	margin: 0;
	justify-content: center;
	text-align: center;
	z-index: 2;
}

.rankfill {
	color: white;
	position: relative;
	z-index: 2;
}

.rankstroke {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	color: transparent;
	-webkit-text-stroke: 6px black;
	white-space: nowrap;
	z-index: 1;
}

@media (max-width: 1200px) {
	.rankA .ranktitle {
		margin-top: 0;
		font-size: 1.3em;
	}

	.rankstroke {
		color: transparent;
		-webkit-text-stroke: 4px black;
	}
}

@media (max-width: 768px) {
	.rankA .ranktitle {
		margin-top: 2%;
		font-size: 1em;
	}

	.rankstroke {
		color: transparent;
		-webkit-text-stroke: 5px black;
	}

	.rankA,
	.rankB {
		flex-basis: 90%;
		max-width: 90%;
		font-size: 21px;
	}
}

.rank-item {
	display: grid;
	grid-template-columns: 5% 45% 45%;
	/* 編號、名字、分數 */
	align-items: center;
	gap: 1em;
	padding: 0.2em 0;
	font-size: 1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.rank-item:last-child {
	border-bottom: none;
}

.num {
	text-align: left;
	color: #4D45D8;
	font-weight: bold;
}

/* 第一名 */
.rank-item:nth-child(1) .num {
	color: #CC9900;
	/* #C90 */
}

/* 第二名 */
.rank-item:nth-child(2) .num {
	color: #6699CC;
	/* #69C */
}

/* 第三名 */
.rank-item:nth-child(3) .num {
	color: #CC6600;
	/* #C60 */
}

.name,
.desc {
	font-size: clamp(18px, 1.5vw, 21px);
	white-space: nowrap;
	overflow: hidden;
	/* 防止萬一字還是太長溢出 */
}

.name {
	color: #006;
}

.desc {
	color: #F00;
	text-align: right;
}

/* 新增輪播容器樣式 */
.rank-carousel-container {
	position: relative;
	height: 100%;
}

.rank-slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.6s ease-in-out;
}

.rank-slide.active {
	opacity: 1;
	animation: slideInRight 0.8s ease-out forwards;
}

/* 新增輪播動畫 */
@keyframes slideInRight {
	from {
		transform: translateX(20%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* 輪播動畫 */
[class^="rank-item-groupA"],
.rank-item-groupB1,
.rank-item-groupB2 {
	position: absolute;
	left: 48%;
	transform: translateX(-50%);
	width: 85%;
	line-height: 1.4;
}

[class^="rank-item-groupA"] {
	top: calc(196 / 775 * 100%);
}

.rank-item-groupB1 {
	left: 50%;

	top: calc(194 / 775 * 100%);
}

.rank-item-groupB2 {
	left: 50%;
	top: calc(588 / 775 * 100%);
}

@media (max-width: 498px) {
	.rankA .ranktitle {
		top: 17%;
		font-size: 1.2em;
	}

	.rankA,
	.rankB {
		flex-basis: 90% !important;
		max-width: 90% !important;
		font-size: 18px !important;
	}

	.rank-item-groupA,
	.rank-item-groupB1,
	.rank-item-groupB2 {
		width: 80% !important;
		/* 可略微縮小寬度 */
		line-height: 1.2;
	}

	.rank-item {
		padding: 0.1em 0 !important;
		/* 減少上下內距 */
		font-size: 0.9em !important;
		/* 字體略縮小 */
		gap: 0.3em !important;
		/* 欄位之間更緊縮 */
	}
}

.rank-btm {
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: transparent;
}

/* 最新資訊 */
.frame_all {
	padding: 1% 15vw;
}

.news {
	width: 100%;
	height: 100%;
	max-height: 270px;
	padding: 15px 0 20px 0;
	border: 5px solid #FFE7AC;
	border-radius: 15px;
	background-color: #FFFDF0;
	overflow: hidden;
}

.news-item {
	position: relative;
	display: flex;
	gap: 8px;
	padding: 0 40px;
}

.news-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 90%;
	/* 控制底線寬度 */
	height: 2px;
	background-color: #EAEEEA;
}

.news_date {
	font-size: 14pt;
	color: #2b65b3;
	white-space: nowrap;
	/* 禁止換行 */
	flex-shrink: 0;
	/* 不要被壓縮 */
	font-weight: bold;
}

.news_title {
	text-decoration: underline;
	white-space: nowrap;
	/* 禁止換行 */
	letter-spacing: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 2em;
	/* 行高視情況可微調 */
}

.highlights {
	width: 100%;
	height: 100%;
	padding: 15px 0;
	border: 5px solid #FFE7AC;
	border-radius: 15px;
	background-color: #FFFDF0;
	position: relative;
}

.highlights-item {
	position: relative;
	display: flex;
	gap: 8px;
	padding: 0 40px;
	margin-bottom: 5px;
}

.highlights-item::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 5%;
	width: 90%;
	/* 控制底線寬度 */
	height: 2px;
	background-color: #EAEEEA;
}

.highlights_date {
	font-size: 1.2em;
	color: #2b65b3;
	white-space: nowrap;
	/* 禁止換行 */
	flex-shrink: 0;
	/* 不要被壓縮 */
	font-weight: bold;
}

.highlights_title {
	/*white-space: nowrap; /* 禁止換行 */
	letter-spacing: 2px;
	overflow: hidden;
	/*text-overflow: ellipsis;*/
	line-height: 1.2em;
	/* 行高視情況可微調 */
}

.highlights_URL {
	color: blue;
	text-decoration: underline;
}

.highlights_URL:hover {
	cursor: pointer;
}

.HL-LastUpdated {
	display: block;
	width: 95%;
	text-align: right;
	font-size: 0.8em;
}

@media (max-width: 498px) {
	.frame_all {
		padding: 0 5vw;
	}

	.news-item {
		padding: 0 10px;
	}

	.news_date,
	.news_title,
	.highlights_date,
	.highlights_title {
		font-size: 0.8em;
	}

	.highlights-item {
		padding: 0 5%;
	}

	.hide-on-mobile {
		display: none;
	}
}

@media (max-width: 498px) {
	.frame_all {
		padding: 0 5vw;
	}

	.news-item {
		padding: 0 10px;
	}

	/* **重點修改區域**：在手機尺寸下，將排列方向改為垂直 */
	.highlights-item {
		flex-direction: column;
		/* 將子元素垂直堆疊 */
		align-items: flex-start;
		/* 讓內容靠左對齊 (可選) */
		gap: 0;
		/* 垂直排列時可以移除或減少 gap */
		padding: 5px 5%;
	}

	.highlights_URL {
		color: blue;
		text-decoration: underline;
		word-break: break-all;
	}

	.highlights_date,
	.highlights_title {
		font-size: 1em;
		white-space: normal !important;
		/* 確保文字可以換行，解決 nowrap 問題 */
	}

	.highlights-item::after {
		left: 0;
		width: 100%;
		/* 讓底線填滿寬度 (可選) */
	}

	.highlights-item {
		padding: 0 5%;
	}

	.hide-on-mobile {
		display: none;
	}
}

/* 角色介紹 */
.role-content {
	width: 100%;
	aspect-ratio: 16 / 9;
	background-image: url("/img/roleBG.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	position: relative;
	overflow: hidden;
	/* 防止 role 動畫超出容器時出現捲軸 */
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	/* 水平平均排列 role */
}

.role-content h2 {
	font-size: 2.5rem;
	margin-bottom: 30px;
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* 新增一個容器來包裹所有角色圖片，用於滾動動畫 */
/* 調整角色列表，現在包含兩個相同的角色列表，以實現無縫滾動 */
.role-list {
	display: flex;
	height: 100%;
	align-items: center;
	width: 200%;
	/* 寬度加倍，容納兩組角色圖片 */
}

.role-list-wrapper {
	display: flex;
	height: 100%;
	align-items: center;
}

.role {
	height: 100%;
	width: auto;
	opacity: 0;
	transform: translateX(-150px);
	transition: transform 0.6s ease, opacity 0.6s ease;
	position: relative;
}

/* 加入 active 後滑入 + 撞擊彈跳 */
.role.active {
	opacity: 1;
	transform: translateX(0);
}

/* 撞擊時動畫 */
@keyframes bump {
	0% {
		transform: translateX(0);
	}

	30% {
		transform: translateX(-10px);
	}

	60% {
		transform: translateX(5px);
	}

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

.role.bump {
	animation: bump 0.3s ease;
}

/* 角色滾動動畫 */
/* 將動畫的總時間增加一倍，以配合兩組圖片的滾動 */
@keyframes scrollLeft {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-57%);
	}

	/* 滾動一個元素的寬度 */
}

/* 僅在桌面版應用滾動動畫 */
@media (min-width: 481px) {
	.role-list.scroll-animation {
		animation: scrollLeft 30s linear infinite;
	}
}

@keyframes slideInDown {
	0% {
		opacity: 0;
		transform: translateY(-50%) rotate(6deg);
		/* 保留旋轉角度 */
	}

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

@keyframes slideInUp {
	0% {
		opacity: 0;
		transform: translateY(50%) rotate(-6deg);
		/* 保留旋轉角度 */
	}

	100% {
		opacity: 1;
		transform: translateY(0) rotate(-6deg);
	}
}

.role-text1,
.role-text2 {
	position: relative;
	writing-mode: vertical-rl;
	/* 垂直書寫（從右到左） */
	text-orientation: upright;
	/* 每個字保持直立 */
	font-weight: bold;
	pointer-events: none;
	font-size: 4.5rem;
	color: white;
	display: none;
}

.stroke {
	position: absolute;
	color: transparent;
	-webkit-text-stroke: 10px black;
	z-index: 1;
}

.fill {
	position: relative;
	z-index: 2;
}

.role-text1 {
	left: 45%;
	transform: rotate(6deg);
	/* 順時針旋轉 90 度 */
	transform-origin: left;
	/* 旋轉中心點，可依需求調整 */
}

.role-text2 {
	bottom: 5%;
	right: 45%;
	transform: rotate(-6deg);
	/* 順時針旋轉 90 度 */
	transform-origin: right;
	/* 旋轉中心點，可依需求調整 */
}

@media (max-width: 480px) {
	.role-content {
		position: relative;
		aspect-ratio: 9 / 16;
		height: 100vh;
		background-position: top center;
		justify-content: center;
		background-image: url("/img/roleBG-m.webp");
		/* 使用佔位圖 */
	}

	.role-content .role-list {
		display: none;
		/* 手機版隱藏所有角色圖 */
	}

	.role-text1,
	.role-text2 {
		display: inline-block;
		opacity: 0;
		animation-fill-mode: forwards;
	}

	.role-text1 {
		left: 50%;
		transform: translateX(-50%) rotate(6deg);
		/* 修正偏移，置中顯示 */
		transform-origin: center;
	}

	.role-text2 {
		right: 50%;
		transform: translateX(50%) rotate(-6deg);
		/* 修正偏移，置中顯示 */
		transform-origin: center;
	}
}

/* 遊戲海報 */
.frame-gemeinfo {
	position: relative;
	width: 100%;
	height: 100vh;
	aspect-ratio: 9 / 16;
	overflow: hidden;
	background-image: url("/img/infoBG.webp");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center top;
}

/* 頂部黑色漸層 */
.frame-gemeinfo::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20%;
	background: linear-gradient(to bottom, #121212, rgba(18, 18, 18, 0));
	z-index: 2;
	pointer-events: none;
}

/* 底部淡黃漸層 */
.frame-gemeinfo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	background: linear-gradient(to top, rgba(255, 251, 230, 1), rgba(255, 251, 230, 0));
	z-index: 2;
	pointer-events: none;
}

/* 手機版隱藏底部漸層 */
@media (max-width: 480px) {

	.frame-gemeinfo::before,
	.frame-gemeinfo::after {
		content: none;
		height: 0;
	}
}

.infotitle {
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	color: white;
	font-weight: bold;
	font-size: 4rem;
	z-index: 3;
	pointer-events: none;
	text-shadow: 2px 5px 3px rgba(30, 37, 56, 1);
}

.gameinfo-content {
	/*background-color: aqua;*/
	height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gameinfo {
	margin-top: 10%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 100%;
}

.slider {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: visible;
	width: 100%;
}

.slide {
	width: 100%;
	max-width: 960px;
	height: auto;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	transition: all 0.5s ease;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 1);
}

.slide img {
	width: 100%;
	height: auto;
	display: block;
}

/* 遮罩層：預設為半透明黑，中央圖片時隱藏 */
.slide::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	opacity: 1;
	pointer-events: none;
	z-index: 3;
	transition: opacity 0.5s ease;
}

.slide.active {
	z-index: 3;
	pointer-events: auto;
}

.slide.active::before {
	opacity: 0;
}

.slide.left,
.slide.right {
	z-index: 2;
}

.arrow {
	position: absolute;
	z-index: 998;
	width: 52px;
	height: 88px;
	margin-top: 12%;
	cursor: pointer;
	transition: 0.5s ease;
}

.arrow:active {
	content: url("/img/arrow2.webp");
}

/* 右箭頭動畫 */
.arrow-right {
	margin-right: -65%;
	animation: bounceRight 1.5s infinite ease-in-out;
}

/* 左箭頭動畫（含翻轉） */
.arrow-left {
	margin-left: -65%;
	animation: bounceLeft 1.5s infinite ease-in-out;
}

/* 右側箭頭動畫：左右跳動 */
@keyframes bounceRight {

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

	50% {
		transform: scale(1.05) translateX(-5px);
	}
}

/* 左側箭頭動畫：左右跳動 + 保留鏡像 */
@keyframes bounceLeft {

	0%,
	100% {
		transform: scale(1) rotateY(180deg) translateX(0);
	}

	50% {
		transform: scale(1.05) rotateY(180deg) translateX(-5px);
	}
}

@media (max-width: 1600px) {
	.infotitle {
		top: 10%;
	}

	.gameinfo {
		margin-top: 18%;
	}

	.arrow {
		margin-top: 20%;
	}

	.arrow-right {
		margin-right: -82%;
	}

	.arrow-left {
		margin-left: -82%;
	}
}

@media (max-width: 1280px) {
	.slider {
		width: 80%;
	}

	.infotitle {
		top: 5%;
	}

	.gameinfo {
		margin-top: 15%;
	}

	.arrow {
		margin-top: 15%;
	}

	.arrow-right {
		margin-right: -93%;
	}

	.arrow-left {
		margin-left: -93%;
	}
}

@media (max-width: 768px) {
	.slider {
		width: 80%;
	}

	.frame-gemeinfo {
		height: 60vh;
	}

	.infotitle {
		top: 2%;
	}

	.gameinfo {
		margin-top: -20%;
	}

	.arrow {
		margin-top: -18%;
	}

	.arrow-right {
		margin-right: -93%;
	}

	.arrow-left {
		margin-left: -93%;
	}
}

@media (max-width: 480px) {
	.slider {
		width: 100%;
	}

	.frame-gemeinfo {
		height: 280px;
		padding: 5% 0;
		background-size: cover;
		background-position: center;
	}

	.gameinfo-content {
		margin-top: 25%;
		flex-direction: column;
		height: auto;
		padding: 0;
	}

	.gameinfo {
		margin-top: 10%;
		width: 75%;
	}

	.infotitle {
		top: 2%;
		font-size: 2rem;
	}

	.arrow {
		width: 26px;
		height: 44px;
		margin-top: 10%;
	}
}

/* 漫畫框分隔線 */
.white-divider {
	width: 100%;
	background-color: white;
	height: 20px;
	/* 白色區域高度 */
	border-top: 3px solid black;
	border-bottom: 3px solid black;
	display: none;
}

@media (max-width: 480px) {
	.white-divider {
		display: block;
	}
}

/* 底部下載資訊 */
.bottom-info {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0 10%;
}

.bottom-info-right {
	display: grid;
	grid-template-rows: auto auto;
	justify-items: center;
	align-items: center;
	row-gap: 20px;
}

.startnow.active {
	transform: scale(0.95);
}

@media (hover: hover) and (pointer: fine) {
	.startnow:hover {
		transform: scale(0.95);
	}
}

/* 定義放大縮小動畫 */
@keyframes scale-jelly {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(0.98);
	}

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

/* 定義果凍彈跳動畫 */
@keyframes jelly {

	0%,
	100% {
		transform: scale(1, 1);
	}

	25% {
		transform: scale(0.9, 1.1);
	}

	50% {
		transform: scale(1.1, 0.9);
	}

	75% {
		transform: scale(0.95, 1.05);
	}
}

/* 預設應用無限循環的放大縮小動畫 */
.jelly-button {
	animation: scale-jelly 3s ease-in-out infinite;
}

/* 應用果凍彈跳動畫時，移除放大縮小動畫 */
.jelly-button.jelly {
	animation: jelly 0.6s ease;
}

/* 外層縮放容器 */
.download-wrapper {
	display: flex;
	justify-content: center;
	transform-origin: top center;
	width: 100%;
}

@media (max-width: 1200px) {
	.download-wrapper {
		transform: scale(0.85);
	}
}

@media (max-width: 768px) {
	.bottom-info {
		flex-direction: column;
		/* 改為垂直排列 */
		align-items: center;
		padding: 20px 5%;
		/* 減少左右空間 */
	}

	.bottom-info .icon {
		margin: 0 0 20px 0;
		/* 改為下方間距 */
	}

	.download-wrapper {
		transform: scale(1);
	}

	.bottom-info-right {
		width: 100%;
		/* 讓內部內容自適應 */
		align-items: center;
		/* 確保內容置中 */
	}
}

/*返回頂部*/
.backtop {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 104px;
	height: 104px;
	background-image: url("/img/backtop.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
	cursor: pointer;
	z-index: 999;
	opacity: 0;
	pointer-events: none;
	transition: transform 0.3s ease, opacity 0.3s ease;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

/* 顯示按鈕用 */
.backtop.show {
	opacity: 1;
	pointer-events: auto;
}

/* 桌機懸停縮小 */
@media (hover: hover) and (pointer: fine) {
	.backtop:hover {
		transform: scale(0.95);
	}
}

/* 手機：按鈕尺寸變小 + 點擊縮小效果 */
@media (hover: none),
(max-width: 768px) {
	.backtop {
		width: 56px;
		height: 56px;
	}

	.backtop:active {
		transform: scale(0.85);
	}
}

.buycoinbanner {
	display: flex;
	justify-content: center;
	width: 75%;
	/* 容器佔滿全寬或自訂如 90% */
	max-width: 100vw;
	/* 絕對不超出螢幕 */
	margin: 20px auto;
	/* 水平置中，並給予上下間距 */
	gap: 2%;
	overflow: hidden;
	background-color: transparent;
}

@media (max-width:768px) {
	.buycoinbanner {
		margin: 10px auto;
		width: 100%;
	}
}

.buycoinbanner img {
	flex: 1;
	/* 兩張圖平分 */
	min-width: 0;
	/* 防止圖片撐破容器 */
	width: 100%;
	height: auto;
	/* 等比縮放 */
	display: block;
	object-fit: cover;
	/* 確保填滿區域 */
}

.buycoinbanner img:hover {
	filter: brightness(0.7);
	/* 懸停時變暗，營造停止感 */
}

/* 進入活動頁BANNER */
.gotoevent {
	display: flex;
	justify-content: center;
	width: 80%;
	max-width: 100vw;
	border-radius: 50px;
	margin: 20px auto;
}

.gotoevent img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	object-fit: cover;
}

.gotoevent img:hover {
	filter: brightness(0.7);
}

@media (max-width:768px) {
	.gotoevent {
		width: 100%;
	}

	.gotoevent img {
		border-radius: 0;
	}
}