@charset "utf-8";

/* 雙11活動樣式整理版
 * 保留原有 class、767px 斷點、優惠券四欄及人物漂浮設定。
 * 本檔用來取代原本的 index.css，不需再把舊補丁貼在後面。
 */

/* ==================== loading載入中 ==================== */
/* 遮罩樣式 */
.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* spinner樣式+旋轉動畫 */
.spinner {
	border: 8px solid rgba(0, 0, 0, 0.1);
	border-left: 8px solid #fff;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	margin: 0 auto;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

/* loading文字 */
.loadingTxt {
	margin-top: 10px;
	font-size: 2rem;
	color: #fff;
	font-weight: bold;
}

/* ==================== 共用與裝置顯示 ==================== */
.pcNo {
	display: block;
}

.mNo {
	display: none;
}

.txtGreen,
.txtDeepRed {
	color: #242021;
}

/* ==================== 頁首與既有定位 ==================== */
header {
	margin-top: 0;
	position: relative;
	overflow: hidden;
}

.headerBox img {
	display: block;
	width: 100%;
}

.headerH {
	width: 100%;
}

.headerPicFull {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.headerPicHalf {
	position: absolute;
	top: 0;
	width: 50%;
}

.headerPicHalf.left {
	left: 0;
}

.headerPicHalf.right {
	right: 0;
}

.headerPic {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 auto;
}

.bgHeaderBao,
.header1,
.header2,
.header3,
.header4,
.header5 {
	display: none;
}

.headerTitle {
	top: 0;
	width: 100%;
}

.headerBao {
	top: 34%;
	left: 10%;
	width: 45%;
}

.headerGiftBao {
	top: 70%;
	right: 45%;
	width: 40%;
}

.bgHeaderM {
	display: block;
}

.header2m {
	position: absolute;
	z-index: 2;
	top: 90%;
	left: 5%;
	width: 50%;
	display: block;
}

.header1m {
	position: absolute;
	z-index: 2;
	top: 2%;
	left: 0;
	width: 100%;
	display: block;
}

/* ==================== 區塊與共用背景 ==================== */
.areaBg0,
.areaBg1,
.areaBg2 {
	background-image: url(https://cp-img.bookwalker.com.tw/event/2025/20251109_1111_wezi/images/bg_02.png);
}

.areaWidth1,
.areaWidth2,
.areaWidth3 {
	position: relative;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
}

.areaWidth1 {
	padding: 50px 0 0;
}

.areaWidth2 {
	padding: 0 0 50px;
}

.areaWidth3 {
	padding: 50px 0;
}

/* ==================== 既有模組（保留供 HTML 使用） ==================== */
.gameInfo {
	width: 80%;
	margin: 15px auto 25px;
}

.gameInfo img {
	display: block;
	width: 100%;
}

.gameGiftList > li {
	margin-top: 10px;
}

.gameStart {
	animation: scaleInOut 0.8s infinite;
}

@keyframes scaleInOut {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(0.9); }
}

/* ==================== 注意事項 ==================== */
.noticeBox {
	width: 100%;
	margin: 0 auto;
}

.noticeBox h4 {
	margin: 0 0 10px;
	font-size: 2.5rem;
	color: #72867a;
	font-weight: bold;
	text-align: left;
}

.noticeList {
	padding: 25px 10% 45px 16%;
	font-size: 1.4rem;
	font-weight: bold;
	color: #72867a;
	border-radius: 0;
}

.noticeList > li {
	list-style: disc;
	margin-bottom: 10px;
	line-height: 1.3;
}

.noticeList > li:last-child {
	margin-bottom: 0;
}

.highlight {
	color: #72867a;
	font-weight: bold;
}

.highlight2 {
	color: #4064ad;
	font-weight: bold;
}

/* ==================== 第二區 ==================== */
.title2 {
	width: 0;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: none;
}

.title2m {
	width: 90%;
	margin: 0 auto;
	padding: 50px 1% 0;
	position: relative;
	display: block;
}

.book2 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0 10% 50px;
	margin-top: 0;
}

.book2 li {
	width: 80%;
	padding: 20px 0 0;
	display: block;
}

/* ==================== 優惠券區（手機預設） ==================== */
.title3 {
	width: 0;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: none;
}

.title3m {
	width: 80%;
	margin: 0 auto;
	padding: 0 1% 20px;
	position: relative;
	display: block;
}

.book3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
	margin-top: 0;
}

