/* ---- click button animation ----- */
 #confirmWin {
  transition: transform .1s ease-in-out;
}

#confirmWin:active {
  transform: scale(0.8);
}

#confirmWin::after{
  transform: scale(1);
}

/* -------------------------------- */

 .wthTxtBorder2px {
  text-shadow: 
        -1.5px -1.5px 0px var(--edgeColor),
        -1px -1.5px 0px var(--edgeColor),
        0px -1.5px 0px var(--edgeColor),
        1px -1.5px 0px var(--edgeColor),
        1.5px -1.5px 0px var(--edgeColor),
        1.5px -1px 0px var(--edgeColor),
        1.5px  0px 0px var(--edgeColor),
        1.5px  1px 0px var(--edgeColor),
        1.5px  1.5px 0px var(--edgeColor),
        1px  1.5px 0px var(--edgeColor),
        0px  1.5px 0px var(--edgeColor),
        -1px  1.5px 0px var(--edgeColor),
        -1.5px  1.5px 0px var(--edgeColor),
        -1.5px  1px 0px var(--edgeColor),
        -1.5px  0px 0px var(--edgeColor),
        -1.5px -1px 0px var(--edgeColor)!important;
}

.wthTxtBorder1px {
  text-shadow: 
        -1px -1px 0px var(--edgeColor),
         0px -1px 0px var(--edgeColor),
         1px -1px 0px var(--edgeColor),
         1px  0px 0px var(--edgeColor),
         1px  1px 0px var(--edgeColor),
         0px  1px 0px var(--edgeColor),
        -1px  1px 0px var(--edgeColor),
        -1px  0px 0px var(--edgeColor)!important;
}

 body {
  margin: 0;
 }

img, .redbag .cap {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

 /* --------------------------- */

#valentinesDayEvent {
  position: absolute;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-size: 100% 100%;
  background-position: initial;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

 /* --------------------------- */

.element-con {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.element-con img {
  pointer-events: auto;
  position: absolute;
  width: auto;
}

.element-con img.star { 
  transform: rotate(0deg);
  animation: spin 6s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.element-con img.star1, .element-con img.star4 { height: 10%; }
.element-con img.star2, .element-con img.star3 { height: 9%; }

.element-con img.star1 { top: 8%; left: 12%;}
.element-con img.star2 { bottom: 24%; left: 1%; animation-delay: .2s;}
.element-con img.star3 { top: 23%; right: 5%; animation-delay: .4s;}
.element-con img.star4 { bottom: 36%; right: 13%; animation-delay: .6s;}

#balloonCon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#balloonCon .floating { 
  position: absolute;
  width: 100%;
  height: 100%;
  animation: float linear forwards;
  animation-duration: 9s;
}

@keyframes float {
  from {transform: translateY(100%); }
  to { transform: translateY(-100%); }
}

#balloonCon .floating img {
  height: 40%;
}

#balloonCon .floating img:nth-child(1) {
  top: 27%;
}

#balloonCon .floating img:nth-child(2) {
  top: 0%;
}

/* --------------------------- */
.maincontainer {
  position: relative;
  z-index: 4;
  height: 100%;
  width: 75%;
  display: flex;
  flex-direction: column;
  background-position: bottom;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  align-items: center;
}

.maincontainer::before {
  content: '';
  position: absolute;
  bottom: 14%;
  left: -16%;
  width: 33%;
  height: 100%;
  background-image: url(../images/cupid.png);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}


.maincontainer .title {
  position: relative;
  width: 45%;
  padding-top: 5px;
}

.maincontainer .title::before {
  content: '';
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 74%) scale(2.5);
  width: 100%;
  height: 100%;
  background-image: url(../images/title-bg.png);
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
  z-index: -1;
  pointer-events: none;
}

.maincontainer .title img{
  width: 100%;
}

.maincontainer .title .time-info{
  position: absolute;
  bottom: 5%;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 22px;
  color: #fffae7;
  text-shadow: 2px 2px 4px rgba(79, 16, 41, 0.75);
  font-weight: 600;
}

