/*@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 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');
/* Google Material icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp');

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

input,
.bodybox button,
textarea,
select,
output{border: 1px solid var(--pri01); border-radius: 50px; background-color:transparent; padding:10px 20px; vertical-align: middle; color: #000;}

input,
button {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=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;}

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;
	max-width: 100%;
}
select::-ms-expand {display:none;}
select option[disabled], select option:disabled {color:#999;}
/*Label span{ vertical-align: middle;}*/

/* 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 {
    font-family: 'Material Icons';
/*    font-family: 'Noto Serif TC', serif;*/
    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';}
.UI.file::before {content: 'file_upload';font-family: 'Material Icons Outlined';}
.UI.error::before {content: 'error_outline';font-family: 'Material Icons Outlined';}
.UI.check::before {content: 'check_circle';font-family: 'Material Icons Outlined';}
.UI.refresh::before {content: 'refresh';}


/* init */
:root{

    --pri01:#5C3327; /* 主色咖啡 */
    --pri01a:#E9460A; /* 主色咖啡2 */
    --pri02:#CC9C4A; /* 主色金 */
    --pri02a:#AC7F5E; /* 主色金深2 */
	--priBG:#C7A13C; /* 背景色 */

	--com01:#444444;/* 灰色 */
	--com02:#7D7D7D;/* 淺灰色 */

    
    --gradient01: linear-gradient(126deg, #2B1A16 0%, #45271F 30%, #5C3327 50%, #41251E 70%, #2B1A16 100%); /* logo 漸層 */
    --gradient02: linear-gradient(126deg, #B0641F 0%, #DFAB44 50%,  #945124 100%); /* logo 漸層 */
	
	--vh:1vh;
    
}
/* scrollbar */
::-webkit-scrollbar {width: 4px;} /* 寬 */
::-webkit-scrollbar-track {background: #ddd; } /* 底 */
::-webkit-scrollbar-thumb {background: var(--pri02); } /* scroll bar */
::-webkit-scrollbar-thumb:hover {background: var(--pri02a);} /* hover */

body{ background-color: #000000; font-family:'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; color: #000;}

.pc{ display: inline-block!important;}
.mobile{ display: none!important;}
.bodybox .red{color: var(--pri01a);}
.bodybox .gold{color:var(--pri02);}

.bodybox *, 
.bodybox *::before, 
.bodybox *::after{ box-sizing: border-box; display:inline-block;}
.bodybox{text-align:center; min-height: 100vh; background: #FAF7F0; }
/*
.bodybox,
.bodybox.index{padding:0; background-size: 100% auto; margin-bottom: -90px; position:relative; }
*/
.bodybox dl, .bodybox dt, .bodybox dd, .bodybox ul, .bodybox li{ padding: 0; margin: 0;}
.bodybox .container{ width: 100%; max-width:1040px; margin: 0 auto; padding: 0 25px;}
.bodybox .banner{width:100%; aspect-ratio: 1440 / 380;background-color: #B89531; background-image: url(../images/202412/page_bg_top.jpg); background-repeat: no-repeat; background-position: center bottom; ;background-size: cover;}
/*.bodybox .container > .banner img{ width: 100%;}*/
/*.bodybox.index .container > .banner img {width: 70%;}*/
.bodybox h1,
.bodybox h2,
.bodybox h3,
.bodybox h4,
.bodybox h5,
.bodybox h6{font-family:'Noto Sans TC', "微軟正黑體", 'Microsoft JhengHei', "新細明體", sans-serif; font-weight: 400; color: var(--pri01); position: relative; line-height: 1.2; margin: 0 0 10px; display:block;}

.bodybox h2{ font-size: 52px; font-weight: 700; width: 100%; text-align: center; margin-top: 30px; }
.bodybox h3{ font-size: 48px; font-weight: 400; width: 100%; text-align: center; }
.bodybox h3 span{ font-weight: bolder; padding: 0 20px; padding-left: 23px; letter-spacing: 3px; }

/* link & btn */
.bodybox a,
.lightbox a{ color: #444; cursor: pointer; text-decoration: none; transition: .3s; }
.bodybox a:hover,
.lightbox a:hover{color: var(--pri01);}
/* .bodybox a.btn:hover{color: #fff; background: var(--gradient01);} */

input[type=submit].btn{background-color:transparent; border:none;}
.btn,
input[type=submit].btn{width: 250px; height: 60px; border-radius: 50px;color:#fff; background: var(--gradient01);display: inline-block; vertical-align: middle; position: relative; font-size: 22px; font-weight: 400; text-decoration: none; color: #fff; padding: 0; cursor: pointer; transition: .3s; background-size: contain; background-position: center; background-repeat: no-repeat; margin: 0 10px;}/* background-image: url(../images/202412/btn.png);  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));*/

.btn > span{ position: absolute; left: 0; width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; }

.btnbox .btn span{background: var(--gradient01);color: #fff; border-radius: 50px;}
.btnbox .btn.reenter,
.btnbox .btn.reenter span { background: #fff; color: #999;}
.btnbox .btn.reenter:hover,
.btnbox .btn.reenter span:hover { color:#999;}

.btn:hover,
input[type=submit].btn:hover{transform: scale(1.05); color:#fff;}
.btn.type2{ background-image: url(../images/202412/btn2.png); width: 188px;}
.btnbox{width: 100%; text-align: center; font-size: 0; position: relative;}

/* camera */
#camera{ display: block; position:relative; background-color: #000; width: 100%; overflow:hidden;}
#camera #reader{ position: relative; min-height: 700px;} /* 修正iphone12 QRCode Scan變形*/

/* lightbox */
body.noscroll { overflow: hidden;}
.lightbox{ display: none; position: fixed; font-size: 0; width: calc(100% + 1px); height: calc(var(--vh)*100 + 1px); 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;padding-bottom: 60px;}
.lightbox .white{ display: inline-block; padding: 0px; border-radius: 25px; position: relative;}
.lightbox .white::before{ content: ''; display: inline-block; width: 100%; height: 195px;border-radius: 25px 25px 0 0; background-image: url(../images/202412/lightbox_header.jpg); background-size: auto 100%; background-repeat: no-repeat; background-position: center bottom;}
.lightbox .contain{text-align: center; width: 700px; height: auto; overflow: auto; max-height: 60vh; /*max-height: calc(80vh - 200px); padding-right: 10px;*/ padding-bottom: 20px; background-color: #FAF7F0; border-radius: 0 0 25px 25px; background-size: auto; background-repeat: repeat-x; background-position: bottom;}

/* header */
header .logo { margin: 20px ; width: 95px;height: 95px; z-index: 20; display: inline-block; position: absolute; top: 0; left:0; background: url(../images/202412/logo.png) no-repeat center; background-size: contain;}

.lightbox.clean .white{ /*background-image: none; padding: 10px;*/ }
.lightbox.clean .contain{max-height: 50vh; background-color: #FAF7F0; background-image: none;  padding-bottom: 0px;}
.lightbox.clean .contain::after{ display: none;}
.lightbox a.close{ width: 60px; height: 60px; background: url(../images/202412/pop_close.png) no-repeat center; background-size: contain; position: absolute; bottom: -80px; right: calc(50% - 37.5px); cursor: pointer;}
.lightbox a.close:hover{ animation: rubberBand .8s linear 0s 1 normal;}
.lightbox.cam button{font-size: 48px; font-weight: bold; letter-spacing: 3px;  border-radius: 50px; text-decoration: none; color:var(--pri01); padding: 20px 60px; margin: 15px 0 10px; font-weight: 800;}

.lightbox div.tablebox{ width: 70%; margin: 0px auto 10px;}
.lightbox div.tablebox h6{ color: var(--pri01); font-weight: 400; margin: 0 0 5px 15px; text-align: left;}
.lightbox div.tablebox input{ width: 100%; border-radius: 50px;}
.lightbox .rulebox{width: calc(100% - 30px); height: 50vh; min-height: 350px; overflow: auto; margin: 0 auto;}

/*
.lightbox h5,
.lightbox h6{ display: inline-block; margin: 0; padding: 0; font-weight: bold;}
.lightbox h5{font-size: 22px; color: #FFF; background-color: var(--pri01); padding: 10px 13px;}
.lightbox h6{font-size: 26px; color: #000; width: 100%; margin: 10px;}
.lightbox h6 i{font-size: 16px; font-style: normal; width: 100%; display: inline-block; }
.lightbox h6.sub{ font-size: 16px;}
.lightbox .note{width: 100%; max-width: 720px; font-size: 12px; text-align: center; margin: 20px auto 0;}
.lightbox.graffiti .note{text-align: left; }
*/


/* tablebox */
div.tablebox h6{margin-left: 15px;font-size: 16px; width: 100%;}
div.tablebox{ display: table; font-size: 0px; width: 100%;}
div.tablebox > ul{ display: table-row;}
div.tablebox > ul > li{ display:table-cell; padding: 7px 15px; text-align:left; width: 50%;}
div.tablebox li{font-size: 28px;}
div.tablebox li span{font-size: 18px;color:#444444;}
div.tablebox ul li p{font-size: 18px;color:var(--pri01);display: inline-block; padding: 0 10px;}
/* div.tablebox .head{ color: var(--pri01b); font-weight: bold; white-space: nowrap;} */
div.tablebox .head li{ white-space: nowrap;}

/* 表格-確認資料 */
.check div.tablebox > ul > li{ width: 100%;display: block;}
.check div.tablebox { margin-bottom: 30px;}
.check .tablebox li span { display: block; padding: 10px 20px; border: 1px solid #ccc; border-radius: 50px;}
.check .tablebox span.half { text-align: center;}
.check .tablebox .half{ width: 45%;display: inline-block;}
.check .tablebox .group{ display: flex;justify-content: space-between;align-items: center;}

/* 表格-查詢發票 */
div.tablebox.ci1 li{ vertical-align: middle; text-align: center; padding: 10px}


/* 表格-查詢發票結果 */
.lightbox.checkresult div.tablebox > ul > li {padding: 10px;text-align: center;vertical-align: middle;}
div.tablebox.ci2{ width: 90%; margin: 0 auto 15px;}
div.tablebox.ci2 .head li{color:var(--pri01); font-size: 20px; font-weight: 700; padding-bottom: 10px;border-bottom: 0px;}
div.tablebox.ci2 li{ border-bottom: 1px dashed #B1B1B1;font-size: 18px; padding-bottom: 10px; text-align: left;}
div.tablebox.ci2 li:nth-of-type(1){ width: 25%; min-width: 150px;}
div.tablebox.ci2 li:nth-of-type(2){ width: 25%; min-width: 150px;}

/* pager */
.pagebox{ width: 100%; text-align: center; font-size: 18px; margin: 0 auto 15px;}
.pagebox a{ display: inline-block;  position: relative; vertical-align: middle; padding: 5px; margin: 0 15px; cursor: pointer;}
.pagebox a:hover{ color: var(--pri02);}
.pagebox a.focus{  z-index: 1;color: #fff;}
.pagebox a.focus::after {content: ""; position: absolute;left: 50%; transform: translateX(-50%); width: 30px; height: 30px;background-color: var(--pri02); border-radius: 50%; z-index: -1;}
  
/* 條款格式 */
.rulelist{ font-size: 16px; font-weight: 500; width: 100%; line-height: 1.5; text-align: left;color: var(--pri01);}
.rulelist .blue{ color: var(--pri02a);}
.rulelist .red{ color: var(--pri01a);}
.rulelist > dt{ margin: 20px 0 10px; font-size: 24px; font-weight:700; display:block;}
.rulelist > dt.title{ color: var(--pri01); }
.rulelist > dd{ margin: 0 0 10px 16px; word-break: break-all; }
.rulelist ul{ padding-left: 20px; display:block;}
.rulelist li{ list-style-type: lower-latin; margin-bottom: 10px; display:list-item;}
.rulelist li > ul{ padding-left:10px; margin-top: 10px;}
.rulelist li li{ list-style-type: lower-roman; margin-left: 10px;}

/* footer */
.bodybox footer{width:100%; height: 500px; display: flex; align-items: flex-end; justify-content: center; margin-top: -280px;} /* background-image: url(../images/202412/footer_bg3.png); background-size: auto; background-repeat: repeat-x; background-position: bottom; */
.footerbox{ z-index: 10; width: 100%; max-width: 1440px; } /* background-image: url(../images/202412/footer_bg2.png); background-position: right bottom; background-repeat: no-repeat; background-size: auto 100%;  */
.footerbox ul{ text-align:center; width: 100%; padding: 30px; font-size: 0;}
.footerbox li{ display:inline-block; font-size: 16px; color:#5c3427; font-weight:500;}

/* ========================================================= */
/* 背景 */
.bodybox.index { z-index: 10;position: relative; width: 100%; background-color: #C7A13C; }
.bodybox.index::before {content: ''; padding-top: 40%; background-size: 1920px auto; background-repeat: no-repeat; background-position: center top; display: block; width: 100%; position: absolute;  z-index: -1; pointer-events: none; background-position:  center;}

.bodybox.index .kv { position: relative;width: 100%;z-index: 1;background-image: url(../images/202412/index_bg.jpg);background-repeat: no-repeat; background-size: cover; background-position: center top;} 
.bodybox.index .kv::after{ content: '';z-index: -2;  display: block; position: absolute; top:88.3%; left: 0; width: 100%; height:200px; background: linear-gradient(0deg, #C7A13C 0%, #BC9731 50%, #EDDB9B 100%);} 
.bodybox.index .pic { display: block; width: 100%; aspect-ratio: 576 / 535; background-position: center;background-repeat: no-repeat;background-size: contain;}

.bodybox.index .pic.visual02,
.bodybox.index .pic.visual03{ aspect-ratio: 280 / 280; width:15%; position: absolute; top: 40%; animation: pulse 2s linear .3s infinite;}/* width:280px; */

.bodybox.index .visual01 {position: relative;background-image: url(../images/202412/visual01.png); width: 40%;display: inline-block;}/* width: 550px; */
.bodybox.index .visual01::after {content: '';position: absolute; top: 0;left: 0;width: 100%;height: 100%; z-index: -1;background-image: url(../images/202412/shadow.png);background-repeat: no-repeat; background-size: cover; background-position: center top;}
.bodybox.index .visual02 {background-image: url(../images/202412/visual02.png); left: 25%;} 
.bodybox.index .visual03 {background-image: url(../images/202412/visual03.png); right: 25%;}


.indexbtnbox {position: relative; z-index: 5; display: inline-block; width: 100%; left: 0; }/* top: 660px; position: absolute; */
.indexbtnbox .btn{display: inline-block;margin: 5px 10px;color: #fff;}
.indexbtnbox .btn:hover{color: #fff;}
.indexbtnbox.buy{ opacity: 0; pointer-events: none;}
.buynow .indexbtnbox{ opacity: 0; pointer-events: none; transition:.5s;height: 165px;}
.buynow .indexbtnbox.buy{ position: absolute; opacity: 1; pointer-events: auto;}

.buynow .indexbtnbox .btn,
.buynow .indexbtnbox input[type=submit].btn{background: var(--gradient02);}
.buynow .indexbtnbox .back{ display: block;margin: 20px 0;font-size: 18px;}
.buynow .indexbtnbox .back span {border-bottom: 1px solid var(--pri01); color: var(--pri01);}

/* winner */
.bodybox.winner{background-color: #D9BE6F; }
.bodybox.winner .banner {width: 100%; height: auto; aspect-ratio: 1440 / 608; background: url(../images/202412/winner_page_bg_top.jpg) no-repeat center center;background-size: contain; margin-bottom: 20px;}
.bodybox.winner .gold{color: #FFF;}
.bodybox.winner .alignleft .gold,
.bodybox.result.winner .txt.t2 span.gold{color: #FFF;transition: .3s;}
.bodybox.winner .alignleft .gold:hover,
.bodybox.result.winner .txt.t2 span.gold:hover{color: var(--pri01);}
.bodybox.result.winner .txt.t2{color: #000;}



/* 填寫表單 */
.formbox .tablebox > ul > li.group {display: flex;flex-wrap: wrap; align-items: center;justify-content: space-between; width: 100%;}
.formbox .tablebox input.half{ width: 40%;}
.formbox .tablebox select.half{ width: 23%;}
.formbox .tablebox input, 
.formbox .tablebox select, 
.formbox .tablebox label {width: 100%;color:var(--com01);}
.formbox .tablebox label > span {padding: 10px;color: #757575;}
.formbox .tablebox input, 
.formbox .tablebox select {padding: 10px 20px;}

.formbox .tablebox label{cursor: pointer;border: 1px dashed var(--com01);border-radius:15px; width: 100%;display: flex; justify-content: space-between; align-items: center;}
.formbox .tablebox .upload{width: 100%;padding-bottom: 40px;display: block;}
.formbox .uploadimg a{font-size: 22px;background: var(--gradient01);color: #fff; display: flex; align-items: center; padding: 10px 20px;border-radius: 10px;}
.formbox .upload .UI::before{margin-right: 5px;}
.formbox .uploadimg i.note{margin:0;}

.formbox .upload i.red,
.formbox .upload i.green{margin-left: 15px;width: 100%;display: flex; align-items: center;}
.formbox .upload i.red{color:#E9460A;}
.formbox .upload i.green{color: green;}

.formbox{ width: 100%; padding: 40px 0; margin: 0 auto; display: block; position:relative; font-size: 0;}

.formbox .sample{width: 380px; padding-top: 10px; padding-right: 60px; display: inline-block; text-align: right; vertical-align: top;}
.formbox .sample img{ width: 240px; filter: drop-shadow(7px 7px 7px rgba(0, 0, 0, 0.4));}
.formbox .sample.i2 img{ width: auto;}
.formbox .scan{ display: none; width: 100%; padding: 40px 45px 0;}
.formbox .scan img{ vertical-align: middle; margin:0 30px 0 0;}
.formbox .scan .txt{ vertical-align: middle; font-size: 38px; font-weight: bold; color:var(--pri01);}
.formbox .scan .txt a{ color: var(--pri02); border-bottom: 2px solid var(--pri02);}

.formbox .formtable{width:calc(100% - 380px);}
.formbox dl,
.formbox dt,
.formbox dd{ width: 100%; text-align: left; padding:0px; padding-bottom: 15px;}
.formbox dd{ padding-top: 0px;}
/*.sentence .subtitle,*/
.formbox dt{ font-size: 32px; color: var(--pri01); font-weight: 700; padding-bottom: 10px;}
.formbox dt span{ margin-top: 5px; vertical-align: middle;}
/*.sentence .subtitle i,*/
.formbox i.note{ font-size:16px; color:var(--com02); font-style: normal; vertical-align: top; margin-left: 15px; margin-top: 10px;}
.formbox i.note.full{ width: 100%; margin: -20px 0 0;}
.formbox .agree i.note{ margin: 0;}
.formbox dd{ font-size: 24px; color: #333;}

/* selfwrite */
/* .formbox dl.agree{width:95%; min-width: 500px; margin: 0 auto; padding-bottom: 30px; display: block;}
.formbox dl.agree span{color:var(--pri01);}
.form input[type=checkbox]+Label{width:100%;display: flex;align-items: center;}
.formbox .uploadImg{ width: 370px;}
.formbox input#fulImg{ display: none;}  */

.formbox dl.agree{width:95%; min-width: 500px; margin: 0 auto; display: block;}
.form input[type=checkbox]+Label{width:100%;}
.formbox .uploadImg{ max-width: 330px; vertical-align: middle;cursor: pointer;padding: 10px;}
.formbox input#fulImg{ display: none;} /* 上傳發票input */
.formbox .validatebox{ vertical-align: middle; margin-left: 10px;}

.formbox .validatebox{ vertical-align: middle; margin-left: 10px;}
.formbox .validatebox img { width: 130px;height: 40px; vertical-align: middle;border-radius: 15px;}
.UI.refresh { display: inline-flex; align-items: center;justify-content: center; vertical-align: middle; margin-left: 10px; width: 40px; height: 40px; background-color: #C58E28; color: #FFF;border-radius: 50%;}
.UI.refresh:hover{color: #fff;}

.agree a{ color: var(--pri01);text-decoration: underline; transition: .3s; }
.agree i{ font-style: normal; display: block;}
.agree input[type=checkbox]+Label::before{vertical-align:top;margin-right:5px; line-height: 1.2;} 


.bodybox.index .btn.hot{ background: var(--gradient01); background-position: 200% 0; background-size: 200%; animation: btnshine 3s linear 0s infinite normal; overflow:hidden;}
@keyframes btnshine{
    0% {background-position: 200% 0;}
    85% {background-position: 200% 0;}
    100% {background-position: 0% 0;}
}


/* 結果頁 */
.result .award{position: relative; width: 100%; height: 350px; background: url(../images/202412/award_gift1.png) no-repeat center; background-size: contain; background-position: center; position: relative; margin:60px auto 20px ;}/* height: 507px; */
.result .award.g1{background-image: url(../images/202412/award_gift1.png);}
.result .award.g2{background-image: url(../images/202412/award_gift2.png);}
.result .award.g3{background-image: url(../images/202412/award_gift3.png);}
.result .award.g4{background-image: url(../images/202412/award_gift4.png);}
.result .award.g5{background-image: url(../images/202412/award_gift5.png);}
.result .award.g6{background-image: url(../images/202412/award_gift6.png);}

.result .award b {display: none;position: absolute; width: 100%; top: -10%;left: 50%;transform: translate(-50%, -50%);font-size: 28px;font-weight: 700; }
.result .award.g1 b.g1,
.result .award.g2 b.g2,
.result .award.g3 b.g3,
.result .award.g4 b.g4,
.result .award.g5 b.g5,
.result .award.g6 b.g6 {display: block;}


.result .txt{width: 100%; text-align: center; font-size: 20px; font-weight:500; margin:30px auto; color:var(--com01);}
.result .txt.t2{ font-size: 20px; font-weight: 700; margin: 60px auto;}
.result .txt.t2 span{ margin-bottom: 3px; color:#000;}
.result .txt.t2 span.gold{ color:var(--pri02);}
.result .txt.t2 i.note:last-of-type {margin-bottom: 90px;}
.result .txt.t3{ margin-bottom: 30px; margin-top: 0;}
.result .txt.t3 span{ margin-bottom: 30px; }
.result .txt .red{ font-weight: 700;}
.result .txt i.note{ font-size:28px; font-style: normal;}
.result .txt.t2 i.note{ margin-bottom: 15px; display: block; font-weight:400;color: var(--com01);}
.result .alignleft{margin:0px; text-align: left;font-weight: 700;}
.result .txt.t2 b.gold{font-weight: 700;}
.result .txt.t3,
.result .txt.t2 i.note{font-size: 16px;}
.result .txt.t2 span{font-size: 20px;}

.awardslist{width:100%; margin: 25px auto;}
.awardslist dl{display: inline-block;}
.awardslist dt{width:286px; vertical-align: top;}
.awardslist dd{padding-top: 30px; padding-left:30px; color:var(--com01); text-align:left;}
.awardslist b,
.awardslist span{display:block; position: relative;}
.awardslist b{font-size:24px; font-weight:700; color: var(--pri02a);}
.awardslist span{margin-bottom:10px; font-size:20px; font-weight: 500;}
.awardslist span.w2{ margin-bottom: 20px;}

/* 載入中動畫 */
.bodybox.loading {position: relative; width: 100%; height: auto; background-image: url(../images/202412/loading_bg.jpg); background-size: cover; background-color: #B69430; background-position: center top; background-repeat: no-repeat; }

.loadingbox ul, .loadingbox li{ display: inline-block;}
.loadingbox{ position: absolute; width: 100%; text-align: center;bottom: 0;left: 0;z-index: 10;display: flex; justify-content: center; align-items: flex-end; padding-bottom: 40px;}

/* .loadingbox{ position: relative; width: 100%; margin-top: 72% ; text-align: center;z-index: 10;display: flex; justify-content: center; align-items: flex-end; padding-bottom: 40px;} */

/* 
.bodybox.loading { position: relative;width: 100%;z-index: 1;background-image: url(../images/202412/index_bg.jpg);background-repeat: no-repeat; background-size: 1920px; background-position: center top;} 
.bodybox.loading::after{ content: '';z-index: -2;  display: block; position: absolute; top:60.3%; left: 0; width: 100%; height:200px; background: linear-gradient(0deg, #C7A13C 0%, #BC9731 50%, #EDDB9B 100%);}  */


.loadingbox li{ width: 100%;}
.loadingbox li.p1 { width: 100%; font-size: 25px; font-weight: 600; color: var(--pri01); }
.loadingbox li.p1 span{ font-size: 50px;}
.loadingbox li.p2 { width: 100%; font-size: 25px; font-weight: 600; color: var(--pri01);}
.loadingbox li.bar{ border: 1px solid var(--pri01); border-radius:99px; text-align: left; line-height: 0; margin:10px 0; padding:6px 8px;}
.loadingbox li.bar b{width:0%; height:20px; border-radius:99px; background-color: var(--pri01);}


/* 載入頁面 */
.loading .indexbox{flex-direction: column; justify-content: center; align-items: center; min-height: 775px;}
.index.loading footer {margin:0px 0 0 0;}
.loading .footerbox ul {padding: 0 20px 20px 0;}


/* 查詢發票 */
.inquire{font-family: 'Noto Serif TC', serif; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.inquire li.head{text-align: right;}
.inquire .result{width:100%; max-width: 1200px; display: flex; flex-direction: column; justify-content: flex-start; z-index: 30; position: relative; align-items: center;}
.inquire .contain{width:100%; max-width: 1200px;}

.inquire footer {position: absolute;bottom: 0;z-index: 20;}


/* RWD */
@media screen and (max-width:1920px) {
.bodybox.index .kv::after{ height: 70%;} 
.bodybox.index .visual01 { width: 700px; }
.bodybox.index .pic.visual02,
.bodybox.index .pic.visual03{ width:280px;}
}

@media screen and (max-height: 1000px) {
}

@media screen and (max-width:1440px) {
.bodybox.index .visual02 { left: 20%;} 
.bodybox.index .visual03 { right: 20%;}

}

@media screen and (max-height: 800px) {
}

@media screen and (max-height:660px) {
} 

@media screen and (max-width:1280px){
.bodybox.index .visual02 { left: 17%;} 
.bodybox.index .visual03 { right: 17%;}

}

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

@media screen and (max-width: 780px) {	
    /*  contant RWD  */
    .pc{ display: none!important;}
    .mobile{ display: inline-block!important;}
	
	header .logo { width: 125px; height: 125px; z-index: 20; top: 0;left: 50%; transform: translateX(-50%); margin: 25px auto; }

	.bodybox .banner{ background-image: url(../images/202412/page_bg_top_m.jpg); height: 650px; background-position: center top; background-size: 100% auto; background-color: #FAF7F0;}
	.bodybox h3{ font-size: 60px;}
	.bodybox h6{ margin: 0 0 15px;}
	.btnbox{ display: flex;flex-direction: column-reverse;padding: 0 25px;}
	.btn, input[type=submit].btn{ height: 110px; font-size: 40px; margin: 10px auto; width: 100%;}
	.btn.type2{ width: 230px;}
	.btn:hover,
	input[type=submit].btn:hover{transform: scale(1);}

	/*	formbox tablebox */
	div.tablebox h6,
	div.tablebox i.note,
	div.tablebox li span,
	.formbox .uploadimg a,
	.formbox div.tablebox ul li p { font-size: 30px; padding: 0 10px;}
	.formbox .uploadimg a {padding: 15px;}

	.formbox .upload i.red,
	.formbox .upload i.green { font-size: 25px; margin-left: 0;}

	.formbox .tablebox input, 
	.formbox .tablebox select{font-size: 30px; padding: 20px 30px;}

	.formbox div.tablebox, 
	.formbox div.tablebox > ul > li {display: inline-block;width: 100%;padding: 15px;}
	.formbox div.tablebox > ul  {display: inline-block;width: 100%;}
	
	.formbox .uploadimg { padding: 15px;}
	.UI.refresh {font-size: 40px; width: 60px; height: 60px; }


	/*	lightbox */
	.lightbox a.close{ width: 105px; height: 105px; bottom: -120px; right: calc(50% - 56.5px);}
	.lightbox .white{ width: 655px; margin-bottom: 135px; background-image: url(../images/202412/lightbox_header_m.jpg); background-repeat: no-repeat;background-size:100% auto; padding-top: 545px;}
	.lightbox .white::before{ display: none;}
    .lightbox .contain,
	.lightbox.clean .contain{width:100%; max-height: calc(75vh - 500px);background-color: #FAF7F0;}
	.lightbox.clean.cam .contain{width:100%; max-height: calc(75vh - 200px);}
	.lightbox .contain::after{ height: 310px; background-image: url(../images/202412/lightbox_footer_m.png); background-size: auto 310px; margin-top: -100px; }
	
	.lightbox div.tablebox input{ font-size: 34px; text-align: center; padding: 15px;}
	.lightbox.clean.cam .white{ background-image: none; padding-top: 0; border-radius: 25px;}
	.lightbox.invoice .white {width: 480px; background-image:none; padding-top: 0;}
	.lightbox.invoice.i2 .white {width: 580px; }
	.lightbox.invoice .contain { max-height:80vh; text-align: center; background-color: transparent; background-image: none; /*margin-left: 16px;*/}
	.lightbox.invoice img{ width: 100%; margin: 0 auto;}
	
	.lightbox .pagebox{ font-size: 35px;}
    .lightbox .pagebox a{ margin: 0 15px;}
	
	.lightbox.on{padding-bottom: 0;}

	.lightbox.checkresult.on .btnbox { display: flex; flex-direction: column;}

	/*	pagebox */
	.pagebox a.focus::after {content: ""; position: absolute;left: 50%; transform: translateX(-50%); width: 55px; height: 55px;background-color: var(--pri02); border-radius: 50%; z-index: -1;}
	
	/*	條款 */
	.lightbox .rulebox{height: calc(75vh - 443px);}
	.rulelist{ font-size: 20px;}
	
	/*	footer */
	footer{}
	.footerbox{ height: 462px!important; background-size: 100% auto;} /* background-image: url(../images/202412/footer_bg2m.png); */
	.bodybox footer{ margin-top: -50px;}
	.footerbox ul{ width: auto;padding:30px 25px;font-size: 28px;}
	.footerbox li{ font-size: 28px;}
	
	/*	tablebox 客制 */
	div.tablebox.ci1 li{ padding: 5px}
	div.tablebox.ci1{ margin-top: 5px;}
	div.tablebox.ci1{ display: inline-block; width: 100%; padding: 0 20px;}
	div.tablebox.ci1 li{ font-size: 50px;}
	div.tablebox.ci1 .head{ padding-top: 20px; padding-bottom: 5px;}
	div.tablebox.ci1 li input{}
	
	div.tablebox.ci2{ width: calc(100% - 60px)!important;}
	div.tablebox.ci2 ul{ margin-bottom: 30px;}
	div.tablebox.ci2 li{ font-size: 30px; position: relative; padding-left: 155px;}
	div.tablebox.ci2 li::before{ content: ""; width: 155px; display: inline-block; font-size: 34px; color: var(--pri01); font-weight: 600; position: absolute; top: 0; left: 0;}
	
	div.tablebox.ci2 .head li{font-size: 30px;}
	div.tablebox.ci2 li:nth-of-type(1){ width: 40%;}
	div.tablebox.ci2 li:nth-of-type(2){ width: 40%;}
	div.tablebox.ci2 li:nth-of-type(3){ width: 20%;}

	/*	============================================================= */

	/*	loading */
	.bodybox.loading { background-image: url(../images/202412/loading_bg_m.jpg); background-color: #BD9732; background-size: contain; background-position: center top;}
	.loadingbox{ position: static; margin-top: 150%;}
	
	.loadingbox li.p1{ font-size: 39px;}
	.loadingbox li.p1 span{ font-size: 80px;}
	.loadingbox li.p2 { width: 100%; font-size: 40px;}
	.loadingbox li.bar b{width:0%; height:30px; border-radius:99px; background-color: var(--pri01);}

	/*	登錄發票 */
	/* .formbox{ padding: 5px;} */
    .formbox .sample{ display: none;}
    .formbox .scan{ display: block;}
    .formbox .formtable{ width: 100%;}
    .formbox dl, .formbox dt, .formbox dd{ padding: 15px 0;}
    .formbox dt{ font-size: 50px; text-align: center;}
    .formbox dt i.note{ font-size: 34px; text-align: left;}
    .formbox dd{ font-size: 42px; text-align: center; padding-top: 0;}
	.formbox dd input{ width: 600px;}
	.formbox dd input,
	.formbox dd select{ font-size: 42px; border-radius: 10px; padding: 15px; text-align: center;}
	.formbox dd select{ padding-right: 50px; background-position: calc(100% + 20px) center;}
    .formbox .btnbox{width:100%;}
	.formbox .uploadImg{ max-width: 600px;}
	.formbox dl.agree{ width: 90%;}
	.formbox dl.agree dd{ text-align: left;}
	
    .formbox dl.agree input[type=checkbox]+Label i.note{ font-size: 28px;}
    .formbox dl.agree input[type=checkbox]+Label{ text-align: left; font-size: 34px; padding-left:50px; position: relative; width: 100%;}
    .formbox dl.agree input[type=checkbox]+Label::before{ font-size:42px; position: absolute; left: -0px;}
	
	.formbox i.note.full{ text-align: center;}
	.formbox .validatebox img{ width: 200px; height: 62px; }
	
	/* .formbox .tablebox label{ display: flex;flex-direction: column;} */

	/*	確認資料 */
    .check .tablebox li span {padding: 20px 30px;}
	
	/*	結果頁 */
	.result .txt{padding: 0 15px;}
	.result .award { height: 500px; margin: 110px auto 20px;}
	.result .award b { font-size:44px; line-height: 1.2;}
	.result .txt,
	.result .txt.t2 b.gold,
	.result .txt.t2 span { font-size: 33px;}
	.result .txt.t3,
	.result .txt.t2 i.note,
	.result .txt.t2 span.gold,
	.result .txt.t2 span.alignleft { font-size: 28px;}
	.result .btnbox{ display: flex;flex-direction: column;}

	.awardslist dt{ width: 100%;}
	.awardslist dd{ text-align: center; padding-left:0 ;}
	.awardslist b{ font-size: 38px;}
	.awardslist span{ font-size: 28px; margin-bottom: 25px;}
	.awardslist span.w2{ margin-bottom: 40px;}
    
    /* winner */
	.bodybox.winner{background-color: #CCAC52; }
	.bodybox.winner .banner{width: 100%; aspect-ratio: 750 / 1100; background-image: url(../images/202412/winner_page_bg_top_m.jpg); background-repeat: no-repeat; background-position: center;margin-bottom: 20px;}

    /* index */
	.bodybox.index {min-height: 2300px;}

	.bodybox.index .kv{width: 100%; padding: 130px 0 0 0; background-size: cover; background-image: url(../images/202412/index_bg_m.jpg); background-repeat: no-repeat; background-size: 100% auto;}
	.bodybox.index .kv::after{top: 92.3%; }

	.bodybox.index .pic { aspect-ratio: 526 / 735;}
	.bodybox.index .pic.visual01 {background-image: url(../images/202412/visual01_m.png);display: inline-block; width: 100%;}
	.bodybox.index .visual01::after{ background-image: url(../images/202412/shadow_m.png); }
	.bodybox.index .pic.visual02,
	.bodybox.index .pic.visual03 {position: absolute; display: inline-block; width: 350px;height: 350px;bottom: 180px;top: 38%;background-color: transparent;}
	.bodybox.index .pic.visual02{ left: 40px;}
	.bodybox.index .pic.visual03{ right: 40px;}
	.bodybox.index::before { display: none;}
	
	
	.indexbtnbox { position:absolute; top: 54%; padding: 0 50px;}/* position: static; */
	.indexbtnbox .btn{ margin: 10px auto;}
	.buynow .indexbtnbox .back span{font-size: 26px;}

	.bodybox.index footer{ position: absolute; left: 0; bottom: 0px; background-image: none; height: auto; margin-top: 0;}
	.bodybox.index .footerbox{ position: absolute; max-width: none; bottom: 0;} 

}