/* ---------------- 底層i_setup.aspx引用 font-awesome /css/font-awesome-4.5.0/css/font-awesome.min.css -----------------*/
/* ---------------- 底層i_setup.aspx引用 警示訊息區塊 /css/message.css-----------------*/
/* ---------------- 底層i_setup.aspx引用 GT平台的基本按鈕 /css/button.css -----------------*/

@import url("/include/i_reset.css?20210827");
@import url("/include/i_GTrank.css?20210827");
@import url("/include/i_Bank_style.css?20210827");/* 儲值轉點簡化使用 */
@import url("/include/i_BankTeshi_style.css?20210827");/* 特仕會員專區使用 */
/*
  20210827 (S) w89810 調整CSS版號
  2019/01/16  (姝姝)   （淘）19-0109-001	gametower定型化契約改版
  2013/01/28  (雅筠)  新增特仕會員專區CSS的import連結/include/i_BankTeshi_style.css
  2012/08/31  (kimberly) 新增分級圖示預設顯示
　2012/01/09  (kimberly) 新增星星的顏色 tipstar
  2011/07/29  (kimberly) 變更.ContainLink設定(取消字級)。。

*/

.guidebar {
	font-family: "新細明體", "細明體";
	font-size: 13px;
	color: #474747;
	text-decoration: none;
}
table {
	font-family: "新細明體", "細明體";
	font-size: 13px;
	line-height: 19px;
	color: #333333;
	letter-spacing: 1px;
	font-weight:normal;
}

/*已選取動態背景*/
.selectbg{
	background-color: #ededed;
	animation: bganimate 1.5s linear infinite;
}
@-webkit-keyframes bganimate {
	0% {
		background-color: #ededed;
	}
	50% {
		background-color: #ededed;
	}
	51% {
		background-color: #fcffbf;
	}
	100% {
		background-color: #fcffbf;
	}
}

.tablebigtitle {
	font-family: "新細明體", "細明體";
	font-size: 16px;
	font-weight: bold;
	color: #8D2323;
	letter-spacing: 2pt;
}

.avatarimg {
	border: 1px solid #999999;
}
a {
	text-decoration: none;
	color: #666666;
}
.menutype {
	font-family: "新細明體", "細明體";
	font-size: 13px;
	color: #666666;
}
.textareaborder {
	border: 1px solid #808080;
	height: 14pt;
	color: #333333;

}
.type9pt {
	font-family: "新細明體", "細明體";
	font-size: 12px;
}
.tablebg {
	background-color: #FFFFFF;
}
.tableoverbg {
	background-color: #F6F6F6;
}
.Value_o {
	color: #ff902e;
	font-size: 12px;
}
.Value_green2 {
	font-size: 12px;
	color: 3C6500;
}
.Value_table {
	font-size: 12px;
	color: #3C6500;
}



a:hover {
	color: #990000;
	text-decoration: underline;
}
.point {
	color: #CC3333;
}

.ContainLink {
	color: #ED560E;
	list-style-type: square;
	/*font-size: 13px;*/
}
.Value_green {
	font-size: 12px;
	color: 5D7F14;
}

.type12pt {
	font-family: "新細明體", "細明體";
	font-size: 16px;
}
.type15px {
	font-family: "新細明體", "細明體";
	font-size: 15px;
}
.type1px {
	font-family: "新細明體", "細明體";
	font-size: 1px;
	line-height: 0px;
}
.slogan_Main {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: normal;
	font-weight: bold;
	color: #0099CC;
	text-decoration: none;
}
.slogan_Sub {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: bold;
	color: #684624;
	text-decoration: none;
}
.slogan_content {

	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 18px;
	font-weight: normal;
	color: #848457;
	text-decoration: none;
	}

.outline {
	border: 1px solid #999999;
}
a.btnmove {}
a.btnmove:hover {
	position:relative;
	top:1px;
	left:1px;}

.ContainLink_pure {

	color: #669900;
	list-style-type: square;
	/*font-size: 13px; */
}
.smallfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #333333;
	line-height: 15px;
}

a.smallfont {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #0066CC;
	line-height: 15px;
}
.type13px {

	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
}
/*信用卡驗證用*/
.card_9pt {
	font-size: 9pt;
	color: #CC0000;
	letter-spacing: normal;
}


a.add {
color:#4E7CA7;
text-decoration:none;}
a.add:hover {
color:#cc3300;
text-decoration:none;}

img{border:0;}

.png  {tmp:expression(setPng(this));}