.book3 li {
	width: 80%;
	padding: 0;
	display: block;
}

.more3 {
	width: 80%;
	margin: 0 auto;
	padding: 30px 1% 0 2%;
	position: relative;
	display: block;
}

.more32 {
	width: 0;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display: none;
}

.more32m {
	width: 80%;
	margin: 0 auto;
	padding: 0 1%;
	position: relative;
	display: block;
}

/* ==================== 輪播與彈出視窗 ==================== */
.swiper_title1 {
	width: 60%;
	margin: 0 auto;
	padding: 0 0 20px;
	position: relative;
	justify-content: center;
	align-items: center;
	display: block;
}

.sweetBtnLink,
.sweetBtnClose {
	display: inline-block;
	padding: 8px 20px;
	font-size: 1.6rem;
	border-radius: 8px;
	font-weight: bold;
	text-decoration: none;
	color: #fff;
}

.sweetBtnLink {
	background-color: #205298;
}

.sweetBtnClose {
	background-color: #999;
}

.sweetBtnLink:hover,
.sweetBtnClose:hover {
	opacity: 0.85;
}

/* ==================== 桌機／平板：767px 起 ==================== */
@media screen and (min-width: 767px) {
	.FOOTER_BG { padding-bottom: 20px !important; }
	.pcNo { display: none; }
	.mNo { display: block; }
	.bgHeaderBao { display: block; }

	/* 既有頁首定位 */
	.header5 {
		position: absolute;
		top: 48.2%;
		left: 8.8%;
		width: 21.6% !important;
		display: block;
		z-index: 1;
	}

	.headerPic { top: 0; left: 0; right: 0; }
	.headerTitle { width: 0; }
	.headerBao { top: 0; left: 0; width: 0; }
	.headerGiftBao, .bgHeaderM { display: none; }

	.areaBox {
		overflow: hidden;
		padding: 0;
		background-attachment: fixed;
	}

	/* 區塊寬度 */
	.areaWidth { max-width: 1023px; padding-top: 0; }
	.areaWidth2 { max-width: 1000px; margin: 0 auto; padding: 100px 0 150px; }
	.areaWidth3 { max-width: 1300px; margin: 0 auto; padding: 0 0 100px; }
	.mainTitle { width: 56%; }
	.mainTitle2 { width: 75%; max-width: 1000px; }

	/* 注意事項與半身人物 */
	.noticeBox { max-width: 80%; }
	.noticeBox h4 { margin-left: 0; }
	.noticeList { padding: 100px 8% 100px 25%; font-size: 1.5rem; border-width: 3px; }
	#s2 .noticeBox { margin-bottom: 0; padding-bottom: 0; }
	#s2 .noticeCharactersWrap { margin-top: -100px; }

	#s2 .noticeCharacters {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		align-items: start;
		gap: 16px;
		width: 100%;
		max-width: 1600px;
		height: 300px;
		margin: 0 auto;
		padding: 0 20px;
		box-sizing: border-box;
		overflow: hidden;
	}

	#s2 .noticeCharacters > img {
		display: block;
		position: static;
		float: none;
		width: 100%;
		max-width: none;
		min-width: 0;
		height: auto;
		margin: 0;
	}

	/* 第二區及既有模組 */
	.title2 { width: 100%; padding: 50px 0 20px; display: block; }
	.title2m { width: 0; padding: 0; display: none; }
	.book2 { padding: 0; border-radius: 10px; }
	.book2 li { padding: 0; }
	.title22 { width: 80%; padding: 50px 0 0; display: block; }
	.title22m { width: 0; padding: 0; display: none; }

	.book22 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		margin-top: 0;
		border-radius: 10px;
	}

	.book22 li { width: 25%; padding: 0; display: block; }

	/* 優惠券：保留一般 book3 樣式，s3 使用四欄 Grid */
	.title3 { width: 100%; padding: 0; display: block; }
	.title3m { width: 0; padding: 0; display: none; }
	.book3 { border-radius: 10px; }
	.book3 li { width: 25%; }
	#s3 .areaWidth3 { max-width: 1600px; }

	#s3 .book3 {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 12px;
		width: 96%;
		max-width: none;
		margin: 24px auto 0;
		padding: 0;
	}

	#s3 .book3 > li { width: 100%; min-width: 0; margin: 0; padding: 0; }
	#s3 .book3 img { display: block; width: 100%; height: auto; }
	.more3 { width: 50%; padding: 50px 0 0; display: block; }
	.more32 { width: 50%; padding: 0; display: block; }
	.more32m { width: 0; padding: 0; display: none; }

	/* 保留兩種 selector 的原有優先順序 */
	.hover1 li a,
	.hover1 a { display: block; transition: 0.4s; }
	.hover1 li a:hover,
	.hover1 a:hover { transform: scale(0.9); }
	.hover2 li a:hover img { filter: alpha(Opacity=30); -moz-opacity: 0.3; opacity: 0.3; }
}

