@charset "UTF-8";*,
*::before,
*::after {
  box-sizing: border-box; /* Set the sizing of an element to include it's border */
}* {
  margin: 0; /* Set the default margin to 0 */
  padding: 0; /* Set the default padding to 0 */
}ul[role=list],
ol[role=list] {
  list-style: none; /* Turn off numbered and unordered list decoration */
}a:not([class]) {
  text-decoration-skip-ink: auto; /* Makes link undelines look better */
}img,
picture,
svg,
video,
canvas {
  max-width: 100%; /* Makes it responsive */
  height: auto; /* Makes it responsive */
  vertical-align: middle; /* Makes text next to inline images look better */
  font-style: italic; /* If the images don't load it makes the alt decription look better */
  background-repeat: no-repeat;
  /* The background repeat and size are there if you want to load a picture first like a backroung image that is worse quality while the better quality image loads */
  background-size: cover;
}input,
button,
textarea,
select {
  font: inherit; /* Makes these elements inherit fonts */
  border: 0;
}/* Turns off animation for people who don't want to see them */body,
html {
  height: 100%; /* Makes the body element full screen */
}:root {
  --ds: 2000;
  --vw: 100vw;
}@media (max-width: 767px) {
  :root {
    --ds: 520;
  }
}@media (min-width: 768px) and (max-width: 992px) {
  :root {
    --ds: 1400;
  }
}@media (min-width: 993px) and (max-width: 1200px) {
  :root {
    --ds: 1920;
  }
}@media (min-width: 1201px) and (max-width: 1400px) {
  :root {
    --ds: 1920;
  }
}@media (min-width: 1401px) and (max-width: 1920px) {
  :root {
    --ds: 1920;
  }
}html {
  font-size: 10px;
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-optical-sizing: auto;
}html.fixed {
  overflow: hidden;
}.modal {
  width: calc(958 / var(--ds) * var(--vw));
  margin: 0 auto;
}@media (max-width: 767px) {
  .modal {
    width: 100%;
  }
}.modal__content {
  width: calc(797 / var(--ds) * var(--vw));
  background: transparent url("../../images/modal-bg.jpg") no-repeat center top;
  background-size: 100% auto;
  padding-bottom: calc(80 / var(--ds) * var(--vw));
  margin: 0 auto;
  min-height: 480px;
  position: relative;
  padding-top: calc(30 / var(--ds) * var(--vw));
}@media (max-width: 767px) {
  .modal__content {
    width: calc(504 / var(--ds) * var(--vw));
    padding-top: calc(60 / var(--ds) * var(--vw));
  }
}.modal__rule-title {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}.modal__rule-title img {
  height: calc(80 / var(--ds) * var(--vw));
}@media (max-width: 767px) {
  .modal__rule-title img {
    width: auto;
    height: calc(60 / var(--ds) * var(--vw));
  }
}.modal__btn-close {
  cursor: pointer;
  top: calc(30 / var(--ds) * var(--vw));
  right: calc(60 / var(--ds) * var(--vw));
  transform: scale(1);
  width: calc(60 / var(--ds) * var(--vw));
  height: calc(60 / var(--ds) * var(--vw));
  background: transparent url("../../images/modal-btn-close-bg.png") no-repeat 0 0;
  background-size: cover;
  position: absolute;
  font-size: 0;
  transition: all 0.3s ease-in-out;
}@media (hover: hover) {
  .modal__btn-close:hover {
    transform: scale(1.1);
  }
}@media (max-width: 767px) {
  .modal__btn-close {
    top: 0;
    right: calc(20 / var(--ds) * var(--vw));
  }
}.modal__text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  text-align: center;
  font-weight: bold;
}.rule-nav {
  display: flex;
  justify-content: center;
  padding: calc(20 / var(--ds) * var(--vw)) 0;
}@media (max-width: 767px) {
  .rule-nav {
    flex-direction: column;
    align-items: center;
  }
}.rule-nav__btn-rule-1 {
  width: calc(241 / var(--ds) * var(--vw));
  height: calc(94 / var(--ds) * var(--vw));
  background: transparent url("../../images/rule-btn-1.png") no-repeat 0 0;
  background-size: 100% auto;
  position: relative;
  font-size: 0;
  display: block;
  margin: 0 calc(-6 / var(--ds) * var(--vw));
}.rule-nav__btn-rule-1::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent url("../../images/rule-btn-1.png") no-repeat 0 100%;
  background-size: 100% auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}@media (hover: hover) {
  .rule-nav__btn-rule-1:hover::after {
    opacity: 1;
  }
}.rule-nav__btn-rule-1.active {
  pointer-events: none;
}.rule-nav__btn-rule-1.active::after {
  opacity: 1;
}.rule-nav__btn-rule-2 {
  width: calc(241 / var(--ds) * var(--vw));
  height: calc(94 / var(--ds) * var(--vw));
  background: transparent url("../../images/rule-btn-2.png") no-repeat 0 0;
  background-size: 100% auto;
  position: relative;
  font-size: 0;
  display: block;
  margin: 0 calc(-6 / var(--ds) * var(--vw));
}.rule-nav__btn-rule-2::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent url("../../images/rule-btn-2.png") no-repeat 0 100%;
  background-size: 100% auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}@media (hover: hover) {
  .rule-nav__btn-rule-2:hover::after {
    opacity: 1;
  }
}.rule-nav__btn-rule-2.active {
  pointer-events: none;
}.rule-nav__btn-rule-2.active::after {
  opacity: 1;
}.rule-nav__btn-rule-3 {
  width: calc(241 / var(--ds) * var(--vw));
  height: calc(94 / var(--ds) * var(--vw));
  background: transparent url("../../images/rule-btn-3.png") no-repeat 0 0;
  background-size: 100% auto;
  position: relative;
  font-size: 0;
  display: block;
  margin: 0 calc(-6 / var(--ds) * var(--vw));
}.rule-nav__btn-rule-3::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: transparent url("../../images/rule-btn-3.png") no-repeat 0 100%;
  background-size: 100% auto;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}@media (hover: hover) {
  .rule-nav__btn-rule-3:hover::after {
    opacity: 1;
  }
}.rule-nav__btn-rule-3.active {
  pointer-events: none;
}.rule-nav__btn-rule-3.active::after {
  opacity: 1;
}.rule {
  padding-left: calc(80 / var(--ds) * var(--vw));
  padding-right: calc(80 / var(--ds) * var(--vw));
  flex: 1;
}@media (max-width: 767px) {
  .rule {
    padding-left: calc(24 / var(--ds) * var(--vw));
    padding-right: calc(24 / var(--ds) * var(--vw));
  }
}.rule__title {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}.rule__title img {
  height: calc(80 / var(--ds) * var(--vw));
}.rule__content {
  padding-top: calc(30 / var(--ds) * var(--vw));
  height: 100%;
}.rule__title-h2 {
  position: relative;
  padding: calc(12 / var(--ds) * var(--vw)) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(8 / var(--ds) * var(--vw));
}.rule__title-h2 p {
  position: relative;
  z-index: 0;
  color: #fff;
  font-size: calc(20 / var(--ds) * var(--vw));
}.rule__title-h2 p:nth-child(2) {
  text-align: left;
}.rule__title-h2::before {
  content: "";
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(98, 57, 28) 15%, rgb(98, 57, 28) 85%, rgb(255, 255, 255) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
}.rule__text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  padding: calc(12 / var(--ds) * var(--vw)) 0;
  text-align: center;
  font-weight: bold;
}.rule__text.padding-vertical {
  padding: calc(40 / var(--ds) * var(--vw)) 0;
}.rule__remind-text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  padding: calc(200 / var(--ds) * var(--vw)) 0;
  text-align: center;
  font-weight: bold;
}.rule__ul-list {
  padding: calc(12 / var(--ds) * var(--vw)) 0 calc(12 / var(--ds) * var(--vw)) calc(32 / var(--ds) * var(--vw));
  list-style: disc;
}.rule__ul-list li {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
}.rule__ul-list li:not(:last-child) {
  padding-bottom: calc(8 / var(--ds) * var(--vw));
}.rule__ol-list {
  padding: calc(12 / var(--ds) * var(--vw)) 0 calc(12 / var(--ds) * var(--vw)) calc(32 / var(--ds) * var(--vw));
  list-style: decimal;
  margin-bottom: calc(40 / var(--ds) * var(--vw));
}.rule__ol-list li {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  font-weight: bold;
  line-height: 1.6;
}.rule__ol-list li strong {
  color: #e4c559;
}.rule__ol-list li:not(:last-child) {
  padding-bottom: calc(8 / var(--ds) * var(--vw));
}.rule__image-wrap {
  padding-top: calc(30 / var(--ds) * var(--vw));
}.rule__btn-prev {
  display: block;
  width: calc(268 / var(--ds) * var(--vw));
  height: calc(75 / var(--ds) * var(--vw));
  background: transparent url("../../images/btn-prev@2x.png") no-repeat 0 0;
  background-size: cover;
  margin: 0 auto;
  font-size: 0;
  transition: all 0.3s ease-in-out;
  filter: brightness(0.9);
}@media (hover: hover) {
  .rule__btn-prev:hover {
    translate: 0 -5%;
    filter: brightness(1);
  }
}@media (max-width: 767px) {
  .rule-flex-table.schedule .rule-flex-table__row span:nth-child(3) {
    display: none;
  }
}.rule-flex-table.mobile-schedule {
  display: none;
}@media (max-width: 767px) {
  .rule-flex-table.mobile-schedule {
    display: block;
    width: calc(400 / var(--ds) * var(--vw));
    margin: 0 auto;
  }
}.rule-flex-table__row {
  display: flex;
  padding: calc(8 / var(--ds) * var(--vw)) 0;
  position: relative;
}.rule-flex-table__row.bg::before {
  content: "";
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(98, 57, 28) 15%, rgb(98, 57, 28) 85%, rgb(255, 255, 255) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
}.rule-flex-table__row span {
  position: relative;
  z-index: 10;
  flex: 1;
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  font-weight: bold;
  text-align: center;
}@media (max-width: 767px) {
  .rule-flex-table__row span {
    font-size: calc(16 / var(--ds) * var(--vw));
  }
}.rule-flex-table__row span br {
  display: none;
}@media (max-width: 767px) {
  .rule-flex-table__row span br {
    display: block;
  }
}.login {
  padding-top: calc(20 / var(--ds) * var(--vw));
}.login__form {
  display: grid;
  grid-template-columns: 20rem 1fr;
  width: calc(680 / var(--ds) * var(--vw));
  margin: 0 auto;
  gap: calc(10 / var(--ds) * var(--vw));
}@media (max-width: 767px) {
  .login__form {
    width: calc(440 / var(--ds) * var(--vw));
    grid-template-columns: 12rem 1fr;
  }
}.login__form select {
  font-size: calc(18 / var(--ds) * var(--vw));
  padding: calc(10 / var(--ds) * var(--vw));
  color: #2b2b2b;
}@media (max-width: 767px) {
  .login__form select {
    font-size: calc(20 / var(--ds) * var(--vw));
  }
}.login__form input.pop_gid {
  font-size: calc(18 / var(--ds) * var(--vw));
  padding: calc(10 / var(--ds) * var(--vw));
  color: #2b2b2b;
  border: solid 4px transparent;
  outline: none;
  transition: all 0.3s ease-in-out;
}.login__form input.pop_gid:focus {
  border-color: #f9b345;
}@media (max-width: 767px) {
  .login__form input.pop_gid {
    font-size: calc(20 / var(--ds) * var(--vw));
  }
}.login__form input.pop_mob {
  font-size: calc(18 / var(--ds) * var(--vw));
  padding: calc(10 / var(--ds) * var(--vw));
  color: #2b2b2b;
  border: solid 4px transparent;
  outline: none;
  transition: all 0.3s ease-in-out;
}.login__form input.pop_mob:focus {
  border-color: #f9b345;
}@media (max-width: 767px) {
  .login__form input.pop_mob {
    font-size: calc(20 / var(--ds) * var(--vw));
  }
}.login__form input.pop_masid {
  grid-column: span 2;
  font-size: calc(18 / var(--ds) * var(--vw));
  padding: calc(10 / var(--ds) * var(--vw));
  color: #2b2b2b;
  border: solid 4px transparent;
  outline: none;
  transition: all 0.3s ease-in-out;
}.login__form input.pop_masid:focus {
  border-color: #f9b345;
}@media (max-width: 767px) {
  .login__form input.pop_masid {
    font-size: calc(20 / var(--ds) * var(--vw));
  }
}.login__form .check_pic {
  grid-column: span 2;
  display: flex;
  justify-content: center;
}.login__form .privacy_con {
  grid-column: span 2;
  display: flex;
  justify-content: center;
  gap: calc(12 / var(--ds) * var(--vw));
}@media (max-width: 767px) {
  .login__form .privacy_con {
    align-items: flex-start;
  }
}.login__form .privacy_con p {
  font-size: calc(18 / var(--ds) * var(--vw));
  color: #fff;
}@media (max-width: 767px) {
  .login__form .privacy_con p {
    font-size: calc(20 / var(--ds) * var(--vw));
  }
}.login__form .privacy_con p a {
  color: #4e95d8;
  font-weight: bold;
  text-decoration: none;
}.login__btn-login {
  grid-column: span 2;
  display: block;
  width: calc(268 / var(--ds) * var(--vw));
  height: calc(75 / var(--ds) * var(--vw));
  background: transparent url("../../images/btn-login@2x.png") no-repeat 0 0;
  background-size: cover;
  margin: 0 auto;
  font-size: 0;
  transition: all 0.3s ease-in-out;
  filter: brightness(0.9);
}@media (hover: hover) {
  .login__btn-login:hover {
    translate: 0 -5%;
    filter: brightness(1);
  }
}.login__notice {
  width: calc(680 / var(--ds) * var(--vw));
  margin: 0 auto;
  position: relative;
}@media (max-width: 767px) {
  .login__notice {
    width: calc(440 / var(--ds) * var(--vw));
  }
}.login__notice ul {
  flex: 1;
  list-style: disc;
  padding-left: calc(20 / var(--ds) * var(--vw));
}@media (max-width: 767px) {
  .login__notice ul {
    margin-bottom: calc(40 / var(--ds) * var(--vw));
  }
}.login__notice ul li {
  color: #fff;
  font-size: calc(18 / var(--ds) * var(--vw));
  line-height: 1.6;
}.login__notice-title {
  color: #fff;
  font-size: calc(22 / var(--ds) * var(--vw));
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(8 / var(--ds) * var(--vw));
  margin-bottom: calc(24 / var(--ds) * var(--vw));
}.login__notice-title::before, .login__notice-title::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #382211;
}.login__btn-notice {
  position: absolute;
  right: 0;
  top: calc(60 / var(--ds) * var(--vw));
  display: block;
  width: calc(161 / var(--ds) * var(--vw));
  height: calc(49 / var(--ds) * var(--vw));
  background: transparent url("../../images/btn-login-notice-bg@2x.png") no-repeat 0 0;
  background-size: cover;
  margin: 0 auto;
  font-size: 0;
  transition: all 0.3s ease-in-out;
  filter: brightness(0.9);
}@media (hover: hover) {
  .login__btn-notice:hover {
    translate: 0 -5%;
    filter: brightness(1);
  }
}@media (max-width: 767px) {
  .login__btn-notice {
    width: calc(230 / var(--ds) * var(--vw));
    height: calc(70 / var(--ds) * var(--vw));
    filter: brightness(1);
    position: relative;
    right: initial;
    top: initial;
  }
}.prize__content {
  padding-top: calc(30 / var(--ds) * var(--vw));
  height: 100%;
}.prize__title-h2 {
  position: relative;
  padding: calc(12 / var(--ds) * var(--vw)) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(8 / var(--ds) * var(--vw));
  font-size: calc(24 / var(--ds) * var(--vw));
  color: #fff;
}.prize__image {
  width: calc(150 / var(--ds) * var(--vw));
  padding-top: calc(40 / var(--ds) * var(--vw));
  margin: 0 auto;
}.user-data__title-h2 {
  position: relative;
  padding: calc(12 / var(--ds) * var(--vw)) 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: calc(8 / var(--ds) * var(--vw));
  color: #fff;
  font-size: calc(20 / var(--ds) * var(--vw));
}.user-data__text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  padding: calc(12 / var(--ds) * var(--vw)) 0;
  text-align: center;
  font-weight: bold;
  position: relative;
}.user-data__text::before {
  content: "";
  background: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgb(98, 57, 28) 15%, rgb(98, 57, 28) 85%, rgb(255, 255, 255) 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
}.user-data__remind-text {
  font-size: calc(20 / var(--ds) * var(--vw));
  color: #fff;
  padding: calc(40 / var(--ds) * var(--vw)) 0;
  text-align: center;
  font-weight: bold;
}.user-data__btn-confirm {
  cursor: pointer;
  display: block;
  width: calc(268 / var(--ds) * var(--vw));
  height: calc(75 / var(--ds) * var(--vw));
  background: transparent url("../../images/btn-confirm@2x.png") no-repeat 0 0;
  background-size: cover;
  margin: 0 auto;
  font-size: 0;
  transition: all 0.3s ease-in-out;
  filter: brightness(0.9);
}@media (hover: hover) {
  .user-data__btn-confirm:hover {
    translate: 0 -5%;
    filter: brightness(1);
  }
}body {
  padding-top: calc(60 / var(--ds) * var(--vw));
  padding-bottom: calc(60 / var(--ds) * var(--vw));
  height: auto;
  overflow: visible;
}