@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html * {
  font-family: "Microsoft JhengHei";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-size: 100%;
  background-color: #ddaa44;
  color: #373737;
  font-size: 18px;
  font-weight: bold;
}

* {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-decoration: none;
}

.wrap {
  width: 100%;
  min-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 734px;
  background: url(../images/header.jpg) no-repeat center top;
}

.logo {
  position: absolute;
  display: block;
  width: 166px;
  height: 139px;
  background: url("../images/logo.png") no-repeat;
  left: 20px;
  top: 10px;
  z-index: 100;
}

.social-btns {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 0 0 0 20px;
  border: 5px solid #ce8a21;
  padding: 10px 10px 15px 15px;
  z-index: 100;
  top: -5px;
  right: -5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
.social-btns a {
  display: block;
  width: 57px;
  height: 57px;
}
.social-btns a.mem_btn {
  background: url("../images/mem_btn.png") center no-repeat;
}
.social-btns a.home_btn {
  background: url("../images/home_btn.png") center no-repeat;
}
.social-btns a.fb_btn {
  background: url("../images/fb_btn.png") center no-repeat;
}

.container {
  width: 100%;
  height: auto;
}

.footer {
  width: 100%;
  height: 130px;
  background: #2d2108;
  color: #7a5f27;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.sec1 {
  width: 100%;
  height: auto;
  background: url("../images/sec1_bg.jpg") repeat-y center bottom;
}

.sec1-card1 {
  position: absolute;
  width: 203px;
  height: 270px;
  top: 50px;
  left: -235px;
  background: url("../images/sec1_card1.png") repeat-y center bottom;
}

.sec1-card2 {
  position: absolute;
  width: 296px;
  height: 196px;
  top: 820px;
  right: -205px;
  background: url("../images/sec1_card2.png") repeat-y center bottom;
}

.sec1-card3 {
  position: absolute;
  width: 246px;
  height: 165px;
  bottom: -730px;
  left: -215px;
  background: url("../images/sec1_card3.png") repeat-y center bottom;
}

.sec2-card1 {
  position: absolute;
  width: 304px;
  height: 153px;
  top: 50px;
  right: -235px;
  background: url("../images/sec2_card1.png") repeat-y center bottom;
}

.sec2-card2 {
  position: absolute;
  width: 198px;
  height: 200px;
  top: 920px;
  left: -235px;
  background: url("../images/sec2_card2.png") repeat-y center bottom;
}

.sec2-line {
  width: 100%;
  height: 79px;
  background: url("../images/sec2_line.jpg") no-repeat center;
}

.sec2 {
  width: 100%;
  height: auto;
  background: url("../images/sec2_bg.jpg") repeat-y center bottom;
}

.sec3-line {
  width: 100%;
  height: 61px;
  background: url("../images/sec3_line.jpg") no-repeat center;
}

.sec3 {
  width: 100%;
  height: auto;
  padding-bottom: 50px;
  background: url("../images/sec1_bg.jpg") repeat-y center bottom;
}

.title1 {
  width: 304px;
  height: 74px;
  margin: 0 auto;
}
.title1 img {
  max-width: 100%;
}

.title2 {
  width: 360px;
  height: 76px;
  margin: 40px auto;
  z-index: 10;
}
.title2 img {
  max-width: 100%;
}

.title3 {
  width: 302px;
  height: 75px;
  margin: 0 auto;
}
.title3 img {
  max-width: 100%;
}

.sec1-content {
  padding-top: 20px;
}

.sec1-time {
  width: 500px;
  height: 58px;
  margin: 10px auto;
  background: url("../images/activity time.png") no-repeat center;
}

.sec1-cont-box {
  width: 1211px;
  height: 614px;
  margin: 10px auto;
  background: url("../images/sec1_cont_box.png") no-repeat center;
}

.sec1-pic {
  position: absolute;
  top: 82px;
  right: 173px;
  width: 209px;
  height: 251px;
  background: url("../images/card1000.png") no-repeat center;
}

.sec1-info1 {
  position: absolute;
  width: 716px;
  height: 124px;
  top: 78px;
  left: 117px;
  color: #333333;
  line-height: 28px;
}

.red {
  color: #c84f3f;
}

.sec1-info2 {
  position: absolute;
  top: 211px;
  left: 118px;
}

.sec1-subtitle {
  width: 168px;
  height: 35px;
  border: 2px dashed #9d671c;
  color: #9d671c;
  border-radius: 30px;
  text-align: center;
  line-height: 35px;
  margin-bottom: 10px;
}

.link-btn {
  display: inline-block;
  width: 177px;
  height: 33px;
  line-height: 33px;
  background: #3fabff;
  color: #fff;
  border-radius: 30px;
  text-align: center;
  margin-top: 8px;
}
.link-btn:before {
  content: "";
  position: absolute;
  top: 12px;
  right: -7px;
  width: 29px;
  height: 28px;
  background: url("../images/hand.png") no-repeat center;
}

.sec1-info3 {
  position: absolute;
  top: 371px;
  left: 86px;
}
.sec1-info3 ul {
  line-height: 1.5;
  list-style-type: none;
}
.sec1-info3 ul > li {
  margin-left: 1em;
  margin-bottom: 5px;
  color: #a53122;
}

.sec1-cont-box2 .inner {
  width: 1280px;
  height: 780px;
  margin: 0 auto;
}

.lottery-info {
  position: absolute;
  top: 186px;
  left: 58px;
  width: 493px;
  height: 399px;
  z-index: 10;
  padding: 80px 50px 50px 50px;
  background: url("../images/lottery_bg.png") no-repeat center;
}

.inner {
  width: 1280px;
  height: auto;
  margin: 0 auto;
}

.lottery {
  position: absolute;
  top: 73px;
  right: -60px;
  width: 831px;
  height: 700px;
}

.lottery-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 831px;
  height: 627px;
  background: url("../images/prize_light.png") no-repeat center;
}

