/*切換PC置頂選單*/
.cantantBase1{ display: block; }
.cantantBase2{ display: none; }
/*活動提醒按鈕*/
@media screen and (max-width: 767px){
.btn_alert {position: absolute;top: 19vw;right: -1vw;width: 19%;z-index: 99;}
}

/* 各頁面CSS */
@media screen and (min-width: 768px) {
  .Awards .PD3,
  .Awards .PD2,
  .Awards .PD1 {
    padding: 0;
    margin: 0;
  }
  .Awards {
    position: relative;
    width: 960px;
    height: auto;
    font-family: "Century Gothic", "Microsoft JhengHei", "微軟正黑體", Arial,
      sans-serif;
  }
  .Awards ul {
    list-style: none;
    margin-top: 35px;
  }
  .Awards h3 {
    color: #000;
    font-size: 34px;
    margin: 0;
  }
  .Awards b {
    font-size: 20px;
  }
  .Awards .money .tickets {
    width: 70%;
    height: 170px;
    padding: 10% 0 0 0;
    margin: 0% auto;
    background: url(money.png?t=1755754507849) center 55%/100% no-repeat scroll;
  }
  .Awards .coupon .tickets {
    width: 70%;
    height: 170px;
    padding: 10% 0 0 0;
    margin: 0% auto;
    background: url(coupon.png?t=1755754507849) center 60%/100% no-repeat scroll;
  }
  .Awards .coupon .tickets h4 {
    font-size: 26px;
    transform: rotate(-5deg);
    color: #d7006e;
  }
  .Awards .pd_bg {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
  }
  .Awards .tickets h4 {
    font-size: 26px;
    transform: rotate(-5deg);
    color: #ff8600;
  }
  .Awards .deco::before {
    content: "";
    position: absolute;
    margin: 4% 11%;
    width: 100%;
    height: 200px;
    background: url(coin.png?t=1755754507849) no-repeat;
    z-index: 2;
    pointer-events: none !important;
  }
  .Awards .PD1 ul {
    display: grid;
    grid-template-columns: repeat(1, auto);
  }
  .Awards .PD1 h4 {
    margin: 2% 45%;
  }
  .Awards .PD1 h4 > span {
    font-size: 60px;
  }
  .Awards .PD1 .tickets {
    width: 40% !important;
  }
  .Awards .PD2 ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 12px;
  }
  .Awards .PD2 h4 {
    margin: 9% 50%;
  }
  .Awards .PD2 h4 > span {
    font-size: 62px;
  }
  .Awards .PD2 .txt {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 0%;
  }
  .Awards .PD3 ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 12px;
  }
  .Awards .PD3 h4 {
    margin: 20% 52%;
  }
  .Awards .PD3 h4 > span {
    font-size: 48px;
  }
  .Awards .PD3 .txt {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 15%;
    justify-content: center;
    margin-left: 30px;
  }
}
@media screen and (max-width: 767px) {
  .Awards .PD3 ul,
  .Awards .PD2 ul,
  .Awards ul {
    padding: 0;
    margin: 5% auto 0.5%;
  }
  .Awards {
    position: relative;
    width: 95%;
    height: auto;
    font-family: "Century Gothic", "Microsoft JhengHei", "微軟正黑體", Arial,
      sans-serif;
  }
  .Awards ul {
    list-style: none;
  }
  .Awards h3 {
    color: #61450d;
    font-size: 5vw;
    margin: 0;
  }
  .Awards b {
    font-size: 3vw;
  }
  .Awards .money .tickets {
    width: 70%;
    height: 20vw;
    padding: 10% 0 0 0;
    margin: 0% auto;
    background: url(money.png?t=1755754507849) center 55%/100% no-repeat scroll;
  }
  .Awards .money .tickets h4 {
    font-size: 4vw;
    transform: rotate(-5deg);
    color: #ff8600;
  }
  .Awards .coupon .tickets {
    width: 70%;
    height: 20vw;
    padding: 10% 0 0 0;
    margin: 0% auto;
    background: url(coupon.png?t=1755754507849) center 60%/100% no-repeat scroll;
  }
  .Awards .coupon h4 {
    font-size: 4vw;
    transform: rotate(-5deg);
    color: #d7006e;
  }
  .Awards .pd_bg {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 15px;
  }
  .Awards .deco::before {
    content: "";
    position: absolute;
    margin: 5% 4% 0;
    width: 100%;
    height: 40vw;
    background: url(coin.png?t=1755754507849) no-repeat;
    z-index: 2;
    pointer-events: none;
    background-size: 90%;
  }
  .Awards .PD1 ul {
    display: grid;
    grid-template-columns: repeat(1, auto);
  }
  .Awards .PD1 h4 {
    margin: 3% 48%;
  }
  .Awards .PD1 h4 > span {
    font-size: 8vw;
  }
  .Awards .PD1 .tickets {
    width: 45% !important;
  }
  .Awards .PD2 ul {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 2%;
  }
  .Awards .PD2 h4 {
    margin: 13% 46%;
  }
  .Awards .PD2 h4 > span {
    font-size: 6.5vw;
  }
  .Awards .PD2 .txt {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-gap: 0;
  }
  .Awards .PD3 ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 2%;
  }
  .Awards .PD3 h4 {
    margin: 28% 50%;
  }
  .Awards .PD3 h4 > span {
    font-size: 5vw;
  }
  .Awards .PD3 .txt {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 2%;
  }
} /*# sourceMappingURL=main_layout.min.css.map */

