@CHARSET "UTF-8";
/* ==========================================================================
   手機版首頁 · 滾動條海報
   路徑：/web/Public/css/home-slide.css
   只在 Mobile/index.html 引入，不動 main-mobile-min.css（免重新打包）
   ========================================================================== */
/* 注意：jQuery Mobile 的 [data-role=page] 會把直接子元素當 flex item，
   width:auto 會被收敛成 0，所以這兩層必須寫死 width:100%。 */
.m_slides{position:relative;overflow:hidden;background:#ebe6e2;width:100%;}
/* 2026-09-26：取消「壓成細條 + 裁切」——裁切會把海報文字切掉不好看，
   改為按圖片原比例整張顯示（點擊行為不變：模板呼叫 jyActOpen() 彈全屏活動層） */
.m_slides_track{
	display:block;width:100%;
	white-space:nowrap;font-size:0;line-height:0;
	-webkit-transition:-webkit-transform .3s ease-out;
	transition:transform .3s ease-out;
	-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.m_slides_track a{display:inline-block;width:100%;vertical-align:top;}
.m_slides_track img{width:100%;height:auto;display:block;border:0;}
.m_slides_dots{
	position:absolute;left:0;right:0;bottom:4px;text-align:center;line-height:1;
	pointer-events:none;
}
.m_slides_dots i{
	display:inline-block;width:6px;height:6px;border-radius:50%;
	background:rgba(255,255,255,.62);margin:0 3px;
	box-shadow:0 0 2px rgba(0,0,0,.25);
	-webkit-transition:width .2s,background .2s;transition:width .2s,background .2s;
}
.m_slides_dots i.on{width:16px;border-radius:4px;background:#ffd466;}
/* 只有一張海報時不顯示圓點 */
.m_slides.m_one .m_slides_dots{display:none;}

/* ==========================================================================
   首頁「物流抽獎」入口條  2026-09-27
   位置：緊貼滾動海報下方（Web/Mobile/index.html）
   目的：抽獎原本只在活動頁裡，很多人不知道 → 首頁直接給一條高對比入口
   注意：必須 width:100%（jQM [data-role=page] 直接子元素否則塌成 0）
   ========================================================================== */
.m_draw{display:block;width:100%;box-sizing:border-box;padding:9px 12px;
	text-align:left;text-decoration:none;overflow:hidden;
	background:linear-gradient(100deg,#8E0A11 0%,#D31F26 52%,#F0653A 100%);
	box-shadow:0 2px 8px rgba(120,10,10,.22);}
.m_draw *{box-sizing:border-box;}
.m_draw_l{display:inline-block;vertical-align:middle;width:66%;}
.m_draw_l b{display:block;font-size:16px;font-weight:bold;color:#FFE7A0;letter-spacing:1px;}
.m_draw_l i{display:block;font-size:12px;font-style:normal;color:#FFE3D8;margin-top:2px;}
.m_draw_r{display:inline-block;vertical-align:middle;width:32%;padding:8px 0;text-align:center;
	border-radius:18px;font-size:14px;font-weight:bold;color:#8E0A11;
	background:linear-gradient(180deg,#FFF6D2,#FFD466 60%,#F0A81E);
	box-shadow:0 3px 8px rgba(90,3,8,.3);
	-webkit-animation:mDrawPulse 1.6s ease-in-out infinite alternate;
	animation:mDrawPulse 1.6s ease-in-out infinite alternate;}
@-webkit-keyframes mDrawPulse{from{box-shadow:0 3px 8px rgba(90,3,8,.3);}to{box-shadow:0 3px 8px rgba(90,3,8,.3),0 0 0 4px rgba(255,212,102,.45);}}
@keyframes mDrawPulse{from{box-shadow:0 3px 8px rgba(90,3,8,.3);}to{box-shadow:0 3px 8px rgba(90,3,8,.3),0 0 0 4px rgba(255,212,102,.45);}}