/* ==============base================= */
.inline-block-important {
  display: inline-block !important;
}
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  z-index: 999;
}
.modal .modal-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ==============luckydraw================= */
#container {
  position: relative;
  min-height: 1080px;
  background: url("../images/pc/bg.jpg") center / cover no-repeat;
  padding-top: 50px;
}
.title {
  margin: 0 auto 20px;
  width: 844px;
  height: 195px;
  background: url("../images/pc/title.png") no-repeat center center;
  background-size: 100% 100%;
}
.btnEventRule {
  top: 193px;
  right: 225px;
}
.eventTime {
  top: 143px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  color: #333;
  font-weight: bold;
  white-space: nowrap;
}

.nineBoxContainer {
  width: 771px;
  height: 635px;

  background: url("../images/pc/main.png") no-repeat center center;
  background-size: 100% 100%;
}
.nineBoxContainer .grid {
  display: grid;
  padding-top: 31px;
  padding-left: 118px;
  grid-template-columns: repeat(3, 168px);
  grid-template-rows: repeat(3, 170px);
  gap: 16px;
}
.nineBoxContainer .cell {
  border-radius: 15px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  color: #e94560;
  font-weight: bold;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  padding-top: 9px;
  padding-bottom: 20px;
}
.nineBoxContainer .cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at center,
    rgba(233, 69, 96, 0.3) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}
.nineBoxContainer .cell.active {
  background: linear-gradient(145deg, #e94560, #c23a51);
  color: #fff;
  filter: drop-shadow(0 0 10px rgba(233, 69, 96, 0.644));
}
.nineBoxContainer .cell.active::before {
  opacity: 1;
}
.nineBoxContainer .cell img {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 120px;
  object-fit: contain;
}
.nineBoxContainer .cell .name {
  width: 90%;
  text-align: center;
  font-size: 16px;
  height: 34px;
  line-height: 34px;
}
.nineBoxContainer .cell.drawTimes p {
  color: #fff;
}
.nineBoxContainer .cell.drawTimes {
  color: #fff;
  font-size: 24px;
}
.nineBoxContainer .cell.drawTimes #times {
  color: #fff;
  margin-right: 5px;
}

/* 弹窗按钮 */
.nineBoxContainer .btnHistory {
  top: 7px;
  right: 7px;
}
.nineBoxContainer .btnDrawTimesDetail {
  bottom: 7px;
  right: 7px;
}

/* 转盘抽奖按钮 */
.btnGroup .spinBtn {
  cursor: pointer;
  transition: all 0.3s ease;
}
.btnGroup .spinBtn:hover {
  transform: scale(1.03);
}
.btnGroup .spinBtn:active {
  transform: scale(0.98);
}
.btnGroup .spinBtn.spinBtn1 {
  width: 304px;
  height: 116px;
  background: url("../images/btn1.png") no-repeat center center;
}
.btnGroup .spinBtn.spinBtn10 {
  width: 304px;
  height: 116px;
  background: url("../images/btn10.png") no-repeat center center;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: -65px;
  width: 56px;
  height: 55px;
  background: url("../images/dialog_close.png") no-repeat center center;
}

.eventRuleModal .eventRuleModal-content {
  position: relative;
  width: 813px;
  height: 525px;
  background: url("../images/pc/dialog_1.png") no-repeat center center;
  background-size: 100% 100%;
}
.eventRuleModal .eventRuleModal-content .rule-box {
  position: absolute;
  top: 93px;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  height: 420px;
  overflow: hidden;
  overflow-y: auto;
}
.eventRuleModal .eventRuleModal-content .rule-box p {
  margin: 6px 0;
  line-height: 1.3;
}
.eventRuleModal .eventRuleModal-content .prize-table {
  width: 100%;
  border-collapse: collapse;
}
.eventRuleModal .eventRuleModal-content .prize-table th,
.eventRuleModal .eventRuleModal-content .prize-table td {
  border: 1px solid #000000;
  padding: 4px;
  text-align: center;
}
.eventRuleModal .eventRuleModal-content .prize-table th {
  font-weight: bold;
}

.noTicketModal .noTicketModal-content {
  position: relative;
  width: 813px;
  height: 525px;
  background: url("../images/pc/dialog_no.png") no-repeat center center;
  background-size: 100% 100%;
}
.noTicketModal .noTicketModal-content .goChargeHome {
  position: absolute;
  left: 50%;
  bottom: 86px;
  transform: translateX(-50%);
  width: 288px;
  height: 70px;
  cursor: pointer;
}

.historyModal-content {
  width: 813px;
  height: 673px;
  background: url("../images/pc/dialog_2.png") no-repeat center center;
  background-size: 100% 100%;
  padding-top: 135px;
}
.historyModal-content #history_list {
  margin: 0 auto;
  width: 85%;
  border-bottom: none;
  border-right: none;
}
.historyModal-content #history_list .history_item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  text-align: center;
  border-bottom: 1px solid #000000;
}
.historyModal-content #history_list .history_item span {
  font-size: 14px;
  color: #000000;
  border-right: 1px solid #000000;
  padding: 4px;
}
.historyModal-content #history_list .history_item:first-child {
  padding-bottom: 5px;
}
.historyModal-content #history_list .history_item:first-child span {
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: bold;
  border-left: none !important;
  border-right: none !important;
}
.historyModal-content #history_list .history_item span:first-child {
  border-left: 1px solid #000000;
}
.historyModal-content .history_item_noData {
  width: 100%;
  text-align: center;
}

