/* @import url('https://fonts.googleapis.com/earlyaccess/cwtexyen.css'); */
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:500,700,900&subset=chinese-traditional');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp'); /* Google Material icons */

/* reset */
/* 表單樣式 IE,Edge 部分無效 */
textarea{resize: none;}
input,
button,
textarea,
select,
input[type=checkbox]+Label,
input[type=radio]+Label{ font-size:24px; font-family: Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; display: inline-block;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; outline:0 none;}

input[type=range],
input[type=text],
input[type=password],
input[type=file],
input[type=number],
input[type=url],
input[type=email],
input[type=tel],
input[list],
input[type=button],
input[type=submit],
.bodybox button,
textarea,
select,
output{ border: none; border:1px solid #bcbcbc; background-color: rgba(255,255,255,.7); padding:15px; vertical-align:middle; border-radius: 50px; color: #000;}

input[type=range]{ overflow: hidden; background: none;}
/*input[type=range]::-webkit-slider-runnable-track{ background-color: #eee;}*/
input[type=range]::-webkit-slider-thumb{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative; width:10px; height:10px; background-color:#333; border-radius:50%; transition:.2s;
}
input[type=range]::-webkit-slider-thumb::before,
input[type=range]::-webkit-slider-thumb::after{ content:""; display: block; position: absolute; top: 3px; width: 2000px; height: 4px;  pointer-events: none; transition:.2s;}
input[type=range]::-webkit-slider-thumb::before{ left: -1997px; background-color: #f22;}
input[type=range]::-webkit-slider-thumb::after { left: 10px; background-color: #edc;}

input[type=button],
input[type=submit],
input[type=checkbox]+Label,
input[type=radio]+Label,
.bodybox button {cursor:pointer;vertical-align:middle;}

input:focus,
.bodybox button:focus,
select:focus { border-color:#333; outline:0 none;}

input:disabled, button:disabled {opacity:0.5; cursor: default;}

input[type=number] { -moz-appearance:textfield; }
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }

input[type=checkbox], input[type=radio]{display: none;}
input[type=checkbox]:focus, input[type=radio]:focus{border:none; box-shadow:none;}

input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before{font-size:25px; transition: font-size .5s;}

input[type=checkbox]+Label::before{content:"check_box_outline_blank";}
input[type=checkbox]:checked+Label::before{content:"check_box";}
input[type=radio]+Label::before{content:"radio_button_unchecked";}
input[type=radio]:checked+Label::before{content:"radio_button_checked";}

input.alone[type=radio],
input.alone[type=checkbox] {display: inline-block; width: auto !important; cursor: pointer;}
input.alone[type=checkbox]::before {content: "check_box_outline_blank";}
input.alone[type=checkbox]:checked::before {content: "check_box";}
input.alone[type=radio]::before{content:"radio_button_unchecked";}
input.alone[type=radio]:checked::before{content:"radio_button_checked";}

select {
    background-image: url(../Images/ui/icon_form_select_arrow.svg);
    background-size: auto 100%;
    background-position: 100% center;
    background-repeat: no-repeat;
    padding-right: 35px;
    padding-left: 15px;
    background-image: none \9;
    padding: 6px 10px 6px 10px \9;
}
select::-ms-expand {display:none;}
select option[disabled], select option:disabled {color:#999;}
Label span{ vertical-align: middle; margin-top: 2px; margin-left: 5px;}

/* Google Material icons */
input.alone[type=radio]::before,
input.alone[type=checkbox]::before,
input[type=checkbox]+Label::before,
input[type=radio]+Label::before,
.UI::before,
.micons {
/*    font-family: 'Material Icons';*/
    font-family: 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
/*    line-height: 1;*/
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    /*  transition:font-size .5s;*/
    vertical-align: middle;
}

.UI.first::before {content: 'keyboard_arrow_left';}
.UI.last::before {content: 'keyboard_arrow_right';}

/* scrollbar */
.lightbox .contain {
  --scrollbar-foreground: var(--pri01);
  --scrollbar-background: #AAA;
  /* Foreground, Background */
  scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background);
}
.lightbox .contain::-webkit-scrollbar {
  width: 2px; /* Mostly for vertical scrollbars */
  height: 0px; /* Mostly for horizontal scrollbars */
}
.lightbox .contain::-webkit-scrollbar-thumb { /* Foreground */
  background: var(--scrollbar-foreground);
}
.lightbox .contain::-webkit-scrollbar-track { /* Background */
  background: var(--scrollbar-background);
}

/* init */
:root{
    --pri01:#f3410e; /* 主色紅 */
    --pri02:#e7ac00; /* 主色橘 */
    --pri03:#00aeef; /* 主色藍 */
    --pri02a:#f2af4a; /* 橘2 */
	
    --gradient01:linear-gradient(126deg, var(--pri01) 0%, var(--pri01) 50%, var(--pri02a) 58%, var(--pri02a) 62%, var(--pri01) 70%, var(--pri01) 100%); /* logo 漸層 */
    --gradient02: linear-gradient(126deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.6) 58%, rgba(255,255,255,0.8) 62%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0) 100%); /* logo 漸層 */
	
}
.pc{ display: inline-block!important;}
.mobile{ display: none!important;}

.clear{display:block; width: 100%; clear: both;}
img{display:inline-block;}

.bodybox a,
.lightbox a,
.lightbox input.btn{ color: var(--pri01); font-weight: bold; cursor: pointer; text-decoration: none;}

span.red{color:var(--pri01);}

.bodybox * .btnbox{ width:100%; text-align:center; display:flex; justify-content:space-evenly; margin-top:30px; font-size:0; position:relative; justify-content:center; align-items:center;}
.btnbox input.btn,
.btnbox a.btn,
.btnbox a.wd-btn,
.btnbox input.wd-btn{background: linear-gradient(90deg, #E94C19 0%, #EE7813 100%); padding: 12px 24px; margin:0 10px 20px; min-width:250px; border-radius: 50px; display:inline-block;}

/*.lightbox .btnbox a.btn{min-width:45%;}*/
.formbox input.btn,
.formbox .btnbox a.btn{margin:0 25px; min-width: 270px;}
.btnbox input.btn{border:none;}
input.btn,
a.btn{font-size:24px; font-weight:900; border-radius:50px; text-decoration:none; color:#FFF; padding:15px 30px; background-color:var(--pri01); cursor:pointer; transition: .3s;}
input.btn:hover,
input.wd-btn:hover,
a.wd-btn:hover,
a.btn:hover{transform: scale(1.05);}

.btn.hot,
.wd-btn.hot{ background: var(--gradient01); background-position: 150% 0; background-size: 400%; animation: btnshine 4s linear 0s infinite normal;}
@keyframes btnshine{
    0% {background-position: 150% 0;}
    85% {background-position: 150% 0;}
    100% {background-position: 0% 0;}
}


#camera{ display: block; position:relative; background-color: #000; width: 100%;  overflow:hidden;}
/*#camera::after{ content: ""; display: table; padding-top: 100%;}*/
#camera #reader{ position: relative;min-height: 700px;}


/* tablebox */
div.tablebox{ display: table; font-size: 0px;}
div.tablebox > ul{ display: table-row;}
div.tablebox > ul > li{ display:table-cell; padding: 5px;}
div.tablebox li{font-size: 30px;}
div.tablebox li.narrow{font-size: 32px;}
div.tablebox .head{ color: var(--pri01); font-weight: bold;}

/* 表格-確認資料 */
div.tablebox.fc{ width:600px; margin:20px auto 0 auto; display: inline-table; vertical-align: middle;}
div.tablebox.fc,
div.tablebox.fc > ul,
div.tablebox.fc > ul > li{}
div.tablebox.fc > ul > li{ padding: 10px;}
div.tablebox.fc > ul > li:nth-of-type(1){width:220px;}
/*div.tablebox.fc > ul.bill{display: flex; align-items: center;}*/
div.tablebox.fc > ul > li.head{font-size:30px; vertical-align: middle; }
/*div.tablebox.fc > ul > li:last-child{max-width:380px;}*/
div.tablebox.fc > ul > li a{ display: inline-block;}
div.tablebox.fc,
div.tablebox.fc > ul{text-align:left;}
div.tablebox.fc > ul.w100 > li:nth-of-type(1){width:400px;}
div.tablebox.fc > ul > li b{font-weight:400; border: solid 1px #000; padding:5px 10px; border-radius:5px;}
div.tablebox.fc > ul > li img{ max-width: 100%; max-height: 600px;}
img.doll{  display: inline-block; vertical-align: middle; margin-right: 30px; width: 350px;}

/* 表格-查詢發票結果 */
div.tablebox.cr1{ width: 100%;}
div.tablebox.cr1 .head li{ border-bottom: none; color: var(--pri01);}
div.tablebox.cr1 li{ font-size: 14px; color: #444; font-weight: normal; border-bottom: 1px dashed #444; text-align: center;}
div.tablebox.cr1 > ul.head li{font-weight:bolder;}

/* pager */
.pagebox{ width: 100%; text-align: center; font-size: 14px; margin: 15px 0;}
.pagebox a{ display: inline-block; vertical-align: middle; color: #444; padding: 5px; cursor: pointer; min-width: 26px; border-radius: 50%;}
.pagebox a::before{ font-size: 20px;}
.pagebox a:hover,
.pagebox a.focus{ background-color: var(--pri01); color: #FFF;}

/* lightbox */
.lightbox{ display: none; position: fixed; width: 100%; height: 100vh; background-color: rgba(0,0,0,.8); z-index: 99; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.lightbox.on{ display: flex; align-items: center; justify-content: center;}
.lightbox .white{ background-color: #FFF; display: inline-block; border-radius: 32px; position: relative; background-size: 100% auto; background-repeat: no-repeat; background-image:url(../images/202508/popup_top_banner.jpg); padding:250px 25px 25px;}
.lightbox .contain{text-align: center; width: 850px; height: auto; overflow: auto; max-height: calc(80vh - 340px); padding-right: 10px;}
.lightbox.clean .white{ background-image: none; padding: 10px; }
.lightbox.clean .contain{max-height: 80vh;}
.lightbox a.close{width:66px; height:66px; background:url(../images/ui/pop_close.png) no-repeat center; background-size:contain; position:absolute; top:-33px; right:50%; margin:-45px -33px 0 0; cursor:pointer;}
.lightbox a.close:hover{ animation: rubberBand .8s linear 0s 1 normal;}
.lightbox .tablebox{ margin:20px auto;}
.lightbox.cam button{font-size: 48px; font-weight: bold; letter-spacing: 3px;  border-radius: 10px; text-decoration: none; color: #FFF; padding: 20px 40px; background-color: var(--pri01); margin: 15px 0 0 0;}

.bdi-local-activation-visually-hidden{display:none;}/* 隱藏奇怪的字 */
body{ background-size: 100% auto; }
.bodybox,
.lightbox{font-family: 'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; color: #000; }

.bodybox dl, .bodybox dt, .bodybox dd, .bodybox ul, .bodybox li{ padding: 0; margin: 0;}

.bodybox *, 
.bodybox *::before, 
.bodybox *::after{box-sizing:border-box; display:inline-block;}

.bodybox{min-height:calc(100vh - 56px - 8.61111vw - 1em); padding: 0 0 80px;}

.bodybox .container{display:block; width:100%; max-width:1040px; margin:0 auto; text-align:center;}
.bodybox h1, .bodybox h2, .bodybox h3, .bodybox h4, .bodybox h5, .bodybox h6,
.lightbox h1, .lightbox h2, .lightbox h3, .lightbox h4, .lightbox h5, .lightbox h6{ width: 100%; text-align: center; font-family: Arial, Helvetica, 'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; }
.bodybox h2{ width: 100%; text-align: center; color: var(--pri01); font-size: 40px; font-weight: bold;}
.bodybox h3{ width: 100%; font-size: 24px; padding: 10px; margin: 0 0 20px 0; text-align: center; font-weight: 900; color: var(--pri01);}
.bodybox h6{ }

.formbox{ width: 100%; max-width:800px; padding: 25px; margin: 0 auto; display: block;}
.formbox.shadow{ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); border-radius: 16px; background-color: #fff; position: relative; overflow: hidden;}
/* .formbox.check{ max-width: none; padding:0px 0 25px 0;} */
.formbox .sample{ width: 250px; float: left; filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.3));}
.formbox .sample img{display:none;}
.formbox .sample.ball01 img.ballPic01,
.formbox .sample.ball02 img.ballPic02{display:inline-block;}
.formbox .scan{ display: none; background-color: #f3f3f3; width: 100%; padding: 45px;}
.formbox .scan img{ vertical-align: middle; margin:0 30px;}
.formbox .scan .txt{ vertical-align: middle; font-size: 48px; font-weight: bold;}
.formbox .scan .txt a{text-decoration:underline;}

.formbox .formtable{ width: 100%;}
.formbox .formtable dd label{ cursor: pointer;} /* 上傳發票圖片 */
.formbox dl,
.formbox dt,
.formbox dd{ width: 100%; text-align: left; padding: 8px;}
.formbox dd{ padding-top: 0px;}
.formbox dt{ font-size:32px; color:var(--pri01); font-weight:bold; align-items:center; display:flex;}
.formbox dt.w100{display:block;}
.formbox dt.w100 i{display:block;}
.formbox dt i.note{ font-size:22px; color:#000; font-style:normal; vertical-align:middle; padding-left:5px;}
.formbox dd{ font-size: 24px; color: #333; font-weight: bold;}

div.tablebox{ width: 100%;}
.checkinvoice div.tablebox{ width: 100%; max-width: 400px;}
div.tablebox h6{ font-size: 14px; font-weight: 900; text-align: left; display: block; margin: 0 0 3px;}
div.tablebox li{ font-size: 14px; font-weight: 900; text-align: left; padding: 10px;}
div.tablebox i.note{ width: 100%; font-size: 12px; font-weight: normal; margin-top: 3px; color: #444; font-style: normal;}
div.tablebox input,
div.tablebox select,
div.tablebox label{ width: 100%; font-size: 16px;}
div.tablebox label{ text-align: center; padding: 15px; border: 1px solid #BCBCBC; border-radius: 16px;}
div.tablebox label + i.note{ text-align: center;}
div.tablebox li.upload img{ max-width: 240px;}

.formbox .tablebox input.half,
.formbox .tablebox select.half{ width: 40%;}
.validatebox{ font-size: 0; display: inline-block; margin-left: 5px; vertical-align: middle;}
.validatebox img{ border-radius: 10px; margin-left: 10px;}

.formbox dl.agree{ width:100%; min-width: 500px; margin: 0 auto; padding: 0; display: block;}
.agree a{ color: var(--pri01); text-decoration:none; }
.agree i{font-style: normal; display: block; font-size: 12px; font-weight: normal; color: #444; padding: 0;}
.agree input[type=checkbox]+Label::before{ vertical-align: middle;}
.agree input[type=checkbox]+Label{font-size: 14px; display:flex; align-items:flex-start;}
/* img.uploadImg{ width: 300px;} */

.formbox.check{}
.formbox.check .tablebox li span{ display: block; font-weight: normal; padding: 14px 17px; border-bottom: 1px solid #B1B1B1;}
.formbox.check .tablebox li span img{ display: block; margin: 0 auto; max-width: 240px;}

div.note{width:100%; max-width: 1000px; font-family: 'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; font-size: 12px; font-weight: 700; text-align: center; margin-top:30px;}
div.note span{ display: inline-block; vertical-align: middle; white-space: nowrap; margin: 2px;}
div.note a{ color: var(--pri03);}
.formbox+div.note{ margin-top: 0;}
div.note script{ font-size: 0;}

a.wd-btn,
input.wd-btn{ display: inline-block; width: 240px; height: 60px; border-radius: 10px; border: none; margin: 0 6px; position: relative; background-color:var(--pri01); cursor:pointer; transition: .3s;}
a.wd-btn::before,
input.wd-btn::before{ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-size: auto 100%; background-position: center; background-repeat: no-repeat;}
a.wd-btn > span{ display: none;}
a.wd-btn > i.deco{ display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
a.wd-btn > i.deco::before,
a.wd-btn > i.deco::after{ content: ''; position: absolute; z-index: 9; background-position: center; background-repeat: no-repeat; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));}

.wd-btn.wd1::before{ background-image: url(../images/202410/wd01.png);} /*活動辦法/注意事項*/
.wd-btn.wd2::before{ background-image: url(../images/202410/wd02.png);} /*立即參加即抽即贏*/
.wd-btn.wd3::before{ background-image: url(../images/202410/wd03.png);} /*查詢發票*/
.wd-btn.wd4::before{ background-image: url(../images/202410/wd04.png);} /*立即購買*/
.wd-btn.wd5::before{ background-image: url(../images/202410/wd05.png);} /*免費親子手作DIY*/
.wd-btn.wd5a::before{ background-image: url(../images/202410/wd05a.png);} /*點擊下載DIY*/
.wd-btn.wd6::before{ background-image: url(../images/202410/wd06.png);} /*查詢發票*/
.wd-btn.wd7::before{ background-image: url(../images/202410/wd07.png);} /*返回活動首頁*/
.wd-btn.wd8::before{ background-image: url(../images/202410/wd08.png);} /*萬聖節百寶袋*/
.wd-btn.wd9::before{ background-image: url(../images/202410/wd09.png);} /*小蝙蝠與小幽靈*/
.wd-btn.wd10::before{ background-image: url(../images/202410/wd10.png);} /*女巫及巫師杖*/
.wd-btn.wd11::before{ background-image: url(../images/202410/wd11.png);} /*重新輸入*/
.wd-btn.wd12::before{ background-image: url(../images/202410/wd12.png);} /*送出*/
.wd-btn.wd5 > i.deco::before,
.wd-btn.wd5a > i.deco::before{ width: 39px; height: 28px; background-image: url(../images/202410/wd05-deco1.png); background-size: contain; bottom: -10px; left: 5px;}
a.wd-btn.wd5 > i.deco::after,
a.wd-btn.wd5a > i.deco::after{ width: 66px; height: 43px; background-image: url(../images/202410/wd05-deco2.png); background-size: contain; top: -43px; right: 10px;}
/* input無法使用偽元素 */
input.wd-btn.wd11,
input.wd-btn.wd12{ background-image: url(../images/202410/wd11.png); background-size: auto 100%; background-position: center; background-repeat: no-repeat; font-size: 0;}
input.wd-btn.wd12{ background-image: url(../images/202410/wd12.png);}

h3.wd-title{ font-size: 0; background-color: var(--pri01); width: 100%; height: 45px; background-size: auto 100%; background-repeat: no-repeat; background-position: center;}
.wd-title.wd1{background-image: url(../images/202410/title-wd1.png);} /*公布結果*/
.wd-title.wd2{background-image: url(../images/202410/title-wd2.png);} /*請確認以下資料*/
.wd-title.wd3{background-image: url(../images/202410/title-wd3.png);} /*請輸入以下資料*/
.wd-title.wd4{background-image: url(../images/202410/title-wd4.png);} /*得獎名單*/
.wd-title.wd5{background-image: url(../images/202410/title-wd5.png);} /*DIY親子活動*/


/* ===================================================================================================================== */
/* index */
/* KV-img 1440 x 660  45.8333% */

#header{z-index:10;}
.bodybox.home{}
.bodybox.index .container{max-width:none;}
.bodybox.index .btnbox{width:100%; margin:30px auto 0; display:inline-block; text-align: center;}
.bodybox.home div.note{ margin-bottom: 30px;}

.index .KV{ width: 100%; max-width: 1280px; margin: 0 auto; display: block; position: relative; font-size: 0; }
.KV b{ position: relative; display: inline-block; background-repeat: no-repeat; background-position: center; background-size: contain;}
.KV b::after{ content: ""; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; position: relative; z-index: 0;}
.KV b.k1{ width: 41.434%; background-image: url(../images/202508/KV1.png);}
.KV b.k1::after{width: 100%; padding-top: 127.9%; background-image: url(../images/202508/KV1s.png); animation: flash 3s linear .5s infinite normal;}
.KV b.k2{ width: 58.566%; background-image: url(../images/202508/KV2.png);}
.KV b.k2::after{width: 100%; padding-top: 90.49%; background-image: url(../images/202508/KV2s.png); animation: flash 4s linear 1.9s infinite normal;}

.buyNow .btnbox a{ min-width: 250px; font-size: 24px; font-weight: bolder; color: #FFF; padding: 12px 24px; border-radius: 100px;background: linear-gradient(90deg, #0CA3E9 0%, #77D4FF 100%);  transition: .3s; margin: 10px 15px;}
.buyNow .btnbox a.hot{ background: linear-gradient(90deg, #E94C19 0%, #EE7813 100%);}
.buyNow .btnbox a:hover{transform: scale(1.05);}

.bodybox.index.DIY .btnbox a.wd-btn{ border-radius: 10px;}

/* .btnbox a.vip.popup{right: 50%; margin-right: -460px; top: -190px;}
.buyNow .btnbox a.vip.popup{top: -100px; margin-right: -500px;} */
div.note{ position: relative;}
/* div.note a.vip.popup{ position: fixed; bottom: 20px; right: 20px; z-index: 80;}
.home div.note a.vip.popup,
.winning div.note a.vip.popup{ display: none;} */

/* 
.lightbox.checkinvoice .contain{ position: relative; padding-right: 0;}
.lightbox.checkinvoice .contain::before,
.lightbox.checkinvoice .contain::after{ content: ''; background-size: contain; background-repeat: no-repeat; background-position: center; position: absolute; top: 50%; transform: translateY(-50%);}
.lightbox.checkinvoice .contain::before{ width: 166px; height: 267px; background-image: url(../images/202410/ghost1.png); left: 0;}
.lightbox.checkinvoice .contain::after{ width: 166px; height: 235px; background-image: url(../images/202410/ghost2.png); right: 0;}
 */


/* 活動辦法 */
.rulelist{ font-size: 16px; font-weight: bold; width: 100%; line-height: 1.3; text-align: left;}
.rulelist .blue{ color: var(--pri03);}
.rulelist > dt,
.rulelist > dd{ margin: 0 0 10px;}
.rulelist > dt.title{ color: var(--pri01); font-size: 22px;}
.rulelist > dt{ margin-top: 20px;}
.rulelist > dd{ padding-left:0px; word-break: break-all;}
.rulelist li{ list-style-type: lower-latin; margin-bottom: 10px;}
.rulelist ul{ padding-left: 40px;}
.rulelist li li{ list-style-type: lower-roman; margin-left: 10px; margin-bottom: 0;}
.rulelist li > ul{ padding-left: 30px; margin-top: 10px; margin-bottom: 10px;}

/* 結果頁 */
/*.result .award{ width: 100%; margin: 50px auto 0;}*/
.result .award{width: 100%; height:289px; margin: 50px auto 0; background-size: contain; background-position:center; background-repeat:no-repeat; margin:0 auto 40px auto; display:block; background-image: url(../images/202410/giftWin01.png);}
/*.result .award.a1{background: url(../images/202410/giftWin01.png);}*/
.result .award b{ position: absolute; bottom: -20px; left: 0; font-size: 32px; width: 100%; text-align: center;}
.result .award b span{ font-size: 22px;}
.result .nowin .award{ width: 50%; float: left; margin-bottom: 50px;}

.result .btnbox{ margin: 50px auto 40px;}
.result .btnbox a{ margin: 0 30px;}

.result .txt{ width: 100%; color: #444; font-size: 16px; line-height: 1.5; padding: 0 20px; max-width:800px; text-align: center;}
.result .txt span{ display: inline; font-weight: bold;}
.result .txt.style2{font-size:12px;}
.result .txt.style2 b{font-size:16px; color: #000; }
.result .txt i.note{ font-size:22px; font-style: normal; font-family: Helvetica, 'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif;font-weight:700;}
.result .txt.style2 i.note{ font-size: 14px; margin-bottom: 10px;}
.result p.left{text-align:left; margin: 0;}

.youtube_area{ display: block; width: 100%; max-width: 480px; margin: 30px auto; text-align: center; }
.youtube_area img{ width: 310px;}
.youtube_area + .btnbox{ margin-top: 0!important;}
.ytbox{ position: relative; width: 100%; height: 0; padding-bottom: 56.25%; border-radius: 16px; margin: 20px auto; background-color: #EFEFEF; } /* 16:9 */
.ytbox iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.ytbox:last-child{ margin-bottom: 0; } /* 最後一個影片不需要 margin-bottom */

/* 活動贈品 */
.bodybox.gift{}
.gift .pic{}
.gift .pic img{ width: 100%; display: block; margin: 0 auto;}
.gift .pic .wd1{ max-width: 367px; margin: 30px auto 20px;}
.gift .pic .wd2{ max-width: 637px; margin-bottom: -30px;}
.gift .pic .wd3{ max-width: 977px; border-radius: 12px; border: 1px solid rgba(0,0,0,.16); filter: drop-shadow(0px 4px 25px rgba(0, 0, 0, 0.25));}
.gift .pic .wd4{ max-width: 400px; margin: 20px auto;}



/* 載入中動畫 */
.bodybox.loading .container{max-width:none;}
.loadingbox{ width: 100%; max-width: 1440px; text-align: center; font-size: 50px; color: var(--pri01); font-weight: bold; margin-top: 10px; }
.loadingbox ul, .loadingbox li{ display: inline-block;}
.loadingbox ul{ width: 700px;}
.loadingbox li{ width: 90%;}
.loadingbox li.p1{ font-weight: bolder; line-height: 1.2;}
.loadingbox li.p1 .word{font-size:20px;}
.loadingbox li.p1 .nu{font-size:52px;}
.loadingbox li.p1 .pt{font-size:20px;}
.loadingbox li.p2{border: 1px dashed var(--pri01); border-radius: 50px; background-color: #FFF; padding: 9px; text-align: left; line-height: 0; margin:0 auto;}
.loadingbox li.p2 b{background-color: var(--pri01); width: 0%; height: 24px; border-radius: 40px; position: relative; /* animation: processanimate 1s linear 0s 1 normal;*/}
.loadingbox li.p2 b::after{ content: ""; position: absolute; top: 50%; right: -20px; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; background-image: url(../images/plane.png); background-repeat: no-repeat; background-size: contain;}

.loadingbox p.txt{ width: 100%; margin: 80px 0 0px;}
.loadingbox p.txt span{ color: #000; font-size: 36px; width: 100%;}

@keyframes processanimate{
    0% {width: 0;}
    100% {width: 100%;}
}

/* ========== 輸入資料 =========== */
.bodybox > .banner{ width: 100%; height: auto; padding-top: 100px; text-align: center; position: relative; background: linear-gradient(180deg, #F9AD88 0%, #FFFFFF 100%);}
.bodybox > .banner img{ display: block; margin: 0 auto;}

.bodybox > .banner::before,
.bodybox > .banner::after{ content: ''; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%);; background-size: contain; background-repeat: no-repeat; background-position: center;}
.bodybox > .banner::before{width: 258px; height: 189px; background-image: url(../images/202508/star1.svg); left: 20%; animation: flash 3s linear 0s infinite normal;}
.bodybox > .banner::after{ width: 288px; height: 264px; background-image: url(../images/202508/star2.svg); right: 20%; animation: flash 3.2s linear 1.8s infinite normal;}

.bodybox.index > .banner::before{top: 0; left: 50%; transform: translateX(-50%);}
.bodybox.index > .banner::after{top: auto; bottom: 0; right: 50%; transform: translateX(50%); z-index: -1;}

/* ===================================================================================================================== */
/* RWD */
@media screen and (max-width: 980px) {
    
    
    /* ========== 首頁 ========== */
    .bodybox.index .container{max-width:100%;}
    .index .btnbox{margin-bottom: 310px; margin:0 auto;}
    
}
@media screen and (max-width: 900px) {
    /* .bodybox .container{overflow:hidden;} */
    .formbox dt {display:block;}
	.lightbox .white{padding:620px 25px 25px; background-image:url(../images/202508/popup_top_banner_m.jpg);}
	.lightbox .contain{width:100%; max-height: calc(80vh - 620px); padding-left:16px; padding-right:19px;}
	
    .bodybox * .btnbox{flex-direction: column;}

	.btnbox input.btn,
	.btnbox a.btn, 
	.btnbox input.wd-btn,
	.btnbox a.wd-btn{ width: 100%; margin: 20px 0!important; font-size: 48px!important;}
    .btnbox input.btn.w50, 
	.btnbox a.btn.w50,
	.btnbox input.wd-btn.w50,
	.btnbox a.wd-btn.w50{ width: calc(50% - 30px); height: 95px;}
	
    
	h3.wd-title{ height: 90px;}
	img.uploadImg{ width: 600px;}
	.validatebox img{ width: 300px;}
	
    /* ========== 首頁 ========== */
	.lightbox.checkinvoice .contain::before,
	.lightbox.checkinvoice .contain::after{ display: none;}
	
	/* div.tablebox{width:75%;}
    div.tablebox > ul > li{display:block;}
    div.tablebox.cr1 > ul > li{display:table-cell;}
    div.tablebox input[type=text],
    div.tablebox input[type=email],
    div.tablebox input[type=tel]{min-height:90px; min-width:100%; font-size:42px; text-align: center;} */
	
	/* 活動辦法 */
	.rulelist{font-size:27px;}
    .rulelist > dt.title{font-size:34px;}
    .rulelist > dd{margin-bottom:0;}
	
    .bodybox.buyNow .btnbox:nth-of-type(2){margin-top: 0;}
	.buyNow .btnbox a{ width: 100%; margin: 10px 0; font-size: 48px;}
	.scan .txt{ text-align: left; padding-top: 15px;}
	.result .btnbox a{ margin: 0 20px;}
    
}


@media screen and (max-width: 780px) {
    /*	健達官網 header 覆寫勿刪 */
    #header .bdi-local-activation-block-system-branding-block img{width: 240px;}
    #header:before{ padding-top: 90px;}
    .bdi-local-activation-menu--main-wrapper .bdi-local-activation-nav-panel{ top: 90px;}
    .bdi-local-activation-nav-mobile-button {width: 60px; height: 40px; top: 6px; right: 4px;}
    [lang*='zh-TW'] .bdi-local-activation-menu--main-wrapper .bdi-local-activation-nav-panel-content .bdi-local-activation-main-navigation-title{ padding-top: 114px; font-size: 50px;}
    .bdi-local-activation-menu--main-wrapper .bdi-local-activation-nav-panel-content > ul{ padding: 64px 0;}
    .bdi-local-activation-menu--main-wrapper .bdi-local-activation-nav-panel-content > ul > li{ margin: 20px 0;}
    .bdi-local-activation-menu--main-wrapper .bdi-local-activation-nav-panel-content > ul > li > a{ font-size: 50px;line-height: normal;}
        
    /*  contant RWD  */
    .pc{ display: none!important;}
    .mobile{ display: inline-block!important;}

    .bodybox h2{ font-size: 80px; font-weight: 900;}
    .bodybox > .banner{ padding-top: 130px;}
    .bodybox .container{ padding: 0 25px;}

    .lightbox .white{ width: 680px; margin-top: 80px;}
    .lightbox .white a.close{ width: 105px; height: 105px; top: -70px; right:50%; margin-right: -52.5px;}
/*	input[type=radio]+Label::before{font-size:35px; transition: font-size .5s; margin-top: 7px;}*/
	
	.bodybox input{font-size:42px;}
    a.btn{font-size:48px;}
	input.btn:hover, input.wd-btn:hover, a.wd-btn:hover, a.btn:hover{ transform: none;}
	
    .container.result a.btn{ padding:18px 10px 18px 20px;}
    
    .lightbox.checkresult.on a.btn{width:100%; height: auto; margin: 10px 0 !important;}
    .lightbox.checkresult.on .white{padding:620px 0px 25px 0;}
    .lightbox.checkresult.on .lightbox .contain{padding-left:0; padding-right:0;}
    .lightbox.checkinvoice.on a.btn{padding:18px 10px 18px 20px; min-width:540px; display:inline-block;}
	
    div.tablebox li{font-size: 52px;}
    div.tablebox.cr1 li{ font-size: 28px;}
    div.tablebox.cr1 .head li{ font-size: 36px;}
    div.tablebox.fc > ul > li:nth-of-type(1){width:100%;}
    div.tablebox.fc > ul > li:last-child{max-width:100%; letter-spacing:-2px;}
    div.tablebox.fc > ul > li.head{font-size:55px;}
    div.tablebox.fc > ul.bill{flex-direction:column;}
    
    .pagebox{font-size:28px;}
    .pagebox a{ min-width: 58px; line-height: 45px;}
    
    .bodybox input,
    .bodybox button,
    .bodybox textarea,
    .bodybox select,
    .bodybox input[type=checkbox]+Label,
    .bodybox input[type=radio]+Label{ font-size:28px!important; text-align: center; min-height: 90px; margin: 5px 0;}
    .bodybox select{ padding-right: 55px;}
    
    .bodybox{ padding-bottom: 120px; font-size: 0;}
    .bodybox input.btn
    .bodybox a.btn{ font-size:35px;}
    .bodybox h3{ font-size: 40px; padding: 25px 0;}

    .youtube_area{ max-width: none;}
    .youtube_area b{ font-size: 32px;}
    .youtube_area img{ width: auto;}
    
    /* .formbox{ padding: 0;} */
	.formbox+div.note{ margin-top: 20px;}
    .formbox .formtable{ width: 100%;}
    .formbox dl, .formbox dt, .formbox dd{ padding: 15px;}
    .formbox dt{font-size: 55px; text-align: center; display: flex; width: 100%; padding: 15px 0; justify-content: center; letter-spacing:-3px;}
    .formbox dt i.note{font-size: 30px; text-align: left; font-weight:600; letter-spacing: 0px; line-height: 35px; font-family: Arial, Helvetica,  'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif;}
    .formbox dt.w100 i.note{text-align:center;}
    .formbox dd{ font-size: 42px; text-align: center; padding-top: 0;}
    .formbox dd label img{width:600px;}
    .formbox dl.agree{ width:100%;}
    
    .agree dd{ text-align: left; font-size:38px;}
    .agree i{ font-size: 28px; font-weight: 700; font-family: Arial, Helvetica,  'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif;}
/*    .agree input[type=checkbox]+Label{text-align:left; padding-left:60px; position:relative;}*/
    .agree input[type=checkbox]+Label{text-align:left; padding-left:45px; position:relative; align-items:flex-start;
    justify-content:flex-start; min-height:inherit; font-size:38px;}
    Label span{letter-spacing:-1px;}
    .agree input[type=checkbox]+Label::before{font-size: 40px; position:absolute; left: 0px; margin-top: 9px;}
    
    .formbox.shadow{ border-radius: 32px;}
    .formbox div.tablebox,
    .formbox div.tablebox > ul,
    .formbox div.tablebox > ul > li{display:inline-block; width:100%; padding: 10px 0;}
    .formbox div.tablebox > ul > li{font-size:28px;}
    .formbox.check .tablebox li span{ padding: 28px 34px;}
    
    .result .txt{ font-size:34px; padding: 0 18px; text-align: center; letter-spacing: -1px;}
    .result .txt.style2{ font-size: 32px; letter-spacing: 0;}
    div.note,
    .result .txt i.note,
    .result .txt.style2 i.note{font-size:28px; padding:0 20px;}
    .result .txt.style2 b{font-size:32px;}

    div.note span{ white-space: normal;}

    div.tablebox label{ border-radius: 32px;}
    div.tablebox i.note{ font-size: 24px;}
    div.tablebox li.upload img{ max-width: 100%; margin: 20px 0;}
    
    .result .nowin .award{width:100%; float:none;}
    .result .award b{font-size:44px; bottom:-40px;}
    .result .award b span{font-size:29px;}
    
    /* div.tablebox.cr1 .head {display:none;}
    div.tablebox.cr1 ul{display:flex; width:100%; flex-direction:column; align-items:flex-start; margin-bottom:40px;}
    div.tablebox.cr1 > ul > li{display: block; font-size:36px; padding-left:200px; position:relative; margin-bottom:10px;}
    div.tablebox.cr1 > ul > li:last-child{margin-bottom:0;}
    div.tablebox.cr1 > ul > li::before{color:var(--pri01); font-size:36px; font-weight:600; position:absolute; left:40px; top:7px;}
    div.tablebox.cr1 > ul > li:first-child::before{content:"登錄號碼";}
    div.tablebox.cr1 > ul > li:nth-child(2)::before{content:"登錄時間";}
    div.tablebox.cr1 > ul > li:last-child::before{content:"登錄結果";} */

    div.tablebox h6{ font-size: 28px;}
    
    .pagebox{margin-top:0;}
    .pagebox a{font-weight: 300;}

    /* 共用 */
    .bodybox > .banner::before,
    .bodybox > .banner::after{display: none!important;}

    .checkinvoice div.tablebox{ max-width: none;}
    div.tablebox input, div.tablebox select, div.tablebox label{ font-size: 32px;}

    /* index */
    .index .KV{padding: 0 25px; z-index: 5;}
    .KV b{ width: 100%!important;}
    .KV b.k1{ background-image: url(../images/202508/top_banner_m.png);}
    .KV b.k2{ background-image: url(../images/202508/KV2m.png);}
    .KV b.k1::after,
    .KV b.k2::after{ background-image: none;}
    .KV b.k2::after{ padding-top: 258.944%;}


    /* ========== Loading ========== */
    /* .loadingbox{height:900px; background-image: url(../images/202410/bg_loading_m.jpg); background-size: 100% auto;} */
    .loadingbox ul{margin-left: 0;}
	.loadingbox li.p1{ margin-top: 10px;}
	.loadingbox li.p1 .nu{font-size:150px; letter-spacing: -3px;}
	.loadingbox li.p1 .word,
    .loadingbox li.p1 .pt{font-size:40px;}
    .loadingbox li.p2{ border-width: 2px;}
    .loadingbox li.p2 b{ height: 48px;}
    .loadingbox li.p2 b::after{ width: 88px; height: 88px; right: -40px;}
    
	
	
	/* ========== 得獎名單公布 ========== */
    .result.winning .txt{font-size:30px; padding:0; text-align: center;}
    .result.winning i.note{font-size:16px; letter-spacing:0;} 
	
    div.tablebox.fc > ul.w100 > li:nth-of-type(1){width:100%;}
    .result .txt.style2{font-size:24px;}
    .result .txt.style2 .word{margin-bottom:10px; width:100%;}
    .result .txt.style2 .word.title{letter-spacing:0; width:95%;}
    .result .txt.style2 i.note{font-size:16px; width:100%; padding:0;}
    .result .txt.style2 .word.L{width:95%;}
    
    .result .award{text-align:center; padding:30px 0;}
    .result .wordM{margin-bottom:10px;}

    .gift .pic .wd3{ border-radius: 32px;}
    .gift .pic .wd4{ max-width: none; margin-top: 80px;}
        
}


input#fulImg{display:none;}