.lottery-box {
  position: absolute;
  top: 45px;
  left: 75px;
  width: 590px;
  height: 651px;
  background: url("../images/prize_box.png") no-repeat center;
  -webkit-animation: shake 3s ease-in-out infinite;
          animation: shake 3s ease-in-out infinite;
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  75% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  25% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  50% {
    -webkit-transform: translateY(5px);
            transform: translateY(5px);
  }
  75% {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes intense-shake {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  }
  20% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  30% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  }
  50% {
    -webkit-transform: translate(-5px, 0px);
            transform: translate(-5px, 0px);
  }
  60% {
    -webkit-transform: translate(5px, 0px);
            transform: translate(5px, 0px);
  }
  70% {
    -webkit-transform: translate(0px, -5px);
            transform: translate(0px, -5px);
  }
  80% {
    -webkit-transform: translate(0px, 5px);
            transform: translate(0px, 5px);
  }
  90% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
@keyframes intense-shake {
  0% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
  10% {
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  }
  20% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  30% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  }
  50% {
    -webkit-transform: translate(-5px, 0px);
            transform: translate(-5px, 0px);
  }
  60% {
    -webkit-transform: translate(5px, 0px);
            transform: translate(5px, 0px);
  }
  70% {
    -webkit-transform: translate(0px, -5px);
            transform: translate(0px, -5px);
  }
  80% {
    -webkit-transform: translate(0px, 5px);
            transform: translate(0px, 5px);
  }
  90% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  100% {
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0);
  }
}
.lottery-button {
  position: absolute;
  top: 320px;
  left: 258px;
  outline: none;
  border: none;
  cursor: pointer;
  width: 264px;
  height: 179px;
  background: none;
  z-index: 100;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  -webkit-animation: pulse 0.8s infinite;
          animation: pulse 0.8s infinite;
}
.lottery-button img {
  max-width: 264px;
}
.lottery-button:hover {
  -webkit-filter: brightness(1.5);
          filter: brightness(1.5); /* 提高亮度 20% */
}

.lottery-button:hover ~ .lottery-box {
  -webkit-animation: intense-shake 0.5s ease-in-out infinite;
          animation: intense-shake 0.5s ease-in-out infinite;
}

.lottery-rule ul {
  line-height: 1.5;
  list-style-type: none;
  font-size: 14px;
}
.lottery-rule ul > li {
  margin-left: 1em;
  margin-bottom: 5px;
  color: #725c41;
}

.text-deco {
  width: 404px;
  height: 4px;
  background: url("../images/deco_line.png") no-repeat center;
  margin: 20px auto;
}

.mem-info p {
  line-height: 30px;
}

#user-id {
  margin: 0 15px 0px 10px;
  color: #9d671c;
}

#less_time {
  font-size: 24px;
  font-weight: bold;
  color: #e41a00;
  margin: 0 10px 0px 10px;
}

#logout-btn {
  position: absolute;
  top: -8px;
  right: 30px;
  background-color: #8B7355;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid #725c41;
  z-index: 10;
}
#logout-btn:hover {
  background-color: #7A5E3E;
}

#record-btn {
  position: absolute;
  z-index: 10;
  top: 52px;
  right: 30px;
  background-color: #c14836;
  color: #FFF;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  border-bottom: 3px solid #9b3628;
}
#record-btn:hover {
  background-color: #b33b29;
}