/*新增 重要消息的style20110322K*/
.news_important{color:#000000; font-weight:bold;}

.tipstar{color:#99CC00;}

/* ===========20090313會員特區使用 ==============================  */
.member_font_gray{
font-size:13px;
line-height:22px;
color:#464646;
letter-spacing:normal;
		}
.member_font_red{
font-size:13px; line-height:22px; color: #CC0000; letter-spacing:normal;
		}
.member_font_blue{
font-size:13px;
line-height:22px;
color: #0033CC;
letter-spacing:normal;
		}
.member_font_white{
font-size:12px;
line-height:25px;
color: #FFFFFF;
letter-spacing:normal;
		}
.btn_img{filter: gray;}

.input-button {
  cursor:pointer;
  background:none;
  border-style:none;
  border-width:0pt;
  margin:0; padding:0;
  border:0;
}

/*按鈕框-靠右*/
.button_box{
  width: 35%;
  float: right;
  padding: 1%;
}
/*領取按鈕*/
.receive-button{
  border: none;
  color: #ffffff;
  font-size: 1.15em;
  font-weight: bold;
  cursor: pointer;
  padding: 7px;
  border-radius: 5px;
  margin: 1.5%;
  box-shadow: 1px 1px 1px #2a4509;
  background-color: #609b2d;
  float: right;
  width: 100%;
  margin-bottom: 3%;
}
.receive-button:hover{
  background-color: #73b33b;
}
.w-half{
  width: 50%;
}
.tax_checkbox {
	width: 15px;
	height: 15px;
}

/*兌換按鈕*/
.receive-exchange-button{
  border: none;
  color: #ffffff;
  font-size: 1.15em;
  font-weight: bold;
  cursor: pointer;
  padding: 7px;
  border-radius: 5px;
  margin: 1.5%;
  box-shadow: 1px 1px 1px #41370b;
  background-color: #427dea;
  float: right;
  width: 100%;
  margin-bottom: 3%;
}
.receive-exchange-button:hover{
  background-color: #5490ff;
}
/*票卷按鈕*/
.receive-other-button{
  border: none;
  color: #474747;
  font-size: 1.15em;
  font-weight: bold;
  cursor: pointer;
  padding: 7px;
  border-radius: 5px;
  margin: 1.5%;
  box-shadow: 1px 1px 1px #41370b;
  background-color: #ffb000;
  float: right;
  width: 100%;
  margin-bottom: 3%;
}
.receive-other-button:hover{
  background-color: #ffc934;
}
/*已使用灰色按鈕*/
.receive-grey-button{
  border: none;
  color: #d6d6d6;
  font-size: 1.15em;
  font-weight: bold;
  cursor: pointer;
  padding: 7px;
  border-radius: 5px;
  margin: 1.5%;
  box-shadow: 1px 1px 1px #41370b;
  background-color: #656565;
  float: right;
  width: 100%;
  margin-bottom: 3%;
}
.receive-grey-button:hover{
  background-color: #333333;
}


/*--以下產包點卡專區通用CSS--*/
#Productarea{}
#ProductTable{}
#ProductTable #ProductTable_Page{}
#product_container{}
#product_detail{}
#ProductTable .product_header{ font:Verdana, Arial, Helvetica, sans-serif 13px/1.2em; font-weight:bold;color:#330000; background-color:#FFCC99;}
#ProductTable .product_title{width:80px;background-color:#F2F2F2;}
#ProductTable .product_text{}
#ProductTable .product_pic{width:140px; text-align:center; background-color:#CCCCCC;}


/* 關鍵字視窗使用 */
.KeyWordLink {
	color:#2959D8;
	list-style-type: square;
	border-bottom-style:dotted;
	font-size:13px;
	cursor:help;
	border-bottom-width: 1px;
	border-bottom-color: #2959D8;
}


/*-----IE6.7.8 CSS3圓角---------*/

.BorderRadius {
	behavior: url(/include/i_Css3Pie.htc);
	}

/*---- 分級圖示的預設顯示隱藏------------------*/
.level0,.level6,.level0,.level12,.level15,.level18{ display: none;  }
.levelnote{padding:2px 0 0 0;}

/* 20130515H 因FB新增InGame共用寬度*/
#InGame-all{ text-align:center;}
#InGame-style{ width:600px; margin:0 auto;}

#SerialCategoryList select{
  width: 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%);
}

/*按鈕_複製*/
.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%);
}
/*彈窗的表格*/
.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;
}

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: 520px;
  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;
  height: 18px;
  cursor: pointer;
  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: #ED560E;
  text-decoration: underline;
  text-underline-offset: 2px; /* 下劃線偏移 */
}
.award-conversion p a:hover{
  color: #990000;
}

/* 按鈕 */
.award-conversion .btn-confirm {
  display: block;
  width: 220px;
  margin: 0 auto;
  padding: 8px;
  background-color: #427dea;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  line-height: 22px;
  box-shadow: 1px 1px 1px #41370b;
  font-weight: bold;
}

.award-conversion .btn-confirm:hover {
  background-color: #5490ff;
  /*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: #000000;
  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;
}