.game-con {
  margin-top: 5px;
  width: 63%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

/* --volume---------- */
.menuBtn {
  display: flex;
  width: max-content;
  position: absolute;
  bottom: -10%;
  right: -53%;
  flex-direction: row;
  align-items: flex-start;
  z-index: 2;
}

.menuBtn p {
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.menuBtn p img.menuIco {
  padding: 6px;
  height: 50px;
  width: 50px;
  border: 3px solid #fff;
  border-radius: 13px;
}

.menuBtn p #homeBtn {
  background: #e42568;
}

.menuBtn p #musicBtn {
  background: #f11a8e;
}

.menuBtn p #recordBtn {
  background: #ff9600;
}

.menuBtn p span {
  font-size: 21px;
  font-weight: 600;
  color: #e42568;
  position: relative;
  top: 5px;
  text-align: center;
}

p#backgroundMusic.musicMuted::after {
  position: absolute;
  content: '';
  top: 31%;
  left: 50%;
  width: 2px;
  height: 50%;
  color: #ffffff;
  transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
  pointer-events: none;
  background-color: #ffffff;
  border-radius: 5px;
}

.menuBtn p:first-child{
  margin-right: 15px;
}

.menuBtn p:nth-child(2){
  position: relative;
}


/* --------------------------- */
.machine {
  width: 70%;
  height: 53vh;
  background: #3f180f;
  overflow: hidden;
  border-radius: 25px;
  border: 5px solid #8c7833;
  padding: 9px;
}

.machine {
  display: grid;
  grid-template-areas:
      'tile1 tile2 tile3 tile4'
      'tile10 tile11 tile11 tile5'
      'tile9 tile8 tile7 tile6';
  gap: 5px;
}

