@charset "utf-8";
/* CSS Document */
/*
	20210222 (U) w83334
*/

/* 背景色 */
.container { padding-bottom: 122px; color:rgba(10, 10, 10, 0.6);}
.content { padding-bottom:10px;}

/* 內容區塊 */
.container .tab--data{
	border: none !important;
}

/*---------------------------內容樣式---------------------------*/
.txt-center {
	text-align: center;
}
.box {width:98%; max-width:850px;}
	.box--styleA {border: 1px solid rgba(10, 10, 10, 0.3);		}
	.box--styleA ol {
    display: block;
    overflow: auto;
  }
	.box--styleA ol,.box--styleA ul { padding-left: 20px;}
	.box .box--styleA ,.box .box--styleB{ width:97%;}
	.box h2 {
		font-size:108%;
		font-weight:bold;
		color:#333;
		line-height:2em;
		padding-left:5px;
		border-bottom: 1px dashed rgba(0, 0, 0, 0.3);
		}
		.box h2 i {
  		font-size: 120%;
 		margin-right: 5px;
		}
		i.fa-id-card{
		font-size:130%;
		margin-right:5px;
		}
		i.fa-phone-square{
		font-size:140%;
		margin-right:7px;
		}
	.box h3 {
		font-weight:bold;
		color:#333;
		line-height:2em;
		padding-left:5px;
		}
		@media screen and (min-width:501px){
			.box h3 {
				font-size: 17px;
			}
		}
	.box p {
		padding:0 10px;
		}


.form {	width: inherit;}

/*---------------------------領獎中心ingame版本---------------------------*/
.in_game {
	position: relative;
	display: flex;
	justify-content:flex-start;
}
.box_question {
	position: relative;
}
.btn_question {
	position: absolute;
	background: rgba(0, 0, 0, 0.8);
	border-radius:50%;
	width: 38px;
	height: 38px;
	top: 3px;
	right:3px;
	cursor: pointer;
	z-index:1;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn_question i {
	font-size: 1.8em;
}
@media only screen and (max-width: 430px) {
	.btn_question i {
		font-size: 1.2em;
	}
}
/*-----------------ingame tab 選單-----------------*/
.in_game .tab--nav{
	width: 10%;
	min-width: 160px;
}
.in_game .tab--nav > ul{
	padding: 0;
	display: flex;
  justify-content:flex-start;
	flex-wrap:wrap;
  margin-left: 0;
}
.in_game .tab--nav ul > li{
	list-style: none;
	width: 100%;
}
.in_game .sub li{
	list-style: none;
}
.tab--nav-button .main {
	display: inline-block;
	width: 100%;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.4);
	line-height: 2.7em;
}
.in_game .main a{
	width: 100%;
	height: 100%;
	color: #fff;
}
.in_game .main.active {
	background-color: rgba(0, 0, 0, 0.8);
}
.in_game .sub{
	text-align: center;
	background-color: rgba(0, 0, 0, 0.3);
  margin-left: 0;
}
.in_game .sub a{
	display: inline-block;
	padding: 0 10px;
	width: 100%;
	height: 100%;
	color: #fff;
}
@media screen and (min-width:501px){
	.in_game .sub a{
		font-size: 17px;
	}
}

.button-nav-item {
	line-height: 2em;
}
.in_game .button-nav-item.active {
	background-color: rgba(0, 0, 0, 0.5);
}

