@charset "UTF-8";
/* 20210924 S w94448 */
/*20191122J w63982 儲值上限(鍋蓋)規格調整 */
/*文字*/
.content_bg {color: #CCC;}

p { margin:inherit; padding-left:0.5em;}

/* 小標 */
.box h2 {	font-size:108%;	font-weight:bold;color:#ab875c;line-height:2em;	padding-left:5px;border-bottom: 1px dashed #694923;	}
	i.fa-file-text{	font-size:120%;	margin-right:5px;	}
	i.fa-phone-square{	font-size:140%;	margin-right:7px;}
.box h3{ color:#ab875c; line-height:2.5em; font-size:1em;}
.box h4{ color:#ab875c; font-weight:bold; font-size:2em; text-align:center; line-height:2.5em; margin-top:-1em; border-bottom: 1px dashed #ab875c;}

.box--styleA { border: 1px solid #ab875c;}
.box .cboxElement{color:#F90 }
#f_IDFront_preview .cboxElement{ color:#000; }
#f_IDBack_preview .cboxElement{ color:#000; }
.box ol, .box ul {color: #CCC; padding-left: 15px; margin: 5px; word-break:break-all; text-align:left;}
.box ol a, .box ul a {color: #F90;}
.box ol a:hover, .box ul a:hover {color: #C60;}

.box--styleB > .list--styleB{
	    max-width: 540px;/*20191122J*/
	}

.box--styleE {
    background-color: rgba(10, 10, 10, 0.5);
    border-radius: 5px;
    border: 1px solid #ab875c;
    padding: 0.5em;
    margin: 0 auto;
    width: 80%;
}
.box--styleE p{
  color: #CCC;
}
.button__group ul a { color: #3d2206; text-shadow: 0px 0px 4px rgba(255,255,255,1);}
.button__group ul a:hover { color: #3d2206}

/*按鈕*/
.button{ width:50%; margin:5px auto; text-decoration:none; display: flex; justify-content:center; align-items:center;  text-align:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center;font-size:16px;}

.button--styleA {
	height: 45px;
    background-color: #ab875c;
    box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0 0;
    color: #000;
    letter-spacing: 1px;
	min-width:122px;
    color: rgba(0, 0, 0, 0.9);
    box-shadow: rgba(10, 10, 10, 0.6) 1px 1px 0 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bf9a6e+0,fff7df+50,bf9a6e+54,e8c894+100 */
background: rgb(191,154,110); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,154,110,1) 0%, rgba(255,247,223,1) 50%, rgba(191,154,110,1) 54%, rgba(232,200,148,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9a6e', endColorstr='#e8c894',GradientType=0 ); /* IE6-9 */
}

a:hover{ text-decoration: none;}

/*領獎中心區塊調整*/
/*黑底內距*/
#prize{	padding:2% 2.5%;}
#prize > .box{ margin-bottom:0;}
.tab--styleA-buttonhover {
    float: left;
    list-style-type: none;
    padding: 8px 15px;
    border-radius: 6px 6px 0 0;
    margin-right: 3px;
	color:#3d2206;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e8c894+0,fff7df+5,e8c894+47,bf9a6e+100 */
background: rgb(232,200,148); /* Old browsers */
background: -moz-linear-gradient(top, rgba(232,200,148,1) 0%, rgba(255,247,223,1) 5%, rgba(232,200,148,1) 47%, rgba(191,154,110,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(232,200,148,1) 0%,rgba(255,247,223,1) 5%,rgba(232,200,148,1) 47%,rgba(191,154,110,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(232,200,148,1) 0%,rgba(255,247,223,1) 5%,rgba(232,200,148,1) 47%,rgba(191,154,110,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8c894', endColorstr='#bf9a6e',GradientType=0 ); /* IE6-9 */
}
#prize .radio--prize-list {
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bf9a6e+0,fff7df+50,bf9a6e+54,e8c894+100 */
background: rgb(191,154,110); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,154,110,1) 0%, rgba(255,247,223,1) 50%, rgba(191,154,110,1) 54%, rgba(232,200,148,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9a6e', endColorstr='#e8c894',GradientType=0 ); /* IE6-9 */
}
.box .tab--styleA-button a {color:#F90}
.box .tab--styleA-button a:hover {color:#C60}
.form--styleA .radio--prize-list input[type="radio"] + label {
    background: rgba(255, 255, 255, 0.4);
	box-shadow:0 0 3px 0 rgba(0,0,0,0.9);
}
.form--styleA .radio--prize-list input[type="radio"]:checked + label {
    background: rgba(10, 10, 10, 0.5);
    color: rgba(255, 255, 255, 0.9);
	box-shadow:0 0 3px 0 rgba(255,255,255,0.9);
}
.tab--styleA-data {
    clear: both;
    border: 1px solid #ab875c;
    border-top: 0;
}


/*領取獎項區塊*/
.prize_item {
    border: 1px solid #A43029;
		background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,1) 100%);
		background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 100%);
		background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 100%);
    margin-bottom: 0.5em;
}

/*已選取動態背景*/
.selectbg{
	background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 100%);
	animation: bganimate 1.5s linear infinite;
}
@-webkit-keyframes bganimate {
	0% {
		background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 100%);
	}
	50% {
		background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,1) 100%);
	}
	51% {
		background: linear-gradient(to bottom, #ffffc7 0%,#ffffff 100%);
	}
	100% {
		background: linear-gradient(to bottom, #ffffc7 0%,#ffffff 100%);
	}
}

.prize_item .header {
  color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 0 3px #5c0500;
	box-shadow: none;
	line-height: 2em;
	padding:0;
	margin: 0;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#c35f4e+0,ffb89b+6,c35f4e+45,a43029+100 */
background: rgb(195,95,78); /* Old browsers */
background: -moz-linear-gradient(top, rgba(195,95,78,1) 0%, rgba(255,184,155,1) 6%, rgba(195,95,78,1) 45%, rgba(164,48,41,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(195,95,78,1) 0%,rgba(255,184,155,1) 6%,rgba(195,95,78,1) 45%,rgba(164,48,41,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(195,95,78,1) 0%,rgba(255,184,155,1) 6%,rgba(195,95,78,1) 45%,rgba(164,48,41,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c35f4e', endColorstr='#a43029',GradientType=0 ); /* IE6-9 */
}

/*注意 提醒 恭喜區位*/
p.attention{ box-shadow:none;font-size: 120%; color:#ebd29a;
    font-weight: bold;
    border: 1px solid #902a15;
    padding: 10px 0;
    background: #aa3a31;
 }

/*---------------------------點數儲值兌換頁調整---------------------------*/
/*獎項區位*/
.box > .prize_item { max-width:700px; margin:0 auto;}

.item_content {padding: 10px 8px;}
	.item_content img {display: inline-block;}
	.item_content > p{ text-align:center;}

.item_content_bgColor{ background:rgb(255, 232, 228); color:#333!important;}

.item_content_bgColor p,.item_content_bgColor span,.item_content_bgColor a{
  color:#333!important; -webkit-text-decoration: none; text-decoration: none;
}
.item_content_bgColor *{
  color:#333!important;
}

.form {	width: inherit;}

#input_box p{ color: #CCC; }

.bank .container {min-width: 300px;}

/*radio樣式*/
.radio--exchange{ text-align: center; }
	.form--styleA .radio--exchange label { color:#000; margin-right:3px; }
	.form--styleA .radio--exchange input[type="radio"] { display: none; }


	/* 20200629S w74770 滿貫領獎中心→實體領獎兌換版面調整建議 */
	.form--styleA .radio--exchange input[type="radio"].label { position: absolute; display: block; width: 15px; height: 15px; border: 1px solid #333; border-radius: 50%; margin: 10px 0 0 10px; }
	.form--styleA .radio--exchange input[type="radio"].label::after { background:#fff; cursor: pointer; position: absolute; width: 13px; height: 13px; border-radius: 50%; top: 50%; left: 50%; margin-top:-8px; margin-left:-7px; z-index: 1; content: ''; border:1px solid #b3b3b3; }
	.form--styleA .radio--exchange input[type="radio"]:checked.label::after{ background:#a90d00; cursor: pointer; position: absolute; width: 9px; height: 9px; border-radius: 50%; top: 50%; left: 50%; margin-top:-6px; margin-left:-5px; z-index: 1; content: ''; box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 3px #a90d00; }


	.form--styleA .radio--exchange input[type="radio"] + label { font-size:100%; /*padding-left:8px;*/ display: inline-block;	border-radius: 4px; cursor: pointer; width:100%; background:#fff; margin-bottom:6px; border: 1px solid #b3b3b3; }
	.form--styleA .radio--exchange input[type="radio"]:checked + label { font-size:110%; font-weight: bold; background:#ffefc3; /*width:80%;*/ color: #a90d00; border: 1px solid #a90d00; }
	.form--styleA .radio--exchange input[type="radio"]:hover + label{ background:#ffefc3; /*width:80%;*/ color: #a90d00; }

.radio--prize-list{ background: rgba(10, 10, 10, 0.2); padding:5px 3px;	margin-bottom:0.5em; }

.form--styleA .radio--prize-list label {color:rgba(10, 10, 10, 0.9); margin-right: 3px;	}
	.form--styleA .radio--prize-list input[type="radio"] { display: none; }
	.form--styleA .radio--prize-list input[type="radio"] + label { display: inline-block; border-radius: 4px; background: rgba(255, 255, 255, 0.6); cursor: pointer; padding:0 10px; }
	.form--styleA .radio--prize-list input[type="radio"]:checked + label { background: rgba(10, 10, 10, 0.4); color:rgba(255, 255, 255, 0.9); }

/*---------------------------點數儲值兌換頁調整END---------------------------*/


/*身分證檢查按鈕*/
#btn-idNumberCheck, #btn-idNumberCheck:hover{
	margin-left:auto;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bf9a6e+0,fff7df+50,bf9a6e+54,e8c894+100 */
background: rgb(191,154,110); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,154,110,1) 0%, rgba(255,247,223,1) 50%, rgba(191,154,110,1) 54%, rgba(232,200,148,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9a6e', endColorstr='#e8c894',GradientType=0 ); /* IE6-9 */}


/* 按鈕_身分證修改認證資料 */
.btn_modify_IDfile {
	font-weight:normal;
	border-radius: 6px;
	padding:4px 8px;
	margin-left:1.5em;
	background: #ab875c;
	color: #181818;
	}
.btn_modify_IDfile:hover{
	background: #71522f;
	color: #181818;
	transition:all .2s;
	}
.btn_modify_IDfile i{ margin-right:5px;}

/*地址選單樣式調整*/
.address select:nth-child(2) { margin-left:5px;}

/*身分證填入欄位*/
#f_strIDNumber{ max-width:350px}

/* 身分證上傳按鈕 */
.form--styleA .fileImg--styleA{ width:100%; min-height:100px; height: auto; border:2px #ab875c solid; padding:0 10px 0 10px; display: block; position:relative; text-decoration:none; text-align:center; clear:both; }
	.form--styleA .fileImg--styleA input{ width: 100%; height:100px; position: absolute; top:0; left:0; opacity: 0; display:block; cursor: pointer; }
	.form--styleA .fileImg--styleA ul { list-style-type:none;  display: block; text-align:center; padding:0;}
	.form--styleA .fileImg--styleA ul li{ display:inline-block; float:inherit; margin-right:5px; color:#ab875c; text-decoration:none; }

/*頁數按鈕*/
.pageNum-button li a {
    background-color: transparent;
	border: 1px solid  transparent;
    border-radius: 5px;
	margin:0 1px;
}
.pageNum-button li a:hover {
	border: 1px solid #ab875c;
	}
.pageNum-button li.active a {
    color: rgba(255, 255, 255, 0.8);
	border: 1px solid  transparent;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#bf9a6e+0,fff7df+50,bf9a6e+54,e8c894+100 */
background: rgb(191,154,110); /* Old browsers */
background: -moz-linear-gradient(top, rgba(191,154,110,1) 0%, rgba(255,247,223,1) 50%, rgba(191,154,110,1) 54%, rgba(232,200,148,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(191,154,110,1) 0%,rgba(255,247,223,1) 50%,rgba(191,154,110,1) 54%,rgba(232,200,148,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf9a6e', endColorstr='#e8c894',GradientType=0 ); /* IE6-9 */
}


/*文字置中*/
.textaligncenter{ text-align:center;}

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

/*黑底內距*/
.content_grain .content_bgbottom { padding: 3% 2%;}

/*領獎中心區塊調整*/
/*黑底內距*/
#prize{	padding:2% 0;}
#prize > .box{ padding:0; width:98%}
.form--styleA .radio--prize-list input[type="radio"] + label { padding: 0 7px;}

.box h4{  font-size:1.3em; text-align:center; line-height:2.5em; margin-top:-0.5em;}
/*身分證檢查按鈕*/
.btn_modify_IDfile { min-width:250px; margin-bottom:5px}

/*身分證檢返回官網按鈕*/
#success_ul li { width:90%; margin:0 auto;}
}


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

/*bank_上方選單*/
.bank_nav li{width: 31%; margin-right: 3px;}
	.bank_nav li a{font-size: 80%;text-align: center;}
	.bank_nav .go_bank_index a{font-size: 90%;}

/*radio樣式*/
.form--styleA .radio--exchange input[type="radio"]:checked + label { width:100%;}
.form--styleA .radio--exchange input[type="radio"]:hover + label{width:100%;}

	}

  /* 2025/12/09 實體領獎調整樣式 */
  .box.box-prize{
    max-width: 816px!important;
  }
  .box.box-prize h2{
    color: #5C5C5C;
    border-bottom: 1px dashed #000000;
    font-size: 20px;
  }
   .box.box-prize h2 span.list{
    display: inline!important;
   }
   .box.box-prize h2 i.fa-list-alt{
    display: none;
   }
  .box.box-prize .box--styleA, .box.box-prize .box--styleB{
    width: 100%;
  }
  .box.box-prize .box--styleA{
    border: none;
    background-color: #E7E3DD;
    border-radius: 14px;
  }
  .box.box-prize .box--styleA#illustration{
    padding: 10px;
    font-size: 20px;
  }
  .box.box-prize .box--styleA#success_msg {
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #00000000;
  }
  .box.box-prize .box--styleA#success_msg ul{
    color: #000000!important;
  }
  .box.box-prize ol,.box.box-prize ul,.box.box-prize h3{
    color: #5C5C5C;
    font-size: 20px;
  }
  .box.box-prize ul{
    list-style-type: disc;
   }
  .box.box-prize h3{
    line-height: 1.2em;
    padding-left: 0;
  }
  .box.box-prize ol a, .box.box-prize ul a{
    color: #FF9500;
    text-decoration: underline;
  }
  .box.box-prize ol{
    padding-left: 32px;
  }
  .box.box-prize ul{
    padding-left: 0;
        line-height: 1.2em;
  }
  .box.box-prize .box--styleB{
    border: 2px solid #FF0000;
    border-radius: 14px;
    padding: 4px 9px;
    width: 98%;
    color: #FF0000;
  }
  .box.box-prize .list--styleB li:nth-child(n+2){
    margin-left: 22px;
  }
  .box.box-prize .list--styleB li:first-child{
    color: #FF0000;
  }
  #prize .box.box-prize .radio--prize-list{
    background: linear-gradient(180deg, #bf9a6e, #987448);
  }
  .box.box-prize .tab--styleA li.tab--styleA-button{
    background-color: transparent;
  }
  .box.box-prize .tab--styleA-button a{
    color: #976121;
    text-decoration: none;
  }
  .box.box-prize .form--styleA .radio--prize-list input[type="radio"]:checked + label{
    background: rgba(7, 7, 7, 0.6);
    color: #ffffff;
    font-size: 18px!important;
  }
  .box.box-prize .form--styleA .radio--prize-list input[type="radio"] + label{
    color: #3D2206;
    font-size: 18px!important;
  }
  .box.box-prize .radio--prize-list{
    padding: 5px 6px;
  }
  @media screen and (max-width:767px) {
    .box.box-prize ol, .box.box-prize ul, .box.box-prize h3{
      font-size: 16px;
    }
    .box.box-prize h2{
      font-size: 16px;
    }
    .box.box-prize .form--styleA .radio--prize-list input[type="radio"]:checked + label{
      font-size: 14px!important;
    }
    .box.box-prize .form--styleA .radio--prize-list input[type="radio"] + label{
      font-size: 14px!important;
    }
  }

/* 真手機橫版 */
@media (max-width: 932px)
  and (orientation: landscape)
  and (pointer: coarse) {
    .box.box-prize .box--styleA#success_msg {
      max-height: 200px;
    }
}