* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}


html, body {width: 100%; min-height: 100vh; margin: 0; padding: 0; font-family: "Open Sans", "Microsoft JhengHei", Arial, sans-serif; overflow-x: hidden;}
	.wrapper {width: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; background-image: url('../img/bg3115.jpg'); background-attachment: fixed; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #bec1c6;}
	/* WEB 版本（桌面版）防止垂直滾動 */
	@media screen and (min-width: 768px) {
		html, body {
			height: 100vh;
			overflow-y: hidden;
		}
		.wrapper {
			height: 100vh;
			overflow-y: hidden;
		}
		/* ticketUse 頁面允許顯示所有內容 */
		.ticketUse .wrapper {
			min-height: 100vh;  /* 改為 min-height，允許內容超出 */
			height: auto;  /* 改為 auto，根據內容自動調整 */
			overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
		}
	}
		header {display: block;width: 100%;position: fixed;top: 0px;left: 0px;z-index: 9995;margin: 20px auto;padding: 10px 10px;
		
		/*
		background: rgba(255, 255, 255, 0.5); 
		background: linear-gradient(-45deg, rgba(74, 136, 201, 0.5) 25%, 
		rgba(79, 184, 184, 0.5) 25%); 
		background: rgba(28, 53, 79, 0.5);*/
		
		}
		.drawlots header,.finished header, .publishDraw header, .publishNumber header, .ticketReceive header, .ticketUse header {margin: 0 auto; background: none;}
			/* 桌面版 ticketUse 頁面隱藏 logoWrap */
			.ticketUse header #logoWrap {
				display: none;
			}
			#logoWrap {display: flex;align-items: center;}
			#logoWrap #logo {flex:0; width: 60px; margin: 0 10px;}
			#logoWrap h1 {font-size: 1.5em;}

			.btnMenu {display: none;}
			nav {}
				nav ul {display:block; margin:0; padding:0; list-style: none; text-align: right;}
				nav ul li {display: inline-block; margin: 10px 8px; font-weight: bold;}

		main {padding: 80px 0 0;}
		.drawlots main {}
		.donscan main,.busy main {}
		.finished main {}
		.publishDraw main {}
		.publishNumber main {}
		.ticketReceive main, .ticketUse main {}
			section { min-height: calc(100vh - 100px); padding: 100px 25px;}
			.ticketUse section { 
				min-height: auto; 
				max-height: none;  /* 移除高度限制，確保所有內容顯示 */
				padding-bottom: 50px;
				overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
			}
				.sectionInner {position: relative; display: block; width: 100%; max-width: 1250px; height: 100%; margin: 0 auto;}
					.sectionTitle {width: 100%; max-width: 960px; margin: 0 auto 40px; text-align: center; color: #fff; letter-spacing: 3px;}
						.sectionTitle h2 {margin-bottom: 20px;text-shadow: 5px 5px 5px #335c8b;}
						.row {margin: 20px auto;}
							.row .rowItems {width: 100%; max-width: 300px;}
			
			/*home*/
			#home {height: calc(100vh - 100px);}
				.slogan {width: 100%; max-width: 600px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -55%);margin: 0 auto;text-align: center;/*animation: fadeIn ease 2s;-webkit-animation: fadeIn ease 2s;-moz-animation: fadeIn ease 2s;-o-animation: fadeIn ease 2s;-ms-animation: fadeIn ease 2s;*/}
					.sloganTop {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;margin:15px auto;}
						#logo {width: 85px; margin: 10px 20px;}
						#logo+h2 {letter-spacing: 5px; color: #fff;}
					#logo_don {margin: 20px auto;}
					hr.hrTop {height: 20px;margin: 0px auto;background: repeating-linear-gradient(-45deg,transparent,transparent 20px,yellow 20px,yellow 35px);}
					hr.hrBottom {height: 20px;margin: 0px auto;background: repeating-linear-gradient(45deg,transparent,transparent 20px,yellow 20px,yellow 35px);}
			
			/*index - 出門挺運動*/		
			#index {}
				.ticketWrap {text-align: center;}
					.ticketWrap img {width: 600px;}
					.ticketItem {padding: 15px 20px; text-align: center;}

			/*who - 誰可以用*/
			#who {}

			/*where - 如何取得*/
			#where {}
				.stepWrap {display: flex; flex-wrap: wrap; justify-content: space-around;}
					.steps {display: block; width: 50px; height: 50px; line-height: 50px; margin: 10px auto; text-align: center; border-radius: 100%; background-color: #fff; color: #2980b9;}
						.thumbQrcode {width: 100px;}
				#rotate {display: block; transform: rotate(90deg);}

			/*range - 使用範圍*/
			#range {}
				/*.imgSports,.imgGame,.imgOutfit {width: 100%;}*/
			
			/*info - 更多資訊*/
			#info {}
				.qrcode {width: 300px;padding: 15px;background-color: #fff;}

			/*draw lots - 登記抽籤*/
			#drawLots {padding: 15px 25px;}
				#drawLots .sectionTitle {margin: 0 auto;}
				#drawLots .row {margin: 20px auto 0;}
				.ticketBox {padding: 60px 0;}
				#ticketImg {max-width: 500px; transform: rotate(15deg);}
				.noteRow {display: flex; flex-wrap: wrap; justify-content: center;}
				.noteCol {flex: none; padding: 10px 20px;}
				.telWrap .noteCol {padding: 0;}
				.noteCol * {padding: 10px 20px;}
				.bb {border-bottom: 1px solid #ffff64;}
				.telWrap {width: 100%;max-width: 800px;margin: 0 auto;}

			/*donScan - 掃描入口*/
			#donScan {padding: 25px;}
			.scanWrap {position: relative; padding: 0;}
				#scanHand {max-width: 270px;}
				#scanTitle {display: inline-block;position: relative;left: 50%;bottom: 0;transform: translate(-50%,-50%);padding: 5px 60px;background-color: #fff;color: #2a6eb5;border-radius: 20px;font-size: 3.125em;}
			
			/*index_finished - 登記截止入口*/
			#finished {padding: 25px 25px 50px;}
			#finished .ticketBox {padding: 0;}
			#finished #ticketImg {width: 300px;margin: 0;transform: rotate(0deg);}
			#finished .deadlineDate {margin: 0 20px;font-size: 8.75em;}
			#finished .deadlineTime {margin: 0 10px;}
			.icons {flex: none; width: 150px; margin: 20px;}

			/*index_publishDraw - 公開抽籤時間入口*/
			#publishDraw {padding: 25px 25px 50px;}
			#publishDraw .ticketBox {padding: 20px 0;}
			#publishDraw #ticketImg {transform: rotate(0deg);}
			#publishDraw .deadlineDate {margin: 0 20px;font-size: 7.5em;}
			#publishDraw .deadlineTime {margin: 0 10px;}

			/*index_publishNumber - 抽籤結果公布*/
			#publishNumber {padding: 25px;}
			#publishNumber .ticketBox {padding: 20px 0;}
			#publishNumber #ticketImg {transform: rotate(0deg);}
			.numberBox {display: flex; flex-wrap: wrap; justify-content: center;align-items: center;max-width: 1000px;margin: 0 auto;}
			.luckyNumber {display: flex;justify-content: center;align-items: center;flex: none;width: 100px;height: 100px;margin: 10px;padding: 0;text-decoration: none;font-size: 3.75em;font-weight: bold;text-align: center;background-color: #1c56a7;color: #fff;border-radius: 100%;}

			/*busy - 系統忙碌中*/
			#busy {height: calc(100vh - 100px); padding: 0 25px;}
			.busyWrap {width: 100%;max-width: 100%;position: absolute;top: 45%;left: 50%;transform: translate(-50%, -50%);margin: 0 auto;text-align: center;}
				.busyTop {position: relative; padding: 0 0 30px 0;}
					#busyRobot {max-width: 450px;}
					#busyTitle {display: inline-block;position: absolute;left: 50%;bottom: 0;transform: translate(-50%,-0%);margin: 0;padding: 5px 35px;background: linear-gradient(49deg,rgb(177, 231, 17) , rgb(227, 227, 23) 66%);color: #2a71ff;border-radius: 50px;font-size: 2.5em;font-weight: bold;}
    			#busyTitle:hover {box-shadow: 5px 5px 5px #264875;}

    		/*index_ticketReceive - 開始領券 & index_ticketUse - 開始抵用*/
			#ticketReceive {padding: 25px 25px 50px;}
			#ticketReceive .ticketBox {padding: 20px 0;}
			#ticketReceive #ticketImg {transform: rotate(0deg);}
			#ticketReceive .scheduleWrap {margin: 20px auto 0; padding: 10px 15px; background-color: #1c4b83; border-radius: 10px;}
			#ticketReceive .schedule {}
			#ticketReceive .scheduleItems {display:block;margin: 10px 10px;max-width: 100%;text-align: center;}

		/* ============================================
		   WEB版本響應式設計 - 4個尺寸設定區
		   ============================================
		   每個尺寸都可以獨立調整以下參數：
		   - 圖片位置：transform: translate(X, Y)
		   - 圖片大小：max-width
		   - 按鈕容器位置：transform: translate(X, Y)
		   - 按鈕文字大小：font-size
		   - 按鈕間距：gap, margin, padding
		   
		   桌面版預設值（768px以上，會被下方媒體查詢覆蓋）
		   ============================================ */
		
		/* 桌面版基礎樣式（768px以上，作為預設值） */
		@media screen and (min-width: 768px) {
			#ticketUse {
				padding: 25px 25px 50px;
				max-height: none;  /* 移除高度限制，確保所有內容顯示 */
				overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
			}
			#ticketUse #ticketImg {
				max-width: 411px;
				transform: rotate(0deg) translate(77px, 88px);
				margin: 0 auto;
				transition: transform 0.3s ease;
				cursor: pointer;
			}
			/* 滑鼠懸停時放大效果 */
			#ticketUse a:hover #ticketImg {
				transform: rotate(0deg) translate(77px, 88px) scale(1.1);
			}
			/* 按下去時縮小效果 */
			#ticketUse a:active #ticketImg {
				transform: rotate(0deg) translate(77px, 88px) scale(0.95);
			}
			#ticketUse #btn-container {
				padding: 10px;
				position: relative;
				z-index: 10;  /* 確保按鈕顯示在圖片上方 */
				width: 100%;
				max-width: 100%;
			}
			/* 桌面版顯示桌面按鈕群組，隱藏手機按鈕群組 */
			#ticketUse .btn-group-desktop {
				display: block !important;
			}
			#ticketUse .btn-group-mobile {
				display: none !important;
			}
		}
		
		/* 基礎樣式（所有尺寸共用） */
		#ticketUse .ticketBox {padding: 20px 0;}
		#ticketUse .flexbox {
			align-items: flex-start;
		}
		#ticketUse .btn-group-horizontal {
			flex-wrap: wrap;
		}
		#ticketUse .btn-group-horizontal .btn,
		#ticketUse .btn-group-horizontal .btne {
			flex-shrink: 1;
			min-width: 0;
		}
		#ticketUse .btn-group-horizontal h4 {
			flex-shrink: 0;
		}
			/* 手機版專用圖片 - 桌面版隱藏 */
			.mobile-only {
				display: none;
			}


			/*peopleHelp - 民眾使用說明 & traderHelp - 業者使用說明*/
			.sloganBottom {margin: 15px auto;text-shadow: 5px 5px 5px #335c8b;}
			.stepsContent {display: flex;flex-wrap: wrap;justify-content: center;}
			.stepCols {flex:none; width:360px; margin: 10px;}
			.txtCol {flex:1; min-width: 500px; margin: 20px;}
			.stepsRow {margin: 0 auto 30px;}
			.stepsRow:last-child {margin: 0 auto;}
			.imgCol {flex:none; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; max-width: 100%;}
			.imgCol img {margin: 20px 15px; width: 300px;}
			a.telNum {display: inline-block;}

			/*Q&A*/
			.faqArea {
				width: 100%;
				max-width: 1000px;
			    padding: 20px 20px;
			}

			.faqList {
			    display: block;
			    margin: 0 auto;
			    padding: 10px 0px;
			    list-style: none;
			}

			.faqListItem {
			    margin: 0;
			    padding: 0 20px;
			    border-bottom: 2px dashed #33628f;
			}


			.faqListItem:before{
			    display: none;
			}

			.questions {
			    margin: 0 auto;
			    padding: 10px 0;
			    cursor: pointer;
			    color: #fff;
			    /*text-indent: 10px;*/
			    font-weight: bold;
			}

			.faqListItem.active .questions,
			.questions:hover {
			    color: #ffff64;
			}

			.answers {
			    display: none;
			    padding: 0px 15px 10px 40px;
			    word-break: break-word;
			}

			.answers p {
			    margin: 0 auto;
			    line-height: 1.6em;
			}

			.answers li {
			    line-height: 1.7em;
			    margin: 0px 0px 5px 0px;
			}

			.faqListItem.active .answers {
			    display: block;
			}

			.answers ul,
			.answers ol {
			    margin: 0 auto;
			    padding-inline-start: 35px;
				    font-size: 1.5em;
			}

			.answers ol {
			    list-style: none;
			    counter-reset: count-li;
			}

			.answers ul {
			    list-style-type: square;
			}

			.answers ol li {
			    counter-increment: count-li;
			    margin-bottom: 5px;
			}

			.answers ol li::before {
			    content: counter(count-li)'.';
			    display: inline-block;
			    width: 1em;
			    margin-left: -1.5em;
			    margin-right: 0.5em;
			    text-align: right;
			    /*direction: rtl;*/
			}

			.answers ol ol li::before {
			    content: "("counter(count-li)")";
			    display: inline-block;
			    width: 1em;
			    margin-left: -1.5em;
			    margin-right: 0.5em;
			    text-align: right;
			    direction: rtl;
			}

			.answers a {display: inline-block;}

			/*==== 下載專區 ====*/
			.downloadArea {
				max-width: 1000px;
				margin: 0 auto;
				padding: 20px 0;
			}

			.downloadList {
				display: block;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 100%;
				margin:0 auto;
			    padding: 0;
			    list-style: none;
			    background-color: rgba(0,0,0,0.4);
			    border-radius: 10px;
			}

			.downloadList li {
				flex: none;
				width: 280px;
				text-align: center;
				margin: 15px;
			    padding: 0 20px;
			}

			.downloadList li a {
				display: block;
				    font-size: 1.125em;
			    padding: 15px 0;
			    color: #fff;
			    text-decoration: none;
			    font-weight: bold;
			}

			.downloadList li a:hover {
			    color: #ffff64;
			}

	footer {
		display: none !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden !important;
		opacity: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}

		/*common style*/
	h2 {font-size: 5.625em; margin: 0;}
	h3 {font-size: 3.125em; margin: 0;}
	h4 {font-size: 2.5em; margin: 0;}
	h5 {font-size: 1.875em; margin: 0;}
	p {font-size: 1.5em; margin: 10px auto;}
		a {display: block; text-decoration: none; color: #fff;}
		a:hover, a:active, a.active {color: #ffff64;}
		img {display: block; max-width: 100%; margin: 0 auto;}
		hr {width: 100%;/*max-width: 640px;*/height: 15px;margin: 0px auto;background: repeating-linear-gradient(45deg,transparent,transparent 15px,yellow 15px,yellow 25px); border: none;}
		.flexbox {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
		.flexbox.alignB {align-items: baseline;}
		.flexbox.itemTop {align-items: flex-start;}
		.flex0 {flex: none; max-width: 100%;}
		.flex1 {flex: 1;}
		.txtYellow {color: #ffff64;}
		.txtCenter {text-align: center;}
		.txtRight {text-align: right;}
		.bg {background:linear-gradient(49deg,rgb(177, 231, 17) , rgb(227, 227, 23) 66%); color: #2980b9;}
		.circle {display: inline-block; padding: 0 1em; border-radius: 50px;}
		.square {position: relative; width: 300px; height: 200px; margin: 30px;}
		.square:before {content:""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: translate(-15px,-15px); border: 2px dashed #fff;}
		.p10 {padding: 10px;}
		.p20 {padding: 20px;}
		/* 桌面版和手機版按鈕群組切換 */
		.btn-group-desktop {
			display: block;
		}
		.btn-group-mobile {
			display: none;
		}
		/* 按鈕群組橫向排列 */
		.btn-group-horizontal {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			gap: 15px;
		}
		.btn-group-horizontal h4 {
			flex-shrink: 0;
		}
		
		/* 民眾按鈕群組位置調整（推薦使用 transform，響應式設計更穩定） */
		#people-btn-group {
			transform: translate(0px, 0px);
			/* 調整位置：translate(X, Y)
			   X：左右移動（負值向左，正值向右）
			   Y：上下移動（負值向上，正值向下）
			   例如：transform: translate(30px, -10px); 向右 30px，向上 10px
			   
			   優點：
			   - 不影響文檔流，不會影響其他元素佈局
			   - 響應式設計中更穩定，不會造成意外換行
			   - 性能更好（GPU 加速）
			   - 在不同螢幕尺寸下表現一致 */
		}
		
		/* 合作店家按鈕群組位置調整（推薦使用 transform，響應式設計更穩定） */
		#vendor-btn-group {
			transform: translate(0px, 0px);
			/* 調整位置：translate(X, Y)
			   X：左右移動（負值向左，正值向右）
			   Y：上下移動（負值向上，正值向下）
			   例如：transform: translate(30px, 20px); 向右 30px，向下 20px
			   
			   優點：
			   - 不影響文檔流，不會影響其他元素佈局
			   - 響應式設計中更穩定，不會造成意外換行
			   - 性能更好（GPU 加速）
			   - 在不同螢幕尺寸下表現一致 */
		}
		a.btn * {display: block; margin:10px 20px; padding:5px 25px; background:#1e4d9f; color: #fff; border-radius: 50px;}
		a.btn *:hover {box-shadow: 5px 5px 5px #95514C;}
		a.btn.disabled *, a.btn.disabled *:hover {background: #bbb;color: #eee;box-shadow: none; cursor: not-allowed;}

		a.btne * {display: block; margin:10px 20px; padding:5px 25px;background:linear-gradient(49deg,rgb(155, 85, 4) , rgb(195, 130, 70) 66%); color: #fff;border-radius: 50px;}
		a.btne *:hover {box-shadow: 5px 5px 5px #95514C;}
		a.btne.disabled *, a.btn.disabled *:hover {background: #bbb;color: #eee;box-shadow: none; cursor: not-allowed;}

		a.btne * {display: block; margin:10px 20px; padding:5px 25px; background:#e17858; color: #fff; border-radius: 50px;}
			/* responsive-table */
		.rwd-table {
		  width: 100%;
		  max-width: 100%;
		  margin: 20px auto;
		  border-collapse: collapse;
		  border-spacing: 0;
				    font-size: 1.125em;
		}

		.rwd-table thead {}

		.rwd-table thead tr {
			background-color: #33628f;
		}

		.rwd-table tbody {}

		.rwd-table tr {}

		.rwd-table tbody tr:nth-child(2n) {}

		.rwd-table th,.rwd-table td {
		  padding: 0.5em;
		  /*text-align: center;*/
		  vertical-align: middle;
		  word-break: break-word;
		  line-height: 1.6em;
		  border-style: solid;
		  border-width: 1px;
		  border-color: #33628f;
		}

		.rwd-table td[colspan] {
			background-color: #ffff64;
		    color: #fff;
		    font-weight: bold;
		}

		.rwd-table .rwd-visible {
			display: none;
		}

		/* ===== iframe RWD ===== */
		.video {
			max-width: 850px;
			margin: 0 auto;
		}
		.iframe-rwd {
			position: relative;
			height: 0;
			margin: 60px auto;
			overflow: hidden;
			padding-top: 56.25%;
		}
		.iframe-rwd iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

/* ============================================
   尺寸1：超大桌面 (1400px 以上)
   ============================================ */
@media screen and (min-width: 1400px) {
	html, body {
		height: 100vh;
		overflow-y: hidden;
	}
	.wrapper {
		height: 100vh;
		overflow-y: hidden;
	}
	/* ticketUse 頁面允許顯示所有內容 */
	.ticketUse .wrapper {
		min-height: 100vh;
		height: auto;
		overflow-y: visible;
	}
	#ticketUse {
		max-height: none;  /* 移除高度限制，確保所有內容顯示 */
		overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
		padding: 25px 25px 50px;
	}
	
	/* 【可調整】圖片設定 */
	#ticketUse #ticketImg {
		max-width: 450px;  /* 圖片寬度 */
		transform: rotate(0deg) translate(54px, 67px);  /* 圖片位置：translate(左右, 上下) */
		margin: 0 auto;
		transition: transform 0.3s ease;
		cursor: pointer;
	}
	/* 滑鼠懸停時放大效果 */
	#ticketUse a:hover #ticketImg {
		transform: rotate(0deg) translate(54px, 67px) scale(1.1);
	}
	/* 按下去時縮小效果 */
	#ticketUse a:active #ticketImg {
		transform: rotate(0deg) translate(54px, 67px) scale(0.95);  /* 點擊時縮小 */
	}
	
	/* 【可調整】按鈕容器位置 - 尺寸1：超大桌面 (1400px+) */
	#ticketUse #btn-container {
		transform: translate(170px, 123px);  /* 按鈕容器位置：translate(左右, 上下) */
		/* 調整說明：
		   - 第一個數值（左右）：正值向右，負值向左
		   - 第二個數值（上下）：正值向下，負值向上
		   - 目前設定：translate(170px, 123px) = 向右 170px，向下 123px
		   - 範例：translate(-10px, -50px) = 向左 10px，向上 50px */
		padding: 10px;
		position: relative;
		z-index: 10;  /* 確保按鈕顯示在圖片上方 */
		width: 100%;
		max-width: 100%;
	}
	
	/* ============================================
	   【整批調整區】按鈕大小與間距設定 - 尺寸1
	   ============================================
	   以下數值可以整批調整，修改後會影響所有按鈕：
	   
	   【按鈕大小調整】
	   - 按鈕文字大小：調整 font-size（目前：2.5em）
	   - 按鈕內距：調整 padding（目前：5px 25px）
	   - 按鈕外邊距：調整 margin（目前：10px 20px）
	   
	   【間距調整】
	   - 按鈕之間間距：調整 gap（目前：15px）
	   - 標題右邊距：調整 margin-right（目前：20px）
	   - 標題文字大小：調整 font-size（目前：2.5em）
	   ============================================ */
	
	/* 【可調整】按鈕群組間距 */
	#ticketUse .btn-group-horizontal {
		gap: 15px;  /* 按鈕之間的間距（可調整：數值越大間距越大） */
	}
	
	/* 【可調整】標題文字（民眾/合作店家） */
	#ticketUse .btn-group-horizontal h4 {
		font-size: 2.5em;  /* 標題文字大小（可調整：數值越大文字越大） */
		margin: 0 20px 0 0;  /* 標題右邊距（可調整：數值越大標題與按鈕距離越遠） */
	}
	
	/* 【可調整】按鈕文字與內距 */
	#ticketUse .btn-group-horizontal .btn *,
	#ticketUse .btn-group-horizontal .btne * {
		margin: 10px 20px;  /* 按鈕外邊距（可調整：第一個值=上下，第二個值=左右） */
		padding: 5px 25px;  /* 按鈕內距（可調整：第一個值=上下，第二個值=左右，影響按鈕大小） */
		font-size: 2.5em;  /* 按鈕文字大小（可調整：數值越大文字越大） */
	}
	
	/* 桌面版顯示桌面按鈕群組，隱藏手機按鈕群組 */
	#ticketUse .btn-group-desktop {
		display: block !important;
	}
	#ticketUse .btn-group-mobile {
		display: none !important;
	}
}

/* ============================================
   尺寸2：大桌面 (1200px - 1399px)
   ============================================ */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
	html, body {
		height: 100vh;
		overflow-y: hidden;
	}
	.wrapper {
		height: 100vh;
		overflow-y: hidden;
	}
	/* ticketUse 頁面允許顯示所有內容 */
	.ticketUse .wrapper {
		min-height: 100vh;
		height: auto;
		overflow-y: visible;
	}
	#ticketUse {
		max-height: none;  /* 移除高度限制，確保所有內容顯示 */
		overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
		padding: 25px 25px 50px;
	}
	
	/* 【可調整】圖片設定 */
	#ticketUse #ticketImg {
		max-width: 411px;  /* 圖片寬度 */
		transform: rotate(0deg) translate(77px, 88px);  /* 圖片位置：translate(左右, 上下) */
		margin: 0 auto;
		transition: transform 0.3s ease;
		cursor: pointer;
	}
	/* 滑鼠懸停時放大效果 */
	#ticketUse a:hover #ticketImg {
		transform: rotate(0deg) translate(77px, 88px) scale(1.1);
	}
	/* 按下去時縮小效果 */
	#ticketUse a:active #ticketImg {
		transform: rotate(0deg) translate(77px, 88px) scale(0.95);  /* 點擊時縮小 */
	}
	
	/* 【可調整】按鈕容器位置 - 尺寸2：大桌面 (1200px - 1399px) */
	#ticketUse #btn-container {
		transform: translate(124px, 95px);  /* 按鈕容器位置：translate(左右, 上下) */
		/* 調整說明：
		   - 第一個數值（左右）：正值向右，負值向左
		   - 第二個數值（上下）：正值向下，負值向上
		   - 目前設定：translate(124px, 95px) = 向右 124px，向下 95px
		   - 範例：translate(-10px, -50px) = 向左 10px，向上 50px */
		padding: 10px;
		position: relative;
		z-index: 10;  /* 確保按鈕顯示在圖片上方 */
		width: 100%;
		max-width: 100%;
	}
	
	/* ============================================
	   【整批調整區】按鈕大小與間距設定 - 尺寸2
	   ============================================
	   以下數值可以整批調整，修改後會影響所有按鈕：
	   
	   【按鈕大小調整】
	   - 按鈕文字大小：調整 font-size（目前：2.5em）
	   - 按鈕內距：調整 padding（目前：5px 25px）
	   - 按鈕外邊距：調整 margin（目前：10px 20px）
	   
	   【間距調整】
	   - 按鈕之間間距：調整 gap（目前：10px）
	   - 標題右邊距：調整 margin-right（目前：20px）
	   - 標題文字大小：調整 font-size（目前：2.5em）
	   ============================================ */
	
	/* 【可調整】按鈕群組間距 */
	#ticketUse .btn-group-horizontal {
		gap: 10px;  /* 按鈕之間的間距（可調整：數值越大間距越大） */
	}
	
	/* 【可調整】標題文字（民眾/合作店家） */
	#ticketUse .btn-group-horizontal h4 {
		font-size: 2.5em;  /* 標題文字大小（可調整：數值越大文字越大） */
		margin: 0 20px 0 0;  /* 標題右邊距（可調整：數值越大標題與按鈕距離越遠） */
	}
	
	/* 【可調整】按鈕文字與內距 */
	#ticketUse .btn-group-horizontal .btn *,
	#ticketUse .btn-group-horizontal .btne * {
		margin: 10px 20px;  /* 按鈕外邊距（可調整：第一個值=上下，第二個值=左右） */
		padding: 5px 25px;  /* 按鈕內距（可調整：第一個值=上下，第二個值=左右，影響按鈕大小） */
		font-size: 2.5em;  /* 按鈕文字大小（可調整：數值越大文字越大） */
	}
	
	/* 桌面版顯示桌面按鈕群組，隱藏手機按鈕群組 */
	#ticketUse .btn-group-desktop {
		display: block !important;
	}
	#ticketUse .btn-group-mobile {
		display: none !important;
	}
}