.sec2-info {
  text-align: center;
  background: #e41a00;
  padding: 5px 20px;
  border-radius: 30px;
  color: #fff;
  margin-top: 10px;
}

/* 進度條的外框 */
.progress-container {
  width: 80%; /* 設定進度條的寬度 */
  height: 30px;
  background-color: #777777; /* 淺黃色背景 */
  border-radius: 15px; /* 圓角 */
  position: relative;
  overflow: hidden; /* 隱藏超出範圍的部分 */
  margin: 20px auto; /* 置中 */
  border: 2px solid #b68a3c; /* 加外框 */
}

/* 進度條本體 */
.progress-bar {
  height: 100%;
  background-color: #d62608; /* 紅色 */
  width: 100%; /* 預設全滿 */
  border-radius: 15px; /* 圓角 */
  -webkit-transition: width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out; /* 添加動畫效果 */
}

/* 文字資訊 */
.progress-text {
  position: absolute;
  top: -1px;
  width: 100%;
  text-align: center;
  line-height: 30px;
  font-weight: bold;
  color: white;
  font-size: 16px;
}

.prize-list {
  list-style-type: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-bottom: 50px;
}
.prize-list li {
  width: 19%;
  text-align: center;
}

.amount {
  position: absolute;
  width: 80px;
  height: 33px;
  background: #e41a00;
  border-radius: 30px 0 0px 30px;
  color: #fff;
  line-height: 33px;
  text-align: center;
  z-index: 10;
  bottom: 62px;
  right: 26px;
}

.title4 {
  width: 1008px;
  height: 30px;
  background: url("../images/notice.png") no-repeat center;
  margin: 0 auto;
  margin-bottom: 20px;
}

.notice-list {
  line-height: 1.5;
}
.notice-list li {
  margin-bottom: 5px;
  color: #5f4612;
  font-size: 16px;
  font-weight: bold;
}

.float-box {
  position: fixed;
  right: 10px;
  bottom: 20px;
  width: 165px;
  height: 226px;
  z-index: 1001;
  padding: 67px 0 0 21px;
  background: url("../images/float_bg.png") no-repeat center;
}

.float-login-btn {
  display: block;
  width: 122px;
  height: 49px;
  border: none;
  cursor: pointer;
  background: url("../images/float_btn1.png") no-repeat center;
}

.float-logout-btn {
  display: block;
  width: 122px;
  height: 49px;
  border: none;
  cursor: pointer;
  background: url("../images/float_btn3.png") no-repeat center;
}

.float-record-btn {
  display: block;
  width: 122px;
  height: 49px;
  border: none;
  cursor: pointer;
  background: url("../images/float_btn2.png") no-repeat center;
}

.float-draw-btn {
  display: block;
  width: 122px;
  height: 49px;
  border: none;
  cursor: pointer;
  background: url("../images/float_btn4.png") no-repeat center;
}

.line-deco2 {
  width: 100%;
  height: 5px;
  display: none;
  margin: 20px auto;
  background: url("../images/deco_line2.png") no-repeat center;
}

.login-btn {
  width: 400px;
  height: 95px;
  display: block;
  font-size: 28px;
  line-height: 82px;
  font-weight: bold;
  text-align: center;
  color: #FFF7E5; /* 米白色文字 */
  text-decoration: none; /* 移除預設超連結底線 */
  text-shadow: 0 0 8px rgba(255, 255, 200, 0.8); /* 發光文字效果 */
  background: -webkit-gradient(linear, left top, left bottom, from(#cc0000), to(#8B0000));
  background: linear-gradient(to bottom, #cc0000, #8B0000); /* 深紅色漸層 */
  border: 3px solid #cf881d; /* 金色邊框 */
  border-radius: 8px; /* 圓角 */
  -webkit-box-shadow: inset 0px 2px 3px rgba(255, 255, 255, 0.2);
          box-shadow: inset 0px 2px 3px rgba(255, 255, 255, 0.2); /* 內部高光 */
  cursor: pointer;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  margin: 0 auto 0 auto;
  -webkit-animation: buttonBlink 1.5s infinite alternate ease-in-out;
          animation: buttonBlink 1.5s infinite alternate ease-in-out;
}

/* 按下時的效果 */
.login-btn:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#8B0000), to(#700000));
  background: linear-gradient(to bottom, #8B0000, #700000);
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4);
          box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4);
  -webkit-transform: translateY(2px);
          transform: translateY(2px);
  -webkit-animation: none;
          animation: none; /* 取消閃爍 */
}

@-webkit-keyframes buttonBlink {
  0% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  } /* 原始亮度 */
  50% {
    -webkit-filter: brightness(120%);
            filter: brightness(120%);
  } /* 變亮 */
  100% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  } /* 回復原來亮度 */
}

