@charset "utf-8";
/* CSS Document */

@import url("reset.css");
@import url("/css/font-awesome.css");
@import url("/css/animate.css");
@import url("/css/bootstrap4-Mfix.css");
@import url("/css/hover.css");
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

html, body { width:100%; height: auto;overflow-X:hidden; }
body { font-size:100%;}
*{transition:all .3s; -webkit-transition:all .3s;}

/*:before{ content:"\f146";font-family: 'FontAwesome'; }*/

.btnTop{ background: #CCC \9;background:rgba(0,0,0,.2); border-radius:50%; width:50px; height:50px; position: fixed;right:15px; bottom:15px;cursor:pointer; z-index:99; color:#FFF; text-align:center; font-family:Arial, Helvetica, sans-serif;	text-transform:uppercase; font-size:13px ; letter-spacing:1px; display: none  ; z-index:999;}
.btnTop:before {    content: "\f106";    font-family: 'FontAwesome';    font-size: 20px;    color: #FFF;    display: block;    width: 100%;    height: 25px;    padding-top: 0;}
.btnTop:hover{background:rgba(0,0,0,.4);}

.img-response{ max-width:100%; height:auto;}

/*------------item-inline-block------------*/
.item-inline-block{ letter-spacing:-5px;}
.item-inline-block > *{display: inline-block !important; letter-spacing:1px;vertical-align: top;}

/*------------item-table-cell------------*/
.item-table-cell{ display:table;}
.item-table-cell > *{display: table-cell !important; vertical-align: top;}


/*------------item-flex------------*/
.item-flex{ display:flex !important;display:-webkit-flex !important;flex-flow: row wrap}
.item-flex > *{flex:1;-webkit-flex:1 }


.empty {    display: inline-block;}


@media screen and (max-width: 640px) {
	
.vertical-xs{ display:block !important;	}
.vertical-xs  > *{  display:block !important; width:100% !important ;float:none !important; }
.empty {    display: block;    height: 1px;}
	
}



.show{ display:block !important;}
.hide{ display:none !important;}
.space-br {    display: inline-block;}

@media screen and (max-width: 640px) {	

.hide-xs{ display:none !important; }
.show-xs{ display:block !important;}
.space-br {    display: block;    line-height: 0;}
	
}





.wrap{width:100%;height:auto;position:relative; font-family:'Noto Sans TC',"微軟正黑體",Microsoft Yahei;line-height:1.6; background:#fff;}
		



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 版頭 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/

 .header {width:100%; position:relative; height: auto; overflow:hidden;background: url("https://a1cdnfile.blob.core.windows.net/official/images/action/20261016/header-bg.png");background-repeat: no-repeat;background-position: center bottom;background-size: cover;}
 .header span img{ width:100%; height:auto;}

 .header .center{width:100%;max-width:1000px;position:relative; margin:0 auto; z-index:1;}
 .header .center img{ width:100%; height:auto;}



 .header .logo{ position:absolute; left:8px; top:2px; z-index:6; }
 .header .logo img{width:100%; height:auto;}


/*白色LOGO+底色*/
/*
.header .logo {
    background-color: #3e4864;
    position: absolute;
    top: 0;
    width: 100%;
}
.logo a {
    display: inline-block;
}
.logo img {
    width: 250px;
    height: auto;
    padding: 10px;
}
*/



/*▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ 內容 ▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃*/



.container-wrap { width:100%; margin:0 auto;}






/*----------------------------- 注意事項文字 -----------------------------------  */

/* ul { width:80%; margin:0 auto; color:#a3a3a3; list-style:decimal; padding-left:30px;}
 ul li{ margin-bottom:10px; font-size:15px; color:#333333; line-height:1.5;}
*/







@media screen and (max-width: 640px) {	
	
	
	
}



/* 活動截止日期與倒數 */
.countdown-wrap { padding: 32px 16px; text-align: center; }
.promotion-period { margin: 0 0 12px; }
.countdown-title { margin-bottom: 12px; font-size: 20px; font-weight: 700; }
.timer { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.timer .number-wrap { min-width: 56px; font-size: 32px; font-weight: 700; }
.timer .unit { margin-left: 4px; font-size: 16px; font-weight: 400; }

/* 萬聖慶典：沿用活動主視覺的南瓜橘、幽夜紫與糖果粉。 */
.wrap { background: #17051f; color: #fff4e5; padding-top: var(--countdown-height, 70px); }
.wrap > .header { padding: 106px 24px 112px; }
.header .logo { top: 20px; left: 32px; width: 200px; }
.header .center { max-width: 1194px; }
.header-text img { display: block; width: 100%; height: auto; }
.countdown-wrap {
    position: fixed; top: 0; left: 0; z-index: 1000;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px;
    width: 100%; margin: 0; padding: 14px 24px;
    border-bottom: 1px solid #68407a;
    background: #271036; color: #fff4e5; box-shadow: 0 4px 16px #10041855;
}
.promotion-period { margin: 0; font-size: 15px; letter-spacing: 1px; }
.countdown-title { margin: 0; color: #f1a0ee; font-size: 16px; letter-spacing: 2px; }
.timer { gap: 8px; flex-wrap: nowrap; }
.timer .number-wrap {
    min-width: 56px; padding: 6px 10px; border-radius: 8px; white-space: nowrap;
    background: #3e1e4c; color: #ffbc52; font-size: 25px; line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.timer .unit { display: inline; margin-left: 4px; font-size: 12px; color: #e8cee9; }
.btnTop { background: #6f378c; }
.btnTop:hover { background: #9149ad; }
@media screen and (max-width: 640px) {
    .wrap > .header { padding: 88px 16px 90px; background-size: auto 100%; }
    .header .logo { top: 18px; left: 20px; width: 160px; }
    .countdown-wrap { padding: 12px; gap: 8px 12px; }
    .promotion-period { width: 100%; font-size: 13px; letter-spacing: 0; }
    .countdown-title { font-size: 13px; letter-spacing: 0; }
    .timer { gap: 4px; }
    .timer .number-wrap { min-width: 0; padding: 6px; font-size: 20px; }
}

.halloween-title { text-align: center; color: #24102d; }
.hero-eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 4px; }
.hero-heading { margin: 18px 0; font-size: clamp(38px, 7vw, 84px); font-weight: 900; line-height: 1.2; letter-spacing: 3px; }
.hero-heading span { color: #fff0ff; text-shadow: 3px 3px 0 #49215c; }
.hero-subtitle { font-size: clamp(18px, 3vw, 25px); font-weight: 700; }
.hero-offer { margin-top: 12px; font-size: clamp(22px, 4vw, 38px); font-weight: 800; }
.hero-offer strong { font-size: 1.6em; color: #fff; text-shadow: 2px 3px 0 #49215c; }
.hero-cta { display: inline-flex; gap: 28px; align-items: center; margin-top: 24px; padding: 12px 28px; border-radius: 40px; background: #281034; color: #fff; text-decoration: none; font-weight: 700; }
.hero-cta:hover { background: #512365; color: #fff; }
.content { max-width: 1200px; margin: 0 auto; padding: 36px 24px 72px; }
.block_wrap + .block_wrap { margin-top: 64px; }
.block-title { margin-bottom: 28px; font-size: clamp(22px, 3vw, 32px); font-weight: 800; text-align: center; color: #ffc369; line-height: 1.5; }
.block-title.ac { margin-top: 56px; color: #eaa0ef; }
.block-plan { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.content .block { display: flex; flex-direction: column; align-items: stretch; justify-content: space-between !important; width: auto; margin: 0; padding: 32px 24px; border: 1px solid #68407a; border-radius: 22px; background: #2c1439; text-align: center; box-shadow: 0 10px 0 #100418; }
.content .block p { margin: 0 0 24px; color: #fff4e5; font-size: 22px; font-weight: 700; line-height: 1.7; }
.row1 {
    padding: 32px 24px 36px;
    border: 1px solid #78468b;
    border-radius: 28px;
    background: radial-gradient(ellipse at top, #633078 0, #341542 65%);
}
.row1 > .block-title { color: #fff2cf; letter-spacing: 3px; text-shadow: 0 3px 0 #271033; }
.row1 .block-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 1fr); }
.module-names span { white-space: nowrap; }
.content .row1 .block {
    position: relative; border: 2px solid #ffd08a;
    background: linear-gradient(150deg, #ffc95c, #ff9a35);
    box-shadow: 0 8px 0 #10041866, inset 0 1px 0 #ffffff70;
}
.content .row1 .block.b2 {
    border-color: #f4baff;
    background: linear-gradient(150deg, #eda7fa, #c47eea);
}
.content .row1 .block:last-child {
    border-color: #ffe8b8;
    background: linear-gradient(150deg, #ffe5a4, #ffc464);
}
.row1 .block::before {
    content: '萬聖人氣精選'; align-self: center;
    margin: 0 0 20px; padding: 5px 14px; border-radius: 30px;
    background: #3a1749; color: #fff0d4;
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
}
.content .row1 .block p { color: #301139; }
.row1 .block .large { color: #3a1248; font-size: 60px; }
.row1 .block .small-word { color: #492450; }
.row1 .block .order-link { background: #33123f; color: #fff3df; box-shadow: 0 3px 0 #18062033; }
.row1 .block .order-link:hover { background: #58216b; color: #fff; }
.large { margin: auto 0 24px; color: #ffc369; font-size: 54px; font-weight: 900; line-height: 1.2; }
.small-word { margin-left: 6px; color: #dfcce5; font-size: 16px; font-weight: 400; white-space: nowrap; }
.order-link { display: flex; justify-content: center; align-items: center; gap: 14px; width: 100%; padding: 13px 16px; border-radius: 12px; background: #ffb344; color: #291330; font-size: 17px; font-weight: 800; text-decoration: none; }
.order-link:hover { color: #291330; background: #ffd18a; transform: translateY(-2px); }
.ac-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ac-plan .order-link { background: #e8a1ed; }
.ac-plan .order-link:hover { background: #f1c1f4; }
.notice { margin-top: 52px; padding: 28px 32px; border: 1px dashed #79528a; border-radius: 16px; color: #d5c0dd; font-size: 15px; line-height: 2; }
.hero-cta:focus-visible, .order-link:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media screen and (max-width: 950px) {
    .block-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row1 .block-plan { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 640px) {
    .hero-eyebrow { font-size: 11px; letter-spacing: 2px; }
    .hero-heading span { display: block; }
    .content { padding: 24px 16px 48px; }
    .block-plan { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .content .block { padding: 28px 20px; }
    .content .block p { font-size: 18px; }
    .row1 { padding: 24px 14px 28px; border-radius: 22px; }
    .block_wrap + .block_wrap { margin-top: 48px; }
    .notice { padding: 22px 20px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* 共用註冊區塊 */
#register { background: #4c5a65; padding: 60px 16px; color: #fff; }
#register .register_wrap { max-width: 600px; margin: 0 auto; text-align: center; }
#register .include-title { font-size: 32px; font-weight: 700; margin-bottom: 24px; }
#register .phone, #register .code .input { display: flex; gap: 10px; }
#register .code { margin-top: 12px; }
#register input#DAA009, #register input#M5Code {
    min-width: 0; flex: 1; width: 100%; padding: 0 12px;
    background: #fff; color: #333; border: 1px solid #ccc; border-radius: 6px;
}
#register a#sendCodeBtn, #register input#submitBtn {
    flex: 0 0 140px; background: #008f8f; color: #fff; border: 0;
    border-radius: 6px; cursor: pointer;
}
#register a#sendCodeBtn { padding: 0; }
#register .warn { display: block; margin-top: 12px; color: #ffe000; }
@media screen and (max-width: 480px) {
    #register .include-title { font-size: 26px; }
    #register a#sendCodeBtn, #register input#submitBtn { flex-basis: 120px; }
}
.comShare  h3 {
    color: #000;
}