.box_game .box_film img {
  width: 87%;
  border-radius: 20px;
}
@media screen and (max-width: 767px) {
  .box_game .box_film {
    position: relative;
  }
  .box_game .box_film img {
    width: 85%;
    border-radius: 8px;
  }
}

.btn_alert_game{
  left: -2vw;
  top: 3vw;
  .game_remind{
    --remind-bg:#0033b7;

  }
}

.box_game {
  position: relative;
}

.award {
  position: relative;
  margin: 0 auto;
  padding: 0px 0 166px 0;
  width: 836px;
}
.award .btn_momocoin {
  position: absolute;
  bottom: 530px;
  left: 226px;
}
.award .btn_coupon {
  position: absolute;
  bottom: 40px;
  left: 215px;
}
.award img {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .award {
    position: relative;
    padding: 3% 0 18% 0;
    width: 96%;
  }
  .award .btn_momocoin {
    position: absolute;
    bottom: 59vw;
    left: 22vw;
    width: 51%;
  }
  .award .btn_coupon {
    position: absolute;
    bottom: 3vw;
    left: 21vw;
    width: 54%;
  }
}

/*提醒我按鈕*/
a.mo_remind_btn {
  z-index: 10;
  position: absolute;
  right: 0;
  top: 51vw;
  width: 17%;
}

.Area_GameStyle .TXT2 {
  /*font-size: 1.8rem !important;*/
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  color: #fff;
}

/* --------------------------------------
 * page 頁面-整點搶mo幣遊戲區
 * -------------------------------------- */
.Area_game1 .Area_boxstyle_box3 {
  background: none;
}
.Area_game1 .go_bt:hover {
  transform: translateY(6px);
}
.Area_game1 .box_1 {
  margin: 0 auto;
  width: 90%;
}
.Area_game1 .box_game {
  z-index: 2;
  position: relative;
}
.Area_game1 .box_game .box_game_scratch ,
.Area_game1 .box_game .box_game_loading ,
/*.Area_game1 .box_game .box_game_ans     { background-color:#ffa62a; }修掉白角*/
.Area_game1 .box_game .game_in_box {
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: auto;
}
.Area_game1 .box_game .game_in_box img,
.Area_game1 .box_game .game_in_box video {
  width: 100%;
  height: auto;
  display: block;
}
.Area_game1 .box_game .game_in_box .A {
  position: absolute;
  top: 8.2%;
  left: 11%;
  width: 78%;
}
.Area_game1 .box_game .btn_style {
  position: absolute;
  top: 69.7%;
  display: flex;
  flex-wrap: nowrap;
  gap: 4%;
  justify-content: center;
  width: 100%;
}
.Area_game1 .box_game .btn_style img {
  width: 100%;
  height: auto;
}
.Area_game1 .box_game .txt_time_now {
  z-index: 1;
  font-size: 42px;
  line-height: 1.8;
  font-weight: 900;
  color: #fff;
  font-family: "Century Gothic", "Microsoft JhengHei";
  text-align: center;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
}
.Area_game1 .earn {
  /*color: #000; border-radius: 0.8rem; overflow: hidden; padding-block: 3.5rem;*/
  width: 37%;
  top: 29%;
  position: absolute;
  z-index: 1;
  left: 31.5%;
  background: none;
}
.Area_game1 .box_game .btn01 {
  width: 37%;
}
.Area_game1 .box_game2 {
  position: relative;
}
.Area_game1 .box_game2::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 88%;
  left: 18%;
  width: 64%;
  height: 75%;
  background: url(game_note.png?t=1755754507850) top center no-repeat;
  background-size: 100%;
  animation: uptodown-play 2s ease-in-out infinite alternate;
}

