@charset "UTF-8";
/* Brand */
/* Button */
/* Status */
/* Gray */
/* Line / Border */
/* Font size */
/* =====================
   Button Size
   ===================== */
/* =====================
   Disabled
   ===================== */
/* =====================
   Gray Button Colors
   ===================== */
/* =====================
   Button Base
   ===================== */
.btn {
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  line-height: 1;
  /* icon 通用 */
}
.btn .icon {
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1em;
}
.btn svg,
.btn img {
  width: 1em;
  height: 1em;
}
.btn:disabled, .btn.is-disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.btn-icon-r {
  -webkit-flex-direction: row-reverse;
     -moz-box-orient: horizontal;
     -moz-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

/* Filled Button */
.btn-main {
  background: #dc4a19;
  color: #fff;
}
.btn-main .icon,
.btn-main svg {
  fill: currentColor;
}
.btn-main:hover {
  background: #fdfdfd;
}
.btn-main:active {
  background: #dc4a19;
}
.btn-main:disabled, .btn-main.is-disabled {
  background: #aaaaaa;
  color: #ebebeb;
}

/* Outline Button */
.btn-main-o {
  background: transparent;
  color: #dc4a19;
  border-color: #dc4a19;
}
.btn-main-o .icon,
.btn-main-o svg {
  fill: currentColor;
}
.btn-main-o:hover {
  background: #dc4a19;
  color: #fff;
}
.btn-main-o:active {
  background: #dc4a19;
  border-color: #dc4a19;
}
.btn-main-o:disabled, .btn-main-o.is-disabled {
  background: transparent;
  color: #aaaaaa;
  border-color: #aaaaaa;
}

.btn-gray {
  background: #222;
  color: #fff;
}
.btn-gray .icon,
.btn-gray svg {
  fill: currentColor;
}
.btn-gray:hover {
  background: #525252;
  color: #fff;
}
.btn-gray:active {
  background: #111;
  color: #fff;
}
.btn-gray:disabled, .btn-gray.is-disabled {
  background: #aaaaaa;
  color: #ebebeb;
}

.btn-gray-o {
  background: transparent;
  color: #222;
  border-color: #222;
}
.btn-gray-o .icon,
.btn-gray-o svg {
  fill: currentColor;
}
.btn-gray-o:hover {
  background: #222;
  color: #fff;
}
.btn-gray-o:active {
  background: #111;
  border-color: #111;
}
.btn-gray-o:disabled, .btn-gray-o.is-disabled {
  color: #ebebeb;
  border-color: #aaaaaa;
}

/* =====================
   Text Button (Link-like)
   ===================== */
.btn-text {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  color: #dc4a19;
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  cursor: pointer;
  border-bottom: 1px solid #dc4a19;
  -webkit-transition: color 0.2s ease;
  -o-transition: color 0.2s ease;
  -moz-transition: color 0.2s ease;
  transition: color 0.2s ease;
}
.btn-text:hover {
  color: #1d4ca6;
  border-bottom: 1px solid #1d4ca6;
}
.btn-text:active {
  color: #dc4a19;
}
.btn-text:disabled, .btn-text.is-disabled {
  color: #ebebeb;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: none;
}

/* =====================
   Button Size
   ===================== */
.btn-sm {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  gap: 6px;
}

.btn-md {
  height: 40px;
  padding: 0 16px;
  font-size: 16px;
  gap: 6px;
}

.btn-lg {
  height: 48px;
  padding: 0 20px;
  font-size: 18px;
  gap: 10px;
}

.g-main-s {
  --gap: 12px;
  width: 100%;
  max-width: 640px;
  padding-right: var(--gap);
  padding-left: var(--gap);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.g-main-m {
  --gap: 12px;
  width: 100%;
  max-width: 768px;
  padding-right: var(--gap);
  padding-left: var(--gap);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.g-main-l {
  --gap: 12px;
  width: 100%;
  max-width: 1024px;
  padding-right: var(--gap);
  padding-left: var(--gap);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.g-main-xl {
  --gap: 12px;
  width: 100%;
  max-width: 1280px;
  padding-right: var(--gap);
  padding-left: var(--gap);
  margin-right: auto;
  margin-left: auto;
  position: relative;
}

.row {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--gap);
  position: relative;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

.nowarp {
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}

.flexalign_cc {
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.space-between {
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.flex-center {
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.flexalign_center {
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.g-21 {
  -webkit-flex: 0 0 -webkit-calc(100% - var(--gap));
     -moz-box-flex: 0;
      -ms-flex: 0 0 calc(100% - var(--gap));
          flex: 0 0 calc(100% - var(--gap));
}

@media (min-width: 768px) {
  .g-21 {
    -webkit-flex: 0 0 -webkit-calc(50% - var(--gap));
       -moz-box-flex: 0;
        -ms-flex: 0 0 calc(50% - var(--gap));
            flex: 0 0 calc(50% - var(--gap));
  }
}
.g-321 {
  -webkit-flex: 0 0 -webkit-calc(100% - var(--gap));
     -moz-box-flex: 0;
      -ms-flex: 0 0 calc(100% - var(--gap));
          flex: 0 0 calc(100% - var(--gap));
}

@media (min-width: 768px) {
  .g-321 {
    -webkit-flex: 0 0 -webkit-calc(50% - var(--gap));
       -moz-box-flex: 0;
        -ms-flex: 0 0 calc(50% - var(--gap));
            flex: 0 0 calc(50% - var(--gap));
  }
}
@media (min-width: 992px) {
  .g-321 {
    -webkit-flex: 0 0 -webkit-calc(33.33% - var(--gap));
       -moz-box-flex: 0;
        -ms-flex: 0 0 calc(33.33% - var(--gap));
            flex: 0 0 calc(33.33% - var(--gap));
  }
}
.g-1 {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.g-basis {
  -webkit-flex-basis: 1;
      -ms-flex-preferred-size: 1;
          flex-basis: 1;
}

.g-auto {
  -webkit-flex: 0 0 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.g-33 {
  -webkit-flex: 0 0 33.33%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 33.33%;
          flex: 0 0 33.33%;
}

.g-half {
  -webkit-flex: 0 0 50%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 50%;
          flex: 0 0 50%;
}

.g-70 {
  -webkit-flex: 0 0 70%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 70%;
          flex: 0 0 70%;
}

.g-100 {
  -webkit-flex: 0 0 100%;
     -moz-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
}

label {
  display: block;
  margin: 10px 0;
  padding: 0 10px 0 0;
  font-weight: normal;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
  background: transparent;
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
}

.mgc {
  position: relative;
  width: 16px;
  height: 16px;
  background-clip: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: -0.15px 0.6px 0 0;
  vertical-align: text-bottom;
  border-radius: 3px;
  -webkit-transition: background-color 0.25s;
  -o-transition: background-color 0.25s;
  -moz-transition: background-color 0.25s;
  transition: background-color 0.25s;
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgc:checked:after {
  content: "";
  display: block;
  height: 4px;
  width: 7px;
  border: 0 solid #333;
  border-width: 0 0 2px 2px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
       transform: rotate(-45deg);
  position: absolute;
  top: 3px;
  left: 3px;
}

.mgc:disabled {
  opacity: 0.65;
}

.mgc:focus {
  outline: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0 2px #38a7ff;
}

.mgc:checked {
  background-color: #fff;
  border-color: #d7d7d7;
}

.mgc:checked:after {
  border-color: #414141;
}

.mgc-primary {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgc-primary:checked {
  background-color: #fff;
  border-color: #dc4a19;
}

.mgc-primary:checked:after {
  border-color: #dc4a19;
}

.mgc-info {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgc-info:checked {
  background-color: #5bc0de;
  border-color: #5bc0de;
}

.mgc-info:checked:after {
  border-color: #fff;
}

.mgc-warning {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgc-warning:checked {
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}

.mgc-warning:checked:after {
  border-color: #fff;
}

.mgc-danger {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgc-danger:checked {
  background-color: #cf3b3a;
  border-color: #cf3b3a;
}

.mgc-danger:checked:after {
  border-color: #fff;
}

.mgc-mg {
  width: 18px;
  height: 18px;
}

.mgc-mg:checked:after {
  top: 3px;
  left: 3px;
  height: 6px;
  width: 12px;
}

.mgc-lg {
  width: 24px;
  height: 24px;
}

.mgc-lg:checked:after {
  top: 4px;
  left: 4px;
  height: 8px;
  width: 16px;
}

.mgr {
  position: relative;
  width: 16px;
  height: 16px;
  background-clip: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: text-bottom;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgr:disabled {
  opacity: 0.65;
}

.mgr:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 0;
  width: 0;
  -webkit-transition: all 0.98s;
  -o-transition: all 0.98s;
  -moz-transition: all 0.98s;
  transition: all 0.98s;
  -webkit-transition-timing-function: linear(0, 0.015, 0.057, 0.118, 0.192, 0.275, 0.362, 0.449, 0.535, 0.617, 0.693, 0.763, 0.825, 0.879, 0.925, 0.965, 0.997, 1.022, 1.042, 1.056, 1.065, 1.071, 1.073, 1.073, 1.071, 1.067, 1.062, 1.056, 1.049, 1.043, 1.036, 1.03, 1.025, 1.019, 1.015, 1.01, 1.007, 1.004, 1.001, 0.999, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
     -moz-transition-timing-function: linear(0, 0.015, 0.057, 0.118, 0.192, 0.275, 0.362, 0.449, 0.535, 0.617, 0.693, 0.763, 0.825, 0.879, 0.925, 0.965, 0.997, 1.022, 1.042, 1.056, 1.065, 1.071, 1.073, 1.073, 1.071, 1.067, 1.062, 1.056, 1.049, 1.043, 1.036, 1.03, 1.025, 1.019, 1.015, 1.01, 1.007, 1.004, 1.001, 0.999, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
       -o-transition-timing-function: linear(0, 0.015, 0.057, 0.118, 0.192, 0.275, 0.362, 0.449, 0.535, 0.617, 0.693, 0.763, 0.825, 0.879, 0.925, 0.965, 0.997, 1.022, 1.042, 1.056, 1.065, 1.071, 1.073, 1.073, 1.071, 1.067, 1.062, 1.056, 1.049, 1.043, 1.036, 1.03, 1.025, 1.019, 1.015, 1.01, 1.007, 1.004, 1.001, 0.999, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
          transition-timing-function: linear(0, 0.015, 0.057, 0.118, 0.192, 0.275, 0.362, 0.449, 0.535, 0.617, 0.693, 0.763, 0.825, 0.879, 0.925, 0.965, 0.997, 1.022, 1.042, 1.056, 1.065, 1.071, 1.073, 1.073, 1.071, 1.067, 1.062, 1.056, 1.049, 1.043, 1.036, 1.03, 1.025, 1.019, 1.015, 1.01, 1.007, 1.004, 1.001, 0.999, 0.997, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 1);
}

.mgr:checked:before {
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.mgr:focus {
  outline: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0 2px #38a7ff;
}

.mgr:checked {
  border: 1px solid #555;
}

.mgr:checked:before {
  background-color: #555;
}

.mgr-primary {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgr-primary:checked {
  border: 1px solid #dc4a19;
}

.mgr-primary:checked:before {
  background-color: #dc4a19;
}

.mgr-success {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgr-success:checked {
  border: 1px solid #5cb85c;
}

.mgr-success:checked:before {
  background-color: #5cb85c;
}

.mgr-info {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgr-info:checked {
  border: 1px solid #5bc0de;
}

.mgr-info:checked:before {
  background-color: #5bc0de;
}

.mgr-warning {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgr-warning:checked {
  border: 1px solid #f0ad4e;
}

.mgr-warning:checked:before {
  background-color: #f0ad4e;
}

.mgr-danger {
  background-color: #fff;
  border: 1px solid #d7d7d7;
}

.mgr-danger:checked {
  border: 1px solid #cf3b3a;
}

.mgr-danger:checked:before {
  background-color: #cf3b3a;
}

.mgr-lg {
  width: 24px;
  height: 24px;
}

.mgr-lg:checked:before {
  height: 16px;
  width: 16px;
  border-radius: 50%;
}

.mgc-switch {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  width: 41px;
  height: 24px;
  border: 1px solid #dfdfdf;
  outline: 0;
  border-radius: 16px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  background: #dfdfdf;
}

.mgc-switch:before,
.mgc-switch:after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 15px;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -moz-transition: transform 0.3s, -moz-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s, -moz-transform 0.3s, -o-transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.mgc-switch:before {
  width: 39px;
  height: 22px;
  background-color: #fdfdfd;
}

.mgc-switch:after {
  width: 22px;
  height: 22px;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.mgc-switch:checked {
  border-color: #04be02;
  background-color: #04be02;
}

.mgc-switch:checked:before {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
   -ms-transform: scale(0);
    -o-transform: scale(0);
       transform: scale(0);
}

.mgc-switch:checked:after {
  -webkit-transform: translateX(17px);
  -moz-transform: translateX(17px);
   -ms-transform: translateX(17px);
    -o-transform: translateX(17px);
       transform: translateX(17px);
}

.mgc-sm.mgc-switch {
  height: 20px;
  width: 32px;
}

.mgc-sm.mgc-switch:before {
  height: 18px;
  width: 30px;
}

.mgc-sm.mgc-switch:after {
  width: 18px;
  height: 18px;
}

.mgc-sm.mgc-switch:checked:after {
  top: 0;
  left: 2px;
  -webkit-transform: translateX(10px);
  -moz-transform: translateX(10px);
   -ms-transform: translateX(10px);
    -o-transform: translateX(10px);
       transform: translateX(10px);
}

.mgc-lg.mgc-switch {
  height: 32px;
  width: 52px;
}

.mgc-lg.mgc-switch:before {
  height: 30px;
  width: 50px;
}

.mgc-lg.mgc-switch:after {
  width: 30px;
  height: 30px;
}

.mgc-lg.mgc-switch:checked:after {
  top: 0;
  left: 2px;
  -webkit-transform: translateX(18px);
  -moz-transform: translateX(18px);
   -ms-transform: translateX(18px);
    -o-transform: translateX(18px);
       transform: translateX(18px);
}

.form-style input[type=text],
.form-style input[type=date],
.form-style input[type=datetime-local],
.form-style input[type=datetime],
.form-style input[type=email],
.form-style input[type=number],
.form-style input[type=search],
.form-style input[type=time],
.form-style input[type=url],
.form-style input[type=tel],
.form-style input[type=password],
.form-style textarea,
.form-style select {
  width: 100%;
  height: 44px;
  padding: 0.625rem 1rem 0.625rem 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: #fff;
  box-shadow: var(--shadow-theme-xs);
  outline: none;
  -webkit-transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -o-transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -moz-transition: border-color 0.15s ease, box-shadow 0.15s ease;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  border: 1px solid #d1d5db;
  color: #1f2937;
}

.form-style textarea {
  min-height: 120px;
}

.form-style input[type=text]:focus,
.form-style input[type=date]:focus,
.form-style input[type=datetime-local]:focus,
.form-style input[type=datetime]:focus,
.form-style input[type=email]:focus,
.form-style input[type=number]:focus,
.form-style input[type=search]:focus,
.form-style input[type=time]:focus,
.form-style input[type=url]:focus,
.form-style input[type=tel]:focus,
.form-style input[type=password]:focus,
.form-style textarea:focus,
.form-style select:focus {
  border-color: #ec7753;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-style input[type=submit],
.form-style input[type=button] {
  width: 100%;
}

.form-style.error input[type=text],
.form-style.error input[type=date],
.form-style.error input[type=datetime-local],
.form-style.error input[type=datetime],
.form-style.error input[type=email],
.form-style.error input[type=number],
.form-style.error input[type=search],
.form-style.error input[type=time],
.form-style.error input[type=url],
.form-style.error input[type=password],
.form-style.error input[type=tel],
.form-style.error textarea,
.form-style.error select {
  box-shadow: 0 0 5px #fa5353;
  border: 1px solid #fa5353;
}

.form-style.error p {
  color: #fa5353;
  font-size: 13px;
}

.form-style input[type=text]:disabled,
.form-style input[type=date]:disabled,
.form-style input[type=datetime-local]:disabled,
.form-style input[type=datetime]:disabled,
.form-style input[type=email]:disabled,
.form-style input[type=number]:disabled,
.form-style input[type=search]:disabled,
.form-style input[type=time]:disabled,
.form-style input[type=url]:disabled,
.form-style textarea:disabled,
.form-style select:disabled {
  background-color: #eee;
  border: 1px solid #d1d5db;
}

.form-style .icon-down {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url(../images/public/ic_arr_g0.svg) no-repeat right 0.5em center;
  background-color: #fff;
  -o-background-size: 16px;
     background-size: 16px;
}

select::-ms-expand {
  display: none;
}

* {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #edf5f4;
  font-family: "Noto Sans TC", "Helvetica", "Microsoft JhengHei", Verdana, Arial, sans-serif;
  color: #1b1b1b;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.5;
  position: relative;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

p {
  margin: 0;
}

a {
  color: #333;
  margin: 0px;
  text-decoration: none;
}

a:focus,
a:hover {
  color: #dc4a19;
}

a:focus {
  outline: none !important;
  text-decoration: none;
}

button:focus {
  outline: none !important;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

em {
  font-style: normal;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  color: #333;
}

:after,
:before {
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0;
}

select::-ms-expand {
  display: none;
}

ul,
ol,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.circle_box {
  border-radius: 999em;
}

.clear {
  clear: both;
}

/* ------------------------------------ */
.mx-8 {
  margin: 0 8px !important;
}

.mx-12 {
  margin: 0 12px !important;
}

.mx-16 {
  margin: 0 16px !important;
}

.mx-24 {
  margin: 0 24px !important;
}

.mt-8 {
  margin-top: 8px !important;
}

.mt-12 {
  margin-top: 12px !important;
}

.mt-16 {
  margin-top: 16px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-24 {
  margin-top: 24px !important;
}

.mt-32 {
  margin-top: 32px !important;
}

.mt-36 {
  margin-top: 36px !important;
}

.mt-40 {
  margin-top: 40px !important;
}

.mt-44 {
  margin-top: 44px !important;
}

.mt-48 {
  margin-top: 48px !important;
}

.mb-0 {
  margin-bottom: 0px !important;
}

.mb-8 {
  margin-bottom: 8px !important;
}

.mb-12 {
  margin-bottom: 12px !important;
}

.mb-16 {
  margin-bottom: 16px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mb-24 {
  margin-bottom: 24px !important;
}

.mb-28 {
  margin-bottom: 28px !important;
}

.mb-32 {
  margin-bottom: 32px !important;
}

.mb-36 {
  margin-bottom: 36px !important;
}

.mb-40 {
  margin-bottom: 40px !important;
}

.mb-44 {
  margin-bottom: 44px !important;
}

.mb-48 {
  margin-bottom: 48px !important;
}

.ml-0 {
  margin-left: 0px !important;
}

.ml-8 {
  margin-left: 8px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.ml-16 {
  margin-left: 16px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.ml-24 {
  margin-left: 24px !important;
}

.mr-0 {
  margin-right: 0px !important;
}

.mr-8 {
  margin-right: 8px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mr-16 {
  margin-right: 16px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mr-24 {
  margin-right: 24px !important;
}

.px-8 {
  padding: 0 8px !important;
}

.px-12 {
  padding: 0 12px !important;
}

.px-16 {
  padding: 0 16px !important;
}

.px-24 {
  padding: 0 24px !important;
}

.pt-8 {
  padding-top: 8px !important;
}

.pt-12 {
  padding-top: 12px !important;
}

.pt-16 {
  padding-top: 16px !important;
}

.pt-20 {
  padding-top: 20px !important;
}

.pt-24 {
  padding-top: 24px !important;
}

.pt-28 {
  padding-top: 28px !important;
}

.pt-32 {
  padding-top: 32px !important;
}

.pt-36 {
  padding-top: 36px !important;
}

.pt-40 {
  padding-top: 40px !important;
}

.pt-44 {
  padding-top: 44px !important;
}

.pt-48 {
  padding-top: 48px !important;
}

.pb-8 {
  padding-bottom: 8px !important;
}

.pb-12 {
  padding-bottom: 12px !important;
}

.pb-16 {
  padding-bottom: 16px !important;
}

.pb-20 {
  padding-bottom: 20px !important;
}

.pb-24 {
  padding-bottom: 24px !important;
}

.pb-28 {
  padding-bottom: 28px !important;
}

.pb-32 {
  padding-bottom: 32px !important;
}

.pb-36 {
  padding-bottom: 36px !important;
}

.pb-40 {
  padding-bottom: 40px !important;
}

.pb-44 {
  padding-bottom: 44px !important;
}

.pb-48 {
  padding-bottom: 48px !important;
}

.img-rwd {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

.hide {
  display: none;
}

.text-l {
  text-align: left;
}

.text-c {
  text-align: center;
}

.text-r {
  text-align: right;
}

.p-red {
  color: #fa5353;
}

.p-green {
  color: #64a150;
}

.main-top {
  margin-top: 72px;
  -webkit-transition: margin-top 0.4s;
  -o-transition: margin-top 0.4s;
  -moz-transition: margin-top 0.4s;
  transition: margin-top 0.4s;
}

@media (max-width: 1000px) {
  .main-top {
    margin-top: 72px;
  }
}
.shareholder-page {
  background: #fff;
  color: #2a1710;
  overflow: hidden;
}

.shareholder-wrap {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 0 36px;
}

.profile-page {
  min-height: -webkit-calc(100vh - 72px);
  min-height: -moz-calc(100vh - 72px);
  min-height: calc(100vh - 72px);
  padding: 16px 0 42px;
  background: #fbf8f5;
  color: #172033;
}

.profile-wrap {
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 24px;
}

.profile-heading {
  margin-bottom: 18px;
}
.profile-heading h1 {
  color: #222;
  font-size: 31px;
  line-height: 1.18;
  font-weight: 900;
}
.profile-heading p {
  color: #1f2937;
  font-size: 14px;
  margin-top: 6px;
}

.profile-dashboard {
  display: grid;
  grid-template-columns: 364px minmax(0, 1fr);
  gap: 26px;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin-bottom: 26px;
}

.profile-card {
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
}
.profile-card h2 {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  color: #101827;
  font-size: 27px;
  line-height: 1.25;
  font-weight: 900;
}

.profile-icon,
.review-dot {
  position: relative;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-flex: 0 0 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

.profile-icon {
  width: 26px;
  height: 26px;
  color: #8090aa;
}
.profile-icon::before, .profile-icon::after {
  content: "";
  position: absolute;
}

.shield-icon svg {
  width: 24px;
  height: 24px;
}

.chart-icon {
  color: #ef2f34;
}
.chart-icon svg {
  width: 24px;
  height: 24px;
}

.calendar-icon svg {
  width: 24px;
  height: 24px;
}

.review-card {
  min-height: 352px;
  padding: 28px 26px 32px;
}

.review-steps {
  margin-top: 28px;
}
.review-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  min-height: 88px;
  color: #72819a;
}
.review-steps li::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 40px;
  bottom: -10px;
  width: 2px;
  background: #e5eaf1;
}
.review-steps li:last-child {
  min-height: 48px;
}
.review-steps li:last-child::before {
  content: none;
}
.review-steps h3 {
  color: inherit;
  font-size: 23px;
  font-weight: 900;
  padding-top: 10px;
}
.review-steps button,
.review-steps .review-file-button {
  min-width: 246px;
  height: 54px;
  margin-top: 8px;
  padding: 0 24px;
  border-radius: 10px;
  border: 0;
  color: #fff;
  background: -webkit-linear-gradient(top, #15213a, #071226);
  background: -moz-linear-gradient(top, #15213a, #071226);
  background: -o-linear-gradient(top, #15213a, #071226);
  background: linear-gradient(180deg, #15213a, #071226);
  box-shadow: 0 8px 18px rgba(3, 10, 24, 0.22);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.review-steps .review-file-button {
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.review-steps .review-file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.review-steps .review-actions {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.review-steps .review-actions button {
  -webkit-flex: 1 1 0;
     -moz-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}
.review-steps .review-actions .review-cancel {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 54px;
  padding: 0;
  border-radius: 0;
  color: #59687f;
  background: none;
  box-shadow: none;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.review-dot {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #8391a9;
  background: #f5f7fa;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.08);
  border: 2px solid #fff;
}
.review-dot::before, .review-dot::after {
  content: "";
  position: absolute;
}

.upload-icon svg {
  width: 22px;
  height: 22px;
}

.send-icon svg {
  width: 22px;
  height: 22px;
}

.check-icon svg {
  width: 22px;
  height: 22px;
}

.rebate-card {
  position: relative;
  min-height: 352px;
  overflow: hidden;
  padding: 30px 30px 28px;
  border: 0;
  background: -webkit-radial-gradient(76% 20%, circle, rgba(248, 66, 76, 0.16), transparent 18%), -webkit-linear-gradient(315deg, #101d33, #071326 56%, #101d2f);
  background: -moz-radial-gradient(76% 20%, circle, rgba(248, 66, 76, 0.16), transparent 18%), -moz-linear-gradient(315deg, #101d33, #071326 56%, #101d2f);
  background: -o-radial-gradient(76% 20%, circle, rgba(248, 66, 76, 0.16), transparent 18%), -o-linear-gradient(315deg, #101d33, #071326 56%, #101d2f);
  background: radial-gradient(circle at 76% 20%, rgba(248, 66, 76, 0.16), transparent 18%), linear-gradient(135deg, #101d33, #071326 56%, #101d2f);
  color: #d8e0ee;
}
.rebate-card h2 {
  color: #eef4ff;
}

.rebate-card__head {
  position: relative;
  z-index: 2;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 16px;
}

.review-alert {
  min-width: 218px;
  padding: 12px 18px;
  border-radius: 99px;
  background: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.review-alert.is-approved {
  color: #00bf00;
  box-shadow: 0 0 12px rgba(0, 191, 0, 0.52);
}
.review-alert.is-reviewing {
  color: #ff8800;
  box-shadow: 0 0 12px rgba(255, 136, 0, 0.58);
}
.review-alert.is-rejected {
  color: #ef2f34;
  box-shadow: 0 0 12px rgba(255, 70, 78, 0.72);
}

.rebate-metrics {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 42px;
}
.rebate-metrics span,
.rebate-metrics em {
  display: block;
  color: #6d7b94;
  font-size: 18px;
  font-weight: 900;
}
.rebate-metrics strong {
  display: block;
  color: #eef4ff;
  font-size: 43px;
  line-height: 1.08;
  font-weight: 900;
  margin-top: 8px;
}
.rebate-metrics em {
  margin-top: 6px;
  font-style: italic;
}
.rebate-metrics .is-red span,
.rebate-metrics .is-red strong {
  color: #ef3a3f;
}

.rebate-chart {
  position: absolute;
  right: 30px;
  bottom: 32px;
  left: 30px;
  height: 128px;
}
.rebate-chart::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 12px;
  border-radius: 99px;
  background: rgba(89, 104, 130, 0.2);
}
.rebate-chart .progress {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 34%;
  height: 12px;
  border-radius: 99px;
  background: -webkit-linear-gradient(left, #ff2e36, #ff7c7e);
  background: -moz-linear-gradient(left, #ff2e36, #ff7c7e);
  background: -o-linear-gradient(left, #ff2e36, #ff7c7e);
  background: linear-gradient(90deg, #ff2e36, #ff7c7e);
}
.rebate-chart .bar {
  position: absolute;
  bottom: -20px;
  width: 18px;
  border-radius: 99px;
  background: -webkit-linear-gradient(top, rgba(112, 128, 155, 0.38), rgba(112, 128, 155, 0.08));
  background: -moz-linear-gradient(top, rgba(112, 128, 155, 0.38), rgba(112, 128, 155, 0.08));
  background: -o-linear-gradient(top, rgba(112, 128, 155, 0.38), rgba(112, 128, 155, 0.08));
  background: linear-gradient(180deg, rgba(112, 128, 155, 0.38), rgba(112, 128, 155, 0.08));
}
.rebate-chart .bar-a {
  right: 18%;
  height: 162px;
}
.rebate-chart .bar-b {
  right: 11%;
  height: 54px;
}
.rebate-chart .bar-c {
  right: 4%;
  height: 142px;
}
.rebate-chart .bar-d {
  right: -3%;
  height: 100px;
}

.payout-card {
  padding: 24px 32px 28px;
}
.payout-card h2 {
  margin-bottom: 34px;
}

.payout-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  text-align: center;
}
.payout-timeline::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 9%;
  left: 9%;
  height: 2px;
  background: #e5eaf1;
}

.payout-item {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  color: #64748b;
}
.payout-item span {
  width: 34px;
  height: 34px;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 5px solid #f0f3f8;
  border-radius: 50%;
  background: #edf1f7;
  box-shadow: 0 3px 7px rgba(15, 23, 42, 0.08);
}
.payout-item span svg {
  width: 18px;
  height: 18px;
}
.payout-item time,
.payout-item p {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 900;
}
.payout-item time {
  margin-top: 14px;
}
.payout-item strong {
  color: inherit;
  font-size: 28px;
  line-height: 1.25;
  font-weight: 900;
  margin-top: 10px;
}
.payout-item.is-done {
  color: #ef2f34;
}
.payout-item.is-done span {
  color: #fff;
  border-color: #ef2f34;
  background: #ef2f34;
}
.payout-item.is-done time,
.payout-item.is-done p {
  color: #64748b;
}
.payout-item.is-active span {
  border-color: #e9ae00;
  background: #e9ae00;
}

.shareholder-hero {
  position: relative;
  background: -webkit-radial-gradient(13% 15%, circle, rgba(223, 180, 122, 0.22), transparent 16%), -webkit-linear-gradient(345deg, #fffaf2 0%, #fff 44%, #fff6e8 100%);
  background: -moz-radial-gradient(13% 15%, circle, rgba(223, 180, 122, 0.22), transparent 16%), -moz-linear-gradient(345deg, #fffaf2 0%, #fff 44%, #fff6e8 100%);
  background: -o-radial-gradient(13% 15%, circle, rgba(223, 180, 122, 0.22), transparent 16%), -o-linear-gradient(345deg, #fffaf2 0%, #fff 44%, #fff6e8 100%);
  background: radial-gradient(circle at 13% 15%, rgba(223, 180, 122, 0.22), transparent 16%), linear-gradient(105deg, #fffaf2 0%, #fff 44%, #fff6e8 100%);
  min-height: 510px;
}

.hero-grid {
  position: relative;
  min-height: 510px;
  display: grid;
  grid-template-columns: minmax(0, 50%) minmax(0, 1fr);
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0;
}

.hero-copy {
  position: relative;
  z-index: 2;
}
.hero-copy .year-mark {
  position: absolute;
  top: -128px;
  left: -58px;
  z-index: -1;
  color: rgba(130, 82, 45, 0.06);
  font-size: 205px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0;
}
.hero-copy h1 {
  color: #dc4a19;
  font-size: 60px;
  line-height: 1.28;
  font-weight: 900;
  margin-bottom: 16px;
}
.hero-copy h1 span {
  display: block;
  color: #4a2019;
  font-size: 42px;
  margin-bottom: 16px;
}
.hero-copy p:not(.year-mark) {
  color: #4c332c;
  font-size: 20px;
  margin-bottom: 28px;
}

.hero-actions {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 18px;
}

.stock-btn {
  min-width: 182px;
  height: 58px;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 16px;
  border-radius: 12px;
  font-size: 20px;
  font-weight: 800;
  border: 1px solid transparent;
  -webkit-transition: box-shadow 0.2s, -webkit-transform 0.2s;
  transition: box-shadow 0.2s, -webkit-transform 0.2s;
  -o-transition: box-shadow 0.2s, -o-transform 0.2s;
  -moz-transition: transform 0.2s, box-shadow 0.2s, -moz-transform 0.2s;
  transition: transform 0.2s, box-shadow 0.2s;
  transition: transform 0.2s, box-shadow 0.2s, -webkit-transform 0.2s, -moz-transform 0.2s, -o-transform 0.2s;
}
.stock-btn::after {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}
.stock-btn:hover {
  -webkit-transform: translateY(-2px);
     -moz-transform: translateY(-2px);
      -ms-transform: translateY(-2px);
       -o-transform: translateY(-2px);
          transform: translateY(-2px);
}

.stock-btn-primary {
  color: #fff;
  background: -webkit-linear-gradient(top, #f34a21, #cf260d);
  background: -moz-linear-gradient(top, #f34a21, #cf260d);
  background: -o-linear-gradient(top, #f34a21, #cf260d);
  background: linear-gradient(180deg, #f34a21, #cf260d);
  box-shadow: 0 7px 16px rgba(205, 39, 13, 0.28);
}
.stock-btn-primary:hover {
  color: #fff;
}

.stock-btn-outline {
  color: #df2e14;
  background: #fff;
  border-color: #df2e14;
  box-shadow: 0 6px 14px rgba(167, 98, 58, 0.12);
}

.hero-pic {
  position: absolute;
  right: -36px;
  bottom: 0;
  width: 76%;
  z-index: 1;
}
.hero-pic img {
  width: 100%;
  max-width: 720px;
  display: block;
  margin-left: auto;
}

.reward-intro {
  padding-top: 56px;
  padding-bottom: 24px;
}
.reward-intro .section-heading {
  -webkit-justify-content: flex-start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-bottom: 18px;
}
.reward-intro .section-heading span {
  width: 36px;
  height: 54px;
  border: 0;
  background: url("../images/ic_deco.png") center/contain no-repeat;
}
.reward-intro .section-heading span::after {
  content: none;
}

.reward-title,
.section-heading {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 18px;
  color: #5a2117;
  text-align: center;
}
.reward-title h2,
.section-heading h2 {
  color: inherit;
  font-size: 38px;
  font-weight: 900;
  letter-spacing: 0;
}
.reward-title span,
.section-heading span {
  width: 34px;
  height: 54px;
  border: solid #efd6b1;
  border-width: 0 7px 0 0;
  border-radius: 50%;
}
.reward-title span:last-child,
.section-heading span:last-child {
  -webkit-transform: scaleX(-1);
     -moz-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
       -o-transform: scaleX(-1);
          transform: scaleX(-1);
}

.reward-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(420px, 0.88fr);
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 54px;
}
.reward-panel p {
  font-size: 24px;
  color: #191919;
  line-height: 1.6;
}

.reward-copy {
  min-width: 0;
}

.reward-coupon {
  margin: 0;
}
.reward-coupon img {
  width: 100%;
  display: block;
}

.reward-ticket {
  min-height: 150px;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  border-radius: 8px;
  background: -webkit-linear-gradient(left, rgba(239, 214, 177, 0.48), transparent 18%, transparent 82%, rgba(239, 214, 177, 0.48)), #fffdf9;
  background: -moz-linear-gradient(left, rgba(239, 214, 177, 0.48), transparent 18%, transparent 82%, rgba(239, 214, 177, 0.48)), #fffdf9;
  background: -o-linear-gradient(left, rgba(239, 214, 177, 0.48), transparent 18%, transparent 82%, rgba(239, 214, 177, 0.48)), #fffdf9;
  background: linear-gradient(90deg, rgba(239, 214, 177, 0.48), transparent 18%, transparent 82%, rgba(239, 214, 177, 0.48)), #fffdf9;
  box-shadow: 0 2px 14px rgba(84, 43, 18, 0.12);
  color: #5b2519;
}
.reward-ticket span {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
  margin-top: 28px;
  font-weight: 800;
  font-size: 20px;
}
.reward-ticket strong {
  color: #d43a18;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 86px;
  line-height: 1;
  font-weight: 700;
}
.reward-ticket em {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
  margin-bottom: 28px;
  font-style: normal;
  font-size: 28px;
  font-weight: 800;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-top: 32px;
  padding-bottom: 56px;
}

.info-card {
  min-height: 178px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 22px;
  border: 1px solid #eadfd5;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(90, 50, 25, 0.08);
}
.info-card i {
  width: 58px;
  height: 58px;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background: #fff7ed;
  border: 1px solid #f1d7b4;
}
.info-card img {
  width: 32px;
  height: 32px;
}
.info-card h3 {
  color: #673022;
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 6px;
}
.info-card p {
  color: #26201d;
  font-size: 16px;
  line-height: 1.55;
}

.guide {
  padding-bottom: 40px;
}

.section-heading {
  margin-bottom: 24px;
}
.section-heading span {
  width: 58px;
  height: 1px;
  border: 0;
  background: -webkit-linear-gradient(left, transparent, #d7b082);
  background: -moz-linear-gradient(left, transparent, #d7b082);
  background: -o-linear-gradient(left, transparent, #d7b082);
  background: linear-gradient(90deg, transparent, #d7b082);
  border-radius: 0;
}
.section-heading span::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: -3px 0 0 auto;
  background: #d7b082;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}
.section-heading span:last-child {
  -webkit-transform: scaleX(-1);
     -moz-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
       -o-transform: scaleX(-1);
          transform: scaleX(-1);
}

.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 24px;
}

.step-card {
  position: relative;
  min-height: 354px;
  padding: 26px 28px 28px;
  border-radius: 12px;
  border: 1px solid #eadfd5;
  background: #fff;
  text-align: center;
  box-shadow: 0 4px 18px rgba(89, 48, 20, 0.08);
}
.step-card::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -25px;
  width: 18px;
  height: 18px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid #b6bdc6;
}
.step-card:last-child::after {
  content: none;
}
.step-card b {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #eadfd5;
  font-size: 52px;
  line-height: 1;
  font-weight: 900;
}
.step-card i {
  width: 78px;
  height: 78px;
  margin: 0 auto 14px;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 50%;
  background: #fff7ed;
  border: 1px solid #f1d7b4;
}
.step-card img {
  width: 38px;
  height: 38px;
}
.step-card h3 {
  color: #693023;
  font-size: 25px;
  font-weight: 900;
  margin-bottom: 10px;
}
.step-card p {
  color: #252525;
  font-size: 16px;
  line-height: 1.65;
}

.step-card.is-active {
  border: 2px solid #2f65ca;
  box-shadow: 0 5px 18px rgba(47, 101, 202, 0.25);
}
.step-card.is-active b,
.step-card.is-active h3,
.step-card.is-active .sample-link {
  color: #2457b3;
}
.step-card.is-active b:hover,
.step-card.is-active h3:hover,
.step-card.is-active .sample-link:hover {
  color: #dc4a19;
}
.step-card.is-active i {
  background: #f7fbff;
  border-color: #87a8e8;
}

.step-card.is-muted {
  opacity: 0.45;
}

.sample-link {
  display: inline-block;
  margin-top: 16px;
  font-size: 17px;
  font-weight: 900;
}

.upload-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  height: 56px;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 8px;
  background: #2457b3;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
}
.upload-btn:hover {
  color: #fff;
  background: #1d4691;
}
.upload-btn.is-disabled, .upload-btn[aria-disabled=true] {
  pointer-events: none;
  cursor: not-allowed;
  color: #fff;
  background: #9ca3af;
  box-shadow: none;
}

.step-status {
  position: absolute;
  right: 28px;
  bottom: 28px;
  left: 28px;
  padding-top: 16px;
  border-top: 1px solid #eadfd5;
  font-size: 18px;
  font-weight: 900;
}

.done {
  color: #3c9a42;
}
.done::before {
  content: "✓";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  border-radius: 50%;
  vertical-align: middle;
  background: #58aa4f;
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  text-align: center;
  font-weight: 900;
}

.pending {
  color: #8d8d8d;
}

.start-section {
  padding: 56px 0 56px;
  background: url("../images/sectionBg.png") center bottom/cover no-repeat;
}
.start-section h2 {
  color: #5b2519;
  text-align: center;
  font-size: 38px;
  font-weight: 900;
  margin-bottom: 18px;
}

.start-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}

.start-card {
  position: relative;
  display: block;
  aspect-ratio: 1000/500;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.open-card h3 {
  color: #4a1f18;
}

.blue-btn {
  color: #fff;
  background: -webkit-linear-gradient(top, #0b68db, #004db0);
  background: -moz-linear-gradient(top, #0b68db, #004db0);
  background: -o-linear-gradient(top, #0b68db, #004db0);
  background: linear-gradient(180deg, #0b68db, #004db0);
  box-shadow: 0 7px 16px rgba(0, 74, 168, 0.26);
}
.blue-btn:hover {
  color: #fff;
}

@media (max-width: 1200px) {
  .hero-copy h1 {
    font-size: 54px;
  }
  .hero-copy h1 span {
    font-size: 38px;
  }
  .hero-pic {
    width: 72%;
  }
  .hero-pic img {
    max-width: 670px;
  }
}
@media (max-width: 1100px) {
  .hero-copy h1 {
    font-size: 46px;
  }
  .hero-copy h1 span {
    font-size: 34px;
  }
  .hero-pic {
    width: 64%;
    right: -20px;
  }
  .hero-pic img {
    max-width: 610px;
  }
  .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .steps {
    gap: 18px;
  }
}
@media (max-width: 1000px) {
  .profile-page {
    padding: 18px 0 34px;
  }
  .profile-dashboard {
    grid-template-columns: 1fr;
  }
  .review-card,
  .rebate-card {
    min-height: auto;
  }
  .rebate-chart {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin-top: 34px;
  }
  .shareholder-wrap {
    padding: 0 20px;
  }
  .shareholder-hero,
  .hero-grid {
    min-height: 0;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    padding-top: 46px;
  }
  .hero-copy {
    text-align: center;
  }
  .hero-copy .year-mark {
    top: -54px;
    left: 50%;
    font-size: 108px;
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .hero-copy h1 {
    font-size: 36px;
  }
  .hero-copy h1 span {
    font-size: 27px;
  }
  .hero-actions {
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .hero-pic {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 0 auto;
  }
  .hero-pic img {
    max-width: 100%;
    margin-right: auto;
  }
  .reward-panel,
  .steps,
  .start-grid {
    grid-template-columns: 1fr;
  }
  .reward-intro .section-heading {
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .reward-panel {
    gap: 18px;
    text-align: center;
  }
  .reward-coupon {
    max-width: 560px;
    margin: 0 auto;
  }
  .reward-ticket strong {
    font-size: 66px;
  }
  .step-card::after {
    top: auto;
    right: 50%;
    bottom: -25px;
    -webkit-transform: translateX(50%) rotate(90deg);
       -moz-transform: translateX(50%) rotate(90deg);
        -ms-transform: translateX(50%) rotate(90deg);
         -o-transform: translateX(50%) rotate(90deg);
            transform: translateX(50%) rotate(90deg);
  }
}
@media (max-width: 620px) {
  .profile-wrap {
    padding: 0 16px;
  }
  .profile-heading h1 {
    font-size: 28px;
  }
  .profile-card {
    border-radius: 18px;
  }
  .profile-card h2 {
    font-size: 24px;
  }
  .review-card,
  .rebate-card,
  .payout-card {
    padding: 22px 18px;
  }
  .review-steps {
    padding-left: 0;
  }
  .review-steps button,
  .review-steps .review-file-button {
    min-width: 0;
    width: 100%;
    font-size: 17px;
  }
  .review-steps .review-actions button {
    width: 100%;
  }
  .rebate-card__head {
    -webkit-align-items: flex-start;
       -moz-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-flex-direction: column;
       -moz-box-orient: vertical;
       -moz-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .review-alert {
    width: 100%;
    min-width: 0;
  }
  .rebate-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 28px;
  }
  .rebate-metrics strong {
    font-size: 38px;
  }
  .payout-timeline {
    grid-template-columns: 1fr;
    gap: 26px;
    text-align: left;
  }
  .payout-timeline::before {
    top: 18px;
    bottom: 18px;
    left: 16px;
    width: 2px;
    height: auto;
  }
  .payout-item {
    grid-template-columns: 34px minmax(0, 1fr);
    justify-items: start;
    -webkit-column-gap: 16px;
       -moz-column-gap: 16px;
            column-gap: 16px;
  }
  .payout-item span {
    grid-row: 1/span 3;
  }
  .payout-item time {
    margin-top: 0;
  }
  .payout-item time,
  .payout-item p {
    font-size: 19px;
  }
  .payout-item strong {
    font-size: 24px;
  }
  .shareholder-wrap {
    padding: 32px 16px;
  }
  .start-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hero-copy h1 {
    font-size: 31px;
  }
  .hero-copy h1 span {
    font-size: 23px;
  }
  .stock-btn {
    width: 100%;
  }
  .hero-actions {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    gap: 10px;
  }
  .hero-actions .stock-btn {
    -webkit-flex: 1 1 0;
       -moz-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 52px;
    gap: 10px;
    padding: 0 10px;
    font-size: 17px;
  }
  .reward-title h2,
  .section-heading h2,
  .start-section h2 {
    font-size: 30px;
  }
  .reward-panel {
    gap: 18px;
  }
  .reward-ticket {
    min-height: 120px;
  }
  .reward-ticket strong {
    font-size: 52px;
  }
  .info-grid {
    grid-template-columns: 1fr;
  }
  .info-card {
    min-height: 0;
  }
}
.ic {
  position: relative;
  display: inline;
  width: 32px;
  height: 32px;
}

.ic_arr1 {
  -webkit-mask: url("../images/public/ic_arr.svg") no-repeat center;
          mask: url("../images/public/ic_arr.svg") no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.ic_s {
  background: url(../images/public/ic_smartpush_A.svg) no-repeat;
  -o-background-size: cover;
     background-size: cover;
}

.animation {
  position: relative;
  width: 100%;
  height: 100vh;
}
.animation .fx {
  width: 100%;
  max-width: 860px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 3;
}
.animation .fx .fx_inner {
  height: 0;
  padding-bottom: 100%;
  background: url(../images/animation/light_fx_fps.png) 0 0 no-repeat;
  background-repeat: no-repeat;
  /*----呼叫動畫名稱 ----*/
  -webkit-animation-name: Fps12p;
     -moz-animation-name: Fps12p;
       -o-animation-name: Fps12p;
          animation-name: Fps12p;
  /*----播放時間----*/
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  /*----影格數----*/
  -webkit-animation-timing-function: steps(12, end);
     -moz-animation-timing-function: steps(12, end);
       -o-animation-timing-function: steps(12, end);
          animation-timing-function: steps(12, end);
  /*----播放次數 ----*/
  -webkit-animation-iteration-count: 1;
     -moz-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
  /*----停在最後一格 ----*/
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*----background-size 的寬度值設為 N影格 ×100% ----*/
  -o-background-size: 1200% 100%;
     background-size: 1200% 100%;
  position: relative;
  display: block;
}
.animation .scenes {
  width: 100%;
  max-width: 640px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 2;
}
.animation .scenes .scenes_inner {
  height: 0;
  padding-bottom: 100%;
}
.animation .bg {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
       -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}
.animation .bg .bg_inner {
  height: 0;
  padding-bottom: 100%;
  background: url(../images/animation/light2_fx_fps.svg) 0 0 no-repeat;
  background-repeat: no-repeat;
  /*----呼叫動畫名稱 ----*/
  -webkit-animation-name: Fps12p;
     -moz-animation-name: Fps12p;
       -o-animation-name: Fps12p;
          animation-name: Fps12p;
  /*----播放時間----*/
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  /*----影格數----*/
  -webkit-animation-timing-function: steps(12, end);
     -moz-animation-timing-function: steps(12, end);
       -o-animation-timing-function: steps(12, end);
          animation-timing-function: steps(12, end);
  /*----播放次數 ----*/
  -webkit-animation-iteration-count: 1;
     -moz-animation-iteration-count: 1;
       -o-animation-iteration-count: 1;
          animation-iteration-count: 1;
  /*----停在最後一格 ----*/
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*----background-size 的寬度值設為 N影格 ×100% ----*/
  -o-background-size: 1200% 100%;
     background-size: 1200% 100%;
  position: relative;
  display: block;
}

.MG_icon {
  width: 100%;
  /*----物件需要顯示的寬高比例 ----*/
  height: 0;
  padding-bottom: 100%;
  /*----逐格動畫圖片檔 ----*/
  background: url(../images/public/ic_smartpush_A.svg) 0 0 no-repeat;
  background-repeat: no-repeat;
  /*----呼叫動畫名稱 ----*/
  -webkit-animation-name: Fps12p;
     -moz-animation-name: Fps12p;
       -o-animation-name: Fps12p;
          animation-name: Fps12p;
  /*----播放時間----*/
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  /*----影格數----*/
  -webkit-animation-timing-function: steps(12, end);
     -moz-animation-timing-function: steps(12, end);
       -o-animation-timing-function: steps(12, end);
          animation-timing-function: steps(12, end);
  /*----播放次數 ----*/
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  /*----停在最後一格 ----*/
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*----background-size 的寬度值設為 N影格 ×100% ----*/
  -o-background-size: 1200% 100%;
     background-size: 1200% 100%;
  position: relative;
  display: block;
}

@-webkit-keyframes Fps12p {
  0% {
    background-position: left top;
  }
  100% {
    /*----background-position 的結束位置為 100% + (100 ÷(N - 1))% ----*/
    background-position: 109.09% top;
  }
}

@-moz-keyframes Fps12p {
  0% {
    background-position: left top;
  }
  100% {
    /*----background-position 的結束位置為 100% + (100 ÷(N - 1))% ----*/
    background-position: 109.09% top;
  }
}

@-o-keyframes Fps12p {
  0% {
    background-position: left top;
  }
  100% {
    /*----background-position 的結束位置為 100% + (100 ÷(N - 1))% ----*/
    background-position: 109.09% top;
  }
}

@keyframes Fps12p {
  0% {
    background-position: left top;
  }
  100% {
    /*----background-position 的結束位置為 100% + (100 ÷(N - 1))% ----*/
    background-position: 109.09% top;
  }
}
.mod_tip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  color: #000;
  cursor: pointer;
}
.mod_tip .active {
  color: red;
}
.mod_tip .tiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}
.mod_tip .tiptext:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.mod_tip:hover .tiptext {
  visibility: visible;
}
.mod_tip .toggle {
  visibility: visible;
}

.lightbox-target {
  display: none;
  position: fixed;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  -webkit-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  z-index: 2000;
}

.lightbox-target .content {
  width: 90%;
  height: auto;
  background: #fff;
  color: #333;
  margin: auto;
  margin-top: 6%;
  padding: 8px;
  position: relative;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  border-radius: 12px;
}
.lightbox-target .content .lightboxbody {
  position: relative;
  max-height: 100%;
  overflow-y: auto;
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}
.lightbox-target .content .title {
  text-align: center;
  font-size: 28px;
  line-height: 52px;
}

.lightbox-target .content {
  max-width: 640px;
  max-height: 460px;
}

@media (max-width: 640px) {
  .lightbox-target .content {
    max-width: 640px;
    max-height: 640px;
  }
}
.lightboxopen {
  display: block;
}

.lightbox-close {
  display: block;
  width: 40px;
  height: 40px;
  -moz-box-sizing: border-box;
       box-sizing: border-box;
  background: #dc4a19;
  color: #fff;
  position: absolute;
  top: -20px;
  right: -20px;
  -webkit-transition: ease-in-out 0.5s;
  -o-transition: ease-in-out 0.5s;
  -moz-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
  z-index: 99;
  cursor: pointer;
  border-radius: 99em;
}

.lightbox-close:before,
.lightbox-close:after {
  content: " ";
  display: block;
  height: 24px;
  width: 1px;
  background: #fff;
  position: absolute;
  left: 20px;
  top: 8px;
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}

.lightbox-close:after {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.login-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 24px;
}
.login-modal.is-open {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.login-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.login-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(676px, 100%);
  min-height: 400px;
  padding: 62px 66px 40px;
  border: 1px solid #777;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
}
.login-modal__dialog h2 {
  color: #050505;
  font-size: 26px;
  line-height: 1.35;
  font-weight: 900;
  margin-bottom: 42px;
}

.login-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 34px;
  height: 34px;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}
.login-modal__close::before, .login-modal__close::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 3px;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: #444;
}
.login-modal__close::before {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}
.login-modal__close::after {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.login-modal__actions {
  display: grid;
  gap: 14px;
}

.login-modal__primary,
.login-modal__outline {
  min-height: 70px;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 14px;
  font-size: 20px;
  font-weight: 900;
}

.login-modal__primary {
  color: #fff;
  background: #ff3028;
}
.login-modal__primary:hover {
  color: #fff;
  background: #e92821;
}

.login-modal__outline {
  color: #202020;
  border: 2px solid #777;
  background: #fff;
}
.login-modal__outline:hover {
  color: #202020;
  border-color: #333;
}

.login-modal__link {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 8px auto 0;
  color: #2457b3;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  border-bottom: 2px solid #2457b3;
}
.login-modal__link:hover {
  color: #1d4691;
  border-color: #1d4691;
}

.login-modal-open {
  overflow: hidden;
}

.sample-modal {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: none;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 24px;
}
.sample-modal.is-open {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

.sample-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.sample-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: -webkit-calc(100vh - 48px);
  max-height: -moz-calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  padding: 48px 20px 20px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  overflow: auto;
}
.sample-modal__dialog img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.sample-modal__close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: transparent;
  cursor: pointer;
}
.sample-modal__close::before, .sample-modal__close::after {
  content: "";
  position: absolute;
  top: 16px;
  left: 3px;
  width: 28px;
  height: 3px;
  border-radius: 99px;
  background: #444;
}
.sample-modal__close::before {
  -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
          transform: rotate(45deg);
}
.sample-modal__close::after {
  -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.sample-modal-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .login-modal {
    padding: 18px;
  }
  .login-modal__dialog {
    min-height: auto;
    padding: 58px 22px 32px;
    border-radius: 14px;
  }
  .login-modal__dialog h2 {
    font-size: 23px;
    margin-bottom: 34px;
  }
  .login-modal__primary,
  .login-modal__outline {
    min-height: 60px;
    font-size: 18px;
  }
  .login-modal__link {
    font-size: 18px;
  }
  .sample-modal {
    padding: 16px;
  }
  .sample-modal__dialog {
    max-height: -webkit-calc(100vh - 32px);
    max-height: -moz-calc(100vh - 32px);
    max-height: calc(100vh - 32px);
    padding: 46px 14px 14px;
  }
}
.scale11 {
  height: 0;
  padding-bottom: 100%;
  -o-background-size: cover;
     background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  overflow: hidden;
  position: relative;
}
.scale11 img {
  width: 100%;
}

.scale169 {
  height: 0;
  padding-bottom: 52.5%;
  -o-background-size: cover;
     background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: block;
  overflow: hidden;
  position: relative;
}
.scale169 img {
  width: 100%;
}

.ellipsis1 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 1;
  -webkit-line-clamp: 1;
}

.ellipsis2 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  -webkit-line-clamp: 2;
}

.ellipsis3 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.videobg {
  width: 100%;
  height: 100vh;
}
.videobg .video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  -o-object-fit: cover;
     object-fit: cover;
}

.youtube-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.mod-pages {
  margin-top: 32px;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}
.mod-pages .paginations {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.mod-pages .paginations .pageitem {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border: #e5e5e5 solid 1px;
  border-radius: 8px;
  margin: 0 3px;
  background-color: #fff;
  text-align: center;
}
.mod-pages .paginations .active {
  border: 1px solid #dc4a19;
}
.mod-pages .paginations .active a {
  color: #dc4a19;
}

.table-normal {
  position: relative;
  margin: 0 auto 20px;
}
.table-normal .table-wrap {
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
.table-normal table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
}
.table-normal tr:nth-child(even) {
  background: #f9f9f9;
}
.table-normal th,
.table-normal td {
  padding: 8px 4px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.table-normal th {
  background: #ec7753;
}
.table-normal th span {
  display: block;
  font-size: 16px;
}
.table-normal thead,
.table-normal tfoot {
  background: #f9f9f9;
}

.mod-table-scrollx {
  overflow-x: auto;
  margin: 0 auto 20px;
}
.mod-table-scrollx table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 16px;
  border-top: 1px solid #e5e5e5;
  border-left: 1px solid #e5e5e5;
}
.mod-table-scrollx tr:nth-child(even) {
  background: #f9f9f9;
}
.mod-table-scrollx th,
.mod-table-scrollx td {
  padding: 8px 4px;
  border-right: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  vertical-align: top;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  white-space: nowrap;
}
.mod-table-scrollx th {
  background: #ec7753;
}
.mod-table-scrollx th span {
  display: block;
  font-size: 16px;
}

.list-decimal {
  padding-left: 24px;
}
.list-decimal li {
  list-style-type: decimal;
  margin-bottom: 8px;
}
.list-decimal li li {
  margin-left: 24px;
  list-style-type: disc;
}

.list-disc {
  padding-left: 24px;
}
.list-disc li {
  list-style-type: disc;
  margin-bottom: 8px;
}

.swiper-pagination-bullet-active {
  background: #dc4a19;
}

.ic {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 32px;
}

.ic_search {
  background: url(../images/public/ic_search.svg) no-repeat;
  -o-background-size: cover;
     background-size: cover;
}

.ic_person {
  background: url(../images/public/ic_person.svg) no-repeat;
  -o-background-size: cover;
     background-size: cover;
}

.ic_older {
  background: url(../images/public/ic_older.svg) no-repeat;
  -o-background-size: cover;
     background-size: cover;
}

.ic_notify {
  background: url(../images/public/ic_notify.svg) no-repeat;
  -o-background-size: cover;
     background-size: cover;
}

.ic_s {
  background: url(../images/public/ic_smartpush_A.svg) no-repeat;
  -o-background-size: cover;
     background-size: cover;
}

.ic_fb {
  background: url(../images/public/ic_fb.svg) no-repeat center center;
  -o-background-size: cover;
     background-size: cover;
}

.ic_fb2 {
  background: url(../images/public/ic_fb2.svg) no-repeat center center;
  -o-background-size: cover;
     background-size: cover;
}

.ic_line {
  background: url(../images/public/ic_line.svg) no-repeat center center;
  -o-background-size: cover;
     background-size: cover;
}

.ic_line2 {
  background: url(../images/public/ic_line2.svg) no-repeat center center;
  -o-background-size: cover;
     background-size: cover;
}

.ic_language {
  background: url(../images/public/ic_language.svg) no-repeat;
  -o-background-size: contain;
     background-size: contain;
  background-position: 0 4px;
  position: relative;
  display: inline-block;
  width: 40px;
  height: 32px;
}

.ic_close {
  background: url(../images/public/ic_close.svg) no-repeat center center, #fff;
  -o-background-size: cover;
     background-size: cover;
  border-radius: 50%;
}

.ic_message {
  background: url(../images/public/ic_smartpush.svg) no-repeat center center, #fff;
  -o-background-size: 38px 38px;
     background-size: 38px 38px;
  width: 44px;
  height: 44px;
}

.message_MG {
  width: 100%;
  /*----物件需要顯示的寬高比例 ----*/
  height: 0;
  padding-bottom: 100%;
  /*----逐格動畫圖片檔 ----*/
  background: url(../images/public/ic_smartpush_A.svg) 0 0 no-repeat;
  background-repeat: no-repeat;
  /*----呼叫動畫名稱 ----*/
  -webkit-animation-name: Fps12p;
     -moz-animation-name: Fps12p;
       -o-animation-name: Fps12p;
          animation-name: Fps12p;
  /*----播放時間----*/
  -webkit-animation-duration: 1s;
     -moz-animation-duration: 1s;
       -o-animation-duration: 1s;
          animation-duration: 1s;
  /*----影格數----*/
  -webkit-animation-timing-function: steps(12, end);
     -moz-animation-timing-function: steps(12, end);
       -o-animation-timing-function: steps(12, end);
          animation-timing-function: steps(12, end);
  /*----播放次數 ----*/
  -webkit-animation-iteration-count: infinite;
     -moz-animation-iteration-count: infinite;
       -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  /*----停在最後一格 ----*/
  -webkit-animation-fill-mode: forwards;
     -moz-animation-fill-mode: forwards;
       -o-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  /*----background-size 的寬度值設為 N影格 ×100% ----*/
  -o-background-size: 1200% 100%;
     background-size: 1200% 100%;
  position: relative;
  display: block;
}

@keyframes Fps12p {
  0% {
    background-position: left top;
  }
  100% {
    /*----background-position 的結束位置為 100% + (100 ÷(N - 1))% ----*/
    background-position: 109.09% top;
  }
}
a.sr-only {
  padding: 4px 8px;
  background: #d1a36d;
  color: #fff;
  position: fixed;
  top: -3rem;
  left: 0;
  -webkit-transition: top 1s ease-out;
  -o-transition: top 1s ease-out;
  -moz-transition: top 1s ease-out;
  transition: top 1s ease-out;
  z-index: 210;
}

a.sr-only:focus {
  position: fixed;
  left: 0px;
  top: 0px;
  outline-color: transparent;
  -webkit-transition: top 0.1s ease-in;
  -o-transition: top 0.1s ease-in;
  -moz-transition: top 0.1s ease-in;
  transition: top 0.1s ease-in;
  background: #d1a36d;
  font-weight: 700;
}

.heroheader {
  background: #fff;
  display: block;
  position: fixed;
  width: 100%;
  z-index: 200;
  top: 0;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  -moz-transition: 0.5s;
  transition: 0.5s;
  border-top: 2px solid;
  -moz-border-image: -moz-linear-gradient(left, #aa0225, #aa0225 75%, #004738 75%) 1;
    -o-border-image: -o-linear-gradient(left, #aa0225, #aa0225 75%, #004738 75%) 1;
       border-image: -webkit-linear-gradient(left, #aa0225, #aa0225 75%, #004738 75%) 1;
       border-image: linear-gradient(to right, #aa0225, #aa0225 75%, #004738 75%) 1;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.heroheader .inner {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  position: relative;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0 12px;
}
.heroheader .inner .logobox {
  -webkit-flex: 0 0 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 72px;
}
.heroheader .inner .logobox .logo {
  display: inline-block;
  vertical-align: middle;
}
.heroheader .inner .logobox .logo img {
  width: 150px;
  padding-right: 8px;
}
.heroheader .inner .logobox span {
  color: #d1a36d;
  font-size: 1.1em;
  font-weight: 550;
  padding-top: 9px;
  padding-left: 9px;
  vertical-align: top;
  display: inline-block;
  border-left: 1px solid #c4c4c4;
}
.heroheader .inner .navbox {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.heroheader .inner .navbox .in {
  width: 100%;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.heroheader .inner .navbox .in .nav {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-order: 1;
     -moz-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}
.heroheader .inner .navbox .in .nav .menu.switch {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}
.heroheader .inner .navbox .in .member {
  -webkit-flex: 0 0 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  -webkit-order: 2;
     -moz-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-left: 24px;
}
.heroheader .inner .navbox .in .channel {
  display: none;
  -webkit-order: 3;
     -moz-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}
.heroheader .inner .hamburger {
  display: none;
  width: 44px;
  height: 44px;
  background: url(../images/public/ic_hamburger.svg) no-repeat center center;
  -o-background-size: 28px;
     background-size: 28px;
  cursor: pointer;
}
.heroheader .inner .mod-message {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.heroheader .inner .mod-message .ic {
  width: 44px;
  height: 44px;
}

@media (max-width: 1000px) {
  .heroheader .inner {
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-justify-content: space-between;
       -moz-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 0 8px;
  }
  .heroheader .inner .logobox {
    height: 72px;
  }
  .heroheader .inner .logobox .logo {
    height: auto;
  }
  .heroheader .inner .logobox .logo img {
    width: clamp(82px, 36vw, 112px);
  }
  .heroheader .inner .navbox {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    background-color: transparent;
    z-index: auto;
  }
  .heroheader .inner .navbox .in {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .heroheader .inner .navbox .in .nav {
    -webkit-order: 1;
       -moz-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    -webkit-flex: 0 0 auto;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .heroheader .inner .navbox .in .nav .nav-title {
    display: none;
  }
  .heroheader .inner .navbox .in .nav .menu.switch {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
       -moz-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .heroheader .inner .navbox .in .nav .menu.switch li {
    -webkit-flex: 0 0 auto;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
  }
  .heroheader .inner .navbox .in .nav .menu.switch a {
    padding-left: 0;
    line-height: 72px;
    border-bottom: 0;
    font-size: 14px;
    white-space: nowrap;
  }
  .heroheader .inner .navbox .in .nav .menu.switch li + li {
    margin-left: 8px;
  }
  .heroheader .inner .navbox .in .member {
    -webkit-order: 2;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    -webkit-flex: 0 0 auto;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding: 0;
    margin-left: 12px;
  }
  .heroheader .inner .navbox .in .member li {
    display: none;
    height: 72px;
    margin-left: 0;
  }
  .heroheader .inner .navbox .in .member li:first-child {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
  }
  .heroheader .inner .navbox .in .member .loginbt {
    padding: 6px 16px;
    white-space: nowrap;
  }
  .heroheader .inner .navbox .in .channel {
    display: block;
    -webkit-flex: 0 0 100%;
       -moz-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    -webkit-order: 3;
       -moz-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .heroheader .inner .hamburger {
    display: none;
  }
  .heroheader .inner .show {
    display: block;
  }
}
.member {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
.member li {
  display: none;
}
.member li:nth-child(1) {
  display: inline;
}

.membernav {
  position: relative;
  cursor: pointer;
}
.membernav .lists {
  position: absolute;
  display: none;
  background-color: #fff;
  width: 128px;
  top: 36px;
  right: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 110;
  border-radius: 12px;
  text-align: center;
}
.membernav .lists a {
  line-height: 44px;
  width: 100%;
  display: block;
  color: #333;
}
.membernav .lists a:hover {
  color: #d1a36d;
}
.membernav .lists a i {
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
}

@media (max-width: 1000px) {
  .member li {
    position: relative;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-flex: 0 0 auto;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    margin-left: 8px;
    height: 36px;
  }
  .member li:nth-child(2) {
    margin-left: auto;
  }
  .member li .ic {
    width: 36px;
    height: 36px;
    -o-background-size: 24px;
       background-size: 24px;
    background-position: center 8px;
  }
  .member li span {
    float: right;
    line-height: 36px;
  }
  .member li .close_hamburger .ic {
    -o-background-size: 18px;
       background-size: 18px;
    background-position: center center;
  }
  .membernav .lists {
    top: 58px;
    right: 0;
    max-width: -webkit-calc(100vw - 16px);
    max-width: -moz-calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}
.nav-title {
  display: none;
}

@media (max-width: 1000px) {
  .nav-title {
    display: block;
    background: #e1e1e1;
    padding: 4px 12px;
    font-size: 0.9em;
    font-weight: bold;
    color: #333;
  }
}
.font0 {
  font-size: 0em;
}

.mod-language {
  cursor: pointer;
  position: relative;
}
.mod-language .language-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 88px;
  top: 100%;
  right: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 110;
  border-radius: 12px;
  overflow: hidden;
}
.mod-language .language-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}
.mod-language .language-content a:hover {
  background-color: #ddd;
}

.mod-message {
  cursor: pointer;
  position: relative;
}
.mod-message .message-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 260px;
  top: 100%;
  right: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 110;
  padding: 8px;
}
.mod-message .message-content .bt {
  display: block;
  color: #e40439;
  text-align: center;
}

.mod-content-card {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 8px 0;
}
.mod-content-card .pic {
  -webkit-flex: 0 0 88px;
     -moz-box-flex: 0;
      -ms-flex: 0 0 88px;
          flex: 0 0 88px;
  margin-right: 4px;
}
.mod-content-card .content {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.mod-content-card .content .time {
  font-size: 0.8em;
  text-align: right;
  color: #999;
}

.loginbt {
  background-color: rgb(241, 241, 241);
  color: #333;
  padding: 8px 24px;
  border-radius: 50px;
}
.loginbt:hover {
  color: #d1a36d;
}

@media (max-width: 1000px) {
  .loginbt {
    display: inline-block;
  }
}
.channel {
  font-size: 1.1em;
}
.channel a {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: 50px;
  padding-left: 20px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  color: #333;
}
.channel a:hover {
  color: #d1a36d;
}
.channel a .pic {
  -webkit-flex: 0 0 52px;
     -moz-box-flex: 0;
      -ms-flex: 0 0 52px;
          flex: 0 0 52px;
  margin-right: 8px;
}
.channel a p {
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 12px;
}

.nav {
  display: block;
  background: #fff;
  font-size: 1.1em;
}
.nav .menu li {
  position: relative;
}
.nav .menu a {
  padding-left: 20px;
  line-height: 52px;
  font-weight: 550;
  color: #333;
}
.nav .menu a:hover {
  color: #d1a36d;
}
.nav .active {
  color: #d1a36d;
}
.nav .subhide {
  display: none;
}
.nav .open {
  display: block;
}
.nav {
  /*menu層style*/
}
.nav .menu > li a {
  display: block;
  border-bottom: 1px solid #e5e5e5;
}
.nav {
  /*第一層style*/
}
.nav .sub-menu {
  background-color: #fcfcfc;
}
.nav .sub-menu a {
  font-weight: normal;
  padding-left: 40px;
}
.nav {
  /*第二層style*/
}
.nav .sub-menu ul {
  background-color: #f6f6f6;
}
.nav .sub-menu ul a {
  font-size: 0.9em;
  color: #555;
  padding-left: 60px;
}
.nav {
  /*第三層style*/
}
.nav .sub-menu ul ul a {
  padding-left: 56px;
}
.nav .toggleIcon {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 44px;
  background: url(../images/public/ic_plus.svg) no-repeat;
  background-position: right 24px top 50%;
  margin-top: 5px;
  -o-background-size: 16px;
     background-size: 16px;
}
.nav .closebt {
  background: url(../images/public/ic_minus.svg) no-repeat;
  background-position: right 24px top 50%;
  -o-background-size: 16px;
     background-size: 16px;
}

/* nav pc版顯示*/
@media screen and (min-width: 1000px) {
  .nav {
    background: #fff;
    /*PC所有層基本style*/
  }
  .nav .menu {
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    -webkit-justify-content: center;
       -moz-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .nav .menu li {
    position: relative;
    -webkit-flex: 0 0 auto;
       -moz-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    text-align: center;
    padding: 0 12px;
  }
  .nav .menu a {
    line-height: 40px;
    padding-left: 0px;
  }
  .nav .subhide {
    display: block;
  }
  .nav .open {
    display: block;
  }
  .nav {
    /*pc menu層style*/
  }
  .nav .menu > li a {
    display: block;
    border-bottom: 0px;
  }
  .nav {
    /*pc 第一層style*/
  }
  .nav .sub-menu {
    background: url(../images/public/megamenu_bg.jpg) no-repeat;
    -o-background-size: cover;
       background-size: cover;
    background-position: bottom;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 12px 6px 32px;
  }
  .nav .sub-menu li {
    float: none;
    width: 15%;
    padding: 0 4px;
    display: inline-block;
    vertical-align: top;
  }
  .nav .sub-menu li a {
    font-weight: normal;
    padding-left: 0px;
    border-bottom: 1px solid #e5e5e5;
    background: url(../images/public/ic_nav.svg) no-repeat center left;
    text-align: left;
    padding-left: 12px;
  }
  .nav .sub-menu li a[href="javascript:void(0)"]:hover {
    color: #333;
    cursor: text;
  }
  .nav {
    /*pc 第二層style*/
  }
  .nav .sub-menu ul {
    background-color: transparent;
  }
  .nav .sub-menu ul li {
    width: 100%;
  }
  .nav .sub-menu ul li a {
    font-size: 0.9em;
    padding-left: 0px;
    border-bottom: 0;
    background: none;
  }
  .nav .sub-menu ul li a:hover {
    color: #d1a36d;
  }
  .nav {
    /*pc 第三層style*/
  }
  .nav .sub-menu ul ul {
    background-color: #f5f5f5;
  }
  .nav .sub-menu ul ul a {
    padding-left: 0px;
  }
  .toggleIcon {
    display: none;
  }
  .closebt {
    display: none;
  }
  .mega {
    position: static !important;
  }
  .mega > .subhide {
    display: none;
  }
  .mega > .open {
    display: block;
  }
}
footer {
  background: #444444;
  text-align: center;
  color: #fff;
  font-size: 0.9em;
}
footer p {
  width: 100%;
  max-width: 1260px;
  padding: 12px;
  margin: 0 auto;
}
footer .copywriter {
  background-color: #cf092c;
}

.roundpic {
  display: inline-block;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid rgb(235, 235, 235);
}

.roundpic.line {
  border: 2px solid #7cd231;
}

.event-rules {
  width: 100%;
  padding: 0px 0 64px;
  background: #f1f1f1;
}
.event-rules .inner {
  width: 100%;
  max-width: 1260px;
  margin: 0 auto;
  padding: 32px 36px;
  border-radius: 8px;
  color: #333;
  font-size: 16px;
  line-height: 1.75;
}
.event-rules .rule-group + .rule-group {
  margin-top: 28px;
}
.event-rules h3 {
  margin-bottom: 12px;
  color: #202020;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 900;
}
.event-rules ol {
  margin: 0;
  padding-left: 1.5em;
  list-style-position: outside;
}
.event-rules li {
  list-style: decimal;
}
.event-rules li + li {
  margin-top: 8px;
}

@media (max-width: 620px) {
  .event-rules {
    padding: 32px 16px 44px;
  }
  .event-rules .inner {
    padding: 22px 18px;
    font-size: 15px;
    line-height: 1.75;
  }
  .event-rules .rule-group + .rule-group {
    margin-top: 24px;
  }
  .event-rules h3 {
    margin-bottom: 10px;
    font-size: 18px;
  }
  .event-rules li + li {
    margin-top: 7px;
  }
}/*# sourceMappingURL=daui.css.map */