/* ====SP: 歷史記錄和抽獎次數的分頁結構相同==== */
.historyModal-content .history_pagination,
.drawTimesModal-content .drawTimes_pagination {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-top: 20px;
  font-size: 14px;
  color: #3c3c3c;
}
.historyModal-content .history_pagination.hasData,
.drawTimesModal-content .drawTimes_pagination.hasData {
  display: flex;
}
.historyModal-content .history_pagination .prev,
.historyModal-content .history_pagination .next,
.drawTimesModal-content .drawTimes_pagination .prev,
.drawTimesModal-content .drawTimes_pagination .next {
  cursor: pointer;
  padding: 4px 8px;
  background: #f0f0f0;
  border-radius: 4px;
}
.historyModal-content .history_pagination .prev:hover,
.historyModal-content .history_pagination .next:hover,
.drawTimesModal-content .drawTimes_pagination .prev:hover,
.drawTimesModal-content .drawTimes_pagination .next:hover {
  background: #ddd;
}

.drawTimesModal-content {
  width: 813px;
  height: 673px;
  background: url("../images/pc/dialog_4.png") no-repeat center center;
  background-size: 100% 100%;
  padding-top: 135px;
}
.drawTimesModal-content #drawTimes_list {
  margin: 0 auto;
  width: 85%;
  border-bottom: none;
  border-right: none;
}
.drawTimesModal-content #drawTimes_list .drawTimes_item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  text-align: center;
  border-bottom: 1px solid #000000;
}
.drawTimesModal-content #drawTimes_list span {
  font-size: 14px;
  color: #000000;
  border-right: 1px solid #000000;
  padding: 4px;
}
.drawTimesModal-content #drawTimes_list .drawTimes_item:first-child {
  padding-bottom: 5px;
}
.drawTimesModal-content #drawTimes_list .drawTimes_item:first-child span {
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: bold;
  border-right: none !important;
  border-left: none !important;
}
.drawTimesModal-content #drawTimes_list .drawTimes_item span:first-child {
  border-left: 1px solid #000000;
}

.getPrizeModal .getPrizeModal-content {
  width: 813px;
  height: 386px;
  background: url("../images/pc/dialog_3.png") no-repeat center center;
  background-size: 100% 100%;
}
.getPrizeModal .getPrizeModal-content #prizeBox {
  position: absolute;
  top: 136px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 95%;
  overflow: hidden;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  padding-bottom: 10px;
}
.getPrizeModal .getPrizeModal-content #prizeBox .prize {
  display: inline-block;
  width: 114px;
  height: 114px;
  background: url("../images/pc/dialog_3_box.png") no-repeat center center;
  color: #fff;
}
.getPrizeModal .getPrizeModal-content #prizeBox .prize:not(:last-child) {
  margin-right: 10px;
}
.getPrizeModal .getPrizeModal-content #prizeBox .prize .prize_img {
  width: auto;
  max-width: 100%;
  height: 86px;
  margin: 0 auto;
}
.getPrizeModal .getPrizeModal-content #prizeBox .prize .prize_name {
  width: 100%;
  height: 28px;
  line-height: 28px;
  padding: 0 4px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* =================mobile ================= */
#container.mobile {
  /* height: 1624px; */
  background: url("../images/m/bg.jpg") no-repeat center center;
  background-size: 100% 100%;
}
#container.mobile .title {
  width: 100%;
  height: 232px;
  background: url("../images/m/title.png") no-repeat center center;
  background-size: 100% 100%;
}
#container.mobile .btnEventRule {
  top: 231px;
  right: 66px;
}
#container.mobile .eventTime {
  top: 164px;
  font-size: 22px;
}

#container.mobile .nineBoxContainer {
  width: 591px;
  height: 635px;
  background: url("../images/m/main.png") no-repeat center center;
  background-size: 100% 100%;
}
#container.mobile .nineBoxContainer .grid {
  padding-left: 26px;
}
#container.mobile .nineBoxContainer .btnHistory {
  bottom: unset;
  top: -290px;
  right: -23px;
  background: #fff;
}

#container.mobile .modal .modal-wrapper {
  transform: translate(-50%, -50%) scale(0.8);
}
#container.mobile .modal .modal-close {
  top: -55px;
  right: 0;
}

#container.mobile .historyModal-content {
  width: 685px;
  height: 566px;
  background: url("../images/m/dialog_2.png") no-repeat center center;
}

#container.mobile .drawTimesModal-content {
  width: 685px;
  height: 566px;
  background: url("../images/m/dialog_4.png") no-repeat center center;
}
#container.mobile .drawTimesModal-content #drawTimes_list .drawTimes_item {
  grid-template-columns: 2fr 1fr 1fr 2fr;
}

#container.mobile .getPrizeModal .getPrizeModal-content {
  width: 685px;
  height: 350px;
  background: url("../images/m/dialog_3.png") no-repeat center center;
}
#container.mobile .getPrizeModal .getPrizeModal-content #prizeBox {
  top: 100px;
}

#container.mobile .noTicketModal .noTicketModal-content {
  width: 685px;
  height: 565px;
  background: url("../images/m/dialog_no.png") no-repeat center center;
}
#container.mobile .noTicketModal .noTicketModal-content .goChargeHome {
  bottom: 101px;
}