@charset "UTF-8";
/* ==========================================================================
   Normalize.scss settings
   @mixin ========================================================================= */
/**
 * Includes legacy browser support IE6/7
 *
 * Set to false if you want to drop support for IE6 and IE7
 */
/* Base
   @mixin ========================================================================= */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 * 3. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
 *  `em` units.
 */
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:400,500|Noto+Serif+TC:700&display=swap");
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

/**
 * Remove default margin.
 */
body {
  margin: 0;
}

/* HTML5 display definitions
   @mixin ========================================================================= */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

/**
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}

/* Links
   @mixin ========================================================================= */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active, a:hover {
  outline: 0;
}

/* Text-level semantics
   @mixin ========================================================================= */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0;
}

/**
 * Addresses styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   @mixin ========================================================================= */
/**
 * 1. Remove border when inside `a` element in IE 8/9/10.
 * 2. Improves image quality when scaled in IE 7.
 */
img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   @mixin ========================================================================= */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 * Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   @mixin ========================================================================= */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *  Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 * 4. Improves appearance and consistency in all browsers.
 */
button,
input,
optgroup,
select,
textarea {
  outline: 0;
  color: inherit;
  font: inherit;
  margin: 0;
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *  and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *  `input` and others.
 * 4. Removes inner spacing in IE 7 without affecting normal text inputs.
 *  Known issue: inner spacing remains in IE 6.
 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 *  Known issue: excess padding remains in IE 6.
 */
input[type="checkbox"],
input[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 * 3. Corrects text not wrapping in Firefox 3.
 * 4. Corrects alignment displayed oddly in IE 6/7.
 */
legend {
  border: 0;
  padding: 0;
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}

/* Tables
   @mixin ========================================================================= */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

html, body {
  font-family: 'Noto Sans TC', 'Noto Serif TC', '微軟正黑體', serif, sans-serif;
}

html {
  font-size: 100vw;
  width: 100%;
  height: auto;
  background-color: #fff;
}

@media screen and (min-width: 640px) {
  html {
    font-size: 640px;
  }
}

body {
  position: relative;
  font-size: 0.05rem;
  max-width: 640px;
  min-width: 320px;
  margin: 0 auto;
}

@media screen and (min-width: 640px) {
  body {
    width: 640px;
  }
}

.scroll-hide {
  overflow: hidden;
}

.star {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.star--body {
  top: 0.46875rem;
}

.star-outline {
  position: absolute;
  background-image: url("../images/background/star.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .star-outline {
    background-image: url("../images/background/star@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .star-outline {
    background-image: url("../images/background/star@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .star-outline {
    background-image: url("../images/background/star@2x.png");
  }
}

.star-outline--one {
  left: 0.01562rem;
  width: 0.04688rem;
  height: 0.04688rem;
}

.star-outline--two {
  top: 0.03438rem;
  left: 0.08125rem;
  width: 0.06875rem;
  height: 0.06875rem;
}

.star-outline--three {
  top: -0.05625rem;
  right: 0.38125rem;
  width: 0.04688rem;
  height: 0.04688rem;
}

.star-outline--four {
  top: -0.025rem;
  right: 0.23438rem;
  width: 0.03125rem;
  height: 0.03125rem;
}

.star-outline--five {
  top: 0.0125rem;
  right: 0.05rem;
  width: 0.10312rem;
  height: 0.10312rem;
}

.header {
  padding: 0.125rem 0 0.01562rem 0;
  background-color: #fffcca;
}

.header-group {
  width: 100%;
  height: 100%;
  position: relative;
  display: inline-block;
}

.header-group .htitle{ font-size:0.07rem; color:#9f6935; font-weight:bold; text-align:center; margin: 0 0 0.03rem 0; }

.nav {
  position: absolute;
  top: 0.00625rem;
  left: 0.06875rem;
}

.nav-back {
  text-decoration: none;
}

.poko-title {
  position: relative;
  margin: 0.01875rem auto 0 auto;
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 9;
}

.poko-title--cupon {
  left: -0.03438rem;
  width: 0.58125rem;
  height: 0.07812rem;
  background-image: url("../images/title/title-cupon.png");
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .poko-title--cupon {
    background-image: url("../images/title/title-cupon@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .poko-title--cupon {
    background-image: url("../images/title/title-cupon@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .poko-title--cupon {
    background-image: url("../images/title/title-cupon@2x.png");
  }
}

.poko-title--record {
  left: -0.03438rem;
  width: 0.41875rem;
  height: 0.075rem;
  background-image: url("../images/title/title-point_record.png");
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .poko-title--record {
    background-image: url("../images/title/title-point_record@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .poko-title--record {
    background-image: url("../images/title/title-point_record@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .poko-title--record {
    background-image: url("../images/title/title-point_record@2x.png");
  }
}

.poko-title--gift {
  left: -0.01562rem;
  width: 0.41875rem;
  height: 0.075rem;
  background-image: url("../images/title/title-gift.png");
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .poko-title--gift {
    background-image: url("../images/title/title-gift@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .poko-title--gift {
    background-image: url("../images/title/title-gift@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .poko-title--gift {
    background-image: url("../images/title/title-gift@2x.png");
  }
}




@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .poko-title::after {
    background-image: url("../images/title/title-poko@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .poko-title::after {
    background-image: url("../images/title/title-poko@2x.png");
  }
}

.poko-text {
  font-size: 0.03438rem;
  color: #222;
  display: inline-block;
}

.poko-text.block{ display:block; }

.poko-text--small {
  font-size: 0.04063rem;
  font-weight: 400;
  line-height: 0.04063rem;
  color: #222;
}

.poko-text--medium {
  font-size: 0.04688rem;
  font-weight: 400;
  line-height: 0.04688rem;
  color: #222;
}

.poko-text--large {
  font-size: 0.05312rem;
  font-weight: 400;
  line-height: 0.05312rem;
  color: #222;
}

.poko-text--special {
  font-size: 0.10938rem;
  font-weight: 400;
  line-height: 0.10938rem;
  color: #222;
  line-height: 0.08438rem;
  margin-top: 0.025rem;
  font-family: sans-serif;
}

.poko-text--white {
  color: white;
}

.poko-text--blue {
  color: #013ca6;
}

.textblue .poko-text--blue {
  color: #65aacf;
}

.poko-text--gray {
  color: #a0a0a0;
}

.poko-text--pink {
  color: #ff6999;
}

.poko-text--regular {
  font-weight: 500;
}

.poko-text--bold {
  font-weight: 700;
}

.poko-text--coffee{
	color:#9f6935;
}

.poko-text--black{
	color:#333;
}

.poko-text--spacing {
  letter-spacing: 0.00391rem;
}

.poko-text--other1 {
  position: relative;
  bottom: 0.00625rem;
  right: -0.00937rem;
}

.poko-text--other2 {
  letter-spacing: 0.00937rem;
}

.points {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.07812rem;
  margin-top: 0.01875rem;
}

.points-cut {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -ms-flex-preferred-size: 50%;
      flex-basis: 50%;
}

.points-cut--expire {
  padding-left: 0.09375rem;
}

.points-divide {
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translate3d(-100%, 0, 0);
          transform: translate3d(-100%, 0, 0);
  display: inline-block;
  width: 0.00625rem;
  height: 100%;
  background-color: #013ca6;
  margin: 0;
  border: 0;
}

.points-time {
  -webkit-box-flex: 2.2;
      -ms-flex: 2.2;
          flex: 2.2;
}

.points-type {
  -webkit-box-flex: 2.4;
      -ms-flex: 2.4;
          flex: 2.4;
}

.points-type .small{ font-size:0.7em; color:#777; }

.points-consume {
  -webkit-box-flex: 1.4;
      -ms-flex: 1.4;
          flex: 1.4;
  text-align: right;
}

.main {
  position: relative;
  margin-top: -0.00313rem;
  background-color: #fffcca;
}

.main.bgs{ background-image:url(../images/point/bg_s.jpg); background-repeat:no-repeat; background-position: center top; background-size:100%; background-color:#fff; }


.main-star {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/background/main-bg.png");
  background-size: 100% auto;
  background-position: center 0.1875rem;
  background-repeat: no-repeat;
  z-index: -1;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .main-star {
    background-image: url("../images/background/main-bg@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .main-star {
    background-image: url("../images/background/main-bg@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .main-star {
    background-image: url("../images/background/main-bg@2x.png");
  }
}

.container {
  min-height: calc(100vh - 0.45137rem);
  padding: 0.10938rem 0.06875rem 0 0.06875rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}


.poko-hint{ padding:0; font-size: 0.04rem; text-align: center; color:#F00; font-weight:bold; }

.poko {
  padding: 0.075rem 0;
}

.poko-cut {
  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-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.poko-cut--row {
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.list {
  padding-left: 0;
  margin: 0.0375rem 0;
}

.list-page {
  list-style: none;
}

.list-item {
  padding: 0.01562rem 0;
}

.list-sty_line .list-item{ padding: 0.03rem 0; border-bottom:0.004rem dashed #ccc; }

.button {
  position: relative;
  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;
  margin-bottom: 0.05rem;
  text-decoration: none;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 0.01875rem;
  height: 0.02813rem;
  background-image: url("../images/arrow.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.bookmarkbox{ padding-top: 0.04rem; padding-bottom:0.05rem; margin:0 -0.06875rem }
.bookmarkbox .boxs{ display: flex; align-items: flex-end; position:relative; gap:10px; border-bottom: 5px solid #bae3f9; padding:0 0.06875rem; }
.bookmarkbox .boks{ padding:0 15px; line-height:0.1rem; font-size:0.045rem; font-weight:bold; background:url(../images/point/boks_tag02.png) no-repeat top center; background-size:cover; color:#fff; text-decoration:none; width:50%; text-align:center; position:relative; z-index:5; }
.bookmarkbox .boks.hover{ font-size:0.045rem; font-weight:500; color:#9f6935; background-image:url(../images/point/boks_tag01.png); }

.Category{ color:#fff; font-size:24px; font-weight:bold; padding:5px 20px; border-radius:50px; box-shadow:0 5px 10px rgba(0,0,0,.2); display:inline-block;}
.Category.style01{ background-color:#063786;}
.Category.style02{ background-color:#b38247;}
.Category_line{ border-top:2px dashed #fff090; margin-bottom:0;}
.exchange_style{ background:none;}
.exchange_style .htitle{ margin:0;}
.exchange_style .htitle img{ max-width:100%;}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .button::after {
    background-image: url("../images/arrow@2x.png");
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .button::after {
    background-image: url("../images/arrow@3x.png");
  }
}

@media screen and (min-width: 640px) {
  .button::after {
    background-image: url("../images/arrow@2x.png");
  }
}

.button--large {
  width: 0.825rem;
  height: 0.20312rem;
  background-color: #dbc35a;
  border-radius: 0.10938rem;
}

.button--large::after {
  right: 0.11563rem;
  width: 0.01875rem;
  height: 0.02813rem;
}

.button--small {
  width: 0.39062rem;
  height: 0.14062rem;
  background-color: #dbc35a;
  border-radius: 0.07812rem;
}

.button--small::after {
  right: 0.05rem;
}

.list-prev, .list-next {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.01875rem 0 0.01875rem 0.03125rem;
  border-color: transparent transparent transparent #dbc35a;
}

.list-prev {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

.list-prev-off, .list-next-off {
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.01875rem 0 0.01875rem 0.03125rem;
  border-color: transparent transparent transparent #d1d1d1;
}
.list-prev-off {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}


.disable {
  visibility: hidden;
}

.gift {
  list-style: none;
  padding: 0.04688rem 0;
  margin: 0;
}

.gift-time {
  display: inline-block;
  padding: 0.02187rem 0;
}

.gift-content {
  position: relative;
  background-color: #fff;
}

.gift-content:not(:last-child) {
  padding: 0 0.06875rem 0.0625rem 0.06875rem;
  margin: 0 -0.06875rem 0.0625rem -0.06875rem;
}

.gift-content:not(:last-child)::after {
  content: '';
  width: 100%;
  height: 0.00313rem;
  background-color: #ecf3f9;
  position: absolute;
  left: 0;
  bottom: 0;
}

.gift-list {
  margin: 0;
  padding: 0;
}

.gift-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 0.00625rem 0;
  padding-right:0.1rem;
}

.gift-list li{ position:relative; }
.gift-list li .poko-text--medium{ position:absolute; right:0; top:0; }

.gift-point {
  width: 0.00625rem;
  height: 0.00625rem;
  border-radius: 50%;
  background-color: #000000;
  margin: 0.025rem 0.025rem 0.025rem 0.00937rem;
}

.gift-name {
  display: inline-block;
  max-width: 0.625rem;
  margin-right: 0.125rem;
  line-height: 0.05625rem;
}

.gift-space {
  display: inline;
  color: #222;
  text-decoration:none;
}

.gift-space a{ color:#013ca6; text-decoration: underline; }

.gift-unit {
  white-space: nowrap;
  padding: 0.01562rem 0;
}

.dot {
  position: relative;
  width: 0.71875rem;
  margin: 0.03125rem auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.dot-contain {
  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-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-decoration: none;
}

.dot-contain.active > .dot-shape {
  width: 0.07812rem;
  height: 0.07812rem;
  background-color: #dbc35a;
  line-height: 0.07812rem;
}

.dot-shape {
  display: inline-block;
  width: 0.0625rem;
  height: 0.0625rem;
  border-radius: 50%;
  background-color: #d1d1d1;
  text-align: center;
  line-height: 0.0625rem;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

.dot-number {
  position: absolute;
}

.extxt{ margin-left:0.04rem; }
.extxt-a{ font-size:0.036rem; color:#333; display:inline; }
.extxt-b{ font-size:0.036rem; color:#e888b1; display:inline; }
.extxt-b span{ font-size:0.036rem; color:#333; }
.extxt-b a{ color: #013ca6; }


/*新樣式*/
.pointbanner{ background-color:#fffcca; background-image:url(../images/point/bg.png); background-size:100%; padding: 0.03rem 0 0.03rem 0; background-repeat:no-repeat; }
.point_titleimg{ margin: 0 0 0.01rem 0; }
.point_titleimg img{ width:100%; }
.point_newbox{ padding:0 20px; }
.point_newbox .pbox{ border:4px solid #9f6935; background:#fff; padding: 0.03rem; position:relative; display:flex; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; position:relative; }
.point_newbox .pbox .imgs{ position:absolute; display:block; width:15%; top:-45%; left:-2%; }
.point_newbox .pbox .imgs img{ width:100%; }
.point_newbox .pbox .grids{ width:50%; border-right:2px solid #e1d0bf; }
.point_newbox .pbox .grids:last-child{ border:none; }
.point_newbox .pbox .grids .titles{ font-size:0.036rem; text-align:center; color:#65aacf; margin:0 0 10px 0; }
.point_newbox .pbox .grids .txts{ text-align:center; color:#333; font-size:0.0245rem; line-height:100%; }
.point_newbox .pbox .grids .txts span{ color:#ef5656; font-weight:bold; font-size:0.08rem; line-height:100%; }

.point_block{ background:#fffcca; padding:0.01rem 20px; }
.point_btns{ margin-left:-20px; display:flex; flex-wrap:wrap;  }
.point_btns .btns{ width:50%; margin-bottom:20px; padding-left:20px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.point_btns .btns .bs{ display:block; width:100%; background:#fff; padding-bottom:100%; border:0.01rem solid #f9f1aa; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; box-shadow: 5px 5px 5px rgba(207,161,80,0.5); position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.point_btns .btns .bs .bline{ position:absolute; top:10px; left:10px; right:10px; bottom:10px; margin:auto; z-index:1; border:2px dashed #f9f1aa; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; display:flex; flex-direction:column; justify-content:center; align-items:center; }
.point_btns .btns .bs .bimg{ width:100%; text-align:center; font-size:0; }
.point_btns .btns .bs .bimg img{ max-width:100%; }
.point_btns .btns .bs .bTxt{ font-size:0.05rem; font-weight:bold; color:#9f6935; text-align:center; }



/*barcode*/
.barcodebox{ padding:20px; background:#fffcca; background-image:url(../images/point/bg_star.png); background-position:center; min-height:100vh; display: flex; align-items: center; justify-content: center; box-sizing:border-box; flex-direction: column;}
.barcodebox .lines{ background:#fff; border:1px solid #ccc; padding:20px; position:relative; }
.barcodebox .lines .titleimg{ font-size:0; margin:0 0 20px 0; }
.barcodebox .lines .code{ font-size:0; }
.barcodebox img{ max-width:100%; }
.barcodebox .lines .textbox{ margin:0 0 15px 0; }
.barcodebox .lines .text_t01{ font-size:20px; text-align:center; color:#65aacf; }
.barcodebox .lines .text_t02{ font-size:16px; text-align:center; color:#333; }  
.barcodebox .lines.WriteOff::after{ content:"已成功兌換"; display:flex; align-items: center; justify-content: center; position:absolute; top:0.43rem; left:10px; right:10px; bottom:10px; background-color:rgba(0,0,0,.3); color: #fff; font-size: 30px; font-weight: bold; backdrop-filter: blur(4px);}

.BarcodBtnBox{ padding-top:20px; width:100%;}
.BarcodBtnBox .BarcodBtn{ display:block; width:100%; background:#fff; padding:15px 20px; border:0.01rem solid #f9f1aa; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; box-shadow: 5px 5px 5px rgba(207,161,80,0.5); position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; font-size:18px; }
.BarcodBtnBox .hand_point{ width:24px; margin-left:5px; vertical-align:middle;}

/* Barcode v.240709 */
.barTitle{ color: #ef5047; font-size: /*22px*/0.065rem; font-weight: bold; width: 100%; padding: 0 3px 15px; box-sizing: border-box; }

.bar-btn-box{ width: 100%; margin: 20px 0px; display: inline-flex; justify-content: space-around; align-items: stretch; box-sizing: border-box; }
.bar-btn-box .bar-btn-success,
.bar-btn-box .bar-btn-cancel{ font-size: 20px; width: 47.5%; padding:15px 2.5px; cursor: pointer; }

.bar-btn-box .bar-btn-success{ color: #cf534c; }
.bar-btn-box .bar-btn-cancel{ color: #7D7D9E; }

.bar-btn-box .BarcodBtn:first-child{ margin-right: auto; }
.bar-btn-box .BarcodBtn:last-child{ margin-left: auto; }

.bar-text-date{ margin: auto; width: 100%; display: inline-flex; align-items: center; justify-content: center; }
.bar-text-date .date-title{}
.bar-text-date .date-content{}

.bar-description{ font-size: 16px; }
.bar-description span{ color: red; }



/* LightBox */
.LightBox,
.LightBox *{ box-sizing: border-box; }
.LightBox{ position:fixed; top:0; left:0; right:0; bottom:0; background-color:rgba(0,0,0,.7); display: flex; flex-direction: column-reverse; z-index:1;}
.LightBox .CBArea{ background-color:#fff; padding:30px; border-radius:30px 30px 0 0;}
.LightBox .CBArea .LB-Title{ font-size:16px; color:#e14530; font-weight:900; position:relative; margin: auto;}
.LightBox .CBArea .LB-Title::after{ content:""; display:block; border-top:3px solid #e14530;}
.LightBox .CBArea .Descripcion{ font-size:22px;}
.LightBox.Photo{ justify-content: center; }
.LightBox.Photo .CBArea{ background: none; }
.LightBox.Photo .CBArea .ItemTitle{ color: #fff; }
.LightBox .PhotoDisplay{ width: 100%; padding-top: /*100*/50%; background-color: #eee; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 10px; }
.LightBox .PhotoArea{ width: calc( 100% + 60px); overflow-y: hidden; white-space:nowrap; margin: 0 -30px; padding: 0 30px; overflow-x: auto; font-size: 0; }
.LightBox .PhotoArea .PhotoBox{ width: 60px; height: 60px; display: inline-block; background: center no-repeat #fff; background-size: cover; border-radius: 5px; margin-right: 5px;}
.BtnStyle01{ width: 100%; color: #333; font-size: 20px; font-weight: 700; display: flex; border:1px solid #E2C290; background-color: #E2C290; border-radius: 5px; line-height: 48px; align-items: center; justify-content: center; padding: 0 20px;}
.BtnStyle02{ width: 100%; color: #E2C290; font-size: 20px; font-weight: 700; display: flex; border:1px solid #E2C290; background-color: #fff; border-radius: 5px; line-height: 48px; align-items: center; justify-content: center; padding: 0 20px;}
.Descripcion{ font-size: 16px; font-weight: 500; color: #333; text-align: left; gap:10px; padding: 5px 0;}

.LightBox.LightBoxMiddle{ justify-content: center; align-items: center; }
.LightBox.LightBoxMiddle .CBArea{ width: 400px; max-width: 95%; display: inline-flex; flex-direction: row; flex-wrap: wrap; border-radius: 30px; }

.LightBox.LightBoxMiddle .LB-Title{ width: 100%; }
.LightBox.LightBoxMiddle .BtnStyle02{ margin-left: auto; }

.LightBox.LightBoxMiddle .BtnStyle01,
.LightBox.LightBoxMiddle .BtnStyle02{ width: 47.5%; }

.LightBox.LightBoxDefault *{ font-weight: initial; }
.LightBox.LightBoxDefault .CBArea{ padding: 20px 20px 10px; }
.LightBox.LightBoxDefault .LB-Title{ display: none; }
.LightBox.LightBoxDefault .Descripcion{ margin: 0 0 10px; }
.LightBox.LightBoxDefault .BtnStyle01,
.LightBox.LightBoxDefault .BtnStyle02{ color: #333; width: 70px; padding: 0 5px; margin-left: auto; border: unset; background: unset; }
.LightBox.LightBoxDefault .BtnStyle02{ margin-left: 5px; }

/*補登畫面*/
.siblock{ max-width:640px; min-width:320px; margin:auto; min-height:100vh; background-image:url(../images/farther/bg.jpg); background-repeat:repeat-y; background-size:100%; border-top: 1px solid transparent; }
.sibox{ background:#b9e3f9; padding:20px 0 0 0; position:relative; }
.sibox .stars{ position:absolute; }
.sibox .stars.sty01{ width:10%; top:40%; right:6%; }
.sibox .stars.sty02{ width:3%; top:25%; right:25%; }
.sibox .stars.sty03{ width:4%; top:15%; right:37%; }
.sibox .stars.sty04{ width:4%; top:48%; left:2%; }
.sibox .stars.sty05{ width:5%; top:57%; left:8%; }
.sibox .stars:after{ content:""; display:block; width:100%; padding-bottom:100%; background-image:url(../images/farther/star.png); background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; background-repeat:no-repeat; background-position:center; }
.sibox .logo{ max-width:160px; width:30%; margin:auto; position:relative; z-index:10; }
.sibox .logo img{ width:100%; }
.sibox .maintitle{ text-align:center; position:relative; z-index:10; }
.sibox .maintitle img{ height:0.065rem; }
.si_bgs{ background-image:url(../images/farther/bg_header.jpg); background-repeat:no-repeat; background-position:center top; background-size:100%; padding: 0.05rem; }
.si_bgs.padtop{ padding-top:20%; }
.si_bgs .siimg{ padding:15% 0 0 0; }
.si_bgs .siimg img{ width:100%; }

.si_step{ text-align:center; max-width:490px; width:80%; margin:auto; padding:17% 0 7% 0; }
.si_step .sles{ position:relative; }
.si_step .sflex{ display:flex; position:relative; z-index:2; justify-content: space-between; }
.si_step .sflex .radiusgrid .radius{ width:30px; height:30px; background:#eee; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; margin:auto; transform:scale(0.7); transform-origin:center; }
.si_step .sflex .radiusgrid .rtxt{ text-align:center; font-size:0.022rem; color:#ddd; padding:5px 0 0 0; }
.si_step .linebox{ position:absolute; z-index:1; left:7%; right:7%; top:26%; margin:auto; height:5px; background:#eee; }

.si_step .sles.step01 .sflex .radiusgrid:nth-child(1) .radius{ background:#dbc35a; transform:scale(1); }
.si_step .sles.step01 .sflex .radiusgrid:nth-child(1) .rtxt{ color:#dbc35a; }
.si_step .sles.step02 .linebox:before{ content:""; display:block; width:50%; background:#dbc35a; height:5px; }
.si_step .sles.step02 .sflex .radiusgrid:nth-child(1) .radius{ background:#dbc35a; transform:scale(1); }
.si_step .sles.step02 .sflex .radiusgrid:nth-child(1) .rtxt{ color:#dbc35a; }
.si_step .sles.step02 .sflex .radiusgrid:nth-child(2) .radius{ background:#dbc35a; transform:scale(1); }
.si_step .sles.step02 .sflex .radiusgrid:nth-child(2) .rtxt{ color:#dbc35a; }
.si_step .sles.step03 .linebox:before{ content:""; display:block; width:100%; background:#dbc35a; height:5px; }
.si_step .sles.step03 .sflex .radiusgrid:nth-child(1) .radius{ background:#dbc35a; transform:scale(1); }
.si_step .sles.step03 .sflex .radiusgrid:nth-child(2) .radius{ background:#dbc35a; transform:scale(1); }
.si_step .sles.step03 .sflex .radiusgrid:nth-child(3) .radius{ background:#dbc35a; transform:scale(1); }
.si_step .sles.step03 .sflex .radiusgrid .rtxt{ color:#dbc35a; }

.si_list{ margin:0 0 0.02rem 0; }
.si_list.padtop{ padding-top:0.05rem; }
.si_list:last-child{ margin:0; }
.si_list .s_h1{ font-size:0.05rem; color:#06C; margin-bottom:0.01rem; }
.si_list .s_h1 .s_res{ font-size:0.6em; color:#3ab113; }
.si_list .s_pflex{ display:flex; }
.si_list .s_p1{ color:#F33; font-size:0.03rem; }
.si_list .s_p2{ display:flex; align-items:center; justify-content:flex-end; flex:1; }
.si_list .s_p2 .s_link{ display:flex; color:#aaa; font-size:0.03rem; text-decoration:none; }
.si_list .s_p2 .s_reimg{ width:10%; margin-right:0.01rem; }
.si_list .s_p2 .s_reimg img{ width:100%; }
.si_list .s_input{ margin-bottom:0.01rem; }
.si_list .s_input input{ width:100%; background:#ecf3f9; padding:0.02rem 0.05rem; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:none; font-size:0.04rem; }
.si_list .s_input select{ width:100%; background:#ecf3f9; padding:0.02rem 0.05rem; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border:none; font-size:0.04rem; }
.si_list .buttonsty{ cursor:pointer; line-height:2.5; font-size:0.05rem; text-align:center; background:#dbc35a; color:#fff; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; border:none; width:70%; background-size:100%; position:relative; margin:auto; display:block; }
.si_list .buttonsty .arrow{ position:absolute; top:0; bottom:0; right:9%; width:3%; display: flex; align-items: center; }
.si_list .buttonsty .arrow:before{ content:""; display:block; background-image:url(../images/farther/arrow.svg); padding-bottom:130%; background-size:cover; -webkit-background-size:cover; -moz-background-size:cover; background-position:center; background-repeat:no-repeat; width:100%; }
.si_list .buttonsty.blue{ background-color: #4285F4; }

/* 光箱內 */
.si_list .buttonsty.closeTop{ font-size: 0.065rem; margin-top: -0.05rem; padding-top: 0; width: 60%; }

.si_list .s_input .s_flex{ margin-left:-10px; display:flex; }
.si_list .s_input .s_flex .fss{ padding-left:10px; width:50%; }
.si_list .s_input .s_flex .fthree{ padding-left:10px; width:33.33334%; }

.sl_finish{ text-align:center; width:80%; margin:auto; }
.sl_finish img{ width:100%; }
.sl_finish_txt{ font-size:0.04rem; color:#013aa5; text-align:center; }
.sl_name{ display:flex; padding: 10px 0 0 0; justify-content: center; align-items: center; }
.sl_name .slna01{ font-size:0.045rem; color:#d5b64f; }
.sl_name .slna02{ font-size:0.045rem; color:#d5b64f; padding:0 0 0 10px; }
.sl_name .line{ width:10%; height:1px; background:#d5b64f; margin: 0 0.03rem; }
.sl_time{ width: 64%; padding: 10px 20px; background: rgba(237,237,237,0.4); margin: 10px auto 0 auto; }
.sl_time .title{ text-align:center; font-size:0.04rem; color:#999; }
.sl_time .txt{ text-align:center; font-size:0.04rem; color:#333; }

.sl_h1{ color:#013aa5; font-size:0.05rem; margin-bottom:0.05rem; padding-top:14%; }
.sl_p{ color:#333; font-size:0.04rem; line-height:2; }
.sl_p .sec{ list-style:decimal; }
.sl_p .alpha{ list-style:upper-alpha; }
.sl_p li{ font-size:0.04rem; }
.sl_p a{ color:#013aa5; text-decoration:underline; }
.sl_p label{ display:flex; align-items: baseline; font-size:0.035rem; }
.sl_p label input{margin-right:0.02rem; }
.sl_p label .itext{ flex:1; }

.finputflex{ display:flex; margin-bottom:10px; }
.finputflex:last-child{ margin-bottom:0; }
.finputflex .f1{ flex:1; }
.finputflex .f2{ padding:0 0 0 5px; }
.finputflex .btn{ display:block; line-height:0.097rem; height:0.097rem; padding:0 0.05rem; background:#af2525; font-size:0.035rem; color:#fff; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; text-decoration:none; cursor:pointer; }
.finputflex .btn.blue{ background:#0b75b5; }
.finputflex .btn.gray{ background:#ccc; color:#333; cursor:auto; }
.finputflex .btn.green{ background:#096; }
.finputflex .btn.green:before{ content:""; display:inline-block; vertical-align:middle; width:12px; height:16px; background-image:url(../images/farther/icon_ok.svg); background-repeat:no-repeat; background-position:center; background-size:100%; margin-right:3px; }
.f_txt{ font-size:0.875rem; color:#F00; }

.linepage .line_switch_block,
.linepage .siblock{ max-height:calc(100% - 45px); width:100%; position:relative; left:0; overflow-y:auto; overflow-x:hidden; }
.linepage .line_switch_target,
.linepage .si_bgs{ position:absolute; left:0; width:calc(100% - 0.1rem); }
.linepage .button{ position:unset; display:table-cell; margin:unset; }
.linepage .button::after{ content:unset; }

/**/
.contlightbox{ position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; z-index:100; background:rgba(0,0,0,0.8); display:flex; align-items: center; justify-content: center; }
.contlightbox .wbg{ max-width:330px; width:90%; background:#fff; padding:25px; border-radius:15px; -webkit-border-radius:15px; -moz-border-radius:15px; position:relative; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; }
.contlightbox .wbg .pimg{ width:120px; margin:auto; font-size:0; margin-bottom:15px; }
.contlightbox .wbg .pimg img{ width:100%; }
.contlightbox .wbg .wtext{ font-size:20px; color:#005ea0; margin-bottom:15px; }
.contlightbox .wbg .wtext span{ font-size:24px; font-weight:bold; color:#005ea0; }
.contlightbox .wbg .wtext_2{ font-size:20px; color:#005ea0; margin-bottom:15px; }
.contlightbox .wbg .wflex{ display:flex; align-items:center; background:#f5f5f5; padding:10px; }
.contlightbox .wbg .wflex .w1{ color:#555; font-size:13px; font-weight: bold; }
.contlightbox .wbg .wflex .w2{ color:#e888b1; padding:0 10px; font-size:16px; flex:1; }
.contlightbox .wbg .wflex .w3{ width:50px; }
.contlightbox .wbg .wflex .w3 .copy{ display:block; background:#4fabdc; color:#fff; font-size:14px; width:100%; height:30px; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding:0; text-decoration: none; text-align:center; line-height:30px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; white-space:nowrap; }
.contlightbox .wbg .w_text{ line-height:1.6; margin-top:10px; color:#777; font-size:16px; }
.contlightbox .wbg .tbtns{ text-align:center; padding:20px 0 0 0; }
.contlightbox .wbg .tbtns .btn{ text-decoration:none; background:#4fabdc; border-radius:5px; display:inline-block; line-height:48px; padding:0 20px; color:#fff; font-size:20px; }
.contlightbox .wbg .closebtn{ position:absolute; top:-15px; right:-15px; width:40px; height:40px; background:#e888b1; border-radius:50%; -webkit-border-radius:50%; -moz-border-radius:50%; cursor:pointer; transform:rotate(-45deg); }
.contlightbox .wbg .closebtn:before{ content:""; display:block; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:23px; height:3px; background:#fff; }
.contlightbox .wbg .closebtn:after{ content:""; display:block; position:absolute; top:0; left:0; bottom:0; right:0; margin:auto; width:3px; height:23px; background:#fff; }

/*alert - waiting*/
.waitingblock{ display:none; transition:opacity 0.15s; opacity:0; position:fixed; top:0; left:0; bottom:0; right:0; margin:auto; background:rgba(0,0,0,0.8); align-items: center; justify-content: center; z-index:197; }
.waitingblock.waiting_show{ display:flex; }
.waitingblock .wbgs{ background:#fff; padding:40px; border-radius:5px;  }
.waitingblock .wbgs .wtext{ font-size:16px; line-height:1.6; }

/*serial number*/
.sibox .ser_logo{ width: 60%; margin: auto; }
.sibox .ser_logo img{ width: 100%; }

.ser_bulletin{ padding:70px 0 10px 0; }
.ser_bulletin img{ width:100%; }
.ser_title{ font-size: 0.05rem; color: #06C; margin-bottom: 0.01rem; text-align: center; }
.ser_title.padtop{ padding-top: 17%; }
.ser_number{ display: flex; margin-left: -10px; margin-bottom: 25px; margin-top:10px; }
.ser_number .grids{ padding-left: 10px; flex:1; }
.ser_number .grids input{ background-color:#fffce8; border: none; border: 2px solid #dbc35a; width: 100%; line-height: 36px; font-size: 0.04rem; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; text-align: center; }
.ser_selectbox{ margin-bottom: 15px; margin-top: 10px; border: 2px solid #dbc35a; font-size: 0; padding: 0.01rem 0.02rem; background: #fff; position:relative; }
.ser_selectbox select{ height:30px; border: none; width: 100%; font-size: 0.04rem; text-align:center; -webkit-appearance:none; background:#fff; text-align-last:center; position: relative; z-index: 1; opacity: 0; }
.ser_selectbox .opt{ position:absolute; font-size: 0.04rem; top:0; left:0; right:0; bottom:0; margin:auto; display:flex; align-items: center; justify-content: center; background-color:#fffce8; z-index:0; }
.ser_selectbox:after{ content:""; position:absolute; top:0; bottom:0; right:10px; margin:auto; display:block; width:0; height:0; border-style:solid; border-width:8px 5px 0 5px; border-color:#000 transparent transparent transparent; }
.ser_txt{ font-size: 0.045rem; line-height: 1.6; color: #333; padding-top: 10px; }

.ser_googlecode{ overflow:hidden; width:304px; margin:auto; }

.ser_sflex{ margin-left:-15px; display:flex; }
.ser_sflex .grids{ padding:0 0 0 15px; flex:1; }

/* ser remark */
.ser_remark{ width: 100%; text-align: center; position: absolute; top: 50px; left: 50%; transform: translate(-50%,-50%); }
.ser_remark span{ color: #e14530; font-size: 0.05rem; line-height: 0.075rem; }

/*系統維護*/
.maintain_lightbox{ position:fixed; top:0; left:0; right:0; bottom:0; margin:auto; z-index:1001; background:rgba(0,0,0,0.8); display:flex; align-items: center; justify-content: center; }
.maintain_lightbox .wbg{ background-color:#fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:20px; }
.maintain_lightbox .wbg img{ max-width:200px; width:100%; }
.maintain_lightbox .wbg .wText{ max-width:400px; color:#333; line-height:1.6; font-size:16px; background:#bff2ff; text-align:center; padding:5px; }
.maintain_lightbox .wbg .wText .oline{ padding:10px 20px; border:2px #77c9ff dashed; }
.maintain_lightbox .wbg .wText .hh1{ font-size:20px; color:#0074c2; margin-bottom:10px; display:block; }

/*系統異常*/
.reload_lightbox{ position:fixed; top:0; left:0; right:0; bottom:0; margin:auto; z-index:1001; background:rgba(0,0,0,0.8); display:flex; align-items: center; justify-content: center; }
.reload_lightbox .wbg{ background-color:#fff; border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; padding:20px; }
.reload_lightbox .wbg img{ max-width:200px; width:100%; }
.reload_lightbox .wbg .wText{ max-width:400px; color:#333; line-height:1.6; font-size:16px; background:#bff2ff; text-align:center; padding:5px; }
.reload_lightbox .wbg .wText .oline{ padding:10px 20px; border:2px #77c9ff dashed; }
.reload_lightbox .wbg .wText .hh1{ font-size:20px; color:#0074c2; margin-bottom:10px; display:block; }


/*光箱*/
.lightboxblock{ position:fixed; top:0; left:0; right:0; bottom:0; margin:auto; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.8); }
.lightboxbg{ background:#fff; padding:25px; border-radius:15px; width: 90%; max-height: 90vh; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }
.lightboxbg.auto{ width:auto; padding:40px; border-radius:5px; }
.lightboxbg .light_txt{ font-size:18px; line-height:1.6; }
.lightboxbg .light_btn{ text-align:center; padding:25px 0 0 0; }
.lightboxbg .light_btn .btns{ display:inline-block; background:#dbc35a; color:#fff; border-radius:50px; -webkit-border-radius:50px; -moz-border-radius:50px; padding:0 40px; line-height:42px; font-size:18px; text-decoration:none; }

/*驗證碼*/
.ser_code{ gap: 5px; display: flex; flex-direction: column; align-items: center; }
.code_txt{ font-size: 0.040625rem; color: #666; }
.code_box{ gap: 10px; width: 50%; margin: auto; display: flex; flex-direction: row; align-items: flex-end; }
.code_img{ width: 100%; }
.code_reload{ width: 40px; height: 40px; border: unset; background: unset; display: inline-flex; justify-content: center; align-items: center; }
.code_reload img{ width: inherit; height: inherit; }

/* Loading Box, v.250220 */
.LoadingBox{ width: 100%; gap: 5px; display: inline-flex; flex-direction: column; align-items: center; }
.LoadingBox .TxtMain{ color: #013ca6 !important; font-size: 0.05rem; line-height: 1.4; }
.LoadingBox .TxtSub{ color: #dddddd; color: #dddddd; font-size: 0.035rem; }
.LoadingBox.Error .TxtMain{ font-weight: 500; }

.poko .LoadingBox{ margin-top: 20px; }
#showDataArea_G .LoadingBox{ margin-top: 5dvh; margin-bottom: 25dvh; }

.point_newbox .pbox .grids .txts .LoadingBox .TxtMain{ font-size: 0.05rem; line-height: 0.08125rem; font-weight: 500; }

/* 我的紀錄 - 列表下 提示 */
.color_blue{ color: #013ca6; }
.color_red{ color: #F00; }
.color_gray{ color: #777; }
.poko:has(.remark_box) .list{ margin-bottom: 0; }
.remark_box{ margin: 0; display: inline-flex; width: 100%; }
.remark_box .Txt{ font-size: 0.036rem; line-height: 1.4; }