/* 平板背景捲動設定 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
	.bgDeco1,
	.bgDeco2,
	.bgDeco3 { background-attachment: inherit; }
}

/* ==================== 本次活動背景（統一設定） ==================== */
/* 放在桌機規則之後，維持 scroll，不被 .areaBox 的 fixed 覆蓋。 */
.areaBg3 {
	background-color: #dcf2fd;
	background-image:
		linear-gradient(rgba(64, 100, 140, 0.07) 1px, transparent 1px),
		linear-gradient(90deg, rgba(64, 100, 140, 0.07) 1px, transparent 1px);
	background-size: 40px 40px;
	background-position: center top;
	background-attachment: scroll;
}

#s2.areaBg2 {
	background-color: #fffaf3;
	background-image: linear-gradient(to bottom, #dcf2fd, #fffaf3);
	background-repeat: no-repeat;
	background-size: 100% 100px;
	background-position: center top;
	background-attachment: scroll;
}

/* ==================== 主視覺疊圖與動畫 ==================== */
.headerBox .bwHero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.headerBox .bwHeroBase {
	display: block;
	width: 100%;
	height: auto;
}

.headerBox .bwHeroLayer {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	pointer-events: none;
	animation: bwHeroEnter 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.headerBox .bwHeroGirl {
	--enter-x: -24px;
	z-index: 2;
	animation:
		bwHeroEnter 1s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both,
		bwHeroFloat 4.8s ease-in-out 1.1s infinite;
}

.headerBox .bwHeroBoy {
	--enter-x: 24px;
	z-index: 2;
	animation:
		bwHeroEnter 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both,
		bwHeroFloat 5.6s ease-in-out 1.3s infinite;
}

.headerBox .bwHeroCoupons {
	--enter-x: 0px;
	z-index: 1;
	animation-delay: 0.6s;
}

.headerBox .bwHeroGirl,
.headerBox .bwHeroBoy {
	will-change: transform, translate;
}

@keyframes bwHeroEnter {
	from {
		opacity: 0;
		transform: translate3d(var(--enter-x, 0px), 28px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

@keyframes bwHeroFloat {
	0%, 100% { translate: 0 0; }
	50% { translate: 0 -8px; }
}

/* 減少動態效果設定統一放最後 */
@media (prefers-reduced-motion: reduce) {
	.headerBox .bwHeroLayer {
		animation: none;
		translate: none;
		will-change: auto;
	}
}