@keyframes buttonBlink {
  0% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  } /* 原始亮度 */
  50% {
    -webkit-filter: brightness(120%);
            filter: brightness(120%);
  } /* 變亮 */
  100% {
    -webkit-filter: brightness(100%);
            filter: brightness(100%);
  } /* 回復原來亮度 */
}
.login-btn, .mem-info, .float-login-btn, .float-logout-btn, .menu-login-btn, .menu-logout-btn {
  display: none;
}

#lottery-gif {
  display: none;
  max-width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1000;
}

#popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  z-index: 999;
}

#confirm-popup, #reward-popup {
  text-align: center;
  background: url("../images/sec1_pat.jpg") repeat center;
  border-radius: 10px;
  border: 2px solid #9d671c;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  padding: 2%;
  z-index: 1000;
}

#popup-close {
  margin-top: 20px;
  padding: 8px 12px;
  background: #afafaf;
  color: white;
  border: none;
  border-radius: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}

#popup-close:hover {
  background: #dadada;
}

#cancel-lottery {
  width: 40%;
  margin-top: 10px;
  padding: 8px 12px;
  background: #898989;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#confirm-lottery {
  width: 40%;
  margin-top: 10px;
  padding: 8px 12px;
  background: #ddaa44;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

#reward-img {
  max-width: 100%;
}

.lottery-animation {
  display: none;
  width: 634px;
  height: 327px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1000;
}
.lottery-animation img {
  z-index: 10;
}
.lottery-animation .card-shine {
  position: absolute;
  width: 491px;
  height: 491px;
  background: url("../images/card-shine.png") no-repeat center;
  z-index: 5;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
          transform: translate(-50%, -50%) rotate(0deg);
  -webkit-animation: rotateLight 7s linear infinite;
          animation: rotateLight 7s linear infinite;
}

