/* rwd*/
/*-----------------------------------------------
    device width test 
-----------------------------------------------*/
.test_r{position: fixed;width: 5px; height: 10px; z-index: 9999;left: 0;}
@media screen and (min-width:1921px) {/*--帶魚屏--*/
    .test_r{ background-color: #410000;position: fixed;width: 10px; height: 10px; z-index: 9999;left: 0;}
}
@media screen and (max-width:1680px) {/*--桌機--*/
    .test_r{ background-color: #c2c2c2;}
}
@media screen and (max-width:1480px) {/*--筆電--*/
    .test_r{background-color: #ff6c6c79;}
}
@media screen and (max-width:1280px) {/*--小筆電--*/
    .test_r{background-color: #899cff79;}
}

@media screen and (max-width:1024px) {/*--pad橫向--*/
    .test_r{background-color: #89ff9b79;}
}
@media screen and (max-width:768px) {/*--pad直向--*/
    .test_r{background-color: #e5ff00c2;}
}
@media screen and (max-width:480px) {/*--and--*/
    .test_r{background-color: #ff0000c2;}
}
@media screen and (max-width:400px) {/*--ios--*/
    .test_r{background-color: #4369bac2;}
}

/*-----------------------------------------------
    device pc tablet mobile
-----------------------------------------------*/
.pc{display: block;opacity: 1;pointer-events: auto; }

.tablet ,.mobile{display: none;pointer-events: none; }

@media screen and (max-width:769px){
    .pc{ display: none;opacity: 0;pointer-events: none; }
    .pc02{ display: none;opacity: 0;pointer-events: none; }
    .tablet{display: block;pointer-events: auto; } 
} 

@media screen and (max-width:480px)
{ .mobile{display: block;width: auto;height: auto;pointer-events: auto; } 
} 

/*----------------------------------------帶魚屏-----------------------------------------------------*/
@media screen and (min-width:1921px) {
}

/* 桌機導覽與彈窗隨寬度略縮。1920 用原尺寸，768 以下不套用。 */
@media screen and (max-width:1680px) and (min-width:1025px) {
	.gnb { transform: scale(calc(0.9 / var(--fit))); }
	.pop-box-lg { width: min(815px, 94vw); }
	.pop-box-lg h2 { font-size: 36px; }
	.pop-body { font-size: 18px; }
	.pop-body li { font-size: 11pt; }
	.pop-box-sm { width: min(527px, 90vw); }
	.pop-box-sm p { font-size: 23px; }
	.pop-close { width: 54px; height: 54px; }
}

@media screen and (max-width:1440px) and (min-width:1025px) {
	.gnb { transform: scale(calc(0.82 / var(--fit))); }
	.pop-box-lg { width: min(742px, 94vw); }
	.pop-box-lg h2 { font-size: 33px; }
	.pop-body { font-size: 16px; }
	.pop-body li { font-size: 10pt; }
	.pop-box-sm { width: min(480px, 90vw); }
	.pop-box-sm p { font-size: 21px; }
	.pop-close { width: 49px; height: 49px; }
}

@media screen and (max-width:1280px) and (min-width:1025px) {
	.gnb { transform: scale(calc(0.74 / var(--fit))); }
	.pop-box-lg { width: min(670px, 94vw); }
	.pop-box-lg h2 { font-size: 30px; }
	.pop-body { font-size: 15px; }
	.pop-body li { font-size: 10pt; }
	.pop-box-sm { width: min(433px, 90vw); }
	.pop-box-sm p { font-size: 19px; }
	.pop-close { width: 44px; height: 44px; }
}

/*------------------------------------1024手機版 ----------------------------------------------------------*/
@media screen and (max-width:1024px) {
	/* 同一份按鈕對齊 mobile_bg.jpg。section 不能當定位父層，否則百分比會算在一屏裡。 */
	html, body { overflow: auto !important; height: auto !important; }
	.mobile-page { position: relative; width: 100%; }
	.mobile-bg { display: block; width: 100%; height: auto; }

	#fullpage { height: auto !important; position: static !important; }
	.section { position: static !important; height: auto !important; overflow: visible !important; background: transparent; }
	.section > .bg,
	.stage > img,
	.hero-ad,
	.copyright { display: none !important; }
	.stage { position: static; left: auto; top: auto; width: auto; height: auto; margin: 0; zoom: 1; }

	.hud { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; transform: none; }
	.gnb { display: none; }

	.socials { position: static; top: auto; right: auto; }
	.social-avatar,
	.social-fb { position: absolute; top: 0.2%; width: 10%; height: auto; aspect-ratio: 1; background-size: auto 100%; z-index: 5; }
	.social-avatar { left: 2.5%; background-position: left center; }
	.social-fb { left: 14%; background-position: right center; }

	.m-menu-btn { position: fixed; top: 8px; right: 8px; z-index: 6; width: 10%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 12px;
		 background: #0a274abf; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
	.m-menu-btn span { display: block; width: 56%; height: 2px; background: #969696dd; }
	.m-menu { display: none; position: fixed; z-index: 6; width:100%;height: 100%; padding: 100px 30px; background: #fff8edf5; }
	.m-menu.is-open { display: flex; flex-direction: column; gap: 8px; pointer-events: auto; }
	.m-menu a { display: block; padding: 10px 20px; border-radius: 50px; margin-top:5px; border: 1px solid #0000007b; 
		background: rgba(0, 0, 0, 0); color: #361f00; font-size: 20px; font-weight: 500; text-align: center; }

	/* 1024 p01 註冊 */	
	.p01 .reg-panel { position: static; width: auto; height: auto; padding: 0; background: none; }
	.reg-form { position: absolute; left: 15.625%; top: 23.7%; z-index: 3; width: 70.052%; height: 4%; padding: 2.2% 3.2% 2%; gap: 4px; }
	.reg-line { flex: 0 0 22%; height: 22%; align-items: stretch; }
	.reg-line .reg-select { height: 100%; }
	.reg-line .reg-select select,
	.reg-line .js-phone { height: 100%; }
	.reg-form input[type="email"] { height: 22%; flex: 0 0 22%; }
	.reg-form input,
	.reg-form select { font-size: 14px; border-radius: 8px; border-width: 2px; }

	.reg-line .reg-select { width: 28%; }
	.reg-line .reg-select select { padding-right: 22px; }
	.reg-line .reg-select::after { right: 8px; margin-top: -4px; border-left-width: 5px; border-right-width: 5px; border-top-width: 8px; }
	.reg-agree { padding-left: 0; font-size: 12px; }
	.reg-agree span,
	.reg-agree .txt-link { font-size: 11px; }
	.reg-agree input { width: 14px; height: 14px; }
	.p01 .reg-form .btn-reserve { height: 22%; font-size: 22px; letter-spacing: 0.08em; }
	 
    /* 1024 p02 福利 */	
	.benefit-board { left: 3.91%; top: 36.52%; width: 93.88%; height: 9.22%; background: none; }
	.benefit-board .benefit-card-pc { display: none; }
	.benefit-board .benefit-card-m { display: block; width: 100%; height: 100%; object-fit: contain; }

	.benefit-board .benefit-tabs { left: 1.6%; right: 1.6%; top: 0.6%; height: 9.6%; }
	.benefit-board .benefit-tabs-bg { left: 0; right: 0; top: 0; bottom: auto; width: 100%; height: 100%; border-radius: 10px; }
	.benefit-board .benefit-tabs-list { left: 0; width: 100%; height: 100%; gap: 0; align-items: stretch; }
	.benefit-board .benefit-tab { height: 100%; padding: 0px; border-radius: 10px; font-size: clamp(13px, 2.8vw, 18px); white-space: nowrap; }
	.benefit-board .benefit-tab.is-on { height: 100%; }
	.benefit-board .benefit-slides { left: 5%; right: 3%; top: 12%; bottom: 12%; }
	.benefit-board .benefit-arrow { top: 34.5%; width: 15%; height: auto; aspect-ratio: 1; margin-top: 0; box-shadow: none; background-color: transparent;
		 background-repeat: no-repeat; background-position: center; background-size: contain; transform: translateY(-50%);}

	.benefit-board .benefit-arrow::before { content: none; }
	.benefit-board .benefit-prev { left: 5.8%; background-image: url("../images/benefit__pre.png"); }
	.benefit-board .benefit-next { right: 5.7%; background-image: url("../images/benefit__next.png"); }
	.benefit-board .benefit-prev:hover { background-color: transparent; transform: translateY(-50%) translateX(-4px); }
	.benefit-board .benefit-next:hover { background-color: transparent; transform: translateY(-50%) translateX(4px); }
	.benefit-board .benefit-dots { left: 3%; right: 0; bottom: 5%; gap: 2.3%; }
	.benefit-board .benefit-dot { width: 2.5%; height: auto; aspect-ratio: 1; }
	.benefit-board .benefit-dot.is-on { width: 3%; }

	/* 1024 p03 獵團 */	
	.recall-btn, 
	.invite-btn,
	.invite-kbtn, 
	.friend-btn { z-index: 3; height: auto; font-size: 16px; }
	.stage > img.recall-board-m { display: block !important; left: 3%; top: 51.39%; width: 94%; height: auto; z-index: 2; }
	.recall-btn { left: 40.1%; top: 61.52%; width: 47.17%; aspect-ratio: 217 / 46; font-size: clamp(16px, 4.6vw, 28px); }
	.recall-btn::after { right: 5%; margin-top: -0.35em; border-top-width: 0.4em; border-bottom-width: 0.4em; border-left-width: 0.65em; }

	/* 1024 p04 好友 */	
	.invite-btn { left: 27.6%; top: 73.82%; width: 50.91%; aspect-ratio: 243 / 51; font-size: clamp(15px, 4.2vw, 26px); }
	.invite-btn::after { right: 13%; margin-top: -0.32em; border-top-width: 0.36em; border-bottom-width: 0.36em; border-left-width: 0.58em; }
	.invite-kbtn { left: 42.71%; top: 76.26%; width: 27.41%; aspect-ratio: 142 / 43; font-size: clamp(13px, 3.6vw, 20px); }

	.invite-kbtn::after { right: 12%; margin-top: -0.28em; border-top-width: 0.32em; border-bottom-width: 0.32em; border-left-width: 0.52em; }
	
	/* 1024 p05 老朋友 */	
	.friend-btn { left: 9.9%; top: 90.53%; width: 50%; aspect-ratio: 400 / 60; font-size: clamp(13px, 3.6vw, 22px); }

	.friend-btn::after { right: 8%; margin-top: -0.33em; border-top-width: 0.33em; border-bottom-width: 0.33em; border-left-width: 0.54em; }

	.recall-btn:hover,
	.invite-btn:hover,
	.invite-kbtn:hover,
	.friend-btn:hover { background: #d92b09; box-shadow: none; transform: none; color: #ffffff; }

	.recall-btn:hover::after,
	.invite-btn:hover::after,
	.invite-kbtn:hover::after,
	.friend-btn:hover::after { transform: none; }


	.top-btn { position: fixed; right: 12px; bottom: 16px; z-index: 45; width: 54px; padding: 0; border: 0; background: none; }
	.top-btn img { width: 100%; height: auto; display: block; }

	html.is-pop-lock body { position: fixed; left: 0; width: 100%; }

	/* 1024 pop：仅打开/关闭动画期间占位，成功或手动关闭后回到 style.css 的 display:none */
	#pop_ab.is-open,
	#pop_ab.is-closing { display: block; }
	.pop-box-lg { width: min(440px, 90vw); aspect-ratio: 674 / 958; background-image: url("../images/pop_bg01_m.png"); }
	.pop-box-lg h2 { font-size: 22px; }
	.pop-body { top: 14%; bottom: 5%; font-size: 13px; }
	.pop-box-sm p { font-size: 18px; }
	.pop-close { width: 60px; height: 60px; }
}