.tile1 { grid-area: tile1; background:#ffb9ca; }
.tile2 { grid-area: tile2; background:#fd9acf; }
.tile3 { grid-area: tile3; background:#ffb9ca; }
.tile4 { grid-area: tile4; background:#ffc990; }
.tile5 { grid-area: tile5; background:#ffb9ca; }
.tile6 { grid-area: tile6; background:#ffc990; }
.tile7 { grid-area: tile7; background:#ffb9ca; }
.tile8 { grid-area: tile8; background:#fd9acf; }
.tile9 { grid-area: tile9; background:#ffc990; }
.tile10 { grid-area: tile10; background:#fd9acf; }
.tile11 { 
  grid-area: tile11; 
  padding: 5px !important;
}

.machine .tile, .machine .tile11{
  padding: 4px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
  border-radius: 9px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.machine .tile {
  border: 3px solid #fff;
  width: 116px;
}

.machine .tile::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.1);
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.machine .tile.light{
  border: 3px solid rgb(255 0 0 / 70%);
}

.machine .tile.light::after{
  background: rgb(255 0 0 / 70%);
}

.machine .tile img.tileImg {
  width: auto;
  height: 65%;
}

.machine .tile p {
  color: #a21744;
  font-size: 36px;
  font-weight: 700;
  line-height: 0.5;
}

.drawCountsCon {
  height: 100%;
  width: 100%;
  background: linear-gradient(180deg, #85002C 0%, #490D18 100%);
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.4);
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  border-radius: 9px;
  overflow: hidden;
  border: 3px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.numberOfDraws {
  white-space: nowrap;
  text-align: center;
}

.drawCountsCon span {
  color: #ffcc00;
}
/* --------------------------- */

.bonusListCon {
  width: 28%;
  height: 100%;
}

.bonusList-title {
  width: 100%;
  background: #640d4a;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  padding: 7px 10px;
  border-radius: 15px;
  overflow: hidden;
  border: 3.5px solid #a0954a;
  position: relative;
}

.bonusList {
  background: #200603;
  border-bottom-left-radius: 22px;
  border-bottom-right-radius: 22px;
  border: 3.5px solid #a0954a;
  margin-top: -10px;
  overflow: hidden;
  height: 46vh;
}

.bonusList p {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  display: grid;
  grid-template-columns: 1.5fr 2.5fr;
  /* padding: 8px 10px; */
  text-align: center;
  justify-items: center;
  align-items: center;
}

.bonusList p:nth-child(odd) {
  background: #46302d;
}

.bonusList p img {
  height: 52px;
  width: auto;
}
/* --------------------------- */

.button-con {
  margin-top: 18px;
  width: 92%;
  display: flex;
  justify-content: center;
}

.btns {
  cursor: pointer;
  width: 30%;
  height: 111px;
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;
}

.recordBtn { background-image: url(../images/fanti/desktop/recordBtn.png); }
.startBtn { background-image: url(../images/fanti/desktop/startBtn.png); }
.ruleBtn { background-image: url(../images/fanti/desktop/ruleBtn.png); }

.recordBtn.clicked {
  background-image: url(../images/fanti/desktop/recordBtn_click.png);
}

.startBtn.clicked {
  background-image: url(../images/fanti/desktop/startBtn_click.png);
}

.ruleBtn.clicked {
  background-image: url(../images/fanti/desktop/ruleBtn_click.png);
}

/* ---------------------------------------- */

.winningPopUp {
  position: fixed;
  background: rgb(0 0 0 / 80%);
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.winningPopCon {
  position: relative;
  width: max-content;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.winningPopCon::before, .winningPopCon::after{
  content: '';
  position: absolute;
  transform: translate(-0%, -50%);
  height: 26%;
  width: 32%;
  z-index: -1;
  animation: horn 0.3s 6;
}

.winningPopCon::before{
  top: 45%;
  right: 71%;
  background: url(../images/pop/speaker-2.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

.winningPopCon::after{
  top: 45%;
  left: 71%;
  background: url(../images/pop/speaker-1.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@keyframes horn  {
  0%, 100% {
    width: 32%;
  }
  50% {
    width: 29%;
  }
}


.winningPop {
  position: relative;
  width: max-content;
  text-align: center;
}

.winningPop img {
  width: 80%;
  height: auto;
}

p#winningPopTxt {
  width: 100%;
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translate(-50%, -0%);
  font-size: 78px;
  font-weight: 700;
  color: #d01b1b;
  filter: drop-shadow(1px 1px 2px rgba(12, 12, 12, 0.5));
  z-index: 3;
}

.heartCon img.heart {
  position: absolute;
  height: 15%;
  width: auto;
  animation: pump 0.3s infinite;
}

@keyframes pump {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.heartCon .heart1 { top: 29%; left: 14%; }
.heartCon .heart2 { bottom: 34%; left: 24%; }
.heartCon .heart3 { top: 40%; right: 14%; }

#confirmWin {
  position: relative;
  z-index: 2;
  width: 45%;
  height: auto;
  cursor: pointer;
  margin-top: -58px;
}

#confirmWin img{
  width: 100%;
}

#fallingStars {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 51;
  pointer-events: none;
}

.falling-star {
  position: absolute;
  top: -20%;
  width: 100px;
  animation: fall 1s linear, spinStar 3s linear infinite;
  z-index: 51;
}

@keyframes fall { 0% { top: -13%; } 100% { top: 100%; } }
@keyframes spinStar { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.falling-star:nth-child(1){left: 22%;}
.falling-star:nth-child(2){left: 79%;}
.falling-star:nth-child(3){left: 5%;}
.falling-star:nth-child(4){left: 69%;}
.falling-star:nth-child(5){left: 27%;}
.falling-star:nth-child(6){left: 0%;}
.falling-star:nth-child(7){left: 74%;}
.falling-star:nth-child(8){left: 84%;}
.falling-star:nth-child(9){left: 94%;}
.falling-star:nth-child(10){left: 14%;}
.falling-star:nth-child(11){left: 18%;}
.falling-star:nth-child(12){left: 10%;}
.falling-star:nth-child(13){left: 90%;}
.falling-star:nth-child(14){left: 65%;}
.falling-star:nth-child(15){left: 0%;}

/* winning pop up animation */
.winningPopCon { transform: scale(0); }

#winningPopUp.openPopUp .winningPopCon { 
  animation: openWinPopUp 0.3s linear forwards; 
}

@keyframes openWinPopUp { from { transform: scale(0); } to { transform: scale(1); } }

span.closePopUp {
  position: absolute;
  top: 0%;
  right: 0%;
  height: 45px;
  width: 45px;
  border: 3px solid #fff;
  border-radius: 100%;
  overflow: hidden;
  cursor: pointer;
  transform: scale(1.2);
  z-index: 3;
}

span.closePopUp::after,
span.closePopUp::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  height: 50%;
  width: 2px;
  background: #fff;
}

span.closePopUp::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

span.closePopUp::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* --- activity rules pop up --- */
.activityRulesPopUp {
  position: fixed;
  background: rgb(0 0 0 / 65%);
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.activityRulesPopCon {
  position: relative;
  height: 69%;
  width: 50%;
  background: linear-gradient(180deg, #F5EDED 0%, #FEB0AB 100%);
  padding: 50px 10px 33px 10px;
  border: 5px solid #ffffff;
  border-radius: 30px;
}

img.activityRulesLabel {
  position: absolute;
  top: -7%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 35%;
}

.activityRulesPopCon .content {
  color: #000;
  /* text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); */
  font-size: 18px;
  font-weight: 400;
  height: 99%;
  overflow: auto;
  direction: rtl;
  padding: 0px 70px 0px 35px;
}

.activityRulesPopCon .content::-webkit-scrollbar {
  width: 7px;
}
 
.activityRulesPopCon .content::-webkit-scrollbar-thumb {
  background: #fff; 
  border-radius: 10px;
}

.activityRulesPopCon .content p{
  direction: ltr;
}

.activityRulesPopUp span.closePopUp {
  top: -14%;
  right: -7%;
}

/* --------------------------------------------------------- */
#recordConPopUp {
  background: hsl(0deg 0% 0% / 80%);
  z-index: 999;
  display: none;
}

#recordConPopUp,
.recordContainer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#recordConPopUp,
.recordContainer-overlay {
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.recordContainer-Overlay {
  display: flex;
  position: relative;
  /* background: linear-gradient(180deg, #FFFFFF 0%, #B62923 100%); */
  background: #ffffff;
  width: 25%;
  height: 50%;
  border-radius: 35px;
  padding: 3px;
}

.recordContainer-Overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 35px;
  border: solid 2px #ffae00;
  transform: scale(1.07);
  z-index: -1;
}

#recordContainer-Inner {
  width: 100%;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  padding: 25px 30px 30px 30px;
  background: linear-gradient(180deg, #f5eded 0%, #feb0ab 100%);
}

img.recordPop {
  width: 55%;
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translate(-50%, 0%);
}

#recordConPopUp span.closePopUp {
  top: -55px;
  right: -55px;
}

#recordConPopUp thead, #recordConPopUp tbody, 
#recordConPopUp th, #recordConPopUp td { 
  display: block;
  text-align: center; 
}

#recordConPopUp tr{ 
  display: flex; 
}

table#recordInfo{
  width: 100%;
  height: 100%;
}

.recordInfo-head th{
  background: #a81717;
  color: #ffffff;
  text-align: center;
  padding: 5px 15px;
}

.recordInfo-head th:first-child, .recordInfo-body  td:first-child{ width: 60%!important; }
.recordInfo-head th:last-child, .recordInfo-body  td:last-child{ width: 40%!important; }

.recordInfo-head th:first-child, .recordInfo-body  td:first-child,
.recordInfo-head th:last-child, .recordInfo-body  td:last-child{ 
  word-break: break-all; 
}

.recordInfo-body  td:last-child{ text-align: center; }

.recordInfo-body {
  height: calc(100% - 35px);
  overflow: auto;
  margin-top: 5px;
}

.recordInfo-body::-webkit-scrollbar {
  width: 3px;
}
 
.recordInfo-body::-webkit-scrollbar-thumb {
  background: #c4c2c5; 
}

.recordInfo-body::-webkit-scrollbar-track {
  padding: 5px;
}

.recordInfo-body td {
  padding: 3px 15px;
  color: #484848;
  text-align: left;
  word-wrap: break-word;
}

.recordInfo-body tr:nth-child(even) {
  background-color: rgb(255 255 255 / 48%);
}

h4.noRecordSpan {
  text-align: center;
  font-weight: 600;
}

/* --------------------------------------------------------- */
#notLoginPopUp, #noDrawsPopUp {
  background: hsl(0deg 0% 0% / 80%);
  z-index: 999;
  display: none;
}

#notLoginPopUp, #noDrawsPopUp,
.notLogin-overlay, .noDraws-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#notLoginPopUp, #noDrawsPopUp,
.notLogin-overlay, .noDraws-overlay {
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.notLogin-overlay, .noDraws-overlay {
  display: flex;
  position: relative;
  /* background: linear-gradient(180deg, #FFFFFF 0%, #B62923 100%); */
  background: #ffffff;
  width: 25%;
  height: 30%;
  border-radius: 35px;
  padding: 3px;
}

.notLogin-overlay::before, .noDraws-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 35px;
  border: solid 2px #ffae00;
  transform: scale(1.07);
  z-index: -1;
}

#notLogin-Inner, #noDraws-Inner {
  width: 100%;
  height: 100%;
  border-radius: 35px;
  overflow: hidden;
  padding: 25px 30px 30px 30px;
  background: linear-gradient(180deg, #f5eded 0%, #feb0ab 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

#noDrawsPopUp span.closePopUp,
#notLoginPopUp span.closePopUp {
  top: -55px;
  right: -55px;
}

h4.noRecordSpan {
  text-align: center;
  font-weight: 600;
}

/* ------------------------------------------- */

/* ---------------------------------------------------------------- */
@media screen and (min-width: 1601px)  and (max-width: 1980px){
  .maincontainer .title .time-info {  font-size: 27px; }
  .machine { height: 53vh; }
  .machine .tile p { font-size: 44px; }
  .bonusList-title { font-size: 27px; }
  .bonusList p { font-size: 30px; }
  .recordInfo-head th { font-size: 18px; }
  .recordInfo-body td { font-size: 16px; }

  .machine .tile {
    width: 148px;
    padding: 20px;
  }
  .machine .tile, .machine .tile11 { justify-content: end; }
  .machine .tile img.tileImg { height: 100%; }
  .bonusList { height: 48vh; }
  .bonusList p img { height: 71px; }
  .btns { height: 138px; }

  .button-con { margin-top: 44px; }

  @keyframes openWinPopUp { from { transform: scale(0); } to { transform: scale(1.2); } }

  #recordContainer-Inner { padding: 46px 30px 30px 30px; }
}

@media screen and (min-width: 1537px)  and (max-width: 1600px){
  .machine .tile {
    width: 121px;
    padding: 7px;
  }

  .bonusList p img { height: 44px; }

  .drawCountsCon { font-size: 23px; }
}
.drawCountsCon {
  font-size: 22px;
}


@media screen and (max-width: 1440px){
  .maincontainer { width: 80%; }

  .machine .tile{ padding: 8px; }

  .bonusList p img { height: 44px; }

  img.recordPop { top: -44px; }

  .recordContainer-Overlay {  width: 29%; }
}

@media screen and (max-height: 634px) and (max-width: 1366px){
  .maincontainer { width: 75%; }

  .maincontainer .title .time-info { font-size: 21px; }
  .activityRulesPopCon .content { font-size: 16px; }
  .drawCountsCon,.machine .tile p{ font-size: 27px; }
  .bonusList-title, .bonusList p { font-size: 21px; }

  .machine .tile {
    width: 102px;
    height: 100px;
    padding: 0px;
  } 

  /* .machine .tile img.tileImg { height: 42%; } */
  .bonusList p img { height: 35px; }
  .btns { height: 92px; }

  /* .bonusList p { padding: 10px 11px; } */

  .falling-star { top: -20%; }
  @keyframes fall { 0% { top: -20%; } 100% { top: 100%; } }
}

@media screen and (max-width: 1344px){
  .machine .tile {
    width: 108px;
    padding: 4px;
  }

  .machine .tile p { font-size: 27px; }
  .maincontainer .title .time-info, .bonusList-title, .bonusList p { font-size: 21px; }
  .recordInfo-head th { font-size: 16px; }
  .activityRulesPopCon .content, .recordInfo-body td { font-size: 14px; }

  .bonusList p img { height: 43px; }
  .btns { height: 99px; }
  /* .machine .tile img.tileImg { height: 44%; } */

  img.recordPop { top: -35px; }

  .falling-star { top: -20%; }
  @keyframes fall { 0% { top: -20%; } 100% { top: 100%; } }
}

@media screen and (max-width: 1280px){
  .machine .tile {
    width: 95px;
    padding: 0px;
    height: 88px;
  }

  .machine .tile img.tileImg { height: 40%; }
  .bonusList p img { height: 34px; }

  .maincontainer .title .time-info, .bonusList-title, .bonusList p { font-size: 18px; }
  .machine .tile p { font-size: 31px; }
}

@media screen and (min-height: 825px) and (max-width: 1280px){
  .maincontainer { width: 87%; } 

  .machine .tile {
    width: 112px;
    height: 144px;
  }

  .maincontainer .title .time-info, .bonusList-title, .bonusList p { font-size: 22px; }

  .bonusList p img { height: 46px; }
  .btns { height: 106px; }

  .button-con { margin-top: 32px; } 
}

@media screen and (max-width: 1152px){
  .maincontainer { width: 87%; } 
  .recordContainer-Overlay { width: 33%; }

  .machine .tile {
    width: 100px;
    height: 125px;
  }

  .maincontainer .title .time-info, .bonusList-title, .bonusList p { font-size: 18px; }

  .bonusList p img { height: 45px; }
  .btns { height: 90px; }

  .button-con { margin-top: 32px; } 
}

@media screen and (max-width: 1120px){
  .machine .tile {
    width: 97px;
    height: 120px;
  }

  .bonusList p img { height: 41px; }
}

@media screen and (max-width: 1024px){
  .machine .tile {
    width: 87px;
    height: 120px;
  }

  .btns {
    height: 85px;
    width: 31%;
  }

  .button-con { margin-top: 27px; } 
}

@media screen and (min-height: 633px)  and (max-width: 1024px){
  .machine .tile { height: 105px; }
  .bonusList p img { height: 38px; }
}

/* 文字放大120% */
@media screen and (min-width: 1610px) and (max-width: 1680px) {
  .machine .tile {
    width: 124px;
    padding: 20px;
  }

  .machine,.bonusListCon {
    height: 53vh;
  }

  .bonusList-title {
    padding: 0px 10px;
    font-size: 24px;
  }

  .bonusList p img {
    height: 57px;
  }

  .bonusList p {
    font-size: 28px;
  }
  
  .maincontainer .title .time-info {
    font-size: 22px;
  }

  .btns {
    height: 110px;
  }

  .button-con {
    margin-top: 37px;
  }
  .drawCountsCon {
    font-size: 22px;
  }
}

@media screen and (min-width: 1290px) and (max-width: 1360px) {
  .maincontainer .title .time-info {
    font-size: 19px;
  }
  .machine .tile {
    width: 96px;
    padding: 4px;
    height: 88px;
  }
  .machine {
    height: 53vh;
  }
  /* .bonusList p {
    padding: 5px 11px;
  } */
  .button-con {
    margin-top: 0;
  }
}
@media only screen and (min-width: 2500px) and (max-width: 2620px) {
  /* 針對接近 2560x1440 的解析度套用的樣式 */
  .maincontainer .title .time-info { 
    bottom: 6%;
    font-size: 32px;
  }
  .machine .tile {  
    width: 201px;
  }
  .bonusList p img {
    height: 96px;    
  }
  .bonusList p {
    font-size: 49px;
    }
    .button-con {
      margin-top: 103px;
  }
  .btns {
    height: 165px;
    }
    .machine .tile p {
      font-size: 50px;
    }
}