@-webkit-keyframes rotateLight {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotateLight {
  from {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
.m-social-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.m-social-btns a {
  display: block;
  width: 57px;
  height: 57px;
  border-bottom: none !important;
}
.m-social-btns a.mem_btn {
  background: url("../images/mem_btn.png") center no-repeat;
}
.m-social-btns a.home_btn {
  background: url("../images/home_btn.png") center no-repeat;
}
.m-social-btns a.fb_btn {
  background: url("../images/fb_btn.png") center no-repeat;
}

/* 漢堡選單按鈕 */
.hamburger {
  display: none;
  position: fixed;
  top: 15px;
  right: -100%;
  opacity: 0;
  width: 50px;
  height: 50px;
  background: #684d08;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  z-index: 1000;
}

.hamburger div {
  width: 25px;
  height: 3px;
  background: white;
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hamburger div::before,
.hamburger div::after {
  content: "";
  width: 25px;
  height: 3px;
  background: white;
  position: absolute;
  left: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.hamburger div::before {
  top: -8px;
}

.hamburger div::after {
  top: 8px;
}

/* 漢堡選單開啟時變叉叉 */
.hamburger.active div {
  background: transparent;
}

.hamburger.active div::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
}

.hamburger.active div::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
}

/* 側邊選單 */
.menu {
  position: fixed;
  top: 0;
  left: -250px;
  width: 250px;
  height: 100%;
  background: rgba(36, 28, 10, 0.9);
  color: white;
  padding-top: 60px;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;
  z-index: 999;
}

.menu.active {
  left: 0;
}

.menu a {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px;
  font-size: 18px;
  border-bottom: 1px solid #555;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
}

/* 內部滾動按鈕 */
.scroll-btn {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px;
  font-size: 18px;
  border-bottom: 1px solid #555;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  cursor: pointer;
  text-align: center;
}

.scroll-btn:hover {
  background: #555;
}

.menu-login-btn {
  width: 80%;
  border: none;
  margin: 0 auto 10px auto;
  cursor: pointer;
  outline: none;
  padding: 15px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  display: block;
  background: #ddaa44;
  border-radius: 30px;
  border: 3px solid #f4be6d;
}

.menu-logout-btn {
  width: 80%;
  border: none;
  margin: 0 auto 10px auto;
  cursor: pointer;
  outline: none;
  padding: 15px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  display: block;
  background: #907758;
  border-radius: 30px;
  border: 3px solid #af9575;
}

.menu-record-btn {
  width: 80%;
  border: none;
  margin: 0 auto 10px auto;
  cursor: pointer;
  outline: none;
  padding: 15px;
  font-size: 18px;
  color: #fff;
  font-weight: bold;
  display: block;
  background: #c14836;
  border-radius: 30px;
  border: 3px solid #e66b58;
}

.animate__pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

.soldout-pic{
  width: 365px;
  height: 133px;
  position: absolute;
  top: 343px;
  left: 212px;
  z-index: 100 ;
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@media (max-width: 767px) {
  .wrap {
    min-width: 0;
  }
  .logo {
    display: none;
  }
  .social-btns {
    display: none;
  }
  .header {
    padding-top: 112.5%;
    height: auto;
    background: url("../images/header_m.png") no-repeat center;
    background-size: cover;
  }
  .float-box {
    display: none;
  }
  .sec1-time {
    width: 90%;
    padding-top: 10.44%;
    height: auto;
    background-size: cover;
  }
  .sec1-cont-box {
    width: 96%;
    height: auto;
    border: 2px solid #9d671c;
    background: url("../images/sec1_pat.jpg") repeat center;
    border-radius: 20px;
    -webkit-box-shadow: 0 10px 0px #9d671c;
            box-shadow: 0 10px 0px #9d671c;
    padding: 4%;
  }
  .sec1-info1, .sec1-info2, .sec1-info3 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }
  .sec1-pic {
    display: none;
  }
  .sec1-info3 li {
    margin-left: 0 !important;
  }
  .line-deco2 {
    display: block;
  }
  .sec1-cont-box2 .inner {
    width: 100%;
    height: auto;
  }
  .lottery-info {
    width: 96%;
    margin: 0 auto 30px auto;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    border-radius: 20px;
    -webkit-box-shadow: 0 10px 0px #9d671c;
            box-shadow: 0 10px 0px #9d671c;
    padding: 4%;
    border: 2px solid #9d671c;
    background: url("../images/sec1_pat.jpg") repeat center;
  }
  .lottery {
    position: relative;
    top: 0;
    right: 0;
    width: 90%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  .lottery-bg {
    width: 100%;
    height: auto;
    position: absolute;
    padding-top: 75.4%;
    background-size: cover;
    top: 2%;
    left: 9%;
  }
  .lottery-box {
    width: 90%;
    height: auto;
    position: relative;
    top: 0;
    left: 0;
    padding-top: 99.27%;
    background-size: cover;
  }
  .lottery-button {
    top: 36%;
    left: 15%;
    width: 60vw;
  }
  .lottery-button img {
    max-width: 100%;
  }
  #logout-btn {
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    margin-top: 10px;
  }
  #record-btn {
    position: relative;
    width: 100%;
    top: 0;
    right: 0;
    margin-top: 10px;
  }
  .inner {
    width: 100%;
    height: auto;
  }
  .prize-list li {
    width: 48%;
  }
  .prize-list li img {
    width: 100%;
  }
  .amount {
    bottom: 13.22vw;
    right: 4.4vw;
    font-size: 1rem;
  }
  .prize-list {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .title4 {
    width: 100%;
  }
  .notice-list {
    width: 90%;
    margin: 0 auto;
  }
  .notice-list li {
    font-size: 1rem;
    margin-left: 1rem;
  }
  .footer {
    padding: 0 20px;
  }
  .sec1-card1, .sec1-card2, .sec1-card3, .sec2-card1, .sec2-card2 {
    display: none;
  }
  .login-btn {
    width: 100%;
  }
  .hamburger {
    right: 15px;
    opacity: 1;
  }
  #confirm-popup, #reward-popup {
    width: 80%;
    padding: 10% 5%;
  }
  #confirm-popup #cancel-lottery, #confirm-popup #confirm-lottery, #reward-popup #cancel-lottery, #reward-popup #confirm-lottery {
    width: 100%;
    display: block;
  }
  #popup-close {
    width: 50%;
  }
  .lottery-animation {
    width: 100%;
    height: auto;
  }
  .lottery-animation img {
    max-width: 100%;
  }
  .lottery-animation .card-shine {
    width: 100%;
    height: auto;
    padding-top: 100%;
    background-size: cover;
  }
  .soldout-pic{
    top: 38%;
    left: 17%;
    width: 60vw;
  }
  .soldout-pic img{
    max-width: 100%;
  }
}
@media (max-width: 480px) {
  .title1, .title2, .title3 {
    width: 70%;
    height: auto;
    text-align: center;
  }
  .title1 img, .title2 img, .title3 img {
    max-width: 100%;
  }
}