/* ============================================
   尺寸3：中桌面 (1024px - 1199px)
   ============================================ */
@media screen and (min-width: 1024px) and (max-width: 1199px) {
	html, body {
		height: 100vh;
		overflow-y: hidden;
	}
	.wrapper {
		height: 100vh;
		overflow-y: hidden;
	}
	/* ticketUse 頁面允許顯示所有內容 */
	.ticketUse .wrapper {
		min-height: 100vh;
		height: auto;
		overflow-y: visible;
	}
	#ticketUse {
		max-height: none;  /* 移除高度限制，確保所有內容顯示 */
		overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
		padding: 25px 25px 50px;
	}
	
	/* 【可調整】圖片設定 */
	#ticketUse #ticketImg {
		max-width: 380px;  /* 圖片寬度 */
		transform: rotate(0deg) translate(60px, 75px);  /* 圖片位置：translate(左右, 上下) */
		margin: 0 auto;
		transition: transform 0.3s ease;
		cursor: pointer;
	}
	/* 滑鼠懸停時放大效果 */
	#ticketUse a:hover #ticketImg {
		transform: rotate(0deg) translate(60px, 75px) scale(1.1);
	}
	/* 按下去時縮小效果 */
	#ticketUse a:active #ticketImg {
		transform: rotate(0deg) translate(60px, 75px) scale(0.95);  /* 點擊時縮小 */
	}
	
	/* 【可調整】按鈕容器位置 - 尺寸3：中桌面 (1024px - 1199px) */
	#ticketUse #btn-container {
		transform: translate(90px, 118px);  /* 按鈕容器位置：translate(左右, 上下) */
		/* 調整說明：
		   - 第一個數值（左右）：正值向右，負值向左
		   - 第二個數值（上下）：正值向下，負值向上
		   - 目前設定：translate(90px, 118px) = 向右 90px，向下 118px
		   - 範例：translate(-10px, -50px) = 向左 10px，向上 50px */
		padding: 10px;
		position: relative;
		z-index: 10;  /* 確保按鈕顯示在圖片上方 */
		width: 100%;
		max-width: 100%;
	}
	
	/* ============================================
	   【整批調整區】按鈕大小與間距設定 - 尺寸3
	   ============================================
	   以下數值可以整批調整，修改後會影響所有按鈕：
	   
	   【按鈕大小調整】
	   - 按鈕文字大小：調整 font-size（目前：2.3em）
	   - 按鈕內距：調整 padding（目前：5px 22px）
	   - 按鈕外邊距：調整 margin（目前：8px 18px）
	   
	   【間距調整】
	   - 按鈕之間間距：調整 gap（目前：8px）
	   - 標題右邊距：調整 margin-right（目前：18px）
	   - 標題文字大小：調整 font-size（目前：2.3em）
	   ============================================ */
	
	/* 【可調整】按鈕群組間距 */
	#ticketUse .btn-group-horizontal {
		gap: 8px;  /* 按鈕之間的間距（可調整：數值越大間距越大） */
	}
	
	/* 【可調整】標題文字（民眾/合作店家） */
	#ticketUse .btn-group-horizontal h4 {
		font-size: 2.3em;  /* 標題文字大小（可調整：數值越大文字越大） */
		margin: 0 18px 0 0;  /* 標題右邊距（可調整：數值越大標題與按鈕距離越遠） */
	}
	
	/* 【可調整】按鈕文字與內距 */
	#ticketUse .btn-group-horizontal .btn *,
	#ticketUse .btn-group-horizontal .btne * {
		margin: 8px 18px;  /* 按鈕外邊距（可調整：第一個值=上下，第二個值=左右） */
		padding: 5px 22px;  /* 按鈕內距（可調整：第一個值=上下，第二個值=左右，影響按鈕大小） */
		font-size: 2.3em;  /* 按鈕文字大小（可調整：數值越大文字越大） */
	}
	
	/* 桌面版顯示桌面按鈕群組，隱藏手機按鈕群組 */
	#ticketUse .btn-group-desktop {
		display: block !important;
	}
	#ticketUse .btn-group-mobile {
		display: none !important;
	}
}

