@charset "UTF-8";
/*預載vue框架首屏骨架*/
.Area_SkeletonScreen {
  opacity: 1;
  pointer-events: none;
  z-index: -99;
  position: relative;
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

.v-SkeletonScreen .Area_SkeletonScreen {
  z-index: 10;
  opacity: 1;
  display: block;
}

.v-loaded .Area_SkeletonScreen {
  z-index: 10;
  opacity: 0;
  display: block;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: opacity 0.4s;
  transition: opacity 0.4s;
}

/* .v-loaded .Area_SkeletonScreen { opacity: 1; mix-blend-mode: luminosity; }   */
.Area_SkeletonScreen > .box {
  margin: 0 !important;
  padding: 0 !important;
}

.Area_SkeletonScreen .SkeletonScreen {
  position: relative;
  margin: 0 auto;
}

.Area_SkeletonScreen .SkeletonScreen .box {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 200%;
}

.Area_SkeletonScreen .SkeletonScreen svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop {
  mix-blend-mode: soft-light;
  stop-color: hsl(5, 100%, 85%);
  stop-opacity: 0.5;
  -webkit-animation: skeleton-loading 0.5s linear infinite alternate;
          animation: skeleton-loading 0.5s linear infinite alternate;
}

.Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(1) {
  -webkit-animation-delay: -4s;
          animation-delay: -4s;
}

.Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(2) {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}

.Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(3) {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

.Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(4) {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

.Area_SkeletonScreen .SkeletonScreen svg #linearGradient stop:nth-of-type(5) {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes skeleton-loading {
  0% {
    stop-color: hsl(5, 100%, 85%);
    stop-opacity: 0.5;
  }
  100% {
    stop-color: hsl(5, 20%, 95%);
    stop-opacity: 0.5;
  }
}

@keyframes skeleton-loading {
  0% {
    stop-color: hsl(5, 100%, 85%);
    stop-opacity: 0.5;
  }
  100% {
    stop-color: hsl(5, 20%, 95%);
    stop-opacity: 0.5;
  }
}
@media screen and (min-width: 768px) {
  .Area_SkeletonScreen .SkeletonScreen {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  .Area_SkeletonScreen .SkeletonScreen {
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .message-1 {
    font-size: 1.25rem;
    line-height: 125%;
  }
  .my-1 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
  .message-2 {
    font-size: 1.5rem;
    line-height: 130%;
  }
  .my-2 {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .message-3 {
    font-size: 1.75rem;
    line-height: 135%;
  }
  .my-3 {
    margin-top: 1.5rem;
    margin-bottom: 1.35rem;
  }
  .message-4 {
    font-size: 2rem;
    line-height: 140%;
  }
  .my-4 {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }
  .message-5 {
    font-size: 2.25rem;
    line-height: 145%;
  }
  .my-5 {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .message-6 {
    font-size: 2.5rem;
    line-height: 150%;
  }
  .my-6 {
    margin-top: 3rem;
    margin-bottom: 3rem;
  }
  .message-7 {
    font-size: 2.75rem;
    line-height: 155%;
  }
  .my-7 {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
  .message-8 {
    font-size: 3rem;
    line-height: 160%;
  }
  .my-8 {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  .message-9 {
    font-size: 3.25rem;
    line-height: 165%;
  }
  .my-9 {
    margin-top: 4.5rem;
    margin-bottom: 4.5rem;
  }
  .message-10 {
    font-size: 3.5rem;
    line-height: 170%;
  }
  .my-10 {
    margin-top: 5rem;
    margin-bottom: 5rem;
  }
}
@media screen and (max-width: 767px) {
  .message-1 {
    font-size: 0.625rem;
    line-height: 125%;
  }
  .my-1 {
    margin-top: 0.275rem;
    margin-bottom: 0.275rem;
  }
  .message-2 {
    font-size: 0.75rem;
    line-height: 130%;
  }
  .my-2 {
    margin-top: 0.55rem;
    margin-bottom: 0.55rem;
  }
  .message-3 {
    font-size: 0.875rem;
    line-height: 135%;
  }
  .my-3 {
    margin-top: 0.825rem;
    margin-bottom: 0.825rem;
  }
  .message-4 {
    font-size: 1rem;
    line-height: 140%;
  }
  .my-4 {
    margin-top: 1.1rem;
    margin-bottom: 1.1rem;
  }
  .message-5 {
    font-size: 1.125rem;
    line-height: 145%;
  }
  .my-5 {
    margin-top: 1.375rem;
    margin-bottom: 1.375rem;
  }
  .message-6 {
    font-size: 1.25rem;
    line-height: 150%;
  }
  .my-6 {
    margin-top: 1.65rem;
    margin-bottom: 1.65rem;
  }
  .message-7 {
    font-size: 1.375rem;
    line-height: 155%;
  }
  .my-7 {
    margin-top: 1.925rem;
    margin-bottom: 1.925rem;
  }
  .message-8 {
    font-size: 1.5rem;
    line-height: 160%;
  }
  .my-8 {
    margin-top: 2.2rem;
    margin-bottom: 2.2rem;
  }
  .message-9 {
    font-size: 1.625rem;
    line-height: 165%;
  }
  .my-9 {
    margin-top: 2.475rem;
    margin-bottom: 2.475rem;
  }
  .message-10 {
    font-size: 1.75rem;
    line-height: 170%;
  }
  .my-10 {
    margin-top: 2.75rem;
    margin-bottom: 2.75rem;
  }
}
.Area_GameStyle {
  --font-family: "Century Gothic","微軟正黑體","Microsoft JhengHei",Arial;
  --text-color-primary: #e2d3bb;
  --text-color-secondary: #ffefd9;
  --text-color-tertiary: #404040;
  --earn-bg: #ffdda6;
  color: #404040;
  font-family: var(--font-family);
}
.Area_GameStyle .text-secondary {
  color: var(--text-color-secondary);
}
.Area_GameStyle .btn {
  margin-inline: auto;
}
.Area_GameStyle .btn a {
  width: 36%;
  margin: 0 auto;
}
.Area_GameStyle .earn {
  color: var(--text-color-tertiary);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--earn-bg);
  padding-block: 1.2rem;
  width: 65%;
  margin-inline: auto;
}
.Area_GameStyle .box_list {
  text-align: justify;
}
.Area_GameStyle .box_list ol {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2rem;
}
.Area_GameStyle .box_list ol li {
  line-height: 150%;
}

@media screen and (min-width: 768px) {
  .box_list {
    padding: 0.5rem 3rem;
  }
}
@media screen and (max-width: 767px) {
  .Area_GameStyle .earn {
    border-radius: 0.3rem;
    padding-block: 0.5rem;
    width: 70%;
    margin-inline: auto;
  }
  .Area_GameStyle .box_list {
    text-align: left;
    padding-inline: 5%;
    padding: 0 5%;
  }
  .Area_GameStyle .box_list ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.75rem;
    -webkit-padding-start: 4%;
            padding-inline-start: 4%;
  }
  .Area_GameStyle .box_list ol li {
    line-height: 150%;
  }
}
.hero {
  -webkit-perspective: 1000px;
          perspective: 1000px;
  position: relative;
}
.hero-backdrop {
  z-index: -2;
  pointer-events: none;
  position: relative;
}
.hero-backdrop-deco {
  width: 100%;
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.hero-title {
  --md-title:#242424;
  --lg-title:#ffffff;
  pointer-events: none;
  position: absolute;
  font-family: Noto Sans TC, sans-serif;
  font-optical-sizing: auto;
  line-height: 5em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.hero-title .md-text {
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  line-height: 1.7em;
  color: var(--md-title);
  font-style: italic;
}
.hero-title .lg-text {
  width: 960px;
  font-size: 105px;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--lg-title);
  height: 130px;
  line-height: 130px;
}
.hero-title .lg-text p {
  padding: 0;
  margin: 0;
  text-align: center;
}
.hero-title .lg-text .hero-decos {
  position: absolute;
}
.hero-title .lg-text .hero-decos.hero-deco1 {
  z-index: -1;
  top: 25px;
  right: 0;
  width: 960px;
}
.hero-title .lg-text .hero-decos.hero-deco2 {
  top: 6px;
  right: 68px;
}
.hero-btn-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
  display: flex;
  top: 0;
}
.hero-btn-wrap::before {
  content: "";
  margin-left: auto;
}
.hero-btn-wrap a.go_bt {
  display: block;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .Area_top .btn_more {
    right: 0;
    z-index: 5;
  }
}
@media screen and (min-width: 768px) {
  .Area_top .btn_ {
    width: 95px;
    top: 70px;
  }
  .Area_top .btn_.btn_more {
    right: 15px;
  }
  .Area_top .btn_.btn_list {
    right: 125px;
  }
}
@media screen and (min-width: 768px) {
  .hero {
    max-width: 2000px;
    height: 1640px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0px auto -1240px;
    z-index: 1;
  }
  .hero-backdrop-deco--02 {
    position: absolute;
    -webkit-animation: butterfly 3s infinite;
            animation: butterfly 3s infinite;
  }
  @-webkit-keyframes butterfly {
    0% {
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    }
    30% {
      -webkit-transform: translate(0px, 20px);
              transform: translate(0px, 20px);
    }
    60% {
      -webkit-transform: translate(0px, -20px);
              transform: translate(0px, -20px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    }
  }
  @keyframes butterfly {
    0% {
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    }
    30% {
      -webkit-transform: translate(0px, 20px);
              transform: translate(0px, 20px);
    }
    60% {
      -webkit-transform: translate(0px, -20px);
              transform: translate(0px, -20px);
    }
    100% {
      -webkit-transform: translate(0px, 0px);
              transform: translate(0px, 0px);
    }
  }
  .hero-backdrop-deco--03 {
    -webkit-animation: star 4s infinite;
            animation: star 4s infinite;
  }
  @-webkit-keyframes star {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes star {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    75% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  .hero img {
    max-width: 2000px;
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }
  .hero-title {
    top: 146px;
  }
  .hero-title .md-text {
    position: relative;
    padding: 0 10px;
  }
  .hero-title .md-text::after {
    content: "";
    border-bottom: 20px solid yellow;
    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: 10px;
    z-index: -1;
    -webkit-animation: textBottomBoder 10s infinite;
            animation: textBottomBoder 10s infinite;
  }
  .hero-title .md-text .font-style--number {
    font-size: 1.2em;
    font-family: "Arial", "微軟正黑體", "Microsoft JhengHei";
    -webkit-transform: translateY(1.5px);
            transform: translateY(1.5px);
    display: inline-block;
  }
  @-webkit-keyframes textBottomBoder {
    0% {
      width: 0%;
    }
    70%, 100% {
      width: 100%;
    }
  }
  @keyframes textBottomBoder {
    0% {
      width: 0%;
    }
    70%, 100% {
      width: 100%;
    }
  }
  .hero-btn-wrap {
    width: 1220px;
  }
}
@media screen and (max-width: 767px) {
  .hero {
    overflow: hidden;
    width: 100%;
    margin: 0 auto -35vw;
    height: 76vw;
  }
  .hero-title {
    position: relative;
    margin: 13.1vw auto 0;
    line-height: 2.75em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .hero-title .md-text {
    font-size: 6.5vw;
    font-weight: 700;
    line-height: 6.5vw;
    padding: 0vw 3vw;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
  }
  .hero-title .md-text::after {
    content: "";
    border-bottom: 10px solid yellow;
    display: block;
    margin: auto;
    position: absolute;
    left: 0;
    bottom: -5px;
    z-index: -1;
    -webkit-animation: textBottomBoder 10s infinite;
            animation: textBottomBoder 10s infinite;
  }
  .hero-title .md-text .font-style--number {
    font-size: 1.15em;
    font-family: "Arial", "微軟正黑體", "Microsoft JhengHei";
    -webkit-transform: translateY(1.5px);
            transform: translateY(1.5px);
    display: inline-block;
  }
  @-webkit-keyframes textBottomBoder {
    0% {
      width: 0%;
    }
    70%, 100% {
      width: 100%;
    }
  }
  @keyframes textBottomBoder {
    0% {
      width: 0%;
    }
    70%, 100% {
      width: 100%;
    }
  }
  .hero-title .lg-text {
    width: 100%;
    position: relative;
    font-size: 10vw;
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-top: -3vw;
    background-size: auto 100%;
    height: 16vw;
    line-height: 18vw;
  }
  .hero-title .lg-text p {
    padding: 0;
    margin: 0;
  }
  .hero-title .lg-text .hero-decos {
    position: absolute;
  }
  .hero-title .lg-text .hero-decos.hero-deco1 {
    top: -6vw;
    right: 0;
    width: 100vw;
  }
  .hero-title .lg-text .hero-decos.hero-deco2 {
    top: 0.3vw;
    right: 6vw;
    width: 13.5vw;
  }
  .hero-backdrop-deco--01 {
    -webkit-filter: none;
            filter: none;
  }
  .hero-btn-wrap {
    width: 100%;
    padding-top: 3vw;
  }
  .hero-btn-wrap .btn_more {
    width: 13vw;
    top: 4.5vw;
  }
  .Areabottom {
    margin-bottom: 8vw;
  }
}
.animated {
  -webkit-animation-duration: 0.65s;
          animation-duration: 0.65s;
  -webkit-animation-fill-mode: both !important;
          animation-fill-mode: both !important;
}

/*APP限定*/
/*forPhone*/
.boxPhone {
  z-index: 5;
  position: relative;
  border-radius: 4vw;
  overflow: hidden;
}
.boxPhone .mbGOapp {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3vw;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: absolute;
  top: 66vw;
  width: 64vw;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.boxPhone .mbGOapp div {
  display: inline-block;
}
.boxPhone .mbGOapp div img {
  width: 100%;
}

.dowloaded {
  z-index: 10;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  margin: 3vw auto;
  padding: 6vw 0;
  width: 93%;
  background-color: #d7d7d7;
  border-radius: 2vw;
}
.dowloaded h3 {
  margin: 0;
  padding: 0;
  color: #353535;
  line-height: 1.3;
  margin-bottom: 0.5em;
  font-size: 5.2vw;
}
.dowloaded .btn {
  margin: 0 auto;
  background-color: #ffff02;
  padding: 1.5vw;
  border-radius: 99em;
  width: 45%;
  font-size: 5vw;
}
.dowloaded .btn a {
  display: block;
  color: #000000;
  font-weight: bolder;
}

@media screen and (min-width: 768px) {
  .boxPhone {
    display: none;
  }
  .dowloaded {
    display: none;
  }
  #for_browser {
    overflow: visible !important;
  }
  .qrcode img {
    position: absolute;
    top: 295px;
    left: 393px;
    width: 175px;
    height: 175px;
  }
  .Area00 {
    margin-top: 30px;
    position: relative;
    z-index: 1;
  }
}
@media screen and (max-width: 767px) {
  #for_browser {
    width: 96%;
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="1"] ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="1"] ul {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="2"] ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="3"] ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="4"] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="4"] ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="5"] ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="5"] ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="6"] ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="6"] ul {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="7"] ul {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="7"] ul {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="8"] ul {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="8"] ul {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="9"] ul {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="9"] ul {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .PD_layout[data-pd-col-pc="10"] ul {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}
@media screen and (max-width: 767px) {
  .PD_layout[data-pd-col-phone="10"] ul {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}
.danji-pd-container {
  position: relative;
  --head-color: #ffffff;
  --head-bg: #1eaabd;
  --body-color-default: #1eaabd;
  --body-color-primary: #000000;
  --body-color-secondary: #404040;
  --body-bg: #f0e6d5;
  --background-bg: #f7f8fa;
  --foot-color: #1eaabd;
  --foot-bg: #FFFFFF;
  width: min(96%, 880px);
  margin-inline: auto;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .danji-pd-container {
    background-size: 12vw;
  }
}
.danji-pd-head {
  color: var(--head-color);
  background: var(--head-bg);
  font-size: 2.5rem;
  padding-block: 0.5rem;
}
.danji-pd-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  text-align: left;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.75rem;
  padding: 1.75rem 1.75rem 1.45rem;
}
.danji-pd-body .pd-img {
  -ms-flex-preferred-size: 40%;
      flex-basis: 40%;
  -webkit-transition: -webkit-filter 0.3s ease-in-out;
  transition: -webkit-filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
}
.danji-pd-body .pd-img:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.danji-pd-body .pd-info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-preferred-size: 60%;
      flex-basis: 60%;
}
.danji-pd-body .pd-info-rest {
  color: var(--body-color-secondary);
  font-size: 1.5rem;
  font-weight: bold;
}
.danji-pd-body .pd-info-notice {
  color: var(--body-color-secondary);
  font-size: 1.5rem;
}
.danji-pd-body .pd-info-brand {
  color: var(--body-color-default);
  font-weight: bolder;
  font-size: 2.5rem;
  letter-spacing: -0.025em;
  margin-left: -0.4em;
  margin-left: -0.35em;
}
.danji-pd-body .pd-info-name {
  color: var(--body-color-default);
  font-weight: bolder;
  font-size: 2.5rem;
  letter-spacing: -0.025em;
}
.danji-pd-body .pd-info-amount {
  color: var(--body-color-primary);
  font-size: 2rem;
}
.danji-pd-body .pd-info-btn {
  width: min(75%, 289px);
  -webkit-transition: -webkit-filter 0.3s ease-in-out;
  transition: -webkit-filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out;
  transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
}
.danji-pd-body .pd-info-btn img {
  width: 100%;
  height: auto;
}
.danji-pd-body .pd-info-btn:hover {
  -webkit-filter: brightness(110%);
          filter: brightness(110%);
}
.danji-pd-foot {
  color: var(--foot-color);
  background: var(--foot-bg);
  font-size: 1.5rem;
  padding-block: 0.6rem;
}

@media screen and (min-width: 768px) {
  .danji-pd-body .pd-info-btn {
    margin-bottom: 2rem;
  }
  .danji-pd-container {
    border-radius: 30px;
    padding: 0px;
    background: var(--background-bg);
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 5px solid #1eaabd;
  }
}
@media screen and (max-width: 767px) {
  .danji-pd-container {
    border-radius: 4.5vw;
    background: var(--background-bg);
    border: 5px solid #1eaabd;
  }
  .danji-pd-head {
    font-size: 1.15rem;
    padding-block: 0.25rem;
  }
  .danji-pd-body {
    gap: 0.6rem;
    padding: 0.72rem;
  }
  .danji-pd-body .pd-img {
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
    -webkit-transition: -webkit-filter 0.3s ease-in-out;
    transition: -webkit-filter 0.3s ease-in-out;
    transition: filter 0.3s ease-in-out;
    transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
    /*&:hover
     filter: brightness(110%); */
  }
  .danji-pd-body .pd-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-preferred-size: 50%;
        flex-basis: 50%;
  }
  .danji-pd-body .pd-info-brand {
    color: var(--body-color-default);
    font-weight: bolder;
    font-size: 1.15rem;
    margin-left: -0.4em;
  }
  .danji-pd-body .pd-info-name {
    color: var(--body-color-default);
    font-weight: bolder;
    font-size: 1.15rem;
  }
  .danji-pd-body .pd-info-amount {
    color: var(--body-color-primary);
    font-size: 1rem;
  }
  .danji-pd-body .pd-info-btn {
    width: min(77%, 280px);
    -webkit-transition: -webkit-filter 0.3s ease-in-out;
    transition: -webkit-filter 0.3s ease-in-out;
    transition: filter 0.3s ease-in-out;
    transition: filter 0.3s ease-in-out, -webkit-filter 0.3s ease-in-out;
  }
  .danji-pd-body .pd-info-btn:hover {
    -webkit-filter: brightness(110%);
            filter: brightness(110%);
  }
  .danji-pd-body .pd-info-rest {
    font-weight: bold;
    font-size: 0.75rem;
  }
  .danji-pd-body .pd-info-notice {
    font-size: 0.75rem;
  }
  .danji-pd-foot {
    color: var(--foot-color);
    background: var(--foot-bg);
    font-size: 0.75rem;
    padding-block: 0.25rem;
  }
}
.box_3PD .danji-pd-body {
  text-align: center;
  padding: 1.25rem 0.25rem 1.25rem;
  gap: 0;
}
.box_3PD .danji-pd-body2 {
  padding-top: 0;
}
.box_3PD .danji-pd-body .pd-info {
  border-right: solid #a8a8a8 1px;
}
.box_3PD .danji-pd-body .pd-info-03 {
  border-right: none;
}
.box_3PD .danji-pd-body .pd-info-ticket {
  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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 10% auto;
  padding-top: 0;
  width: min(85%, 330px);
  height: 85px;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  background: url(money.png?t=1751279894570) center top/100% no-repeat;
  font-family: Arial, "微軟正黑體", "Microsoft JhengHei";
  letter-spacing: -0.04em;
}
.box_3PD .danji-pd-body .pd-info-ticket > h4 {
  margin-left: 35%;
  -ms-flex-preferred-size: 65%;
      flex-basis: 65%;
  text-align: center;
  color: #ff8600;
  font-size: 35px;
  -webkit-margin-before: 1.6em;
          margin-block-start: 1.6em;
}
.box_3PD .danji-pd-body .pd-info-ticket > h4 > span {
  font-size: 55px;
}
.box_3PD .danji-pd-body .pd-info-brand {
  margin-left: 0;
  font-size: 2.375rem;
}
.box_3PD .danji-pd-body .pd-info-name {
  color: #404040;
  line-height: 1.3;
}
.box_3PD .danji-pd-body .pd-info-amount {
  margin-top: 0.5rem;
  font-size: 1.9rem;
}
.box_3PD .danji-pd-body .pd-info img {
  width: 100%;
  height: auto;
}
.box_3PD .danji-pd-body .pd-info-btn {
  margin: 0 auto 0.5rem;
}
.box_3PD .danji-pd-body .pd-info-notice {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .box_3PD .danji-pd-body {
    padding: 0.5rem 0.1rem 0.5rem;
  }
  .box_3PD .danji-pd-body2 {
    padding-top: 0;
  }
  .box_3PD .danji-pd-body .pd-info-ticket {
    height: 9.5vw;
  }
  .box_3PD .danji-pd-body .pd-info-ticket > h4 {
    font-size: 16px;
  }
  .box_3PD .danji-pd-body .pd-info-ticket > h4 > span {
    font-size: 26px;
  }
  .box_3PD .danji-pd-body .pd-info-brand {
    font-size: 1.1875rem;
  }
  .box_3PD .danji-pd-body .pd-info-name {
    font-size: 1.4rem;
  }
  .box_3PD .danji-pd-body .pd-info-amount {
    margin-top: 0.275rem;
    font-size: 0.9rem;
  }
  .box_3PD .danji-pd-body .pd-info-btn {
    margin: 0 auto 0.2rem;
  }
}
.box_4PD .danji-pd-body {
  text-align: center;
  padding: 0rem 0.25rem 0rem;
  gap: 0;
}

.box_4PD .danji-pd-body2 {
  padding: 0.5rem 0.1rem 0.5rem;
}

.box_4PD .danji-pd-body .pd-info {
  border-right: solid #a8a8a8 1px;
  border-top: solid #a8a8a8 1px;
}

.box_4PD .danji-pd-body .pd-info-01 {
  border-top: none;
}

.box_4PD .danji-pd-body .pd-info-02 {
  border-right: none;
  border-top: none;
}

.box_4PD .danji-pd-body .pd-info-03 {
  border-bottom: solid #a8a8a8 1px;
}

.box_4PD .danji-pd-body .pd-info-04 {
  border-right: none;
  border-bottom: solid #a8a8a8 1px;
}

.box_4PD .danji-pd-body .pd-info-ticket {
  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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 6% auto 5%;
  padding-top: 0;
  width: min(60%, 330px);
  height: 90px;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  background: url(money.png?t=1751279894570) center top/100% no-repeat;
  font-family: Arial, "微軟正黑體", "Microsoft JhengHei";
  letter-spacing: -0.04em;
}

.box_4PD .danji-pd-body .pd-info-ticket > h4 {
  margin-left: 35%;
  -ms-flex-preferred-size: 65%;
      flex-basis: 65%;
  text-align: center;
  color: #ff8600;
  font-size: 35px;
  -webkit-margin-before: 1.6em;
          margin-block-start: 1.6em;
}

.box_4PD .danji-pd-body .pd-info-ticket > h4 > span {
  font-size: 55px;
}

.box_4PD .danji-pd-body .pd-info-brand {
  margin-left: 0;
  font-size: 2.375rem;
}

.box_4PD .danji-pd-body .pd-info-name {
  color: #333333;
  line-height: 1.3;
}

.box_4PD .danji-pd-body .pd-info-amount {
  margin-top: 0.5rem;
  font-size: 1.9rem;
}

.box_4PD .danji-pd-body .pd-info img {
  width: 100%;
  height: auto;
}

.box_4PD .danji-pd-body .pd-info-btn {
  margin: 0 auto 0.5rem;
}

.box_4PD .danji-pd-body .pd-info-notice {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .box_4PD .danji-pd-body {
    padding: 0rem 0.1rem 0.5rem;
  }
  .box_4PD .danji-pd-body2 {
    padding: 0rem 0.1rem 0.5rem;
  }
  .box_4PD .danji-pd-body .pd-info-ticket {
    height: 9.5vw;
  }
  .box_4PD .danji-pd-body .pd-info-ticket > h4 {
    font-size: 16px;
  }
  .box_4PD .danji-pd-body .pd-info-ticket > h4 > span {
    font-size: 26px;
  }
  .box_4PD .danji-pd-body .pd-info-brand {
    font-size: 1.1875rem;
  }
  .box_4PD .danji-pd-body .pd-info-name {
    font-size: 1.4rem;
  }
  .box_4PD .danji-pd-body .pd-info-amount {
    margin-top: 0.275rem;
    font-size: 0.9rem;
  }
  .box_4PD .danji-pd-body .pd-info-btn {
    margin: 0 auto 0.2rem;
  }
}
.notice {
  --notice-bg: #6c34db00;
  --notice-color: #404040;
  --notice-h4-color: #404040;
  margin: 1.5em auto;
  padding: 1.2em 1.4em;
  border-radius: 24px;
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: min(96%, 880px);
  color: var(--notice-color);
  background: var(--notice-bg);
  font-size: 1.75rem;
}
.notice ul {
  margin: 0;
}
.notice ul li {
  margin-bottom: 0.4em;
}
.notice ul li img.moStore {
  width: 60px;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.notice ul li img.eticket {
  width: 100px;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.notice h4 {
  color: var(--notice-h4-color);
  margin: 0.8rem 0 0.4rem;
}
.notice h4:first-child {
  margin-top: 0;
}
.notice h4:not(:first-child) {
  margin-top: 1em;
}

@media screen and (max-width: 767px) {
  :root {
    --mb-message-02: 0.9375rem;
  }
  .notice {
    font-size: var(--mb-message-02);
    width: 96%;
    padding: 1em 1.5em;
    border-radius: 2vw;
  }
  .notice ul {
    padding-left: 1.5em;
  }
  .notice ul li {
    margin-bottom: 0.25em;
  }
  .notice ul li img.moStore {
    width: 9vw;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .notice ul li img.eticket {
    width: 12vw;
    -webkit-box-shadow: none;
            box-shadow: none;
  }
}
/*AD廣告區-960x300*/
.Area_AD1 .Area_swiper {
  margin: 0 auto;
  padding: 0;
}

.Area_AD1 .Area_swiper img {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: auto;
}

.Area_AD1 .Area_swiper_box {
  width: 96%;
  padding-bottom: 0;
}

.Area_AD1 li {
  display: block;
}

@media screen and (min-width: 768px) {
  /*.Area_AD:before { content: ""; position: absolute; top: -8px; left: 0; width: 1220px; height: 168px;}*/
  .Area_AD1 .Area_swiper {
    width: 88%;
    padding-bottom: 20px;
    margin: 0 auto;
  }
  .Area_AD1 .Area_swiper img {
    border-radius: 1em;
  }
  .Area_AD1 .Area_swiper_box .pagination {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  /*微調間距*/
  .Area_AD1 {
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 767px) {
  .Area_AD1 .Area_swiper {
    width: 96%;
    height: 30vw;
  }
  .Area_AD1 .Area_swiper img {
    border-radius: 2vw;
  }
  .Area_AD1 .PD_layout[data-pd-li*=BN-AWD] .PD_img {
    display: block !important;
  }
  .Area_AD1 .Area_swiper_box .pagination {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}
.message-table {
  --th-color: #1eaabd;
  --th-bg: #ffffff;
  --td-color: #333333;
  --td-bg: #ffffff;
  --border-color: rgba(64,64,70,.3);
  width: min(96%, 800px);
  margin-inline: auto;
}
.message-table table {
  width: 100%;
  overflow: hidden;
  font-size: 2rem;
  border-spacing: 0;
  font-weight: bolder;
  border-radius: 24px;
}
.message-table table th, .message-table table td {
  padding-block: 1.35rem;
}
.message-table table th {
  color: var(--th-color);
  background: var(--th-bg);
  border-color: var(--border-color);
  border-width: 0 1px 1px 0;
  border-style: solid;
}
.message-table table td {
  color: var(--td-color);
  background: var(--td-bg);
  padding-block: 1.3rem;
  border-color: var(--border-color);
  border-width: 0 1px 1px 0;
  border-style: solid;
}
.message-table table td:last-child {
  border-width: 0 0 1px 0;
}
.message-table table tr:last-child td {
  border-width: 0 1px 0 0;
}
.message-table table tr:last-child td:last-child {
  border-width: 0;
}
.message-table table .font-style--number {
  font-size: 1.2em;
  font-family: "Century Gothic", "微軟正黑體", "Microsoft JhengHei", Arial;
}
.message-table table .table-amount {
  font-size: 1.5em;
}

@media screen and (max-width: 767px) {
  .message-table table {
    width: 100%;
    overflow: hidden;
    font-size: 1rem;
    border-radius: 2vw;
  }
  .message-table table th {
    padding-block: 0.65rem;
  }
  .message-table table td {
    padding-block: 0.6rem;
    border-width: 0 0.1vw 0.1vw 0;
  }
}
.game-award {
  position: relative;
  margin-inline: auto;
  width: min(96%, 800px);
  font-family: "Century Gothic", "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif;
}
.game-award .PD_box {
  margin-top: 12px;
  margin-bottom: 12px;
}
.game-award .PD_box ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
}
.game-award .PD_box ul li {
  padding: 1.5em 0;
  width: 100%;
  background-color: #ffffff;
  border-radius: 15px;
}
.game-award .tickets {
  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;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 7% auto 4%;
  padding-top: 2%;
  width: min(65%, 330px);
  height: 88px;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  background: url(money.png?t=1751279894570) center top/100% no-repeat;
}
.game-award h4 {
  margin-left: 31%;
  -ms-flex-preferred-size: 62%;
      flex-basis: 62%;
  text-align: center;
  color: #ff8600;
  font-size: 26px;
}
.game-award h4 > span {
  font-size: 56px;
}
.game-award h3 {
  margin: 0;
  color: #404040;
  font-size: 34px;
}
.game-award h3 b {
  font-size: 20px;
}
.game-award h5 {
  margin: 0;
  color: #404040;
  font-size: 1.1em;
  font-weight: 400;
}
.game-award .coupon .tickets {
  padding-top: 0;
  background: url(coupon.png?t=1751279894570) center top/100% no-repeat;
}
.game-award .coupon h4 {
  color: #f200ca;
  -ms-flex-preferred-size: 67%;
      flex-basis: 67%;
  margin-left: 33%;
}
.game-award .title_txt {
  margin: 0 18%;
  padding: 1% 0;
  color: #fff;
  background-color: #38c3c4;
  border: #ffe49a 1px solid;
  border-radius: 10em;
  font-weight: 800;
}
.game-award .PD3 ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.game-award .PD3 .tickets {
  width: min(70%, 330px);
  height: 62px;
}
.game-award .PD3 h4 {
  -webkit-transform: scale(0.75);
          transform: scale(0.75);
}
.game-award .PD1.PD3 ul li:first-child {
  grid-column-end: 4;
}
.game-award .PD1 ul li:first-child {
  grid-column-start: 1;
  grid-column-end: 3;
}
.game-award .PD1 ul li:first-child .tickets {
  margin-top: 5%;
  padding-top: 1.9%;
  height: 113px;
}
.game-award .PD1 ul li:first-child .txt {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.game-award .PD1 ul li:first-child .txt h5 {
  margin-left: 2%;
}
.game-award .PD1 ul li:first-child h4 {
  -webkit-transform: scale(1.18);
          transform: scale(1.18);
}
.game-award .PD1.coupon ul li:first-child .tickets {
  padding-top: 0;
}

@media screen and (max-width: 767px) {
  .game-award {
    width: min(94%, 800px);
  }
  .game-award .PD_box {
    margin-top: 1.8vw;
    margin-bottom: 1.8vw;
  }
  .game-award .PD_box ul {
    grid-gap: 1.8vw;
  }
  .game-award .PD_box ul li {
    padding: 0.7em 0;
    border-radius: 2.5vw;
  }
  .game-award .tickets {
    width: min(70%, 42vw);
    height: 11vw;
  }
  .game-award h4 {
    font-size: 4vw;
    font-family: Arial, "微軟正黑體", "Microsoft JhengHei";
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .game-award h4 > span {
    font-size: 6.8vw;
  }
  .game-award h3 {
    font-size: 1.1em;
  }
  .game-award h3 b {
    font-size: 3vw;
  }
  .game-award h5 {
    font-size: 0.9em;
  }
  .game-award .PD3 .tickets {
    width: min(75%, 42vw);
    height: 7.8vw;
  }
  .game-award .PD1 ul li:first-child .tickets {
    height: 14.8vw;
  }
  .game-award .PD1 ul li:first-child h4 {
    -webkit-transform: scale(1.3);
            transform: scale(1.3);
  }
}
.award_btn {
  position: relative;
}
.award_btn .go_bt {
  font-size: 30px;
  background-color: #404040;
  color: #ffffff;
  border-radius: 30px;
  font-weight: bold;
  padding: 10px 30px;
}
@media screen and (max-width: 767px) {
  .award_btn .go_bt {
    padding: 4px;
    font-size: 4vw;
  }
}

.award_btn ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
  margin: 0;
  padding: 0;
}

.award_btn li {
  list-style: none;
}

.award_btn img {
  width: 100%;
}

@media screen and (min-width: 768px) {
  .award_btn {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-transform-origin: center;
            transform-origin: center;
  }
  .award_btn li:nth-of-type(1) {
    margin-right: 20px;
  }
}
@media screen and (max-width: 767px) {
  .award_btn li:nth-of-type(1) {
    width: 44%;
  }
  .award_btn li:nth-of-type(2) {
    width: 49%;
  }
}
/*贈品浮層*/
@media screen and (max-width: 767px) {
  .agreeArea .box_title {
    text-align: center;
    padding: 5vw 0 2vw;
    font-size: 5vw;
    font-weight: bold;
  }
  .agreeArea .txt_into {
    margin: 0 auto;
  }
  .agreeArea li a {
    display: block;
    word-break: break-all;
  }
}
/*浮層--加價購商品介紹*/
.agreeArea .box {
  width: 100%;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.agreeArea .box table {
  border-collapse: unset;
  border: 2px solid #777777;
  border-radius: 12px;
  width: 90%;
  font-size: 0.9em;
  font-weight: 500;
}

.agreeArea .message-table table th {
  color: #000;
}

.agreeArea .box_title {
  padding: 5% 5% 0;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.agreeArea .box_title b {
  position: relative;
  display: block;
  margin-bottom: 0.5rem;
}

.agreeArea .box_title span {
  z-index: 1;
  position: relative;
  display: inline-block;
  padding: 0 0.5em;
  background-color: #fff;
}

.agreeArea .box_title b:before {
  content: "";
  position: absolute;
  bottom: -0.85em;
  display: block;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.agreeArea .box_title img {
  width: 35%;
}

.agreeArea .box_sub {
  text-align: center;
}

.agreeArea .box_derails {
  padding: 0 5%;
  font-weight: 800;
}

.agreeArea .box_derails hr {
  margin: 0.8em 0;
}

.agreeArea .box_derails dt {
  margin: 0.5em 0;
  text-align: left;
}

.agreeArea .box_derails ul {
  color: #9d9d9d;
  line-height: 1.2;
  padding-left: 1.5rem;
  margin: 0.5em 0 0.8em;
}

.agreeArea .box li {
  line-height: 1.4;
}

.agreeArea .box_derails dd ul {
  margin: 0;
  padding: 0;
  padding-left: 2em;
}

.agreeArea .box_derails dd li img {
  margin: 0.2em 0;
  width: 70%;
  max-width: 480px;
  -webkit-box-shadow: 0em 0.3em 1.5em rgba(0, 0, 0, 0.1);
          box-shadow: 0em 0.3em 1.5em rgba(0, 0, 0, 0.1);
}

.agreeArea .box_derails .box_title {
  text-align: center;
  padding: 2% 0;
  background: #ececec;
}

.agreeArea .box_derails .txt_into {
  color: #5a5958;
  margin: 0 0 5%;
}

.agreeArea .box_derails .txt_spec ul {
  padding-left: 1em;
  list-style: none;
}

.agreeArea .box_derails .txt_note ul {
  list-style: decimal;
}

.agreeArea .box_pic {
  padding: 0;
  width: 85%;
  margin: 0 auto;
}

@media screen and (min-width: 768px) {
  .agreeArea .box li {
    margin: 0 20px 8px 0px;
  }
  .agreeArea .box_title {
    font-size: 40px;
  }
  .agreeArea .box_title span {
    font-size: 34px;
  }
  .agreeArea .box_sub {
    font-size: 18px;
    line-height: 30px;
    margin: 22px 0 10px;
    padding: 0 5%;
  }
  .agreeArea .box_derails {
    font-size: 30px;
  }
  .agreeArea .box_derails .box_title {
    font-size: 34px;
  }
  .agreeArea .box_derails ul {
    padding-left: 2rem;
  }
  .agreeArea .box_derails dd {
    font-size: 26px;
  }
}
@media screen and (max-width: 767px) {
  .agreeArea .box_title {
    font-size: 1.3rem;
  }
  .agreeArea .box_title span {
    font-size: 1.25rem;
  }
  .agreeArea .box_sub {
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0.5rem 0 0.5rem;
    padding: 0 10%;
  }
  .agreeArea .box_derails {
    font-size: 1.25rem;
  }
  .agreeArea .box li {
    margin: 0 20px 6px 0px;
  }
  .agreeArea .box li small {
    line-height: 1;
  }
  .agreeArea .box_derails dd {
    font-size: 1.1rem;
  }
  .agreeArea .box_title b:before {
    content: "";
    bottom: -0.95em;
  }
}
.btn_alert_danji {
  position: absolute;
  top: 16%;
  left: 0;
  z-index: 99;
}

.btn_alert_game {
  position: absolute;
  top: 18vw;
  left: 0;
  z-index: 99;
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  -webkit-transform-origin: left;
          transform-origin: left;
}

.game_remind {
  --remind-txtcolor: #ffffff;
  --remind-bg: #007c9e;
  background-color: var(--remind-bg);
  border-radius: 0 5em 5em 0;
  width: 60px;
  height: 42px;
  -webkit-transform: translateX(-1px);
          transform: translateX(-1px);
}

.danji-pd-container .game_remind {
  --remind-txtcolor: #ffffff;
  --remind-bg: #007c9e;
  border-color: transparent;
}

.game_remind::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='295px' height='348px'%3E%3Cpath fill-rule='evenodd' fill='rgb(256, 256, 256)' d='M294.496,272.105 C294.132,274.973 292.956,281.433 289.179,280.959 L3.553,280.767 C-6.068,258.136 13.398,252.817 26.074,240.802 C38.266,229.244 45.048,213.504 45.368,197.353 C45.967,167.135 43.205,136.722 48.384,106.746 C50.908,92.140 55.319,77.409 63.932,65.166 C73.634,51.377 88.810,43.321 103.319,35.455 C106.757,33.590 110.229,31.782 113.768,30.114 C120.273,27.049 126.961,23.729 134.094,22.607 C136.917,20.594 131.951,1.633 145.469,0.261 C153.283,-0.532 158.630,2.684 159.588,10.698 C159.970,13.894 158.799,19.212 160.668,21.349 C175.635,27.276 190.432,33.859 204.115,42.388 C220.597,52.663 235.303,66.657 241.282,85.624 C250.847,115.972 250.296,150.413 249.867,181.989 C249.514,207.900 253.982,227.635 274.329,245.364 C278.812,249.271 286.626,252.978 290.213,257.809 C292.372,260.716 293.249,263.918 294.496,267.217 C294.364,268.806 294.692,270.552 294.496,272.105 ZM169.696,342.234 C136.983,357.435 98.562,337.069 94.256,301.434 L198.771,301.434 C198.125,318.698 185.022,335.113 169.696,342.234 Z'/%3E%3C/svg%3E");
  content: "";
  position: absolute;
  top: 0.8em;
  left: 0.25em;
  display: inline-block;
  width: 1.5em;
  height: 1.1em;
  background-size: auto 100%;
  background-repeat: no-repeat;
}

.danji-pd-container .game_remind::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='295px' height='348px'%3E%3Cpath fill-rule='evenodd' fill='rgb(256, 256, 256)' d='M294.496,272.105 C294.132,274.973 292.956,281.433 289.179,280.959 L3.553,280.767 C-6.068,258.136 13.398,252.817 26.074,240.802 C38.266,229.244 45.048,213.504 45.368,197.353 C45.967,167.135 43.205,136.722 48.384,106.746 C50.908,92.140 55.319,77.409 63.932,65.166 C73.634,51.377 88.810,43.321 103.319,35.455 C106.757,33.590 110.229,31.782 113.768,30.114 C120.273,27.049 126.961,23.729 134.094,22.607 C136.917,20.594 131.951,1.633 145.469,0.261 C153.283,-0.532 158.630,2.684 159.588,10.698 C159.970,13.894 158.799,19.212 160.668,21.349 C175.635,27.276 190.432,33.859 204.115,42.388 C220.597,52.663 235.303,66.657 241.282,85.624 C250.847,115.972 250.296,150.413 249.867,181.989 C249.514,207.900 253.982,227.635 274.329,245.364 C278.812,249.271 286.626,252.978 290.213,257.809 C292.372,260.716 293.249,263.918 294.496,267.217 C294.364,268.806 294.692,270.552 294.496,272.105 ZM169.696,342.234 C136.983,357.435 98.562,337.069 94.256,301.434 L198.771,301.434 C198.125,318.698 185.022,335.113 169.696,342.234 Z'/%3E%3C/svg%3E");
  content: "";
}

.game_remind span {
  z-index: 1;
  position: relative;
  display: block;
  padding: 0.4em 0 0 0.85em;
  height: 2.4em;
  line-height: 1.1em;
  overflow: hidden;
  font-weight: 600;
  font-size: 0.88em;
  color: var(--remind-txtcolor);
  vertical-align: middle;
}

.WRAPPER {
  overflow: hidden;
}

.cantantBase1,
.cantantBase2 {
  display: none;
}/*# sourceMappingURL=pageLayout.min.css.map */