/* 遊戲步驟說明 */
.game-step{
  margin: 0 auto;
  width: 100%;
  background: #fc8124;
  border-radius: 3em;
  @media screen and (max-width: 767px){
    border-radius: 5vw;
    width: 98%;
  }
  h3{
    padding: 1.8rem 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffeb;
    background: url(Area_boxstyle_top_hasbg.png?t=1755754507850) top center no-repeat;
    background-size: 100%;
    @media screen and (max-width: 767px){
      padding: 2vw 0;
    }
  }
  /* h3::after,h3::before{
    content: "";
    background: url("data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAQAAAACNCElAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfpBAEOLhXc5+GCAAABAElEQVRIx82WO67CMBBFjxFNqFIkkejpKEj9FsNSWAJLoGAx7ICOHilQuILy0jxEhBAzwLzPteTq+mjsmbGdhEMlkG3bwMPy6g9gBYXHNnTBRr7IfLAyEtZEwsaRsEkkbOqDJUcHJDqgwbR66mxGRcXMNnpg8978XLJGrSxJyqotrw1b66r1p7CF+lq8D6t7Ud2iq1+FJbVafp/VvbKWapUerUsqASgYUdIwZsKULyojb0c2bNmxpyNz4uwtDb8it/kLCfiB0ggv2pfayc7mgRUAKw6fNzpqJUmt7Qy9HD3XttiAjfK+AVuXywnbRcL2kbAuEpYjYadI2NkH+7/f0AsJ+xFGwTFNIAAAAABJRU5ErkJggg==") no-repeat;
    width: 40px;
    height: 40px;
    display: block;
  } */
  .step-content{
    background: #fff;
    border: 7px solid #fc8124;
    border-top: none;
    border-radius: 0 0 3em 3em;
    padding: 40px 44px;
    @media screen and (max-width: 767px){
      padding: 3.8vw 4vw;
      border-radius: 0 0 4.8vw 4.8vw;
    }
    .content-item{
      display: flex;
      align-items: center;
      gap: 28px;
      color: #000;
      margin-bottom: 20px;
      border: 3px solid #9e9e9e;
      padding: 16px 32px 16px 0;
      border-radius: 28px;
      @media screen and (max-width: 767px){
        gap: 2.9vw;
        padding: 2vw 4vw 2vw 0;
        border-radius: 3vw;
      }
      img{
        width: 100%;
        height: 100%;
        flex: 1;
        @media screen and (max-width: 767px){
          width: 25%;
        }
      }
      h4{
        text-align: left;
        flex: 11;
        @media screen and (max-width: 767px){
          font-size: 4.2vw;
        }
      }
    }
    /* 階段數字 */
    .content-item::before{
      content: "";
      color: #fff;
      font-size: 2.5rem;
      font-weight: 900;
      position: relative;
      left: 0;
      background: #9e9e9e;
      width: 20px;
      height: auto;
      padding: 8px 16px 8px 4px;
      border-radius: 0 100rem 100rem 0;
      @media screen and (max-width: 767px){
        font-size: 1.5rem;
        padding: 1vw 1.5vw 1vw .5vw;
      }
    }
    .content-item:nth-child(1)::before{
      content: "1";
    }
    .content-item:nth-child(2)::before{
      content: "2";
    }
    .content-item:nth-child(3)::before{
      content: "3";
    }
    .content-item:nth-child(4)::before{
      content: "4";
    }
    .content-item:last-child{
      margin: 0;
    }
  }

}
/*範例表格*/
.table_inBox {
  margin: 1% auto 4%;
  font-size: 0.65em;
  line-height: 1.1;
  text-align: center;
  border-radius: 0.8em;
  overflow: hidden;
  border: 2px #fff solid;
}
.table_inBox tr {
  border: 1px currentcolor solid;
  text-align: center;
}
.table_inBox tr:last-child td:first-child {
    border-radius: 0 0 0 .75em;
  }
  .table_inBox tr:last-child td:last-child {
    border-radius: 0 0 .75em 0;
  }
.table_inBox th {
  padding: 0.5em 0.25em;
  background-color: #6d4436;
  color: #fff;
  border-left: dashed 1px rgba(255, 255, 255, 0.3);
}
.table_inBox th:first-child {
  border-left: none;
}
.table_inBox td {
  border: 1px currentcolor solid;
  padding: 0.5em 0.25em;
  background-color: #fff;
  color: #6d4436;
}
.table_inBox tr:nth-child(odd) td {
  background-color: #eee;
}
.table_inBox tr td.none {
  background-color: #6d4436;
}