/* ============================================
   尺寸4：小桌面/平板 (768px - 1023px)
   ============================================ */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	html, body {
		height: 100vh;
		overflow-y: hidden;
	}
	.wrapper {
		height: 100vh;
		overflow-y: hidden;
	}
	/* ticketUse 頁面允許顯示所有內容 */
	.ticketUse .wrapper {
		min-height: 100vh;
		height: auto;
		overflow-y: visible;
	}
	#ticketUse {
		max-height: none;  /* 移除高度限制，確保所有內容顯示 */
		overflow-y: visible;  /* 改為 visible，確保內容不被遮擋 */
		padding: 20px 20px 30px;
	}
	
	/* 【可調整】圖片設定 */
	#ticketUse #ticketImg {
		max-width: 350px;  /* 圖片寬度 */
		transform: rotate(0deg) translate(54px, 103px);  /* 圖片位置：translate(左右, 上下) */
		margin: 0 auto;
		transition: transform 0.3s ease;
		cursor: pointer;
	}
	/* 滑鼠懸停時放大效果 */
	#ticketUse a:hover #ticketImg {
		transform: rotate(0deg) translate(54px, 103px) scale(1.1);
	}
	/* 按下去時縮小效果 */
	#ticketUse a:active #ticketImg {
		transform: rotate(0deg) translate(54px, 103px) scale(0.95);  /* 點擊時縮小 */
	}
	
	/* 【可調整】按鈕容器位置 - 尺寸4：小桌面/平板 (768px - 1023px) */
	#ticketUse #btn-container {
		transform: translate(158px, 145px);  /* 按鈕容器位置：translate(左右, 上下) */
		/* 調整說明：
		   - 第一個數值（左右）：正值向右，負值向左
		   - 第二個數值（上下）：正值向下，負值向上
		   - 目前設定：translate(158px, 145px) = 向右 158px，向下 145px
		   - 範例：translate(-10px, -50px) = 向左 10px，向上 50px */
		padding: 10px;
		position: relative;
		z-index: 10;  /* 確保按鈕顯示在圖片上方 */
		width: 100%;
		max-width: 100%;
	}
	
	/* ============================================
	   【整批調整區】按鈕大小與間距設定 - 尺寸4
	   ============================================
	   以下數值可以整批調整，修改後會影響所有按鈕：
	   
	   【按鈕大小調整】
	   - 按鈕文字大小：調整 font-size（目前：1.5em，已優化為較小尺寸以維持整列）
	   - 按鈕內距：調整 padding（目前：4px 12px，已優化為較小尺寸）
	      * 第一個值：上下內距（增加會讓按鈕變高）
	      * 第二個值：左右內距（增加會讓按鈕變寬）
	   - 按鈕外邊距：調整 margin（目前：5px 10px，已優化為較小尺寸）
	      * 第一個值：上下外邊距
	      * 第二個值：左右外邊距
	   
	   【間距調整】
	   - 按鈕之間間距：調整 gap（目前：5px，已優化為較小間距）
	   - 標題右邊距：調整 margin-right（目前：10px，已優化為較小間距）
	   
	   【標題大小調整】
	   - 標題文字大小：調整 font-size（目前：1.5em，已優化為較小尺寸）
	   
	   【維持整列顯示】
	   - flex-wrap: nowrap;  （強制不換行）
	   - white-space: nowrap;  （防止按鈕文字換行）
	   
	   範例：要讓按鈕變大，可以這樣調整：
	   - font-size: 1.8em;  （文字變大）
	   - padding: 6px 18px;  （內距增加，按鈕變大）
	   - margin: 8px 15px;  （外邊距增加）
	   
	   範例：要讓按鈕變小，可以這樣調整：
	   - font-size: 1.3em;  （文字變小）
	   - padding: 3px 10px;  （內距減少，按鈕變小）
	   - margin: 4px 8px;  （外邊距減少）
	   ============================================ */
	
	/* 【可調整】按鈕群組間距 */
	#ticketUse .btn-group-horizontal {
		gap: 5px;  /* 按鈕之間的間距（可調整：數值越大間距越大） */
		flex-wrap: nowrap;  /* 強制不換行，維持整列顯示 */
	}
	
	/* 【可調整】標題文字（民眾/合作店家） */
	#ticketUse .btn-group-horizontal h4 {
		font-size: 1.5em;  /* 標題文字大小（可調整：數值越大文字越大） */
		margin: 0 10px 0 0;  /* 標題右邊距（可調整：數值越大標題與按鈕距離越遠） */
	}
	
	/* 【可調整】按鈕文字與內距 */
	#ticketUse .btn-group-horizontal .btn *,
	#ticketUse .btn-group-horizontal .btne * {
		margin: 5px 10px;  /* 按鈕外邊距（可調整：第一個值=上下，第二個值=左右） */
		padding: 4px 12px;  /* 按鈕內距（可調整：第一個值=上下，第二個值=左右，影響按鈕大小） */
		font-size: 1.5em;  /* 按鈕文字大小（可調整：數值越大文字越大） */
		white-space: nowrap;  /* 防止按鈕文字換行 */
	}
	
	/* 桌面版顯示桌面按鈕群組，隱藏手機按鈕群組 */
	#ticketUse .btn-group-desktop {
		display: block !important;
	}
	#ticketUse .btn-group-mobile {
		display: none !important;
	}
}