/*-----------------ingame tab 內容-----------------*/
.in_game .tab--data{
	width: 92%;
	padding: 0;
	overflow-y:auto;
	/*max-height: 243px;*/
}
.in_game .tab--data .table {
	width: 100%;
  margin: 0;
}
.in_game .tab--data .table font{
  font-size: 11px;
}
@media screen and (min-width:501px){
	.in_game .tab--data .table font{
		font-size: 17px;
		line-height: 25px;
	}
}
.in_game .table--ingame {background: rgba(100, 100, 100, 1); border-spacing: 1px;}
	.table--ingame th{ background: rgba(0, 0, 0, 0.55); color: #fff; padding:8px; font-size: 11px; }
	@media screen and (min-width:501px){
		.table--ingame th{
			font-size: 17px;
			line-height: 25px;
		}
	}
	.table--ingame tr{ background-color: rgba(255, 255, 255, 0.8); border: none; word-break:break-all; /*文字折行*/}
	.table--ingame tr:nth-child(even){ background-color: rgba(255, 255, 255, 0.9); }

.in_game .tab--data td {
  text-align: center;
  font-size: 11px;
}
@media screen and (min-width:501px){
	.in_game .tab--data td {
		font-size: 17px;
		line-height: 25px;
	}
}
.prize_link{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
}
.prize_link a{
  display: block;
}
/*按鈕__領取*/
.in_game .btn_receive {
  display: block;
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 22px;
	background: rgba(0, 0, 0, 0.65);
  padding: 5px 10px;
  margin: 2px;
  max-width: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 1366px) {
  .in_game .btn_receive {
    max-width: 135px;
    font-size: 0.95em;
  }
}
@media screen and (min-width:501px){
	.in_game .btn_receive {
		font-size: 18px;
	}
}
/*按鈕__領取其他*/
.in_game .btn_detail {
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 22px;
	background: rgba(0, 0, 0, 0.65);
	padding: 5px 10px;
  margin: 2px;
  max-width: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 1366px) {
  .in_game .btn_detail {
    max-width: 135px;
    font-size: 0.95em;
  }
}
@media screen and (min-width:501px){
	.in_game .btn_detail {
		font-size: 18px;
	}
}
/*按鈕__灰色*/
.in_game .btn_grey {
	border-radius: 50px;
	color: #e9e9e9;
	line-height: 22px;
	background: #656565;
	padding: 5px 10px;
  margin: 2px;
  max-width: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.in_game .btn_grey:hover {
	background: #333333;
}

@media screen and (max-width: 1366px) {
  .in_game .btn_grey {
    max-width: 135px;
    font-size: 0.95em;
  }
}
@media screen and (min-width:501px){
	.in_game .btn_grey {
		font-size: 18px;
	}
}
/*按鈕__快速儲值*/
.in_game .btn_savings {
	border-radius: 50px;
	color: #e9e9e9;
	line-height: 22px;
	background-color: #5f9730;
	padding: 5px 10px;
  margin: 2px;
  max-width: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.in_game .btn_savings:hover {
	background: #7ab946;
}

@media screen and (max-width: 1366px) {
  .in_game .btn_savings {
    max-width: 135px;
    font-size: 0.95em;
  }
}
@media screen and (min-width:501px){
	.in_game .btn_savings {
		font-size: 18px;
	}
}
/*按鈕__兌換*/
.in_game .btn_exchange {
	border-radius: 50px;
	color: rgba(255, 255, 255, 0.9);
	line-height: 22px;
	background: rgba(0, 0, 0, 0.4);
	padding: 5px 10px;
  margin: 2px;
  max-width: 150px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media screen and (max-width: 1366px) {
  .in_game .btn_exchange {
    max-width: 135px;
    font-size: 0.95em;
  }
}
@media screen and (min-width:501px){
	.in_game .btn_exchange {
		font-size: 18px;
	}
}
/*已領取.已受理.已寄送*/
.in_game .already {
  display: block;
  font-size: 11px;
  min-width: 76px;
	border-radius: 4px;
	line-height: 1.5em;
	padding: 1px 2px;
  margin: 3px;
}
@media screen and (min-width:501px){
	.in_game .already {
		font-size: 17px;
	}
}

.in_game .item_line {
  width: 100%;
  height: 2px;
  border-bottom: 1px solid #646464;
}

@media screen and (max-width:1366px){
	.in_game {
		flex-wrap: wrap;
	}
	.box_question {
		position: static;
	}
	/*-----------------ingame tab 選單-----------------*/
	.in_game .tab--nav{
		width: 100%;
		min-width: 100%;
		padding-bottom: 2.6em;
	}
	.tab--nav-button {
		width: 28%;
		margin-right: 3px;
	}
	/*-----------------左方按鈕-----------------*/
	.tab--nav-button .main {
		display: inline-block;
		background-color: rgba(0, 0, 0, 0.2);
		width: 100%;
		line-height: 1.55em;
		padding:6px 11px;
		border-radius: 5px 5px 0 0;
	}
	.in_game .tab--nav ul > li{
		float: left;
		width: auto;
	}
	.in_game .sub{
		position: absolute;
		width: 100%;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		margin: 0;
	}
	.in_game .sub li{
		float: left;
		display: inline-block;
		border-radius: 4px;
		background: rgba(255, 255, 255, 0.6);
		cursor: pointer;
		line-height: 2em;
		margin:5px 2px;
	}
	.in_game .sub a{
		display: inline-block;
		border-radius: 4px;
		padding: 0 8px;
		width: 100%;
		height: 100%;
		color: #fff;
	}
	/*-----------------ingame tab 內容-----------------*/
	.in_game .tab--data{
		width: 100%;
		min-width: 100%;
		max-height: 378px;
	}
	.in_game .date {
		display: none;
	}
}

/*===tab Start===*/
.tab--styleA{  width:100%;margin:10px auto 0 auto;}
	.tab--styleA > ol,.tab--styleA > ul { color: #333; padding:0; margin:0}
	.tab--styleA li.tab--styleA-button{ float:left; background-color: rgba(10, 10, 10, 0.11);  padding:7px 15px; list-style:none;border-radius: 6px 6px 0 0; margin-top:2px; margin-right:3px}
	.tab--styleA-button a{text-decoration:none;font-size:100%; color: rgba(0, 0, 0, 0.5);}
	.tab--styleA-button a:hover{color: rgba(0, 0, 0, 0.7);}
	.tab--styleA-button:hover{ color: rgba(0, 0, 0, 0.6);}
	.tab--styleA-buttonhover a{text-decoration:none; color: rgba(0, 0, 0, 0.7); font-size:100%}
	.tab--styleA-buttonhover{float:left; list-style-type:none; padding:8px 15px; background-color: rgba(10, 10, 10, 0.2);border-radius: 6px 6px 0 0;margin-right:3px}
	.tab--styleA-data{ clear:both; border:1px solid rgba(0, 0, 0, 0.2); border-top-color:rgba(0, 0, 0, 0.5); border-top:0;}
	.tab--styleA-data p{ line-height:180%}
/*===tab End===*/

/*---------------------------radio樣式---------------------------*/
.radio--exchange{}
	.form--styleA .radio--exchange label {color:rgba(10, 10, 10, 0.9); 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:-8px; z-index: 1; content: ''; border:1px solid #f69401; }
	.form--styleA .radio--exchange input[type="radio"]:checked.label::after{ background:#f69401; cursor: pointer; position: absolute; width: 9px; height: 9px; border-radius: 50%; top: 50%; left: 50%; margin-top:-5px; margin-left:-5px; z-index: 1; content: ''; box-shadow:0px 0px 0px 2px #fff, 0px 0px 0px 3px #f69401; }


	.form--styleA .radio--exchange input[type="radio"] + label { padding-left:8px;display: inline-block; border-radius: 4px; cursor: pointer; width:100%;
	 background-color: rgba(140,125,103,0.35); margin-bottom: 3px; margin-top: 2px;}
	.form--styleA .radio--exchange input[type="radio"]:checked + label { border: 1px solid rgba(10, 10, 10, 0.3); color:rgba(0, 0, 0, 0.8); font-size:110%; font-weight: bold; }

.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); }

.form--styleB{
  width: 500px;
  margin-left: 0.8em;
}
@media screen and (max-width: 768px) {
  .form--styleB {
    width: 400px;
    margin-left: 0.5em;
  }
}
@media screen and (max-width: 420px) {
  .form--styleB {
    width: 97%;
    margin: 0 auto;
  }
}
.form--styleB select {
    width: 100%;
    font-size: 1rem;
    height: 2.5em;
    padding-left: 8px;
    border-radius: 10px;
    border: 1px #ab9178 solid;
    margin: 8px auto;
    color: #737373;
    background-color: #FFF;
}
@media screen and (max-width: 420px) {
  .form--styleB select {
    font-size: 0.9rem;
    padding-left: 4px;
    margin: 4px auto;
  }
}
@media screen and (min-width:501px){
	.form--styleB select {
		font-size: 17px;
	}
}
.form--styleB select option {
  color: #4B4B4B;
}
@media screen and (min-width:501px){
	.form--styleB select option {
		font-size: 17px;
	}
}

/*---------------------------獎項列表---------------------------*/
.prize_item {
	width:98%;
	background: rgba(10, 10, 10, 0.07);
	border: 1px solid rgba(10, 10, 10, 0.2);
	border-radius: 8px;
	color:rgba(10, 10, 10, 0.7);
	overflow:auto;
	margin:0 auto;
	margin-bottom:0.5em;
	}
.prize_item .header {
	background: rgba(10, 10, 10, 0.4);
	color: rgba(255, 255, 255, 0.9);
	border-radius: 8px 8px 0 0;
	font-size: 90%;
	line-height:1.8em;
	}
	.header span {
    display:inline-block;
    text-align:center;
    padding-left: 5px;
  }

.item_content {
	float:left;
	padding:4px 6px;
	width:73%;
}
.item_btn{
	float: right;
	width:27%;
	/*min-height:100px;*/
  padding: 1%;
  display:flex;
  flex-wrap: wrap;
  justify-content:flex-end;
  /*flex-direction:column;
  justify-content:center;
  align-items:flex-end;*/
	}
.item_btn a{
	background: #578e29;
	color: #fff;
	display: block;
	margin: 4%;
	/*width:80%;
	min-width:50px;
	max-width:140px;*/
	text-align:center;
	border-radius: 6px;
	padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
	}
@media screen and (max-width: 1024px) {
  .item_btn a{
    width: 100%;
  }
}
.item_btn a:hover{
	background: #6dad39;
	}
/*領取票卷按鈕*/
.item_ticket_btn{
	float: right;
	width:50%;
  display:flex;
  flex-direction:column;
	}
@media screen and (max-width: 1024px) {
  .item_ticket_btn{
    width: 100%;
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
.item_ticket_btn a{
	background: #ffb300;
	color: #000000;
	display: block;
	margin: 4%;
	text-align:center;
	border-radius: 6px;
	padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
	}
.item_ticket_btn a:hover{
	background: #ffcf31;
	}
/*灰階按鈕*/
.item_grey_btn{
	float: right;
	width:50%;
  display:flex;
  flex-direction:column;
}
@media screen and (max-width: 1024px) {
  .item_grey_btn{
    width: 100%;
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
.item_grey_btn a{
	background: #565656;
	color: #e2e2e2;
	display: block;
	margin: 4%;
	text-align:center;
	border-radius: 6px;
	padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
	}
.item_grey_btn a:hover{
	background: #333333;
	}

.item_btn > p{
	display:block;
	margin:4px 5px;
	width:80%;
	min-width:50px;
	max-width:140px;
	text-align:center;
	border-radius: 6px;
	padding:7px 8px;
}
.page_item {text-align:right;}
.page_item select{width:50px;}


/*---------------------------系統訊息---------------------------*/
.list{ width:100%; margin: 0 auto; padding:5px; position:relative; display: inline-block; }
	/*listStyle--A*/
	.list--styleA li{   margin-left: 5%;}

	/*listStyle--B*/
	.list--styleB li{ list-style: none; }
	.list--styleB li:nth-child(n+2) { margin-left:40px; }
	.list--styleB li:first-child{ width:10px; height:100%; color:#fff000; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; }

	/*listStyle--C*/
	.list--styleC li{ list-style: none; text-align: center; }
	.list--styleC li a{ color: #666666; text-decoration: none; line-height: 40px; }
	.list--styleC li:first-child{ width: 100%; color: #5BBC82; font-size: 18px; font-weight: bold; }
	.list--styleC li:nth-child(n+2){ width: 50%; float: left; }

	/*listStyle--D*/
	.list--styleD li{ list-style: none;	}
	.list--styleD li:nth-child(n+2) { margin-left:130px; }
	.list--styleD li:first-child{ width:120px; height:100%; color:#FF0004; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; }
	.list--styleD .tltleText{ font-size:18px; font-weight:bold; color:#36995E; }

	/*listStyle--E*/
	.box--styleE { border: 1px solid #1dcd00; clear: both;}
	.list--styleE li{ list-style: none; }
	.list--styleE li:nth-child(n+2) { margin-left:40px; }
	.list--styleE li:first-child{ width:10px; height:100%; color:#1dcd00; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; }

	/*listStyleOtp--A*/
	.box--listStyleOtp--A {border: 1px solid #5bbc82;width: 98%; max-width: 850px;}
	.box--listStyleOtp--A ul{padding-left: 2em;}
	.listStyleOtp--A li{ list-style: none; color: #CCC;/*w86997*/ }
	.listStyleOtp--A li:nth-child(n+2) { margin-left:40px; /*width: 100%;*/ text-align: left;}
	.listStyleOtp--A li:first-child{ width:10px; height:100%; color:#00a643; font-size: 2em; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; }
	.listStyleOtp--A li font{ font-size: 1.1em;}

/* 頁數樣式 */
.pageNum-button{ width:100%; margin:10px auto; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; -webkit-flex-wrap: wrap; }
.pageNum-button ul{ display:inline-block; margin:20px 0; border-radius:5px; }
.pageNum-button li{ display:inline; float: left; }
.pageNum-button li a{ padding: 10px 12px; line-height: 30px; text-decoration: none; background-color:rgba(255, 255, 255, 0.4); color: rgba(10, 10, 10, 0.8); border: 1px solid rgba(10, 10, 10, 0.2); }
.pageNum-button li a:hover{  background: rgba(10, 10, 10, 0.5);	color: rgba(255, 255, 255, 0.8); }
.pageNum-button li.active a{ padding: 10px 12px; line-height: 30px; text-decoration: none; background: rgba(10, 10, 10, 0.5); color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(10, 10, 10, 0.3);}

/* 行動版按鈕樣式 */
.button--styleA {
	background: rgba(10, 10, 10, 0.7);
	color: rgba(255, 255, 255, 0.8);
    box-shadow:rgba(10, 10, 10, 0.6) 1px 1px 0 0;
}

/*按鈕_批次繳稅*/
.button-batch-tax{
	width: 30%;
	background-color: #5f9730;
	color: #e9e9e9;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 22px;
	padding: 0.4em;
	border-radius: 6px;
	border: none;
	cursor: pointer;
	margin: 10px auto;
	display: block;
	box-shadow: 1px 1px 1px #2a4509;
}
	.button-batch-tax.disabled {
		background: #565656;
		color: #e2e2e2;
		box-shadow: 1px 1px 1px #000;
	}

		.button-batch-tax.disabled:hover {
			background: #333333;
		}

.tax_checkbox {
	width: 15px;
	height: 15px;
}
/*燈箱效果*/
.lightbox {
	position: fixed;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	top: 0;
	left: 0;
	z-index:1000;
	padding-top: 5%;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
}

.lightbox > div {
	width:90%;
	max-width:850px;
	max-height: 85vh;
	margin:0 auto;
	padding: 1.5em 2em;
	background: #fff;
	box-shadow: 2px 2px 3px rgba(0,0,0,.6);
	border-radius: 20px;
	position: relative;
	text-align:left;
}
.lightbox > div.close_box {
	overflow-y: visible;
	max-height: 0;
	padding: 0;
}
@media screen and (max-width:545px){

	.lightbox {
		padding-top: 7%;
	}
	.lightbox > div {
		width:85%;
	}
}

.lightbox--close  {
	background: rgba(0, 0, 0, 0.9);
	border-radius:50%;
    position: absolute;
    width: 40px;
    height: 40px;
    top: -20px;
    right: -20px;
    cursor: pointer;
	z-index:1;
}
.lightbox--close::before, .lightbox--close::after {
    content: '';
    position: absolute;
    width: 80%;
    top: 48%;
	left:12%;
    height: 3px;
    background: #FFF;
    cursor: pointer;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.lightbox--close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 新區塊-表格樣式 */
.item_box{
  width: 100%;
}
.item_box .table_item{
  width: 100%;
  word-break: break-all;
  border-spacing: 0;
  border-collapse: initial;
  border: 1px solid #A43029;
}
.item_box .table_item tr td{
  line-height: 24px;
  padding: 8px;
}
@media screen and (max-width: 1024px) {
  .item_box .table_item tr td{
    padding: 4px;
  }
}
/*.item_box .table_item tr td p{
  color: rgba(0, 0, 0, 0.8);
  margin-left: 1.5em;
}
@media screen and (max-width: 1024px) {
  .item_box .table_item tr td p{
    margin-left: 0;
  }
}*/
/* 線條 */
.item_box .table_item .item_line{
  width: 100%;
  height: 2px;
  border-bottom: 1px solid #838383;
}
.item_box .table_item .item_line_left{
  height: 100%;
  border-left: 1px solid #838383;
}
.item_box .table_item p.item_tit{
  text-align: center;
  margin-left: 0;
  white-space: nowrap;
}

.item_box .table_item .item_btn{
  float: none;
  /*width: 180px;*/
  width: 100%;
  min-height: auto;
  padding: 1%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 768px) {
  .item_box .table_item .item_btn{
    font-size: 0.9em;
  }
}
/*@media screen and (max-width: 1024px) {
  .item_box .table_item .item_btn{
    width: 100%;
  }
}*/
.item_box .table_item .item_btn .item_line{
  margin: 3% 0;
}
/*黃色*/
.item_box .table_item .item_btn .item_ticket_btn{
  float: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .item_box .table_item .item_btn .item_ticket_btn{
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
.item_box .table_item .item_btn .item_ticket_btn a{
  background-color: #ffb300;
  color: #000000;
  display: block;
  margin: 4% 0;
  text-align: center;
  border-radius: 50px;
  padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
}
@media screen and (max-width: 768px) {
  .item_box .table_item .item_btn .item_ticket_btn a{
    border-radius: 10px;
  }
}
.item_box .table_item .item_btn .item_ticket_btn a:hover{
	background-color: #ffcf31;
}
/*綠色*/
.item_box .table_item .item_btn .item_savings_btn{
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .item_box .table_item .item_btn .item_savings_btn{
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
.item_box .table_item .item_btn .item_savings_btn a{
  background-color: #5f9730;
  color: #fff;
  display: block;
  margin: 4% 0;
  text-align: center;
  border-radius: 50px;
  padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
}
@media screen and (max-width: 768px) {
  .item_box .table_item .item_btn .item_savings_btn a{
    border-radius: 10px;
  }
}
.item_box .table_item .item_btn .item_savings_btn a:hover{
	background-color: #7ab946;
}
/*藍色*/
.item_box .table_item .item_btn .item_exchange_btn{
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .item_box .table_item .item_btn .item_exchange_btn{
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
.item_box .table_item .item_btn .item_exchange_btn a{
  background-color: #427dea;
  color: #fff;
  display: block;
  margin: 4% 0;
  text-align: center;
  border-radius: 50px;
  padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
}
@media screen and (max-width: 768px) {
  .item_box .table_item .item_btn .item_exchange_btn a{
    border-radius: 10px;
  }
}
.item_box .table_item .item_btn .item_exchange_btn a:hover{
	background-color: #5490ff;
}
/*灰色*/
.item_box .table_item .item_btn .item_grey_btn{
  float: none;
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  .item_box .table_item .item_btn .item_grey_btn{
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
.item_box .table_item .item_btn .item_grey_btn a{
  background-color: #565656;
  color: #e2e2e2;
  display: block;
  margin: 4% 0;
  text-align: center;
  border-radius: 50px;
  padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
}
@media screen and (max-width: 768px) {
  .item_box .table_item .item_btn .item_grey_btn a{
    border-radius: 10px;
  }
}
.item_box .table_item .item_btn .item_grey_btn a:hover{
	background-color: #333333;
}

/*彈跳視窗設定*/
#enlarge{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
#enlarge iframe{
  width: 94%;
  height: calc(100vh - 9em);
  margin: 0 auto;
  display: block;
}
@media screen and (max-width: 1024px) {
  #enlarge iframe{
    height: calc(100vh - 7em);
  }
}
#cboxContent {
  margin-top: 0 !important;
}

#enlarge .item_btn{
  float: none;
  width: 220px;
  min-height: auto;
  padding: 1%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

#enlarge .item_btn .item_savings_btn{
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  #enlarge .item_btn .item_savings_btn{
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
#enlarge .item_btn .item_savings_btn a{
  background-color: #5f9730;
  color: #fff;
  display: block;
  margin: 4% 0;
  text-align: center;
  border-radius: 50px;
  padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
}
#enlarge .item_btn .item_savings_btn a:hover{
	background-color: #7ab946;
}

#enlarge .item_btn .item_grey_btn{
  width: 100%;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1024px) {
  #enlarge .item_btn .item_grey_btn{
    margin: 0 4%;
    padding: 0.5% 1%;
  }
}
#enlarge .item_btn .item_grey_btn a{
  background-color: #656565;
  color: #e2e2e2;
  display: block;
  margin: 4% 0;
  text-align: center;
  border-radius: 50px;
  padding: 4% 2%;
  box-shadow: 1px 1px 1px #000;
}

/*彈跳窗標題字*/
body.swal2-shown .swal2-popup .swal2-title{
  z-index: 2;
  font-size: 1.3em;
  line-height: 24px;
  margin: 5px 0 6px 0;
  color: #ec6900;
}

/*彈窗的小按鈕_複製*/
.btn_clone{
  margin: 5px;
  background: linear-gradient(to bottom, #54b72a 0%, #50871f 100%);
  box-shadow: 1px 1px 2px #2a4509;
  border-radius: 0.45em;
  color: #fff;
  border: none;
  padding: 4px 10px;
  cursor: pointer;
}
.btn_clone:hover {
  background: linear-gradient(to bottom, #7fd330 0%,#4c9e24 100%);
}

/*彈跳視窗樣式*/
body.swal2-shown .swal2-popup {
  position: relative;
  background: #ffa052;
  overflow: hidden;
  -webkit-box-shadow: 0 0 2px #301e10, 0 0 5px rgb(0, 0, 0), inset 0 0 5px rgb(0, 0, 0);
  box-shadow: 0 0 2px #301e10, 0 0 5px rgb(0, 0, 0), inset 0 0 5px rgb(0, 0, 0);
  border-radius: 20px;
}

body.swal2-shown .swal2-popup .swal2-content {
  color: #3a281f;
  /*font-weight: bolder;*/
}

body.swal2-shown .swal2-popup .swal2-content img {
  vertical-align: middle;
  max-width: 60px;
}

/*彈跳窗標題字*/
body.swal2-shown .swal2-popup .swal2-title{
  z-index: 2;
  font-size: 1.3em;
  line-height: 24px;
  margin: 5px 0 6px 0;
  color: #ec6900;
}

body.swal2-shown .swal2-popup .swal2-actions {
  margin-top: 0.6em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

body.swal2-shown .swal2-popup .swal2-actions .swal2-cancel {
  background: linear-gradient(to bottom, #ff7272 0%,#ea211e 100%);
  box-shadow: 1px 1px 2px #be3730;
  border-radius: 0.45em;
  color: #fff;
}

body.swal2-shown .swal2-popup .swal2-actions .swal2-cancel:hover {
  background: linear-gradient(to bottom, #ff8e8e 0%,#e83737 100%);
}

body.swal2-shown .swal2-popup .swal2-actions .swal2-confirm {
  background: linear-gradient(to bottom, #54b72a 0%,#50871f 100%);
  box-shadow: 1px 1px 2px #2a4509;
  border-radius: 0.45em;
  color: #fff;
}

body.swal2-shown .swal2-popup .swal2-actions .swal2-confirm:hover {
  background: linear-gradient(to bottom, #7fd330 0%,#4c9e24 100%);
}

/*彈窗的表格*/
.swal2-html-container .table{
  border: 1px solid #ffbd22;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 1px;
  color: #333333;
}
.swal2-html-container .table-full{
  width: 100%;
  margin: 10px auto;
}
.swal2-html-container .table th{
  background-color: #ffbd22;
  text-align: center;
}
.swal2-html-container .table td{
  background-color: #ffffff;
  text-align: center;
  padding:6px;
}

body.swal2-shown .swal2-popup::before {
  content: "";
  position: absolute;
  top: -125%;
  left: -28%;
  width: 250%;
  height: 600%;
  background: repeating-linear-gradient(#ffa052 0%, #ffa052 7.5px, #ff7300 7.5px, #ff7300 15px, #ffa052 15px, #ffa052 22.5px, #ff7300 22.5px, #ff7300 30px);
  -webkit-transform: translateX(-20%) translateY(-20%) rotate(-45deg);
  transform: translateX(-20%) translateY(-20%) rotate(-45deg);
  -webkit-animation: animate 40s linear infinite;
  animation: animate 40s linear infinite;
}

body.swal2-shown .swal2-popup::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  background: #fffaf2;
  -webkit-box-shadow: 0 0 2px #d66100, 0 0 5px rgb(0, 0, 0), inset 0 0 5px rgb(0, 0, 0);
  box-shadow: 0 0 2px #d66100, 0 0 5px rgb(0, 0, 0), inset 0 0 5px rgb(0, 0, 0);
  border-radius: 10px;
}

button.swal2-close {
  display: none !important;
}

@-webkit-keyframes animate {
  from {
    background-position: 0;
  }

  to {
    background-position: 0 450px;
  }
}

@keyframes animate {
  from {
    background-position: 0;
  }

  to {
    background-position: 0 450px;
  }
}


/* 獎項兌換區塊樣式 */
.award-conversion {
  max-width: 100%;
  max-height: 550px;
  margin: 0 auto;
  padding: 24px;
  max-height: none;
  overflow: visible;
}
/* 主標題 */
.award-conversion-title {
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eeeeee;
}

/* 兌換內容區塊 */
.award-conversion-content {
  display: flex;
  align-items: center;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

/* 獲得獎項 */
.award-conversion-content .awards-getitems{
  max-width: 580px;
  max-height: 180px;
  overflow-y: auto;
  margin: 8px 0;
  font-size: 18px;
  text-align: center;
  line-height: 26px;
  scrollbar-width: thin; /* 變細 */
}

/* 原獎項區塊 */
.award-conversion-original {
  flex: 1;
  width: 300px;
  padding: 8px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-sizing: border-box;
}

.award-conversion-original h3 {
  font-size: 18px;
  font-weight: bold;
  color: #495057;
  margin: 0 0 8px 0;
  text-align: center;
}

.award-conversion-original ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 160px;
  overflow-y: auto;
  scrollbar-width: thin; /* 變細 */
}

.award-conversion-original li {
  padding: 8px;
  margin-bottom: 8px;
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 4px;
  font-size: 16px;
  color: #495057;
}

/* 兌換和圖示區塊 */
.award-conversion-exchange {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
}

.award-conversion-exchange i {
  font-size: 24px;
  color: #007bff;
}

/* 指定獎項區塊 */
.award-conversion-specified {
  flex: 1;
  width: 300px;
  padding: 8px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-sizing: border-box;
}

.award-conversion-specified h3 {
  font-size: 18px;
  font-weight: bold;
  color: #495057;
  margin: 0 0 8px 0;
  text-align: center;
}

.award-conversion-specified-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 160px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin; /* 變細 */
}

.award-conversion-specified-list .input-group {
  display: flex;
  align-items: center;
  padding: 8px;
  background-color: #ffffff;
  border: 2px solid #e9ecef;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.award-conversion-specified-list .input-group:hover {
  border-color: #007bff;
  background-color: #f0f7ff;
}

.award-conversion-specified-list .input-group input[type="radio"] {
  margin-right: 8px;
  width: 18px !important;
  height: 18px;
  cursor: pointer;
  color: #007bff;
}
.award-conversion-specified-list .input-group input:checked{
  accent-color: #007bff;
}

.award-conversion-specified-list .input-group input[type="radio"]:checked + label {
  color: #007bff;
  font-weight: bold;
}

.award-conversion-specified-list .input-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  color: #495057;
  margin: -8px;   /* 延伸至 .input-group 的 padding，使整塊含 8px 皆可點擊 */
  padding: 8px;
  flex: 1;
}

.award-conversion-specified-list .input-group label img {
  vertical-align: middle;
}

/* 備註文字 */
.award-conversion p {
  font-size: 16px;
  color: #000000;
  text-align: center;
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.award-conversion p a{
  color: #007bff;
  text-decoration: underline;
}

/* 按鈕 */
.award-conversion .btn-confirm {
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 8px;
  background-color: #007bff;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  line-height: 22px;
}

.award-conversion .btn-confirm:hover {
  background-color: #3b9aff;
  /*transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);*/
}

/* 灰階按鈕 */
.award-conversion .btn-confirm.is-inactive {
  background-color: #8b8b8b;
  color: #f3f3f3;
  cursor: not-allowed;
}

/* 備註文字 */
.notes {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}
.notes-title{
  font-size: 22px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid #eeeeee;
}
.notes-content{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 8px;
  overflow-y: auto;
}
.notes-content p{
  font-size: 16px;
  color: #333;
  text-align: left;
  line-height: 1.6;
}


/* 真手機直版 */
@media (max-width: 480px) and (pointer: coarse) {
  .award-conversion {
    max-height: 500px;
    padding: 16px;
    overflow-y: auto;
  }
  .award-conversion-title {
    font-size: 18px;
  }
  .award-conversion-content {
    flex-direction: column;
  }
  .award-conversion-content .awards-getitems{
    font-size: 14px;
    line-height: 20px;
  }
  .award-conversion-original h3 {
    font-size: 16px;
  }
  .award-conversion-original ul {
    max-height: 100px;
  }
  .award-conversion-original li {
    font-size: 12px !important;
    padding: 4px;
  }
  .award-conversion-exchange{
    flex-direction: row;
    ap: 4px;
    font-size: 16px;
  }
  .award-conversion-exchange i{
    transform: rotate(90deg);
    font-size: 20px;
  }
  .award-conversion-original,
  .award-conversion-specified {
    width: 100%;
  }
  .award-conversion-specified h3 {
    font-size: 16px;
  }
  .award-conversion-specified-list {
    max-height: 100px;
  }
  .award-conversion-specified-list .input-group {
    padding: 4px;
  }
  .award-conversion-specified-list .input-group label {
    font-size: 12px;
  }
  .award-conversion p {
    font-size: 12px;
    margin: 0 0 4px 0;
  }
  .award-conversion .btn-confirm {
    width: 80%;
    font-size: 16px;
  }
  .notes {
    width: 100%;
  }
  .notes-title{
    font-size: 18px;
  }
  .notes-content{
    max-height: 300px;
  }
  .notes-content p{
    font-size: 12px;
  }
}

/* 真手機橫版 */
@media (max-width: 932px)
  and (orientation: landscape)
  and (pointer: coarse) {
  .award-conversion {
    max-height: 246px;
    padding: 16px;
    overflow-y: auto;
  }
  .award-conversion-title {
    font-size: 18px;
  }
  .award-conversion-content .awards-getitems{
    max-height: 100px;
    font-size: 14px;
    line-height: 20px;
  }
  .award-conversion-original,
  .award-conversion-specified {
    width: 100%;
  }
  .award-conversion-original h3 {
    font-size: 16px;
  }
  .award-conversion-original ul {
    max-height: 100px;
  }
  .award-conversion-original li {
    font-size: 12px !important;
    padding: 4px;
  }
  .award-conversion-exchange {
    gap: 4px;
    font-size: 16px;
  }
  .award-conversion-exchange i {
    font-size: 20px;
  }
  .award-conversion-specified h3 {
    font-size: 16px;
  }
  .award-conversion-specified-list {
    max-height: 100px;
  }
  .award-conversion-specified-list .input-group {
    padding: 4px;
  }
  .award-conversion-specified-list .input-group label {
    font-size: 12px;
  }
  .award-conversion p {
    font-size: 12px;
    margin: 0 0 4px 0;
  }
  .award-conversion .btn-confirm {
    width: 80%;
    font-size: 16px;
  }
  .notes {
    width: 100%;
  }
  .notes-title{
    font-size: 18px;
  }
  .notes-content{
    max-height: 190px;
  }
  .notes-content p{
    font-size: 12px;
  }
}

/* 桌機縮視窗（Responsive Desktop） */
@media (max-width: 932px) and (pointer: fine) {}



/* 彈窗樣式 */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.popup-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.popup-box {
  position: relative;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: visible;
  z-index: 1;
}
.popup-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #f0f0f0;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  z-index: 2;
}
.popup-close:hover {
  background: #e0e0e0;
  color: #333;
}