@media screen and (min-width: 768px) {
  .Area_grabmoney_coupon img {
    width: 100%;
    height: auto;
  }

  .Area_grabmoney_coupon .Area_boxstyle_title {
    inset-block-start: 50px;
  }

  .Area_grabmoney_coupon .Area_grid_3bn_PC .grid-slide {
    margin: 0.5%;
    width: 32.3%;
    border-radius: 20px;
    overflow: hidden;
  }
  .agreeArea .box table {
    width: 100%;
    margin: 1% 0;
  }
}
@media screen and (max-width: 767px) {
  .Area_game1 .box_1 {
    width: 96%;
  }
  .Area_grabmoney_coupon .Area_grid {
    width: 97%;
  }
  .Area_grabmoney_coupon .Area_grid_3bn_Phone .grid-slide {
    border-radius: 0.5em;
    overflow: hidden;
  }
  .agreeArea .box table {
    width: 100%;
    margin: 1% 0;
  }
  .agreeArea .box th {
    padding: 15px;
  }
}

/*飄-上下*/
.uptodown-play {
  -webkit-animation: uptodown-play 2s ease-in-out infinite alternate;
  animation: uptodown-play 2s ease-in-out infinite alternate;
}
@-webkit-keyframes uptodown-play {
  0% {
    -webkit-transform: translate(0, 10px);
  }
  100% {
    -webkit-transform: translate(0, 0);
  }
}
@keyframes uptodown-play {
  0% {
    transform: translate(0, -10px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/*版頭*/
.Area_top {
  position: relative; /*z-index: 3;*/
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .Area_top .box {
    position: relative;
    height: 100px;
    z-index: 2;
    left: -610px;
  }
  .Area_top .box .box_title {
    position: absolute;
    top: 0;
    left: -390px;
  }
  /*.Area_top .box .box_subtitle { position: absolute; top: 412px; left: 50%; transform: translateX(-52.5%);}*/
  .Area_top .box .box_deco {
    position: absolute;
    top: 115px;
    left: 55px;
  }
  .Area_top .box .box_deco .momoco {
    position: absolute;
    top: 0;
    left: 0;
  }
  .Area_top .box .box_deco .heart {
    position: absolute;
    top: 0;
    left: 0;
  }
  .Area_top .box .box_deco .arrow {
    position: absolute;
    top: 226px;
    left: -15px;
  }
  .Area_top .box .moneyR {
    position: absolute;
    top: 179px;
    left: 1157px;
  }
  .Area_top .box .moneyL {
    position: absolute;
    top: 246px;
    left: -134px;
  }
  .Area_top .btn_more {
    right: 10px;
  }
}

@media screen and (max-width: 767px) {
  .Area_top .box .box_title {
    position: absolute;
    width: 100%;
    pointer-events: none;
  }
  /*.Area_top .box .box_subtitle { position: absolute; top: 39vw; left: 50%; transform: translateX(-50%); }*/
  .Area_top .box .box_deco {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
  }
  .Area_top .box .momoco {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .Area_top .box .heart {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  .Area_top .box .money {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
  /*      .Area_top .btn_more { top: 4vw; right: 1.5%;  width: 15vw;}*/
}

.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD .PD_btn {
  background: #fc8124;
}

/*版頭背景*/
.Area_bgtop {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 50%;
  width: 2000px;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}
.Area_bgtop .bgtop_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1000px;
}
.Area_bgtop .bgtop_ span {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  background-position: center top;
}
@media screen and (min-width: 768px) {
  .Area_bgtop span {
    background-repeat: no-repeat;
  }
  .Area_bgtop_fixed {
    position: fixed;
  }
  .Area_bgtop_1 .bgtop_1_2 {
    mix-blend-mode: hard-light;
  }
  .Area_bgtop_1 .bgtop_1_2 span {
    background-image: url(bgtop.png?t=1755754507850);
    height: 1200px;
  }
}

.m_Area_bgtop {
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.m_Area_bgtop .m_bgtop_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}
.m_Area_bgtop .m_bgtop_ span {
  position: absolute;
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  background-position: center top;
  background-size: 100%;
}
@media screen and (max-width: 767px) {
  .m_Area_bgtop span {
    background-repeat: no-repeat;
  }
  .m_Area_bgtop_fixed {
    position: fixed;
    top: 0px;
  } /*搭配js-appBgFixed*/
  .m_Area_bgtop_1 .m_bgtop_1_1 span {
    z-index: -3;
    position: absolute;
    top: 11vw;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(bgtop_mb.png?t=1755754507850) center top no-repeat;
    background-size: 100%;
  }
}

/* 詳情表格 */
.agree-table{
  tr, th, td{
    vertical-align: middle !important;
    text-align: center;
  }
  th:first-child{
    border-radius:.75em 0 0 0 ;
  }
  th:last-child{
    border-radius: 0 .75em 0 0;
  }
  tr:last-child{
    td:first-child{
      border-radius: 0 0 0 .75em;
    }
    td:last-child{
      border-radius: 0 0 .75em 0;
    }
  }
  tr:nth-child(odd){
    td{
      background: #f7f7f7;
    }
  }
  td.table-empty{
    background: #ccc;
    color: #ccc;
  }
}