@media screen and (max-width: 767px) {
	html, body {
		background-color: transparent;
		overflow-x: hidden;
		height: 100%;
	}
	.wrapper {
		width: 100%; 
		min-height: 100vh; 
		min-height: 100svh; 
		min-height: 100dvh; 
		background-image: url('../img/ro3.png'); 
		background-attachment: fixed; 
		background-size: cover; 
		background-position: center; 
		background-repeat: no-repeat; 
		background-color: transparent;
	}
		header {
			display: block !important; 
			width: 100% !important;
			position: fixed !important;
			top: 0px !important;
			left: 0px !important;
			z-index: 9995 !important;
			margin: 0 auto !important;
			padding: 0 !important;
			background: #2e5884 !important;
		}
		.drawlots header, .finished header, .publishDraw header, .publishNumber header, .ticketReceive header, .ticketUse header {
			margin: 0 auto !important; 
			background: #FF8C00 !important; 
			border: 2px solid #FFFFFF !important;
		}
			/* 手機版 ticketUse 頁面顯示 logoWrap */
			.ticketUse header #logoWrap {
				display: flex;
			}
			#logoWrap {display: flex;align-items: center;}
			#logoWrap #logo {flex:0; width: 50px; margin: 10px;}
			#logoWrap h1 {font-size: 1.25em;}

			.btnMenu {display: block;width: 40px;height: 40px;cursor: pointer;position: relative;margin: 5px 10px;}
				.btnMenu .line {width: 20px;height: 3px;background-color: #ffff00;;position: absolute;top: 45%;left: 50%;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}
				.line1 {transform: translateX(-50%) translateY(-200%);}
				.line2 {transform: translateX(-50%) translateY(0);}
				.line3 {transform: translateX(-50%) translateY(200%);}
				.btnMenu.close .line1 {top: 17.5px;left: 50%;-moz-transform: translateX(-50%) rotate(135deg);-ms-transform: translateX(-50%) rotate(135deg);-webkit-transform: translateX(-50%) rotate(135deg);transform: translateX(-50%) rotate(135deg);}
				.btnMenu.close .line2 {opacity: 0;}
				.btnMenu.close .line3 {top: 17.5px;left: 50%;-moz-transform: translateX(-50%) rotate(-135deg);-ms-transform: translateX(-50%) rotate(-135deg);-webkit-transform: translateX(-50%) rotate(-135deg);transform: translateX(-50%) rotate(-135deg);}
			
			nav {display: none;}
			nav.open {display: block;}
				nav ul {display:block; margin:0; padding:0; list-style: none; text-align: right; align-items: center; width: 100%;}
				nav ul li {display: block; margin: 0; font-weight: bold; /*flex: none;*/}
				nav ul li a {padding: 15px 10px; text-align: center;color: #fff;}
				nav ul li a:hover {background-color: #5590cc;color: #fff;}

		main {padding: 100px 0 0;}
		.drawlots main {padding: 70px 0 0;}
		.donscan main, .busy main {padding: 70px 0 0;}
		.finished main {padding: 70px 0 0;}
		.publishDraw main {padding: 70px 0 0;}
		.publishNumber main {padding: 70px 0 0;}
		.ticketReceive main, .ticketUse main {padding: 70px 0 0;}

			section { 
				min-height: auto;
				padding: 40px 20px 20px 20px;
				padding-bottom: 20px;
			}
			#ticketUse section {
				padding-bottom: 20px;
			}
				.sectionInner {position: relative; display: block; width: 100%; max-width: 1250px; height: 100%; margin: 0 auto;}
					.sectionTitle {width: 100%; max-width: 320px; margin: 0 auto 40px; text-align: center; color: #fff; letter-spacing: 3px;}
						.sectionTitle h2 {margin-bottom: 20px;}
						.row {margin: 20px auto;}
							.row .rowItems {width: 100%; max-width: 360px;}
			
			/*home*/
			#home {height: calc(100vh - 100px);}
				.slogan {width: 100%; max-width: 400px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -65%);margin: 0 auto;text-align: center;/*animation: fadeIn ease 2s;-webkit-animation: fadeIn ease 2s;-moz-animation: fadeIn ease 2s;-o-animation: fadeIn ease 2s;-ms-animation: fadeIn ease 2s;*/}
					.sloganTop {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;margin:15px auto;}
						#logo {width: 65px; margin: 0 20px 0 0;}
						#logo+h2 {letter-spacing: 5px; color: #fff;}
					#logo_don {margin: 20px auto;}
					hr.hrTop {height: 20px;margin: 0px auto;background: repeating-linear-gradient(-45deg,transparent,transparent 20px,yellow 20px,yellow 35px);}
					hr.hrBottom {height: 20px;margin: 0px auto;background: repeating-linear-gradient(45deg,transparent,transparent 20px,yellow 20px,yellow 35px);}
			
			/*index - 出門挺運動*/		
			#index {}
				.ticketWrap {text-align: center;}
					.ticketWrap img {width: 400px;}
				.ticketItem {padding: 10px 20px; text-align: center;}

			/*who - 誰可以用*/
			#who {}

			/*where - 如何取得*/
			#where {}
				.stepWrap {display: flex; flex-wrap: wrap; justify-content: space-around;}
					.steps {display: block; width: 50px; height: 50px; line-height: 50px; margin: 10px auto; text-align: center; border-radius: 100%; background-color: #fff; color: #2980b9;}
						.thumbQrcode {width: 90px;}
				#rotate {display: block; transform: rotate(90deg);}
			
			/*range - 使用範圍*/
			#range {}
				.imgSports,.imgGame,.imgOutfit {width: 100%;}

			/*info - 更多資訊*/
			#info {}
				.qrcode {width: 300px;padding: 15px;background-color: #fff;}

			/*draw lots - 登記抽籤*/
			#drawLots {padding: 15px 25px;}
				#drawLots .sectionTitle {margin: 0 auto;}
				#drawLots .row {margin: 20px auto 0;}
				.ticketBox {padding: 40px 0;}
				#ticketImg {max-width: 400px; transform: rotate(15deg);}
				.noteRow {display: flex; flex-wrap: wrap; justify-content: center;}
				.noteCol {flex: none; max-width: 100%; padding: 15px 10px;}
				.noteCol * {padding: 5px 10px;}
				.bb {border-bottom: 1px solid #ffff64;}
			
			/*donScan - 掃描入口*/
			#donScan {padding: 25px;}
			.scanWrap {position: relative; padding: 0;}
				#scanHand {max-width: 250px;}
				#scanTitle {display: block;max-width: 320px;position: relative;left: 50%;bottom: 0;transform: translate(-50%,-50%);padding: 10px 0px;background-color: #fff;color: #2a6eb5;border-radius: 20px;text-align: center;font-size: 1.875em;}
			
			/*index_finished - 登記截止入口*/
			#finished {padding: 0px 15px 25px;}
			#finished .ticketBox {padding: 0;}
			#finished #ticketImg {width: 100%;margin: 0;transform: rotate(0deg);}
			#finished .deadlineDate {margin: 0 10px;font-size: 3.75em;}
			#finished .deadlineTime {margin: 0 10px;}
			.icons {flex: none; width: 100%; margin: 5px 0;}

			/*index_publishDraw - 公開抽籤時間入口*/
			#publishDraw {padding: 25px 15px 25px;}
			#publishDraw .ticketBox {padding: 20px 0;}
			#publishDraw #ticketImg {transform: rotate(0deg);}
			#publishDraw .deadlineDate {margin: 0 10px;font-size: 3.75em;}
			#publishDraw .deadlineTime {margin: 0 10px;}

			/*index_publishNumber - 抽籤結果公布*/
			#publishNumber {padding: 25px 15px 25px;}
			#publishNumber .ticketBox {padding: 20px 0;}
			#publishNumber #ticketImg {transform: rotate(0deg);}
			.numberBox {display: flex; flex-wrap: wrap; justify-content: center;align-items: center;}
			.luckyNumber {display: flex;justify-content: center;align-items: center;flex: none;width: 50px;height: 50px;margin: 10px;padding: 0;text-decoration: none;font-size: 1.875em;font-weight: bold;text-align: center;background-color: #1c56a7;color: #fff;border-radius: 100%;}
    		#publishNumber a.btn * {margin: 10px 7px;}

    		/*busy - 系統忙碌中*/
			#busy {height: calc(100vh - 150px); padding: 0 10px;}
			.busyWrap {width: 100%;max-width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);margin: 0 auto;text-align: center;}
				.busyTop {position: relative; margin: 0 auto 15px; padding: 0 0 15px 0;}
					#busyRobot {max-width: 450px;}
					#busyTitle {display: block; width: 200px; position: absolute;left: 50%;bottom: 0;transform: translate(-50%,-0%);margin: 0;padding: 5px 35px;background: linear-gradient(49deg,rgb(177, 231, 17) , rgb(227, 227, 23) 66%);color: #2a71ff;border-radius: 50px;font-size: 1.875em;font-weight: bold;}
    			#busyTitle:hover {box-shadow: 5px 5px 5px #264875;}

    		/*index_ticketReceive - 開始領券 & index_ticketUse - 開始抵用*/
			#ticketReceive {padding: 15px;}
			#ticketReceive .ticketBox {padding: 20px 0;}
			#ticketReceive #ticketImg {transform: rotate(0deg);}
			#ticketReceive .scheduleWrap {margin: 20px auto 0; padding: 10px 15px; border-radius: 10px; background-color: #1c4b83;}
			#ticketReceive .schedule {}
			#ticketReceive .scheduleItems {display:block;margin: 5px 10px;max-width: calc(100% - 20px); text-align: left;}

			#ticketUse {padding: 15px;}
			#ticketUse .ticketBox {padding: 20px 0;}
			#ticketUse #ticketImg {
				max-width: 100%; 
				transform: rotate(0deg) translate(0px, 0px);
				margin: 0 auto;
				transition: transform 0.3s ease;
				cursor: pointer;
			}
			/* 手機版點擊時的放大縮小動畫 */
			#ticketUse a:active #ticketImg {
				transform: rotate(0deg) translate(0px, 0px) scale(1.1);
			}
			/* 手機版移除 h1 標籤造成的多餘間距 */
			#ticketUse h1 {
				margin: 0;
				padding: 0;
			}
			/* 手機版顯示 ope.png 圖片 */
			.mobile-only {
				display: block;
				max-width: 100%;
				margin: 10px auto 0;
			}
			#ticketUse #opeImg {
				max-width: 100%;
				margin: 10px auto 0;
			}
			/* 手機版移除 btn-container 的 transform，消除空白，緊接圖片 */
			#ticketUse #btn-container {
				transform: translate(0px, 0px) !important;
				padding: 10px 0;
				margin-top: 10px;
				width: 100%;
			}
			/* 手機版顯示手機按鈕群組，隱藏桌面版 */
			#ticketUse .btn-group-desktop {
				display: none;
			}
			#ticketUse .btn-group-mobile {
				display: block;
			}
			/* 手機版調整 flexbox 為垂直排列，移除多餘間距，整體向下移動 50px */
			#ticketUse .flexbox {
				flex-direction: column;
				align-items: center;
				gap: 0;
				transform: translateY(50px);
			}
			#ticketUse .flexbox > div {
				width: 100%;
			}
			/* 手機版按鈕垂直排列樣式 */
			#ticketUse .btn-group-mobile h4 {
				margin-bottom: 10px;
				margin-top: 0;
			}
			#ticketUse .btn-group-mobile > div[align="center"] {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 10px;
				width: 100%;
			}
			#ticketUse .btn-group-mobile .btn,
			#ticketUse .btn-group-mobile .btne {
				width: 100%;
				max-width: 100%;
			}
			#ticketUse .btn-group-mobile .btn *,
			#ticketUse .btn-group-mobile .btne * {
				margin: 10px 20px;
			}

    		/*peopleHelp - 民眾使用說明 & traderHelp - 業者使用說明*/
			.sloganBottom {margin: 15px auto;text-shadow: 5px 5px 5px #335c8b;}
			.stepsContent {display: flex; flex-wrap: wrap;justify-content: center;}
			.stepCols {flex:none; width:100%; max-width: 360px; margin: 10px auto;}
			.txtCol {flex:1; min-width: 100%; margin: 20px 0;padding: 0 10px;}
			.stepsRow {margin: 0 auto 30px;}
			.stepsRow:last-child {margin: 0 auto;}
			.imgCol {flex:none; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; max-width: 100%;}
			.imgCol img {margin: 20px 0; width: 100%; max-width: 320px;}
			a.telNum {display: inline-block;}

			/*Q&A*/
			.faqArea {
				width: 100%;
				max-width: 1000px;
			    padding: 0px 10px;
			}

			.faqList {
			    display: block;
			    margin: 0 auto;
			    padding: 10px 0px;
			    list-style: none;
			}

			.faqListItem {
			    margin: 0;
			    padding: 0 0px;
			    border-bottom: 2px dashed #33628f;
			}


			.faqListItem:before{
			    display: none;
			}

			.questions {
			    margin: 0 auto;
			    padding: 10px 0;
			    cursor: pointer;
			    color: #fff;
			    /*text-indent: 10px;*/
			    font-weight: bold;
			}

			.faqListItem.active .questions,
			.questions:hover {
			    color: #ffff64;
			}

			.answers {
			    display: none;
			    padding: 0px 0px 10px;
			    word-break: break-word;
			}

			.answers p {
			    margin: 0 auto;
			    line-height: 1.6em;
			}

			.answers li {
			    line-height: 1.7em;
			    margin: 0px 0px 5px 0px;
			}

			.faqListItem.active .answers {
			    display: block;
			}

			.answers ul,
			.answers ol {
			    margin: 0 auto;
			    padding-inline-start: 25px;
				    font-size: 1.125em;
			}

			.answers ol {
			    list-style: none;
			    counter-reset: count-li;
			}

			.answers ul {
			    list-style-type: square;
			}

			.answers ol li {
			    counter-increment: count-li;
			    margin-bottom: 5px;
			}

			.answers ol li::before {
			    content: counter(count-li)'.';
			    display: inline-block;
			    width: 1em;
			    margin-left: -1.5em;
			    margin-right: 0.5em;
			    text-align: right;
			    /*direction: rtl;*/
			}

			.answers ol ol li::before {
			    content: "("counter(count-li)")";
			    display: inline-block;
			    width: 1em;
			    margin-left: -1.5em;
			    margin-right: 0.5em;
			    text-align: right;
			    direction: rtl
			}

			.answers a {display: inline-block;}

			/*==== 下載專區 ====*/
			.downloadArea {
				max-width: 100%;
				margin: 0 auto;
				padding: 20px 0;
			}

			.downloadList {
				display: block;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 100%;
				margin:0 auto;
			    padding: 0;
			    list-style: none;
			    background-color: rgba(0,0,0,0.4);
			    border-radius: 10px;
			}

			.downloadList li {
				flex: none;
				width: 280px;
				text-align: center;
				margin: 15px;
			    padding: 0 20px;
			}

			.downloadList li a {
				display: block;
				    font-size: 1.125em;
			    padding: 15px 0;
			    color: #fff;
			    text-decoration: none;
			    font-weight: bold;
			}

			.downloadList li a:hover {
			    color: #ffff64;
			}

	footer {
		display: none !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden !important;
		opacity: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		left: -9999px !important;
	}

    /*common style*/
	h2 {font-size: 1.875em; margin: 0;}
	h3 {font-size: 1.625em; margin: 0;}
	h4 {font-size: 1.375em; margin: 0;}
	h5 {font-size: 1.125em; margin: 0;}
	p {font-size: 1.125em; margin: 10px auto;}
	a {display: block; text-decoration: none; color: #fff;}
	a:hover, a:active, a.active {color: #ffff64;}
	img {display: block; max-width: 100%; margin: 0 auto;}
	hr {width: 100%;/*max-width: 640px;*/height: 15px;margin: 0px auto;background: repeating-linear-gradient(45deg,transparent,transparent 15px,yellow 15px,yellow 25px); border: none;}
	.flexbox {display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
	.flexbox.itemTop {align-items: flex-start;}
	.flex0 {flex: none; max-width: 100%;}
	.flex1 {flex: 1;}
	.txtYellow {color: #ffff64;}
	.txtCenter {text-align: center;}
	.txtRight {text-align: right;}
	.bg {background:linear-gradient(49deg,rgb(177, 231, 17) , rgb(227, 227, 23) 66%); color: #2980b9;}
	.circle {display: inline-block; padding: 0 1em; border-radius: 50px;}
	.square {position: relative; width: 300px; height: 200px; margin: 30px;}
	.square:before {content:""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: translate(-15px,-15px); border: 2px dashed #fff;}
		.p10 {padding: 10px;}
		.p20 {padding: 20px 0;}
		/* 手機版按鈕群組橫向排列 */
		.btn-group-horizontal {
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			gap: 10px;
		}
		.btn-group-horizontal h4 {
			flex-shrink: 0;
			margin: 0 10px 0 0 !important;
		}
		
		/* 手機版民眾按鈕群組位置調整（使用 transform，響應式更穩定） */
		#people-btn-group {
			transform: translate(0px, 0px);
			/* 手機版調整位置：translate(X, Y)
			   例如：transform: translate(10px, 5px); 向右 10px，向下 5px
			   建議手機版移動幅度較小，避免超出螢幕範圍 */
		}
		
		/* 手機版合作店家按鈕群組位置調整（使用 transform，響應式更穩定） */
		#vendor-btn-group {
			transform: translate(0px, 0px);
			/* 手機版調整位置：translate(X, Y)
			   例如：transform: translate(10px, 10px); 向右 10px，向下 10px
			   建議手機版移動幅度較小，避免超出螢幕範圍 */
		}
		a.btn * {display: block; margin:10px 20px; padding:5px 25px; background:#1e4d9f; color: #fff; border-radius: 50px;}

	a.btn *:hover {box-shadow: 5px 5px 5px #95514C;}
	a.btn.disabled *, a.btn.disabled *:hover {background: #bbb;color: #eee;box-shadow: none; cursor: not-allowed;}

	a.btnNot  * {display: block; margin:10px 10px; padding:5px 15px; background:linear-gradient(49deg,rgb(133, 127, 129) , rgb(196, 196, 196) 66%); color: #fff;border-radius: 50px;}

	/* responsive-table */
	.rwd-table {
	  width: 100%;
	  max-width: 100%;
	  margin: 20px auto;
				    font-size: 1.125em;
	}

	.rwd-table thead {
	  display: none;
	}

	.rwd-table tbody {
	  border: none;
	}

	.rwd-table thead tr,
	.rwd-table tbody tr {
	  display: block;
	  margin-bottom: 20px;
	  border-style: solid;
	  border-width: 1px;
	  border-color: #33628f;
	}

	.rwd-table tr.rowspan {
		margin-bottom: 0px;
		border-bottom: none;
	}

	.rwd-table td {
		display: block;
		padding: 0.5em;
		text-align: left;
		vertical-align: middle;
		word-break: break-word;
		border: none;
	}

	.rwd-table td:first-child {
	  background-color: #33628f;
	  color: #fff;
	  text-align: center;
	  font-weight: bold;
	}

	.rwd-table td::before {
	  content: attr(data-title);
	  display: block;
	  color: #ffff64;
	}

	.rwd-table td[colspan] {
		background-color: #ffff64;
	    color: #333;
	    font-weight: bold;
	    text-align: center;
	}

	.rwd-table td:first-child::before,
	.rwd-table td[colspan]::before {
		display: none;
	}

	.rwd-table .rwd-visible {
		display: none;
	}

	/* ===== iframe RWD ===== */
		.video {
			max-width: 100%;
			margin: 0 auto;
		}
		.iframe-rwd {
			position: relative;
			height: 0;
			margin: 60px auto;
			overflow: hidden;
			padding-top: 56.25%;
		}
		.iframe-rwd iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
}